GD-ML/AndroidCode

1<html lang="en">2<head>3<meta charset="UTF-8">4<meta name="viewport" content="width=1080, initial-scale=1.0">5<title>Gmail Compose - Dark</title>6<style>7  body { margin: 0; padding: 0; background: transparent; font-family: Arial, Helvetica, sans-serif; }8  #render-target {9    width: 1080px;10    height: 2400px;11    position: relative;12    overflow: hidden;13    background: #0f1719; /* deep Gmail-like dark */14    color: #e6edf0;15  }16 17  /* Status bar */18  .status-bar {19    position: absolute;20    top: 0; left: 0; right: 0;21    height: 92px;22    padding: 0 28px;23    display: flex;24    align-items: center;25    justify-content: space-between;26    color: #cfd8dc;27    font-size: 36px;28  }29  .status-right {30    display: flex; align-items: center; gap: 22px;31  }32  .status-icon svg { width: 44px; height: 44px; fill: #cfd8dc; }33 34  /* App bar */35  .app-bar {36    position: absolute;37    top: 92px; left: 0; right: 0;38    height: 120px;39    display: flex; align-items: center;40    padding: 0 24px;41    border-bottom: 1px solid #223138;42  }43  .app-left, .app-right { display: flex; align-items: center; }44  .app-left { gap: 26px; }45  .app-right { margin-left: auto; gap: 34px; }46  .icon-btn svg { width: 54px; height: 54px; fill: #cfe3e8; }47 48  /* Rows */49  .row {50    position: relative;51    display: flex;52    align-items: center;53    padding: 26px 28px;54    border-bottom: 1px solid #223138;55  }56  .label {57    width: 150px;58    font-size: 36px;59    color: #8fa3a6;60  }61  .value {62    flex: 1;63    font-size: 40px;64    color: #dbe7ea;65    overflow: hidden;66    white-space: nowrap;67    text-overflow: ellipsis;68  }69  .chev svg { width: 40px; height: 40px; fill: #90a4a8; }70 71  /* Contact chip block */72  .contact-block {73    display: flex;74    gap: 26px;75    align-items: center;76    padding: 30px 28px 24px 28px;77    border-bottom: 1px solid #223138;78  }79  .avatar {80    width: 96px; height: 96px; border-radius: 50%;81    background: #8a6d60; color: #fff;82    display: flex; align-items: center; justify-content: center;83    font-size: 44px; font-weight: 700;84  }85  .contact-info { display: flex; flex-direction: column; }86  .contact-info .top {87    font-size: 40px; color: #dfe9ec;88  }89  .contact-info .sub {90    font-size: 30px; color: #8fa3a6; margin-top: 8px;91  }92 93  /* Compose body (empty area) */94  .compose-body {95    padding: 20px 28px;96    color: #9fb2b6;97    font-size: 36px;98    height: 950px; /* space before keyboard */99  }100 101  /* Keyboard mock */102  #keyboard {103    position: absolute;104    left: 0; right: 0; bottom: 0;105    height: 900px;106    background: #151b1f;107    border-top: 1px solid #223138;108  }109  .quick-row {110    height: 120px;111    display: flex; align-items: center; justify-content: space-around;112    padding: 0 24px;113  }114  .circle-icon {115    width: 72px; height: 72px; border-radius: 50%;116    background: #232b30; display: flex; align-items: center; justify-content: center;117  }118  .circle-icon svg { width: 40px; height: 40px; fill: #cfd8dc; }119 120  .keys {121    padding: 12px 18px 0 18px;122    display: grid;123    grid-template-rows: repeat(4, 1fr);124    row-gap: 18px;125    height: 680px;126  }127  .key-row {128    display: grid;129    grid-auto-flow: column;130    column-gap: 14px;131    justify-content: center;132  }133  .key {134    min-width: 88px; height: 120px;135    background: #1d2428; border-radius: 16px;136    color: #e6eef0; display: flex; align-items: center; justify-content: center;137    font-size: 46px;138  }139  .key.wide { min-width: 160px; }140  .space-row {141    display: grid; grid-template-columns: 130px 1fr 130px 130px;142    column-gap: 14px; align-items: center;143  }144  .space { height: 120px; background:#1d2428; border-radius:16px; }145  .nav-pill {146    position: absolute; bottom: 24px; left: 50%;147    transform: translateX(-50%);148    width: 320px; height: 12px; border-radius: 8px;149    background: #dfe5e8;150    opacity: 0.75;151  }152</style>153</head>154<body>155<div id="render-target">156 157  <!-- Status Bar -->158  <div class="status-bar">159    <div class="status-left">8:42</div>160    <div class="status-right">161      <div class="status-icon">162        <!-- Signal bars -->163        <svg viewBox="0 0 24 24"><path d="M3 20h2v-4H3v4zm4 0h2v-7H7v7zm4 0h2v-10h-2v10zm4 0h2v-13h-2v13z"/></svg>164      </div>165      <div class="status-icon">166        <!-- Wi-Fi -->167        <svg viewBox="0 0 24 24"><path d="M12 20l3-3H9l3 3zm0-5c3.3 0 6-2.7 6-6h-2a4 4 0 00-8 0H6c0 3.3 2.7 6 6 6z"/></svg>168      </div>169      <div class="status-icon">170        <!-- Battery -->171        <svg viewBox="0 0 28 24"><path d="M24 7h2v10h-2V7zM2 6h20v12H2V6zm2 2v8h16V8H4z"/></svg>172      </div>173    </div>174  </div>175 176  <!-- App Bar -->177  <div class="app-bar">178    <div class="app-left">179      <div class="icon-btn">180        <!-- Back -->181        <svg viewBox="0 0 24 24"><path d="M15.5 5l-7 7 7 7 1.5-1.5L11.5 12 17 6.5 15.5 5z"/></svg>182      </div>183      <div style="font-size: 40px; color:#cfd8dc;">Compose</div>184    </div>185    <div class="app-right">186      <div class="icon-btn">187        <!-- Attach/Paperclip -->188        <svg viewBox="0 0 24 24"><path d="M7 13.5V7a5 5 0 019.6-1.9l.4.9v8.5a4.5 4.5 0 01-9 0V8h2v6.5a2.5 2.5 0 105 0V7.5a3 3 0 00-6 0V14h-2z"/></svg>189      </div>190      <div class="icon-btn">191        <!-- Send -->192        <svg viewBox="0 0 24 24"><path d="M2 21l20-9L2 3v7l14 2-14 2v7z"/></svg>193      </div>194      <div class="icon-btn">195        <!-- Kebab -->196        <svg viewBox="0 0 24 24"><circle cx="12" cy="5" r="2.2"/><circle cx="12" cy="12" r="2.2"/><circle cx="12" cy="19" r="2.2"/></svg>197      </div>198    </div>199  </div>200 201  <!-- From row -->202  <div class="row" style="top: 0; margin-top: 212px;">203    <div class="label">From</div>204    <div class="value">richardwegnar@gmail.com</div>205    <div class="chev">206      <svg viewBox="0 0 24 24"><path d="M7 9l5 5 5-5z"/></svg>207    </div>208  </div>209 210  <!-- To row -->211  <div class="row">212    <div class="label">To</div>213    <div class="value">clarawagner98b@gmail.com</div>214    <div class="chev">215      <svg viewBox="0 0 24 24"><path d="M7 9l5 5 5-5z"/></svg>216    </div>217  </div>218 219  <!-- Contact chip-like block -->220  <div class="contact-block">221    <div class="avatar">C</div>222    <div class="contact-info">223      <div class="top">clarawagner98b@gmail.com</div>224      <div class="sub">clarawagner98b@gmail.com</div>225    </div>226  </div>227 228  <!-- Empty compose area -->229  <div class="compose-body">230    <!-- Left intentionally blank to mimic empty email body -->231  </div>232 233  <!-- Keyboard mock -->234  <div id="keyboard">235    <div class="quick-row">236      <div class="circle-icon">237        <!-- 4-squares -->238        <svg viewBox="0 0 24 24"><path d="M3 3h8v8H3V3zm0 10h8v8H3v-8zm10-10h8v8h-8V3zm0 10h8v8h-8v-8z"/></svg>239      </div>240      <div class="circle-icon">241        <!-- Emoji -->242        <svg viewBox="0 0 24 24"><path d="M12 2a10 10 0 1010 10A10 10 0 0012 2zm-3 7a1.5 1.5 0 11-1.5 1.5A1.5 1.5 0 019 9zm9 5a6 6 0 01-12 0h12zm-4.5-3.5A1.5 1.5 0 1116 9a1.5 1.5 0 01-1.5 1.5z"/></svg>243      </div>244      <div class="circle-icon">245        <!-- Settings gear -->246        <svg viewBox="0 0 24 24"><path d="M12 8.5A3.5 3.5 0 108.5 12 3.5 3.5 0 0012 8.5m7.4 3.1l2.1 1.2-2 3.5-2.4-.6a7.5 7.5 0 01-1.6 1l-.4 2.4H9.9l-.5-2.4a7.5 7.5 0 01-1.6-1l-2.4.6-2-3.5 2.1-1.2a7.9 7.9 0 010-2.1L3.4 8.3l2-3.5 2.4.6a7.5 7.5 0 011.6-1l.5-2.4h4.2l.4 2.4a7.5 7.5 0 011.6 1l2.4-.6 2 3.5-2.1 1.3a7.9 7.9 0 010 2.1z"/></svg>247      </div>248      <div class="circle-icon">249        <!-- Translate -->250        <svg viewBox="0 0 24 24"><path d="M3 5h11v6H3V5zm0 8h7v6H3v-6zm9 0h9v6h-9v-6zm2-8h7v6h-7V5z"/></svg>251      </div>252      <div class="circle-icon">253        <!-- Palette -->254        <svg viewBox="0 0 24 24"><path d="M12 2a10 10 0 100 20 3 3 0 003-3 2 2 0 012-2h2a5 5 0 00-5-5h-1a4 4 0 01-4-4V2z"/></svg>255      </div>256      <div class="circle-icon">257        <!-- Mic -->258        <svg viewBox="0 0 24 24"><path d="M12 14a3 3 0 003-3V6a3 3 0 10-6 0v5a3 3 0 003 3zm-6-3h2a4 4 0 008 0h2a6 6 0 01-12 0zm5 7h2v3h-2z"/></svg>259      </div>260    </div>261 262    <div class="keys">263      <!-- Row 1 -->264      <div class="key-row" style="grid-template-columns: repeat(10, 1fr); max-width: 1000px; margin: 0 auto;">265        <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>266        <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>267      </div>268      <!-- Row 2 -->269      <div class="key-row" style="grid-template-columns: repeat(9, 1fr); max-width: 920px; margin: 0 auto;">270        <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>271        <div class="key">h</div><div class="key">j</div><div class="key">k</div><div class="key">l</div>272      </div>273      <!-- Row 3 -->274      <div class="key-row" style="grid-template-columns: 140px repeat(7, 1fr) 140px; max-width: 980px; margin: 0 auto;">275        <div class="key">z</div><div class="key">x</div><div class="key">c</div><div class="key">v</div>276        <div class="key">b</div><div class="key">n</div><div class="key">m</div>277        <div class="key">.</div><div class="key">⌫</div>278      </div>279      <!-- Space Row -->280      <div class="key-row space-row" style="max-width: 980px; margin: 0 auto;">281        <div class="key">?123</div>282        <div class="space"></div>283        <div class="key">@</div>284        <div class="key">↩</div>285      </div>286    </div>287 288    <div class="nav-pill"></div>289  </div>290 291</div>292</body>293</html>