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>My Library UI</title>7<style>8 body { margin: 0; padding: 0; background: transparent; font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; }9 #render-target {10 width: 1080px; height: 2400px;11 position: relative; overflow: hidden;12 background: #2f343a; color: #f2f4f6;13 }14 .status-bar {15 height: 120px; padding: 0 40px;16 display: flex; align-items: center; justify-content: space-between;17 color: #e8ecef; font-weight: 600; letter-spacing: 1px;18 }19 .status-left, .status-right { display: flex; align-items: center; gap: 22px; }20 .header {21 padding: 10px 56px 24px 56px;22 }23 .header h1 {24 margin: 10px 0 30px 0;25 font-size: 72px; font-weight: 700; color: #ffffff;26 }27 .settings-btn {28 position: absolute; right: 42px; top: 220px;29 width: 72px; height: 72px; border-radius: 36px;30 background: rgba(255,255,255,0.06); color: #d7dbe0;31 display: flex; align-items: center; justify-content: center;32 font-size: 42px; line-height: 1;33 }34 .profile {35 display: flex; align-items: center; gap: 26px;36 padding: 0 56px 24px;37 }38 .avatar {39 width: 96px; height: 96px; border-radius: 48px;40 background: #58606a; display: flex; align-items: center; justify-content: center;41 font-weight: 700; color: #dce3ea;42 }43 .profile-name { font-size: 42px; font-weight: 600; color: #e9edf1; }44 .edit-link {45 margin-left: auto; font-size: 40px; color: #6ad5c7; font-weight: 600;46 }47 48 .list {49 margin-top: 14px;50 border-top: 1px solid #3a4047;51 border-bottom: 1px solid #3a4047;52 }53 .list-item {54 display: flex; align-items: center;55 padding: 28px 56px; gap: 28px;56 border-top: 1px solid #3a4047;57 }58 .list-item:first-child { border-top: none; }59 .icon {60 width: 64px; height: 64px; display: flex; align-items: center; justify-content: center;61 }62 .label { font-size: 44px; color: #e7ebef; }63 .right {64 margin-left: auto; display: flex; align-items: center; gap: 22px; color: #c4ccd3;65 }66 .count { font-size: 42px; color: #cbd2d9; }67 .chev svg { stroke: #b6bec6; }68 .pro-pill {69 background: #87e9dc; color: #0b2a29; font-weight: 700;70 padding: 14px 28px; border-radius: 999px; font-size: 36px;71 }72 73 .shuffle-wrap {74 padding: 48px 56px;75 border-top: 1px solid #3a4047;76 }77 .shuffle-btn {78 width: 720px; height: 120px; border-radius: 60px;79 background: #6bd7c9; color: #0b2a29;80 display: flex; align-items: center; justify-content: center; gap: 24px;81 font-size: 48px; font-weight: 800; margin: 28px auto;82 box-shadow: 0 8px 18px rgba(0,0,0,0.25);83 }84 .section-title {85 font-size: 44px; font-weight: 700; color: #e7ebef; padding: 10px 56px; display: flex; align-items: center;86 }87 .section-title .right-action { margin-left: auto; color: #6ad5c7; font-weight: 700; }88 89 .history-item {90 padding: 26px 56px; display: flex; align-items: center; gap: 28px;91 }92 .img-ph {93 width: 140px; height: 140px; background: #E0E0E0; border: 1px solid #BDBDBD;94 display: flex; justify-content: center; align-items: center; color: #757575; font-size: 28px;95 border-radius: 12px;96 }97 .hist-text { flex: 1; }98 .hist-title { font-size: 44px; color: #eef2f5; font-weight: 700; }99 .hist-sub { font-size: 36px; color: #aeb6bd; margin-top: 6px; }100 .hist-more {101 font-size: 60px; color: #b8c0c8; padding: 0 10px;102 }103 104 .more-history {105 padding: 16px 56px; display: flex; align-items: center; border-top: 1px solid #3a4047; margin-top: 10px;106 }107 .more-label { font-size: 42px; color: #e7ebef; }108 .mini-chevron { margin-left: auto; }109 110 .mini-player {111 position: absolute; left: 0; right: 0; bottom: 220px;112 height: 180px; background: #2b3035; border-top: 1px solid #3a4047;113 display: flex; align-items: center; padding: 0 36px; gap: 26px;114 }115 .mini-player .album-ph {116 width: 140px; height: 140px; background: #E0E0E0; border: 1px solid #BDBDBD;117 display: flex; align-items: center; justify-content: center; color: #757575; font-size: 28px; border-radius: 12px;118 }119 .track-area { flex: 1; }120 .track-title { font-size: 40px; color: #eef2f5; font-weight: 700; }121 .track-artist { font-size: 34px; color: #aeb6bd; margin-top: 6px; }122 .play-btn {123 width: 96px; height: 96px; border-radius: 48px; background: rgba(255,255,255,0.08);124 display: flex; align-items: center; justify-content: center;125 }126 .bottom-nav {127 position: absolute; left: 0; right: 0; bottom: 0; height: 220px;128 background: #2f343a; border-top: 1px solid #3a4047;129 display: flex; align-items: center; justify-content: space-around;130 padding: 14px 0 30px;131 }132 .nav-item { display: flex; flex-direction: column; align-items: center; gap: 12px; color: #cbd2d9; }133 .nav-item .label { font-size: 32px; color: #cbd2d9; }134 .nav-item.active .label { color: #e7ebef; }135 .nav-item.active .underline {136 width: 80px; height: 6px; background: #e7ebef; border-radius: 3px; margin-top: -6px;137 }138 .pro-dot {139 position: absolute; top: 18px; right: 18px; width: 18px; height: 18px; background: #ff4d4f; border-radius: 9px;140 }141 .gesture {142 position: absolute; bottom: 10px; left: 50%; transform: translateX(-50%);143 width: 300px; height: 10px; background: #e6e6e6; border-radius: 5px; opacity: 0.7;144 }145 146 /* SVG helpers */147 svg { width: 56px; height: 56px; }148 .stroke { fill: none; stroke: currentColor; stroke-width: 2.5; stroke-linecap: round; stroke-linejoin: round; }149</style>150</head>151<body>152<div id="render-target">153 154 <!-- Status Bar -->155 <div class="status-bar">156 <div class="status-left">157 <div style="font-size:42px;">12:20</div>158 <svg viewBox="0 0 24 24" class="stroke" style="color:#e8ecef;">159 <path d="M4 10l8-6 8 6v8a2 2 0 0 1-2 2H6a2 2 0 0 1-2-2v-8z"/>160 <path d="M9 22v-6h6v6"/>161 </svg>162 <svg viewBox="0 0 24 24" class="stroke" style="color:#e8ecef;">163 <circle cx="12" cy="12" r="3"/>164 <path d="M5 12a7 7 0 0 1 14 0"/>165 <path d="M2 12a10 10 0 0 1 20 0"/>166 </svg>167 </div>168 <div class="status-right">169 <svg viewBox="0 0 24 24" class="stroke" style="color:#e8ecef;">170 <path d="M3 11c4-6 14-6 18 0"/>171 <path d="M6 11c2-3 10-3 12 0"/>172 <circle cx="12" cy="16" r="1.5" />173 </svg>174 <svg viewBox="0 0 24 24" class="stroke" style="color:#e8ecef;">175 <rect x="3" y="6" width="16" height="12" rx="2"/>176 <path d="M21 10v4"/>177 </svg>178 </div>179 </div>180 181 <!-- Header -->182 <div class="header">183 <h1>My Library</h1>184 </div>185 <div class="settings-btn" aria-label="Settings">⚙</div>186 187 <!-- Profile -->188 <div class="profile">189 <div class="avatar">C</div>190 <div class="profile-name">Cerebra Research</div>191 <div class="edit-link">Edit</div>192 </div>193 194 <!-- List -->195 <div class="list">196 <div class="list-item">197 <div class="icon" style="color:#cbd2d9;">198 <svg viewBox="0 0 24 24" class="stroke">199 <path d="M9 4v10a3 3 0 1 1-2-2h2"/>200 <path d="M15 4h5v4h-5z"/>201 </svg>202 </div>203 <div class="label">Songs</div>204 <div class="right">205 <div class="count">1</div>206 <div class="chev">207 <svg viewBox="0 0 24 24" class="stroke"><path d="M9 6l6 6-6 6"/></svg>208 </div>209 </div>210 </div>211 <div class="list-item">212 <div class="icon" style="color:#cbd2d9;">213 <svg viewBox="0 0 24 24" class="stroke">214 <circle cx="12" cy="12" r="7"/>215 <circle cx="12" cy="12" r="2"/>216 </svg>217 </div>218 <div class="label">Albums</div>219 <div class="right">220 <div class="count">1</div>221 <div class="chev"><svg viewBox="0 0 24 24" class="stroke"><path d="M9 6l6 6-6 6"/></svg></div>222 </div>223 </div>224 <div class="list-item">225 <div class="icon" style="color:#cbd2d9;">226 <svg viewBox="0 0 24 24" class="stroke">227 <path d="M12 3v8"/>228 <circle cx="12" cy="14" r="3"/>229 <path d="M8 22h8"/>230 </svg>231 </div>232 <div class="label">Artists</div>233 <div class="right">234 <div class="count">7</div>235 <div class="chev"><svg viewBox="0 0 24 24" class="stroke"><path d="M9 6l6 6-6 6"/></svg></div>236 </div>237 </div>238 <div class="list-item">239 <div class="icon" style="color:#cbd2d9;">240 <svg viewBox="0 0 24 24" class="stroke">241 <circle cx="12" cy="8" r="3"/>242 <path d="M6 21a9 9 0 0 1 12 0"/>243 <path d="M3 21a12 12 0 0 1 18 0"/>244 </svg>245 </div>246 <div class="label">Shows</div>247 <div class="right">248 <div class="count">0</div>249 <div class="chev"><svg viewBox="0 0 24 24" class="stroke"><path d="M9 6l6 6-6 6"/></svg></div>250 </div>251 </div>252 <div class="list-item">253 <div class="icon" style="color:#cbd2d9;">254 <svg viewBox="0 0 24 24" class="stroke">255 <path d="M12 5v10"/>256 <path d="M7 10l5 5 5-5"/>257 <path d="M5 19h14"/>258 </svg>259 </div>260 <div class="label">Downloads</div>261 <div class="right">262 <div class="pro-pill">Go Pro</div>263 <div class="chev"><svg viewBox="0 0 24 24" class="stroke"><path d="M9 6l6 6-6 6"/></svg></div>264 </div>265 </div>266 <div class="list-item">267 <div class="icon" style="color:#cbd2d9;">268 <svg viewBox="0 0 24 24" class="stroke">269 <path d="M4 6h12"/>270 <path d="M4 12h10"/>271 <path d="M4 18h8"/>272 <path d="M16 16l4 2-4 2z"/>273 </svg>274 </div>275 <div class="label">Playlists</div>276 <div class="right">277 <div class="count">1</div>278 <div class="chev"><svg viewBox="0 0 24 24" class="stroke"><path d="M9 6l6 6-6 6"/></svg></div>279 </div>280 </div>281 <div class="list-item">282 <div class="icon" style="color:#cbd2d9;">283 <svg viewBox="0 0 24 24" class="stroke">284 <rect x="3" y="6" width="16" height="12" rx="2"/>285 <path d="M16 12l-6 3V9z"/>286 </svg>287 </div>288 <div class="label">Videos</div>289 <div class="right">290 <div class="count">0</div>291 <div class="chev"><svg viewBox="0 0 24 24" class="stroke"><path d="M9 6l6 6-6 6"/></svg></div>292 </div>293 </div>294 </div>295 296 <!-- Shuffle -->297 <div class="shuffle-wrap">298 <div class="shuffle-btn">299 <svg viewBox="0 0 24 24" class="stroke" style="color:#0b2a29;">300 <path d="M3 4h4l10 12h4"/>301 <path d="M17 4l4 4-4 4"/>302 <path d="M3 20h4l6-7"/>303 </svg>304 <div>Shuffle All</div>305 </div>306 </div>307 308 <!-- History -->309 <div class="section-title">310 <div>History</div>311 <div class="right-action">Clear</div>312 </div>313 <div class="history-item">314 <div class="img-ph">[IMG: Weekly Jukebox]</div>315 <div class="hist-text">316 <div class="hist-title">Chill - Weekly Jukebox</div>317 <div class="hist-sub">JioSaavn • 3 Hours Ago</div>318 </div>319 <div class="hist-more" aria-label="More">⋮</div>320 </div>321 322 <div class="more-history">323 <div class="more-label">More History</div>324 <div class="mini-chevron">325 <svg viewBox="0 0 24 24" class="stroke" style="color:#b6bec6;"><path d="M9 6l6 6-6 6"/></svg>326 </div>327 </div>328 329 <!-- Mini Player -->330 <div class="mini-player">331 <div class="album-ph">[IMG: Album Cover]</div>332 <div class="track-area">333 <div class="track-title">L-O-V-E (2003 Digital Remaster)</div>334 <div class="track-artist">Nat King Cole — L-O-V-E</div>335 </div>336 <div class="play-btn">337 <svg viewBox="0 0 24 24" class="stroke" style="color:#e7ebef;">338 <path d="M8 5l12 7-12 7z"/>339 </svg>340 </div>341 </div>342 343 <!-- Bottom Navigation -->344 <div class="bottom-nav">345 <div class="nav-item">346 <svg viewBox="0 0 24 24" class="stroke" style="color:#cbd2d9;">347 <path d="M3 11l9-7 9 7v9a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2z"/>348 <path d="M9 22v-6h6v6"/>349 </svg>350 <div class="label">Home</div>351 </div>352 <div class="nav-item">353 <svg viewBox="0 0 24 24" class="stroke" style="color:#cbd2d9;">354 <circle cx="11" cy="11" r="7"/>355 <path d="M21 21l-4.3-4.3"/>356 </svg>357 <div class="label">Search</div>358 </div>359 <div class="nav-item">360 <svg viewBox="0 0 24 24" class="stroke" style="color:#cbd2d9;">361 <path d="M12 2l3 6 6 1-4 4 1 6-6-3-6 3 1-6-4-4 6-1z"/>362 </svg>363 <div class="label">For You</div>364 </div>365 <div class="nav-item active" style="position:relative;">366 <div class="avatar" style="width:72px;height:72px;font-size:32px;background:#5c6670;color:#eaf0f6;">C</div>367 <div class="label">My Library</div>368 <div class="underline"></div>369 </div>370 <div class="nav-item" style="position:relative;">371 <svg viewBox="0 0 24 24" class="stroke" style="color:#cbd2d9;">372 <path d="M12 22c4-3 6-6 6-9a6 6 0 0 0-12 0c0 3 2 6 6 9z"/>373 </svg>374 <div class="label">Pro</div>375 <span class="pro-dot"></span>376 </div>377 </div>378 379 <!-- Gesture bar -->380 <div class="gesture"></div>381 382</div>383</body>384</html>