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 - Dark UI 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  .statusbar {20    height: 100px;21    padding: 0 32px;22    display: flex;23    align-items: center;24    justify-content: space-between;25    color: #ffffff;26    font-weight: 600;27    letter-spacing: 0.5px;28  }29  .status-icons {30    display: flex;31    align-items: center;32    gap: 16px;33    opacity: 0.9;34  }35  .status-icons svg { fill: #fff; }36 37  /* App bar */38  .appbar {39    height: 160px;40    display: flex;41    align-items: center;42    padding: 0 24px;43    border-bottom: 1px solid #1E1E1E;44  }45  .appbar .title {46    font-size: 54px;47    font-weight: 500;48    margin-left: 16px;49  }50  .appbar .right-actions {51    margin-left: auto;52    display: flex;53    align-items: center;54    gap: 28px;55  }56  .icon-btn {57    width: 72px;58    height: 72px;59    display: inline-flex;60    align-items: center;61    justify-content: center;62    border-radius: 36px;63    color: #eaeaea;64  }65  .icon-btn svg { width: 44px; height: 44px; fill: #eaeaea; }66 67  /* Fields */68  .fields {69    padding: 12px 24px 0 24px;70    border-bottom: 1px solid #1E1E1E;71  }72  .field {73    display: flex;74    align-items: flex-start;75    gap: 18px;76    padding: 22px 0;77    border-bottom: 1px solid #1d1d1d;78  }79  .field:last-child { border-bottom: none; }80  .label {81    width: 120px;82    color: #9E9E9E;83    font-size: 28px;84    line-height: 40px;85    padding-top: 4px;86  }87  .value {88    flex: 1;89    color: #EDEDED;90    font-size: 32px;91    line-height: 40px;92  }93  .muted {94    color: #9E9E9E;95    font-size: 28px;96    margin-top: 6px;97  }98  .dropdown {99    width: 44px; height: 44px; display: flex; align-items: center; justify-content: center;100  }101  .dropdown svg { width: 28px; height: 28px; fill: #9E9E9E; }102 103  /* Contact chip row */104  .contact-row {105    display: flex;106    align-items: center;107    gap: 22px;108    padding: 18px 0 6px 142px;109  }110  .avatar {111    width: 88px;112    height: 88px;113    border-radius: 44px;114    background: #26A69A;115    display: flex;116    align-items: center;117    justify-content: center;118    overflow: hidden;119  }120  .avatar svg { width: 52px; height: 52px; fill: #ffffff; opacity: 0.95; }121  .contact-text .name {122    font-size: 34px;123    color: #EDEDED;124  }125  .contact-text .email {126    font-size: 28px;127    color: #9E9E9E;128    margin-top: 6px;129  }130 131  /* Body area (blank compose content) */132  .content-area {133    height: 1060px;134    padding: 24px;135    color: #BDBDBD;136    font-size: 30px;137  }138 139  /* Keyboard mock */140  .keyboard {141    position: absolute;142    left: 0; right: 0; bottom: 0;143    height: 820px;144    background: #0F0F0F;145    border-top: 1px solid #1d1d1d;146    display: flex;147    flex-direction: column;148    padding: 10px 16px 24px 16px;149  }150  .kb-tools {151    display: flex;152    align-items: center;153    gap: 26px;154    padding: 8px 8px 18px 8px;155  }156  .tool {157    width: 72px; height: 72px;158    background: #262626;159    border-radius: 16px;160    display: flex; align-items: center; justify-content: center;161  }162  .tool svg { width: 36px; height: 36px; fill: #DADADA; }163 164  .kb-rows {165    display: flex;166    flex-direction: column;167    gap: 14px;168    margin-top: 2px;169    flex: 1;170    justify-content: center;171  }172  .row {173    display: flex;174    justify-content: center;175    gap: 12px;176    padding: 0 6px;177  }178  .key {179    background: #2A2A2A;180    color: #EDEDED;181    font-size: 36px;182    line-height: 60px;183    text-align: center;184    border-radius: 16px;185    padding: 24px 0;186    width: 82px;187    box-shadow: inset 0 -2px 0 rgba(255,255,255,0.05);188  }189  .key.wide { width: 120px; }190  .key.xwide { width: 440px; }191  .key.action { background: #2E2E2E; color: #9adbd3; }192  .key.enter { background: #7EE1DB; color: #0A0A0A; }193 194  /* Bottom gesture bar */195  .gesture {196    position: absolute;197    left: 50%;198    transform: translateX(-50%);199    bottom: 8px;200    width: 320px;201    height: 8px;202    background: #E0E0E0;203    border-radius: 4px;204    opacity: 0.9;205  }206</style>207</head>208<body>209<div id="render-target">210 211  <!-- Status bar -->212  <div class="statusbar">213    <div class="time">10:52</div>214    <div class="status-icons">215      <!-- Simple cellular/wifi and battery -->216      <svg viewBox="0 0 24 24" width="28" height="28"><path d="M3 18l6-6 4 4 8-8v10H3z"/></svg>217      <svg viewBox="0 0 24 24" width="28" height="28"><path d="M16 4h-8l-2 2v12l2 2h8l2-2V6l-2-2zm0 14H8V6h8v12z"/></svg>218    </div>219  </div>220 221  <!-- App bar -->222  <div class="appbar">223    <div class="icon-btn" aria-label="Back">224      <svg viewBox="0 0 24 24"><path d="M15.5 5l-7 7 7 7" stroke="#eaeaea" stroke-width="2" fill="none" stroke-linecap="round" stroke-linejoin="round"/></svg>225    </div>226    <div class="title">Compose</div>227    <div class="right-actions">228      <div class="icon-btn" aria-label="Attach">229        <svg viewBox="0 0 24 24"><path d="M7 12V7a5 5 0 0 1 10 0v8a4 4 0 1 1-8 0v-7" stroke="#eaeaea" stroke-width="2" fill="none" stroke-linecap="round"/></svg>230      </div>231      <div class="icon-btn" aria-label="Send">232        <svg viewBox="0 0 24 24"><path d="M3 12l18-9-7 9 7 9-18-9z" fill="#9adbd3"/></svg>233      </div>234      <div class="icon-btn" aria-label="More">235        <svg viewBox="0 0 24 24"><circle cx="12" cy="5" r="2"/><circle cx="12" cy="12" r="2"/><circle cx="12" cy="19" r="2"/></svg>236      </div>237    </div>238  </div>239 240  <!-- Fields -->241  <div class="fields">242    <div class="field">243      <div class="label">From</div>244      <div class="value">maira.rossi1993@gmail.com</div>245      <div class="dropdown" aria-hidden="true">246        <svg viewBox="0 0 24 24"><path d="M6 9l6 6 6-6" /></svg>247      </div>248    </div>249 250    <div class="field">251      <div class="label">To</div>252      <div class="value">coledbwpersonatest@gmail.com</div>253      <div class="dropdown" aria-hidden="true">254        <svg viewBox="0 0 24 24"><path d="M6 9l6 6 6-6" /></svg>255      </div>256    </div>257 258    <!-- Selected contact chip preview -->259    <div class="contact-row">260      <div class="avatar" aria-label="Contact avatar">261        <svg viewBox="0 0 24 24">262          <path d="M12 12a5 5 0 1 0-0.001-10.001A5 5 0 0 0 12 12zm0 2c-4 0-7 2-7 5v1h14v-1c0-3-3-5-7-5z"/>263        </svg>264      </div>265      <div class="contact-text">266        <div class="name">coledbwpersonatest@gmail.com</div>267        <div class="email">coledbwpersonatest@gmail.com</div>268      </div>269    </div>270  </div>271 272  <!-- Empty message content area -->273  <div class="content-area">274    <!-- intentionally left blank to mimic empty compose body -->275  </div>276 277  <!-- Keyboard mock -->278  <div class="keyboard">279    <div class="kb-tools">280      <div class="tool" title="Apps">281        <svg viewBox="0 0 24 24"><path d="M3 3h7v7H3zM14 3h7v7h-7zM3 14h7v7H3zM14 14h7v7h-7z"/></svg>282      </div>283      <div class="tool" title="Emoji">284        <svg viewBox="0 0 24 24"><circle cx="12" cy="12" r="9"/><circle cx="9" cy="10" r="1.5" fill="#121212"/><circle cx="15" cy="10" r="1.5" fill="#121212"/><path d="M8 15c1 1 2.5 2 4 2s3-1 4-2" stroke="#121212" stroke-width="2" fill="none" stroke-linecap="round"/></svg>285      </div>286      <div class="tool" title="GIF"><span style="color:#DADADA;font-weight:700;">GIF</span></div>287      <div class="tool" title="Translate">288        <svg viewBox="0 0 24 24"><path d="M3 4h10v6H3zM3 12h10v8H3zM15 4h6v16h-6z"/></svg>289      </div>290      <div class="tool" title="Settings">291        <svg viewBox="0 0 24 24"><path d="M12 8a4 4 0 1 1 0 8 4 4 0 0 1 0-8zm8 4l2-1-2-1-.6-1.5 1.3-1.5-1.4-1.4-1.5 1.3L15 4l-1-2-1 2-1.5.6L10 3.3 8.6 4.7l1.3 1.5L8 8 6 7l-2 1 2 1 .6 1.5-1.3 1.5 1.4 1.4 1.5-1.3L9 16l1 2 1-2 1.5-.6 1.5 1.3 1.4-1.4-1.3-1.5L20 12z"/></svg>292      </div>293      <div class="tool" title="Theme">294        <svg viewBox="0 0 24 24"><path d="M12 2a10 10 0 1 0 8.5 15.8A8 8 0 0 1 12 2z"/></svg>295      </div>296      <div class="tool" title="Mic">297        <svg viewBox="0 0 24 24"><path d="M12 14a3 3 0 0 0 3-3V6a3 3 0 0 0-6 0v5a3 3 0 0 0 3 3zm-7-3a7 7 0 0 0 14 0" stroke="#DADADA" stroke-width="2" fill="none"/></svg>298      </div>299    </div>300 301    <div class="kb-rows">302      <div class="row">303        <div class="key">q</div><div class="key">w</div><div class="key">e</div><div class="key">r</div>304        <div class="key">t</div><div class="key">y</div><div class="key">u</div><div class="key">i</div>305        <div class="key">o</div><div class="key">p</div>306      </div>307      <div class="row">308        <div class="key">a</div><div class="key">s</div><div class="key">d</div><div class="key">f</div>309        <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>310      </div>311      <div class="row">312        <div class="key action wide">⇧</div>313        <div class="key">z</div><div class="key">x</div><div class="key">c</div><div class="key">v</div>314        <div class="key">b</div><div class="key">n</div><div class="key">m</div>315        <div class="key action wide">⌫</div>316      </div>317      <div class="row">318        <div class="key action wide">?123</div>319        <div class="key">@@</div>320        <div class="key">☺</div>321        <div class="key xwide">space</div>322        <div class="key">.</div>323        <div class="key enter">↩</div>324      </div>325    </div>326    <div class="gesture"></div>327  </div>328 329</div>330</body>331</html>