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>Compose Email - Dark UI</title>7<style>8  body {9    margin: 0;10    padding: 0;11    background: transparent;12    font-family: Arial, Helvetica, sans-serif;13  }14  #render-target {15    width: 1080px;16    height: 2400px;17    position: relative;18    overflow: hidden;19    background: #1b140d; /* deep brown/black */20    color: #e9dcc5;21  }22 23  /* Status bar */24  .status-bar {25    position: absolute;26    top: 0;27    left: 0;28    height: 110px;29    width: 100%;30    padding: 0 36px;31    display: flex;32    align-items: center;33    justify-content: space-between;34    color: #e9dcc5;35    font-size: 42px;36    letter-spacing: 1px;37  }38  .status-right {39    display: flex;40    align-items: center;41    gap: 24px;42  }43  .status-icon {44    width: 48px;45    height: 48px;46  }47 48  /* App bar */49  .app-bar {50    position: absolute;51    top: 110px;52    left: 0;53    width: 100%;54    height: 120px;55    display: flex;56    align-items: center;57    justify-content: space-between;58    padding: 0 24px 0 12px;59  }60  .app-left, .app-right {61    display: flex;62    align-items: center;63    gap: 26px;64  }65  .icon-btn {66    width: 88px;67    height: 88px;68    display: inline-flex;69    align-items: center;70    justify-content: center;71    border-radius: 16px;72  }73  .icon-svg {74    width: 64px;75    height: 64px;76    fill: none;77    stroke: #e9dcc5;78    stroke-width: 8;79    stroke-linecap: round;80    stroke-linejoin: round;81  }82  .divider {83    position: absolute;84    top: 230px;85    left: 0;86    width: 100%;87    height: 2px;88    background: #2a2118;89  }90 91  /* Form area */92  .form {93    position: absolute;94    top: 240px;95    left: 0;96    width: 100%;97    padding: 24px 36px;98  }99  .row {100    display: flex;101    align-items: center;102    gap: 24px;103    padding: 24px 0;104    border-bottom: 2px solid #2a2118;105  }106  .label {107    min-width: 120px;108    color: #c9b89f;109    font-size: 40px;110  }111  .value {112    font-size: 42px;113    color: #e9dcc5;114  }115  .to-input {116    flex: 1;117    display: flex;118    align-items: center;119    gap: 16px;120  }121  .caret {122    width: 40px;123    height: 40px;124    margin-left: 8px;125  }126 127  /* Suggestion list */128  .suggestion {129    margin-top: 12px;130    padding: 24px 0;131    border-bottom: 2px solid #2a2118;132    display: flex;133    align-items: center;134    gap: 24px;135  }136  .avatar {137    width: 96px;138    height: 96px;139    border-radius: 50%;140    background: #E0E0E0;141    border: 1px solid #BDBDBD;142    display: flex;143    align-items: center;144    justify-content: center;145    color: #757575;146    font-size: 20px;147    text-align: center;148  }149  .sugg-texts {150    display: flex;151    flex-direction: column;152    gap: 8px;153  }154  .sugg-primary {155    font-size: 52px;156    color: #e9dcc5;157  }158  .sugg-secondary {159    font-size: 36px;160    color: #b9a993;161  }162 163  /* Content area blank */164  .content-blank {165    height: 700px;166  }167 168  /* Keyboard */169  .keyboard {170    position: absolute;171    bottom: 0;172    left: 0;173    width: 100%;174    height: 950px;175    background: #1f1b17;176    border-top: 2px solid #2a231d;177    box-sizing: border-box;178    padding: 24px 24px 32px;179  }180  .kb-top {181    height: 120px;182    display: flex;183    align-items: center;184    gap: 24px;185  }186  .kb-top .chip {187    width: 88px;188    height: 88px;189    border-radius: 20px;190    background: #2a241f;191    display: flex;192    align-items: center;193    justify-content: center;194    color: #d7cdb9;195    font-weight: bold;196  }197  .kb-grid {198    margin-top: 8px;199    display: grid;200    grid-template-columns: repeat(10, 1fr);201    grid-gap: 12px;202  }203  .key {204    height: 120px;205    background: #2a241f;206    border-radius: 18px;207    color: #e9dcc5;208    font-size: 48px;209    display: flex;210    align-items: center;211    justify-content: center;212  }213  .key.wide {214    grid-column: span 2;215  }216  .key.tall {217    height: 140px;218  }219  .accent {220    background: #cdb389;221    color: #2a241f;222    font-weight: bold;223  }224  .bottom-row {225    margin-top: 16px;226    display: grid;227    grid-template-columns: 1.2fr 0.8fr 4fr 0.8fr 1.2fr;228    grid-gap: 12px;229    align-items: center;230  }231  .pill {232    position: absolute;233    bottom: 16px;234    left: 50%;235    transform: translateX(-50%);236    width: 200px;237    height: 12px;238    background: #ffffff;239    border-radius: 8px;240    opacity: 0.8;241  }242</style>243</head>244<body>245<div id="render-target">246 247  <!-- Status Bar -->248  <div class="status-bar">249    <div>9:28</div>250    <div class="status-right">251      <!-- simple status icons -->252      <svg class="status-icon" viewBox="0 0 100 100">253        <path d="M10 60 Q35 30 60 60" stroke="#e9dcc5" stroke-width="10" fill="none"/>254        <circle cx="80" cy="65" r="6" fill="#e9dcc5"/>255      </svg>256      <svg class="status-icon" viewBox="0 0 120 100">257        <rect x="10" y="20" width="90" height="60" rx="10" ry="10" stroke="#e9dcc5" stroke-width="8" fill="none"></rect>258        <rect x="16" y="26" width="55" height="48" rx="6" fill="#e9dcc5"></rect>259        <rect x="102" y="40" width="10" height="20" rx="3" fill="#e9dcc5"></rect>260      </svg>261    </div>262  </div>263 264  <!-- App Bar -->265  <div class="app-bar">266    <div class="app-left">267      <div class="icon-btn">268        <svg class="icon-svg" viewBox="0 0 100 100">269          <path d="M70 20 L30 50 L70 80" />270        </svg>271      </div>272    </div>273    <div class="app-right">274      <div class="icon-btn">275        <!-- paperclip -->276        <svg class="icon-svg" viewBox="0 0 100 100">277          <path d="M40 35 l35 -20 a25 25 0 1 1 -50 0 l35 20 a12 12 0 1 0 -25 0" />278        </svg>279      </div>280      <div class="icon-btn">281        <!-- send -->282        <svg class="icon-svg" viewBox="0 0 100 100">283          <path d="M12 50 L88 50" stroke="#e9dcc5"></path>284          <path d="M20 20 L88 50 L20 80 Z" fill="#e9dcc5" stroke="#e9dcc5"/>285        </svg>286      </div>287      <div class="icon-btn">288        <!-- more (vertical dots) -->289        <svg class="icon-svg" viewBox="0 0 100 100">290          <circle cx="50" cy="20" r="8" stroke="none" fill="#e9dcc5"></circle>291          <circle cx="50" cy="50" r="8" stroke="none" fill="#e9dcc5"></circle>292          <circle cx="50" cy="80" r="8" stroke="none" fill="#e9dcc5"></circle>293        </svg>294      </div>295    </div>296  </div>297  <div class="divider"></div>298 299  <!-- Form Area -->300  <div class="form">301    <div class="row">302      <div class="label">From</div>303      <div class="value">lucaskramer733@gmail.com</div>304    </div>305 306    <div class="row">307      <div class="label">To</div>308      <div class="to-input">309        <div class="value" style="font-size:54px;">evankramer@gmail.com</div>310        <svg class="caret" viewBox="0 0 100 100">311          <path d="M20 35 L50 65 L80 35" stroke="#c9b89f" stroke-width="12" fill="none" stroke-linecap="round" stroke-linejoin="round"/>312        </svg>313      </div>314    </div>315 316    <!-- Suggestion item -->317    <div class="suggestion">318      <div class="avatar">[IMG: User Avatar]</div>319      <div class="sugg-texts">320        <div class="sugg-primary">evankramer@gmail.com</div>321        <div class="sugg-secondary">evankramer@gmail.com</div>322      </div>323    </div>324 325    <div class="content-blank"></div>326  </div>327 328  <!-- Keyboard -->329  <div class="keyboard">330    <div class="kb-top">331      <div class="chip">GIF</div>332      <div class="chip">⚙</div>333      <div class="chip">G</div>334      <div class="chip">🎨</div>335      <div class="chip">🎤</div>336    </div>337 338    <!-- Row 1 -->339    <div class="kb-grid">340      <div class="key">q</div>341      <div class="key">w</div>342      <div class="key">e</div>343      <div class="key">r</div>344      <div class="key">t</div>345      <div class="key">y</div>346      <div class="key">u</div>347      <div class="key">i</div>348      <div class="key">o</div>349      <div class="key">p</div>350 351      <!-- Row 2 -->352      <div class="key">a</div>353      <div class="key">s</div>354      <div class="key">d</div>355      <div class="key">f</div>356      <div class="key">g</div>357      <div class="key">h</div>358      <div class="key">j</div>359      <div class="key">k</div>360      <div class="key">l</div>361      <div class="key accent">⌫</div>362 363      <!-- Row 3 -->364      <div class="key tall">↥</div>365      <div class="key">z</div>366      <div class="key">x</div>367      <div class="key">c</div>368      <div class="key">v</div>369      <div class="key">b</div>370      <div class="key">n</div>371      <div class="key">m</div>372      <div class="key">.</div>373      <div class="key accent">⮕</div>374    </div>375 376    <!-- Bottom utilities row -->377    <div class="bottom-row">378      <div class="key accent">?123</div>379      <div class="key">@</div>380      <div class="key">space</div>381      <div class="key">.</div>382      <div class="key accent">→</div>383    </div>384  </div>385 386  <div class="pill"></div>387</div>388</body>389</html>