GD-ML/AndroidCode

1<html lang="en">2<head>3<meta charset="UTF-8">4<meta name="viewport" content="width=1080, initial-scale=1.0">5<title>Free Message UI</title>6<style>7  body { margin: 0; padding: 0; background: transparent; font-family: Arial, Helvetica, sans-serif; }8  #render-target {9    width: 1080px;10    height: 2400px;11    position: relative;12    overflow: hidden;13    background: #F3F2E9;14  }15 16  /* Status bar */17  .status-bar {18    height: 84px;19    padding: 0 28px;20    display: flex;21    align-items: center;22    justify-content: space-between;23    color: #222;24    font-size: 34px;25    background: #FFFFFF;26    box-shadow: 0 1px 0 rgba(0,0,0,0.06);27  }28  .status-icons {29    display: flex;30    align-items: center;31    gap: 22px;32  }33  .dot {34    width: 16px; height: 16px; background:#444; border-radius: 50%;35    opacity: 0.8;36  }37 38  /* App bar */39  .app-bar {40    height: 120px;41    display: flex;42    align-items: center;43    gap: 18px;44    padding: 0 28px;45    background: #FFFFFF;46    border-bottom: 1px solid #e6e6e6;47  }48  .app-title {49    font-size: 46px;50    font-weight: 600;51    color: #1b1b1b;52  }53  .icon-btn {54    width: 72px; height: 72px; display:flex; align-items:center; justify-content:center;55  }56  /* Tabs */57  .tabs {58    height: 110px;59    display: flex;60    align-items: flex-end;61    padding: 0 36px;62    gap: 36px;63    background: #FFFFFF;64    border-bottom: 1px solid #e0e0e0;65  }66  .tab {67    padding: 24px 10px 18px;68    font-size: 40px;69    color: #666;70  }71  .tab.active {72    color: #1c1c1c;73    font-weight: 600;74    border-bottom: 6px solid #303423;75  }76 77  /* Form card */78  .form-card {79    position: absolute;80    top: 315px;81    left: 28px;82    right: 28px;83    background: #FAFAF6;84    border: 1px solid #E6E5DA;85    border-radius: 28px;86    padding: 28px;87  }88  .field {89    margin-bottom: 26px;90  }91  .label {92    font-size: 30px;93    color: #7b7b7b;94    margin: 10px 12px;95  }96  .input {97    width: 100%;98    height: 110px;99    background: #FFFFFF;100    border: 1px solid #D7D7C6;101    border-radius: 20px;102    font-size: 40px;103    color: #1f1f1f;104    padding: 26px 28px;105    box-sizing: border-box;106  }107  .textarea {108    width: 100%;109    height: 480px;110    background: #FFFFFF;111    border: 1px solid #D7D7C6;112    border-radius: 22px;113    font-size: 38px;114    color: #2a2a2a;115    padding: 28px;116    line-height: 1.4;117    box-sizing: border-box;118    resize: none;119  }120  .counter {121    position: absolute;122    right: 48px;123    top: 900px; /* positioned near bottom-right of textarea */124    color: #8a8a8a;125    font-size: 30px;126  }127 128  /* Buttons area */129  .buttons {130    position: absolute;131    left: 28px;132    right: 28px;133    bottom: 860px; /* just above keyboard */134    display: flex;135    gap: 28px;136  }137  .btn {138    flex: 1;139    height: 112px;140    border-radius: 26px;141    border: 1px solid #C9C7B3;142    background: #FFFFFF;143    color: #374225;144    font-size: 42px;145    font-weight: 600;146    display: flex; align-items: center; justify-content: center;147    gap: 16px;148    box-shadow: 0 1px 0 rgba(0,0,0,0.05);149  }150  .btn.primary {151    background: #787A3B;152    color: #FFFFFF;153    border: none;154  }155 156  /* Keyboard mock */157  .keyboard {158    position: absolute;159    bottom: 0;160    left: 0; right: 0;161    height: 820px;162    background: #1F1F22;163    padding: 30px 24px 24px;164    box-sizing: border-box;165  }166  .kbd-row {167    display: flex;168    justify-content: space-between;169    margin-bottom: 26px;170    padding: 0 14px;171  }172  .key {173    width: 86px;174    height: 116px;175    background: #2C2D30;176    border-radius: 18px;177    color: #E8E8E8;178    font-size: 44px;179    display:flex; align-items:center; justify-content:center;180  }181  .key.wide { width: 150px; }182  .key.space { flex: 1; margin: 0 16px; }183  .key.small { width: 70px; }184  .row4 { padding: 0; }185  .hint-bar {186    width: 100%;187    height: 80px;188    margin-bottom: 14px;189    background: #2A2B2E;190    border-radius: 16px;191    color: #D6D6D6;192    display:flex; align-items:center; justify-content:center;193    font-size: 40px;194  }195</style>196</head>197<body>198<div id="render-target">199  <!-- Status bar -->200  <div class="status-bar">201    <div class="time">1:14</div>202    <div class="status-icons">203      <div class="dot"></div>204      <div class="dot"></div>205      <div class="dot"></div>206      <div class="dot"></div>207    </div>208  </div>209 210  <!-- App bar with back -->211  <div class="app-bar">212    <div class="icon-btn">213      <svg width="48" height="48" viewBox="0 0 24 24" fill="#2f2f2f">214        <path d="M15.5 3.5 7 12l8.5 8.5-1.4 1.4L4.2 12l9.9-9.9z"/>215      </svg>216    </div>217    <div class="app-title">Free Message</div>218  </div>219 220  <!-- Tabs -->221  <div class="tabs">222    <div class="tab active">Type Message</div>223    <div class="tab">Use Message Templates</div>224  </div>225 226  <!-- Form card -->227  <div class="form-card">228    <div class="field">229      <div class="label">Dear</div>230      <div class="input">Husband</div>231    </div>232 233    <div class="field" style="position: relative;">234      <div class="label">Message</div>235      <div class="textarea">happy marriage anniversary</div>236    </div>237 238    <div class="field">239      <div class="label">From</div>240      <div class="input" style="color:#9b9b9b;"> </div>241    </div>242  </div>243  <div class="counter">26/250</div>244 245  <!-- Buttons -->246  <div class="buttons">247    <div class="btn">248      <svg width="46" height="46" viewBox="0 0 24 24" fill="#55612D">249        <path d="M12 5c4.5 0 8.2 2.9 9.5 7-1.3 4.1-5 7-9.5 7S3.8 16.1 2.5 12C3.8 7.9 7.5 5 12 5zm0 2c-3.1 0-6 1.9-7.1 5 1.1 3.1 4 5 7.1 5s6-1.9 7.1-5c-1.1-3.1-4-5-7.1-5zm0 2.5a3.5 3.5 0 1 1 0 7 3.5 3.5 0 0 1 0-7z"/>250      </svg>251      Preview252    </div>253    <div class="btn primary">Continue</div>254  </div>255 256  <!-- Keyboard mock -->257  <div class="keyboard">258    <div class="hint-bar">anniversary</div>259 260    <div class="kbd-row">261      <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>262    </div>263    <div class="kbd-row">264      <div class="key small"></div>265      <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>266      <div class="key small"></div>267    </div>268    <div class="kbd-row">269      <div class="key wide">⇧</div>270      <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>271      <div class="key wide">⌫</div>272    </div>273    <div class="kbd-row row4">274      <div class="key wide">?123</div>275      <div class="key">,</div>276      <div class="key space"></div>277      <div class="key">.</div>278      <div class="key wide">↵</div>279    </div>280  </div>281</div>282</body>283</html>