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 - Mock</title>7<style>8  body { margin: 0; padding: 0; background: transparent; }9  #render-target {10    position: relative;11    width: 1080px;12    height: 2400px;13    overflow: hidden;14    background: #121212;15    color: #EDEDED;16    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Arial, sans-serif;17  }18 19  /* Status bar */20  .status-bar {21    position: absolute;22    top: 0;23    left: 0;24    width: 1080px;25    height: 108px;26    padding: 0 28px;27    box-sizing: border-box;28    display: flex;29    align-items: center;30    justify-content: space-between;31    color: #EAEAEA;32    font-size: 34px;33    letter-spacing: 0.5px;34  }35  .status-right {36    display: flex;37    align-items: center;38    gap: 18px;39    font-size: 28px;40    color: #EAEAEA;41  }42  .status-icon svg { width: 40px; height: 40px; }43 44  /* App bar */45  .app-bar {46    position: absolute;47    top: 108px;48    left: 0;49    width: 1080px;50    height: 140px;51    display: flex;52    align-items: center;53    gap: 16px;54    padding: 0 20px 0 20px;55    box-sizing: border-box;56  }57  .nav-btn {58    width: 96px;59    height: 96px;60    display: inline-flex;61    align-items: center;62    justify-content: center;63    border-radius: 48px;64    color: #EDEDED;65  }66  .app-title {67    font-size: 56px;68    font-weight: 600;69    color: #EDEDED;70  }71 72  /* Input field */73  .form-area {74    position: absolute;75    top: 332px;76    left: 54px;77    width: 972px;78  }79  .outlined-field {80    position: relative;81    height: 162px;82    border: 3px solid #8AB4F8;83    border-radius: 20px;84    box-sizing: border-box;85  }86  .outlined-field .label {87    position: absolute;88    top: -20px;89    left: 24px;90    padding: 0 12px;91    background: #121212;92    color: #8AB4F8;93    font-size: 32px;94    letter-spacing: .2px;95  }96  .outlined-field .cursor-line {97    position: absolute;98    left: 28px;99    top: 50%;100    transform: translateY(-50%);101    width: 4px;102    height: 70px;103    background: #8AB4F8;104    border-radius: 2px;105  }106 107  /* Actions */108  .actions {109    position: absolute;110    top: 560px;111    left: 0;112    width: 1080px;113    display: flex;114    justify-content: center;115    gap: 24px;116  }117  .btn {118    height: 120px;119    padding: 0 42px;120    border-radius: 18px;121    font-size: 40px;122    font-weight: 600;123    letter-spacing: .3px;124    display: inline-flex;125    align-items: center;126    gap: 18px;127    cursor: default;128    transition: opacity .2s ease;129  }130  .btn-outline {131    border: 2px solid #8AB4F8;132    color: #8AB4F8;133    background: transparent;134  }135  .btn-disabled {136    border: 2px solid #3A3A3A;137    background: #2A2A2A;138    color: #8A8A8A;139  }140  .btn svg { width: 40px; height: 40px; }141 142  /* Keyboard mock */143  .keyboard {144    position: absolute;145    left: 0;146    bottom: 42px;147    width: 1080px;148    height: 860px;149    background: #1B1B1B;150    border-top: 1px solid #2A2A2A;151    box-sizing: border-box;152    padding: 22px 18px 16px 18px;153  }154  .kb-toolbar {155    display: flex;156    gap: 28px;157    align-items: center;158    padding: 6px 10px 18px 10px;159    color: #CFCFCF;160    font-size: 30px;161  }162  .kb-dot {163    width: 64px; height: 64px; border-radius: 16px;164    background: #2E2E2E; display: inline-flex; align-items: center; justify-content: center;165  }166  .kb-rows { display: flex; flex-direction: column; gap: 18px; }167  .kb-row {168    display: flex;169    gap: 14px;170    padding: 0 6px;171  }172  .key {173    flex: 1;174    height: 120px;175    background: #2C2C2C;176    border-radius: 26px;177    display: flex;178    align-items: center;179    justify-content: center;180    color: #F5F5F5;181    font-size: 44px;182    box-shadow: inset 0 0 0 1px #383838;183  }184  .key.wide { flex: 1.5; }185  .key.xwide { flex: 4.5; }186  .key.icon { font-size: 34px; color: #DADADA; }187  .key svg { width: 44px; height: 44px; }188 189  /* Gesture pill */190  .pill {191    position: absolute;192    bottom: 8px;193    left: 50%;194    transform: translateX(-50%);195    width: 260px;196    height: 12px;197    background: #E0E0E0;198    opacity: .6;199    border-radius: 8px;200  }201</style>202</head>203<body>204<div id="render-target">205 206  <!-- Status Bar -->207  <div class="status-bar">208    <div class="status-left">6:12</div>209    <div class="status-right">210      <span class="status-icon" aria-hidden="true">211        <!-- Wi‑Fi -->212        <svg viewBox="0 0 24 24" fill="none" stroke="#FFFFFF" stroke-width="2">213          <path d="M2 8c5-4 15-4 20 0"/>214          <path d="M5 11c3-3 11-3 14 0"/>215          <path d="M8 14c2-2 6-2 8 0"/>216          <circle cx="12" cy="18" r="1.6" fill="#FFFFFF" stroke="none"/>217        </svg>218      </span>219      <span>100%</span>220      <span class="status-icon" aria-hidden="true">221        <!-- Battery -->222        <svg viewBox="0 0 28 24" fill="none" stroke="#FFFFFF" stroke-width="2">223          <rect x="1" y="6" width="20" height="12" rx="2"></rect>224          <rect x="3" y="8" width="16" height="8" fill="#FFFFFF" stroke="none"></rect>225          <rect x="22" y="9" width="4" height="6" rx="1" fill="#FFFFFF" stroke="none"></rect>226        </svg>227      </span>228    </div>229  </div>230 231  <!-- App Bar -->232  <div class="app-bar">233    <div class="nav-btn" aria-label="Back">234      <svg viewBox="0 0 24 24" width="48" height="48" fill="none" stroke="#EDEDED" stroke-width="2.6" stroke-linecap="round" stroke-linejoin="round">235        <path d="M15 18l-6-6 6-6"/>236      </svg>237    </div>238    <div class="app-title">New folder</div>239  </div>240 241  <!-- Form -->242  <div class="form-area">243    <div class="outlined-field">244      <div class="label">Folder name</div>245      <div class="cursor-line" aria-hidden="true"></div>246    </div>247  </div>248 249  <!-- Actions -->250  <div class="actions">251    <button class="btn btn-outline" aria-label="Cancel">252      <svg viewBox="0 0 24 24" fill="none" stroke="#8AB4F8" stroke-width="2.4" stroke-linecap="round">253        <path d="M5 5l14 14M19 5L5 19"/>254      </svg>255      Cancel256    </button>257    <button class="btn btn-disabled" aria-label="Create (disabled)" disabled>258      <svg viewBox="0 0 24 24" fill="none" stroke="#8A8A8A" stroke-width="2.4" stroke-linecap="round">259        <path d="M12 5v14M5 12h14"/>260      </svg>261      Create262    </button>263  </div>264 265  <!-- Keyboard -->266  <div class="keyboard" role="group" aria-label="On-screen keyboard">267    <div class="kb-toolbar">268      <div class="kb-dot">⬛</div>269      <div class="kb-dot">😊</div>270      <div>GIF</div>271      <div class="kb-dot">⚙️</div>272      <div class="kb-dot">G⇄</div>273      <div class="kb-dot">🎨</div>274      <div class="kb-dot">275        <svg viewBox="0 0 24 24" fill="none" stroke="#DADADA" stroke-width="2" stroke-linecap="round">276          <path d="M12 5v14M5 12h14"/>277        </svg>278      </div>279    </div>280 281    <div class="kb-rows">282      <div class="kb-row">283        <div class="key">q</div><div class="key">w</div><div class="key">e</div><div class="key">r</div>284        <div class="key">t</div><div class="key">y</div><div class="key">u</div><div class="key">i</div>285        <div class="key">o</div><div class="key">p</div>286      </div>287      <div class="kb-row" style="padding: 0 50px;">288        <div class="key">a</div><div class="key">s</div><div class="key">d</div><div class="key">f</div>289        <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>290      </div>291      <div class="kb-row">292        <div class="key wide icon" aria-label="Shift">293          <svg viewBox="0 0 24 24" fill="none" stroke="#DADADA" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">294            <path d="M12 4l7 7h-4v7H9v-7H5l7-7z"/>295          </svg>296        </div>297        <div class="key">z</div><div class="key">x</div><div class="key">c</div><div class="key">v</div>298        <div class="key">b</div><div class="key">n</div><div class="key">m</div>299        <div class="key wide icon" aria-label="Backspace">300            <svg viewBox="0 0 24 24" fill="none" stroke="#DADADA" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">301              <path d="M22 6H9L3 12l6 6h13V6z"/>302              <path d="M12 9l6 6M18 9l-6 6"/>303            </svg>304        </div>305      </div>306      <div class="kb-row">307        <div class="key wide">?123</div>308        <div class="key">,</div>309        <div class="key icon">310          <svg viewBox="0 0 24 24" fill="none" stroke="#DADADA" stroke-width="2" stroke-linecap="round">311            <path d="M12 5a5 5 0 0 0-5 5v3l-2 2v1h14v-1l-2-2v-3a5 5 0 0 0-5-5z"/>312          </svg>313        </div>314        <div class="key xwide">space</div>315        <div class="key">.</div>316        <div class="key wide icon" aria-label="Enter">317          <svg viewBox="0 0 24 24" fill="none" stroke="#DADADA" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">318            <path d="M19 7v6a2 2 0 0 1-2 2H6"/>319            <path d="M10 17l-4-4 4-4"/>320          </svg>321        </div>322      </div>323    </div>324  </div>325 326  <div class="pill" aria-hidden="true"></div>327</div>328</body>329</html>