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>Gmail Compose Mock</title>7<style>8  body { margin:0; padding:0; background:transparent; font-family: Arial, Helvetica, sans-serif; }9  #render-target {10    position: relative;11    width: 1080px;12    height: 2400px;13    overflow: hidden;14    background: #121212;15    color: #ECEFF1;16  }17 18  /* Status bar */19  .status-bar {20    height: 84px;21    padding: 0 28px;22    display: flex;23    align-items: center;24    justify-content: space-between;25    color: #fff;26    font-size: 28px;27    letter-spacing: 1px;28  }29  .status-icons {30    display: flex; align-items: center; gap: 18px;31  }32  .icon-24 { width: 48px; height: 48px; }33 34  /* Action bar */35  .action-bar {36    height: 96px;37    display:flex;38    align-items:center;39    padding: 0 16px 0 8px;40    border-bottom: 1px solid #232323;41  }42  .action-left { display:flex; align-items:center; gap:6px; }43  .action-right { margin-left:auto; display:flex; align-items:center; gap:18px; }44 45  /* Fields */46  .content {47    padding: 18px 28px 0 28px;48  }49  .field-row {50    padding: 18px 0;51    border-bottom: 1px solid #232323;52  }53  .field-label {54    color:#9AA0A6;55    font-size: 26px;56    margin-bottom: 8px;57  }58  .from-value, .to-chip {59    display:flex; align-items:center; gap:10px;60    font-size: 36px; color:#ECEFF1;61  }62  .chev {63    width: 32px; height: 32px; opacity: .8;64  }65 66  .to-chip {67    background: #1E272C;68    border: 1px solid #3A4A52;69    color: #E8F1F5;70    border-radius: 36px;71    padding: 10px 18px;72    display: inline-flex;73  }74  .avatar {75    width: 56px; height: 56px; border-radius:50%;76    background:#2BB8C6; display:flex; align-items:center; justify-content:center;77    color:#062C30; font-weight:bold;78  }79 80  .caret-line {81    height: 36px;82    display:flex; align-items:center;83  }84  .caret {85    width: 2px; height: 26px; background:#7EA7FF; margin-left: 4px;86  }87 88  .message-preview {89    font-size: 34px;90    padding: 22px 0 26px 0;91    border-bottom: 1px solid #232323;92    color: #D0D4D7;93  }94 95  .compose-placeholder {96    color:#9AA0A6; font-size: 32px; margin-top: 22px; margin-bottom: 16px;97  }98 99  /* Attachment card */100  .attachment {101    width: 100%;102    max-width: 1000px;103    background: #394B58;104    border-radius: 16px;105    padding: 22px;106    display:flex;107    align-items:center;108    gap: 18px;109    color: #E6EEF3;110  }111  .pdf-badge {112    width: 80px; height: 80px; background:#E74C3C; color:#fff;113    border-radius: 8px; display:flex; align-items:center; justify-content:center;114    font-weight: bold;115    border: 1px solid rgba(0,0,0,.2);116  }117  .file-details { display:flex; flex-direction:column; }118  .file-name { font-size: 34px; }119  .file-size { font-size: 26px; color:#B8C0C6; margin-top: 6px; }120  .attach-close {121    margin-left: auto;122    width: 48px; height: 48px; opacity: .9;123  }124 125  /* Keyboard */126  .keyboard {127    position: absolute;128    left:0; right:0; bottom: 36px;129    height: 950px;130    background:#1B1E21;131    border-top: 1px solid #24292C;132    padding: 22px 18px;133    display:flex; flex-direction:column; justify-content:flex-start;134    gap: 18px;135  }136  .quick-row {137    display:flex; gap: 24px; padding: 0 10px; align-items:center;138  }139  .quick-icon {140    width: 64px; height: 64px; border-radius: 14px;141    background:#23272A; display:flex; align-items:center; justify-content:center;142    color:#B0BEC5; font-size: 22px;143    border:1px solid #2E3336;144  }145  .keys-row {146    display:flex; gap: 14px; justify-content:center;147  }148  .key {149    background:#2A2F33; color:#EAEAEA; border-radius: 14px;150    height: 120px; min-width: 88px; display:flex; align-items:center; justify-content:center;151    font-size: 36px; border:1px solid #32383C;152  }153  .key.medium { min-width: 110px; }154  .key.wide { min-width: 170px; }155  .key.space { flex: 1; min-width: 340px; }156  .key.round {157    background:#9EB6CF22; color:#DDE7F0; border:1px solid #59738A;158  }159 160  .home-indicator {161    position:absolute; bottom: 8px; left:50%; transform: translateX(-50%);162    width: 340px; height: 10px; background:#E5E5E5; border-radius: 6px; opacity:.9;163  }164</style>165</head>166<body>167<div id="render-target">168 169  <!-- Status bar -->170  <div class="status-bar">171    <div class="time">8:45</div>172    <div class="status-icons">173      <!-- minimalist placeholders for status icons -->174      <svg class="icon-24" viewBox="0 0 24 24" fill="none" stroke="#fff" stroke-width="2"><circle cx="12" cy="12" r="6"/></svg>175      <svg class="icon-24" viewBox="0 0 24 24" fill="none" stroke="#fff" stroke-width="2"><path d="M3 12h14"/><path d="M17 8l4 4-4 4"/></svg>176      <svg class="icon-24" viewBox="0 0 24 24" fill="none" stroke="#fff" stroke-width="2"><path d="M2 12h18"/><path d="M20 6v12"/></svg>177      <svg class="icon-24" viewBox="0 0 24 24" fill="#fff"><rect x="3" y="8" width="14" height="8" rx="2"/><path d="M21 10v4" stroke="#fff" stroke-width="2"/></svg>178    </div>179  </div>180 181  <!-- Action bar -->182  <div class="action-bar">183    <div class="action-left">184      <!-- back arrow -->185      <svg class="icon-24" viewBox="0 0 24 24" fill="none" stroke="#EAEAEA" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">186        <path d="M15 18l-6-6 6-6"/>187      </svg>188    </div>189    <div class="action-right">190      <!-- attach -->191      <svg class="icon-24" viewBox="0 0 24 24" fill="none" stroke="#B0BEC5" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">192        <path d="M7 13l6-6a4 4 0 1 1 6 6l-8 8a3 3 0 1 1-4-4l8-8"/>193      </svg>194      <!-- send -->195      <svg class="icon-24" viewBox="0 0 24 24" fill="#8AB4F8">196        <path d="M2 21l21-9L2 3v7l15 2-15 2z"/>197      </svg>198      <!-- menu -->199      <svg class="icon-24" viewBox="0 0 24 24" fill="#B0BEC5">200        <circle cx="12" cy="4" r="2"/><circle cx="12" cy="12" r="2"/><circle cx="12" cy="20" r="2"/>201      </svg>202    </div>203  </div>204 205  <div class="content">206    <!-- From -->207    <div class="field-row">208      <div class="field-label">From</div>209      <div class="from-value">210        <span>ffionh41@gmail.com</span>211        <svg class="chev" viewBox="0 0 24 24" fill="none" stroke="#B0BEC5" stroke-width="2"><path d="M6 9l6 6 6-6"/></svg>212      </div>213    </div>214 215    <!-- To -->216    <div class="field-row">217      <div class="field-label">To</div>218      <div class="to-chip">219        <div class="avatar">•</div>220        <div>maredharris@gmail.com</div>221        <svg class="chev" viewBox="0 0 24 24" fill="none" stroke="#B0BEC5" stroke-width="2"><path d="M6 9l6 6 6-6"/></svg>222      </div>223      <div class="caret-line"><div class="caret"></div></div>224    </div>225 226    <!-- Message preview -->227    <div class="message-preview">228      I am sharing 'Importance of hiking' with you229    </div>230 231    <div class="compose-placeholder">Compose email</div>232 233    <!-- Attachment -->234    <div class="attachment">235      <div class="pdf-badge">PDF</div>236      <div class="file-details">237        <div class="file-name">Importance of hiking.pdf</div>238        <div class="file-size">200 KB</div>239      </div>240      <svg class="attach-close" viewBox="0 0 24 24" fill="none" stroke="#E6EEF3" stroke-width="2" stroke-linecap="round">241        <path d="M18 6L6 18M6 6l12 12"/>242      </svg>243    </div>244  </div>245 246  <!-- Keyboard -->247  <div class="keyboard">248    <div class="quick-row">249      <div class="quick-icon">▦</div>250      <div class="quick-icon">☺</div>251      <div class="quick-icon">GIF</div>252      <div class="quick-icon">⚙</div>253      <div class="quick-icon">G⟶</div>254      <div class="quick-icon">🎨</div>255      <div class="quick-icon">🎤</div>256    </div>257 258    <div class="keys-row">259      <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>260      <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>261    </div>262    <div class="keys-row">263      <div class="key medium">a</div><div class="key medium">s</div><div class="key medium">d</div><div class="key medium">f</div><div class="key medium">g</div>264      <div class="key medium">h</div><div class="key medium">j</div><div class="key medium">k</div><div class="key medium">l</div>265      <div class="key wide">266        <svg width="56" height="56" viewBox="0 0 24 24" fill="none" stroke="#EAEAEA" stroke-width="2">267          <path d="M6 6l12 12M6 18L18 6"/>268        </svg>269      </div>270    </div>271    <div class="keys-row">272      <div class="key wide">⇧</div>273      <div class="key">z</div><div class="key">x</div><div class="key">c</div><div class="key">v</div>274      <div class="key">b</div><div class="key">n</div><div class="key">m</div>275      <div class="key wide">⌫</div>276    </div>277    <div class="keys-row">278      <div class="key round wide">?123</div>279      <div class="key">@</div>280      <div class="key">☺</div>281      <div class="key space"></div>282      <div class="key">.</div>283      <div class="key round wide">284        <svg width="56" height="56" viewBox="0 0 24 24" fill="#D0E5FF">285          <path d="M2 21l21-9L2 3v7l15 2-15 2z"/>286        </svg>287      </div>288    </div>289  </div>290 291  <div class="home-indicator"></div>292</div>293</body>294</html>