GD-ML/AndroidCode

1<!DOCTYPE html>2<html lang="en">3<head>4<meta charset="UTF-8">5<title>Compose Email - Dark UI</title>6<style>7  body { margin: 0; padding: 0; background: transparent; font-family: Arial, Helvetica, sans-serif; }8  #render-target {9    width: 1080px;10    height: 2400px;11    position: relative;12    overflow: hidden;13    background: #0f0f0f;14    color: #e7e7e7;15  }16 17  /* Status bar */18  .status-bar {19    height: 120px;20    padding: 0 36px;21    display: flex;22    align-items: center;23    justify-content: space-between;24    color: #eaeaea;25    font-size: 44px;26    letter-spacing: 0.5px;27  }28  .status-right {29    display: flex;30    align-items: center;31    gap: 28px;32  }33  .status-icon svg { width: 42px; height: 42px; fill: none; stroke: #eaeaea; stroke-width: 2.2; }34 35  /* Top app bar */36  .top-bar {37    height: 160px;38    border-bottom: 1px solid #2a2a2a;39    display: flex;40    align-items: center;41    justify-content: space-between;42    padding: 0 28px;43  }44  .top-left, .top-right { display: flex; align-items: center; gap: 28px; }45  .icon-btn svg { width: 56px; height: 56px; }46  .icon-btn { width: 80px; height: 80px; display: flex; align-items: center; justify-content: center; }47 48  /* Fields */49  .field {50    height: 150px;51    display: flex;52    align-items: center;53    padding: 0 36px;54    border-bottom: 1px solid #272727;55    font-size: 40px;56  }57  .field .label {58    color: #a5a5a5;59    width: 150px;60  }61  .field .value {62    flex: 1;63    color: #e7e7e7;64  }65  .field .placeholder {66    color: #6f6f6f;67  }68  .caret svg { width: 44px; height: 44px; stroke: #a9a9a9; }69 70  /* Message body */71  .message {72    padding: 48px 36px;73    font-size: 46px;74    line-height: 1.6;75    color: #f1f1f1;76    min-height: 900px;77  }78 79  /* Keyboard mock */80  .keyboard {81    position: absolute;82    left: 0;83    bottom: 60px;84    width: 100%;85    height: 750px;86    background: #111111;87    border-top: 1px solid #2a2a2a;88    padding: 18px 24px;89    box-sizing: border-box;90  }91  .kb-tools {92    height: 120px;93    display: flex;94    align-items: center;95    gap: 36px;96    padding: 0 8px 12px;97    color: #cecece;98  }99  .kb-tool {100    width: 88px; height: 88px; background: #232323; border-radius: 20px;101    display: flex; align-items: center; justify-content: center;102    border: 1px solid #3a3a3a; font-size: 34px;103  }104 105  .kb-row {106    display: grid;107    grid-gap: 14px;108    margin-bottom: 16px;109  }110  .kb-row.row1 { grid-template-columns: repeat(10, 1fr); }111  .kb-row.row2 { grid-template-columns: repeat(10, 1fr); }112  .kb-row.row3 { grid-template-columns: 1.2fr repeat(7, 1fr) 1.6fr; }113 114  .key {115    height: 120px;116    background: #2c2c2c;117    border-radius: 20px;118    border: 1px solid #3a3a3a;119    display: flex;120    align-items: center;121    justify-content: center;122    color: #dcdcdc;123    font-size: 44px;124  }125  .key.small { font-size: 36px; }126 127  .kb-bottom {128    display: grid;129    grid-template-columns: 1.5fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 2fr;130    grid-gap: 16px;131    margin-top: 10px;132  }133  .pill {134    border-radius: 40px;135    background: #bfcf8b;136    color: #0d0d0d;137    border: 1px solid #a8b66c;138    font-weight: bold;139  }140  .enter {141    background: #e9f58c;142    color: #0d0d0d;143    border: 1px solid #cfdc6e;144    font-weight: bold;145  }146 147  /* Bottom navigation pill */148  .nav-pill {149    position: absolute;150    bottom: 16px;151    left: 50%;152    transform: translateX(-50%);153    width: 240px;154    height: 18px;155    background: #f2f2f2;156    border-radius: 9px;157    opacity: 0.9;158  }159</style>160</head>161<body>162<div id="render-target">163 164  <!-- Status Bar -->165  <div class="status-bar">166    <div>6:08</div>167    <div class="status-right">168      <span class="status-icon">169        <!-- location dot -->170        <svg viewBox="0 0 24 24"><circle cx="12" cy="12" r="4"></circle><path d="M12 2v4M12 18v4M2 12h4M18 12h4"></path></svg>171      </span>172      <span class="status-icon">173        <!-- wifi -->174        <svg viewBox="0 0 24 24">175          <path d="M2 9c5-4 15-4 20 0"></path>176          <path d="M5 12c3-2 11-2 14 0"></path>177          <path d="M8 15c2-1 6-1 8 0"></path>178          <circle cx="12" cy="18" r="1.8" fill="#eaeaea" stroke="none"></circle>179        </svg>180      </span>181      <span class="status-icon">182        <!-- battery -->183        <svg viewBox="0 0 28 24">184          <rect x="2" y="6" width="20" height="12" rx="2"></rect>185          <rect x="23" y="9" width="3" height="6" rx="1"></rect>186          <rect x="4" y="8" width="14" height="8" fill="#eaeaea" stroke="none"></rect>187        </svg>188      </span>189    </div>190  </div>191 192  <!-- App Top Bar -->193  <div class="top-bar">194    <div class="top-left">195      <div class="icon-btn">196        <!-- back arrow -->197        <svg viewBox="0 0 24 24">198          <path d="M15 5 L8 12 L15 19" stroke="#e7e7e7" stroke-width="2.5" fill="none" stroke-linecap="round" stroke-linejoin="round"></path>199        </svg>200      </div>201    </div>202    <div class="top-right">203      <div class="icon-btn">204        <!-- attach paperclip -->205        <svg viewBox="0 0 24 24">206          <path d="M7 12c0-3 4-6 7-6s4 2 4 4-2 5-6 7-7 0-7-3 3-6 6-7" stroke="#e7e7e7" stroke-width="2.2" fill="none" stroke-linecap="round"></path>207        </svg>208      </div>209      <div class="icon-btn">210        <!-- send paper plane -->211        <svg viewBox="0 0 24 24">212          <path d="M2 12 L22 5 L14 20 L12 14 L2 12 Z" fill="#e7e7e7"></path>213        </svg>214      </div>215      <div class="icon-btn">216        <!-- vertical more -->217        <svg viewBox="0 0 24 24">218          <circle cx="12" cy="5" r="2" fill="#e7e7e7"></circle>219          <circle cx="12" cy="12" r="2" fill="#e7e7e7"></circle>220          <circle cx="12" cy="19" r="2" fill="#e7e7e7"></circle>221        </svg>222      </div>223    </div>224  </div>225 226  <!-- Fields -->227  <div class="field">228    <div class="label">From</div>229    <div class="value">thomas.blanc1978@gmail.com</div>230    <div class="caret">231      <svg viewBox="0 0 24 24">232        <path d="M6 9 L12 15 L18 9" stroke-width="2.5" fill="none" stroke-linecap="round" stroke="#a9a9a9"></path>233      </svg>234    </div>235  </div>236 237  <div class="field">238    <div class="label">To</div>239    <div class="value placeholder">|</div>240    <div class="caret">241      <svg viewBox="0 0 24 24">242        <path d="M6 9 L12 15 L18 9" stroke-width="2.5" fill="none" stroke-linecap="round" stroke="#777"></path>243      </svg>244    </div>245  </div>246 247  <div class="field">248    <div class="label">Subject</div>249    <div class="value placeholder">Subject</div>250    <div class="caret"></div>251  </div>252 253  <!-- Message body -->254  <div class="message">255    My trip:<br>256    https://citymapper.com/eta/T6coibwh5ji257  </div>258 259  <!-- Keyboard mock -->260  <div class="keyboard">261    <div class="kb-tools">262      <div class="kb-tool">▦</div>263      <div class="kb-tool">☺</div>264      <div class="kb-tool">GIF</div>265      <div class="kb-tool">⚙</div>266      <div class="kb-tool">Gᵗ</div>267      <div class="kb-tool">🎨</div>268      <div class="kb-tool">🎤</div>269    </div>270 271    <div class="kb-row row1">272      <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>273      <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>274    </div>275    <div class="kb-row row2">276      <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>277      <div class="key">h</div><div class="key">j</div><div class="key">k</div><div class="key">l</div><div class="key small">⌫</div>278    </div>279    <div class="kb-row row3">280      <div class="key small">⇧</div>281      <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><div class="key">n</div><div class="key">m</div>282      <div class="key small">⌫</div>283    </div>284 285    <div class="kb-bottom">286      <div class="key pill">?123</div>287      <div class="key">@</div>288      <div class="key">☺</div>289      <div class="key">GIF</div>290      <div class="key">⚙</div>291      <div class="key">Gᵗ</div>292      <div class="key">🎨</div>293      <div class="key">.</div>294      <div class="key enter">→</div>295    </div>296  </div>297 298  <div class="nav-pill"></div>299</div>300</body>301</html>