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 - Mock</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: #121212;14    color: #EDEDED;15  }16 17  /* Status bar */18  .status-bar {19    position: absolute;20    top: 0;21    left: 0;22    width: 100%;23    height: 96px;24    color: #EDEDED;25    display: flex;26    align-items: center;27    padding: 0 36px;28    box-sizing: border-box;29    font-size: 38px;30    letter-spacing: 1px;31  }32  .status-bar .time { flex: 1; }33  .status-icons { display: flex; align-items: center; gap: 22px; }34  .status-icons svg { width: 44px; height: 44px; fill: #EDEDED; opacity: 0.9; }35 36  /* App bar */37  .app-bar {38    position: absolute;39    top: 96px;40    left: 0;41    width: 100%;42    height: 128px;43    display: flex;44    align-items: center;45    padding: 0 28px;46    box-sizing: border-box;47  }48  .app-bar .left,49  .app-bar .right { display: flex; align-items: center; }50  .app-bar .left { gap: 26px; }51  .app-bar .right { gap: 44px; margin-left: auto; }52  .app-bar svg { width: 64px; height: 64px; fill: #EDEDED; }53 54  /* Compose content */55  .compose-area {56    position: absolute;57    left: 0;58    top: 224px;59    width: 100%;60    bottom: 880px; /* leaves room for keyboard area */61    padding: 0 40px;62    box-sizing: border-box;63    overflow: hidden;64  }65 66  .field-row {67    display: flex;68    align-items: center;69    padding: 22px 0;70    border-bottom: 1px solid rgba(255,255,255,0.06);71  }72  .label {73    min-width: 130px;74    color: #bdbdbd;75    font-size: 36px;76  }77  .value {78    flex: 1;79    font-size: 40px;80    color: #eaeaea;81  }82  .dropdown {83    width: 40px; height: 40px;84    margin-left: 12px;85  }86  .to-input {87    font-size: 52px;88    padding: 12px 0 10px 0;89  }90 91  /* Contact chip */92  .chip {93    display: flex;94    align-items: center;95    gap: 28px;96    padding: 34px 0;97  }98  .avatar {99    width: 96px; height: 96px;100    border-radius: 48px;101    background: #b33a53;102    display: flex;103    align-items: center;104    justify-content: center;105    color: #f3d6db;106    font-weight: bold;107    font-size: 48px;108  }109  .chip .email-main {110    font-size: 46px;111    color: #e8e8e8;112  }113  .chip .email-sub {114    margin-top: 6px;115    font-size: 36px;116    color: #a9a9a9;117  }118 119  /* Big empty message body area */120  .message-body {121    margin-top: 18px;122    height: calc(100% - 350px);123    border-radius: 10px;124    background: rgba(255,255,255,0.02);125  }126 127  /* Keyboard mock */128  .keyboard {129    position: absolute;130    left: 0;131    bottom: 0;132    width: 100%;133    height: 880px;134    background: #1e1f22;135    box-shadow: 0 -2px 0 rgba(255,255,255,0.05) inset;136    padding: 28px 24px 110px;137    box-sizing: border-box;138  }139  .kb-top-row {140    display: flex;141    justify-content: space-between;142    margin-bottom: 28px;143    padding: 0 8px;144  }145  .kb-icon {146    width: 84px; height: 84px; border-radius: 22px;147    background: #2a2c31;148  }149  .keys {150    display: grid;151    grid-template-columns: repeat(10, 1fr);152    gap: 14px;153  }154  .key {155    height: 120px;156    border-radius: 22px;157    background: #2a2c31;158  }159  .keys.short { grid-template-columns: repeat(9, 1fr); margin-top: 16px; }160  .keys.shorter { grid-template-columns: repeat(8, 1fr); margin-top: 16px; }161  .space-row {162    display: grid;163    grid-template-columns: 140px 1fr 140px;164    gap: 16px;165    margin-top: 18px;166  }167  .pill {168    position: absolute;169    width: 520px;170    height: 10px;171    border-radius: 5px;172    left: 50%;173    transform: translateX(-50%);174    bottom: 18px;175    background: #EDEDED;176    opacity: 0.9;177  }178</style>179</head>180<body>181<div id="render-target">182 183  <!-- Status Bar -->184  <div class="status-bar">185    <div class="time">7:44</div>186    <div class="status-icons">187      <!-- Simple Wi‑Fi icon -->188      <svg viewBox="0 0 24 24">189        <path d="M12 20a2 2 0 1 0 0-4 2 2 0 0 0 0 4zm-6-6 1.5 1.5A7 7 0 0 1 18.5 15L20 13.5A9 9 0 0 0 6 14zm-4-5 1.6 1.6A13 13 0 0 1 20.4 10L22 8.4A15 15 0 0 0 2 9z"/>190      </svg>191      <!-- Battery icon -->192      <svg viewBox="0 0 24 24">193        <rect x="2" y="7" width="18" height="10" rx="2"></rect>194        <rect x="20" y="10" width="2" height="4"></rect>195      </svg>196    </div>197  </div>198 199  <!-- App Bar -->200  <div class="app-bar">201    <div class="left">202      <!-- Back arrow -->203      <svg viewBox="0 0 24 24">204        <path d="M15 3 6 12l9 9 1.5-1.5L9 12l7.5-7.5z"/>205      </svg>206    </div>207    <div class="right">208      <!-- Attach (paperclip) -->209      <svg viewBox="0 0 24 24">210        <path d="M7 13.5V7a5 5 0 0 1 10 0v8.5a4.5 4.5 0 1 1-9 0V7h2v8.5a2.5 2.5 0 1 0 5 0V7a3 3 0 0 0-6 0v6.5H7z"/>211      </svg>212      <!-- Send -->213      <svg viewBox="0 0 24 24">214        <path d="M2 21 23 12 2 3v7l15 2-15 2z"/>215      </svg>216      <!-- Kebab menu -->217      <svg viewBox="0 0 24 24">218        <circle cx="12" cy="5" r="2"></circle>219        <circle cx="12" cy="12" r="2"></circle>220        <circle cx="12" cy="19" r="2"></circle>221      </svg>222    </div>223  </div>224 225  <!-- Compose Content -->226  <div class="compose-area">227    <div class="field-row">228      <div class="label">From</div>229      <div class="value">dbwscratch.test.id11@gmail.com</div>230    </div>231 232    <div class="field-row" style="align-items:flex-end; border-bottom: none; padding-top: 16px; padding-bottom: 8px;">233      <div class="label">To</div>234      <div class="value to-input">lucaskramer733@gmail.com</div>235      <svg class="dropdown" viewBox="0 0 24 24">236        <path fill="#EDEDED" d="M7 10l5 5 5-5z"></path>237      </svg>238    </div>239 240    <!-- Contact Chip -->241    <div class="chip">242      <div class="avatar">I</div>243      <div>244        <div class="email-main">lucaskramer733@gmail.com</div>245        <div class="email-sub">lucaskramer733@gmail.com</div>246      </div>247    </div>248 249    <!-- Message body placeholder -->250    <div class="message-body"></div>251  </div>252 253  <!-- Keyboard Mock -->254  <div class="keyboard">255    <div class="kb-top-row">256      <div class="kb-icon"></div>257      <div class="kb-icon"></div>258      <div class="kb-icon"></div>259      <div class="kb-icon"></div>260      <div class="kb-icon"></div>261      <div class="kb-icon"></div>262    </div>263 264    <div class="keys">265      <div class="key"></div><div class="key"></div><div class="key"></div><div class="key"></div><div class="key"></div>266      <div class="key"></div><div class="key"></div><div class="key"></div><div class="key"></div><div class="key"></div>267    </div>268    <div class="keys short">269      <div class="key"></div><div class="key"></div><div class="key"></div><div class="key"></div><div class="key"></div>270      <div class="key"></div><div class="key"></div><div class="key"></div><div class="key"></div>271    </div>272    <div class="keys shorter">273      <div class="key"></div><div class="key"></div><div class="key"></div><div class="key"></div>274      <div class="key"></div><div class="key"></div><div class="key"></div><div class="key"></div>275    </div>276    <div class="space-row">277      <div class="key"></div>278      <div class="key" style="height:120px;"></div>279      <div class="key"></div>280    </div>281  </div>282 283  <!-- Bottom navigation pill -->284  <div class="pill"></div>285</div>286</body>287</html>