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 Player UI Mock</title>7<style>8 :root{9 --bg:#0b0b0b;10 --text:#ffffff;11 --muted:#b3b3b3;12 --soft:#8a8a8a;13 --accent:#f5a623;14 --card:#1b1b1b;15 }16 body{ margin:0; padding:0; background:transparent; font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen, Ubuntu, Cantarell, "Helvetica Neue", Arial, system-ui; }17 #render-target{18 position:relative;19 overflow:hidden;20 width:1080px;21 height:2400px;22 background: radial-gradient(1400px 900px at 540px 400px, #1a1a1a 0%, #0d0d0d 60%, #000 100%);23 }24 25 /* Status bar */26 .status-bar{27 position:absolute;28 top:0;29 left:0;30 right:0;31 height:120px;32 color:#fff;33 padding:0 36px;34 display:flex;35 align-items:center;36 justify-content:space-between;37 background:linear-gradient(180deg, rgba(0,0,0,0.8), rgba(0,0,0,0.0));38 }39 .sb-left{40 display:flex;41 align-items:center;42 gap:22px;43 font-weight:600;44 letter-spacing:0.3px;45 }46 .sb-left .tag{ font-size:30px; color:#d0d0d0; }47 .sb-left .dot{ width:8px; height:8px; background:#d0d0d0; border-radius:50%; display:inline-block; margin:0 6px; }48 .sb-right{49 display:flex;50 align-items:center;51 gap:26px;52 }53 .sb-icon svg{ width:40px; height:40px; fill:#fff; opacity:0.9; }54 55 /* Top chevron */56 .top-chevron{57 position:absolute;58 top:170px;59 left:66px;60 opacity:0.7;61 }62 .top-chevron svg{ width:56px; height:56px; fill:none; stroke:#cfcfcf; stroke-width:6; }63 64 /* Album art */65 .album-wrap{66 position:absolute;67 top:360px;68 left:50%;69 transform:translateX(-50%);70 width:760px;71 height:760px;72 border-radius:16px;73 overflow:hidden;74 box-shadow:0 20px 40px rgba(0,0,0,0.55);75 }76 .album-art{77 width:100%;78 height:100%;79 background:#E0E0E0;80 border:1px solid #BDBDBD;81 display:flex;82 align-items:center;83 justify-content:center;84 color:#757575;85 font-size:38px;86 text-align:center;87 }88 89 /* Song info */90 .song-info{91 position:absolute;92 top:1160px;93 width:100%;94 text-align:center;95 color:var(--text);96 }97 .song-info .artist{98 font-size:40px;99 color:#cfcfcf;100 margin-bottom:12px;101 font-weight:500;102 opacity:0.9;103 }104 .song-info .title{105 font-size:64px;106 font-weight:800;107 color:#f5f5f5;108 letter-spacing:0.2px;109 }110 .song-info .feat{111 margin-top:14px;112 font-size:44px;113 color:#c9c9c9;114 }115 .song-info .feat .accent{ color:var(--accent); font-weight:700; }116 117 /* Actions row */118 .actions{119 position:absolute;120 top:1320px;121 left:0;122 right:0;123 display:flex;124 justify-content:center;125 gap:140px;126 color:#dcdcdc;127 }128 .action{129 display:flex;130 flex-direction:column;131 align-items:center;132 gap:16px;133 font-size:34px;134 }135 .action svg{ width:64px; height:64px; fill:#e7e7e7; opacity:0.85; }136 .action .label{ color:#cfcfcf; font-size:34px; }137 138 /* Floating Download button */139 .download-fab{140 position:absolute;141 top:1385px;142 left:50%;143 transform:translateX(-50%);144 width:150px;145 height:150px;146 border-radius:50%;147 background:var(--accent);148 display:flex;149 align-items:center;150 justify-content:center;151 box-shadow:0 0 0 18px rgba(245,166,35,0.18), 0 14px 34px rgba(0,0,0,0.45);152 z-index:5;153 }154 .download-fab svg{ width:72px; height:72px; fill:#fff; }155 156 /* Waveform + time */157 .waveform{158 position:absolute;159 top:1500px;160 left:60px;161 right:60px;162 height:160px;163 }164 .bars{165 position:absolute;166 inset:0;167 background:168 linear-gradient(90deg,169 rgba(255,196,82,0.85) 0 34%,170 rgba(220,220,220,0.95) 34% 100%);171 -webkit-mask:172 repeating-linear-gradient(90deg, #000 0 18px, transparent 18px 28px),173 linear-gradient(#000,#000);174 mask:175 repeating-linear-gradient(90deg, #000 0 18px, transparent 18px 28px),176 linear-gradient(#000,#000);177 border-radius:6px;178 opacity:0.35;179 }180 .time-left, .time-right{181 position:absolute;182 bottom:-6px;183 font-size:32px;184 color:#cfcfcf;185 }186 .time-left{ left:0; }187 .time-right{ right:0; }188 189 /* Tooltip */190 .tooltip{191 position:absolute;192 top:1600px;193 left:140px;194 width:620px;195 background:#1f1f1f;196 color:#fff;197 border-radius:16px;198 box-shadow:0 18px 36px rgba(0,0,0,0.45);199 padding:40px 36px;200 z-index:6;201 }202 .tooltip p{203 margin:0 0 28px;204 font-size:40px;205 line-height:1.26;206 color:#f0f0f0;207 }208 .tooltip .cta{209 font-size:38px;210 color:var(--accent);211 font-weight:800;212 letter-spacing:0.4px;213 }214 215 /* Playback controls */216 .playback{217 position:absolute;218 top:1700px;219 left:60px;220 right:60px;221 display:flex;222 align-items:center;223 justify-content:space-between;224 color:#eaeaea;225 }226 .playback .cluster{227 display:flex;228 align-items:center;229 gap:38px;230 }231 .playback .circle{232 width:110px; height:110px; border-radius:50%;233 background:#2a2a2a;234 display:flex; align-items:center; justify-content:center;235 box-shadow: inset 0 0 0 2px rgba(255,255,255,0.08);236 }237 .playback svg{ width:64px; height:64px; fill:#e7e7e7; opacity:0.9; }238 .playback .shuffle svg{ width:54px; height:54px; opacity:0.7; }239 240 /* Artist card */241 .divider{242 position:absolute;243 top:1820px;244 left:0; right:0;245 height:2px; background:rgba(255,255,255,0.06);246 }247 .artist-card{248 position:absolute;249 top:1860px;250 left:60px;251 right:60px;252 display:flex;253 align-items:center;254 justify-content:space-between;255 color:#fff;256 }257 .artist-left{258 display:flex; align-items:center; gap:28px;259 }260 .avatar{261 width:140px; height:140px; border-radius:70px; overflow:hidden;262 background:#E0E0E0; border:1px solid #BDBDBD;263 display:flex; align-items:center; justify-content:center; color:#757575; font-size:30px;264 }265 .artist-meta .name{266 font-size:46px; font-weight:700; display:flex; align-items:center; gap:14px;267 }268 .artist-meta .check{269 width:30px; height:30px; border-radius:50%; background:#cfe7ff; display:inline-block;270 box-shadow:0 0 0 2px rgba(255,255,255,0.18) inset;271 }272 .artist-meta .followers{ font-size:34px; color:#e0b24b; margin-top:6px; }273 .follow-btn{274 background:var(--accent); color:#000; font-weight:800;275 padding:18px 32px; border-radius:34px; font-size:36px; box-shadow:0 8px 20px rgba(245,166,35,0.24);276 }277 278 /* Emoji reaction tray */279 .emoji-tray{280 position:absolute;281 bottom:160px;282 left:0; right:0;283 height:220px;284 background:#f8f8f8;285 box-shadow:0 -12px 24px rgba(0,0,0,0.45);286 display:flex; align-items:center; padding:0 24px; gap:24px;287 }288 .emoji{289 width:180px; height:160px; background:#E0E0E0; border:1px solid #BDBDBD;290 display:flex; align-items:center; justify-content:center; color:#757575; font-size:28px; border-radius:10px;291 }292 293 /* Gesture pill */294 .gesture{295 position:absolute;296 bottom:60px;297 left:50%; transform:translateX(-50%);298 width:220px; height:10px; border-radius:6px; background:#ffffff; opacity:0.9;299 }300</style>301</head>302<body>303<div id="render-target">304 305 <!-- Status Bar -->306 <div class="status-bar">307 <div class="sb-left">308 <div class="time" style="font-size:42px;">8:30</div>309 <div class="tag">Calm</div>310 <div class="sb-icon">311 <svg viewBox="0 0 24 24"><path d="M12 2a1 1 0 0 1 1 1v3h-2V3a1 1 0 0 1 1-1zm0 17a6 6 0 1 0 0-12 6 6 0 0 0 0 12z"/></svg>312 </div>313 <div class="tag">pf</div>314 <span class="dot"></span>315 </div>316 <div class="sb-right">317 <div class="sb-icon">318 <!-- WiFi -->319 <svg viewBox="0 0 24 24">320 <path d="M2 8c5-4 15-4 20 0l-2 2c-4-3-12-3-16 0L2 8zm4 5c3-2 9-2 12 0l-2 2c-2-1-6-1-8 0l-2-2zm4 5l2 2 2-2-2-2-2 2z"/>321 </svg>322 </div>323 <div class="sb-icon">324 <!-- Battery -->325 <svg viewBox="0 0 28 24">326 <rect x="2" y="6" width="20" height="12" rx="2" ry="2" fill="#fff"></rect>327 <rect x="22" y="10" width="3" height="4" rx="1" ry="1" fill="#fff"></rect>328 </svg>329 </div>330 </div>331 </div>332 333 <!-- Top chevron -->334 <div class="top-chevron">335 <svg viewBox="0 0 24 24"><path d="M6 9l6 6 6-6"/></svg>336 </div>337 338 <!-- Album Art -->339 <div class="album-wrap">340 <div class="album-art">[IMG: Album Art - Shayad (Soul Strike Remix)]</div>341 </div>342 343 <!-- Song Info -->344 <div class="song-info">345 <div class="artist">Soul Strike</div>346 <div class="title">Shayad (Soul Strike Remix)</div>347 <div class="feat">Feat. <span class="accent">Arijit Singh</span></div>348 </div>349 350 <!-- Actions -->351 <div class="actions">352 <div class="action">353 <svg viewBox="0 0 24 24"><path d="M12 21l-1-1C6 16 3 13 3 9a5 5 0 0 1 9-3 5 5 0 0 1 9 3c0 4-3 7-8 11l-1 1z"/></svg>354 <div class="label">Like</div>355 </div>356 <div class="action">357 <svg viewBox="0 0 24 24"><path d="M4 6h12v2H4V6zm0 5h12v2H4v-2zm0 5h8v2H4v-2zm14-7h4v2h-4v4h-2v-4h-4v-2h4V8h2v2z"/></svg>358 <div class="label">Playlist</div>359 </div>360 <div class="action">361 <svg viewBox="0 0 24 24"><path d="M12 3v10l4-4 1 1-6 6-6-6 1-1 4 4V3h2zm-7 16h14v2H5v-2z"/></svg>362 <div class="label">Download</div>363 </div>364 <div class="action">365 <svg viewBox="0 0 24 24"><path d="M2 12l9-4 11-5-6 15-1 4-5-6-8-4z"/></svg>366 <div class="label">Share</div>367 </div>368 </div>369 370 <!-- Floating Download Button -->371 <div class="download-fab">372 <svg viewBox="0 0 24 24"><path d="M11 4h2v9l3-3 1 1-5 5-5-5 1-1 3 3V4zm-6 14h14v2H5v-2z"/></svg>373 </div>374 375 <!-- Waveform -->376 <div class="waveform">377 <div class="bars"></div>378 <div class="time-left">0:21</div>379 <div class="time-right">4:31</div>380 </div>381 382 <!-- Tooltip -->383 <div class="tooltip">384 <p>Download millions of songs to listen without wifi</p>385 <div class="cta">OK, GOT IT</div>386 </div>387 388 <!-- Playback Controls -->389 <div class="playback">390 <div class="cluster">391 <div class="circle">392 <!-- Previous -->393 <svg viewBox="0 0 24 24"><path d="M6 5h2v14H6V5zm3 7l9 6V6l-9 6z"/></svg>394 </div>395 <div class="circle" style="width:130px;height:130px;">396 <!-- Pause -->397 <svg viewBox="0 0 24 24"><path d="M6 4h4v16H6V4zm8 0h4v16h-4V4z"/></svg>398 </div>399 <div class="circle">400 <!-- Next -->401 <svg viewBox="0 0 24 24"><path d="M16 5h2v14h-2V5zM6 6l9 6-9 6V6z"/></svg>402 </div>403 </div>404 <div class="shuffle">405 <!-- Shuffle -->406 <svg viewBox="0 0 24 24"><path d="M4 6h3l11 11h2v3h-5v-2h3L7 8H4V6zm12 0h4v5h-2V8h-2V6zM4 18h3l4-4-1-1-4 4H4v2z"/></svg>407 </div>408 </div>409 410 <div class="divider"></div>411 412 <!-- Artist Card -->413 <div class="artist-card">414 <div class="artist-left">415 <div class="avatar">[IMG: Artist Avatar]</div>416 <div class="artist-meta">417 <div class="name">Soul Strike <span class="check"></span></div>418 <div class="followers">1,089 Followers</div>419 </div>420 </div>421 <div class="follow-btn">FOLLOW</div>422 </div>423 424 <!-- Emoji tray -->425 <div class="emoji-tray">426 <div class="emoji">[IMG: Reaction Emoji]</div>427 <div class="emoji">[IMG: Reaction Emoji]</div>428 <div class="emoji">[IMG: Reaction Emoji]</div>429 <div class="emoji">[IMG: Reaction Emoji]</div>430 <div class="emoji">[IMG: Reaction Emoji]</div>431 <div class="emoji">[IMG: Reaction Emoji]</div>432 </div>433 434 <!-- Gesture pill -->435 <div class="gesture"></div>436 437</div>438</body>439</html>