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; }7  #render-target {8    width: 1080px;9    height: 2400px;10    position: relative;11    overflow: hidden;12    background: #FFFFFF;13    font-family: Arial, Helvetica, sans-serif;14    color: #222;15  }16 17  /* Top status bar */18  .status-bar {19    position: absolute;20    top: 0;21    left: 0;22    width: 1080px;23    height: 120px;24    background: #5EC0CF;25    color: #fff;26    display: flex;27    align-items: center;28    padding: 0 36px;29    box-sizing: border-box;30  }31  .status-time {32    font-size: 44px;33    font-weight: 600;34  }35  .status-icons {36    margin-left: auto;37    display: flex;38    gap: 22px;39    align-items: center;40  }41  .status-dot {42    width: 28px;43    height: 28px;44    border-radius: 50%;45    background: rgba(255,255,255,0.9);46  }47  .status-battery {48    width: 44px;49    height: 24px;50    border: 3px solid #fff;51    border-radius: 5px;52    position: relative;53  }54  .status-battery::after {55    content: "";56    position: absolute;57    right: -8px;58    top: 6px;59    width: 6px;60    height: 12px;61    background: #fff;62    border-radius: 1px;63  }64  .status-battery .level {65    position: absolute;66    left: 3px;67    top: 3px;68    height: 16px;69    width: 26px;70    background: #fff;71  }72  .wifi {73    width: 36px; height: 24px; position: relative;74  }75  .wifi:before, .wifi:after {76    content: ""; position: absolute; left: 0; right: 0; border-top: 3px solid #fff; border-radius: 20px;77  }78  .wifi:before { top: 2px; height: 0; }79  .wifi:after { top: 12px; height: 0; }80  .signal {81    width: 26px; height: 26px; border: 3px solid #fff; border-radius: 50%;82  }83 84  /* Header with back + title input + actions */85  .editor-header {86    position: absolute;87    top: 120px;88    left: 0;89    width: 1080px;90    height: 140px;91    background: #fff;92    display: flex;93    align-items: center;94    padding: 0 24px;95    box-sizing: border-box;96    border-bottom: 1px solid #e6e6e6;97  }98  .icon-btn {99    width: 72px; height: 72px;100    display: flex; justify-content: center; align-items: center;101    border-radius: 36px;102    margin-right: 18px;103  }104  .icon-btn svg { width: 44px; height: 44px; fill: #555; }105  .title-input {106    flex: 1;107    height: 96px;108    background: #f3f4f6;109    border-radius: 12px;110    border: 1px solid #dde1e6;111    display: flex;112    align-items: center;113    padding: 0 24px;114    font-size: 40px;115    color: #9aa0a6;116  }117  .actions {118    display: flex; gap: 22px; margin-left: 18px;119  }120  .circle-action {121    width: 70px; height: 70px; border-radius: 50%;122    border: 1px solid #cfd8dc;123    display: flex; align-items: center; justify-content: center;124    color: #555;125    font-size: 36px;126    background: #fff;127  }128 129  /* Formatting toolbar */130  .toolbar {131    position: absolute;132    top: 260px;133    left: 0;134    width: 1080px;135    background: #fff;136    padding: 22px 24px 24px 24px;137    box-sizing: border-box;138    border-bottom: 1px solid #e6e6e6;139  }140  .tool-row {141    display: flex;142    flex-wrap: nowrap;143    align-items: center;144    gap: 22px;145    margin-bottom: 24px;146  }147  .tool-btn {148    height: 96px;149    min-width: 120px;150    background: #f1f3f4;151    border: 1px solid #dadce0;152    display: flex;153    align-items: center;154    justify-content: center;155    border-radius: 10px;156    color: #333;157    font-size: 38px;158    padding: 0 18px;159  }160  .tool-small { min-width: 96px; font-size: 36px; }161  .done-btn {162    margin-left: auto;163    height: 96px; min-width: 220px;164    background: #55b8c7;165    color: #fff;166    border-radius: 10px;167    display: flex; align-items: center; justify-content: center;168    font-size: 44px; font-weight: 700;169  }170 171  /* Editor area */172  .editor-area {173    position: absolute;174    top: 520px;175    left: 0;176    width: 1080px;177    height: 600px;178    background: #fff;179    padding: 28px 28px;180    box-sizing: border-box;181  }182  .editor-text {183    font-size: 56px;184    color: #000;185  }186 187  /* Keyboard */188  .keyboard {189    position: absolute;190    bottom: 0;191    left: 0;192    width: 1080px;193    height: 1000px;194    background: #141414;195    color: #fff;196    padding: 22px 24px;197    box-sizing: border-box;198  }199  .kbd-top {200    display: flex; align-items: center; gap: 36px; margin-bottom: 20px;201  }202  .kbd-top .mini {203    width: 90px; height: 90px; background: #202124; border-radius: 20px;204    display: flex; align-items: center; justify-content: center; font-size: 36px;205  }206  .row {207    display: flex; gap: 18px; margin: 18px 0;208  }209  .key {210    flex: 1;211    height: 120px;212    background: #2a2a2a;213    border-radius: 22px;214    display: flex; align-items: center; justify-content: center;215    font-size: 50px; color: #ddd;216  }217  .key.tiny { flex: 0 0 110px; }218  .space { flex: 5; }219  .key.dark { background: #222; }220  .key.wide { flex: 0 0 160px; }221</style>222</head>223<body>224<div id="render-target">225 226  <!-- Status bar -->227  <div class="status-bar">228    <div class="status-time">11:01</div>229    <div class="status-icons">230      <div class="status-dot"></div>231      <div class="status-dot"></div>232      <div class="wifi"></div>233      <div class="signal"></div>234      <div class="status-battery"><div class="level"></div></div>235    </div>236  </div>237 238  <!-- Editor header -->239  <div class="editor-header">240    <div class="icon-btn">241      <svg viewBox="0 0 24 24"><path d="M15.5 19l-7-7 7-7" /></svg>242    </div>243    <div class="title-input">Title</div>244    <div class="actions">245      <div class="circle-action">⌄</div>246      <div class="circle-action">🗑</div>247      <div class="circle-action">?</div>248    </div>249  </div>250 251  <!-- Formatting toolbar -->252  <div class="toolbar">253    <div class="tool-row">254      <div class="tool-btn">OCR</div>255      <div class="tool-btn">B</div>256      <div class="tool-btn">I</div>257      <div class="tool-btn">T</div>258      <div class="tool-btn">U</div>259      <div class="tool-btn">A</div>260      <div class="tool-btn">Tt</div>261    </div>262    <div class="tool-row">263      <div class="tool-btn tool-small">▶︎</div>264      <div class="tool-btn tool-small">◀︎</div>265      <div class="tool-btn tool-small">x̶</div>266      <div class="tool-btn tool-small">x²</div>267      <div class="tool-btn tool-small">x₂</div>268      <div class="tool-btn tool-small">↶</div>269      <div class="tool-btn tool-small">↷</div>270    </div>271    <div class="tool-row">272      <div class="tool-btn tool-small">≡</div>273      <div class="tool-btn tool-small">≣</div>274      <div class="tool-btn tool-small">≡</div>275      <div class="tool-btn tool-small">•</div>276      <div class="tool-btn tool-small">1.</div>277      <div class="tool-btn tool-small">☑︎</div>278      <div class="done-btn">DONE</div>279    </div>280  </div>281 282  <!-- Editor text area -->283  <div class="editor-area">284    <div class="editor-text">Manager</div>285  </div>286 287  <!-- Keyboard -->288  <div class="keyboard">289    <div class="kbd-top">290      <div class="mini">⭘</div>291      <div class="mini">🙂</div>292      <div class="mini">GIF</div>293      <div class="mini">⚙︎</div>294      <div class="mini">G↔</div>295      <div class="mini">🎨</div>296      <div class="mini">🎤</div>297    </div>298 299    <div class="row">300      <div class="key tiny">1</div>301      <div class="key">Q</div>302      <div class="key">W</div>303      <div class="key">E</div>304      <div class="key">R</div>305      <div class="key">T</div>306      <div class="key">Y</div>307      <div class="key">U</div>308      <div class="key">I</div>309      <div class="key">O</div>310      <div class="key">P</div>311      <div class="key tiny">0</div>312    </div>313 314    <div class="row">315      <div class="key">A</div>316      <div class="key">S</div>317      <div class="key">D</div>318      <div class="key">F</div>319      <div class="key">G</div>320      <div class="key">H</div>321      <div class="key">J</div>322      <div class="key">K</div>323      <div class="key">L</div>324    </div>325 326    <div class="row">327      <div class="key">Z</div>328      <div class="key">X</div>329      <div class="key">C</div>330      <div class="key">V</div>331      <div class="key">B</div>332      <div class="key">N</div>333      <div class="key">M</div>334      <div class="key">⌫</div>335    </div>336 337    <div class="row">338      <div class="key wide">?123</div>339      <div class="key wide">,</div>340      <div class="key space"> </div>341      <div class="key wide">.</div>342      <div class="key wide">↵</div>343    </div>344  </div>345 346</div>347</body>348</html>