GD-ML/AndroidCode
13.4k
1<html>2<head>3<meta charset="UTF-8">4<title>Playlist Create UI</title>5<style>6 body { margin: 0; padding: 0; background: transparent; font-family: "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 app bar */17 .status-bar {18 position: absolute;19 top: 24px;20 left: 24px;21 right: 24px;22 height: 60px;23 color: #e8e8e8;24 font-size: 34px;25 display: flex;26 align-items: center;27 justify-content: space-between;28 opacity: 0.9;29 }30 .status-right {31 display: flex;32 align-items: center;33 gap: 22px;34 }35 .app-bar {36 position: absolute;37 top: 90px;38 left: 24px;39 right: 24px;40 height: 100px;41 display: flex;42 align-items: center;43 justify-content: space-between;44 }45 .app-title {46 font-size: 64px;47 font-weight: 700;48 margin-left: 90px; /* space after back */49 letter-spacing: 0.5px;50 }51 .icon-btn {52 width: 72px;53 height: 72px;54 border-radius: 36px;55 display: flex;56 align-items: center;57 justify-content: center;58 background: #151515;59 border: 1px solid #2a2a2a;60 }61 /* Simple icons */62 .icon svg { width: 42px; height: 42px; fill: #e9e9e9; }63 64 /* Empty state area */65 .empty-title {66 position: absolute;67 top: 230px;68 left: 30px;69 font-size: 52px;70 font-weight: 700;71 }72 .empty-desc {73 position: absolute;74 top: 310px;75 left: 30px;76 right: 30px;77 font-size: 34px;78 color: #9e9e9e;79 }80 .create-button {81 position: absolute;82 top: 470px;83 left: 30px;84 width: 500px;85 height: 120px;86 background: #2b2b2b;87 border-radius: 18px;88 display: flex;89 align-items: center;90 justify-content: center;91 font-size: 44px;92 font-weight: 600;93 border: 1px solid #3a3a3a;94 }95 96 /* Bottom sheet handle */97 .handle {98 position: absolute;99 top: 760px;100 left: 50%;101 transform: translateX(-50%);102 width: 140px;103 height: 12px;104 background: #3a3a3a;105 border-radius: 8px;106 opacity: 0.8;107 }108 109 /* Bottom sheet */110 .sheet {111 position: absolute;112 top: 800px;113 left: 0;114 width: 1080px;115 height: 620px;116 background: #000;117 border-top: 1px solid #2a2a2a;118 box-shadow: 0 -10px 30px rgba(0,0,0,0.4);119 }120 .sheet-header {121 height: 120px;122 display: flex;123 align-items: center;124 padding: 0 30px;125 gap: 24px;126 }127 .close-circle {128 width: 96px;129 height: 96px;130 border-radius: 48px;131 background: #1b1b1b;132 border: 1px solid #303030;133 display: flex;134 align-items: center;135 justify-content: center;136 }137 .sheet-title {138 font-size: 58px;139 font-weight: 700;140 flex: 1;141 }142 .save-btn {143 width: 220px;144 height: 96px;145 background: #ffffff;146 color: #000;147 border-radius: 18px;148 display: flex;149 align-items: center;150 justify-content: center;151 font-size: 40px;152 font-weight: 700;153 }154 155 .field {156 padding: 10px 30px 0 30px;157 }158 .label {159 font-size: 32px;160 color: #bdbdbd;161 margin-bottom: 10px;162 }163 .input-line {164 font-size: 52px;165 color: #fff;166 padding: 20px 0;167 border-bottom: 2px solid #3a3a3a;168 }169 170 .toggle-row {171 margin-top: 30px;172 padding: 0 30px;173 display: flex;174 align-items: center;175 justify-content: space-between;176 }177 .toggle-label {178 font-size: 40px;179 font-weight: 600;180 }181 .switch {182 width: 170px;183 height: 70px;184 background: #ff7d34;185 border-radius: 35px;186 position: relative;187 box-shadow: inset 0 0 0 1px rgba(0,0,0,0.3);188 }189 .switch .dot {190 position: absolute;191 right: 8px;192 top: 8px;193 width: 54px;194 height: 54px;195 border-radius: 27px;196 background: #ffffff;197 }198 199 /* Keyboard */200 .keyboard {201 position: absolute;202 bottom: 0;203 left: 0;204 width: 1080px;205 height: 980px;206 background: #121212;207 border-top: 1px solid #252525;208 }209 .suggestions {210 height: 140px;211 display: flex;212 align-items: center;213 padding: 0 28px;214 gap: 40px;215 color: #d8d8d8;216 font-size: 44px;217 border-bottom: 1px solid #262626;218 }219 .suggestions .pipe { color: #777; }220 .suggestions .mic {221 margin-left: auto;222 width: 82px; height: 82px;223 border-radius: 41px; background: #1f1f1f;224 border: 1px solid #333;225 display: flex; align-items: center; justify-content: center;226 }227 .rows { padding: 16px 20px 0 20px; }228 .key-row {229 display: flex;230 gap: 14px;231 margin-bottom: 18px;232 justify-content: center;233 }234 .key {235 width: 92px;236 height: 120px;237 background: #1f1f1f;238 border: 1px solid #333333;239 border-radius: 20px;240 color: #e0e0e0;241 font-size: 42px;242 display: flex;243 align-items: center;244 justify-content: center;245 }246 .wide { width: 160px; }247 .space { width: 520px; }248 .right-actions {249 position: absolute;250 right: 24px;251 bottom: 24px;252 width: 150px; height: 150px;253 background: #cfe1ff;254 color: #111;255 border-radius: 75px;256 display: flex; align-items: center; justify-content: center;257 font-weight: 700;258 font-size: 44px;259 }260 261 /* small helper text style */262 .num-top {263 position: absolute;264 top: 6px;265 left: 10px;266 font-size: 26px;267 color: #9c9c9c;268 }269 .key.wrap { position: relative; }270</style>271</head>272<body>273<div id="render-target">274 275 <!-- Status bar -->276 <div class="status-bar">277 <div>1:18</div>278 <div class="status-right">279 <!-- wifi icon -->280 <div class="icon">281 <svg viewBox="0 0 24 24">282 <path d="M12 18.5c1.1 0 2 .9 2 2s-.9 2-2 2-2-.9-2-2 .9-2 2-2zM2 8c2.7-2.2 6.1-3.5 10-3.5s7.3 1.3 10 3.5l-1.6 2c-2.3-1.8-5.6-3-8.4-3S6.3 8.2 4 10l-2-2zM5.8 12.1c1.7-1.3 4.2-2.1 6.2-2.1s4.5.8 6.2 2.1l-1.6 2c-1.3-1-3.3-1.6-4.6-1.6s-3.3.6-4.6 1.6l-1.6-2z"></path>283 </svg>284 </div>285 <!-- battery icon -->286 <div class="icon">287 <svg viewBox="0 0 24 24">288 <path d="M2 8h17v8H2V8zm18 3h2v2h-2v-2z"></path>289 </svg>290 </div>291 </div>292 </div>293 294 <!-- App bar -->295 <div class="app-bar">296 <div class="icon-btn">297 <svg viewBox="0 0 24 24">298 <path d="M15.5 6l-6 6 6 6-1.5 1.5L6.5 12 14 4.5 15.5 6z" fill="#e9e9e9"/>299 </svg>300 </div>301 <div class="app-title">Playlists</div>302 <div style="display:flex; gap:18px;">303 <div class="icon-btn">304 <svg viewBox="0 0 24 24">305 <path d="M3 6h14v10H3V6zm15 3c2 0 3 1 3 3s-1 3-3 3V9z" />306 </svg>307 </div>308 <div class="icon-btn">309 <svg viewBox="0 0 24 24">310 <path d="M11 4h2v6h6v2h-6v6h-2v-6H5v-2h6V4z"/>311 </svg>312 </div>313 </div>314 </div>315 316 <!-- Empty state -->317 <div class="empty-title">No playlists yet</div>318 <div class="empty-desc">Playlists you have liked or created will show up here.</div>319 <div class="create-button">Create playlist</div>320 321 <!-- Drag handle -->322 <div class="handle"></div>323 324 <!-- Bottom sheet -->325 <div class="sheet">326 <div class="sheet-header">327 <div class="close-circle">328 <svg viewBox="0 0 24 24" width="40" height="40">329 <path fill="#d9d9d9" d="M6 6l12 12M18 6L6 18" stroke="#d9d9d9" stroke-width="2" stroke-linecap="round"/>330 </svg>331 </div>332 <div class="sheet-title">Create playlist</div>333 <div class="save-btn">Save</div>334 </div>335 <div class="field">336 <div class="label">Playlist title</div>337 <div class="input-line">My Favorite Songs</div>338 </div>339 <div class="toggle-row">340 <div class="toggle-label">Make public</div>341 <div class="switch"><div class="dot"></div></div>342 </div>343 </div>344 345 <!-- Keyboard -->346 <div class="keyboard">347 <div class="suggestions">348 <div>Songs</div>349 <div class="pipe">|</div>350 <div>Song's</div>351 <div class="pipe">|</div>352 <div>Sings</div>353 <div class="mic">354 <svg viewBox="0 0 24 24">355 <path fill="#e9e9e9" d="M12 14c1.7 0 3-1.3 3-3V6c0-1.7-1.3-3-3-3S9 4.3 9 6v5c0 1.7 1.3 3 3 3zm5.5-3c0 3.1-2.7 5.5-5.5 5.5S6.5 14.1 6.5 11H5c0 3.6 2.7 6.6 6 7.3V21h2v-2.7c3.3-.7 6-3.7 6-7.3h-1.5z"/>356 </svg>357 </div>358 </div>359 <div class="rows">360 <div class="key-row">361 <div class="key wrap"><div class="num-top">1</div>q</div>362 <div class="key wrap"><div class="num-top">2</div>w</div>363 <div class="key wrap"><div class="num-top">3</div>e</div>364 <div class="key wrap"><div class="num-top">4</div>r</div>365 <div class="key wrap"><div class="num-top">5</div>t</div>366 <div class="key wrap"><div class="num-top">6</div>y</div>367 <div class="key wrap"><div class="num-top">7</div>u</div>368 <div class="key wrap"><div class="num-top">8</div>i</div>369 <div class="key wrap"><div class="num-top">9</div>o</div>370 <div class="key wrap"><div class="num-top">0</div>p</div>371 </div>372 <div class="key-row">373 <div class="key">a</div>374 <div class="key">s</div>375 <div class="key">d</div>376 <div class="key">f</div>377 <div class="key">g</div>378 <div class="key">h</div>379 <div class="key">j</div>380 <div class="key">k</div>381 <div class="key">l</div>382 </div>383 <div class="key-row">384 <div class="key wide">⇧</div>385 <div class="key">z</div>386 <div class="key">x</div>387 <div class="key">c</div>388 <div class="key">v</div>389 <div class="key">b</div>390 <div class="key">n</div>391 <div class="key">m</div>392 <div class="key wide">393 <svg viewBox="0 0 24 24" style="width:40px;height:40px;fill:#e0e0e0;">394 <path d="M5 7l9 5-9 5V7zm10 0h4v10h-4V7z"/>395 </svg>396 </div>397 </div>398 <div class="key-row" style="justify-content: space-between;">399 <div class="key wide">?123</div>400 <div class="key wide">,</div>401 <div class="key space"></div>402 <div class="key wide">.</div>403 </div>404 </div>405 <div class="right-actions">✓</div>406 </div>407 408</div>409</body>410</html>