GD-ML/AndroidCode
13.4k
1<html lang="en">2<head>3<meta charset="UTF-8">4<meta name="viewport" content="width=1080, initial-scale=1.0">5<title>Top 50: Hip-hop & Rap - Mock UI</title>6<style>7 body { margin: 0; padding: 0; background: transparent; font-family: "Inter", Arial, sans-serif; }8 #render-target {9 width: 1080px;10 height: 2400px;11 position: relative;12 overflow: hidden;13 background: #000000;14 color: #FFFFFF;15 }16 17 /* Status bar */18 .status-bar {19 height: 96px;20 padding: 0 36px;21 display: flex;22 align-items: center;23 justify-content: space-between;24 color: #EDEDED;25 font-size: 34px;26 letter-spacing: 0.5px;27 }28 .status-right { display: flex; gap: 22px; align-items: center; }29 .icon { width: 44px; height: 44px; display: inline-flex; align-items: center; justify-content: center; }30 31 /* Header / playlist section */32 .header-wrap { padding: 12px 28px 0 28px; }33 .top-row {34 display: flex; align-items: center; gap: 20px;35 }36 .back-btn {37 width: 92px; height: 92px; border-radius: 46px; background: #1B1B1B;38 display: flex; align-items: center; justify-content: center;39 }40 .playlist-block { margin-top: 20px; display: flex; gap: 26px; position: relative; }41 .cover {42 width: 220px; height: 220px; background: #E0E0E0; border: 1px solid #BDBDBD;43 display: flex; align-items: center; justify-content: center; color: #757575; border-radius: 10px;44 box-shadow: 0 10px 20px rgba(0,0,0,0.35);45 }46 .meta { flex: 1; }47 .title {48 font-size: 56px; font-weight: 800; line-height: 1.1; margin-top: 4px;49 }50 .sub {51 color: #B8B8B8; font-size: 30px; margin-top: 12px;52 }53 .byline {54 display: flex; align-items: center; gap: 12px; color: #CFCFCF; font-size: 32px; margin-top: 18px;55 }56 .cloud { width: 40px; height: 40px; }57 .header-actions {58 margin-top: 26px; display: flex; align-items: center; gap: 28px;59 color: #DADADA; font-size: 34px;60 }61 .heart {62 display: flex; align-items: center; gap: 14px; color: #DADADA;63 padding: 8px 0;64 }65 .kebab { width: 40px; height: 40px; opacity: 0.9; }66 67 /* Shuffle + Play floating on the right */68 .play-controls {69 position: absolute; right: 16px; top: 70px; display: flex; align-items: center; gap: 28px;70 }71 .shuffle {72 width: 78px; height: 78px; border-radius: 39px; background: #1F1F1F; display: flex; align-items: center; justify-content: center;73 }74 .play-btn {75 width: 140px; height: 140px; border-radius: 70px; background: #FFFFFF; display: flex; align-items: center; justify-content: center;76 }77 78 /* Section description */79 .desc {80 padding: 26px 28px 10px 28px;81 color: #D6D6D6;82 font-size: 34px;83 line-height: 1.35;84 }85 86 /* Track list */87 .list { padding: 6px 0 220px 0; }88 .track {89 display: flex; align-items: center;90 padding: 18px 28px;91 gap: 28px;92 }93 .art {94 width: 144px; height: 144px; background: #E0E0E0; border: 1px solid #BDBDBD;95 display: flex; align-items: center; justify-content: center; color: #757575; border-radius: 10px;96 }97 .t-info { flex: 1; min-width: 0; }98 .t-title {99 color: #FFFFFF; font-size: 40px; font-weight: 700; white-space: nowrap; overflow: hidden; text-overflow: ellipsis;100 }101 .t-sub { color: #B8B8B8; font-size: 30px; margin-top: 6px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }102 .t-meta { color: #B8B8B8; font-size: 28px; margin-top: 10px; display: flex; align-items: center; gap: 12px; }103 .tiny-play { width: 26px; height: 26px; }104 .t-kebab { width: 40px; height: 40px; margin-left: 10px; }105 106 /* Bottom nav */107 .bottom-nav {108 position: absolute; left: 0; right: 0; bottom: 0;109 height: 160px; background: #0E0E0E; border-top: 1px solid #1F1F1F;110 display: flex; align-items: center; justify-content: space-around;111 }112 .nav-item { display: flex; flex-direction: column; align-items: center; gap: 14px; color: #CFCFCF; font-size: 28px; }113 .nav-item.active { color: #FFFFFF; }114 .nav-icon { width: 56px; height: 56px; }115</style>116</head>117<body>118<div id="render-target">119 120 <!-- Status Bar -->121 <div class="status-bar">122 <div>8:05</div>123 <div class="status-right">124 <span class="icon" title="Signal">125 <svg viewBox="0 0 24 24" width="36" height="36" fill="#EDEDED">126 <rect x="2" y="14" width="3" height="8"></rect>127 <rect x="7" y="10" width="3" height="12"></rect>128 <rect x="12" y="6" width="3" height="16"></rect>129 <rect x="17" y="2" width="3" height="20"></rect>130 </svg>131 </span>132 <span class="icon" title="WiFi">133 <svg viewBox="0 0 24 24" width="36" height="36" fill="none" stroke="#EDEDED" stroke-width="2">134 <path d="M2 8c5-4 15-4 20 0"></path>135 <path d="M5 12c3-3 11-3 14 0"></path>136 <path d="M8 16c2-2 6-2 8 0"></path>137 <circle cx="12" cy="19" r="1.8" fill="#EDEDED" stroke="none"></circle>138 </svg>139 </span>140 <span class="icon" title="Battery">141 <svg viewBox="0 0 28 16" width="44" height="30" fill="none" stroke="#EDEDED" stroke-width="2">142 <rect x="1" y="2" width="22" height="12" rx="2"></rect>143 <rect x="3" y="4" width="18" height="8" fill="#EDEDED" stroke="none"></rect>144 <rect x="23" y="6" width="4" height="4" rx="1" fill="#EDEDED" stroke="none"></rect>145 </svg>146 </span>147 </div>148 </div>149 150 <!-- Header and playlist information -->151 <div class="header-wrap">152 <div class="top-row">153 <div class="back-btn">154 <svg viewBox="0 0 24 24" width="46" height="46" fill="#FFFFFF">155 <path d="M15.5 4l-8 8 8 8 2-2-6-6 6-6z"></path>156 </svg>157 </div>158 </div>159 160 <div class="playlist-block">161 <div class="cover">[IMG: Playlist Cover Art]</div>162 <div class="meta">163 <div class="title">Top 50: Hip-hop & Rap</div>164 <div class="sub">Playlist • 50 Tracks • 2:43:30 • 16h ago</div>165 <div class="byline">166 <svg class="cloud" viewBox="0 0 24 24" fill="#FF7700">167 <path d="M7 17h9a4 4 0 0 0 0-8 5 5 0 0 0-9-1A4 4 0 0 0 7 17z"></path>168 </svg>169 <span>By SoundCloud</span>170 </div>171 172 <div class="header-actions">173 <div class="heart">174 <svg viewBox="0 0 24 24" width="36" height="36" fill="#FFFFFF">175 <path d="M12 21s-7-4.6-9.5-8.3C-0.2 9.3 1.6 5 5.4 5c2 0 3.3 1.1 4.1 2.2C10.9 6.1 12.2 5 14.2 5c3.8 0 5.6 4.3 2.9 7.7C19 16.4 12 21 12 21z"></path>176 </svg>177 <span>8.9K</span>178 </div>179 <svg class="kebab" viewBox="0 0 24 24" fill="#DADADA">180 <circle cx="12" cy="4" r="2"></circle>181 <circle cx="12" cy="12" r="2"></circle>182 <circle cx="12" cy="20" r="2"></circle>183 </svg>184 </div>185 </div>186 187 <div class="play-controls">188 <div class="shuffle">189 <svg viewBox="0 0 24 24" width="40" height="40" fill="none" stroke="#FFFFFF" stroke-width="2">190 <path d="M3 7h4l4 5 4-5h6"></path>191 <path d="M3 17h4l4-5 4 5h6"></path>192 <path d="M18 5l2 2-2 2"></path>193 <path d="M18 15l2 2-2 2"></path>194 </svg>195 </div>196 <div class="play-btn">197 <svg viewBox="0 0 24 24" width="70" height="70" fill="#000">198 <path d="M8 5v14l11-7z"></path>199 </svg>200 </div>201 </div>202 </div>203 </div>204 205 <!-- Section description -->206 <div class="desc">The most played Hip-hop & Rap tracks on SoundCloud this week</div>207 208 <!-- List -->209 <div class="list">210 <!-- 1 -->211 <div class="track">212 <div class="art">[IMG: Cover Art]</div>213 <div class="t-info">214 <div class="t-title">Chorni Sidhu Moosewala</div>215 <div class="t-sub">Punjab2canada</div>216 <div class="t-meta">2:47</div>217 </div>218 <svg class="t-kebab" viewBox="0 0 24 24" fill="#DADADA">219 <circle cx="12" cy="4" r="2"></circle>220 <circle cx="12" cy="12" r="2"></circle>221 <circle cx="12" cy="20" r="2"></circle>222 </svg>223 </div>224 225 <!-- 2 -->226 <div class="track">227 <div class="art">[IMG: Cover Art]</div>228 <div class="t-info">229 <div class="t-title">Baharle Struggler R nait</div>230 <div class="t-sub">punjab records new</div>231 <div class="t-meta">232 <svg class="tiny-play" viewBox="0 0 24 24" fill="#B8B8B8"><path d="M8 5v14l11-7z"></path></svg>233 403K • 3:54234 </div>235 </div>236 <svg class="t-kebab" viewBox="0 0 24 24" fill="#DADADA">237 <circle cx="12" cy="4" r="2"></circle>238 <circle cx="12" cy="12" r="2"></circle>239 <circle cx="12" cy="20" r="2"></circle>240 </svg>241 </div>242 243 <!-- 3 -->244 <div class="track">245 <div class="art">[IMG: Cover Art]</div>246 <div class="t-info">247 <div class="t-title">Aahi Gal (Full Audio) Himmat Sandhu | …</div>248 <div class="t-sub">Fire Flies Music</div>249 <div class="t-meta">250 <svg class="tiny-play" viewBox="0 0 24 24" fill="#B8B8B8"><path d="M8 5v14l11-7z"></path></svg>251 385K • 2:58252 </div>253 </div>254 <svg class="t-kebab" viewBox="0 0 24 24" fill="#DADADA">255 <circle cx="12" cy="4" r="2"></circle>256 <circle cx="12" cy="12" r="2"></circle>257 <circle cx="12" cy="20" r="2"></circle>258 </svg>259 </div>260 261 <!-- 4 -->262 <div class="track">263 <div class="art">[IMG: Cover Art]</div>264 <div class="t-info">265 <div class="t-title">Vehle</div>266 <div class="t-sub">NIJJAR</div>267 <div class="t-meta">268 <svg class="tiny-play" viewBox="0 0 24 24" fill="#B8B8B8"><path d="M8 5v14l11-7z"></path></svg>269 671K • 2:13270 </div>271 </div>272 <svg class="t-kebab" viewBox="0 0 24 24" fill="#DADADA">273 <circle cx="12" cy="4" r="2"></circle>274 <circle cx="12" cy="12" r="2"></circle>275 <circle cx="12" cy="20" r="2"></circle>276 </svg>277 </div>278 279 <!-- 5 -->280 <div class="track">281 <div class="art">[IMG: Cover Art]</div>282 <div class="t-info">283 <div class="t-title">Free Flow Jordan Sandhu</div>284 <div class="t-sub">AWARA</div>285 <div class="t-meta">2:48</div>286 </div>287 <svg class="t-kebab" viewBox="0 0 24 24" fill="#DADADA">288 <circle cx="12" cy="4" r="2"></circle>289 <circle cx="12" cy="12" r="2"></circle>290 <circle cx="12" cy="20" r="2"></circle>291 </svg>292 </div>293 294 <!-- 6 -->295 <div class="track">296 <div class="art">[IMG: Cover Art]</div>297 <div class="t-info">298 <div class="t-title">Big Deal - Fateh Shergill</div>299 <div class="t-sub">Hit Jatt</div>300 <div class="t-meta">301 <svg class="tiny-play" viewBox="0 0 24 24" fill="#B8B8B8"><path d="M8 5v14l11-7z"></path></svg>302 245K • 2:44303 </div>304 </div>305 <svg class="t-kebab" viewBox="0 0 24 24" fill="#DADADA">306 <circle cx="12" cy="4" r="2"></circle>307 <circle cx="12" cy="12" r="2"></circle>308 <circle cx="12" cy="20" r="2"></circle>309 </svg>310 </div>311 312 <!-- Partial next item (preview) -->313 <div class="track">314 <div class="art">[IMG: Cover Art]</div>315 <div class="t-info">316 <div class="t-title">150 - JASSA | AMMY GILL | MXRCI</div>317 <div class="t-sub">—</div>318 <div class="t-meta">—</div>319 </div>320 <svg class="t-kebab" viewBox="0 0 24 24" fill="#DADADA">321 <circle cx="12" cy="4" r="2"></circle>322 <circle cx="12" cy="12" r="2"></circle>323 <circle cx="12" cy="20" r="2"></circle>324 </svg>325 </div>326 </div>327 328 <!-- Bottom Navigation -->329 <div class="bottom-nav">330 <div class="nav-item active">331 <svg class="nav-icon" viewBox="0 0 24 24" fill="#FFFFFF">332 <path d="M12 3l9 8h-3v8h-5v-5H11v5H6v-8H3z"></path>333 </svg>334 <div>Home</div>335 </div>336 <div class="nav-item">337 <svg class="nav-icon" viewBox="0 0 24 24" fill="#CFCFCF">338 <rect x="3" y="4" width="18" height="6" rx="2"></rect>339 <rect x="3" y="14" width="18" height="6" rx="2"></rect>340 </svg>341 <div>Feed</div>342 </div>343 <div class="nav-item">344 <svg class="nav-icon" viewBox="0 0 24 24" fill="none" stroke="#CFCFCF" stroke-width="2">345 <circle cx="11" cy="11" r="7"></circle>346 <line x1="16.5" y1="16.5" x2="22" y2="22"></line>347 </svg>348 <div>Search</div>349 </div>350 <div class="nav-item">351 <svg class="nav-icon" viewBox="0 0 24 24" fill="#CFCFCF">352 <rect x="3" y="4" width="5" height="16" rx="1"></rect>353 <rect x="10" y="4" width="5" height="16" rx="1"></rect>354 <rect x="17" y="8" width="4" height="12" rx="1"></rect>355 </svg>356 <div>Library</div>357 </div>358 <div class="nav-item">359 <svg class="nav-icon" viewBox="0 0 24 24" fill="#CFCFCF">360 <path d="M7 17h9a4 4 0 0 0 0-8 5 5 0 0 0-9-1A4 4 0 0 0 7 17z"></path>361 </svg>362 <div>Upgrade</div>363 </div>364 </div>365 366</div>367</body>368</html>