GD-ML/AndroidCode
13.4k
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 Playback UI</title>7<style>8 body { margin: 0; padding: 0; background: transparent; font-family: system-ui, -apple-system, Segoe UI, Roboto, "Helvetica Neue", Arial, "Noto Sans", "Liberation Sans", sans-serif; }9 #render-target {10 position: relative;11 overflow: hidden;12 width: 1080px;13 height: 2400px;14 background: #141923;15 border-radius: 36px;16 color: #d7dce7;17 }18 19 /* Status bar */20 .status-bar {21 position: absolute;22 top: 20px;23 left: 24px;24 right: 24px;25 height: 72px;26 display: flex;27 align-items: center;28 justify-content: space-between;29 color: #eef1f7;30 font-weight: 500;31 font-size: 36px;32 opacity: 0.95;33 }34 .status-icons {35 display: flex;36 gap: 22px;37 align-items: center;38 }39 .status-icons svg { width: 32px; height: 32px; fill: none; stroke: #eef1f7; stroke-width: 2.4; }40 41 /* Top app bar */42 .top-bar {43 position: absolute;44 top: 110px;45 left: 24px;46 right: 24px;47 height: 80px;48 display: flex;49 align-items: center;50 justify-content: space-between;51 color: #cfd5e2;52 }53 .bar-left { display: flex; align-items: center; gap: 18px; }54 .bar-right { display: flex; align-items: center; gap: 48px; }55 .icon-btn svg { width: 48px; height: 48px; stroke: #cfd5e2; fill: none; stroke-width: 2.6; }56 57 /* Card */58 .card {59 position: absolute;60 left: 36px;61 right: 36px;62 top: 210px;63 height: 1160px;64 background: #1b2029;65 border-radius: 56px;66 box-shadow: 0 10px 24px rgba(0,0,0,0.4);67 }68 .title {69 position: absolute;70 left: 48px;71 top: 56px;72 font-size: 64px;73 font-weight: 600;74 letter-spacing: 0.2px;75 color: #e3e7f1;76 }77 .subtitle {78 position: absolute;79 left: 48px;80 top: 140px;81 font-size: 34px;82 color: #aab2c3;83 }84 .label-row {85 position: absolute;86 left: 48px;87 top: 240px;88 display: flex;89 align-items: center;90 gap: 20px;91 color: #99adff;92 font-size: 36px;93 font-weight: 500;94 }95 .label-row svg { width: 42px; height: 42px; stroke: #99adff; fill: none; stroke-width: 2.8; }96 97 /* Waveform */98 .wave-wrap {99 position: absolute;100 left: 48px;101 right: 48px;102 bottom: 96px;103 height: 420px;104 }105 .wave {106 position: absolute;107 left: 0;108 right: 0;109 bottom: 0;110 height: 100%;111 display: flex;112 align-items: flex-end;113 justify-content: space-between;114 gap: 18px;115 }116 .wave-side {117 width: 48%;118 height: 100%;119 display: flex;120 align-items: flex-end;121 gap: 14px;122 }123 .bar {124 width: 8px;125 border-radius: 6px;126 background: #92a6ff;127 opacity: 0.95;128 }129 .bar.thin { width: 6px; opacity: 0.85; }130 .playhead {131 position: absolute;132 left: 50%;133 transform: translateX(-50%);134 bottom: 0;135 width: 4px;136 height: 320px;137 background: #8ea2ff;138 border-radius: 2px;139 }140 .dots {141 position: absolute;142 left: 12%;143 right: 12%;144 bottom: 180px;145 height: 12px;146 display: flex;147 justify-content: center;148 gap: 16px;149 }150 .dot {151 width: 10px;152 height: 10px;153 background: #8ea2ff;154 border-radius: 50%;155 opacity: 0.85;156 }157 158 /* Segmented control */159 .segmented {160 position: absolute;161 top: 1410px;162 left: 130px;163 width: 820px;164 height: 116px;165 background: #2a2f3a;166 border-radius: 58px;167 display: flex;168 align-items: center;169 padding: 0 18px;170 gap: 18px;171 }172 .seg-btn {173 flex: 1;174 height: 88px;175 border-radius: 44px;176 display: flex;177 align-items: center;178 justify-content: center;179 gap: 18px;180 color: #cfd5e2;181 font-size: 38px;182 font-weight: 600;183 cursor: default;184 }185 .seg-btn.active {186 background: #3a404c;187 color: #ffffff;188 }189 .seg-btn svg { width: 40px; height: 40px; stroke: currentColor; fill: none; stroke-width: 2.6; }190 191 /* Seek bar */192 .seek-area {193 position: absolute;194 top: 1550px;195 left: 72px;196 right: 72px;197 }198 .track {199 position: relative;200 height: 12px;201 border-radius: 8px;202 background: linear-gradient(90deg, #f0b8c7 0 18%, #7990ff 18% 86%, #5b6575 86% 100%);203 }204 .knob {205 position: absolute;206 top: -12px;207 left: 160px;208 width: 32px;209 height: 32px;210 background: #f0b8c7;211 border-radius: 50%;212 box-shadow: 0 2px 6px rgba(0,0,0,0.3);213 border: 2px solid #f6c3d2;214 }215 .seek-times {216 margin-top: 24px;217 display: flex;218 justify-content: space-between;219 color: #d7dce7;220 font-size: 36px;221 letter-spacing: 0.5px;222 }223 224 /* Controls */225 .controls {226 position: absolute;227 top: 1680px;228 left: 48px;229 right: 48px;230 display: flex;231 align-items: center;232 justify-content: space-between;233 }234 .ctrl-circle {235 width: 240px;236 height: 240px;237 background: #2a2f3a;238 border-radius: 50%;239 display: flex;240 align-items: center;241 justify-content: center;242 }243 .ctrl-square {244 width: 240px;245 height: 240px;246 background: #e9b6c5;247 border-radius: 50px;248 display: flex;249 align-items: center;250 justify-content: center;251 }252 .ctrl-circle svg { width: 100px; height: 100px; stroke: #cfd5e2; fill: none; stroke-width: 3; }253 .pause-icon {254 width: 80px; height: 120px; position: relative;255 }256 .pause-icon::before, .pause-icon::after {257 content: "";258 position: absolute;259 top: 0;260 width: 26px;261 height: 100%;262 background: #3b3f48;263 border-radius: 12px;264 }265 .pause-icon::before { left: 0; }266 .pause-icon::after { right: 0; }267 268 /* Gesture bar */269 .gesture {270 position: absolute;271 bottom: 48px;272 left: 50%;273 transform: translateX(-50%);274 width: 320px;275 height: 10px;276 background: #d4d7dc;277 border-radius: 8px;278 opacity: 0.85;279 }280</style>281</head>282<body>283<div id="render-target">284 285 <!-- Status bar -->286 <div class="status-bar">287 <div>4:27</div>288 <div class="status-icons">289 <svg viewBox="0 0 24 24"><path d="M3 12h18"/></svg>290 <svg viewBox="0 0 24 24"><path d="M2 12l4-4 4 4-4 4-4-4z"/></svg>291 <svg viewBox="0 0 24 24"><rect x="3" y="6" width="14" height="12" rx="2"/><path d="M19 10h3v4h-3"/></svg>292 <svg viewBox="0 0 24 24"><circle cx="12" cy="12" r="5"/><path d="M12 2v2M12 20v2M2 12h2M20 12h2"/></svg>293 <svg viewBox="0 0 24 24"><circle cx="21" cy="3" r="1.5"/></svg>294 <svg viewBox="0 0 24 24"><path d="M20 3l1 3"/></svg>295 </div>296 </div>297 298 <!-- Top app bar -->299 <div class="top-bar">300 <div class="bar-left">301 <div class="icon-btn">302 <svg viewBox="0 0 24 24"><path d="M15 6l-6 6 6 6"/></svg>303 </div>304 </div>305 <div class="bar-right">306 <div class="icon-btn">307 <svg viewBox="0 0 24 24"><path d="M12 3l2.9 5.9 6.5.9-4.7 4.5 1.1 6.4L12 18l-5.8 2.7 1.1-6.4-4.7-4.5 6.5-.9L12 3z" /></svg>308 </div>309 <div class="icon-btn">310 <svg viewBox="0 0 24 24"><path d="M18 8l-6-4-6 4"/><path d="M6 8v8l6 4 6-4V8"/></svg>311 </div>312 <div class="icon-btn">313 <svg viewBox="0 0 24 24"><path d="M4 4l8 8M12 4l-8 8"/><path d="M19 21l-6-6"/></svg>314 </div>315 <div class="icon-btn">316 <svg viewBox="0 0 24 24"><circle cx="11" cy="11" r="6"/><path d="M20 20l-4.5-4.5"/></svg>317 </div>318 <div class="icon-btn">319 <svg viewBox="0 0 24 24"><circle cx="12" cy="5" r="2"/><circle cx="12" cy="12" r="2"/><circle cx="12" cy="19" r="2"/></svg>320 </div>321 </div>322 </div>323 324 <!-- Main card -->325 <div class="card">326 <div class="title">Unnamed</div>327 <div class="subtitle">Tue, Nov 21 • 4:01 PM</div>328 329 <div class="label-row">330 <svg viewBox="0 0 24 24"><path d="M3 5h18v11H13l-4 4v-4H3z"/></svg>331 <div>Speech</div>332 </div>333 334 <div class="wave-wrap">335 <div class="wave">336 <div class="wave-side">337 <div class="bar" style="height: 220px"></div>338 <div class="bar" style="height: 260px"></div>339 <div class="bar" style="height: 310px"></div>340 <div class="bar thin" style="height: 340px"></div>341 <div class="bar thin" style="height: 360px"></div>342 <div class="bar" style="height: 320px"></div>343 <div class="bar" style="height: 290px"></div>344 <div class="bar thin" style="height: 240px"></div>345 <div class="bar thin" style="height: 200px"></div>346 <div class="bar thin" style="height: 140px"></div>347 <div class="bar thin" style="height: 100px"></div>348 <div class="bar thin" style="height: 160px"></div>349 <div class="bar thin" style="height: 120px"></div>350 <div class="bar thin" style="height: 170px"></div>351 <div class="bar thin" style="height: 90px"></div>352 </div>353 <div class="wave-side">354 <div class="bar thin" style="height: 200px"></div>355 <div class="bar thin" style="height: 240px"></div>356 <div class="bar thin" style="height: 280px"></div>357 <div class="bar thin" style="height: 320px"></div>358 <div class="bar thin" style="height: 340px"></div>359 <div class="bar thin" style="height: 360px"></div>360 <div class="bar thin" style="height: 340px"></div>361 <div class="bar thin" style="height: 320px"></div>362 <div class="bar thin" style="height: 300px"></div>363 <div class="bar thin" style="height: 320px"></div>364 <div class="bar thin" style="height: 360px"></div>365 <div class="bar thin" style="height: 300px"></div>366 <div class="bar thin" style="height: 280px"></div>367 <div class="bar thin" style="height: 240px"></div>368 <div class="bar thin" style="height: 220px"></div>369 </div>370 </div>371 372 <div class="dots">373 <div class="dot"></div><div class="dot"></div><div class="dot"></div><div class="dot"></div>374 <div class="dot"></div><div class="dot"></div><div class="dot"></div><div class="dot"></div>375 <div class="dot"></div><div class="dot"></div><div class="dot"></div><div class="dot"></div>376 <div class="dot"></div><div class="dot"></div><div class="dot"></div><div class="dot"></div>377 </div>378 <div class="playhead"></div>379 </div>380 </div>381 382 <!-- Segmented control -->383 <div class="segmented">384 <div class="seg-btn active">385 <svg viewBox="0 0 24 24"><path d="M3 12c2-3 4-5 9-5s7 2 9 5"/><path d="M3 12c2 3 4 5 9 5s7-2 9-5"/></svg>386 <span>Audio</span>387 </div>388 <div class="seg-btn">389 <svg viewBox="0 0 24 24"><path d="M4 6h16M4 12h12M4 18h16"/></svg>390 <span>Transcript</span>391 </div>392 </div>393 394 <!-- Seekbar -->395 <div class="seek-area">396 <div class="track">397 <div class="knob"></div>398 </div>399 <div class="seek-times">400 <div>00:07</div>401 <div>-00:47</div>402 </div>403 </div>404 405 <!-- Playback controls -->406 <div class="controls">407 <div class="ctrl-circle">408 <svg viewBox="0 0 100 100">409 <path d="M76 25A34 34 0 1 0 82 50" />410 <path d="M82 50l-12-2 4 10" />411 </svg>412 <div style="position:absolute; font-size:32px; color:#cfd5e2; margin-top:130px;">5</div>413 </div>414 415 <div class="ctrl-square">416 <div class="pause-icon"></div>417 </div>418 419 <div class="ctrl-circle">420 <svg viewBox="0 0 100 100">421 <path d="M24 75A34 34 0 1 0 18 50" />422 <path d="M18 50l12 2-4-10" />423 </svg>424 <div style="position:absolute; font-size:32px; color:#cfd5e2; margin-top:130px;">10</div>425 </div>426 </div>427 428 <!-- Gesture bar -->429 <div class="gesture"></div>430 431</div>432</body>433</html>