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</title>7<style>8 body { margin: 0; padding: 0; background: transparent; font-family: Arial, Helvetica, sans-serif; }9 #render-target {10 width: 1080px; height: 2400px; position: relative; overflow: hidden;11 background: linear-gradient(180deg, #0b0b0b 0%, #121212 40%, #0f0f0f 100%);12 color: #e9e9e9;13 }14 15 /* Status bar */16 .status-bar {17 position: absolute; top: 0; left: 0; right: 0; height: 120px;18 padding: 0 36px; display: flex; align-items: center; justify-content: space-between;19 color: #f5f5f5; font-size: 44px; letter-spacing: 1px;20 }21 .status-left { display: flex; align-items: center; gap: 28px; }22 .status-right { display: flex; align-items: center; gap: 26px; }23 .status-dot { width: 10px; height: 10px; background: #d9d9d9; border-radius: 50%; display: inline-block; }24 25 /* Top controls */26 .chevron {27 position: absolute; top: 180px; left: 68px; width: 60px; height: 60px; opacity: 0.6;28 }29 .queue-btn {30 position: absolute; top: 190px; right: 70px; width: 70px; height: 70px; opacity: 0.6;31 }32 33 /* Album art */34 .album-art {35 position: absolute; top: 320px; left: 190px; width: 700px; height: 700px;36 background: #E0E0E0; border: 1px solid #BDBDBD;37 display: flex; align-items: center; justify-content: center; color: #757575;38 box-shadow: 0 30px 80px rgba(0,0,0,0.6);39 text-transform: uppercase; font-weight: 700; letter-spacing: 2px;40 }41 42 /* Title block */43 .title-block {44 position: absolute; top: 1060px; left: 0; width: 100%; text-align: center;45 }46 .title-block .artist { color: #cfcfcf; font-size: 46px; margin-bottom: 16px; }47 .title-block .track { color: #ffffff; font-weight: 800; font-size: 58px; }48 .title-block .feat { margin-top: 18px; font-size: 42px; color: #cfcfcf; }49 .title-block .feat .name { color: #ffae27; font-weight: 600; }50 51 /* Action row */52 .actions {53 position: absolute; top: 1260px; left: 0; width: 100%;54 display: flex; align-items: center; justify-content: space-around;55 padding: 0 90px;56 }57 .action-item { text-align: center; color: #cfcfcf; font-size: 34px; }58 .action-item svg { width: 72px; height: 72px; display: block; margin: 0 auto 14px; }59 .download-wrap {60 position: relative; width: 140px; height: 140px; margin: 0 auto 10px;61 background: radial-gradient(closest-side, rgba(255,166,36,0.3), rgba(255,166,36,0) 70%);62 border-radius: 50%; display: flex; align-items: center; justify-content: center;63 }64 .download-circle {65 width: 108px; height: 108px; background: #ffae27; border-radius: 50%;66 display: flex; align-items: center; justify-content: center;67 box-shadow: 0 4px 0 rgba(0,0,0,0.3) inset, 0 10px 30px rgba(255,174,39,0.45);68 }69 .action-label { margin-top: 6px; }70 71 /* Waveform & timing */72 .waveform {73 position: absolute; top: 1430px; left: 60px; right: 60px; height: 120px;74 background: repeating-linear-gradient(75 to right,76 rgba(255,255,255,0.08) 0px, rgba(255,255,255,0.08) 6px,77 transparent 6px, transparent 12px78 );79 border-radius: 6px;80 mask-image: linear-gradient(90deg, transparent 0%, black 8%, black 92%, transparent 100%);81 opacity: 0.6;82 }83 .time-left, .time-right {84 position: absolute; top: 1540px; color: #cfcfcf; font-size: 34px;85 }86 .time-left { left: 46px; }87 .time-right { right: 46px; }88 89 /* More options (dots) */90 .more-dots {91 position: absolute; top: 1470px; left: 30px; width: 80px; height: 30px; display: flex; gap: 10px;92 }93 .dot { width: 10px; height: 10px; background: #bbbbbb; border-radius: 50%; opacity: 0.7; }94 95 /* Tooltip card */96 .tooltip {97 position: absolute; top: 1340px; left: 160px; width: 760px;98 background: rgba(26,26,26,0.95); border-radius: 16px;99 box-shadow: 0 18px 40px rgba(0,0,0,0.7);100 padding: 40px; color: #f0f0f0; font-size: 44px; line-height: 1.35;101 }102 .tooltip .cta { margin-top: 30px; color: #ffae27; font-weight: 800; font-size: 42px; }103 104 /* Playback controls (bottom center) */105 .player-controls {106 position: absolute; top: 1620px; left: 0; width: 100%; display: flex; justify-content: center; gap: 80px; align-items: center;107 }108 .control-btn { width: 100px; height: 100px; display: flex; align-items: center; justify-content: center; opacity: 0.7; }109 .control-btn svg { width: 88px; height: 88px; }110 .shuffle { position: absolute; right: 80px; top: 1620px; opacity: 0.7; }111 .shuffle svg { width: 70px; height: 70px; }112 113 /* Artist card */114 .artist-card {115 position: absolute; top: 1760px; left: 40px; right: 40px;116 padding: 28px 24px; border-top: 1px solid rgba(255,255,255,0.08); border-bottom: 1px solid rgba(255,255,255,0.08);117 display: flex; align-items: center; justify-content: space-between;118 }119 .artist-left { display: flex; align-items: center; gap: 28px; }120 .avatar {121 width: 120px; height: 120px; border-radius: 60px; overflow: hidden; background: #E0E0E0; border: 1px solid #BDBDBD;122 display: flex; align-items: center; justify-content: center; color: #757575; font-size: 28px;123 }124 .artist-info { display: flex; flex-direction: column; }125 .artist-name { font-size: 48px; font-weight: 800; display: flex; align-items: center; gap: 10px; }126 .verified {127 width: 36px; height: 36px; border-radius: 50%; background: #2b9cf0; display: inline-flex; align-items: center; justify-content: center;128 }129 .followers { color: #ffae27; font-size: 36px; margin-top: 8px; }130 .follow-btn {131 padding: 16px 36px; border: 2px solid #ffae27; color: #ffae27; border-radius: 28px; font-weight: 800; font-size: 36px;132 }133 134 /* Sticker strip */135 .stickers {136 position: absolute; bottom: 160px; left: 0; right: 0; height: 220px;137 background: rgba(0,0,0,0.55); display: flex; align-items: center; gap: 18px; padding: 0 20px; overflow: hidden;138 }139 .sticker {140 width: 180px; height: 160px; background: #E0E0E0; border: 1px solid #BDBDBD;141 display: flex; align-items: center; justify-content: center; color: #757575; font-size: 26px; border-radius: 16px;142 }143 144 /* Home indicator */145 .home-indicator {146 position: absolute; bottom: 66px; left: 50%; transform: translateX(-50%);147 width: 280px; height: 10px; background: #eaeaea; border-radius: 6px; opacity: 0.7;148 }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>8:28</div>158 <!-- simple calm icon -->159 <svg width="44" height="44" viewBox="0 0 24 24" fill="#d9d9d9" aria-hidden="true"><circle cx="12" cy="12" r="10"/></svg>160 <!-- timer icon -->161 <svg width="44" height="44" viewBox="0 0 24 24" fill="#d9d9d9"><circle cx="12" cy="12" r="10" fill="none" stroke="#d9d9d9" stroke-width="2"/><path d="M12 6v6l4 2" stroke="#d9d9d9" stroke-width="2" fill="none"/></svg>162 <div style="font-weight: 800;">pf</div>163 <span class="status-dot"></span>164 </div>165 <div class="status-right">166 <!-- wifi -->167 <svg width="44" height="44" viewBox="0 0 24 24" fill="none">168 <path d="M3 8c4-4 14-4 18 0" stroke="#d9d9d9" stroke-width="2" stroke-linecap="round"/>169 <path d="M6 12c3-3 9-3 12 0" stroke="#d9d9d9" stroke-width="2" stroke-linecap="round"/>170 <path d="M10 16c2-2 4-2 6 0" stroke="#d9d9d9" stroke-width="2" stroke-linecap="round"/>171 <circle cx="12" cy="19" r="1.5" fill="#d9d9d9"/>172 </svg>173 <!-- battery -->174 <svg width="44" height="44" viewBox="0 0 24 24" fill="none">175 <rect x="3" y="7" width="16" height="10" rx="2" stroke="#d9d9d9" stroke-width="2"/>176 <rect x="5" y="9" width="12" height="6" fill="#d9d9d9"/>177 <rect x="20" y="10" width="2" height="4" fill="#d9d9d9"/>178 </svg>179 </div>180 </div>181 182 <!-- Top controls -->183 <svg class="chevron" viewBox="0 0 24 24" fill="none">184 <path d="M6 9l6 6 6-6" stroke="#cfcfcf" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>185 </svg>186 187 <svg class="queue-btn" viewBox="0 0 24 24" fill="none">188 <path d="M4 6h12M4 12h12M4 18h8" stroke="#cfcfcf" stroke-width="2" stroke-linecap="round"/>189 <path d="M19 12l3 2-3 2v-4z" fill="#cfcfcf"/>190 </svg>191 192 <!-- Album art -->193 <div class="album-art">[IMG: Album Cover]</div>194 195 <!-- Title block -->196 <div class="title-block">197 <div class="artist">Soul Strike</div>198 <div class="track">Shayad (Soul Strike Remix)</div>199 <div class="feat">Feat. <span class="name">Arijit Singh</span></div>200 </div>201 202 <!-- Actions -->203 <div class="actions">204 <div class="action-item">205 <svg viewBox="0 0 24 24">206 <path d="M12 21s-8-5.6-8-11a5 5 0 0 1 9-3 5 5 0 0 1 9 3c0 5.4-8 11-8 11z" fill="none" stroke="#cfcfcf" stroke-width="2"/>207 </svg>208 <div class="action-label">Like</div>209 </div>210 <div class="action-item">211 <svg viewBox="0 0 24 24">212 <path d="M4 6h12M4 12h12M4 18h12" stroke="#cfcfcf" stroke-width="2" stroke-linecap="round"/>213 <path d="M18 9v6" stroke="#cfcfcf" stroke-width="2"/>214 <path d="M15 12h6" stroke="#cfcfcf" stroke-width="2"/>215 </svg>216 <div class="action-label">Playlist</div>217 </div>218 <div class="action-item">219 <div class="download-wrap">220 <div class="download-circle">221 <svg viewBox="0 0 24 24" fill="none">222 <path d="M12 5v9" stroke="#fff" stroke-width="2" stroke-linecap="round"/>223 <path d="M7 10l5 5 5-5" stroke="#fff" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>224 <path d="M5 19h14" stroke="#fff" stroke-width="2" stroke-linecap="round"/>225 </svg>226 </div>227 </div>228 <div class="action-label" style="color:#e9e9e9;">Download</div>229 </div>230 <div class="action-item">231 <svg viewBox="0 0 24 24">232 <path d="M4 12h10" stroke="#cfcfcf" stroke-width="2" stroke-linecap="round"/>233 <path d="M11 7l5 5-5 5" stroke="#cfcfcf" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>234 </svg>235 <div class="action-label">Share</div>236 </div>237 </div>238 239 <!-- Waveform and times -->240 <div class="waveform"></div>241 <div class="time-left">0:00</div>242 <div class="time-right">0:00</div>243 <div class="more-dots"><span class="dot"></span><span class="dot"></span><span class="dot"></span></div>244 245 <!-- Tooltip card -->246 <div class="tooltip">247 Download millions of songs to listen without wifi248 <div class="cta">OK, GOT IT</div>249 </div>250 251 <!-- Player controls -->252 <div class="player-controls">253 <div class="control-btn">254 <svg viewBox="0 0 24 24" fill="none">255 <path d="M6 5v14" stroke="#cfcfcf" stroke-width="2"/>256 <path d="M18 5l-10 7 10 7V5z" fill="#cfcfcf"/>257 </svg>258 </div>259 <div class="control-btn">260 <svg viewBox="0 0 24 24" fill="none">261 <path d="M8 5v14M16 5v14" stroke="#cfcfcf" stroke-width="3"/>262 </svg>263 </div>264 <div class="control-btn">265 <svg viewBox="0 0 24 24" fill="none">266 <path d="M18 5v14" stroke="#cfcfcf" stroke-width="2"/>267 <path d="M6 5l10 7-10 7V5z" fill="#cfcfcf"/>268 </svg>269 </div>270 </div>271 <div class="shuffle">272 <svg viewBox="0 0 24 24" fill="none">273 <path d="M4 6h4l4 6 4 6h4" stroke="#cfcfcf" stroke-width="2" stroke-linecap="round"/>274 <path d="M20 6l-3 3M20 6l-3-3" stroke="#cfcfcf" stroke-width="2" stroke-linecap="round"/>275 </svg>276 </div>277 278 <!-- Artist card -->279 <div class="artist-card">280 <div class="artist-left">281 <div class="avatar">[IMG: Artist Logo]</div>282 <div class="artist-info">283 <div class="artist-name">Soul Strike284 <span class="verified">285 <svg viewBox="0 0 24 24"><path d="M6 12l3 3 6-6" stroke="#fff" stroke-width="3" fill="none" stroke-linecap="round"/></svg>286 </span>287 </div>288 <div class="followers">1,089 Followers</div>289 </div>290 </div>291 <div class="follow-btn">FOLLOW</div>292 </div>293 294 <!-- Sticker strip -->295 <div class="stickers">296 <div class="sticker">[IMG: Sticker]</div>297 <div class="sticker">[IMG: Sticker]</div>298 <div class="sticker">[IMG: Sticker]</div>299 <div class="sticker">[IMG: Sticker]</div>300 <div class="sticker">[IMG: Sticker]</div>301 <div class="sticker">[IMG: Sticker]</div>302 <div class="sticker">[IMG: Sticker]</div>303 </div>304 305 <!-- Home indicator -->306 <div class="home-indicator"></div>307 308</div>309</body>310</html>