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">6<title>Compose Email - Dark UI</title>7<style>8  body {9    margin: 0;10    padding: 0;11    background: transparent;12    font-family: Roboto, Arial, Helvetica, sans-serif;13  }14  #render-target {15    width: 1080px;16    height: 2400px;17    position: relative;18    overflow: hidden;19    background: #15130F; /* dark, slightly warm */20    color: #EDEAE3;21  }22 23  /* Status bar */24  .status-bar {25    position: absolute;26    top: 0;27    left: 0;28    width: 1080px;29    height: 120px;30    padding: 0 36px;31    display: flex;32    align-items: center;33    justify-content: space-between;34    color: #fff;35    font-size: 38px;36    letter-spacing: 0.5px;37  }38  .sb-left {39    display: flex;40    align-items: center;41    gap: 20px;42  }43  .sb-right {44    display: flex;45    align-items: center;46    gap: 28px;47  }48  .sb-dot {49    width: 22px;50    height: 22px;51    border-radius: 50%;52    background: #D9D9D9;53    opacity: 0.85;54  }55  .icon-wifi, .icon-battery {56    display: inline-flex;57    align-items: center;58    justify-content: center;59  }60  .icon-battery {61    width: 60px;62    height: 28px;63    border: 2px solid #fff;64    border-radius: 6px;65    position: relative;66  }67  .icon-battery::after {68    content: "";69    position: absolute;70    right: -10px;71    top: 6px;72    width: 6px;73    height: 16px;74    background: #fff;75    border-radius: 2px;76  }77  .icon-battery .level {78    width: 38px;79    height: 18px;80    background: #fff;81    margin-left: 4px;82    border-radius: 3px;83  }84 85  /* Top app bar */86  .app-bar {87    position: absolute;88    top: 120px;89    left: 0;90    width: 1080px;91    height: 140px;92    display: flex;93    align-items: center;94    justify-content: space-between;95    padding: 0 24px 0 18px;96  }97  .app-left {98    display: flex;99    align-items: center;100    gap: 16px;101  }102  .app-actions {103    display: flex;104    align-items: center;105    gap: 36px;106  }107  .app-icon {108    width: 72px;109    height: 72px;110  }111  .divider {112    position: absolute;113    left: 0;114    width: 100%;115    height: 2px;116    background: #2A2720;117  }118  .divider.top { top: 260px; }119  .divider.mid { top: 402px; }120 121  /* Fields */122  .field-row {123    position: absolute;124    left: 0;125    width: 100%;126    display: flex;127    align-items: center;128    gap: 20px;129    padding: 0 24px;130  }131  .field-label {132    min-width: 120px;133    color: #B7B1A3;134    font-size: 36px;135  }136  .field-value {137    flex: 1;138    font-size: 40px;139    color: #F0ECE4;140  }141  .field-row.from { top: 262px; height: 140px; }142  .field-row.to   { top: 404px; height: 156px; }143  .caret {144    width: 48px;145    height: 48px;146  }147 148  /* Suggestion card */149  .suggestion {150    position: absolute;151    top: 560px;152    left: 0;153    width: 100%;154    padding: 24px 24px;155    display: flex;156    align-items: center;157    gap: 28px;158  }159  .avatar {160    width: 96px;161    height: 96px;162    background: #E0E0E0;163    border: 1px solid #BDBDBD;164    border-radius: 50%;165    display: flex;166    align-items: center;167    justify-content: center;168    color: #757575;169    font-size: 26px;170  }171  .suggestion-text {172    display: flex;173    flex-direction: column;174    gap: 6px;175  }176  .suggestion-text .primary {177    font-size: 44px;178    color: #F2EFE8;179  }180  .suggestion-text .secondary {181    font-size: 34px;182    color: #A39C8E;183  }184 185  /* Compose body placeholder space */186  .compose-area {187    position: absolute;188    top: 740px;189    left: 0;190    width: 100%;191    bottom: 1020px; /* leaves room for keyboard */192    padding: 24px;193    color: #8F887A;194    font-size: 36px;195  }196 197  /* Keyboard */198  .keyboard {199    position: absolute;200    left: 0;201    bottom: 90px;202    width: 100%;203    height: 810px;204    background: #1C1914;205    padding: 28px 22px 24px 22px;206    box-sizing: border-box;207  }208  .kb-row {209    display: flex;210    gap: 16px;211    margin-bottom: 22px;212    justify-content: center;213  }214  .key {215    height: 120px;216    min-width: 90px;217    background: #2B2722;218    border-radius: 18px;219    display: flex;220    align-items: center;221    justify-content: center;222    color: #E9E2CF;223    font-size: 46px;224    box-shadow: inset 0 0 0 1px #2F2B26;225  }226  .key.wide { min-width: 140px; }227  .key.space {228    flex: 1;229    min-width: 400px;230    color: #A59E90;231    font-size: 36px;232    letter-spacing: 8px;233  }234  .key.special {235    background: #CFC19A;236    color: #1A1713;237    box-shadow: inset 0 0 0 1px #B6AA86;238  }239  .key.enter {240    background: #E6D59B;241    color: #1A1713;242  }243  .gesture-bar {244    position: absolute;245    bottom: 24px;246    left: 50%;247    transform: translateX(-50%);248    width: 360px;249    height: 16px;250    background: #EDEAE3;251    border-radius: 10px;252    opacity: 0.9;253  }254</style>255</head>256<body>257<div id="render-target">258 259  <!-- Status bar -->260  <div class="status-bar">261    <div class="sb-left">262      <div>11:17</div>263    </div>264    <div class="sb-right">265      <div class="sb-dot"></div>266      <div class="sb-dot"></div>267      <div class="sb-dot"></div>268      <div class="sb-dot"></div>269      <div class="sb-dot"></div>270      <svg class="icon-wifi" width="44" height="44" viewBox="0 0 24 24">271        <path d="M3 8c4-4 14-4 18 0M6 11c3-3 9-3 12 0M9 14c2-2 4-2 6 0" stroke="#fff" stroke-width="2" fill="none" stroke-linecap="round"/>272        <circle cx="12" cy="17" r="1.6" fill="#fff"/>273      </svg>274      <div class="icon-battery"><div class="level"></div></div>275    </div>276  </div>277 278  <!-- Top app bar -->279  <div class="app-bar">280    <div class="app-left">281      <svg class="app-icon" viewBox="0 0 24 24">282        <path d="M15 6 L9 12 L15 18" stroke="#EDEAE3" stroke-width="2.2" fill="none" stroke-linecap="round" stroke-linejoin="round"/>283      </svg>284    </div>285    <div class="app-actions">286      <svg class="app-icon" viewBox="0 0 24 24">287        <path d="M7 12 L14 5 A3.5 3.5 0 1 1 19 10 L11 18 A5 5 0 0 1 4 11 L11 4" stroke="#EDEAE3" stroke-width="2" fill="none" stroke-linecap="round" stroke-linejoin="round"/>288      </svg>289      <svg class="app-icon" viewBox="0 0 24 24">290        <polygon points="4,20 20,12 4,4" fill="#EDEAE3"/>291      </svg>292      <svg class="app-icon" viewBox="0 0 24 24">293        <circle cx="12" cy="5" r="2" fill="#EDEAE3"/>294        <circle cx="12" cy="12" r="2" fill="#EDEAE3"/>295        <circle cx="12" cy="19" r="2" fill="#EDEAE3"/>296      </svg>297    </div>298  </div>299  <div class="divider top"></div>300 301  <!-- From row -->302  <div class="field-row from">303    <div class="field-label">From</div>304    <div class="field-value">dbwscratch.test.id16@gmail.com</div>305  </div>306  <div class="divider mid"></div>307 308  <!-- To row -->309  <div class="field-row to">310    <div class="field-label">To</div>311    <div class="field-value">natalie.larson1998@gmail.com</div>312    <svg class="caret" viewBox="0 0 24 24">313      <path d="M6 9 L12 15 L18 9" stroke="#EDEAE3" stroke-width="2" fill="none" stroke-linecap="round" stroke-linejoin="round"/>314    </svg>315  </div>316 317  <!-- Suggestion card -->318  <div class="suggestion">319    <div class="avatar">[IMG: Contact Avatar]</div>320    <div class="suggestion-text">321      <div class="primary">natalie.larson1998@gmail.com</div>322      <div class="secondary">natalie.larson1998@gmail.com</div>323    </div>324  </div>325 326  <!-- Compose area placeholder -->327  <div class="compose-area">328    <!-- Empty space representing message body in dark theme -->329  </div>330 331  <!-- Keyboard -->332  <div class="keyboard">333    <div class="kb-row">334      <div class="key">q</div>335      <div class="key">w</div>336      <div class="key">e</div>337      <div class="key">r</div>338      <div class="key">t</div>339      <div class="key">y</div>340      <div class="key">u</div>341      <div class="key">i</div>342      <div class="key">o</div>343      <div class="key">p</div>344    </div>345    <div class="kb-row">346      <div class="key">a</div>347      <div class="key">s</div>348      <div class="key">d</div>349      <div class="key">f</div>350      <div class="key">g</div>351      <div class="key">h</div>352      <div class="key">j</div>353      <div class="key">k</div>354      <div class="key">l</div>355      <div class="key wide">⌫</div>356    </div>357    <div class="kb-row">358      <div class="key">z</div>359      <div class="key">x</div>360      <div class="key">c</div>361      <div class="key">v</div>362      <div class="key">b</div>363      <div class="key">n</div>364      <div class="key">m</div>365      <div class="key">.</div>366      <div class="key enter">➔</div>367    </div>368    <div class="kb-row">369      <div class="key special wide">?123</div>370      <div class="key">@</div>371      <div class="key">☺</div>372      <div class="key space">space</div>373      <div class="key">.</div>374      <div class="key special wide">➔</div>375    </div>376  </div>377 378  <div class="gesture-bar"></div>379</div>380</body>381</html>