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: #F6F7F2;14    color: #222;15  }16 17  /* Status bar */18  .status-bar {19    height: 88px;20    padding: 0 28px;21    display: flex;22    align-items: center;23    justify-content: space-between;24    color: #222;25    font-weight: 600;26    font-size: 38px;27  }28  .status-icons {29    display: flex;30    align-items: center;31    gap: 26px;32  }33  .dot { width: 10px; height: 10px; background:#666; border-radius:50%; opacity:.6; }34  .sb-icon {35    width: 42px; height: 42px; border-radius: 50%; background:#E0E0E0; border:1px solid #C8C8C8;36  }37  .battery {38    width: 62px; height: 32px; border: 3px solid #444; border-radius: 6px; position: relative;39  }40  .battery::after {41    content:""; position:absolute; right:-10px; top:8px; width:6px; height:16px; background:#444; border-radius:2px;42  }43  .battery .level { width: 70%; height: 100%; background:#4CAF50; }44 45  /* App bar */46  .app-bar {47    height: 132px;48    padding: 0 28px;49    display: flex;50    align-items: center;51    gap: 24px;52    border-bottom: 1px solid #E7E7E0;53    background: #F6F7F2;54  }55  .app-title { font-size: 54px; font-weight: 700; flex: 1; color:#1b1b1b; }56  .icon-btn {57    width: 72px; height: 72px; display:flex; align-items:center; justify-content:center;58    border-radius: 18px;59  }60  .icon { width: 46px; height: 46px; fill: #2E7D32; }61  .icon-dark { fill:#303030; }62  .icon-gray { fill:#4B4B4B; }63 64  /* Form area */65  .content {66    padding: 24px 36px 0 36px;67  }68  .row {69    padding: 24px 0;70    border-bottom: 1px solid #EFEFE7;71  }72  .label {73    font-size: 34px; color:#6F776F; margin-bottom: 10px;74  }75  .value {76    font-size: 40px; color:#1f1f1f;77  }78 79  /* To row with chip */80  .to-row { display: flex; align-items: center; gap: 20px; }81  .chip {82    display: inline-flex; align-items: center; gap: 18px;83    background:#F0F0EA; border:1px solid #D2D2C8; padding: 12px 22px; border-radius: 44px;84    font-size: 40px; color:#1f1f1f;85  }86  .avatar {87    width: 64px; height: 64px; border-radius: 50%; background:#7E6DF2; display:flex; align-items:center; justify-content:center; color:#fff; font-weight:700;88  }89  .caret {90    width: 32px; height: 32px; margin-left: 14px; fill:#4B4B4B;91  }92 93  /* Placeholder fields */94  .placeholder {95    color:#7C817A; font-size: 48px; padding: 32px 0; border-bottom: 1px solid #EFEFE7;96  }97 98  /* Attachment card */99  .attach-card {100    margin-top: 22px;101    background: #DDEDD8;102    border: 1px solid #C6D8C1;103    border-radius: 18px;104    padding: 26px;105    display: flex;106    align-items: center;107    gap: 26px;108  }109  .pdf-icon {110    width: 86px; height: 86px; background:#E53935; border-radius: 12px; color:#fff;111    display:flex; align-items:center; justify-content:center; font-weight:800; letter-spacing:1px;112    border:2px solid #C62828;113  }114  .file-info { flex: 1; }115  .file-name { font-size: 42px; font-weight: 700; color:#182018; }116  .file-size { font-size: 32px; color:#5C685C; margin-top: 6px; }117  .close-btn { width: 56px; height: 56px; border-radius: 14px; display:flex; align-items:center; justify-content:center; }118  .close-icon { width: 44px; height: 44px; fill:#213821; }119 120  /* Keyboard mock */121  .keyboard {122    position: absolute;123    left: 0; right: 0; bottom: 0;124    height: 870px;125    background: #EEF1E8;126    border-top: 1px solid #D6D9CF;127    padding: 28px 22px 32px;128  }129  .kb-row { display: grid; grid-template-columns: repeat(10, 1fr); gap: 18px; margin-bottom: 18px; }130  .kb-row.small { grid-template-columns: repeat(9, 1fr); }131  .kb-row.bottom { grid-template-columns: 1.2fr 1fr 1fr 1fr 4fr 1fr 1.2fr; }132  .key {133    height: 108px; background:#FAFBF7; border:1px solid #D7DACF; border-radius: 22px;134    display:flex; align-items:center; justify-content:center; font-size: 44px; color:#222;135    box-shadow: inset 0 1px 0 #FFFFFF;136  }137  .space { height: 120px; }138  .pill-input {139    width: 680px; height: 120px; background:#FFFFFF; border:1px solid #D7DACF; border-radius: 28px;140  }141  .right-send {142    width: 120px; height: 120px; border-radius: 30px; background:#CFE5CE; border:1px solid #B8D4B3; display:flex; align-items:center; justify-content:center;143  }144  .send-mini { width: 44px; height: 44px; fill:#2E7D32; }145</style>146</head>147<body>148<div id="render-target">149 150  <!-- Status bar -->151  <div class="status-bar">152    <div>11:26</div>153    <div class="status-icons">154      <div class="dot"></div>155      <div class="sb-icon"></div>156      <div class="sb-icon"></div>157      <div class="battery"><div class="level"></div></div>158    </div>159  </div>160 161  <!-- App bar -->162  <div class="app-bar">163    <!-- Back arrow -->164    <div class="icon-btn">165      <svg class="icon-dark" viewBox="0 0 24 24">166        <path d="M15.5 4.5 7 12l8.5 7.5-1.5 1.8L3.8 12 14 2.7z"/>167      </svg>168    </div>169    <div class="app-title">Compose</div>170    <!-- attach -->171    <div class="icon-btn">172      <svg class="icon-gray" viewBox="0 0 24 24">173        <path d="M17.5 6.5 9 15a3 3 0 1 1-4.2-4.2l9-9 1.4 1.4-9 9A1 1 0 0 0 7.6 13l8.6-8.6a4 4 0 1 1 5.7 5.7l-9 9a6 6 0 1 1-8.5-8.5l8.3-8.3 1.4 1.4-8.3 8.3a4 4 0 0 0 5.6 5.6l9-9a2 2 0 1 0-2.8-2.8z"/>174      </svg>175    </div>176    <!-- send -->177    <div class="icon-btn">178      <svg class="icon" viewBox="0 0 24 24">179        <path d="M2 21 23 12 2 3v7l14 2-14 2z"/>180      </svg>181    </div>182    <!-- more -->183    <div class="icon-btn">184      <svg class="icon-gray" viewBox="0 0 24 24">185        <path d="M12 6a2 2 0 1 1 0-4 2 2 0 0 1 0 4zm0 8a2 2 0 1 1 0-4 2 2 0 0 1 0 4zm0 8a2 2 0 1 1 0-4 2 2 0 0 1 0 4z"/>186      </svg>187    </div>188  </div>189 190  <!-- Content form -->191  <div class="content">192 193    <div class="row">194      <div class="label">From</div>195      <div class="value">dbwscratch.test.id2@gmail.com</div>196    </div>197 198    <div class="row">199      <div class="label">To</div>200      <div class="to-row">201        <span class="chip">202          <span class="avatar">E</span>203          EvaCook@dayrep.com204        </span>205        <svg class="caret" viewBox="0 0 24 24"><path d="M7 10l5 5 5-5z"/></svg>206      </div>207    </div>208 209    <div class="placeholder">Subject</div>210    <div class="placeholder">Compose email</div>211 212    <div class="attach-card">213      <div class="pdf-icon">PDF</div>214      <div class="file-info">215        <div class="file-name">ESIC -COVID-19.pdf</div>216        <div class="file-size">9.4 MB</div>217      </div>218      <div class="close-btn">219        <svg class="close-icon" viewBox="0 0 24 24"><path d="M6 6l12 12M18 6L6 18" stroke="#1B5E20" stroke-width="2" fill="none" stroke-linecap="round"/></svg>220      </div>221    </div>222 223  </div>224 225  <!-- Keyboard mock -->226  <div class="keyboard">227    <div class="kb-row">228      <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>229    </div>230    <div class="kb-row small" style="grid-template-columns: repeat(9, 1fr);">231      <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>232    </div>233    <div class="kb-row small" style="grid-template-columns: repeat(8, 1fr);">234      <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><div class="key">.</div>235    </div>236    <div class="kb-row bottom">237      <div class="key">@</div>238      <div class="key">😊</div>239      <div class="key">?123</div>240      <div class="key">,</div>241      <div class="pill-input"></div>242      <div class="key">⌫</div>243      <div class="right-send">244        <svg class="send-mini" viewBox="0 0 24 24"><path d="M2 21 23 12 2 3v7l14 2-14 2z"/></svg>245      </div>246    </div>247  </div>248 249</div>250</body>251</html>