GD-ML/AndroidCode

1<html>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: "Roboto", Arial, sans-serif; }7  #render-target {8    width:1080px; height:2400px;9    position:relative; overflow:hidden;10    background:#ffffff;11  }12 13  /* Status bar */14  .status-bar {15    height:120px; background:#63C3CF; color:#fff;16    padding:0 32px; box-sizing:border-box;17    display:flex; align-items:center; justify-content:space-between;18    letter-spacing:0.5px; font-weight:600; font-size:40px;19  }20  .status-right { display:flex; align-items:center; gap:28px; }21  .icon { width:48px; height:48px; display:inline-block; }22 23  /* Title / top row */24  .top-row {25    height:120px; background:#63C3CF; padding:0 24px 24px 24px; box-sizing:border-box;26    display:flex; align-items:flex-end; gap:20px;27  }28  .back {29    width:72px; height:72px; display:flex; align-items:center; justify-content:center;30  }31  .title-input {32    flex:1; height:88px; border-radius:10px; border:0; outline:none;33    background:#F1F3F4; padding:0 24px; font-size:40px;34  }35  .top-actions { display:flex; align-items:center; gap:26px; }36  .round-btn {37    width:72px; height:72px; border-radius:8px; background:#F1F3F4;38    display:flex; align-items:center; justify-content:center;39  }40 41  /* Formatting toolbar */42  .format-wrap { background:#fff; padding:24px; box-sizing:border-box; border-bottom:1px solid #E5E5E5; }43  .format-row {44    display:flex; align-items:center; gap:22px; margin-bottom:18px;45  }46  .fmt-btn {47    min-width:120px; height:90px; padding:0 18px;48    border:1px solid #D7D7D7; border-radius:10px; background:#FAFAFA;49    font-size:40px; color:#333; display:flex; align-items:center; justify-content:center;50  }51  .fmt-small { min-width:90px; }52  .fmt-wide { min-width:170px; }53  .done {54    margin-left:auto; background:#42BED3; color:#fff; border-color:#42BED3; font-weight:700;55  }56 57  /* Editor area */58  .editor {59    height:1060px; padding:36px; box-sizing:border-box; font-size:46px; color:#111; line-height:1.4;60  }61 62  /* Keyboard */63  .keyboard {64    position:absolute; left:0; right:0; bottom:0; height:820px;65    background:#1E1E22; color:#fff; border-top:1px solid #2b2b2f;66    display:flex; flex-direction:column;67  }68  .suggest {69    height:110px; background:#2A2A2E; display:flex; align-items:center;70    padding:0 24px; box-sizing:border-box; gap:48px; font-size:44px;71  }72  .suggest .spacer { flex:1; }73  .keys { flex:1; padding:18px 20px 22px; box-sizing:border-box; display:flex; flex-direction:column; gap:18px; }74  .row { display:flex; gap:14px; justify-content:center; }75  .key {76    height:128px; min-width:88px; padding:0 18px;77    background:#2C2C31; border-radius:16px; display:flex; align-items:center; justify-content:center;78    font-size:48px; color:#F6F6F6; border:1px solid #39393f;79  }80  .key.wide { min-width:150px; }81  .key.space { flex:1; min-width:200px; }82  .key.back { min-width:140px; }83  .key.enter { min-width:140px; }84  .kbd-bottom { display:flex; gap:14px; }85 86  /* Utility */87  .muted { color:#7A7A7A; }88</style>89</head>90<body>91<div id="render-target">92 93  <!-- Status bar -->94  <div class="status-bar">95    <div class="status-left">11:14</div>96    <div class="status-right">97      <!-- small indicator dots -->98      <div style="width:10px;height:10px;background:#fff;border-radius:50%;opacity:.9"></div>99      <svg class="icon" viewBox="0 0 24 24" fill="none" stroke="#ffffff" stroke-width="2">100        <path d="M2 10c4-4 16-4 20 0"></path>101        <path d="M5 13c3-3 11-3 14 0"></path>102        <path d="M8 16c2-2 6-2 8 0"></path>103      </svg>104      <svg class="icon" viewBox="0 0 24 24" fill="none" stroke="#ffffff" stroke-width="2">105        <rect x="2" y="7" width="18" height="10" rx="2" ry="2"></rect>106        <rect x="21" y="10" width="2" height="4" fill="#ffffff" stroke="none"></rect>107      </svg>108    </div>109  </div>110 111  <!-- Title row -->112  <div class="top-row">113    <div class="back">114      <svg width="56" height="56" viewBox="0 0 24 24" fill="none" stroke="#ffffff" stroke-width="2.5">115        <path d="M15 18l-6-6 6-6"></path>116      </svg>117    </div>118    <input class="title-input" placeholder="Title" />119    <div class="top-actions">120      <div class="round-btn">121        <svg width="36" height="36" viewBox="0 0 24 24" fill="none" stroke="#444" stroke-width="2">122          <path d="M7 10l5 5 5-5"></path>123        </svg>124      </div>125      <div class="round-btn">126        <svg width="34" height="34" viewBox="0 0 24 24" fill="none" stroke="#444" stroke-width="2">127          <path d="M3 6h18"></path>128          <path d="M8 6v12a4 4 0 0 0 8 0V6"></path>129        </svg>130      </div>131      <div class="round-btn">132        <svg width="34" height="34" viewBox="0 0 24 24" fill="none" stroke="#444" stroke-width="2">133          <circle cx="12" cy="12" r="9"></circle>134          <path d="M12 8v4l3 3"></path>135        </svg>136      </div>137    </div>138  </div>139 140  <!-- Formatting controls -->141  <div class="format-wrap">142    <div class="format-row">143      <div class="fmt-btn fmt-wide">OCR</div>144      <div class="fmt-btn fmt-small"><b>B</b></div>145      <div class="fmt-btn fmt-small" style="font-style:italic;">I</div>146      <div class="fmt-btn fmt-small">T</div>147      <div class="fmt-btn fmt-small" style="text-decoration:underline;">U</div>148      <div class="fmt-btn fmt-small" style="color:#2EA6C4;font-weight:700;">A</div>149      <div class="fmt-btn fmt-small">Tt</div>150    </div>151 152    <div class="format-row">153      <div class="fmt-btn fmt-small">154        <svg width="40" height="40" viewBox="0 0 24 24" fill="none" stroke="#333" stroke-width="2">155          <path d="M4 6h16M4 12h10M4 18h16"></path>156        </svg>157      </div>158      <div class="fmt-btn fmt-small">159        <svg width="40" height="40" viewBox="0 0 24 24" fill="none" stroke="#333" stroke-width="2">160          <path d="M4 12h16M8 8h12M8 16h12"></path>161        </svg>162      </div>163      <div class="fmt-btn fmt-small">x²</div>164      <div class="fmt-btn fmt-small">x₂</div>165      <div class="fmt-btn fmt-small">166        <svg width="40" height="40" viewBox="0 0 24 24" fill="none" stroke="#333" stroke-width="2">167          <path d="M10 6l-4 4 4 4"></path>168        </svg>169      </div>170      <div class="fmt-btn fmt-small">171        <svg width="40" height="40" viewBox="0 0 24 24" fill="none" stroke="#333" stroke-width="2">172          <path d="M14 6l4 4-4 4"></path>173        </svg>174      </div>175    </div>176 177    <div class="format-row">178      <div class="fmt-btn fmt-small">179        <svg width="40" height="40" viewBox="0 0 24 24" fill="none" stroke="#333" stroke-width="2">180          <path d="M4 7h8M4 12h12M4 17h16"></path>181        </svg>182      </div>183      <div class="fmt-btn fmt-small">184        <svg width="40" height="40" viewBox="0 0 24 24" fill="none" stroke="#333" stroke-width="2">185          <circle cx="6" cy="8" r="1.5"></circle>186          <path d="M10 8h10M10 14h10"></path>187          <circle cx="6" cy="14" r="1.5"></circle>188        </svg>189      </div>190      <div class="fmt-btn fmt-small">191        <svg width="40" height="40" viewBox="0 0 24 24" fill="none" stroke="#333" stroke-width="2">192          <rect x="4" y="7" width="3" height="3"></rect>193          <path d="M9 8h11M9 14h11"></path>194          <rect x="4" y="13" width="3" height="3"></rect>195        </svg>196      </div>197      <div class="fmt-btn fmt-small">198        <svg width="40" height="40" viewBox="0 0 24 24" fill="none" stroke="#333" stroke-width="2">199          <rect x="5" y="7" width="4" height="4"></rect>200          <path d="M12 9h7"></path>201        </svg>202      </div>203      <div class="fmt-btn fmt-small">204        <svg width="42" height="42" viewBox="0 0 24 24" fill="none" stroke="#333" stroke-width="2">205          <rect x="5" y="5" width="14" height="14" rx="2"></rect>206          <path d="M7 12l3 3 7-7"></path>207        </svg>208      </div>209      <div class="fmt-btn done fmt-wide">DONE</div>210    </div>211  </div>212 213  <!-- Editor text area -->214  <div class="editor">215    <div>Manager</div>216    <div>AA Technologies</div>217    <div>Pune</div>218    <br>219    <div>Dear s</div>220  </div>221 222  <!-- On-screen keyboard -->223  <div class="keyboard">224    <div class="suggest">225      <div>s</div>226      <div class="muted">|</div>227      <div>sir</div>228      <div class="muted">|</div>229      <div>students</div>230      <div class="spacer"></div>231      <svg width="60" height="60" viewBox="0 0 24 24" fill="none" stroke="#ffffff" stroke-width="2">232        <path d="M12 14a3 3 0 0 0 3-3V8a3 3 0 0 0-6 0v3a3 3 0 0 0 3 3z"></path>233        <path d="M19 10v2a7 7 0 0 1-14 0v-2"></path>234      </svg>235    </div>236 237    <div class="keys">238      <div class="row">239        <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>240        <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>241      </div>242      <div class="row">243        <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>244        <div class="key">h</div><div class="key">j</div><div class="key">k</div><div class="key">l</div>245      </div>246      <div class="row">247        <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>248        <div class="key back">249          <svg width="46" height="46" viewBox="0 0 24 24" fill="none" stroke="#fff" stroke-width="2">250            <path d="M22 7H9L4 12l5 5h13z"></path>251            <path d="M12 9l3 3-3 3"></path>252          </svg>253        </div>254      </div>255      <div class="row kbd-bottom">256        <div class="key wide">?123</div>257        <div class="key wide">,</div>258        <div class="key wide">🙂</div>259        <div class="key space"></div>260        <div class="key">.</div>261        <div class="key enter">262          <svg width="44" height="44" viewBox="0 0 24 24" fill="none" stroke="#fff" stroke-width="2">263            <path d="M9 12h9v-6"></path>264            <path d="M13 16l-4-4 4-4"></path>265          </svg>266        </div>267      </div>268    </div>269  </div>270 271</div>272</body>273</html>