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 Screen</title>7<style>8  body { margin: 0; padding: 0; background: transparent; font-family: Roboto, Arial, sans-serif; }9  #render-target {10    position: relative;11    overflow: hidden;12    width: 1080px;13    height: 2400px;14    background: #0E1316;15    color: #E8EAED;16  }17 18  /* Status bar */19  .status-bar {20    height: 88px;21    padding: 0 36px;22    display: flex;23    align-items: center;24    justify-content: space-between;25    font-size: 42px;26    color: #E8EAED;27    opacity: 0.9;28  }29  .status-icons {30    display: flex;31    align-items: center;32    gap: 26px;33  }34  .sb-dot {35    width: 16px; height: 16px; background: #E8EAED; border-radius: 50%;36    opacity: 0.9;37  }38  .sb-battery {39    width: 38px; height: 20px; border: 2px solid #E8EAED; border-radius: 4px; position: relative;40  }41  .sb-battery::after {42    content: "";43    position: absolute; right: -8px; top: 6px; width: 6px; height: 8px; background: #E8EAED; border-radius: 2px;44  }45  .sb-battery .fill {46    position: absolute; left: 2px; top: 2px; height: 14px; width: 24px; background: #E8EAED; border-radius: 2px;47  }48 49  /* Top app bar */50  .app-bar {51    height: 120px;52    padding: 0 36px;53    display: flex;54    align-items: center;55    gap: 52px;56    color: #E8EAED;57  }58  .icon-btn {59    width: 64px; height: 64px;60    display: inline-flex; align-items: center; justify-content: center;61    color: #E8EAED; opacity: 0.95;62  }63  .icon-btn svg { width: 42px; height: 42px; stroke: #E8EAED; fill: none; stroke-width: 3.5; }64 65  /* Card */66  .card {67    margin: 24px 28px 0 28px;68    background: #23282C;69    border-radius: 44px;70    padding: 52px 52px 64px 52px;71    min-height: 1060px;72    box-shadow: 0 0 0 1px rgba(255,255,255,0.02) inset;73  }74  .title {75    font-size: 58px;76    font-weight: 500;77    letter-spacing: 0.2px;78    color: #F5F7FA;79  }80  .subtitle {81    margin-top: 18px;82    font-size: 40px;83    color: #B6C0C8;84  }85 86  /* Waveform area */87  .wave-area {88    position: relative;89    margin-top: 140px;90    height: 680px;91    border-radius: 28px;92    background: #23282C;93  }94  .playhead {95    position: absolute;96    left: 360px;97    top: 140px;98    width: 4px;99    height: 400px;100    background: #8D98A3;101    border-radius: 3px;102  }103  .wave-dots {104    position: absolute;105    right: 60px;106    bottom: 150px;107    display: flex;108    align-items: flex-end;109    gap: 18px;110  }111  .bar {112    width: 18px;113    background: #8D98A3;114    border-radius: 6px;115    opacity: 0.9;116  }117  .dot {118    width: 14px; height: 14px; background: #8D98A3; border-radius: 50%; opacity: 0.6;119  }120 121  /* Tabs */122  .tabs {123    margin: 40px 64px 0 64px;124    display: flex;125    gap: 22px;126  }127  .tab {128    display: inline-flex; align-items: center; gap: 18px;129    padding: 22px 34px;130    background: #384046;131    color: #D9E3EA;132    border-radius: 999px;133    font-size: 40px;134  }135  .tab.active { background: #464E54; }136  .tab svg { width: 40px; height: 40px; stroke: #D9E3EA; fill: none; stroke-width: 3; }137 138  /* Progress */139  .progress {140    margin: 46px 48px 0 48px;141  }142  .track {143    position: relative;144    height: 8px;145    background: #6F7A85;146    border-radius: 8px;147  }148  .thumb {149    position: absolute; left: 0; top: -18px;150    width: 36px; height: 36px; background: #C9D6E4; border-radius: 50%;151    box-shadow: 0 0 0 4px rgba(201,214,228,0.2);152  }153  .time-row {154    margin-top: 20px;155    display: flex; justify-content: space-between; align-items: center;156    font-size: 38px; color: #D0D6DB;157  }158 159  /* Controls */160  .controls {161    margin-top: 56px;162    padding: 0 60px;163    display: flex;164    justify-content: space-between;165    align-items: center;166  }167  .ctrl {168    width: 240px; height: 240px;169    background: #2B3136;170    border-radius: 50%;171    display: flex; align-items: center; justify-content: center;172  }173  .ctrl.center {174    background: #BFCDE0;175  }176  .ctrl svg { width: 96px; height: 96px; stroke: #E8EAED; fill: none; stroke-width: 4; }177  .ctrl.center svg { stroke: #2B3136; fill: #2B3136; }178 179  .ctrl-label {180    position: absolute; font-size: 34px; color: #E8EAED;181  }182  .label-left { transform: translate(28px, 80px); }183  .label-right { transform: translate(28px, 80px); }184 185  /* Home indicator */186  .home-indicator {187    position: absolute;188    bottom: 44px;189    left: 50%;190    transform: translateX(-50%);191    width: 360px; height: 12px;192    background: #E5E5E5;193    border-radius: 12px;194    opacity: 0.7;195  }196</style>197</head>198<body>199<div id="render-target">200 201  <!-- Status bar -->202  <div class="status-bar">203    <div>8:52</div>204    <div class="status-icons">205      <div class="sb-dot"></div>206      <div class="sb-dot" style="width:22px;height:22px;border-radius:4px;"></div>207      <div class="sb-battery"><div class="fill"></div></div>208    </div>209  </div>210 211  <!-- Top app bar -->212  <div class="app-bar">213    <div class="icon-btn">214      <svg viewBox="0 0 48 48"><path d="M30 10 L16 24 L30 38"/></svg>215    </div>216    <div class="icon-btn">217      <svg viewBox="0 0 48 48"><path d="M24 6 L28 18 L42 18 L30 26 L34 40 L24 30 L14 40 L18 26 L6 18 L20 18 Z"/></svg>218    </div>219    <div class="icon-btn">220      <svg viewBox="0 0 48 48">221        <circle cx="12" cy="30" r="6" />222        <circle cx="36" cy="18" r="6" />223        <circle cx="36" cy="36" r="6" />224        <path d="M16 28 L30 20" />225        <path d="M16 32 L30 34" />226      </svg>227    </div>228    <div class="icon-btn">229      <svg viewBox="0 0 48 48"><path d="M14 34 L34 14 M14 14 L34 34"/></svg>230    </div>231    <div class="icon-btn">232      <svg viewBox="0 0 48 48"><circle cx="20" cy="20" r="12"/><path d="M30 30 L42 42"/></svg>233    </div>234    <div class="icon-btn">235      <svg viewBox="0 0 48 48"><circle cx="24" cy="12" r="3"/><circle cx="24" cy="24" r="3"/><circle cx="24" cy="36" r="3"/></svg>236    </div>237  </div>238 239  <!-- Content card -->240  <div class="card">241    <div class="title">Birthday Song</div>242    <div class="subtitle">Thu, Dec 14 • 7:56 AM</div>243 244    <div class="wave-area">245      <div class="playhead"></div>246      <div class="wave-dots">247        <div class="dot"></div>248        <div class="dot"></div>249        <div class="bar" style="height:56px;"></div>250        <div class="bar" style="height:80px;"></div>251        <div class="bar" style="height:120px;"></div>252        <div class="bar" style="height:84px;"></div>253        <div class="bar" style="height:68px;"></div>254        <div class="dot"></div>255        <div class="dot"></div>256        <div class="dot"></div>257        <div class="bar" style="height:68px;"></div>258        <div class="bar" style="height:92px;"></div>259        <div class="bar" style="height:132px;"></div>260        <div class="bar" style="height:156px;"></div>261        <div class="bar" style="height:164px;"></div>262      </div>263    </div>264  </div>265 266  <!-- Tabs -->267  <div class="tabs">268    <div class="tab active">269      <svg viewBox="0 0 48 48">270        <path d="M12 8 V40 M24 14 V40 M36 20 V40"/>271      </svg>272      <span>Audio</span>273    </div>274    <div class="tab">275      <svg viewBox="0 0 48 48">276        <path d="M10 14 H38 M10 24 H38 M10 34 H28"/>277      </svg>278      <span>Transcript</span>279    </div>280  </div>281 282  <!-- Progress bar -->283  <div class="progress">284    <div class="track"></div>285    <div class="thumb"></div>286    <div class="time-row">287      <div>00:00</div>288      <div>-00:54</div>289    </div>290  </div>291 292  <!-- Controls -->293  <div class="controls">294    <div class="ctrl">295      <svg viewBox="0 0 96 96">296        <path d="M42 20 L26 20 A26 26 0 1 0 70 48" />297      </svg>298      <div class="ctrl-label label-left">5</div>299    </div>300    <div class="ctrl center">301      <svg viewBox="0 0 96 96">302        <polygon points="36,28 72,48 36,68" />303      </svg>304    </div>305    <div class="ctrl">306      <svg viewBox="0 0 96 96">307        <path d="M54 20 L70 20 A26 26 0 1 1 26 48" />308      </svg>309      <div class="ctrl-label label-right">10</div>310    </div>311  </div>312 313  <!-- Home indicator -->314  <div class="home-indicator"></div>315</div>316</body>317</html>