GD-ML/AndroidCode

1<html>2<head>3<meta charset="UTF-8">4<title>Mobile Note Editor Mock</title>5<style>6  body { margin: 0; padding: 0; background: transparent; font-family: "Roboto", Arial, sans-serif; }7  #render-target {8    position: relative;9    width: 1080px;10    height: 2400px;11    overflow: hidden;12    background: #FFFFFF;13  }14 15  /* Top turquoise app/status bar */16  .appbar {17    position: absolute;18    top: 0;19    left: 0;20    width: 1080px;21    height: 160px;22    background: #5FC2CD;23    box-sizing: border-box;24    padding: 24px 28px;25    color: #fff;26  }27  .status-row {28    display: flex;29    align-items: center;30    justify-content: space-between;31  }32  .status-left {33    display: flex;34    align-items: center;35    gap: 24px;36  }37  .time {38    font-size: 38px;39    font-weight: 600;40    letter-spacing: 1px;41  }42  .circle-ic {43    width: 40px;44    height: 40px;45    border-radius: 50%;46    border: 2px solid rgba(255,255,255,0.75);47    display: inline-block;48    opacity: 0.9;49  }50  .status-right {51    display: flex;52    align-items: center;53    gap: 22px;54  }55  .status-right svg { fill: #fff; }56 57  /* Title bar + tools */58  .content {59    position: absolute;60    top: 160px;61    left: 0;62    right: 0;63    padding: 36px 48px 0 48px;64  }65  .title-row {66    position: relative;67    display: flex;68    align-items: center;69    gap: 24px;70  }71  .back-btn {72    width: 68px;73    height: 68px;74    border-radius: 40px;75    display: flex;76    align-items: center;77    justify-content: center;78    color: #fff;79    background: transparent;80    margin-left: -8px;81  }82  .title-box {83    flex: 1;84    height: 120px;85    background: #F3F5F7;86    border-radius: 14px;87    display: flex;88    align-items: center;89    padding: 0 32px;90    box-sizing: border-box;91    color: #6F757B;92    font-size: 44px;93  }94  .title-actions {95    display: flex;96    align-items: center;97    gap: 26px;98    margin-left: 10px;99  }100  .tact {101    width: 76px;102    height: 76px;103    border-radius: 14px;104    background: #F3F5F7;105    display: flex;106    align-items: center;107    justify-content: center;108    color: #455A64;109    font-weight: 700;110    font-size: 34px;111  }112 113  .toolbar {114    margin-top: 34px;115    display: grid;116    grid-template-columns: repeat(7, 1fr);117    gap: 22px;118    padding: 0 40px 0 52px;119  }120  .tool-btn {121    height: 92px;122    background: #F1F2F4;123    border: 1px solid #E0E3E6;124    border-radius: 12px;125    display: flex;126    align-items: center;127    justify-content: center;128    color: #37474F;129    font-weight: 700;130    font-size: 36px;131  }132 133  .tool-btn.mono {134    font-weight: 500;135    font-size: 30px;136    color: #546E7A;137  }138  .done-btn {139    grid-column: 7 / 8;140    grid-row: 3 / 4;141    height: 120px;142    background: #55BFD0;143    color: #fff;144    font-weight: 800;145    font-size: 44px;146    border: none;147    border-radius: 12px;148    letter-spacing: 1px;149  }150 151  /* Document text area */152  .doc-area {153    margin-top: 28px;154    padding: 36px 64px 0 64px;155    min-height: 900px;156    box-sizing: border-box;157  }158  .doc-area p {159    margin: 20px 0;160    font-size: 56px;161    color: #111;162  }163 164  /* Keyboard */165  .keyboard {166    position: absolute;167    bottom: 0;168    left: 0;169    width: 1080px;170    height: 820px;171    background: #1F1F1F;172    box-shadow: 0 -6px 20px rgba(0,0,0,0.28);173    color: #EDEDED;174  }175  .suggest {176    height: 100px;177    display: flex;178    align-items: center;179    padding: 0 34px;180    box-sizing: border-box;181    color: #DADADA;182    border-bottom: 1px solid rgba(255,255,255,0.06);183    gap: 26px;184  }185  .suggest .s-item {186    font-size: 42px;187  }188  .pipe { opacity: 0.4; }189  .kb-rows {190    padding: 22px 26px 20px 26px;191  }192  .row {193    display: flex;194    justify-content: space-between;195    margin: 16px 8px;196  }197  .key {198    width: 90px;199    height: 120px;200    background: #2A2A2A;201    border-radius: 16px;202    display: flex;203    align-items: center;204    justify-content: center;205    font-size: 46px;206    box-shadow: inset 0 -2px 0 rgba(255,255,255,0.04);207  }208  .row.shifted { padding: 0 60px; }209  .row.bottom {210    align-items: center;211  }212  .key.wide {213    width: 210px;214    font-size: 40px;215  }216  .space {217    flex: 1;218    height: 120px;219    background: #2A2A2A;220    border-radius: 22px;221    margin: 0 24px;222  }223  .return {224    width: 140px;225    height: 120px;226    background: #C4B3DE;227    color: #1A1A1A;228    border-radius: 22px;229    display: flex;230    align-items: center;231    justify-content: center;232    font-weight: 700;233  }234</style>235</head>236<body>237<div id="render-target">238 239  <!-- App/Status bar -->240  <div class="appbar">241    <div class="status-row">242      <div class="status-left">243        <div class="time">11:10</div>244        <div class="circle-ic"></div>245        <div class="circle-ic"></div>246        <div class="circle-ic"></div>247      </div>248      <div class="status-right">249        <!-- Simple wifi icon -->250        <svg width="44" height="44" viewBox="0 0 24 24"><path d="M12 20c1.1 0 2 .9 2 2h-4c0-1.1.9-2 2-2zm6.7-7.3l-1.4 1.4C15.9 11.7 8.1 11.7 6.7 14.1l-1.4-1.4c2.1-3.5 10.3-3.5 13.4 0zM12 10c3.3 0 6.3 1.1 8.5 3.3l-1.4 1.4C17.3 12.9 14.8 12 12 12s-5.3.9-7.1 2.7L3.4 13.3C5.7 11.1 8.7 10 12 10z"/></svg>251        <!-- Battery icon -->252        <svg width="52" height="52" viewBox="0 0 24 24"><path d="M16 7H5c-1.1 0-2 .9-2 2v6c0 1.1.9 2 2 2h11c1.1 0 2-.9 2-2V9c0-1.1-.9-2-2-2zm4 3v4h-1V10h1z"/></svg>253      </div>254    </div>255  </div>256 257  <!-- Title and toolbar -->258  <div class="content">259    <div class="title-row">260      <div class="back-btn">261        <svg width="44" height="44" viewBox="0 0 24 24">262          <path fill="#ffffff" d="M15.5 19l-7-7 7-7 1.5 1.5L11.5 12l5.5 5.5z"/>263        </svg>264      </div>265      <div class="title-box">Title</div>266      <div class="title-actions">267        <div class="tact">⌄</div>268        <div class="tact">269          <svg width="34" height="34" viewBox="0 0 24 24"><path fill="#455A64" d="M6 19c0 1.1.9 2 2 2h8a2 2 0 0 0 2-2V7H6v12zM18 4h-3.5l-1-1h-3l-1 1H6v2h12V4z"/></svg>270        </div>271        <div class="tact">?</div>272      </div>273    </div>274 275    <div class="toolbar">276      <div class="tool-btn mono">OCR</div>277      <div class="tool-btn">B</div>278      <div class="tool-btn">I</div>279      <div class="tool-btn">T</div>280      <div class="tool-btn">U</div>281      <div class="tool-btn">A</div>282      <div class="tool-btn mono">Tt</div>283 284      <div class="tool-btn">•▮</div>285      <div class="tool-btn">≡</div>286      <div class="tool-btn">x²</div>287      <div class="tool-btn"><span style="transform: translateY(6px);">x</span><span style="font-size:22px; margin-left:2px;">2</span></div>288      <div class="tool-btn">↶</div>289      <div class="tool-btn">↷</div>290      <div class="tool-btn mono"></div>291 292      <div class="tool-btn">≡</div>293      <div class="tool-btn">≡·</div>294      <div class="tool-btn">≡→</div>295      <div class="tool-btn">•</div>296      <div class="tool-btn">1.</div>297      <div class="tool-btn">☑</div>298      <button class="done-btn">DONE</button>299    </div>300 301    <div class="doc-area">302      <p>Manager</p>303      <p>AA Technologies</p>304      <p>Pu</p>305    </div>306  </div>307 308  <!-- On-screen keyboard -->309  <div class="keyboard">310    <div class="suggest">311      <div class="s-item">Pu</div>312      <div class="s-item pipe">|</div>313      <div class="s-item">Pi</div>314      <div class="s-item pipe">|</div>315      <div class="s-item">Purchase</div>316      <div style="margin-left:auto; display:flex; align-items:center; gap:16px;">317        <svg width="42" height="42" viewBox="0 0 24 24" fill="#EDEDED"><path d="M12 3a4 4 0 0 0-4 4c0 1.5.8 2.8 2 3.4V14l2 1 2-1v-3.6c1.2-.6 2-1.9 2-3.4a4 4 0 0 0-4-4z"/><circle cx="19" cy="19" r="2"/></svg>318      </div>319    </div>320    <div class="kb-rows">321      <div class="row">322        <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>323      </div>324      <div class="row shifted">325        <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>326      </div>327      <div class="row shifted">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">330          <svg width="38" height="38" viewBox="0 0 24 24" fill="#EDEDED"><path d="M22 12l-4-4v3H3v2h15v3z"/></svg>331        </div>332      </div>333      <div class="row bottom">334        <div class="key wide">?123</div>335        <div class="key">,</div>336        <div class="key">😊</div>337        <div class="space"></div>338        <div class="key">.</div>339        <div class="return">↵</div>340      </div>341    </div>342  </div>343 344</div>345</body>346</html>