GD-ML/AndroidCode
13.4k
1<html>2<head>3<meta charset="UTF-8">4<title>Jazz Music 3 UI</title>5<style>6 body { margin: 0; padding: 0; background: transparent; font-family: Arial, Helvetica, sans-serif; }7 #render-target {8 width: 1080px;9 height: 2400px;10 position: relative;11 overflow: hidden;12 background: linear-gradient(180deg, #3a4a38 0%, #1b1f1a 30%, #121212 100%);13 color: #fff;14 }15 .status-bar {16 position: absolute;17 top: 0;18 left: 0;19 width: 1080px;20 height: 110px;21 display: flex;22 align-items: center;23 justify-content: space-between;24 padding: 0 36px;25 color: #fff;26 font-weight: 600;27 font-size: 36px;28 opacity: 0.9;29 }30 .status-icons {31 display: flex;32 align-items: center;33 gap: 22px;34 }35 .icon { width: 40px; height: 40px; fill: #fff; }36 .nav-back {37 position: absolute;38 top: 118px;39 left: 28px;40 width: 80px;41 height: 80px;42 display: flex;43 align-items: center;44 justify-content: center;45 opacity: 0.95;46 }47 .collage {48 position: absolute;49 top: 170px;50 left: 150px;51 width: 780px;52 height: 780px;53 display: grid;54 grid-template-columns: 1fr 1fr;55 grid-template-rows: 1fr 1fr;56 gap: 14px;57 }58 .img {59 background: #E0E0E0;60 border: 1px solid #BDBDBD;61 display: flex;62 align-items: center;63 justify-content: center;64 color: #555;65 font-size: 28px;66 font-weight: 600;67 }68 .title {69 position: absolute;70 top: 990px;71 left: 32px;72 font-size: 80px;73 font-weight: 800;74 letter-spacing: -0.5px;75 }76 .meta-row {77 position: absolute;78 top: 1080px;79 left: 32px;80 display: flex;81 align-items: center;82 gap: 24px;83 color: #dcdcdc;84 font-size: 34px;85 }86 .avatar {87 width: 56px;88 height: 56px;89 border-radius: 50%;90 background: #7b5bdc;91 display: inline-flex;92 align-items: center;93 justify-content: center;94 font-weight: 700;95 color: #fff;96 margin-right: 8px;97 }98 .controls-row {99 position: absolute;100 top: 1160px;101 left: 32px;102 right: 32px;103 display: flex;104 align-items: center;105 justify-content: space-between;106 }107 .left-controls {108 display: flex;109 align-items: center;110 gap: 22px;111 }112 .pill {113 padding: 20px 28px;114 border-radius: 40px;115 background: #2a2e2a;116 border: 1px solid #3b3f3b;117 color: #fff;118 font-size: 34px;119 font-weight: 700;120 }121 .circle-btn {122 width: 72px;123 height: 72px;124 border-radius: 36px;125 background: #2a2e2a;126 border: 1px solid #3b3f3b;127 display: flex;128 align-items: center;129 justify-content: center;130 }131 .right-controls {132 display: flex;133 align-items: center;134 gap: 26px;135 }136 .shuffle {137 width: 70px;138 height: 70px;139 border-radius: 35px;140 background: #2a2e2a;141 border: 1px solid #3b3f3b;142 display: flex;143 align-items: center;144 justify-content: center;145 }146 .play-btn {147 width: 150px;148 height: 150px;149 border-radius: 75px;150 background: #1ed760;151 display: flex;152 align-items: center;153 justify-content: center;154 }155 .list {156 position: absolute;157 top: 1260px;158 left: 32px;159 right: 32px;160 }161 .add-card {162 height: 160px;163 margin-bottom: 26px;164 background: #1b1b1b;165 border-radius: 20px;166 display: flex;167 align-items: center;168 padding: 0 28px;169 gap: 24px;170 border: 1px solid #2a2a2a;171 }172 .add-square {173 width: 160px;174 height: 160px;175 background: #222;176 border-radius: 18px;177 border: 1px solid #333;178 display: flex; align-items: center; justify-content: center;179 }180 .row {181 display: grid;182 grid-template-columns: 140px 1fr 80px;183 align-items: center;184 padding: 26px 10px;185 border-bottom: 1px solid #1f1f1f;186 }187 .thumb {188 width: 120px;189 height: 120px;190 background: #E0E0E0;191 border: 1px solid #BDBDBD;192 color: #666;193 font-size: 22px;194 display: flex; align-items: center; justify-content: center;195 }196 .track-info {197 padding-left: 12px;198 }199 .track-title {200 font-size: 42px;201 font-weight: 700;202 color: #fff;203 margin-bottom: 8px;204 }205 .artists {206 font-size: 32px;207 color: #b6b6b6;208 }209 .kebab { display: flex; align-items: center; justify-content: center; }210 .mini-player {211 position: absolute;212 left: 20px;213 right: 20px;214 bottom: 240px;215 height: 150px;216 background: #14362d;217 border-radius: 28px;218 display: grid;219 grid-template-columns: 140px 1fr 260px;220 align-items: center;221 padding: 0 24px;222 color: #fff;223 }224 .mini-thumb {225 width: 110px; height: 110px; border-radius: 10px;226 background: #E0E0E0; border: 1px solid #BDBDBD;227 display: flex; align-items: center; justify-content: center; color: #555; font-size: 22px;228 }229 .mini-text .title { font-size: 38px; font-weight: 800; }230 .mini-text .subtitle { font-size: 30px; color: #c8d4cf; margin-top: 6px; }231 .mini-actions { display: flex; align-items: center; justify-content: flex-end; gap: 30px; }232 .tabbar {233 position: absolute;234 bottom: 0;235 left: 0;236 width: 1080px;237 height: 220px;238 background: #121212;239 border-top: 1px solid #2a2a2a;240 display: grid;241 grid-template-columns: repeat(4, 1fr);242 align-items: center;243 text-align: center;244 color: #d9d9d9;245 font-size: 30px;246 }247 .tab {248 display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 14px;249 }250 .tab .icon { width: 58px; height: 58px; }251 .active { color: #fff; }252</style>253</head>254<body>255<div id="render-target">256 257 <!-- Status Bar -->258 <div class="status-bar">259 <div>2:28</div>260 <div class="status-icons">261 <!-- simple round indicators -->262 <svg class="icon" viewBox="0 0 40 40"><circle cx="20" cy="20" r="18"/></svg>263 <svg class="icon" viewBox="0 0 40 40"><rect x="6" y="8" width="28" height="24" rx="4"/></svg>264 <svg class="icon" viewBox="0 0 40 40"><path d="M6 30h28l-6-16H12z"/></svg>265 </div>266 </div>267 268 <!-- Back Arrow -->269 <div class="nav-back">270 <svg class="icon" viewBox="0 0 40 40">271 <path d="M24 8 L12 20 L24 32" stroke="#fff" stroke-width="6" fill="none" stroke-linecap="round" stroke-linejoin="round"/>272 </svg>273 </div>274 275 <!-- Playlist collage 2x2 -->276 <div class="collage">277 <div class="img">[IMG: Album Cover]</div>278 <div class="img">[IMG: Album Cover]</div>279 <div class="img">[IMG: Album Cover]</div>280 <div class="img">[IMG: Album Cover]</div>281 </div>282 283 <!-- Title -->284 <div class="title">Jazz Music 3</div>285 286 <!-- Meta row -->287 <div class="meta-row">288 <div class="avatar">C</div>289 <div style="font-weight:700; color:#fff;">Cole</div>290 <svg class="icon" viewBox="0 0 40 40">291 <circle cx="20" cy="20" r="16" stroke="#dcdcdc" stroke-width="3" fill="none"/>292 <path d="M20 4 C26 12,26 28,20 36 C14 28,14 12,20 4Z" stroke="#dcdcdc" stroke-width="3" fill="none"/>293 </svg>294 <div>16min</div>295 </div>296 297 <!-- Controls row -->298 <div class="controls-row">299 <div class="left-controls">300 <div class="pill">Enhance</div>301 <div class="circle-btn">302 <svg class="icon" viewBox="0 0 40 40">303 <path d="M20 6 v20" stroke="#fff" stroke-width="5" stroke-linecap="round"/>304 <rect x="10" y="28" width="20" height="8" rx="2" fill="#fff"/>305 </svg>306 </div>307 <div class="circle-btn">308 <svg class="icon" viewBox="0 0 40 40">309 <circle cx="16" cy="16" r="10" stroke="#fff" stroke-width="4" fill="none"/>310 <path d="M26 26 l10 10" stroke="#fff" stroke-width="4" stroke-linecap="round"/>311 </svg>312 </div>313 <div class="circle-btn">314 <svg class="icon" viewBox="0 0 40 40">315 <circle cx="14" cy="10" r="3" fill="#fff"/>316 <circle cx="14" cy="20" r="3" fill="#fff"/>317 <circle cx="14" cy="30" r="3" fill="#fff"/>318 </svg>319 </div>320 </div>321 <div class="right-controls">322 <div class="shuffle">323 <svg class="icon" viewBox="0 0 40 40">324 <path d="M6 12 h10 l8 10 h10" stroke="#fff" stroke-width="4" fill="none" stroke-linecap="round"/>325 <path d="M6 28 h10 l4-5" stroke="#fff" stroke-width="4" fill="none" stroke-linecap="round"/>326 <path d="M34 10 v8 l-8-8" stroke="#fff" stroke-width="4" fill="none" stroke-linecap="round" stroke-linejoin="round"/>327 <path d="M34 22 v8 l-8-8" stroke="#fff" stroke-width="4" fill="none" stroke-linecap="round" stroke-linejoin="round"/>328 </svg>329 </div>330 <div class="play-btn">331 <svg viewBox="0 0 80 80" width="80" height="80">332 <polygon points="26,18 66,40 26,62" fill="#000"/>333 </svg>334 </div>335 </div>336 </div>337 338 <!-- List -->339 <div class="list">340 341 <!-- Add to this playlist -->342 <div class="add-card">343 <div class="add-square">344 <svg viewBox="0 0 120 120" width="80" height="80">345 <path d="M60 24 v72 M24 60 h72" stroke="#9ad19c" stroke-width="12" stroke-linecap="round"/>346 </svg>347 </div>348 <div style="font-size: 44px; font-weight: 700;">Add to this playlist</div>349 </div>350 351 <!-- Row 1 -->352 <div class="row">353 <div class="thumb">[IMG]</div>354 <div class="track-info">355 <div class="track-title">It's Been a Long, Long Time (with Harry James)</div>356 <div class="artists">Kitty Kallen, Harry James</div>357 </div>358 <div class="kebab">359 <svg class="icon" viewBox="0 0 40 40">360 <circle cx="20" cy="10" r="3" fill="#ddd"/>361 <circle cx="20" cy="20" r="3" fill="#ddd"/>362 <circle cx="20" cy="30" r="3" fill="#ddd"/>363 </svg>364 </div>365 </div>366 367 <!-- Row 2 -->368 <div class="row">369 <div class="thumb">[IMG]</div>370 <div class="track-info">371 <div class="track-title">L-O-V-E</div>372 <div class="artists">Nat King Cole</div>373 </div>374 <div class="kebab">375 <svg class="icon" viewBox="0 0 40 40">376 <circle cx="20" cy="10" r="3" fill="#ddd"/>377 <circle cx="20" cy="20" r="3" fill="#ddd"/>378 <circle cx="20" cy="30" r="3" fill="#ddd"/>379 </svg>380 </div>381 </div>382 383 <!-- Row 3 -->384 <div class="row">385 <div class="thumb">[IMG]</div>386 <div class="track-info">387 <div class="track-title">Ladyfingers</div>388 <div class="artists">Herb Alpert & The Tijuana Brass</div>389 </div>390 <div class="kebab">391 <svg class="icon" viewBox="0 0 40 40">392 <circle cx="20" cy="10" r="3" fill="#ddd"/>393 <circle cx="20" cy="20" r="3" fill="#ddd"/>394 <circle cx="20" cy="30" r="3" fill="#ddd"/>395 </svg>396 </div>397 </div>398 399 <!-- Row 4 -->400 <div class="row">401 <div class="thumb">[IMG]</div>402 <div class="track-info">403 <div class="track-title">Theme From New York, New York</div>404 <div class="artists">Frank Sinatra</div>405 </div>406 <div class="kebab">407 <svg class="icon" viewBox="0 0 40 40">408 <circle cx="20" cy="10" r="3" fill="#ddd"/>409 <circle cx="20" cy="20" r="3" fill="#ddd"/>410 <circle cx="20" cy="30" r="3" fill="#ddd"/>411 </svg>412 </div>413 </div>414 415 <!-- Row 5 -->416 <div class="row">417 <div class="thumb">[IMG]</div>418 <div class="track-info">419 <div class="track-title">Lullaby of Birdland</div>420 <div class="artists">Mel Tormé</div>421 </div>422 <div class="kebab">423 <svg class="icon" viewBox="0 0 40 40">424 <circle cx="20" cy="10" r="3" fill="#ddd"/>425 <circle cx="20" cy="20" r="3" fill="#ddd"/>426 <circle cx="20" cy="30" r="3" fill="#ddd"/>427 </svg>428 </div>429 </div>430 431 </div>432 433 <!-- Mini Player -->434 <div class="mini-player">435 <div class="mini-thumb">[IMG]</div>436 <div class="mini-text">437 <div class="title">Lush Life</div>438 <div class="subtitle">John Coltrane</div>439 </div>440 <div class="mini-actions">441 <svg class="icon" viewBox="0 0 40 40">442 <rect x="6" y="8" width="12" height="24" fill="#fff"/>443 <rect x="22" y="14" width="12" height="18" fill="#fff"/>444 </svg>445 <svg class="icon" viewBox="0 0 40 40">446 <path d="M20 10 c-8 0-12 6-12 12 0 9 12 12 12 12s12-3 12-12c0-6-4-12-12-12z" stroke="#fff" stroke-width="3" fill="none"/>447 <path d="M20 16 l0 0" stroke="#fff" stroke-width="4"/>448 </svg>449 <svg class="icon" viewBox="0 0 40 40">450 <polygon points="14,10 30,20 14,30" fill="#fff"/>451 </svg>452 </div>453 </div>454 455 <!-- Tab Bar -->456 <div class="tabbar">457 <div class="tab active">458 <svg class="icon" viewBox="0 0 40 40">459 <path d="M6 20 L20 8 L34 20 V34 H24 V24 H16 V34 H6 Z" fill="#fff"/>460 </svg>461 <div>Home</div>462 </div>463 <div class="tab">464 <svg class="icon" viewBox="0 0 40 40">465 <circle cx="16" cy="16" r="12" stroke="#d9d9d9" stroke-width="4" fill="none"/>466 <path d="M26 26 l10 10" stroke="#d9d9d9" stroke-width="4" stroke-linecap="round"/>467 </svg>468 <div>Search</div>469 </div>470 <div class="tab active">471 <svg class="icon" viewBox="0 0 40 40">472 <rect x="6" y="8" width="8" height="24" fill="#fff"/>473 <rect x="18" y="16" width="8" height="16" fill="#fff"/>474 <rect x="30" y="12" width="4" height="20" fill="#fff"/>475 </svg>476 <div>Your Library</div>477 </div>478 <div class="tab">479 <svg class="icon" viewBox="0 0 40 40">480 <circle cx="20" cy="20" r="16" stroke="#d9d9d9" stroke-width="3" fill="none"/>481 <text x="20" y="26" text-anchor="middle" font-size="16" fill="#d9d9d9" font-family="Arial">P</text>482 </svg>483 <div>Premium</div>484 </div>485 </div>486 487</div>488</body>489</html>