GD-ML/AndroidCode

1<!DOCTYPE html>2<html lang="en">3<head>4<meta charset="UTF-8">5<title>Compose Email - Dark UI Mock</title>6<meta name="viewport" content="width=1080, initial-scale=1.0">7<style>8  body { margin: 0; padding: 0; background: transparent; font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Arial, sans-serif; }9  #render-target {10    position: relative;11    width: 1080px;12    height: 2400px;13    overflow: hidden;14    background: #121212;15    color: #EDEDED;16  }17 18  /* Status bar */19  .status-bar {20    height: 88px;21    padding: 0 28px;22    display: flex;23    align-items: center;24    justify-content: space-between;25    color: #EDEDED;26    font-size: 40px;27    letter-spacing: 0.5px;28  }29  .status-icons {30    display: flex;31    align-items: center;32    gap: 22px;33  }34  .ico-battery {35    width: 46px; height: 22px; border: 2px solid #CFCFCF; border-radius: 4px; position: relative;36  }37  .ico-battery::after {38    content: ''; position: absolute; right: -8px; top: 6px; width: 6px; height: 10px; background: #CFCFCF; border-radius: 2px;39  }40  .ico-signal, .ico-wifi {41    width: 28px; height: 22px; border-bottom: 2px solid #CFCFCF; border-left: 2px solid #CFCFCF; transform: skewX(-20deg);42  }43 44  /* Top toolbar */45  .toolbar {46    height: 112px;47    display: flex;48    align-items: center;49    padding: 0 20px 0 12px;50  }51  .toolbar .left {52    display: flex; align-items: center; gap: 10px;53  }54  .icon-btn { width: 96px; height: 96px; display: flex; align-items: center; justify-content: center; background: transparent; border: none; }55  .icon { fill: #E0E0E0; }56  .toolbar .actions {57    margin-left: auto;58    display: flex; align-items: center; gap: 6px;59  }60  .spacer { flex: 1; }61 62  /* Fields */63  .field {64    position: relative;65    padding: 18px 28px 18px 28px;66  }67  .field .label {68    color: #9AA0A6;69    font-size: 28px;70    margin-bottom: 8px;71  }72  .field .value {73    font-size: 36px;74    color: #EDEDED;75    white-space: nowrap;76    overflow: hidden;77    text-overflow: ellipsis;78  }79  .field .value.editing {80    color: #B2E0FF;81  }82  .field .drop {83    position: absolute; right: 20px; top: 50%; transform: translateY(-10%);84  }85  .divider { height: 1px; background: #2A2A2A; margin: 0 0; }86 87  /* Suggestion row */88  .suggestion {89    display: flex; align-items: center; gap: 24px;90    padding: 22px 28px;91  }92  .avatar {93    width: 96px; height: 96px; border-radius: 48px;94    background: #1AA2A6; display: flex; align-items: center; justify-content: center;95    color: #DDF3F4; font-weight: 700; border: 2px solid rgba(255,255,255,0.08);96  }97  .sugg-text .title { font-size: 36px; color: #EDEDED; }98  .sugg-text .subtitle { font-size: 28px; color: #9AA0A6; margin-top: 8px; }99 100  /* Main body area */101  .body-area {102    padding: 24px 28px;103    color: #9AA0A6;104    font-size: 30px;105    line-height: 1.4;106    height: 980px; /* reserves space above keyboard */107  }108 109  /* Keyboard mock */110  .keyboard {111    position: absolute;112    left: 0; right: 0;113    bottom: 70px;114    height: 760px;115    background: #1B1B1B;116    border-top: 1px solid #2A2A2A;117    display: flex; flex-direction: column;118  }119  .quickbar {120    height: 88px; padding: 0 22px;121    display: flex; align-items: center; gap: 28px;122    border-bottom: 1px solid #2A2A2A;123    color: #CFCFCF;124  }125  .quick-ico {126    width: 68px; height: 68px; border-radius: 16px; background: #262626;127    display: flex; align-items: center; justify-content: center;128  }129  .key-rows { flex: 1; padding: 22px; display: flex; flex-direction: column; gap: 18px; }130  .row { display: grid; grid-template-columns: repeat(10, 1fr); gap: 16px; }131  .row.short { grid-template-columns: 1.2fr repeat(7, 1fr) 1.2fr; }132  .row.bottom { grid-template-columns: 1.6fr 1fr 4fr 1fr 1.6fr; }133 134  .key {135    height: 112px; border-radius: 18px;136    background: #2A2A2A; color: #EDEDED;137    display: flex; align-items: center; justify-content: center;138    font-size: 40px;139  }140  .key.circle {141    border-radius: 56px; background: #9DBBFF; color: #0B274B; font-weight: 700;142  }143  .key.large { grid-column: span 2; }144  .key.space { text-transform: lowercase; background: #2A2A2A; }145  .key.backspace {146    position: relative;147  }148  .key.backspace::before {149    content: '';150    width: 26px; height: 26px; border-top: 3px solid #EDEDED; border-right: 3px solid #EDEDED;151    transform: rotate(135deg);152  }153 154  /* Bottom nav pill */155  .nav-pill {156    position: absolute; left: 50%; transform: translateX(-50%);157    bottom: 16px; width: 220px; height: 10px; border-radius: 10px; background: #7D7D7D;158    opacity: 0.9;159  }160</style>161</head>162<body>163<div id="render-target">164 165  <!-- Status Bar -->166  <div class="status-bar">167    <div class="time">6:49</div>168    <div class="status-icons">169      <div class="ico-signal"></div>170      <div class="ico-wifi"></div>171      <div class="ico-battery"></div>172    </div>173  </div>174 175  <!-- Toolbar -->176  <div class="toolbar">177    <div class="left">178      <button class="icon-btn" aria-label="Back">179        <svg class="icon" width="48" height="48" viewBox="0 0 24 24">180          <path d="M15.5 3.5L7 12l8.5 8.5-1.4 1.4L4.2 12l9.9-9.9 1.4 1.4z"/>181        </svg>182      </button>183    </div>184    <div class="spacer"></div>185    <div class="actions">186      <button class="icon-btn" aria-label="Attach">187        <svg class="icon" width="44" height="44" viewBox="0 0 24 24">188          <path d="M7 12.5V6.8C7 4.7 8.7 3 10.8 3s3.8 1.7 3.8 3.8v8.4c0 2.4-1.9 4.3-4.3 4.3S6 17.6 6 15.2V9.5h1.5v5.7c0 1.6 1.2 2.8 2.8 2.8s2.8-1.2 2.8-2.8V6.8c0-1.3-1-2.3-2.3-2.3S8.5 5.5 8.5 6.8v5.7H7z"/>189        </svg>190      </button>191      <button class="icon-btn" aria-label="Send">192        <svg class="icon" width="44" height="44" viewBox="0 0 24 24">193          <path d="M2 21l19-9L2 3v7l13 2-13 2v7z"/>194        </svg>195      </button>196      <button class="icon-btn" aria-label="More">197        <svg class="icon" width="44" height="44" viewBox="0 0 24 24">198          <circle cx="12" cy="5" r="2.2"></circle>199          <circle cx="12" cy="12" r="2.2"></circle>200          <circle cx="12" cy="19" r="2.2"></circle>201        </svg>202      </button>203    </div>204  </div>205 206  <!-- From field -->207  <div class="field">208    <div class="label">From</div>209    <div class="value">julesdupont205@gmail.com</div>210    <div class="drop">211      <svg class="icon" width="34" height="34" viewBox="0 0 24 24">212        <path d="M7 10l5 5 5-5H7z"></path>213      </svg>214    </div>215  </div>216  <div class="divider"></div>217 218  <!-- To field -->219  <div class="field">220    <div class="label">To</div>221    <div class="value editing">dbwscratch.test.id4@gmail.com</div>222    <div class="drop">223      <svg class="icon" width="34" height="34" viewBox="0 0 24 24">224        <path d="M7 10l5 5 5-5H7z"></path>225      </svg>226    </div>227  </div>228 229  <!-- Suggestion row -->230  <div class="suggestion">231    <div class="avatar">•</div>232    <div class="sugg-text">233      <div class="title">dbwscratch.test.id4@gmail.com</div>234      <div class="subtitle">dbwscratch.test.id4@gmail.com</div>235    </div>236  </div>237 238  <!-- Body area -->239  <div class="body-area">240    <!-- Empty composition content area -->241  </div>242 243  <!-- Keyboard -->244  <div class="keyboard">245    <div class="quickbar">246      <div class="quick-ico">▦</div>247      <div class="quick-ico">☺</div>248      <div class="quick-ico">GIF</div>249      <div class="quick-ico">250        <svg width="28" height="28" viewBox="0 0 24 24" class="icon">251          <path d="M12 8a4 4 0 100 8 4 4 0 000-8zm0-6a2 2 0 012 2v1a7 7 0 11-4 0V4a2 2 0 012-2z"/>252        </svg>253      </div>254      <div class="quick-ico">翻</div>255      <div class="quick-ico">🎨</div>256      <div class="quick-ico">🎤</div>257    </div>258 259    <div class="key-rows">260      <div class="row">261        <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>262        <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>263      </div>264      <div class="row">265        <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>266        <div class="key">h</div><div class="key">j</div><div class="key">k</div><div class="key">l</div><div class="key">;</div>267      </div>268      <div class="row short">269        <div class="key">⇧</div>270        <div class="key">z</div><div class="key">x</div><div class="key">c</div><div class="key">v</div>271        <div class="key">b</div><div class="key">n</div><div class="key">m</div>272        <div class="key backspace"></div>273      </div>274      <div class="row bottom">275        <div class="key circle">?123</div>276        <div class="key">@</div>277        <div class="key space">space</div>278        <div class="key">.</div>279        <div class="key circle">↵</div>280      </div>281    </div>282  </div>283 284  <div class="nav-pill"></div>285</div>286</body>287</html>