GD-ML/AndroidCode
13.4k
1<html>2<head>3<meta charset="utf-8">4<title>Your Library UI</title>5<style>6 body { margin: 0; padding: 0; background: transparent; font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; }7 #render-target {8 width: 1080px;9 height: 2400px;10 position: relative;11 overflow: hidden;12 background: #121212;13 color: #fff;14 }15 16 /* Status bar */17 .status-bar {18 position: absolute;19 top: 0;20 left: 0;21 width: 1080px;22 height: 92px;23 background: #0d0d0f;24 display: flex;25 align-items: center;26 padding: 0 32px;27 box-sizing: border-box;28 color: #e5e5e5;29 font-size: 32px;30 }31 .status-left { display: flex; align-items: center; gap: 24px; }32 .status-right { margin-left: auto; display: flex; align-items: center; gap: 28px; }33 .icon-small svg { width: 36px; height: 36px; fill: #e5e5e5; }34 35 /* Header */36 .header {37 position: absolute;38 top: 92px;39 left: 0;40 width: 1080px;41 padding: 40px 40px 24px 40px;42 box-sizing: border-box;43 }44 .header-top {45 display: flex;46 align-items: center;47 }48 .avatar {49 width: 84px;50 height: 84px;51 border-radius: 42px;52 background: #3a3a3a;53 display: flex; align-items: center; justify-content: center;54 color: #cfcfcf; font-weight: 600; font-size: 36px;55 margin-right: 24px;56 }57 .title {58 font-size: 64px;59 font-weight: 800;60 letter-spacing: -0.5px;61 }62 .header-actions { margin-left: auto; display: flex; align-items: center; gap: 36px; }63 .header-actions svg { width: 56px; height: 56px; fill: #fff; }64 65 /* Tabs */66 .tabs {67 margin-top: 32px;68 display: flex;69 gap: 20px;70 }71 .chip {72 padding: 18px 32px;73 border-radius: 36px;74 background: #232323;75 color: #eaeaea;76 font-size: 30px;77 font-weight: 600;78 }79 80 /* Section header */81 .section-header {82 position: absolute;83 top: 300px;84 left: 0;85 width: 1080px;86 padding: 0 40px;87 box-sizing: border-box;88 display: flex;89 align-items: center;90 }91 .section-title {92 font-size: 36px;93 color: #c9c9c9;94 font-weight: 700;95 }96 .sort-icon {97 margin-left: 18px;98 width: 36px; height: 36px;99 }100 .grid-icon {101 margin-left: auto;102 width: 44px; height: 44px;103 }104 .section-header svg { fill: #c9c9c9; }105 106 /* List */107 .list {108 position: absolute;109 top: 360px;110 left: 0;111 width: 1080px;112 height: 1480px;113 overflow: hidden;114 padding: 0 40px;115 box-sizing: border-box;116 }117 .row {118 display: flex;119 align-items: center;120 padding: 22px 0;121 border-bottom: 1px solid rgba(255,255,255,0.04);122 }123 .thumb {124 width: 150px;125 height: 150px;126 background: #E0E0E0;127 border: 1px solid #BDBDBD;128 border-radius: 8px;129 display: flex; align-items: center; justify-content: center;130 color: #757575;131 font-size: 26px;132 text-align: center;133 flex-shrink: 0;134 }135 .meta {136 margin-left: 26px;137 }138 .title-row {139 font-size: 44px;140 font-weight: 800;141 color: #fff;142 line-height: 1.2;143 }144 .title-row.green { color: #1DB954; }145 .sub {146 margin-top: 6px;147 font-size: 30px;148 color: #b9b9b9;149 font-weight: 600;150 }151 152 /* Artist avatar */153 .artist-avatar {154 width: 150px; height: 150px; border-radius: 75px;155 background: #E0E0E0; border: 1px solid #BDBDBD;156 display: flex; align-items: center; justify-content: center;157 color: #757575; font-size: 26px; text-align: center;158 }159 160 /* Now Playing bar */161 .now-playing {162 position: absolute;163 left: 20px;164 right: 20px;165 bottom: 220px;166 height: 160px;167 background: #1f3a34;168 border-radius: 24px;169 overflow: hidden;170 display: flex;171 align-items: center;172 padding: 24px;173 box-sizing: border-box;174 }175 .np-thumb {176 width: 120px; height: 120px; border-radius: 8px;177 background: #E0E0E0; border: 1px solid #BDBDBD;178 display: flex; align-items: center; justify-content: center;179 color: #757575; font-size: 24px;180 }181 .np-meta { margin-left: 24px; }182 .np-title { font-size: 40px; font-weight: 800; color: #fff; }183 .np-artist { font-size: 30px; color: #d5d5d5; margin-top: 6px; }184 .np-controls { margin-left: auto; display: flex; align-items: center; gap: 28px; }185 .np-controls svg { width: 56px; height: 56px; fill: #e8e8e8; }186 .progress {187 position: absolute;188 left: 168px;189 right: 180px;190 bottom: 20px;191 height: 8px;192 background: rgba(255,255,255,0.25);193 border-radius: 4px;194 overflow: hidden;195 }196 .progress > div {197 width: 60%;198 height: 100%;199 background: #cfe8de;200 }201 202 /* Bottom nav */203 .bottom-nav {204 position: absolute;205 left: 0; bottom: 0;206 width: 1080px; height: 220px;207 background: #0f0f10;208 border-top: 1px solid rgba(255,255,255,0.06);209 display: flex; align-items: center; justify-content: space-around;210 }211 .nav-item {212 display: flex; flex-direction: column; align-items: center; gap: 18px;213 color: #c7c7c7; font-size: 28px; font-weight: 700;214 }215 .nav-item.active { color: #fff; }216 .nav-item svg { width: 64px; height: 64px; fill: currentColor; }217</style>218</head>219<body>220<div id="render-target">221 222 <!-- Status bar -->223 <div class="status-bar">224 <div class="status-left">225 <div>2:28</div>226 <div class="icon-small">227 <!-- small dot icon -->228 <svg viewBox="0 0 24 24"><circle cx="12" cy="12" r="4"/></svg>229 </div>230 <div class="icon-small">231 <!-- notification icon -->232 <svg viewBox="0 0 24 24"><path d="M12 2a6 6 0 0 0-6 6v5l-2 3h16l-2-3V8a6 6 0 0 0-6-6z"/><circle cx="12" cy="20" r="2"/></svg>233 </div>234 </div>235 <div class="status-right">236 <div class="icon-small">237 <!-- wifi -->238 <svg viewBox="0 0 24 24"><path d="M12 18l-2 2 2 2 2-2-2-2zm-6-6 2 2c2-2 6-2 8 0l2-2c-3-3-9-3-12 0zm-4-4 2 2c4-4 12-4 16 0l2-2C16-2 8-2 2 8z"/></svg>239 </div>240 <div class="icon-small">241 <!-- battery -->242 <svg viewBox="0 0 28 24"><rect x="2" y="6" width="22" height="12" rx="2" ry="2"/><rect x="24" y="10" width="3" height="4"/></svg>243 </div>244 </div>245 </div>246 247 <!-- Header -->248 <div class="header">249 <div class="header-top">250 <div class="avatar">C</div>251 <div class="title">Your Library</div>252 <div class="header-actions">253 <!-- Search -->254 <svg viewBox="0 0 24 24"><path d="M15.5 14h-.79l-.28-.27A6.5 6.5 0 1 0 16 16.5l.27.28v.79l5 5 1.5-1.5-5-5zm-6 0A4.5 4.5 0 1 1 14 9.5 4.5 4.5 0 0 1 9.5 14z"/></svg>255 <!-- Plus -->256 <svg viewBox="0 0 24 24"><path d="M11 5h2v6h6v2h-6v6h-2v-6H5v-2h6z"/></svg>257 </div>258 </div>259 <div class="tabs">260 <div class="chip">Playlists</div>261 <div class="chip">Artists</div>262 </div>263 </div>264 265 <!-- Section Header -->266 <div class="section-header">267 <div class="section-title">Recents</div>268 <div class="sort-icon">269 <!-- sort icon -->270 <svg viewBox="0 0 24 24"><path d="M3 6h8l-2-2M3 18h8l-2 2M3 12h12"/></svg>271 </div>272 <div class="grid-icon">273 <!-- grid icon -->274 <svg viewBox="0 0 24 24"><path d="M3 3h8v8H3zM13 3h8v8h-8zM3 13h8v8H3zM13 13h8v8h-8z"/></svg>275 </div>276 </div>277 278 <!-- List of items -->279 <div class="list">280 <!-- Jazz Music 3 -->281 <div class="row">282 <div class="thumb">[IMG: Playlist Collage]</div>283 <div class="meta">284 <div class="title-row">Jazz Music 3</div>285 <div class="sub">Playlist • Cole</div>286 </div>287 </div>288 <!-- Jazz Music 2 -->289 <div class="row">290 <div class="thumb">[IMG: Playlist Collage]</div>291 <div class="meta">292 <div class="title-row green">Jazz Music 2</div>293 <div class="sub">Playlist • Cole</div>294 </div>295 </div>296 <!-- Classic Music -->297 <div class="row">298 <div class="thumb">[IMG: Playlist Collage]</div>299 <div class="meta">300 <div class="title-row">Classic Music</div>301 <div class="sub">Playlist • Cole</div>302 </div>303 </div>304 <!-- JAZZ MUSIC -->305 <div class="row">306 <div class="thumb">[IMG: Playlist Collage]</div>307 <div class="meta">308 <div class="title-row">JAZZ MUSIC</div>309 <div class="sub">Playlist • Cole</div>310 </div>311 </div>312 <!-- David Guetta -->313 <div class="row">314 <div class="artist-avatar">[IMG: Artist Photo]</div>315 <div class="meta">316 <div class="title-row">David Guetta</div>317 <div class="sub">Artist</div>318 </div>319 </div>320 <!-- The Chainsmokers -->321 <div class="row">322 <div class="artist-avatar">[IMG: Artist Duo]</div>323 <div class="meta">324 <div class="title-row">The Chainsmokers</div>325 <div class="sub">Artist</div>326 </div>327 </div>328 <!-- Maroon 5 -->329 <div class="row">330 <div class="artist-avatar">[IMG: Band Photo]</div>331 <div class="meta">332 <div class="title-row">Maroon 5</div>333 <div class="sub">Artist</div>334 </div>335 </div>336 <!-- The Weeknd -->337 <div class="row">338 <div class="artist-avatar">[IMG: Artist Photo]</div>339 <div class="meta">340 <div class="title-row">The Weeknd</div>341 <div class="sub">Artist</div>342 </div>343 </div>344 </div>345 346 <!-- Now Playing bar -->347 <div class="now-playing">348 <div class="np-thumb">[IMG: Album Art]</div>349 <div class="np-meta">350 <div class="np-title">Lush Life</div>351 <div class="np-artist">John Coltrane</div>352 </div>353 <div class="np-controls">354 <!-- cast/device icon -->355 <svg viewBox="0 0 24 24"><path d="M3 5h18v12H9v2h12V5H3zm0 6a6 6 0 0 1 6 6H7a4 4 0 0 0-4-4v-2zm0-4a10 10 0 0 1 10 10h-2A8 8 0 0 0 3 9V7z"/></svg>356 <!-- heart -->357 <svg viewBox="0 0 24 24"><path d="M12 21s-6-4.35-9-7.35C-1 10.5 1.5 5.5 6 6.5c2 .43 3.5 2.5 6 2.5s4-2.07 6-2.5c4.5-1 7 4 3 7.15C18 16.65 12 21 12 21z"/></svg>358 <!-- play -->359 <svg viewBox="0 0 24 24"><path d="M8 5v14l11-7z"/></svg>360 </div>361 <div class="progress"><div></div></div>362 </div>363 364 <!-- Bottom Navigation -->365 <div class="bottom-nav">366 <div class="nav-item">367 <svg viewBox="0 0 24 24"><path d="M12 3l9 8v10h-6v-6H9v6H3V11z"/></svg>368 <div>Home</div>369 </div>370 <div class="nav-item">371 <svg viewBox="0 0 24 24"><path d="M15.5 14h-.8l-.3-.27A6.5 6.5 0 1 0 16 16.5l.27.3v.8l5 5 1.5-1.5-5-5zm-6 0A4.5 4.5 0 1 1 14 9.5 4.5 4.5 0 0 1 9.5 14z"/></svg>372 <div>Search</div>373 </div>374 <div class="nav-item active">375 <svg viewBox="0 0 24 24"><path d="M4 5h16v3H4zm0 5h16v3H4zm0 5h12v3H4z"/></svg>376 <div>Your Library</div>377 </div>378 <div class="nav-item">379 <svg viewBox="0 0 24 24"><path d="M12 2l4 8 8 1-6 6 2 9-8-5-8 5 2-9-6-6 8-1z"/></svg>380 <div>Premium</div>381 </div>382 </div>383 384</div>385</body>386</html>