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>Mock UI - Notes with Keyboard</title>7<style>8  body { margin: 0; padding: 0; background: transparent; }9  #render-target {10    position: relative;11    width: 1080px;12    height: 2400px;13    overflow: hidden;14    background: #202124;15    font-family: system-ui, -apple-system, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;16    color: #E6E6E6;17  }18  /* Status bar */19  .status-bar {20    position: absolute;21    top: 0;22    left: 0;23    height: 90px;24    width: 100%;25    display: flex;26    align-items: center;27    padding: 0 36px;28    font-size: 34px;29    color: #EDEDED;30  }31  .status-left { flex: 1; }32  .status-right {33    display: flex;34    gap: 26px;35    align-items: center;36  }37  .status-icon svg { width: 38px; height: 38px; fill: none; stroke: #FFFFFF; stroke-width: 3; }38  .status-battery {39    width: 50px; height: 28px; border: 3px solid #fff; border-radius: 6px; position: relative;40  }41  .status-battery::after {42    content: ""; position: absolute; right: -10px; top: 8px; width: 6px; height: 12px; background: #fff; border-radius: 2px;43  }44  .status-battery .level { position: absolute; left: 4px; top: 4px; height: 16px; width: 28px; background: #FFFFFF; border-radius: 3px; }45  /* App bar */46  .app-bar {47    position: absolute;48    top: 90px;49    left: 0;50    width: 100%;51    height: 120px;52    display: flex;53    align-items: center;54    padding: 0 30px;55    color: #BDBDBD;56  }57  .back-btn svg { width: 50px; height: 50px; stroke: #BBBBBB; fill: none; stroke-width: 5; }58  .app-actions {59    margin-left: auto;60    display: flex;61    gap: 40px;62  }63  .app-actions svg { width: 52px; height: 52px; stroke: #A6A6A6; fill: none; stroke-width: 4; }64  /* Content */65  .content {66    position: absolute;67    top: 230px;68    left: 0;69    width: 100%;70    padding: 0 72px;71  }72  .title {73    font-size: 88px;74    font-weight: 500;75    color: #E0E0E0;76    margin-bottom: 36px;77  }78  .note-line {79    position: relative;80    font-size: 48px;81    color: #D0D0D0;82  }83  /* Caret + droplet */84  .caret {85    position: absolute;86    left: 300px; /* approximate placement next to "Kill Bill" */87    top: -4px;88    width: 4px;89    height: 60px;90    background: #9DB8FF;91    border-radius: 2px;92  }93  .caret::after {94    content: "";95    position: absolute;96    top: 56px;97    left: -16px;98    width: 52px;99    height: 52px;100    background: #9DB8FF;101    border-radius: 50% 50% 60% 60%;102  }103  /* Bottom tools row */104  .tools-row {105    position: absolute;106    top: 820px;107    left: 0;108    width: 100%;109    padding: 0 40px;110    height: 120px;111    display: flex;112    align-items: center;113    color: #BDBDBD;114    font-size: 40px;115  }116  .tools-left, .tools-right { display: flex; align-items: center; gap: 28px; }117  .tools-center { margin-left: auto; margin-right: auto; opacity: 0.8; }118  .tool-icon {119    width: 80px; height: 80px; border-radius: 18px;120    display: grid; place-items: center; border: 2px solid #3A3A3A; background: #2A2B2F;121  }122  .tool-icon svg { width: 48px; height: 48px; stroke: #BDBDBD; fill: none; stroke-width: 4; }123  /* Keyboard */124  .keyboard {125    position: absolute;126    left: 0;127    bottom: 0;128    width: 100%;129    height: 1050px;130    background: #2A2C30;131    box-shadow: 0 -6px 12px rgba(0,0,0,0.35);132    border-top-left-radius: 26px;133    border-top-right-radius: 26px;134  }135  .kb-suggestions {136    height: 130px;137    display: flex;138    align-items: center;139    padding: 0 24px;140    gap: 24px;141    color: #E9E9E9;142    font-size: 42px;143  }144  .suggest-pill {145    padding: 12px 26px;146    background: #3A3D42;147    border-radius: 24px;148    border: 1px solid #50555B;149  }150  .kb-rows {151    padding: 0 26px;152    display: grid;153    grid-template-rows: repeat(4, 1fr);154    gap: 22px;155    height: 820px;156  }157  .kb-row {158    display: flex;159    gap: 16px;160    justify-content: center;161    align-items: center;162  }163  .key {164    background: #3A3D42;165    color: #FFFFFF;166    border: 1px solid #50555B;167    border-radius: 18px;168    height: 150px;169    width: 92px;170    display: grid;171    place-items: center;172    font-size: 46px;173    box-shadow: inset 0 -6px 0 rgba(0,0,0,0.25);174  }175  .key.wide { width: 140px; }176  .key.xwide { width: 240px; }177  .key.space { flex: 1; min-width: 360px; }178  .kb-bottom {179    height: 100px;180    display: flex;181    justify-content: center;182    align-items: center;183  }184  .gesture-bar {185    width: 420px; height: 14px; background: #EDEDED; border-radius: 10px; opacity: 0.8;186  }187</style>188</head>189<body>190<div id="render-target">191 192  <div class="status-bar">193    <div class="status-left">1:21</div>194    <div class="status-right">195      <div class="status-icon">196        <svg viewBox="0 0 24 24"><path d="M4 16l8-8 8 8"></path></svg>197      </div>198      <div class="status-icon">199        <svg viewBox="0 0 24 24"><path d="M3 12l6-6 6 6 6-6"></path></svg>200      </div>201      <div class="status-icon">202        <svg viewBox="0 0 24 24"><path d="M3 18h18M3 12h14M3 6h10"></path></svg>203      </div>204      <div class="status-icon">205        <svg viewBox="0 0 24 24"><path d="M3 12c5-6 13-6 18 0"></path></svg>206      </div>207      <div class="status-battery"><div class="level"></div></div>208    </div>209  </div>210 211  <div class="app-bar">212    <div class="back-btn">213      <svg viewBox="0 0 24 24"><path d="M15 18l-6-6 6-6"/></svg>214    </div>215    <div class="app-actions">216      <svg viewBox="0 0 24 24"><path d="M12 4v16M7 9l5-5 5 5"/></svg>217      <svg viewBox="0 0 24 24"><path d="M12 22v-6M6 22v-10a6 6 0 1112 0v10"/></svg>218      <svg viewBox="0 0 24 24"><path d="M6 19h12M7 15h10M9 5h6l1 3H8z"/></svg>219    </div>220  </div>221 222  <div class="content">223    <div class="title">My Movies</div>224    <div class="note-line">225      Kill Bill226      <span class="caret"></span>227    </div>228  </div>229 230  <div class="tools-row">231    <div class="tools-left">232      <div class="tool-icon">233        <svg viewBox="0 0 24 24"><path d="M4 12h6v6H4zM14 6h6v6h-6zM14 14h6v6h-6z"/></svg>234      </div>235      <div class="tool-icon">236        <svg viewBox="0 0 24 24"><circle cx="12" cy="12" r="8"/></svg>237      </div>238    </div>239    <div class="tools-center">Edited 1:21 PM</div>240    <div class="tools-right">241      <div class="tool-icon">242        <svg viewBox="0 0 24 24"><circle cx="12" cy="5" r="2"/><circle cx="12" cy="12" r="2"/><circle cx="12" cy="19" r="2"/></svg>243      </div>244    </div>245  </div>246 247  <div class="keyboard">248    <div class="kb-suggestions">249      <div class="suggest-pill">Bill</div>250      <div class="suggest-pill">Bull</div>251      <div class="suggest-pill">💵</div>252      <div class="suggest-pill">🧾</div>253      <div class="suggest-pill">🎙️</div>254    </div>255    <div class="kb-rows">256      <div class="kb-row">257        <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>258        <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>259      </div>260      <div class="kb-row">261        <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>262        <div class="key">h</div><div class="key">j</div><div class="key">k</div><div class="key">l</div>263      </div>264      <div class="kb-row">265        <div class="key wide">⇧</div>266        <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>267        <div class="key">n</div><div class="key">m</div>268        <div class="key wide">⌫</div>269      </div>270      <div class="kb-row">271        <div class="key xwide">?123</div>272        <div class="key">,</div>273        <div class="key wide">😊</div>274        <div class="key space"></div>275        <div class="key">.</div>276        <div class="key xwide">↵</div>277      </div>278    </div>279    <div class="kb-bottom">280      <div class="gesture-bar"></div>281    </div>282  </div>283 284</div>285</body>286</html>