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>Email Compose - Dark</title>7<style>8  body { margin: 0; padding: 0; background: transparent; font-family: Arial, Helvetica, sans-serif; }9  #render-target {10    position: relative;11    width: 1080px;12    height: 2400px;13    overflow: hidden;14    background: #0F0F0F;15    color: #EAEAEA;16  }17 18  /* Status bar */19  .status-bar {20    height: 96px;21    padding: 0 32px;22    display: flex;23    align-items: center;24    justify-content: space-between;25    color: #EAEAEA;26    font-size: 36px;27    letter-spacing: 0.5px;28  }29  .status-icons { display: flex; align-items: center; gap: 28px; }30  .status-icon {31    width: 34px; height: 34px; border-radius: 20px; background: #2A2A2A;32  }33 34  /* Top action bar */35  .top-actions {36    height: 96px;37    padding: 0 20px 0 12px;38    display: flex;39    align-items: center;40    justify-content: space-between;41  }42  .left-actions { display: flex; align-items: center; gap: 14px; }43  .right-actions { display: flex; align-items: center; gap: 30px; }44  .icon-btn svg { width: 56px; height: 56px; }45  .icon-btn path { stroke: #C7D08A; fill: none; stroke-width: 5; stroke-linecap: round; stroke-linejoin: round; }46  .icon-clip path { stroke: #B7B7B7; }47  .icon-more circle { fill: #B7B7B7; }48  .icon-send path { fill: #C7D08A; stroke: none; }49  .back path { stroke: #EAEAEA; }50 51  /* Form area */52  .compose {53    padding: 0 32px;54  }55  .field-row {56    padding: 28px 0;57    border-bottom: 1px solid #232323;58    display: flex;59    align-items: center;60    gap: 24px;61    font-size: 38px;62  }63  .label {64    min-width: 110px;65    color: #9EA6A0;66  }67  .value {68    flex: 1;69    color: #DADADA;70  }71  .dropdown {72    width: 36px; height: 36px;73  }74  .dropdown path { stroke: #9EA6A0; stroke-width: 5; fill: none; stroke-linecap: round; stroke-linejoin: round; }75 76  /* Recipient pill */77  .pill {78    display: inline-flex;79    align-items: center;80    gap: 20px;81    padding: 16px 28px 16px 18px;82    border: 2px solid #4A4A4A;83    border-radius: 40px;84    color: #DADADA;85    font-size: 36px;86  }87  .avatar {88    width: 70px; height: 70px; border-radius: 50%;89    background: #E15A2B; display: flex; align-items: center; justify-content: center;90    color: #1A1A1A; font-weight: bold; font-size: 40px;91  }92 93  .subject-placeholder {94    color: #9EA6A0;95  }96 97  /* Body text area */98  .body-area {99    padding: 36px 32px 24px 32px;100    font-size: 42px;101    line-height: 1.45;102    color: #FFFFFF;103  }104 105  /* Keyboard */106  .keyboard {107    position: absolute;108    left: 0;109    bottom: 88px;110    width: 100%;111    background: #111111;112    border-top: 1px solid #232323;113    padding: 22px 24px 34px 24px;114  }115  .key-row {116    display: flex;117    gap: 16px;118    margin-bottom: 22px;119    justify-content: center;120  }121  .key {122    background: #1C1C1C;123    color: #D9D9D9;124    border-radius: 18px;125    padding: 26px 28px;126    font-size: 40px;127    min-width: 72px;128    text-align: center;129    box-shadow: inset 0 0 0 1px #2A2A2A;130  }131  .key.wide { min-width: 180px; }132  .space { flex: 1; padding: 26px 0; }133  .accent { background: #D7E88D; color: #0E0E0E; font-weight: 700; }134  .backspace::after {135    content: "⌫";136    font-size: 40px;137  }138  .enter::after {139    content: "➜";140    font-size: 40px;141  }142 143  /* Gesture pill */144  .gesture {145    position: absolute;146    left: 50%;147    bottom: 20px;148    transform: translateX(-50%);149    width: 320px;150    height: 12px;151    background: #EDEDED;152    border-radius: 8px;153    opacity: 0.8;154  }155</style>156</head>157<body>158<div id="render-target">159 160  <!-- Status Bar -->161  <div class="status-bar">162    <div>6:12</div>163    <div class="status-icons">164      <div class="status-icon"></div>165      <div class="status-icon"></div>166      <div class="status-icon"></div>167      <div class="status-icon"></div>168    </div>169  </div>170 171  <!-- Top Actions -->172  <div class="top-actions">173    <div class="left-actions">174      <div class="icon-btn back">175        <svg viewBox="0 0 24 24">176          <path d="M15 6 L9 12 L15 18"></path>177        </svg>178      </div>179    </div>180    <div class="right-actions">181      <div class="icon-btn icon-clip">182        <svg viewBox="0 0 24 24">183          <path d="M7 12l6-6a4 4 0 1 1 6 6l-8 8a6 6 0 0 1-8-8l8-8"></path>184        </svg>185      </div>186      <div class="icon-btn icon-send">187        <svg viewBox="0 0 24 24">188          <path d="M3 12 L21 5 L14 12 L21 19 Z"></path>189        </svg>190      </div>191      <div class="icon-btn icon-more">192        <svg viewBox="0 0 24 24">193          <circle cx="5" cy="12" r="2"></circle>194          <circle cx="12" cy="12" r="2"></circle>195          <circle cx="19" cy="12" r="2"></circle>196        </svg>197      </div>198    </div>199  </div>200 201  <!-- Compose Form -->202  <div class="compose">203    <div class="field-row">204      <div class="label">From</div>205      <div class="value">thomas.blanc1978@gmail.com</div>206      <div class="dropdown">207        <svg viewBox="0 0 24 24"><path d="M6 9l6 6 6-6"></path></svg>208      </div>209    </div>210 211    <div class="field-row">212      <div class="label">To</div>213      <div class="value">214        <span class="pill">215          <span class="avatar">r</span>216          rick.weinstein@dayrep.com217        </span>218      </div>219      <div class="dropdown">220        <svg viewBox="0 0 24 24"><path d="M6 9l6 6 6-6"></path></svg>221      </div>222    </div>223 224    <div class="field-row">225      <div class="label">Subject</div>226      <div class="value subject-placeholder">Subject</div>227    </div>228  </div>229 230  <!-- Email body -->231  <div class="body-area">232    <div>My trip:</div>233    <div>https://citymapper.com/eta/T6coibwh5ji</div>234  </div>235 236  <!-- Keyboard -->237  <div class="keyboard">238    <div class="key-row">239      <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>240      <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>241    </div>242    <div class="key-row">243      <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>244      <div class="key">h</div><div class="key">j</div><div class="key">k</div><div class="key">l</div>245    </div>246    <div class="key-row">247      <div class="key wide">⇧</div>248      <div class="key">z</div><div class="key">x</div><div class="key">c</div><div class="key">v</div><div class="key">b</div>249      <div class="key">n</div><div class="key">m</div>250      <div class="key wide backspace"></div>251    </div>252    <div class="key-row">253      <div class="key accent wide">?123</div>254      <div class="key">@</div>255      <div class="key">☺</div>256      <div class="key">GIF</div>257      <div class="key">⚙</div>258      <div class="key">G↔︎</div>259      <div class="key">🎨</div>260      <div class="key">🎙</div>261    </div>262    <div class="key-row">263      <div class="key space"></div>264      <div class="key">.</div>265      <div class="key accent wide enter"></div>266    </div>267  </div>268 269  <!-- Gesture Navigation Pill -->270  <div class="gesture"></div>271 272</div>273</body>274</html>