GD-ML/AndroidCode
13.4k
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: #f6f7f2;14 }15 /* Status bar */16 .status-bar {17 height: 80px;18 padding: 0 28px;19 display: flex;20 align-items: center;21 justify-content: space-between;22 color: #2b2b2b;23 font-size: 34px;24 }25 .status-icons {26 display: flex;27 align-items: center;28 gap: 24px;29 }30 .dot { width: 10px; height: 10px; background: #5a5a5a; border-radius: 50%; display: inline-block; margin-left: 10px; }31 /* App bar */32 .app-bar {33 height: 110px;34 display: flex;35 align-items: center;36 padding: 0 28px;37 background: #f6f7f2;38 border-bottom: 1px solid #e1e1e1;39 }40 .back-icon {41 width: 56px;42 height: 56px;43 margin-right: 18px;44 }45 .app-title {46 font-size: 48px;47 color: #1f1f1f;48 font-weight: 600;49 }50 /* Tabs */51 .tabs {52 display: flex;53 padding: 24px 28px 0 28px;54 gap: 46px;55 }56 .tab {57 font-size: 40px;58 color: #333;59 padding: 18px 0;60 position: relative;61 }62 .tab.active {63 font-weight: 700;64 }65 .tab.active::after {66 content: '';67 position: absolute;68 left: 0;69 bottom: -8px;70 width: 100%;71 height: 8px;72 background: #7b7f4f;73 border-radius: 4px;74 }75 /* Card area */76 .card {77 margin: 28px;78 background: #ffffff;79 border-radius: 26px;80 border: 1px solid #e3e3e3;81 padding: 28px;82 }83 .label {84 font-size: 30px;85 color: #7c7c7c;86 margin: 8px 8px 12px 8px;87 }88 .input {89 width: 100%;90 height: 110px;91 border: 2px solid #d9d9d9;92 border-radius: 22px;93 background: #fff;94 font-size: 40px;95 color: #1e1e1e;96 padding: 26px 30px;97 box-sizing: border-box;98 }99 .textarea {100 width: 100%;101 height: 310px;102 border: 2px solid #d9d9d9;103 border-radius: 22px;104 background: #fff;105 font-size: 38px;106 color: #1e1e1e;107 padding: 26px 30px;108 box-sizing: border-box;109 line-height: 1.4;110 }111 .counter {112 text-align: right;113 font-size: 28px;114 color: #8b8b8b;115 margin-top: 10px;116 margin-right: 10px;117 }118 .from-field {119 width: 100%;120 height: 126px;121 border: 2px solid #2e2e2e;122 border-radius: 22px;123 background: #fff;124 font-size: 40px;125 color: #1e1e1e;126 padding: 26px 30px;127 box-sizing: border-box;128 margin-top: 24px;129 }130 /* Bottom buttons */131 .actions {132 position: absolute;133 left: 28px;134 right: 28px;135 bottom: 760px; /* sits above keyboard */136 display: flex;137 justify-content: space-between;138 align-items: center;139 gap: 40px;140 }141 .btn {142 flex: 1;143 height: 120px;144 border-radius: 22px;145 border: 2px solid #a0a07c;146 background: #ffffff;147 color: #3f3f23;148 font-size: 44px;149 font-weight: 600;150 display: flex;151 align-items: center;152 justify-content: center;153 gap: 22px;154 box-sizing: border-box;155 }156 .btn.primary {157 background: #7d7f4f;158 border-color: #7d7f4f;159 color: #ffffff;160 }161 .eye-icon, .mic-dot {162 width: 44px;163 height: 44px;164 }165 /* Keyboard representation */166 .keyboard {167 position: absolute;168 left: 0;169 right: 0;170 bottom: 0;171 height: 820px;172 background: #1e1f23;173 border-top-left-radius: 26px;174 border-top-right-radius: 26px;175 padding: 20px 24px 28px 24px;176 box-sizing: border-box;177 }178 .kb-row {179 display: flex;180 justify-content: space-between;181 gap: 16px;182 margin-top: 20px;183 }184 .key {185 flex: 1;186 height: 120px;187 background: #2a2b30;188 border-radius: 18px;189 display: flex;190 align-items: center;191 justify-content: center;192 color: #d7d9df;193 font-size: 44px;194 }195 .key.small {196 flex: 0.8;197 }198 .key.large {199 flex: 2.5;200 }201 .kb-top {202 display: flex;203 justify-content: space-between;204 align-items: center;205 color: #d7d9df;206 font-size: 40px;207 padding: 8px 6px;208 }209 /* Utility spacing between form blocks */210 .block { margin-bottom: 24px; }211</style>212</head>213<body>214<div id="render-target">215 <!-- Status bar -->216 <div class="status-bar">217 <div>1:14</div>218 <div class="status-icons">219 <span class="dot"></span>220 <span class="dot"></span>221 <span class="dot"></span>222 <span class="dot"></span>223 </div>224 </div>225 226 <!-- App bar -->227 <div class="app-bar">228 <svg class="back-icon" viewBox="0 0 24 24">229 <path d="M15.5 4l-8 8 8 8" stroke="#2b2b2b" stroke-width="2.5" fill="none" stroke-linecap="round" stroke-linejoin="round"/>230 </svg>231 <div class="app-title">Free Message</div>232 </div>233 234 <!-- Tabs -->235 <div class="tabs">236 <div class="tab active">Type Message</div>237 <div class="tab" style="color:#444">Use Message Templates</div>238 </div>239 240 <!-- Card area -->241 <div class="card" style="height: 1030px;">242 <div class="block">243 <div class="label">Dear</div>244 <div class="input">Husband</div>245 </div>246 247 <div class="block">248 <div class="label">Message</div>249 <div class="textarea">happy marriage anniversary</div>250 <div class="counter">26/250</div>251 </div>252 253 <div class="block">254 <div class="from-field">From</div>255 </div>256 </div>257 258 <!-- Actions -->259 <div class="actions">260 <div class="btn">261 <svg class="eye-icon" viewBox="0 0 24 24">262 <path d="M1 12s4-7 11-7 11 7 11 7-4 7-11 7S1 12 1 12zm11 4a4 4 0 1 0 0-8 4 4 0 0 0 0 8z" fill="#6d6f47"/>263 </svg>264 <span>Preview</span>265 </div>266 <div class="btn primary">Continue</div>267 </div>268 269 <!-- Keyboard (simplified) -->270 <div class="keyboard">271 <div class="kb-top">272 <div style="display:flex; gap:24px; align-items:center;">273 <div class="key small" style="width:120px; height:96px; background:#2a2b30;">โฌ</div>274 <div class="key small" style="width:120px; height:96px; background:#2a2b30;">๐</div>275 <div class="key small" style="width:120px; height:96px; background:#2a2b30;">GIF</div>276 <div class="key small" style="width:120px; height:96px; background:#2a2b30;">โ</div>277 <div class="key small" style="width:120px; height:96px; background:#2a2b30;">่ฏ</div>278 <div class="key small" style="width:120px; height:96px; background:#2a2b30;">๐จ</div>279 </div>280 <div class="key small" style="width:120px; height:96px; background:#2a2b30;">๐</div>281 </div>282 283 <div class="kb-row">284 <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>285 </div>286 <div class="kb-row">287 <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>288 </div>289 <div class="kb-row">290 <div class="key small">โง</div>291 <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>292 <div class="key small">โซ</div>293 </div>294 <div class="kb-row">295 <div class="key small">?123</div>296 <div class="key small">,</div>297 <div class="key small">๐</div>298 <div class="key large"></div>299 <div class="key small">.</div>300 <div class="key small">โ</div>301 </div>302 </div>303</div>304</body>305</html>