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 {9    margin: 0;10    padding: 0;11    background: transparent;12    font-family: Roboto, Arial, sans-serif;13  }14  #render-target {15    width: 1080px;16    height: 2400px;17    position: relative;18    overflow: hidden;19    background: #121212;20    color: #ECECEC;21  }22 23  /* Status bar */24  .status-bar {25    position: absolute;26    top: 0;27    left: 0;28    width: 1080px;29    height: 96px;30    padding: 0 32px;31    display: flex;32    align-items: center;33    justify-content: space-between;34    color: #FFFFFF;35    font-size: 38px;36    box-sizing: border-box;37  }38  .status-right {39    display: flex;40    align-items: center;41    gap: 22px;42    font-size: 34px;43  }44  .icon {45    display: inline-flex;46    width: 40px;47    height: 40px;48    align-items: center;49    justify-content: center;50  }51 52  /* App bar */53  .app-bar {54    position: absolute;55    top: 96px;56    left: 0;57    width: 100%;58    height: 108px;59    display: flex;60    align-items: center;61    gap: 12px;62    padding: 0 24px;63    box-sizing: border-box;64  }65  .back-btn {66    width: 96px;67    height: 96px;68    display: inline-flex;69    align-items: center;70    justify-content: center;71    border-radius: 50%;72    color: #E0E0E0;73  }74  .title {75    font-size: 56px;76    font-weight: 500;77    color: #EDEDED;78  }79 80  /* Form field */81  .form-wrap {82    position: absolute;83    top: 300px;84    left: 60px;85    width: 960px;86  }87  .label-floating {88    font-size: 30px;89    color: #9DB4FF;90    margin: 0 8px 10px 16px;91  }92  .field {93    width: 100%;94    height: 118px;95    border: 3px solid #8FA6FF;96    border-radius: 16px;97    box-sizing: border-box;98    padding: 26px 28px;99    font-size: 46px;100    color: #FFFFFF;101    background: #171717;102  }103 104  /* Buttons */105  .actions {106    position: absolute;107    top: 540px;108    left: 60px;109    width: 960px;110    display: flex;111    gap: 28px;112  }113  .btn {114    height: 120px;115    padding: 0 40px;116    border-radius: 18px;117    font-size: 44px;118    display: inline-flex;119    align-items: center;120    gap: 18px;121    cursor: default;122    user-select: none;123  }124  .btn.outlined {125    color: #B9C8FF;126    border: 3px solid #89A0FF;127    background: transparent;128  }129  .btn.filled {130    color: #0B1226;131    background: #8FA6FF;132    border: 3px solid #8FA6FF;133  }134 135  /* Keyboard */136  .keyboard {137    position: absolute;138    left: 0;139    bottom: 0;140    width: 1080px;141    height: 920px;142    background: #1B1B1B;143    border-top-left-radius: 28px;144    border-top-right-radius: 28px;145    box-sizing: border-box;146    padding: 16px 18px 24px;147  }148  .suggestions {149    height: 100px;150    display: flex;151    align-items: center;152    gap: 22px;153    color: #EDEDED;154    font-size: 40px;155    padding: 0 8px;156  }157  .s-pill {158    padding: 14px 24px;159    background: #2A2A2A;160    border-radius: 18px;161    border: 1px solid #3A3A3A;162  }163  .s-sep {164    width: 2px;165    height: 44px;166    background: #3C3C3C;167  }168 169  .rows {170    margin-top: 10px;171    display: grid;172    grid-template-rows: repeat(4, 1fr);173    height: calc(100% - 120px);174    gap: 14px;175  }176  .row {177    display: flex;178    gap: 12px;179    height: 100%;180  }181  .key {182    flex: 1;183    background: #2A2A2A;184    border: 1px solid #3A3A3A;185    border-radius: 14px;186    display: flex;187    align-items: center;188    justify-content: center;189    color: #EDEDED;190    font-size: 46px;191  }192  .key.small {193    flex: 0.9;194  }195  .key.wide {196    flex: 5;197  }198  .key.onehalf {199    flex: 1.5;200  }201  .key.special {202    background: #31343A;203  }204  .key.accent {205    background: #C7D4FF;206    color: #0E1220;207  }208 209  /* Bottom gesture bar */210  .gesture {211    position: absolute;212    bottom: 8px;213    left: 50%;214    transform: translateX(-50%);215    width: 340px;216    height: 10px;217    background: #E0E0E0;218    opacity: 0.6;219    border-radius: 6px;220  }221</style>222</head>223<body>224<div id="render-target">225  <!-- Status bar -->226  <div class="status-bar">227    <div>6:13</div>228    <div class="status-right">229      <span class="icon">230        <svg viewBox="0 0 24 24" width="34" height="34" fill="#FFFFFF">231          <path d="M12 3L1 14h3v7h6v-5h4v5h6v-7h3L12 3z"/>232        </svg>233      </span>234      <span class="icon">235        <svg viewBox="0 0 24 24" width="34" height="34" fill="#FFFFFF">236          <path d="M2 8.5C6.5 3.8 17.5 3.8 22 8.5l-2 2C16.6 7 7.4 7 4 10.5l-2-2zM6 12.5c3-2.9 9-2.9 12 0l-2 2c-2-2-6-2-8 0l-2-2zM10 16.5c1.2-1.2 2.8-1.2 4 0l-2 2-2-2z"/>237        </svg>238      </span>239      <span style="width:10px;height:10px;background:#D9D9D9;border-radius:50%;display:inline-block;"></span>240      <span style="display:flex;align-items:center;gap:6px;">241        <svg viewBox="0 0 24 24" width="40" height="40" fill="#FFFFFF">242          <path d="M16 4H8c-1.1 0-2 .9-2 2v12h12V6c0-1.1-.9-2-2-2zm1 14H7V6h10v12zm-5 1.5c.8 0 1.5-.7 1.5-1.5h-3c0 .8.7 1.5 1.5 1.5z"/>243        </svg>244        <span>100%</span>245      </span>246    </div>247  </div>248 249  <!-- App bar -->250  <div class="app-bar">251    <div class="back-btn">252      <svg viewBox="0 0 24 24" width="52" height="52" fill="#EDEDED">253        <path d="M15.41 7.41 14 6l-6 6 6 6 1.41-1.41L10.83 12z"/>254      </svg>255    </div>256    <div class="title">New folder</div>257  </div>258 259  <!-- Form -->260  <div class="form-wrap">261    <div class="label-floating">Folder name</div>262    <div class="field">Plants</div>263  </div>264 265  <!-- Actions -->266  <div class="actions">267    <div class="btn outlined">268      <svg viewBox="0 0 24 24" width="48" height="48" fill="#B9C8FF">269        <path d="M19 6.4 17.6 5 12 10.6 6.4 5 5 6.4 10.6 12 5 17.6 6.4 19 12 13.4 17.6 19 19 17.6 13.4 12z"/>270      </svg>271      Cancel272    </div>273    <div class="btn filled">274      <svg viewBox="0 0 24 24" width="48" height="48" fill="#0B1226">275        <path d="M19 11H13V5h-2v6H5v2h6v6h2v-6h6z"/>276      </svg>277      Create278    </div>279  </div>280 281  <!-- Keyboard -->282  <div class="keyboard">283    <div class="suggestions">284      <div class="key special" style="width:86px;height:66px;flex:none;">285        <svg viewBox="0 0 24 24" width="36" height="36" fill="#EDEDED">286          <path d="M4 4h7v7H4V4zm9 0h7v7h-7V4zM4 13h7v7H4v-7zm9 0h7v7h-7v-7z"/>287        </svg>288      </div>289      <div class="s-pill">Plants</div>290      <div class="s-sep"></div>291      <div class="s-pill">Plant's</div>292      <div class="s-sep"></div>293      <div class="s-pill">Planets</div>294      <div style="flex:1;"></div>295      <div class="key special" style="width:86px;height:66px;flex:none;">296        <svg viewBox="0 0 24 24" width="34" height="34" fill="#EDEDED">297          <path d="M12 3a4 4 0 0 0-4 4v3a4 4 0 0 0 5 3.9V21h2v-7.1a4 4 0 0 0 3-3.9V7a4 4 0 0 0-6-4z"/>298        </svg>299      </div>300    </div>301 302    <div class="rows">303      <div class="row">304        <div class="key">q</div><div class="key">w</div><div class="key">e</div><div class="key">r</div>305        <div class="key">t</div><div class="key">y</div><div class="key">u</div><div class="key">i</div>306        <div class="key">o</div><div class="key">p</div>307      </div>308      <div class="row" style="padding:0 40px;">309        <div class="key">a</div><div class="key">s</div><div class="key">d</div><div class="key">f</div>310        <div class="key">g</div><div class="key">h</div><div class="key">j</div><div class="key">k</div>311        <div class="key">l</div>312      </div>313      <div class="row">314        <div class="key onehalf special">315          <svg viewBox="0 0 24 24" width="42" height="42" fill="#EDEDED">316            <path d="M7 14l5-5 5 5H7z"/>317          </svg>318        </div>319        <div class="key">z</div><div class="key">x</div><div class="key">c</div><div class="key">v</div>320        <div class="key">b</div><div class="key">n</div><div class="key">m</div>321        <div class="key onehalf special">322          <svg viewBox="0 0 24 24" width="40" height="40" fill="#EDEDED">323            <path d="M22 7H12v2h10V7zm-2 4H8v2h12v-2zm-2 4H4v2h14v-2z"/>324          </svg>325        </div>326      </div>327      <div class="row">328        <div class="key small special">?123</div>329        <div class="key small">,</div>330        <div class="key small special">331          <svg viewBox="0 0 24 24" width="38" height="38" fill="#EDEDED">332            <path d="M12 2a5 5 0 0 0-5 5c0 3.9 5 9 5 9s5-5.1 5-9a5 5 0 0 0-5-5zm0 6.8a1.8 1.8 0 1 1 0-3.6 1.8 1.8 0 0 1 0 3.6z"/>333          </svg>334        </div>335        <div class="key wide"> </div>336        <div class="key small">.</div>337        <div class="key small accent">338          <svg viewBox="0 0 24 24" width="44" height="44" fill="#0E1220">339            <path d="M4 11h11.2l-4.6-4.6L12 5l7 7-7 7-1.4-1.4 4.6-4.6H4z"/>340          </svg>341        </div>342      </div>343    </div>344  </div>345 346  <div class="gesture"></div>347</div>348</body>349</html>