GD-ML/AndroidCode

1<!DOCTYPE html>2<html lang="en">3<head>4<meta charset="UTF-8">5<title>Dark Note Editor Mock</title>6<meta name="viewport" content="width=1080, initial-scale=1.0">7<style>8  body { margin: 0; padding: 0; background: transparent; }9  #render-target {10    width: 1080px;11    height: 2400px;12    position: relative;13    overflow: hidden;14    background: #1f2022;15    color: #e6e6e6;16    font-family: "Roboto", Arial, Helvetica, sans-serif;17  }18 19  .status-bar {20    position: absolute;21    top: 0;22    left: 0;23    width: 1080px;24    height: 96px;25    padding: 0 32px;26    display: flex;27    align-items: center;28    justify-content: space-between;29    color: #eaeaea;30    font-size: 32px;31    letter-spacing: 0.2px;32  }33  .status-icons { display: flex; align-items: center; gap: 26px; }34 35  .app-header {36    position: absolute;37    top: 96px;38    left: 0;39    width: 1080px;40    height: 120px;41    padding: 0 32px;42    display: flex;43    align-items: center;44    justify-content: space-between;45  }46  .header-icons { display: flex; align-items: center; gap: 44px; }47 48  .title {49    position: absolute;50    top: 260px;51    left: 48px;52    right: 48px;53    font-size: 68px;54    font-weight: 300;55    color: #ECECEC;56  }57  .subtitle {58    position: absolute;59    top: 370px;60    left: 52px;61    font-size: 36px;62    color: #9fa4aa;63    letter-spacing: 0.2px;64  }65 66  .editor-toolbar {67    position: absolute;68    left: 0;69    width: 1080px;70    height: 96px;71    bottom: 920px; /* sits right above keyboard */72    padding: 0 32px;73    display: flex;74    align-items: center;75    justify-content: space-between;76    color: #c8cbd0;77  }78  .toolbar-left, .toolbar-right {79    display: flex;80    align-items: center;81    gap: 28px;82  }83  .tool-btn {84    width: 64px;85    height: 64px;86    border-radius: 12px;87    border: 1px solid #2a2b2f;88    background: #242528;89    display: flex;90    align-items: center;91    justify-content: center;92  }93  .edited-label {94    font-size: 30px;95    color: #aab0b7;96  }97 98  /* Keyboard */99  .keyboard {100    position: absolute;101    bottom: 0;102    left: 0;103    width: 1080px;104    height: 920px;105    background: #181a1c;106    border-top: 1px solid #2b2c2f;107    box-sizing: border-box;108  }109  .kb-top {110    height: 104px;111    display: flex;112    align-items: center;113    justify-content: space-between;114    padding: 0 32px;115  }116  .kb-chip {117    width: 80px;118    height: 60px;119    border-radius: 12px;120    background: #26282b;121    border: 1px solid #2f3135;122    display: flex;123    align-items: center;124    justify-content: center;125    color: #cfd3d8;126    font-size: 26px;127  }128 129  .kb-rows { padding: 10px 24px 16px; }130  .kb-row {131    height: 140px;132    display: flex;133    align-items: center;134    gap: 12px;135    justify-content: center;136  }137  .kb-row.row2 { padding-left: 40px; }138  .key {139    width: 88px;140    height: 120px;141    border-radius: 16px;142    background: #2a2c2f;143    box-shadow: inset 0 0 0 1px #3a3c40;144    display: flex;145    align-items: center;146    justify-content: center;147    color: #f2f2f2;148    font-size: 42px;149    letter-spacing: 0.5px;150  }151  .key.small { width: 100px; }152  .key.wide { width: 420px; font-size: 36px; color: #dcdfe4; }153  .key.shift, .key.backspace, .key.enter { width: 140px; }154  .key.special {155    background: #c9d0ff;156    color: #1f2430;157    box-shadow: none;158  }159  .gesture-bar {160    position: absolute;161    bottom: 18px;162    left: 50%;163    transform: translateX(-50%);164    width: 300px;165    height: 8px;166    border-radius: 6px;167    background: #9aa0a6;168    opacity: 0.65;169  }170 171  /* Simple SVG helpers */172  svg { display: block; }173  .icon { width: 36px; height: 36px; }174  .icon-lg { width: 44px; height: 44px; }175  .stroke { stroke: #d7d7d7; fill: none; stroke-width: 2.2; stroke-linecap: round; stroke-linejoin: round; }176  .fill { fill: #d7d7d7; }177</style>178</head>179<body>180<div id="render-target">181 182  <!-- Status bar -->183  <div class="status-bar">184    <div>9:15</div>185    <div class="status-icons">186      <!-- Wi-Fi -->187      <svg class="icon" viewBox="0 0 24 24">188        <path class="stroke" d="M2 8c5.5-5.3 14.5-5.3 20 0M5 11c3.8-3.6 10.2-3.6 14 0M8 14c2.2-2.1 5.8-2.1 8 0"></path>189        <circle class="fill" cx="12" cy="18" r="2"></circle>190      </svg>191      <!-- Battery -->192      <svg class="icon" viewBox="0 0 24 24">193        <rect class="stroke" x="3" y="7" width="16" height="10" rx="2"></rect>194        <rect class="fill" x="5" y="9" width="12" height="6" rx="1"></rect>195        <rect class="fill" x="20" y="10" width="2" height="4" rx="1"></rect>196      </svg>197    </div>198  </div>199 200  <!-- App header -->201  <div class="app-header">202    <!-- Back arrow -->203    <svg class="icon-lg" viewBox="0 0 24 24">204      <path class="stroke" d="M15 5 L8 12 L15 19"></path>205    </svg>206 207    <div class="header-icons">208      <!-- Bell -->209      <svg class="icon-lg" viewBox="0 0 24 24">210        <path class="stroke" d="M12 21c1.2 0 2-.8 2-2h-4c0 1.2.8 2 2 2z"></path>211        <path class="stroke" d="M18 17H6l-2 2h16l-2-2zM6 17V11c0-3.3 2.7-6 6-6s6 2.7 6 6v6"></path>212      </svg>213      <!-- Lock -->214      <svg class="icon-lg" viewBox="0 0 24 24">215        <rect class="stroke" x="5" y="10" width="14" height="10" rx="2"></rect>216        <path class="stroke" d="M8 10V8c0-2.2 2-4 4-4s4 1.8 4 4v2"></path>217      </svg>218      <!-- Download -->219      <svg class="icon-lg" viewBox="0 0 24 24">220        <rect class="stroke" x="4" y="17" width="16" height="3" rx="1"></rect>221        <path class="stroke" d="M12 5v8M8 9l4 4 4-4"></path>222      </svg>223    </div>224  </div>225 226  <!-- Title and subtitle -->227  <div class="title">New Gardening Tools</div>228  <div class="subtitle">Note</div>229 230  <!-- Editor toolbar above keyboard -->231  <div class="editor-toolbar">232    <div class="toolbar-left">233      <div class="tool-btn">234        <svg class="icon" viewBox="0 0 24 24">235          <path class="stroke" d="M12 5v14M5 12h14"></path>236        </svg>237      </div>238      <div class="tool-btn">239        <svg class="icon" viewBox="0 0 24 24">240          <circle class="stroke" cx="12" cy="12" r="9"></circle>241          <path class="stroke" d="M8 16l8-8"></path>242        </svg>243      </div>244      <div class="tool-btn">245        <span style="font-size:28px;color:#d7d7d7;">A</span>246      </div>247    </div>248 249    <div class="edited-label">Edited 9:14 PM</div>250 251    <div class="toolbar-right">252      <svg class="icon" viewBox="0 0 24 24">253        <circle class="fill" cx="12" cy="5" r="2"></circle>254        <circle class="fill" cx="12" cy="12" r="2"></circle>255        <circle class="fill" cx="12" cy="19" r="2"></circle>256      </svg>257    </div>258  </div>259 260  <!-- Keyboard -->261  <div class="keyboard">262    <!-- Shortcut chips -->263    <div class="kb-top">264      <div class="kb-chip">265        <svg class="icon" viewBox="0 0 24 24">266          <rect class="stroke" x="4" y="4" width="6" height="6" rx="1"></rect>267          <rect class="stroke" x="14" y="4" width="6" height="6" rx="1"></rect>268          <rect class="stroke" x="4" y="14" width="6" height="6" rx="1"></rect>269          <rect class="stroke" x="14" y="14" width="6" height="6" rx="1"></rect>270        </svg>271      </div>272      <div class="kb-chip">🙂</div>273      <div class="kb-chip">GIF</div>274      <div class="kb-chip">275        <svg class="icon" viewBox="0 0 24 24"><path class="stroke" d="M4 6h16M4 12h16M4 18h10"></path></svg>276      </div>277      <div class="kb-chip">G↔</div>278      <div class="kb-chip">279        <svg class="icon" viewBox="0 0 24 24">280          <circle class="stroke" cx="12" cy="12" r="8"></circle>281          <path class="stroke" d="M12 12l5 5"></path>282        </svg>283      </div>284      <div class="kb-chip">285        <svg class="icon" viewBox="0 0 24 24"><path class="stroke" d="M5 12h6v7l8-7h-6V5l-8 7z"></path></svg>286      </div>287    </div>288 289    <!-- Key rows -->290    <div class="kb-rows">291      <div class="kb-row">292        <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>293        <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>294      </div>295 296      <div class="kb-row row2">297        <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>298        <div class="key">H</div><div class="key">J</div><div class="key">K</div><div class="key">L</div>299      </div>300 301      <div class="kb-row">302        <div class="key shift">303          <svg class="icon" viewBox="0 0 24 24"><path class="stroke" d="M12 5l6 6h-4v8H10v-8H6l6-6z"></path></svg>304        </div>305        <div class="key">Z</div><div class="key">X</div><div class="key">C</div><div class="key">V</div>306        <div class="key">B</div><div class="key">N</div><div class="key">M</div>307        <div class="key backspace">308          <svg class="icon" viewBox="0 0 24 24">309            <path class="stroke" d="M3 12l5-6h12v12H8l-5-6z"></path>310            <path class="stroke" d="M11 9l4 6M15 9l-4 6"></path>311          </svg>312        </div>313      </div>314 315      <div class="kb-row">316        <div class="key small special">?123</div>317        <div class="key small">,</div>318        <div class="key small">🙂</div>319        <div class="key wide">Space</div>320        <div class="key small">.</div>321        <div class="key enter">322          <svg class="icon" viewBox="0 0 24 24"><path class="stroke" d="M20 7v6H9l3 3-3-3 3-3"></path></svg>323        </div>324      </div>325    </div>326 327    <div class="gesture-bar"></div>328  </div>329 330</div>331</body>332</html>