GD-ML/AndroidCode

1<html lang="en">2<head>3<meta charset="UTF-8">4<title>Mobile UI Mock</title>5<style>6  body { margin: 0; padding: 0; background: transparent; font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Arial, sans-serif; }7  #render-target {8    width: 1080px;9    height: 2400px;10    position: relative;11    overflow: hidden;12    background: #111;13    color: #fff;14  }15 16  /* Top app bar */17  .app-bar {18    position: absolute;19    top: 0;20    left: 0;21    width: 1080px;22    height: 160px;23    background: #0b0b0b;24    box-shadow: 0 2px 0 rgba(255,255,255,0.04) inset;25  }26  .app-bar .row {27    position: absolute;28    top: 72px;29    left: 32px;30    right: 32px;31    display: flex;32    align-items: center;33    gap: 28px;34    color: #eaeaea;35  }36  .app-bar .title-btn {37    font-size: 42px;38    font-weight: 600;39    color: #cfd3d7;40  }41  .app-bar .spacer { flex: 1; }42  .icon-btn {43    width: 64px;44    height: 64px;45    display: inline-flex;46    align-items: center;47    justify-content: center;48    color: #cfd3d7;49  }50  .square-badge {51    width: 56px;52    height: 56px;53    border-radius: 12px;54    background: #1b1b1b;55    display: inline-flex;56    align-items: center;57    justify-content: center;58    font-size: 34px;59    color: #cfd3d7;60    border: 1px solid #2a2a2a;61  }62 63  /* Document area */64  .page {65    position: absolute;66    top: 160px;67    left: 0;68    width: 1080px;69    height: 1440px;70    background: #f5f5f5;71    color: #1a1a1a;72  }73  .page .note-text {74    margin: 120px 100px;75    font-size: 44px;76    line-height: 1.5;77    color: #2a2a2a;78  }79 80  /* Bottom composer + keyboard overlay */81  .overlay {82    position: absolute;83    left: 0;84    bottom: 0;85    width: 1080px;86    height: 800px;87    background: #0d0d0d;88    border-top-left-radius: 24px;89    border-top-right-radius: 24px;90    box-shadow: 0 -12px 24px rgba(0,0,0,0.6);91  }92  .composer {93    position: absolute;94    top: 20px;95    left: 20px;96    right: 20px;97    background: #121212;98    border-radius: 28px;99    padding: 22px 24px;100    border: 1px solid #1e1e1e;101  }102  .composer-top {103    display: flex;104    align-items: center;105    gap: 18px;106    margin-bottom: 20px;107  }108  .pill-input {109    flex: 1;110    height: 92px;111    background: #1e1e1e;112    border-radius: 20px;113    display: flex;114    align-items: center;115    padding: 0 24px;116    color: #eaeaea;117    font-size: 42px;118  }119  .send-btn {120    width: 160px;121    height: 92px;122    background: #3B82F6;123    color: #fff;124    border-radius: 28px;125    display: inline-flex;126    align-items: center;127    justify-content: center;128    font-weight: 700;129    font-size: 38px;130    margin-left: 16px;131  }132  .blue-circle {133    width: 68px;134    height: 68px;135    border-radius: 999px;136    border: 3px solid #3B82F6;137    display: inline-flex;138    align-items: center;139    justify-content: center;140    color: #eaeaea;141    font-weight: 700;142    font-size: 34px;143  }144  .separator {145    width: 2px;146    height: 40px;147    background: #2a2a2a;148    margin: 0 6px;149  }150  .chips {151    display: flex;152    gap: 22px;153    margin: 16px 0 10px 90px;154  }155  .chip {156    padding: 16px 26px;157    border-radius: 24px;158    background: #1c1c1c;159    border: 1px solid #2a2a2a;160    color: #dcdcdc;161    font-size: 36px;162  }163 164  /* Keyboard */165  .keyboard {166    position: absolute;167    left: 0;168    right: 0;169    bottom: 0;170    padding: 26px 22px 28px;171    background: #0e0e0e;172    border-top: 1px solid #1e1e1e;173  }174  .key-row {175    display: grid;176    grid-template-columns: repeat(10, 1fr);177    gap: 16px;178    margin-bottom: 20px;179  }180  .key {181    height: 120px;182    background: #1a1a1a;183    border-radius: 22px;184    display: flex;185    align-items: center;186    justify-content: center;187    color: #eaeaea;188    font-size: 40px;189    border: 1px solid #272727;190  }191  .key.small { font-size: 34px; }192  .key.wide { grid-column: span 2; }193  .key.space { grid-column: span 5; }194 195  /* Minimal status text at very top (time) */196  .status {197    position: absolute;198    top: 20px;199    left: 24px;200    color: #cfcfcf;201    font-size: 30px;202    opacity: 0.9;203  }204 205  /* Simple inline icon styling */206  svg { width: 48px; height: 48px; }207  .icon-btn svg path, .icon-btn svg circle { stroke: #cfd3d7; fill: none; stroke-width: 3; }208  .close-x {209    width: 64px; height: 64px; border-radius: 16px;210    display: inline-flex; align-items: center; justify-content: center;211  }212</style>213</head>214<body>215<div id="render-target">216 217  <div class="status">12:21</div>218 219  <div class="app-bar">220    <div class="row">221      <div class="title-btn">Done</div>222 223      <div class="icon-btn" title="Cloud">224        <svg viewBox="0 0 24 24">225          <path d="M8 18h8a4 4 0 0 0 0-8h-.5A5.5 5.5 0 0 0 6 9.5 3.5 3.5 0 0 0 6 18h2z"/>226        </svg>227      </div>228 229      <div class="icon-btn" title="Undo">230        <svg viewBox="0 0 24 24">231          <path d="M8 7l-5 5 5 5"/>232          <path d="M20 17a7 7 0 0 0-7-7H8"/>233        </svg>234      </div>235 236      <div class="icon-btn" title="Redo">237        <svg viewBox="0 0 24 24">238          <path d="M16 7l5 5-5 5"/>239          <path d="M4 17a7 7 0 0 1 7-7h5"/>240        </svg>241      </div>242 243      <div class="square-badge">1</div>244 245      <div class="spacer"></div>246 247      <div class="close-x" title="Close">248        <svg viewBox="0 0 24 24">249          <path d="M5 5l14 14M19 5L5 19" stroke="#e2e2e2" fill="none" stroke-width="3"/>250        </svg>251      </div>252    </div>253  </div>254 255  <div class="page">256    <div class="note-text">Have some food at the church in the wedding</div>257  </div>258 259  <div class="overlay">260    <div class="composer">261      <div class="composer-top">262        <div class="icon-btn" title="Chevron">263          <svg viewBox="0 0 24 24">264            <path d="M18 9l-6 6-6-6" stroke="#cfd3d7" stroke-width="3" fill="none"/>265          </svg>266        </div>267        <div class="separator"></div>268        <div class="blue-circle">T</div>269        <div class="icon-btn" title="Voice">270          <svg viewBox="0 0 24 24">271            <path d="M12 5v8" />272            <path d="M7 9c0 3 2 5 5 5s5-2 5-5" />273            <path d="M8 19h8" />274          </svg>275        </div>276 277        <div class="pill-input">Danial weds Suzzane</div>278        <div class="send-btn">Send</div>279      </div>280 281      <div class="chips">282        <div class="chip">Suzzane</div>283        <div class="chip">Suzane</div>284        <div class="chip">Suzza e</div>285      </div>286    </div>287 288    <div class="keyboard">289      <div class="key-row">290        <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>291        <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>292      </div>293      <div class="key-row">294        <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>295        <div class="key">h</div><div class="key">j</div><div class="key">k</div><div class="key">l</div><div class="key small">⌫</div>296      </div>297      <div class="key-row">298        <div class="key small">?123</div><div class="key">z</div><div class="key">x</div><div class="key">c</div><div class="key">v</div>299        <div class="key">b</div><div class="key">n</div><div class="key">m</div><div class="key small">,</div><div class="key small">.</div>300      </div>301      <div class="key-row">302        <div class="key small">↑</div>303        <div class="key space"></div>304        <div class="key small">↵</div>305        <div class="key small">🎤</div>306        <div class="key small">⌦</div>307      </div>308    </div>309  </div>310 311</div>312</body>313</html>