GD-ML/AndroidCode

1<html>2<head>3<meta charset="UTF-8">4<title>Free Message UI</title>5<style>6  body { margin: 0; padding: 0; background: transparent; font-family: "Inter", Arial, sans-serif; }7  #render-target {8    width: 1080px;9    height: 2400px;10    position: relative;11    overflow: hidden;12    background: #F4F5EA;13  }14 15  /* Top status bar */16  .status-bar {17    height: 80px;18    padding: 0 36px;19    display: flex;20    align-items: center;21    justify-content: space-between;22    color: #1b1b1b;23    font-size: 34px;24    letter-spacing: 0.2px;25  }26  .status-icons { display: flex; align-items: center; gap: 22px; }27  .status-dot, .status-circle {28    width: 18px; height: 18px; border-radius: 50%; background: #777;29  }30  .status-pin {31    width: 22px; height: 22px; border: 3px solid #777; border-radius: 50%;32    box-sizing: border-box;33  }34  .status-wifi {35    width: 28px; height: 18px;36    border-top: 4px solid #777; border-left: 4px solid #777; border-right: 4px solid transparent;37    transform: skewX(-20deg);38  }39 40  /* Header */41  .header {42    height: 92px;43    display: flex;44    align-items: center;45    padding: 0 28px;46    gap: 18px;47  }48  .back-btn {49    width: 64px; height: 64px; display: flex; align-items: center; justify-content: center;50  }51  .header-title {52    font-size: 44px; font-weight: 700; color: #1c1c1c;53  }54 55  /* Tabs */56  .tabs {57    display: flex;58    padding: 0 36px;59    height: 100px;60    align-items: flex-end;61    gap: 40px;62  }63  .tab {64    font-size: 36px; color: #333; padding-bottom: 16px;65  }66  .tab.active {67    color: #1b1b1b; font-weight: 700; border-bottom: 6px solid #6E7332;68  }69 70  /* Card / form area */71  .card {72    margin: 26px 28px 0;73    background: #ffffff;74    border: 1px solid #D9D9D9;75    border-radius: 26px;76    box-shadow: 0 2px 0 rgba(0,0,0,0.04);77    padding: 28px;78  }79  .field {80    margin-bottom: 26px;81  }82  .input {83    height: 120px;84    border: 2px solid #D7D7D7;85    border-radius: 22px;86    display: flex;87    align-items: center;88    padding: 0 26px;89    font-size: 38px;90    color: #777;91    box-sizing: border-box;92  }93  .label {94    font-size: 30px; color: #6f6f6f; margin: 6px 6px 12px;95  }96  .textarea {97    height: 380px;98    border: 2px solid #D7D7D7;99    border-radius: 22px;100    padding: 24px;101    font-size: 38px;102    color: #3a3a3a;103    box-sizing: border-box;104    line-height: 64px;105    background: #fff;106  }107  .counter {108    text-align: right;109    font-size: 30px; color: #9A9A9A;110    padding: 10px 8px 0;111  }112 113  .from-label {114    font-size: 32px; color: #3a3a3a; margin: 22px 6px 10px;115  }116 117  /* Buttons row */118  .actions {119    display: flex;120    gap: 24px;121    padding: 24px 28px;122  }123  .btn-outline {124    flex: 1;125    height: 110px;126    border: 2px solid #9CA16B;127    border-radius: 22px;128    display: flex; align-items: center; justify-content: center;129    color: #5e6236; font-size: 40px; font-weight: 700;130    gap: 18px;131    background: #fff;132  }133  .btn-primary {134    flex: 1;135    height: 110px;136    border-radius: 22px;137    display: flex; align-items: center; justify-content: center;138    color: #ffffff; font-size: 44px; font-weight: 800;139    background: #6E7332;140    box-shadow: 0 4px 0 rgba(0,0,0,0.06) inset;141  }142 143  /* Keyboard */144  .keyboard {145    position: absolute;146    left: 0; bottom: 0;147    width: 100%;148    height: 950px;149    background: #1D1D1D;150    border-top-left-radius: 16px; border-top-right-radius: 16px;151  }152  .kb-suggestions {153    height: 110px; display: flex; align-items: center;154    padding: 0 22px; gap: 26px; color: #dcdcdc; font-size: 40px;155    border-bottom: 1px solid #2a2a2a;156  }157  .kb-suggestions .sep { color: #808080; font-weight: 400; }158  .kb-suggestions .spacer { flex: 1; }159  .kb-icon-grid {160    width: 44px; height: 44px; display: grid; grid-template-columns: repeat(3, 10px); grid-gap: 6px;161  }162  .kb-icon-grid div { width: 10px; height: 10px; background: #c0c0c0; border-radius: 2px; }163  .kb-rows {164    padding: 22px 18px;165  }166  .kb-row {167    display: grid;168    grid-template-columns: repeat(10, 1fr);169    gap: 16px;170    margin-bottom: 22px;171  }172  .key {173    height: 120px; border-radius: 18px; background: #2A2A2A;174    color: #EAEAEA; display: flex; align-items: center; justify-content: center;175    font-size: 54px; font-weight: 500;176  }177  .kb-row.two { grid-template-columns: repeat(9, 1fr); }178  .kb-row.three { grid-template-columns: repeat(9, 1fr); }179  .kb-row.four {180    grid-template-columns: 140px 140px 140px 1fr 140px 140px 180px;181    align-items: center;182  }183  .key.small { font-size: 42px; }184  .space { height: 120px; border-radius: 18px; background: #2A2A2A; color: #BEBEBE; display:flex; align-items:center; justify-content:center; font-size: 40px; }185  .enter {186    height: 120px; border-radius: 18px; background: #4A4A4A; color: #EAEAEA; display:flex; align-items:center; justify-content:center; font-size: 44px; font-weight: 700;187  }188  .circle-btn {189    width: 120px; height: 120px; background: #CFE0FF; border-radius: 60px; display:flex; align-items:center; justify-content:center;190  }191</style>192</head>193<body>194<div id="render-target">195 196  <!-- Status bar -->197  <div class="status-bar">198    <div>3:03</div>199    <div class="status-icons">200      <div class="status-dot"></div>201      <div class="status-circle"></div>202      <div class="status-pin"></div>203      <div class="status-wifi"></div>204    </div>205  </div>206 207  <!-- Header -->208  <div class="header">209    <div class="back-btn">210      <svg width="48" height="48" viewBox="0 0 24 24">211        <path d="M15 18l-6-6 6-6" stroke="#2f2f2f" stroke-width="2.5" fill="none" stroke-linecap="round" stroke-linejoin="round"/>212      </svg>213    </div>214    <div class="header-title">Free Message</div>215  </div>216 217  <!-- Tabs -->218  <div class="tabs">219    <div class="tab active">Type Message</div>220    <div class="tab" style="color:#565656;">Use Message Templates</div>221  </div>222 223  <!-- Card -->224  <div class="card">225    <div class="field">226      <div class="input">Dear</div>227    </div>228 229    <div class="label">Message</div>230    <div class="textarea">Happy Birthday Abdul</div>231 232    <div class="counter">20/250</div>233 234    <div class="from-label">From</div>235    <div class="input" style="color:#1f1f1f;">Levi Van Loon</div>236  </div>237 238  <!-- Actions -->239  <div class="actions">240    <div class="btn-outline">241      <svg width="40" height="40" viewBox="0 0 24 24">242        <path d="M1 12s4-7 11-7 11 7 11 7-4 7-11 7S1 12 1 12z" stroke="#6E7332" stroke-width="2" fill="none"/>243        <circle cx="12" cy="12" r="3" fill="#6E7332"/>244      </svg>245      <div>Preview</div>246    </div>247    <div class="btn-primary">Continue</div>248  </div>249 250  <!-- Keyboard -->251  <div class="keyboard">252    <div class="kb-suggestions">253      <div class="kb-icon-grid">254        <div></div><div></div><div></div>255        <div></div><div></div><div></div>256        <div></div><div></div><div></div>257      </div>258      <div>Loon</div>259      <div class="sep">|</div>260      <div>Loo</div>261      <div class="sep">|</div>262      <div>Koo</div>263      <div class="spacer"></div>264      <svg width="42" height="42" viewBox="0 0 24 24">265        <path d="M12 3c1.4 0 2.5 1.1 2.5 2.5v6a2.5 2.5 0 1 1-5 0v-6C9.5 4.1 10.6 3 12 3z" fill="#cfcfcf"/>266        <path d="M12 14v4" stroke="#cfcfcf" stroke-width="2" stroke-linecap="round"/>267        <path d="M9 22h6" stroke="#cfcfcf" stroke-width="2" stroke-linecap="round"/>268      </svg>269    </div>270 271    <div class="kb-rows">272      <div class="kb-row">273        <div class="key">q</div>274        <div class="key">w</div>275        <div class="key">e</div>276        <div class="key">r</div>277        <div class="key">t</div>278        <div class="key">y</div>279        <div class="key">u</div>280        <div class="key">i</div>281        <div class="key">o</div>282        <div class="key">p</div>283      </div>284      <div class="kb-row two">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      <div class="kb-row three">296        <div class="key">z</div>297        <div class="key">x</div>298        <div class="key">c</div>299        <div class="key">v</div>300        <div class="key">b</div>301        <div class="key">n</div>302        <div class="key">m</div>303        <div class="key">304          <svg width="32" height="32" viewBox="0 0 24 24">305            <path d="M20 8l-8 8-8-8" stroke="#eaeaea" stroke-width="2.2" fill="none" stroke-linecap="round" stroke-linejoin="round"/>306          </svg>307        </div>308        <div class="key">.</div>309      </div>310      <div class="kb-row four">311        <div class="key small">?123</div>312        <div class="key small">,</div>313        <div class="key small">314          <svg width="40" height="40" viewBox="0 0 24 24">315            <circle cx="12" cy="12" r="9" fill="#d9d9d9"/>316            <circle cx="9" cy="10" r="1.5" fill="#6a6a6a"/>317            <circle cx="15" cy="10" r="1.5" fill="#6a6a6a"/>318            <path d="M8 15c1.2 1 2.7 1.5 4 1.5s2.8-.5 4-1.5" stroke="#6a6a6a" stroke-width="1.5" fill="none" stroke-linecap="round"/>319          </svg>320        </div>321        <div class="space">space</div>322        <div class="key small">.</div>323        <div class="enter">•</div>324        <div class="circle-btn">325          <svg width="60" height="60" viewBox="0 0 24 24">326            <path d="M6 12l4 4 8-8" stroke="#2f4ea8" stroke-width="3" fill="none" stroke-linecap="round" stroke-linejoin="round"/>327          </svg>328        </div>329      </div>330    </div>331  </div>332 333</div>334</body>335</html>