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>Playlist Screen Mock</title>7<style>8 body { margin: 0; padding: 0; background: transparent; font-family: "Roboto", Arial, Helvetica, sans-serif; }9 #render-target {10 width: 1080px; height: 2400px; position: relative; overflow: hidden;11 background: #000000; color: #FFFFFF;12 }13 14 /* Status bar */15 .status-bar {16 position: absolute; top: 0; left: 0; width: 100%; height: 90px;17 display: flex; align-items: center; justify-content: space-between;18 padding: 0 40px; font-size: 34px; color: #EEE;19 }20 .status-left { display: flex; align-items: center; gap: 20px; }21 .status-right { display: flex; align-items: center; gap: 20px; }22 .icon { display: inline-flex; align-items: center; justify-content: center; }23 24 /* Header */25 .header {26 position: absolute; top: 120px; left: 40px; right: 40px;27 display: flex; align-items: center; justify-content: space-between;28 }29 .header-left { display: flex; align-items: center; gap: 24px; }30 .back-btn svg { width: 52px; height: 52px; }31 .avatar {32 width: 56px; height: 56px; border-radius: 50%;33 background: #C25A3D; display: flex; align-items: center; justify-content: center;34 font-weight: 600;35 }36 .title-wrap { display: flex; flex-direction: column; }37 .title-wrap .name { font-size: 42px; font-weight: 600; letter-spacing: 0.2px; }38 .title-wrap .sub { font-size: 30px; color: #9E9E9E; margin-top: 4px; }39 .search-btn svg { width: 52px; height: 52px; }40 41 /* Hero title + actions */42 .hero {43 position: absolute; top: 820px; left: 0; right: 0;44 display: flex; align-items: center; flex-direction: column;45 }46 .hero .playlist-title {47 font-size: 88px; font-weight: 800; letter-spacing: 6px;48 }49 .actions {50 margin-top: 60px; display: flex; align-items: center; justify-content: center; gap: 46px;51 }52 .circle-btn {53 width: 120px; height: 120px; border-radius: 60px;54 background: #141414; border: 1px solid #2A2A2A;55 display: flex; align-items: center; justify-content: center;56 }57 .circle-btn svg { width: 56px; height: 56px; }58 .play-btn {59 width: 160px; height: 160px; border-radius: 80px;60 background: #FFFFFF; color: #000000; box-shadow: 0 6px 18px rgba(0,0,0,0.35);61 display: flex; align-items: center; justify-content: center;62 }63 .play-btn svg { width: 70px; height: 70px; }64 65 /* List */66 .list {67 position: absolute; top: 1270px; left: 40px; right: 40px;68 display: flex; flex-direction: column; gap: 24px;69 }70 .list-item {71 display: flex; align-items: center; justify-content: space-between;72 padding-right: 10px;73 }74 .list-left { display: flex; align-items: center; gap: 28px; }75 .thumb {76 width: 140px; height: 140px; background: #E0E0E0; border: 1px solid #BDBDBD;77 display: flex; align-items: center; justify-content: center; color: #757575; font-size: 26px; text-align: center; padding: 8px;78 }79 .text {80 display: flex; flex-direction: column;81 }82 .title { font-size: 40px; font-weight: 600; }83 .subtitle { font-size: 32px; color: #B0B0B0; margin-top: 6px; }84 .kebab svg { width: 48px; height: 48px; }85 86 .suggestions {87 position: absolute; top: 1980px; left: 40px; right: 40px;88 font-size: 54px; font-weight: 800; color: #FFFFFF;89 }90 91 /* Mini player */92 .mini-player {93 position: absolute; left: 0; right: 0; bottom: 220px;94 height: 200px; background: #232323; border-top: 1px solid #3A3A3A;95 display: flex; align-items: center; justify-content: space-between; padding: 0 30px;96 }97 .mini-left { display: flex; align-items: center; gap: 24px; }98 .mini-text .song { font-size: 40px; font-weight: 600; }99 .mini-text .artist { font-size: 32px; color: #B0B0B0; margin-top: 6px; }100 .mini-right { display: flex; align-items: center; gap: 36px; }101 .mini-icon svg { width: 52px; height: 52px; }102 .mini-play svg { width: 60px; height: 60px; }103 104 /* Bottom navigation */105 .bottom-nav {106 position: absolute; left: 0; right: 0; bottom: 0; height: 220px;107 background: #111111; border-top: 1px solid #2A2A2A; padding-top: 22px;108 display: flex; align-items: center; justify-content: space-around;109 }110 .nav-item { display: flex; flex-direction: column; align-items: center; gap: 12px; color: #CCCCCC; }111 .nav-item svg { width: 56px; height: 56px; }112 .nav-label { font-size: 30px; }113 .gesture {114 position: absolute; left: 50%; transform: translateX(-50%);115 bottom: 180px; width: 340px; height: 10px; background: #CFCFCF; border-radius: 6px; opacity: 0.25;116 }117</style>118</head>119<body>120<div id="render-target">121 122 <!-- Status bar -->123 <div class="status-bar">124 <div class="status-left">125 <div>1:30</div>126 </div>127 <div class="status-right">128 <!-- Wi-Fi -->129 <div class="icon">130 <svg viewBox="0 0 24 24" fill="none" stroke="#FFF" stroke-width="2">131 <path d="M3 9c4-3 14-3 18 0"></path>132 <path d="M6 12c3-2 9-2 12 0"></path>133 <path d="M9 15c2-1 4-1 6 0"></path>134 <circle cx="12" cy="18" r="1.5" fill="#FFF"></circle>135 </svg>136 </div>137 <!-- Battery -->138 <div class="icon">139 <svg viewBox="0 0 30 24" fill="none" stroke="#FFF" stroke-width="2">140 <rect x="2" y="5" width="22" height="14" rx="2"></rect>141 <rect x="26" y="9" width="3" height="6" rx="1" fill="#FFF"></rect>142 <rect x="4" y="7" width="16" height="10" fill="#FFF"></rect>143 </svg>144 </div>145 </div>146 </div>147 148 <!-- Header -->149 <div class="header">150 <div class="header-left">151 <div class="back-btn icon">152 <svg viewBox="0 0 32 32" fill="none" stroke="#FFF" stroke-width="3" stroke-linecap="round" stroke-linejoin="round">153 <path d="M20 6 L8 16 L20 26"></path>154 </svg>155 </div>156 <div class="avatar">C</div>157 <div class="title-wrap">158 <div class="name">Cerebra Research</div>159 <div class="sub">Public</div>160 </div>161 </div>162 <div class="search-btn icon">163 <svg viewBox="0 0 32 32" fill="none" stroke="#FFF" stroke-width="3" stroke-linecap="round">164 <circle cx="14" cy="14" r="9"></circle>165 <path d="M22 22 L30 30"></path>166 </svg>167 </div>168 </div>169 170 <!-- Hero -->171 <div class="hero">172 <div class="playlist-title">XYZ</div>173 <div class="actions">174 <div class="circle-btn icon">175 <!-- Download -->176 <svg viewBox="0 0 32 32" fill="none" stroke="#FFF" stroke-width="2.8" stroke-linecap="round" stroke-linejoin="round">177 <path d="M16 6 V20"></path>178 <path d="M10 14 L16 20 L22 14"></path>179 <path d="M6 26 H26"></path>180 </svg>181 </div>182 <div class="circle-btn icon">183 <!-- Edit -->184 <svg viewBox="0 0 32 32" fill="none" stroke="#FFF" stroke-width="2.6" stroke-linecap="round" stroke-linejoin="round">185 <path d="M6 24 L10 24 L24 10 L20 6 L6 20 Z"></path>186 </svg>187 </div>188 <div class="play-btn icon">189 <!-- Play -->190 <svg viewBox="0 0 40 40" fill="#000">191 <polygon points="14,10 32,20 14,30"></polygon>192 </svg>193 </div>194 <div class="circle-btn icon">195 <!-- Share -->196 <svg viewBox="0 0 32 32" fill="none" stroke="#FFF" stroke-width="2.6" stroke-linecap="round" stroke-linejoin="round">197 <circle cx="8" cy="20" r="3"></circle>198 <circle cx="24" cy="12" r="3"></circle>199 <circle cx="24" cy="24" r="3"></circle>200 <path d="M10.5 19 L21 13.5"></path>201 <path d="M10.5 21 L21 23"></path>202 </svg>203 </div>204 <div class="circle-btn icon">205 <!-- More (kebab) -->206 <svg viewBox="0 0 32 32" fill="#FFF">207 <circle cx="16" cy="10" r="2.6"></circle>208 <circle cx="16" cy="16" r="2.6"></circle>209 <circle cx="16" cy="22" r="2.6"></circle>210 </svg>211 </div>212 </div>213 </div>214 215 <!-- List -->216 <div class="list">217 <!-- Add a song -->218 <div class="list-item">219 <div class="list-left">220 <div class="thumb">[IMG: Add a song tile]</div>221 <div class="text">222 <div class="title">Add a song</div>223 </div>224 </div>225 </div>226 227 <!-- Track 1 -->228 <div class="list-item">229 <div class="list-left">230 <div class="thumb">[IMG: Album Art]</div>231 <div class="text">232 <div class="title">Apna Bana Le (From "Bhediya")</div>233 <div class="subtitle">Arijit Singh & Sachin-Jigar</div>234 </div>235 </div>236 <div class="kebab icon">237 <svg viewBox="0 0 32 32" fill="#BBB">238 <circle cx="16" cy="8" r="2.8"></circle>239 <circle cx="16" cy="16" r="2.8"></circle>240 <circle cx="16" cy="24" r="2.8"></circle>241 </svg>242 </div>243 </div>244 245 <!-- Track 2 -->246 <div class="list-item">247 <div class="list-left">248 <div class="thumb">[IMG: Album Art]</div>249 <div class="text">250 <div class="title">Aane Se Uske Aaye Bahar</div>251 <div class="subtitle">Mohammed Rafi</div>252 </div>253 </div>254 <div class="kebab icon">255 <svg viewBox="0 0 32 32" fill="#BBB">256 <circle cx="16" cy="8" r="2.8"></circle>257 <circle cx="16" cy="16" r="2.8"></circle>258 <circle cx="16" cy="24" r="2.8"></circle>259 </svg>260 </div>261 </div>262 263 <!-- Track 3 -->264 <div class="list-item">265 <div class="list-left">266 <div class="thumb">[IMG: Album Art]</div>267 <div class="text">268 <div class="title">Imagine (Ultimate Mix)</div>269 <div class="subtitle">John Lennon</div>270 </div>271 </div>272 <div class="kebab icon">273 <svg viewBox="0 0 32 32" fill="#BBB">274 <circle cx="16" cy="8" r="2.8"></circle>275 <circle cx="16" cy="16" r="2.8"></circle>276 <circle cx="16" cy="24" r="2.8"></circle>277 </svg>278 </div>279 </div>280 </div>281 282 <!-- Suggestions heading -->283 <div class="suggestions">Suggestions</div>284 285 <!-- Mini player -->286 <div class="mini-player">287 <div class="mini-left">288 <div class="thumb" style="width:160px;height:160px;">[IMG: Track Art]</div>289 <div class="mini-text">290 <div class="song">Tere Vaaste - Unplugged</div>291 <div class="artist">Varun Jain</div>292 </div>293 </div>294 <div class="mini-right">295 <div class="mini-icon icon">296 <!-- Cast -->297 <svg viewBox="0 0 32 32" fill="none" stroke="#FFF" stroke-width="2.4" stroke-linecap="round" stroke-linejoin="round">298 <rect x="4" y="6" width="24" height="18" rx="2"></rect>299 <path d="M4 24 C8 24 12 28 16 28"></path>300 <path d="M4 20 C6 20 8 22 10 24"></path>301 <circle cx="6" cy="26" r="2" fill="#FFF"></circle>302 </svg>303 </div>304 <div class="mini-play icon">305 <!-- Play -->306 <svg viewBox="0 0 40 40" fill="#FFF">307 <polygon points="14,10 32,20 14,30"></polygon>308 </svg>309 </div>310 </div>311 </div>312 313 <!-- Gesture pill -->314 <div class="gesture"></div>315 316 <!-- Bottom Nav -->317 <div class="bottom-nav">318 <div class="nav-item">319 <svg viewBox="0 0 32 32" fill="none" stroke="#CCC" stroke-width="2.6" stroke-linecap="round" stroke-linejoin="round">320 <path d="M4 14 L16 4 L28 14 V26 H20 V18 H12 V26 H4 Z"></path>321 </svg>322 <div class="nav-label">Home</div>323 </div>324 <div class="nav-item">325 <svg viewBox="0 0 32 32" fill="none" stroke="#CCC" stroke-width="2.6" stroke-linecap="round" stroke-linejoin="round">326 <circle cx="14" cy="14" r="6"></circle>327 <path d="M20 20 L28 28"></path>328 </svg>329 <div class="nav-label">Explore</div>330 </div>331 <div class="nav-item">332 <svg viewBox="0 0 32 32" fill="none" stroke="#CCC" stroke-width="2.6" stroke-linecap="round" stroke-linejoin="round">333 <rect x="6" y="6" width="20" height="20" rx="3"></rect>334 <path d="M10 12 H22"></path>335 <path d="M10 18 H22"></path>336 </svg>337 <div class="nav-label">Library</div>338 </div>339 <div class="nav-item">340 <svg viewBox="0 0 32 32" fill="none" stroke="#CCC" stroke-width="2.6" stroke-linecap="round" stroke-linejoin="round">341 <path d="M6 26 L14 6 L22 26"></path>342 <path d="M10 18 H18"></path>343 </svg>344 <div class="nav-label">Upgrade</div>345 </div>346 </div>347 348</div>349</body>350</html>