GD-ML/AndroidCode

1<html lang="en">2<head>3<meta charset="UTF-8">4<title>Gmail Compose - Dark</title>5<style>6  body { margin: 0; padding: 0; background: transparent; font-family: Arial, Helvetica, sans-serif; }7  #render-target {8    position: relative;9    width: 1080px;10    height: 2400px;11    overflow: hidden;12    background: #121212;13    color: #EDEDED;14  }15 16  /* Status bar */17  .status-bar {18    height: 96px;19    padding: 0 28px;20    display: flex;21    align-items: center;22    justify-content: space-between;23    color: #EDEDED;24    font-size: 30px;25    letter-spacing: 1px;26  }27  .status-left, .status-right {28    display: flex; align-items: center; gap: 24px;29  }30  .dot { width: 10px; height: 10px; background: #9E9E9E; border-radius: 50%; display: inline-block; }31 32  /* App bar */33  .app-bar {34    height: 120px;35    border-bottom: 1px solid #1F1F1F;36    display: flex;37    align-items: center;38    padding: 0 20px;39    gap: 20px;40  }41  .icon-btn {42    width: 88px; height: 88px; border-radius: 44px;43    display: flex; align-items: center; justify-content: center;44    color: #EDEDED;45  }46  .app-actions {47    margin-left: auto;48    display: flex; align-items: center; gap: 18px;49  }50  svg { width: 44px; height: 44px; fill: #EDEDED; }51 52  /* Fields */53  .field {54    display: flex;55    align-items: center;56    padding: 26px 28px;57    gap: 26px;58    border-bottom: 1px solid #1F1F1F;59    font-size: 36px;60  }61  .label {62    width: 120px;63    color: #BDBDBD;64  }65  .value {66    flex: 1;67    color: #EDEDED;68  }69  .caret {70    width: 0; height: 0;71    border-left: 12px solid transparent;72    border-right: 12px solid transparent;73    border-top: 16px solid #BDBDBD;74    margin-left: 10px;75  }76 77  /* Recipient suggestion */78  .suggestion {79    display: flex;80    align-items: center;81    padding: 24px 28px;82    gap: 24px;83    border-bottom: 1px solid #1F1F1F;84  }85  .avatar {86    width: 96px; height: 96px; border-radius: 48px;87    background: #2E7D72;88    display: flex; align-items: center; justify-content: center;89    font-size: 52px; color: #EDEDED;90  }91  .sug-texts { display: flex; flex-direction: column; }92  .sug-title { font-size: 38px; color: #EDEDED; }93  .sug-sub { font-size: 30px; color: #9E9E9E; margin-top: 6px; }94 95  .composer-space {96    height: 680px; /* empty black area for the body of the email above keyboard */97  }98 99  /* Keyboard (simplified) */100  .keyboard {101    position: absolute;102    left: 0; right: 0; bottom: 0;103    height: 980px;104    background: #1A1A1A;105    border-top: 1px solid #252525;106    padding: 24px 18px 110px;107    box-sizing: border-box;108  }109  .kb-topbar {110    display: flex; align-items: center; justify-content: space-between;111    color: #CFCFCF; margin-bottom: 16px;112  }113  .kb-rows { display: grid; gap: 16px; }114  .kb-row {115    display: grid; grid-template-columns: repeat(10, 1fr); gap: 12px;116  }117  .kb-row.row2 { grid-template-columns: repeat(9, 1fr); padding: 0 40px; }118  .kb-row.row3 { grid-template-columns: repeat(9, 1fr); }119  .kb-row.row4 {120    grid-template-columns: 1.3fr repeat(7, 1fr) 1.3fr;121  }122  .key {123    background: #2B2B2B;124    border-radius: 18px;125    height: 118px;126    display: flex; align-items: center; justify-content: center;127    color: #EDEDED; font-size: 40px;128    box-shadow: inset 0 0 0 1px #3A3A3A;129  }130  .key.func { background: #3A3A3A; color: #EDEDED; }131  .spacebar { grid-column: span 5; }132  .home-indicator {133    position: absolute; bottom: 20px; left: 50%; transform: translateX(-50%);134    width: 520px; height: 10px; border-radius: 10px; background: #E0E0E0; opacity: 0.6;135  }136 137  /* Cursor in "To" field (visual accent) */138  .cursor {139    width: 3px; height: 48px; background: #4CAF50; display: inline-block; vertical-align: middle; margin-left: 4px;140  }141</style>142</head>143<body>144<div id="render-target">145 146  <!-- Status bar -->147  <div class="status-bar">148    <div class="status-left">149      <span>11:56</span>150      <span class="dot"></span>151      <span class="dot"></span>152      <span class="dot"></span>153    </div>154    <div class="status-right">155      <span>⏺</span>156      <span>📶</span>157      <span>📡</span>158      <span>🔋100%</span>159    </div>160  </div>161 162  <!-- App bar -->163  <div class="app-bar">164    <div class="icon-btn" title="Back">165      <svg viewBox="0 0 24 24"><path d="M15.5 4l-8 8 8 8 1.5-1.5L10 12l7-6.5z"/></svg>166    </div>167 168    <div style="flex:1"></div>169 170    <div class="app-actions">171      <!-- tiny message icon -->172      <div class="icon-btn" title="Insert">173        <svg viewBox="0 0 24 24"><path d="M3 4h18v12H8l-5 4V4zm3 4h12v2H6V8zm0 4h9v2H6v-2z"/></svg>174      </div>175      <!-- send -->176      <div class="icon-btn" title="Send">177        <svg viewBox="0 0 24 24"><path d="M2 21l21-9L2 3v7l15 2-15 2v7z"/></svg>178      </div>179      <!-- menu -->180      <div class="icon-btn" title="More">181        <svg viewBox="0 0 24 24"><circle cx="12" cy="5" r="2.2"/><circle cx="12" cy="12" r="2.2"/><circle cx="12" cy="19" r="2.2"/></svg>182      </div>183    </div>184  </div>185 186  <!-- From field -->187  <div class="field">188    <div class="label">From</div>189    <div class="value">dbwscratch.test.id10@gmail.com</div>190    <div class="caret"></div>191  </div>192 193  <!-- To field -->194  <div class="field">195    <div class="label">To</div>196    <div class="value">naomi.rousseau@example.com<span class="cursor"></span></div>197    <div class="caret"></div>198  </div>199 200  <!-- Suggestion result -->201  <div class="suggestion">202    <div class="avatar">n</div>203    <div class="sug-texts">204      <div class="sug-title">naomi.rousseau@example.com</div>205      <div class="sug-sub">naomi.rousseau@example.com</div>206    </div>207  </div>208 209  <!-- Blank composing space -->210  <div class="composer-space"></div>211 212  <!-- Keyboard -->213  <div class="keyboard">214    <div class="kb-topbar">215      <div>GIF  •  Translate  •  Theme</div>216      <div>🎤</div>217    </div>218 219    <div class="kb-rows">220      <div class="kb-row">221        <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>222      </div>223      <div class="kb-row row2">224        <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>225      </div>226      <div class="kb-row row3">227        <div class="key func">⇧</div>228        <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>229        <div class="key func">⌫</div>230      </div>231      <div class="kb-row row4">232        <div class="key func">?123</div>233        <div class="key func">@</div>234        <div class="key func">🙂</div>235        <div class="key spacebar"></div>236        <div class="key func">.</div>237        <div class="key func">⏎</div>238      </div>239    </div>240  </div>241 242  <div class="home-indicator"></div>243</div>244</body>245</html>