GD-ML/AndroidCode

1<html>2<head>3<meta charset="UTF-8">4<title>Gmail Compose Mock</title>5<style>6  body { margin: 0; padding: 0; background: transparent; font-family: Roboto, Arial, Helvetica, sans-serif; }7  #render-target {8    position: relative;9    width: 1080px;10    height: 2400px;11    overflow: hidden;12    background: #FFFFFF;13    color: #222;14  }15 16  /* Status bar */17  .status-bar {18    height: 70px;19    padding: 0 28px;20    display: flex;21    align-items: center;22    justify-content: space-between;23    color: #3c3c3c;24    font-size: 28px;25    letter-spacing: 0.5px;26    background: #FAFAFA;27    border-bottom: 1px solid #eee;28  }29  .status-icons {30    display: flex;31    align-items: center;32    gap: 22px;33  }34  .dot { width: 8px; height: 8px; background:#666; border-radius: 50%; display: inline-block; }35 36  /* App bar */37  .app-bar {38    height: 140px;39    display: flex;40    align-items: center;41    padding: 0 28px;42    gap: 24px;43    background: #FFFFFF;44    border-bottom: 1px solid #eee;45  }46  .title { font-size: 56px; font-weight: 500; color:#222; flex: 1; }47 48  .icon-btn {49    width: 72px;50    height: 72px;51    display: flex;52    align-items: center;53    justify-content: center;54  }55  .icon-btn svg { width: 46px; height: 46px; fill: #444; }56 57  /* form rows */58  .row {59    height: 120px;60    display: flex;61    align-items: center;62    padding: 0 32px;63    font-size: 38px;64    border-bottom: 1px solid #eee;65    color: #555;66  }67  .row .label {68    width: 120px;69    color: #6b6b6b;70  }71  .row .content {72    flex: 1;73    color: #2d2d2d;74  }75  .row .hint { color: #9c9c9c; }76  .row .right {77    width: 70px;78    display: flex;79    justify-content: flex-end;80  }81 82  /* body */83  .message-area {84    position: relative;85    height: 1020px;86    padding: 28px 32px;87    font-size: 44px;88    line-height: 1.35;89    color: #111;90  }91 92  /* link suggestion bubble */93  .link-suggestion {94    position: absolute;95    left: 24px;96    bottom: 170px;97    display: flex;98    align-items: center;99    gap: 22px;100    background: #EDEAFE;101    border: 2px solid #D8D2FF;102    padding: 22px;103    border-radius: 36px;104    box-shadow: 0 6px 18px rgba(0,0,0,0.08);105  }106  .bubble-text {107    max-width: 480px;108    background: #FFFFFF;109    border: 2px solid #D8D2FF;110    color: #303030;111    padding: 18px 22px;112    border-radius: 28px;113    font-size: 30px;114  }115  .chip {116    background: #DDD7FF;117    padding: 20px 26px;118    border-radius: 26px;119    color: #303030;120    font-size: 28px;121    display: flex;122    align-items: center;123    gap: 12px;124  }125  .chip svg { width: 30px; height: 30px; fill: #4b4b4b; }126 127  /* Keyboard */128  .keyboard {129    position: absolute;130    left: 0;131    bottom: 0;132    width: 1080px;133    height: 820px;134    background: #F1EEF5;135    border-top: 1px solid #E0DFE7;136  }137  .kbd-toolbar {138    height: 88px;139    display: flex;140    align-items: center;141    justify-content: space-around;142    color: #555;143    font-size: 32px;144  }145  .keys {146    padding: 16px 18px;147  }148  .row-keys {149    display: grid;150    grid-template-columns: repeat(10, 1fr);151    gap: 14px;152    margin-top: 14px;153  }154  .key {155    height: 112px;156    background: #FFFFFF;157    border: 1px solid #DDD;158    border-radius: 18px;159    display: flex;160    align-items: center;161    justify-content: center;162    color: #1f1f1f;163    font-size: 40px;164  }165  .row-keys.top { grid-template-columns: repeat(10, 1fr); }166  .row-keys.mid { grid-template-columns: repeat(9, 1fr); padding: 0 58px; }167  .row-keys.low { grid-template-columns: 1.3fr repeat(7, 1fr) 1.3fr; }168  .space-row {169    display: grid;170    grid-template-columns: 1.2fr 1.2fr 5fr 1.2fr 1.2fr;171    gap: 14px;172    margin: 16px 18px 0 18px;173  }174  .gesture {175    position: absolute; left: 50%; transform: translateX(-50%);176    bottom: 18px; width: 420px; height: 10px; background: #BDBDBD; border-radius: 6px;177  }178</style>179</head>180<body>181<div id="render-target">182 183  <!-- Status bar -->184  <div class="status-bar">185    <div>8:48</div>186    <div class="status-icons">187      <span>ov</span>188      <span class="dot"></span>189      <span>99</span>190      <span class="dot"></span>191      <svg width="36" height="36" viewBox="0 0 24 24"><path fill="#555" d="M12 20c4.4 0 8-3.6 8-8h-2a6 6 0 0 1-12 0H4c0 4.4 3.6 8 8 8z"/></svg>192      <svg width="36" height="36" viewBox="0 0 24 24"><path fill="#555" d="M7 20h10l1-8H6l1 8zm2-14h6l1 4H8l1-4z"/></svg>193    </div>194  </div>195 196  <!-- App bar -->197  <div class="app-bar">198    <div class="icon-btn">199      <svg viewBox="0 0 24 24"><path d="M15.41 7.41 14 6l-6 6 6 6 1.41-1.41L10.83 12z"/></svg>200    </div>201    <div class="title">Compose</div>202    <div class="icon-btn">203      <svg viewBox="0 0 24 24"><path d="M2 12l19-9-7 9 7 9-19-9z"/></svg>204    </div>205    <div class="icon-btn">206      <svg viewBox="0 0 24 24"><path d="M2 4v16l20-8L2 4z"/></svg>207    </div>208    <div class="icon-btn">209      <svg viewBox="0 0 24 24"><circle cx="5" cy="12" r="2.2"/><circle cx="12" cy="12" r="2.2"/><circle cx="19" cy="12" r="2.2"/></svg>210    </div>211  </div>212 213  <!-- From -->214  <div class="row">215    <div class="label">From</div>216    <div class="content" style="color:#333;">dbwscratch.test.id9@gmail.com</div>217  </div>218 219  <!-- To -->220  <div class="row">221    <div class="label">To</div>222    <div class="content hint"> </div>223    <div class="right">224      <svg width="36" height="36" viewBox="0 0 24 24"><path fill="#666" d="M7 10l5 5 5-5z"/></svg>225    </div>226  </div>227 228  <!-- Subject -->229  <div class="row">230    <div class="label">Subject</div>231    <div class="content hint">Subject</div>232  </div>233 234  <!-- Message body -->235  <div class="message-area">236    <div style="white-space: normal;">237      https://mobidrive.com/sharelink/i/4Vymz4RduVf9ADmNfDxiQL6rgYnEMuQNb7CqdLVMIuwF238    </div>239 240    <!-- link suggestion bubble -->241    <div class="link-suggestion">242      <div class="bubble-text">243        https://mobidrive.com/sharelink/i/4Vymz4Rd...244      </div>245      <div class="chip">246        <svg viewBox="0 0 24 24"><path d="M10 13h4v-2h-4v2zm-7 8h18v-2H3v2zM3 3v2h18V3H3zm0 8h18V9H3v2z"/></svg>247        Share248      </div>249      <div class="chip">250        <svg viewBox="0 0 24 24"><path d="M4 18h16v-2H4v2zM4 8h16V6H4v2zm0 5h16v-2H4v2z"/></svg>251        Paste as link252      </div>253    </div>254  </div>255 256  <!-- Keyboard mock -->257  <div class="keyboard">258    <div class="kbd-toolbar">259      <span>🌐</span>260      <span>GIF</span>261      <span>⚙️</span>262      <span>G↔︎</span>263      <span>🎨</span>264      <span>🎤</span>265    </div>266    <div class="keys">267      <div class="row-keys top">268        <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><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>269      </div>270      <div class="row-keys mid">271        <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><div class="key">h</div><div class="key">j</div><div class="key">k</div><div class="key">l</div>272      </div>273      <div class="row-keys low">274        <div class="key">?123</div>275        <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><div class="key">n</div><div class="key">m</div>276        <div class="key">⌫</div>277      </div>278    </div>279    <div class="space-row">280      <div class="key">@</div>281      <div class="key">🙂</div>282      <div class="key">space</div>283      <div class="key">.</div>284      <div class="key">↵</div>285    </div>286    <div class="gesture"></div>287  </div>288 289</div>290</body>291</html>