GD-ML/AndroidCode

1<html lang="en">2<head>3<meta charset="UTF-8">4<title>Mobile Editor 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  }14  /* Top app bar */15  .app-bar {16    position: absolute;17    top: 0;18    left: 0;19    width: 1080px;20    height: 240px;21    background: #66c7d1;22    box-shadow: 0 2px 6px rgba(0,0,0,0.15);23  }24  .status-row {25    height: 60px;26    display: flex;27    align-items: center;28    padding: 0 24px;29    color: #fff;30    font-weight: 600;31    font-size: 34px;32  }33  .status-row .dot { 34    width: 24px; height: 24px; border-radius: 50%; background: rgba(255,255,255,0.7); margin-left: 16px;35  }36  .top-actions {37    position: absolute;38    top: 72px;39    left: 24px;40    right: 24px;41    display: flex;42    align-items: center;43    justify-content: space-between;44  }45  .back-btn {46    width: 72px; height: 72px; display: flex; align-items: center; justify-content: center;47  }48  .right-icons { display: flex; gap: 28px; }49  .icon-btn { width: 72px; height: 72px; display: flex; align-items: center; justify-content: center; }50  .title-input {51    position: absolute;52    left: 100px;53    right: 100px;54    top: 120px;55    height: 96px;56    background: #fff;57    border-radius: 8px;58    box-shadow: inset 0 0 0 2px rgba(0,0,0,0.08);59    display: flex;60    align-items: center;61    padding: 0 24px;62    color: #707070;63    font-size: 40px;64    font-weight: 600;65  }66 67  /* Toolbar area */68  .toolbar {69    position: absolute;70    top: 240px;71    left: 0;72    width: 1080px;73    background: #f7f7f7;74    padding: 24px 24px 18px;75    box-shadow: 0 2px 6px rgba(0,0,0,0.06) inset;76  }77  .tool-row {78    display: flex;79    align-items: center;80    gap: 26px;81    margin-bottom: 26px;82  }83  .tool-btn {84    width: 144px;85    height: 100px;86    background: #ffffff;87    border: 1px solid #d9d9d9;88    border-radius: 8px;89    display: flex;90    align-items: center;91    justify-content: center;92    color: #444;93    font-size: 36px;94    font-weight: 700;95  }96  .tool-btn.small { width: 120px; }97  .tool-btn.wide { width: 186px; }98  .tool-btn .sub { font-size: 28px; font-weight: 600; }99  .done-btn {100    margin-left: auto;101    width: 220px;102    height: 110px;103    background: #4bb3bf;104    color: #fff;105    font-weight: 800;106    font-size: 40px;107    border-radius: 10px;108    display: flex;109    align-items: center;110    justify-content: center;111    box-shadow: 0 2px 6px rgba(0,0,0,0.2);112  }113 114  /* Content area */115  .content {116    position: absolute;117    top: 540px;118    left: 0;119    right: 0;120    bottom: 900px; /* leave room for keyboard */121    background: #ffffff;122    padding: 40px 28px;123    font-size: 58px;124    line-height: 1.35;125    color: #000;126  }127 128  /* Keyboard mock */129  .keyboard {130    position: absolute;131    left: 0;132    bottom: 0;133    width: 1080px;134    height: 900px;135    background: #1f1f1f;136    border-top-left-radius: 24px;137    border-top-right-radius: 24px;138    box-shadow: 0 -4px 10px rgba(0,0,0,0.25);139  }140  .kb-suggestions {141    height: 110px;142    display: flex;143    align-items: center;144    padding: 0 24px;145    gap: 28px;146    border-bottom: 1px solid #333;147  }148  .chip {149    background: #2c2c2c;150    color: #ddd;151    padding: 14px 26px;152    border-radius: 26px;153    font-size: 38px;154    font-weight: 700;155  }156  .kb-rows {157    padding: 26px 26px;158    display: grid;159    gap: 22px;160  }161  .kb-row {162    display: flex;163    gap: 18px;164    justify-content: space-between;165  }166  .key {167    flex: 1;168    height: 130px;169    background: #2a2a2a;170    border-radius: 18px;171    display: flex;172    align-items: center;173    justify-content: center;174    color: #eaeaea;175    font-size: 52px;176    font-weight: 700;177    box-shadow: inset 0 -2px 0 rgba(255,255,255,0.06);178  }179  .key.wide { flex: 1.6; }180  .key.narrow { flex: 0.8; }181  .key.circle {182    width: 150px;183    flex: 0 0 150px;184    height: 150px;185    border-radius: 80px;186    background: #d9c7ea;187    color: #2a2a2a;188    font-size: 56px;189    font-weight: 900;190  }191  .key.pill {192    width: 190px;193    flex: 0 0 190px;194    height: 150px;195    border-radius: 38px;196    background: #cdbcdc;197    color: #2a2a2a;198    font-size: 44px;199    font-weight: 800;200  }201  .space { flex: 4.8; }202  .dot { flex: 0.9; }203  .emoji { flex: 1.2; }204  .kb-bottom { display: flex; gap: 18px; }205 206  /* Simple inline icons styling */207  svg { display: block; }208</style>209</head>210<body>211<div id="render-target">212 213  <div class="app-bar">214    <div class="status-row">215      11:03216      <div class="dot"></div>217      <div class="dot"></div>218      <div class="dot"></div>219    </div>220 221    <div class="top-actions">222      <div class="back-btn">223        <svg width="48" height="48" viewBox="0 0 24 24" fill="#fff">224          <path d="M15.5 19.5L8 12l7.5-7.5" stroke="#fff" stroke-width="2" fill="none" stroke-linecap="round" stroke-linejoin="round"/>225        </svg>226      </div>227      <div class="right-icons">228        <div class="icon-btn">229          <svg width="48" height="48" viewBox="0 0 24 24">230            <path d="M7 10l5 5 5-5" stroke="#fff" stroke-width="2" fill="none" stroke-linecap="round" stroke-linejoin="round"/>231          </svg>232        </div>233        <div class="icon-btn">234          <svg width="48" height="48" viewBox="0 0 24 24">235            <path d="M6 7h12l-1 13H7L6 7z" stroke="#fff" stroke-width="2" fill="none"/>236            <path d="M9 7V5h6v2" stroke="#fff" stroke-width="2" fill="none"/>237          </svg>238        </div>239        <div class="icon-btn">240          <svg width="48" height="48" viewBox="0 0 24 24">241            <circle cx="12" cy="12" r="9" stroke="#fff" stroke-width="2" fill="none"/>242            <path d="M12 16v-1.5c0-1 .7-1.4 1.3-1.8.6-.4 1.2-.8 1.2-1.7 0-1.4-1.3-2.4-2.5-2.4s-2.3.8-2.5 2" stroke="#fff" stroke-width="2" fill="none" stroke-linecap="round"/>243            <circle cx="12" cy="17.8" r="1" fill="#fff"/>244          </svg>245        </div>246      </div>247    </div>248 249    <div class="title-input">Title</div>250  </div>251 252  <div class="toolbar">253    <div class="tool-row">254      <div class="tool-btn">OCR</div>255      <div class="tool-btn">B</div>256      <div class="tool-btn">I</div>257      <div class="tool-btn">T</div>258      <div class="tool-btn">U</div>259      <div class="tool-btn wide">A</div>260      <div class="tool-btn wide">Tt</div>261    </div>262 263    <div class="tool-row">264      <div class="tool-btn small">⟸</div>265      <div class="tool-btn small">⟹</div>266      <div class="tool-btn">x<span class="sub">2</span></div>267      <div class="tool-btn">x<span class="sub">₂</span></div>268      <div class="tool-btn">↶</div>269      <div class="tool-btn">↷</div>270    </div>271 272    <div class="tool-row">273      <div class="tool-btn">≡</div>274      <div class="tool-btn">≡</div>275      <div class="tool-btn">≡</div>276      <div class="tool-btn">• List</div>277      <div class="tool-btn">1. List</div>278      <div class="tool-btn">☑︎</div>279      <div class="done-btn">DONE</div>280    </div>281  </div>282 283  <div class="content">284    Manager<br>285    AA Tech286  </div>287 288  <!-- Keyboard -->289  <div class="keyboard">290    <div class="kb-suggestions">291      <div class="chip">Tech</div>292      <div class="chip">Technology</div>293      <div class="chip">Techno</div>294      <div style="margin-left:auto; display:flex; align-items:center; justify-content:center;">295        <svg width="72" height="72" viewBox="0 0 24 24">296          <circle cx="12" cy="12" r="10" stroke="#cfcfcf" stroke-width="2" fill="none"/>297          <path d="M8 10c0 2 1.8 4 4 4s4-2 4-4" stroke="#cfcfcf" stroke-width="2" fill="none" stroke-linecap="round"/>298          <path d="M12 18v2" stroke="#cfcfcf" stroke-width="2" fill="none"/>299        </svg>300      </div>301    </div>302 303    <div class="kb-rows">304      <div class="kb-row">305        <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>306        <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>307      </div>308      <div class="kb-row">309        <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>310        <div class="key">h</div><div class="key">j</div><div class="key">k</div><div class="key">l</div>311      </div>312      <div class="kb-row">313        <div class="key narrow">z</div><div class="key narrow">x</div><div class="key narrow">c</div>314        <div class="key narrow">v</div><div class="key narrow">b</div><div class="key narrow">n</div><div class="key narrow">m</div>315        <div class="key circle">⌫</div>316      </div>317      <div class="kb-bottom kb-row">318        <div class="key pill">?123</div>319        <div class="key pill">,</div>320        <div class="key emoji">☺</div>321        <div class="key space"></div>322        <div class="key dot">.</div>323        <div class="key circle">↵</div>324      </div>325    </div>326  </div>327 328</div>329</body>330</html>