GD-ML/AndroidCode

1<!DOCTYPE html>2<html lang="en">3<head>4<meta charset="UTF-8">5<title>Email Compose - Dark</title>6<meta name="viewport" content="width=1080, initial-scale=1.0">7<style>8  body { margin: 0; padding: 0; background: transparent; font-family: Roboto, Arial, sans-serif; }9  #render-target {10    width: 1080px; height: 2400px;11    position: relative; overflow: hidden;12    background: #121212; color: #E9E9E9;13  }14 15  /* Status bar */16  .statusbar {17    height: 96px; padding: 0 32px;18    display: flex; align-items: center; justify-content: space-between;19    color: #E9E9E9; font-weight: 500; font-size: 36px;20  }21  .status-icons { display: flex; align-items: center; gap: 24px; }22  .status-icons svg { fill: none; stroke: #E9E9E9; stroke-width: 3; }23 24  /* App bar */25  .appbar {26    height: 140px; padding: 0 24px;27    display: flex; align-items: center; justify-content: space-between;28    border-bottom: 1px solid #1F1F1F;29  }30  .app-left { display: flex; align-items: center; gap: 24px; }31  .app-right { display: flex; align-items: center; gap: 36px; }32  .icon-btn svg { width: 48px; height: 48px; stroke: #E9E9E9; fill: none; stroke-width: 3; }33 34  /* Fields */35  .content { padding: 24px 32px 0 32px; }36  .field {37    display: flex; align-items: center;38    border-bottom: 1px solid #1E1E1E;39    padding: 28px 0;40    font-size: 34px;41  }42  .label {43    width: 140px; color: #B4B4B4;44  }45  .value { flex: 1; color: #E9E9E9; }46  .placeholder { color: #9AA0A6; }47  .dropdown { width: 44px; height: 44px; margin-left: 8px; }48 49  /* Compose area */50  .compose {51    padding: 32px 0;52    font-size: 38px; color: #B4B4B4;53  }54 55  /* Attachment chip */56  .attachment {57    margin-top: 20px;58    width: 940px; height: 132px;59    background: #2A2F33; border-radius: 18px;60    display: flex; align-items: center; gap: 28px;61    padding: 0 24px; border: 1px solid #3A4044;62    color: #E9E9E9;63  }64  .att-icon {65    width: 72px; height: 72px; border-radius: 12px;66    background: #E74D3C; display: flex; align-items: center; justify-content: center;67  }68  .att-text { flex: 1; }69  .att-title { font-size: 34px; }70  .att-sub { font-size: 28px; color: #B4B4B4; margin-top: 6px; }71  .att-close { width: 48px; height: 48px; }72 73  /* Keyboard */74  .keyboard {75    position: absolute; bottom: 72px; left: 0;76    width: 100%; height: 900px;77    background: #1A1A1A; border-top: 1px solid #222;78  }79  .kb-topbar {80    height: 96px; padding: 0 24px;81    display: flex; align-items: center; gap: 28px; color: #9AA0A6;82  }83  .kb-rows { padding: 16px 36px 24px 36px; }84  .kb-row { display: flex; justify-content: center; gap: 8px; margin-bottom: 22px; }85  .key {86    width: 92px; height: 116px; border-radius: 16px;87    background: #2C2C2C; color: #E9E9E9;88    display: flex; align-items: center; justify-content: center;89    font-size: 42px; font-weight: 500;90  }91  .key.small { width: 140px; }92  .key.wide { width: 520px; }93  .key.blue { background: #A6C8FF; color: #121212; }94  .key.icon { font-size: 38px; color: #CFCFCF; }95 96  /* Home indicator */97  .home-indicator {98    position: absolute; bottom: 16px; left: 50%;99    transform: translateX(-50%);100    width: 300px; height: 12px; border-radius: 8px; background: #DADADA; opacity: 0.6;101  }102</style>103</head>104<body>105<div id="render-target">106 107  <!-- Status bar -->108  <div class="statusbar">109    <div>8:49</div>110    <div class="status-icons">111      <!-- Wi-Fi -->112      <svg width="44" height="44" viewBox="0 0 44 44">113        <path d="M5 16c7-6 27-6 34 0"/>114        <path d="M10 22c5-4 19-4 24 0"/>115        <path d="M16 28c3-2 9-2 12 0"/>116        <circle cx="22" cy="33" r="2.8" fill="#E9E9E9" stroke="none"/>117      </svg>118      <!-- Battery -->119      <svg width="60" height="44" viewBox="0 0 60 44">120        <rect x="6" y="10" width="40" height="24" rx="4" />121        <rect x="48" y="16" width="6" height="12" rx="2" />122        <rect x="10" y="14" width="30" height="16" rx="2" fill="#E9E9E9" stroke="none"/>123      </svg>124    </div>125  </div>126 127  <!-- App bar -->128  <div class="appbar">129    <div class="app-left">130      <!-- Back -->131      <div class="icon-btn">132        <svg viewBox="0 0 48 48">133          <path d="M30 10 L16 24 L30 38" />134        </svg>135      </div>136    </div>137    <div class="app-right">138      <!-- Attach (paperclip) -->139      <div class="icon-btn">140        <svg viewBox="0 0 48 48">141          <path d="M18 16c0-4 5-6 8-3l12 12c3 3 1 8-3 8-2 0-3-1-4-2L19 19c-2-2-5-1-5 2 0 2 1 3 2 4l10 10" />142        </svg>143      </div>144      <!-- Send -->145      <div class="icon-btn">146        <svg viewBox="0 0 48 48">147          <path d="M8 24 L40 10 L32 24 L40 38 Z" />148        </svg>149      </div>150      <!-- More (vertical dots) -->151      <div class="icon-btn">152        <svg viewBox="0 0 48 48">153          <circle cx="24" cy="12" r="3" fill="#E9E9E9" stroke="none"></circle>154          <circle cx="24" cy="24" r="3" fill="#E9E9E9" stroke="none"></circle>155          <circle cx="24" cy="36" r="3" fill="#E9E9E9" stroke="none"></circle>156        </svg>157      </div>158    </div>159  </div>160 161  <!-- Content -->162  <div class="content">163    <div class="field">164      <div class="label">From</div>165      <div class="value">dbwscratch.test.id23@gmail.com</div>166    </div>167    <div class="field">168      <div class="label">To</div>169      <div class="value placeholder"> </div>170      <!-- dropdown chevron -->171      <svg class="dropdown" viewBox="0 0 24 24">172        <path d="M6 9 L12 15 L18 9" stroke="#E9E9E9" stroke-width="2.5" fill="none" />173      </svg>174    </div>175    <div class="field">176      <div class="label">Subject</div>177      <div class="value placeholder"> </div>178    </div>179 180    <div class="compose">Compose email</div>181 182    <!-- Attachment chip -->183    <div class="attachment">184      <div class="att-icon">185        <svg width="44" height="44" viewBox="0 0 44 44">186          <path d="M14 14 v12 a8 8 0 0 0 16 0 v-12" stroke="#121212" stroke-width="3.5" fill="none" />187          <rect x="18" y="10" width="8" height="6" rx="2" fill="#121212" stroke="none"/>188        </svg>189      </div>190      <div class="att-text">191        <div class="att-title">Birthday Song .m4a</div>192        <div class="att-sub">346 KB</div>193      </div>194      <svg class="att-close" viewBox="0 0 48 48">195        <path d="M12 12 L36 36 M36 12 L12 36" stroke="#CFCFCF" stroke-width="3.5" />196      </svg>197    </div>198  </div>199 200  <!-- Keyboard -->201  <div class="keyboard">202    <div class="kb-topbar">203      <div class="key icon" style="width:72px;height:72px;border-radius:12px;">⌨️</div>204      <div class="key icon" style="width:72px;height:72px;border-radius:12px;">🙂</div>205      <div style="color:#6F6F6F; font-size:34px;">GIF</div>206      <div class="key icon" style="width:72px;height:72px;border-radius:12px;">⚙️</div>207      <div class="key icon" style="width:72px;height:72px;border-radius:12px;">G↔︎</div>208      <div class="key icon" style="width:72px;height:72px;border-radius:12px;">🎨</div>209      <div class="key icon" style="margin-left:auto;width:72px;height:72px;border-radius:12px;">🎤</div>210    </div>211    <div class="kb-rows">212      <div class="kb-row">213        <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>214      </div>215      <div class="kb-row">216        <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>217      </div>218      <div class="kb-row">219        <div class="key small">⇧</div>220        <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>221        <div class="key small">⌫</div>222      </div>223      <div class="kb-row" style="align-items:center;">224        <div class="key small">?123</div>225        <div class="key small">@</div>226        <div class="key small">🙂</div>227        <div class="key wide"></div>228        <div class="key small">.</div>229        <div class="key small blue">↵</div>230      </div>231    </div>232  </div>233 234  <!-- Home indicator -->235  <div class="home-indicator"></div>236</div>237</body>238</html>