GD-ML/AndroidCode

1<html lang="en">2<head>3<meta charset="UTF-8">4<title>Gmail Compose Mock</title>5<style>6  body { margin: 0; padding: 0; background: transparent; }7  #render-target {8    width: 1080px;9    height: 2400px;10    position: relative;11    overflow: hidden;12    background: #121212;13    color: #fff;14    font-family: Roboto, Arial, Helvetica, sans-serif;15  }16 17  /* Status bar */18  .status-bar {19    height: 90px;20    padding: 0 32px;21    display: flex;22    align-items: center;23    justify-content: space-between;24    color: #E0E0E0;25    font-size: 32px;26    letter-spacing: 0.5px;27  }28  .status-icons {29    display: flex;30    gap: 20px;31    align-items: center;32  }33  .sb-icon {34    width: 28px;35    height: 28px;36    opacity: 0.8;37  }38 39  /* App bar */40  .app-bar {41    height: 140px;42    padding: 0 28px;43    display: flex;44    align-items: center;45    border-bottom: 1px solid #2b2b2b;46  }47  .app-left, .app-right {48    display: flex;49    align-items: center;50  }51  .app-left { gap: 24px; }52  .app-title {53    font-size: 46px;54    font-weight: 500;55    color: #FFFFFF;56  }57  .app-right { margin-left: auto; gap: 36px; }58  .icon-btn {59    width: 60px;60    height: 60px;61    display: inline-flex;62    align-items: center;63    justify-content: center;64    color: #BDBDBD;65  }66  .icon-btn svg { width: 42px; height: 42px; }67 68  /* Content */69  .content {70    padding: 30px 36px;71  }72  .field-row {73    display: flex;74    align-items: baseline;75    gap: 26px;76    margin-bottom: 26px;77  }78  .label {79    width: 120px;80    color: #9E9E9E;81    font-size: 28px;82  }83  .value {84    color: #FFFFFF;85    font-size: 34px;86  }87  .chevron {88    margin-left: auto;89    color: #BDBDBD;90  }91  .chevron svg { width: 36px; height: 36px; }92 93  /* Suggestion card */94  .suggestion {95    margin-top: 22px;96    padding: 24px 18px;97    border-radius: 12px;98    background: #1A1A1A;99    display: flex;100    align-items: center;101    gap: 24px;102    border: 1px solid #2c2c2c;103    width: calc(100% - 72px);104  }105  .avatar {106    width: 90px;107    height: 90px;108    background: #E0E0E0;109    border: 1px solid #BDBDBD;110    border-radius: 50%;111    display: flex;112    align-items: center;113    justify-content: center;114    color: #757575;115    font-size: 18px;116  }117  .sugg-text {118    display: flex;119    flex-direction: column;120  }121  .sugg-title { font-size: 34px; color: #FFFFFF; }122  .sugg-sub { font-size: 26px; color: #9E9E9E; margin-top: 6px; }123 124  /* Spacer for body area */125  .body-area {126    margin-top: 40px;127    height: 900px;128    border-radius: 8px;129    border: 1px dashed #2c2c2c;130    display: flex;131    align-items: center;132    justify-content: center;133    color: #666;134    font-size: 28px;135  }136 137  /* Keyboard mock */138  .keyboard {139    position: absolute;140    left: 0;141    bottom: 0;142    width: 1080px;143    height: 940px;144    background: #1f1f1f;145    border-top: 1px solid #2b2b2b;146    padding: 26px 24px 30px;147    box-sizing: border-box;148  }149  .kb-tools {150    display: flex;151    gap: 40px;152    margin-bottom: 26px;153    align-items: center;154  }155  .tool {156    width: 72px; height: 72px;157    background: #2a2a2a;158    border-radius: 22px;159    display: flex; align-items: center; justify-content: center;160    color: #BDBDBD; font-size: 28px;161    border: 1px solid #3a3a3a;162  }163 164  .kb-row {165    display: grid;166    grid-template-columns: repeat(10, 1fr);167    gap: 14px;168    margin-bottom: 18px;169  }170  .key {171    height: 110px;172    background: #2a2a2a;173    border: 1px solid #3a3a3a;174    border-radius: 18px;175    color: #E0E0E0;176    display: flex; align-items: center; justify-content: center;177    font-size: 38px;178  }179  .key.wide { grid-column: span 2; }180  .kb-bottom {181    display: grid;182    grid-template-columns: 140px 1fr 140px 140px;183    gap: 14px;184    margin-top: 10px;185  }186  .space { height: 120px; background: #2a2a2a; border: 1px solid #3a3a3a; border-radius: 22px; }187  .enter {188    height: 120px; background: #3A3A3A; border-radius: 22px; display:flex; align-items:center; justify-content:center;189  }190  .enter svg { width: 44px; height: 44px; }191</style>192</head>193<body>194<div id="render-target">195 196  <!-- Status bar -->197  <div class="status-bar">198    <div>12:35</div>199    <div class="status-icons">200      <!-- simple wifi icon -->201      <svg class="sb-icon" viewBox="0 0 24 24">202        <path fill="#BDBDBD" d="M2 8c5-4 15-4 20 0l-2 2c-4-3-12-3-16 0L2 8zm4 4c3-2 9-2 12 0l-2 2c-2-1-6-1-8 0l-2-2zm4 4l2 2 2-2c-2-2-4-2-6 0z"/>203      </svg>204      <!-- battery icon -->205      <svg class="sb-icon" viewBox="0 0 24 24">206        <rect x="2" y="6" width="18" height="12" rx="2" fill="#BDBDBD"></rect>207        <rect x="21" y="9" width="2" height="6" fill="#BDBDBD"></rect>208      </svg>209    </div>210  </div>211 212  <!-- App bar -->213  <div class="app-bar">214    <div class="app-left">215      <div class="icon-btn">216        <!-- Back Arrow -->217        <svg viewBox="0 0 24 24">218          <path d="M15 5 L7 12 L15 19" stroke="#FFFFFF" stroke-width="2.5" fill="none" stroke-linecap="round" stroke-linejoin="round"></path>219        </svg>220      </div>221      <div class="app-title">Compose</div>222    </div>223    <div class="app-right">224      <div class="icon-btn">225        <!-- Paperclip -->226        <svg viewBox="0 0 24 24">227          <path d="M7 12c0-2 2-4 4-4s4 2 4 4l-6 6c-2 2-5 1-6-1s-1-4 1-6l8-8" stroke="#BDBDBD" stroke-width="2.2" fill="none" stroke-linecap="round"></path>228        </svg>229      </div>230      <div class="icon-btn">231        <!-- Send Arrow -->232        <svg viewBox="0 0 24 24">233          <path d="M3 20 L21 12 L3 4 L7 12 Z" fill="#76A9FA"></path>234        </svg>235      </div>236      <div class="icon-btn">237        <!-- More (three dots) -->238        <svg viewBox="0 0 24 24">239          <circle cx="5" cy="12" r="2.2" fill="#BDBDBD"></circle>240          <circle cx="12" cy="12" r="2.2" fill="#BDBDBD"></circle>241          <circle cx="19" cy="12" r="2.2" fill="#BDBDBD"></circle>242        </svg>243      </div>244    </div>245  </div>246 247  <!-- Content -->248  <div class="content">249    <div class="field-row">250      <div class="label">From</div>251      <div class="value">dbwscratch.test.id11@gmail.com</div>252    </div>253 254    <div class="field-row">255      <div class="label">To</div>256      <div class="value" style="color:#9FC4FF;">Rajsingh12@gmail.com</div>257      <div class="chevron">258        <svg viewBox="0 0 24 24">259          <path d="M6 9 L12 15 L18 9" stroke="#BDBDBD" stroke-width="2.5" fill="none" stroke-linecap="round" stroke-linejoin="round"></path>260        </svg>261      </div>262    </div>263 264    <div class="suggestion">265      <div class="avatar">[IMG]</div>266      <div class="sugg-text">267        <div class="sugg-title">rajSingh12@gmail.com</div>268        <div class="sugg-sub">rajSingh12@gmail.com</div>269      </div>270    </div>271 272    <div class="body-area">Email body</div>273  </div>274 275  <!-- Keyboard mock -->276  <div class="keyboard">277    <div class="kb-tools">278      <div class="tool">⌗</div>279      <div class="tool">☺</div>280      <div class="tool">GIF</div>281      <div class="tool">⚙</div>282      <div class="tool">G↔</div>283      <div class="tool">🎨</div>284      <div class="tool">285        <!-- Mic icon -->286        <svg viewBox="0 0 24 24">287          <rect x="8" y="4" width="8" height="10" rx="4" fill="#BDBDBD"></rect>288          <path d="M6 11c0 4 3 6 6 6s6-2 6-6" stroke="#BDBDBD" stroke-width="2" fill="none"></path>289          <rect x="11" y="17" width="2" height="4" fill="#BDBDBD"></rect>290        </svg>291      </div>292    </div>293 294    <div class="kb-row">295      <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>296      <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>297    </div>298    <div class="kb-row">299      <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>300      <div class="key">h</div><div class="key">j</div><div class="key">k</div><div class="key">l</div><div class="key">⌫</div>301    </div>302    <div class="kb-row">303      <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>304      <div class="key">n</div><div class="key">m</div><div class="key wide">,</div><div class="key">.</div><div class="key wide">↵</div>305    </div>306    <div class="kb-bottom">307      <div class="key">?123</div>308      <div class="space"></div>309      <div class="key">@</div>310      <div class="enter">311        <svg viewBox="0 0 24 24">312          <path d="M4 12h12l-4-4M16 12l-4 4" stroke="#FFFFFF" stroke-width="2.5" fill="none" stroke-linecap="round" stroke-linejoin="round"></path>313        </svg>314      </div>315    </div>316  </div>317 318</div>319</body>320</html>