GD-ML/AndroidCode

1<html lang="en">2<head>3<meta charset="UTF-8">4<meta name="viewport" content="width=1080, initial-scale=1.0">5<title>New Playlist UI</title>6<style>7  body { margin: 0; padding: 0; background: transparent; font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Arial, Helvetica, sans-serif; }8  #render-target {9    width: 1080px;10    height: 2400px;11    position: relative;12    overflow: hidden;13    background: #0B0B0D;14    color: #FFFFFF;15  }16 17  /* Status bar */18  .status-bar {19    position: absolute;20    top: 0;21    left: 0;22    width: 1080px;23    height: 120px;24    padding: 0 36px;25    display: flex;26    align-items: center;27    justify-content: space-between;28    color: #EDEDED;29    font-size: 32px;30    letter-spacing: 0.5px;31  }32  .status-right {33    display: flex;34    align-items: center;35    gap: 22px;36    color: #EDEDED;37  }38  .sb-icon {39    width: 40px;40    height: 40px;41  }42  /* Simple wifi and battery icons */43  .wifi svg, .battery svg {44    width: 46px; height: 34px;45  }46  .battery svg rect { stroke: #EDEDED; }47  .wifi svg path { fill: none; stroke: #EDEDED; stroke-width: 4; }48 49  /* Header */50  .header {51    position: absolute;52    top: 120px;53    left: 0;54    width: 1080px;55    height: 120px;56    display: flex;57    align-items: center;58    justify-content: center;59  }60  .title {61    font-size: 64px;62    font-weight: 700;63    letter-spacing: 0.3px;64  }65  .close-btn, .action-create {66    position: absolute;67    top: 30px;68  }69  .close-btn { left: 36px; width: 64px; height: 64px; cursor: pointer; }70  .action-create { right: 36px; color: #A8A8A8; font-size: 40px; font-weight: 600; }71 72  /* Form label & input */73  .label {74    position: absolute;75    top: 260px;76    left: 36px;77    font-size: 28px;78    color: #9EA2A8;79    letter-spacing: 6px;80  }81  .input-wrap {82    position: absolute;83    top: 320px;84    left: 36px;85    width: 1008px;86    height: 150px;87    background: #1A1D21;88    border: 1px solid #2A2E33;89    border-radius: 18px;90    box-shadow: inset 0 0 0 1px rgba(255,255,255,0.02);91  }92  .caret {93    position: absolute;94    top: 345px;95    left: 72px;96    width: 4px;97    height: 100px;98    background: #F39C36;99    border-radius: 2px;100  }101 102  /* Keyboard */103  .keyboard {104    position: absolute;105    bottom: 0;106    left: 0;107    width: 1080px;108    height: 950px;109    background: #0F1215;110    border-top: 1px solid #202428;111    box-shadow: 0 -2px 8px rgba(0,0,0,0.3);112  }113  .kb-top-icons {114    height: 120px;115    padding: 18px 36px 0;116    display: flex;117    align-items: center;118    justify-content: space-between;119  }120  .circle-icon {121    width: 90px;122    height: 90px;123    background: #1B2024;124    border: 1px solid #2A2E33;125    border-radius: 22px;126    display: flex;127    align-items: center;128    justify-content: center;129    color: #D0D6DC;130    font-size: 28px;131  }132 133  .keys-area {134    padding: 6px 72px 20px;135  }136  .row {137    display: flex;138    justify-content: center;139    gap: 12px;140    margin-top: 22px;141  }142  .key {143    width: 82px;144    height: 120px;145    background: #21262B;146    border: 1px solid #2F343A;147    border-radius: 22px;148    display: flex;149    align-items: center;150    justify-content: center;151    color: #D9DEE3;152    font-size: 44px;153    position: relative;154  }155  .key .sub {156    position: absolute;157    top: 6px;158    left: 10px;159    font-size: 24px;160    color: #A7ADB5;161  }162  .key.wide { width: 126px; }163  .key.space { width: 520px; }164  .key.small { width: 120px; }165  .enter {166    width: 160px;167    height: 120px;168    background: #A5F4CF;169    border: none;170    color: #0F3225;171    font-weight: 800;172    border-radius: 36px;173  }174  .round-ctrl {175    width: 140px;176    height: 140px;177    background: #A5F4CF;178    border-radius: 70px;179    color: #0F3225;180    font-weight: 700;181    font-size: 40px;182    display: flex;183    align-items: center;184    justify-content: center;185  }186  .round-ctrl.gray {187    background: #1B2024;188    border: 1px solid #2A2E33;189    color: #D9DEE3;190  }191 192  .gesture-bar {193    position: absolute;194    bottom: 16px;195    left: 50%;196    transform: translateX(-50%);197    width: 440px;198    height: 12px;199    background: #C8CDD2;200    border-radius: 8px;201    opacity: 0.6;202  }203</style>204</head>205<body>206<div id="render-target">207 208  <!-- Status bar -->209  <div class="status-bar">210    <div>11:51</div>211    <div class="status-right">212      <!-- Simple icons placeholders -->213      <div class="wifi sb-icon">214        <svg viewBox="0 0 48 36">215          <path d="M4 12c10-8 30-8 40 0" />216          <path d="M10 18c7-6 21-6 28 0" />217          <path d="M16 24c4-4 12-4 16 0" />218          <circle cx="24" cy="30" r="3" fill="#EDEDED"></circle>219        </svg>220      </div>221      <div class="battery sb-icon">222        <svg viewBox="0 0 60 30">223          <rect x="2" y="4" width="48" height="22" rx="4" fill="none" stroke-width="3"></rect>224          <rect x="5" y="7" width="40" height="16" rx="3" fill="#EDEDED"></rect>225          <rect x="52" y="10" width="6" height="10" rx="2" fill="#EDEDED"></rect>226        </svg>227      </div>228      <div>100%</div>229    </div>230  </div>231 232  <!-- Header -->233  <div class="header">234    <div class="title">New Playlist</div>235    <div class="close-btn">236      <svg viewBox="0 0 64 64">237        <line x1="10" y1="10" x2="54" y2="54" stroke="#FFFFFF" stroke-width="6" stroke-linecap="round"></line>238        <line x1="54" y1="10" x2="10" y2="54" stroke="#FFFFFF" stroke-width="6" stroke-linecap="round"></line>239      </svg>240    </div>241    <div class="action-create">Create</div>242  </div>243 244  <!-- Form -->245  <div class="label">PLAYLIST NAME</div>246  <div class="input-wrap"></div>247  <div class="caret"></div>248 249  <!-- Keyboard -->250  <div class="keyboard">251    <div class="kb-top-icons">252      <div class="circle-icon">▦</div>253      <div class="circle-icon">🙂</div>254      <div class="circle-icon">GIF</div>255      <div class="circle-icon">⚙︎</div>256      <div class="circle-icon">G</div>257      <div class="circle-icon">🎨</div>258      <div class="circle-icon">🎤</div>259    </div>260 261    <div class="keys-area">262      <!-- QWERTY row -->263      <div class="row">264        <div class="key"><span class="sub">1</span>Q</div>265        <div class="key"><span class="sub">2</span>W</div>266        <div class="key"><span class="sub">3</span>E</div>267        <div class="key"><span class="sub">4</span>R</div>268        <div class="key"><span class="sub">5</span>T</div>269        <div class="key"><span class="sub">6</span>Y</div>270        <div class="key"><span class="sub">7</span>U</div>271        <div class="key"><span class="sub">8</span>I</div>272        <div class="key"><span class="sub">9</span>O</div>273        <div class="key"><span class="sub">0</span>P</div>274      </div>275 276      <!-- ASDF row -->277      <div class="row">278        <div class="key">A</div>279        <div class="key">S</div>280        <div class="key">D</div>281        <div class="key">F</div>282        <div class="key">G</div>283        <div class="key">H</div>284        <div class="key">J</div>285        <div class="key">K</div>286        <div class="key">L</div>287      </div>288 289      <!-- ZXCV row -->290      <div class="row">291        <div class="key wide">⇧</div>292        <div class="key">Z</div>293        <div class="key">X</div>294        <div class="key">C</div>295        <div class="key">V</div>296        <div class="key">B</div>297        <div class="key">N</div>298        <div class="key">M</div>299        <div class="key wide">⌫</div>300      </div>301 302      <!-- Controls row -->303      <div class="row" style="align-items:center;">304        <div class="round-ctrl">?123</div>305        <div class="key small">,</div>306        <div class="round-ctrl gray">🙂</div>307        <div class="key space"></div>308        <div class="key small">.</div>309        <div class="enter">✓</div>310      </div>311    </div>312 313    <div class="gesture-bar"></div>314  </div>315 316</div>317</body>318</html>