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    position: relative;10    width: 1080px;11    height: 2400px;12    overflow: hidden;13    background: #FFFFFF;14    color: #222;15  }16 17  /* Status bar */18  .status-bar {19    height: 100px;20    padding: 0 36px;21    display: flex;22    align-items: center;23    font-size: 40px;24    color: #2b2b2b;25  }26  .status-icons {27    margin-left: auto;28    display: flex;29    align-items: center;30    gap: 26px;31  }32  .status-dot { width: 18px; height: 18px; background:#666; border-radius: 50%; }33  .signal {34    width: 40px; height: 30px; border: 3px solid #555; border-top: none; border-right: none; transform: rotate(-45deg);35  }36  .battery {37    width: 70px; height: 34px; border: 4px solid #444; border-radius: 6px; position: relative;38  }39  .battery::after {40    content:""; position:absolute; right:-10px; top:10px; width:8px; height:14px; background:#444; border-radius:2px;41  }42  .battery-fill { position:absolute; left:6px; top:6px; width:50px; height:22px; background:#4caf50; }43 44  /* App bar */45  .appbar {46    height: 130px;47    display: flex;48    align-items: center;49    padding: 0 32px;50    border-bottom: 1px solid #eaeaea;51  }52  .title { font-size: 52px; font-weight: 600; margin-left: 18px; }53  .app-actions { margin-left: auto; display: flex; align-items: center; gap: 40px; }54  .icon-btn svg { width: 52px; height: 52px; fill: #333; }55 56  /* Fields */57  .field {58    padding: 30px 40px;59    border-bottom: 1px solid #eee;60  }61  .label { font-size: 38px; color: #777; margin-bottom: 18px; }62  .value-row {63    display: flex;64    align-items: center;65    gap: 16px;66  }67  .value {68    font-size: 46px;69    color: #111;70  }71  .dropdown svg { width: 40px; height: 40px; fill: #666; }72 73  /* Contact chip row */74  .chip-row { padding: 20px 40px 24px 40px; }75  .chip {76    display: flex;77    align-items: center;78    gap: 24px;79  }80  .avatar {81    width: 96px; height: 96px; border-radius: 50%;82    background: #B24A2E; color: #fff; display: flex; justify-content: center; align-items: center;83    font-size: 60px; font-weight: 700;84  }85  .contact-text { display: flex; flex-direction: column; }86  .contact-text .primary { font-size: 44px; }87  .contact-text .secondary { font-size: 34px; color: #666; }88 89  /* Compose body area */90  .compose-area {91    height: 1160px;92    background: #ffffff;93  }94 95  /* Keyboard */96  .keyboard {97    position: absolute;98    left: 0; right: 0; bottom: 0;99    height: 760px;100    background: #eef2e9;101    border-top-left-radius: 24px;102    border-top-right-radius: 24px;103    box-shadow: 0 -6px 16px rgba(0,0,0,0.06);104    padding: 26px 26px 26px 26px;105  }106  .kb-top {107    display: flex;108    align-items: center;109    gap: 50px;110    margin-bottom: 24px;111  }112  .kb-pill {113    width: 88px; height: 88px; background: #dbe6d1; border-radius: 22px; display: flex; align-items: center; justify-content: center;114    color: #333; font-size: 34px; border: 1px solid #cbd5c3;115  }116  .gif { font-weight: 700; letter-spacing: 2px; }117  .keyboard-row {118    display: flex; gap: 16px; justify-content: space-between;119    margin-bottom: 18px;120  }121  .key {122    flex: 1;123    height: 120px;124    background: #fff;125    border: 1px solid #e2e2e2;126    border-radius: 28px;127    display: flex; align-items: center; justify-content: center;128    font-size: 54px; color: #222;129  }130  .key.small { flex: 0 0 96px; }131  .key.wide { flex: 2; }132  .key.space { flex: 5; font-size: 40px; color: #888; }133  .round-action {134    width: 120px; height: 120px; background: #9fd19f; border-radius: 36px;135    display: flex; align-items: center; justify-content: center; border: 1px solid #88c588;136  }137  .round-action svg { width: 50px; height: 50px; fill: #fff; }138  .backspace {139    width: 120px; height: 120px; background: #d7e7d0; border-radius: 28px;140    display: flex; align-items: center; justify-content: center; border: 1px solid #c6d9bf;141  }142  .backspace svg { width: 52px; height: 52px; fill: #333; }143 144  /* Utility icons */145  .icon {146    width: 70px; height: 70px; display:flex; align-items:center; justify-content:center;147  }148</style>149</head>150<body>151<div id="render-target">152 153  <!-- Status Bar -->154  <div class="status-bar">155    <div>8:34</div>156    <div class="status-icons">157      <div class="status-dot"></div>158      <div class="status-dot"></div>159      <div class="status-dot"></div>160      <div class="signal"></div>161      <div class="battery">162        <div class="battery-fill"></div>163      </div>164    </div>165  </div>166 167  <!-- App Bar -->168  <div class="appbar">169    <div class="icon-btn">170      <svg viewBox="0 0 24 24"><path d="M15.5 19l-7-7 7-7 1.5 1.5-5.5 5.5 5.5 5.5z"/></svg>171    </div>172    <div class="title">Compose</div>173    <div class="app-actions">174      <div class="icon-btn">175        <svg viewBox="0 0 24 24"><path d="M16.5 6.5l-9 9 1.4 1.4 9-9-1.4-1.4zm-7.1-2.9L6 7l11 11 3.4-3.4L9.4 3.6z"/></svg>176      </div>177      <div class="icon-btn">178        <svg viewBox="0 0 24 24"><path d="M3 20l18-8L3 4v6l12 2-12 2v6z"/></svg>179      </div>180      <div class="icon-btn">181        <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>182      </div>183    </div>184  </div>185 186  <!-- From field -->187  <div class="field">188    <div class="label">From</div>189    <div class="value-row">190      <div class="value">dbwscratch.test.id2@gmail.com</div>191    </div>192  </div>193 194  <!-- To field -->195  <div class="field">196    <div class="label">To</div>197    <div class="value-row">198      <div class="value">dbwscratch.test.id3@gmail.com</div>199      <div class="dropdown">200        <svg viewBox="0 0 24 24"><path d="M7 10l5 5 5-5z"/></svg>201      </div>202    </div>203  </div>204 205  <!-- Contact chip -->206  <div class="chip-row">207    <div class="chip">208      <div class="avatar">d</div>209      <div class="contact-text">210        <div class="primary">dbwscratch.test.id3@gmail.com</div>211        <div class="secondary">dbwscratch.test.id3@gmail.com</div>212      </div>213    </div>214  </div>215 216  <!-- Compose body blank area -->217  <div class="compose-area"></div>218 219  <!-- Keyboard -->220  <div class="keyboard">221    <div class="kb-top">222      <div class="kb-pill">▣</div>223      <div class="kb-pill">☺</div>224      <div class="kb-pill gif">GIF</div>225      <div class="kb-pill">⚙</div>226      <div class="kb-pill">G↔</div>227      <div class="kb-pill">🎨</div>228      <div class="kb-pill">🔇</div>229    </div>230 231    <div class="keyboard-row">232      <div class="key">q</div>233      <div class="key">w</div>234      <div class="key">e</div>235      <div class="key">r</div>236      <div class="key">t</div>237      <div class="key">y</div>238      <div class="key">u</div>239      <div class="key">i</div>240      <div class="key">o</div>241      <div class="key">p</div>242      <div class="key small">0</div>243    </div>244 245    <div class="keyboard-row">246      <div class="key">a</div>247      <div class="key">s</div>248      <div class="key">d</div>249      <div class="key">f</div>250      <div class="key">g</div>251      <div class="key">h</div>252      <div class="key">j</div>253      <div class="key">k</div>254      <div class="key">l</div>255    </div>256 257    <div class="keyboard-row">258      <div class="key">z</div>259      <div class="key">x</div>260      <div class="key">c</div>261      <div class="key">v</div>262      <div class="key">b</div>263      <div class="key">n</div>264      <div class="key">m</div>265      <div class="backspace">266        <svg viewBox="0 0 24 24"><path d="M22 7v10H8l-5-5 5-5h14zm-6 3l-3 3 3 3 1.4-1.4-1.6-1.6 1.6-1.6L16 10z"/></svg>267      </div>268    </div>269 270    <div class="keyboard-row">271      <div class="key small">?123</div>272      <div class="key small">@</div>273      <div class="key small">☺</div>274      <div class="key space">space</div>275      <div class="key small">.</div>276      <div class="round-action">277        <svg viewBox="0 0 24 24"><path d="M5 12l7 7V5l-7 7z"/></svg>278      </div>279    </div>280  </div>281 282</div>283</body>284</html>