GD-ML/AndroidCode
13.4k
1<html>2<head>3<meta charset="UTF-8">4<title>Playlist UI Mock</title>5<style>6 body { margin: 0; padding: 0; background: transparent; font-family: Arial, Helvetica, sans-serif; }7 #render-target {8 width: 1080px;9 height: 2400px;10 position: relative;11 overflow: hidden;12 background: #000000;13 color: #FFFFFF;14 }15 16 /* Status bar */17 .status-bar {18 position: absolute;19 top: 0;20 left: 0;21 width: 1080px;22 height: 90px;23 display: flex;24 align-items: center;25 justify-content: space-between;26 padding: 0 30px;27 color: #fff;28 font-weight: 600;29 font-size: 32px;30 }31 .status-right {32 display: flex;33 align-items: center;34 gap: 22px;35 }36 .icon {37 width: 36px;38 height: 36px;39 fill: #FFFFFF;40 }41 42 /* Back button */43 .back-btn {44 position: absolute;45 top: 110px;46 left: 36px;47 width: 96px;48 height: 96px;49 background: #1f1f1f;50 border-radius: 48px;51 display: flex;52 align-items: center;53 justify-content: center;54 }55 .back-btn svg { width: 40px; height: 40px; fill: #fff; }56 57 /* Cast icon floating */58 .cast-fab {59 position: absolute;60 top: 170px;61 right: 36px;62 width: 92px;63 height: 92px;64 background: #1f1f1f;65 border-radius: 46px;66 display: flex;67 align-items: center;68 justify-content: center;69 }70 .cast-fab svg { width: 44px; height: 44px; fill: #fff; }71 72 /* Header / playlist info */73 .header {74 position: absolute;75 top: 210px;76 left: 36px;77 right: 36px;78 display: grid;79 grid-template-columns: 230px 1fr;80 gap: 34px;81 align-items: center;82 }83 .cover-stack {84 position: relative;85 width: 230px;86 height: 230px;87 }88 .cover-stack .layer {89 position: absolute;90 width: 210px;91 height: 210px;92 background: #E0E0E0;93 border: 1px solid #BDBDBD;94 color: #757575;95 display: flex;96 align-items: center;97 justify-content: center;98 font-size: 22px;99 }100 .layer.l1 { left: 20px; top: 18px; opacity: 0.35; }101 .layer.l2 { left: 10px; top: 9px; opacity: 0.65; }102 .layer.main { left: 0; top: 0; opacity: 1; }103 .title-block h1 {104 margin: 0 0 10px 0;105 font-size: 54px;106 font-weight: 700;107 letter-spacing: -0.5px;108 }109 .title-sub {110 color: #b3b3b3;111 font-size: 28px;112 margin-bottom: 22px;113 }114 .byline {115 display: flex;116 align-items: center;117 gap: 16px;118 color: #dcdcdc;119 font-size: 30px;120 }121 .avatar {122 width: 56px;123 height: 56px;124 border-radius: 50%;125 background: #3a3a3a;126 display: inline-block;127 }128 129 /* Play controls on header */130 .header-controls {131 position: absolute;132 top: 420px;133 right: 36px;134 display: flex;135 align-items: center;136 gap: 26px;137 }138 .control {139 width: 120px;140 height: 120px;141 border-radius: 60px;142 background: #1f1f1f;143 display: flex;144 align-items: center;145 justify-content: center;146 }147 .control svg { width: 60px; height: 60px; fill: #fff; }148 149 /* vertical ellipsis near header */150 .kebab-small {151 position: absolute;152 top: 470px;153 left: 36px;154 width: 40px;155 height: 40px;156 display: flex;157 align-items: center;158 justify-content: center;159 }160 .kebab-small svg { width: 28px; height: 28px; fill: #999; }161 162 /* Track list */163 .track-list {164 position: absolute;165 top: 580px;166 left: 36px;167 right: 36px;168 }169 .track-row {170 display: grid;171 grid-template-columns: 130px 1fr 60px;172 align-items: center;173 padding: 18px 0;174 }175 .track-cover {176 width: 120px;177 height: 120px;178 background: #E0E0E0;179 border: 1px solid #BDBDBD;180 color: #757575;181 display: flex;182 align-items: center;183 justify-content: center;184 font-size: 20px;185 }186 .track-info h3 {187 margin: 0;188 font-size: 44px;189 font-weight: 700;190 }191 .track-artist {192 margin-top: 8px;193 font-size: 32px;194 color: #cfcfcf;195 }196 .track-meta {197 margin-top: 12px;198 font-size: 28px;199 color: #b0b0b0;200 display: flex;201 align-items: center;202 gap: 18px;203 }204 .track-meta .dot {205 width: 6px; height: 6px; background: #b0b0b0; border-radius: 3px;206 }207 .kebab {208 display: flex;209 align-items: center;210 justify-content: center;211 }212 .kebab svg { width: 34px; height: 34px; fill: #999; }213 214 /* Toast */215 .toast {216 position: absolute;217 bottom: 360px;218 left: 50%;219 transform: translateX(-50%);220 width: 880px;221 height: 120px;222 background: #232323;223 border-radius: 60px;224 display: flex;225 align-items: center;226 justify-content: center;227 color: #ffffff;228 font-size: 36px;229 box-shadow: 0 12px 30px rgba(0,0,0,0.4);230 }231 232 /* Now playing bar */233 .now-playing {234 position: absolute;235 bottom: 180px;236 left: 0;237 width: 1080px;238 height: 160px;239 background: linear-gradient(90deg, #2a3a2a, #2e3d32, #32423a);240 display: grid;241 grid-template-columns: 140px 1fr 220px;242 align-items: center;243 padding: 0 30px;244 color: #fff;245 }246 .play-pill {247 width: 92px;248 height: 92px;249 border-radius: 46px;250 background: #1f1f1f;251 display: flex;252 align-items: center;253 justify-content: center;254 }255 .play-pill svg { width: 42px; height: 42px; fill: #fff; }256 .np-title {257 font-size: 36px;258 font-weight: 700;259 }260 .np-artist {261 font-size: 30px;262 color: #e4e4e4;263 }264 .np-actions {265 display: flex;266 align-items: center;267 gap: 36px;268 justify-content: flex-end;269 }270 .np-actions svg { width: 56px; height: 56px; fill: #fff; }271 272 /* Bottom navigation */273 .bottom-nav {274 position: absolute;275 bottom: 0;276 left: 0;277 width: 1080px;278 height: 180px;279 display: grid;280 grid-template-columns: repeat(5, 1fr);281 align-items: center;282 background: #000;283 border-top: 1px solid #202020;284 }285 .nav-item {286 display: flex;287 flex-direction: column;288 align-items: center;289 gap: 16px;290 color: #a5a5a5;291 font-size: 28px;292 }293 .nav-item svg { width: 54px; height: 54px; fill: #a5a5a5; }294 .nav-item.active { color: #ffffff; }295 .nav-item.active svg { fill: #ffffff; }296</style>297</head>298<body>299<div id="render-target">300 301 <!-- Status bar -->302 <div class="status-bar">303 <div>1:19</div>304 <div class="status-right">305 <!-- simple signal icon -->306 <svg class="icon" viewBox="0 0 24 24">307 <rect x="2" y="14" width="4" height="8"></rect>308 <rect x="8" y="10" width="4" height="12"></rect>309 <rect x="14" y="6" width="4" height="16"></rect>310 </svg>311 <!-- wifi -->312 <svg class="icon" viewBox="0 0 24 24">313 <path d="M12 18l2 2-2 2-2-2 2-2z"></path>314 <path d="M2 9a16 16 0 0 1 20 0" stroke="#fff" stroke-width="2" fill="none"></path>315 <path d="M5 12a12 12 0 0 1 14 0" stroke="#fff" stroke-width="2" fill="none"></path>316 <path d="M8 15a8 8 0 0 1 8 0" stroke="#fff" stroke-width="2" fill="none"></path>317 </svg>318 <!-- battery -->319 <svg class="icon" viewBox="0 0 24 24">320 <rect x="2" y="6" width="18" height="12" rx="2" ry="2" stroke="#fff" fill="none" stroke-width="2"></rect>321 <rect x="4" y="8" width="12" height="8" fill="#fff"></rect>322 <rect x="20" y="9" width="2" height="6" fill="#fff"></rect>323 </svg>324 </div>325 </div>326 327 <!-- Back button -->328 <div class="back-btn">329 <svg viewBox="0 0 24 24">330 <path d="M15 18l-6-6 6-6" stroke="#fff" stroke-width="2" fill="none" stroke-linecap="round" stroke-linejoin="round"></path>331 </svg>332 </div>333 334 <!-- Cast floating button -->335 <div class="cast-fab">336 <svg viewBox="0 0 24 24">337 <rect x="3" y="5" width="18" height="14" rx="2" ry="2" fill="none" stroke="#fff" stroke-width="2"></rect>338 <path d="M3 18c3 0 5 2 5 2" stroke="#fff" stroke-width="2" fill="none"></path>339 <path d="M3 14c5 0 8 4 8 4" stroke="#fff" stroke-width="2" fill="none"></path>340 <path d="M3 10c7 0 11 6 11 6" stroke="#fff" stroke-width="2" fill="none"></path>341 </svg>342 </div>343 344 <!-- Header with playlist -->345 <div class="header">346 <div class="cover-stack">347 <div class="layer l1">[IMG: Album Cover]</div>348 <div class="layer l2">[IMG: Album Cover]</div>349 <div class="layer main">[IMG: Album Cover]</div>350 </div>351 <div class="title-block">352 <h1>My Favorite Songs</h1>353 <div class="title-sub">Playlist • One Track • 3:08 • Just now</div>354 <div class="byline">355 <span class="avatar"></span>356 <span>By Amelia miller</span>357 </div>358 </div>359 </div>360 361 <!-- shuffle + play -->362 <div class="header-controls">363 <div class="control">364 <!-- shuffle icon -->365 <svg viewBox="0 0 24 24">366 <path d="M4 7h6l4 4h6" stroke="#fff" stroke-width="2" fill="none" stroke-linecap="round"></path>367 <path d="M4 17h6l4-4h6" stroke="#fff" stroke-width="2" fill="none" stroke-linecap="round"></path>368 <path d="M20 7v4l3-2-3-2z" fill="#fff"></path>369 <path d="M20 13v4l3-2-3-2z" fill="#fff"></path>370 </svg>371 </div>372 <div class="control" style="background:#ffffff;">373 <!-- play filled -->374 <svg viewBox="0 0 24 24">375 <circle cx="12" cy="12" r="10" fill="#fff"></circle>376 <path d="M10 8l7 4-7 4V8z" fill="#000"></path>377 </svg>378 </div>379 </div>380 381 <!-- header kebab -->382 <div class="kebab-small">383 <svg viewBox="0 0 24 24">384 <circle cx="12" cy="5" r="2"></circle>385 <circle cx="12" cy="12" r="2"></circle>386 <circle cx="12" cy="19" r="2"></circle>387 </svg>388 </div>389 390 <!-- Track list -->391 <div class="track-list">392 <div class="track-row">393 <div class="track-cover">[IMG: Album Cover]</div>394 <div class="track-info">395 <h3>Mambo Diablo</h3>396 <div class="track-artist">Tito Puente</div>397 <div class="track-meta">398 <svg viewBox="0 0 24 24" width="28" height="28" fill="#b0b0b0">399 <path d="M8 19V6l13 6-13 7z"></path>400 </svg>401 <span>513</span>402 <span class="dot"></span>403 <span>3:08</span>404 </div>405 </div>406 <div class="kebab">407 <svg viewBox="0 0 24 24">408 <circle cx="12" cy="5" r="2"></circle>409 <circle cx="12" cy="12" r="2"></circle>410 <circle cx="12" cy="19" r="2"></circle>411 </svg>412 </div>413 </div>414 </div>415 416 <!-- Toast -->417 <div class="toast">Mambo Diablo added to My Favorite Songs</div>418 419 <!-- Now playing bar -->420 <div class="now-playing">421 <div class="play-pill">422 <svg viewBox="0 0 24 24">423 <path d="M8 6l10 6-10 6V6z"></path>424 </svg>425 </div>426 <div>427 <div class="np-title">Tito Mambo</div>428 <div class="np-artist">Tito Puente</div>429 </div>430 <div class="np-actions">431 <!-- person plus -->432 <svg viewBox="0 0 24 24">433 <circle cx="8" cy="9" r="4" fill="none" stroke="#fff" stroke-width="2"></circle>434 <path d="M2 20c0-4 6-4 6-4s6 0 6 4" stroke="#fff" stroke-width="2" fill="none"></path>435 <path d="M19 8v6M16 11h6" stroke="#fff" stroke-width="2" fill="none"></path>436 </svg>437 <!-- heart -->438 <svg viewBox="0 0 24 24">439 <path d="M12 21s-7-4.5-9-8.5C1 8 4 6 6.5 6 8.6 6 10 7.3 12 9.3 14 7.3 15.4 6 17.5 6 20 6 23 8 21 12.5 19 16.5 12 21 12 21z" fill="none" stroke="#fff" stroke-width="2"></path>440 </svg>441 </div>442 </div>443 444 <!-- Bottom navigation -->445 <div class="bottom-nav">446 <div class="nav-item">447 <svg viewBox="0 0 24 24">448 <path d="M3 11l9-7 9 7v9H3v-9z" fill="none" stroke="#a5a5a5" stroke-width="2"></path>449 <rect x="9" y="14" width="6" height="6" fill="#a5a5a5"></rect>450 </svg>451 <div>Home</div>452 </div>453 <div class="nav-item">454 <svg viewBox="0 0 24 24">455 <rect x="3" y="4" width="18" height="14" rx="2" ry="2" fill="none" stroke="#a5a5a5" stroke-width="2"></rect>456 <rect x="6" y="7" width="12" height="3" fill="#a5a5a5"></rect>457 <rect x="6" y="12" width="8" height="3" fill="#a5a5a5"></rect>458 </svg>459 <div>Feed</div>460 </div>461 <div class="nav-item">462 <svg viewBox="0 0 24 24">463 <circle cx="11" cy="11" r="6" fill="none" stroke="#a5a5a5" stroke-width="2"></circle>464 <line x1="17" y1="17" x2="22" y2="22" stroke="#a5a5a5" stroke-width="2"></line>465 </svg>466 <div>Search</div>467 </div>468 <div class="nav-item active">469 <svg viewBox="0 0 24 24">470 <rect x="4" y="4" width="6" height="16" fill="#fff"></rect>471 <rect x="12" y="4" width="8" height="16" fill="none" stroke="#fff" stroke-width="2"></rect>472 <rect x="14" y="8" width="4" height="2" fill="#fff"></rect>473 <rect x="14" y="12" width="6" height="2" fill="#fff"></rect>474 </svg>475 <div>Library</div>476 </div>477 <div class="nav-item">478 <svg viewBox="0 0 24 24">479 <path d="M5 16a7 7 0 0 1 14 0h-3" stroke="#a5a5a5" stroke-width="2" fill="none"></path>480 <path d="M4 16h16v4H4z" fill="#a5a5a5"></path>481 </svg>482 <div>Upgrade</div>483 </div>484 </div>485 486</div>487</body>488</html>