GD-ML/AndroidCode
13.4k
1<html lang="en">2<head>3<meta charset="UTF-8">4<title>Spotify Mobile UI - HTML Render</title>5<style>6 body {7 margin: 0;8 padding: 0;9 background: transparent;10 font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Arial, sans-serif;11 }12 #render-target {13 width: 1080px;14 height: 2400px;15 position: relative;16 overflow: hidden;17 background: #121212;18 color: #FFFFFF;19 }20 21 .status-bar {22 height: 110px;23 padding: 0 32px;24 display: flex;25 align-items: center;26 justify-content: space-between;27 color: #DADADA;28 font-size: 42px;29 }30 .status-left {31 display: flex;32 align-items: center;33 gap: 28px;34 }35 .status-right {36 display: flex;37 align-items: center;38 gap: 22px;39 }40 .icon {41 width: 48px;42 height: 48px;43 }44 .top-area {45 padding: 20px 36px 0 36px;46 }47 .greeting {48 font-size: 86px;49 font-weight: 700;50 margin: 16px 0 20px 0;51 }52 .actions {53 position: absolute;54 right: 36px;55 top: 180px;56 display: flex;57 gap: 36px;58 }59 .action-btn {60 width: 74px;61 height: 74px;62 border-radius: 50%;63 border: 2px solid #2A2A2A;64 display: flex;65 align-items: center;66 justify-content: center;67 background: #181818;68 }69 70 .section-title {71 font-size: 64px;72 font-weight: 700;73 margin: 40px 36px 26px 36px;74 }75 76 /* Recently played mosaic */77 .mosaic-row {78 display: flex;79 gap: 28px;80 padding: 0 36px;81 }82 .mosaic-card {83 width: 324px;84 }85 .mosaic-grid {86 width: 324px;87 height: 324px;88 display: grid;89 grid-template-columns: repeat(2, 1fr);90 grid-template-rows: repeat(2, 1fr);91 gap: 6px;92 border-radius: 10px;93 overflow: hidden;94 }95 .img-placeholder {96 background: #E0E0E0;97 border: 1px solid #BDBDBD;98 color: #757575;99 display: flex;100 align-items: center;101 justify-content: center;102 font-size: 28px;103 text-align: center;104 }105 .mosaic-label {106 margin-top: 22px;107 font-size: 44px;108 font-weight: 700;109 }110 111 /* Daily mixes */112 .cards-row {113 display: flex;114 gap: 28px;115 padding: 0 36px;116 }117 .mix-card {118 width: 324px;119 }120 .large-img {121 width: 324px;122 height: 420px;123 border-radius: 22px;124 overflow: hidden;125 }126 .subtitle {127 margin-top: 18px;128 font-size: 32px;129 color: #B5B5B5;130 line-height: 1.4;131 }132 133 /* Category banners */134 .category-row {135 display: flex;136 gap: 28px;137 padding: 0 36px;138 }139 .category-card {140 width: 508px;141 }142 .category-img {143 width: 508px;144 height: 300px;145 border-radius: 22px;146 overflow: hidden;147 position: relative;148 }149 .category-band {150 position: absolute;151 top: 0;152 left: 0;153 width: 508px;154 height: 90px;155 background: #EBA4B8;156 display: flex;157 align-items: center;158 padding-left: 20px;159 color: #111;160 font-weight: 700;161 font-size: 44px;162 border-bottom: 1px solid #BDBDBD;163 }164 165 /* Now playing bar */166 .now-playing {167 position: absolute;168 left: 20px;169 right: 20px;170 bottom: 260px; /* sits above bottom navigation */171 height: 160px;172 background: #184C40;173 border-radius: 24px;174 display: flex;175 align-items: center;176 padding: 18px 22px;177 gap: 22px;178 box-shadow: 0 6px 20px rgba(0,0,0,0.4);179 }180 .album-thumb {181 width: 110px;182 height: 110px;183 border-radius: 10px;184 overflow: hidden;185 }186 .track-info {187 flex: 1;188 }189 .track-title {190 font-size: 44px;191 font-weight: 700;192 }193 .track-artist {194 font-size: 34px;195 color: #CFE6DE;196 }197 .np-actions {198 display: flex;199 align-items: center;200 gap: 32px;201 }202 .np-icon {203 width: 64px;204 height: 64px;205 fill: none;206 stroke: #E7F5EF;207 stroke-width: 3;208 }209 .play-btn {210 width: 88px;211 height: 88px;212 border-radius: 50%;213 background: #1ED760;214 display: flex;215 align-items: center;216 justify-content: center;217 }218 219 /* Bottom navigation */220 .bottom-nav {221 position: absolute;222 left: 0;223 right: 0;224 bottom: 0;225 height: 220px;226 background: #181818;227 border-top: 1px solid #2A2A2A;228 display: flex;229 justify-content: space-around;230 align-items: center;231 }232 .nav-item {233 width: 180px;234 display: flex;235 flex-direction: column;236 align-items: center;237 gap: 16px;238 color: #DADADA;239 font-size: 34px;240 }241 .nav-icon {242 width: 90px;243 height: 90px;244 }245 246 /* Helper positioning of sections to mimic screenshot rhythm */247 .spacer-16 {height: 16px;}248 .spacer-24 {height: 24px;}249</style>250</head>251<body>252<div id="render-target">253 254 <!-- Android-like status bar -->255 <div class="status-bar">256 <div class="status-left">257 <div>2:27</div>258 <svg class="icon" viewBox="0 0 24 24" stroke="#DADADA" fill="none" stroke-width="2">259 <circle cx="12" cy="12" r="4"></circle>260 </svg>261 <svg class="icon" viewBox="0 0 24 24" stroke="#DADADA" fill="none" stroke-width="2">262 <rect x="3" y="3" width="18" height="14" rx="2"></rect>263 </svg>264 <svg class="icon" viewBox="0 0 24 24" stroke="#DADADA" fill="none" stroke-width="2">265 <circle cx="12" cy="12" r="10"></circle>266 <text x="9" y="16" font-size="10" fill="#DADADA">99</text>267 </svg>268 <svg class="icon" viewBox="0 0 24 24" stroke="#DADADA" fill="none" stroke-width="2">269 <circle cx="12" cy="12" r="2"></circle>270 </svg>271 </div>272 <div class="status-right">273 <svg class="icon" viewBox="0 0 24 24" stroke="#DADADA" fill="none" stroke-width="2">274 <path d="M18 6l-5-4-5 4v10l5 4 5-4V6z"></path>275 </svg>276 <svg class="icon" viewBox="0 0 24 24" stroke="#DADADA" fill="none" stroke-width="2">277 <path d="M20 6h-2V4h2v2zm0 14h-2v-2h2v2zM6 6H4V4h2v2zm0 14H4v-2h2v2z"></path>278 </svg>279 </div>280 </div>281 282 <!-- Greeting -->283 <div class="top-area">284 <div class="greeting">Good afternoon</div>285 </div>286 287 <!-- quick actions on right -->288 <div class="actions">289 <div class="action-btn">290 <svg class="icon" viewBox="0 0 24 24" stroke="#FFFFFF" fill="none" stroke-width="2">291 <path d="M12 4a4 4 0 0 0-4 4v3l-2 2v1h12v-1l-2-2V8a4 4 0 0 0-4-4z"></path>292 <path d="M10 19a2 2 0 0 0 4 0"></path>293 </svg>294 </div>295 <div class="action-btn">296 <svg class="icon" viewBox="0 0 24 24" stroke="#FFFFFF" fill="none" stroke-width="2">297 <circle cx="12" cy="12" r="9"></circle>298 <path d="M12 7v6l4 2"></path>299 </svg>300 </div>301 <div class="action-btn">302 <svg class="icon" viewBox="0 0 24 24" stroke="#FFFFFF" fill="none" stroke-width="2">303 <circle cx="12" cy="12" r="3"></circle>304 <path d="M4 12a8 8 0 0 1 2-5l2 2M20 12a8 8 0 0 1-2 5l-2-2M12 4a8 8 0 0 1 5 2l-2 2M12 20a8 8 0 0 1-5-2l2-2"></path>305 </svg>306 </div>307 </div>308 309 <!-- Recently played -->310 <div class="section-title">Recently played</div>311 <div class="mosaic-row">312 <div class="mosaic-card">313 <div class="mosaic-grid">314 <div class="img-placeholder">[IMG: Jazz Cover]</div>315 <div class="img-placeholder">[IMG: Album Cover]</div>316 <div class="img-placeholder">[IMG: Louis Armstrong]</div>317 <div class="img-placeholder">[IMG: Frank Sinatra]</div>318 </div>319 <div class="mosaic-label">Jazz Music 2</div>320 </div>321 <div class="mosaic-card">322 <div class="mosaic-grid">323 <div class="img-placeholder">[IMG: Classical Artwork]</div>324 <div class="img-placeholder">[IMG: City Skyline]</div>325 <div class="img-placeholder">[IMG: OST Live Stage]</div>326 <div class="img-placeholder">[IMG: Sleepy Dog]</div>327 </div>328 <div class="mosaic-label">Classic Music</div>329 </div>330 <div class="mosaic-card">331 <div class="mosaic-grid">332 <div class="img-placeholder">[IMG: Jazz Sunset]</div>333 <div class="img-placeholder">[IMG: Best of Jazz]</div>334 <div class="img-placeholder">[IMG: Brubeck Time Out]</div>335 <div class="img-placeholder">[IMG: Combo Jazz Art]</div>336 </div>337 <div class="mosaic-label">JAZZ MUSIC</div>338 </div>339 </div>340 341 <!-- To get you started -->342 <div class="section-title">To get you started</div>343 <div class="cards-row">344 <div class="mix-card">345 <div class="large-img img-placeholder">[IMG: Daily Mix 1 Artwork]</div>346 <div class="subtitle">Maroon 5, Dua Lipa, One Direction and more</div>347 </div>348 <div class="mix-card">349 <div class="large-img img-placeholder">[IMG: Daily Mix 2 Artwork]</div>350 <div class="subtitle">Taylor Swift, Sophie Holohan, Hailee Steinfeld and more</div>351 </div>352 <div class="mix-card">353 <div class="large-img img-placeholder">[IMG: Daily Mix 3 Artwork]</div>354 <div class="subtitle">David Guetta, Latin Essentials, and more</div>355 </div>356 </div>357 358 <!-- Try something else -->359 <div class="section-title">Try something else</div>360 <div class="category-row">361 <div class="category-card">362 <div class="category-img">363 <div class="category-band">Hindi</div>364 <div class="img-placeholder" style="width:100%; height:100%;">[IMG: Hindi Playlist Banner]</div>365 </div>366 </div>367 <div class="category-card">368 <div class="category-img">369 <div class="category-band">India</div>370 <div class="img-placeholder" style="width:100%; height:100%;">[IMG: India Playlist Banner]</div>371 </div>372 </div>373 </div>374 375 <!-- Now Playing Bar -->376 <div class="now-playing">377 <div class="album-thumb img-placeholder">[IMG: Album Art]</div>378 <div class="track-info">379 <div class="track-title">Lush Life</div>380 <div class="track-artist">John Coltrane</div>381 </div>382 <div class="np-actions">383 <svg class="np-icon" viewBox="0 0 24 24">384 <rect x="3" y="7" width="8" height="10" rx="1"></rect>385 <circle cx="17" cy="12" r="4"></circle>386 </svg>387 <svg class="np-icon" viewBox="0 0 24 24">388 <path d="M12 21s-7-4.35-7-10a4 4 0 0 1 7-2 4 4 0 0 1 7 2c0 5.65-7 10-7 10z"></path>389 </svg>390 <div class="play-btn">391 <svg viewBox="0 0 24 24" width="56" height="56">392 <polygon points="8,5 20,12 8,19" fill="#000"></polygon>393 </svg>394 </div>395 </div>396 </div>397 398 <!-- Bottom Navigation -->399 <div class="bottom-nav">400 <div class="nav-item">401 <svg class="nav-icon" viewBox="0 0 24 24" stroke="#FFFFFF" fill="none" stroke-width="2">402 <path d="M3 11l9-7 9 7v9a1 1 0 0 1-1 1h-5v-6H9v6H4a1 1 0 0 1-1-1v-9z"></path>403 </svg>404 <div>Home</div>405 </div>406 <div class="nav-item">407 <svg class="nav-icon" viewBox="0 0 24 24" stroke="#FFFFFF" fill="none" stroke-width="2">408 <circle cx="11" cy="11" r="7"></circle>409 <path d="M20 20l-4-4"></path>410 </svg>411 <div>Search</div>412 </div>413 <div class="nav-item">414 <svg class="nav-icon" viewBox="0 0 24 24" stroke="#FFFFFF" fill="none" stroke-width="2">415 <rect x="4" y="4" width="16" height="4" rx="1"></rect>416 <rect x="4" y="10" width="16" height="4" rx="1"></rect>417 <rect x="4" y="16" width="16" height="4" rx="1"></rect>418 </svg>419 <div>Your Library</div>420 </div>421 <div class="nav-item">422 <svg class="nav-icon" viewBox="0 0 24 24" stroke="#FFFFFF" fill="none" stroke-width="2">423 <circle cx="12" cy="12" r="9"></circle>424 <path d="M6 10c4-2 8-2 12 0M6 14c4-2 8-2 12 0" stroke-linecap="round"></path>425 </svg>426 <div>Premium</div>427 </div>428 </div>429 430</div>431</body>432</html>