GD-ML/AndroidCode

1<!DOCTYPE html>2<html>3<head>4<meta charset="UTF-8">5<title>Email Compose UI - Dark</title>6<style>7  body { margin: 0; padding: 0; background: transparent; }8  #render-target {9    width: 1080px;10    height: 2400px;11    position: relative;12    overflow: hidden;13    background: #1A171D;14    color: #E7E7E7;15    font-family: "Roboto", Arial, sans-serif;16  }17 18  /* Status bar */19  .status-bar {20    position: absolute;21    top: 0;22    left: 0;23    width: 100%;24    height: 110px;25    padding: 0 40px;26    display: flex;27    align-items: center;28    justify-content: space-between;29    color: #EFEFEF;30    font-size: 42px;31  }32  .status-icons {33    display: flex;34    align-items: center;35    gap: 28px;36  }37  .status-dot, .status-rect {38    background: #cfcfcf;39    opacity: 0.9;40    border-radius: 8px;41  }42  .status-rect { width: 42px; height: 32px; }43  .status-dot { width: 14px; height: 14px; border-radius: 50%; }44  .battery {45    width: 42px; height: 24px; border: 2px solid #cfcfcf; border-radius: 6px; position: relative;46  }47  .battery::after {48    content: ""; position: absolute; right: -10px; top: 6px; width: 6px; height: 12px; background: #cfcfcf; border-radius: 2px;49  }50 51  /* Toolbar */52  .toolbar {53    position: absolute;54    top: 110px;55    left: 0;56    width: 100%;57    height: 140px;58    border-bottom: 1px solid #2A2A2F;59    display: flex;60    align-items: center;61    padding: 0 28px;62    box-sizing: border-box;63  }64  .toolbar-left, .toolbar-right {65    display: flex; align-items: center; gap: 24px;66  }67  .toolbar-left { width: 50%; }68  .toolbar-right { width: 50%; justify-content: flex-end; }69 70  .icon-btn {71    width: 76px; height: 76px; border-radius: 38px;72    display: flex; align-items: center; justify-content: center;73  }74  .icon-btn svg { width: 44px; height: 44px; }75  .send svg { fill: #CDB0F4; }76  .paperclip svg, .dots svg, .back svg { stroke: #DADADA; fill: none; stroke-width: 2.5; }77  .dots svg { fill: #DADADA; stroke: none; }78 79  /* Fields */80  .section {81    position: absolute; left: 0; width: 100%;82    box-sizing: border-box; padding: 22px 40px;83    border-bottom: 1px solid #2A2A2F;84  }85  .from { top: 250px; height: 120px; display: flex; align-items: center; gap: 24px; }86  .label { color: #BEBAC7; font-size: 38px; min-width: 120px; }87  .value { font-size: 38px; color: #F0EEF5; }88 89  .to { top: 370px; height: 140px; display: flex; align-items: center; gap: 24px; }90  .to .reply-icon { width: 48px; height: 48px; }91  .chip {92    display: inline-flex; align-items: center; gap: 18px;93    padding: 12px 24px; border: 2px solid #A6A1B3; border-radius: 28px;94    font-size: 36px; color: #EDEAF3;95  }96  .avatar {97    width: 52px; height: 52px; border-radius: 50%;98    background: #7AC05A; color: #0B1405;99    display: inline-flex; align-items: center; justify-content: center; font-weight: 700;100  }101  .chip .caret { width: 28px; height: 28px; }102  .dropdown { margin-left: auto; display: flex; align-items: center; }103 104  .subject { top: 510px; height: 120px; display: flex; align-items: center; }105  .subject .value { font-size: 44px; }106 107  .body-area {108    position: absolute; top: 630px; left: 0; width: 100%; bottom: 800px;109    box-sizing: border-box; padding: 36px 40px; color: #CFCAD7;110    overflow: hidden;111  }112  .ellipsis {113    font-size: 62px; letter-spacing: 6px; color: #A7A3B1;114    margin-top: 40px;115  }116 117  /* Keyboard */118  .keyboard {119    position: absolute; bottom: 0; left: 0; width: 100%; height: 800px;120    background: #1E1E22; border-top: 1px solid #2A2A2F; box-sizing: border-box;121    padding: 24px 24px 36px;122  }123  .kbd-top {124    height: 110px; display: flex; align-items: center; justify-content: space-between; padding: 0 12px;125  }126  .kbd-top .tool {127    color: #E8E8E8; font-size: 34px; display: flex; align-items: center; gap: 12px;128  }129  .tool-icon {130    width: 62px; height: 62px; background: #2B2B31; border-radius: 16px;131    display: inline-flex; align-items: center; justify-content: center; color: #D9D9E0;132    font-size: 28px;133  }134  .rows { margin-top: 12px; }135  .row {136    display: flex; justify-content: space-between; align-items: center;137    gap: 14px; margin-bottom: 16px;138  }139  .key {140    flex: 1; max-width: 92px; height: 110px; border-radius: 24px;141    background: #2B2B31; color: #EDEDED; font-size: 42px; font-weight: 600;142    display: flex; align-items: center; justify-content: center;143  }144  .key.wide { flex: 2; max-width: none; }145  .key.space { flex: 6; height: 110px; border-radius: 30px; background: #2B2B31; }146  .key.action {147    background: #CDB0F4; color: #1A171D; font-weight: 700;148  }149  .key.icon {150    font-size: 36px; color: #DCDCE4;151  }152  .row.bottom .key { font-size: 36px; font-weight: 500; }153  .row.bottom .key.action { font-size: 38px; }154 155  /* Gesture handle */156  .handle {157    position: absolute; bottom: 16px; left: 50%; transform: translateX(-50%);158    width: 320px; height: 10px; border-radius: 5px; background: #BFBFCC; opacity: 0.6;159  }160</style>161</head>162<body>163<div id="render-target">164 165  <!-- Status bar -->166  <div class="status-bar">167    <div>11:37</div>168    <div class="status-icons">169      <div class="status-rect"></div>170      <div class="status-rect"></div>171      <div class="status-rect"></div>172      <div class="status-dot"></div>173      <svg width="36" height="36" viewBox="0 0 24 24">174        <path d="M12 3l10 9-10 9-1.5-1.3L18 12 10.5 4.3z" fill="#cfcfcf"></path>175      </svg>176      <div class="battery"></div>177    </div>178  </div>179 180  <!-- Toolbar -->181  <div class="toolbar">182    <div class="toolbar-left">183      <div class="icon-btn back">184        <svg viewBox="0 0 24 24">185          <path d="M15 5L6 12l9 7" stroke-linecap="round" stroke-linejoin="round"></path>186        </svg>187      </div>188    </div>189    <div class="toolbar-right">190      <div class="icon-btn paperclip">191        <svg viewBox="0 0 24 24">192          <path d="M7 7h8v8c0 3-2 5-5 5s-5-2-5-5V11" stroke-linecap="round" stroke-linejoin="round"></path>193        </svg>194      </div>195      <div class="icon-btn send">196        <svg viewBox="0 0 24 24">197          <polygon points="3,4 21,12 3,20"></polygon>198        </svg>199      </div>200      <div class="icon-btn dots">201        <svg viewBox="0 0 24 24">202          <circle cx="12" cy="5" r="2.2"></circle>203          <circle cx="12" cy="12" r="2.2"></circle>204          <circle cx="12" cy="19" r="2.2"></circle>205        </svg>206      </div>207    </div>208  </div>209 210  <!-- From -->211  <div class="section from">212    <div class="label">From</div>213    <div class="value">farida.wadi01@gmail.com</div>214  </div>215 216  <!-- To -->217  <div class="section to">218    <svg class="reply-icon" viewBox="0 0 24 24">219      <path d="M10 8l-6 4 6 4v-3h6a4 4 0 004-4v-1" fill="none" stroke="#DADADA" stroke-width="2.5" stroke-linecap="round" stroke-linejoin="round"></path>220    </svg>221    <div class="chip">222      <div class="avatar">d</div>223      <div class="label">Cerebra Research</div>224      <svg class="caret" viewBox="0 0 24 24">225        <path d="M6 9l6 6 6-6" fill="none" stroke="#CFC9DA" stroke-width="2.5" stroke-linecap="round" stroke-linejoin="round"></path>226      </svg>227    </div>228    <div class="dropdown">229      <!-- small downward caret to the far right -->230      <svg width="34" height="34" viewBox="0 0 24 24">231        <path d="M6 9l6 6 6-6" fill="none" stroke="#DADADA" stroke-width="2.5" stroke-linecap="round" stroke-linejoin="round"></path>232      </svg>233    </div>234  </div>235 236  <!-- Subject -->237  <div class="section subject">238    <div class="value">Re: Hi</div>239  </div>240 241  <!-- Body area -->242  <div class="body-area">243    <div class="ellipsis">...</div>244  </div>245 246  <!-- Keyboard -->247  <div class="keyboard">248    <div class="kbd-top">249      <div class="tool"><span class="tool-icon">▦</span></div>250      <div class="tool"><span class="tool-icon">☺</span></div>251      <div class="tool"><span style="font-weight:700;color:#EDEDED;">GIF</span></div>252      <div class="tool"><span class="tool-icon">⚙</span></div>253      <div class="tool"><span class="tool-icon">G</span></div>254      <div class="tool"><span class="tool-icon">🎨</span></div>255      <div class="tool"><span class="tool-icon">🎙</span></div>256    </div>257    <div class="rows">258      <div class="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>260        <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>261      </div>262      <div class="row">263        <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>264        <div class="key">H</div><div class="key">J</div><div class="key">K</div><div class="key">L</div>265      </div>266      <div class="row">267        <div class="key icon">⇧</div><div class="key">Z</div><div class="key">X</div><div class="key">C</div><div class="key">V</div>268        <div class="key">B</div><div class="key">N</div><div class="key">M</div><div class="key icon">⌫</div>269      </div>270      <div class="row bottom">271        <div class="key action">?123</div>272        <div class="key">,</div>273        <div class="key icon">☺</div>274        <div class="key space"></div>275        <div class="key">.</div>276        <div class="key action">↵</div>277      </div>278    </div>279    <div class="handle"></div>280  </div>281 282</div>283</body>284</html>