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: Roboto, Arial, sans-serif; }9 #render-target {10 width: 1080px; height: 2400px;11 position: relative; overflow: hidden;12 background: #ffffff; color: #222;13 }14 15 /* Status bar */16 .status-bar {17 position: absolute; top: 0; left: 0; right: 0;18 height: 90px; background: #fff;19 display: flex; align-items: center; justify-content: space-between;20 padding: 0 36px; box-sizing: border-box; color: #5f6368; font-size: 36px;21 }22 .status-right { display: flex; align-items: center; gap: 26px; }23 .icon { width: 42px; height: 42px; display: inline-block; }24 25 /* Header */26 .header {27 position: absolute; top: 90px; left: 0; right: 0;28 height: 190px; background: #fff; box-sizing: border-box;29 padding: 20px 32px; border-bottom: 1px solid #e5e5e5;30 }31 .header-top {32 height: 80px; display: flex; align-items: center; justify-content: space-between;33 }34 .back-wrap { display: flex; align-items: center; gap: 24px; }35 .avatar {36 width: 80px; height: 80px; border-radius: 50%;37 background: linear-gradient(135deg,#cfe1ff,#d9f1ff);38 display: flex; align-items: center; justify-content: center;39 font-weight: 700; color: #6270c9; border: 1px solid #c9d4f7;40 }41 .title-wrap { display: flex; flex-direction: column; margin-left: 18px; }42 .name { font-size: 48px; font-weight: 600; color: #111; }43 .active { font-size: 28px; color: #44b24a; display: flex; align-items: center; gap: 10px; }44 .active .dot { width: 14px; height: 14px; border-radius: 50%; background: #26c943; display: inline-block; }45 .header-actions { display: flex; align-items: center; gap: 32px; }46 .action-icon { width: 60px; height: 60px; }47 48 /* Conversation area */49 .content {50 position: absolute; left: 0; right: 0; top: 280px; bottom: 220px;51 overflow-y: hidden; padding: 20px 28px 0; box-sizing: border-box;52 background: #fff;53 }54 .divider {55 display: flex; align-items: center; gap: 24px; color: #9e9e9e;56 font-size: 30px; margin: 26px 0;57 }58 .divider .line { flex: 1; height: 2px; background: #e0e0e0; }59 60 .msg-row { display: flex; align-items: flex-end; margin: 22px 0; }61 .msg-row.left { justify-content: flex-start; }62 .msg-row.right { justify-content: flex-end; }63 .msg-time { font-size: 26px; color: #9e9e9e; margin: 0 16px; }64 65 .bubble {66 max-width: 720px; padding: 26px 30px; border-radius: 24px;67 box-sizing: border-box; font-size: 40px; line-height: 1.35;68 box-shadow: 0 1px 0 rgba(0,0,0,0.05);69 }70 .bubble.received { background: #eeeeee; color: #1a1a1a; }71 .bubble.sent { background: #cfeff9; color: #0d0d0d; }72 .smiley { margin-left: 16px; width: 46px; height: 46px; border-radius: 50%; border: 1px solid #dcdcdc; display: flex; align-items: center; justify-content: center; color: #9e9e9e; font-size: 28px; }73 74 .avatar-small {75 width: 72px; height: 72px; border-radius: 50%; background: linear-gradient(135deg,#cfe1ff,#d9f1ff);76 border: 1px solid #c9d4f7; color: #6270c9; font-weight: 700; display: flex; align-items: center; justify-content: center;77 margin-right: 18px;78 }79 80 /* Quoted message card */81 .quoted-card {82 background: #f5f5f5; border-radius: 20px; padding: 20px; margin-bottom: 16px;83 box-shadow: 0 1px 0 rgba(0,0,0,0.04); position: relative;84 }85 .quoted-card::before {86 content: ""; position: absolute; left: 0; top: 0; bottom: 0; width: 10px; background: #2f7cf0; border-radius: 20px 0 0 20px;87 }88 .quote-text { font-size: 40px; color: #222; margin-left: 18px; }89 .quote-meta { font-size: 28px; color: #757575; margin-left: 18px; margin-top: 10px; }90 91 .quoted-card-blue {92 background: #eafaff; border-radius: 20px; padding: 20px; margin-bottom: 16px;93 box-shadow: 0 1px 0 rgba(0,0,0,0.04); position: relative;94 }95 .quoted-card-blue::before {96 content: ""; position: absolute; left: 0; top: 0; bottom: 0; width: 10px; background: #2f7cf0; border-radius: 20px 0 0 20px;97 }98 99 /* Composer */100 .composer {101 position: absolute; left: 0; right: 0; bottom: 0;102 height: 220px; background: #fff; border-top: 1px solid #e6e6e6;103 padding: 20px 28px 30px; box-sizing: border-box;104 }105 .compose-row {106 display: flex; align-items: center; gap: 24px;107 }108 .plus-btn {109 width: 116px; height: 116px; border-radius: 58px; background: #1e88e5;110 display: flex; align-items: center; justify-content: center;111 box-shadow: 0 6px 12px rgba(30,136,229,.3);112 }113 .input {114 flex: 1; height: 116px; border-radius: 58px; background: #f5f7fb;115 display: flex; align-items: center; padding: 0 34px; box-sizing: border-box;116 border: 1px solid #e2e6ed; color: #777; font-size: 40px;117 }118 .input .placeholder { flex: 1; color: #838383; }119 .compose-actions { display: flex; align-items: center; gap: 26px; }120 .action-small { width: 56px; height: 56px; }121 122 /* Simple icons */123 svg { display: block; }124</style>125</head>126<body>127<div id="render-target">128 129 <!-- Status Bar -->130 <div class="status-bar">131 <div class="status-left">3:14</div>132 <div class="status-right">133 <!-- small walk/person icon -->134 <svg class="icon" viewBox="0 0 24 24"><circle cx="12" cy="4" r="3" fill="#666"/><path d="M9 9l3 2 3-2 2 2-3 4v5h-2v-4l-3-3-2 3-2-1 3-5z" fill="#666"/></svg>135 <!-- signal -->136 <svg class="icon" viewBox="0 0 24 24"><path d="M3 17h2v4H3zm4-6h2v10H7zm4-3h2v13h-2zm4-4h2v17h-2z" fill="#666"/></svg>137 <!-- wifi -->138 <svg class="icon" viewBox="0 0 24 24"><path d="M2 8c4.6-4 15.4-4 20 0l-2 2c-3.6-3.2-12.4-3.2-16 0L2 8zm3 4c3.5-3 13.5-3 17 0l-2 2c-2.7-2.1-10.3-2.1-13 0l-2-2zm5 5l2 2 2-2c-1.2-1-4.8-1-6 0z" fill="#666"/></svg>139 <!-- battery -->140 <svg class="icon" viewBox="0 0 24 24"><path d="M2 8h16v8H2z" fill="none" stroke="#666" stroke-width="2"/><rect x="4" y="10" width="12" height="4" fill="#666"/><rect x="18" y="10" width="2" height="4" fill="#666"/></svg>141 </div>142 </div>143 144 <!-- Header -->145 <div class="header">146 <div class="header-top">147 <div class="back-wrap">148 <svg class="action-icon" viewBox="0 0 24 24">149 <path d="M15 6l-6 6 6 6" fill="none" stroke="#111" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>150 </svg>151 <div class="avatar">RW</div>152 <div class="title-wrap">153 <div class="name">Richard Wagner</div>154 <div class="active"><span class="dot"></span>Active now</div>155 </div>156 </div>157 <div class="header-actions">158 <!-- video -->159 <svg class="action-icon" viewBox="0 0 24 24">160 <rect x="3" y="6" width="12" height="12" rx="2" fill="none" stroke="#111" stroke-width="2"/>161 <path d="M15 9l6-3v12l-6-3z" fill="none" stroke="#111" stroke-width="2" stroke-linejoin="round"/>162 </svg>163 <!-- phone -->164 <svg class="action-icon" viewBox="0 0 24 24">165 <path d="M6 2l4 3-2 3c1 2 3 4 5 5l3-2 3 4-2 3c-7 0-14-7-14-14L6 2z" fill="none" stroke="#111" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>166 </svg>167 </div>168 </div>169 </div>170 171 <!-- Conversation -->172 <div class="content">173 174 <!-- Divider: Yesterday -->175 <div class="divider"><div class="line"></div>Yesterday<div class="line"></div></div>176 177 <!-- Right message -->178 <div class="msg-row right">179 <div class="msg-time">4:37 PM</div>180 <div class="bubble sent">Hii Richard</div>181 </div>182 183 <!-- Divider: Today -->184 <div class="divider" style="margin-top: 40px;"><div class="line"></div>Today<div class="line"></div></div>185 186 <!-- Left messages with avatar -->187 <div class="msg-row left">188 <div class="avatar-small">RW</div>189 <div class="bubble received">Hi Natalie</div>190 <div class="smiley">☺</div>191 </div>192 193 <div class="msg-row left" style="margin-top: 18px;">194 <div class="avatar-small">RW</div>195 <div class="bubble received">Hi Natalie</div>196 <div class="smiley">☺</div>197 </div>198 199 <!-- Right message -->200 <div class="msg-row right" style="margin-top: 24px;">201 <div class="msg-time">8:14 AM</div>202 <div class="bubble sent">How are you doing?</div>203 </div>204 205 <!-- Left reply with quoted message -->206 <div class="msg-row left" style="margin-top: 30px;">207 <div class="avatar-small">RW</div>208 <div class="bubble received" style="max-width: 760px;">209 <div class="quoted-card">210 <div class="quote-text">↩️ How are you doing?</div>211 <div class="quote-meta">Natalie Larson, Today at 8:14 AM</div>212 </div>213 I'm good, what about you, Natalie?214 </div>215 <div class="smiley">☺</div>216 </div>217 218 <!-- Right reply quoting previous -->219 <div class="msg-row right" style="margin-top: 40px;">220 <div class="msg-time">9:32 AM</div>221 <div class="bubble sent" style="max-width: 760px;">222 <div class="quoted-card-blue">223 <div class="quote-text">↩️ I'm good, what about you, Natalie?</div>224 <div class="quote-meta">Richard Wagner, Today at 8:41 AM</div>225 </div>226 I’m Good227 </div>228 </div>229 230 <!-- A preview placeholder for an image message later (partial at bottom in screenshot) -->231 <div class="msg-row left" style="margin-top: 40px;">232 <div class="avatar-small">RW</div>233 <div class="bubble received">234 <div style="width: 560px; height: 240px; background:#E0E0E0; border:1px solid #BDBDBD; display:flex; align-items:center; justify-content:center; color:#757575;">235 [IMG: Shared Photo Thumbnail]236 </div>237 </div>238 </div>239 240 </div>241 242 <!-- Composer -->243 <div class="composer">244 <div class="compose-row">245 <div class="plus-btn">246 <svg viewBox="0 0 24 24" width="56" height="56">247 <path d="M12 5v14M5 12h14" stroke="#fff" stroke-width="3" stroke-linecap="round"/>248 </svg>249 </div>250 <div class="input">251 <span class="placeholder">Type a message</span>252 <div class="compose-actions">253 <!-- emoji -->254 <svg class="action-small" viewBox="0 0 24 24">255 <circle cx="12" cy="12" r="10" fill="none" stroke="#666" stroke-width="2"/>256 <circle cx="9" cy="10" r="1.5" fill="#666"/>257 <circle cx="15" cy="10" r="1.5" fill="#666"/>258 <path d="M7 15c3 3 7 3 10 0" fill="none" stroke="#666" stroke-width="2" stroke-linecap="round"/>259 </svg>260 <!-- attach/send icons approximations -->261 <svg class="action-small" viewBox="0 0 24 24">262 <path d="M4 13l8-8a4 4 0 115.7 5.7L9.7 19A6 6 0 011.3 10.3L11 1.5" fill="none" stroke="#666" stroke-width="2" stroke-linecap="round"/>263 </svg>264 <svg class="action-small" viewBox="0 0 24 24">265 <path d="M3 12l18-8-5 18-5-7-8-3z" fill="none" stroke="#666" stroke-width="2" stroke-linejoin="round"/>266 </svg>267 </div>268 </div>269 </div>270 <!-- gesture bar -->271 <div style="height: 40px; display:flex; align-items:center; justify-content:center; margin-top: 18px;">272 <div style="width: 200px; height: 10px; background:#d0d0d0; border-radius: 5px;"></div>273 </div>274 </div>275 276</div>277</body>278</html>