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 UI Mock</title>7<style>8 body { margin: 0; padding: 0; background: transparent; }9 #render-target {10 width: 1080px;11 height: 2400px;12 position: relative;13 overflow: hidden;14 background: #121212;15 color: #FFFFFF;16 font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Arial, sans-serif;17 }18 19 /* Status bar */20 .status-bar {21 position: absolute;22 top: 0;23 left: 0;24 height: 96px;25 width: 100%;26 padding: 0 36px;27 display: flex;28 align-items: center;29 justify-content: space-between;30 color: #fff;31 font-size: 38px;32 background: #121212;33 }34 .status-icons { display: flex; align-items: center; gap: 28px; opacity: 0.9; }35 .status-icons svg { width: 40px; height: 40px; fill: #fff; }36 37 /* App bar */38 .app-bar {39 position: absolute;40 top: 96px;41 left: 0;42 height: 112px;43 width: 100%;44 display: flex;45 align-items: center;46 padding: 0 24px;47 gap: 20px;48 background: #121212;49 }50 .app-actions {51 margin-left: auto;52 display: flex;53 align-items: center;54 gap: 32px;55 }56 .icon-btn {57 width: 72px;58 height: 72px;59 display: flex;60 align-items: center;61 justify-content: center;62 border-radius: 36px;63 color: #fff;64 }65 .icon-btn svg { width: 40px; height: 40px; fill: #fff; }66 67 /* Content area */68 .content {69 position: absolute;70 top: 208px;71 left: 0;72 width: 100%;73 padding: 24px;74 }75 76 .banner {77 width: 100%;78 height: 460px;79 border-radius: 28px;80 overflow: hidden;81 background: linear-gradient(90deg, #3b2e1f, #422b22);82 padding: 0;83 position: relative;84 }85 .banner .img {86 position: absolute;87 inset: 0;88 display: flex;89 align-items: center;90 justify-content: center;91 background: #E0E0E0;92 border: 1px solid #BDBDBD;93 color: #757575;94 font-size: 42px;95 letter-spacing: 0.3px;96 }97 98 .playlist-header {99 margin-top: 28px;100 display: flex;101 align-items: flex-start;102 justify-content: space-between;103 }104 .playlist-title {105 font-size: 64px;106 font-weight: 700;107 line-height: 1.2;108 margin: 0 0 10px 0;109 }110 .meta {111 display: flex;112 align-items: center;113 gap: 16px;114 color: #BDBDBD;115 font-size: 34px;116 }117 .meta svg { width: 32px; height: 32px; fill: #BDBDBD; }118 .header-actions {119 display: flex;120 align-items: center;121 gap: 24px;122 }123 .round-action {124 width: 96px;125 height: 96px;126 background: #262626;127 border-radius: 48px;128 display: flex;129 align-items: center;130 justify-content: center;131 }132 .round-action svg { width: 44px; height: 44px; fill: #E0E0E0; }133 134 /* Buttons row */135 .btn-row {136 margin-top: 22px;137 display: flex;138 gap: 24px;139 }140 .pill-btn {141 height: 120px;142 padding: 0 46px;143 border-radius: 60px;144 display: flex;145 align-items: center;146 gap: 28px;147 font-size: 42px;148 font-weight: 600;149 letter-spacing: 0.2px;150 }151 .pill-btn.play {152 background: #FFFFFF;153 color: #121212;154 }155 .pill-btn.shuffle {156 background: #2A2A2A;157 color: #FFFFFF;158 }159 .pill-btn svg { width: 52px; height: 52px; }160 161 /* Sort row */162 .sort-row {163 margin-top: 40px;164 display: flex;165 align-items: center;166 gap: 18px;167 color: #BDBDBD;168 font-size: 36px;169 }170 .sort-row svg { width: 42px; height: 42px; fill: #BDBDBD; }171 172 /* Video list */173 .video-item {174 margin-top: 24px;175 display: grid;176 grid-template-columns: 340px 1fr 80px;177 align-items: center;178 gap: 24px;179 padding-right: 18px;180 }181 .thumb {182 width: 340px;183 height: 210px;184 border-radius: 22px;185 overflow: hidden;186 position: relative;187 background: #E0E0E0;188 border: 1px solid #BDBDBD;189 display: flex;190 align-items: center;191 justify-content: center;192 color: #757575;193 font-size: 28px;194 }195 .duration {196 position: absolute;197 right: 12px;198 bottom: 12px;199 background: rgba(0,0,0,0.75);200 color: #fff;201 font-size: 30px;202 padding: 8px 12px;203 border-radius: 10px;204 }205 .progress {206 position: absolute;207 left: 0;208 bottom: 0;209 height: 8px;210 width: 45%;211 background: #FF0000;212 border-top-right-radius: 6px;213 }214 .video-info {215 display: flex;216 flex-direction: column;217 gap: 12px;218 }219 .video-title {220 color: #FFFFFF;221 font-size: 40px;222 line-height: 1.25;223 }224 .video-meta {225 color: #BDBDBD;226 font-size: 32px;227 }228 .more-btn svg { width: 44px; height: 44px; fill: #BDBDBD; }229 230 .section-title {231 margin-top: 32px;232 font-size: 48px;233 font-weight: 700;234 }235 236 /* Bottom pill (gesture) */237 .gesture-pill {238 position: absolute;239 bottom: 180px;240 left: 50%;241 transform: translateX(-50%);242 width: 260px;243 height: 12px;244 border-radius: 8px;245 background: rgba(255,255,255,0.85);246 }247 248 /* Bottom navigation */249 .bottom-nav {250 position: absolute;251 bottom: 0;252 left: 0;253 width: 100%;254 height: 190px;255 background: #1E1E1E;256 display: grid;257 grid-template-columns: repeat(5, 1fr);258 align-items: center;259 padding-bottom: 10px;260 }261 .nav-item {262 display: flex;263 flex-direction: column;264 align-items: center;265 justify-content: center;266 gap: 16px;267 color: #BDBDBD;268 font-size: 28px;269 }270 .nav-item.active { color: #FFFFFF; }271 .nav-item svg { width: 54px; height: 54px; fill: currentColor; }272</style>273</head>274<body>275<div id="render-target">276 277 <!-- Status bar -->278 <div class="status-bar">279 <div>10:17</div>280 <div class="status-icons">281 <!-- Signal -->282 <svg viewBox="0 0 24 24"><path d="M2 20h2v-2H2v2zm4 0h2v-6H6v6zm4 0h2v-10h-2v10zm4 0h2V4h-2v16zm4 0h2V8h-2v12z"/></svg>283 <!-- Headphones -->284 <svg viewBox="0 0 24 24"><path d="M12 3a9 9 0 0 0-9 9v7h4v-6H5a7 7 0 0 1 14 0h-2v6h4v-7a9 9 0 0 0-9-9z"/></svg>285 <!-- Battery -->286 <svg viewBox="0 0 24 24"><path d="M2 7h18v10H2V7zm20 3v4h-2V10h2z"/></svg>287 </div>288 </div>289 290 <!-- App bar -->291 <div class="app-bar">292 <div class="icon-btn" title="Back">293 <svg viewBox="0 0 24 24"><path d="M15 6L9 12l6 6" stroke="#fff" stroke-width="2" fill="none" stroke-linecap="round" stroke-linejoin="round"/></svg>294 </div>295 <div class="app-actions">296 <!-- Cast -->297 <div class="icon-btn">298 <svg viewBox="0 0 24 24"><path d="M3 5h18v12H3V5zm0 14h4a6 6 0 0 0-4-4v4zm0-6a8 8 0 0 1 8 8h-2a6 6 0 0 0-6-6V13zm0-4a12 12 0 0 1 12 12h-2A10 10 0 0 0 3 9V7z"/></svg>299 </div>300 <!-- Search -->301 <div class="icon-btn">302 <svg viewBox="0 0 24 24"><path d="M10 4a6 6 0 1 1 0 12a6 6 0 0 1 0-12zm8.5 13.1l3.4 3.4-1.4 1.4-3.4-3.4 1.4-1.4z"/></svg>303 </div>304 <!-- More -->305 <div class="icon-btn">306 <svg viewBox="0 0 24 24"><circle cx="12" cy="5" r="2"/><circle cx="12" cy="12" r="2"/><circle cx="12" cy="19" r="2"/></svg>307 </div>308 </div>309 </div>310 311 <!-- Content -->312 <div class="content">313 <div class="banner">314 <div class="img">[IMG: Playlist Artwork]</div>315 </div>316 317 <div class="playlist-header">318 <div>319 <h1 class="playlist-title">Night meditation</h1>320 <div class="meta">321 <span>2 videos</span>322 <svg viewBox="0 0 24 24"><path d="M12 1a5 5 0 0 0-5 5v2H5v12h14V8h-2V6a5 5 0 0 0-5-5zm-3 7V6a3 3 0 0 1 6 0v2H9z"/></svg>323 <span>Private</span>324 </div>325 </div>326 <div class="header-actions">327 <div class="round-action" title="Edit">328 <svg viewBox="0 0 24 24"><path d="M3 17.25V21h3.75L17.81 9.94l-3.75-3.75L3 17.25zm18-11.5a1 1 0 0 0 0-1.41l-2.34-2.34a1 1 0 0 0-1.41 0l-1.83 1.83 3.75 3.75L21 5.75z"/></svg>329 </div>330 <div class="round-action" title="Download">331 <svg viewBox="0 0 24 24"><path d="M12 3v10l4-4 1.4 1.4L12 16l-5.4-5.6L8 9l4 4V3h0zM5 19h14v2H5z"/></svg>332 </div>333 </div>334 </div>335 336 <div class="btn-row">337 <div class="pill-btn play">338 <svg viewBox="0 0 24 24"><path d="M8 5v14l11-7z"/></svg>339 <span>Play all</span>340 </div>341 <div class="pill-btn shuffle">342 <svg viewBox="0 0 24 24"><path d="M16 3h5v5h-2V6.41L14.41 11 13 9.59 17.59 5H16V3zM8 13l2 2-2 2H3v-2h3.59L8 13zm10 3h3v5h-5v-2h2.59L13 12.41 14.41 11 18 14.59V16z"/></svg>343 <span>Shuffle</span>344 </div>345 </div>346 347 <div class="sort-row">348 <svg viewBox="0 0 24 24"><path d="M4 6h16v2H4V6zm0 5h10v2H4v-2zm0 5h6v2H4v-2z"/></svg>349 <span>Sort</span>350 </div>351 352 <!-- Video item 1 -->353 <div class="video-item">354 <div class="thumb">355 [IMG: Video Thumbnail]356 <div class="progress"></div>357 <div class="duration">17:47</div>358 </div>359 <div class="video-info">360 <div class="video-title">Most Powerful Meditation for Attracting a Relationship...</div>361 <div class="video-meta">Aaron Doughty • 6.9M views • 5 years ago</div>362 </div>363 <div class="more-btn">364 <svg viewBox="0 0 24 24"><circle cx="12" cy="5" r="2"/><circle cx="12" cy="12" r="2"/><circle cx="12" cy="19" r="2"/></svg>365 </div>366 </div>367 368 <!-- Video item 2 -->369 <div class="video-item">370 <div class="thumb">371 [IMG: Video Thumbnail]372 <div class="progress" style="width:22%;"></div>373 <div class="duration">26:18</div>374 </div>375 <div class="video-info">376 <div class="video-title">Powerful Love Affirmations For Singles To Attract Soul...</div>377 <div class="video-meta">Mind Body Soul • 744K views • 1 year ago</div>378 </div>379 <div class="more-btn">380 <svg viewBox="0 0 24 24"><circle cx="12" cy="5" r="2"/><circle cx="12" cy="12" r="2"/><circle cx="12" cy="19" r="2"/></svg>381 </div>382 </div>383 384 <div class="section-title">Recommended videos</div>385 386 <!-- Recommended sample card -->387 <div class="video-item" style="margin-top: 12px;">388 <div class="thumb">389 [IMG: Recommended Video Thumbnail]390 </div>391 <div class="video-info">392 <div class="video-title">852 Hz - LET GO of Fear, Overthinking & Worries | Deep Healing Frequency</div>393 <div class="video-meta">Channel Name • 2.3M views • 8 months ago</div>394 </div>395 <div class="more-btn">396 <svg viewBox="0 0 24 24"><circle cx="12" cy="5" r="2"/><circle cx="12" cy="12" r="2"/><circle cx="12" cy="19" r="2"/></svg>397 </div>398 </div>399 400 <div class="gesture-pill"></div>401 </div>402 403 <!-- Bottom navigation -->404 <div class="bottom-nav">405 <div class="nav-item active">406 <svg viewBox="0 0 24 24"><path d="M12 3l9 8h-3v9H6v-9H3l9-8z"/></svg>407 <div>Home</div>408 </div>409 <div class="nav-item">410 <svg viewBox="0 0 24 24"><path d="M10 3h4v6h6v4h-6v8h-4v-8H4V9h6z"/></svg>411 <div>Shorts</div>412 </div>413 <div class="nav-item">414 <svg viewBox="0 0 24 24"><path d="M12 5v14m-7-7h14" stroke="currentColor" stroke-width="2" fill="none" stroke-linecap="round"/></svg>415 <div>Add</div>416 </div>417 <div class="nav-item">418 <svg viewBox="0 0 24 24"><path d="M3 7h18v2H3V7zm0 4h18v2H3v-2zm0 4h18v2H3v-2z"/></svg>419 <div>Subscriptions</div>420 </div>421 <div class="nav-item">422 <svg viewBox="0 0 24 24"><path d="M3 4h18v14H3V4zm4 3v8l8-4-8-4z"/></svg>423 <div>Library</div>424 </div>425 </div>426 427</div>428</body>429</html>