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 { margin: 0; padding: 0; background: transparent; }9  #render-target {10    width: 1080px;11    height: 2400px;12    position: relative;13    overflow: hidden;14    background: #121212;15    font-family: system-ui, -apple-system, Segoe UI, Roboto, Helvetica, Arial, sans-serif;16    color: #EDEDED;17  }18 19  /* Status bar */20  .status-bar {21    height: 95px;22    padding: 16px 28px;23    box-sizing: border-box;24    display: flex;25    align-items: center;26    justify-content: space-between;27    color: #E0E0E0;28    font-size: 34px;29    letter-spacing: 0.5px;30  }31  .status-icons {32    display: flex;33    align-items: center;34    gap: 18px;35  }36  .dot { width: 8px; height: 8px; background:#E0E0E0; border-radius:50%; opacity:0.9; }37  .icon-battery, .icon-signal, .icon-wifi {38    width: 34px; height: 20px; opacity: 0.9;39    display: inline-block;40  }41 42  /* App bar */43  .appbar {44    height: 120px;45    display: flex;46    align-items: center;47    padding: 0 20px;48    box-sizing: border-box;49    border-bottom: 1px solid #1F1F1F;50    gap: 14px;51  }52  .appbar .title { font-size: 40px; font-weight: 600; color:#EDEDED; display:none; }53  .icon-btn {54    width: 72px; height: 72px;55    display: flex; align-items: center; justify-content: center;56    border-radius: 36px;57    color: #CFCFCF;58  }59  .icon-btn svg { width: 42px; height: 42px; fill: #CFCFCF; }60 61  /* Rows */62  .row {63    padding: 18px 28px;64    box-sizing: border-box;65    border-bottom: 1px solid #1F1F1F;66  }67  .from-row, .to-row {68    display: flex; align-items: center; gap: 22px;69    height: 110px;70  }71  .from-label {72    color: #B0BEC5; font-size: 32px; width: 120px;73  }74  .email-text { font-size: 36px; color: #EDEDED; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }75 76  .to-row .input-wrap {77    flex: 1; display: flex; align-items: center; gap: 16px;78    border-bottom: 2px solid #2A2A2A; padding-bottom: 6px;79  }80  .caret {81    width: 2px; height: 42px; background: #4FC3F7; margin-left: 6px;82    animation: blink 1.2s steps(1) infinite;83  }84  @keyframes blink { 50% { opacity: 0; } }85 86  /* Contact suggestion */87  .contact-item {88    display: flex; align-items: center; gap: 22px;89    padding: 22px 28px;90    height: 130px;91  }92  .avatar {93    width: 84px; height: 84px; border-radius: 50%;94    background: #175E4B; display: flex; align-items: center; justify-content: center;95    color: #CFE9DD; font-weight: 700; font-size: 44px;96  }97  .contact-text .name { font-size: 40px; color:#EDEDED; }98  .contact-text .sub { font-size: 30px; color:#9E9E9E; margin-top: 6px; }99 100  /* Spacer content area */101  .content-spacer {102    height: calc(2400px - (95px + 120px + 110px + 110px + 130px + 880px));103  }104 105  /* Keyboard mock */106  .keyboard {107    position: absolute;108    left: 0; right: 0; bottom: 60px;109    height: 880px;110    background: #1A1A1D;111    border-top: 1px solid #26262A;112    padding: 18px 18px 24px;113    box-sizing: border-box;114  }115  .kbd-toolbar {116    display: flex; align-items: center; gap: 24px;117    color: #C7C7C7; font-size: 26px; margin-bottom: 12px;118  }119  .toolbar-btn {120    width: 72px; height: 56px; background: #232327; border: 1px solid #2E2E33;121    border-radius: 14px; display: flex; align-items: center; justify-content: center;122  }123  .toolbar-btn.small { width: 92px; }124  .toolbar-btn label { font-size: 26px; color:#C7C7C7; }125 126  .row-keys { display: grid; gap: 12px; margin: 12px 0; }127  .row-keys.r1 { grid-template-columns: repeat(10, 1fr); }128  .row-keys.r2 { grid-template-columns: repeat(9, 1fr); padding: 0 32px; }129  .row-keys.r3 { grid-template-columns: 1.2fr repeat(7, 1fr) 1.2fr; }130  .row-keys.r4 { grid-template-columns: 1.4fr 1fr 1fr 1fr 3.6fr 1fr 1fr 1.6fr; align-items: center; }131 132  .key {133    height: 110px; background: #2A2A2E; border: 1px solid #3A3A3D; border-radius: 18px;134    color: #E6E6E6; font-size: 40px; display: flex; align-items: center; justify-content: center;135  }136  .key.light { background: #C6D7EA; color: #0F1113; }137  .key.label { font-size: 32px; color:#C7C7C7; }138 139  /* Gesture bar */140  .gesture {141    position: absolute; left: 50%; transform: translateX(-50%);142    bottom: 18px; width: 300px; height: 10px; background: #EAEAEA; border-radius: 10px; opacity: 0.9;143  }144 145  /* Simple utility icons */146  .icon {147    width: 44px; height: 44px; fill: #CFCFCF;148  }149</style>150</head>151<body>152<div id="render-target">153 154  <!-- Status Bar -->155  <div class="status-bar">156    <div class="left">9:08</div>157    <div class="status-icons">158      <div class="dot"></div><div class="dot"></div><div class="dot"></div><div class="dot"></div><div class="dot"></div>159      <svg class="icon-signal" viewBox="0 0 24 24"><path fill="#E0E0E0" d="M2 20h2v-6H2v6zm4 0h2v-9H6v9zm4 0h2v-12h-2v12zm4 0h2V5h-2v15zm4 0h2V3h-2v17z"/></svg>160      <svg class="icon-wifi" viewBox="0 0 24 24"><path fill="#E0E0E0" d="M12 20.5a1.5 1.5 0 1 0 0-3 1.5 1.5 0 0 0 0 3zm6.3-5.8a10 10 0 0 0-12.6 0l1.4 1.4a8 8 0 0 1 9.8 0l1.4-1.4zm3.6-3.6a16 16 0 0 0-19.8 0l1.4 1.4a14 14 0 0 1 17 0l1.4-1.4z"/></svg>161      <svg class="icon-battery" viewBox="0 0 24 24"><path fill="#E0E0E0" d="M16 7h2a2 2 0 0 1 2 2v6a2 2 0 0 1-2 2h-2v1h-2v-1H4a2 2 0 0 1-2-2V9a2 2 0 0 1 2-2h12zm0 2H4v6h12V9z"/></svg>162    </div>163  </div>164 165  <!-- App Bar -->166  <div class="appbar">167    <div class="icon-btn" title="Back">168      <svg viewBox="0 0 24 24"><path d="M15.5 3.5 7 12l8.5 8.5-1.4 1.4L4.2 12l9.9-9.9 1.4 1.4z"/></svg>169    </div>170    <div style="flex:1"></div>171    <div class="icon-btn" title="Attach">172      <svg viewBox="0 0 24 24"><path d="M7 12.5V7a5 5 0 1 1 10 0v8.5a3.5 3.5 0 1 1-7 0V8h2v7.5a1.5 1.5 0 1 0 3 0V7a3 3 0 1 0-6 0v5.5H7z"/></svg>173    </div>174    <div class="icon-btn" title="Send">175      <svg viewBox="0 0 24 24"><path d="M2 21 23 12 2 3v7l15 2-15 2v7z"/></svg>176    </div>177    <div class="icon-btn" title="More">178      <svg viewBox="0 0 24 24"><path d="M12 6a2 2 0 1 0 0-4 2 2 0 0 0 0 4zm0 8a2 2 0 1 0 0-4 2 2 0 0 0 0 4zm0 8a2 2 0 1 0 0-4 2 2 0 0 0 0 4z"/></svg>179    </div>180  </div>181 182  <!-- From Row -->183  <div class="row from-row">184    <div class="from-label">From</div>185    <div class="email-text">dbwscratch.test.id2@gmail.com</div>186  </div>187 188  <!-- To Row -->189  <div class="row to-row">190    <svg class="icon" viewBox="0 0 24 24"><path d="M10 8V5l-5 5 5 5v-3h6v-4h-6z"/></svg>191    <div class="input-wrap">192      <div class="email-text" style="flex:1;">dbwscratch.test.id4@gmail.com</div>193      <svg class="icon" viewBox="0 0 24 24"><path d="M7 9l5 5 5-5H7z"/></svg>194      <div class="caret"></div>195    </div>196  </div>197 198  <!-- Contact Suggestion -->199  <div class="contact-item">200    <div class="avatar">C</div>201    <div class="contact-text">202      <div class="name">Cerebra Research</div>203      <div class="sub">dbwscratch.test.id4@gmail.com</div>204    </div>205  </div>206 207  <!-- Spacer (message body area) -->208  <div class="content-spacer"></div>209 210  <!-- Keyboard -->211  <div class="keyboard">212    <div class="kbd-toolbar">213      <div class="toolbar-btn" title="Keyboard options">214        <svg width="28" height="28" viewBox="0 0 24 24" fill="#C7C7C7"><path d="M4 4h16v12H4V4zm2 2v2h2V6H6zm3 0v2h2V6H9zm3 0v2h2V6h-2zm3 0v2h2V6h-2zM6 9v2h2V9H6zm3 0v2h2V9H9zm3 0v2h2V9h-2zm3 0v2h2V9h-2zM5 17h14v2H5v-2z"/></svg>215      </div>216      <div class="toolbar-btn small"><label>GIF</label></div>217      <div class="toolbar-btn" title="Settings">218        <svg width="26" height="26" viewBox="0 0 24 24" fill="#C7C7C7"><path d="M12 8.6a3.4 3.4 0 1 0 0 6.8 3.4 3.4 0 0 0 0-6.8zM3 13h2.1c.2.7.5 1.3.9 1.9L5 16.9l1.9 1.9 2-1c.6.4 1.2.7 1.9.9V22h2v-2.1c.7-.2 1.3-.5 1.9-.9l2 1 1.9-1.9-1-2c.4-.6.7-1.2.9-1.9H21v-2h-2.1a7.6 7.6 0 0 0-.9-1.9l1-2-1.9-1.9-2 1a7.6 7.6 0 0 0-1.9-.9V2h-2v2.1c-.7.2-1.3.5-1.9.9l-2-1L5 5.9l1 2c-.4.6-.7 1.2-.9 1.9H3v2z"/></svg>219      </div>220      <div class="toolbar-btn" title="Translate">221        <svg width="28" height="28" viewBox="0 0 24 24" fill="#C7C7C7"><path d="M3 4h9v6H3V4zm0 8h9v8H3v-8zm11-8h7v16h-7V4z"/></svg>222      </div>223      <div class="toolbar-btn" title="Theme">224        <svg width="26" height="26" viewBox="0 0 24 24" fill="#C7C7C7"><path d="M12 3a9 9 0 1 0 9 9h-9V3z"/></svg>225      </div>226      <div class="toolbar-btn" title="Mic">227        <svg width="24" height="24" viewBox="0 0 24 24" fill="#C7C7C7"><path d="M12 14a3 3 0 0 0 3-3V6a3 3 0 1 0-6 0v5a3 3 0 0 0 3 3zm-5-3h2a5 5 0 0 0 10 0h2a7 7 0 0 1-6 6.9V21h-2v-3.1A7 7 0 0 1 7 11z"/></svg>228      </div>229    </div>230 231    <div class="row-keys r1">232      <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>233      <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>234    </div>235    <div class="row-keys r2">236      <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>237      <div class="key">h</div><div class="key">j</div><div class="key">k</div><div class="key">l</div>238    </div>239    <div class="row-keys r3">240      <div class="key label">⇧</div>241      <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>242      <div class="key label">⌫</div>243    </div>244    <div class="row-keys r4">245      <div class="key label">?123</div>246      <div class="key label">@</div>247      <div class="key label">☺</div>248      <div class="key label">,</div>249      <div class="key label">space</div>250      <div class="key label">.</div>251      <div class="key label">•</div>252      <div class="key light">↵</div>253    </div>254  </div>255 256  <!-- Gesture bar -->257  <div class="gesture"></div>258</div>259</body>260</html>