GD-ML/AndroidCode
13.4k
1<html>2<head>3<meta charset="UTF-8">4<title>Chats UI Mock</title>5<style>6 body { margin: 0; padding: 0; background: transparent; font-family: -apple-system, Segoe UI, Roboto, Helvetica, Arial, sans-serif; }7 #render-target {8 width: 1080px;9 height: 2400px;10 position: relative;11 overflow: hidden;12 background: linear-gradient(#0b2a4a 0%, #091f3a 180px, #0c1320 181px, #0c1320 100%);13 color: #e6eef9;14 }15 16 /* Status bar */17 .statusbar {18 position: absolute;19 top: 20px;20 left: 24px;21 right: 24px;22 height: 50px;23 display: flex;24 align-items: center;25 justify-content: space-between;26 color: #ffffff;27 font-weight: 600;28 font-size: 34px;29 }30 .sb-left, .sb-right { display: flex; align-items: center; gap: 20px; }31 .sb-icon {32 width: 26px; height: 26px; opacity: 0.9;33 }34 .battery { font-size: 30px; opacity: 0.9; }35 36 /* Top account header */37 .topbar {38 position: absolute;39 top: 80px;40 left: 24px;41 right: 24px;42 height: 140px;43 display: flex;44 align-items: center;45 justify-content: space-between;46 }47 .profile {48 display: flex; align-items: center; gap: 26px;49 }50 .avatar {51 width: 96px; height: 96px; border-radius: 48px;52 background: #E0E0E0; border: 1px solid #BDBDBD;53 color: #757575; display: flex; align-items: center; justify-content: center;54 font-weight: 700; font-size: 36px; position: relative;55 }56 .presence {57 position: absolute; right: -2px; bottom: -2px;58 width: 18px; height: 18px; background: #38d56b; border: 3px solid #0b2a4a; border-radius: 50%;59 }60 .name-area { line-height: 1.15; }61 .name-area .title { font-size: 44px; font-weight: 700; }62 .name-area .subtitle { font-size: 30px; color: #a8c3e6; margin-top: 8px; }63 64 .top-actions { display: flex; align-items: center; gap: 26px; }65 .action-btn {66 width: 70px; height: 70px; border-radius: 16px; background: #122a4b; border: 1px solid #254a7a;67 display: flex; align-items: center; justify-content: center;68 }69 70 /* Search */71 .searchbar {72 position: absolute; top: 230px; left: 24px; right: 24px;73 height: 90px; border-radius: 20px;74 background: #0f1b2f; border: 1px solid #223a5e;75 display: flex; align-items: center; padding: 0 26px; gap: 22px;76 }77 .search-input {78 color: #cfe1ff; font-size: 34px; opacity: 0.9; flex: 1;79 }80 .filter-btn {81 width: 72px; height: 72px; border-radius: 16px; background: #0c1528; border: 1px solid #254a7a;82 display: flex; align-items: center; justify-content: center;83 }84 85 /* Banner */86 .banner {87 position: absolute; top: 335px; left: 24px; right: 24px;88 background: #112542; border: 1px solid #2b578f; border-radius: 20px;89 padding: 26px; display: flex; align-items: center; justify-content: space-between;90 }91 .banner-left { display: flex; align-items: center; gap: 24px; }92 .banner-text { }93 .banner-title { font-size: 40px; font-weight: 800; }94 .banner-sub { font-size: 30px; color: #b8cde8; margin-top: 6px; }95 .banner-close { font-size: 42px; color: #c3d7f2; opacity: 0.8; }96 97 /* List area */98 .list {99 position: absolute; top: 450px; left: 0; right: 0; bottom: 200px;100 padding: 0 24px 24px 24px; overflow: hidden;101 }102 .chat {103 display: grid; grid-template-columns: 120px 1fr 200px; align-items: center;104 column-gap: 24px; padding: 30px 10px; border-bottom: 1px solid #1a2a44;105 }106 .chat .av {107 width: 110px; height: 110px; border-radius: 22px;108 background: #E0E0E0; border: 1px solid #BDBDBD; color: #757575;109 display: flex; align-items: center; justify-content: center; font-weight: 700;110 }111 .chat.round .av { border-radius: 55px; }112 .chat .meta { display: flex; flex-direction: column; gap: 6px; }113 .chat .name { font-size: 40px; font-weight: 800; display: inline-flex; align-items: center; gap: 10px; }114 .chat .snippet { font-size: 32px; color: #a9bfdc; }115 .verify {116 width: 34px; height: 34px; background: #1e88ff; border-radius: 50%;117 display: inline-flex; align-items: center; justify-content: center;118 }119 .verify svg { width: 22px; height: 22px; }120 .right-col { display: flex; align-items: center; justify-content: flex-end; gap: 16px; }121 .date { font-size: 30px; color: #b3c7e6; }122 .badge {123 width: 50px; height: 50px; background: #2d8cff; border-radius: 25px;124 color: #fff; font-weight: 700; font-size: 30px; display: flex; align-items: center; justify-content: center;125 }126 .green-dot {127 width: 20px; height: 20px; border-radius: 10px; background: #49d36b; border: 3px solid #0c1320;128 position: absolute; left: 86px; top: 80px;129 }130 131 .bing-btn {132 margin-top: 16px; width: 540px; height: 74px; border-radius: 38px;133 border: 1px solid #2b578f; background: #0f1d36; color: #cfe1ff;134 display: flex; align-items: center; justify-content: center; font-size: 32px; font-weight: 700;135 }136 137 /* Floating compose */138 .fab {139 position: absolute; right: 34px; bottom: 280px;140 width: 150px; height: 150px; border-radius: 75px;141 background: #2b8cff; box-shadow: 0 8px 18px rgba(0,0,0,0.4);142 display: flex; align-items: center; justify-content: center;143 }144 145 /* Bottom navigation */146 .bottomnav {147 position: absolute; left: 0; right: 0; bottom: 0; height: 180px;148 background: #0e172b; border-top: 1px solid #1b2b47; display: grid; grid-template-columns: repeat(5, 1fr);149 align-items: center; text-align: center;150 }151 .nav-item { color: #c0d3f2; }152 .nav-item .icon-wrap { width: 84px; height: 84px; margin: 0 auto; display: flex; align-items: center; justify-content: center; }153 .nav-item .label { margin-top: 8px; font-size: 30px; }154 .unread-dot {155 position: absolute; left: 70px; top: 28px; background: #ff4b4b; color: #fff;156 width: 46px; height: 46px; border-radius: 23px; font-size: 26px; display: flex; align-items: center; justify-content: center;157 font-weight: 800;158 }159 .today-dot {160 width: 24px; height: 24px; background: #ff4b4b; border-radius: 12px;161 position: absolute; right: 34px; bottom: 34px;162 }163</style>164</head>165<body>166<div id="render-target">167 168 <!-- Status Bar -->169 <div class="statusbar">170 <div class="sb-left">171 <div>8:14</div>172 <svg class="sb-icon" viewBox="0 0 24 24">173 <circle cx="5" cy="12" r="3" fill="#9ec1ff"/>174 <circle cx="14" cy="12" r="3" fill="#9ec1ff"/>175 </svg>176 <svg class="sb-icon" viewBox="0 0 24 24">177 <path d="M2 18h20L12 3 2 18z" fill="#9ec1ff"/>178 </svg>179 <svg class="sb-icon" viewBox="0 0 24 24">180 <rect x="4" y="6" width="16" height="12" rx="2" fill="#9ec1ff"/>181 <rect x="19" y="9" width="3" height="6" rx="1" fill="#9ec1ff"/>182 </svg>183 </div>184 <div class="sb-right">185 <svg class="sb-icon" viewBox="0 0 24 24">186 <rect x="2" y="5" width="20" height="14" rx="7" fill="#9ec1ff"/>187 <circle cx="9" cy="12" r="3" fill="#0c1320"/>188 </svg>189 <div class="battery">100%</div>190 </div>191 </div>192 193 <!-- Top header -->194 <div class="topbar">195 <div class="profile">196 <div class="avatar">RW<div class="presence"></div></div>197 <div class="name-area">198 <div class="title">Richard Wagner</div>199 <div class="subtitle">Share what you're up to</div>200 </div>201 </div>202 <div class="top-actions">203 <div class="action-btn">204 <svg width="40" height="40" viewBox="0 0 24 24">205 <rect x="3" y="6" width="12" height="12" rx="3" fill="#9ec1ff"/>206 <polygon points="16,10 22,8 22,16 16,14" fill="#9ec1ff"/>207 </svg>208 </div>209 <div class="action-btn">210 <svg width="40" height="40" viewBox="0 0 24 24">211 <path d="M12 3c-4 0-7 3-7 7v4l-2 2h18l-2-2v-4c0-4-3-7-7-7z" fill="#9ec1ff"/>212 <circle cx="12" cy="21" r="2" fill="#9ec1ff"/>213 </svg>214 </div>215 </div>216 </div>217 218 <!-- Search bar -->219 <div class="searchbar">220 <svg width="44" height="44" viewBox="0 0 24 24">221 <circle cx="10" cy="10" r="7" stroke="#9ec1ff" stroke-width="2" fill="none"/>222 <line x1="15" y1="15" x2="22" y2="22" stroke="#9ec1ff" stroke-width="2"/>223 </svg>224 <div class="search-input">Search</div>225 <div class="filter-btn">226 <svg width="40" height="40" viewBox="0 0 24 24">227 <line x1="4" y1="6" x2="20" y2="6" stroke="#9ec1ff" stroke-width="2"/>228 <circle cx="8" cy="6" r="3" fill="#9ec1ff"/>229 <line x1="4" y1="12" x2="20" y2="12" stroke="#9ec1ff" stroke-width="2"/>230 <circle cx="16" cy="12" r="3" fill="#9ec1ff"/>231 <line x1="4" y1="18" x2="20" y2="18" stroke="#9ec1ff" stroke-width="2"/>232 <circle cx="11" cy="18" r="3" fill="#9ec1ff"/>233 </svg>234 </div>235 </div>236 237 <!-- Banner -->238 <div class="banner">239 <div class="banner-left">240 <div class="action-btn" style="width:72px;height:72px;">241 <svg width="40" height="40" viewBox="0 0 24 24">242 <rect x="4" y="6" width="10" height="12" rx="3" fill="#9ec1ff"/>243 <polygon points="14,10 22,8 22,16 14,14" fill="#9ec1ff"/>244 </svg>245 </div>246 <div class="banner-text">247 <div class="banner-title">Easy meetings with anyone</div>248 <div class="banner-sub">Tap here to start a video meeting</div>249 </div>250 </div>251 <div class="banner-close">✕</div>252 </div>253 254 <!-- List -->255 <div class="list">256 257 <!-- Bing -->258 <div class="chat">259 <div class="av">[IMG: Bing Logo]</div>260 <div class="meta">261 <div class="name">Bing <span class="verify">262 <svg viewBox="0 0 24 24"><path d="M9 16l-3-3 1.4-1.4L9 13.2l7.6-7.6L18 7l-9 9z" fill="#fff"/></svg>263 </span></div>264 <div class="snippet">Hey, this is Bing! How can I help y...</div>265 <div class="bing-btn">Compose a new national anthem</div>266 </div>267 <div class="right-col">268 <div class="date">12/12/2023</div>269 <div class="badge">1</div>270 </div>271 </div>272 273 <!-- Richard Wagner (You) -->274 <div class="chat">275 <div class="av">[IMG: Profile Avatar]</div>276 <div class="meta">277 <div class="name">Richard Wagner (You) <span class="verify">278 <svg viewBox="0 0 24 24"><path d="M9 16l-3-3 1.4-1.4L9 13.2l7.6-7.6L18 7l-9 9z" fill="#fff"/></svg>279 </span></div>280 <div class="snippet"> </div>281 </div>282 <div class="right-col">283 <svg width="30" height="30" viewBox="0 0 24 24">284 <path d="M6 2l12 10-12 10z" fill="#b3c7e6"/>285 </svg>286 </div>287 </div>288 289 <!-- Natalie Larson -->290 <div class="chat round" style="position: relative;">291 <div class="av">[IMG: Plant Avatar]</div>292 <div class="green-dot"></div>293 <div class="meta">294 <div class="name">Natalie Larson</div>295 <div class="snippet">How are you doing?</div>296 </div>297 <div class="right-col">298 <div class="date">8:14 AM</div>299 <div class="badge">1</div>300 </div>301 </div>302 303 <!-- sandra Abraham -->304 <div class="chat round">305 <div class="av">SA</div>306 <div class="meta">307 <div class="name">sandra Abraham</div>308 <div class="snippet">Translated Conversation requested</div>309 </div>310 <div class="right-col">311 <div class="date">Fri</div>312 </div>313 </div>314 315 <!-- Hilary May Konadu -->316 <div class="chat round">317 <div class="av">[IMG: Avatar]</div>318 <div class="meta">319 <div class="name">Hilary May Konadu</div>320 <div class="snippet">Translated Conversation requested</div>321 </div>322 <div class="right-col">323 <div class="date">12/15/2023</div>324 <div class="badge">1</div>325 </div>326 </div>327 328 <!-- Friends -->329 <div class="chat round">330 <div class="av">FR</div>331 <div class="meta">332 <div class="name">Friends</div>333 <div class="snippet">Amelia miller has made the chat hist...</div>334 </div>335 <div class="right-col">336 <div class="date">12/13/2023</div>337 </div>338 </div>339 340 <!-- Amelia miller -->341 <div class="chat round">342 <div class="av">[IMG: Plant Avatar]</div>343 <div class="meta">344 <div class="name">Amelia miller</div>345 <div class="snippet">↪ quoted message</div>346 </div>347 <div class="right-col">348 <div class="date">12/13/2023</div>349 </div>350 </div>351 352 </div>353 354 <!-- Floating compose button -->355 <div class="fab">356 <svg width="72" height="72" viewBox="0 0 24 24">357 <path d="M3 17.25V21h3.75L17.81 9.94l-3.75-3.75L3 17.25z" fill="#fff"/>358 <path d="M20.71 7.04a1 1 0 0 0 0-1.41L18.37 3.3a1 1 0 0 0-1.41 0l-1.34 1.34 3.75 3.75 1.34-1.35z" fill="#fff"/>359 </svg>360 </div>361 362 <!-- Bottom navigation -->363 <div class="bottomnav">364 <div class="nav-item" style="position: relative;">365 <div class="unread-dot">3</div>366 <div class="icon-wrap">367 <svg width="56" height="56" viewBox="0 0 24 24">368 <path d="M3 5h18v14H3z" fill="#9ec1ff"/>369 <path d="M3 5l9 7 9-7" fill="none" stroke="#0c1320" stroke-width="2"/>370 </svg>371 </div>372 <div class="label">Chats</div>373 </div>374 <div class="nav-item">375 <div class="icon-wrap">376 <svg width="56" height="56" viewBox="0 0 24 24">377 <path d="M5 4h14v16H5z" fill="#9ec1ff"/>378 <path d="M6 8h12M6 12h12M6 16h12" stroke="#0c1320" stroke-width="2"/>379 </svg>380 </div>381 <div class="label">Calls</div>382 </div>383 <div class="nav-item">384 <div class="icon-wrap">385 <svg width="56" height="56" viewBox="0 0 24 24">386 <rect x="4" y="3" width="16" height="18" rx="3" fill="#9ec1ff"/>387 <circle cx="12" cy="7" r="1.5" fill="#0c1320"/>388 <circle cx="12" cy="12" r="1.5" fill="#0c1320"/>389 <circle cx="12" cy="17" r="1.5" fill="#0c1320"/>390 </svg>391 </div>392 <div class="label">Phone</div>393 </div>394 <div class="nav-item">395 <div class="icon-wrap">396 <svg width="56" height="56" viewBox="0 0 24 24">397 <rect x="3" y="4" width="18" height="16" rx="2" fill="#9ec1ff"/>398 <circle cx="8" cy="10" r="3" fill="#0c1320"/>399 <rect x="13" y="8" width="6" height="8" rx="2" fill="#0c1320"/>400 </svg>401 </div>402 <div class="label">Contacts</div>403 </div>404 <div class="nav-item" style="position: relative;">405 <div class="icon-wrap">406 <svg width="56" height="56" viewBox="0 0 24 24">407 <circle cx="12" cy="12" r="10" fill="#9ec1ff"/>408 <path d="M12 6v6l4 2" stroke="#0c1320" stroke-width="2" fill="none"/>409 </svg>410 </div>411 <div class="label">Today</div>412 </div>413 </div>414 415 <div class="today-dot"></div>416 417</div>418</body>419</html>