GD-ML/AndroidCode

1<!DOCTYPE html>2<html>3<head>4<meta charset="UTF-8">5<meta name="viewport" content="width=1080, initial-scale=1.0">6<title>Mobile Notes UI Mock</title>7<style>8  body { margin: 0; padding: 0; background: transparent; font-family: Arial, Helvetica, sans-serif; }9  #render-target {10    position: relative;11    width: 1080px;12    height: 2400px;13    overflow: hidden;14    background: #2f2625;15  }16 17  /* Status bar */18  .status-bar {19    height: 100px;20    background: #3a2f2e;21    color: #eae6e4;22    display: flex;23    align-items: center;24    justify-content: space-between;25    padding: 0 28px;26    box-sizing: border-box;27    font-size: 36px;28    letter-spacing: 1px;29  }30  .status-icons {31    display: flex;32    align-items: center;33    gap: 24px;34  }35  .icon {36    width: 34px;37    height: 34px;38    display: inline-flex;39    align-items: center;40    justify-content: center;41  }42  .icon svg { width: 100%; height: 100%; fill: #eae6e4; }43 44  /* App toolbar */45  .app-toolbar {46    height: 120px;47    background: #3a2f2e;48    display: flex;49    align-items: center;50    padding: 0 26px;51    box-sizing: border-box;52    color: #e7dddb;53  }54  .toolbar-left, .toolbar-right { display: flex; align-items: center; gap: 34px; }55  .toolbar-left { flex: 1; }56  .tool-btn {57    width: 56px;58    height: 56px;59    border-radius: 12px;60    display: inline-flex;61    align-items: center;62    justify-content: center;63    color: #e7dddb;64    opacity: 0.95;65  }66  .tool-btn svg { width: 44px; height: 44px; fill: #e7dddb; }67 68  /* Content (note area) */69  .content {70    height: 1030px;71    background: #000;72    color: #cfcfcf;73    padding: 40px 44px;74    box-sizing: border-box;75  }76  .content .title {77    font-size: 64px;78    line-height: 1.2;79    color: #cfcfcf;80  }81 82  /* Formatting bar above keyboard */83  .format-bar {84    height: 120px;85    background: #3a2f2e;86    color: #e7dddb;87    display: flex;88    align-items: center;89    justify-content: center;90    gap: 40px;91    box-sizing: border-box;92  }93  .format-group { display: flex; align-items: center; gap: 34px; }94  .format-btn {95    min-width: 70px;96    height: 70px;97    padding: 0 10px;98    border-radius: 10px;99    display: inline-flex;100    align-items: center;101    justify-content: center;102    color: #e7dddb;103    background: transparent;104    font-weight: 700;105    font-size: 40px;106  }107  .format-btn.dim { font-weight: 600; opacity: 0.85; }108 109  /* Keyboard area */110  .kb-top {111    height: 110px;112    background: #3a2f2e;113    display: flex;114    align-items: center;115    padding: 0 24px;116    box-sizing: border-box;117    gap: 26px;118  }119  .kb-chip {120    width: 88px;121    height: 72px;122    border-radius: 12px;123    background: #4b4241;124    color: #e8e6e5;125    display: flex;126    align-items: center;127    justify-content: center;128    font-size: 30px;129  }130  .kb-chip.wide {131    width: 120px;132  }133 134  .keyboard {135    height: 880px;136    background: #2f2625;137    padding: 24px 20px 10px;138    box-sizing: border-box;139    display: flex;140    flex-direction: column;141    justify-content: space-between;142  }143  .kb-row {144    display: flex;145    justify-content: center;146    gap: 10px;147  }148  .key {149    width: 88px;150    height: 110px;151    border-radius: 16px;152    background: #4b4241;153    color: #eae6e4;154    display: flex;155    align-items: center;156    justify-content: center;157    font-size: 40px;158    box-sizing: border-box;159  }160  .key.small { width: 78px; }161  .key.wide { width: 120px; }162  .key.extra-wide { width: 420px; }163  .key.pink {164    background: #e8b9b5;165    color: #2d2221;166    font-weight: 700;167  }168  .key.icon svg { width: 50px; height: 50px; fill: #eae6e4; }169 170  .nav-pill {171    height: 40px;172    display: flex;173    align-items: center;174    justify-content: center;175    background: #2f2625;176  }177  .pill {178    width: 260px;179    height: 10px;180    background: #bdb7b6;181    border-radius: 6px;182  }183</style>184</head>185<body>186<div id="render-target">187 188  <!-- Status Bar -->189  <div class="status-bar">190    <div class="time">7:48</div>191    <div class="status-icons">192      <span class="icon" title="Location">193        <svg viewBox="0 0 24 24"><path d="M12 2a7 7 0 0 0-7 7c0 5.25 7 13 7 13s7-7.75 7-13a7 7 0 0 0-7-7zm0 9.5a2.5 2.5 0 1 1 0-5 2.5 2.5 0 0 1 0 5z"/></svg>194      </span>195      <span class="icon" title="Wi‑Fi">196        <svg viewBox="0 0 24 24"><path d="M12 20.5l-1.5-1.5a2.1 2.1 0 0 1 3 0L12 20.5zm6-4.5a8.5 8.5 0 0 0-12 0l-1.5-1.5a10.5 10.5 0 0 1 15 0L18 16zM12 9a13 13 0 0 0-9 3l-1.5-1.5a15 15 0 0 1 21 0L21 12a13 13 0 0 0-9-3z"/></svg>197      </span>198      <span class="icon" title="Battery">199        <svg viewBox="0 0 24 24"><path d="M16 7h2v10h-2V7z"/><path d="M3 7h12v10H3V7zm14-2v2h2v8h-2v2h4V5h-4z"/></svg>200      </span>201    </div>202  </div>203 204  <!-- App Toolbar -->205  <div class="app-toolbar">206    <div class="toolbar-left">207      <div class="tool-btn" title="Done">208        <svg viewBox="0 0 24 24"><path d="M9 16.2l-3.5-3.6L4 14l5 5 11-11-1.5-1.4z"/></svg>209      </div>210      <div class="tool-btn" title="Undo">211        <svg viewBox="0 0 24 24"><path d="M7 7l-5 5 5 5v-4h6a5 5 0 0 1 5 5h2a7 7 0 0 0-7-7H7V7z"/></svg>212      </div>213      <div class="tool-btn" title="Redo">214        <svg viewBox="0 0 24 24"><path d="M17 7v4h-6a7 7 0 0 0-7 7h2a5 5 0 0 1 5-5h6v4l5-5-5-5z"/></svg>215      </div>216      <div class="tool-btn" title="Font">217        <svg viewBox="0 0 24 24"><path d="M12 4l-6 16h2.2l1.7-5h6.2l1.7 5H20L14 4h-2zm-1.4 9l2.4-6.8L15.4 13h-4.8z"/></svg>218      </div>219      <div class="tool-btn" title="Add">220        <svg viewBox="0 0 24 24"><path d="M11 11V5h2v6h6v2h-6v6h-2v-6H5v-2z"/></svg>221      </div>222      <div class="tool-btn" title="Comment">223        <svg viewBox="0 0 24 24"><path d="M4 4h16v12H6l-2 2V4z"/></svg>224      </div>225    </div>226    <div class="toolbar-right">227      <div class="tool-btn" title="More">228        <svg viewBox="0 0 24 24"><path d="M12 6a2 2 0 1 1 0-4 2 2 0 0 1 0 4zm0 8a2 2 0 1 1 0-4 2 2 0 0 1 0 4zm0 8a2 2 0 1 1 0-4 2 2 0 0 1 0 4z"/></svg>229      </div>230    </div>231  </div>232 233  <!-- Editor Content -->234  <div class="content">235    <div class="title">Noida sector 99</div>236  </div>237 238  <!-- Formatting Bar -->239  <div class="format-bar">240    <div class="format-group">241      <div class="format-btn">B</div>242      <div class="format-btn dim" style="font-style: italic;">I</div>243      <div class="format-btn"><u>U</u></div>244      <div class="format-btn">A</div>245      <div class="format-btn">246        <svg width="44" height="44" viewBox="0 0 24 24"><path fill="#e7dddb" d="M3 17h18v2H3v-2zm0-7h10v2H3V10zm0-5h14v2H3V5zm12 7l3 3 3-3h-2v-4h-2v4h-2z"/></svg>247      </div>248      <div class="format-btn">249        <svg width="44" height="44" viewBox="0 0 24 24"><path fill="#e7dddb" d="M4 6h16v2H4V6zm0 5h10v2H4v-2zm0 5h16v2H4v-2zM18 9l3 3-3 3v-2h-4v-2h4V9z"/></svg>250      </div>251      <div class="format-btn">252        <svg width="44" height="44" viewBox="0 0 24 24"><path fill="#e7dddb" d="M4 6h8v2H4V6zm0 5h16v2H4v-2zm0 5h12v2H4v-2z"/></svg>253      </div>254    </div>255  </div>256 257  <!-- Keyboard Top Strip -->258  <div class="kb-top">259    <div class="kb-chip">⌦</div>260    <div class="kb-chip">😀</div>261    <div class="kb-chip wide">GIF</div>262    <div class="kb-chip">G⇄</div>263    <div class="kb-chip">⚙</div>264    <div class="kb-chip">🎨</div>265    <div class="kb-chip">🎤</div>266  </div>267 268  <!-- Keyboard Keys -->269  <div class="keyboard">270    <div class="kb-row">271      <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>272      <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>273    </div>274    <div class="kb-row" style="padding-left: 44px; padding-right: 44px;">275      <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>276      <div class="key">h</div><div class="key">j</div><div class="key">k</div><div class="key">l</div>277    </div>278    <div class="kb-row">279      <div class="key wide icon" title="Shift">280        <svg viewBox="0 0 24 24"><path d="M12 4l8 8h-5v6H9v-6H4l8-8z"/></svg>281      </div>282      <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>283      <div class="key wide icon" title="Backspace">284        <svg viewBox="0 0 24 24"><path d="M22 6H9L3 12l6 6h13V6zm-4.4 9.6l-1.2 1.2L14 14.4l-2.4 2.4-1.2-1.2L12.8 13l-2.4-2.4 1.2-1.2L14 11.6l2.4-2.4 1.2 1.2L16.2 13l1.4 1.6z"/></svg>285      </div>286    </div>287    <div class="kb-row">288      <div class="key pink wide">?123</div>289      <div class="key">,</div>290      <div class="key">😊</div>291      <div class="key extra-wide"></div>292      <div class="key">.</div>293      <div class="key pink wide">294        <svg viewBox="0 0 24 24"><path d="M4 9v6h8v5l8-8-8-8v5H4z"/></svg>295      </div>296    </div>297  </div>298 299  <!-- Navigation pill -->300  <div class="nav-pill"><div class="pill"></div></div>301 302</div>303</body>304</html>