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>Email Compose UI - Dark</title>7<style>8  body { margin: 0; padding: 0; background: transparent; font-family: Arial, Helvetica, sans-serif; }9  #render-target {10    width: 1080px; height: 2400px; position: relative; overflow: hidden;11    background: #0e1113; color: #eef1f3;12  }13 14  /* Status bar */15  .status-bar {16    height: 110px; padding: 0 36px;17    display: flex; align-items: center; justify-content: space-between;18    color: #e7e7e7; font-size: 40px; letter-spacing: 0.5px;19  }20  .sb-right { display: flex; align-items: center; gap: 26px; }21  .sb-icon svg { width: 44px; height: 44px; fill: none; stroke: #e7e7e7; stroke-width: 3; }22 23  /* Top toolbar */24  .toolbar {25    height: 140px; border-bottom: 1px solid #22282c;26    display: flex; align-items: center; padding: 0 28px;27  }28  .tool-left { display: flex; align-items: center; gap: 18px; }29  .tool-right { margin-left: auto; display: flex; align-items: center; gap: 36px; }30  .icon-btn { width: 72px; height: 72px; display: grid; place-items: center; border-radius: 50%; }31  .icon-btn svg { width: 48px; height: 48px; stroke: #e7e7e7; fill: none; stroke-width: 3; }32  .icon-dots svg { stroke: none; fill: #e7e7e7; }33 34  /* Fields */35  .content { padding: 18px 36px 0 36px; }36  .field {37    padding: 22px 0;38    border-bottom: 1px solid #22282c;39  }40  .field.inline { display: flex; align-items: center; gap: 18px; }41  .label { color: #8b939a; font-size: 34px; width: 140px; }42  .value, .input { font-size: 38px; color: #e9edf0; }43  .input.placeholder { color: #7f878d; }44  .chevron {45    margin-left: auto; width: 40px; height: 40px;46  }47  .compose-area {48    padding: 26px 0 40px 0; color: #7f878d; font-size: 40px;49  }50 51  /* Attachment chip */52  .attachment {53    margin-top: 26px;54    width: 900px; background: #2b3136; border-radius: 18px;55    display: flex; align-items: center; padding: 24px;56    color: #e9edf0;57  }58  .attach-icon {59    width: 72px; height: 72px; border-radius: 12px;60    background: #3a4248; display: grid; place-items: center; margin-right: 24px;61  }62  .attach-text { flex: 1; }63  .file-name { font-size: 36px; }64  .file-size { font-size: 28px; color: #9aa2a8; margin-top: 6px; }65  .close-btn { width: 60px; height: 60px; display: grid; place-items: center; }66  .close-btn svg { width: 36px; height: 36px; stroke: #e9edf0; stroke-width: 4; fill: none; }67 68  /* Keyboard mock */69  .keyboard {70    position: absolute; left: 0; right: 0; bottom: 70px;71    height: 960px; background: #161a1d; border-top: 1px solid #23282c;72    padding: 20px 26px 24px 26px;73  }74  .kb-top {75    display: flex; align-items: center; gap: 26px; padding-bottom: 14px;76  }77  .kb-top .pill {78    height: 70px; min-width: 80px; padding: 0 22px;79    background: #1f2427; border-radius: 16px; color: #b7bec3; display: grid; place-items: center;80    font-size: 28px;81  }82  .keys { margin-top: 12px; display: grid; row-gap: 18px; }83  .row { display: grid; column-gap: 14px; }84  .row.row1 { grid-template-columns: repeat(10, 1fr); }85  .row.row2 { grid-template-columns: repeat(9, 1fr); }86  .row.row3 { grid-template-columns: 1.4fr repeat(7, 1fr) 1.5fr; }87  .row.row4 { grid-template-columns: 1.6fr 1.1fr 1.1fr 6fr 1.1fr 1.6fr; }88  .key {89    height: 130px; background: #22262a; border-radius: 24px;90    display: grid; place-items: center; color: #e9edf0; font-size: 46px; font-weight: 600;91    box-shadow: inset 0 -2px 0 rgba(255,255,255,0.04);92  }93  .key.secondary { background: #1e2226; color: #c9cfd4; font-size: 36px; font-weight: 500; }94  .space { font-size: 34px; color: #b7bec3; }95 96  /* Gesture handle */97  .gesture {98    position: absolute; bottom: 18px; left: 50%; transform: translateX(-50%);99    width: 300px; height: 10px; background: #3a3f44; border-radius: 6px;100    opacity: 0.8;101  }102</style>103</head>104<body>105<div id="render-target">106 107  <!-- Status bar -->108  <div class="status-bar">109    <div class="sb-left">3:44</div>110    <div class="sb-right">111      <div class="sb-icon">112        <!-- Signal bars -->113        <svg viewBox="0 0 48 48">114          <rect x="4" y="28" width="6" height="16" />115          <rect x="14" y="22" width="6" height="22" />116          <rect x="24" y="16" width="6" height="28" />117          <rect x="34" y="10" width="6" height="34" />118        </svg>119      </div>120      <div class="sb-icon">121        <!-- WiFi -->122        <svg viewBox="0 0 48 48">123          <path d="M6 18 C18 8,30 8,42 18" />124          <path d="M12 26 C20 18,28 18,36 26" />125          <path d="M18 34 C22 30,26 30,30 34" />126          <circle cx="24" cy="38" r="2" />127        </svg>128      </div>129      <div class="sb-icon">130        <!-- Battery -->131        <svg viewBox="0 0 48 48">132          <rect x="4" y="12" width="34" height="24" rx="3" />133          <rect x="40" y="18" width="4" height="12" rx="1" />134          <rect x="8" y="16" width="26" height="16" fill="#e7e7e7" />135        </svg>136      </div>137    </div>138  </div>139 140  <!-- Toolbar -->141  <div class="toolbar">142    <div class="tool-left">143      <div class="icon-btn">144        <!-- Back arrow -->145        <svg viewBox="0 0 48 48">146          <path d="M30 10 L14 24 L30 38" />147        </svg>148      </div>149    </div>150    <div class="tool-right">151      <div class="icon-btn">152        <!-- Paperclip -->153        <svg viewBox="0 0 48 48">154          <path d="M16 22 v14 c0 6 6 8 10 6 l10-8 c6-4 6-12 0-16 -6-4 -12 2 -12 8 v12" />155        </svg>156      </div>157      <div class="icon-btn">158        <!-- Send (triangle) -->159        <svg viewBox="0 0 48 48">160          <path d="M8 24 L40 12 L26 24 L40 36 Z" />161        </svg>162      </div>163      <div class="icon-btn icon-dots">164        <!-- Kebab -->165        <svg viewBox="0 0 48 48">166          <circle cx="24" cy="12" r="4" />167          <circle cx="24" cy="24" r="4" />168          <circle cx="24" cy="36" r="4" />169        </svg>170      </div>171    </div>172  </div>173 174  <!-- Content fields -->175  <div class="content">176    <div class="field inline">177      <div class="label">From</div>178      <div class="value">levivanloon93@gmail.com</div>179    </div>180 181    <div class="field inline">182      <div class="label">To</div>183      <div class="input placeholder"> </div>184      <svg class="chevron" viewBox="0 0 24 24">185        <path d="M6 9 L12 15 L18 9" stroke="#8b939a" stroke-width="2" fill="none" />186      </svg>187    </div>188 189    <div class="field inline">190      <div class="label">Subject</div>191      <div class="input placeholder"> </div>192    </div>193 194    <div class="compose-area">Compose email</div>195 196    <!-- Attachment chip -->197    <div class="attachment">198      <div class="attach-icon">199        <!-- Simple headphone icon -->200        <svg viewBox="0 0 48 48">201          <path d="M12 26 v10 a6 6 0 0 0 6 6 h2 v-16 h-2 a6 6 0 0 0 -6 6" stroke="#e9edf0" stroke-width="3" fill="none"/>202          <path d="M36 26 v10 a6 6 0 0 1 -6 6 h-2 v-16 h2 a6 6 0 0 1 6 6" stroke="#e9edf0" stroke-width="3" fill="none"/>203          <path d="M12 22 a12 12 0 0 1 24 0" stroke="#e9edf0" stroke-width="3" fill="none"/>204        </svg>205      </div>206      <div class="attach-text">207        <div class="file-name">Data Analysis First speech.m4a</div>208        <div class="file-size">80 KB</div>209      </div>210      <div class="close-btn">211        <svg viewBox="0 0 48 48">212          <path d="M12 12 L36 36 M36 12 L12 36" />213        </svg>214      </div>215    </div>216  </div>217 218  <!-- Keyboard mock -->219  <div class="keyboard">220    <div class="kb-top">221      <div class="pill">▦</div>222      <div class="pill">☺</div>223      <div class="pill">GIF</div>224      <div class="pill">⚙</div>225      <div class="pill">G↔</div>226      <div class="pill">🎨</div>227      <div class="pill">🎤</div>228    </div>229 230    <div class="keys">231      <div class="row row1">232        <div class="key">q</div>233        <div class="key">w</div>234        <div class="key">e</div>235        <div class="key">r</div>236        <div class="key">t</div>237        <div class="key">y</div>238        <div class="key">u</div>239        <div class="key">i</div>240        <div class="key">o</div>241        <div class="key">p</div>242      </div>243      <div class="row row2">244        <div class="key">a</div>245        <div class="key">s</div>246        <div class="key">d</div>247        <div class="key">f</div>248        <div class="key">g</div>249        <div class="key">h</div>250        <div class="key">j</div>251        <div class="key">k</div>252        <div class="key">l</div>253      </div>254      <div class="row row3">255        <div class="key secondary">⇧</div>256        <div class="key">z</div>257        <div class="key">x</div>258        <div class="key">c</div>259        <div class="key">v</div>260        <div class="key">b</div>261        <div class="key">n</div>262        <div class="key">m</div>263        <div class="key secondary">⌫</div>264      </div>265      <div class="row row4">266        <div class="key secondary">?123</div>267        <div class="key secondary">@</div>268        <div class="key secondary">☺</div>269        <div class="key space">space</div>270        <div class="key secondary">.</div>271        <div class="key secondary">↵</div>272      </div>273    </div>274  </div>275 276  <div class="gesture"></div>277</div>278</body>279</html>