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 UI (Dark)</title>7<style>8  :root {9    --bg: #121212;10    --surface: #1c1c1c;11    --on-bg: #eaeaea;12    --on-dim: #b0b0b0;13    --divider: #2a2a2a;14    --accent: #bb86fc;15  }16  html, body {17    margin: 0;18    padding: 0;19    background: transparent;20    font-family: Roboto, Arial, Helvetica, sans-serif;21    color: var(--on-bg);22  }23  #render-target {24    width: 1080px;25    height: 2400px;26    position: relative;27    overflow: hidden;28    background: var(--bg);29  }30 31  /* Status bar */32  .status-bar {33    height: 100px;34    padding: 0 32px;35    display: flex;36    align-items: center;37    justify-content: space-between;38    color: #fff;39    font-size: 34px;40    letter-spacing: 1px;41  }42  .status-icons {43    display: inline-flex;44    align-items: center;45    gap: 26px;46  }47  .icon-pill, .icon-dot, .icon-battery {48    display: inline-block;49  }50  .icon-dot {51    width: 12px;52    height: 12px;53    border-radius: 50%;54    background: #dcdcdc;55  }56  .icon-pill {57    width: 28px;58    height: 28px;59    border-radius: 6px;60    background: #dcdcdc;61    opacity: 0.95;62  }63  .icon-battery {64    width: 44px;65    height: 24px;66    border: 2px solid #dcdcdc;67    border-radius: 4px;68    position: relative;69  }70  .icon-battery:after {71    content: "";72    position: absolute;73    right: -6px;74    top: 6px;75    width: 6px;76    height: 12px;77    background: #dcdcdc;78    border-radius: 2px;79  }80  .icon-battery .level {81    position: absolute;82    left: 3px;83    top: 3px;84    bottom: 3px;85    width: 70%;86    background: #dcdcdc;87    border-radius: 2px;88  }89 90  /* App bar */91  .app-bar {92    height: 132px;93    border-bottom: 1px solid var(--divider);94    display: flex;95    align-items: center;96    padding: 0 20px 0 8px;97  }98  .app-left, .app-right {99    display: flex;100    align-items: center;101  }102  .app-left {103    gap: 8px;104  }105  .app-right {106    margin-left: auto;107    gap: 28px;108  }109  .icon-btn {110    width: 96px;111    height: 96px;112    display: inline-flex;113    justify-content: center;114    align-items: center;115    border-radius: 48px;116  }117  .icon-btn svg {118    width: 48px;119    height: 48px;120    fill: #e6e6e6;121  }122 123  /* Fields area */124  .fields {125    padding: 24px 24px 0 24px;126  }127  .row {128    display: flex;129    align-items: center;130    padding: 26px 8px;131    border-bottom: 1px solid var(--divider);132  }133  .label {134    width: 130px;135    color: var(--on-dim);136    font-size: 28px;137  }138  .value {139    color: var(--on-bg);140    font-size: 34px;141    letter-spacing: 0.2px;142    flex: 1;143  }144  .value.dim {145    color: var(--on-dim);146  }147 148  .to-row .value {149    font-size: 38px;150  }151  .to-row .end-actions {152    width: 90px;153    display: flex;154    justify-content: flex-end;155    align-items: center;156  }157  .to-row .end-actions svg {158    width: 36px;159    height: 36px;160    fill: #cfcfcf;161  }162 163  /* Suggestion / Add recipient */164  .suggestion {165    display: flex;166    align-items: center;167    gap: 24px;168    padding: 26px 8px;169  }170  .avatar {171    width: 110px;172    height: 110px;173    border-radius: 55px;174    background: #d74a3a;175    display: flex;176    justify-content: center;177    align-items: center;178    color: #fff;179    font-weight: 600;180  }181  .avatar svg {182    width: 56px;183    height: 56px;184    fill: #fff;185  }186  .suggestion-text {187    display: flex;188    flex-direction: column;189    gap: 8px;190  }191  .suggestion-text .title {192    font-size: 34px;193    color: var(--on-bg);194  }195  .suggestion-text .subtitle {196    font-size: 28px;197    color: var(--on-dim);198  }199 200  /* Bottom gesture bar */201  .gesture {202    position: absolute;203    bottom: 22px;204    left: 50%;205    transform: translateX(-50%);206    width: 260px;207    height: 10px;208    background: #e8e8e8;209    border-radius: 8px;210    opacity: 0.9;211  }212</style>213</head>214<body>215<div id="render-target">216 217  <!-- Status bar -->218  <div class="status-bar">219    <div class="time">9:20</div>220    <div class="status-icons">221      <span class="icon-pill" title="Signal"></span>222      <span class="icon-pill" title="Wi‑Fi"></span>223      <span class="icon-dot" title="Notification"></span>224      <span class="icon-battery" title="Battery"><span class="level"></span></span>225    </div>226  </div>227 228  <!-- App bar -->229  <div class="app-bar">230    <div class="app-left">231      <div class="icon-btn" title="Back">232        <svg viewBox="0 0 24 24"><path d="M15.5 4.5 7 12l8.5 7.5-1.5 1.5L4 12l10-9 1.5 1.5z"/></svg>233      </div>234    </div>235    <div class="app-right">236      <div class="icon-btn" title="Attach">237        <svg viewBox="0 0 24 24"><path d="M7 12.5V7a5 5 0 1 1 10 0v8a3.5 3.5 0 1 1-7 0V8h2v7a1.5 1.5 0 0 0 3 0V7a3 3 0 1 0-6 0v5.5"/></svg>238      </div>239      <div class="icon-btn" title="Send">240        <svg viewBox="0 0 24 24"><path d="M2 21 23 12 2 3v7l14 2-14 2v7z"/></svg>241      </div>242      <div class="icon-btn" title="More">243        <svg viewBox="0 0 24 24"><path d="M12 5a2 2 0 1 1 0-4 2 2 0 0 1 0 4zm0 9a2 2 0 1 1 0-4 2 2 0 0 1 0 4zm0 9a2 2 0 1 1 0-4 2 2 0 0 1 0 4z"/></svg>244      </div>245    </div>246  </div>247 248  <!-- Fields -->249  <div class="fields">250    <div class="row">251      <div class="label">From</div>252      <div class="value">victorjonesdbwresearchpersona@gmail.com</div>253    </div>254 255    <div class="row to-row">256      <div class="label">To</div>257      <div class="value">colepersondbwtest@gmail.com</div>258      <div class="end-actions" title="Show contacts">259        <svg viewBox="0 0 24 24"><path d="M7 10l5 5 5-5H7z"/></svg>260      </div>261    </div>262 263    <div class="suggestion">264      <div class="avatar" aria-label="Contact avatar">265        <svg viewBox="0 0 24 24"><path d="M12 12c2.76 0 5-2.24 5-5s-2.24-5-5-5-5 2.24-5 5 2.24 5 5 5zm0 2c-3.33 0-10 1.67-10 5v3h20v-3c0-3.33-6.67-5-10-5z"/></svg>266      </div>267      <div class="suggestion-text">268        <div class="title">Add recipient</div>269        <div class="subtitle">colepersondbwtest@gmail.com</div>270      </div>271    </div>272  </div>273 274  <!-- Bottom gesture bar -->275  <div class="gesture"></div>276</div>277</body>278</html>