GD-ML/AndroidCode
13.4k
1<!DOCTYPE html>2<html lang="en">3<head>4<meta charset="UTF-8">5<meta name="viewport" content="width=1080, initial-scale=1.0">6<title>Chat UI</title>7<style>8 body { margin: 0; padding: 0; background: transparent; }9 #render-target {10 width: 1080px;11 height: 2400px;12 position: relative;13 overflow: hidden;14 background: #0d0f12;15 color: #ffffff;16 font-family: "Segoe UI", Roboto, Arial, sans-serif;17 }18 19 /* Status bar */20 .status-bar {21 height: 90px;22 padding: 0 40px;23 display: flex;24 align-items: center;25 justify-content: space-between;26 color: #fff;27 font-size: 36px;28 box-sizing: border-box;29 }30 .status-right {31 display: flex;32 align-items: center;33 gap: 24px;34 }35 .status-icon { width: 46px; height: 46px; }36 37 /* Header / app bar */38 .app-header {39 height: 170px;40 border-bottom: 1px solid #1e1f22;41 display: flex;42 align-items: center;43 padding: 0 30px;44 box-sizing: border-box;45 background: #121417;46 }47 .back-btn {48 width: 70px;49 height: 70px;50 display: flex;51 align-items: center;52 justify-content: center;53 margin-right: 16px;54 }55 .header-main {56 display: flex;57 align-items: center;58 flex: 1;59 gap: 22px;60 }61 .avatar {62 width: 86px;63 height: 86px;64 border-radius: 50%;65 background: #E0E0E0;66 border: 1px solid #BDBDBD;67 display: flex;68 align-items: center;69 justify-content: center;70 color: #757575;71 font-size: 22px;72 }73 .title-block {74 display: flex;75 flex-direction: column;76 gap: 8px;77 }78 .contact-name {79 font-size: 44px;80 font-weight: 600;81 }82 .presence {83 font-size: 28px;84 color: #d5d5d5;85 display: flex;86 align-items: center;87 gap: 12px;88 }89 .presence .dot {90 width: 14px;91 height: 14px;92 background: #ffcc00;93 border-radius: 50%;94 display: inline-block;95 }96 .header-actions {97 display: flex;98 align-items: center;99 gap: 30px;100 }101 .action-btn {102 width: 70px;103 height: 70px;104 border-radius: 16px;105 background: #1b1e23;106 display: flex;107 align-items: center;108 justify-content: center;109 }110 111 /* Chat area */112 .chat {113 position: absolute;114 top: 260px; /* 90 + 170 */115 bottom: 190px; /* space for input bar */116 left: 0;117 right: 0;118 overflow-y: auto;119 padding: 24px 30px 30px 30px;120 box-sizing: border-box;121 }122 123 .timestamp-inline {124 font-size: 26px;125 color: #9aa0a6;126 margin: 12px 0 8px 120px;127 }128 129 .row {130 display: flex;131 margin: 16px 0;132 }133 .row.left { justify-content: flex-start; padding-left: 90px; }134 .row.right { justify-content: flex-end; padding-right: 30px; }135 136 .msg {137 max-width: 780px;138 border-radius: 26px;139 padding: 24px;140 font-size: 36px;141 line-height: 1.3;142 box-sizing: border-box;143 position: relative;144 }145 .msg.sent {146 background: #0b4ea8;147 color: #fff;148 border-top-right-radius: 12px;149 }150 .msg.received {151 background: #222528;152 color: #fff;153 border-top-left-radius: 12px;154 }155 156 .quote-card {157 background: #1a1c1f;158 border-radius: 22px;159 padding: 22px;160 position: relative;161 margin-bottom: 16px;162 }163 .quote-card:before {164 content: "";165 position: absolute;166 top: 22px;167 left: 0;168 width: 8px;169 height: calc(100% - 44px);170 background: #1ea3ff;171 border-radius: 4px;172 }173 .quote-title {174 font-size: 28px;175 color: #cbd3da;176 margin-bottom: 12px;177 }178 .small-meta {179 font-size: 26px;180 color: #b9c0c8;181 }182 183 /* Image message */184 .image-bubble {185 background: #ffffff;186 color: #111;187 border-radius: 30px;188 padding: 18px;189 box-sizing: border-box;190 }191 .placeholder-img {192 width: 520px;193 height: 680px;194 background: #E0E0E0;195 border: 1px solid #BDBDBD;196 display: flex;197 justify-content: center;198 align-items: center;199 color: #757575;200 font-size: 30px;201 border-radius: 28px;202 overflow: hidden;203 }204 .msg-time {205 font-size: 26px;206 color: #9aa0a6;207 margin-top: 6px;208 text-align: right;209 }210 211 /* Audio bubble */212 .audio-bubble {213 background: #0b4ea8;214 color: #fff;215 border-radius: 26px;216 width: 760px;217 padding: 24px;218 box-sizing: border-box;219 }220 .audio-row {221 display: flex;222 align-items: center;223 gap: 22px;224 }225 .play-btn {226 width: 70px;227 height: 70px;228 border-radius: 18px;229 background: #0f65d3;230 display: flex;231 align-items: center;232 justify-content: center;233 }234 .progress {235 flex: 1;236 height: 10px;237 background: rgba(255,255,255,0.35);238 border-radius: 6px;239 position: relative;240 }241 .progress .bar {242 position: absolute;243 left: 0;244 top: 0;245 height: 10px;246 width: 70%;247 background: #3fb2ff;248 border-radius: 6px;249 }250 .duration { font-size: 32px; }251 252 /* Composer */253 .composer {254 position: absolute;255 left: 0;256 right: 0;257 bottom: 40px;258 padding: 0 30px;259 box-sizing: border-box;260 }261 .composer-row {262 display: flex;263 align-items: center;264 gap: 24px;265 }266 .circle-plus {267 width: 98px;268 height: 98px;269 background: #0a8ef0;270 border-radius: 50%;271 display: flex;272 align-items: center;273 justify-content: center;274 }275 .input-pill {276 flex: 1;277 background: #1b1e22;278 border-radius: 40px;279 height: 110px;280 display: flex;281 align-items: center;282 padding: 0 28px;283 gap: 22px;284 box-sizing: border-box;285 color: #9aa0a6;286 font-size: 36px;287 }288 .pill-text {289 flex: 1;290 }291 .pill-icon {292 width: 60px;293 height: 60px;294 background: #24282d;295 border-radius: 16px;296 display: flex;297 align-items: center;298 justify-content: center;299 }300 301 /* Gesture bar */302 .gesture {303 position: absolute;304 bottom: 0;305 left: 50%;306 transform: translateX(-50%);307 width: 360px;308 height: 16px;309 background: #e9e9e9;310 border-radius: 10px;311 opacity: 0.9;312 margin-bottom: 10px;313 }314</style>315</head>316<body>317<div id="render-target">318 319 <!-- Status Bar -->320 <div class="status-bar">321 <div>2:39</div>322 <div class="status-right">323 <!-- simple status icons -->324 <svg class="status-icon" viewBox="0 0 24 24" fill="#fff">325 <!-- wifi -->326 <path d="M12 18c1.1 0 2 .9 2 2s-.9 2-2 2-2-.9-2-2 .9-2 2-2zm-7-7c4.4-3.3 10.6-3.3 15 0l-2 2c-3.6-2.7-7.4-2.7-11 0l-2-2zm3.5 3.5c2.8-2.1 6.2-2.1 9 0l-1.8 1.8c-2-1.4-3.4-1.4-5.4 0l-1.8-1.8z"/>327 </svg>328 <svg class="status-icon" viewBox="0 0 24 24" fill="none" stroke="#fff" stroke-width="2">329 <!-- battery -->330 <rect x="2" y="6" width="18" height="12" rx="2"></rect>331 <rect x="4" y="8" width="12" height="8" fill="#fff" stroke="none"></rect>332 <rect x="21" y="9" width="2" height="6" rx="1" fill="#fff" stroke="none"></rect>333 </svg>334 <span style="font-size:28px; color:#fff;">100%</span>335 </div>336 </div>337 338 <!-- Header -->339 <div class="app-header">340 <div class="back-btn">341 <svg viewBox="0 0 24 24" width="40" height="40" fill="#fff">342 <path d="M15 19L8 12l7-7v3H5v8h10v3z" />343 </svg>344 </div>345 <div class="header-main">346 <div class="avatar">[IMG: Avatar]</div>347 <div class="title-block">348 <div class="contact-name">Natalie Larson</div>349 <div class="presence"><span class="dot"></span>Last seen 5h ago</div>350 </div>351 </div>352 <div class="header-actions">353 <div class="action-btn">354 <svg viewBox="0 0 24 24" width="40" height="40" fill="#fff">355 <rect x="3" y="6" width="14" height="12" rx="2"></rect>356 <path d="M17 10l4-3v10l-4-3z" fill="#fff"></path>357 </svg>358 </div>359 <div class="action-btn">360 <svg viewBox="0 0 24 24" width="40" height="40" fill="#fff">361 <path d="M6 2l4 2-3 4c2 3 5 5 8 6l3-3 2 4c-1 2-3 3-5 3-8 0-14-6-14-14 0-2 1-4 3-4z"/>362 </svg>363 </div>364 </div>365 </div>366 367 <!-- Chat Content -->368 <div class="chat">369 <!-- Sent bubble with header-like block -->370 <div class="row right">371 <div class="msg sent" style="max-width:800px;">372 <div style="background:#164a8e; padding:16px 20px; border-radius:18px; color:#c9defe; font-size:28px; margin-bottom:12px;">373 Natalie Larson, Today at 8:14 AM374 </div>375 I'm good, what about you, Natalie?376 </div>377 </div>378 379 <!-- Received block with quote -->380 <div class="timestamp-inline">Natalie, 9:32 AM</div>381 <div class="row left">382 <div class="msg received">383 <div class="quote-card">384 <div class="quote-title">I'm good, what about you, Natalie?</div>385 <div class="small-meta">Richard Wagner, Today at 8:41 AM</div>386 </div>387 I’m Good388 </div>389 </div>390 391 <!-- Image message -->392 <div class="row right" style="align-items:flex-end;">393 <div class="image-bubble">394 <div class="placeholder-img">[IMG: Plant Photo]</div>395 </div>396 </div>397 <div class="row right">398 <div class="msg-time" style="width: 600px;">2:31 PM</div>399 </div>400 401 <!-- Audio message -->402 <div class="row right">403 <div class="audio-bubble">404 <div class="audio-row">405 <div class="play-btn">406 <svg viewBox="0 0 24 24" width="40" height="40" fill="#fff">407 <path d="M8 5l12 7-12 7V5z"></path>408 </svg>409 </div>410 <div class="progress"><div class="bar"></div></div>411 <div class="duration">0:44</div>412 </div>413 </div>414 </div>415 <div class="row right">416 <div class="msg-time" style="width: 760px;">2:39 PM</div>417 </div>418 </div>419 420 <!-- Composer -->421 <div class="composer">422 <div class="composer-row">423 <div class="circle-plus">424 <svg viewBox="0 0 24 24" width="48" height="48" fill="#fff">425 <path d="M11 4h2v6h6v2h-6v6h-2v-6H5v-2h6z"/>426 </svg>427 </div>428 <div class="input-pill">429 <div class="pill-text">Type a message</div>430 <div class="pill-icon">431 <!-- smile -->432 <svg viewBox="0 0 24 24" width="34" height="34" fill="#fff">433 <circle cx="12" cy="12" r="10" fill="none" stroke="#fff" stroke-width="2"></circle>434 <circle cx="9" cy="10" r="1.4"></circle>435 <circle cx="15" cy="10" r="1.4"></circle>436 <path d="M8 14c1.5 2 6.5 2 8 0" stroke="#fff" stroke-width="2" fill="none" stroke-linecap="round"></path>437 </svg>438 </div>439 <div class="pill-icon">440 <!-- camera -->441 <svg viewBox="0 0 24 24" width="34" height="34" fill="#fff">442 <rect x="3" y="7" width="18" height="12" rx="3"></rect>443 <circle cx="12" cy="13" r="4" fill="#0a8ef0"></circle>444 <path d="M8 7l2-3h4l2 3z" />445 </svg>446 </div>447 <div class="pill-icon">448 <!-- gallery -->449 <svg viewBox="0 0 24 24" width="34" height="34" fill="#fff">450 <rect x="4" y="5" width="16" height="14" rx="2" fill="none" stroke="#fff" stroke-width="2"></rect>451 <path d="M6 16l4-5 3 3 3-4 2 6H6z" fill="#fff"></path>452 </svg>453 </div>454 <div class="pill-icon">455 <!-- star/favorites -->456 <svg viewBox="0 0 24 24" width="34" height="34" fill="#fff">457 <path d="M12 2l3 6 7 1-5 5 1 7-6-3-6 3 1-7-5-5 7-1 3-6z"></path>458 </svg>459 </div>460 </div>461 </div>462 </div>463 464 <!-- Gesture bar -->465 <div class="gesture"></div>466 467</div>468</body>469</html>