GD-ML/AndroidCode

1<html lang="en">2<head>3<meta charset="UTF-8">4<title>Mobile UI - Editor</title>5<style>6  body { margin: 0; padding: 0; background: transparent; font-family: "Roboto", Arial, Helvetica, sans-serif; }7  #render-target {8    width: 1080px;9    height: 2400px;10    position: relative;11    overflow: hidden;12    background: #ffffff;13  }14 15  /* Top teal app bar */16  .app-bar {17    position: absolute;18    top: 0;19    left: 0;20    width: 1080px;21    height: 160px;22    background: #68C6CF;23    color: #fff;24  }25  .status-row {26    position: absolute;27    top: 22px;28    left: 30px;29    right: 30px;30    height: 56px;31    display: flex;32    align-items: center;33    justify-content: space-between;34    color: #fff;35    font-size: 38px;36    letter-spacing: 0.5px;37  }38  .status-left, .status-right {39    display: flex;40    align-items: center;41    gap: 26px;42  }43  .status-dot {44    width: 28px; height: 28px; border-radius: 50%; background: rgba(255,255,255,0.9);45  }46 47  .nav-row {48    position: absolute;49    top: 92px;50    left: 20px;51    right: 20px;52    height: 56px;53    display: flex;54    align-items: center;55    justify-content: space-between;56  }57  .icon-btn {58    width: 72px; height: 72px;59    display: flex; align-items: center; justify-content: center;60    border-radius: 36px;61    background: rgba(255,255,255,0.2);62  }63  .icon-svg { width: 40px; height: 40px; }64 65  /* Editor area */66  .editor {67    position: absolute;68    top: 160px;69    left: 0;70    right: 0;71    bottom: 860px; /* space for keyboard */72    background: #fff;73    overflow: hidden;74  }75 76  .title-input {77    width: 940px;78    height: 110px;79    margin: 40px auto 20px auto;80    background: #F5F7F8;81    border: 2px solid #E0E3E6;82    border-radius: 14px;83    display: flex;84    align-items: center;85    padding: 0 26px;86    font-size: 42px;87    color: #7D8B94;88  }89 90  /* Toolbar */91  .toolbar {92    width: 100%;93    padding: 12px 40px 0 40px;94  }95  .tool-row {96    display: flex;97    gap: 28px;98    padding: 16px 0;99    flex-wrap: wrap;100    align-items: center;101  }102 103  .tool-group {104    display: flex;105    gap: 22px;106  }107 108  .tool-btn {109    min-width: 120px;110    height: 86px;111    display: flex;112    align-items: center;113    justify-content: center;114    background: #F1F3F4;115    border: 1px solid #D7D9DC;116    border-radius: 10px;117    color: #3E4A54;118    font-size: 42px;119    box-shadow: 0 1px 0 rgba(0,0,0,0.04);120  }121  .tool-btn.small { min-width: 100px; height: 80px; }122  .tool-btn.wide { min-width: 180px; }123 124  .done-btn {125    margin-left: auto;126    width: 210px;127    height: 90px;128    background: #51C2CF;129    color: #fff;130    border-radius: 10px;131    border: none;132    font-size: 42px;133    font-weight: 700;134    display: flex;135    align-items: center;136    justify-content: center;137  }138 139  /* Document body text area */140  .doc-area {141    width: 100%;142    padding: 40px 30px 0 30px;143    font-size: 52px;144    color: #101418;145    line-height: 1.35;146  }147 148  /* Keyboard */149  .keyboard {150    position: absolute;151    left: 0;152    bottom: 0;153    width: 1080px;154    height: 860px;155    background: #18181A;156    color: #fff;157    border-top-left-radius: 22px;158    border-top-right-radius: 22px;159    padding-top: 18px;160    box-sizing: border-box;161  }162  .kb-suggestions {163    display: flex;164    align-items: center;165    gap: 60px;166    padding: 24px 48px 10px 48px;167    font-size: 48px;168    color: #DADADA;169  }170  .kb-suggestions .spacer {171    flex: 1;172  }173  .mic {174    width: 70px; height: 70px; border-radius: 36px; background: #3A3A3D; display: flex; align-items: center; justify-content: center;175  }176 177  .kb-row {178    display: grid;179    grid-template-columns: repeat(10, 1fr);180    gap: 20px;181    padding: 22px 36px;182  }183 184  .kb-key {185    height: 120px;186    background: #2A2A2E;187    border-radius: 24px;188    display: flex;189    align-items: center;190    justify-content: center;191    font-size: 52px;192    color: #EDEDED;193  }194  .kb-key.small { font-size: 44px; }195  .kb-key.wide { grid-column: span 2; }196  .kb-space-row {197    display: grid;198    grid-template-columns: 1.2fr 0.8fr 3fr 0.8fr 1.2fr;199    gap: 22px;200    padding: 22px 36px;201  }202  .space-key { height: 120px; background: #2A2A2E; border-radius: 24px; display: flex; align-items: center; justify-content: center; color: #EDEDED; font-size: 52px; }203  .return-key {204    background: #E4DAF8;205    color: #3A2F5E;206  }207</style>208</head>209<body>210<div id="render-target">211 212  <!-- Top App Bar -->213  <div class="app-bar">214    <div class="status-row">215      <div class="status-left">216        <div>11:02</div>217        <div class="status-dot"></div>218        <div class="status-dot"></div>219        <div class="status-dot"></div>220      </div>221      <div class="status-right">222        <div class="status-dot"></div>223        <div class="status-dot"></div>224      </div>225    </div>226    <div class="nav-row">227      <div class="icon-btn">228        <svg class="icon-svg" viewBox="0 0 24 24">229          <path fill="#ffffff" d="M15.5 5l-8 7 8 7 1.5-1.8L11 12l6-5.2z"/>230        </svg>231      </div>232      <div style="display:flex; align-items:center; gap:28px;">233        <div class="icon-btn">234          <svg class="icon-svg" viewBox="0 0 24 24">235            <path fill="#ffffff" d="M7 10l5 5 5-5H7z"/>236          </svg>237        </div>238        <div class="icon-btn">239          <svg class="icon-svg" viewBox="0 0 24 24">240            <path fill="#ffffff" d="M6 7h12v14H6V7zm2-4h8v3H8V3z"/>241          </svg>242        </div>243        <div class="icon-btn">244          <svg class="icon-svg" viewBox="0 0 24 24">245            <circle cx="12" cy="12" r="10" fill="none" stroke="#fff" stroke-width="2"/>246            <text x="12" y="16" text-anchor="middle" font-size="12" fill="#fff">?</text>247          </svg>248        </div>249      </div>250    </div>251  </div>252 253  <!-- Editor -->254  <div class="editor">255    <div class="title-input">Title</div>256 257    <div class="toolbar">258      <div class="tool-row">259        <div class="tool-group">260          <div class="tool-btn wide">OCR</div>261        </div>262        <div class="tool-group">263          <div class="tool-btn">B</div>264          <div class="tool-btn">I</div>265          <div class="tool-btn">T</div>266          <div class="tool-btn">U</div>267        </div>268        <div class="tool-group">269          <div class="tool-btn">A</div>270          <div class="tool-btn">Tt</div>271        </div>272      </div>273 274      <div class="tool-row">275        <div class="tool-group">276          <div class="tool-btn small">▶</div>277          <div class="tool-btn small">◀</div>278          <div class="tool-btn small">x²</div>279          <div class="tool-btn small">X₂</div>280        </div>281        <div class="tool-group">282          <div class="tool-btn small">↶</div>283          <div class="tool-btn small">↷</div>284        </div>285      </div>286 287      <div class="tool-row">288        <div class="tool-group">289          <div class="tool-btn small">≡</div>290          <div class="tool-btn small">≡</div>291          <div class="tool-btn small">≡</div>292        </div>293        <div class="tool-group">294          <div class="tool-btn small">• • •</div>295          <div class="tool-btn small">1 2 3</div>296          <div class="tool-btn small">☑</div>297        </div>298        <button class="done-btn">DONE</button>299      </div>300    </div>301 302    <div class="doc-area">303      <div>Manager</div>304      <div>AA T</div>305    </div>306  </div>307 308  <!-- Keyboard -->309  <div class="keyboard">310    <div class="kb-suggestions">311      <div>T</div>312      <div>|</div>313      <div>To</div>314      <div>|</div>315      <div>The</div>316      <div class="spacer"></div>317      <div class="mic">318        <svg viewBox="0 0 24 24" width="32" height="32">319          <path fill="#DADADA" d="M12 14a3 3 0 0 0 3-3V6a3 3 0 1 0-6 0v5a3 3 0 0 0 3 3zm5-3a5 5 0 0 1-10 0H5a7 7 0 0 0 14 0h-2zM11 19h2v3h-2z"/>320        </svg>321      </div>322    </div>323 324    <div class="kb-row">325      <div class="kb-key">q</div>326      <div class="kb-key">w</div>327      <div class="kb-key">e</div>328      <div class="kb-key">r</div>329      <div class="kb-key">t</div>330      <div class="kb-key">y</div>331      <div class="kb-key">u</div>332      <div class="kb-key">i</div>333      <div class="kb-key">o</div>334      <div class="kb-key">p</div>335    </div>336 337    <div class="kb-row">338      <div class="kb-key">a</div>339      <div class="kb-key">s</div>340      <div class="kb-key">d</div>341      <div class="kb-key">f</div>342      <div class="kb-key">g</div>343      <div class="kb-key">h</div>344      <div class="kb-key">j</div>345      <div class="kb-key">k</div>346      <div class="kb-key">l</div>347      <div class="kb-key">⌫</div>348    </div>349 350    <div class="kb-row">351      <div class="kb-key">z</div>352      <div class="kb-key">x</div>353      <div class="kb-key">c</div>354      <div class="kb-key">v</div>355      <div class="kb-key">b</div>356      <div class="kb-key">n</div>357      <div class="kb-key">m</div>358      <div class="kb-key">,</div>359      <div class="kb-key">.</div>360      <div class="kb-key">?</div>361    </div>362 363    <div class="kb-space-row">364      <div class="space-key">?123</div>365      <div class="space-key">,</div>366      <div class="space-key">space</div>367      <div class="space-key">.</div>368      <div class="space-key return-key">↵</div>369    </div>370  </div>371 372</div>373</body>374</html>