GD-ML/AndroidCode
13.4k
1<!DOCTYPE html>2<html lang="en">3<head>4<meta charset="UTF-8">5<title>Chill - Weekly Jukebox</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", "Segoe UI", Arial, sans-serif; }9 #render-target {10 position: relative;11 width: 1080px;12 height: 2400px;13 overflow: hidden;14 background: linear-gradient(180deg, #5b2b4f 0px, #3b2e43 380px, #2f3339 381px, #2f3339 100%);15 color: #e7e9ec;16 }17 18 /* Status bar */19 .status-bar {20 position: absolute;21 top: 20px;22 left: 32px;23 right: 32px;24 height: 60px;25 display: flex;26 align-items: center;27 justify-content: space-between;28 color: #ffffff;29 opacity: 0.9;30 font-weight: 600;31 letter-spacing: 0.5px;32 }33 .status-icons { display: flex; align-items: center; gap: 18px; }34 .status-icons svg { opacity: 0.9; }35 36 /* Floating buttons */37 .fab {38 position: absolute;39 width: 96px;40 height: 96px;41 border-radius: 50%;42 background: rgba(255,255,255,0.1);43 backdrop-filter: blur(2px);44 display: flex; align-items: center; justify-content: center;45 }46 .back-fab { left: 30px; top: 180px; }47 .menu-fab { right: 30px; top: 520px; }48 49 /* Hero banner */50 .hero {51 position: absolute;52 left: 90px;53 top: 120px;54 width: 820px;55 height: 460px;56 border-radius: 26px;57 overflow: hidden;58 box-shadow: 0 20px 40px rgba(0,0,0,0.35);59 background: #E0E0E0;60 border: 1px solid #BDBDBD;61 display: flex; align-items: center; justify-content: center;62 color: #757575;63 font-weight: 700;64 font-size: 38px;65 }66 .hero span { padding: 0 20px; text-align: center; }67 68 /* Title and description */69 .title-area {70 position: absolute;71 left: 70px;72 right: 70px;73 top: 620px;74 }75 .playlist-title {76 font-size: 64px;77 font-weight: 700;78 line-height: 1.15;79 margin-bottom: 24px;80 color: #e8eaee;81 }82 .playlist-desc {83 font-size: 28px;84 color: #c7cbd1;85 line-height: 1.5;86 max-width: 880px;87 }88 89 /* Controls row */90 .controls {91 margin-top: 38px;92 display: flex;93 align-items: center;94 gap: 24px;95 }96 .control-circle {97 width: 120px; height: 120px; border-radius: 60px;98 border: 2px solid rgba(255,255,255,0.25);99 display: flex; align-items: center; justify-content: center;100 background: rgba(255,255,255,0.06);101 }102 .play-circle {103 background: #66d1c2;104 border: none;105 }106 107 /* Info row */108 .info-row {109 margin-top: 30px;110 display: flex; align-items: center; gap: 26px;111 color: #c7cbd1;112 font-size: 28px;113 }114 .info-action {115 width: 84px; height: 84px; border-radius: 42px;116 border: 2px solid rgba(255,255,255,0.18);117 display: flex; align-items: center; justify-content: center;118 background: rgba(255,255,255,0.06);119 }120 .dot-sep { margin: 0 10px; opacity: 0.5; }121 122 /* Tracks list */123 .list {124 position: absolute;125 left: 40px;126 right: 40px;127 top: 980px;128 bottom: 280px;129 overflow: hidden;130 }131 .tracks {132 width: 100%;133 height: 100%;134 overflow-y: hidden;135 padding-right: 20px;136 }137 .track {138 display: flex;139 align-items: center;140 justify-content: space-between;141 padding: 34px 10px;142 border-bottom: 1px solid rgba(255,255,255,0.06);143 }144 .t-left {145 display: flex; align-items: center; gap: 24px;146 }147 .t-meta { max-width: 720px; }148 .t-title {149 font-size: 36px; font-weight: 700; color: #e7eaee; margin-bottom: 8px;150 }151 .t-sub { font-size: 26px; color: #b9bdc4; }152 .t-right {153 display: flex; align-items: center; gap: 28px;154 color: #c7cbd1;155 }156 .icon-btn {157 width: 100px; height: 100px; border-radius: 14px;158 display: flex; align-items: center; justify-content: center;159 background: transparent;160 }161 .more-vert { width: 16px; height: 64px; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 12px; }162 .more-vert span { width: 10px; height: 10px; border-radius: 50%; background: rgba(255,255,255,0.6); }163 164 /* Ad banner */165 .ad-block {166 margin: 22px 0 6px 0;167 width: 100%;168 height: 160px;169 border: 1px solid #BDBDBD;170 background: #E0E0E0;171 display: flex; align-items: center; justify-content: center;172 color: #757575; font-weight: 600; border-radius: 8px;173 }174 175 /* Now playing style item */176 .now-playing {177 display: flex; align-items: center; justify-content: space-between;178 padding: 26px 10px;179 }180 .np-left { display: flex; align-items: center; gap: 24px; }181 .album-art {182 width: 120px; height: 120px;183 background: #E0E0E0; border: 1px solid #BDBDBD; color: #757575;184 display: flex; align-items: center; justify-content: center;185 border-radius: 6px; font-size: 20px; font-weight: 600;186 text-align: center; padding: 6px;187 }188 .np-title { font-size: 34px; font-weight: 700; color: #e7eaee; }189 .np-sub { font-size: 24px; color: #b9bdc4; margin-top: 6px; }190 .np-play {191 width: 90px; height: 90px; border-radius: 50%;192 border: 2px solid rgba(255,255,255,0.5);193 display: flex; align-items: center; justify-content: center;194 }195 196 /* Bottom nav */197 .bottom-nav {198 position: absolute;199 left: 0; right: 0; bottom: 0;200 height: 220px;201 background: rgba(20,22,25,0.45);202 border-top: 1px solid rgba(255,255,255,0.08);203 backdrop-filter: blur(4px);204 display: flex; align-items: center; justify-content: space-around;205 padding: 24px 40px 34px;206 }207 .nav-item {208 width: 160px; height: 140px;209 display: flex; flex-direction: column; align-items: center; justify-content: center;210 color: #c7cbd1; font-size: 26px; gap: 12px; position: relative;211 }212 .nav-item svg { fill: none; stroke: #c7cbd1; stroke-width: 3.5; }213 .nav-item.active { color: #ffffff; }214 .nav-item.active .underline {215 position: absolute; bottom: 16px; width: 80px; height: 6px; border-radius: 3px; background: #ffffff;216 }217 .pro-dot {218 position: absolute; top: 14px; right: 44px; width: 18px; height: 18px; background: #f24e4e; border-radius: 50%;219 border: 2px solid rgba(255,255,255,0.7);220 }221 222 /* Home pill */223 .home-pill {224 position: absolute;225 bottom: 240px;226 left: 50%;227 transform: translateX(-50%);228 width: 220px; height: 14px; border-radius: 7px;229 background: rgba(255,255,255,0.6);230 }231 232 /* subtle accent lines */233 .section-sep {234 height: 2px; background: rgba(255,255,255,0.08); margin: 12px 0;235 }236</style>237</head>238<body>239<div id="render-target">240 241 <!-- Status bar -->242 <div class="status-bar">243 <div>12:18</div>244 <div class="status-icons">245 <!-- cellular -->246 <svg width="28" height="28" viewBox="0 0 48 48">247 <rect x="4" y="30" width="6" height="10" fill="#fff"/>248 <rect x="14" y="24" width="6" height="16" fill="#fff" opacity="0.8"/>249 <rect x="24" y="18" width="6" height="22" fill="#fff" opacity="0.6"/>250 <rect x="34" y="12" width="6" height="28" fill="#fff" opacity="0.4"/>251 </svg>252 <!-- wifi -->253 <svg width="28" height="28" viewBox="0 0 48 48">254 <path d="M6 18 Q24 6 42 18" stroke="#fff" stroke-width="3" fill="none" />255 <path d="M12 24 Q24 16 36 24" stroke="#fff" stroke-width="3" fill="none" />256 <path d="M18 30 Q24 26 30 30" stroke="#fff" stroke-width="3" fill="none" />257 <circle cx="24" cy="36" r="3.5" fill="#fff"/>258 </svg>259 <!-- battery -->260 <svg width="38" height="28" viewBox="0 0 60 40">261 <rect x="3" y="8" width="46" height="24" rx="4" ry="4" stroke="#fff" fill="none" stroke-width="3"/>262 <rect x="50" y="14" width="7" height="12" rx="2" fill="#fff"/>263 <rect x="6" y="11" width="30" height="18" rx="2" fill="#fff"/>264 </svg>265 </div>266 </div>267 268 <!-- Floating back button -->269 <div class="fab back-fab">270 <svg width="52" height="52" viewBox="0 0 48 48">271 <path d="M30 10 L18 24 L30 38" stroke="#fff" stroke-width="4" fill="none" stroke-linecap="round" stroke-linejoin="round"/>272 </svg>273 </div>274 275 <!-- Hero banner -->276 <div class="hero">277 <span>[IMG: Playlist Banner — Weekly Jukebox]</span>278 </div>279 280 <!-- Menu fab -->281 <div class="fab menu-fab">282 <div class="more-vert">283 <span></span><span></span><span></span>284 </div>285 </div>286 287 <!-- Title and description -->288 <div class="title-area">289 <div class="playlist-title">Chill - Weekly Jukebox</div>290 <div class="playlist-desc">291 25 songs with music from artists like Willie "the Lion" Smith, Joe Pass, Kurt Rosenwinkel, and more.292 </div>293 294 <div class="controls">295 <div class="control-circle" title="Favorite">296 <svg width="60" height="60" viewBox="0 0 48 48">297 <path d="M24 40 L10 26 Q8 16 16 12 Q21 10 24 14 Q27 10 32 12 Q40 16 38 26 Z"298 stroke="#ffffff" stroke-width="3.5" fill="none" stroke-linejoin="round"/>299 </svg>300 </div>301 <div class="control-circle play-circle" title="Play">302 <svg width="68" height="68" viewBox="0 0 48 48">303 <path d="M18 12 L36 24 L18 36 Z" fill="#ffffff"/>304 </svg>305 </div>306 </div>307 308 <div class="info-row">309 <div class="info-action" title="Download">310 <svg width="44" height="44" viewBox="0 0 48 48">311 <path d="M24 10 V28" stroke="#ffffff" stroke-width="3.5" />312 <path d="M16 22 L24 30 L32 22" stroke="#ffffff" stroke-width="3.5" fill="none" />313 <path d="M12 34 H36" stroke="#ffffff" stroke-width="3.5" />314 </svg>315 </div>316 <div class="info-action" title="Share">317 <svg width="44" height="44" viewBox="0 0 48 48">318 <circle cx="14" cy="30" r="6" stroke="#fff" fill="none" stroke-width="3"/>319 <circle cx="34" cy="18" r="6" stroke="#fff" fill="none" stroke-width="3"/>320 <path d="M19 27 L29 21" stroke="#fff" stroke-width="3"/>321 </svg>322 </div>323 <span>1h 32m</span>324 <span class="dot-sep">•</span>325 <span>25 Songs</span>326 <span class="dot-sep">•</span>327 <span>2,315 Fans</span>328 </div>329 </div>330 331 <!-- Tracks list -->332 <div class="list">333 <div class="tracks">334 335 <div class="track">336 <div class="t-left">337 <div class="t-meta">338 <div class="t-title">Through for the Day</div>339 <div class="t-sub">Willie "the Lion" Smith - Accent on Piano</div>340 </div>341 </div>342 <div class="t-right">343 <div class="icon-btn" title="Download">344 <svg width="52" height="52" viewBox="0 0 48 48">345 <path d="M24 10 V28" stroke="#cfd3d9" stroke-width="3.5" />346 <path d="M16 22 L24 30 L32 22" stroke="#cfd3d9" stroke-width="3.5" fill="none" />347 </svg>348 </div>349 <div class="more-vert"><span></span><span></span><span></span></div>350 </div>351 </div>352 353 <div class="track">354 <div class="t-left">355 <div class="t-meta">356 <div class="t-title">Groove Yard (Album Version)</div>357 <div class="t-sub">Joe Pass - Virtuoso #2</div>358 </div>359 </div>360 <div class="t-right">361 <div class="icon-btn">362 <svg width="52" height="52" viewBox="0 0 48 48">363 <path d="M24 10 V28" stroke="#cfd3d9" stroke-width="3.5" />364 <path d="M16 22 L24 30 L32 22" stroke="#cfd3d9" stroke-width="3.5" fill="none" />365 </svg>366 </div>367 <div class="more-vert"><span></span><span></span><span></span></div>368 </div>369 </div>370 371 <div class="track">372 <div class="t-left">373 <div class="t-meta">374 <div class="t-title">Night And Day (Album Version)</div>375 <div class="t-sub">Joe Pass - Virtuoso</div>376 </div>377 </div>378 <div class="t-right">379 <div class="icon-btn">380 <svg width="52" height="52" viewBox="0 0 48 48">381 <path d="M24 10 V28" stroke="#cfd3d9" stroke-width="3.5" />382 <path d="M16 22 L24 30 L32 22" stroke="#cfd3d9" stroke-width="3.5" fill="none" />383 </svg>384 </div>385 <div class="more-vert"><span></span><span></span><span></span></div>386 </div>387 </div>388 389 <div class="track">390 <div class="t-left">391 <div class="t-meta">392 <div class="t-title">Deep Song</div>393 <div class="t-sub">Kurt Rosenwinkel - Deep Song</div>394 </div>395 </div>396 <div class="t-right">397 <div class="icon-btn">398 <svg width="52" height="52" viewBox="0 0 48 48">399 <path d="M24 10 V28" stroke="#cfd3d9" stroke-width="3.5" />400 <path d="M16 22 L24 30 L32 22" stroke="#cfd3d9" stroke-width="3.5" fill="none" />401 </svg>402 </div>403 <div class="more-vert"><span></span><span></span><span></span></div>404 </div>405 </div>406 407 <div class="track">408 <div class="t-left">409 <div class="t-meta">410 <div class="t-title">All The Things You Are (Album Version)</div>411 <div class="t-sub">Joe Pass - Virtuoso</div>412 </div>413 </div>414 <div class="t-right">415 <div class="icon-btn">416 <svg width="52" height="52" viewBox="0 0 48 48">417 <path d="M24 10 V28" stroke="#cfd3d9" stroke-width="3.5" />418 <path d="M16 22 L24 30 L32 22" stroke="#cfd3d9" stroke-width="3.5" fill="none" />419 </svg>420 </div>421 <div class="more-vert"><span></span><span></span><span></span></div>422 </div>423 </div>424 425 <div class="track">426 <div class="t-left">427 <div class="t-meta">428 <div class="t-title">Concerning the UFO sighting near Highland,...</div>429 <div class="t-sub">Sufjan Stevens - Illinois</div>430 </div>431 </div>432 <div class="t-right">433 <div class="icon-btn">434 <svg width="52" height="52" viewBox="0 0 48 48">435 <path d="M24 10 V28" stroke="#cfd3d9" stroke-width="3.5" />436 <path d="M16 22 L24 30 L32 22" stroke="#cfd3d9" stroke-width="3.5" fill="none" />437 </svg>438 </div>439 <div class="more-vert"><span></span><span></span><span></span></div>440 </div>441 </div>442 443 <div class="track">444 <div class="t-left">445 <div class="t-meta">446 <div class="t-title">Constellations (Demo Version)</div>447 <div class="t-sub">Jack Johnson - In Between Dreams</div>448 </div>449 </div>450 <div class="t-right">451 <div class="icon-btn">452 <svg width="52" height="52" viewBox="0 0 48 48">453 <path d="M24 10 V28" stroke="#cfd3d9" stroke-width="3.5" />454 <path d="M16 22 L24 30 L32 22" stroke="#cfd3d9" stroke-width="3.5" fill="none" />455 </svg>456 </div>457 <div class="more-vert"><span></span><span></span><span></span></div>458 </div>459 </div>460 461 <div class="track">462 <div class="t-left">463 <div class="t-meta">464 <div class="t-title">Traffic In The Sky</div>465 <div class="t-sub">Jack Johnson - On and On</div>466 </div>467 </div>468 <div class="t-right">469 <div class="icon-btn">470 <svg width="52" height="52" viewBox="0 0 48 48">471 <path d="M24 10 V28" stroke="#cfd3d9" stroke-width="3.5" />472 <path d="M16 22 L24 30 L32 22" stroke="#cfd3d9" stroke-width="3.5" fill="none" />473 </svg>474 </div>475 <div class="more-vert"><span></span><span></span><span></span></div>476 </div>477 </div>478 479 <div class="ad-block">[IMG: Ad Banner — Food Delivery Promotion]</div>480 481 <div class="now-playing">482 <div class="np-left">483 <div class="album-art">[IMG: Album Art]</div>484 <div class="t-meta">485 <div class="np-title">L-O-V-E (2003 Digital Remaster)</div>486 <div class="np-sub">Nat King Cole — L-O-V-E</div>487 </div>488 </div>489 <div class="np-play">490 <svg width="52" height="52" viewBox="0 0 48 48">491 <path d="M18 12 L36 24 L18 36 Z" fill="#ffffff"/>492 </svg>493 </div>494 </div>495 496 </div>497 </div>498 499 <!-- Bottom navigation -->500 <div class="bottom-nav">501 <div class="nav-item">502 <svg width="52" height="52" viewBox="0 0 48 48">503 <path d="M8 24 L24 10 L40 24" />504 <path d="M14 24 V38 H34 V24" />505 </svg>506 <div>Home</div>507 </div>508 <div class="nav-item active">509 <svg width="52" height="52" viewBox="0 0 48 48">510 <circle cx="22" cy="22" r="14" />511 <path d="M32 32 L40 40" />512 </svg>513 <div>Search</div>514 <div class="underline"></div>515 </div>516 <div class="nav-item">517 <svg width="52" height="52" viewBox="0 0 48 48">518 <path d="M20 6 L12 26 H22 L18 42 L36 18 H26 L32 6 Z" />519 </svg>520 <div>For You</div>521 </div>522 <div class="nav-item">523 <svg width="52" height="52" viewBox="0 0 48 48">524 <circle cx="24" cy="24" r="18" />525 <text x="24" y="30" text-anchor="middle" font-size="22" fill="#c7cbd1" font-weight="700">C</text>526 </svg>527 <div>My Library</div>528 </div>529 <div class="nav-item">530 <div class="pro-dot"></div>531 <svg width="52" height="52" viewBox="0 0 48 48">532 <path d="M24 38 C20 30 12 26 12 18 C12 12 18 10 24 16 C30 10 36 12 36 18 C36 26 28 30 24 38 Z" />533 </svg>534 <div>Pro</div>535 </div>536 </div>537 538 <!-- Home pill -->539 <div class="home-pill"></div>540 541</div>542</body>543</html>