GD-ML/AndroidCode
13.4k
1<!DOCTYPE html>2<html lang="en">3<head>4<meta charset="UTF-8">5<title>Playlists UI</title>6<style>7 body {8 margin: 0;9 padding: 0;10 background: transparent;11 font-family: "Segoe UI", Roboto, Helvetica, Arial, sans-serif;12 }13 #render-target {14 width: 1080px;15 height: 2400px;16 position: relative;17 overflow: hidden;18 background: #2c2f35; /* dark charcoal */19 color: #E6E8EA;20 }21 22 /* Status bar */23 .status-bar {24 position: absolute;25 top: 24px;26 left: 48px;27 right: 48px;28 height: 96px;29 display: flex;30 align-items: center;31 justify-content: space-between;32 color: #F2F3F5;33 font-size: 44px;34 letter-spacing: 1px;35 }36 .status-icons {37 display: flex;38 gap: 26px;39 align-items: center;40 }41 .icon {42 width: 44px;43 height: 44px;44 }45 .icon svg {46 width: 100%;47 height: 100%;48 fill: none;49 stroke: #F2F3F5;50 stroke-width: 3;51 }52 53 /* Header */54 .page-title {55 position: absolute;56 top: 180px;57 left: 60px;58 font-size: 88px;59 font-weight: 700;60 color: #F4F5F6;61 }62 .sort-btn {63 position: absolute;64 top: 216px;65 right: 60px;66 font-size: 44px;67 color: #D9DDE1;68 }69 70 /* Search */71 .search-bar {72 position: absolute;73 top: 320px;74 left: 60px;75 width: 960px;76 height: 120px;77 background: #1a1d21;78 border-radius: 60px;79 display: flex;80 align-items: center;81 padding: 0 36px;82 color: #B9BEC4;83 }84 .search-bar .magnifier {85 width: 52px;86 height: 52px;87 margin-right: 22px;88 }89 .search-placeholder {90 font-size: 44px;91 }92 93 /* Create Playlist */94 .create-row {95 position: absolute;96 top: 500px;97 left: 60px;98 display: flex;99 align-items: center;100 gap: 28px;101 color: #29c7a7;102 cursor: default;103 }104 .create-row .plus {105 width: 64px;106 height: 64px;107 }108 .create-row .label {109 font-size: 48px;110 font-weight: 600;111 }112 113 /* Playlist list item */114 .playlist-item {115 position: absolute;116 top: 640px;117 left: 60px;118 right: 60px;119 height: 160px;120 display: flex;121 align-items: center;122 justify-content: space-between;123 }124 .playlist-left {125 display: flex;126 align-items: center;127 gap: 36px;128 }129 .cover {130 width: 120px;131 height: 120px;132 background: #E0E0E0;133 border: 1px solid #BDBDBD;134 border-radius: 12px;135 display: flex;136 align-items: center;137 justify-content: center;138 color: #757575;139 font-size: 28px;140 }141 .playlist-text .title {142 font-size: 54px;143 font-weight: 600;144 color: #EEF0F2;145 }146 .playlist-text .subtitle {147 margin-top: 8px;148 font-size: 36px;149 color: #AAB0B6;150 }151 .more-vert {152 width: 16px;153 height: 120px;154 display: flex;155 flex-direction: column;156 justify-content: center;157 gap: 16px;158 margin-right: 10px;159 }160 .dot {161 width: 12px;162 height: 12px;163 border-radius: 50%;164 background: #B8BDC3;165 opacity: 0.9;166 }167 168 /* Divider and tagline */169 .divider {170 position: absolute;171 left: 0;172 right: 0;173 bottom: 520px;174 height: 2px;175 background: rgba(255,255,255,0.14);176 }177 .tagline {178 position: absolute;179 bottom: 450px;180 left: 0;181 right: 0;182 text-align: center;183 color: #C2C7CD;184 font-size: 40px;185 display: flex;186 align-items: center;187 justify-content: center;188 gap: 18px;189 }190 .tagline .leaf {191 width: 44px;192 height: 44px;193 }194 .tagline .leaf svg {195 fill: none;196 stroke: #C2C7CD;197 stroke-width: 3;198 }199 200 /* Mini player */201 .player {202 position: absolute;203 left: 0;204 right: 0;205 bottom: 240px;206 height: 180px;207 background: #2f3238;208 border-top: 1px solid rgba(255,255,255,0.08);209 display: flex;210 align-items: center;211 padding: 0 60px;212 gap: 32px;213 }214 .player .album {215 width: 140px;216 height: 140px;217 background: #E0E0E0;218 border: 1px solid #BDBDBD;219 display: flex;220 align-items: center;221 justify-content: center;222 color: #757575;223 font-size: 26px;224 }225 .player .meta {226 flex: 1;227 display: flex;228 flex-direction: column;229 justify-content: center;230 }231 .player .song {232 font-size: 42px;233 color: #F2F3F5;234 white-space: nowrap;235 overflow: hidden;236 text-overflow: ellipsis;237 }238 .player .artist {239 margin-top: 8px;240 font-size: 32px;241 color: #B3B8BE;242 }243 .player .play-btn {244 width: 92px;245 height: 92px;246 }247 .player .play-btn svg {248 fill: none;249 stroke: #EAECEF;250 stroke-width: 3;251 }252 253 /* Bottom navigation */254 .nav {255 position: absolute;256 left: 0;257 right: 0;258 bottom: 0;259 height: 240px;260 background: #2c2f35;261 border-top: 1px solid rgba(255,255,255,0.08);262 display: flex;263 align-items: flex-start;264 justify-content: space-around;265 padding-top: 36px;266 }267 .nav-item {268 width: 180px;269 display: flex;270 flex-direction: column;271 align-items: center;272 color: #D8DCE1;273 font-size: 30px;274 gap: 14px;275 position: relative;276 }277 .nav-item .nav-icon {278 width: 76px;279 height: 76px;280 }281 .nav-item .nav-icon svg {282 fill: none;283 stroke: #D8DCE1;284 stroke-width: 3;285 }286 .nav-item.active .nav-icon svg {287 stroke: #DDE1E6;288 }289 .nav-item.active .label {290 color: #DDE1E6;291 }292 .nav-item.active .underline {293 position: absolute;294 bottom: 12px;295 width: 80px;296 height: 10px;297 background: #DDE1E6;298 border-radius: 8px;299 }300 .badge {301 position: absolute;302 right: 24px;303 top: 6px;304 width: 18px;305 height: 18px;306 background: #FF4D4D;307 border-radius: 50%;308 }309 310 /* Home indicator */311 .home-indicator {312 position: absolute;313 bottom: 18px;314 left: 50%;315 transform: translateX(-50%);316 width: 240px;317 height: 14px;318 background: #E6E6E6;319 border-radius: 10px;320 opacity: 0.9;321 }322</style>323</head>324<body>325<div id="render-target">326 327 <!-- Status Bar -->328 <div class="status-bar">329 <div class="time">12:22</div>330 <div class="status-icons">331 <!-- Simple mail/M icon -->332 <div class="icon">333 <svg viewBox="0 0 24 24">334 <path d="M3 5h18v14H3z"></path>335 <path d="M3 7l9 6 9-6"></path>336 </svg>337 </div>338 <!-- Gear icon -->339 <div class="icon">340 <svg viewBox="0 0 24 24">341 <circle cx="12" cy="12" r="4"></circle>342 <path d="M4 12h3M17 12h3M12 4v3M12 17v3M6.2 6.2l2 2M15.8 15.8l2 2M6.2 17.8l2-2M15.8 8.2l2-2"></path>343 </svg>344 </div>345 <!-- YouTube triangle -->346 <div class="icon">347 <svg viewBox="0 0 24 24">348 <rect x="3" y="6" width="18" height="12" rx="3" ry="3"></rect>349 <path d="M10 9l6 3-6 3z" fill="#F2F3F5" stroke="none"></path>350 </svg>351 </div>352 <!-- Signal/Wifi -->353 <div class="icon">354 <svg viewBox="0 0 24 24">355 <path d="M2 9c5-5 15-5 20 0"></path>356 <path d="M6 13c3-3 9-3 12 0"></path>357 <path d="M10 17c1-1 3-1 4 0"></path>358 </svg>359 </div>360 <!-- Battery -->361 <div class="icon">362 <svg viewBox="0 0 24 24">363 <rect x="2" y="7" width="18" height="10" rx="2" ry="2"></rect>364 <rect x="20" y="10" width="2" height="4"></rect>365 <rect x="4" y="9" width="12" height="6" fill="#F2F3F5" stroke="none"></rect>366 </svg>367 </div>368 </div>369 </div>370 371 <!-- Header -->372 <div class="page-title">Playlists</div>373 <div class="sort-btn">Sort</div>374 375 <!-- Search -->376 <div class="search-bar">377 <div class="magnifier">378 <svg viewBox="0 0 24 24">379 <circle cx="10" cy="10" r="6" stroke="#B9BEC4"></circle>380 <path d="M14 14l6 6" stroke="#B9BEC4"></path>381 </svg>382 </div>383 <div class="search-placeholder">Search</div>384 </div>385 386 <!-- Create Playlist -->387 <div class="create-row">388 <div class="plus">389 <svg viewBox="0 0 24 24">390 <path d="M12 5v14M5 12h14" stroke="#29c7a7" stroke-width="3" fill="none"></path>391 </svg>392 </div>393 <div class="label">Create Playlist</div>394 </div>395 396 <!-- Playlist item -->397 <div class="playlist-item">398 <div class="playlist-left">399 <div class="cover">[IMG: Playlist Cover]</div>400 <div class="playlist-text">401 <div class="title">Chill List</div>402 <div class="subtitle">1 Song</div>403 </div>404 </div>405 <div class="more-vert">406 <div class="dot"></div>407 <div class="dot"></div>408 <div class="dot"></div>409 </div>410 </div>411 412 <!-- Divider and tagline above player -->413 <div class="divider"></div>414 <div class="tagline">415 <div class="leaf">416 <svg viewBox="0 0 24 24">417 <path d="M20 4c-7 0-12 5-12 12 5 0 12-5 12-12z"></path>418 <path d="M8 16c2-4 6-8 12-10"></path>419 </svg>420 </div>421 <div>No Work, All Play.</div>422 </div>423 424 <!-- Mini Player -->425 <div class="player">426 <div class="album">[IMG: Album Cover]</div>427 <div class="meta">428 <div class="song">L-O-V-E (2003 Digital Remaster)</div>429 <div class="artist">Nat King Cole — L-O-V-E</div>430 </div>431 <div class="play-btn">432 <svg viewBox="0 0 24 24">433 <path d="M8 6l10 6-10 6z" fill="#EAECEF" stroke="none"></path>434 </svg>435 </div>436 </div>437 438 <!-- Bottom Navigation -->439 <div class="nav">440 <div class="nav-item">441 <div class="nav-icon">442 <svg viewBox="0 0 24 24">443 <path d="M3 11l9-7 9 7"></path>444 <path d="M6 11v9h12v-9"></path>445 </svg>446 </div>447 <div class="label">Home</div>448 </div>449 <div class="nav-item">450 <div class="nav-icon">451 <svg viewBox="0 0 24 24">452 <circle cx="10" cy="10" r="6"></circle>453 <path d="M14 14l6 6"></path>454 </svg>455 </div>456 <div class="label">Search</div>457 </div>458 <div class="nav-item">459 <div class="nav-icon">460 <svg viewBox="0 0 24 24">461 <path d="M7 3l5 7-6 11 11-9-4-2 4-7z"></path>462 </svg>463 </div>464 <div class="label">For You</div>465 </div>466 <div class="nav-item active">467 <div class="nav-icon">468 <svg viewBox="0 0 24 24">469 <circle cx="12" cy="12" r="10"></circle>470 <path d="M9 12c0-2 1.5-3 3-3" stroke-linecap="round"></path>471 </svg>472 </div>473 <div class="label">My Library</div>474 <div class="underline"></div>475 </div>476 <div class="nav-item">477 <div class="nav-icon">478 <svg viewBox="0 0 24 24">479 <path d="M20 4c-7 0-12 5-12 12 5 0 12-5 12-12z"></path>480 <path d="M8 16c2-4 6-8 12-10"></path>481 </svg>482 </div>483 <div class="label">Pro</div>484 <div class="badge"></div>485 </div>486 </div>487 488 <!-- Home indicator -->489 <div class="home-indicator"></div>490 491</div>492</body>493</html>