GD-ML/AndroidCode
13.4k
1<html>2<head>3<meta charset="UTF-8">4<title>Playlist Creation UI</title>5<style>6 body{7 margin:0;8 padding:0;9 background:transparent;10 font-family: Roboto, Arial, sans-serif;11 }12 #render-target{13 width:1080px;14 height:2400px;15 position:relative;16 overflow:hidden;17 background:#000000;18 color:#ffffff;19 }20 21 /* Status bar */22 .status-bar{23 position:absolute;24 top:0;25 left:0;26 width:100%;27 height:100px;28 color:#fff;29 font-size:34px;30 display:flex;31 align-items:center;32 padding:0 36px;33 box-sizing:border-box;34 }35 .status-right{36 margin-left:auto;37 display:flex;38 align-items:center;39 gap:18px;40 opacity:.9;41 }42 .status-icon{43 width:36px;height:36px;border-radius:6px;border:1px solid #666; display:flex;align-items:center;justify-content:center;font-size:20px; color:#ddd;44 }45 .battery{46 width:60px;height:28px;border:2px solid #ddd;border-radius:6px; position:relative;47 }48 .battery:after{content:""; position:absolute; right:-10px; top:8px; width:8px; height:12px; background:#ddd; border-radius:3px;}49 .battery .level{position:absolute; left:2px; top:2px; height:22px; width:38px; background:#ddd; border-radius:4px;}50 51 /* Header */52 .header{53 position:absolute;54 top:110px;55 left:0;56 width:100%;57 padding:0 30px;58 box-sizing:border-box;59 display:flex;60 align-items:center;61 height:110px;62 }63 .circle-btn{64 width:72px;height:72px;border-radius:36px;background:#1a1a1a;display:flex;align-items:center;justify-content:center;65 border:1px solid #333;66 margin-right:16px;67 }68 .circle-btn svg{fill:#e0e0e0;}69 .title{70 font-size:58px;71 font-weight:600;72 letter-spacing:0.5px;73 }74 .header-right{75 margin-left:auto;76 display:flex; gap:28px; align-items:center;77 }78 .icon{79 width:60px;height:60px;border-radius:30px; display:flex; align-items:center; justify-content:center;80 }81 .icon svg{fill:#d9d9d9;}82 /* Empty state */83 .empty-state{84 position:absolute;85 top:260px;86 left:30px;87 right:30px;88 }89 .empty-state h2{90 margin:0 0 18px 0;91 font-size:50px;92 font-weight:600;93 }94 .empty-state p{95 margin:0 0 28px 0;96 font-size:34px;97 color:#9e9e9e;98 }99 .primary-btn{100 background:#2a2a2a;101 color:#fff;102 padding:26px 34px;103 border-radius:14px;104 font-size:38px;105 width:340px;106 text-align:center;107 border:1px solid #3a3a3a;108 }109 110 /* Bottom sheet */111 .sheet{112 position:absolute;113 left:0;114 right:0;115 top:900px;116 height:600px;117 background:#0c0c0c;118 border-top:1px solid #242424;119 box-shadow:0 -10px 30px rgba(0,0,0,0.6);120 }121 .handle{122 width:120px;height:10px;border-radius:6px;background:#5f5f5f;margin:26px auto;123 }124 .sheet-header{125 display:flex; align-items:center; padding:0 30px; height:90px; box-sizing:border-box;126 }127 .sheet-title{128 font-size:46px; font-weight:700; margin-left:18px;129 }130 .sheet .close{131 width:74px;height:74px;border-radius:37px;background:#1a1a1a;border:1px solid #333;display:flex;align-items:center;justify-content:center;132 }133 .save-btn{134 margin-left:auto;135 background:#ffffff;color:#000;136 padding:18px 30px;border-radius:16px;font-size:36px;font-weight:600;137 }138 .field{139 padding:20px 30px;140 }141 .label{142 font-size:32px;color:#bdbdbd;margin-bottom:12px;143 }144 .input{145 font-size:42px;padding:14px 6px;color:#fff;border:none; outline:none; background:transparent; width:calc(100% - 60px);146 border-bottom:2px solid #3a3a3a;147 }148 .input::placeholder{color:#cfcfcf;}149 .row{150 display:flex; align-items:center; justify-content:space-between; padding:26px 30px; font-size:40px;151 }152 .toggle{153 width:160px;height:64px;background:#ff8c3a;border-radius:32px;position:relative; border:1px solid #ff9f5e;154 }155 .toggle .knob{156 position:absolute; right:8px; top:8px; width:48px;height:48px;border-radius:24px;background:#ffffff;157 }158 159 /* Keyboard */160 .keyboard{161 position:absolute;162 left:0; right:0; bottom:0;163 height:900px;164 background:#121212;165 border-top:1px solid #2a2a2a;166 box-sizing:border-box;167 padding:24px 22px;168 color:#fff;169 }170 .kb-top-icons{171 display:flex; gap:34px; padding:8px 10px; margin-bottom:18px;172 }173 .kb-icon{174 width:70px;height:70px;border-radius:14px;background:#1f1f1f;border:1px solid #333; display:flex; align-items:center; justify-content:center; color:#d0d0d0; font-size:32px;175 }176 .kb-row{177 display:flex; gap:18px; margin:18px 0;178 }179 .key{180 flex:1;181 height:120px;182 background:#1a1a1a;183 border:1px solid #2f2f2f;184 border-radius:18px;185 display:flex; align-items:center; justify-content:center;186 font-size:48px; color:#dcdcdc;187 }188 .key.small{flex:0 0 90px;}189 .key.medium{flex:0 0 140px;}190 .space{flex:1.8;}191 .enter{192 flex:0 0 140px;193 background:#1a1a1a;194 }195 .mic{196 flex:0 0 120px;197 }198 .confirm{199 flex:0 0 140px;200 background:#cfe1ff;201 color:#0b1c36;202 border-color:#cfe1ff;203 font-weight:700;204 border-radius:36px;205 }206</style>207</head>208<body>209<div id="render-target">210 211 <!-- Status Bar -->212 <div class="status-bar">213 <div>1:18</div>214 <div class="status-right">215 <div class="status-icon">ib</div>216 <div class="status-icon">🔍</div>217 <div class="status-icon">🌿</div>218 <div class="status-icon">•</div>219 <div class="status-icon">▴</div>220 <div class="status-icon">✉</div>221 <div class="status-icon">🔔</div>222 <div class="status-icon">📶</div>223 <div class="battery"><div class="level"></div></div>224 </div>225 </div>226 227 <!-- Header -->228 <div class="header">229 <div class="circle-btn">230 <svg width="30" height="30" viewBox="0 0 24 24">231 <path d="M15.5 5l-7 7 7 7-1.5 1.5L5.5 12 14 3.5z"/>232 </svg>233 </div>234 <div class="title">Playlists</div>235 <div class="header-right">236 <div class="icon">237 <!-- simple cast icon -->238 <svg width="30" height="30" viewBox="0 0 24 24">239 <path d="M3 5h18v12H3V5zm2 2v8h14V7H5zm0 10h2c0-1.7-1.3-3-3-3v2c.6 0 1 .4 1 1zm0 3h2c0-3.1-2.9-5-6-5v2c2.3 0 4 1.2 4 3z"/>240 </svg>241 </div>242 <div class="icon" style="border:1px solid #444; border-radius:30px;">243 <svg width="30" height="30" viewBox="0 0 24 24">244 <circle cx="12" cy="12" r="11" stroke="#d9d9d9" stroke-width="2" fill="none"/>245 <path d="M11 5h2v14h-2zM5 11h14v2H5z" fill="#d9d9d9"/>246 </svg>247 </div>248 </div>249 </div>250 251 <!-- Empty state content -->252 <div class="empty-state">253 <h2>No playlists yet</h2>254 <p>Playlists you have liked or created will show up here.</p>255 <div class="primary-btn">Create playlist</div>256 </div>257 258 <!-- Bottom Sheet -->259 <div class="sheet">260 <div class="handle"></div>261 <div class="sheet-header">262 <div class="close">263 <svg width="28" height="28" viewBox="0 0 24 24">264 <path fill="#d9d9d9" d="M18 6l-6 6 6 6-2 2-6-6-6 6-2-2 6-6-6-6 2-2 6 6 6-6z"/>265 </svg>266 </div>267 <div class="sheet-title">Create playlist</div>268 <div class="save-btn">Save</div>269 </div>270 <div class="field">271 <div class="label">Playlist title</div>272 <input class="input" type="text" placeholder="Untitled Playlist" />273 </div>274 <div class="row">275 <div>Make public</div>276 <div class="toggle"><div class="knob"></div></div>277 </div>278 </div>279 280 <!-- Keyboard -->281 <div class="keyboard">282 <div class="kb-top-icons">283 <div class="kb-icon">⌗</div>284 <div class="kb-icon">🙂</div>285 <div class="kb-icon">GIF</div>286 <div class="kb-icon">⚙</div>287 <div class="kb-icon">↔</div>288 <div class="kb-icon">🎨</div>289 <div class="kb-icon">🎤</div>290 </div>291 292 <div class="kb-row">293 <div class="key small">1</div>294 <div class="key small">2</div>295 <div class="key small">3</div>296 <div class="key small">4</div>297 <div class="key small">5</div>298 <div class="key small">6</div>299 <div class="key small">7</div>300 <div class="key small">8</div>301 <div class="key small">9</div>302 <div class="key small">0</div>303 </div>304 <div class="kb-row">305 <div class="key">q</div><div class="key">w</div><div class="key">e</div><div class="key">r</div><div class="key">t</div><div class="key">y</div><div class="key">u</div><div class="key">i</div><div class="key">o</div><div class="key">p</div>306 </div>307 <div class="kb-row">308 <div class="key">a</div><div class="key">s</div><div class="key">d</div><div class="key">f</div><div class="key">g</div><div class="key">h</div><div class="key">j</div><div class="key">k</div><div class="key">l</div>309 </div>310 <div class="kb-row">311 <div class="key medium">↶</div>312 <div class="key">z</div><div class="key">x</div><div class="key">c</div><div class="key">v</div><div class="key">b</div><div class="key">n</div><div class="key">m</div>313 <div class="key medium">⌫</div>314 </div>315 <div class="kb-row">316 <div class="key medium">?123</div>317 <div class="key medium">,</div>318 <div class="key space"></div>319 <div class="key medium">.</div>320 <div class="key mic">🎤</div>321 <div class="key confirm">✓</div>322 </div>323 </div>324 325</div>326</body>327</html>