GD-ML/AndroidCode
13.4k
1<html lang="en">2<head>3<meta charset="utf-8">4<title>SoundCloud Playlist UI Mock</title>5<meta name="viewport" content="width=1080, initial-scale=1.0">6<style>7 body { margin: 0; padding: 0; background: transparent; }8 #render-target {9 width: 1080px; height: 2400px;10 position: relative; overflow: hidden;11 background: #0d0d0f; color: #ffffff;12 font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;13 }14 15 /* General */16 .muted { color: #9aa0a6; }17 .divider { height: 1px; background: rgba(255,255,255,0.08); }18 .row { display: flex; align-items: center; }19 .title { font-size: 52px; font-weight: 800; letter-spacing: 0.2px; }20 .sub { font-size: 28px; color: #b8b8bf; }21 .small { font-size: 26px; }22 .pill { display: inline-block; padding: 8px 16px; border-radius: 999px; background: #ff6a00; color: #1a1a1a; font-weight: 700; }23 24 /* Status bar */25 .statusbar {26 position: absolute; top: 0; left: 0; right: 0;27 height: 100px; padding: 0 36px;28 display: flex; align-items: center; justify-content: space-between;29 color: #fff; font-weight: 600; font-size: 34px;30 }31 .status-icons { display: flex; gap: 26px; align-items: center; }32 .dot { width: 10px; height: 10px; background: #fff; border-radius: 50%; opacity: 0.9; }33 34 /* Header */35 .header {36 position: absolute; top: 120px; left: 0; right: 0;37 padding: 0 36px;38 }39 .back-btn {40 width: 96px; height: 96px; border-radius: 48px;41 background: #1b1b1e; display: flex; align-items: center; justify-content: center;42 margin-bottom: 28px;43 box-shadow: 0 2px 10px rgba(0,0,0,0.4);44 }45 .header-main { display: flex; gap: 28px; }46 .playlist-art {47 width: 220px; height: 220px; background: #E0E0E0; border: 1px solid #BDBDBD;48 display: flex; align-items: center; justify-content: center; color: #757575; font-size: 26px; font-weight: 600;49 border-radius: 12px;50 }51 .header-text { flex: 1; }52 .meta-row { margin-top: 12px; font-size: 28px; color: #c6c6cc; }53 .by-row { display: flex; align-items: center; gap: 16px; margin-top: 18px; font-size: 30px; color: #cfcfd6; }54 55 .like-row { display: flex; align-items: center; gap: 18px; margin-top: 26px; color: #cfcfd6; }56 .shuffle-play {57 position: absolute; right: 36px; top: 320px; display: flex; align-items: center; gap: 28px;58 }59 .circle-btn {60 width: 150px; height: 150px; border-radius: 75px; background: #ffffff;61 display: flex; align-items: center; justify-content: center;62 box-shadow: 0 8px 24px rgba(0,0,0,0.35);63 }64 .shuffle-icon {65 width: 68px; height: 68px; border-radius: 34px; background: #232327;66 display: flex; align-items: center; justify-content: center;67 }68 69 /* Section description */70 .section-desc {71 margin-top: 40px; padding: 0 36px; color: #eaeaf0;72 font-size: 34px; line-height: 1.35;73 }74 75 /* Track list */76 .tracks { margin-top: 20px; }77 .track {78 padding: 26px 36px; display: flex; align-items: center; justify-content: space-between;79 }80 .track-left { display: flex; gap: 28px; align-items: center; }81 .thumb {82 width: 140px; height: 140px; background: #E0E0E0; border: 1px solid #BDBDBD;83 color: #757575; font-size: 24px; display: flex; align-items: center; justify-content: center; border-radius: 12px;84 }85 .track-info { max-width: 720px; }86 .track-title { font-size: 38px; font-weight: 800; margin-bottom: 6px; }87 .track-meta { font-size: 28px; color: #b8b8bf; display: flex; gap: 12px; align-items: center; }88 .kebab { width: 14px; height: 60px; display: flex; flex-direction: column; align-items: center; justify-content: space-between; opacity: 0.9; }89 .kebab span { width: 8px; height: 8px; background: #cfcfd6; border-radius: 50%; }90 91 /* Bottom mini player */92 .mini-player {93 position: absolute; bottom: 200px; left: 0; right: 0;94 height: 140px; background: rgba(30,30,34,0.95);95 display: flex; align-items: center; gap: 24px; padding: 0 36px; border-top: 1px solid rgba(255,255,255,0.06);96 }97 .mini-title { font-size: 38px; font-weight: 800; }98 .mini-sub { font-size: 28px; color: #b8b8bf; }99 .mini-right { margin-left: auto; display: flex; gap: 36px; align-items: center; }100 101 /* Bottom navigation */102 .nav {103 position: absolute; bottom: 0; left: 0; right: 0;104 height: 200px; background: #111114; border-top: 1px solid rgba(255,255,255,0.06);105 display: flex; align-items: center; justify-content: space-around;106 }107 .nav-item { display: flex; flex-direction: column; align-items: center; gap: 16px; color: #cfcfd6; font-size: 28px; }108 .nav-item.active { color: #ffffff; }109 .nav-icon {110 width: 64px; height: 64px; border-radius: 16px; display: flex; align-items: center; justify-content: center;111 background: transparent;112 }113 114 /* SVG helper styles */115 svg { display: block; }116</style>117</head>118<body>119<div id="render-target">120 121 <!-- Status Bar -->122 <div class="statusbar">123 <div>8:06</div>124 <div class="status-icons">125 <!-- Cellular -->126 <svg width="32" height="32"><rect x="2" y="18" width="6" height="12" fill="#fff"/><rect x="12" y="14" width="6" height="16" fill="#fff"/><rect x="22" y="10" width="6" height="20" fill="#fff"/></svg>127 <!-- WiFi -->128 <svg width="32" height="32" viewBox="0 0 24 24"><path d="M2 10c5-4 15-4 20 0" stroke="#fff" stroke-width="2" fill="none"/><path d="M6 14c3-3 9-3 12 0" stroke="#fff" stroke-width="2" fill="none"/><circle cx="12" cy="18" r="2" fill="#fff"/></svg>129 <!-- Notification -->130 <svg width="32" height="32" viewBox="0 0 24 24"><path d="M12 2c4 0 7 3 7 7v6l2 3H3l2-3V9c0-4 3-7 7-7z" fill="#fff"/></svg>131 </div>132 </div>133 134 <!-- Back Button -->135 <div class="header">136 <div class="back-btn">137 <svg width="44" height="44" viewBox="0 0 24 24"><path d="M15 18l-6-6 6-6" stroke="#fff" stroke-width="2" fill="none" stroke-linecap="round" stroke-linejoin="round"/></svg>138 </div>139 140 <div class="header-main">141 <div class="playlist-art">[IMG: Playlist Cover]</div>142 <div class="header-text">143 <div class="title">Top 50: Hip-hop & Rap</div>144 <div class="meta-row">Playlist · 50 Tracks · 2:43:30 · 16h ago</div>145 <div class="by-row">146 <div style="width:32px;height:32px;">147 <svg width="32" height="32" viewBox="0 0 24 24"><path d="M4 14a6 6 0 0111 0h3a4 4 0 010 8H5a4 4 0 01-1-8z" fill="#ff6a00"/></svg>148 </div>149 <div>By SoundCloud</div>150 </div>151 152 <div class="like-row">153 <!-- Heart icon -->154 <svg width="32" height="32" viewBox="0 0 24 24"><path d="M12 21s-7-4.5-9-8a5 5 0 018-5 5 5 0 018 5c-2 3.5-9 8-9 8z" fill="none" stroke="#fff" stroke-width="2"/></svg>155 <div>8.9K</div>156 </div>157 </div>158 159 <div class="shuffle-play">160 <div class="shuffle-icon">161 <svg width="34" height="34" viewBox="0 0 24 24">162 <path d="M4 6h5l5 6h6" stroke="#fff" stroke-width="2" fill="none" stroke-linecap="round"/>163 <path d="M4 18h5l2.5-3" stroke="#fff" stroke-width="2" fill="none" stroke-linecap="round"/>164 <path d="M18 4l3 3-3 3" fill="none" stroke="#fff" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>165 <path d="M18 14l3 3-3 3" fill="none" stroke="#fff" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>166 </svg>167 </div>168 <div class="circle-btn">169 <!-- Pause icon -->170 <svg width="60" height="60" viewBox="0 0 24 24"><rect x="6" y="4" width="5" height="16" fill="#121212"/><rect x="13" y="4" width="5" height="16" fill="#121212"/></svg>171 </div>172 </div>173 </div>174 </div>175 176 <!-- Section description -->177 <div class="section-desc">The most played Hip-hop & Rap tracks on SoundCloud this week</div>178 179 <!-- Tracks -->180 <div class="tracks">181 <!-- 1 -->182 <div class="track">183 <div class="track-left">184 <div class="thumb">[IMG: Track Art]</div>185 <div class="track-info">186 <div class="track-title">Chorni Sidhu Moosewala</div>187 <div class="track-meta">188 <span>Punjab2canada</span>189 <span>·</span>190 <span>2:47</span>191 </div>192 </div>193 </div>194 <div class="kebab"><span></span><span></span><span></span></div>195 </div>196 <div class="divider"></div>197 198 <!-- 2 -->199 <div class="track">200 <div class="track-left">201 <div class="thumb">[IMG: Track Art]</div>202 <div class="track-info">203 <div class="track-title">Baharle Struggler R nait</div>204 <div class="track-meta">205 <!-- play triangle -->206 <svg width="26" height="26" viewBox="0 0 24 24"><path d="M6 4l14 8-14 8z" fill="#cfcfd6"/></svg>207 <span>punjab records new</span>208 <span>· 403K · 3:54</span>209 </div>210 </div>211 </div>212 <div class="kebab"><span></span><span></span><span></span></div>213 </div>214 <div class="divider"></div>215 216 <!-- 3 -->217 <div class="track">218 <div class="track-left">219 <div class="thumb">[IMG: Track Art]</div>220 <div class="track-info">221 <div class="track-title">Aahi Gal (Full Audio) Himmat Sandhu | …</div>222 <div class="track-meta">223 <span>Fire Flies Music</span>224 <span>· 385K · 2:58</span>225 </div>226 </div>227 </div>228 <div class="kebab"><span></span><span></span><span></span></div>229 </div>230 <div class="divider"></div>231 232 <!-- 4 (Now Playing) -->233 <div class="track">234 <div class="track-left">235 <div class="thumb">[IMG: Track Art]</div>236 <div class="track-info">237 <div class="track-title">Vehle</div>238 <div class="track-meta">239 <span>NIJJAR</span>240 <span class="pill" style="margin-left:12px;">Now Playing</span>241 </div>242 </div>243 </div>244 <div class="kebab"><span></span><span></span><span></span></div>245 </div>246 <div class="divider"></div>247 248 <!-- 5 -->249 <div class="track">250 <div class="track-left">251 <div class="thumb">[IMG: Track Art]</div>252 <div class="track-info">253 <div class="track-title">Free Flow Jordan Sandhu</div>254 <div class="track-meta">255 <span>AWARA</span>256 <span>· 2:48</span>257 </div>258 </div>259 </div>260 <div class="kebab"><span></span><span></span><span></span></div>261 </div>262 <div class="divider"></div>263 264 <!-- 6 -->265 <div class="track">266 <div class="track-left">267 <div class="thumb">[IMG: Track Art]</div>268 <div class="track-info">269 <div class="track-title">Big Deal - Fateh Shergill</div>270 <div class="track-meta">271 <span>Hit Jatt</span>272 <span>· 245K · 2:44</span>273 </div>274 </div>275 </div>276 <div class="kebab"><span></span><span></span><span></span></div>277 </div>278 <div class="divider"></div>279 </div>280 281 <!-- Mini Player -->282 <div class="mini-player">283 <!-- Pause -->284 <div class="circle-btn" style="width:92px;height:92px;border-radius:46px;background:#232327;box-shadow:none;">285 <svg width="44" height="44" viewBox="0 0 24 24"><rect x="6" y="4" width="4" height="16" fill="#fff"/><rect x="14" y="4" width="4" height="16" fill="#fff"/></svg>286 </div>287 <div>288 <div class="mini-title">Vehle</div>289 <div class="mini-sub">NIJJAR</div>290 </div>291 <div class="mini-right">292 <!-- Person -->293 <svg width="40" height="40" viewBox="0 0 24 24"><circle cx="12" cy="8" r="4" fill="none" stroke="#cfcfd6" stroke-width="2"/><path d="M4 20c0-4 4-6 8-6s8 2 8 6" stroke="#cfcfd6" stroke-width="2" fill="none"/></svg>294 <!-- Heart outline -->295 <svg width="40" height="40" viewBox="0 0 24 24"><path d="M12 21s-7-4.5-9-8a5 5 0 018-5 5 5 0 018 5c-2 3.5-9 8-9 8z" fill="none" stroke="#cfcfd6" stroke-width="2"/></svg>296 </div>297 </div>298 299 <!-- Bottom Navigation -->300 <div class="nav">301 <div class="nav-item active">302 <div class="nav-icon">303 <!-- Home -->304 <svg width="40" height="40" viewBox="0 0 24 24"><path d="M3 10l9-7 9 7v10H3V10z" fill="none" stroke="#fff" stroke-width="2"/></svg>305 </div>306 <div>Home</div>307 </div>308 <div class="nav-item">309 <div class="nav-icon">310 <!-- Feed -->311 <svg width="40" height="40" viewBox="0 0 24 24"><path d="M4 4h16v4H4zM4 10h16v4H4zM4 16h10v4H4z" fill="none" stroke="#cfcfd6" stroke-width="2"/></svg>312 </div>313 <div>Feed</div>314 </div>315 <div class="nav-item">316 <div class="nav-icon">317 <!-- Search -->318 <svg width="40" height="40" viewBox="0 0 24 24"><circle cx="10" cy="10" r="6" fill="none" stroke="#cfcfd6" stroke-width="2"/><path d="M14 14l6 6" stroke="#cfcfd6" stroke-width="2"/></svg>319 </div>320 <div>Search</div>321 </div>322 <div class="nav-item">323 <div class="nav-icon">324 <!-- Library -->325 <svg width="40" height="40" viewBox="0 0 24 24"><path d="M5 4h4v16H5zM11 8h4v12h-4zM17 12h4v8h-4z" fill="none" stroke="#cfcfd6" stroke-width="2"/></svg>326 </div>327 <div>Library</div>328 </div>329 <div class="nav-item">330 <div class="nav-icon">331 <!-- Cloud -->332 <svg width="40" height="40" viewBox="0 0 24 24"><path d="M4 14a6 6 0 0111 0h3a4 4 0 010 8H5a4 4 0 01-1-8z" fill="#ff6a00"/></svg>333 </div>334 <div>Upgrade</div>335 </div>336 </div>337 338</div>339</body>340</html>