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.0">6<title>Compose Email - Dark</title>7<style>8  body {9    margin: 0;10    padding: 0;11    background: transparent;12    font-family: Roboto, Arial, sans-serif;13  }14  #render-target {15    width: 1080px;16    height: 2400px;17    position: relative;18    overflow: hidden;19    background: #0F1414;20    color: #EDEDED;21  }22 23  /* Status bar */24  .status-bar {25    height: 100px;26    padding: 0 36px;27    display: flex;28    align-items: center;29    justify-content: space-between;30    color: #E6E6E6;31    font-size: 42px;32    letter-spacing: 0.2px;33  }34  .status-left { display: flex; align-items: center; gap: 16px; }35  .status-center { display: flex; align-items: center; gap: 16px; color: #C8C8C8; font-size: 36px; }36  .status-right { display: flex; align-items: center; gap: 24px; }37  .battery {38    width: 48px; height: 24px; border: 2px solid #C8C8C8; border-radius: 5px; position: relative;39  }40  .battery::after {41    content: ""; position: absolute; right: -8px; top: 6px; width: 6px; height: 12px; background: #C8C8C8; border-radius: 2px;42  }43  .battery .level {44    position: absolute; left: 2px; top: 2px; height: 18px; width: 30px; background: #C8C8C8; border-radius: 3px;45  }46 47  /* Top app bar */48  .app-bar {49    height: 120px;50    display: flex;51    align-items: center;52    padding: 0 24px;53  }54  .app-bar .left {55    width: 120px; display: flex; align-items: center; justify-content: center;56  }57  .app-bar .right {58    margin-left: auto;59    display: flex; align-items: center; gap: 36px;60  }61  .icon-btn svg { fill: none; stroke: #EDEDED; stroke-width: 2.4; }62  .icon-btn .filled { fill: #EDEDED; stroke: none; }63 64  /* Fields */65  .field {66    padding: 24px 24px;67    border-top: 1px solid #1C2222;68    border-bottom: 1px solid #1C2222;69  }70  .row {71    display: flex; align-items: center;72  }73  .label {74    width: 150px;75    color: #B7B7B7;76    font-size: 34px;77  }78  .value {79    flex: 1;80    font-size: 40px;81    color: #F3F3F3;82  }83  .dropdown {84    width: 72px; height: 72px; display: flex; align-items: center; justify-content: center;85  }86  .dropdown svg { fill: #B7B7B7; }87 88  .recipient-suggestion {89    padding: 14px 24px 0 24px;90  }91  .suggestion-item {92    display: flex; align-items: center; gap: 24px;93    padding: 18px 0;94  }95  .avatar {96    width: 64px; height: 64px; border-radius: 50%;97    background: #D64B3F;98    display: flex; align-items: center; justify-content: center;99    color: white; font-weight: bold; font-size: 36px;100  }101  .suggestion-text {102    display: flex; flex-direction: column;103    font-size: 38px;104  }105  .suggestion-text .title { color: #EDEDED; }106  .suggestion-text .subtitle { color: #A7A7A7; font-size: 34px; }107 108  /* Empty compose area */109  .compose-body {110    height: 980px;111    padding: 24px;112    color: #EDEDED;113    font-size: 40px;114  }115 116  /* Keyboard */117  .keyboard {118    position: absolute; left: 0; bottom: 72px;119    width: 100%; height: 830px;120    background: #171D1D;121    border-top: 1px solid #202626;122    display: flex; flex-direction: column;123  }124  .kb-toolbar {125    height: 90px; display: flex; align-items: center; gap: 34px;126    padding: 0 24px; color: #CFCFCF; font-size: 34px;127  }128  .kb-keyrows { flex: 1; display: flex; flex-direction: column; justify-content: center; gap: 22px; padding: 0 24px; }129  .kb-row { display: flex; gap: 22px; justify-content: center; }130  .key {131    height: 120px; min-width: 90px;132    background: #222A2A; border-radius: 18px;133    display: flex; align-items: center; justify-content: center;134    color: #EDEDED; font-size: 44px; box-shadow: inset 0 0 0 1px #2C3434;135  }136  .key.wide { min-width: 160px; }137  .key.extra-wide { min-width: 280px; }138  .key.special { background: #8EC1BC; color: #0F1414; font-weight: 600; }139  .kb-bottom { display: flex; gap: 22px; justify-content: center; padding: 22px 24px; }140 141  /* Gesture bar */142  .gesture {143    position: absolute; bottom: 20px; left: 50%;144    transform: translateX(-50%);145    width: 360px; height: 10px; background: #F1F1F1; border-radius: 8px; opacity: 0.9;146  }147</style>148</head>149<body>150<div id="render-target">151 152  <!-- Status bar -->153  <div class="status-bar">154    <div class="status-left">6:20</div>155    <div class="status-center">• • • • • • •</div>156    <div class="status-right">157      <svg width="40" height="40" viewBox="0 0 24 24"><path d="M2 18l8-8 4 4 6-6" stroke="#C8C8C8" stroke-width="2" fill="none"/></svg>158      <div class="battery"><div class="level"></div></div>159    </div>160  </div>161 162  <!-- App bar -->163  <div class="app-bar">164    <div class="left icon-btn">165      <svg width="56" height="56" viewBox="0 0 24 24"><path d="M15 6l-6 6 6 6" stroke="#EDEDED" stroke-width="2.4" fill="none" stroke-linecap="round" stroke-linejoin="round"/></svg>166    </div>167    <div class="right">168      <div class="icon-btn">169        <!-- paperclip -->170        <svg width="56" height="56" viewBox="0 0 24 24">171          <path d="M7 13l6.5-6.5a3 3 0 114.2 4.2L9.2 19.2a5 5 0 01-7.1-7.1L11 3" stroke="#EDEDED" stroke-width="2.2" fill="none" stroke-linecap="round"/>172        </svg>173      </div>174      <div class="icon-btn">175        <!-- send -->176        <svg width="56" height="56" viewBox="0 0 24 24">177          <path class="filled" d="M3 20l18-8L3 4l4 6 8 2-8 2-4 6z"/>178        </svg>179      </div>180      <div class="icon-btn">181        <!-- more vertical -->182        <svg width="56" height="56" viewBox="0 0 24 24">183          <circle cx="12" cy="5" r="2" class="filled"></circle>184          <circle cx="12" cy="12" r="2" class="filled"></circle>185          <circle cx="12" cy="19" r="2" class="filled"></circle>186        </svg>187      </div>188    </div>189  </div>190 191  <!-- From field -->192  <div class="field">193    <div class="row">194      <div class="label">From</div>195      <div class="value">maria.rossi199309@gmail.com</div>196      <div class="dropdown">197        <svg width="40" height="40" viewBox="0 0 24 24"><path d="M6 9l6 6 6-6" fill="#B7B7B7"/></svg>198      </div>199    </div>200  </div>201 202  <!-- To field -->203  <div class="field" style="border-top: none;">204    <div class="row">205      <div class="label">To</div>206      <div class="value">ffionh54@gmail.com</div>207      <div class="dropdown">208        <svg width="40" height="40" viewBox="0 0 24 24"><path d="M6 9l6 6 6-6" fill="#B7B7B7"/></svg>209      </div>210    </div>211  </div>212 213  <!-- Recipient suggestion -->214  <div class="recipient-suggestion">215    <div class="suggestion-item">216      <div class="avatar">•</div>217      <div class="suggestion-text">218        <span class="title">Add recipient</span>219        <span class="subtitle">ffionh54@gmail.com</span>220      </div>221    </div>222  </div>223 224  <!-- Compose body (empty area) -->225  <div class="compose-body">226    <!-- Empty space for message body -->227  </div>228 229  <!-- Keyboard -->230  <div class="keyboard">231    <div class="kb-toolbar">232      GIF233      <span style="margin-left: 10px;">Translate</span>234      <span style="margin-left: 10px;">Settings</span>235      <span style="margin-left: 10px;">Theme</span>236      <span style="margin-left: auto; color:#9AD1CA;">Mic</span>237    </div>238    <div class="kb-keyrows">239      <div class="kb-row">240        <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>241      </div>242      <div class="kb-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><div class="key">h</div><div class="key">j</div><div class="key">k</div><div class="key">l</div>244      </div>245      <div class="kb-row">246        <div class="key wide">⇧</div>247        <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>248        <div class="key wide">⌫</div>249      </div>250      <div class="kb-bottom">251        <div class="key special">?123</div>252        <div class="key">@</div>253        <div class="key">☺</div>254        <div class="key extra-wide"></div>255        <div class="key">.</div>256        <div class="key special">→</div>257      </div>258    </div>259  </div>260 261  <!-- Gesture bar -->262  <div class="gesture"></div>263</div>264</body>265</html>