GD-ML/AndroidCode

1<!DOCTYPE html>2<html lang="en">3<head>4<meta charset="UTF-8">5<meta name="viewport" content="width=1080, initial-scale=1.0">6<title>Note Editor Mock</title>7<style>8  body { margin:0; padding:0; background:transparent; font-family: Roboto, Arial, sans-serif; }9  #render-target {10    position: relative;11    width: 1080px;12    height: 2400px;13    overflow: hidden;14    background: #202124; /* dark theme */15    color: #EDEDED;16  }17 18  /* Status bar */19  .status-bar {20    position: absolute;21    top: 0; left: 0; right: 0;22    height: 110px;23    display: flex;24    align-items: center;25    padding: 0 36px;26    color: #E6E6E6;27    font-size: 40px;28  }29  .status-bar .spacer { flex: 1; }30  .status-icons svg { margin-left: 22px; }31 32  /* Back arrow (app bar left) */33  .back-btn {34    position: absolute;35    top: 130px;36    left: 28px;37    width: 90px;38    height: 90px;39    display: flex; align-items: center; justify-content: center;40  }41 42  /* Right-side top actions */43  .top-actions {44    position: absolute;45    top: 150px;46    right: 44px;47    display: flex;48    gap: 56px;49    color: #BDBDBD;50  }51  .top-actions svg { width: 64px; height: 64px; }52 53  /* Content */54  .content {55    position: absolute;56    left: 72px;57    top: 320px;58    right: 72px;59  }60  .title-line {61    display: inline-block;62    position: relative;63    line-height: 1.05;64  }65  .title-text {66    font-size: 104px;67    font-weight: 500;68    color: #F1F3F4;69    letter-spacing: -0.5px;70  }71  .caret {72    position: absolute;73    left: 100%;74    top: 0;75    width: 5px;76    height: 110px;77    background: #AFC6FF;78    border-radius: 2px;79    margin-left: 4px;80  }81  .caret::after {82    content: "";83    position: absolute;84    top: 108px;85    left: -14px;86    width: 52px;87    height: 52px;88    background: #AFC6FF;89    border-radius: 50%;90    opacity: 0.9;91  }92  .subtitle {93    margin-top: 26px;94    font-size: 46px;95    color: #B0B4B8;96  }97 98  /* bottom editor toolbar above keyboard */99  .edit-toolbar {100    position: absolute;101    left: 0; right: 0;102    bottom: 940px; /* sits right above suggestion strip */103    height: 100px;104    display: flex;105    align-items: center;106    padding: 0 36px;107    color: #C8C8C8;108    font-size: 34px;109  }110  .edit-toolbar .center {111    margin: 0 auto;112    color: #9EA3A8;113  }114  .tool {115    width: 84px; height: 84px;116    display: flex; align-items: center; justify-content: center;117    border-radius: 18px;118    color: #CFCFCF;119  }120  .kebab { width: 70px; text-align: right; }121 122  /* Suggestion strip */123  .suggestion-strip {124    position: absolute;125    left: 0; right: 0;126    bottom: 840px;127    height: 90px;128    display: flex; align-items: center; justify-content: center;129    color: #E0E0E0;130    font-size: 40px;131  }132  .suggest-chip {133    background: #2B2C30;134    padding: 14px 28px;135    border-radius: 24px;136    border: 1px solid #3A3B3F;137  }138  .suggest-right {139    position: absolute;140    right: 36px;141  }142  .suggest-left {143    position: absolute;144    left: 36px;145  }146 147  /* Keyboard */148  .keyboard {149    position: absolute;150    left: 0; right: 0;151    bottom: 90px;152    height: 750px;153    background: #1E1F22;154    border-top: 1px solid #2E2F33;155    padding: 18px 18px 0 18px;156  }157  .kb-row {158    display: flex;159    justify-content: center;160    gap: 14px;161    margin: 14px 0;162  }163  .key {164    background: #2A2B2F;165    border: 1px solid #3A3B3F;166    color: #E6E6E6;167    font-size: 44px;168    border-radius: 16px;169    width: 90px; height: 110px;170    display: flex; align-items: center; justify-content: center;171  }172  .key.wide { width: 130px; }173  .key.space { flex: 1; min-width: 420px; }174  .key.round {175    border-radius: 28px;176    width: 140px; height: 110px;177  }178  .key.icon {179    width: 110px;180  }181 182  /* Bottom navigation pill */183  .nav-pill {184    position: absolute;185    left: 50%; transform: translateX(-50%);186    bottom: 22px;187    width: 300px; height: 10px;188    background: #E6E6E6;189    border-radius: 8px;190    opacity: 0.9;191  }192</style>193</head>194<body>195<div id="render-target">196 197  <!-- Status bar -->198  <div class="status-bar">199    <div>1:20</div>200    <div class="spacer"></div>201    <div class="status-icons" aria-hidden="true">202      <!-- small keyhole icon -->203      <svg width="40" height="40" viewBox="0 0 24 24" fill="#E6E6E6"><path d="M12 2a5 5 0 0 0-5 5v2a3 3 0 0 0 2 2.82V16l3 2 3-2v-4.18A3 3 0 0 0 17 9V7a5 5 0 0 0-5-5z"/></svg>204      <!-- edit pencil -->205      <svg width="40" height="40" viewBox="0 0 24 24" fill="#E6E6E6"><path d="M3 17.25V21h3.75L17.81 9.94l-3.75-3.75L3 17.25zM20.71 7.04a1 1 0 0 0 0-1.41l-2.34-2.34a1 1 0 0 0-1.41 0l-1.83 1.83 3.75 3.75 1.83-1.83z"/></svg>206      <!-- wifi -->207      <svg width="44" height="44" viewBox="0 0 24 24" fill="none" stroke="#E6E6E6" stroke-width="2"><path d="M2 8a15 15 0 0 1 20 0"/><path d="M5 12a10 10 0 0 1 14 0"/><path d="M8.5 16a5 5 0 0 1 7 0"/><circle cx="12" cy="20" r="1.5" fill="#E6E6E6"/></svg>208      <!-- battery -->209      <svg width="44" height="44" viewBox="0 0 24 24" fill="none" stroke="#E6E6E6" stroke-width="2"><rect x="2" y="7" width="18" height="10" rx="2"/><rect x="20" y="10" width="2" height="4" fill="#E6E6E6" stroke="none"/></svg>210    </div>211  </div>212 213  <!-- Back button -->214  <div class="back-btn" aria-label="Back">215    <svg width="60" height="60" viewBox="0 0 24 24" fill="#C8C8C8"><path d="M14 7l-5 5 5 5V7z"/></svg>216  </div>217 218  <!-- Top right actions -->219  <div class="top-actions" aria-hidden="true">220    <!-- pin -->221    <svg viewBox="0 0 24 24" fill="none" stroke="#A7A7A7" stroke-width="1.8">222      <path d="M7 4l5 5m5-5l-5 5m0 0v6l-2 2"/>223    </svg>224    <!-- bell with plus -->225    <svg viewBox="0 0 24 24" fill="none" stroke="#A7A7A7" stroke-width="1.8">226      <path d="M12 3a5 5 0 0 0-5 5v3l-2 2h14l-2-2V8a5 5 0 0 0-5-5z"/>227      <path d="M9 19a3 3 0 0 0 6 0"/>228      <path d="M19.5 5.5v4m-2-2h4"/>229    </svg>230    <!-- archive -->231    <svg viewBox="0 0 24 24" fill="none" stroke="#A7A7A7" stroke-width="1.8">232      <rect x="3" y="7" width="18" height="12" rx="2"/>233      <rect x="4" y="4" width="16" height="3" rx="1"/>234      <path d="M10 12h4"/>235    </svg>236  </div>237 238  <!-- Content -->239  <div class="content">240    <div class="title-line">241      <span class="title-text">Movies</span>242      <span class="caret"></span>243    </div>244    <div class="subtitle">Kill Bill</div>245  </div>246 247  <!-- editor toolbar -->248  <div class="edit-toolbar">249    <div class="tool" title="Add">250      <svg width="56" height="56" viewBox="0 0 24 24" fill="none" stroke="#CFCFCF" stroke-width="2">251        <rect x="3" y="3" width="18" height="18" rx="3"/>252        <path d="M12 7v10M7 12h10"/>253      </svg>254    </div>255    <div class="tool" title="Color">256      <svg width="56" height="56" viewBox="0 0 24 24" fill="none" stroke="#CFCFCF" stroke-width="2">257        <path d="M12 3a7 7 0 1 0 7 7h-2a2 2 0 1 1-2-2h2A5 5 0 1 0 12 3z"/>258        <circle cx="8.5" cy="10.5" r="1.2" fill="#CFCFCF"/>259        <circle cx="11.5" cy="7.5" r="1.2" fill="#CFCFCF"/>260        <circle cx="14.5" cy="10.5" r="1.2" fill="#CFCFCF"/>261      </svg>262    </div>263    <div class="center">Edited 10:18 AM</div>264    <div class="spacer"></div>265    <div class="kebab">266      <svg width="44" height="44" viewBox="0 0 24 24" fill="#CFCFCF"><circle cx="12" cy="5" r="2"/><circle cx="12" cy="12" r="2"/><circle cx="12" cy="19" r="2"/></svg>267    </div>268  </div>269 270  <!-- Suggestion strip -->271  <div class="suggestion-strip">272    <div class="suggest-left">273      <svg width="64" height="64" viewBox="0 0 24 24" fill="#C8C8C8"><path d="M3 3h18v6H3zM3 15h18v6H3zM3 9h18v2H3z"/></svg>274    </div>275    <div class="suggest-chip">Movies</div>276    <div class="suggest-right">277      <svg width="64" height="64" viewBox="0 0 24 24" fill="#C8C8C8"><path d="M12 14a3 3 0 0 0 3-3V8a3 3 0 0 0-6 0v3a3 3 0 0 0 3 3z"/><path d="M6 20v-2a6 6 0 0 1 12 0v2"/></svg>278    </div>279  </div>280 281  <!-- Keyboard -->282  <div class="keyboard" aria-label="On-screen keyboard">283    <div class="kb-row">284      <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>285      <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>286    </div>287    <div class="kb-row">288      <div class="key wide">a</div><div class="key">s</div><div class="key">d</div><div class="key">f</div><div class="key">g</div>289      <div class="key">h</div><div class="key">j</div><div class="key">k</div><div class="key wide">l</div>290    </div>291    <div class="kb-row">292      <div class="key icon">293        <svg width="40" height="40" viewBox="0 0 24 24" fill="#E6E6E6"><path d="M8 12l-4 4h8l-4-4zM12 4l4 4H8l4-4z"/></svg>294      </div>295      <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>296      <div class="key icon">297        <svg width="40" height="40" viewBox="0 0 24 24" fill="#E6E6E6"><path d="M15 12l-6 4V8l6 4z"/></svg>298      </div>299    </div>300    <div class="kb-row">301      <div class="key round">?123</div>302      <div class="key">,</div>303      <div class="key icon">304        <svg width="36" height="36" viewBox="0 0 24 24" fill="#E6E6E6"><circle cx="12" cy="12" r="9"/><circle cx="9" cy="10" r="1.5" fill="#202124"/><circle cx="15" cy="10" r="1.5" fill="#202124"/><path d="M8 14c1.5 2 6.5 2 8 0" stroke="#202124" stroke-width="1.8" fill="none"/></svg>305      </div>306      <div class="key space"></div>307      <div class="key">.</div>308      <div class="key round">309        <svg width="40" height="40" viewBox="0 0 24 24" fill="#E6E6E6"><path d="M4 12h12l-4-4m4 4l-4 4"/></svg>310      </div>311    </div>312  </div>313 314  <div class="nav-pill"></div>315</div>316</body>317</html>