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>Playlists UI Mock</title>7<style>8 body{margin:0;padding:0;background:transparent;font-family: Roboto, Arial, sans-serif;}9 #render-target{10 position:relative; overflow:hidden;11 width:1080px; height:2400px;12 background:#121212; color:#FFFFFF;13 }14 15 /* Status bar */16 .status-bar{17 position:absolute; top:0; left:0; right:0; height:96px;18 display:flex; align-items:center; justify-content:space-between;19 padding:0 28px; font-size:34px; color:#fff;20 }21 .status-right{display:flex; align-items:center; gap:22px;}22 .dot{width:10px; height:10px; background:#D9D9D9; border-radius:50%;}23 .battery{width:34px; height:18px; border:3px solid #fff; border-radius:4px; position:relative;}24 .battery::after{content:""; position:absolute; right:-6px; top:4px; width:4px; height:8px; background:#fff; border-radius:1px;}25 .battery .level{position:absolute; left:2px; top:2px; bottom:2px; width:70%; background:#fff;}26 27 /* Top app bar */28 .toolbar{29 position:absolute; top:96px; left:0; right:0; height:140px;30 display:flex; align-items:center; justify-content:space-between;31 padding:0 32px;32 }33 .toolbar-left{display:flex; align-items:center; gap:24px;}34 .title{font-size:64px; font-weight:700; letter-spacing:0.2px;}35 .toolbar-right{display:flex; align-items:center; gap:32px;}36 .icon{width:48px; height:48px; fill:#E0E0E0;}37 38 /* Sort pill */39 .sort-row{position:absolute; top:236px; left:36px;}40 .sort-pill{41 background:#2A2A2A; color:#EDEDED; border-radius:28px;42 padding:18px 26px; font-size:36px; display:inline-flex; align-items:center; gap:14px;43 }44 45 /* List area */46 .content{47 position:absolute; left:0; right:0; top:310px; bottom:420px;48 padding:0 28px; overflow:hidden;49 }50 .playlist-item{51 display:flex; align-items:flex-start; gap:32px;52 padding:26px 8px; margin-bottom:14px;53 }54 .thumb{55 width:360px; height:200px; background:#E0E0E0; border:1px solid #BDBDBD;56 border-radius:22px; color:#757575; display:flex; align-items:center; justify-content:center;57 position:relative; text-align:center; font-size:28px; line-height:1.2;58 }59 .overlay{60 position:absolute; left:0; right:0; bottom:0; height:56px;61 background:rgba(0,0,0,0.55); color:#fff; border-bottom-left-radius:22px; border-bottom-right-radius:22px;62 display:flex; align-items:center; gap:14px; padding:0 18px; font-size:32px;63 }64 .list-icon{width:30px; height:30px; border:2px solid #fff; border-top:none; border-right:none; transform:skewX(-10deg); opacity:0.95;}65 .meta{flex:1; padding-top:6px;}66 .title-text{font-size:48px; font-weight:700; color:#F1F1F1;}67 .sub{margin-top:8px; font-size:30px; color:#BDBDBD;}68 .kebab{width:14px; height:14px; position:relative; margin-left:auto; margin-top:8px;}69 .kebab span{position:absolute; right:0; width:8px; height:8px; background:#CFCFCF; border-radius:50%;}70 .kebab span:nth-child(1){top:0;}71 .kebab span:nth-child(2){top:12px;}72 .kebab span:nth-child(3){top:24px;}73 74 /* Mini player */75 .mini-player{76 position:absolute; left:0; right:0; bottom:200px; height:168px;77 background:#1E1E1E; border-top:1px solid #2C2C2C;78 display:flex; align-items:center; padding:0 18px; gap:18px;79 }80 .mini-thumb{81 width:240px; height:140px; background:#E0E0E0; border:1px solid #BDBDBD; color:#757575;82 display:flex; align-items:center; justify-content:center; font-size:26px; border-radius:10px;83 }84 .mini-info{flex:1; overflow:hidden;}85 .mini-title{font-size:36px; white-space:nowrap; overflow:hidden; text-overflow:ellipsis;}86 .mini-sub{font-size:26px; color:#BDBDBD; margin-top:6px;}87 .mini-actions{display:flex; align-items:center; gap:26px;}88 .mini-btn{width:52px; height:52px; fill:#fff;}89 90 /* Bottom navigation */91 .bottom-nav{92 position:absolute; left:0; right:0; bottom:0; height:200px; background:#181818; border-top:1px solid #2C2C2C;93 display:flex; align-items:center; justify-content:space-around; padding-bottom:18px;94 }95 .nav-item{display:flex; flex-direction:column; align-items:center; gap:10px; color:#E0E0E0; font-size:28px;}96 .nav-icon{width:56px; height:56px; fill:#E0E0E0;}97 .plus{98 width:92px; height:92px; background:#2B2B2B; border-radius:50%; display:flex; align-items:center; justify-content:center;99 border:1px solid #3A3A3A;100 }101 102 /* Gesture bar */103 .gesture{104 position:absolute; bottom:10px; left:50%; transform:translateX(-50%);105 width:300px; height:10px; background:#E0E0E0; border-radius:6px; opacity:0.85;106 }107</style>108</head>109<body>110<div id="render-target">111 112 <!-- Status bar -->113 <div class="status-bar">114 <div>7:25</div>115 <div class="status-right">116 <!-- simple system icons -->117 <svg class="icon" viewBox="0 0 24 24"><circle cx="6" cy="12" r="3" fill="#fff"/></svg>118 <svg class="icon" viewBox="0 0 24 24"><path d="M3 4h18v12H3z" fill="#fff"/></svg>119 <div class="dot"></div>120 <svg class="icon" viewBox="0 0 24 24"><path d="M6 3l12 9-12 9V3z" fill="#fff"/></svg>121 <div class="battery"><div class="level"></div></div>122 </div>123 </div>124 125 <!-- App bar -->126 <div class="toolbar">127 <div class="toolbar-left">128 <!-- Back arrow -->129 <svg class="icon" viewBox="0 0 24 24"><path d="M15 18L9 12l6-6" stroke="#E0E0E0" stroke-width="2" fill="none" stroke-linecap="round" stroke-linejoin="round"/></svg>130 <div class="title">Playlists</div>131 </div>132 <div class="toolbar-right">133 <!-- Cast -->134 <svg class="icon" viewBox="0 0 24 24">135 <rect x="3" y="5" width="18" height="12" rx="2" ry="2" stroke="#E0E0E0" stroke-width="2" fill="none"/>136 <path d="M3 17c2 0 4 2 4 4" stroke="#E0E0E0" stroke-width="2" fill="none"/>137 </svg>138 <!-- Search -->139 <svg class="icon" viewBox="0 0 24 24"><circle cx="11" cy="11" r="7" stroke="#E0E0E0" stroke-width="2" fill="none"/><path d="M20 20l-4-4" stroke="#E0E0E0" stroke-width="2" fill="none"/></svg>140 <!-- More -->141 <svg class="icon" viewBox="0 0 24 24"><circle cx="12" cy="5" r="2"/><circle cx="12" cy="12" r="2"/><circle cx="12" cy="19" r="2"/></svg>142 </div>143 </div>144 145 <!-- Sort pill -->146 <div class="sort-row">147 <div class="sort-pill">148 <span>Recently added</span>149 <svg width="26" height="26" viewBox="0 0 24 24" fill="#E0E0E0"><path d="M7 10l5 5 5-5z"/></svg>150 </div>151 </div>152 153 <!-- Content list -->154 <div class="content">155 156 <!-- Empty tile -->157 <div class="playlist-item">158 <div class="thumb">159 [IMG: Empty playlist tile]160 <div class="overlay">161 <div class="list-icon"></div>162 <div>0</div>163 </div>164 </div>165 <div class="meta">166 <div class="title-text">Watch Later</div>167 <div class="sub">Private</div>168 </div>169 <div class="kebab"><span></span><span></span><span></span></div>170 </div>171 172 <div class="playlist-item">173 <div class="thumb">174 [IMG: Placeholder thumbnail]175 <div class="overlay">176 <div class="list-icon"></div>177 <div>0</div>178 </div>179 </div>180 <div class="meta">181 <div class="title-text">DIY Videos</div>182 <div class="sub">Private • Updated today</div>183 </div>184 <div class="kebab"><span></span><span></span><span></span></div>185 </div>186 187 <div class="playlist-item">188 <div class="thumb">189 [IMG: Placeholder thumbnail]190 <div class="overlay">191 <div class="list-icon"></div>192 <div>0</div>193 </div>194 </div>195 <div class="meta">196 <div class="title-text">Ab</div>197 <div class="sub">Private • Updated today</div>198 </div>199 <div class="kebab"><span></span><span></span><span></span></div>200 </div>201 202 <div class="playlist-item">203 <div class="thumb">204 [IMG: Music playlist cover]205 <div class="overlay">206 <div class="list-icon"></div>207 <div>1</div>208 </div>209 </div>210 <div class="meta">211 <div class="title-text">Feel the soul</div>212 <div class="sub">Private</div>213 </div>214 <div class="kebab"><span></span><span></span><span></span></div>215 </div>216 217 <div class="playlist-item">218 <div class="thumb">219 [IMG: Tech tutorial thumbnail]220 <div class="overlay">221 <div class="list-icon"></div>222 <div>1</div>223 </div>224 </div>225 <div class="meta">226 <div class="title-text">Music that heals</div>227 <div class="sub">Private</div>228 </div>229 <div class="kebab"><span></span><span></span><span></span></div>230 </div>231 232 <div class="playlist-item">233 <div class="thumb">234 [IMG: TV show scene thumbnail]235 <div class="overlay">236 <div class="list-icon"></div>237 <div>5</div>238 </div>239 </div>240 <div class="meta">241 <div class="title-text">Music that heals</div>242 <div class="sub">Private</div>243 </div>244 <div class="kebab"><span></span><span></span><span></span></div>245 </div>246 247 </div>248 249 <!-- Mini player -->250 <div class="mini-player">251 <div class="mini-thumb">[IMG: Video thumbnail]</div>252 <div class="mini-info">253 <div class="mini-title">How to make A Workbench | D...</div>254 <div class="mini-sub">DIY Creators</div>255 </div>256 <div class="mini-actions">257 <svg class="mini-btn" viewBox="0 0 24 24"><path d="M8 5v14l11-7z" fill="#FFFFFF"/></svg>258 <svg class="mini-btn" viewBox="0 0 24 24"><path d="M5 5l14 14M19 5L5 19" stroke="#FFFFFF" stroke-width="2" fill="none" stroke-linecap="round"/></svg>259 </div>260 </div>261 262 <!-- Bottom navigation -->263 <div class="bottom-nav">264 <div class="nav-item">265 <svg class="nav-icon" viewBox="0 0 24 24"><path d="M3 10l9-7 9 7v9a2 2 0 0 1-2 2h-4V12H9v9H5a2 2 0 0 1-2-2v-9z"/></svg>266 <div>Home</div>267 </div>268 <div class="nav-item">269 <svg class="nav-icon" viewBox="0 0 24 24"><path d="M8 3l8 4-8 4 8 4-8 4z"/></svg>270 <div>Shorts</div>271 </div>272 <div class="nav-item">273 <div class="plus">274 <svg width="42" height="42" viewBox="0 0 24 24" fill="#E0E0E0"><path d="M11 5h2v14h-2zM5 11h14v2H5z"/></svg>275 </div>276 </div>277 <div class="nav-item">278 <svg class="nav-icon" viewBox="0 0 24 24"><rect x="3" y="4" width="8" height="14"/><rect x="13" y="7" width="8" height="11"/></svg>279 <div>Subscriptions</div>280 </div>281 <div class="nav-item">282 <svg class="nav-icon" viewBox="0 0 24 24"><path d="M4 5h16v2H4zM4 10h16v2H4zM4 15h10v2H4z"/></svg>283 <div>Library</div>284 </div>285 </div>286 287 <div class="gesture"></div>288</div>289</body>290</html>