GD-ML/AndroidCode

1<!DOCTYPE html>2<html lang="en">3<head>4<meta charset="UTF-8">5<title>Note Editor Mock</title>6<style>7  body { margin: 0; padding: 0; background: transparent; }8  #render-target {9    position: relative;10    overflow: hidden;11    width: 1080px;12    height: 2400px;13    background: #1f2326;14    font-family: Arial, Helvetica, sans-serif;15    color: #EDEDED;16  }17 18  /* Status bar */19  .statusbar {20    height: 100px;21    padding: 0 32px;22    display: flex;23    align-items: center;24    justify-content: space-between;25    color: #E0E0E0;26    font-size: 34px;27    letter-spacing: 0.5px;28  }29  .sb-icons {30    display: flex;31    align-items: center;32    gap: 26px;33  }34  .sb-icon svg { width: 36px; height: 36px; }35 36  /* App bar */37  .appbar {38    height: 140px;39    padding: 0 28px;40    display: flex;41    align-items: center;42    justify-content: space-between;43    color: #B5B8BD;44  }45  .appbar .left {46    display: flex;47    align-items: center;48    gap: 14px;49  }50  .appbar .right {51    display: flex;52    align-items: center;53    gap: 42px;54  }55  .appbar svg { width: 48px; height: 48px; }56 57  /* Content area */58  .content {59    padding: 40px 56px 0 92px;60    color: #C9CCCF;61  }62  .caret {63    position: absolute;64    left: 60px;65    top: 280px;66    width: 4px;67    height: 120px;68    background: #BDBDBD;69    border-radius: 2px;70  }71  .title {72    font-size: 88px;73    line-height: 1.2;74    color: #C7C7C7;75    margin-top: 220px;76  }77  .subtitle {78    font-size: 40px;79    color: #9BA0A6;80    margin-top: 24px;81  }82 83  /* Bottom tools row (above keyboard) */84  .tools {85    margin-top: 540px;86    height: 120px;87    padding: 0 24px;88    display: flex;89    align-items: center;90    justify-content: space-between;91    color: #AEB4BB;92  }93  .tools .left,94  .tools .right {95    display: flex;96    align-items: center;97    gap: 24px;98  }99  .tool-btn {100    width: 72px;101    height: 72px;102    border: 2px solid #6D7177;103    border-radius: 14px;104    display: flex;105    align-items: center;106    justify-content: center;107    color: #C9CCCF;108  }109  .tool-label {110    font-size: 34px;111    color: #9DA3A9;112  }113  .disabled {114    opacity: 0.4;115  }116  .dots-vertical {117    width: 14px;118    height: 64px;119    display: flex;120    flex-direction: column;121    justify-content: space-between;122    align-items: center;123  }124  .dots-vertical span {125    width: 10px; height: 10px; background: #AEB4BB; border-radius: 50%;126  }127 128  /* Keyboard */129  .keyboard {130    position: absolute;131    left: 0;132    bottom: 80px;133    width: 100%;134    height: 980px;135    background: #24282B;136    border-top: 1px solid #30373A;137    padding: 24px;138    box-sizing: border-box;139    color: #F2F2F2;140  }141  .kbd-top {142    display: flex;143    align-items: center;144    gap: 36px;145    padding: 10px 12px 20px 12px;146    color: #D7D7D7;147    font-size: 30px;148  }149  .kbd-top .circle {150    width: 56px; height: 56px; border-radius: 16px; background: #2E3336;151    display: flex; align-items: center; justify-content: center;152    border: 1px solid #43484C;153  }154 155  .key-row {156    display: flex;157    justify-content: space-between;158    padding: 10px 18px;159    margin-top: 12px;160  }161  .key {162    width: 88px;163    height: 120px;164    background: #2C2F33;165    border-radius: 20px;166    border: 1px solid #3A3F43;167    display: flex;168    align-items: center;169    justify-content: center;170    font-size: 40px;171    color: #F0F0F0;172    box-shadow: inset 0 -3px 0 rgba(0,0,0,0.25);173  }174  .key.large { width: 120px; }175  .key.space { width: 420px; }176  .key.wide { width: 160px; }177  .key.accent {178    background: #B7C0CE;179    color: #1E2226;180  }181  .key.subtle {182    background: #2C2F33;183    color: #BFC4C9;184  }185 186  /* Gesture bar */187  .gesture-bar {188    position: absolute;189    bottom: 20px;190    left: 50%;191    transform: translateX(-50%);192    width: 180px;193    height: 10px;194    border-radius: 6px;195    background: #E5E5E5;196    opacity: 0.85;197  }198</style>199</head>200<body>201<div id="render-target">202  <!-- Status bar -->203  <div class="statusbar">204    <div>9:13</div>205    <div class="sb-icons">206      <!-- simple placeholders for status icons -->207      <div class="sb-icon">208        <svg viewBox="0 0 24 24">209          <circle cx="12" cy="12" r="10" fill="none" stroke="#D8D8D8" stroke-width="2"></circle>210          <circle cx="12" cy="12" r="3" fill="#D8D8D8"></circle>211        </svg>212      </div>213      <div class="sb-icon">214        <svg viewBox="0 0 24 24">215          <path d="M3 16h18" stroke="#D8D8D8" stroke-width="2" />216          <path d="M6 10h12" stroke="#D8D8D8" stroke-width="2" />217          <path d="M9 4h6" stroke="#D8D8D8" stroke-width="2" />218        </svg>219      </div>220      <div class="sb-icon">221        <svg viewBox="0 0 24 24">222          <path d="M3 8h18v10H3z" fill="none" stroke="#D8D8D8" stroke-width="2"></path>223          <path d="M12 12v4" stroke="#D8D8D8" stroke-width="2"></path>224        </svg>225      </div>226      <div class="sb-icon">227        <svg viewBox="0 0 24 24">228          <path d="M4 12h16" stroke="#D8D8D8" stroke-width="2"></path>229          <circle cx="20" cy="4" r="2" fill="#D8D8D8"></circle>230        </svg>231      </div>232      <div class="sb-icon">233        <svg viewBox="0 0 24 24">234          <path d="M4 18h16" stroke="#D8D8D8" stroke-width="2"></path>235          <path d="M5 6h14v10H5z" fill="none" stroke="#D8D8D8" stroke-width="2"></path>236        </svg>237      </div>238    </div>239  </div>240 241  <!-- App bar -->242  <div class="appbar">243    <div class="left">244      <svg viewBox="0 0 48 48">245        <path d="M28 10 L14 24 L28 38" stroke="#B5B8BD" stroke-width="4" fill="none" stroke-linecap="round" stroke-linejoin="round"></path>246      </svg>247    </div>248    <div class="right">249      <!-- Pin -->250      <svg viewBox="0 0 48 48">251        <path d="M14 12h20l-8 8v12h-4V20z" fill="none" stroke="#B5B8BD" stroke-width="3" stroke-linejoin="round"></path>252      </svg>253      <!-- Bell -->254      <svg viewBox="0 0 48 48">255        <path d="M24 10a10 10 0 0 1 10 10v10H14V20a10 10 0 0 1 10-10z" fill="none" stroke="#B5B8BD" stroke-width="3" />256        <circle cx="24" cy="34" r="2.5" fill="#B5B8BD"></circle>257      </svg>258      <!-- Archive/Download -->259      <svg viewBox="0 0 48 48">260        <rect x="10" y="16" width="28" height="20" rx="2" ry="2" fill="none" stroke="#B5B8BD" stroke-width="3"></rect>261        <path d="M24 20v10M20 26l4 4 4-4" stroke="#B5B8BD" stroke-width="3" fill="none" stroke-linecap="round" stroke-linejoin="round"></path>262      </svg>263    </div>264  </div>265 266  <!-- Content -->267  <div class="caret"></div>268  <div class="content">269    <div class="title">Title</div>270    <div class="subtitle">Note</div>271  </div>272 273  <!-- Tools row -->274  <div class="tools">275    <div class="left">276      <div class="tool-btn">277        <svg viewBox="0 0 48 48">278          <path d="M24 12v24M12 24h24" stroke="#BFC4C9" stroke-width="4" stroke-linecap="round"></path>279        </svg>280      </div>281      <svg viewBox="0 0 64 64">282        <circle cx="28" cy="32" r="18" fill="none" stroke="#BFC4C9" stroke-width="3"></circle>283        <circle cx="22" cy="26" r="3" fill="#BFC4C9"></circle>284        <circle cx="36" cy="26" r="3" fill="#BFC4C9"></circle>285        <circle cx="28" cy="40" r="3" fill="#BFC4C9"></circle>286      </svg>287      <div class="tool-btn disabled" style="width:72px;">288        <span style="font-weight:bold; font-size:34px; color:#C9CCCF;">A</span>289      </div>290    </div>291    <div class="tool-label">Edited 9:13 PM</div>292    <div class="right">293      <div class="dots-vertical">294        <span></span><span></span><span></span>295      </div>296    </div>297  </div>298 299  <!-- Keyboard -->300  <div class="keyboard">301    <div class="kbd-top">302      <div class="circle">▦</div>303      <div class="circle">🙂</div>304      <div class="circle" style="font-weight:bold;">GIF</div>305      <div class="circle">⚙</div>306      <div class="circle">G</div>307      <div class="circle">🎨</div>308      <div class="circle">🎤</div>309    </div>310 311    <div class="key-row">312      <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>313    </div>314    <div class="key-row" style="padding: 10px 62px;">315      <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>316    </div>317    <div class="key-row" style="padding: 10px 42px;">318      <div class="key large" style="font-size:32px;">⇧</div>319      <div class="key">Z</div><div class