GD-ML/AndroidCode
13.4k
1<html lang="en">2<head>3<meta charset="UTF-8">4<title>SoundCloud Library Mock</title>5<style>6 body { margin: 0; padding: 0; background: transparent; font-family: Arial, Helvetica, sans-serif; }7 #render-target {8 width: 1080px; height: 2400px;9 position: relative; overflow: hidden;10 background: #000000;11 color: #ffffff;12 }13 14 /* Status bar */15 .status-bar {16 position: absolute; top: 0; left: 0; right: 0;17 height: 96px; padding: 0 36px;18 display: flex; align-items: center; justify-content: space-between;19 font-weight: 600; font-size: 40px;20 }21 .status-icons { display: flex; align-items: center; gap: 28px; }22 .battery {23 width: 70px; height: 36px; border: 4px solid #fff; border-radius: 8px; position: relative;24 }25 .battery::after {26 content: ""; position: absolute; right: -14px; top: 10px; width: 10px; height: 16px; background: #fff; border-radius: 2px;27 }28 .battery .level { position: absolute; left: 4px; top: 4px; height: 24px; width: 44px; background: #ffffff; }29 30 .wifi {31 width: 44px; height: 36px; position: relative;32 }33 .wifi:before, .wifi:after {34 content: ""; position: absolute; left: 0; right: 0; border: 4px solid #fff; border-top-color: transparent; border-left-color: transparent; border-right-color: transparent; border-radius: 50%; 35 }36 .wifi:before { top: 2px; width: 44px; height: 44px; }37 .wifi:after { top: 10px; width: 28px; height: 28px; }38 39 /* Header */40 .header {41 position: absolute; top: 96px; left: 0; right: 0; height: 140px;42 display: flex; align-items: center; justify-content: space-between;43 padding: 0 36px;44 }45 .title { font-size: 72px; font-weight: 800; letter-spacing: 1px; }46 .top-actions { display: flex; align-items: center; gap: 28px; }47 .upgrade-tag { position: absolute; top: 96px; left: 50%; transform: translateX(-50%); color: #FF6A00; font-size: 46px; letter-spacing: 2px; font-weight: 800; }48 49 /* Simple icons */50 .icon-btn { width: 72px; height: 72px; display: grid; place-items: center; border-radius: 50%; }51 .avatar {52 width: 72px; height: 72px; border-radius: 50%;53 background: #222; border: 3px solid #444;54 }55 .gear svg, .cast svg { width: 48px; height: 48px; fill: none; stroke: #fff; stroke-width: 6; }56 57 /* Promo banner */58 .promo {59 position: absolute; top: 260px; left: 30px; width: 1020px; height: 420px;60 background: linear-gradient(135deg, #7B2BD9, #D04F8B 60%, #E45535);61 border-radius: 28px; padding: 40px 48px; box-sizing: border-box;62 }63 .promo h2 { margin: 0; font-size: 56px; font-weight: 900; }64 .promo p { margin: 22px 0 36px; font-size: 38px; color: #F3F3F3; line-height: 1.3; }65 .promo .cta {66 display: inline-block; background: #fff; color: #000; font-weight: 800;67 padding: 22px 36px; border-radius: 16px; font-size: 40px;68 }69 .promo .close {70 position: absolute; top: 24px; right: 24px; width: 56px; height: 56px;71 display: grid; place-items: center; color: #fff; font-size: 52px; font-weight: 700;72 }73 74 /* Menu list */75 .menu { position: absolute; top: 720px; left: 30px; right: 30px; }76 .menu-item {77 height: 120px; border-bottom: 1px solid #1f1f1f;78 display: flex; align-items: center; justify-content: space-between;79 font-size: 46px; padding: 0 12px;80 }81 .chev {82 width: 40px; height: 40px; border-right: 10px solid #fff; border-top: 10px solid #fff;83 transform: rotate(-45deg); margin-right: 16px;84 }85 86 /* Recently played */87 .recent-header {88 position: absolute; top: 1400px; left: 30px; right: 30px;89 display: flex; align-items: center; justify-content: space-between;90 }91 .recent-header .label { font-size: 56px; font-weight: 900; }92 .recent-header .see-all { font-size: 46px; color: #9e9e9e; }93 94 .card-stack { position: absolute; top: 1520px; left: 30px; width: 420px; height: 420px; }95 .stack-back, .stack-mid, .stack-top {96 position: absolute; width: 420px; height: 420px; border-radius: 20px;97 }98 .stack-back { left: 40px; top: 40px; background: #1A1A1A; }99 .stack-mid { left: 20px; top: 20px; background: #1F1F1F; }100 .stack-top { left: 0; top: 0; background: #E0E0E0; border: 1px solid #BDBDBD; display: flex; flex-direction: column; justify-content: flex-end; align-items: center; overflow: hidden; }101 .stack-top .img-label { color: #757575; font-size: 36px; margin-top: 40px; }102 .stack-top .title-bar {103 width: 100%; background: rgba(33,33,33,0.9); color: #fff;104 padding: 18px 24px; box-sizing: border-box; font-size: 42px; font-weight: 800; border-bottom-left-radius: 20px; border-bottom-right-radius: 20px;105 }106 107 .album-caption { position: absolute; top: 1970px; left: 30px; color: #fff; font-size: 46px; font-weight: 700; }108 109 /* Mini player */110 .mini-player {111 position: absolute; bottom: 160px; left: 0; right: 0; height: 160px;112 background: linear-gradient(180deg, rgba(40,40,40,0.7), rgba(20,20,20,0.9));113 display: flex; align-items: center; padding: 0 24px; box-sizing: border-box;114 }115 .play-btn {116 width: 90px; height: 90px; border-radius: 16px; background: #2A2A2A;117 display: grid; place-items: center; margin-right: 24px;118 }119 .play-btn svg { width: 44px; height: 44px; fill: #fff; }120 .now-info { flex: 1; }121 .now-title { font-size: 46px; font-weight: 800; }122 .now-sub { font-size: 36px; color: #cfcfcf; }123 124 .mini-actions { display: flex; align-items: center; gap: 28px; padding-left: 24px; }125 .mini-actions svg { width: 56px; height: 56px; fill: none; stroke: #fff; stroke-width: 6; }126 127 .mini-art {128 width: 140px; height: 140px; margin-left: 12px;129 background: #E0E0E0; border: 1px solid #BDBDBD; display: flex; justify-content: center; align-items: center; color: #757575; font-size: 30px; border-radius: 14px;130 }131 132 /* Bottom navigation */133 .bottom-nav {134 position: absolute; bottom: 0; left: 0; right: 0; height: 160px;135 background: #0d0d0d; border-top: 1px solid #1f1f1f;136 display: flex; align-items: center; justify-content: space-around;137 }138 .nav-item { display: flex; flex-direction: column; align-items: center; gap: 14px; color: #C7C7C7; font-size: 34px; }139 .nav-item.active { color: #ffffff; }140 .nav-item svg { width: 56px; height: 56px; fill: none; stroke: currentColor; stroke-width: 6; }141</style>142</head>143<body>144<div id="render-target">145 146 <!-- Status Bar -->147 <div class="status-bar">148 <div>1:17</div>149 <div class="status-icons">150 <div class="wifi"></div>151 <div class="battery"><div class="level"></div></div>152 </div>153 </div>154 155 <!-- Header -->156 <div class="header">157 <div class="title">Library</div>158 <div class="top-actions">159 <div class="icon-btn cast">160 <svg viewBox="0 0 24 24"><path d="M3 5h18v12h-9"/><path d="M3 12a7 7 0 0 1 7 7"/><path d="M3 16a3 3 0 0 1 3 3"/></svg>161 </div>162 <div class="icon-btn gear">163 <svg viewBox="0 0 24 24"><circle cx="12" cy="12" r="3"/><path d="M4 12h2M18 12h2M12 4v2M12 18v2M6.5 6.5l1.5 1.5M16 16l1.5 1.5M16 8l1.5-1.5M6.5 17.5l1.5-1.5"/></svg>164 </div>165 <div class="avatar"></div>166 </div>167 <div class="upgrade-tag">UPGRADE</div>168 </div>169 170 <!-- Promo Banner -->171 <div class="promo">172 <div class="close">×</div>173 <h2>Get SoundCloud Go+</h2>174 <p>Listen to your likes, playlists & albums offline and ad‑free</p>175 <div class="cta">Get SoundCloud Go+</div>176 </div>177 178 <!-- Menu List -->179 <div class="menu">180 <div class="menu-item">181 <span>Liked tracks</span>182 <div class="chev"></div>183 </div>184 <div class="menu-item">185 <span>Playlists</span>186 <div class="chev"></div>187 </div>188 <div class="menu-item">189 <span>Albums</span>190 <div class="chev"></div>191 </div>192 <div class="menu-item">193 <span>Following</span>194 <div class="chev"></div>195 </div>196 <div class="menu-item">197 <span>Stations</span>198 <div class="chev"></div>199 </div>200 </div>201 202 <!-- Recently Played -->203 <div class="recent-header">204 <div class="label">Recently played</div>205 <div class="see-all">See All</div>206 </div>207 208 <div class="card-stack">209 <div class="stack-back"></div>210 <div class="stack-mid"></div>211 <div class="stack-top">212 <div class="img-label">[IMG: Album Art — The Mambo King]</div>213 <div class="title-bar">TITO PUENTE</div>214 </div>215 </div>216 217 <div class="album-caption">The Mambo</div>218 219 <!-- Mini Player -->220 <div class="mini-player">221 <div class="play-btn">222 <svg viewBox="0 0 24 24"><polygon points="6,4 20,12 6,20" /></svg>223 </div>224 <div class="now-info">225 <div class="now-title">Tito Mambo</div>226 <div class="now-sub">Tito Puente</div>227 </div>228 <div class="mini-actions">229 <!-- person add -->230 <svg viewBox="0 0 24 24">231 <circle cx="9" cy="8" r="4"/>232 <path d="M2 20c0-4 5-6 7-6s7 2 7 6"/>233 <path d="M19 7v6M16 10h6"/>234 </svg>235 <!-- heart -->236 <svg viewBox="0 0 24 24">237 <path d="M12 21s-7-4.5-9-8.5C1 9 3.5 6.5 6.5 6.5c2 0 3.3 1.1 3.5 1.5.2-.4 1.5-1.5 3.5-1.5C16.5 6.5 19 9 21 12.5 19 16.5 12 21 12 21z"/>238 </svg>239 </div>240 <div class="mini-art">[IMG: Album Art]</div>241 </div>242 243 <!-- Bottom Navigation -->244 <div class="bottom-nav">245 <div class="nav-item">246 <svg viewBox="0 0 24 24"><path d="M3 11l9-7 9 7"/><path d="M5 10v10h14V10"/></svg>247 <div>Home</div>248 </div>249 <div class="nav-item">250 <svg viewBox="0 0 24 24"><path d="M4 5h16v4H4z"/><path d="M4 11h16v8H4z"/></svg>251 <div>Feed</div>252 </div>253 <div class="nav-item">254 <svg viewBox="0 0 24 24"><circle cx="11" cy="11" r="6"/><path d="M20 20l-4-4"/></svg>255 <div>Search</div>256 </div>257 <div class="nav-item active">258 <svg viewBox="0 0 24 24"><path d="M4 6h6v12H4z"/><path d="M14 6h6v12h-6z"/></svg>259 <div>Library</div>260 </div>261 <div class="nav-item">262 <svg viewBox="0 0 24 24"><path d="M6 16a6 6 0 0 1 12 0"/><path d="M10 16h4"/><path d="M12 6a4 4 0 0 0-4 4"/></svg>263 <div>Upgrade</div>264 </div>265 </div>266 267</div>268</body>269</html>