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    color: #111;14  }15 16  /* Status bar */17  .status-bar {18    position: absolute;19    top: 0;20    left: 0;21    width: 1080px;22    height: 120px;23    background: #55C1CB;24    color: #fff;25    display: flex;26    align-items: center;27    padding: 0 28px;28    box-sizing: border-box;29    font-weight: 600;30    letter-spacing: 1px;31  }32  .status-left { font-size: 40px; }33  .status-right {34    margin-left: auto;35    display: flex;36    gap: 26px;37    align-items: center;38  }39  .icon {40    width: 42px;41    height: 42px;42  }43 44  /* Header with back and title */45  .header {46    position: absolute;47    top: 120px;48    left: 0;49    width: 1080px;50    height: 180px;51    display: flex;52    align-items: center;53    padding: 0 26px;54    box-sizing: border-box;55    gap: 24px;56  }57  .back-btn {58    width: 80px;59    height: 80px;60    display: flex;61    justify-content: center;62    align-items: center;63    color: #333;64  }65  .title-input {66    flex: 1;67    height: 120px;68    background: #F1F3F4;69    border-radius: 12px;70    display: flex;71    align-items: center;72    padding: 0 28px;73    font-size: 46px;74    color: #777;75    box-sizing: border-box;76  }77  .header-actions {78    display: flex;79    gap: 26px;80    margin-left: 6px;81  }82  .circle-icon {83    width: 84px;84    height: 84px;85    border-radius: 50%;86    border: 2px solid #DADCE0;87    display: flex;88    align-items: center;89    justify-content: center;90    color: #666;91    background: #fff;92  }93 94  /* Formatting toolbar */95  .formatting {96    position: absolute;97    top: 300px;98    left: 0;99    width: 1080px;100    padding: 26px;101    box-sizing: border-box;102  }103  .format-row {104    display: flex;105    flex-wrap: nowrap;106    gap: 22px;107    margin-bottom: 22px;108  }109  .tool {110    min-width: 120px;111    height: 96px;112    background: #F6F7F8;113    border: 2px solid #E1E3E6;114    border-radius: 10px;115    display: flex;116    align-items: center;117    justify-content: center;118    color: #444;119    font-weight: 600;120    font-size: 38px;121  }122  .tool.small { min-width: 110px; height: 90px; font-size: 34px; }123  .tool.blue { color: #2AA7FF; }124  .done-btn {125    position: absolute;126    right: 26px;127    top: 230px;128    width: 220px;129    height: 96px;130    background: #55C1CB;131    color: #fff;132    border-radius: 10px;133    display: flex;134    align-items: center;135    justify-content: center;136    font-size: 40px;137    font-weight: 800;138    letter-spacing: 1px;139  }140 141  /* Document area */142  .doc-area {143    position: absolute;144    left: 26px;145    right: 26px;146    top: 540px;147    bottom: 860px; /* leave room for keyboard */148    box-sizing: border-box;149    padding-top: 30px;150    font-size: 56px;151    line-height: 1.4;152    color: #111;153  }154 155  /* Keyboard mock */156  .keyboard {157    position: absolute;158    left: 0;159    right: 0;160    bottom: 0;161    height: 860px;162    background: #17181B;163    color: #EAEAEA;164    box-sizing: border-box;165    padding: 0 26px 24px 26px;166  }167  .sugg-bar {168    height: 120px;169    background: #222327;170    border-radius: 18px 18px 0 0;171    display: flex;172    align-items: center;173    padding: 0 26px;174    box-sizing: border-box;175    gap: 40px;176    font-size: 44px;177  }178  .sugg-sep {179    width: 2px;180    height: 46px;181    background: #555;182  }183  .keys {184    margin-top: 18px;185  }186  .row {187    display: flex;188    justify-content: center;189    gap: 18px;190    margin: 18px 0;191  }192  .key {193    background: #2A2B30;194    border-radius: 18px;195    min-width: 86px;196    height: 116px;197    display: flex;198    align-items: center;199    justify-content: center;200    font-size: 44px;201    color: #F2F2F2;202  }203  .key.wide { min-width: 150px; }204  .space { min-width: 540px; }205  .key.dark { background: #202126; }206  .home-indicator {207    position: absolute;208    bottom: 14px;209    left: 50%;210    transform: translateX(-50%);211    width: 560px;212    height: 10px;213    background: #D8D8D8;214    border-radius: 6px;215    opacity: 0.9;216  }217</style>218</head>219<body>220<div id="render-target">221  <!-- Status bar -->222  <div class="status-bar">223    <div class="status-left">11:14</div>224    <div class="status-right">225      <!-- Simple signal dot -->226      <svg class="icon" viewBox="0 0 24 24" fill="#fff"><circle cx="12" cy="12" r="8"/></svg>227      <!-- WiFi -->228      <svg class="icon" viewBox="0 0 24 24" fill="none" stroke="#fff" stroke-width="2">229        <path d="M2 9c5-4 15-4 20 0"/><path d="M5 12c4-3 10-3 14 0"/>230        <path d="M8 15c3-2 5-2 8 0"/><circle cx="12" cy="18" r="1.5" fill="#fff"/>231      </svg>232      <!-- Battery -->233      <svg class="icon" viewBox="0 0 28 16" fill="none" stroke="#fff" stroke-width="2">234        <rect x="1" y="3" width="22" height="10" rx="2" />235        <rect x="24" y="6" width="3" height="4" rx="1" fill="#fff" stroke="none"/>236      </svg>237    </div>238  </div>239 240  <!-- Header -->241  <div class="header">242    <div class="back-btn">243      <svg width="54" height="54" viewBox="0 0 24 24" fill="none" stroke="#333" stroke-width="2">244        <path d="M15 18l-6-6 6-6"/>245      </svg>246    </div>247    <div class="title-input">Title</div>248    <div class="header-actions">249      <div class="circle-icon">250        <svg width="36" height="36" viewBox="0 0 24 24" fill="none" stroke="#666" stroke-width="2">251          <path d="M6 9l6 6 6-6"/>252        </svg>253      </div>254      <div class="circle-icon">255        <svg width="32" height="32" viewBox="0 0 24 24" fill="none" stroke="#666" stroke-width="2">256          <path d="M3 6h18"/><path d="M8 6v12a2 2 0 0 0 2 2h4a2 2 0 0 0 2-2V6"/>257        </svg>258      </div>259      <div class="circle-icon">260        <svg width="34" height="34" viewBox="0 0 24 24" fill="none" stroke="#666" stroke-width="2">261          <circle cx="12" cy="12" r="9"/>262          <path d="M9.5 9a3 3 0 0 1 5 2.5c0 2-2.5 2.5-2.5 4.5"/><circle cx="12" cy="18" r="1"/>263        </svg>264      </div>265    </div>266  </div>267 268  <!-- Formatting toolbar -->269  <div class="formatting">270    <div class="format-row">271      <div class="tool">OCR</div>272      <div class="tool">B</div>273      <div class="tool">I</div>274      <div class="tool">T</div>275      <div class="tool">U</div>276      <div class="tool blue">A</div>277      <div class="tool">TT</div>278    </div>279    <div class="format-row">280      <div class="tool small">≡•</div>281      <div class="tool small">≡</div>282      <div class="tool small">x²</div>283      <div class="tool small">x₂</div>284      <div class="tool small">↶</div>285      <div class="tool small">↷</div>286    </div>287    <div class="format-row">288      <div class="tool small">≡</div>289      <div class="tool small">≡</div>290      <div class="tool small">•</div>291      <div class="tool small">1.</div>292      <div class="tool small">☑</div>293    </div>294    <div class="done-btn">DONE</div>295  </div>296 297  <!-- Document body -->298  <div class="doc-area">299    Manager<br>300    AA Technologies<br>301    Pune<br><br>302    Dea303  </div>304 305  <!-- Keyboard mock -->306  <div class="keyboard">307    <div class="sugg-bar">308      <span>Dea</span>309      <div class="sugg-sep"></div>310      <span>Dear</span>311      <div class="sugg-sep"></div>312      <span>DEA</span>313      <div style="margin-left:auto;display:flex;align-items:center;">314        <svg width="52" height="52" viewBox="0 0 24 24" fill="none" stroke="#EAEAEA" stroke-width="2">315          <circle cx="12" cy="12" r="9"/><path d="M12 7v6l4 2"/>316        </svg>317      </div>318    </div>319    <div class="keys">320      <div class="row">321        <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>322      </div>323      <div class="row">324        <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>325      </div>326      <div class="row">327        <div class="key wide dark">⇧</div>328        <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>329        <div class="key wide dark">330          <svg width="36" height="36" viewBox="0 0 24 24" fill="none" stroke="#fff" stroke-width="2">331            <path d="M20 12H8m0 0l5-5M8 12l5 5"/>332            <rect x="3" y="5" width="18" height="14" rx="2" stroke="#fff"/>333          </svg>334        </div>335      </div>336      <div class="row">337        <div class="key wide dark">?123</div>338        <div class="key dark">,</div>339        <div class="key space"> </div>340        <div class="key dark">.</div>341        <div class="key wide dark">↵</div>342      </div>343    </div>344    <div class="home-indicator"></div>345  </div>346</div>347</body>348</html>