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 - Richard Wagner</title>7<style>8 body { margin: 0; padding: 0; background: transparent; font-family: Arial, Helvetica, sans-serif; }9 #render-target {10 width: 1080px; height: 2400px; position: relative; overflow: hidden;11 background: #ffffff;12 }13 14 /* Status bar */15 .status-bar {16 height: 96px;17 display: flex;18 align-items: center;19 justify-content: space-between;20 padding: 0 36px;21 color: #2e2e2e;22 font-size: 34px;23 }24 .status-icons { display: flex; gap: 24px; align-items: center; }25 .status-icons svg { width: 40px; height: 40px; }26 27 /* Header / App bar */28 .app-bar {29 height: 176px;30 display: flex;31 align-items: center;32 padding: 0 24px;33 border-bottom: 1px solid #eeeeee;34 }35 .back-btn { width: 72px; height: 72px; display: flex; align-items: center; justify-content: center; margin-right: 8px; }36 .avatar {37 width: 96px; height: 96px; border-radius: 50%;38 background: #E0E0E0; border: 1px solid #BDBDBD;39 display: flex; align-items: center; justify-content: center;40 color: #757575; font-weight: bold; font-size: 36px; margin-right: 20px;41 }42 .title-block { flex: 1; }43 .title {44 font-size: 44px; font-weight: 700; color: #212121; line-height: 1.2;45 }46 .presence {47 display: flex; align-items: center; gap: 8px; margin-top: 6px;48 color: #4CAF50; font-size: 30px;49 }50 .presence .dot { width: 16px; height: 16px; border-radius: 50%; background: #2ecc71; }51 .actions { display: flex; gap: 30px; }52 .actions svg { width: 56px; height: 56px; fill: none; stroke: #333; stroke-width: 3; }53 54 /* Conversation area */55 .content {56 position: absolute;57 left: 0; right: 0;58 top: 272px; /* status + app bar */59 bottom: 180px; /* input bar height */60 overflow-y: auto;61 padding: 24px 30px 30px 30px;62 background: #ffffff;63 }64 65 .divider {66 display: flex; align-items: center; gap: 24px; color: #9E9E9E;67 font-size: 32px; margin: 18px 0;68 }69 .divider .line { flex: 1; height: 1px; background: #e5e5e5; }70 71 /* Message items */72 .msg { margin: 22px 0; }73 .msg-row { display: flex; align-items: flex-start; gap: 18px; }74 .meta { color: #777; font-size: 28px; margin-bottom: 8px; }75 .bubble {76 max-width: 760px;77 padding: 20px 26px;78 border-radius: 26px;79 font-size: 36px;80 line-height: 1.36;81 color: #212121;82 box-shadow: 0 2px 0 rgba(0,0,0,0.06);83 }84 .left .bubble { background: #eeeeee; border: 1px solid #e1e1e1; }85 .right { display: flex; justify-content: flex-end; }86 .right .bubble { background: #cfeff9; border: 1px solid #b7e4f2; }87 .timestamp-right { text-align: right; color: #8f8f8f; font-size: 28px; margin-right: 8px; }88 89 /* Quote bubbles */90 .quote {91 background: #f7f7f7; border: 1px solid #e5e5e5;92 border-radius: 22px;93 padding: 18px 22px;94 margin-bottom: 16px;95 position: relative;96 }97 .quote::before {98 content: ""; position: absolute; left: 0; top: 0; bottom: 0; width: 8px; background: #1976D2; border-top-left-radius: 22px; border-bottom-left-radius: 22px;99 }100 .quote .q-title { font-size: 36px; color: #1f1f1f; margin-left: 16px; }101 .quote .q-meta { font-size: 26px; color: #666; margin-left: 16px; margin-top: 8px; }102 103 /* Reaction / emoji hint (simple) */104 .smiley { color: #9E9E9E; font-size: 32px; margin-left: 10px; }105 106 /* Input bar */107 .input-bar {108 position: absolute; left: 0; right: 0; bottom: 54px;109 height: 126px; padding: 0 24px; display: flex; align-items: center; gap: 18px;110 background: #fff; box-shadow: 0 -2px 6px rgba(0,0,0,0.06);111 }112 .plus-btn {113 width: 92px; height: 92px; border-radius: 50%;114 background: #1EA1FF; color: #fff; display: flex; align-items: center; justify-content: center; font-size: 56px; font-weight: 500;115 }116 .text-field {117 flex: 1; height: 92px; border-radius: 46px; border: 1px solid #e0e0e0; background: #ffffff;118 padding: 0 28px; display: flex; align-items: center; color: #757575; font-size: 34px;119 }120 .right-tools { display: flex; gap: 20px; }121 .right-tools svg { width: 48px; height: 48px; stroke: #555; stroke-width: 2.8; fill: none; }122 123 /* Bottom navigation pill */124 .home-pill {125 position: absolute; left: 50%; transform: translateX(-50%);126 bottom: 12px; width: 240px; height: 10px; border-radius: 6px; background: #cfcfcf;127 }128 129 /* Utility avatar for left-aligned messages */130 .avatar.small {131 width: 86px; height: 86px; font-size: 32px;132 }133 134 /* Image placeholder */135 .img-ph {136 width: 560px; height: 260px;137 background: #E0E0E0; border: 1px solid #BDBDBD;138 display: flex; align-items: center; justify-content: center; color: #757575; font-size: 32px; border-radius: 18px;139 }140</style>141</head>142<body>143<div id="render-target">144 145 <!-- Status bar -->146 <div class="status-bar">147 <div class="time">3:12</div>148 <div class="status-icons">149 <!-- simple walk/person icon -->150 <svg viewBox="0 0 48 48">151 <circle cx="24" cy="10" r="6" fill="#555"></circle>152 <path d="M20 18 L16 30 L22 30 L24 22 L28 28 L34 28" stroke="#555" stroke-width="4" fill="none"></path>153 </svg>154 <!-- signal/wifi -->155 <svg viewBox="0 0 48 48">156 <path d="M6 22 Q24 6 42 22" stroke="#555" stroke-width="4" fill="none"></path>157 <path d="M12 28 Q24 18 36 28" stroke="#555" stroke-width="4" fill="none"></path>158 <circle cx="24" cy="34" r="3" fill="#555"></circle>159 </svg>160 <!-- battery -->161 <svg viewBox="0 0 48 48">162 <rect x="6" y="12" width="34" height="24" rx="4" ry="4" stroke="#555" stroke-width="3" fill="none"></rect>163 <rect x="10" y="16" width="22" height="16" fill="#555"></rect>164 <rect x="40" y="18" width="4" height="12" rx="2" fill="#555"></rect>165 </svg>166 </div>167 </div>168 169 <!-- App bar -->170 <div class="app-bar">171 <div class="back-btn">172 <svg viewBox="0 0 48 48">173 <path d="M30 10 L16 24 L30 38" stroke="#333" stroke-width="4" fill="none" stroke-linecap="round" stroke-linejoin="round"></path>174 </svg>175 </div>176 <div class="avatar">RW</div>177 <div class="title-block">178 <div class="title">Richard Wagner</div>179 <div class="presence">180 <div class="dot"></div>181 <div>Active now</div>182 </div>183 </div>184 <div class="actions">185 <!-- video icon -->186 <svg viewBox="0 0 48 48">187 <rect x="6" y="12" width="22" height="24" rx="4"></rect>188 <polygon points="32,18 42,14 42,34 32,30" stroke="#333" stroke-width="3" fill="none"></polygon>189 </svg>190 <!-- phone icon -->191 <svg viewBox="0 0 48 48">192 <path d="M12 10 L20 14 L16 20 Q22 28 30 32 L36 28 L40 36 Q32 42 20 36 Q8 28 12 10 Z"></path>193 </svg>194 </div>195 </div>196 197 <!-- Conversation -->198 <div class="content">199 200 <div class="divider">201 <div class="line"></div>202 <div>Yesterday</div>203 <div class="line"></div>204 </div>205 206 <!-- Outgoing - yesterday -->207 <div class="msg right">208 <div class="timestamp-right">4:37 PM</div>209 <div class="bubble">Hii Richard</div>210 </div>211 212 <div class="divider" style="margin-top: 36px;">213 <div class="line"></div>214 <div>Today</div>215 <div class="line"></div>216 </div>217 218 <!-- Incoming messages -->219 <div class="msg">220 <div class="msg-row left">221 <div class="avatar small">RW</div>222 <div>223 <div class="meta">Richard, 7:30 AM</div>224 <div style="display:flex; align-items:flex-end; gap:12px;">225 <div class="bubble left">Hi Natalie</div>226 <div class="smiley">🙂</div>227 </div>228 </div>229 </div>230 </div>231 232 <div class="msg">233 <div class="msg-row left">234 <div class="avatar small">RW</div>235 <div>236 <div class="meta">Richard, 7:42 AM</div>237 <div style="display:flex; align-items:flex-end; gap:12px;">238 <div class="bubble left">Hi Natalie</div>239 <div class="smiley">🙂</div>240 </div>241 </div>242 </div>243 </div>244 245 <!-- Outgoing question -->246 <div class="msg right" style="margin-top: 18px;">247 <div class="timestamp-right">8:14 AM</div>248 <div class="bubble">How are you doing?</div>249 </div>250 251 <!-- Incoming with quoted reply -->252 <div class="msg">253 <div class="msg-row left">254 <div class="avatar small">RW</div>255 <div style="max-width: 820px;">256 <div class="meta">Richard, 8:41 AM</div>257 258 <div class="bubble left" style="padding: 16px;">259 <div class="quote">260 <div class="q-title">↩︎ How are you doing?</div>261 <div class="q-meta">Natalie Larson, Today at 8:14 AM</div>262 </div>263 <div style="font-size: 36px;">I'm good, what about you, Natalie?</div>264 </div>265 </div>266 </div>267 </div>268 269 <!-- Outgoing with quoted reply -->270 <div class="msg right" style="margin-top: 30px;">271 <div class="timestamp-right">9:32 AM</div>272 <div class="bubble" style="max-width: 780px; padding: 18px;">273 <div class="quote" style="background:#eafeff; border-color:#d9f5fb;">274 <div class="q-title">↩︎ I'm good, what about you, Natalie?</div>275 <div class="q-meta">Richard Wagner, Today at 8:41 AM</div>276 </div>277 <div style="font-size: 40px; margin-top: 8px;">I’m Good</div>278 </div>279 </div>280 281 <!-- Next incoming message preview (partially visible image) -->282 <div class="msg">283 <div class="msg-row left">284 <div class="avatar small">RW</div>285 <div>286 <div class="meta">Richard, 2:31 PM</div>287 <div class="bubble left" style="padding: 18px;">288 <div class="img-ph">[IMG: Sticker/Photo]</div>289 </div>290 </div>291 </div>292 </div>293 294 </div>295 296 <!-- Input bar -->297 <div class="input-bar">298 <div class="plus-btn">+</div>299 <div class="text-field">Type a message</div>300 <div class="right-tools">301 <!-- smile -->302 <svg viewBox="0 0 48 48">303 <circle cx="24" cy="24" r="18"></circle>304 <circle cx="17" cy="20" r="2" fill="#555"></circle>305 <circle cx="31" cy="20" r="2" fill="#555"></circle>306 <path d="M16 30 Q24 36 32 30" stroke="#555" stroke-width="3" fill="none"></path>307 </svg>308 <!-- camera -->309 <svg viewBox="0 0 48 48">310 <rect x="8" y="14" width="32" height="22" rx="4"></rect>311 <rect x="16" y="10" width="10" height="6" rx="2"></rect>312 <circle cx="24" cy="24" r="6"></circle>313 </svg>314 <!-- gallery -->315 <svg viewBox="0 0 48 48">316 <rect x="8" y="10" width="32" height="26" rx="4"></rect>317 <circle cx="16" cy="18" r="3"></circle>318 <path d="M10 30 L18 22 L26 30 L34 24 L40 30" stroke="#555" stroke-width="3" fill="none"></path>319 </svg>320 <!-- mic -->321 <svg viewBox="0 0 48 48">322 <rect x="18" y="10" width="12" height="18" rx="6"></rect>323 <path d="M12 22 Q24 30 36 22" stroke="#555" stroke-width="3" fill="none"></path>324 <path d="M24 30 L24 38" stroke="#555" stroke-width="3" fill="none"></path>325 <circle cx="24" cy="40" r="2" fill="#555"></circle>326 </svg>327 </div>328 </div>329 330 <div class="home-pill"></div>331</div>332</body>333</html>