GD-ML/AndroidCode

1<html>2<head>3<meta charset="UTF-8">4<meta name="viewport" content="width=1080, initial-scale=1.0">5<title>Mobile Editor UI</title>6<style>7  body { margin: 0; padding: 0; background: transparent; font-family: Arial, Helvetica, sans-serif; }8  #render-target {9    width: 1080px;10    height: 2400px;11    position: relative;12    overflow: hidden;13    background: #ffffff;14  }15 16  /* Top cyan app bar */17  .topbar {18    position: absolute;19    top: 0;20    left: 0;21    width: 1080px;22    height: 180px;23    background: #66C4CF;24  }25  .status {26    position: absolute;27    top: 24px;28    left: 28px;29    right: 28px;30    color: #ffffff;31    font-size: 34px;32    display: flex;33    align-items: center;34    justify-content: space-between;35    opacity: 0.95;36  }37  .status .icons {38    display: flex;39    gap: 18px;40    align-items: center;41  }42  .status .dot {43    width: 16px; height: 16px; border-radius: 50%; background: #ffffff; opacity: 0.9;44  }45  .navrow {46    position: absolute;47    left: 24px;48    right: 24px;49    bottom: 16px;50    display: flex;51    align-items: center;52    justify-content: space-between;53  }54  .icon-btn {55    width: 76px; height: 76px; border-radius: 12px;56    display: flex; align-items: center; justify-content: center;57    background: rgba(255,255,255,0.0);58  }59  .right-icons { display: flex; gap: 28px; }60  .circle {61    width: 70px; height: 70px; border-radius: 50%;62    border: 3px solid #ffffff; display: flex; align-items: center; justify-content: center;63  }64  .svg-white { fill: #ffffff; }65 66  /* Title field */67  .title-field {68    position: absolute;69    top: 190px;70    left: 72px;71    width: 936px;72    height: 120px;73    border-radius: 10px;74    background: #f2f5f6;75    color: #777;76    display: flex; align-items: center;77    padding-left: 36px;78    font-size: 46px;79  }80 81  /* Toolbar */82  .toolbar {83    position: absolute;84    top: 330px;85    left: 72px;86    width: 936px;87  }88  .tool-row {89    display: flex;90    flex-wrap: nowrap;91    gap: 24px;92    margin-bottom: 26px;93    align-items: center;94  }95  .tool {96    height: 92px;97    min-width: 120px;98    padding: 0 24px;99    border-radius: 10px;100    background: #EBEEF0;101    color: #333;102    font-size: 38px;103    display: flex; align-items: center; justify-content: center;104    border: 1px solid #D8DADD;105  }106  .tool.small { min-width: 100px; height: 86px; font-size: 34px; }107  .tool.wide { min-width: 180px; }108  .done-btn {109    margin-left: auto;110    min-width: 200px;111    height: 96px;112    background: #4AB6C2;113    color: #fff;114    font-weight: bold;115    border: none;116    border-radius: 10px;117    display: flex; align-items: center; justify-content: center;118    font-size: 40px;119    box-shadow: 0 2px 0 rgba(0,0,0,0.06) inset;120  }121 122  /* Document area */123  .doc-area {124    position: absolute;125    top: 570px;126    left: 24px;127    right: 24px;128    bottom: 880px; /* leaves space for on-screen keyboard */129    padding: 40px 48px;130    overflow: hidden;131    color: #111;132    font-size: 54px;133    line-height: 80px;134  }135 136  /* Keyboard mock */137  .keyboard {138    position: absolute;139    left: 0;140    right: 0;141    bottom: 0;142    height: 840px;143    background: #111216;144    border-top-left-radius: 24px;145    border-top-right-radius: 24px;146    box-shadow: 0 -2px 8px rgba(0,0,0,0.15);147    color: #EDEDED;148  }149  .suggest {150    height: 110px;151    display: flex;152    align-items: center;153    padding: 0 28px;154    gap: 28px;155    font-size: 44px;156    color: #E8E8E8;157  }158  .suggest span {159    opacity: 0.95;160  }161  .divider {162    width: 2px; height: 44px; background: #5b5b5b; opacity: 0.8;163  }164 165  .rows {166    padding: 12px 16px 0 16px;167    display: grid;168    grid-template-rows: repeat(4, 150px) 160px;169    row-gap: 12px;170  }171  .key-row {172    display: grid;173    grid-template-columns: repeat(10, 1fr);174    gap: 12px;175  }176  .key {177    background: #2A2A2E;178    border-radius: 22px;179    display: flex; align-items: center; justify-content: center;180    font-size: 46px;181    color: #F1F1F1;182  }183  .key.dark { background: #202024; }184  .space-row {185    display: grid;186    grid-template-columns: 160px 120px 120px 1fr 120px 160px;187    gap: 12px;188  }189  .space { background: #2A2A2E; border-radius: 22px; }190  .space.long { grid-column: 4 / 5; }191</style>192</head>193<body>194<div id="render-target">195 196  <!-- Top Bar -->197  <div class="topbar">198    <div class="status">199      <div>11:14</div>200      <div class="icons">201        <div class="dot"></div>202        <div class="dot"></div>203        <div class="dot" style="width: 20px; height: 20px;"></div>204      </div>205    </div>206    <div class="navrow">207      <div class="icon-btn">208        <svg class="svg-white" width="54" height="54" viewBox="0 0 24 24">209          <path d="M15.5 19 8.5 12l7-7" stroke="#ffffff" stroke-width="2.6" fill="none" stroke-linecap="round" stroke-linejoin="round"/>210        </svg>211      </div>212      <div class="right-icons">213        <div class="circle">214          <svg class="svg-white" width="30" height="30" viewBox="0 0 24 24">215            <path d="M7 10l5 5 5-5" fill="none" stroke="#ffffff" stroke-width="2.2" stroke-linecap="round" stroke-linejoin="round"/>216          </svg>217        </div>218        <div class="icon-btn">219          <svg class="svg-white" width="46" height="46" viewBox="0 0 24 24">220            <path d="M3 6h18M8 6V4h8v2m-1 0v14H9V6" fill="none" stroke="#ffffff" stroke-width="2.1" stroke-linecap="round"/>221          </svg>222        </div>223        <div class="icon-btn">224          <svg class="svg-white" width="46" height="46" viewBox="0 0 24 24">225            <circle cx="12" cy="12" r="9" fill="none" stroke="#ffffff" stroke-width="2"/>226            <path d="M12 8v1.8M12 12.5v5" stroke="#ffffff" stroke-width="2" stroke-linecap="round"/>227          </svg>228        </div>229      </div>230    </div>231  </div>232 233  <!-- Title -->234  <div class="title-field">Title</div>235 236  <!-- Toolbar -->237  <div class="toolbar">238    <div class="tool-row">239      <div class="tool wide">OCR</div>240      <div class="tool">B</div>241      <div class="tool">I</div>242      <div class="tool">T</div>243      <div class="tool">U</div>244      <div class="tool">A</div>245      <div class="tool">Tt</div>246    </div>247 248    <div class="tool-row">249      <div class="tool small">≡</div>250      <div class="tool small">≡⋯</div>251      <div class="tool small">x²</div>252      <div class="tool small">X₂</div>253      <div class="tool small">254        <svg width="40" height="40" viewBox="0 0 24 24">255          <path d="M14 7l-5 5 5 5" fill="none" stroke="#333" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>256        </svg>257      </div>258      <div class="tool small">259        <svg width="40" height="40" viewBox="0 0 24 24">260          <path d="M10 7l5 5-5 5" fill="none" stroke="#333" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>261        </svg>262      </div>263    </div>264 265    <div class="tool-row">266      <div class="tool small">≡</div>267      <div class="tool small">≡≡</div>268      <div class="tool small">≡≡≡</div>269      <div class="tool small">• List</div>270      <div class="tool small">1. List</div>271      <div class="tool small">☑</div>272      <div class="done-btn">DONE</div>273    </div>274  </div>275 276  <!-- Document editor area -->277  <div class="doc-area">278    <div>Manager</div>279    <div>AA Technologies</div>280    <div>Pune</div>281    <div style="margin-top: 40px;">Dear</div>282  </div>283 284  <!-- On-screen Keyboard -->285  <div class="keyboard">286    <div class="suggest">287      <span>Dear</span>288      <div class="divider"></div>289      <span>Fear</span>290      <div class="divider"></div>291      <span>Dwar</span>292      <div style="margin-left:auto; display:flex; align-items:center;">293        <svg width="50" height="50" viewBox="0 0 24 24" fill="#EDEDED">294          <path d="M12 3a6 6 0 016 6v2.5l2 2V21h-5v-4.5l-3 2-3-2V21H4v-7.5l2-2V9a6 6 0 016-6z"/>295        </svg>296      </div>297    </div>298    <div class="rows">299      <div class="key-row">300        <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>301        <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>302      </div>303      <div class="key-row">304        <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>305        <div class="key">h</div><div class="key">j</div><div class="key">k</div><div class="key">l</div><div class="key dark">⌫</div>306      </div>307      <div class="key-row">308        <div class="key dark">1</div><div class="key">z</div><div class="key">x</div><div class="key">c</div><div class="key">v</div>309        <div class="key">b</div><div class="key">n</div><div class="key">m</div><div class="key">.</div><div class="key dark">↵</div>310      </div>311      <div class="space-row">312        <div class="space key">?123</div>313        <div class="space key">,</div>314        <div class="space key">☺</div>315        <div class="space key long"></div>316        <div class="space key">.</div>317        <div class="space key">↩︎</div>318      </div>319    </div>320  </div>321 322</div>323</body>324</html>