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>Music App UI Mock</title>7<style>8 body { margin: 0; padding: 0; background: transparent; }9 #render-target {10 width: 1080px;11 height: 2400px;12 position: relative;13 overflow: hidden;14 background: #0e0e0e;15 color: #fff;16 font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Arial, sans-serif;17 }18 19 /* Scrollable content area (leaves space for bottom nav) */20 .content {21 position: absolute;22 top: 0;23 left: 0;24 right: 0;25 bottom: 190px; /* space for bottom nav */26 overflow-y: auto;27 -webkit-overflow-scrolling: touch;28 }29 30 /* Status bar */31 .status-bar {32 height: 90px;33 background: #000;34 display: flex;35 align-items: center;36 justify-content: space-between;37 padding: 0 36px;38 font-weight: 600;39 letter-spacing: 0.5px;40 }41 .status-right {42 display: flex;43 gap: 20px;44 align-items: center;45 opacity: 0.9;46 }47 .sb-icon {48 width: 28px; height: 28px; fill: #fff; opacity: 0.9;49 }50 51 /* Section headers */52 .section {53 padding: 8px 36px 0 36px;54 }55 .title-large {56 font-size: 64px;57 font-weight: 800;58 color: #eaeaea;59 margin: 18px 0 8px 0;60 }61 .title-row {62 display: flex;63 align-items: center;64 justify-content: space-between;65 margin: 28px 0 12px;66 }67 .title-row .label {68 font-size: 48px;69 font-weight: 800;70 color: #f5f5f5;71 }72 .see-all {73 font-size: 34px;74 color: #cfcfcf;75 }76 77 /* Song list */78 .song-list {79 margin-top: 8px;80 }81 .song-item {82 display: flex;83 align-items: center;84 padding: 18px 0;85 border-bottom: 1px solid rgba(255,255,255,0.06);86 }87 .thumb {88 width: 160px;89 height: 160px;90 background: #E0E0E0;91 border: 1px solid #BDBDBD;92 color: #757575;93 display: flex;94 justify-content: center;95 align-items: center;96 font-size: 28px;97 border-radius: 10px;98 flex: 0 0 160px;99 overflow: hidden;100 }101 .song-meta {102 margin-left: 28px;103 flex: 1;104 }105 .song-title {106 font-size: 40px;107 line-height: 1.2;108 color: #f2f2f2;109 margin-bottom: 10px;110 }111 .song-sub {112 font-size: 28px;113 color: #a8a8a8;114 }115 .kebab {116 width: 60px;117 text-align: center;118 font-size: 56px;119 color: #9e9e9e;120 }121 122 /* Horizontal cards (Recommended) */123 .card-row {124 display: grid;125 grid-template-columns: repeat(3, 1fr);126 gap: 28px;127 }128 .rec-card {129 background: transparent;130 }131 .rec-img {132 width: 100%;133 height: 330px;134 background: #E0E0E0;135 border: 1px solid #BDBDBD;136 border-radius: 18px;137 display: flex;138 align-items: center;139 justify-content: center;140 color: #757575;141 font-size: 30px;142 }143 .card-title {144 font-size: 36px;145 color: #f3f3f3;146 margin-top: 16px;147 line-height: 1.25;148 }149 .card-sub {150 font-size: 28px;151 color: #a9a9a9;152 margin-top: 6px;153 }154 155 /* Playlist section (horizontal tile) */156 .playlist-tile {157 margin-top: 12px;158 display: flex;159 gap: 24px;160 align-items: center;161 }162 .pl-img {163 width: 320px;164 height: 200px;165 background: #E0E0E0;166 border: 1px solid #BDBDBD;167 color: #757575;168 display: flex;169 align-items: center;170 justify-content: center;171 border-radius: 12px;172 }173 .pl-text .pl-title {174 font-size: 40px;175 color: #f1f1f1;176 margin-bottom: 8px;177 }178 .pl-text .pl-sub {179 font-size: 28px;180 color: #a8a8a8;181 }182 183 /* Ad banner */184 .ad-banner {185 margin: 26px 36px;186 background: #1d1d1d;187 border-radius: 14px;188 border: 1px solid rgba(255,255,255,0.06);189 padding: 20px;190 display: flex;191 align-items: center;192 gap: 20px;193 }194 .ad-img {195 width: 120px; height: 120px;196 background: #E0E0E0;197 border: 1px solid #BDBDBD;198 color: #757575;199 display: flex; align-items: center; justify-content: center;200 border-radius: 16px;201 flex-shrink: 0;202 }203 .ad-copy {204 flex: 1;205 }206 .ad-title {207 font-size: 34px; color: #ffffff; margin-bottom: 6px;208 }209 .ad-sub {210 font-size: 26px; color: #bdbdbd;211 }212 .ad-btn {213 background: #2ecc71;214 color: #0f0f0f;215 border: none;216 padding: 18px 30px;217 border-radius: 40px;218 font-weight: 700;219 font-size: 28px;220 }221 222 /* Bottom navigation */223 .bottom-nav {224 position: absolute;225 left: 0; right: 0; bottom: 0;226 height: 190px;227 background: #111;228 border-top: 1px solid rgba(255,255,255,0.08);229 }230 .nav-items {231 height: 140px;232 display: grid;233 grid-template-columns: 1fr 1fr 1fr 1fr 1fr;234 align-items: center;235 padding: 0 24px;236 }237 .nav-item {238 display: flex;239 flex-direction: column;240 align-items: center;241 gap: 10px;242 color: #cfcfcf;243 font-size: 26px;244 }245 .nav-item.active { color: #ffffff; }246 .nav-icon {247 width: 46px; height: 46px; fill: currentColor;248 }249 .nav-center {250 position: relative;251 display: flex; justify-content: center; align-items: center;252 }253 .play-fab {254 width: 120px; height: 120px;255 background: radial-gradient(circle at 30% 30%, #ff9a75, #f35c87);256 border-radius: 50%;257 box-shadow: 0 10px 24px rgba(0,0,0,0.35);258 display: flex; align-items: center; justify-content: center;259 }260 .play-icon {261 width: 48px; height: 48px; fill: #fff; margin-left: 6px;262 }263 .home-indicator {264 height: 8px;265 width: 300px;266 background: #e3e3e3;267 border-radius: 6px;268 margin: 8px auto 12px;269 opacity: 0.7;270 }271 272 /* Utility */273 .muted { color: #a8a8a8; }274</style>275</head>276<body>277<div id="render-target">278 <div class="content">279 <!-- Status Bar -->280 <div class="status-bar">281 <div>10:14</div>282 <div class="status-right">283 <svg class="sb-icon" viewBox="0 0 24 24"><path d="M2 18h20v2H2zM4 14h16v2H4zM6 10h12v2H6zM8 6h8v2H8z"/></svg>284 <svg class="sb-icon" viewBox="0 0 24 24"><path d="M2 22h20V2z"/></svg>285 <svg class="sb-icon" viewBox="0 0 24 24"><path d="M7 22h10a3 3 0 003-3V5a3 3 0 00-3-3H7a3 3 0 00-3 3v14a3 3 0 003 3zm0-4h10V6H7v12z"/></svg>286 </div>287 </div>288 289 <!-- Popular Songs header -->290 <div class="section">291 <div class="title-large">Popular Songs</div>292 293 <!-- Song list -->294 <div class="song-list">295 <div class="song-item">296 <div class="thumb">[IMG: Album Art]</div>297 <div class="song-meta">298 <div class="song-title">We Are The World Live</div>299 <div class="song-sub">36.9K plays</div>300 </div>301 <div class="kebab">⋮</div>302 </div>303 304 <div class="song-item">305 <div class="thumb">[IMG: Album Art]</div>306 <div class="song-meta">307 <div class="song-title">It's A Man's World Live</div>308 <div class="song-sub">2.3K plays</div>309 </div>310 <div class="kebab">⋮</div>311 </div>312 313 <div class="song-item">314 <div class="thumb">[IMG: Album Art]</div>315 <div class="song-meta">316 <div class="song-title">Ave Maria — Jacknife Lee Mix</div>317 <div class="song-sub">42 plays</div>318 </div>319 <div class="kebab">⋮</div>320 </div>321 322 <div class="song-item">323 <div class="thumb">[IMG: Album Art]</div>324 <div class="song-meta">325 <div class="song-title">My Way</div>326 <div class="song-sub">894 plays</div>327 </div>328 <div class="kebab">⋮</div>329 </div>330 331 <div class="song-item">332 <div class="thumb">[IMG: Album Art]</div>333 <div class="song-meta">334 <div class="song-title">Ave Maria, D. 839 — Live</div>335 <div class="song-sub">28 plays</div>336 </div>337 <div class="kebab">⋮</div>338 </div>339 </div>340 </div>341 342 <!-- Recommended for you -->343 <div class="section">344 <div class="title-row">345 <div class="label">Recommended for you</div>346 <div class="see-all">See all</div>347 </div>348 <div class="card-row">349 <div class="rec-card">350 <div class="rec-img">[IMG: Album Cover]</div>351 <div class="card-title">We Are The World Live</div>352 <div class="card-sub">Pavarotti & Friends</div>353 </div>354 <div class="rec-card">355 <div class="rec-img">[IMG: Opera Album Cover]</div>356 <div class="card-title">L'amico Fritz, Act 1</div>357 <div class="card-sub">Mascagni: L'Amico Fritz</div>358 </div>359 <div class="rec-card">360 <div class="rec-img">[IMG: Classical Album Cover]</div>361 <div class="card-title">L'amico Fritz, Act 2</div>362 <div class="card-sub">Mascagni: L'Amico Fritz</div>363 </div>364 </div>365 </div>366 367 <!-- Playlists section -->368 <div class="section">369 <div class="title-row">370 <div class="label">Playlists ft. Luciano Pav...</div>371 <div class="see-all">See all</div>372 </div>373 <div class="playlist-tile">374 <div class="pl-img">[IMG: Playlist Banner]</div>375 <div class="pl-text">376 <div class="pl-title">Best of Collaborations</div>377 <div class="pl-sub">Handpicked playlists featuring classics</div>378 </div>379 </div>380 </div>381 382 <!-- Ad banner -->383 <div class="ad-banner">384 <div class="ad-img">[IMG: App Icon]</div>385 <div class="ad-copy">386 <div class="ad-title">CallApp Caller ID & Block</div>387 <div class="ad-sub">Not knowing who called you is so yesterday.</div>388 </div>389 <button class="ad-btn">INSTALL</button>390 </div>391 </div>392 393 <!-- Bottom Navigation -->394 <div class="bottom-nav">395 <div class="nav-items">396 <div class="nav-item active">397 <svg class="nav-icon" viewBox="0 0 24 24"><path d="M12 3l9 8h-3v9h-5v-6H11v6H6v-9H3z"/></svg>398 <div>Home</div>399 </div>400 <div class="nav-item">401 <svg class="nav-icon" viewBox="0 0 24 24"><path d="M12 3v10.55A4 4 0 1014 17V7h4V3z"/></svg>402 <div>My Music</div>403 </div>404 <div class="nav-item nav-center">405 <div class="play-fab">406 <svg class="play-icon" viewBox="0 0 24 24"><path d="M8 5v14l11-7z"/></svg>407 </div>408 </div>409 <div class="nav-item">410 <svg class="nav-icon" viewBox="0 0 24 24"><path d="M12 3a9 9 0 00-9 9h2a7 7 0 1114 0h2a9 9 0 00-9-9zm-1 12h2v2h-2zm0-8h2v6h-2z"/></svg>411 <div>Hellotunes</div>412 </div>413 <div class="nav-item">414 <svg class="nav-icon" viewBox="0 0 24 24"><path d="M19.14 12.94a7.5 7.5 0 000-1.88l2.03-1.58-2-3.46-2.39.96a7.48 7.48 0 00-1.63-.95L14.5 2h-5l-.65 3.03c-.58.23-1.12.54-1.63.95l-2.39-.96-2 3.46 2.03 1.58a7.5 7.5 0 000 1.88L.83 14.52l2 3.46 2.39-.96c.5.41 1.05.75 1.63.98L9.5 22h5l.65-3.03c.58-.23 1.12-.57 1.63-.98l2.39.96 2-3.46-2.03-1.58zM12 16a4 4 0 110-8 4 4 0 010 8z"/></svg>415 <div>Settings</div>416 </div>417 </div>418 <div class="home-indicator"></div>419 </div>420</div>421</body>422</html>