GD-ML/AndroidCode

1<html lang="en">2<head>3<meta charset="UTF-8">4<title>Email Compose - Dark UI</title>5<style>6  body { margin: 0; padding: 0; background: transparent; font-family: Arial, Helvetica, sans-serif; }7  #render-target {8    width: 1080px;9    height: 2400px;10    position: relative;11    overflow: hidden;12    background: #1a1411; /* deep dark brown/black */13    color: #EDE7DF;14  }15 16  /* Status bar */17  .status-bar {18    position: absolute;19    top: 0;20    left: 0;21    width: 1080px;22    height: 110px;23    padding: 16px 28px;24    box-sizing: border-box;25    display: flex;26    align-items: center;27    justify-content: space-between;28    color: #EFE5DC;29    font-weight: 600;30    letter-spacing: 0.5px;31  }32  .status-left, .status-right { display: flex; align-items: center; gap: 18px; }33  .stat-icon {34    width: 22px; height: 22px;35    background: #2a231f;36    border-radius: 4px;37    border: 1px solid #3a322d;38  }39  .wifi {40    width: 28px; height: 22px; position: relative;41    border: none; background: transparent;42  }43  .wifi::before, .wifi::after {44    content: ""; position: absolute; left: 2px; right: 2px;45    border-top: 2px solid #EDE7DF; border-radius: 18px; height: 0;46  }47  .wifi::before { top: 4px; }48  .wifi::after { top: 12px; width: 70%; left: 6px; right: auto; }49  .battery {50    width: 44px; height: 22px; border: 2px solid #EDE7DF; border-radius: 4px; position: relative;51  }52  .battery::after {53    content: ""; position: absolute; right: -8px; top: 6px; width: 6px; height: 10px; background: #EDE7DF; border-radius: 2px;54  }55  .battery-fill {56    position: absolute; left: 3px; top: 3px; height: 14px; width: 30px; background: #CFC6BD; border-radius: 2px;57  }58 59  /* Compose header bar */60  .compose-bar {61    position: absolute;62    top: 110px;63    left: 0;64    width: 1080px;65    height: 120px;66    display: flex;67    align-items: center;68    justify-content: space-between;69    padding: 0 28px;70    box-sizing: border-box;71  }72  .icon-btn { width: 64px; height: 64px; display: flex; align-items: center; justify-content: center; }73  .icon-btn svg { width: 46px; height: 46px; }74  .icon-btn path, .icon-btn circle, .icon-btn polygon { stroke: #EDE7DF; fill: none; stroke-width: 4; }75  .icon-btn .filled { fill: #EDE7DF; stroke: none; }76 77  /* Fields area */78  .fields {79    position: absolute;80    top: 230px;81    left: 0;82    width: 1080px;83    padding: 10px 36px 0 36px;84    box-sizing: border-box;85    color: #EDE7DF;86  }87  .field-row {88    display: grid;89    grid-template-columns: 140px 1fr 48px;90    align-items: center;91    gap: 20px;92    padding: 28px 0;93    border-bottom: 1px solid #2c2521;94  }95  .label { font-size: 34px; color: #BFB2A8; }96  .value {97    font-size: 40px;98    line-height: 1.2;99  }100  .chev svg { width: 36px; height: 36px; }101  .chip {102    display: grid;103    grid-template-columns: 92px 1fr;104    gap: 24px;105    align-items: center;106    padding: 26px 0 22px 0;107    border-bottom: 1px solid #2c2521;108  }109  .avatar {110    width: 76px; height: 76px; border-radius: 50%;111    background: #5AA54A;112    display: flex; align-items: center; justify-content: center;113    color: #0f2d0f; font-weight: 700; font-size: 44px;114  }115  .chip-text .primary { font-size: 42px; }116  .chip-text .secondary { font-size: 28px; color: #BFB2A8; margin-top: 6px; }117 118  /* Compose body */119  .compose-body {120    position: absolute;121    left: 0;122    right: 0;123    top: 620px;124    bottom: 770px; /* leave space for keyboard */125    padding: 24px 36px;126    box-sizing: border-box;127    color: #BFB2A8;128    font-size: 36px;129  }130  .compose-placeholder {131    opacity: 0.35;132  }133 134  /* Keyboard */135  .keyboard {136    position: absolute;137    bottom: 0;138    left: 0;139    width: 1080px;140    height: 770px;141    background: #211b18;142    border-top: 1px solid #2f2824;143    box-sizing: border-box;144    padding: 26px 24px;145  }146  .key-row { display: flex; justify-content: space-between; margin-bottom: 22px; }147  .key {148    width: 92px; height: 110px; background: #2a2421; border: 1px solid #3a322d;149    color: #E8DFD6; border-radius: 16px;150    display: flex; align-items: center; justify-content: center;151    font-size: 44px; font-weight: 600;152  }153  .key.wide { width: 140px; }154  .space { flex: 1; height: 110px; margin: 0 16px; background: #2a2421; border: 1px solid #3a322d; border-radius: 18px; }155  .action-row { display: flex; align-items: center; margin-top: 10px; }156  .round-btn {157    width: 108px; height: 108px; border-radius: 24px;158    background: #2a2421; border: 1px solid #3a322d; margin-right: 18px;159    display: flex; align-items: center; justify-content: center; color: #E8DFD6; font-size: 36px;160  }161  .enter-btn {162    width: 120px; height: 120px; border-radius: 40px; background: #e8cbb0; color: #2a1406; font-weight: 700;163    display: flex; align-items: center; justify-content: center; margin-left: auto;164  }165 166  /* Divider at very bottom (gesture bar) */167  .gesture-bar {168    position: absolute; bottom: 18px; left: 50%; transform: translateX(-50%);169    width: 360px; height: 10px; background: #E8DFD6; opacity: 0.5; border-radius: 5px;170  }171</style>172</head>173<body>174<div id="render-target">175 176  <!-- Status Bar -->177  <div class="status-bar">178    <div class="status-left">179      <div style="font-size:48px;">9:04</div>180      <div class="stat-icon"></div>181      <div class="stat-icon"></div>182      <div class="stat-icon"></div>183      <div class="stat-icon"></div>184    </div>185    <div class="status-right">186      <div class="wifi"></div>187      <div class="battery"><div class="battery-fill"></div></div>188    </div>189  </div>190 191  <!-- Compose Header -->192  <div class="compose-bar">193    <div class="icon-btn">194      <svg viewBox="0 0 48 48">195        <path d="M30 10 L16 24 L30 38" />196      </svg>197    </div>198    <div style="display:flex; align-items:center; gap:18px;">199      <div class="icon-btn">200        <svg viewBox="0 0 48 48">201          <path d="M14 14 C18 10, 26 10, 30 14 C34 18, 34 26, 30 30" />202          <path d="M24 16 L24 36" />203        </svg>204      </div>205      <div class="icon-btn">206        <svg viewBox="0 0 48 48">207          <polygon class="filled" points="12,24 36,12 36,36" />208        </svg>209      </div>210      <div class="icon-btn">211        <svg viewBox="0 0 48 48">212          <circle class="filled" cx="24" cy="10" r="3"/>213          <circle class="filled" cx="24" cy="24" r="3"/>214          <circle class="filled" cx="24" cy="38" r="3"/>215        </svg>216      </div>217    </div>218  </div>219 220  <!-- Fields -->221  <div class="fields">222    <div class="field-row">223      <div class="label">From</div>224      <div class="value">naomirousseau5@gmail.com</div>225      <div class="chev">226        <svg viewBox="0 0 36 36">227          <path d="M8 12 L18 22 L28 12" stroke="#EDE7DF" stroke-width="4" fill="none" stroke-linecap="round" stroke-linejoin="round"/>228        </svg>229      </div>230    </div>231 232    <div class="field-row">233      <div class="label">To</div>234      <div class="value">karin.iversen@example.com</div>235      <div class="chev">236        <svg viewBox="0 0 36 36">237          <path d="M8 12 L18 22 L28 12" stroke="#EDE7DF" stroke-width="4" fill="none" stroke-linecap="round" stroke-linejoin="round"/>238        </svg>239      </div>240    </div>241 242    <div class="chip">243      <div class="avatar">k</div>244      <div class="chip-text">245        <div class="primary">karin.iversen@example.com</div>246        <div class="secondary">karin.iversen@example.com</div>247      </div>248    </div>249  </div>250 251  <!-- Compose Body -->252  <div class="compose-body">253    <div class="compose-placeholder">Compose email...</div>254  </div>255 256  <!-- Keyboard -->257  <div class="keyboard">258    <div class="key-row">259      <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><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>260    </div>261    <div class="key-row">262      <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><div class="key">h</div><div class="key">j</div><div class="key">k</div><div class="key">l</div>263    </div>264    <div class="key-row">265      <div class="key wide">⇧</div><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><div class="key wide">⌫</div>266    </div>267    <div class="action-row">268      <div class="round-btn">?123</div>269      <div class="round-btn">@</div>270      <div class="round-btn">☺</div>271      <div class="space"></div>272      <div class="round-btn">.</div>273      <div class="enter-btn">↗</div>274    </div>275    <div class="gesture-bar"></div>276  </div>277 278</div>279</body>280</html>