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>Notes Editor UI 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  /* Top teal app area */17  .app-top {18    position: absolute;19    top: 0;20    left: 0;21    width: 1080px;22    height: 620px;23    background: #5fc3cf;24  }25 26  /* Status bar */27  .status-bar {28    height: 90px;29    padding: 0 28px;30    display: flex;31    align-items: center;32    color: #ffffff;33    font-weight: 600;34    font-size: 36px;35  }36  .status-icons {37    margin-left: auto;38    display: flex;39    align-items: center;40    gap: 24px;41  }42  .dot { width: 12px; height: 12px; background: #ffffff; border-radius: 50%; opacity: .9; }43  .signal, .wifi, .battery {44    width: 34px; height: 20px; border: 2px solid #fff; border-radius: 3px; position: relative;45  }46  .battery::after { content: ''; position: absolute; right: -8px; top: 5px; width: 6px; height: 10px; background: #fff; border-radius: 1px; }47 48  /* Header main row (back + Title + small actions) */49  .header-row {50    position: absolute;51    top: 110px;52    left: 20px;53    right: 20px;54    display: flex;55    align-items: center;56    gap: 22px;57  }58  .back-btn {59    width: 72px; height: 72px; display: flex; align-items: center; justify-content: center;60  }61  .title-input {62    flex: 1;63    background: #ffffff;64    border-radius: 10px;65    height: 120px;66    display: flex;67    align-items: center;68    padding: 0 28px;69    box-shadow: 0 1px 0 rgba(0,0,0,0.08) inset;70    font-size: 46px;71    color: #9e9e9e;72  }73  .header-actions {74    display: flex;75    align-items: center;76    gap: 26px;77  }78  .round-icon {79    width: 80px; height: 80px; border-radius: 50%;80    background: rgba(255,255,255,0.95);81    display: flex; align-items: center; justify-content: center;82    box-shadow: 0 1px 0 rgba(0,0,0,0.12);83  }84 85  /* Formatting toolbar blocks */86  .toolbar {87    position: absolute;88    left: 40px;89    right: 40px;90  }91  .toolbar.row1 { top: 260px; }92  .toolbar.row2 { top: 370px; }93  .toolbar.row3 { top: 480px; }94 95  .tool-wrap { display: flex; gap: 20px; flex-wrap: wrap; align-items: center; }96  .tool-btn {97    min-width: 110px;98    height: 86px;99    background: #f3f3f3;100    border: 1px solid #d9d9d9;101    border-radius: 8px;102    display: flex; align-items: center; justify-content: center;103    color: #4f4f4f;104    font-weight: 700;105    font-size: 38px;106  }107  .tool-btn.small { min-width: 96px; height: 80px; font-weight: 600; }108  .done-btn {109    margin-left: auto;110    background: #2fb1c3;111    color: #ffffff;112    border: none;113    min-width: 200px;114    height: 100px;115    border-radius: 8px;116    font-size: 44px;117    font-weight: 800;118    display: flex; align-items: center; justify-content: center;119    box-shadow: 0 2px 0 rgba(0,0,0,0.12);120  }121 122  /* Editor area */123  .editor {124    position: absolute;125    top: 640px;126    left: 28px;127    right: 28px;128    bottom: 860px; /* leave space for keyboard */129    padding: 20px 10px;130    overflow: hidden;131    color: #202124;132    font-size: 64px;133    line-height: 1.4;134  }135 136  /* Keyboard mock */137  .keyboard {138    position: absolute;139    left: 0;140    right: 0;141    bottom: 0;142    height: 860px;143    background: #18181b;144    border-top: 2px solid #101012;145    color: #eaeaea;146  }147  .kbd-suggestions {148    height: 120px;149    display: flex; align-items: center;150    padding: 0 24px;151    gap: 30px;152    background: #1d1d20;153    font-size: 46px;154  }155  .kbd-suggestions .spacer { margin-left: auto; display: flex; gap: 26px; align-items: center; }156  .kbd-row {157    display: flex;158    gap: 16px;159    padding: 14px 18px;160  }161  .key {162    flex: 1;163    height: 140px;164    background: #2a2a2e;165    border-radius: 14px;166    display: flex; align-items: center; justify-content: center;167    font-size: 52px;168  }169  .key.small { flex: 0 0 92px; }170  .key.wide { flex: 2; }171  .key.space { flex: 5; color: #bfbfbf; }172  .key.dark { background: #252529; }173  .key.accent { background: #ead7f9; color: #1b1b1b; font-weight: 800; }174  .key.icon {175    font-size: 56px;176  }177 178  /* Simple inline icon helpers */179  .svg-white { fill: #ffffff; }180  .svg-gray { fill: #5a5a5a; }181</style>182</head>183<body>184<div id="render-target">185 186  <!-- Top teal app area -->187  <div class="app-top">188    <!-- Status bar -->189    <div class="status-bar">190      11:02191      <div class="status-icons">192        <div class="dot"></div>193        <div class="dot"></div>194        <div class="signal"></div>195        <div class="wifi"></div>196        <div class="battery"></div>197      </div>198    </div>199 200    <!-- Header with back + Title + actions -->201    <div class="header-row">202      <div class="back-btn">203        <svg width="48" height="48" viewBox="0 0 24 24">204          <path class="svg-white" d="M15.5 3.9 7.4 12l8.1 8.1-1.9 1.9L3.6 12 13.6 2l1.9 1.9z"/>205        </svg>206      </div>207 208      <div class="title-input">Title</div>209 210      <div class="header-actions">211        <div class="round-icon">212          <svg width="44" height="44" viewBox="0 0 24 24">213            <path class="svg-gray" d="M7 10l5 5 5-5H7z"/>214          </svg>215        </div>216        <div class="round-icon">217          <svg width="44" height="44" viewBox="0 0 24 24">218            <path class="svg-gray" d="M6 7h12l-1 12H7L6 7zm3-3h6v2H9V4z"/>219          </svg>220        </div>221        <div class="round-icon">222          <svg width="44" height="44" viewBox="0 0 24 24">223            <circle class="svg-gray" cx="12" cy="19" r="1.6"/>224            <path class="svg-gray" d="M12 4a6 6 0 0 0-6 6h2a4 4 0 1 1 4 4v3h2v-3a6 6 0 0 0-2-10z"/>225          </svg>226        </div>227      </div>228    </div>229 230    <!-- Formatting toolbar rows -->231    <div class="toolbar row1">232      <div class="tool-wrap">233        <div class="tool-btn">OCR</div>234        <div class="tool-btn">B</div>235        <div class="tool-btn">I</div>236        <div class="tool-btn">T</div>237        <div class="tool-btn">U</div>238        <div class="tool-btn">A</div>239        <div class="tool-btn">Tt</div>240      </div>241    </div>242 243    <div class="toolbar row2">244      <div class="tool-wrap">245        <div class="tool-btn small">▶︎</div>246        <div class="tool-btn small">◀︎</div>247        <div class="tool-btn small">x²</div>248        <div class="tool-btn small">x₂</div>249        <div class="tool-btn small">↶</div>250        <div class="tool-btn small">↷</div>251      </div>252    </div>253 254    <div class="toolbar row3">255      <div class="tool-wrap" style="align-items:center;">256        <div class="tool-btn small">≡</div>257        <div class="tool-btn small" style="min-width:120px;">≣</div>258        <div class="tool-btn small">☰</div>259        <div class="tool-btn small">•</div>260        <div class="tool-btn small">1.</div>261        <div class="tool-btn small">☑︎</div>262        <div class="done-btn">DONE</div>263      </div>264    </div>265  </div>266 267  <!-- Editor text region -->268  <div class="editor">269    <div>Manager</div>270    <div>AA Te</div>271  </div>272 273  <!-- Bottom keyboard mock -->274  <div class="keyboard">275    <div class="kbd-suggestions">276      <div class="key dark" style="height:84px; min-width:84px; border-radius:12px; display:flex; align-items:center; justify-content:center;">◧</div>277      <div>Te</div>278      <div>Re</div>279      <div>Ye</div>280      <div class="spacer">281        <div class="key dark" style="height:84px; min-width:84px; border-radius:12px; display:flex; align-items:center; justify-content:center;">282          <svg width="34" height="34" viewBox="0 0 24 24"><path fill="#eaeaea" d="M12 3a9 9 0 0 0-9 9h2a7 7 0 1 1 7 7v2a9 9 0 0 0 0-18z"/></svg>283        </div>284      </div>285    </div>286 287    <!-- Row 1 -->288    <div class="kbd-row">289      <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>290      <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>291    </div>292    <!-- Row 2 -->293    <div class="kbd-row">294      <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>295      <div class="key">h</div><div class="key">j</div><div class="key">k</div><div class="key">l</div>296      <div class="key small icon">⌫</div>297    </div>298    <!-- Row 3 -->299    <div class="kbd-row">300      <div class="key small">?123</div>301      <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>302      <div class="key">n</div><div class="key">m</div>303      <div class="key small">.</div>304      <div class="key accent icon">↩︎</div>305    </div>306    <!-- Row 4 -->307    <div class="kbd-row">308      <div class="key small">,</div>309      <div class="key small">😊</div>310      <div class="key space">Space</div>311      <div class="key small">.</div>312      <div class="key accent icon">⤴︎</div>313    </div>314  </div>315 316</div>317</body>318</html>