GD-ML/AndroidCode
13.4k
1<!DOCTYPE html>2<html lang="en">3<head>4<meta charset="UTF-8">5<title>Chat UI Replica</title>6<meta name="viewport" content="width=1080, initial-scale=1.0">7<style>8 body { margin: 0; padding: 0; background: transparent; font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Arial, sans-serif; }9 #render-target {10 width: 1080px; height: 2400px; position: relative; overflow: hidden;11 background: #FFFFFF; border-radius: 32px;12 }13 14 /* Status bar */15 .status-bar {16 height: 90px; padding: 0 24px; display: flex; align-items: center; justify-content: space-between; color: #111;17 }18 .status-left { font-weight: 600; font-size: 40px; }19 .status-right { display: flex; gap: 18px; align-items: center; }20 .status-dot { width: 18px; height: 18px; background: #555; border-radius: 50%; opacity: 0.5; }21 22 /* Top actions and title */23 .top-actions {24 display: flex; align-items: center; padding: 10px 24px; position: relative; height: 120px;25 }26 .circle-btn {27 width: 96px; height: 96px; border-radius: 50%;28 border: 1px solid #e5e5e5; background: #f8f8f8;29 display: flex; align-items: center; justify-content: center;30 margin-right: 18px;31 }32 .circle-btn.red { background: #fff5f5; border-color: #ffd9d9; }33 .title {34 position: absolute; left: 0; right: 0; text-align: center; font-size: 56px; font-weight: 700; color: #1b1b1b;35 }36 .actions-right { margin-left: auto; display: flex; gap: 18px; position: relative; }37 .badge {38 position: absolute; right: -2px; top: -6px;39 background: #ff4b55; color: #fff; width: 44px; height: 44px; font-size: 26px;40 border-radius: 22px; display: flex; align-items: center; justify-content: center; border: 3px solid #fff;41 }42 43 /* List */44 .list { margin-top: 8px; }45 .row {46 display: flex; align-items: center; padding: 24px; border-top: 1px solid #eeeeee;47 background: #fff;48 }49 .row:first-child { border-top: 0; }50 .avatar {51 width: 112px; height: 112px; border-radius: 50%;52 background: #E0E0E0; border: 1px solid #BDBDBD;53 display: flex; align-items: center; justify-content: center; color: #757575; font-size: 24px;54 overflow: hidden;55 }56 .row-content { flex: 1; margin-left: 24px; }57 .name-line {58 display: flex; align-items: center; justify-content: space-between;59 }60 .name {61 font-size: 44px; font-weight: 700; color: #111;62 }63 .trailing-icon {64 width: 84px; height: 84px; border-radius: 50%; border: 2px solid #e2e6ea; display: flex; align-items: center; justify-content: center; color: #a1a8ae;65 }66 .sub {67 margin-top: 6px; font-size: 30px; color: #6c6c6c; display: flex; align-items: center; gap: 10px;68 }69 .sub .chip { color: #2d7ef7; font-weight: 600; }70 71 .section-header {72 padding: 24px; font-size: 36px; font-weight: 700; color: #6b6b6b; background: #fff;73 border-top: 10px solid #f3f4f6; border-bottom: 1px solid #eeeeee;74 }75 76 /* Quick Add rows */77 .qa-row { display: flex; align-items: center; padding: 26px 24px; border-bottom: 1px solid #eeeeee; background: #fff; }78 .qa-info { flex: 1; margin-left: 24px; }79 .qa-name { font-size: 40px; font-weight: 700; color: #111; }80 .qa-username { font-size: 28px; color: #7a7a7a; margin-top: 6px; }81 .qa-actions { display: flex; align-items: center; gap: 24px; }82 .add-pill {83 display: inline-flex; align-items: center; gap: 12px;84 background: #eef1f6; color: #2b2f36; border-radius: 36px; padding: 18px 26px; font-weight: 700; font-size: 32px;85 border: 1px solid #d8dfe6;86 }87 .dismiss {88 width: 56px; height: 56px; border-radius: 50%; border: 2px solid #e2e6ea; display: flex; align-items: center; justify-content: center; color: #a6aeb7; font-size: 40px;89 }90 91 /* Bottom navbar */92 .bottom-nav-wrap {93 position: absolute; left: 40px; right: 40px; bottom: 40px; height: 156px;94 display: flex; align-items: center; justify-content: center;95 }96 .bottom-nav {97 width: 100%; height: 156px; background: #fff; border-radius: 48px;98 box-shadow: 0 10px 25px rgba(0,0,0,0.12); display: flex; align-items: center; justify-content: space-around;99 border: 1px solid #ececec;100 }101 .tab { display: flex; flex-direction: column; align-items: center; gap: 8px; color: #7a7a7a; font-size: 26px; }102 .tab.active { color: #111; font-weight: 700; }103 .tab svg { width: 52px; height: 52px; }104 105 /* FAB */106 .fab {107 position: absolute; right: 48px; bottom: 232px; width: 132px; height: 132px; border-radius: 50%;108 background: #4FC3F7; box-shadow: 0 12px 24px rgba(79,195,247,0.5); display: flex; align-items: center; justify-content: center;109 }110 111 /* Small helpers */112 .img-ph-small {113 width: 64px; height: 64px; background: #E0E0E0; border: 1px solid #BDBDBD; color: #757575; display: flex; align-items: center; justify-content: center; border-radius: 8px; font-size: 18px;114 }115</style>116</head>117<body>118<div id="render-target">119 <!-- Status Bar -->120 <div class="status-bar">121 <div class="status-left">3:28</div>122 <div class="status-right">123 <div class="status-dot"></div>124 <div class="status-dot"></div>125 </div>126 </div>127 128 <!-- Top actions and title -->129 <div class="top-actions">130 <div class="circle-btn red" title="Profile">131 <svg viewBox="0 0 24 24" width="52" height="52">132 <path d="M12 12a5 5 0 1 0-0.001-10.001A5 5 0 0 0 12 12zm-7 9c0-4 3-6 7-6s7 2 7 6v1H5v-1z" fill="#d32f2f"/>133 </svg>134 </div>135 <div class="circle-btn" title="Search">136 <svg viewBox="0 0 24 24" width="52" height="52">137 <circle cx="11" cy="11" r="7" stroke="#616161" stroke-width="2" fill="none"/>138 <path d="M20 20l-4-4" stroke="#616161" stroke-width="2" />139 </svg>140 </div>141 <div class="title">Chat</div>142 <div class="actions-right">143 <div class="circle-btn" title="Add Friends" style="position: relative;">144 <svg viewBox="0 0 24 24" width="56" height="56">145 <path d="M12 12a4 4 0 1 0-0.001-8.001A4 4 0 0 0 12 12z" fill="#666"/>146 <path d="M3 20c0-3 3-5 9-5s9 2 9 5v1H3v-1z" fill="#666" opacity="0.4"/>147 <path d="M19 8v-2h-2V4h2V2h2v2h2v2h-2v2h-2z" fill="#666"/>148 </svg>149 <div class="badge">2</div>150 </div>151 <div class="circle-btn" title="Menu">152 <svg viewBox="0 0 24 24" width="52" height="52">153 <circle cx="5" cy="12" r="2" fill="#666"/>154 <circle cx="12" cy="12" r="2" fill="#666"/>155 <circle cx="19" cy="12" r="2" fill="#666"/>156 </svg>157 </div>158 </div>159 </div>160 161 <!-- Chat list -->162 <div class="list">163 <div class="row">164 <div class="avatar">[IMG: Avatar]</div>165 <div class="row-content">166 <div class="name-line">167 <div class="name">My AI</div>168 <div class="trailing-icon" title="Camera">169 <svg viewBox="0 0 24 24" width="36" height="36">170 <rect x="3" y="6" width="18" height="12" rx="3" stroke="#a1a8ae" fill="none" stroke-width="2"/>171 <circle cx="12" cy="12" r="3" stroke="#a1a8ae" fill="none" stroke-width="2"/>172 </svg>173 </div>174 </div>175 <div class="sub">176 <span class="chip">Received</span>177 <span>• 1w</span>178 </div>179 </div>180 <div class="img-ph-small" title="Bot">BOT</div>181 </div>182 183 <div class="row">184 <div class="avatar">[IMG: Avatar]</div>185 <div class="row-content">186 <div class="name-line">187 <div class="name">Amelia miller</div>188 <div class="trailing-icon">189 <svg viewBox="0 0 24 24" width="36" height="36">190 <rect x="3" y="6" width="18" height="12" rx="3" stroke="#a1a8ae" fill="none" stroke-width="2"/>191 <circle cx="12" cy="12" r="3" stroke="#a1a8ae" fill="none" stroke-width="2"/>192 </svg>193 </div>194 </div>195 <div class="sub">196 <svg viewBox="0 0 24 24" width="24" height="24">197 <path d="M4 12h14l-4-4" stroke="#2d7ef7" stroke-width="2" fill="none"/>198 </svg>199 <span class="chip">Delivered</span>200 <span>• 2m</span>201 </div>202 </div>203 </div>204 205 <div class="row">206 <div class="avatar">[IMG: Avatar]</div>207 <div class="row-content">208 <div class="name-line">209 <div class="name">Richard Wagner</div>210 <div class="trailing-icon">211 <svg viewBox="0 0 24 24" width="36" height="36">212 <rect x="3" y="6" width="18" height="12" rx="3" stroke="#a1a8ae" fill="none" stroke-width="2"/>213 <circle cx="12" cy="12" r="3" stroke="#a1a8ae" fill="none" stroke-width="2"/>214 </svg>215 </div>216 </div>217 <div class="sub">218 <svg viewBox="0 0 24 24" width="24" height="24">219 <path d="M4 12h14l-4-4" stroke="#2d7ef7" stroke-width="2" fill="none"/>220 </svg>221 <span class="chip">Delivered</span>222 <span>• 3h</span>223 </div>224 </div>225 </div>226 227 <div class="row">228 <div class="avatar">[IMG: Logo]</div>229 <div class="row-content">230 <div class="name-line">231 <div class="name">Team Snapchat</div>232 <div class="trailing-icon">233 <svg viewBox="0 0 24 24" width="36" height="36">234 <rect x="3" y="6" width="18" height="12" rx="3" stroke="#a1a8ae" fill="none" stroke-width="2"/>235 <circle cx="12" cy="12" r="3" stroke="#a1a8ae" fill="none" stroke-width="2"/>236 </svg>237 </div>238 </div>239 <div class="sub">240 <span class="chip">Received</span>241 <span>• 3d</span>242 </div>243 </div>244 </div>245 246 <div class="section-header">Quick Add</div>247 248 <div class="qa-row">249 <div class="avatar">[IMG: Avatar]</div>250 <div class="qa-info">251 <div class="qa-name">محمد باشم</div>252 <div class="qa-username">hashim238038</div>253 </div>254 <div class="qa-actions">255 <div class="add-pill">256 <svg viewBox="0 0 24 24" width="28" height="28">257 <path d="M12 5v14M5 12h14" stroke="#2b2f36" stroke-width="2"/>258 </svg>259 Add260 </div>261 <div class="dismiss">×</div>262 </div>263 </div>264 265 <div class="qa-row">266 <div class="avatar">[IMG: Avatar]</div>267 <div class="qa-info">268 <div class="qa-name">Happy Girl's</div>269 <div class="qa-username">jalindarshe2140</div>270 </div>271 <div class="qa-actions">272 <div class="add-pill">273 <svg viewBox="0 0 24 24" width="28" height="28">274 <path d="M12 5v14M5 12h14" stroke="#2b2f36" stroke-width="2"/>275 </svg>276 Add277 </div>278 <div class="dismiss">×</div>279 </div>280 </div>281 282 <div class="qa-row">283 <div class="avatar">[IMG: Avatar]</div>284 <div class="qa-info">285 <div class="qa-name">Surya Suri</div>286 <div class="qa-username">user317800403</div>287 </div>288 <div class="qa-actions">289 <div class="add-pill">290 <svg viewBox="0 0 24 24" width="28" height="28">291 <path d="M12 5v14M5 12h14" stroke="#2b2f36" stroke-width="2"/>292 </svg>293 Add294 </div>295 <div class="dismiss">×</div>296 </div>297 </div>298 299 <div class="qa-row">300 <div class="avatar">[IMG: Avatar]</div>301 <div class="qa-info">302 <div class="qa-name">Khan Kha</div>303 <div class="qa-username">frkankhan25075</div>304 </div>305 <div class="qa-actions">306 <div class="add-pill">307 <svg viewBox="0 0 24 24" width="28" height="28">308 <path d="M12 5v14M5 12h14" stroke="#2b2f36" stroke-width="2"/>309 </svg>310 Add311 </div>312 <div class="dismiss">×</div>313 </div>314 </div>315 316 <div class="qa-row">317 <div class="avatar">[IMG: Avatar]</div>318 <div class="qa-info">319 <div class="qa-name">Badal Janjavadia</div>320 <div class="qa-username">badaljanjavadiy</div>321 </div>322 <div class="qa-actions">323 <div class="add-pill">324 <svg viewBox="0 0 24 24" width="28" height="28">325 <path d="M12 5v14M5 12h14" stroke="#2b2f36" stroke-width="2"/>326 </svg>327 Add328 </div>329 <div class="dismiss">×</div>330 </div>331 </div>332 333 <div class="qa-row">334 <div class="avatar" style="border: 4px solid #7e57c2;">[IMG: Avatar]</div>335 <div class="qa-info">336 <div class="qa-name">Sanjay Singh</div>337 <div class="qa-username">user521402004</div>338 </div>339 <div class="qa-actions">340 <div class="add-pill">341 <svg viewBox="0 0 24 24" width="28" height="28">342 <path d="M12 5v14M5 12h14" stroke="#2b2f36" stroke-width="2"/>343 </svg>344 Add345 </div>346 <div class="dismiss">×</div>347 </div>348 </div>349 350 </div>351 352 <!-- Floating Action Button -->353 <div class="fab" title="New Chat">354 <svg viewBox="0 0 24 24" width="64" height="64">355 <path d="M4 20l1-5 9-9 5 5-9 9-5 1z" fill="#fff"/>356 </svg>357 </div>358 359 <!-- Bottom Navigation -->360 <div class="bottom-nav-wrap">361 <div class="bottom-nav">362 <div class="tab">363 <svg viewBox="0 0 24 24">364 <path d="M12 2l9 8h-3v10H6V10H3z" fill="#7a7a7a"/>365 </svg>366 <div>Map</div>367 </div>368 <div class="tab active">369 <svg viewBox="0 0 24 24">370 <circle cx="12" cy="8" r="4" fill="#111"/>371 <path d="M4 22c0-4 4-7 8-7s8 3 8 7" stroke="#111" stroke-width="2" fill="none"/>372 </svg>373 <div>Chat</div>374 </div>375 <div class="tab">376 <svg viewBox="0 0 24 24">377 <rect x="4" y="6" width="16" height="12" rx="2" stroke="#7a7a7a" stroke-width="2" fill="none"/>378 <circle cx="12" cy="12" r="3" stroke="#7a7a7a" stroke-width="2" fill="none"/>379 </svg>380 <div>Camera</div>381 </div>382 <div class="tab">383 <svg viewBox="0 0 24 24">384 <path d="M4 4h16v4H4zM4 10h16v4H4zM4 16h10v4H4z" fill="#7a7a7a"/>385 </svg>386 <div>Stories</div>387 </div>388 <div class="tab">389 <svg viewBox="0 0 24 24">390 <path d="M8 5v14l11-7z" fill="#7a7a7a"/>391 </svg>392 <div>Spotlight</div>393 </div>394 </div>395 </div>396 397</div>398</body>399</html>