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>Uncut Bollywood - Mock UI</title>7<style>8 * { box-sizing: border-box; }9 body { margin: 0; padding: 0; background: transparent; font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Arial, sans-serif; }10 #render-target {11 width: 1080px;12 height: 2400px;13 position: relative;14 overflow: hidden;15 background: radial-gradient(ellipse at top center, #2a1e1c 0%, #161616 40%, #0f0f0f 100%);16 color: #fff;17 }18 19 /* Status bar */20 .status-bar {21 height: 90px;22 padding: 0 28px;23 display: flex;24 align-items: center;25 justify-content: space-between;26 color: #fff;27 font-size: 32px;28 letter-spacing: 0.2px;29 opacity: 0.92;30 }31 .status-left { display: flex; align-items: center; gap: 14px; }32 .status-right { display: flex; align-items: center; gap: 18px; }33 .sb-icon svg { width: 34px; height: 34px; fill: none; stroke: #fff; stroke-width: 2.5; }34 35 /* Top overlay icons */36 .top-actions {37 position: absolute;38 top: 130px;39 left: 0;40 width: 100%;41 padding: 0 34px;42 display: flex;43 justify-content: space-between;44 align-items: center;45 pointer-events: none;46 }47 .action-btn {48 pointer-events: auto;49 width: 72px;50 height: 72px;51 display: flex;52 align-items: center;53 justify-content: center;54 opacity: 0.9;55 }56 .action-btn svg { width: 44px; height: 44px; stroke: #ddd; stroke-width: 2.5; fill: none; }57 58 /* Header titles */59 .header {60 margin-top: 90px;61 text-align: center;62 }63 .app-title {64 font-size: 38px;65 font-weight: 600;66 color: #eaeaea;67 margin-bottom: 8px;68 }69 .subtitle {70 font-size: 28px;71 color: #bdbdbd;72 }73 74 /* Cover art */75 .cover-wrap {76 margin: 36px auto 40px;77 width: 820px;78 height: 820px;79 border-radius: 24px;80 overflow: hidden;81 box-shadow: 0 18px 40px rgba(0,0,0,0.55);82 }83 .img-placeholder {84 width: 100%; height: 100%;85 background: #E0E0E0;86 border: 1px solid #BDBDBD;87 display: flex; align-items: center; justify-content: center;88 color: #555; font-size: 34px; font-weight: 600; text-align: center;89 }90 91 /* Main title and description */92 .playlist-title {93 text-align: center;94 font-size: 78px;95 font-weight: 800;96 letter-spacing: 2px;97 margin-top: 14px;98 }99 .desc {100 text-align: center;101 font-size: 30px;102 color: #c9c9c9;103 margin-top: 16px;104 }105 .hashtags {106 text-align: center;107 font-size: 30px;108 color: #9e9e9e;109 margin-top: 10px;110 }111 112 /* Controls row */113 .controls {114 margin: 40px auto 34px;115 width: 940px;116 display: flex;117 align-items: center;118 justify-content: space-between;119 }120 .circle-btn {121 width: 132px; height: 132px;122 background: #1e1e1e;123 border-radius: 50%;124 display: flex; align-items: center; justify-content: center;125 box-shadow: 0 10px 18px rgba(0,0,0,0.45);126 }127 .circle-btn svg { width: 56px; height: 56px; stroke: #e8e8e8; stroke-width: 2.6; fill: none; }128 .circle-btn.play {129 width: 160px; height: 160px;130 background: #fafafa;131 }132 .circle-btn.play svg { width: 70px; height: 70px; fill: #000; stroke: none; }133 134 /* Track list */135 .track-list { padding: 0 24px; }136 .track {137 display: flex; align-items: center;138 gap: 24px;139 padding: 22px;140 border-radius: 18px;141 }142 .track.featured { background: #222; }143 .thumb { width: 152px; height: 152px; border-radius: 8px; overflow: hidden; }144 .thumb .img-placeholder { font-size: 22px; }145 .track-info { flex: 1; }146 .track-title {147 font-size: 34px; color: #fff; font-weight: 600; line-height: 1.25;148 }149 .track-sub {150 font-size: 28px; color: #bdbdbd; margin-top: 6px;151 }152 .track-menu {153 width: 68px; height: 68px; display: flex; align-items: center; justify-content: center;154 }155 .track-menu svg { width: 10px; height: 40px; fill: #bdbdbd; }156 157 /* Mini player */158 .mini-player {159 position: absolute;160 left: 0; right: 0; bottom: 200px;161 height: 160px;162 background: #252525;163 border-top: 1px solid #333;164 display: flex; align-items: center;165 padding: 20px 28px;166 }167 .mini-progress {168 position: absolute; top: 0; left: 0; height: 6px; width: 100%;169 background: #3a3a3a;170 }171 .mini-progress .bar { height: 100%; width: 140px; background: #e0e0e0; }172 .mini-thumb { width: 120px; height: 120px; border-radius: 8px; overflow: hidden; margin-right: 20px; }173 .mini-info { flex: 1; }174 .mini-title { font-size: 32px; font-weight: 600; color: #fff; }175 .mini-sub { font-size: 26px; color: #bdbdbd; margin-top: 6px; }176 .mini-actions { display: flex; align-items: center; gap: 26px; }177 .mini-actions .btn { width: 72px; height: 72px; display: flex; align-items: center; justify-content: center; }178 .mini-actions svg { width: 44px; height: 44px; stroke: #e8e8e8; stroke-width: 2.5; fill: none; }179 .mini-actions .play svg { fill: #fff; stroke: none; }180 181 /* Bottom nav */182 .nav-bar {183 position: absolute; left: 0; right: 0; bottom: 0;184 height: 200px; background: #1a1a1a; border-top: 1px solid #2a2a2a;185 }186 .nav-indicator {187 position: absolute; top: 0; left: 50%; transform: translateX(-50%);188 width: 260px; height: 8px; background: #e0e0e0; border-radius: 4px; opacity: 0.8;189 }190 .nav-items {191 height: 100%; display: flex; align-items: center; justify-content: space-around; padding: 34px 0 16px;192 }193 .nav-item { display: flex; flex-direction: column; align-items: center; gap: 14px; color: #cfcfcf; }194 .nav-item.active { color: #fff; }195 .nav-item svg { width: 52px; height: 52px; stroke: currentColor; stroke-width: 2.6; fill: none; }196 .nav-label { font-size: 26px; }197 198 /* Small helper for muted text */199 .muted { color: #bdbdbd; }200</style>201</head>202<body>203<div id="render-target">204 205 <!-- Status Bar -->206 <div class="status-bar">207 <div class="status-left">208 <div class="time">1:24</div>209 <div class="sb-icon">210 <!-- cellular bars -->211 <svg viewBox="0 0 24 24">212 <rect x="2" y="14" width="3" height="8" fill="#fff"></rect>213 <rect x="7" y="10" width="3" height="12" fill="#fff"></rect>214 <rect x="12" y="6" width="3" height="16" fill="#fff"></rect>215 <rect x="17" y="2" width="3" height="20" fill="#fff"></rect>216 </svg>217 </div>218 </div>219 <div class="status-right">220 <!-- Wi-Fi -->221 <div class="sb-icon">222 <svg viewBox="0 0 24 24">223 <path d="M2 8c5-4 15-4 20 0M5 12c3-3 11-3 14 0M9 16c2-2 4-2 6 0M12 20l2 2-2 2-2-2z" stroke-linecap="round"></path>224 </svg>225 </div>226 <!-- Battery -->227 <div class="sb-icon">228 <svg viewBox="0 0 28 18">229 <rect x="1" y="3" width="22" height="12" rx="2" ry="2"></rect>230 <rect x="24" y="7" width="3" height="4" rx="1" ry="1"></rect>231 <rect x="3" y="5" width="16" height="8" fill="#fff" stroke="none"></rect>232 </svg>233 </div>234 </div>235 </div>236 237 <!-- Top actions (back + search) -->238 <div class="top-actions">239 <div class="action-btn">240 <svg viewBox="0 0 24 24">241 <path d="M15 5L7 12l8 7" stroke-linecap="round" stroke-linejoin="round"></path>242 </svg>243 </div>244 <div class="action-btn">245 <svg viewBox="0 0 24 24">246 <circle cx="10" cy="10" r="7"></circle>247 <line x1="15" y1="15" x2="22" y2="22"></line>248 </svg>249 </div>250 </div>251 252 <!-- Header -->253 <div class="header">254 <div class="app-title">YouTube Music</div>255 <div class="subtitle">Updated Jul 20, 2023</div>256 </div>257 258 <!-- Cover Art -->259 <div class="cover-wrap">260 <div class="img-placeholder">[IMG: Playlist Cover Art - Uncut Bollywood]</div>261 </div>262 263 <!-- Playlist Title -->264 <div class="playlist-title">UNCUT BOLLYWOOD</div>265 <div class="desc">Enjoy stripped down versions of your favorite Bollywood tracks.</div>266 <div class="hashtags">#hindi #chill #relax</div>267 268 <!-- Controls -->269 <div class="controls">270 <div class="circle-btn">271 <!-- Download -->272 <svg viewBox="0 0 24 24">273 <path d="M12 4v10M7 9l5 5 5-5" stroke-linecap="round" stroke-linejoin="round"></path>274 <path d="M4 20h16" stroke-linecap="round"></path>275 </svg>276 </div>277 <div class="circle-btn">278 <!-- Add -->279 <svg viewBox="0 0 24 24">280 <path d="M12 5v14M5 12h14" stroke-linecap="round"></path>281 </svg>282 </div>283 <div class="circle-btn play">284 <!-- Play -->285 <svg viewBox="0 0 24 24">286 <polygon points="8,5 20,12 8,19"></polygon>287 </svg>288 </div>289 <div class="circle-btn">290 <!-- Share -->291 <svg viewBox="0 0 24 24">292 <circle cx="5" cy="12" r="3"></circle>293 <circle cx="19" cy="5" r="3"></circle>294 <circle cx="19" cy="19" r="3"></circle>295 <path d="M7.8 10.8l8.4-4.6M7.8 13.2l8.4 4.6" stroke-linecap="round"></path>296 </svg>297 </div>298 <div class="circle-btn">299 <!-- More -->300 <svg viewBox="0 0 6 24">301 <circle cx="3" cy="4" r="2" fill="#e8e8e8"></circle>302 <circle cx="3" cy="12" r="2" fill="#e8e8e8"></circle>303 <circle cx="3" cy="20" r="2" fill="#e8e8e8"></circle>304 </svg>305 </div>306 </div>307 308 <!-- Track List -->309 <div class="track-list">310 <div class="track featured">311 <div class="thumb">312 <div class="img-placeholder">[IMG: Track Thumbnail]</div>313 </div>314 <div class="track-info">315 <div class="track-title">Tere Vaaste - Unplugged</div>316 <div class="track-sub">Varun Jain • 1:06</div>317 </div>318 <div class="track-menu">319 <svg viewBox="0 0 6 24">320 <circle cx="3" cy="4" r="2"></circle>321 <circle cx="3" cy="12" r="2"></circle>322 <circle cx="3" cy="20" r="2"></circle>323 </svg>324 </div>325 </div>326 327 <div class="track">328 <div class="thumb">329 <div class="img-placeholder">[IMG: Track Thumbnail]</div>330 </div>331 <div class="track-info">332 <div class="track-title">Tere Hawale (Tushar - Shilpa Duet)</div>333 <div class="track-sub">Shilpa Rao • 5:31</div>334 </div>335 <div class="track-menu">336 <svg viewBox="0 0 6 24">337 <circle cx="3" cy="4" r="2"></circle>338 <circle cx="3" cy="12" r="2"></circle>339 <circle cx="3" cy="20" r="2"></circle>340 </svg>341 </div>342 </div>343 344 <div class="track">345 <div class="thumb">346 <div class="img-placeholder">[IMG: Track Thumbnail]</div>347 </div>348 <div class="track-info">349 <div class="track-title">DIL KO KARRAR AAYA Reprise - Neha Kakkar | Rajat Nagpal | Rana | Anshul Gar...</div>350 <div class="track-sub">Desi Music Factory • 4:05</div>351 </div>352 <div class="track-menu">353 <svg viewBox="0 0 6 24">354 <circle cx="3" cy="4" r="2"></circle>355 <circle cx="3" cy="12" r="2"></circle>356 <circle cx="3" cy="20" r="2"></circle>357 </svg>358 </div>359 </div>360 361 <div class="track">362 <div class="thumb">363 <div class="img-placeholder">[IMG: Track Thumbnail]</div>364 </div>365 <div class="track-info">366 <div class="track-title">Teri Mitti - Female Version (Kesari)</div>367 <div class="track-sub">Parineeti Chopra • 3:45</div>368 </div>369 <div class="track-menu">370 <svg viewBox="0 0 6 24">371 <circle cx="3" cy="4" r="2"></circle>372 <circle cx="3" cy="12" r="2"></circle>373 <circle cx="3" cy="20" r="2"></circle>374 </svg>375 </div>376 </div>377 </div>378 379 <!-- Mini Player -->380 <div class="mini-player">381 <div class="mini-progress"><div class="bar"></div></div>382 <div class="mini-thumb">383 <div class="img-placeholder">[IMG: Track Thumbnail]</div>384 </div>385 <div class="mini-info">386 <div class="mini-title">Tere Vaaste - Unplugged</div>387 <div class="mini-sub">Varun Jain</div>388 </div>389 <div class="mini-actions">390 <!-- Cast -->391 <div class="btn">392 <svg viewBox="0 0 24 24">393 <rect x="3" y="5" width="18" height="12" rx="2" ry="2"></rect>394 <path d="M3 17c3 0 5 2 5 5M3 17c2 0 3 1 3 3M3 17c1 0 1 .5 1 1" stroke-linecap="round"></path>395 </svg>396 </div>397 <!-- Play -->398 <div class="btn play">399 <svg viewBox="0 0 24 24">400 <polygon points="8,5 20,12 8,19"></polygon>401 </svg>402 </div>403 </div>404 </div>405 406 <!-- Bottom Navigation -->407 <div class="nav-bar">408 <div class="nav-indicator"></div>409 <div class="nav-items">410 <div class="nav-item">411 <svg viewBox="0 0 24 24">412 <path d="M3 11l9-8 9 8v9H6v-9z" stroke-linejoin="round"></path>413 </svg>414 <div class="nav-label">Home</div>415 </div>416 <div class="nav-item active">417 <svg viewBox="0 0 24 24">418 <circle cx="11" cy="11" r="6"></circle>419 <path d="M20 20l-4-4" stroke-linecap="round"></path>420 </svg>421 <div class="nav-label">Explore</div>422 </div>423 <div class="nav-item">424 <svg viewBox="0 0 24 24">425 <rect x="4" y="5" width="16" height="14" rx="2" ry="2"></rect>426 <line x1="4" y1="10" x2="20" y2="10"></line>427 </svg>428 <div class="nav-label">Library</div>429 </div>430 <div class="nav-item">431 <svg viewBox="0 0 24 24">432 <polygon points="12,3 14,9 20,9 15,13 17,19 12,16 7,19 9,13 4,9 10,9" stroke-linejoin="round"></polygon>433 </svg>434 <div class="nav-label">Upgrade</div>435 </div>436 </div>437 </div>438 439</div>440</body>441</html>