GD-ML/AndroidCode

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>New Folder UI</title>7<style>8  body { margin: 0; padding: 0; background: transparent; font-family: Arial, Helvetica, sans-serif; }9  #render-target {10    width: 1080px;11    height: 2400px;12    position: relative;13    overflow: hidden;14    background: #121212;15    color: #FFFFFF;16  }17 18  /* Status bar */19  .status-bar {20    position: absolute;21    top: 0;22    left: 0;23    width: 1080px;24    height: 120px;25    padding: 0 36px;26    display: flex;27    align-items: center;28    justify-content: space-between;29    box-sizing: border-box;30    color: #fff;31    font-size: 48px;32  }33  .status-left { display: flex; align-items: center; gap: 18px; }34  .status-dot {35    width: 36px; height: 36px; background: #fff; border-radius: 50%;36  }37  .status-right { display: flex; align-items: center; gap: 28px; }38 39  .status-icon svg { width: 60px; height: 60px; fill: none; stroke: #fff; stroke-width: 6; }40 41  /* App bar */42  .app-bar {43    position: absolute;44    top: 120px;45    left: 0;46    width: 1080px;47    height: 160px;48    display: flex;49    align-items: center;50    gap: 24px;51    box-sizing: border-box;52    padding: 0 32px;53  }54  .back-btn {55    width: 96px; height: 96px; display: flex; align-items: center; justify-content: center;56  }57  .back-btn svg { width: 64px; height: 64px; stroke: #E0E0E0; stroke-width: 6; fill: none; }58  .title {59    font-size: 76px;60    font-weight: 600;61    color: #EAEAEA;62  }63 64  /* Content */65  .content {66    position: absolute;67    top: 350px;68    left: 60px;69    width: 960px;70  }71  .input-label {72    color: #98B8FF;73    font-size: 40px;74    margin-bottom: 22px;75  }76  .text-field {77    width: 960px;78    height: 160px;79    border: 3px solid #7FA8FF;80    border-radius: 24px;81    box-sizing: border-box;82    background: #161616;83  }84  .buttons {85    width: 960px;86    display: flex;87    justify-content: center;88    gap: 32px;89    margin-top: 60px;90  }91  .btn {92    height: 120px;93    padding: 0 44px;94    border-radius: 26px;95    display: inline-flex;96    align-items: center;97    gap: 22px;98    font-size: 44px;99    box-sizing: border-box;100  }101  .btn-cancel {102    border: 3px solid #7FA8FF;103    color: #9FC0FF;104    background: transparent;105  }106  .btn-create {107    background: #2B2B2B;108    color: #7A7A7A;109    border: 3px solid #3A3A3A;110  }111  .btn svg { width: 42px; height: 42px; stroke-width: 6; }112  .btn-cancel svg { stroke: #9FC0FF; }113  .btn-create svg { stroke: #7A7A7A; }114 115  /* Keyboard mock */116  .keyboard {117    position: absolute;118    left: 0;119    bottom: 78px; /* leave room for gesture pill */120    width: 1080px;121    height: 980px;122    background: #1A1A1A;123    box-sizing: border-box;124    padding: 28px 24px 24px 24px;125  }126  .kbd-tools {127    height: 120px;128    display: flex;129    align-items: center;130    gap: 36px;131    padding: 0 12px;132  }133  .tool-icon {134    width: 92px; height: 92px; border-radius: 22px;135    background: #262626;136    display: flex; align-items: center; justify-content: center;137    color: #EDEDED; font-size: 36px;138    border: 1px solid #3A3A3A;139  }140  .kbd-row {141    display: flex;142    justify-content: center;143    gap: 18px;144    margin-top: 18px;145  }146  .key {147    width: 88px; height: 110px; border-radius: 22px;148    background: #2A2A2A;149    color: #E8DCCB;150    display: flex; align-items: center; justify-content: center;151    font-size: 44px;152    border: 1px solid #3A3A3A;153  }154  .key-wide { width: 128px; }155  .key-extra-wide { width: 220px; }156  .key-round {157    width: 110px; height: 110px; border-radius: 55px;158    background: #2A2A2A; border: 1px solid #3A3A3A; color: #E8DCCB;159    display: flex; align-items: center; justify-content: center; font-size: 44px;160  }161  .key-accent {162    background: #D5B89A; color: #1A1A1A;163  }164  .spacebar { width: 420px; }165  .backspace svg, .mic svg { width: 44px; height: 44px; stroke: #E8DCCB; stroke-width: 6; fill: none; }166  .enter {167    background: #F6D7B7; color: #1A1A1A; border: none;168  }169 170  /* Gesture pill */171  .gesture {172    position: absolute;173    bottom: 20px;174    left: 50%;175    transform: translateX(-50%);176    width: 300px;177    height: 12px;178    background: #DCDCDC;179    border-radius: 10px;180    opacity: 0.85;181  }182</style>183</head>184<body>185<div id="render-target">186  <!-- Status Bar -->187  <div class="status-bar">188    <div class="status-left">189      <div>1:05</div>190      <div class="status-dot"></div>191    </div>192    <div class="status-right">193      <div class="status-icon">194        <!-- Simple Wi-Fi -->195        <svg viewBox="0 0 24 24">196          <path d="M2 8c6-6 14-6 20 0"></path>197          <path d="M5 11c4-4 10-4 14 0"></path>198          <path d="M8 14c2-2 6-2 8 0"></path>199          <circle cx="12" cy="18" r="2" fill="#fff" stroke="none"></circle>200        </svg>201      </div>202      <div class="status-icon">203        <!-- Battery -->204        <svg viewBox="0 0 28 24">205          <rect x="1" y="5" width="22" height="14" rx="2" ry="2" stroke="#fff"></rect>206          <rect x="24" y="9" width="3" height="6" rx="1" ry="1" stroke="#fff"></rect>207          <rect x="4" y="8" width="16" height="8" fill="#fff" stroke="none"></rect>208        </svg>209      </div>210    </div>211  </div>212 213  <!-- App Bar -->214  <div class="app-bar">215    <div class="back-btn">216      <svg viewBox="0 0 24 24">217        <path d="M15 5L8 12l7 7"></path>218      </svg>219    </div>220    <div class="title">New folder</div>221  </div>222 223  <!-- Content area -->224  <div class="content">225    <div class="input-label">Folder name</div>226    <div class="text-field"></div>227 228    <div class="buttons">229      <div class="btn btn-cancel">230        <svg viewBox="0 0 24 24">231          <path d="M6 6l12 12M18 6L6 18"></path>232        </svg>233        <span>Cancel</span>234      </div>235      <div class="btn btn-create">236        <svg viewBox="0 0 24 24">237          <path d="M12 5v14M5 12h14"></path>238        </svg>239        <span>Create</span>240      </div>241    </div>242  </div>243 244  <!-- Keyboard Mock -->245  <div class="keyboard">246    <div class="kbd-tools">247      <div class="tool-icon">🧩</div>248      <div class="tool-icon">🙂</div>249      <div class="tool-icon">GIF</div>250      <div class="tool-icon">⚙️</div>251      <div class="tool-icon">G↔︎</div>252      <div class="tool-icon">🎨</div>253      <div class="tool-icon mic">254        <svg viewBox="0 0 24 24">255          <rect x="9" y="4" width="6" height="10" rx="3"></rect>256          <path d="M5 11c0 4 3 6 7 6s7-2 7-6M12 17v4M8 21h8"></path>257        </svg>258      </div>259    </div>260 261    <div class="kbd-row">262      <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>263      <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>264    </div>265    <div class="kbd-row">266      <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>267      <div class="key">h</div><div class="key">j</div><div class="key">k</div><div class="key">l</div>268    </div>269    <div class="kbd-row">270      <div class="key-wide">⇧</div>271      <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>272      <div class="key">n</div><div class="key">m</div>273      <div class="key backspace">274        <svg viewBox="0 0 24 24">275          <path d="M3 12l5-5h11v10H8z"></path>276          <path d="M12 9l4 4M16 9l-4 4"></path>277        </svg>278      </div>279    </div>280    <div class="kbd-row">281      <div class="key-round key-accent">?123</div>282      <div class="key-round">,</div>283      <div class="key-round">🙂</div>284      <div class="key spacebar">space</div>285      <div class="key-round">.</div>286      <div class="key-round enter">➜</div>287    </div>288  </div>289 290  <!-- Gesture Pill -->291  <div class="gesture"></div>292</div>293</body>294</html>