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: Arial, Helvetica, sans-serif; }9  #render-target {10    position: relative;11    width: 1080px;12    height: 2400px;13    overflow: hidden;14    background: #1f1a18; /* dark brownish-black */15    color: #f1d6cc;16  }17 18  /* Status bar */19  .status {20    height: 90px;21    padding: 0 28px;22    display: flex;23    align-items: center;24    justify-content: space-between;25    color: #e9d2c9;26    font-size: 36px;27    letter-spacing: 1px;28  }29  .status .right {30    display: flex;31    align-items: center;32    gap: 20px;33  }34  .status svg { fill: #e9d2c9; }35 36  /* Top app bar */37  .toolbar {38    height: 130px;39    display: flex;40    align-items: center;41    padding: 0 24px 0 8px;42    border-bottom: 1px solid rgba(255,255,255,0.06);43  }44  .toolbar .title {45    font-size: 54px;46    font-weight: 600;47    margin-left: 14px;48    color: #f3d9d0;49  }50  .toolbar .spacer { flex: 1; }51  .tool-btn {52    width: 88px;53    height: 88px;54    display: flex;55    align-items: center;56    justify-content: center;57  }58  .tool-btn svg { width:  catholic; }59 60  /* Fields area */61  .content {62    padding: 28px 36px 0;63  }64  .field {65    padding: 18px 0;66    border-bottom: 1px solid rgba(255,255,255,0.06);67  }68  .label {69    font-size: 32px;70    color: #c7aea6;71    margin-bottom: 6px;72  }73  .value {74    font-size: 38px;75    color: #f1d6cc;76  }77 78  .to-row {79    display: flex;80    align-items: center;81    gap: 18px;82  }83  .to-input {84    font-size: 46px;85    font-weight: 600;86    color: #f1d6cc;87  }88  .chev {89    width: 40px;90    height: 40px;91  }92 93  .suggestion {94    display: flex;95    align-items: center;96    gap: 22px;97    padding: 26px 0 18px;98  }99  .avatar {100    width: 110px;101    height: 110px;102    border-radius: 999px;103    background: #E0E0E0;104    border: 1px solid #BDBDBD;105    color: #757575;106    display: flex;107    align-items: center;108    justify-content: center;109    font-size: 22px;110  }111  .sugg-text .name {112    font-size: 44px;113    font-weight: 700;114    color: #f1d6cc;115    line-height: 1.2;116  }117  .sugg-text .sub {118    font-size: 30px;119    color: #bda8a2;120    margin-top: 6px;121  }122 123  /* Spacer before keyboard */124  .spacer-area {125    height: 820px;126  }127 128  /* Keyboard mock */129  .keyboard {130    position: absolute;131    left: 0;132    bottom: 88px;133    width: 100%;134    height: 760px;135    background: #2b2524;136    border-top: 1px solid rgba(255,255,255,0.08);137    padding: 18px 16px 12px;138    box-sizing: border-box;139  }140 141  .key-row {142    display: grid;143    grid-auto-flow: column;144    gap: 12px;145    margin: 14px 0;146  }147  .row-1 { grid-template-columns: repeat(10, 1fr); }148  .row-2 { grid-template-columns: 0.6fr repeat(9, 1fr) 0.6fr; }149  .row-3 { grid-template-columns: 1.2fr repeat(7, 1fr) 1.3fr; }150  .row-4 { grid-template-columns: 1.4fr 1fr 1fr 5fr 1fr 1fr 1fr 1.4fr; }151 152  .key {153    background: #3a3332;154    color: #f3dfd8;155    height: 110px;156    border-radius: 26px;157    display: flex;158    align-items: center;159    justify-content: center;160    font-size: 44px;161    user-select: none;162  }163  .key.special { background: #b88f89; color: #2b2524; font-weight: 700; }164  .key.dark { background: #443c3b; }165  .key.icon {166    padding: 0 10px;167  }168  .key svg { width: 44px; height: 44px; fill: #f3dfd8; }169 170  /* Bottom gesture bar */171  .gesture {172    position: absolute;173    left: 50%;174    bottom: 24px;175    transform: translateX(-50%);176    width: 300px;177    height: 10px;178    border-radius: 10px;179    background: #e7e7e7;180    opacity: 0.95;181  }182 183  /* Small helper to size svg icons in toolbar */184  .icon-32 { width: 54px; height: 54px; fill: #f1d6cc; }185</style>186</head>187<body>188<div id="render-target">189 190  <!-- Status bar -->191  <div class="status">192    <div class="left">7:30</div>193    <div class="right">194      <!-- simple status icons -->195      <svg width="32" height="32" viewBox="0 0 24 24"><circle cx="12" cy="12" r="3"/></svg>196      <svg width="32" height="32" viewBox="0 0 24 24"><path d="M2 12l5-5v10z"/></svg>197      <svg width="32" height="32" viewBox="0 0 24 24"><path d="M2 18h20v-2H2zm0-5h16v-2H2zm0-5h12V6H2z"/></svg>198      <svg width="48" height="32" viewBox="0 0 24 24"><path d="M16 6h2a2 2 0 0 1 2 2v10h-6v2h-2v-2H6V8a2 2 0 0 1 2-2h2"/><rect x="6" y="10" width="10" height="6" rx="1"/></svg>199    </div>200  </div>201 202  <!-- Top app bar -->203  <div class="toolbar">204    <div class="tool-btn">205      <svg class="icon-32" viewBox="0 0 24 24">206        <path d="M15 18l-6-6 6-6" stroke="#f1d6cc" stroke-width="2" fill="none" stroke-linecap="round" stroke-linejoin="round"/>207      </svg>208    </div>209    <div class="title">Compose</div>210    <div class="spacer"></div>211    <div class="tool-btn" title="Attach">212      <svg class="icon-32" viewBox="0 0 24 24">213        <path d="M7 12v-5a5 5 0 1 1 10 0v9a3 3 0 1 1-6 0V8" stroke="#f1d6cc" stroke-width="2" fill="none" stroke-linecap="round"/>214      </svg>215    </div>216    <div class="tool-btn" title="Send">217      <svg class="icon-32" viewBox="0 0 24 24">218        <path d="M3 12l18-8-6 8 6 8-18-8z" fill="#f1d6cc"/>219      </svg>220    </div>221    <div class="tool-btn" title="More">222      <svg class="icon-32" viewBox="0 0 24 24">223        <circle cx="5" cy="12" r="2"/><circle cx="12" cy="12" r="2"/><circle cx="19" cy="12" r="2"/>224      </svg>225    </div>226  </div>227 228  <!-- Content -->229  <div class="content">230    <div class="field">231      <div class="label">From</div>232      <div class="value">dbwscratch.test.id6@gmail.com</div>233    </div>234 235    <div class="field">236      <div class="label">To</div>237      <div class="to-row">238        <div class="to-input">tiago123@gmail.com</div>239        <svg class="chev" viewBox="0 0 24 24">240          <path d="M6 9l6 6 6-6" stroke="#cbb4ad" stroke-width="2" fill="none" stroke-linecap="round" stroke-linejoin="round"/>241        </svg>242      </div>243 244      <div class="suggestion">245        <div class="avatar">[IMG: Contact Avatar]</div>246        <div class="sugg-text">247          <div class="name">tiago123@gmail.com</div>248          <div class="sub">tiago123@gmail.com</div>249        </div>250      </div>251    </div>252 253    <div class="spacer-area"></div>254  </div>255 256  <!-- Keyboard mock -->257  <div class="keyboard">258    <!-- row 1 -->259    <div class="key-row row-1">260      <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>261      <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>262    </div>263    <!-- row 2 -->264    <div class="key-row row-2">265      <div class="key dark"> </div>266      <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>267      <div class="key">h</div><div class="key">j</div><div class="key">k</div><div class="key">l</div>268      <div class="key dark"> </div>269    </div>270    <!-- row 3 -->271    <div class="key-row row-3">272      <div class="key icon">273        <svg viewBox="0 0 24 24"><path d="M4 15l4-4 4 4M8 11V3" stroke="#f3dfd8" stroke-width="2" fill="none" stroke-linecap="round"/></svg>274      </div>275      <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>276      <div class="key icon">277        <svg viewBox="0 0 24 24"><path d="M6 6h12M6 12h12M6 18h8" stroke="#f3dfd8" stroke-width="2" fill="none" stroke-linecap="round"/></svg>278      </div>279    </div>280    <!-- row 4 -->281    <div class="key-row row-4">282      <div class="key special">?123</div>283      <div class="key">@</div>284      <div class="key">285        <svg viewBox="0 0 24 24"><circle cx="12" cy="12" r="3"/><path d="M12 2v3M12 19v3M2 12h3M19 12h3M4.2 4.2l2.1 2.1M17.7 17.7l2.1 2.1M4.2 19.8l2.1-2.1M17.7 6.3l2.1-2.1" stroke="#f3dfd8" stroke-width="2" fill="none" stroke-linecap="round"/></svg>286      </div>287      <div class="key" style="grid-column: span 3;"> </div>288      <div class="key">.</div>289      <div class="key icon">290        <svg viewBox="0 0 24 24"><path d="M5 12h14M12 5l7 7-7 7" stroke="#f3dfd8" stroke-width="2" fill="none" stroke-linecap="round"/></svg>291      </div>292      <div class="key special">↵</div>293    </div>294  </div>295 296  <!-- Gesture bar -->297  <div class="gesture"></div>298 299</div>300</body>301</html>