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; font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Arial, sans-serif; }9  #render-target {10    width: 1080px;11    height: 2400px;12    position: relative;13    overflow: hidden;14    background: #FFFFFF;15  }16 17  /* Top bars */18  .statusbar {19    position: absolute;20    top: 0;21    left: 0;22    width: 1080px;23    height: 92px;24    background: #1e88e5;25    color: #fff;26    padding: 0 28px;27    display: flex;28    align-items: center;29    box-sizing: border-box;30    font-weight: 600;31  }32  .statusbar .time { font-size: 34px; }33  .statusbar .icons {34    margin-left: auto;35    display: flex;36    align-items: center;37    gap: 28px;38  }39  .appbar {40    position: absolute;41    top: 92px;42    left: 0;43    width: 1080px;44    height: 160px;45    background: #1e88e5;46    color: #fff;47    display: flex;48    align-items: center;49    padding: 0 24px;50    box-sizing: border-box;51  }52  .appbar .title {53    font-size: 46px;54    font-weight: 700;55    margin-left: 16px;56  }57  .appbar .save {58    margin-left: auto;59    font-size: 34px;60    letter-spacing: 1px;61    font-weight: 700;62  }63  .icon-btn {64    width: 72px; height: 72px; display: flex; align-items: center; justify-content: center;65  }66 67  /* Content */68  .content {69    position: absolute;70    top: 252px;71    left: 0;72    right: 0;73    bottom: 0;74    padding: 36px 44px;75    box-sizing: border-box;76    background: #ffffff;77  }78  .label {79    font-size: 32px;80    color: #777;81    margin-bottom: 16px;82  }83  .text-field {84    position: relative;85    padding: 8px 0 18px 0;86    border-bottom: 2px solid #e0e0e0;87  }88  .text-field .value {89    font-size: 72px;90    line-height: 86px;91    color: #111;92    font-weight: 700;93    display: inline-flex;94    align-items: flex-end;95  }96  .caret {97    width: 6px; height: 80px; background: #1e88e5; display: inline-block; margin-left: 6px; border-radius: 3px;98  }99  .active-underline {100    position: absolute; left: 0; bottom: -2px; height: 4px; width: 160px; background: #1e88e5;101  }102 103  /* Suggestion strip */104  .suggestion-strip {105    position: absolute;106    left: 0;107    right: 0;108    bottom: 820px; /* sits just above keyboard */109    height: 70px;110    display: flex;111    align-items: center;112    justify-content: center;113    color: #222;114    font-size: 36px;115  }116 117  /* Keyboard */118  .keyboard {119    position: absolute;120    left: 0; right: 0; bottom: 0;121    height: 820px;122    background: #1a1a1a;123    box-shadow: 0 -2px 8px rgba(0,0,0,0.25);124    display: flex;125    flex-direction: column;126    padding: 20px 22px 28px;127    box-sizing: border-box;128    gap: 18px;129  }130  .keys-row {131    display: flex;132    justify-content: center;133    gap: 16px;134  }135  .key {136    min-width: 84px;137    height: 122px;138    background: #2b2b2b;139    color: #e9e9e9;140    border-radius: 14px;141    display: flex;142    align-items: center;143    justify-content: center;144    font-size: 40px;145    box-shadow: inset 0 -2px 0 rgba(255,255,255,0.03);146  }147  .key.small { min-width: 110px; }148  .key.medium { min-width: 140px; }149  .key.wide { min-width: 520px; }150  .key.circle {151    width: 128px; height: 128px; border-radius: 64px; background: #7ff0ea; color: #073642;152    box-shadow: none; align-self: center;153  }154  .row2 .key { min-width: 94px; }155  .row3 .key { min-width: 110px; }156  .bottom-row {157    display: flex; align-items: center; gap: 16px; justify-content: center;158  }159  .bottom-row .left { display: flex; gap: 16px; }160  .bottom-row .right { display: flex; gap: 16px; }161  .nav-pill {162    position: absolute; bottom: 10px; left: 50%; transform: translateX(-50%);163    width: 180px; height: 10px; border-radius: 5px; background: #e9e9e9; opacity: 0.9;164  }165</style>166</head>167<body>168<div id="render-target">169 170  <!-- Status bar -->171  <div class="statusbar">172    <div class="time">8:49</div>173    <div class="icons">174      <!-- Simple dot icons to emulate status -->175      <svg width="36" height="36" viewBox="0 0 24 24" fill="#fff" aria-hidden="true"><circle cx="12" cy="12" r="2"/></svg>176      <!-- Wi-Fi -->177      <svg width="40" height="40" viewBox="0 0 24 24" fill="none" stroke="#fff" stroke-width="2"><path d="M2 8c4.6-4 15.4-4 20 0"/><path d="M5 11c3.2-2.7 10.8-2.7 14 0"/><path d="M8 14c1.8-1.6 6.2-1.6 8 0"/><circle cx="12" cy="18" r="1.6" fill="#fff"/></svg>178      <!-- Battery -->179      <svg width="48" height="48" viewBox="0 0 28 18" fill="none" stroke="#fff" stroke-width="2">180        <rect x="1" y="3" width="22" height="12" rx="2"></rect>181        <rect x="3" y="5" width="14" height="8" fill="#fff" stroke="none"></rect>182        <rect x="24" y="7" width="3" height="6" rx="1" fill="#fff" stroke="none"></rect>183      </svg>184    </div>185  </div>186 187  <!-- App bar -->188  <div class="appbar">189    <div class="icon-btn" aria-label="close">190      <svg width="44" height="44" viewBox="0 0 24 24" stroke="#fff" stroke-width="2" fill="none" stroke-linecap="round">191        <path d="M4 4 L20 20"></path>192        <path d="M20 4 L4 20"></path>193      </svg>194    </div>195    <div class="title">New Folder</div>196    <div class="save">SAVE</div>197  </div>198 199  <!-- Content -->200  <div class="content">201    <div class="label">Title</div>202    <div class="text-field">203      <div class="value">Yoga <span class="caret"></span></div>204      <div class="active-underline"></div>205    </div>206  </div>207 208  <!-- Suggestion strip -->209  <div class="suggestion-strip">210    Yoga211  </div>212 213  <!-- Keyboard -->214  <div class="keyboard">215    <div class="keys-row row1">216      <div class="key">q</div>217      <div class="key">w</div>218      <div class="key">e</div>219      <div class="key">r</div>220      <div class="key">t</div>221      <div class="key">y</div>222      <div class="key">u</div>223      <div class="key">i</div>224      <div class="key">o</div>225      <div class="key">p</div>226    </div>227    <div class="keys-row row2">228      <div class="key">a</div>229      <div class="key">s</div>230      <div class="key">d</div>231      <div class="key">f</div>232      <div class="key">g</div>233      <div class="key">h</div>234      <div class="key">j</div>235      <div class="key">k</div>236      <div class="key">l</div>237    </div>238    <div class="keys-row row3">239      <div class="key small">240        <svg width="40" height="40" viewBox="0 0 24 24" fill="#e9e9e9"><path d="M4 7h16v2H4zM4 11h12v2H4zM4 15h8v2H4z"/></svg>241      </div>242      <div class="key">z</div>243      <div class="key">x</div>244      <div class="key">c</div>245      <div class="key">v</div>246      <div class="key">b</div>247      <div class="key">n</div>248      <div class="key">m</div>249      <div class="key medium">250        <svg width="42" height="42" viewBox="0 0 24 24" fill="#e9e9e9"><path d="M6 6l12 12M18 6L6 18" stroke="#e9e9e9" stroke-width="2"/></svg>251      </div>252    </div>253    <div class="bottom-row">254      <div class="left">255        <div class="key medium">?123</div>256        <div class="key small">257          <svg width="40" height="40" viewBox="0 0 24 24" fill="#e9e9e9">258            <circle cx="6" cy="6" r="2"/><circle cx="12" cy="6" r="2"/><circle cx="18" cy="6" r="2"/>259            <circle cx="6" cy="12" r="2"/><circle cx="12" cy="12" r="2"/><circle cx="18" cy="12" r="2"/>260            <circle cx="6" cy="18" r="2"/><circle cx="12" cy="18" r="2"/><circle cx="18" cy="18" r="2"/>261          </svg>262        </div>263      </div>264      <div class="key wide">space</div>265      <div class="right">266        <div class="key small">.</div>267        <div class="key circle">268          <svg width="64" h