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 Player UI</title>7<style>8 body { margin: 0; padding: 0; background: transparent; }9 #render-target {10 position: relative;11 overflow: hidden;12 width: 1080px;13 height: 2400px;14 background: #ffffff;15 font-family: Arial, Helvetica, sans-serif;16 color: #212121;17 }18 19 /* Top status bar */20 .status-bar {21 position: absolute;22 top: 0;23 left: 0;24 width: 1080px;25 height: 110px;26 background: #1976d2; /* within app bar color */27 color: #fff;28 display: flex;29 align-items: center;30 padding: 0 36px;31 box-sizing: border-box;32 font-size: 34px;33 }34 .status-bar .left { flex: 1; }35 .status-icons {36 display: flex;37 align-items: center;38 gap: 28px;39 }40 .status-dot {41 width: 28px; height: 28px; background: #fff; border-radius: 50%;42 opacity: 0.9;43 }44 .battery {45 width: 44px; height: 24px; border: 3px solid #fff; border-radius: 4px; position: relative;46 }47 .battery::after {48 content: '';49 position: absolute; right: -10px; top: 6px; width: 6px; height: 12px; background: #fff; border-radius: 2px;50 }51 .battery .level {52 position: absolute; left: 3px; top: 3px; height: 16px; width: 26px; background: #fff;53 }54 55 /* App bar */56 .appbar {57 position: absolute;58 top: 110px;59 left: 0;60 width: 1080px;61 height: 360px;62 background: #1976d2;63 color: #fff;64 box-sizing: border-box;65 padding: 24px 36px;66 }67 .appbar .top-row {68 display: flex;69 justify-content: flex-end;70 gap: 36px;71 margin-top: 8px;72 }73 .icon-btn svg { width: 50px; height: 50px; fill: none; stroke: #fff; stroke-width: 48; }74 .title {75 font-size: 70px;76 font-weight: 600;77 margin-top: 40px;78 }79 .tabs {80 display: flex;81 justify-content: space-between;82 margin-top: 36px;83 letter-spacing: 4px;84 font-weight: 600;85 }86 .tab {87 font-size: 40px;88 opacity: 0.8;89 }90 .tab.active {91 opacity: 1;92 position: relative;93 }94 .tab.active::after {95 content: '';96 position: absolute;97 left: 0;98 right: 0;99 bottom: -16px;100 height: 6px;101 background: #fff;102 border-radius: 3px;103 }104 105 /* Ad/thumbnail carousel */106 .carousel {107 position: absolute;108 top: 470px;109 left: 0;110 width: 1080px;111 height: 160px;112 background: #f4f7f9;113 border-top: 6px solid #e5eef5;114 border-bottom: 6px solid #e5eef5;115 display: flex;116 align-items: center;117 padding: 0 20px;118 box-sizing: border-box;119 gap: 18px;120 }121 .thumb {122 width: 185px;123 height: 120px;124 background: #E0E0E0;125 border: 1px solid #BDBDBD;126 border-radius: 10px;127 box-shadow: 0 0 0 1px rgba(0,0,0,0.05) inset;128 display: flex;129 align-items: center;130 justify-content: center;131 color: #757575;132 font-size: 26px;133 position: relative;134 }135 .price {136 position: absolute;137 bottom: -18px;138 right: 10px;139 background: #fff;140 border: 1px solid #d0d0d0;141 border-radius: 16px;142 padding: 3px 12px;143 font-size: 26px;144 color: #333;145 box-shadow: 0 1px 0 rgba(0,0,0,0.06);146 }147 148 /* File card */149 .file-card {150 position: absolute;151 top: 630px;152 left: 0;153 width: 1080px;154 background: #1976d2;155 color: #fff;156 border-radius: 0 0 10px 10px;157 box-sizing: border-box;158 padding: 26px 36px 30px;159 }160 .file-title {161 font-size: 46px;162 font-weight: 600;163 margin-bottom: 10px;164 }165 .file-sub {166 font-size: 30px;167 opacity: 0.9;168 }169 .file-row {170 display: flex;171 justify-content: space-between;172 align-items: flex-start;173 }174 .file-meta {175 text-align: right;176 margin-top: 8px;177 }178 .file-meta .dur { font-size: 40px; font-weight: 600; }179 .file-meta .size { font-size: 30px; opacity: 0.9; margin-top: 6px; }180 .file-actions {181 display: flex;182 gap: 42px;183 margin-top: 24px;184 justify-content: flex-end;185 }186 .action svg { width: 54px; height: 54px; stroke: #fff; fill: none; stroke-width: 52; }187 188 /* Content filler area */189 .content {190 position: absolute;191 top: 820px;192 left: 0;193 width: 1080px;194 height: 1220px;195 background: #ffffff;196 }197 198 /* Playback bar */199 .player {200 position: absolute;201 bottom: 90px;202 left: 0;203 width: 1080px;204 height: 200px;205 background: #1976d2;206 color: #fff;207 box-sizing: border-box;208 padding: 28px 36px;209 }210 .player .time-row {211 display: flex;212 align-items: center;213 justify-content: space-between;214 }215 .time-pill {216 border: 3px solid #fff;217 color: #fff;218 border-radius: 18px;219 padding: 10px 18px;220 font-size: 34px;221 min-width: 120px;222 text-align: center;223 }224 .track {225 position: relative;226 height: 10px;227 background: rgba(255,255,255,0.5);228 margin: 26px 0;229 border-radius: 5px;230 }231 .progress {232 position: absolute;233 left: 0;234 top: 0;235 height: 10px;236 width: 260px;237 background: #fff;238 border-radius: 5px;239 }240 .knob {241 position: absolute;242 left: 240px;243 top: -10px;244 width: 28px;245 height: 28px;246 background: #fff;247 border-radius: 50%;248 }249 .play-btn {250 width: 100px; height: 100px; border-radius: 50%;251 border: 6px solid #fff; margin: 0 auto;252 display: flex; align-items: center; justify-content: center;253 }254 .play-btn svg { width: 52px; height: 52px; fill: #fff; }255 256 /* Snackbar/toast */257 .snackbar {258 position: absolute;259 left: 60px;260 right: 60px;261 bottom: 260px;262 background: #333;263 color: #fff;264 border-radius: 18px;265 padding: 28px;266 font-size: 34px;267 box-shadow: 0 6px 12px rgba(0,0,0,0.25);268 }269 270 /* Home indicator */271 .home-indicator {272 position: absolute;273 bottom: 24px;274 left: 50%;275 transform: translateX(-50%);276 width: 240px;277 height: 12px;278 background: #bbb;279 border-radius: 6px;280 opacity: 0.8;281 }282 283 /* Utility */284 .muted { color: #757575; }285</style>286</head>287<body>288<div id="render-target">289 290 <!-- Status bar -->291 <div class="status-bar">292 <div class="left">2:34</div>293 <div class="status-icons">294 <!-- simple placeholders for status icons -->295 <div class="status-dot" title="Signal"></div>296 <div class="status-dot" title="Notifications"></div>297 <div class="battery"><div class="level"></div></div>298 </div>299 </div>300 301 <!-- App bar -->302 <div class="appbar">303 <div class="top-row">304 <div class="icon-btn" title="Search">305 <svg viewBox="0 0 1000 1000">306 <circle cx="420" cy="420" r="300" stroke="#fff" stroke-width="60" fill="none"></circle>307 <line x1="650" y1="650" x2="900" y2="900" stroke="#fff" stroke-width="80"></line>308 </svg>309 </div>310 <div class="icon-btn" title="Sort">311 <svg viewBox="0 0 1000 1000">312 <line x1="140" y1="250" x2="860" y2="250" stroke="#fff" stroke-width="80"></line>313 <line x1="240" y1="500" x2="760" y2="500" stroke="#fff" stroke-width="80"></line>314 <line x1="340" y1="750" x2="660" y2="750" stroke="#fff" stroke-width="80"></line>315 </svg>316 </div>317 <div class="icon-btn" title="More">318 <svg viewBox="0 0 1000 1000">319 <circle cx="500" cy="250" r="70" fill="#fff"></circle>320 <circle cx="500" cy="500" r="70" fill="#fff"></circle>321 <circle cx="500" cy="750" r="70" fill="#fff"></circle>322 </svg>323 </div>324 </div>325 326 <div class="title">Playback paused</div>327 328 <div class="tabs">329 <div class="tab">RECORD</div>330 <div class="tab active">LISTEN</div>331 </div>332 </div>333 334 <!-- Horizontal carousel -->335 <div class="carousel">336 <div class="thumb" style="width:120px;">337 <div>[IMG: App icon]</div>338 </div>339 <div class="thumb"><div>[IMG: Microwave]</div><div class="price">₹436</div></div>340 <div class="thumb"><div>[IMG: Chair]</div><div class="price">₹108</div></div>341 <div class="thumb"><div>[IMG: Landscape]</div><div class="price">₹543</div></div>342 <div class="thumb"><div>[IMG: Smart TV]</div><div class="price">₹1,126</div></div>343 <div class="thumb"><div>[IMG: Side table]</div><div class="price">₹108</div></div>344 <div class="thumb"><div>[IMG: Sofa]</div><div class="price">₹326</div></div>345 </div>346 347 <!-- File card -->348 <div class="file-card">349 <div class="file-row">350 <div>351 <div class="file-title">renewable energy lecture.m4a</div>352 <div class="file-sub">November 22, 11:28 AM</div>353 </div>354 <div class="file-meta">355 <div class="dur">01:35</div>356 <div class="size">1.1 MB</div>357 </div>358 </div>359 <div class="file-actions">360 <!-- Share -->361 <div class="action" title="Share">362 <svg viewBox="0 0 1000 1000">363 <circle cx="220" cy="780" r="110" fill="none" stroke="#fff"></circle>364 <circle cx="780" cy="220" r="110" fill="none" stroke="#fff"></circle>365 <circle cx="780" cy="780" r="110" fill="none" stroke="#fff"></circle>366 <line x1="320" y1="720" x2="680" y2="300" stroke="#fff" stroke-width="90"></line>367 <line x1="680" y1="700" x2="320" y2="760" stroke="#fff" stroke-width="90"></line>368 </svg>369 </div>370 <!-- Delete -->371 <div class="action" title="Delete">372 <svg viewBox="0 0 1000 1000">373 <rect x="260" y="320" width="480" height="520" stroke="#fff" fill="none" stroke-width="80"></rect>374 <line x1="300" y1="280" x2="700" y2="280" stroke="#fff" stroke-width="80"></line>375 <line x1="420" y1="220" x2="580" y2="220" stroke="#fff" stroke-width="80"></line>376 </svg>377 </div>378 <!-- Edit -->379 <div class="action" title="Edit">380 <svg viewBox="0 0 1000 1000">381 <polygon points="220,780 360,760 780,340 660,220 240,640" stroke="#fff" fill="none" stroke-width="80"></polygon>382 <line x1="620" y1="180" x2="820" y2="380" stroke="#fff" stroke-width="80"></line>383 </svg>384 </div>385 <!-- More -->386 <div class="action" title="More">387 <svg viewBox="0 0 1000 1000">388 <circle cx="500" cy="300" r="70" fill="#fff"></circle>389 <circle cx="500" cy="520" r="70" fill="#fff"></circle>390 <circle cx="500" cy="740" r="70" fill="#fff"></circle>391 </svg>392 </div>393 </div>394 </div>395 396 <!-- Content area -->397 <div class="content"></div>398 399 <!-- Playback bar -->400 <div class="player">401 <div class="time-row">402 <div class="time-pill">00:05</div>403 <div class="time-pill" style="opacity:0;">spacer</div>404 <div class="time-pill">01:35</div>405 </div>406 <div class="track">407 <div class="progress"></div>408 <div class="knob"></div>409 </div>410 <div class="play-btn" title="Play/Pause">411 <svg viewBox="0 0 100 100">412 <polygon points="30,20 80,50 30,80" fill="#fff"></polygon>413 </svg>414 </div>415 </div>416 417 <!-- Snackbar -->418 <div class="snackbar">419 Renamed “renewable energy lecture practice.m4a” to “renewable energy lecture.m4a”420 </div>421 422 <!-- Home indicator -->423 <div class="home-indicator"></div>424 425</div>426</body>427</html>