GD-ML/AndroidCode
13.4k
1<!DOCTYPE html>2<html lang="en">3<head>4<meta charset="UTF-8">5<title>Playlist - Fun</title>6<style>7 body { margin: 0; padding: 0; background: transparent; font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Arial, sans-serif; }8 #render-target {9 width: 1080px; height: 2400px;10 position: relative; overflow: hidden;11 background: #000; color: #fff;12 }13 .status-bar {14 height: 90px; padding: 0 36px;15 display: flex; align-items: center; justify-content: space-between;16 color: #f5f5f5; font-size: 34px; letter-spacing: 0.5px;17 }18 .status-right { display: flex; align-items: center; gap: 24px; }19 .icon { display: inline-block; vertical-align: middle; }20 /* Header / playlist */21 .header {22 position: relative;23 padding: 24px 36px 12px 36px;24 }25 .back-btn {26 width: 80px; height: 80px; border-radius: 40px;27 background: rgba(255,255,255,0.08);28 display: flex; align-items: center; justify-content: center;29 margin-left: 8px;30 }31 .header-row {32 margin-top: 18px;33 display: flex; gap: 32px; align-items: center;34 }35 .art-stack {36 position: relative; width: 280px; height: 280px;37 }38 .stack-shadow { position: absolute; right: -18px; bottom: -18px; width: 260px; height: 260px; border-radius: 16px; background: rgba(180,200,220,0.35); }39 .art {40 position: absolute; left: 0; top: 0; width: 260px; height: 260px; border-radius: 16px;41 background: #E0E0E0; border: 1px solid #BDBDBD;42 display: flex; align-items: center; justify-content: center; color: #757575; font-size: 28px; text-align: center; padding: 10px;43 }44 .info { flex: 1; min-width: 0; }45 .title { font-size: 64px; font-weight: 700; margin: 0 0 12px 0; }46 .meta { color: #bbb; font-size: 28px; display: flex; align-items: center; gap: 12px; }47 .creator { display: flex; align-items: center; gap: 16px; margin-top: 22px; }48 .creator .avatar {49 width: 56px; height: 56px; border-radius: 28px; background: #2CA089; display: flex; align-items: center; justify-content: center; font-weight: 700;50 }51 .creator .byline { font-size: 30px; }52 .controls {53 position: absolute; right: 36px; top: 230px;54 display: flex; align-items: center; gap: 36px;55 }56 .circle-play {57 width: 120px; height: 120px; border-radius: 60px; background: #fff; display: flex; align-items: center; justify-content: center;58 }59 /* Track list */60 .list { padding: 12px 36px 0 36px; }61 .track {62 display: flex; align-items: center; gap: 28px;63 padding: 22px 0; position: relative;64 }65 .track .thumb {66 width: 160px; height: 160px; border-radius: 12px; background: #E0E0E0; border: 1px solid #BDBDBD;67 display: flex; align-items: center; justify-content: center; color: #757575; font-size: 22px; text-align: center; padding: 8px;68 }69 .track .tinfo { flex: 1; }70 .track .tinfo .ttitle { font-size: 40px; font-weight: 700; margin-bottom: 6px; }71 .track .tinfo .artist { font-size: 28px; color: #cfcfcf; margin-bottom: 8px; }72 .track .tinfo .sub { display: flex; align-items: center; gap: 16px; color: #9e9e9e; font-size: 26px; }73 .track .more {74 position: absolute; right: 10px; top: 50%; transform: translateY(-50%);75 width: 48px; height: 48px; display: flex; align-items: center; justify-content: center;76 }77 /* Section heading */78 .section-title { font-size: 54px; font-weight: 800; padding: 34px 36px 8px 36px; }79 /* Suggested items */80 .suggested .track .add {81 position: absolute; right: 26px; width: 68px; height: 68px; border: 2px solid #8b8b8b; border-radius: 10px;82 display: flex; align-items: center; justify-content: center;83 }84 /* Mini player */85 .mini {86 position: absolute; left: 0; right: 0; bottom: 220px;87 height: 200px; background: linear-gradient(180deg, #2e3237 0%, #1e2126 100%);88 display: flex; align-items: center; padding: 0 36px; gap: 22px;89 border-top: 4px solid #ff6d1a;90 }91 .mini .line { display: flex; flex-direction: column; }92 .mini .song { font-size: 34px; font-weight: 700; }93 .mini .artist { font-size: 26px; color: #cfcfcf; }94 .mini .right { margin-left: auto; display: flex; align-items: center; gap: 28px; }95 /* Bottom nav */96 .bottom-nav {97 position: absolute; left: 0; right: 0; bottom: 0; height: 220px;98 background: #0a0a0a; border-top: 1px solid #242424;99 display: flex; align-items: center; justify-content: space-around;100 }101 .nav-item { display: flex; flex-direction: column; align-items: center; gap: 14px; color: #bdbdbd; font-size: 24px; }102 .nav-item.active { color: #fff; }103 /* Home indicator */104 .home-indicator {105 position: absolute; bottom: 16px; left: 50%; transform: translateX(-50%);106 width: 240px; height: 14px; border-radius: 7px; background: #fff; opacity: 0.85;107 }108 /* Utility */109 .dot { width: 6px; height: 6px; border-radius: 3px; background: #bbb; display: inline-block; margin: 0 8px; }110</style>111</head>112<body>113<div id="render-target">114 115 <!-- Status bar -->116 <div class="status-bar">117 <div>1:23</div>118 <div class="status-right">119 <!-- signal "g" and triangle mimic -->120 <span style="font-weight:700; font-size:30px;">g</span>121 <svg class="icon" width="30" height="30" viewBox="0 0 24 24">122 <path d="M2 20L12 4l10 16H2z" fill="#e0e0e0"/>123 </svg>124 <!-- wifi -->125 <svg class="icon" width="34" height="34" viewBox="0 0 24 24">126 <path d="M12 18c1.1 0 2 .9 2 2h-4c0-1.1.9-2 2-2zm-6-4c3.3-2.9 8.7-2.9 12 0l-1.4 1.4c-2.5-2.2-6.7-2.2-9.2 0L6 14zM2 10c5.5-4.8 14.5-4.8 20 0l-1.4 1.4c-4.8-4.2-12.4-4.2-17.2 0L2 10z" fill="#e0e0e0"/>127 </svg>128 <!-- battery -->129 <svg class="icon" width="34" height="34" viewBox="0 0 24 24">130 <rect x="2" y="6" width="18" height="12" rx="2" fill="#e0e0e0"/>131 <rect x="4" y="8" width="14" height="8" fill="#000"/>132 <rect x="4" y="8" width="9" height="8" fill="#e0e0e0"/>133 <rect x="20" y="10" width="2" height="8" fill="#e0e0e0"/>134 </svg>135 </div>136 </div>137 138 <!-- Header -->139 <div class="header">140 <div class="back-btn">141 <svg width="40" height="40" viewBox="0 0 24 24">142 <path d="M15 18l-6-6 6-6" stroke="#fff" stroke-width="2" fill="none" stroke-linecap="round" stroke-linejoin="round"/>143 </svg>144 </div>145 146 <div class="header-row">147 <div class="art-stack">148 <div class="stack-shadow"></div>149 <div class="art">[IMG: Playlist Cover]</div>150 </div>151 152 <div class="info">153 <div class="title">Fun</div>154 <div class="meta">155 <span>Playlist</span>156 <span class="dot"></span>157 <span>3 Tracks</span>158 <span class="dot"></span>159 <span>7:24</span>160 <span class="dot"></span>161 <span>Just now</span>162 <svg class="icon" width="28" height="28" viewBox="0 0 24 24">163 <rect x="6" y="10" width="12" height="10" rx="2" fill="#bdbdbd"/>164 <rect x="9" y="6" width="6" height="5" rx="2" fill="#bdbdbd"/>165 </svg>166 </div>167 168 <div class="creator">169 <div class="avatar">C</div>170 <div class="byline">By Cerebra Research</div>171 </div>172 </div>173 </div>174 175 <!-- Play controls -->176 <div class="controls">177 <svg class="icon" width="48" height="48" viewBox="0 0 24 24">178 <path d="M4 4h4l-2 2h10a3 3 0 110 6H8l2-2h6a1 1 0 000-2H6l2 2H4z" fill="#cfcfcf"/>179 </svg>180 <div class="circle-play">181 <svg width="54" height="54" viewBox="0 0 24 24">182 <path d="M8 5l12 7-12 7V5z" fill="#000"/>183 </svg>184 </div>185 </div>186 </div>187 188 <!-- Tracks list -->189 <div class="list">190 191 <div class="track">192 <div class="thumb">[IMG: Vehle]</div>193 <div class="tinfo">194 <div class="ttitle">Vehle</div>195 <div class="artist">NIJJAR</div>196 <div class="sub">197 <svg class="icon" width="28" height="28" viewBox="0 0 24 24">198 <path d="M8 5l12 7-12 7V5z" fill="#9e9e9e"/>199 </svg>200 <span>Paused</span>201 </div>202 </div>203 <div class="more">204 <svg width="24" height="24" viewBox="0 0 24 24">205 <circle cx="12" cy="5" r="2" fill="#bdbdbd"></circle>206 <circle cx="12" cy="12" r="2" fill="#bdbdbd"></circle>207 <circle cx="12" cy="19" r="2" fill="#bdbdbd"></circle>208 </svg>209 </div>210 </div>211 212 <div class="track">213 <div class="thumb">[IMG: Kali Nagni]</div>214 <div class="tinfo">215 <div class="ttitle">Sultaan - Kali Nagni</div>216 <div class="artist">Sultaan</div>217 <div class="sub">218 <svg class="icon" width="28" height="28" viewBox="0 0 24 24">219 <path d="M8 5l12 7-12 7V5z" fill="#9e9e9e"/>220 </svg>221 <span>119K</span>222 <span class="dot" style="background:#9e9e9e;"></span>223 <span>2:54</span>224 </div>225 </div>226 <div class="more">227 <svg width="24" height="24" viewBox="0 0 24 24">228 <circle cx="12" cy="5" r="2" fill="#bdbdbd"></circle>229 <circle cx="12" cy="12" r="2" fill="#bdbdbd"></circle>230 <circle cx="12" cy="19" r="2" fill="#bdbdbd"></circle>231 </svg>232 </div>233 </div>234 235 <div class="track">236 <div class="thumb">[IMG: Bumper]</div>237 <div class="tinfo">238 <div class="ttitle">Sultaan - Bumper</div>239 <div class="artist">Sultaan</div>240 <div class="sub">241 <svg class="icon" width="28" height="28" viewBox="0 0 24 24">242 <path d="M8 5l12 7-12 7V5z" fill="#9e9e9e"/>243 </svg>244 <span>401K</span>245 <span class="dot" style="background:#9e9e9e;"></span>246 <span>2:17</span>247 </div>248 </div>249 <div class="more">250 <svg width="24" height="24" viewBox="0 0 24 24">251 <circle cx="12" cy="5" r="2" fill="#bdbdbd"></circle>252 <circle cx="12" cy="12" r="2" fill="#bdbdbd"></circle>253 <circle cx="12" cy="19" r="2" fill="#bdbdbd"></circle>254 </svg>255 </div>256 </div>257 258 </div>259 260 <div class="section-title">Suggested for you</div>261 262 <div class="list suggested">263 264 <div class="track">265 <div class="thumb">[IMG: 150 - JASSA | AMMY GILL | MXRCI]</div>266 <div class="tinfo">267 <div class="ttitle">150 - JASSA | AMMY GILL | MXRCI</div>268 <div class="artist">AMMY GILL</div>269 <div class="sub">270 <svg class="icon" width="28" height="28" viewBox="0 0 24 24">271 <path d="M8 5l12 7-12 7V5z" fill="#9e9e9e"/>272 </svg>273 <span>1.3M</span>274 <span class="dot" style="background:#9e9e9e;"></span>275 <span>3:43</span>276 </div>277 </div>278 <div class="add">279 <svg width="34" height="34" viewBox="0 0 24 24">280 <path d="M11 5h2v6h6v2h-6v6h-2v-6H5v-2h6V5z" fill="#bdbdbd"/>281 </svg>282 </div>283 </div>284 285 <div class="track">286 <div class="thumb">[IMG: Silicone (Prem Dhillon)]</div>287 <div class="tinfo">288 <div class="ttitle">Silicone (Prem Dhillon)</div>289 <div class="artist">FM Punjabi</div>290 <div class="sub">291 <svg class="icon" width="28" height="28" viewBox="0 0 24 24">292 <path d="M8 5l12 7-12 7V5z" fill="#9e9e9e"/>293 </svg>294 <span>882K</span>295 <span class="dot" style="background:#9e9e9e;"></span>296 <span>3:18</span>297 </div>298 </div>299 <div class="add">300 <svg width="34" height="34" viewBox="0 0 24 24">301 <path d="M11 5h2v6h6v2h-6v6h-2v-6H5v-2h6V5z" fill="#bdbdbd"/>302 </svg>303 </div>304 </div>305 306 <div class="track">307 <div class="thumb">[IMG: Loud N Shout Himmat Sandhu]</div>308 <div class="tinfo">309 <div class="ttitle">Loud N Shout Himmat Sandhu</div>310 <div class="artist">GUR DHALIWAL</div>311 <div class="sub">312 <svg class="icon" width="28" height="28" viewBox="0 0 24 24">313 <path d="M8 5l12 7-12 7V5z" fill="#9e9e9e"/>314 </svg>315 <span>300K</span>316 <span class="dot" style="background:#9e9e9e;"></span>317 <span>2:44</span>318 </div>319 </div>320 <div class="add">321 <svg width="34" height="34" viewBox="0 0 24 24">322 <path d="M11 5h2v6h6v2h-6v6h-2v-6H5v-2h6V5z" fill="#bdbdbd"/>323 </svg>324 </div>325 </div>326 327 </div>328 329 <!-- Mini player -->330 <div class="mini">331 <svg class="icon" width="40" height="40" viewBox="0 0 24 24">332 <path d="M8 5l12 7-12 7V5z" fill="#fff"/>333 </svg>334 <div class="line">335 <div class="song">Vehle</div>336 <div class="artist">NIJJAR</div>337 </div>338 <div class="right">339 <!-- person plus -->340 <svg class="icon" width="38" height="38" viewBox="0 0 24 24">341 <circle cx="9" cy="8" r="3.5" fill="#d7d7d7"/>342 <path d="M2 20c0-3.5 5-4.5 7-4.5s7 1 7 4.5H2z" fill="#d7d7d7"/>343 <path d="M18 8v-2h2v2h2v2h-2v2h-2v-2h-2V8h2z" fill="#d7d7d7"/>344 </svg>345 <!-- heart -->346 <svg class="icon" width="38" height="38" viewBox="0 0 24 24">347 <path d="M12 21s-7-4.4-9-8.4C1.2 9.7 3.2 7 6.4 7c2 0 3.3 1 3.6 2.1C10.3 8 11.6 7 13.6 7c3.2 0 5.2 2.7 3.4 5.6C19 16.6 12 21 12 21z" fill="#d7d7d7"/>348 </svg>349 </div>350 </div>351 352 <!-- Bottom navigation -->353 <div class="bottom-nav">354 <div class="nav-item">355 <svg class="icon" width="42" height="42" viewBox="0 0 24 24">356 <path d="M3 10l9-7 9 7v9a2 2 0 0 1-2 2h-4v-7H9v7H5a2 2 0 0 1-2-2v-9z" fill="#bdbdbd"/>357 </svg>358 <div>Home</div>359 </div>360 <div class="nav-item">361 <svg class="icon" width="42" height="42" viewBox="0 0 24 24">362 <path d="M4 6h16v2H4zm0 5h16v2H4zm0 5h10v2H4z" fill="#bdbdbd"/>363 </svg>364 <div>Feed</div>365 </div>366 <div class="nav-item">367 <svg class="icon" width="42" height="42" viewBox="0 0 24 24">368 <circle cx="10" cy="10" r="6" stroke="#bdbdbd" stroke-width="2" fill="none"/>369 <path d="M21 21l-5.3-5.3" stroke="#bdbdbd" stroke-width="2" stroke-linecap="round"/>370 </svg>371 <div>Search</div>372 </div>373 <div class="nav-item active">374 <svg class="icon" width="42" height="42" viewBox="0 0 24 24">375 <rect x="4" y="5" width="4" height="14" fill="#fff"/>376 <rect x="10" y="7" width="4" height="12" fill="#fff"/>377 <rect x="16" y="9" width="4" height="10" fill="#fff"/>378 </svg>379 <div>Library</div>380 </div>381 <div class="nav-item">382 <svg class="icon" width="42" height="42" viewBox="0 0 24 24">383 <path d="M6 14a6 6 0 1112 0h3a3 3 0 010 6H5a3 3 0 010-6h1z" fill="#bdbdbd"/>384 </svg>385 <div>Upgrade</div>386 </div>387 </div>388 389 <div class="home-indicator"></div>390 391</div>392</body>393</html>