GD-ML/AndroidCode

1<html>2<head>3<meta charset="UTF-8">4<title>Gmail Compose - Dark</title>5<style>6  body {7    margin: 0;8    padding: 0;9    background: transparent;10    font-family: Roboto, Arial, sans-serif;11  }12  #render-target {13    width: 1080px;14    height: 2400px;15    position: relative;16    overflow: hidden;17    background: #121212;18    color: #FFFFFF;19  }20 21  /* Status bar */22  .statusbar {23    position: absolute;24    top: 0;25    left: 0;26    width: 1080px;27    height: 90px;28    background: #0D0D0D;29    color: #EDEDED;30    display: flex;31    align-items: center;32    justify-content: space-between;33    padding: 0 30px;34    font-size: 34px;35    letter-spacing: 0.5px;36  }37  .status-icons {38    display: flex;39    align-items: center;40    gap: 18px;41    opacity: 0.9;42  }43  .tiny-icon {44    width: 34px;45    height: 20px;46    border: 2px solid #CFCFCF;47    border-radius: 4px;48  }49  .battery {50    width: 46px;51    height: 22px;52    border: 2px solid #CFCFCF;53    position: relative;54    border-radius: 4px;55  }56  .battery::after {57    content: "";58    position: absolute;59    right: -8px;60    top: 6px;61    width: 6px;62    height: 10px;63    background: #CFCFCF;64    border-radius: 1px;65  }66 67  /* App bar */68  .appbar {69    position: absolute;70    top: 90px;71    left: 0;72    width: 100%;73    height: 120px;74    display: flex;75    align-items: center;76    padding: 0 24px;77    border-bottom: 1px solid #2A2A2A;78  }79  .app-title {80    font-size: 56px;81    font-weight: 500;82    margin-left: 20px;83  }84  .app-actions {85    margin-left: auto;86    display: flex;87    align-items: center;88    gap: 34px;89  }90  .icon-btn {91    width: 72px;92    height: 72px;93    display: flex;94    align-items: center;95    justify-content: center;96    border-radius: 18px;97  }98  .icon-btn svg {99    width: 44px;100    height: 44px;101    fill: #EDEDED;102  }103 104  /* Fields */105  .content {106    position: absolute;107    top: 210px;108    left: 0;109    width: 100%;110    height: 1140px;111    overflow: hidden;112  }113  .field {114    padding: 30px 34px;115    border-bottom: 1px solid #2A2A2A;116    display: flex;117    align-items: center;118    gap: 30px;119  }120  .label {121    color: #B0B0B0;122    font-size: 30px;123    min-width: 140px;124  }125  .value {126    font-size: 34px;127    color: #EDEDED;128  }129  .subject {130    padding: 26px 34px;131    border-bottom: 1px solid #2A2A2A;132    font-size: 44px;133    color: #EDEDED;134  }135  .to-row {136    position: relative;137  }138  .to-row .arrow {139    position: absolute;140    right: 26px;141    top: 34px;142  }143  .to-row svg {144    width: 38px; height: 38px; fill: #BDBDBD;145  }146 147  /* Email body */148  .email-body {149    padding: 36px 34px 24px 34px;150    font-size: 36px;151    line-height: 1.55;152    color: #F1F1F1;153  }154  .email-body .muted {155    color: #C9C9C9;156  }157 158  /* Toolbar above keyboard */159  .quick-toolbar {160    position: absolute;161    left: 0;162    bottom: 995px;163    width: 100%;164    height: 120px;165    display: flex;166    align-items: center;167    gap: 46px;168    padding: 0 40px;169    background: #1B1B1B;170    border-top: 1px solid #2A2A2A;171    border-bottom: 1px solid #2A2A2A;172  }173  .qt-icon {174    width: 84px;175    height: 84px;176    background: #2C2C2C;177    border-radius: 18px;178    display: flex;179    align-items: center;180    justify-content: center;181    color: #EAEAEA;182    font-size: 36px;183    border: 1px solid #3A3A3A;184  }185 186  /* Keyboard */187  .keyboard {188    position: absolute;189    bottom: 0;190    left: 0;191    width: 1080px;192    height: 995px;193    background: #1A1A1A;194    border-top: 1px solid #333333;195    box-sizing: border-box;196    padding: 16px 16px 22px 16px;197  }198  .kb-row {199    display: flex;200    justify-content: center;201    margin: 12px 0;202  }203  .key {204    width: 90px;205    height: 120px;206    margin: 8px;207    background: #2C2C2C;208    border-radius: 22px;209    display: flex;210    align-items: center;211    justify-content: center;212    color: #FFFFFF;213    font-size: 44px;214    border: 1px solid #3A3A3A;215  }216  .key.wide { width: 140px; }217  .space { width: 540px; }218  .key.small { font-size: 32px; color: #DADADA; }219 220  /* Bottom gesture bar */221  .gesture {222    position: absolute;223    bottom: 20px;224    left: 50%;225    transform: translateX(-50%);226    width: 480px;227    height: 12px;228    background: #E0E0E0;229    border-radius: 10px;230    opacity: 0.85;231  }232</style>233</head>234<body>235<div id="render-target">236 237  <!-- Status Bar -->238  <div class="statusbar">239    <div>8:31</div>240    <div class="status-icons">241      <div class="tiny-icon"></div>242      <div class="tiny-icon" style="width:34px;height:26px;border-radius:50%;"></div>243      <div class="tiny-icon" style="width:34px;height:26px;"></div>244      <div class="battery"></div>245    </div>246  </div>247 248  <!-- App Bar -->249  <div class="appbar">250    <!-- Back -->251    <div class="icon-btn">252      <svg viewBox="0 0 24 24">253        <path d="M15.5 5l-8 7 8 7v-4.5L11 12l4.5-3.5V5z"></path>254      </svg>255    </div>256    <div class="app-title">Compose</div>257    <div class="app-actions">258      <div class="icon-btn">259        <!-- Attachment -->260        <svg viewBox="0 0 24 24">261          <path d="M17.5 7.5L9 16c-1.4 1.4-3.6 1.4-5 0s-1.4-3.6 0-5l8.5-8.5c2-2 5.3-2 7.3 0s2 5.3 0 7.3L10 16.3c-.9.9-2.3.9-3.2 0-.9-.9-.9-2.3 0-3.2L15 5.8" fill="none" stroke="#EDEDED" stroke-width="2"></path>262        </svg>263      </div>264      <div class="icon-btn">265        <!-- Send -->266        <svg viewBox="0 0 24 24">267          <path d="M2 21l20-9L2 3l3 7 8 2-8 2-3 7z"></path>268        </svg>269      </div>270      <div class="icon-btn">271        <!-- More -->272        <svg viewBox="0 0 24 24">273          <circle cx="12" cy="5" r="2"></circle>274          <circle cx="12" cy="12" r="2"></circle>275          <circle cx="12" cy="19" r="2"></circle>276        </svg>277      </div>278    </div>279  </div>280 281  <!-- Content Fields -->282  <div class="content">283    <div class="field">284      <div class="label">From</div>285      <div class="value">dbwscratch.test.id4@gmail.com</div>286    </div>287 288    <div class="field to-row">289      <div class="label">To</div>290      <div class="value" style="opacity:0.6;">Tap to add recipients</div>291      <div class="arrow">292        <svg viewBox="0 0 24 24">293          <path d="M7 9l5 5 5-5H7z"></path>294        </svg>295      </div>296    </div>297 298    <div class="subject">Zoom meeting invitation - transport</div>299 300    <div class="email-body">301      <div class="muted">Cerebra Research is inviting you to a scheduled Zoom meeting.</div>302      <br>303      <div>Topic: transport</div>304      <div>Time: Jul 25, 2023 01:30 PM India</div>305      <br>306      <div>Join Zoom Meeting</div>307      <div style="color:#BEE1FF;">https://us05web.zoom.us/j/83912965774?pwd=KK3Kn03sl2dDEcms1GNVUV8ahbl8w4.1</div>308      <br>309      <div>Meeting ID: 839 1296 5774</div>310      <div>Passcode: 20xVPi</div>311    </div>312  </div>313 314  <!-- Quick toolbar above keyboard -->315  <div class="quick-toolbar">316    <div class="qt-icon">＋</div>317    <div class="qt-icon">🙂</div>318    <div class="qt-icon">GIF</div>319    <div class="qt-icon">⚙</div>320    <div class="qt-icon">Gx</div>321    <div class="qt-icon">🎨</div>322    <div class="qt-icon">🎙️</div>323    <div class="qt-icon">🔇</div>324  </div>325 326  <!-- Keyboard -->327  <div class="keyboard">328    <div class="kb-row">329      <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>330      <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>331    </div>332    <div class="kb-row">333      <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>334      <div class="key">h</div><div class="key">j</div><div class="key">k</div><div class="key">l</div>335    </div>336    <div class="kb-row">337      <div class="key wide small">⇧</div>338      <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>339      <div class="key">n</div><div class="key">m</div>340      <div class="key wide small">⌫</div>341    </div>342    <div class="kb-row">343      <div class="key wide small">?123</div>344      <div class="key">@</div>345      <div class="key">😊</div>346      <div class="key space"></div>347      <div class="key">.</div>348      <div class="key wide small">↩︎</div>349    </div>350    <div class="gesture"></div>351  </div>352 353</div>354</body>355</html>