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 Note Editor Mock</title>6<style>7  body { margin: 0; padding: 0; background: transparent; font-family: Arial, Helvetica, sans-serif; }8  #render-target {9    width: 1080px;10    height: 2400px;11    position: relative;12    overflow: hidden;13    background: #ffffff;14  }15 16  /* Status bar (teal area with time and system icons) */17  .status-bar {18    position: absolute;19    top: 0; left: 0; right: 0;20    height: 96px;21    background: #5ec1cc;22    color: #ffffff;23    font-size: 38px;24    display: flex;25    align-items: center;26    padding: 0 28px;27    box-sizing: border-box;28    letter-spacing: 1px;29  }30  .status-icons {31    margin-left: auto;32    display: flex;33    align-items: center;34    gap: 26px;35  }36  .dot { width: 10px; height: 10px; background:#ffffff; border-radius:50%; opacity: .9; }37  .icon-wifi, .icon-battery {38    width: 44px; height: 22px; border: 2px solid #fff; border-radius: 4px; position: relative;39  }40  .icon-battery:after {41    content:""; position:absolute; right:-8px; top:6px; width:6px; height:10px; background:#fff; border-radius:2px;42  }43 44  /* App bar with back button, Title field and actions */45  .app-bar {46    position: absolute;47    top: 96px;48    left: 0; right: 0;49    height: 212px;50    background: #ffffff;51    padding: 22px 28px;52    box-sizing: border-box;53    display: flex;54    align-items: center;55    gap: 18px;56    border-bottom: 1px solid #e6e6e6;57  }58  .back-btn {59    width: 72px; height: 72px; display:flex; justify-content:center; align-items:center;60    border-radius: 36px;61  }62  .back-btn svg { width: 40px; height: 40px; fill: #3b3b3b; }63 64  .title-field {65    flex: 1;66    height: 110px;67    background: #f2f2f2;68    border-radius: 10px;69    display: flex;70    align-items: center;71    padding: 0 26px;72    font-size: 44px;73    color: #7a7a7a;74    position: relative;75  }76  .title-field .dropdown {77    position: absolute;78    right: 16px; top: 50%; transform: translateY(-50%);79    width: 56px; height: 56px; display:flex; align-items:center; justify-content:center;80  }81  .title-field .dropdown svg { width: 32px; height: 32px; fill: #6b6b6b; }82 83  .app-actions {84    display: flex; align-items:center; gap: 22px;85  }86  .action-circle {87    width: 70px; height: 70px; border-radius: 10px; border: 2px solid #d9d9d9;88    display:flex; align-items:center; justify-content:center; color:#4d4d4d; font-weight: bold;89  }90 91  /* Formatting toolbar */92  .format-toolbar {93    position: absolute;94    top: 308px;95    left: 0; right: 0;96    padding: 26px 36px 18px;97    box-sizing: border-box;98    background: #ffffff;99    border-bottom: 1px solid #ededed;100  }101  .format-row {102    display: flex;103    flex-wrap: wrap;104    gap: 18px;105    margin-bottom: 18px;106  }107  .fmt-btn {108    width: 150px;109    height: 86px;110    border: 2px solid #dedede;111    border-radius: 10px;112    background: #fafafa;113    font-size: 42px;114    color: #444;115    display: flex; align-items: center; justify-content: center;116  }117  .fmt-btn.small { width: 120px; height: 78px; font-size: 36px; }118  .fmt-btn.wide { width: 220px; }119  .done-btn {120    margin-left: auto;121    width: 210px;122    height: 92px;123    background: #5ec1cc;124    border-radius: 10px;125    color: #fff;126    font-weight: 700;127    font-size: 40px;128    display:flex; align-items:center; justify-content:center;129  }130 131  /* Document area */132  .doc {133    position: absolute;134    top: 530px;135    left: 0; right: 0;136    bottom: 800px; /* space for keyboard */137    padding: 40px 44px;138    box-sizing: border-box;139    overflow: hidden;140    background: #ffffff;141  }142  .doc p {143    margin: 0 0 26px;144    font-size: 54px;145    color: #111;146    line-height: 1.36;147  }148 149  /* Keyboard mock */150  .keyboard {151    position: absolute;152    left: 0; right: 0; bottom: 0;153    height: 800px;154    background: #1a1820;155    padding: 28px 24px 34px;156    box-sizing: border-box;157    color: #eaeaea;158  }159  .kbd-top {160    display:flex; align-items:center; gap: 18px; margin-bottom: 18px;161  }162  .kbd-grid {163    display: grid;164    grid-template-columns: repeat(10, 1fr);165    gap: 18px;166  }167  .key {168    height: 120px;169    background: #2b2932;170    border-radius: 18px;171    display:flex; align-items:center; justify-content:center;172    font-size: 48px; color: #ddd;173  }174  .row { margin-bottom: 18px; display:grid; grid-template-columns: repeat(10, 1fr); gap: 18px; }175  .row .key.wide { grid-column: span 2; }176  .row .key.xwide { grid-column: span 3; }177  .space-row { display:grid; grid-template-columns: 1fr 6fr 1fr; gap: 18px; }178</style>179</head>180<body>181<div id="render-target">182 183  <!-- Status bar -->184  <div class="status-bar">185    <div>11:14</div>186    <div class="status-icons">187      <div class="dot"></div>188      <div class="dot"></div>189      <div class="icon-wifi"></div>190      <div class="icon-battery"></div>191    </div>192  </div>193 194  <!-- App header -->195  <div class="app-bar">196    <div class="back-btn" aria-label="Back">197      <svg viewBox="0 0 24 24"><path d="M15.5 3.5L7 12l8.5 8.5-2.1 2.1L2.8 12l10.6-10.6 2.1 2.1z"/></svg>198    </div>199    <div class="title-field">200      Title201      <div class="dropdown">202        <svg viewBox="0 0 24 24"><path d="M7 10l5 5 5-5z"/></svg>203      </div>204    </div>205    <div class="app-actions">206      <div class="action-circle" title="Delete">207        <svg viewBox="0 0 24 24" width="34" height="34" style="fill:#4d4d4d;">208          <path d="M6 7h12v14H6zM9 4h6l1 2H8l1-2z"/>209        </svg>210      </div>211      <div class="action-circle" title="Help">?</div>212    </div>213  </div>214 215  <!-- Formatting toolbar -->216  <div class="format-toolbar">217    <div class="format-row">218      <div class="fmt-btn wide">OCR</div>219      <div class="fmt-btn">B</div>220      <div class="fmt-btn">I</div>221      <div class="fmt-btn">T</div>222      <div class="fmt-btn">U</div>223      <div class="fmt-btn">A</div>224      <div class="fmt-btn">Tt</div>225    </div>226    <div class="format-row">227      <div class="fmt-btn small">≡</div>228      <div class="fmt-btn small">≡</div>229      <div class="fmt-btn small">x²</div>230      <div class="fmt-btn small">x₂</div>231      <div class="fmt-btn small">↶</div>232      <div class="fmt-btn small">↷</div>233      <div class="fmt-btn small">⟂</div>234      <div class="done-btn">DONE</div>235    </div>236    <div class="format-row">237      <div class="fmt-btn small">≡</div>238      <div class="fmt-btn small">≡</div>239      <div class="fmt-btn small">≡</div>240      <div class="fmt-btn small">•</div>241      <div class="fmt-btn small">1.</div>242      <div class="fmt-btn small">☑</div>243    </div>244  </div>245 246  <!-- Document editor content -->247  <div class="doc">248    <p>Manager</p>249    <p>AA Technologies</p>250    <p>Pune</p>251    <p>D</p>252  </div>253 254  <!-- Keyboard mock -->255  <div class="keyboard">256    <div class="kbd-top" style="font-size:40px;">⌨ Keyboard</div>257 258    <div class="row">259      <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>260      <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>261    </div>262    <div class="row">263      <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>264      <div class="key">h</div><div class="key">j</div><div class="key">k</div><div class="key">l</div><div class="key wide">⌫</div>265    </div>266    <div class="row">267      <div class="key xwide">⇧</div><div class="key">z</div><div class="key">x</div><div class="key">c</div><div class="key">v</div>268      <div class="key">b</div><div class="key">n</div><div class="key">m</div><div class="key">.</div><div class="key xwide">↵</div>269    </div>270    <div class="space-row">271      <div class="key">?123</div>272      <div class="key">space</div>273      <div class="key">⤴</div>274    </div>275  </div>276 277</div>278</body>279</html>