GD-ML/AndroidCode

1<!DOCTYPE html>2<html>3<head>4<meta charset="utf-8">5<meta name="viewport" content="width=1080, initial-scale=1.0">6<title>Compose UI Mock</title>7<style>8  * { box-sizing: border-box; }9  body { margin: 0; padding: 0; background: transparent; font-family: system-ui, -apple-system, Segoe UI, Roboto, Helvetica, Arial, sans-serif; }10  #render-target {11    position: relative;12    width: 1080px;13    height: 2400px;14    overflow: hidden;15    background: #1B1511; /* warm dark */16    color: #F3EEE6;17  }18 19  /* Status bar */20  .statusbar {21    height: 96px;22    padding: 22px 28px;23    display: flex;24    align-items: center;25    justify-content: space-between;26    color: #F3ECE4;27    font-weight: 600;28  }29  .status-left { font-size: 36px; letter-spacing: 0.5px; }30  .status-right {31    display: flex;32    align-items: center;33    gap: 22px;34  }35  .sb-icon { width: 44px; height: 44px; opacity: 0.9; }36 37  /* Header */38  .header {39    height: 168px;40    padding: 20px 34px;41    display: flex;42    align-items: center;43    border-bottom: 1px solid #2A221D;44  }45  .back {46    width: 68px; height: 68px; margin-right: 18px;47  }48  .title {49    font-size: 56px;50    font-weight: 600;51    color: #EDE4DA;52    flex: 1;53  }54  .header-actions {55    display: flex;56    align-items: center;57    gap: 36px;58  }59  .hdr-icon { width: 64px; height: 64px; }60  .three-dots { width: 12px; height: 12px; background: #E7D0BC; border-radius: 50%; box-shadow: 0 26px 0 #E7D0BC, 0 -26px 0 #E7D0BC; }61 62  /* Form rows */63  .content { padding: 0 34px; }64  .row {65    border-bottom: 1px solid #2A221D;66    padding: 26px 0;67    display: flex;68    align-items: center;69    gap: 22px;70  }71  .row .label {72    color: #CFC1B6;73    font-size: 34px;74    width: 120px;75  }76  .row .value {77    font-size: 36px;78    color: #F5EFE7;79    flex: 1;80  }81  .chev {82    width: 48px; height: 48px;83  }84 85  .subject {86    padding: 30px 0;87    font-size: 42px;88    color: #EDE5DC;89    border-bottom: 1px solid #2A221D;90  }91 92  /* Message body */93  .message {94    padding: 34px 0 24px 0;95    font-size: 42px;96    line-height: 1.45;97    color: #FFF;98  }99  .message .muted { color: #CFC1B6; }100  .underline-red { border-bottom: 3px solid #C84B4B; display: inline-block; line-height: 1.1; }101 102  /* Keyboard */103  #keyboard {104    position: absolute;105    left: 0;106    bottom: 76px;107    width: 100%;108    height: 900px;109    background: #1F1A16;110    border-top: 1px solid #2A221D;111    padding: 16px 22px 24px;112  }113 114  .kb-toolbar {115    height: 120px;116    display: flex;117    align-items: center;118    gap: 28px;119    padding: 0 10px;120  }121  .tool-btn {122    width: 90px; height: 90px;123    border-radius: 24px;124    background: #2B2621;125    display: flex; align-items: center; justify-content: center;126    color: #E8D8CA; font-size: 30px;127  }128 129  .kb-rows { margin-top: 8px; }130  .kb-row {131    display: flex;132    justify-content: center;133    gap: 16px;134    padding: 10px 0;135  }136  .key {137    width: 92px; height: 112px;138    border-radius: 26px;139    background: #2B2621;140    color: #EAD9CB;141    font-size: 44px;142    display: flex; align-items: center; justify-content: center;143    position: relative;144  }145  .key .num {146    position: absolute;147    top: 6px; left: 10px;148    font-size: 22px; color: #BBAA9D; opacity: 0.8;149  }150  .key-wide { width: 220px; }151  .space { width: 420px; font-size: 28px; color: #BBAA9D; }152  .accent {153    background: #E5C2A2; color: #332B26;154  }155  .shift, .backspace { width: 138px; }156  .dot { width: 120px; }157 158  /* Home indicator */159  .home-indicator {160    position: absolute;161    bottom: 18px;162    left: 50%;163    transform: translateX(-50%);164    width: 220px; height: 10px;165    background: #DFDFDF; border-radius: 6px; opacity: 0.85;166  }167</style>168</head>169<body>170<div id="render-target">171 172  <!-- Status bar -->173  <div class="statusbar">174    <div class="status-left">10:05</div>175    <div class="status-right">176      <!-- simple alarm icon -->177      <svg class="sb-icon" viewBox="0 0 24 24">178        <path d="M6 3l-3 3m18-3l-3 3M12 8v5l4 2" stroke="#F0E6DB" stroke-width="2.2" fill="none" stroke-linecap="round"/>179        <circle cx="12" cy="14" r="7" stroke="#F0E6DB" stroke-width="2.2" fill="none"/>180      </svg>181      <svg class="sb-icon" viewBox="0 0 24 24">182        <path d="M6 3l-3 3m18-3l-3 3M12 8v5l4 2" stroke="#F0E6DB" stroke-width="2.2" fill="none" stroke-linecap="round"/>183        <circle cx="12" cy="14" r="7" stroke="#F0E6DB" stroke-width="2.2" fill="none"/>184      </svg>185      <svg class="sb-icon" viewBox="0 0 24 24">186        <path d="M6 3l-3 3m18-3l-3 3M12 8v5l4 2" stroke="#F0E6DB" stroke-width="2.2" fill="none" stroke-linecap="round"/>187        <circle cx="12" cy="14" r="7" stroke="#F0E6DB" stroke-width="2.2" fill="none"/>188      </svg>189      <!-- cellular -->190      <svg class="sb-icon" viewBox="0 0 24 24">191        <path d="M3 20h3v-3H3v3zm5 0h3v-7H8v7zm5 0h3V9h-3v11zm5 0h3V4h-3v16z" fill="#F0E6DB"/>192      </svg>193      <!-- cloud -->194      <svg class="sb-icon" viewBox="0 0 24 24">195        <path d="M7 17a4 4 0 110-8 5 5 0 019.5 2A3.5 3.5 0 1117 17H7z" fill="#F0E6DB"/>196      </svg>197      <!-- wifi -->198      <svg class="sb-icon" viewBox="0 0 24 24">199        <path d="M2 8c5-5 15-5 20 0M6 12c3-3 9-3 12 0M10 16c1.5-1.5 4.5-1.5 6 0" stroke="#F0E6DB" stroke-width="2.2" fill="none" stroke-linecap="round"/>200        <circle cx="12" cy="19" r="1.8" fill="#F0E6DB"/>201      </svg>202      <!-- battery -->203      <svg class="sb-icon" viewBox="0 0 24 24">204        <rect x="2" y="6" width="18" height="12" rx="2" ry="2" stroke="#F0E6DB" stroke-width="2" fill="none"/>205        <rect x="4" y="8" width="12" height="8" fill="#F0E6DB"/>206        <rect x="20" y="9" width="2" height="6" fill="#F0E6DB"/>207      </svg>208    </div>209  </div>210 211  <!-- Header -->212  <div class="header">213    <svg class="back" viewBox="0 0 24 24">214      <path d="M15 6L9 12l6 6" stroke="#E7D0BC" stroke-width="2.6" fill="none" stroke-linecap="round" stroke-linejoin="round"/>215    </svg>216    <div class="title">Compose</div>217    <div class="header-actions">218      <!-- paperclip -->219      <svg class="hdr-icon" viewBox="0 0 24 24">220        <path d="M7 12l6-6a4 4 0 015.7 5.7L11 19a6 6 0 01-8.5-8.5l8-8" stroke="#E7D0BC" stroke-width="2.2" fill="none" stroke-linecap="round" stroke-linejoin="round"/>221      </svg>222      <!-- send -->223      <svg class="hdr-icon" viewBox="0 0 24 24">224        <path d="M4 20l16-8L4 4v6l10 2-10 2z" fill="#E7D0BC"/>225      </svg>226      <!-- more -->227      <div class="three-dots"></div>228    </div>229  </div>230 231  <!-- Content -->232  <div class="content">233    <div class="row">234      <div class="label">From</div>235      <div class="value">dbwscratch.test.id5@gmail.com</div>236    </div>237    <div class="row">238      <div class="label">To</div>239      <div class="value" style="color:#CFC1B6">|</div>240      <svg class="chev" viewBox="0 0 24 24">241        <path d="M6 9l6 6 6-6" stroke="#E7D0BC" stroke-width="2.6" fill="none" stroke-linecap="round" stroke-linejoin="round"/>242      </svg>243    </div>244 245    <div class="subject">Shimla tour</div>246 247    <div class="message">248      <div>Shimla tour</div>249      <div>Due Date:Aug 20, 09:00AM</div>250      <div style="height:34px"></div>251      <div>From <span class="underline-red">TickTick</span>:</div>252      <div class="muted">www.ticktick.com</div>253    </div>254  </div>255 256  <!-- Keyboard -->257  <div id="keyboard">258    <div class="kb-toolbar">259      <div class="tool-btn">⌦</div>260      <div class="tool-btn">🙂</div>261      <div class="tool-btn">GIF</div>262      <div class="tool-btn">⚙️</div>263      <div class="tool-btn">G↔︎</div>264      <div class="tool-btn">🎨</div>265      <div class="tool-btn">🔇</div>266    </div>267 268    <div class="kb-rows">269      <!-- Row 1 -->270      <div class="kb-row">271        <div class="key"><span class="num">1</span>q</div>272        <div class="key"><span class="num">2</span>w</div>273        <div class="key"><span class="num">3</span>e</div>274        <div class="key"><span class="num">4</span>r</div>275        <div class="key"><span class="num">5</span>t</div>276        <div class="key"><span class="num">6</span>y</div>277        <div class="key"><span class="num">7</span>u</div>278        <div class="key"><span class="num">8</span>i</div>279        <div class="key"><span class="num">9</span>o</div>280        <div class="key"><span class="num">0</span>p</div>281      </div>282 283      <!-- Row 2 -->284      <div class="kb-row" style="padding-left: 40px;">285        <div class="key">a</div>286        <div class="key">s</div>287        <div class="key">d</div>288        <div class="key">f</div>289        <div class="key">g</div>290        <div class="key">h</div>291        <div class="key">j</div>292        <div class="key">k</div>293        <div class="key">l</div>294      </div>295 296      <!-- Row 3 -->297      <div class="kb-row">298        <div class="key shift">⇧</div>299        <div class="key">z</div>300        <div class="key">x</div>301        <div class="key">c</div>302        <div class="key">v</div>303        <div class="key">b</div>304        <div class="key">n</div>305        <div class="key">m</div>306        <div class="key backspace">⌫</div>307      </div>308 309      <!-- Row 4 -->310      <div class="kb-row">311        <div class="key accent key-wide">?123</div>312        <div class="key">@</div>313        <div class="key">🙂</div>314        <div class="key space">space</div>315        <div class="key dot">.</div>316        <div class="key accent key-wide">↵</div>317      </div>318    </div>319  </div>320 321  <div class="home-indicator"></div>322</div>323</body>324</html>