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>Desi Hip Hop UI</title>7<style>8 body { margin: 0; padding: 0; background: transparent; font-family: system-ui, -apple-system, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; }9 #render-target {10 position: relative;11 width: 1080px;12 height: 2400px;13 overflow: hidden;14 background: #0e0e0e;15 color: #fff;16 }17 18 /* Status bar */19 .status-bar {20 position: absolute;21 top: 0; left: 0; right: 0;22 height: 120px;23 display: flex;24 align-items: center;25 padding: 0 40px;26 color: #eaeaea;27 font-weight: 600;28 font-size: 42px;29 opacity: 0.9;30 }31 .status-icons { margin-left: auto; display: flex; align-items: center; gap: 26px; }32 .status-icons svg { width: 40px; height: 40px; fill: none; stroke: #eaeaea; stroke-width: 3; }33 34 /* Hero */35 .hero {36 position: absolute;37 top: 120px; left: 0; right: 0;38 height: 740px;39 }40 .hero-image {41 position: absolute; inset: 0;42 background: #E0E0E0;43 border-bottom: 1px solid #BDBDBD;44 display: flex; justify-content: center; align-items: center;45 color: #444; font-weight: 600;46 letter-spacing: 0.5px;47 }48 .hero::after {49 content: "";50 position: absolute; inset: 0;51 background: linear-gradient(180deg, rgba(0,0,0,0.55) 0%, rgba(0,0,0,0.65) 35%, rgba(0,0,0,0.85) 100%);52 }53 .hero-content {54 position: absolute; inset: 0;55 padding: 70px 56px 56px 56px;56 display: flex; flex-direction: column;57 z-index: 2;58 }59 .top-actions {60 display: flex; align-items: center; justify-content: space-between;61 margin-bottom: 140px;62 }63 .left-actions {64 display: flex; align-items: center; gap: 24px;65 }66 .icon-btn {67 width: 56px; height: 56px;68 display: inline-flex; align-items: center; justify-content: center;69 }70 .icon-btn svg { width: 56px; height: 56px; fill: none; stroke: #fff; stroke-width: 3; }71 .kebab svg { stroke: none; fill: #fff; }72 73 .title {74 font-size: 80px; font-weight: 800; line-height: 1.05; margin-bottom: 18px;75 text-shadow: 0 2px 8px rgba(0,0,0,0.4);76 }77 .subtitle {78 font-size: 34px; color: #bdbdbd; margin-bottom: 18px;79 }80 .meta {81 font-size: 30px; color: #c7c7c7;82 }83 .follow-row { margin-top: 26px; display: flex; align-items: center; gap: 18px; }84 .follow-btn {85 display: inline-flex; align-items: center; gap: 16px;86 background: #3a8ee6; color: #fff; border-radius: 14px;87 padding: 18px 28px; font-size: 34px; font-weight: 700;88 box-shadow: 0 6px 18px rgba(0,0,0,0.45);89 }90 .follow-plus {91 width: 52px; height: 52px; border-radius: 26px;92 background: rgba(255,255,255,0.18); display: flex; align-items: center; justify-content: center;93 border: 1px solid rgba(255,255,255,0.35);94 }95 .follow-plus svg { width: 30px; height: 30px; stroke: #fff; stroke-width: 4; }96 97 /* Action buttons */98 .action-bar {99 position: absolute;100 top: 860px; left: 0; right: 0;101 display: flex; gap: 40px;102 padding: 0 56px;103 }104 .action-card {105 flex: 1;106 background: #171717;107 border-radius: 26px;108 padding: 36px 40px;109 display: flex; align-items: center; gap: 24px;110 box-shadow: inset 0 0 0 1px #232323;111 }112 .action-card .label { font-size: 42px; font-weight: 800; }113 .action-icon {114 width: 72px; height: 72px;115 display: inline-flex; align-items: center; justify-content: center;116 border-radius: 36px; background: #222; box-shadow: inset 0 0 0 1px #2f2f2f;117 }118 .action-icon svg { width: 44px; height: 44px; stroke: #fff; stroke-width: 3; fill: none; }119 120 /* List section */121 .list {122 position: absolute;123 top: 1050px; left: 0; right: 0; bottom: 200px;124 padding: 24px 0 0 0;125 overflow: hidden;126 }127 .row {128 display: flex; align-items: center;129 padding: 30px 56px;130 border-bottom: 1px solid #222;131 }132 .art {133 width: 120px; height: 120px; margin-right: 28px;134 background: #E0E0E0; border: 1px solid #BDBDBD;135 display: flex; align-items: center; justify-content: center;136 color: #606060; font-size: 22px; text-align: center; line-height: 1.2;137 border-radius: 8px;138 }139 .text { flex: 1; min-width: 0; }140 .title-row { display: flex; align-items: center; gap: 16px; }141 .song-title { font-size: 40px; font-weight: 700; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }142 .explicit {143 font-size: 28px; font-weight: 800; color: #87a6ff;144 padding: 2px 12px; border-radius: 10px; border: 1px solid #2e3f68; background: #13203f;145 }146 .song-sub { font-size: 30px; color: #a6a6a6; margin-top: 10px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }147 .row-actions { display: flex; align-items: center; gap: 24px; }148 .icon {149 width: 56px; height: 56px; display: inline-flex; align-items: center; justify-content: center;150 }151 .icon svg { width: 44px; height: 44px; stroke: #cfcfcf; stroke-width: 3; fill: none; }152 .kebab-sm svg { stroke: none; fill: #cfcfcf; }153 .playing {154 background: #151515;155 }156 .pause-pill {157 width: 96px; height: 96px; border-radius: 48px; background: #e64a4a;158 display: flex; align-items: center; justify-content: center;159 box-shadow: 0 6px 24px rgba(230,74,74,0.4);160 }161 .pause-pill svg { width: 42px; height: 42px; fill: #fff; }162 163 /* Advertisement */164 .ad-sec { padding: 34px 56px 10px; }165 .ad-label { text-align: center; color: #b5b5b5; font-size: 28px; letter-spacing: 2px; margin-bottom: 26px; }166 .ad-box {167 width: 968px; height: 240px; margin: 0 auto;168 background: #E0E0E0; border: 1px solid #BDBDBD;169 display: flex; align-items: center; justify-content: center;170 color: #505050; font-weight: 700; font-size: 34px;171 }172 173 /* Bottom nav */174 .bottom-nav {175 position: absolute; left: 0; right: 0; bottom: 76px;176 height: 160px; background: #101010; border-top: 1px solid #202020;177 display: flex; align-items: center; justify-content: space-around;178 }179 .nav-item { display: flex; flex-direction: column; align-items: center; gap: 16px; color: #bdbdbd; font-size: 30px; }180 .nav-item .ni-ico { width: 56px; height: 56px; }181 .nav-item svg { width: 56px; height: 56px; stroke: #bdbdbd; fill: none; stroke-width: 3; }182 .nav-item.active { color: #fff; }183 .nav-item.active svg { stroke: #fff; }184 .gesture {185 position: absolute; left: 50%; transform: translateX(-50%);186 bottom: 22px; width: 320px; height: 12px; background: #ffffff; border-radius: 6px; opacity: 0.9;187 }188</style>189</head>190<body>191<div id="render-target">192 193 <!-- Status bar -->194 <div class="status-bar">195 <div>8:25</div>196 <div class="status-icons">197 <svg viewBox="0 0 48 48"><circle cx="24" cy="24" r="16"/></svg>198 <svg viewBox="0 0 48 48"><path d="M8 24h32"/><path d="M24 8v32"/></svg>199 <svg viewBox="0 0 48 48"><path d="M6 22h22l6-6v16l-6-6H6z"/></svg>200 <svg viewBox="0 0 48 48"><path d="M6 24h36" /><path d="M42 24l-8-8" /><path d="M42 24l-8 8" /></svg>201 </div>202 </div>203 204 <!-- Hero banner -->205 <div class="hero">206 <div class="hero-image">[IMG: Playlist banner - hip hop artists]</div>207 <div class="hero-content">208 <div class="top-actions">209 <div class="left-actions">210 <div class="icon-btn">211 <svg viewBox="0 0 48 48"><path d="M30 10 L16 24 L30 38" stroke-linecap="round" stroke-linejoin="round"/></svg>212 </div>213 </div>214 <div class="left-actions">215 <div class="icon-btn">216 <svg viewBox="0 0 48 48">217 <circle cx="12" cy="12" r="4" />218 <circle cx="36" cy="10" r="4" />219 <circle cx="36" cy="34" r="4" />220 <path d="M16 12 L32 10" />221 <path d="M16 12 L32 34" />222 </svg>223 </div>224 <div class="icon-btn">225 <svg viewBox="0 0 48 48">226 <circle cx="20" cy="20" r="12" />227 <path d="M32 32 L44 44" stroke-linecap="round"/>228 </svg>229 </div>230 <div class="icon-btn kebab">231 <svg viewBox="0 0 10 48">232 <circle cx="5" cy="12" r="3"/><circle cx="5" cy="24" r="3"/><circle cx="5" cy="36" r="3"/>233 </svg>234 </div>235 </div>236 </div>237 238 <div class="title">Desi Hip Hop</div>239 <div class="subtitle">By Wynk Music</div>240 <div class="meta">63K Followers | 100 songs | 0 downloaded</div>241 242 <div class="follow-row">243 <div class="follow-btn">244 <div class="follow-plus">245 <svg viewBox="0 0 48 48"><path d="M24 10v28M10 24h28"/></svg>246 </div>247 <span>Follow</span>248 </div>249 </div>250 </div>251 </div>252 253 <!-- Action buttons -->254 <div class="action-bar">255 <div class="action-card">256 <div class="action-icon">257 <svg viewBox="0 0 48 48">258 <path d="M24 10v18" stroke-linecap="round"/>259 <path d="M16 20l8 8 8-8" stroke-linecap="round" stroke-linejoin="round"/>260 <path d="M10 38h28" />261 </svg>262 </div>263 <div class="label">Download All</div>264 </div>265 <div class="action-card">266 <div class="action-icon">267 <svg viewBox="0 0 48 48">268 <path d="M18 12l20 12-20 12" stroke-linejoin="round"/>269 </svg>270 </div>271 <div class="label">Play All</div>272 </div>273 </div>274 275 <!-- List and advertisement -->276 <div class="list">277 278 <!-- First track -->279 <div class="row">280 <div class="art">[IMG: Haath Varthi cover]</div>281 <div class="text">282 <div class="title-row">283 <div class="song-title">Haath Varthi</div>284 <div class="explicit">E</div>285 </div>286 <div class="song-sub">Mc Stan, KSHMR, Phenom - Haath...</div>287 </div>288 <div class="row-actions">289 <div class="icon">290 <svg viewBox="0 0 48 48">291 <path d="M24 10v18" stroke-linecap="round"/>292 <path d="M16 20l8 8 8-8" stroke-linecap="round" stroke-linejoin="round"/>293 <path d="M10 38h28" />294 </svg>295 </div>296 <div class="icon kebab-sm">297 <svg viewBox="0 0 10 48">298 <circle cx="5" cy="12" r="3"/><circle cx="5" cy="24" r="3"/><circle cx="5" cy="36" r="3"/>299 </svg>300 </div>301 </div>302 </div>303 304 <!-- Advertisement -->305 <div class="ad-sec">306 <div class="ad-label">ADVERTISEMENT</div>307 <div class="ad-box">[IMG: Yellow ad banner - auto rickshaw, "Paise Bachenge"]</div>308 </div>309 310 <!-- Track rows -->311 <div class="row">312 <div class="art">[IMG: Baazigar cover]</div>313 <div class="text">314 <div class="title-row">315 <div class="song-title">Baazigar</div>316 <div class="explicit">E</div>317 </div>318 <div class="song-sub">Divine, Armani White - Gunehgar</div>319 </div>320 <div class="row-actions">321 <div class="icon">322 <svg viewBox="0 0 48 48">323 <path d="M24 10v18" stroke-linecap="round"/>324 <path d="M16 20l8 8 8-8" stroke-linecap="round" stroke-linejoin="round"/>325 <path d="M10 38h28" />326 </svg>327 </div>328 <div class="icon kebab-sm">329 <svg viewBox="0 0 10 48">330 <circle cx="5" cy="12" r="3"/><circle cx="5" cy="24" r="3"/><circle cx="5" cy="36" r="3"/>331 </svg>332 </div>333 </div>334 </div>335 336 <div class="row">337 <div class="art">[IMG: Madari cover]</div>338 <div class="text">339 <div class="title-row">340 <div class="song-title">Madari (feat. Karan Kanchan)</div>341 </div>342 <div class="song-sub">Munawar Faruqui, Charan, Farhan Khan...</div>343 </div>344 <div class="row-actions">345 <div class="icon">346 <svg viewBox="0 0 48 48">347 <path d="M24 10v18" stroke-linecap="round"/>348 <path d="M16 20l8 8 8-8" stroke-linecap="round" stroke-linejoin="round"/>349 <path d="M10 38h28" />350 </svg>351 </div>352 <div class="icon kebab-sm">353 <svg viewBox="0 0 10 48">354 <circle cx="5" cy="12" r="3"/><circle cx="5" cy="24" r="3"/><circle cx="5" cy="36" r="3"/>355 </svg>356 </div>357 </div>358 </div>359 360 <div class="row">361 <div class="art">[IMG: King Of Indian Hip Hop cover (grey)]</div>362 <div class="text">363 <div class="title-row">364 <div class="song-title">King Of Indian Hip Hop</div>365 <div class="explicit">E</div>366 </div>367 <div class="song-sub">Emiway Bantai - King Of Indian Hip Hop</div>368 </div>369 <div class="row-actions">370 <div class="icon">371 <svg viewBox="0 0 48 48">372 <path d="M24 10v18" stroke-linecap="round"/>373 <path d="M16 20l8 8 8-8" stroke-linecap="round" stroke-linejoin="round"/>374 <path d="M10 38h28" />375 </svg>376 </div>377 <div class="icon kebab-sm">378 <svg viewBox="0 0 10 48">379 <circle cx="5" cy="12" r="3"/><circle cx="5" cy="24" r="3"/><circle cx="5" cy="36" r="3"/>380 </svg>381 </div>382 </div>383 </div>384 385 <div class="row playing">386 <div class="art">[IMG: King Of Indian Hip Hop cover (red)]</div>387 <div class="text">388 <div class="title-row">389 <div class="song-title">King Of Indian Hip Hop</div>390 <div class="explicit">E</div>391 </div>392 <div class="song-sub">Emiway Bantai - King Of Indian Hip Hop</div>393 </div>394 <div class="row-actions">395 <div class="pause-pill">396 <svg viewBox="0 0 48 48">397 <rect x="12" y="10" width="8" height="28" />398 <rect x="28" y="10" width="8" height="28" />399 </svg>400 </div>401 </div>402 </div>403 404 </div>405 406 <!-- Bottom navigation -->407 <div class="bottom-nav">408 <div class="nav-item active">409 <div class="ni-ico">410 <svg viewBox="0 0 48 48">411 <path d="M8 22l16-12 16 12v16H30V26H18v12H8z" stroke-linejoin="round"/>412 </svg>413 </div>414 <div>Home</div>415 </div>416 <div class="nav-item">417 <div class="ni-ico">418 <svg viewBox="0 0 48 48">419 <path d="M18 6v24" />420 <path d="M30 12v24" />421 <circle cx="18" cy="36" r="4" fill="#bdbdbd" stroke="none"/>422 <circle cx="30" cy="40" r="4" fill="#bdbdbd" stroke="none"/>423 </svg>424 </div>425 <div>My Music</div>426 </div>427 <div class="nav-item">428 <div class="ni-ico">429 <svg viewBox="0 0 48 48">430 <path d="M24 8v18" />431 <circle cx="16" cy="36" r="6" />432 <circle cx="32" cy="30" r="6" />433 </svg>434 </div>435 <div>Hellotunes</div>436 </div>437 <div class="nav-item">438 <div class="ni-ico">439 <svg viewBox="0 0 48 48">440 <circle cx="24" cy="24" r="10" />441 <path d="M24 2v8M24 38v8M2 24h8M38 24h8M10 10l6 6M32 32l6 6M32 16l6-6M10 38l6-6"/>442 </svg>443 </div>444 <div>Settings</div>445 </div>446 </div>447 448 <div class="gesture"></div>449</div>450</body>451</html>