GD-ML/AndroidCode

1<!DOCTYPE html>2<html>3<head>4<meta charset="utf-8">5<meta name="viewport" content="width=1080, initial-scale=1.0">6<title>Compose - Gmail Mock</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: #FAFBF4;15    font-family: Arial, Helvetica, sans-serif;16    color: #1f1f1f;17  }18 19  /* Status bar */20  .status-bar {21    height: 90px;22    padding: 0 32px;23    display: flex;24    align-items: center;25    justify-content: space-between;26    color: #3d3d3d;27    font-size: 32px;28  }29  .status-left { display: flex; align-items: center; gap: 24px; }30  .status-right { display: flex; align-items: center; gap: 22px; }31  .icon {32    width: 42px; height: 42px; display: inline-flex; align-items: center; justify-content: center;33  }34  .icon svg { width: 100%; height: 100%; fill: #3d3d3d; }35 36  /* Header */37  .compose-header {38    height: 140px;39    display: flex;40    align-items: center;41    padding: 0 24px;42    border-bottom: 1px solid #E6E8E2;43  }44  .hdr-left { display: flex; align-items: center; gap: 20px; }45  .hdr-right { margin-left: auto; display: flex; align-items: center; gap: 24px; }46  .back-btn { width: 64px; height: 64px; border-radius: 32px; display: flex; align-items: center; justify-content: center; }47  .title { font-size: 52px; font-weight: 600; letter-spacing: 0.2px; }48 49  /* Fields */50  .field-row {51    padding: 22px 32px;52    display: flex;53    align-items: center;54    border-bottom: 1px solid #E6E8E2;55    font-size: 36px;56  }57  .field-label {58    width: 110px;59    color: #5f5f5f;60  }61  .field-value {62    flex: 1;63    color: #222;64  }65  .dropdown {66    width: 40px; height: 40px; display: flex; align-items: center; justify-content: center;67  }68  .subject-row {69    padding: 26px 32px;70    font-size: 40px;71    border-bottom: 1px solid #E6E8E2;72  }73 74  /* Message body */75  .message-body {76    padding: 26px 32px 120px 32px;77    font-size: 40px;78    line-height: 1.4;79    color: #1f1f1f;80  }81 82  /* Keyboard */83  .keyboard {84    position: absolute;85    left: 0;86    right: 0;87    bottom: 80px;88    height: 700px;89    background: #EFF2E9;90    border-top: 1px solid #DADFD3;91    padding: 20px 24px 28px 24px;92  }93  .kb-top {94    height: 92px;95    display: flex;96    align-items: center;97    gap: 22px;98    padding: 0 8px 8px;99    color: #555;100    font-size: 32px;101  }102  .kb-top .pill {103    background: #F7F9F3;104    border: 1px solid #D9DECF;105    border-radius: 18px;106    padding: 10px 16px;107    display: inline-flex;108    align-items: center;109    gap: 10px;110  }111  .keys {112    display: flex;113    flex-direction: column;114    gap: 18px;115    margin-top: 6px;116  }117  .row {118    display: flex;119    justify-content: center;120    gap: 14px;121  }122  .key {123    width: 86px; height: 100px;124    background: #FFFFFF;125    border: 1px solid #E5E8E2;126    border-radius: 18px;127    display: flex;128    align-items: center;129    justify-content: center;130    color: #2b2b2b;131    font-size: 44px;132    box-sizing: border-box;133  }134  .key.wide { width: 140px; }135  .key.xwide { width: 190px; }136  .key.action {137    background: #DCE6D1;138    border-color: #C7D3BD;139    color: #2b2b2b;140  }141 142  /* Home indicator */143  .home-indicator {144    position: absolute;145    bottom: 24px;146    left: 50%;147    transform: translateX(-50%);148    width: 320px;149    height: 12px;150    background: #9BA09A;151    border-radius: 6px;152    opacity: 0.6;153  }154</style>155</head>156<body>157<div id="render-target">158 159  <!-- Status Bar -->160  <div class="status-bar">161    <div class="status-left">162      <div>3:59</div>163      <div class="icon">164        <!-- globe icon -->165        <svg viewBox="0 0 24 24"><circle cx="12" cy="12" r="9"/><path d="M3 12h18M12 3a15 15 0 0 0 0 18M12 3a15 15 0 0 1 0 18" stroke="#FAFBF4" stroke-width="1.5" fill="none"/></svg>166      </div>167      <div>32°</div>168      <div class="icon">169        <!-- cloud -->170        <svg viewBox="0 0 24 24"><path d="M7 15h9a4 4 0 0 0 0-8 5 5 0 0 0-9 2 3 3 0 0 0 0 6z"/></svg>171      </div>172    </div>173    <div class="status-right">174      <div class="icon">175        <!-- wifi -->176        <svg viewBox="0 0 24 24"><path d="M12 18a1.5 1.5 0 1 0 0 3 1.5 1.5 0 0 0 0-3zm-6-6a10 10 0 0 1 12 0m-3 3a6 6 0 0 0-6 0" stroke="#3d3d3d" stroke-width="2" fill="none" stroke-linecap="round"/></svg>177      </div>178      <div class="icon">179        <!-- battery -->180        <svg viewBox="0 0 28 24"><rect x="2" y="5" width="20" height="14" rx="2" ry="2" stroke="#3d3d3d" fill="none" stroke-width="2"/><rect x="4" y="7" width="14" height="10" fill="#3d3d3d"/><rect x="22" y="9" width="3" height="6" fill="#3d3d3d"/></svg>181      </div>182    </div>183  </div>184 185  <!-- Compose Header -->186  <div class="compose-header">187    <div class="hdr-left">188      <div class="back-btn">189        <svg viewBox="0 0 24 24"><path d="M15 5l-7 7 7 7" stroke="#1f1f1f" stroke-width="2.5" fill="none" stroke-linecap="round" stroke-linejoin="round"/></svg>190      </div>191      <div class="title">Compose</div>192    </div>193    <div class="hdr-right">194      <div class="icon" title="Attach">195        <svg viewBox="0 0 24 24"><path d="M7 12l6-6a4 4 0 1 1 6 6l-8 8a5 5 0 1 1-7-7l7-7" stroke="#1f1f1f" stroke-width="2" fill="none" stroke-linecap="round"/></svg>196      </div>197      <div class="icon" title="Send">198        <svg viewBox="0 0 24 24"><path d="M3 21l18-9L3 3l3 7 9 2-9 2z" fill="#1f1f1f"/></svg>199      </div>200      <div class="icon" title="More">201        <svg viewBox="0 0 24 24"><circle cx="12" cy="5" r="2"/><circle cx="12" cy="12" r="2"/><circle cx="12" cy="19" r="2"/></svg>202      </div>203    </div>204  </div>205 206  <!-- From -->207  <div class="field-row">208    <div class="field-label">From</div>209    <div class="field-value">dbwscratch.test.id2@gmail.com</div>210  </div>211 212  <!-- To -->213  <div class="field-row">214    <div class="field-label">To</div>215    <div class="field-value" style="color:#9aa19a">|</div>216    <div class="dropdown">217      <svg viewBox="0 0 24 24"><path d="M6 9l6 6 6-6" stroke="#3d3d3d" stroke-width="2.5" fill="none" stroke-linecap="round" stroke-linejoin="round"/></svg>218    </div>219  </div>220 221  <!-- Subject -->222  <div class="subject-row">223    Weather&Radar - know your weather224  </div>225 226  <!-- Message body -->227  <div class="message-body">228    Weather&Radar - know your weather<br>229    https://app.weatherandradar.com/U13Q/enUSShare230  </div>231 232  <!-- Keyboard -->233  <div class="keyboard">234    <div class="kb-top">235      <div class="pill">236        <svg width="24" height="24" viewBox="0 0 24 24"><path d="M3 3h7v7H3zM14 3h7v7h-7zM3 14h7v7H3zM14 14h7v7h-7z" fill="#6FAE74"/></svg>237      </div>238      <div class="pill">239        <svg width="24" height="24" viewBox="0 0 24 24"><circle cx="12" cy="9" r="4" fill="#777"/><path d="M4 21a8 8 0 0 1 16 0" stroke="#777" stroke-width="2" fill="none"/></svg>240        <span>Emoji</span>241      </div>242      <div class="pill">GIF</div>243      <div class="pill">244        <svg width="24" height="24" viewBox="0 0 24 24"><circle cx="12" cy="12" r="9" stroke="#777" stroke-width="2" fill="none"/><circle cx="12" cy="12" r="3" fill="#777"/></svg>245      </div>246      <div class="pill">247        <svg width="24" height="24" viewBox="0 0 24 24"><path d="M3 6h18M3 12h18M3 18h18" stroke="#777" stroke-width="2"/></svg>248        <span>G</span>249      </div>250      <div class="pill">251        <svg width="24" height="24" viewBox="0 0 24 24"><circle cx="12" cy="12" r="9" stroke="#777" stroke-width="2" fill="none"/><path d="M12 6v6l4 2" stroke="#777" stroke-width="2" fill="none"/></svg>252      </div>253      <div class="pill">254        <svg width="24" height="24" viewBox="0 0 24 24"><path d="M6 6l12 12M6 18L18 6" stroke="#777" stroke-width="2"/></svg>255      </div>256    </div>257 258    <div class="keys">259      <div class="row">260        <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>261        <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>262      </div>263      <div class="row">264        <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>265        <div class="key">h</div><div class="key">j</div><div class="key">k</div><div class="key">l</div>266      </div>267      <div class="row">268        <div class="key action wide">⇧</div>269        <div class="key">z</div><div class="key">x</div><div class="key">c</div><div class="key">v</div>270        <div class="key">b</div><div class="key">n</div><div class="key">m</div>271        <div class="key action wide">⌫</div>272      </div>273      <div class="row">274        <div class="key action wide">?123</div>275        <div class="key">@</div>276        <div class="key">☺</div>277        <div class="key xwide"></div>278        <div class="key">.</div>279        <div class="key action wide">↵</div>280      </div>281    </div>282  </div>283 284  <!-- Home indicator -->285  <div class="home-indicator"></div>286</div>287</body>288</html>