GD-ML/AndroidCode

1<html lang="en">2<head>3<meta charset="UTF-8">4<title>Free Message UI</title>5<meta name="viewport" content="width=1080, initial-scale=1.0">6<style>7  body { margin: 0; padding: 0; background: transparent; font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Arial, sans-serif; }8  #render-target {9    width: 1080px;10    height: 2400px;11    position: relative;12    overflow: hidden;13    background: #ffffff;14  }15 16  /* Status bar */17  .status-bar {18    position: absolute;19    top: 0;20    left: 0;21    width: 1080px;22    height: 90px;23    padding: 0 24px;24    display: flex;25    align-items: center;26    justify-content: space-between;27    color: #333;28    font-size: 34px;29    background: #ffffff;30  }31  .status-left { display: flex; align-items: center; gap: 24px; }32  .status-right { display: flex; align-items: center; gap: 26px; }33  .status-icon {34    width: 34px; height: 34px; border-radius: 50%; background: #eee; display: inline-flex; align-items: center; justify-content: center; color: #888; font-size: 22px;35  }36 37  /* App bar */38  .app-bar {39    position: absolute;40    top: 90px;41    left: 0;42    width: 1080px;43    height: 110px;44    display: flex;45    align-items: center;46    gap: 20px;47    padding: 0 24px;48    background: #ffffff;49    box-shadow: 0 1px 0 rgba(0,0,0,0.06);50  }51  .back-btn {52    width: 72px; height: 72px; display: flex; align-items: center; justify-content: center; cursor: pointer;53  }54  .back-btn svg { width: 36px; height: 36px; fill: none; stroke: #222; stroke-width: 4px; }55  .title { font-size: 48px; font-weight: 700; color: #1a1a1a; }56 57  /* Content area */58  .content {59    position: absolute;60    top: 200px;61    left: 0;62    width: 1080px;63    height: 1200px;64    background: #F3F4E8; /* soft pale olive */65    padding: 24px 24px 0 24px;66  }67 68  /* Tabs */69  .tabs {70    width: 1032px;71    margin: 10px auto 16px;72    display: flex;73    gap: 48px;74  }75  .tab {76    font-size: 42px;77    color: #222;78    padding-bottom: 14px;79  }80  .tab.active {81    border-bottom: 6px solid #6D6D3B;82    font-weight: 700;83  }84 85  /* Form card */86  .form-card {87    width: 1032px;88    margin: 18px auto;89    border-radius: 26px;90    background: #F8F8F3;91    border: 1px solid #E0E0D0;92    padding: 28px;93    box-sizing: border-box;94  }95 96  .field {97    margin-bottom: 34px;98  }99  .input-box, .textarea-box {100    width: 100%;101    background: #ffffff;102    border: 1px solid #DFDFDF;103    border-radius: 24px;104    padding: 28px;105    box-sizing: border-box;106    font-size: 40px;107    color: #222;108  }109  .textarea-box {110    height: 290px;111    line-height: 1.4;112    position: relative;113  }114  .helper-label {115    position: absolute;116    right: 32px;117    bottom: 24px;118    font-size: 34px;119    color: #8a8a8a;120  }121 122  /* Buttons */123  .actions {124    width: 1032px;125    margin: 24px auto 0;126    display: flex;127    justify-content: space-between;128    align-items: center;129  }130  .btn-outline {131    width: 480px;132    height: 120px;133    border: 3px solid #6D6D3B;134    border-radius: 22px;135    background: transparent;136    color: #6D6D3B;137    font-size: 44px;138    font-weight: 700;139    display: flex;140    align-items: center;141    justify-content: center;142    gap: 18px;143    cursor: pointer;144  }145  .btn-solid {146    width: 520px;147    height: 120px;148    border-radius: 22px;149    background: #6D6D3B;150    color: #ffffff;151    font-size: 48px;152    font-weight: 800;153    display: flex;154    align-items: center;155    justify-content: center;156    cursor: pointer;157  }158  .btn-outline svg { width: 42px; height: 42px; stroke: #6D6D3B; fill: none; stroke-width: 3px; }159 160  /* Keyboard */161  .keyboard {162    position: absolute;163    left: 0;164    bottom: 0;165    width: 1080px;166    height: 980px;167    background: #1E1E1E;168    color: #EDEDED;169    display: flex;170    flex-direction: column;171    box-shadow: 0 -8px 24px rgba(0,0,0,0.25);172  }173  .suggestion-bar {174    height: 120px;175    background: #242424;176    display: flex;177    align-items: center;178    padding: 0 22px;179    gap: 24px;180    font-size: 40px;181  }182  .suggestion {183    color: #EDEDED;184    padding: 10px 18px;185    border-radius: 16px;186    background: #2A2A2A;187  }188  .suggestion.center {189    flex: 1;190    text-align: center;191    background: #2A2A2A;192  }193  .mic {194    margin-left: auto;195    width: 54px; height: 54px;196  }197  .mic svg { width: 100%; height: 100%; fill: #BDBDBD; }198 199  .keys-row {200    display: flex;201    justify-content: center;202    gap: 14px;203    padding: 18px 18px;204  }205  .key {206    width: 90px; height: 120px;207    background: #2C2C2C;208    border-radius: 18px;209    display: flex;210    align-items: center;211    justify-content: center;212    color: #EDEDED;213    font-size: 48px;214    box-shadow: inset 0 -3px 0 rgba(255,255,255,0.04);215  }216  .key.wide { width: 120px; }217  .key.space { width: 520px; }218  .key.small { font-size: 40px; }219  .enter svg, .backspace svg, .shift svg {220    width: 42px; height: 42px; fill: #EDEDED;221  }222  .bottom-bar {223    padding: 8px 0 12px;224    display: flex;225    align-items: center;226    justify-content: center;227  }228  .hide-arrow {229    width: 46px; height: 46px; border-radius: 50%;230    background: #2C2C2C; display: flex; align-items: center; justify-content: center;231  }232  .hide-arrow svg { width: 26px; height: 26px; fill: #BDBDBD; }233</style>234</head>235<body>236<div id="render-target">237 238  <!-- Status bar -->239  <div class="status-bar">240    <div class="status-left">241      <div style="font-weight:700;">3:01</div>242      <div class="status-icon">☾</div>243      <div class="status-icon">•</div>244      <div class="status-icon">🔍</div>245      <div class="status-icon">T</div>246      <div class="status-icon">•</div>247    </div>248    <div class="status-right">249      <div class="status-icon">⌖</div>250      <div class="status-icon">∅</div>251      <div class="status-icon">🛜</div>252      <div class="status-icon">⟐</div>253    </div>254  </div>255 256  <!-- App bar -->257  <div class="app-bar">258    <div class="back-btn">259      <svg viewBox="0 0 24 24"><path d="M15 18l-6-6 6-6"/><path d="M21 12H9" stroke-linecap="round"/></svg>260    </div>261    <div class="title">Free Message</div>262  </div>263 264  <!-- Content area -->265  <div class="content">266    <div class="tabs">267      <div class="tab active">Type Message</div>268      <div class="tab">Use Message Templates</div>269    </div>270 271    <div class="form-card">272      <div class="field">273        <div class="input-box">Dear</div>274      </div>275 276      <div class="field" style="position: relative;">277        <div class="textarea-box">278          <div>Happy Birthday Abdul</div>279          <div class="helper-label">20/ 250</div>280        </div>281      </div>282 283      <div class="field">284        <div class="input-box">From</div>285      </div>286    </div>287 288    <div class="actions">289      <div class="btn-outline">290        <svg viewBox="0 0 24 24"><circle cx="11" cy="11" r="7"/><path d="M20 20l-4.2-4.2" stroke-linecap="round"/></svg>291        <span>Preview</span>292      </div>293      <div class="btn-solid">Continue</div>294    </div>295  </div>296 297  <!-- Keyboard -->298  <div class="keyboard">299    <div class="suggestion-bar">300      <div class="suggestion">Abdul</div>301      <div class="suggestion center">| abdulkarim91 | @gmail.com</div>302      <div class="suggestion">Abdullah</div>303      <div class="mic">304        <svg viewBox="0 0 24 24"><path d="M12 14a3 3 0 0 0 3-3V6a3 3 0 1 0-6 0v5a3 3 0 0 0 3 3z"/><path d="M19 11a7 7 0 0 1-14 0"/><path d="M12 18v4"/></svg>305      </div>306    </div>307 308    <!-- Row 1 -->309    <div class="keys-row">310      <div class="key">q</div><div class="key">w</div><div class="key">e</div><div class="key">r</div>311      <div class="key">t</div><div class="key">y</div><div class="key">u</div><div class="key">i</div>312      <div class="key">o</div><div class="key">p</div>313    </div>314 315    <!-- Row 2 -->316    <div class="keys-row">317      <div class="key">a</div><div class="key">s</div><div class="key">d</div><div class="key">f</div>318      <div class="key">g</div><div class="key">h</div><div class="key">j</div><div class="key">k</div>319      <div class="key">l</div>320    </div>321 322    <!-- Row 3 -->323    <div class="keys-row">324      <div class="key wide shift">325        <svg viewBox="0 0 24 24"><path d="M12 4l7 7H5l7-7z"/></svg>326      </div>327      <div class="key">z</div><div class="key">x</div><div class="key">c</div><div class="key">v</div>328      <div class="key">b</div><div class="key">n</div><div class="key">m</div>329      <div class="key wide backspace">330        <svg viewBox="0 0 24 24"><path d="M20 7h-9l-5 5 5 5h9"/><path d="M13 9l4 4-4 4"/></svg>331      </div>332    </div>333 334    <!-- Row 4 -->335    <div class="keys-row">336      <div class="key wide small">?123</div>337      <div class="key small">,</div>338      <div class="key small">😊</div>339      <div class="key space"></div>340      <div class="key small">.</div>341      <div class="key wide enter">342        <svg viewBox="0 0 24 24"><path d="M9 12h9v3H9l3 3"/><path d="M6 6v10"/></svg>343      </div>344    </div>345 346    <div class="bottom-bar">347      <div class="hide-arrow">348        <svg viewBox="0 0 24 24"><path d="M12 14l-5-5h10l-5 5z"/></svg>349      </div>350    </div>351  </div>352 353</div>354</body>355</html>