GD-ML/AndroidCode
13.4k
1<html lang="en">2<head>3<meta charset="UTF-8">4<title>Chat UI - Generated HTML</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: #0e0f12;13 color: #fff;14 }15 16 /* Status bar */17 .status-bar {18 position: absolute;19 top: 0;20 left: 0;21 width: 1080px;22 height: 90px;23 display: flex;24 align-items: center;25 justify-content: space-between;26 padding: 0 32px;27 box-sizing: border-box;28 color: #eaeaea;29 font-size: 36px;30 }31 .status-right {32 display: flex;33 align-items: center;34 gap: 22px;35 font-size: 28px;36 }37 .status-icon svg { width: 40px; height: 40px; fill: #cfcfcf; }38 39 /* Header */40 .chat-header {41 position: absolute;42 top: 90px;43 left: 0;44 width: 1080px;45 height: 170px;46 display: flex;47 align-items: center;48 padding: 0 22px;49 box-sizing: border-box;50 border-bottom: 1px solid #1c1f24;51 }52 .back {53 width: 90px;54 height: 90px;55 display: flex;56 align-items: center;57 justify-content: center;58 }59 .back svg { width: 46px; height: 46px; fill: #e5e5e5; }60 .avatar {61 width: 96px;62 height: 96px;63 border-radius: 50%;64 background: #E0E0E0;65 border: 1px solid #BDBDBD;66 margin-right: 20px;67 display: flex; align-items: center; justify-content: center;68 color: #757575; font-size: 22px;69 }70 .title-area {71 flex: 1;72 }73 .title-area .name {74 font-size: 42px;75 font-weight: 700;76 margin-bottom: 6px;77 }78 .title-area .status {79 font-size: 28px;80 color: #c9c9c9;81 display: flex;82 align-items: center;83 gap: 10px;84 }85 .status-dot {86 width: 12px; height: 12px; background: #ffbf3c; border-radius: 50%;87 display: inline-block;88 }89 .header-actions {90 display: flex;91 align-items: center;92 gap: 26px;93 margin-right: 12px;94 }95 .header-actions svg { width: 54px; height: 54px; fill: #dcdcdc; }96 97 /* Conversation area */98 .conversation {99 position: absolute;100 top: 260px;101 left: 0;102 width: 1080px;103 height: 980px;104 padding: 20px 30px;105 box-sizing: border-box;106 overflow: hidden;107 }108 .meta {109 color: #9aa0a6;110 font-size: 28px;111 margin: 16px 0 8px 110px;112 }113 .row { width: 100%; display: flex; margin: 12px 0; }114 .bubble {115 max-width: 720px;116 padding: 26px 34px;117 border-radius: 26px;118 font-size: 40px;119 line-height: 1.25;120 }121 .left .bubble {122 background: #2a2d31;123 color: #fff;124 border-top-left-radius: 12px;125 margin-left: 96px;126 }127 .right { justify-content: flex-end; }128 .right .bubble {129 background: #2a58e8;130 color: #fff;131 border-top-right-radius: 12px;132 margin-right: 30px;133 }134 .tiny-icon {135 width: 40px; height: 40px; display: inline-flex; align-items: center; justify-content: center;136 margin-left: 10px;137 }138 .tip {139 display: flex; align-items: center; gap: 12px;140 color: #cfcfcf; font-size: 30px; margin: 14px 0 22px 100px;141 }142 .tip svg { width: 36px; height: 36px; fill: #f5d36b; }143 .divider {144 display: flex; align-items: center; gap: 20px; margin: 30px 0;145 color: #cfcfcf; font-size: 28px;146 }147 .divider .line { height: 1px; background: #2b2f35; flex: 1; }148 .time-right, .time-left {149 font-size: 26px; color: #9aa0a6; margin: 8px 34px;150 }151 .time-right { text-align: right; }152 153 /* Input bar above keyboard */154 .input-bar {155 position: absolute;156 top: 1240px;157 left: 0;158 width: 1080px;159 height: 150px;160 padding: 0 26px;161 box-sizing: border-box;162 display: flex; align-items: center; gap: 18px;163 }164 .circle-btn {165 width: 96px; height: 96px; border-radius: 50%;166 background: #2a2f35; display: flex; align-items: center; justify-content: center;167 }168 .circle-btn svg { width: 42px; height: 42px; fill: #d7d7d7; }169 .text-field {170 flex: 1;171 background: #1a1f24;172 height: 110px;173 border-radius: 56px;174 display: flex; align-items: center; justify-content: space-between;175 padding: 0 28px;176 box-sizing: border-box;177 border: 1px solid #2c3138;178 }179 .placeholder { color: #bfc7cf; font-size: 40px; }180 .field-actions { display: flex; align-items: center; gap: 24px; }181 .field-actions svg { width: 44px; height: 44px; fill: #cfd6dd; }182 183 /* Keyboard */184 .keyboard {185 position: absolute;186 left: 0;187 bottom: 70px;188 width: 1080px;189 height: 900px;190 background: #111619;191 border-top: 1px solid #1e2328;192 box-sizing: border-box;193 padding: 24px;194 }195 .kb-top {196 display: flex; align-items: center; gap: 42px; padding: 6px 0 20px 0;197 }198 .kb-top .tool {199 width: 80px; height: 80px; border-radius: 16px; background: #1b2025;200 display: flex; align-items: center; justify-content: center;201 border: 1px solid #262b31;202 }203 .tool svg { width: 40px; height: 40px; fill: #d6d6d6; }204 205 .keys-row {206 display: grid;207 gap: 14px;208 margin: 18px 0;209 }210 .row1 { grid-template-columns: repeat(10, 1fr); }211 .row2 { grid-template-columns: repeat(9, 1fr); padding: 0 40px; }212 .row3 { grid-template-columns: repeat(9, 1fr); padding: 0 90px; }213 .key {214 height: 110px;215 background: #1b2025;216 border: 1px solid #262b31;217 border-radius: 18px;218 color: #e8ebef;219 font-size: 44px;220 display: flex; align-items: center; justify-content: center;221 }222 .key.wide { grid-column: span 2; }223 .kb-bottom {224 display: flex; align-items: center; justify-content: space-between;225 gap: 16px; margin-top: 16px;226 }227 .btn-pill {228 height: 110px; border-radius: 56px; background: #2f6f56; color: #e9fff3;229 display: flex; align-items: center; justify-content: center; font-size: 40px;230 padding: 0 28px;231 }232 .btn-pill.grey { background: #1b2025; color: #e8ebef; border: 1px solid #262b31; }233 .spacebar {234 flex: 1; height: 110px; border-radius: 26px; background: #1b2025; border: 1px solid #262b31;235 display: flex; align-items: center; justify-content: center; color: #cfd3d8; font-size: 40px;236 }237 .enter {238 width: 140px; height: 110px; border-radius: 26px; background: #65d8a7;239 color: #0b1b14; font-weight: 700; display: flex; align-items: center; justify-content: center; font-size: 40px;240 }241 242 /* Home indicator */243 .home-indicator {244 position: absolute;245 bottom: 16px;246 left: 50%;247 transform: translateX(-50%);248 width: 720px; height: 10px; border-radius: 6px; background: #e6e6e6; opacity: 0.8;249 }250</style>251</head>252<body>253<div id="render-target">254 255 <!-- Status bar -->256 <div class="status-bar">257 <div>7:46</div>258 <div class="status-right">259 <span class="status-icon">260 <!-- Signal -->261 <svg viewBox="0 0 24 24"><path d="M2 20h2v-3H2v3zm4 0h2v-6H6v6zm4 0h2v-9h-2v9zm4 0h2v-12h-2v12zm4 0h2V4h-2v16z"/></svg>262 </span>263 <span class="status-icon">264 <!-- WiFi -->265 <svg viewBox="0 0 24 24"><path d="M12 18l-2-2 2-2 2 2-2 2zm-6-6l-2-2c4.97-4.97 13.03-4.97 18 0l-2 2c-3.9-3.9-10.1-3.9-14 0zm3 3l-2-2c3.32-3.31 8.68-3.31 12 0l-2 2c-2.54-2.54-6.46-2.54-9 0z"/></svg>266 </span>267 <span class="status-icon">268 <!-- Do Not Disturb dot -->269 <svg viewBox="0 0 24 24"><circle cx="12" cy="12" r="10"/></svg>270 </span>271 <span class="status-icon">272 <!-- Mail -->273 <svg viewBox="0 0 24 24"><path d="M2 6h20v12H2V6zm10 6L4 8v8l8-4 8 4V8l-8 4z"/></svg>274 </span>275 <span class="status-icon">276 <!-- Battery -->277 <svg viewBox="0 0 24 24"><path d="M20 8h2v8h-2V8zM3 7h16v10H3V7zm2 2v6h12V9H5z"/></svg>278 </span>279 <span style="font-size:28px;">95%</span>280 </div>281 </div>282 283 <!-- Chat header -->284 <div class="chat-header">285 <div class="back">286 <svg viewBox="0 0 24 24"><path d="M15.41 7.41 14 6l-6 6 6 6 1.41-1.41L10.83 12z"/></svg>287 </div>288 <div class="avatar">[IMG: Avatar]</div>289 <div class="title-area">290 <div class="name">Natalie Larson</div>291 <div class="status"><span class="status-dot"></span>Last seen 15h ago</div>292 </div>293 <div class="header-actions">294 <!-- Video -->295 <svg viewBox="0 0 24 24"><path d="M17 10.5V7a2 2 0 0 0-2-2H5A2 2 0 0 0 3 7v10a2 2 0 0 0 2 2h10a2 2 0 0 0 2-2v-3.5l4 4v-11l-4 4z"/></svg>296 <!-- Phone -->297 <svg viewBox="0 0 24 24"><path d="M6.62 10.79a15.05 15.05 0 0 0 6.59 6.59l2.2-2.2a1 1 0 0 1 1.05-.24 11.36 11.36 0 0 0 3.56.57 1 1 0 0 1 1 1V20a1 1 0 0 1-1 1A17 17 0 0 1 3 7a1 1 0 0 1 1-1h3.5a1 1 0 0 1 1 1 11.36 11.36 0 0 0 .57 3.56 1 1 0 0 1-.24 1.05l-2.21 2.18z"/></svg>298 </div>299 </div>300 301 <!-- Conversation content -->302 <div class="conversation">303 <div class="meta">Natalie, 4:37 PM</div>304 <div class="row left">305 <div class="bubble">Hii Richard</div>306 <div class="tiny-icon">307 <!-- small smile -->308 <svg viewBox="0 0 24 24"><path d="M12 2a10 10 0 1 0 0 20 10 10 0 0 0 0-20zm-4 8h2v2H8v-2zm6 0h2v2h-2v-2zm-6.5 6a6.5 6.5 0 0 0 13 0H17a5 5 0 0 1-10 0h-1.5z"/></svg>309 </div>310 </div>311 <div class="tip">312 <svg viewBox="0 0 24 24"><path d="M9 21V9h6l1 4h3v4h-5l-1 4H9z"/></svg>313 <span>Double tap message to like it</span>314 </div>315 316 <div class="divider">317 <div class="line"></div>318 <div>Today</div>319 <div class="line"></div>320 </div>321 322 <div class="time-right">7:30 AM</div>323 <div class="row right">324 <div class="bubble">Hi Natalie</div>325 </div>326 327 <div class="time-right">7:42 AM</div>328 <div class="row right">329 <div class="bubble">Hi Natalie</div>330 </div>331 </div>332 333 <!-- Input bar -->334 <div class="input-bar">335 <div class="circle-btn">336 <!-- plus -->337 <svg viewBox="0 0 24 24"><path d="M11 5h2v6h6v2h-6v6h-2v-6H5v-2h6z"/></svg>338 </div>339 <div class="text-field">340 <div class="placeholder">Type a message</div>341 <div class="field-actions">342 <!-- smile -->343 <svg viewBox="0 0 24 24"><path d="M12 2a10 10 0 1 0 0 20 10 10 0 0 0 0-20zm-4 8h2v2H8v-2zm6 0h2v2h-2v-2zm-6 4a4 4 0 0 0 8 0H8z"/></svg>344 <!-- share/clip -->345 <svg viewBox="0 0 24 24"><path d="M18 16.08c-.76 0-1.44.3-1.96.77L8.91 12.7a3.2 3.2 0 0 0 0-1.4l7.02-4.11A2.99 2.99 0 1 0 14 5a3 3 0 0 0 .1.74L7.08 9.85a3 3 0 1 0 0 4.29l7.02 4.11c-.06.24-.1.49-.1.75a3 3 0 1 0 3-3z"/></svg>346 <!-- camera -->347 <svg viewBox="0 0 24 24"><path d="M9 3l2-2h2l2 2h4v18H3V3h6zm3 5a6 6 0 1 0 .001 12.001A6 6 0 0 0 12 8z"/></svg>348 <!-- star/sparkle -->349 <svg viewBox="0 0 24 24"><path d="M12 17l-5.2 3 1-5.9L3 9.8l6-1 3-5 3 5 6 1-4.8 4.3 1 5.9z"/></svg>350 </div>351 </div>352 </div>353 354 <!-- Keyboard -->355 <div class="keyboard">356 <div class="kb-top">357 <div class="tool"><svg viewBox="0 0 24 24"><path d="M3 3h18v4H3V3zm0 7h18v4H3v-4zm0 7h18v4H3v-4z"/></svg></div>358 <div class="tool"><svg viewBox="0 0 24 24"><path d="M12 2l9 9-9 9-9-9 9-9zm0 4.83L7.83 12 12 16.17 16.17 12 12 6.83z"/></svg></div>359 <div class="tool"><svg viewBox="0 0 24 24"><path d="M12 4a8 8 0 1 0 0 16 8 8 0 0 0 0-16zm1 12H7v-2h6v2zm4-6H7V8h10v2z"/></svg></div>360 <div class="tool"><svg viewBox="0 0 24 24"><path d="M12 7a5 5 0 1 0 .001 10.001A5 5 0 0 0 12 7zm0-5a10 10 0 1 0 0 20 10 10 0 0 0 0-20z"/></svg></div>361 <div class="tool"><svg viewBox="0 0 24 24"><path d="M12 2l4 4-4 4-4-4 4-4zm0 8l4 4-4 4-4-4 4-4z"/></svg></div>362 </div>363 364 <div class="keys-row row1">365 <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>366 <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>367 </div>368 369 <div class="keys-row row2">370 <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>371 <div class="key">H</div><div class="key">J</div><div class="key">K</div><div class="key">L</div>372 </div>373 374 <div class="keys-row row3">375 <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>376 <div class="key">N</div><div class="key">M</div>377 <div class="key">⌫</div><div class="key">⌦</div>378 </div>379 380 <div class="kb-bottom">381 <div class="btn-pill">?123</div>382 <div class="btn-pill grey">,</div>383 <div class="btn-pill grey">🙂</div>384 <div class="spacebar">Space</div>385 <div class="btn-pill grey">.</div>386 <div class="enter">↵</div>387 </div>388 </div>389 390 <div class="home-indicator"></div>391 392</div>393</body>394</html>