GD-ML/AndroidCode

1<html lang="en">2<head>3<meta charset="UTF-8">4<meta name="viewport" content="width=1080, initial-scale=1.0">5<title>Mobile Editor UI Mock</title>6<style>7  body { margin: 0; padding: 0; background: transparent; font-family: "Roboto", Arial, sans-serif; }8  #render-target {9    position: relative;10    width: 1080px;11    height: 2400px;12    overflow: hidden;13    background: #ffffff;14  }15 16  /* Top teal status bar */17  .status-bar {18    position: absolute;19    top: 0;20    left: 0;21    width: 1080px;22    height: 140px;23    background: #55C2C9;24    color: #ffffff;25    display: flex;26    align-items: center;27    padding: 0 32px;28    box-sizing: border-box;29  }30  .status-time { font-weight: 600; letter-spacing: 0.5px; font-size: 36px; }31  .status-icons {32    margin-left: auto;33    display: flex;34    align-items: center;35    gap: 22px;36  }37  .chip { width: 28px; height: 28px; border-radius: 50%; background: rgba(255,255,255,0.8); }38  .battery {39    width: 44px; height: 24px; border: 2px solid #fff; border-radius: 5px; position: relative;40  }41  .battery::after { content: ""; position: absolute; right: -8px; top: 6px; width: 6px; height: 10px; background: #fff; border-radius: 2px; }42  .battery .level { position: absolute; left: 3px; top: 3px; height: 16px; width: 26px; background: #ffffff; }43 44  /* Editor area */45  .editor {46    position: absolute;47    top: 140px;48    left: 0;49    right: 0;50    bottom: 0;51    padding: 28px 36px 0 36px;52    box-sizing: border-box;53    background: #ffffff;54  }55  .top-row {56    display: flex;57    align-items: center;58    gap: 24px;59    margin-bottom: 18px;60  }61  .back {62    width: 58px;63    height: 58px;64    border-radius: 50%;65    display: flex; align-items: center; justify-content: center;66  }67  .back svg { width: 34px; height: 34px; }68  .title-input {69    flex: 1;70    height: 110px;71    background: #F2F3F5;72    border: 1px solid #E0E0E0;73    border-radius: 12px;74    display: flex; align-items: center;75    padding: 0 24px;76    color: #9AA0A6;77    font-size: 44px;78  }79  .small-actions {80    display: flex; align-items: center; gap: 26px;81  }82  .icon-btn {83    width: 72px; height: 72px;84    border: 1px solid #DADCE0;85    border-radius: 12px;86    display: flex; align-items: center; justify-content: center;87    color: #4A4A4A;88    background: #FAFAFA;89    font-size: 36px; font-weight: 600;90  }91 92  .toolbar { margin-top: 16px; }93  .toolbar-row {94    display: flex;95    flex-wrap: nowrap;96    gap: 18px;97    margin-bottom: 22px;98    align-items: center;99  }100  .tool-btn {101    min-width: 120px;102    height: 86px;103    border: 1px solid #DADCE0;104    border-radius: 12px;105    background: #FBFBFB;106    display: flex; align-items: center; justify-content: center;107    font-size: 36px; color: #3A3A3A; font-weight: 600;108  }109  .tool-btn.light { font-weight: 500; color: #555; }110  .tool-btn.mono { font-family: monospace; }111  .done-btn {112    margin-left: auto;113    width: 220px; height: 94px;114    border-radius: 10px;115    background: #35B6C5;116    color: #ffffff;117    font-weight: 700;118    letter-spacing: 1px;119    border: none;120    display: flex; align-items: center; justify-content: center;121    font-size: 40px;122  }123 124  .text-area {125    margin-top: 20px;126    border-top: 1px solid #EFEFEF;127    padding-top: 26px;128    font-size: 56px;129    line-height: 80px;130    color: #111111;131    min-height: 900px;132  }133 134  /* Keyboard */135  .keyboard {136    position: absolute;137    left: 0;138    bottom: 0;139    width: 1080px;140    height: 980px;141    background: #1E1E22;142    border-top-left-radius: 18px;143    border-top-right-radius: 18px;144    box-shadow: 0 -4px 12px rgba(0,0,0,0.25);145    overflow: hidden;146  }147  .suggestions {148    height: 120px;149    background: #151518;150    color: #EDEDED;151    display: flex; align-items: center;152    padding: 0 32px;153    gap: 36px;154    font-size: 42px;155  }156  .suggestions .divider { width: 2px; height: 46px; background: #3A3A3A; }157  .mic {158    margin-left: auto;159    width: 78px; height: 78px; border-radius: 18px;160    background: #2B2B31;161    display: flex; align-items: center; justify-content: center;162  }163  .mic svg { width: 42px; height: 42px; fill: #CFCFCF; }164 165  .keys {166    padding: 28px;167    display: grid;168    grid-template-rows: repeat(4, 1fr);169    gap: 22px;170    height: calc(100% - 120px);171    box-sizing: border-box;172  }173  .row { display: grid; grid-template-columns: repeat(10, 1fr); gap: 14px; }174  .row.mid { grid-template-columns: repeat(9, 1fr); padding: 0 60px; }175  .row.bottom { grid-template-columns: 1.2fr 0.8fr 4.2fr 1fr 1fr; }176  .key {177    background: #2A2A2F;178    color: #FFFFFF;179    border-radius: 18px;180    display: flex; align-items: center; justify-content: center;181    font-size: 40px;182    height: 120px;183    box-shadow: inset 0 -3px 0 rgba(255,255,255,0.06);184  }185  .key.small { font-size: 36px; }186  .key.dark { background: #232328; }187  .key.backspace { font-size: 44px; }188  .space { font-size: 40px; color: #CFCFCF; }189  .enter { font-size: 56px; }190</style>191</head>192<body>193<div id="render-target">194 195  <!-- Status bar -->196  <div class="status-bar">197    <div class="status-time">11:14</div>198    <div class="status-icons">199      <div class="chip"></div>200      <div class="chip"></div>201      <div class="chip"></div>202      <div class="battery"><div class="level"></div></div>203    </div>204  </div>205 206  <!-- Editor area -->207  <div class="editor">208    <div class="top-row">209      <div class="back">210        <svg viewBox="0 0 24 24"><path d="M15.5 4.5L7 12l8.5 7.5" stroke="#444" stroke-width="2.5" fill="none" stroke-linecap="round" stroke-linejoin="round"/></svg>211      </div>212      <div class="title-input">Title</div>213      <div class="small-actions">214        <div class="icon-btn">⌄</div>215        <div class="icon-btn">🗑</div>216        <div class="icon-btn">?</div>217      </div>218    </div>219 220    <div class="toolbar">221      <div class="toolbar-row">222        <div class="tool-btn">OCR</div>223        <div class="tool-btn">B</div>224        <div class="tool-btn">I</div>225        <div class="tool-btn mono">T</div>226        <div class="tool-btn">U</div>227        <div class="tool-btn light">A</div>228        <div class="tool-btn">Tt</div>229      </div>230 231      <div class="toolbar-row">232        <div class="tool-btn">⇤</div>233        <div class="tool-btn">⇥</div>234        <div class="tool-btn">x²</div>235        <div class="tool-btn">x₂</div>236        <div class="tool-btn">↶</div>237        <div class="tool-btn">↷</div>238      </div>239 240      <div class="toolbar-row">241        <div class="tool-btn">≡</div>242        <div class="tool-btn">≣</div>243        <div class="tool-btn">≡⟷</div>244        <div class="tool-btn">• …</div>245        <div class="tool-btn">1 2 3</div>246        <div class="tool-btn">☑</div>247        <div class="done-btn">DONE</div>248      </div>249    </div>250 251    <div class="text-area">252      <div>Manager</div>253      <div>AA Technologies</div>254      <div>Pune</div>255      <div style="height: 60px;"></div>256      <div>Dear si</div>257    </div>258  </div>259 260  <!-- Keyboard -->261  <div class="keyboard">262    <div class="suggestions">263      <div>si</div>264      <div class="divider"></div>265      <div>sir</div>266      <div class="divider"></div>267      <div>sister</div>268      <div class="mic">269        <svg viewBox="0 0 24 24"><path d="M12 14a3 3 0 0 0 3-3V6a3 3 0 0 0-6 0v5a3 3 0 0 0 3 3zm5-3a5 5 0 0 1-10 0M12 19v3m-4 0h8" stroke="#CFCFCF" stroke-width="2" fill="none" stroke-linecap="round"/></svg>270      </div>271    </div>272    <div class="keys">273      <div class="row">274        <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>275      </div>276      <div class="row mid">277        <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><div class="key">h</div><div class="key">j</div><div class="key">k</div><div class="key">l</div>278      </div>279      <div class="row mid">280        <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>281        <div class="key dark">.</div>282        <div class="key backspace">⌫</div>283      </div>284      <div class="row bottom">285        <div class="key small">?123</div>286        <div class="key small">,</div>287        <div class="key space">space</div>288        <div class="key small">.</div>289        <div class="key enter">↵</div>290      </div>291    </div>292  </div>293 294</div>295</body>296</html>