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>Playlist Screen Mock</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: linear-gradient(180deg, #5a4546 0%, #2b2223 18%, #131313 45%, #0e0e0e 100%);15 border-radius: 48px;16 box-shadow: 0 20px 60px rgba(0,0,0,0.35);17 font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Arial, sans-serif;18 color: #fff;19 }20 21 /* Status bar */22 .status-bar {23 position: absolute;24 top: 24px;25 left: 40px;26 right: 40px;27 height: 80px;28 display: flex;29 align-items: center;30 justify-content: space-between;31 color: #fff;32 opacity: 0.95;33 font-weight: 600;34 font-size: 36px;35 }36 .status-right {37 display: flex;38 align-items: center;39 gap: 26px;40 }41 .icon {42 display: inline-flex;43 align-items: center;44 justify-content: center;45 }46 47 /* Back arrow */48 .back-btn {49 position: absolute;50 top: 140px;51 left: 30px;52 width: 80px;53 height: 80px;54 color: #fff;55 opacity: 0.95;56 }57 58 /* Playlist collage */59 .playlist-art {60 position: absolute;61 top: 220px;62 left: 150px;63 width: 780px;64 height: 780px;65 background: #E0E0E0;66 border: 1px solid #BDBDBD;67 border-radius: 24px;68 display: flex;69 align-items: center;70 justify-content: center;71 color: #757575;72 font-weight: 600;73 letter-spacing: 0.3px;74 }75 76 /* Title & meta */77 .title {78 position: absolute;79 top: 1040px;80 left: 60px;81 right: 60px;82 font-size: 86px;83 font-weight: 800;84 letter-spacing: 1px;85 }86 .owner-row {87 position: absolute;88 top: 1140px;89 left: 60px;90 display: flex;91 align-items: center;92 gap: 20px;93 color: #ddd;94 font-size: 36px;95 }96 .owner-pill {97 width: 48px;98 height: 48px;99 border-radius: 50%;100 background: #9b7cf5;101 display: flex;102 align-items: center;103 justify-content: center;104 font-weight: 700;105 color: #1b1b1b;106 font-size: 28px;107 }108 .meta-dot {109 width: 10px;110 height: 10px;111 background: #777;112 border-radius: 50%;113 margin: 0 8px;114 }115 116 /* Action row */117 .actions {118 position: absolute;119 top: 1240px;120 left: 60px;121 right: 60px;122 display: flex;123 align-items: center;124 justify-content: space-between;125 }126 .action-left {127 display: flex;128 align-items: center;129 gap: 26px;130 }131 .btn-enhance {132 padding: 18px 34px;133 border-radius: 999px;134 border: 2px solid #8a8a8a;135 color: #fff;136 font-size: 36px;137 font-weight: 600;138 }139 .round-icon {140 width: 72px;141 height: 72px;142 border-radius: 50%;143 border: 2px solid #666;144 display: flex;145 align-items: center;146 justify-content: center;147 color: #ddd;148 }149 .dots {150 width: 72px;151 height: 72px;152 border-radius: 50%;153 border: 2px solid #666;154 display: flex;155 align-items: center;156 justify-content: center;157 }158 .play-main {159 width: 150px;160 height: 150px;161 background: #1DB954;162 border-radius: 50%;163 display: flex;164 align-items: center;165 justify-content: center;166 }167 168 /* Add to playlist row */169 .add-row {170 position: absolute;171 top: 1420px;172 left: 60px;173 right: 60px;174 height: 150px;175 display: flex;176 align-items: center;177 border-top: 1px solid #222;178 border-bottom: 1px solid #222;179 gap: 28px;180 }181 .add-square {182 width: 120px;183 height: 120px;184 background: #2d2d2d;185 border-radius: 12px;186 border: 1px solid #3b3b3b;187 display: flex;188 align-items: center;189 justify-content: center;190 }191 .add-row span {192 font-size: 42px;193 font-weight: 600;194 }195 196 /* Track item */197 .track {198 position: absolute;199 top: 1610px;200 left: 60px;201 right: 60px;202 color: #fff;203 }204 .track-top {205 display: flex;206 gap: 28px;207 }208 .album-art {209 width: 140px;210 height: 140px;211 background: #E0E0E0;212 border: 1px solid #BDBDBD;213 border-radius: 12px;214 color: #757575;215 display: flex;216 align-items: center;217 justify-content: center;218 font-size: 24px;219 }220 .track-info {221 flex: 1;222 }223 .track-title {224 font-size: 40px;225 font-weight: 700;226 line-height: 1.2;227 }228 .track-sub {229 color: #b3b3b3;230 font-size: 30px;231 margin-top: 6px;232 }233 .track-desc {234 color: #b3b3b3;235 font-size: 30px;236 margin-top: 22px;237 line-height: 1.45;238 }239 .track-meta {240 margin-top: 24px;241 color: #b3b3b3;242 font-size: 30px;243 display: flex;244 align-items: center;245 gap: 16px;246 }247 .progress {248 width: 280px;249 height: 12px;250 background: #2a2a2a;251 border-radius: 6px;252 overflow: hidden;253 margin-left: 10px;254 }255 .progress > div {256 width: 45%;257 height: 100%;258 background: #3f8d5f;259 }260 261 .track-actions {262 margin-top: 26px;263 display: flex;264 align-items: center;265 gap: 28px;266 }267 .small-round {268 width: 86px;269 height: 86px;270 border-radius: 50%;271 border: 2px solid #575757;272 display: flex;273 align-items: center;274 justify-content: center;275 color: #ddd;276 }277 .play-small {278 margin-left: auto;279 width: 120px;280 height: 120px;281 border-radius: 50%;282 background: #fff;283 display: flex;284 align-items: center;285 justify-content: center;286 color: #111;287 }288 289 /* Now playing card */290 .now-playing {291 position: absolute;292 left: 40px;293 right: 40px;294 top: 2060px;295 height: 172px;296 background: #2a2a2a;297 border-radius: 22px;298 border: 1px solid #3a3a3a;299 display: flex;300 align-items: center;301 padding: 18px 24px;302 gap: 22px;303 }304 .np-art {305 width: 120px;306 height: 120px;307 background: #E0E0E0;308 border: 1px solid #BDBDBD;309 border-radius: 12px;310 display: flex;311 align-items: center;312 justify-content: center;313 color: #757575;314 font-size: 22px;315 }316 .np-info {317 flex: 1;318 }319 .np-title {320 font-size: 36px;321 font-weight: 800;322 }323 .np-sub {324 font-size: 30px;325 color: #b3b3b3;326 margin-top: 6px;327 }328 .np-actions {329 display: flex;330 align-items: center;331 gap: 22px;332 }333 .np-btn {334 width: 80px;335 height: 80px;336 border-radius: 16px;337 background: #3a3a3a;338 display: flex;339 align-items: center;340 justify-content: center;341 }342 .np-play {343 width: 86px;344 height: 86px;345 border-radius: 50%;346 background: #fff;347 color: #111;348 display: flex;349 align-items: center;350 justify-content: center;351 }352 353 /* Bottom nav */354 .bottom-nav {355 position: absolute;356 bottom: 72px;357 left: 0;358 right: 0;359 height: 150px;360 background: rgba(0,0,0,0.85);361 display: flex;362 align-items: center;363 justify-content: space-evenly;364 }365 .nav-item {366 display: flex;367 flex-direction: column;368 align-items: center;369 gap: 14px;370 color: #bfbfbf;371 font-size: 28px;372 }373 .nav-item.active {374 color: #fff;375 font-weight: 700;376 }377 .nav-icon {378 width: 58px;379 height: 58px;380 display: flex;381 align-items: center;382 justify-content: center;383 color: currentColor;384 }385 .gesture {386 position: absolute;387 bottom: 22px;388 left: 50%;389 transform: translateX(-50%);390 width: 300px;391 height: 14px;392 background: #d8d8d8;393 border-radius: 9px;394 opacity: 0.9;395 }396</style>397</head>398<body>399<div id="render-target">400 401 <!-- Status bar -->402 <div class="status-bar">403 <div>11:08</div>404 <div class="status-right">405 <span class="icon" title="folder">406 <svg width="40" height="40" viewBox="0 0 24 24" fill="none">407 <path d="M3 6h6l2 2h10v10a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2V6z" stroke="#fff" stroke-width="2"/>408 </svg>409 </span>410 <span class="icon" title="eye">411 <svg width="40" height="40" viewBox="0 0 24 24" fill="none">412 <path d="M12 5c5 0 9 7 9 7s-4 7-9 7-9-7-9-7 4-7 9-7z" stroke="#fff" stroke-width="2"/>413 <circle cx="12" cy="12" r="3" fill="#fff"/>414 </svg>415 </span>416 <span class="icon" title="mail">417 <svg width="40" height="40" viewBox="0 0 24 24" fill="none">418 <rect x="3" y="5" width="18" height="14" rx="2" stroke="#fff" stroke-width="2"/>419 <path d="M3 7l9 6 9-6" stroke="#fff" stroke-width="2"/>420 </svg>421 </span>422 <span class="icon" title="wifi">423 <svg width="40" height="40" viewBox="0 0 24 24" fill="none">424 <path d="M2 8c5-4 15-4 20 0M5 12c3-2 11-2 14 0M9 16c2-1 4-1 6 0" stroke="#fff" stroke-width="2" stroke-linecap="round"/>425 <circle cx="12" cy="19" r="1.5" fill="#fff"/>426 </svg>427 </span>428 <span class="icon" title="battery">429 <svg width="42" height="42" viewBox="0 0 28 18" fill="none">430 <rect x="1" y="3" width="22" height="12" rx="2" stroke="#fff" stroke-width="2"/>431 <rect x="3" y="5" width="15" height="8" fill="#1DB954"/>432 <rect x="23" y="7" width="4" height="6" rx="1" fill="#fff"/>433 </svg>434 </span>435 </div>436 </div>437 438 <!-- Back Button -->439 <div class="back-btn">440 <svg width="80" height="80" viewBox="0 0 24 24" fill="none">441 <path d="M15 6l-6 6 6 6" stroke="#fff" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>442 </svg>443 </div>444 445 <!-- Playlist collage -->446 <div class="playlist-art">[IMG: Playlist collage of jazz albums]</div>447 448 <!-- Title -->449 <div class="title">JAZZ MUSIC</div>450 451 <!-- Owner and duration -->452 <div class="owner-row">453 <div class="owner-pill">C</div>454 <div style="font-weight:700;color:#fff;">Cole</div>455 <span class="meta-dot"></span>456 <span class="icon">457 <svg width="34" height="34" viewBox="0 0 24 24" fill="none">458 <circle cx="12" cy="12" r="9" stroke="#b3b3b3" stroke-width="2"/>459 <path d="M3 12h18M12 3c3 4.5 3 13.5 0 18M7 5c2 3 2 11 0 14M17 5c-2 3-2 11 0 14" stroke="#b3b3b3" stroke-width="2"/>460 </svg>461 </span>462 <span>14min</span>463 </div>464 465 <!-- Actions -->466 <div class="actions">467 <div class="action-left">468 <div class="btn-enhance">Enhance</div>469 <div class="round-icon" title="add collaborators">470 <svg width="36" height="36" viewBox="0 0 24 24" fill="none">471 <circle cx="9" cy="8" r="4" stroke="#ddd" stroke-width="2"/>472 <path d="M2 20c2-4 10-4 12 0" stroke="#ddd" stroke-width="2"/>473 <path d="M18 10v4M16 12h4" stroke="#ddd" stroke-width="2" stroke-linecap="round"/>474 </svg>475 </div>476 <div class="dots" title="more">477 <svg width="36" height="36" viewBox="0 0 24 24" fill="#ddd">478 <circle cx="5" cy="12" r="2"/>479 <circle cx="12" cy="12" r="2"/>480 <circle cx="19" cy="12" r="2"/>481 </svg>482 </div>483 </div>484 <div class="play-main">485 <svg width="70" height="70" viewBox="0 0 24 24" fill="#000">486 <path d="M8 5l12 7-12 7V5z"/>487 </svg>488 </div>489 </div>490 491 <!-- Add to this playlist -->492 <div class="add-row">493 <div class="add-square">494 <svg width="60" height="60" viewBox="0 0 24 24" fill="none">495 <rect x="2" y="2" width="20" height="20" rx="4" stroke="#8a8a8a" stroke-width="2"/>496 <path d="M12 7v10M7 12h10" stroke="#cfcfcf" stroke-width="2" stroke-linecap="round"/>497 </svg>498 </div>499 <span>Add to this playlist</span>500 </div>501 502 <!-- Track item -->503 <div class="track">504 <div class="track-top">505 <div class="album-art">[IMG: Sunset rider]</div>506 <div class="track-info">507 <div class="track-title">Relaxing Music | Spa Music, Massage, Yoga, Sleep Music, Stress Relief Music, Zen</div>508 <div class="track-sub">The Sleep Zone Podcast</div>509 <div class="track-desc">Close your eyes, take a minimum of six slow deep breaths, and begin focusing on relaxing every inch of your body. Start by fo...</div>510 <div class="track-meta">511 <span>28 Feb • 1 hr 9 mins left</span>512 <div class="progress"><div></div></div>513 </div>514 </div>515 </div>516 517 <div class="track-actions">518 <div class="small-round" title="add">519 <svg width="40" height="40" viewBox="0 0 24 24" fill="none">520 <path d="M12 5v14M5 12h14" stroke="#ddd" stroke-width="2" stroke-linecap="round"/>521 </svg>522 </div>523 <div class="small-round" title="download">524 <svg width="40" height="40" viewBox="0 0 24 24" fill="none">525 <path d="M12 4v10M7 10l5 5 5-5" stroke="#ddd" stroke-width="2" stroke-linecap="round"/>526 <path d="M5 19h14" stroke="#ddd" stroke-width="2" stroke-linecap="round"/>527 </svg>528 </div>529 <div class="small-round" title="share">530 <svg width="40" height="40" viewBox="0 0 24 24" fill="none">531 <circle cx="6" cy="12" r="3" stroke="#ddd" stroke-width="2"/>532 <circle cx="18" cy="6" r="3" stroke="#ddd" stroke-width="2"/>533 <circle cx="18" cy="18" r="3" stroke="#ddd" stroke-width="2"/>534 <path d="M9 12l6-4M9 12l6 4" stroke="#ddd" stroke-width="2"/>535 </svg>536 </div>537 <div class="small-round" title="more">538 <svg width="40" height="40" viewBox="0 0 24 24" fill="#ddd">539 <circle cx="6" cy="12" r="2"/>540 <circle cx="12" cy="12" r="2"/>541 <circle cx="18" cy="12" r="2"/>542 </svg>543 </div>544 <div class="play-small">545 <svg width="54" height="54" viewBox="0 0 24 24" fill="#000">546 <path d="M8 5l12 7-12 7V5z"/>547 </svg>548 </div>549 </div>550 </div>551 552 <!-- Now playing card -->553 <div class="now-playing">554 <div class="np-art">[IMG: Album cover]</div>555 <div class="np-info">556 <div class="np-title">From "The Voice" Performance</div>557 <div class="np-sub">Maroon 5</div>558 </div>559 <div class="np-actions">560 <div class="np-btn" title="device">561 <svg width="42" height="42" viewBox="0 0 24 24" fill="none">562 <rect x="3" y="5" width="14" height="10" rx="2" stroke="#fff" stroke-width="2"/>563 <rect x="19" y="8" width="2" height="4" fill="#fff"/>564 </svg>565 </div>566 <div class="np-btn" title="like">567 <svg width="42" height="42" viewBox="0 0 24 24" fill="none">568 <path d="M12 21s-7-4.5-7-9.5a4.5 4.5 0 0 1 8-2.8 4.5 4.5 0 0 1 8 2.8C21 16.5 12 21 12 21z" stroke="#fff" stroke-width="2"/>569 </svg>570 </div>571 <div class="np-play">572 <svg width="40" height="40" viewBox="0 0 24 24" fill="#000">573 <path d="M8 5l12 7-12 7V5z"/>574 </svg>575 </div>576 </div>577 </div>578 579 <!-- Bottom navigation -->580 <div class="bottom-nav">581 <div class="nav-item">582 <div class="nav-icon">583 <svg width="48" height="48" viewBox="0 0 24 24" fill="none">584 <path d="M3 11l9-7 9 7v8a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2v-8z" stroke="currentColor" stroke-width="2"/>585 <path d="M9 21v-6h6v6" stroke="currentColor" stroke-width="2"/>586 </svg>587 </div>588 <div>Home</div>589 </div>590 <div class="nav-item">591 <div class="nav-icon">592 <svg width="48" height="48" viewBox="0 0 24 24" fill="none">593 <circle cx="11" cy="11" r="7" stroke="currentColor" stroke-width="2"/>594 <path d="M20 20l-4-4" stroke="currentColor" stroke-width="2" stroke-linecap="round"/>595 </svg>596 </div>597 <div>Search</div>598 </div>599 <div class="nav-item active">600 <div class="nav-icon">601 <svg width="48" height="48" viewBox="0 0 24 24" fill="none">602 <rect x="4" y="4" width="4" height="16" fill="currentColor"/>603 <rect x="10" y="8" width="4" height="12" fill="currentColor"/>604 <rect x="16" y="12" width="4" height="8" fill="currentColor"/>605 </svg>606 </div>607 <div>Your Library</div>608 </div>609 <div class="nav-item">610 <div class="nav-icon">611 <svg width="48" height="48" viewBox="0 0 24 24" fill="none">612 <circle cx="12" cy="12" r="9" stroke="currentColor" stroke-width="2"/>613 <path d="M7 9c4-2 6-2 10 0M7 13c4-2 6-2 10 0M7 17c4-2 6-2 10 0" stroke="currentColor" stroke-width="2" stroke-linecap="round"/>614 </svg>615 </div>616 <div>Premium</div>617 </div>618 </div>619 620 <div class="gesture"></div>621 622</div>623</body>624</html>