GD-ML/AndroidCode

1<!DOCTYPE html>2<html lang="en">3<head>4<meta charset="UTF-8">5<title>New voice note UI</title>6<meta name="viewport" content="width=1080, initial-scale=1.0">7<style>8  body { margin: 0; padding: 0; background: transparent; font-family: Roboto, Arial, sans-serif; }9  #render-target {10    width: 1080px; height: 2400px; position: relative; overflow: hidden;11    background: #ffffff;12  }13 14  /* Top status bar */15  .status-bar {16    position: absolute; top: 0; left: 0; width: 100%; height: 96px;17    background: #1E88E5; color: #fff;18  }19  .status-time {20    position: absolute; left: 36px; top: 26px; font-size: 40px; font-weight: 500;21  }22  .status-icons {23    position: absolute; right: 28px; top: 26px; display: flex; gap: 28px; align-items: center;24  }25  .icon svg { width: 40px; height: 40px; fill: none; stroke: #fff; stroke-width: 3; }26 27  /* Blue header / app bar */28  .app-bar {29    position: absolute; top: 96px; left: 0; width: 100%; height: 370px; background: #1E88E5; color: #fff;30  }31  .app-title {32    position: absolute; left: 48px; top: 80px; font-size: 72px; font-weight: 500;33  }34  .app-actions {35    position: absolute; right: 24px; top: 40px; display: flex; gap: 36px; align-items: center;36  }37  .app-actions svg { width: 54px; height: 54px; stroke: #fff; stroke-width: 3; fill: none; }38 39  .tabs {40    position: absolute; bottom: 30px; left: 0; width: 100%; display: flex; justify-content: space-between; padding: 0 48px;41    letter-spacing: 3px;42  }43  .tab {44    font-size: 34px; font-weight: 600; color: #ffffff;45  }46  .tab.inactive { opacity: 0.5; }47 48  /* Thumbnail strip card overlapping header */49  .thumb-strip {50    position: absolute; top: 450px; left: 0; width: 100%; height: 150px;51    background: #fff; box-shadow: 0 2px 3px rgba(0,0,0,0.1);52    display: flex; align-items: center; gap: 18px; padding: 0 24px;53    border-top: 1px solid #e0e0e0;54  }55  .thumb {56    width: 150px; height: 140px; background: #E0E0E0; border: 1px solid #BDBDBD;57    display: flex; align-items: center; justify-content: center; color: #757575; font-size: 28px; border-radius: 6px;58  }59  .thumb.small {60    width: 120px; height: 120px;61  }62 63  /* Main content */64  .content {65    position: absolute; top: 700px; left: 0; width: 100%; text-align: center;66  }67  .recording-name {68    font-size: 60px; color: #424242; font-style: italic; display: inline-block; padding-bottom: 16px; border-bottom: 5px solid #9e9e9e;69  }70  .subtext {71    margin-top: 26px; font-size: 48px; color: #9E9E9E;72  }73 74  .divider {75    position: absolute; left: 48px; right: 48px; top: 1680px; height: 1px; background: #90CAF9; border-top: 4px solid #90CAF9;76  }77  .storage {78    position: absolute; top: 1760px; width: 100%; text-align: center; font-size: 34px; color: #9E9E9E;79  }80 81  /* Floating record button */82  .record-btn {83    position: absolute; left: 50%; transform: translateX(-50%); top: 1950px;84    width: 150px; height: 150px; background: #E53935; border-radius: 50%;85    box-shadow: 0 8px 18px rgba(0,0,0,0.2); display: flex; align-items: center; justify-content: center;86  }87  .record-btn svg { width: 60px; height: 60px; fill: #fff; }88 89  /* Gesture bar */90  .gesture-bar {91    position: absolute; bottom: 36px; left: 50%; transform: translateX(-50%);92    width: 300px; height: 12px; background: #9E9E9E; border-radius: 6px; opacity: 0.6;93  }94</style>95</head>96<body>97<div id="render-target">98 99  <div class="status-bar">100    <div class="status-time">1:42</div>101    <div class="status-icons">102      <div class="icon">103        <!-- Wi-Fi -->104        <svg viewBox="0 0 24 24">105          <path d="M2 9c5-4 15-4 20 0" />106          <path d="M6 12c3-3 9-3 12 0" />107          <path d="M10 15c2-2 4-2 6 0" />108          <circle cx="12" cy="18" r="1.6" fill="#fff" stroke="none"></circle>109        </svg>110      </div>111      <div class="icon">112        <!-- Battery -->113        <svg viewBox="0 0 28 16">114          <rect x="1" y="2" width="22" height="12" rx="2" ry="2" />115          <rect x="24" y="6" width="3" height="4" rx="1" ry="1" />116          <rect x="3" y="4" width="16" height="8" fill="#fff" stroke="none"></rect>117        </svg>118      </div>119    </div>120  </div>121 122  <div class="app-bar">123    <div class="app-title">New voice note</div>124 125    <div class="app-actions">126      <!-- Slider icon -->127      <svg viewBox="0 0 24 24">128        <path d="M4 6h12" />129        <circle cx="18" cy="6" r="2" fill="#fff" stroke="none"></circle>130        <path d="M4 12h8" />131        <circle cx="14" cy="12" r="2" fill="#fff" stroke="none"></circle>132        <path d="M4 18h16" />133        <circle cx="8" cy="18" r="2" fill="#fff" stroke="none"></circle>134      </svg>135      <!-- More vertical icon -->136      <svg viewBox="0 0 24 24">137        <circle cx="12" cy="5" r="2" fill="#fff" stroke="none"></circle>138        <circle cx="12" cy="12" r="2" fill="#fff" stroke="none"></circle>139        <circle cx="12" cy="19" r="2" fill="#fff" stroke="none"></circle>140      </svg>141    </div>142 143    <div class="tabs">144      <div class="tab">RECORD</div>145      <div class="tab inactive">LISTEN</div>146    </div>147  </div>148 149  <!-- Thumbnail strip overlapping header edge -->150  <div class="thumb-strip">151    <div class="thumb">[IMG: App icon]</div>152    <div class="thumb">[IMG: Photo]</div>153    <div class="thumb">[IMG: Photo]</div>154    <div class="thumb">[IMG: Photo]</div>155    <div class="thumb">[IMG: Photo]</div>156    <div class="thumb">[IMG: Photo]</div>157    <div class="thumb">[IMG: Photo]</div>158  </div>159 160  <!-- Main content -->161  <div class="content">162    <div class="recording-name"><em>My recording 2</em>.m4a</div>163    <div class="subtext">is ready to start</div>164  </div>165 166  <div class="divider"></div>167  <div class="storage">~6406h left on storage</div>168 169  <div class="record-btn">170    <!-- Microphone icon -->171    <svg viewBox="0 0 24 24">172      <rect x="9" y="5" width="6" height="10" rx="3" ry="3" />173      <path d="M6 11c0 4 3 6 6 6s6-2 6-6" stroke="#fff" stroke-width="2" fill="none"/>174      <path d="M12 17v4" stroke="#fff" stroke-width="2"/>175      <path d="M9 21h6" stroke="#fff" stroke-width="2"/>176    </svg>177  </div>178 179  <div class="gesture-bar"></div>180</div>181</body>182</html>