GD-ML/AndroidCode
13.4k
1<html lang="en">2<head>3<meta charset="UTF-8">4<title>Playlists UI Mock</title>5<style>6 body { margin: 0; padding: 0; background: transparent; font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Arial, sans-serif; }7 #render-target {8 width: 1080px;9 height: 2400px;10 position: relative;11 overflow: hidden;12 background: #000000;13 color: #ffffff;14 }15 16 /* Top status bar */17 .status-bar {18 position: absolute;19 top: 0;20 left: 0;21 width: 100%;22 height: 90px;23 display: flex;24 justify-content: space-between;25 align-items: center;26 padding: 0 40px;27 box-sizing: border-box;28 color: #fff;29 font-size: 38px;30 }31 .status-right {32 display: flex;33 align-items: center;34 gap: 26px;35 }36 .icon-circle { width: 28px; height: 28px; border-radius: 50%; background: #d9d9d9; opacity: 0.8; }37 .battery {38 display: inline-block; width: 68px; height: 28px; border: 3px solid #fff; border-radius: 6px; position: relative;39 }40 .battery::after { content: ""; position: absolute; right: -10px; top: 8px; width: 8px; height: 12px; background: #fff; border-radius: 2px; }41 .battery-level { position: absolute; left: 3px; top: 3px; height: 20px; width: 52px; background: #00c853; border-radius: 3px; }42 43 /* Header title */44 .header {45 position: absolute;46 top: 110px;47 left: 0;48 width: 100%;49 padding: 0 40px;50 box-sizing: border-box;51 }52 .header-title {53 font-size: 72px;54 font-weight: 800;55 text-align: center;56 letter-spacing: 0.5px;57 }58 .add-btn {59 position: absolute;60 right: 40px;61 top: 18px;62 width: 70px;63 height: 70px;64 }65 66 /* Ad banner */67 .ad-banner {68 position: absolute;69 top: 220px;70 left: 40px;71 width: 1000px;72 height: 180px;73 background: #121212;74 border: 1px solid #2a2a2a;75 border-radius: 18px;76 display: flex;77 align-items: center;78 padding: 20px 24px;79 box-sizing: border-box;80 gap: 24px;81 }82 .ad-logo {83 width: 120px; height: 120px;84 background: #E0E0E0; border: 1px solid #BDBDBD; border-radius: 28px;85 display: flex; justify-content: center; align-items: center; color: #757575; font-weight: 700;86 }87 .ad-content { flex: 1; }88 .ad-title { font-size: 46px; font-weight: 700; }89 .ad-sub { font-size: 32px; color: #cfcfcf; display: flex; align-items: center; gap: 12px; margin-top: 8px; }90 .pill-open {91 background: #2a56ff;92 color: #fff;93 font-weight: 700;94 font-size: 38px;95 padding: 16px 34px;96 border-radius: 60px;97 }98 .ad-dismiss {99 position: absolute; top: 12px; left: 12px; width: 46px; height: 46px; border-radius: 50%;100 display: flex; align-items: center; justify-content: center; color: #8a8a8a; font-size: 32px;101 }102 .ad-info {103 position: absolute; top: 12px; left: 70px; width: 46px; height: 46px; border-radius: 50%;104 display: flex; align-items: center; justify-content: center; color: #8a8a8a; font-size: 32px;105 }106 107 /* Recently played card */108 .recent-card {109 position: absolute;110 top: 430px;111 left: 40px;112 width: 1000px;113 height: 180px;114 border-radius: 20px;115 overflow: hidden;116 background: linear-gradient(90deg, #6a2a8f, #8b3d9a, #914e6c);117 display: flex;118 align-items: center;119 padding: 24px;120 box-sizing: border-box;121 gap: 24px;122 }123 .recent-text { flex: 1; }124 .recent-title { font-size: 48px; font-weight: 800; }125 .recent-sub { margin-top: 8px; font-size: 34px; color: #e5e5e5; }126 .play-btn {127 width: 96px; height: 96px; border-radius: 50%; background: rgba(0,0,0,0.65); display: flex; align-items: center; justify-content: center;128 }129 130 /* Your Playlists section */131 .section-title {132 position: absolute;133 top: 650px;134 left: 40px;135 font-size: 62px;136 font-weight: 800;137 }138 .new-playlist {139 position: absolute;140 top: 760px;141 left: 40px;142 width: 460px;143 height: 460px;144 border-radius: 18px;145 background: #101010;146 border: 1px solid #242424;147 display: flex;148 flex-direction: column;149 align-items: center;150 justify-content: center;151 gap: 26px;152 }153 .new-plus {154 width: 90px; height: 90px; border-radius: 50%;155 border: 2px dashed #7a7a7a; display: flex; align-items: center; justify-content: center;156 }157 .new-label { font-size: 44px; color: #cfcfcf; }158 159 /* Trending section */160 .trend-wrap {161 position: absolute;162 top: 1270px;163 left: 40px;164 width: 1000px;165 }166 .trend-header {167 display: flex; justify-content: space-between; align-items: baseline;168 }169 .trend-title { font-size: 64px; font-weight: 900; }170 .see-all { font-size: 46px; color: #ffb74d; font-weight: 800; }171 .trend-sub { color: #cfcfcf; font-size: 40px; margin-top: 8px; }172 .albums-row {173 margin-top: 40px; display: flex; gap: 36px;174 }175 .album-card {176 width: 300px;177 height: 340px;178 background: #1a1a1a;179 border: 1px solid #2a2a2a;180 border-radius: 16px;181 position: relative;182 overflow: hidden;183 }184 .album-img {185 width: 100%; height: 250px;186 background: #E0E0E0; border-bottom: 1px solid #BDBDBD;187 display: flex; align-items: center; justify-content: center; color: #757575;188 }189 .album-meta {190 position: absolute; bottom: 0; left: 0; width: 100%;191 padding: 14px 16px; box-sizing: border-box;192 }193 .album-name { font-size: 40px; font-weight: 800; }194 .album-count { font-size: 34px; color: #cfcfcf; margin-top: 6px; }195 196 /* YouTube-style overlay placeholder (bottom right of trending row) */197 .yt-thumb {198 position: absolute;199 right: 40px;200 top: 1700px;201 width: 480px;202 height: 270px;203 background: #E0E0E0; border: 1px solid #BDBDBD;204 display: flex; align-items: center; justify-content: center; color: #555; font-weight: 700;205 }206 207 /* Bottom navigation */208 .bottom-nav {209 position: absolute; bottom: 100px; left: 0; width: 100%;210 height: 180px; background: #0c0c0c; border-top: 1px solid #1e1e1e;211 display: flex; justify-content: space-around; align-items: center;212 }213 .nav-item { display: flex; flex-direction: column; align-items: center; gap: 16px; color: #cfcfcf; }214 .nav-item.active { color: #FFA54D; }215 .nav-label { font-size: 36px; }216 .gesture-bar {217 position: absolute; bottom: 24px; left: 50%; transform: translateX(-50%);218 width: 420px; height: 12px; background: #ffffff; border-radius: 10px; opacity: 0.9;219 }220 221 /* Simple star */222 .star {223 width: 26px; height: 26px; display: inline-block;224 }225</style>226</head>227<body>228<div id="render-target">229 230 <!-- Status bar -->231 <div class="status-bar">232 <div>11:50</div>233 <div class="status-right">234 <div class="icon-circle"></div>235 <div class="icon-circle"></div>236 <div class="battery"><div class="battery-level"></div></div>237 </div>238 </div>239 240 <!-- Header -->241 <div class="header">242 <div class="header-title">Playlists</div>243 <svg class="add-btn" viewBox="0 0 100 100">244 <circle cx="50" cy="50" r="46" stroke="#fff" stroke-width="6" fill="none" opacity="0.4"></circle>245 <path d="M50 24 v52 M24 50 h52" stroke="#fff" stroke-width="8" stroke-linecap="round"></path>246 </svg>247 </div>248 249 <!-- Ad banner -->250 <div class="ad-banner">251 <div class="ad-dismiss">×</div>252 <div class="ad-info">i</div>253 254 <div class="ad-logo">[IMG: Instagram Logo]</div>255 <div class="ad-content">256 <div class="ad-title">Instagram</div>257 <div class="ad-sub">258 <span>4.4</span>259 <svg class="star" viewBox="0 0 24 24">260 <path d="M12 2l3 7 7 1-5 4 2 7-7-4-7 4 2-7-5-4 7-1z" fill="#ffcc00"></path>261 </svg>262 <span>FREE</span>263 </div>264 </div>265 <div class="pill-open">Open</div>266 </div>267 268 <!-- Recently Played -->269 <div class="recent-card">270 <div class="recent-text">271 <div class="recent-title">Recently Played</div>272 <div class="recent-sub">1 song</div>273 </div>274 <div class="play-btn">275 <svg width="54" height="54" viewBox="0 0 24 24">276 <circle cx="12" cy="12" r="12" fill="#ffffff22"></circle>277 <path d="M9 7l8 5-8 5z" fill="#fff"></path>278 </svg>279 </div>280 </div>281 282 <!-- Your Playlists -->283 <div class="section-title">Your Playlists</div>284 <div class="new-playlist">285 <div class="new-plus">286 <svg width="50" height="50" viewBox="0 0 100 100">287 <path d="M50 20v60M20 50h60" stroke="#9a9a9a" stroke-width="8" stroke-linecap="round"></path>288 </svg>289 </div>290 <div class="new-label">New Playlist</div>291 </div>292 293 <!-- Trending Section -->294 <div class="trend-wrap">295 <div class="trend-header">296 <div class="trend-title">Trending</div>297 <div class="see-all">See All</div>298 </div>299 <div class="trend-sub">The top charts on SoundHound.</div>300 301 <div class="albums-row">302 <div class="album-card">303 <div class="album-img">[IMG: Chart Cover - All]</div>304 <div class="album-meta">305 <div class="album-name">All</div>306 <div class="album-count">100 songs</div>307 </div>308 </div>309 310 <div class="album-card">311 <div class="album-img">[IMG: Chart Cover - Pop]</div>312 <div class="album-meta">313 <div class="album-name">Pop</div>314 <div class="album-count">100 songs</div>315 </div>316 </div>317 318 <div class="album-card">319 <div class="album-img">[IMG: Album Art]</div>320 <div class="album-meta">321 <div class="album-name">Featured</div>322 <div class="album-count">Singles</div>323 </div>324 </div>325 </div>326 </div>327 328 <!-- YouTube thumbnail placeholder overlay -->329 <div class="yt-thumb">[IMG: YouTube Video Thumbnail]</div>330 331 <!-- Bottom Navigation -->332 <div class="bottom-nav">333 <div class="nav-item">334 <svg width="60" height="60" viewBox="0 0 24 24">335 <path d="M4 6h16v2H4zm0 5h12v2H4zm0 5h8v2H4z" fill="#cfcfcf"></path>336 </svg>337 <div class="nav-label">History</div>338 </div>339 <div class="nav-item">340 <svg width="60" height="60" viewBox="0 0 24 24">341 <circle cx="11" cy="11" r="7" stroke="#cfcfcf" stroke-width="2" fill="none"></circle>342 <path d="M16 16l5 5" stroke="#cfcfcf" stroke-width="2" stroke-linecap="round"></path>343 </svg>344 <div class="nav-label">Search</div>345 </div>346 <div class="nav-item active">347 <svg width="60" height="60" viewBox="0 0 24 24">348 <path d="M5 4h14v2H5zm0 6h14v2H5zm0 6h10v2H5z" fill="#FFA54D"></path>349 </svg>350 <div class="nav-label">Playlists</div>351 </div>352 </div>353 354 <div class="gesture-bar"></div>355</div>356</body>357</html>