GD-ML/AndroidCode

1<!DOCTYPE html>2<html lang="en">3<head>4<meta charset="UTF-8">5<meta name="viewport" content="width=1080, initial-scale=1.0">6<title>Audio Player UI</title>7<style>8  body { margin: 0; padding: 0; background: transparent; font-family: "Roboto", Arial, sans-serif; }9  #render-target {10    width: 1080px; height: 2400px;11    position: relative; overflow: hidden;12    background: #12141b; /* dark app background */13  }14 15  /* Top app bar */16  .status-spacer { height: 96px; }17  .appbar {18    position: absolute; top: 96px; left: 0; right: 0;19    height: 100px; display: flex; align-items: center;20    padding: 0 36px; color: #dbe0ea;21  }22  .appbar .left { width: 100px; display: flex; align-items: center; }23  .appbar .actions { margin-left: auto; display: flex; gap: 42px; }24  .icon {25    width: 48px; height: 48px; stroke: #c9ced9; fill: none; stroke-width: 2.5;26  }27  .icon.dot { fill: #c9ced9; stroke: none; }28 29  /* Large card with waveform */30  .card {31    position: absolute; top: 220px; left: 36px; width: 1008px; height: 1180px;32    background: #1c1f27; border-radius: 56px; color: #e6e9ef;33    box-shadow: 0 0 0 1px rgba(255,255,255,0.03) inset;34  }35  .card .title {36    font-size: 66px; font-weight: 500; margin: 64px 60px 16px 60px; color: #e1e6ef;37    letter-spacing: 0.2px;38  }39  .card .subtitle {40    font-size: 34px; color: #9aa1ad; margin-left: 60px;41  }42  .wave-area {43    position: absolute; left: 40px; right: 40px; bottom: 100px; top: 300px;44  }45  /* dotted timeline */46  .wave-dots {47    position: absolute; left: 0; right: 0; top: 50%;48    height: 6px;49    background-image: radial-gradient(#c9ccd3 45%, rgba(0,0,0,0) 47%);50    background-size: 18px 6px;51    background-repeat: repeat-x;52    opacity: 0.85;53  }54  /* playhead line */55  .playhead {56    position: absolute; left: 480px; top: 140px; bottom: 160px;57    width: 4px; background: #8f939b; border-radius: 2px;58  }59  /* waveform bars on the right */60  .bars { position: absolute; right: 10px; bottom: 40px; display: flex; align-items: flex-end; gap: 12px; }61  .bar {62    width: 14px; background: #5f6f8f; border-radius: 7px;63    box-shadow: 0 1px 0 rgba(255,255,255,0.06) inset;64  }65 66  /* Segmented chips */67  .chips {68    position: absolute; top: 1480px; left: 120px; right: 120px;69    display: flex; gap: 28px; justify-content: center;70  }71  .chip {72    display: flex; align-items: center; gap: 20px;73    padding: 26px 44px; border-radius: 60px;74    background: #2a2d36; color: #d4d8e0; font-size: 44px;75    box-shadow: 0 0 0 1px rgba(255,255,255,0.06) inset;76  }77  .chip.active { background: #3a3e48; }78  .chip svg { width: 44px; height: 44px; stroke: #cbd1dc; fill: none; stroke-width: 2.2; }79 80  /* Progress bar */81  .progress-wrap {82    position: absolute; top: 1650px; left: 80px; right: 80px;83  }84  .progress-track {85    position: relative; height: 10px; background: #4c515b; border-radius: 5px;86  }87  .progress-val {88    position: absolute; height: 10px; background: #7792c0; width: 650px; border-radius: 5px;89  }90  .progress-knob {91    position: absolute; top: -16px; left: 0;92    width: 32px; height: 32px; border-radius: 16px; background: #e9b7c6;93    box-shadow: 0 0 0 4px rgba(233,183,198,0.25);94  }95  .time-row {96    position: absolute; top: 1700px; left: 80px; right: 80px;97    display: flex; justify-content: space-between; color: #dbe0ea; font-size: 40px;98  }99 100  /* Control buttons */101  .controls {102    position: absolute; top: 1860px; left: 0; right: 0;103    display: flex; justify-content: space-around; align-items: center;104    padding: 0 60px;105  }106  .ctl-circle {107    width: 260px; height: 260px; border-radius: 130px; background: #272b33;108    display: flex; justify-content: center; align-items: center;109    box-shadow: 0 0 0 1px rgba(255,255,255,0.05) inset;110  }111  .ctl-center {112    width: 260px; height: 260px; border-radius: 52px; background: #e9b7c6;113    display: flex; justify-content: center; align-items: center; color: #2b2b2b;114    box-shadow: 0 10px 20px rgba(0,0,0,0.25), 0 0 0 6px rgba(255,255,255,0.04) inset;115  }116  .pause-bars {117    width: 80px; height: 80px; display: flex; justify-content: space-between; align-items: center;118  }119  .pause-bars span { width: 22px; height: 80px; background: #3a3a3a; border-radius: 6px; opacity: 0.85; }120 121  .ctl-icon { width: 110px; height: 110px; stroke: #cbd0db; fill: none; stroke-width: 3; }122  .ctl-text { position: absolute; font-size: 40px; color: #d7dbe4; }123 124  /* Bottom gesture bar */125  .gesture {126    position: absolute; bottom: 42px; left: 50%; transform: translateX(-50%);127    width: 280px; height: 14px; background: #e9eaee; border-radius: 7px; opacity: 0.85;128  }129</style>130</head>131<body>132<div id="render-target">133 134  <div class="status-spacer"></div>135 136  <div class="appbar">137    <div class="left">138      <!-- Back arrow -->139      <svg class="icon" viewBox="0 0 24 24">140        <path d="M15.5 4.5L7 12l8.5 7.5"/>141      </svg>142    </div>143    <div class="actions">144      <!-- Star -->145      <svg class="icon" viewBox="0 0 24 24">146        <path d="M12 3l3.2 6.5 7 1-5.1 4.8 1.5 7.2L12 18.6 5.4 22.5l1.5-7.2L1.8 10.5l7-1z"/>147      </svg>148      <!-- Share -->149      <svg class="icon" viewBox="0 0 24 24">150        <circle cx="5" cy="12" r="2"></circle>151        <circle cx="19" cy="5" r="2"></circle>152        <circle cx="19" cy="19" r="2"></circle>153        <path d="M7 12l9-6M7 12l9 6"/>154      </svg>155      <!-- Scissors -->156      <svg class="icon" viewBox="0 0 24 24">157        <circle cx="6" cy="17" r="2"></circle>158        <circle cx="6" cy="7" r="2"></circle>159        <path d="M8 7l12 7M8 17l12-7"/>160      </svg>161      <!-- Search -->162      <svg class="icon" viewBox="0 0 24 24">163        <circle cx="11" cy="11" r="6"></circle>164        <path d="M20 20l-4.5-4.5"/>165      </svg>166      <!-- More (vertical dots) -->167      <svg class="icon" viewBox="0 0 24 24">168        <circle class="dot" cx="12" cy="5" r="2.2"></circle>169        <circle class="dot" cx="12" cy="12" r="2.2"></circle>170        <circle class="dot" cx="12" cy="19" r="2.2"></circle>171      </svg>172    </div>173  </div>174 175  <!-- Main card -->176  <div class="card">177    <div class="title">Unnamed</div>178    <div class="subtitle">Tue, Nov 21 • 4:01 PM</div>179 180    <div class="wave-area">181      <div class="wave-dots"></div>182      <div class="playhead"></div>183 184      <div class="bars">185        <div class="bar" style="height:120px;"></div>186        <div class="bar" style="height:220px;"></div>187        <div class="bar" style="height:280px;"></div>188        <div class="bar" style="height:240px;"></div>189        <div class="bar" style="height:300px;"></div>190        <div class="bar" style="height:310px;"></div>191        <div class="bar" style="height:290px;"></div>192        <div class="bar" style="height:270px;"></div>193        <div class="bar" style="height:260px;"></div>194        <div class="bar" style="height:250px;"></div>195        <div class="bar" style="height:270px;"></div>196        <div class="bar" style="height:280px;"></div>197        <div class="bar" style="height:260px;"></div>198        <div class="bar" style="height:240px;"></div>199        <div class="bar" style="height:220px;"></div>200        <div class="bar" style="height:260px;"></div>201        <div class="bar" style="height:280px;"></div>202        <div class="bar" style="height:300px;"></div>203        <div class="bar" style="height:240px;"></div>204        <div class="bar" style="height:200px;"></div>205        <div class="bar" style="height:180px;"></div>206        <div class="bar" style="height:220px;"></div>207        <div class="bar" style="height:260px;"></div>208      </div>209    </div>210  </div>211 212  <!-- Segmented chips -->213  <div class="chips">214    <div class="chip active">215      <svg viewBox="0 0 24 24">216        <path d="M4 18v-6M10 18V6M16 18v-9M22 18v-3"></path>217      </svg>218      <span>Audio</span>219    </div>220    <div class="chip">221      <svg viewBox="0 0 24 24">222        <path d="M4 6h16M4 12h16M4 18h10"></path>223      </svg>224      <span>Transcript</span>225    </div>226  </div>227 228  <!-- Progress bar and times -->229  <div class="progress-wrap">230    <div class="progress-track">231      <div class="progress-val"></div>232      <div class="progress-knob"></div>233    </div>234  </div>235  <div class="time-row">236    <div>00:02</div>237    <div>-00:52</div>238  </div>239 240  <!-- Controls -->241  <div class="controls">242    <div style="position: relative;">243      <div class="ctl-circle">244        <svg class="ctl-icon" viewBox="0 0 24 24">245          <path d="M12 5a7 7 0 1 0 7 7M8 8l-3 3 3 3"/>246        </svg>247      </div>248      <div class="ctl-text" style="left: 104px; top: 102px;">5</div>249    </div>250 251    <div class="ctl-center">252      <div class="pause-bars"><span></span><span></span></div>253    </div>254 255    <div style="position: relative;">256      <div class="ctl-circle">257        <svg class="ctl-icon" viewBox="0 0 24 24">258          <path d="M12 5a7 7 0 1 1-7 7M16 8l3 3-3 3"/>259        </svg>260      </div>261      <div class="ctl-text" style="left: 98px; top: 102px;">10</div>262    </div>263  </div>264 265  <!-- Bottom gesture bar -->266  <div class="gesture"></div>267 268</div>269</body>270</html>