GD-ML/AndroidCode

1<html lang="en">2<head>3<meta charset="UTF-8">4<title>Mobile Editor UI Mock</title>5<style>6  body { margin: 0; padding: 0; background: transparent; font-family: Arial, Helvetica, sans-serif; }7  #render-target {8    width: 1080px;9    height: 2400px;10    position: relative;11    overflow: hidden;12    background: #ffffff;13    border-radius: 0;14  }15 16  /* Top teal app bar */17  .appbar {18    position: absolute;19    top: 0;20    left: 0;21    width: 1080px;22    height: 160px;23    background: #59c3d1;24    color: #fff;25  }26  .status-row {27    height: 80px;28    display: flex;29    align-items: center;30    padding: 0 32px;31    font-weight: 600;32    font-size: 44px;33    letter-spacing: 1px;34  }35  .status-row .spacer { flex: 1; }36  .status-icon {37    display: inline-flex;38    align-items: center;39    margin-left: 28px;40  }41  .status-icon svg { fill: none; stroke: #fff; stroke-width: 6px; }42 43  /* Content area */44  .content {45    position: absolute;46    top: 160px;47    left: 0;48    right: 0;49    bottom: 900px; /* leave space for keyboard */50    background: #fff;51  }52 53  /* Back button inside content */54  .back-btn {55    position: absolute;56    top: 210px;57    left: 32px;58    width: 72px;59    height: 72px;60    border-radius: 36px;61    display: flex;62    align-items: center;63    justify-content: center;64    color: #4a4a4a;65  }66  .back-btn svg { width: 44px; height: 44px; stroke: #3d3d3d; stroke-width: 8px; fill: none; }67 68  /* Title + action row */69  .title-row {70    position: absolute;71    top: 200px;72    left: 112px;73    width: 936px;74    display: flex;75    align-items: center;76  }77  .title-input {78    flex: 1;79    height: 116px;80    background: #f7f7f7;81    border: 2px solid #e6e6e6;82    border-radius: 14px;83    box-sizing: border-box;84    padding: 0 28px;85    font-size: 48px;86    color: #999;87    display: flex;88    align-items: center;89  }90  .title-actions {91    display: flex;92    margin-left: 20px;93  }94  .circle-icon {95    width: 80px;96    height: 80px;97    border-radius: 40px;98    border: 2px solid #dedede;99    background: #ffffff;100    display: flex;101    align-items: center;102    justify-content: center;103    margin-left: 16px;104  }105  .circle-icon svg { width: 40px; height: 40px; stroke: #444; stroke-width: 6px; fill: none; }106  .circle-icon .qmark {107    font-size: 56px;108    color: #666;109    line-height: 1;110    margin-top: -6px;111  }112 113  /* Formatting toolbar */114  .toolbar {115    position: absolute;116    top: 360px;117    left: 112px;118    width: 856px;119    display: flex;120    flex-wrap: wrap;121    gap: 22px;122  }123  .tool {124    width: 160px;125    height: 96px;126    background: #f3f4f5;127    border: 2px solid #dcdcdc;128    border-radius: 12px;129    display: flex;130    align-items: center;131    justify-content: center;132    color: #2f2f2f;133    font-size: 52px;134    font-weight: 700;135  }136  .tool.light { font-weight: 400; }137  .tool.small { font-size: 44px; }138  .tool svg { width: 48px; height: 48px; stroke: #333; stroke-width: 6px; fill: none; }139  .done-btn {140    position: absolute;141    right: 40px;142    top: 520px;143    width: 220px;144    height: 110px;145    background: #59c3d1;146    color: #fff;147    font-size: 48px;148    font-weight: 800;149    border-radius: 12px;150    display: flex;151    align-items: center;152    justify-content: center;153    box-shadow: 0 4px 0 rgba(0,0,0,0.08);154  }155 156  /* Text editor area */157  .editor {158    position: absolute;159    top: 740px;160    left: 32px;161    right: 32px;162    bottom: 940px;163    border-top: 1px solid #eee;164    padding: 32px;165    font-size: 58px;166    color: #111;167    line-height: 1.6;168    overflow: auto;169  }170 171  /* Keyboard mock */172  .keyboard {173    position: absolute;174    left: 0;175    bottom: 0;176    width: 1080px;177    height: 900px;178    background: #1b1b1f;179    color: #eaeaea;180    box-shadow: 0 -8px 24px rgba(0,0,0,0.25);181  }182  .suggestions {183    height: 120px;184    display: flex;185    align-items: center;186    justify-content: space-evenly;187    font-size: 48px;188    color: #cfcfcf;189    border-bottom: 1px solid #2a2a2a;190  }191  .keys {192    padding: 22px 18px;193  }194  .row {195    display: flex;196    justify-content: space-between;197    margin-bottom: 24px;198  }199  .key {200    width: 92px;201    height: 110px;202    background: #2b2b31;203    border-radius: 16px;204    display: flex;205    align-items: center;206    justify-content: center;207    color: #f0f0f3;208    font-size: 52px;209    box-shadow: inset 0 -2px 0 rgba(255,255,255,0.06);210  }211  .key.wide { width: 150px; }212  .key.space { flex: 1; height: 120px; margin: 0 24px; font-size: 44px; color: #dcdcdc; }213  .key.gray { background: #3a3a40; color: #d0d0d0; }214  .key.purple {215    background: #e9d6fb;216    color: #3a235c;217  }218  .mic {219    position: absolute;220    right: 28px;221    bottom: 720px;222    width: 104px;223    height: 104px;224    border-radius: 52px;225    background: #2b2b31;226    display: flex;227    align-items: center;228    justify-content: center;229  }230  .mic svg { width: 54px; height: 54px; stroke: #eaeaea; stroke-width: 6px; fill: none; }231 232</style>233</head>234<body>235<div id="render-target">236 237  <!-- Top App Bar -->238  <div class="appbar">239    <div class="status-row">240      <div>11:02</div>241      <div class="spacer"></div>242      <!-- simple small status glyphs -->243      <div class="status-icon">244        <svg viewBox="0 0 24 24">245          <path d="M3 14c3-3 15-3 18 0"></path>246          <path d="M6 11c2-2 10-2 12 0"></path>247          <path d="M9 8c1-1 6-1 8 0"></path>248        </svg>249      </div>250      <div class="status-icon">251        <svg viewBox="0 0 28 24">252          <rect x="2" y="4" width="22" height="16" rx="3"></rect>253          <rect x="24" y="8" width="2" height="8" rx="1" fill="#fff"></rect>254        </svg>255      </div>256    </div>257  </div>258 259  <!-- Back arrow inside content -->260  <div class="back-btn">261    <svg viewBox="0 0 24 24">262      <path d="M15 5 L7 12 L15 19"></path>263    </svg>264  </div>265 266  <!-- Title row with actions -->267  <div class="title-row">268    <div class="title-input">Title</div>269    <div class="title-actions">270      <div class="circle-icon">271        <svg viewBox="0 0 24 24">272          <path d="M6 10 L12 16 L18 10"></path>273        </svg>274      </div>275      <div class="circle-icon">276        <svg viewBox="0 0 24 24">277          <path d="M6 7h12v4H6z"></path>278          <path d="M9 7V5h6v2"></path>279          <path d="M8 11v7"></path>280          <path d="M16 11v7"></path>281        </svg>282      </div>283      <div class="circle-icon"><div class="qmark">?</div></div>284    </div>285  </div>286 287  <!-- Formatting toolbar -->288  <div class="toolbar">289    <div class="tool">OCR</div>290    <div class="tool">B</div>291    <div class="tool light">I</div>292    <div class="tool small">T</div>293    <div class="tool">U</div>294    <div class="tool">A</div>295    <div class="tool small">Tt</div>296 297    <div class="tool small">➜</div>298    <div class="tool small">⇤</div>299    <div class="tool small">x²</div>300    <div class="tool small">x₂</div>301 302    <div class="tool small">↶</div>303    <div class="tool small">↷</div>304 305    <div class="tool small">≡</div>306    <div class="tool small">≣</div>307    <div class="tool small">x</div>308 309    <div class="tool small">≡</div>310    <div class="tool small">≡</div>311    <div class="tool small">≡</div>312 313    <div class="tool small">•</div>314    <div class="tool small">1.</div>315    <div class="tool small">☑</div>316  </div>317 318  <div class="done-btn">DONE</div>319 320  <!-- Text editor -->321  <div class="editor">322    <div>Manager</div>323    <div>AA</div>324  </div>325 326  <!-- Keyboard mock -->327  <div class="keyboard">328    <div class="suggestions">329      <div>I</div>330      <div>|</div>331      <div>to</div>332      <div>|</div>333      <div>now</div>334    </div>335 336    <div class="keys">337      <div class="row">338        <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><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>339      </div>340      <div class="row">341        <div class="key gray">a</div><div class="key gray">s</div><div class="key gray">d</div><div class="key gray">f</div><div class="key gray">g</div><div class="key gray">h</div><div class="key gray">j</div><div class="key gray">k</div><div class="key gray">l</div>342      </div>343      <div class="row">344        <div class="key">z</div><div class="key">x</div><div class="key">c</div><div class="key">v</div><div class="key">b</div><div class="key">n</div><div class="key">m</div>345        <div class="key wide">346          <svg viewBox="0 0 24 24" style="width:42px;height:42px;stroke:#eaeaea;stroke-width:5px;fill:none;">347            <path d="M19 6 L11 12 L19 18"></path>348          </svg>349        </div>350      </div>351      <div class="row">352        <div class="key wide">?123</div>353        <div class="key wide">,</div>354        <div class="key space">space</div>355        <div class="key wide">.</div>356        <div class="key purple">357          <svg viewBox="0 0 24 24" style="width:42px;height:42px;stroke:#3a235c;stroke-width:5px;fill:none;">358            <path d="M7 5 L17 12 L7 19"></path>359          </svg>360        </div>361      </div>362    </div>363 364    <div class="mic">365      <svg viewBox="0 0 24 24">366        <rect x="8" y="5" width="8" height="10" rx="4"></rect>367        <path d="M6 11c0 5 12 5 12 0"></path>368        <path d="M12 16v4"></path>369        <path d="M9 20h6"></path>370      </svg>371    </div>372  </div>373 374</div>375</body>376</html>