GD-ML/AndroidCode

1<html>2<head>3<meta charset="UTF-8">4<meta name="viewport" content="width=1080, initial-scale=1">5<title>Gmail Compose Mock</title>6<style>7  body { margin:0; padding:0; background: transparent; font-family: Roboto, Arial, sans-serif; }8  #render-target {9    position: relative;10    width: 1080px;11    height: 2400px;12    overflow: hidden;13    background: #ffffff;14    color: #202124;15  }16 17  /* Status bar */18  .status-bar {19    position: absolute;20    top: 0;21    left: 0;22    width: 1080px;23    height: 96px;24    padding: 0 28px;25    box-sizing: border-box;26    display: flex;27    align-items: center;28    justify-content: space-between;29    color: #3c4043;30    font-size: 34px;31  }32  .status-right {33    display: flex;34    align-items: center;35    gap: 22px;36  }37  .dot { width:10px; height:10px; background:#666; border-radius:50%; display:inline-block; }38 39  /* Top app bar */40  .app-bar {41    position: absolute;42    top: 96px;43    left: 0;44    width: 1080px;45    height: 152px;46    display: flex;47    align-items: center;48    padding: 0 24px 0 24px;49    box-sizing: border-box;50    box-shadow: 0 1px 2px rgba(0,0,0,0.1);51    background: #fff;52  }53  .app-left {54    display: flex;55    align-items: center;56    gap: 26px;57  }58  .app-title {59    font-size: 52px;60    font-weight: 500;61    letter-spacing: 0.2px;62  }63  .app-actions {64    margin-left: auto;65    display: flex;66    align-items: center;67    gap: 34px;68  }69  .icon-btn { width: 60px; height: 60px; display:flex; align-items:center; justify-content:center; }70 71  /* Form rows */72  .section {73    position: absolute;74    left: 0;75    width: 1080px;76    padding: 0 36px;77    box-sizing: border-box;78  }79  .row {80    display: flex;81    align-items: center;82    gap: 28px;83  }84  .label {85    width: 120px;86    color: #5f6368;87    font-size: 36px;88  }89  .value {90    font-size: 38px;91    color: #202124;92  }93 94  .from { top: 248px; height: 120px; }95  .to    { top: 368px; height: 140px; }96  .subject { top: 508px; height: 120px; }97 98  /* To chip */99  .chip {100    display: inline-flex;101    align-items: center;102    gap: 18px;103    padding: 10px 20px 10px 10px;104    border: 2px solid #DADCE0;105    border-radius: 45px;106    height: 82px;107    box-sizing: border-box;108  }109  .avatar {110    width: 72px;111    height: 72px;112    border-radius: 50%;113    background: #8e8cf5;114    color: white;115    display: flex; align-items: center; justify-content: center;116    font-weight: 700; font-size: 40px;117    text-transform: lowercase;118  }119  .email-text { font-size: 36px; color: #202124; white-space: nowrap; }120  .caret {121    width: 28px; height: 28px;122    margin-left: 10px;123  }124 125  /* Subject placeholder */126  .subject .value {127    color: #8f9092;128  }129 130  /* Message body */131  .body-area {132    position: absolute;133    top: 628px;134    left: 0;135    width: 1080px;136    height: 972px;137    padding: 24px 36px;138    box-sizing: border-box;139    font-size: 40px;140    line-height: 56px;141    color: #202124;142  }143  .cursor {144    display:inline-block;145    width: 4px;146    height: 60px;147    background: #5f5fff;148    vertical-align: -10px;149    border-radius: 2px;150    margin-left: 6px;151  }152 153  /* Keyboard mock */154  .keyboard {155    position: absolute;156    bottom: 0;157    left: 0;158    width: 1080px;159    height: 804px;160    background: #F3F0F6;161    border-top-left-radius: 24px;162    border-top-right-radius: 24px;163    box-shadow: 0 -2px 6px rgba(0,0,0,0.08) inset;164    padding: 22px 24px;165    box-sizing: border-box;166  }167  .kb-toolbar {168    height: 96px;169    display: flex;170    align-items: center;171    gap: 28px;172    padding: 0 6px;173  }174  .kb-tool {175    width: 84px; height: 84px; border-radius: 18px; background: #E8E6ED;176  }177  .kb-rows { margin-top: 14px; display: grid; grid-template-rows: repeat(4, 1fr); gap: 16px; height: calc(100% - 110px); }178  .kb-row { display: grid; grid-template-columns: repeat(10, 1fr); gap: 12px; }179  .key {180    background: #ffffff;181    border: 1px solid #E0E0E0;182    border-radius: 18px;183  }184  .key.span-2 { grid-column: span 2; }185  .space-row {186    display: grid; grid-template-columns: 1.2fr 1fr 2.8fr 1fr 1.2fr; gap: 12px;187  }188</style>189</head>190<body>191<div id="render-target">192 193  <!-- Status bar -->194  <div class="status-bar">195    <div style="display:flex; align-items:center; gap:18px;">196      <div style="font-weight:600;">8:50</div>197      <span class="dot"></span>198    </div>199    <div class="status-right">200      <span style="font-size:28px; color:#6b6f73;">ovo</span>201      <span style="border:1px solid #c5c5c5; border-radius:6px; padding:2px 8px; font-size:26px; color:#6b6f73;">99</span>202      <!-- Simple signal/battery glyphs -->203      <svg width="40" height="40" viewBox="0 0 24 24"><path fill="#666" d="M2 20h2v-6H2v6zm4 0h2v-9H6v9zm4 0h2v-12h-2v12zm4 0h2V5h-2v15z"/></svg>204      <svg width="40" height="40" viewBox="0 0 24 24"><path fill="#666" d="M4 7h14a2 2 0 0 1 2 2v6a2 2 0 0 1-2 2H4a2 2 0 0 1-2-2V9a2 2 0 0 1 2-2zm16-1v2h2v6h-2v2h1a1 1 0 0 0 1-1V7a1 1 0 0 0-1-1h-1z"/></svg>205    </div>206  </div>207 208  <!-- App bar -->209  <div class="app-bar">210    <div class="app-left">211      <div class="icon-btn">212        <svg width="56" height="56" viewBox="0 0 24 24"><path fill="#5f6368" d="M15.41 7.41 14 6l-6 6 6 6 1.41-1.41L10.83 12z"/></svg>213      </div>214      <div class="app-title">Compose</div>215    </div>216    <div class="app-actions">217      <div class="icon-btn" title="Attach">218        <svg width="56" height="56" viewBox="0 0 24 24"><path fill="#5f6368" d="M16.5 6.5v8.25a4.25 4.25 0 0 1-8.5 0V7.75a2.75 2.75 0 0 1 5.5 0v6.75a1.25 1.25 0 0 1-2.5 0V7.5h-1.5v7a2.75 2.75 0 1 0 5.5 0V6.5h1.5z"/></svg>219      </div>220      <div class="icon-btn" title="Send">221        <svg width="58" height="58" viewBox="0 0 24 24"><path fill="#5f63c3" d="M2 21 23 12 2 3v7l14 2-14 2v7z"/></svg>222      </div>223      <div class="icon-btn" title="More">224        <svg width="56" height="56" viewBox="0 0 24 24"><path fill="#5f6368" d="M12 6a2 2 0 1 0 0-4 2 2 0 0 0 0 4zm0 8a2 2 0 1 0 0-4 2 2 0 0 0 0 4zm0 8a2 2 0 1 0 0-4 2 2 0 0 0 0 4z"/></svg>225      </div>226    </div>227  </div>228 229  <!-- From row -->230  <div class="section from">231    <div class="row">232      <div class="label">From</div>233      <div class="value">dbwscratch.test.id9@gmail.com</div>234    </div>235  </div>236 237  <!-- To row -->238  <div class="section to">239    <div class="row">240      <div class="label">To</div>241      <div class="chip">242        <div class="avatar">d</div>243        <div class="email-text">dbwscratch.test.id4@gmail.com</div>244        <svg class="caret" viewBox="0 0 24 24"><path fill="#5f6368" d="M7 10l5 5 5-5z"/></svg>245      </div>246    </div>247  </div>248 249  <!-- Subject row -->250  <div class="section subject">251    <div class="row">252      <div class="label">Subject</div>253      <div class="value"> </div>254    </div>255  </div>256 257  <!-- Message body -->258  <div class="body-area">259    https://mobidrive.com/sharelink/i/4Vymz4RduVf9ADmNfDxiQL6rgYnEMuQNb7CqdLVMIuwF260    <span class="cursor"></span>261  </div>262 263  <!-- Keyboard mock -->264  <div class="keyboard">265    <div class="kb-toolbar">266      <div class="kb-tool"></div>267      <div class="kb-tool"></div>268      <div class="kb-tool"></div>269      <div class="kb-tool"></div>270      <div class="kb-tool"></div>271      <div class="kb-tool"></div>272    </div>273    <div class="kb-rows">274      <div class="kb-row">275        <div class="key"></div><div class="key"></div><div class="key"></div><div class="key"></div><div class="key"></div>276        <div class="key"></div><div class="key"></div><div class="key"></div><div class="key"></div><div class="key"></div>277      </div>278      <div class="kb-row" style="grid-template-columns: 0.6fr repeat(9,1fr);">279        <div class="key"></div><div class="key"></div><div class="key"></div><div class="key"></div><div class="key"></div>280        <div class="key"></div><div class="key"></div><div class="key"></div><div class="key"></div><div class="key"></div>281      </div>282      <div class="kb-row" style="grid-template-columns: 1fr repeat(8,1fr) 1fr;">283        <div class="key"></div><div class="key"></div><div class="key"></div><div class="key"></div><div class="key"></div>284        <div class="key"></div><div class="key"></div><div class="key"></div><div class="key"></div><div class="key"></div>285      </div>286      <div class="space-row">287        <div class="key"></div>288        <div class="key"></div>289        <div class="key"></div>290        <div class="key"></div>291        <div class="key"></div>292      </div>293    </div>294  </div>295 296</div>297</body>298</html>