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 Playlist UI Mock</title>7<style>8 body { margin: 0; padding: 0; background: transparent; }9 #render-target {10 width: 1080px; height: 2400px;11 position: relative; overflow: hidden;12 background: #000; color: #fff;13 font-family: Arial, Helvetica, sans-serif;14 }15 16 /* Status bar */17 .status-bar {18 position: absolute; top: 0; left: 0; right: 0;19 height: 90px; padding: 0 28px;20 display: flex; align-items: center; justify-content: space-between;21 color: #fff; font-size: 36px;22 }23 .status-right {24 display: flex; align-items: center; gap: 22px;25 }26 .status-icon svg { width: 34px; height: 34px; opacity: 0.9; }27 28 /* Header */29 .header {30 position: absolute; top: 90px; left: 0; right: 0;31 height: 120px; padding: 0 28px;32 display: flex; align-items: center;33 }34 .back-btn, .search-btn {35 width: 64px; height: 64px; display: flex; align-items: center; justify-content: center;36 }37 .channel {38 display: flex; align-items: center; gap: 24px;39 }40 .avatar {41 width: 64px; height: 64px; border-radius: 50%; background: #e26a2c;42 display: flex; align-items: center; justify-content: center; font-weight: bold;43 }44 .chan-text { line-height: 1.2; }45 .chan-name { font-size: 40px; font-weight: 600; }46 .chan-priv { font-size: 28px; color: #bbb; margin-top: 6px; }47 48 /* Album art */49 .hero {50 position: absolute; top: 250px; left: 0; right: 0;51 display: flex; justify-content: center;52 }53 .album-art {54 width: 820px; height: 820px; border-radius: 18px;55 background: #E0E0E0; border: 1px solid #BDBDBD;56 display: flex; align-items: center; justify-content: center;57 color: #757575; font-size: 36px; text-align: center;58 }59 60 /* Title */61 .title {62 position: absolute; top: 1120px; left: 0; right: 0;63 text-align: center; font-size: 88px; font-weight: 800; letter-spacing: 1px;64 }65 66 /* Controls */67 .controls {68 position: absolute; top: 1240px; left: 0; right: 0;69 display: flex; justify-content: center; align-items: center; gap: 52px;70 }71 .ctrl {72 width: 120px; height: 120px; border-radius: 60px;73 background: #1a1a1a; display: flex; align-items: center; justify-content: center;74 }75 .ctrl svg { width: 56px; height: 56px; fill: #fff; }76 .play-wrap {77 width: 160px; height: 160px; border-radius: 80px; background: #fff;78 display: flex; align-items: center; justify-content: center;79 }80 .play-wrap svg { width: 70px; height: 70px; fill: #000; }81 82 /* List section */83 .list {84 position: absolute; top: 1460px; left: 0; right: 0; padding: 0 28px;85 }86 .add-song {87 display: flex; align-items: center; gap: 24px; margin-bottom: 40px;88 }89 .plus-thumb {90 width: 120px; height: 120px; background: #2a2a2a; border-radius: 12px;91 display: flex; align-items: center; justify-content: center;92 }93 .add-song .label { font-size: 42px; }94 95 .track {96 display: flex; align-items: center; justify-content: space-between;97 margin: 24px 0;98 }99 .track-left { display: flex; align-items: center; gap: 24px; }100 .thumb {101 width: 120px; height: 120px; background: #E0E0E0; border: 1px solid #BDBDBD;102 display: flex; align-items: center; justify-content: center; color: #757575; font-size: 24px;103 border-radius: 10px;104 }105 .t-meta { line-height: 1.3; }106 .t-title { font-size: 40px; }107 .t-artist { font-size: 32px; color: #bdbdbd; margin-top: 8px; }108 .more-btn { width: 60px; height: 60px; display: flex; align-items: center; justify-content: center; }109 110 /* Suggestions */111 .suggest {112 margin-top: 40px;113 }114 .suggest h2 {115 font-size: 56px; margin: 10px 0 18px; font-weight: 800;116 }117 .s-item {118 display: flex; align-items: center; justify-content: space-between;119 padding: 12px 0;120 }121 .s-left { display: flex; align-items: center; gap: 24px; }122 .s-thumb { width: 120px; height: 120px; background: #E0E0E0; border: 1px solid #BDBDBD;123 display: flex; align-items: center; justify-content: center; color: #757575; font-size: 24px; border-radius: 10px; }124 .s-meta .s-title { font-size: 40px; }125 .s-meta .s-artist { font-size: 32px; color: #bdbdbd; margin-top: 8px; }126 127 /* Now playing bar */128 .now-playing {129 position: absolute; left: 0; right: 0; bottom: 180px;130 height: 170px; background: #232323; border-top: 1px solid #333;131 display: flex; align-items: center; padding: 0 24px; gap: 24px;132 }133 .np-thumb { width: 120px; height: 120px; background: #E0E0E0; border: 1px solid #BDBDBD;134 display: flex; align-items: center; justify-content: center; color: #757575; font-size: 22px; border-radius: 8px; }135 .np-text { flex: 1; }136 .np-title { font-size: 40px; }137 .np-artist { font-size: 32px; color: #bdbdbd; margin-top: 8px; }138 .np-actions { display: flex; align-items: center; gap: 26px; }139 .np-btn { width: 64px; height: 64px; display: flex; align-items: center; justify-content: center; }140 .np-play {141 width: 80px; height: 80px; border-radius: 40px; background: #444;142 display: flex; align-items: center; justify-content: center;143 }144 .progress {145 position: absolute; top: 0; left: 0; right: 0; height: 4px; background: #555;146 }147 .progress .bar { width: 30%; height: 100%; background: #aaa; }148 149 /* Bottom nav */150 .bottom-nav {151 position: absolute; left: 0; right: 0; bottom: 0;152 height: 180px; background: #000; border-top: 1px solid #1f1f1f;153 display: flex; align-items: center; justify-content: space-around;154 }155 .nav-item { display: flex; flex-direction: column; align-items: center; gap: 12px; color: #fff; }156 .nav-item svg { width: 48px; height: 48px; fill: #fff; opacity: 0.9; }157 .nav-item span { font-size: 30px; color: #ddd; }158 159 /* Home indicator */160 .home-indicator {161 position: absolute; bottom: 190px; left: 50%; transform: translateX(-50%);162 width: 480px; height: 12px; background: #eee; border-radius: 6px; opacity: 0.8;163 }164 165 /* Utilities */166 .icon-dots svg { width: 10px; height: 36px; }167 .muted { color: #9e9e9e; }168</style>169</head>170<body>171<div id="render-target">172 <!-- Status bar -->173 <div class="status-bar">174 <div>1:30</div>175 <div class="status-right">176 <div class="status-icon">177 <!-- simple "g" indicator -->178 <svg viewBox="0 0 24 24"><circle cx="12" cy="12" r="10" fill="#fff"/><text x="12" y="16" font-size="12" text-anchor="middle" fill="#000">g</text></svg>179 </div>180 <div class="status-icon">181 <!-- triangle play icon -->182 <svg viewBox="0 0 24 24"><polygon points="8,5 20,12 8,19" fill="#fff"/></svg>183 </div>184 <div class="status-icon">185 <!-- small bag/store -->186 <svg viewBox="0 0 24 24"><rect x="5" y="7" width="14" height="12" fill="#fff"/><path d="M9 7c0-2 6-2 6 0" stroke="#000" stroke-width="2" fill="none"/></svg>187 </div>188 <div class="status-icon">189 <!-- wifi -->190 <svg viewBox="0 0 24 24"><path d="M3 9c4-4 14-4 18 0" stroke="#fff" stroke-width="2" fill="none"/><path d="M6 12c3-3 9-3 12 0" stroke="#fff" stroke-width="2" fill="none"/><circle cx="12" cy="16" r="2" fill="#fff"/></svg>191 </div>192 <div class="status-icon">193 <!-- battery -->194 <svg viewBox="0 0 28 14"><rect x="1" y="2" width="22" height="10" stroke="#fff" fill="none"/><rect x="3" y="4" width="18" height="6" fill="#fff"/><rect x="24" y="5" width="3" height="4" fill="#fff"/></svg>195 </div>196 </div>197 </div>198 199 <!-- Header -->200 <div class="header">201 <div class="back-btn">202 <svg viewBox="0 0 100 100"><path d="M60 20 L30 50 L60 80" stroke="#fff" stroke-width="10" fill="none" stroke-linecap="round" stroke-linejoin="round"/></svg>203 </div>204 <div class="channel">205 <div class="avatar">C</div>206 <div class="chan-text">207 <div class="chan-name">Cerebra Research</div>208 <div class="chan-priv">Public</div>209 </div>210 </div>211 <div style="flex:1"></div>212 <div class="search-btn">213 <svg viewBox="0 0 100 100">214 <circle cx="45" cy="45" r="28" stroke="#fff" stroke-width="8" fill="none"/>215 <line x1="65" y1="65" x2="90" y2="90" stroke="#fff" stroke-width="8" stroke-linecap="round"/>216 </svg>217 </div>218 </div>219 220 <!-- Album art -->221 <div class="hero">222 <div class="album-art">[IMG: Album cover - Apna Bana Le]</div>223 </div>224 225 <!-- Title -->226 <div class="title">XYZ</div>227 228 <!-- Controls -->229 <div class="controls">230 <div class="ctrl">231 <!-- Download -->232 <svg viewBox="0 0 100 100">233 <path d="M50 20 L50 60" stroke="#fff" stroke-width="8" fill="none" stroke-linecap="round"/>234 <path d="M35 45 L50 60 L65 45" stroke="#fff" stroke-width="8" fill="none" stroke-linecap="round" stroke-linejoin="round"/>235 <rect x="25" y="68" width="50" height="12" fill="#fff"/>236 </svg>237 </div>238 <div class="ctrl">239 <!-- Edit -->240 <svg viewBox="0 0 100 100">241 <path d="M25 75 L35 65 L70 30 L80 40 L45 75 Z" fill="#fff"/>242 </svg>243 </div>244 <div class="play-wrap">245 <!-- Play -->246 <svg viewBox="0 0 100 100"><polygon points="38,28 75,50 38,72"/></svg>247 </div>248 <div class="ctrl">249 <!-- Share -->250 <svg viewBox="0 0 100 100">251 <circle cx="25" cy="60" r="9" fill="#fff"/><circle cx="75" cy="30" r="9" fill="#fff"/><circle cx="75" cy="80" r="9" fill="#fff"/>252 <path d="M33 60 L66 34" stroke="#fff" stroke-width="8"/>253 <path d="M33 60 L66 76" stroke="#fff" stroke-width="8"/>254 </svg>255 </div>256 <div class="ctrl">257 <!-- More -->258 <svg viewBox="0 0 12 36">259 <circle cx="6" cy="6" r="3" fill="#fff"/><circle cx="6" cy="18" r="3" fill="#fff"/><circle cx="6" cy="30" r="3" fill="#fff"/>260 </svg>261 </div>262 </div>263 264 <!-- Track list -->265 <div class="list">266 <div class="add-song">267 <div class="plus-thumb">268 <svg viewBox="0 0 100 100"><path d="M50 20 L50 80 M20 50 L80 50" stroke="#fff" stroke-width="12" stroke-linecap="round"/></svg>269 </div>270 <div class="label">Add a song</div>271 </div>272 273 <div class="track">274 <div class="track-left">275 <div class="thumb">[IMG: Album cover]</div>276 <div class="t-meta">277 <div class="t-title">Apna Bana Le (From "Bhediya")</div>278 <div class="t-artist">Arijit Singh & Sachin-Jigar</div>279 </div>280 </div>281 <div class="more-btn icon-dots">282 <svg viewBox="0 0 12 36">283 <circle cx="6" cy="6" r="3" fill="#fff"/><circle cx="6" cy="18" r="3" fill="#fff"/><circle cx="6" cy="30" r="3" fill="#fff"/>284 </svg>285 </div>286 </div>287 288 <div class="track">289 <div class="track-left">290 <div class="thumb">[IMG: Album cover]</div>291 <div class="t-meta">292 <div class="t-title">Aane Se Uske Aaye Bahar</div>293 <div class="t-artist">Mohammed Rafi</div>294 </div>295 </div>296 <div class="more-btn icon-dots">297 <svg viewBox="0 0 12 36">298 <circle cx="6" cy="6" r="3" fill="#fff"/><circle cx="6" cy="18" r="3" fill="#fff"/><circle cx="6" cy="30" r="3" fill="#fff"/>299 </svg>300 </div>301 </div>302 303 <div class="suggest">304 <h2>Suggestions</h2>305 306 <div class="s-item">307 <div class="s-left">308 <div class="s-thumb">[IMG: Album cover]</div>309 <div class="s-meta">310 <div class="s-title">Imagine (Ultimate Mix)</div>311 <div class="s-artist">John Lennon</div>312 </div>313 </div>314 <div class="more-btn">315 <svg viewBox="0 0 100 100">316 <path d="M30 40 H70" stroke="#fff" stroke-width="8"/>317 <path d="M30 60 H70" stroke="#fff" stroke-width="8"/>318 </svg>319 </div>320 </div>321 </div>322 </div>323 324 <!-- Now Playing -->325 <div class="now-playing">326 <div class="progress"><div class="bar"></div></div>327 <div class="np-thumb">[IMG: Album cover]</div>328 <div class="np-text">329 <div class="np-title">Tere Vaaste - Unplugged</div>330 <div class="np-artist">Varun Jain</div>331 </div>332 <div class="np-actions">333 <div class="np-btn">334 <!-- Cast -->335 <svg viewBox="0 0 100 100">336 <rect x="20" y="25" width="60" height="40" stroke="#fff" stroke-width="6" fill="none"/>337 <path d="M20 75 C28 75 36 83 44 91" stroke="#fff" stroke-width="6" fill="none"/>338 <path d="M20 75 C20 75 28 75 36 83" stroke="#fff" stroke-width="6" fill="none"/>339 </svg>340 </div>341 <div class="np-play">342 <!-- Play -->343 <svg viewBox="0 0 100 100"><polygon points="38,28 75,50 38,72" fill="#fff"/></svg>344 </div>345 </div>346 </div>347 348 <!-- Home indicator bar -->349 <div class="home-indicator"></div>350 351 <!-- Bottom navigation -->352 <div class="bottom-nav">353 <div class="nav-item">354 <svg viewBox="0 0 100 100">355 <path d="M20 55 L50 30 L80 55 V80 H20 Z" fill="#fff"/>356 </svg>357 <span>Home</span>358 </div>359 <div class="nav-item">360 <svg viewBox="0 0 100 100">361 <circle cx="50" cy="50" r="30" stroke="#fff" stroke-width="8" fill="none"/>362 <path d="M50 20 L58 50 L50 80 L42 50 Z" fill="#fff"/>363 </svg>364 <span>Explore</span>365 </div>366 <div class="nav-item">367 <svg viewBox="0 0 100 100">368 <path d="M25 70 C25 50 75 50 75 70" stroke="#fff" stroke-width="8" fill="none"/>369 <circle cx="45" cy="40" r="8" fill="#fff"/>370 </svg>371 <span>Library</span>372 </div>373 <div class="nav-item">374 <svg viewBox="0 0 100 100">375 <path d="M50 20 L65 35 H55 V80 H45 V35 H35 Z" fill="#fff"/>376 </svg>377 <span>Upgrade</span>378 </div>379 </div>380</div>381</body>382</html>