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: Arial, Helvetica, sans-serif; }7  #render-target {8    width: 1080px;9    height: 2400px;10    position: relative;11    overflow: hidden;12    background: #F5F6F0;13  }14 15  /* Status bar */16  .status-bar {17    position: absolute;18    top: 0;19    left: 0;20    width: 1080px;21    height: 90px;22    background: #FFFFFF;23    display: flex;24    align-items: center;25    padding: 0 28px;26    box-sizing: border-box;27    color: #222;28    font-size: 34px;29  }30  .status-bar .time { font-weight: 600; }31  .status-icons {32    margin-left: auto;33    display: flex;34    gap: 28px;35    align-items: center;36  }37  .icon-dot { width: 10px; height: 10px; background: #555; border-radius: 50%; }38 39  /* Header */40  .header {41    position: absolute;42    top: 90px;43    left: 0;44    width: 1080px;45    height: 110px;46    background: #FFFFFF;47    display: flex;48    align-items: center;49    padding: 0 24px;50    box-sizing: border-box;51    border-bottom: 1px solid #E6E6E0;52  }53  .back-btn {54    width: 60px;55    height: 60px;56    display: flex;57    justify-content: center;58    align-items: center;59    margin-right: 16px;60    cursor: pointer;61  }62  .header-title {63    font-size: 44px;64    color: #222;65    font-weight: 600;66  }67 68  /* Tabs */69  .tabs {70    position: absolute;71    top: 200px;72    left: 0;73    width: 1080px;74    height: 120px;75    background: #F3F4EE;76    display: flex;77    align-items: flex-end;78    padding: 0 40px;79    box-sizing: border-box;80    gap: 60px;81  }82  .tab {83    font-size: 40px;84    color: #3B3B3B;85    padding-bottom: 26px;86  }87  .tab.active {88    color: #1F1F1F;89    font-weight: 700;90    border-bottom: 6px solid #55603A;91  }92 93  /* Card with inputs */94  .card {95    position: absolute;96    top: 320px;97    left: 40px;98    width: 1000px;99    background: #FAFAF6;100    border: 1px solid #E3E4D8;101    border-radius: 26px;102    box-shadow: 0 6px 16px rgba(0,0,0,0.06);103    padding: 28px;104    box-sizing: border-box;105  }106  .group { margin-bottom: 26px; }107  .label {108    font-size: 30px;109    color: #666;110    margin: 10px 0 12px;111  }112  .input, .textarea {113    width: 100%;114    border: 1px solid #DADCC9;115    border-radius: 18px;116    background: #FFFFFF;117    font-size: 36px;118    color: #222;119    padding: 28px;120    box-sizing: border-box;121  }122  .textarea { height: 280px; resize: none; line-height: 1.4; }123  .counter {124    position: absolute;125    right: 36px;126    bottom: 220px; /* sits near end of textarea */127    font-size: 30px;128    color: #999;129  }130 131  /* Buttons */132  .actions {133    position: absolute;134    top: 1300px;135    left: 40px;136    width: 1000px;137    display: flex;138    justify-content: space-between;139    align-items: center;140  }141  .btn {142    width: 460px;143    height: 120px;144    border-radius: 20px;145    font-size: 42px;146    display: flex;147    align-items: center;148    justify-content: center;149    box-sizing: border-box;150    cursor: pointer;151  }152  .btn-outline {153    border: 2px solid #B6B98C;154    color: #2B2B2B;155    background: #FFFFFF;156    gap: 20px;157  }158  .btn-primary {159    background: #6D743F;160    color: #FFFFFF;161    border: none;162    font-weight: 700;163  }164 165  /* Keyboard mock */166  .keyboard {167    position: absolute;168    left: 0;169    bottom: 0;170    width: 1080px;171    height: 900px;172    background: #1F1F21;173    color: #EEE;174    box-sizing: border-box;175    padding-top: 18px;176  }177  .suggestions {178    height: 120px;179    display: flex;180    align-items: center;181    justify-content: space-around;182    color: #D8D8D8;183    font-size: 34px;184    border-bottom: 1px solid #3A3A3C;185    margin: 0 20px;186  }187  .keys {188    padding: 24px 26px;189    box-sizing: border-box;190  }191  .row {192    display: flex;193    justify-content: space-between;194    margin-bottom: 26px;195  }196  .key {197    width: 90px;198    height: 110px;199    border-radius: 16px;200    background: #2A2A2C;201    display: flex;202    align-items: center;203    justify-content: center;204    font-size: 44px;205    color: #EEE;206  }207  .key.wide { width: 160px; }208  .space { flex: 1; height: 110px; background: #2A2A2C; border-radius: 16px; }209  .key.accept {210    width: 120px;211    background: #94A7C6;212    color: #0E2436;213    font-weight: 700;214  }215 216  /* Utility SVGs */217  svg { display: block; }218</style>219</head>220<body>221<div id="render-target">222 223  <!-- Status bar -->224  <div class="status-bar">225    <div class="time">1:15</div>226    <div class="status-icons">227      <div class="icon-dot"></div>228      <div class="icon-dot"></div>229      <div class="icon-dot"></div>230      <!-- simple mute icon -->231      <svg width="32" height="32" viewBox="0 0 24 24" fill="#555">232        <path d="M3 9v6h4l5 4V5L7 9H3zM16 9v6m3-8v10" stroke="#555" stroke-width="2" fill="none"/>233      </svg>234    </div>235  </div>236 237  <!-- Title bar -->238  <div class="header">239    <div class="back-btn">240      <svg width="44" height="44" viewBox="0 0 24 24" fill="none">241        <path d="M15 18l-6-6 6-6" stroke="#222" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>242      </svg>243    </div>244    <div class="header-title">Free Message</div>245  </div>246 247  <!-- Tabs -->248  <div class="tabs">249    <div class="tab active">Type Message</div>250    <div class="tab">Use Message Templates</div>251  </div>252 253  <!-- Input card -->254  <div class="card">255    <div class="group">256      <div class="label">Dear</div>257      <div class="input">Husband</div>258    </div>259 260    <div class="group" style="position: relative;">261      <div class="label">Message</div>262      <div class="textarea">happy marriage anniversary</div>263      <div class="counter">26/250</div>264    </div>265 266    <div class="group">267      <div class="label">From</div>268      <div class="input">Amelia</div>269    </div>270  </div>271 272  <!-- Actions -->273  <div class="actions">274    <div class="btn btn-outline">275      <svg width="42" height="42" viewBox="0 0 24 24" fill="none">276        <path d="M1 12s4-7 11-7 11 7 11 7-4 7-11 7S1 12 1 12z" stroke="#6D743F" stroke-width="2"/>277        <circle cx="12" cy="12" r="3" stroke="#6D743F" stroke-width="2"/>278      </svg>279      <span>Preview</span>280    </div>281    <div class="btn btn-primary">Continue</div>282  </div>283 284  <!-- Keyboard mock -->285  <div class="keyboard">286    <div class="suggestions">287      <span>Amelia</span>288      <span>amelia....ler2709 @email.com</span>289      <span>amelia....r2709 @gmail.com</span>290    </div>291    <div class="keys">292      <div class="row">293        <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>294      </div>295      <div class="row">296        <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>297      </div>298      <div class="row">299        <div class="key wide">⇧</div>300        <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>301        <div class="key wide">⌫</div>302      </div>303      <div class="row">304        <div class="key wide">?123</div>305        <div class="key">,</div>306        <div class="key">😊</div>307        <div class="space"></div>308        <div class="key">.</div>309        <div class="key accept">✓</div>310      </div>311    </div>312  </div>313 314</div>315</body>316</html>