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 Screen Mock</title>7<style>8  body { margin: 0; padding: 0; background: transparent; font-family: "Segoe UI", Roboto, Arial, sans-serif; }9  #render-target {10    width: 1080px;11    height: 2400px;12    position: relative;13    overflow: hidden;14    background: #1b1514;15    color: #ffffff;16  }17 18  /* Status bar */19  .status-bar {20    position: absolute;21    top: 0; left: 0; right: 0;22    height: 96px;23    padding: 0 36px;24    display: flex;25    align-items: center;26    justify-content: space-between;27    color: #f5f5f5;28    font-size: 32px;29    letter-spacing: 1px;30  }31  .status-icons { display: flex; gap: 26px; align-items: center; }32 33  /* App bar */34  .app-bar {35    position: absolute;36    top: 96px;37    left: 0; right: 0;38    height: 160px;39    display: flex;40    align-items: center;41    padding: 0 32px;42    border-bottom: 1px solid #342a29;43  }44  .app-title {45    font-size: 52px;46    font-weight: 600;47    margin-left: 18px;48  }49  .app-actions {50    margin-left: auto;51    display: flex;52    gap: 40px;53    align-items: center;54  }55  .icon-btn svg { width: 48px; height: 48px; fill: #e6d2cd; }56 57  /* Fields */58  .form {59    position: absolute;60    top: 256px;61    left: 0; right: 0;62    padding: 0 36px;63  }64  .row {65    display: flex;66    align-items: center;67    height: 120px;68    border-bottom: 1px solid #342a29;69    color: #e9dcd8;70  }71  .label {72    width: 120px;73    color: #b8a7a4;74    font-size: 32px;75  }76  .value {77    flex: 1;78    font-size: 34px;79  }80  .placeholder { color: #7e7775; }81  .chevron {82    width: 40px; height: 40px; margin-left: 12px;83  }84 85  /* Message body */86  .body-area {87    padding: 36px 0 24px;88    color: #ffffff;89    line-height: 1.4;90  }91  .body-area .line { font-size: 44px; }92  .body-area .muted { color: #cccccc; }93 94  /* Keyboard mock */95  .keyboard {96    position: absolute;97    left: 0; right: 0;98    bottom: 84px;99    height: 860px;100    background: #211a19;101    border-top: 1px solid #3a2f2e;102    padding: 16px 18px 22px;103    box-sizing: border-box;104  }105  .kb-tools {106    display: flex;107    align-items: center;108    gap: 34px;109    height: 110px;110    color: #cfc4c2;111  }112  .kb-tools .tool {113    width: 88px; height: 88px;114    border-radius: 20px;115    background: #2a2221;116    border: 1px solid #3b312f;117    display: flex; align-items: center; justify-content: center;118    font-size: 28px;119  }120  .kb-rows { margin-top: 6px; display: grid; gap: 18px; }121  .kb-row { display: flex; gap: 16px; justify-content: center; }122  .key {123    background: #2b2322;124    border: 1px solid #3d3230;125    color: #f3e7e4;126    height: 120px;127    min-width: 84px;128    border-radius: 22px;129    display: flex; align-items: center; justify-content: center;130    font-size: 44px;131    box-sizing: border-box;132    padding: 0 14px;133  }134  .key.wide { min-width: 110px; }135  .space { flex: 1; min-width: 420px; }136  .round {137    width: 128px; height: 128px; border-radius: 64px;138    background: #e3b9b5; color: #351f1e; font-weight: 700; border: none;139  }140  .round-dark {141    width: 128px; height: 128px; border-radius: 64px;142    background: #caa4a0; color: #2b1b1a; border: none;143  }144 145  /* Gesture pill */146  .pill {147    position: absolute;148    bottom: 24px;149    left: 50%;150    transform: translateX(-50%);151    width: 300px;152    height: 12px;153    background: #e7e7e7;154    border-radius: 12px;155    opacity: 0.9;156  }157</style>158</head>159<body>160<div id="render-target">161  <!-- Status bar -->162  <div class="status-bar">163    <div>8:08</div>164    <div class="status-icons">165      <!-- simple status icons -->166      <svg width="44" height="44" viewBox="0 0 24 24" fill="#fff" aria-hidden="true">167        <path d="M2 18h2v3H2v-3zm4-3h2v6H6v-6zm4-3h2v9h-2V12zm4-4h2v13h-2V8zm4-6h2v19h-2V2z"/>168      </svg>169      <svg width="44" height="44" viewBox="0 0 24 24" fill="#fff" aria-hidden="true">170        <path d="M12 18l-4-4h8l-4 4zm7-7H5l-3 3h20l-3-3z"/>171      </svg>172      <svg width="44" height="44" viewBox="0 0 24 24" fill="#fff" aria-hidden="true">173        <path d="M16 2H8a2 2 0 0 0-2 2v16l6-3 6 3V4a2 2 0 0 0-2-2z"/>174      </svg>175      <svg width="44" height="44" viewBox="0 0 24 24" fill="none" stroke="#fff" stroke-width="2">176        <rect x="3" y="5" width="18" height="14" rx="2"></rect>177        <rect x="15" y="7" width="4" height="10" fill="#fff" stroke="none"></rect>178      </svg>179    </div>180  </div>181 182  <!-- App bar -->183  <div class="app-bar">184    <div class="icon-btn" aria-hidden="true">185      <svg viewBox="0 0 24 24"><path fill="#e6d2cd" d="M15.5 19l-7-7 7-7 1.5 1.5L11 12l6 6-1.5 1z"/></svg>186    </div>187    <div class="app-title">Compose</div>188    <div class="app-actions">189      <div class="icon-btn">190        <!-- attach -->191        <svg viewBox="0 0 24 24"><path d="M7 13.5V7a5 5 0 0 1 10 0v8a3.5 3.5 0 1 1-7 0V8h2v7a1.5 1.5 0 1 0 3 0V7a3 3 0 0 0-6 0v6.5H7z"/></svg>192      </div>193      <div class="icon-btn">194        <!-- send -->195        <svg viewBox="0 0 24 24"><path d="M2 21l20-9L2 3v7l14 2-14 2v7z"/></svg>196      </div>197      <div class="icon-btn">198        <!-- more -->199        <svg viewBox="0 0 24 24"><circle cx="12" cy="5" r="2" fill="#e6d2cd"/><circle cx="12" cy="12" r="2" fill="#e6d2cd"/><circle cx="12" cy="19" r="2" fill="#e6d2cd"/></svg>200      </div>201    </div>202  </div>203 204  <!-- Form fields -->205  <div class="form">206    <div class="row">207      <div class="label">From</div>208      <div class="value">dbwscratch.test.id6@gmail.com</div>209    </div>210    <div class="row">211      <div class="label">To</div>212      <div class="value placeholder"> </div>213      <svg class="chevron" viewBox="0 0 24 24">214        <path fill="#b8a7a4" d="M7 10l5 5 5-5H7z"/>215      </svg>216    </div>217    <div class="row">218      <div class="label">Subject</div>219      <div class="value placeholder">Subject</div>220    </div>221 222    <div class="body-area">223      <div class="line">Weeding plan</div>224      <div class="line">Due Date: Jul 19, 12:30pm</div>225      <div style="height: 42px"></div>226      <div class="line">From <span class="muted">TickTick:</span></div>227      <div class="line">www.ticktick.com</div>228    </div>229  </div>230 231  <!-- Keyboard mock -->232  <div class="keyboard">233    <div class="kb-tools">234      <div class="tool">⌨︎</div>235      <div class="tool">☺</div>236      <div class="tool">GIF</div>237      <div class="tool">⇄</div>238      <div class="tool">239        <svg width="38" height="38" viewBox="0 0 24 24" fill="#e7dbd8"><path d="M12 8a4 4 0 1 0 0 8 4 4 0 0 0 0-8zm8-2h-4l-2-2H10L8 6H4a2 2 0 0 0-2 2v10a2 2 0 0 0 2 2h16a2 2 0 0 0 2-2V8a2 2 0 0 0-2-2z"/></svg>240      </div>241      <div class="tool">🎨</div>242      <div style="margin-left:auto;"></div>243      <div class="tool">🎤</div>244    </div>245 246    <div class="kb-rows">247      <div class="kb-row">248        <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><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>249      </div>250      <div class="kb-row">251        <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><div class="key">h</div><div class="key">j</div><div class="key">k</div><div class="key">l</div>252      </div>253      <div class="kb-row">254        <div class="key wide">⇧</div>255        <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>256        <div class="key wide">⌫</div>257      </div>258      <div class="kb-row">259        <div class="round-dark">?123</div>260        <div class="key">@</div>261        <div class="key">☺</div>262        <div class="key space">space</div>263        <div class="key">.</div>264        <div class="round">➜</div>265      </div>266    </div>267  </div>268 269  <div class="pill"></div>270</div>271</body>272</html>