GD-ML/AndroidCode

1<!DOCTYPE html>2<html lang="en">3<head>4<meta charset="UTF-8">5<title>Compose Email UI - Dark</title>6<meta name="viewport" content="width=1080, initial-scale=1.0">7<style>8  body { margin: 0; padding: 0; background: transparent; font-family: Arial, Helvetica, sans-serif; }9  #render-target {10    width: 1080px;11    height: 2400px;12    position: relative;13    overflow: hidden;14    background: #121212;15    color: #ffffff;16  }17 18  /* Status bar */19  .status-bar {20    height: 90px;21    padding: 0 30px;22    display: flex;23    align-items: center;24    justify-content: space-between;25    color: #ffffff;26    font-size: 42px;27    letter-spacing: 0.5px;28  }29  .status-center-dots { display: flex; gap: 20px; opacity: 0.9; }30  .status-right { display: flex; align-items: center; gap: 22px; }31 32  /* App bar */33  .app-bar {34    height: 140px;35    background: #1a1a1a;36    display: flex;37    align-items: center;38    padding: 0 24px;39    box-sizing: border-box;40    border-bottom: 1px solid #222;41  }42  .app-left, .app-right { display: flex; align-items: center; }43  .app-left { gap: 20px; }44  .app-right { margin-left: auto; gap: 28px; }45  .icon-btn svg { width: 44px; height: 44px; fill: #e0e0e0; opacity: 0.9; }46 47  /* Fields */48  .fields {49    padding: 18px 28px 0 28px;50    color: #eaeaea;51  }52  .field-row {53    display: flex;54    align-items: center;55    padding: 18px 0;56    font-size: 40px;57    border-bottom: 1px solid #262626;58  }59  .field-label {60    width: 120px;61    color: #bdbdbd;62  }63  .field-value {64    flex: 1;65    display: flex;66    align-items: center;67    gap: 10px;68    color: #ffffff;69    white-space: nowrap;70    overflow: hidden;71    text-overflow: ellipsis;72  }73  .chev svg { width: 32px; height: 32px; fill: #bdbdbd; }74 75  /* Suggestions dropdown */76  .suggestions {77    padding: 10px 0 0 0;78  }79  .suggest-item {80    display: flex;81    align-items: center;82    padding: 18px 28px;83    gap: 24px;84  }85  .suggest-item + .suggest-item { border-top: 1px solid #1f1f1f; }86  .avatar {87    width: 92px;88    height: 92px;89    border-radius: 50%;90    display: grid;91    place-items: center;92    color: #fff;93    font-weight: bold;94  }95  .avatar.teal { background: #00a6ad; }96  .avatar.red { background: #d54a3b; }97  .contact-text { display: flex; flex-direction: column; }98  .contact-text .title { font-size: 40px; line-height: 1.2; }99  .contact-text .subtitle { font-size: 30px; color: #9e9e9e; margin-top: 6px; }100 101  /* Spacer to push keyboard to bottom */102  .spacer {103    height: 650px;104  }105 106  /* Keyboard */107  .keyboard {108    position: absolute;109    bottom: 60px;110    left: 0;111    width: 100%;112    height: 900px;113    background: #1b1b1b;114    border-top: 1px solid #252525;115    box-sizing: border-box;116  }117  .kb-toolbar {118    height: 110px;119    display: flex;120    align-items: center;121    gap: 28px;122    padding: 0 24px;123    border-bottom: 1px solid #252525;124  }125  .kb-chip {126    width: 78px; height: 78px;127    background: #2a2a2a; border-radius: 20px;128    display: grid; place-items: center;129    color: #e0e0e0; font-size: 34px;130  }131  .kb-rows { padding: 20px 16px 0 16px; }132  .kb-row {133    display: flex;134    justify-content: center;135    gap: 14px;136    margin: 18px 0;137  }138  .key {139    height: 118px;140    min-width: 84px;141    background: #2a2a2a;142    color: #ffffff;143    border-radius: 18px;144    display: grid;145    place-items: center;146    font-size: 44px;147    box-shadow: inset 0 -2px 0 rgba(255,255,255,0.06);148  }149  .key.wide { min-width: 160px; }150  .key.extra-wide { min-width: 420px; }151  .key.circle {152    min-width: 110px; height: 110px; border-radius: 55px;153    background: #b6d7ff; color: #0b3a7a; font-weight: bold;154  }155  .key.dim { background: #242424; color: #cfcfcf; }156  .kb-bottom {157    display: flex;158    justify-content: space-between;159    align-items: center;160    padding: 6px 24px 0 24px;161    color: #9e9e9e;162    font-size: 26px;163  }164 165  /* Gesture bar */166  .gesture {167    position: absolute;168    bottom: 16px;169    left: 50%;170    transform: translateX(-50%);171    width: 320px;172    height: 10px;173    background: #e8e8e8;174    border-radius: 8px;175    opacity: 0.9;176  }177</style>178</head>179<body>180<div id="render-target">181 182  <!-- Status bar -->183  <div class="status-bar">184    <div class="status-left">8:44</div>185    <div class="status-center-dots">186      <span>●</span><span>●</span><span>●</span><span>●</span>187    </div>188    <div class="status-right">189      <!-- Simple wifi icon -->190      <svg width="48" height="48" viewBox="0 0 24 24" fill="#fff"><path d="M12 18.5a1.5 1.5 0 1 1 0 3 1.5 1.5 0 0 1 0-3zm-4-3.3a7.3 7.3 0 0 1 8 0l-1.4 1.4a5.3 5.3 0 0 0-5.2 0L8 15.2zm-3.7-3.8a12 12 0 0 1 15.4 0l-1.5 1.2a10 10 0 0 0-12.3 0L4.3 11.4z"/></svg>191      <!-- Battery outline -->192      <svg width="52" height="52" viewBox="0 0 24 24" fill="#fff"><path d="M2 8.5c0-1.1.9-2 2-2h13c1.1 0 2 .9 2 2V15c0 1.1-.9 2-2 2H4c-1.1 0-2-.9-2-2V8.5zm2 0V15h13V8.5H4zm16 2.2h1.5v3.6H20v-3.6z"/></svg>193    </div>194  </div>195 196  <!-- App bar -->197  <div class="app-bar">198    <div class="app-left">199      <span class="icon-btn">200        <svg viewBox="0 0 24 24"><path d="M15.5 5.5 9 12l6.5 6.5-1.4 1.4L6.2 12l7.9-7.9 1.4 1.4z"/></svg>201      </span>202      <span style="color:#e0e0e0;font-size:40px;">Compose</span>203    </div>204    <div class="app-right">205      <span class="icon-btn" title="Attach">206        <svg viewBox="0 0 24 24"><path d="M7 12.5V6.8C7 4.7 8.7 3 10.8 3s3.8 1.7 3.8 3.8v7.7a4.2 4.2 0 1 1-8.4 0V8.8h1.8v6.5a2.4 2.4 0 0 0 4.8 0V6.8c0-1.1-.9-2-2-2s-2 .9-2 2v5.7H7z"/></svg>207      </span>208      <span class="icon-btn" title="Send">209        <svg viewBox="0 0 24 24"><path d="M2 21 23 12 2 3v7.5l14 1.5-14 1.5V21z"/></svg>210      </span>211      <span class="icon-btn" title="More">212        <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>213      </span>214    </div>215  </div>216 217  <!-- Fields -->218  <div class="fields">219    <div class="field-row">220      <div class="field-label">From</div>221      <div class="field-value">222        <span>ffionh41@gmail.com</span>223        <span class="chev">224          <svg viewBox="0 0 24 24"><path d="M7 10l5 5 5-5H7z"/></svg>225        </span>226      </div>227    </div>228    <div class="field-row">229      <div class="field-label">To</div>230      <div class="field-value" style="color:#e6e6e6;">231        <span>maredharris@gmail</span>232        <span class="chev">233          <svg viewBox="0 0 24 24"><path d="M7 10l5 5 5-5H7z"/></svg>234        </span>235      </div>236    </div>237 238    <!-- Suggestions -->239    <div class="suggestions">240      <div class="suggest-item">241        <div class="avatar teal">•</div>242        <div class="contact-text">243          <div class="title">maredharris@gmail.com</div>244          <div class="subtitle">maredharris@gmail.com</div>245        </div>246      </div>247      <div class="suggest-item">248        <div class="avatar red">+</div>249        <div class="contact-text">250          <div class="title">Add recipient</div>251          <div class="subtitle">maredharris@gmail</div>252        </div>253      </div>254    </div>255  </div>256 257  <div class="spacer"></div>258 259  <!-- Keyboard -->260  <div class="keyboard">261    <div class="kb-toolbar">262      <div class="kb-chip">⌨</div>263      <div class="kb-chip">☺</div>264      <div class="kb-chip">GIF</div>265      <div class="kb-chip">⚙</div>266      <div class="kb-chip">G⇄</div>267      <div class="kb-chip">🎨</div>268      <div class="kb-chip">🎤</div>269    </div>270    <div class="kb-rows">271      <div class="kb-row">272        <div class="key">q</div>273        <div class="key">w</div>274        <div class="key">e</div>275        <div class="key">r</div>276        <div class="key">t</div>277        <div class="key">y</div>278        <div class="key">u</div>279        <div class="key">i</div>280        <div class="key">o</div>281        <div class="key">p</div>282      </div>283      <div class="kb-row">284        <div class="key">a</div>285        <div class="key">s</div>286        <div class="key">d</div>287        <div class="key">f</div>288        <div class="key">g</div>289        <div class="key">h</div>290        <div class="key">j</div>291        <div class="key">k</div>292        <div class="key">l</div>293      </div>294      <div class="kb-row">295        <div class="key dim">⇧</div>296        <div class="key">z</div>297        <div class="key">x</div>298        <div class="key">c</div>299        <div class="key">v</div>300        <div class="key">b</div>301        <div class="key">n</div>302        <div class="key">m</div>303        <div class="key dim">⌫</div>304      </div>305      <div class="kb-row">306        <div class="key dim wide">?123</div>307        <div class="key dim">@</div>308        <div class="key dim">☺</div>309        <div class="key extra-wide dim">space</div>310        <div class="key dim">.</div>311        <div class="key circle">➜</div>312      </div>313    </div>314    <div class="kb-bottom">315      <span></span><span></span>316    </div>317  </div>318 319  <!-- Gesture bar -->320  <div class="gesture"></div>321</div>322</body>323</html>