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>Playlists UI</title>7<style>8 body { margin: 0; padding: 0; background: transparent; }9 #render-target {10 width: 1080px; height: 2400px;11 position: relative; overflow: hidden;12 background: #111;13 color: #fff;14 font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;15 }16 .statusbar {17 position: absolute; top: 0; left: 0; right: 0;18 height: 90px; padding: 0 24px;19 display: flex; align-items: center; justify-content: space-between;20 color: #fff; font-size: 28px; opacity: 0.9;21 }22 .status-icons { display: flex; gap: 20px; align-items: center; }23 .toolbar {24 position: absolute; top: 90px; left: 0; right: 0;25 height: 120px; padding: 0 24px;26 display: flex; align-items: center; justify-content: space-between;27 }28 .toolbar-left { display: flex; align-items: center; gap: 16px; }29 .toolbar-title { font-size: 52px; font-weight: 700; }30 .toolbar-right { display: flex; align-items: center; gap: 32px; }31 .chip-row {32 position: absolute; top: 210px; left: 24px; right: 24px;33 display: flex; align-items: center; gap: 12px;34 }35 .chip {36 display: inline-flex; align-items: center; gap: 10px;37 padding: 16px 22px; border-radius: 24px;38 background: #1a1a1a; border: 1px solid #2a2a2a; color: #e0e0e0;39 font-size: 32px;40 }41 42 .list {43 position: absolute; top: 280px; left: 0; right: 0; bottom: 170px;44 overflow: hidden;45 }46 .playlist-item {47 display: flex; align-items: flex-start;48 padding: 18px 24px;49 }50 .thumb {51 width: 420px; height: 236px; border-radius: 24px;52 background: #E0E0E0; border: 1px solid #BDBDBD;53 color: #757575;54 display: flex; align-items: center; justify-content: center;55 position: relative;56 text-align: center; font-size: 28px; padding: 0 14px;57 }58 .thumb-overlay {59 position: absolute; left: 0; right: 0; bottom: 0;60 height: 56px; background: rgba(0,0,0,0.35);61 border-bottom-left-radius: 24px; border-bottom-right-radius: 24px;62 display: flex; align-items: center; gap: 12px; padding: 0 16px;63 font-size: 30px; color: #eee;64 }65 .details {66 flex: 1; padding-left: 28px; padding-right: 18px;67 }68 .title {69 font-size: 44px; font-weight: 600; line-height: 1.2; margin-bottom: 8px;70 }71 .meta { font-size: 30px; color: #bdbdbd; line-height: 1.4; }72 .more {73 width: 60px; height: 60px; display: flex; align-items: center; justify-content: center;74 }75 76 .bottom-nav {77 position: absolute; left: 0; right: 0; bottom: 0;78 height: 160px; background: #1a1a1a; border-top: 1px solid #232323;79 display: flex; align-items: center; justify-content: space-around;80 padding: 0 18px;81 }82 .nav-item {83 display: flex; flex-direction: column; align-items: center; justify-content: center;84 gap: 10px; color: #ddd; font-size: 26px;85 }86 .nav-item.active { color: #fff; }87 .home-indicator {88 position: absolute; bottom: 12px; left: 50%; transform: translateX(-50%);89 width: 320px; height: 10px; border-radius: 6px; background: #7a7a7a;90 opacity: 0.8;91 }92 93 /* Simple icon styles */94 svg { display: block; }95</style>96</head>97<body>98<div id="render-target">99 100 <!-- Status Bar -->101 <div class="statusbar">102 <div>10:17</div>103 <div class="status-icons">104 <!-- Headphone icon -->105 <svg width="28" height="28" viewBox="0 0 24 24">106 <path d="M4 12a8 8 0 0 1 16 0" stroke="#fff" stroke-width="2" fill="none" stroke-linecap="round"/>107 <rect x="3" y="12" width="4" height="7" rx="2" fill="#fff"/>108 <rect x="17" y="12" width="4" height="7" rx="2" fill="#fff"/>109 </svg>110 <!-- Signal bars -->111 <svg width="28" height="28" viewBox="0 0 24 24">112 <rect x="3" y="14" width="3" height="7" fill="#fff"/>113 <rect x="8" y="12" width="3" height="9" fill="#fff" opacity="0.8"/>114 <rect x="13" y="9" width="3" height="12" fill="#fff" opacity="0.7"/>115 <rect x="18" y="6" width="3" height="15" fill="#fff" opacity="0.6"/>116 </svg>117 <!-- WiFi -->118 <svg width="28" height="28" viewBox="0 0 24 24">119 <path d="M2 8c5-4 15-4 20 0" stroke="#fff" stroke-width="2" fill="none" stroke-linecap="round"/>120 <path d="M5 12c3-3 11-3 14 0" stroke="#fff" stroke-width="2" fill="none" stroke-linecap="round"/>121 <path d="M9 15c2-2 4-2 6 0" stroke="#fff" stroke-width="2" fill="none" stroke-linecap="round"/>122 <circle cx="12" cy="18" r="1.5" fill="#fff"/>123 </svg>124 <!-- Battery -->125 <svg width="36" height="28" viewBox="0 0 30 18">126 <rect x="1" y="3" width="24" height="12" rx="2" fill="none" stroke="#fff" stroke-width="2"/>127 <rect x="3" y="5" width="18" height="8" rx="1" fill="#fff"/>128 <rect x="25" y="6" width="4" height="6" rx="1" fill="#fff"/>129 </svg>130 </div>131 </div>132 133 <!-- Toolbar -->134 <div class="toolbar">135 <div class="toolbar-left">136 <!-- Back arrow -->137 <svg width="56" height="56" viewBox="0 0 48 48">138 <path d="M28 8 L12 24 L28 40" stroke="#fff" stroke-width="4" fill="none" stroke-linecap="round" stroke-linejoin="round"/>139 </svg>140 <div class="toolbar-title">Playlists</div>141 </div>142 <div class="toolbar-right">143 <!-- Cast icon -->144 <svg width="56" height="56" viewBox="0 0 48 48">145 <rect x="6" y="10" width="32" height="22" rx="3" stroke="#fff" stroke-width="3" fill="none"/>146 <path d="M6 34c6 0 10 4 10 10" stroke="#fff" stroke-width="3" fill="none"/>147 <path d="M6 34c3 0 6 3 6 6" stroke="#fff" stroke-width="3" fill="none"/>148 </svg>149 <!-- Search icon -->150 <svg width="56" height="56" viewBox="0 0 48 48">151 <circle cx="22" cy="22" r="12" stroke="#fff" stroke-width="4" fill="none"/>152 <line x1="32" y1="32" x2="42" y2="42" stroke="#fff" stroke-width="4" stroke-linecap="round"/>153 </svg>154 <!-- More (vertical dots) -->155 <svg width="56" height="56" viewBox="0 0 48 48">156 <circle cx="24" cy="12" r="3" fill="#fff"/>157 <circle cx="24" cy="24" r="3" fill="#fff"/>158 <circle cx="24" cy="36" r="3" fill="#fff"/>159 </svg>160 </div>161 </div>162 163 <!-- Filter Chip -->164 <div class="chip-row">165 <div class="chip">166 <span>Recently added</span>167 <svg width="28" height="28" viewBox="0 0 24 24">168 <path d="M6 9 L12 15 L18 9" stroke="#e0e0e0" stroke-width="2" fill="none" stroke-linecap="round" stroke-linejoin="round"/>169 </svg>170 </div>171 </div>172 173 <!-- List -->174 <div class="list">175 176 <!-- Item 1 -->177 <div class="playlist-item">178 <div class="thumb">179 [IMG: Himalayan homestay banner]180 <div class="thumb-overlay">181 <!-- Playlist icon -->182 <svg width="34" height="34" viewBox="0 0 24 24">183 <path d="M3 6h12M3 11h12M3 16h12" stroke="#fff" stroke-width="2" stroke-linecap="round" fill="none"/>184 <path d="M18 8l5 4-5 4z" fill="#fff"/>185 </svg>186 <span>2</span>187 </div>188 </div>189 <div class="details">190 <div class="title">Weekends meditation</div>191 <div class="meta">Private</div>192 <div class="meta">Updated today</div>193 </div>194 <div class="more">195 <svg width="44" height="44" viewBox="0 0 24 24">196 <circle cx="12" cy="5" r="2.2" fill="#bbb"/>197 <circle cx="12" cy="12" r="2.2" fill="#bbb"/>198 <circle cx="12" cy="19" r="2.2" fill="#bbb"/>199 </svg>200 </div>201 </div>202 203 <!-- Item 2 -->204 <div class="playlist-item">205 <div class="thumb">206 [IMG: Motivational poster with silhouettes]207 <div class="thumb-overlay">208 <svg width="34" height="34" viewBox="0 0 24 24">209 <path d="M3 6h12M3 11h12M3 16h12" stroke="#fff" stroke-width="2" stroke-linecap="round" fill="none"/>210 <path d="M18 8l5 4-5 4z" fill="#fff"/>211 </svg>212 <span>2</span>213 </div>214 </div>215 <div class="details">216 <div class="title">Night meditation</div>217 <div class="meta">Private</div>218 <div class="meta">Updated today</div>219 </div>220 <div class="more">221 <svg width="44" height="44" viewBox="0 0 24 24">222 <circle cx="12" cy="5" r="2.2" fill="#bbb"/>223 <circle cx="12" cy="12" r="2.2" fill="#bbb"/>224 <circle cx="12" cy="19" r="2.2" fill="#bbb"/>225 </svg>226 </div>227 </div>228 229 <!-- Item 3 -->230 <div class="playlist-item">231 <div class="thumb">232 [IMG: Hindi poster with venue backdrop]233 <div class="thumb-overlay">234 <svg width="34" height="34" viewBox="0 0 24 24">235 <path d="M3 6h12M3 11h12M3 16h12" stroke="#fff" stroke-width="2" stroke-linecap="round" fill="none"/>236 <path d="M18 8l5 4-5 4z" fill="#fff"/>237 </svg>238 <span>3</span>239 </div>240 </div>241 <div class="details">242 <div class="title">Evening mediation</div>243 <div class="meta">Private</div>244 <div class="meta">Updated today</div>245 </div>246 <div class="more">247 <svg width="44" height="44" viewBox="0 0 24 24">248 <circle cx="12" cy="5" r="2.2" fill="#bbb"/>249 <circle cx="12" cy="12" r="2.2" fill="#bbb"/>250 <circle cx="12" cy="19" r="2.2" fill="#bbb"/>251 </svg>252 </div>253 </div>254 255 <!-- Item 4 -->256 <div class="playlist-item">257 <div class="thumb">258 [IMG: 5-minute meditation illustration]259 <div class="thumb-overlay">260 <svg width="34" height="34" viewBox="0 0 24 24">261 <path d="M3 6h12M3 11h12M3 16h12" stroke="#fff" stroke-width="2" stroke-linecap="round" fill="none"/>262 <path d="M18 8l5 4-5 4z" fill="#fff"/>263 </svg>264 <span>3</span>265 </div>266 </div>267 <div class="details">268 <div class="title">Morning meditation</div>269 <div class="meta">Private</div>270 <div class="meta">Updated today</div>271 </div>272 <div class="more">273 <svg width="44" height="44" viewBox="0 0 24 24">274 <circle cx="12" cy="5" r="2.2" fill="#bbb"/>275 <circle cx="12" cy="12" r="2.2" fill="#bbb"/>276 <circle cx="12" cy="19" r="2.2" fill="#bbb"/>277 </svg>278 </div>279 </div>280 281 <!-- Item 5 -->282 <div class="playlist-item">283 <div class="thumb">284 [IMG: 5-minute meditation illustration]285 <div class="thumb-overlay">286 <svg width="34" height="34" viewBox="0 0 24 24">287 <path d="M3 6h12M3 11h12M3 16h12" stroke="#fff" stroke-width="2" stroke-linecap="round" fill="none"/>288 <path d="M18 8l5 4-5 4z" fill="#fff"/>289 </svg>290 <span>3</span>291 </div>292 </div>293 <div class="details">294 <div class="title">meditation playlist</div>295 <div class="meta">Private</div>296 <div class="meta">Updated today</div>297 </div>298 <div class="more">299 <svg width="44" height="44" viewBox="0 0 24 24">300 <circle cx="12" cy="5" r="2.2" fill="#bbb"/>301 <circle cx="12" cy="12" r="2.2" fill="#bbb"/>302 <circle cx="12" cy="19" r="2.2" fill="#bbb"/>303 </svg>304 </div>305 </div>306 307 <!-- Item 6 -->308 <div class="playlist-item">309 <div class="thumb">310 [IMG: Western music video still]311 <div class="thumb-overlay">312 <svg width="34" height="34" viewBox="0 0 24 24">313 <path d="M3 6h12M3 11h12M3 16h12" stroke="#fff" stroke-width="2" stroke-linecap="round" fill="none"/>314 <path d="M18 8l5 4-5 4z" fill="#fff"/>315 </svg>316 <span>2</span>317 </div>318 </div>319 <div class="details">320 <div class="title">favourite song</div>321 <div class="meta">Private</div>322 <div class="meta">Updated today</div>323 </div>324 <div class="more">325 <svg width="44" height="44" viewBox="0 0 24 24">326 <circle cx="12" cy="5" r="2.2" fill="#bbb"/>327 <circle cx="12" cy="12" r="2.2" fill="#bbb"/>328 <circle cx="12" cy="19" r="2.2" fill="#bbb"/>329 </svg>330 </div>331 </div>332 333 <!-- Item 7 -->334 <div class="playlist-item">335 <div class="thumb">336 [IMG: Flower background montage]337 <div class="thumb-overlay">338 <svg width="34" height="34" viewBox="0 0 24 24">339 <path d="M3 6h12M3 11h12M3 16h12" stroke="#fff" stroke-width="2" stroke-linecap="round" fill="none"/>340 <path d="M18 8l5 4-5 4z" fill="#fff"/>341 </svg>342 <span>2</span>343 </div>344 </div>345 <div class="details">346 <div class="title">Watch later</div>347 <div class="meta">Private</div>348 </div>349 <div class="more">350 <svg width="44" height="44" viewBox="0 0 24 24">351 <circle cx="12" cy="5" r="2.2" fill="#bbb"/>352 <circle cx="12" cy="12" r="2.2" fill="#bbb"/>353 <circle cx="12" cy="19" r="2.2" fill="#bbb"/>354 </svg>355 </div>356 </div>357 358 </div>359 360 <!-- Bottom Navigation -->361 <div class="bottom-nav">362 <div class="nav-item active">363 <svg width="48" height="48" viewBox="0 0 24 24">364 <path d="M4 10l8-6 8 6v8a2 2 0 0 1-2 2h-12a2 2 0 0 1-2-2z" fill="none" stroke="#fff" stroke-width="2" stroke-linejoin="round"/>365 <rect x="9" y="14" width="6" height="6" fill="#fff" opacity="0.5"/>366 </svg>367 <div>Home</div>368 </div>369 <div class="nav-item">370 <svg width="48" height="48" viewBox="0 0 24 24">371 <path d="M8 4l8 6-5 2 5 8-10-7 5-2z" fill="#ddd"/>372 </svg>373 <div>Shorts</div>374 </div>375 <div class="nav-item">376 <svg width="64" height="64" viewBox="0 0 28 28">377 <circle cx="14" cy="14" r="12" fill="none" stroke="#fff" stroke-width="2"/>378 <path d="M14 8v12M8 14h12" stroke="#fff" stroke-width="2" stroke-linecap="round"/>379 </svg>380 <div>Add</div>381 </div>382 <div class="nav-item">383 <svg width="48" height="48" viewBox="0 0 24 24">384 <rect x="3" y="6" width="18" height="12" rx="2" fill="none" stroke="#fff" stroke-width="2"/>385 <path d="M10 9l6 3-6 3z" fill="#fff"/>386 </svg>387 <div>Subscriptions</div>388 </div>389 <div class="nav-item">390 <svg width="48" height="48" viewBox="0 0 24 24">391 <rect x="4" y="5" width="16" height="14" rx="2" fill="none" stroke="#fff" stroke-width="2"/>392 <path d="M7 8h10M7 12h10M7 16h10" stroke="#fff" stroke-width="2" stroke-linecap="round"/>393 </svg>394 <div>Library</div>395 </div>396 </div>397 398 <div class="home-indicator"></div>399</div>400</body>401</html>