GD-ML/AndroidCode
13.4k
1<html lang="en">2<head>3<meta charset="UTF-8">4<title>Music App - The Mambo King</title>5<meta name="viewport" content="width=1080, initial-scale=1.0">6<style>7 body { margin: 0; padding: 0; background: transparent; font-family: Arial, Helvetica, sans-serif; }8 #render-target {9 width: 1080px;10 height: 2400px;11 position: relative;12 overflow: hidden;13 background: #000000;14 color: #ffffff;15 }16 /* Status bar */17 .status-bar {18 position: absolute;19 top: 0;20 left: 0;21 width: 1080px;22 height: 120px;23 display: flex;24 align-items: center;25 padding: 0 36px;26 box-sizing: border-box;27 color: #f5f5f5;28 font-weight: 600;29 font-size: 44px;30 }31 .status-bar .right {32 margin-left: auto;33 display: flex;34 align-items: center;35 gap: 26px;36 }37 /* Back button */38 .back-btn {39 position: absolute;40 top: 144px;41 left: 36px;42 width: 90px;43 height: 90px;44 border-radius: 45px;45 background: #1c1c1c;46 display: flex;47 align-items: center;48 justify-content: center;49 }50 /* Header album section */51 .header {52 position: absolute;53 top: 228px;54 left: 36px;55 right: 36px;56 display: grid;57 grid-template-columns: 220px 1fr 220px;58 column-gap: 28px;59 align-items: center;60 }61 .album-cover {62 width: 220px;63 height: 220px;64 background: #E0E0E0;65 border: 1px solid #BDBDBD;66 border-radius: 12px;67 display: flex;68 align-items: center;69 justify-content: center;70 color: #757575;71 font-weight: 600;72 text-align: center;73 padding: 10px;74 box-sizing: border-box;75 }76 .album-info h1 {77 margin: 0 0 12px 0;78 font-size: 56px;79 font-weight: 700;80 }81 .album-info .artist {82 font-size: 40px;83 margin-bottom: 14px;84 color: #d7d7d7;85 font-weight: 700;86 }87 .album-info .meta {88 font-size: 32px;89 color: #b0b0b0;90 }91 .play-controls {92 display: flex;93 align-items: center;94 justify-content: flex-end;95 gap: 26px;96 }97 .shuffle-icon {98 width: 66px; height: 66px;99 background: #1c1c1c;100 border-radius: 12px;101 display: flex; align-items: center; justify-content: center;102 }103 .play-btn {104 width: 160px;105 height: 160px;106 border-radius: 80px;107 background: #ffffff;108 display: flex;109 align-items: center;110 justify-content: center;111 }112 /* Likes row */113 .likes-row {114 position: absolute;115 top: 480px;116 left: 36px;117 display: flex;118 align-items: center;119 gap: 18px;120 color: #fff;121 font-size: 36px;122 }123 /* Tracks list */124 .tracklist {125 position: absolute;126 top: 546px;127 left: 36px;128 right: 36px;129 bottom: 360px;130 overflow-y: auto;131 padding-right: 10px;132 }133 .track {134 display: grid;135 grid-template-columns: 150px 1fr 60px;136 align-items: center;137 column-gap: 26px;138 padding: 22px 0;139 border-bottom: 1px solid rgba(255,255,255,0.05);140 }141 .thumb {142 width: 150px;143 height: 150px;144 background: #E0E0E0;145 border: 1px solid #BDBDBD;146 border-radius: 12px;147 display: flex; align-items: center; justify-content: center;148 color: #757575; font-size: 26px; text-align: center; padding: 8px; box-sizing: border-box;149 }150 .track-info .title {151 font-size: 42px;152 font-weight: 700;153 margin-bottom: 8px;154 color: #ffffff;155 }156 .track-info .artist {157 font-size: 34px;158 color: #cfcfcf;159 margin-bottom: 8px;160 }161 .track-info .stats {162 display: flex; align-items: center; gap: 12px;163 font-size: 30px; color: #bdbdbd;164 }165 .kebab {166 width: 60px; height: 60px;167 display: flex; align-items: center; justify-content: center;168 }169 /* Mini player */170 .mini-player {171 position: absolute;172 left: 0;173 right: 0;174 bottom: 210px;175 height: 150px;176 background: linear-gradient(180deg, rgba(40,40,40,0.15), rgba(40,40,40,0.6));177 display: flex;178 align-items: center;179 padding: 0 36px;180 box-sizing: border-box;181 color: #ffffff;182 gap: 26px;183 }184 .mini-player .play {185 width: 96px; height: 96px; border-radius: 48px; background: #2b2b2b;186 display: flex; align-items: center; justify-content: center;187 }188 .mini-player .text {189 font-size: 40px; font-weight: 700;190 }191 .mini-player .sub {192 font-size: 30px; color: #c9c9c9; font-weight: 600;193 }194 .mini-player .spacer { flex: 1; }195 .mini-player .icon-btn {196 width: 70px; height: 70px; background: #1c1c1c; border-radius: 20px;197 display: flex; align-items: center; justify-content: center;198 }199 /* Bottom nav */200 .bottom-nav {201 position: absolute;202 left: 0;203 right: 0;204 bottom: 0;205 height: 210px;206 background: #0c0c0c;207 border-top: 1px solid rgba(255,255,255,0.06);208 display: flex; align-items: center; justify-content: space-around;209 }210 .nav-item {211 display: flex; flex-direction: column; align-items: center; gap: 10px;212 color: #bfbfbf; font-size: 34px;213 }214 .nav-item.active { color: #ffffff; }215 .nav-icon {216 width: 70px; height: 70px; display: flex; align-items: center; justify-content: center;217 }218 /* Helper dot divider */219 .dot { width: 6px; height: 6px; background: #bdbdbd; border-radius: 3px; display: inline-block; }220</style>221</head>222<body>223<div id="render-target">224 <!-- Status Bar -->225 <div class="status-bar">226 <div>1:17</div>227 <div class="right">228 <!-- Status small icons -->229 <svg width="34" height="34" viewBox="0 0 24 24" fill="#FFFFFF"><path d="M7 3h10v2H7zM4 7h16v2H4zM2 11h20v2H2zM6 15h12v2H6zM9 19h6v2H9z"/></svg>230 <svg width="34" height="34" viewBox="0 0 24 24" fill="#FFFFFF"><path d="M3 3h18v14H3zM7 19h10v2H7z"/></svg>231 <svg width="34" height="34" viewBox="0 0 24 24" fill="#FFFFFF"><path d="M12 2l1 2h8v18H3V4h8l1-2z"/></svg>232 <svg width="34" height="34" viewBox="0 0 24 24" fill="#FFFFFF"><path d="M20 8H4V6h16v2zm0 4H4v-2h16v2zm0 4H4v-2h16v2z"/></svg>233 <!-- Cast icon -->234 <svg width="44" height="44" viewBox="0 0 24 24" fill="#FFFFFF"><path d="M3 5h18v12h-6v2h8V3H1v4h2zM2 13v2c2.76 0 5 2.24 5 5h2c0-3.87-3.13-7-7-7zm0-4v2c4.97 0 9 4.03 9 9h2C13 15.37 8.63 11 2 9z"/></svg>235 </div>236 </div>237 238 <!-- Back button -->239 <div class="back-btn">240 <svg width="44" height="44" viewBox="0 0 24 24" fill="#FFFFFF">241 <path d="M15.5 19l-7-7 7-7v14z"/>242 </svg>243 </div>244 245 <!-- Header -->246 <div class="header">247 <div class="album-cover">[IMG: Album Art]</div>248 <div class="album-info">249 <h1>The Mambo King</h1>250 <div class="artist">Tito Puente</div>251 <div class="meta">Album • 2017 • 21 Tracks • 1:02:20</div>252 </div>253 <div class="play-controls">254 <div class="shuffle-icon">255 <svg width="36" height="36" viewBox="0 0 24 24" fill="#B0FF8E">256 <path d="M4 7h4l10 10h2v2h-4L6 9H4V7zm12 0h4v4h-2V9h-2V7zM4 17h4l3-3-1.4-1.4L7 15H4v2zm12 0h2v-2h2v4h-4v-2z"/>257 </svg>258 </div>259 <div class="play-btn">260 <svg width="84" height="84" viewBox="0 0 24 24" fill="#000000">261 <path d="M8 5v14l11-7-11-7z"/>262 </svg>263 </div>264 </div>265 </div>266 267 <!-- Likes -->268 <div class="likes-row">269 <svg width="44" height="44" viewBox="0 0 24 24" fill="#FFFFFF"><path d="M12 21s-6.716-4.603-9.002-7.298C1.21 12.625 1 11.46 1 10.5 1 7.462 3.462 5 6.5 5c1.74 0 3.41.81 4.5 2.09C12.09 5.81 13.76 5 15.5 5 18.538 5 21 7.462 21 10.5c0 .96-.21 2.125-1.998 3.202C18.716 16.397 12 21 12 21z"/></svg>270 <span>13</span>271 <svg width="34" height="34" viewBox="0 0 24 24" fill="#FFFFFF"><circle cx="12" cy="5" r="2"/><circle cx="12" cy="12" r="2"/><circle cx="12" cy="19" r="2"/></svg>272 </div>273 274 <!-- Track list -->275 <div class="tracklist">276 <!-- Track 1 -->277 <div class="track">278 <div class="thumb">[IMG: Album Art]</div>279 <div class="track-info">280 <div class="title">Mambo Diablo</div>281 <div class="artist">Tito Puente</div>282 <div class="stats">283 <svg width="28" height="28" viewBox="0 0 24 24" fill="#BDBDBD"><path d="M8 5v14l11-7-11-7z"/></svg>284 <span>512</span>285 <span>•</span>286 <span>3:08</span>287 </div>288 </div>289 <div class="kebab">290 <svg width="34" height="34" viewBox="0 0 24 24" fill="#FFFFFF"><circle cx="12" cy="5" r="2"/><circle cx="12" cy="12" r="2"/><circle cx="12" cy="19" r="2"/></svg>291 </div>292 </div>293 <!-- Track 2 -->294 <div class="track">295 <div class="thumb">[IMG: Album Art]</div>296 <div class="track-info">297 <div class="title">A Burujon Punao</div>298 <div class="artist">Tito Puente</div>299 <div class="stats">300 <svg width="28" height="28" viewBox="0 0 24 24" fill="#BDBDBD"><path d="M8 5v14l11-7-11-7z"/></svg>301 <span>283</span>302 <span>•</span>303 <span>3:11</span>304 </div>305 </div>306 <div class="kebab">307 <svg width="34" height="34" viewBox="0 0 24 24" fill="#FFFFFF"><circle cx="12" cy="5" r="2"/><circle cx="12" cy="12" r="2"/><circle cx="12" cy="19" r="2"/></svg>308 </div>309 </div>310 <!-- Track 3 -->311 <div class="track">312 <div class="thumb">[IMG: Album Art]</div>313 <div class="track-info">314 <div class="title">Mambo Macoco</div>315 <div class="artist">Tito Puente</div>316 <div class="stats">317 <svg width="28" height="28" viewBox="0 0 24 24" fill="#BDBDBD"><path d="M8 5v14l11-7-11-7z"/></svg>318 <span>245</span>319 <span>•</span>320 <span>2:54</span>321 </div>322 </div>323 <div class="kebab">324 <svg width="34" height="34" viewBox="0 0 24 24" fill="#FFFFFF"><circle cx="12" cy="5" r="2"/><circle cx="12" cy="12" r="2"/><circle cx="12" cy="19" r="2"/></svg>325 </div>326 </div>327 <!-- Track 4 -->328 <div class="track">329 <div class="thumb">[IMG: Album Art]</div>330 <div class="track-info">331 <div class="title">Abaniquito</div>332 <div class="artist">Tito Puente</div>333 <div class="stats">334 <svg width="28" height="28" viewBox="0 0 24 24" fill="#BDBDBD"><path d="M8 5v14l11-7-11-7z"/></svg>335 <span>214</span>336 <span>•</span>337 <span>2:46</span>338 </div>339 </div>340 <div class="kebab">341 <svg width="34" height="34" viewBox="0 0 24 24" fill="#FFFFFF"><circle cx="12" cy="5" r="2"/><circle cx="12" cy="12" r="2"/><circle cx="12" cy="19" r="2"/></svg>342 </div>343 </div>344 <!-- Track 5 -->345 <div class="track">346 <div class="thumb">[IMG: Album Art]</div>347 <div class="track-info">348 <div class="title">El Timbal</div>349 <div class="artist">Tito Puente</div>350 <div class="stats">351 <svg width="28" height="28" viewBox="0 0 24 24" fill="#BDBDBD"><path d="M8 5v14l11-7-11-7z"/></svg>352 <span>215</span>353 <span>•</span>354 <span>3:04</span>355 </div>356 </div>357 <div class="kebab">358 <svg width="34" height="34" viewBox="0 0 24 24" fill="#FFFFFF"><circle cx="12" cy="5" r="2"/><circle cx="12" cy="12" r="2"/><circle cx="12" cy="19" r="2"/></svg>359 </div>360 </div>361 <!-- Track 6 -->362 <div class="track">363 <div class="thumb">[IMG: Album Art]</div>364 <div class="track-info">365 <div class="title">Cuban Mambo</div>366 <div class="artist">Tito Puente</div>367 <div class="stats">368 <svg width="28" height="28" viewBox="0 0 24 24" fill="#BDBDBD"><path d="M8 5v14l11-7-11-7z"/></svg>369 <span>200</span>370 <span>•</span>371 <span>3:06</span>372 </div>373 </div>374 <div class="kebab">375 <svg width="34" height="34" viewBox="0 0 24 24" fill="#FFFFFF"><circle cx="12" cy="5" r="2"/><circle cx="12" cy="12" r="2"/><circle cx="12" cy="19" r="2"/></svg>376 </div>377 </div>378 <!-- Track 7 -->379 <div class="track">380 <div class="thumb">[IMG: Album Art]</div>381 <div class="track-info">382 <div class="title">Tito Mambo</div>383 <div class="artist">Tito Puente</div>384 <div class="stats">385 <svg width="28" height="28" viewBox="0 0 24 24" fill="#BDBDBD"><path d="M8 5v14l11-7-11-7z"/></svg>386 <span>—</span>387 <span>•</span>388 <span>3:06</span>389 </div>390 </div>391 <div class="kebab">392 <svg width="34" height="34" viewBox="0 0 24 24" fill="#FFFFFF"><circle cx="12" cy="5" r="2"/><circle cx="12" cy="12" r="2"/><circle cx="12" cy="19" r="2"/></svg>393 </div>394 </div>395 </div>396 397 <!-- Mini Player -->398 <div class="mini-player">399 <div class="play">400 <svg width="48" height="48" viewBox="0 0 24 24" fill="#FFFFFF"><path d="M8 5v14l11-7-11-7z"/></svg>401 </div>402 <div>403 <div class="text">Tito Mambo</div>404 <div class="sub">Tito Puente</div>405 </div>406 <div class="spacer"></div>407 <div class="icon-btn">408 <svg width="34" height="34" viewBox="0 0 24 24" fill="#FFFFFF"><path d="M12 21s-6.716-4.603-9.002-7.298C1.21 12.625 1 11.46 1 10.5 1 7.462 3.462 5 6.5 5c1.74 0 3.41.81 4.5 2.09C12.09 5.81 13.76 5 15.5 5 18.538 5 21 7.462 21 10.5c0 .96-.21 2.125-1.998 3.202C18.716 16.397 12 21 12 21z"/></svg>409 </div>410 </div>411 412 <!-- Bottom Navigation -->413 <div class="bottom-nav">414 <div class="nav-item">415 <div class="nav-icon">416 <svg width="42" height="42" viewBox="0 0 24 24" fill="#BFBFBF"><path d="M12 3l9 8h-3v9h-12v-9h-3l9-8z"/></svg>417 </div>418 <div>Home</div>419 </div>420 <div class="nav-item">421 <div class="nav-icon">422 <svg width="42" height="42" viewBox="0 0 24 24" fill="#BFBFBF"><path d="M4 6h16v3H4V6zm0 5h16v3H4v-3zm0 5h16v3H4v-3z"/></svg>423 </div>424 <div>Feed</div>425 </div>426 <div class="nav-item active">427 <div class="nav-icon">428 <svg width="42" height="42" viewBox="0 0 24 24" fill="#FFFFFF"><path d="M10 2a8 8 0 106.32 3.08l4.3-4.3-1.42-1.42-4.3 4.3A8 8 0 0010 2zm0 2a6 6 0 110 12 6 6 0 010-12z"/></svg>429 </div>430 <div>Search</div>431 </div>432 <div class="nav-item">433 <div class="nav-icon">434 <svg width="42" height="42" viewBox="0 0 24 24" fill="#BFBFBF"><path d="M4 4h6v16H4V4zm10 0h6v16h-6V4z"/></svg>435 </div>436 <div>Library</div>437 </div>438 <div class="nav-item">439 <div class="nav-icon">440 <svg width="42" height="42" viewBox="0 0 24 24" fill="#BFBFBF"><path d="M19 18H5a3 3 0 010-6h1a5 5 0 019.9-1.25A4 4 0 1120 18h-1z"/></svg>441 </div>442 <div>Upgrade</div>443 </div>444 </div>445</div>446</body>447</html>