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 - Dark UI</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    color: #EAEAEA;16    font-family: system-ui, -apple-system, "Segoe UI", Roboto, Arial, sans-serif;17  }18 19  /* Status bar */20  .status-bar {21    position: absolute;22    top: 0; left: 0; right: 0;23    height: 96px;24    padding: 0 32px;25    display: flex;26    align-items: center;27    justify-content: space-between;28    color: #FFFFFF;29    font-size: 36px;30  }31  .status-icons {32    display: flex; align-items: center; gap: 28px;33  }34  .status-icons svg { fill: none; stroke: #FFFFFF; stroke-width: 4; }35 36  /* App toolbar */37  .toolbar {38    position: absolute;39    top: 96px; left: 0; right: 0;40    height: 128px;41    padding: 0 20px;42    border-bottom: 1px solid #2A2A2A;43    display: flex;44    align-items: center;45    justify-content: space-between;46  }47  .toolbar-left, .toolbar-right {48    display: flex; align-items: center; gap: 36px;49  }50  .icon-btn svg { width: 48px; height: 48px; stroke: #EAEAEA; fill: none; stroke-width: 4; }51  .kebab svg { stroke: none; fill: #EAEAEA; }52 53  /* Form rows */54  .form {55    position: absolute;56    top: 224px; left: 0; right: 0;57    padding: 0 32px;58  }59  .row {60    height: 120px;61    border-bottom: 1px solid #2A2A2A;62    display: flex;63    align-items: center;64    justify-content: space-between;65  }66  .row .labels {67    display: flex; align-items: baseline; gap: 18px;68    font-size: 40px;69  }70  .row .label {71    color: #9AA0A6;72    font-size: 38px;73  }74  .row .value {75    color: #EAEAEA;76    font-size: 40px;77  }78  .dropdown svg { width: 36px; height: 36px; fill: none; stroke: #9AA0A6; stroke-width: 4; }79 80  /* Suggestion item */81  .suggestion {82    height: 120px;83    display: flex;84    align-items: center;85    gap: 28px;86    padding-left: 32px;87    color: #EAEAEA;88    font-size: 40px;89  }90  .suggestion .avatar {91    width: 72px; height: 72px;92    background: #E0E0E0; border: 1px solid #BDBDBD;93    border-radius: 50%;94    display: flex; align-items: center; justify-content: center;95    color: #757575; font-size: 20px;96  }97  .suggestion .email { color: #9AA0A6; font-size: 36px; }98 99  /* Empty compose area between form and keyboard */100  .body-space {101    position: absolute;102    top: 584px; left: 0; right: 0;103    bottom: 970px;104  }105 106  /* Keyboard */107  .keyboard {108    position: absolute;109    left: 0; right: 0; bottom: 90px;110    height: 880px;111    background: #1A1A1A;112    border-top: 1px solid #2A2A2A;113  }114  .kb-topbar {115    height: 120px;116    display: flex; align-items: center;117    gap: 28px;118    padding: 0 26px;119  }120  .kb-top-icon {121    width: 88px; height: 88px;122    background: #2A2A2A; border: 1px solid #3A3A3A;123    border-radius: 18px;124    display: flex; align-items: center; justify-content: center;125    color: #BDBDBD; font-size: 30px;126  }127 128  .keys {129    padding: 10px 26px;130  }131  .row-keys {132    display: flex; gap: 14px; margin-bottom: 22px;133  }134  .key {135    flex: 1;136    height: 120px;137    background: #2B2B2B;138    border: 1px solid #3F3F3F;139    border-radius: 22px;140    display: flex; align-items: center; justify-content: center;141    color: #E0E0E0; font-size: 44px;142  }143  .key.small { flex: 0 0 90px; }144  .key.medium { flex: 0 0 150px; }145  .key.wide { flex: 0 0 220px; }146  .key.space { flex: 1 0 540px; }147 148  .kb-bottom {149    margin-top: 16px;150    padding: 0 26px;151  }152 153  /* Gesture pill */154  .gesture {155    position: absolute; bottom: 24px; left: 50%;156    transform: translateX(-50%);157    width: 320px; height: 10px;158    background: #FFFFFF; opacity: 0.8; border-radius: 8px;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">8:50</div>168    <div class="status-icons">169      <!-- Wi-Fi -->170      <svg width="52" height="52" viewBox="0 0 24 24" aria-label="wifi">171        <path d="M2 8c5.5-4.7 14.5-4.7 20 0"></path>172        <path d="M5 11c4-3 10-3 14 0"></path>173        <path d="M8 14c2.5-1.9 5.5-1.9 8 0"></path>174        <circle cx="12" cy="18" r="1.6" fill="#FFFFFF"></circle>175      </svg>176      <!-- Battery -->177      <svg width="64" height="52" viewBox="0 0 32 24" aria-label="battery">178        <rect x="2" y="5" width="24" height="14" rx="2"></rect>179        <rect x="27" y="9" width="3" height="6" rx="1"></rect>180        <rect x="4" y="7" width="20" height="10" fill="#FFFFFF"></rect>181      </svg>182    </div>183  </div>184 185  <!-- App toolbar -->186  <div class="toolbar">187    <div class="toolbar-left">188      <!-- Back arrow -->189      <div class="icon-btn" aria-label="Back">190        <svg viewBox="0 0 24 24">191          <path d="M15 19l-7-7 7-7"></path>192        </svg>193      </div>194    </div>195    <div class="toolbar-right">196      <!-- Attach (paperclip) -->197      <div class="icon-btn" aria-label="Attach">198        <svg viewBox="0 0 24 24">199          <path d="M7 12l6.5-6.5a3.5 3.5 0 015 5L10 19a5 5 0 01-7-7l8-8"></path>200        </svg>201      </div>202      <!-- Send (paper plane) -->203      <div class="icon-btn" aria-label="Send">204        <svg viewBox="0 0 24 24">205          <path d="M3 11l18-8-8 18-2-7-7-3z"></path>206        </svg>207      </div>208      <!-- More (kebab) -->209      <div class="icon-btn kebab" aria-label="More">210        <svg viewBox="0 0 24 24">211          <circle cx="12" cy="5" r="2.5"></circle>212          <circle cx="12" cy="12" r="2.5"></circle>213          <circle cx="12" cy="19" r="2.5"></circle>214        </svg>215      </div>216    </div>217  </div>218 219  <!-- Form area -->220  <div class="form">221    <div class="row">222      <div class="labels">223        <span class="label">From</span>224        <span class="value">dbwscratch.test.id23@gmail.com</span>225      </div>226    </div>227    <div class="row">228      <div class="labels">229        <span class="label">To</span>230        <span class="value">giorgio.rossi196503@gmail.com</span>231      </div>232      <div class="dropdown" aria-label="Recipients dropdown">233        <svg viewBox="0 0 24 24">234          <path d="M6 9l6 6 6-6"></path>235        </svg>236      </div>237    </div>238    <div class="suggestion">239      <div class="avatar">[IMG: Contact avatar]</div>240      <div>241        <div>Add recipient</div>242        <div class="email">giorgio.rossi196503@gmail.com</div>243      </div>244    </div>245  </div>246 247  <!-- Empty message body area -->248  <div class="body-space"></div>249 250  <!-- Keyboard -->251  <div class="keyboard">252    <div class="kb-topbar">253      <div class="kb-top-icon">▦</div>254      <div class="kb-top-icon">😊</div>255      <div class="kb-top-icon">GIF</div>256      <div class="kb-top-icon">⚙</div>257      <div class="kb-top-icon">G↔</div>258      <div class="kb-top-icon">🎨</div>259      <div class="kb-top-icon">🎤</div>260    </div>261    <div class="keys">262      <div class="row-keys">263        <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>264        <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>265      </div>266      <div class="row-keys">267        <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>268        <div class="key">h</div><div class="key">j</div><div class="key">k</div><div class="key">l</div>269      </div>270      <div class="row-keys">271        <div class="key wide">⇧</div>272        <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>273        <div class="key">n</div><div class="key">m</div>274        <div class="key wide">⌫</div>275      </div>276      <div class="kb-bottom">277        <div class="row-keys">278          <div class="key wide">?123</div>279          <div class="key medium">@</div>280          <div class="key medium">😊</div>281          <div class="key space">space</div>282          <div class="key medium">.</div>283          <div class="key wide">284            <svg width="48" height="48" viewBox="0 0 24 24" aria-label="enter">285              <path d="M4 6v6a4 4 0 004 4h7"></path>286              <path d="M15 13l4 3-4 3" ></path>287            </svg>288          </div>289        </div>290      </div>291    </div>292  </div>293 294  <!-- Gesture pill -->295  <div class="gesture"></div>296</div>297</body>298</html>