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: system-ui, -apple-system, Segoe UI, Roboto, Helvetica, Arial, sans-serif; }9  #render-target {10    width: 1080px;11    height: 2400px;12    position: relative;13    overflow: hidden;14    background: #ffffff;15  }16 17  /* Status bar */18  .status-bar {19    position: absolute;20    top: 0;21    left: 0;22    width: 1080px;23    height: 96px;24    background: #10A7DE;25    color: #fff;26    display: flex;27    align-items: center;28    padding: 0 28px;29    box-sizing: border-box;30  }31  .status-left { font-weight: 600; font-size: 40px; }32  .status-right {33    margin-left: auto;34    display: flex;35    align-items: center;36    gap: 22px;37  }38  .status-icon svg { width: 42px; height: 42px; fill: none; stroke: #fff; stroke-width: 4; }39 40  /* App bar */41  .app-bar {42    position: absolute;43    top: 96px;44    left: 0;45    width: 1080px;46    height: 180px;47    background: #10A7DE;48    color: #ffffff;49    display: flex;50    align-items: center;51    box-sizing: border-box;52    padding: 0 30px;53  }54  .app-left {55    width: 100px;56    height: 100px;57    display: flex;58    align-items: center;59    justify-content: center;60    margin-right: 16px;61  }62  .app-left svg { width: 64px; height: 64px; stroke: #fff; stroke-width: 8; fill: none; }63  .app-title {64    font-size: 64px;65    font-weight: 700;66    letter-spacing: 0.5px;67  }68  .app-action {69    margin-left: auto;70    font-size: 48px;71    font-weight: 700;72    color: #9FE1F6;73  }74 75  /* Content */76  .content {77    position: absolute;78    top: 276px;79    left: 0;80    width: 1080px;81    height: 1200px;82    background: #ffffff;83    box-sizing: border-box;84    padding: 40px 36px;85  }86  .label {87    font-size: 44px;88    color: #9E9E9E;89    margin-bottom: 26px;90  }91  .text-field {92    position: relative;93    height: 140px;94    border-bottom: 3px solid #E0E0E0;95  }96  .caret {97    position: absolute;98    left: 0;99    top: 18px;100    width: 4px;101    height: 78px;102    background: #10A7DE;103    border-radius: 2px;104  }105 106  /* Keyboard */107  .keyboard {108    position: absolute;109    bottom: 80px;110    left: 0;111    width: 1080px;112    height: 980px;113    background: #0F0F10;114    color: #fff;115    box-sizing: border-box;116    padding: 26px 24px 24px 24px;117  }118  .quick-row {119    display: flex;120    align-items: center;121    gap: 38px;122    padding: 8px 12px 24px 12px;123    opacity: 0.95;124  }125  .quick-icon {126    color: #EDEDED;127    font-size: 38px;128    font-weight: 600;129  }130  .key-row {131    display: grid;132    grid-template-columns: repeat(10, 1fr);133    gap: 16px;134    margin-bottom: 18px;135  }136  .key-row.row2 { grid-template-columns: repeat(9, 1fr); }137  .key-row.row3 { grid-template-columns: 120px repeat(7, 1fr) 120px; }138  .key {139    background: #1B1B1D;140    color: #FFFFFF;141    height: 120px;142    border-radius: 18px;143    display: flex;144    align-items: center;145    justify-content: center;146    font-size: 44px;147    font-weight: 600;148  }149  .key.secondary { background: #232325; font-size: 38px; }150  .key.icon { font-size: 38px; }151  .bottom-row {152    display: grid;153    grid-template-columns: 160px 100px 1fr 120px 160px;154    gap: 16px;155    margin-top: 10px;156  }157  .pill { background: #C2D8DC; color: #0F0F10; }158  .emoji { background: #1B1B1D; }159  .space { background: #1B1B1D; }160  .dot { background: #1B1B1D; }161  .submit {162    background: #7DECF2;163    color: #0F0F10;164    font-weight: 800;165  }166 167  /* Home gesture bar */168  .home-pill {169    position: absolute;170    bottom: 18px;171    left: 50%;172    transform: translateX(-50%);173    width: 300px;174    height: 14px;175    background: #E0E0E0;176    border-radius: 8px;177    opacity: 0.9;178  }179</style>180</head>181<body>182<div id="render-target">183 184  <!-- Status Bar -->185  <div class="status-bar">186    <div class="status-left">8:48</div>187    <div class="status-right">188      <div class="status-icon">189        <!-- Simple dot to mimic small status indicators -->190        <svg viewBox="0 0 24 24"><circle cx="12" cy="12" r="4" fill="#fff"/></svg>191      </div>192      <div class="status-icon">193        <!-- Wi-Fi icon -->194        <svg viewBox="0 0 24 24">195          <path d="M3 9c4.5-4 13.5-4 18 0" />196          <path d="M6 12c3-2.7 9-2.7 12 0" />197          <path d="M9 15c1.5-1.3 4.5-1.3 6 0" />198          <circle cx="12" cy="18" r="1.8" fill="#fff" stroke="none"/>199        </svg>200      </div>201      <div class="status-icon">202        <!-- Battery icon -->203        <svg viewBox="0 0 26 24">204          <rect x="2" y="6" width="18" height="12" rx="2"></rect>205          <rect x="21" y="9" width="3" height="6" rx="1"></rect>206          <rect x="4" y="8" width="12" height="8" fill="#fff" stroke="none"></rect>207        </svg>208      </div>209    </div>210  </div>211 212  <!-- App Bar -->213  <div class="app-bar">214    <div class="app-left">215      <!-- Close (X) icon -->216      <svg viewBox="0 0 24 24">217        <path d="M5 5 L19 19" />218        <path d="M19 5 L5 19" />219      </svg>220    </div>221    <div class="app-title">New Folder</div>222    <div class="app-action">SAVE</div>223  </div>224 225  <!-- Content area -->226  <div class="content">227    <div class="label">Title</div>228    <div class="text-field">229      <div class="caret"></div>230    </div>231  </div>232 233  <!-- Keyboard -->234  <div class="keyboard">235    <div class="quick-row">236      <div class="quick-icon">GIF</div>237      <div class="quick-icon">Gx</div>238      <div class="quick-icon">⚙︎</div>239      <div class="quick-icon">🎨</div>240      <div class="quick-icon">◉</div>241      <div class="quick-icon">🎤</div>242    </div>243 244    <div class="key-row">245      <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>246      <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>247    </div>248 249    <div class="key-row row2">250      <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>251      <div class="key">H</div><div class="key">J</div><div class="key">K</div><div class="key">L</div>252    </div>253 254    <div class="key-row row3">255      <div class="key secondary">⇧</div>256      <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>257      <div class="key secondary">⌫</div>258    </div>259 260    <div class="bottom-row">261      <div class="key pill">?123</div>262      <div class="key emoji">☺︎</div>263      <div class="key space"></div>264      <div class="key dot">.</div>265      <div class="key submit">✓</div>266    </div>267  </div>268 269  <div class="home-pill"></div>270</div>271</body>272</html>