GD-ML/AndroidCode

1<!DOCTYPE html>2<html lang="en">3<head>4<meta charset="UTF-8">5<meta name="viewport" content="width=1080, initial-scale=1.0">6<title>Compose Email Mock</title>7<style>8  body { margin: 0; padding: 0; background: transparent; font-family: Roboto, Arial, sans-serif; }9  #render-target {10    width: 1080px;11    height: 2400px;12    position: relative;13    overflow: hidden;14    background: #121212;15    color: #EDEDED;16  }17 18  /* Status bar */19  .status-bar {20    height: 92px;21    padding: 0 28px;22    display: flex;23    align-items: center;24    justify-content: space-between;25    color: #EDEDED;26    font-size: 32px;27    letter-spacing: 0.5px;28  }29  .status-icons {30    display: flex;31    align-items: center;32    gap: 24px;33    color: #C7C7C7;34  }35  .sb-icon {36    width: 34px; height: 34px;37    display: inline-flex; align-items: center; justify-content: center;38  }39 40  /* App bar */41  .app-bar {42    height: 120px;43    display: flex;44    align-items: center;45    padding: 0 18px 0 8px;46    border-bottom: 1px solid #1E1E1E;47  }48  .app-bar .left {49    width: 120px; display: flex; align-items: center; justify-content: center;50  }51  .app-bar .right {52    margin-left: auto;53    display: flex; align-items: center; gap: 20px;54  }55  .icon-btn {56    width: 72px; height: 72px; display: inline-flex; align-items: center; justify-content: center;57    color: #CFCFCF;58  }59  .icon-btn.send { color: #9CCC65; }60 61  /* Fields */62  .content {63    padding: 20px 32px 0 32px;64  }65  .field {66    padding: 22px 0 18px 0;67    border-bottom: 1px solid #2A2A2A;68  }69  .field-row {70    display: flex; align-items: center; gap: 14px;71    font-size: 34px; line-height: 44px;72  }73  .label {74    color: #8A8A8A;75    min-width: 120px;76    text-transform: none;77  }78  .value {79    color: #EDEDED;80    flex: 1;81    white-space: nowrap;82    overflow: hidden;83    text-overflow: ellipsis;84  }85  .placeholder {86    color: #6E6E6E;87    flex: 1;88  }89  .chev {90    width: 32px; height: 32px; color: #AFAFAF;91  }92 93  .body-area {94    padding: 26px 0 40px 0;95    font-size: 36px; line-height: 50px;96    color: #EDEDED;97    min-height: 600px;98  }99 100  /* Keyboard mock */101  .keyboard {102    position: absolute;103    left: 0; right: 0;104    bottom: 90px;105    height: 940px;106    background: #0E0E0F;107    border-top: 1px solid #1D1D1D;108    padding: 18px 18px 24px 18px;109    box-sizing: border-box;110  }111  .kb-row {112    display: flex; justify-content: center; gap: 14px;113    margin-bottom: 18px;114  }115  .key {116    background: #2B2B2E;117    color: #EDEDED;118    border-radius: 16px;119    text-transform: lowercase;120    display: flex; align-items: center; justify-content: center;121    height: 130px;122    font-size: 44px;123    min-width: 84px;124    flex: 1;125  }126  .key.small { flex: 0 0 120px; }127  .key.wide { flex: 2; }128  .key.space { flex: 4; }129  .key.action {130    background: #3A3A3D;131    color: #DCDCDC;132  }133  .enter-circle {134    width: 120px; height: 120px;135    background: #B7E18D;136    border-radius: 60px;137    display: flex; align-items: center; justify-content: center;138  }139  .enter-wrap { display: flex; align-items: center; justify-content: center; flex: 0 0 140px; }140 141  /* Bottom nav pill */142  .nav-pill {143    position: absolute;144    bottom: 24px;145    left: 50%;146    transform: translateX(-50%);147    width: 220px; height: 10px;148    background: #EAEAEA;149    border-radius: 8px;150    opacity: 0.9;151  }152 153  /* Utility SVG color */154  svg { width: 48px; height: 48px; }155</style>156</head>157<body>158<div id="render-target">159 160  <!-- Status Bar -->161  <div class="status-bar">162    <div class="time">8:42</div>163    <div class="status-icons">164      <div class="sb-icon">N</div>165      <div class="sb-icon">L</div>166      <div class="sb-icon">G</div>167      <div class="sb-icon">•</div>168      <div class="sb-icon">169        <svg viewBox="0 0 24 24" fill="#E0E0E0"><path d="M12 4a8 8 0 0 0-8 8h2a6 6 0 0 1 6-6V4z"/></svg>170      </div>171      <div class="sb-icon" style="width:60px; display:flex; align-items:center; justify-content:flex-end;">172        <svg viewBox="0 0 24 24" fill="#E0E0E0"><path d="M20 8h-3V5h-2v3h-3v2h3v3h2v-3h3z"/></svg>173      </div>174      <div class="sb-icon" style="width:60px;">175        <svg viewBox="0 0 24 24" fill="#E0E0E0"><path d="M16 4h-8v2h8V4zm3 5H5v2h14V9zm-3 5H8v2h8v-2z"/></svg>176      </div>177      <div class="sb-icon" style="width:60px;">178        <svg viewBox="0 0 24 24" fill="#FFFFFF"><path d="M16.5 4.5A5.5 5.5 0 1 1 11 10h-1a7 7 0 1 0 6.5-5.5z"/></svg>179      </div>180      <div class="sb-icon" style="width:60px;">181        <span style="color:#CFCFCF; font-size:28px;">71%</span>182      </div>183    </div>184  </div>185 186  <!-- App Bar -->187  <div class="app-bar">188    <div class="left">189      <svg viewBox="0 0 24 24" fill="#E0E0E0">190        <path d="M15.5 19.5 9 12l6.5-7.5-1.5-1.5L6 12l8 9z"></path>191      </svg>192    </div>193    <div class="right">194      <div class="icon-btn">195        <svg viewBox="0 0 24 24" fill="currentColor">196          <path d="M7 7.5a4.5 4.5 0 0 1 8.743-1.5H18a3 3 0 0 1 0 6H9a2.5 2.5 0 1 1 0-5h7a1.5 1.5 0 1 1 0 3H9a0.5 0.5 0 1 1 0-1h7v-1H9A2.5 2.5 0 0 0 7 7.5z"/>197        </svg>198      </div>199      <div class="icon-btn send">200        <svg viewBox="0 0 24 24" fill="currentColor">201          <path d="M2 21 23 12 2 3v7l15 2-15 2v7z"></path>202        </svg>203      </div>204      <div class="icon-btn">205        <svg viewBox="0 0 24 24" fill="currentColor">206          <circle cx="12" cy="5" r="2"></circle>207          <circle cx="12" cy="12" r="2"></circle>208          <circle cx="12" cy="19" r="2"></circle>209        </svg>210      </div>211    </div>212  </div>213 214  <!-- Compose Fields -->215  <div class="content">216    <div class="field">217      <div class="field-row">218        <div class="label">From</div>219        <div class="value">dbwscratch.test.id10@gmail.com</div>220        <div class="chev">221          <svg viewBox="0 0 24 24" fill="#AFAFAF"><path d="M7 10l5 5 5-5z"/></svg>222        </div>223      </div>224    </div>225 226    <div class="field">227      <div class="field-row">228        <div class="label">To</div>229        <div class="placeholder"> </div>230        <div class="chev">231          <svg viewBox="0 0 24 24" fill="#AFAFAF"><path d="M7 10l5 5 5-5z"/></svg>232        </div>233      </div>234    </div>235 236    <div class="field">237      <div class="field-row">238        <div class="label">Subject</div>239        <div class="placeholder"> </div>240      </div>241    </div>242 243    <div class="body-area">244      https://www.dropbox.com/scl/fi/mixlv4ok2sih5zfqboffm/the-diary-of-anne-frank-1.pdf?rlkey=7grzb3w0vwx98msjtdzmh9hm7&dl=0245    </div>246  </div>247 248  <!-- Keyboard Mock -->249  <div class="keyboard">250    <div class="kb-row">251      <div class="key">q</div>252      <div class="key">w</div>253      <div class="key">e</div>254      <div class="key">r</div>255      <div class="key">t</div>256      <div class="key">y</div>257      <div class="key">u</div>258      <div class="key">i</div>259      <div class="key">o</div>260      <div class="key">p</div>261    </div>262    <div class="kb-row">263      <div class="key small action">@</div>264      <div class="key">a</div>265      <div class="key">s</div>266      <div class="key">d</div>267      <div class="key">f</div>268      <div class="key">g</div>269      <div class="key">h</div>270      <div class="key">j</div>271      <div class="key">k</div>272      <div class="key action small">273        <svg viewBox="0 0 24 24" fill="#D0D0D0"><path d="M6 19l8.5-7L6 5v14zm9 0h3V5h-3v14z"/></svg>274      </div>275    </div>276    <div class="kb-row">277      <div class="key small action">⇧</div>278      <div class="key">z</div>279      <div class="key">x</div>280      <div class="key">c</div>281      <div class="key">v</div>282      <div class="key">b</div>283      <div class="key">n</div>284      <div class="key">m</div>285      <div class="key action small">286        <svg viewBox="0 0 24 24" fill="#D0D0D0"><path d="M19 7l-1.41 1.41L13 13l-4.59-4.59L7 7l6 6 6-6z"/></svg>287      </div>288    </div>289    <div class="kb-row">290      <div class="key small action" style="background:#A7B59A; color:#1A1A1A;">?123</div>291      <div class="key small action">☺</div>292      <div class="key space"> </div>293      <div class="key small action">.</div>294      <div class="enter-wrap">295        <div class="enter-circle">296          <svg viewBox="0 0 24 24" width="44" height="44" fill="#1A1A1A"><path d="M4 13h10V9l6 5-6 5v-4H4v-2z"/></svg>297        </div>298      </div>299    </div>300  </div>301 302  <div class="nav-pill"></div>303</div>304</body>305</html>