GD-ML/AndroidCode
13.4k
1<html>2<head>3<meta charset="utf-8">4<meta name="viewport" content="width=1080, initial-scale=1">5<title>Chat List UI</title>6<style>7 body { margin:0; padding:0; background:transparent; font-family: Arial, Helvetica, sans-serif; }8 #render-target {9 width:1080px; height:2400px; position:relative; overflow:hidden;10 background:#0c2240; color:#e8f0ff;11 }12 13 /* Status bar */14 .status-bar {15 height:72px;16 padding:0 36px;17 display:flex; align-items:center; justify-content:space-between;18 color:#cfe0ff; font-weight:600; font-size:38px;19 }20 .status-icons { display:flex; align-items:center; gap:18px; }21 .status-icons .dot { width:12px; height:12px; background:#9ec3ff; border-radius:50%; opacity:.9; }22 .status-icons svg { width:36px; height:36px; fill:#9ec3ff; }23 24 /* Header area */25 .header {26 padding:24px 36px 24px 36px;27 background:#0d2a56;28 box-shadow: inset 0 -1px 0 rgba(255,255,255,0.07);29 }30 .profile-row { display:flex; align-items:center; justify-content:space-between; }31 .profile-left { display:flex; align-items:center; gap:24px; }32 .avatar {33 width:120px; height:120px; border-radius:60px; background:#315a9b;34 display:flex; align-items:center; justify-content:center; font-weight:800; font-size:40px; position:relative;35 box-shadow: inset 0 0 0 3px rgba(255,255,255,0.08);36 }37 .presence-dot {38 position:absolute; right:6px; bottom:6px; width:26px; height:26px; border-radius:50%;39 background:#33d17a; border:4px solid #0d2a56;40 }41 .name { font-size:44px; font-weight:700; }42 .sub { font-size:30px; color:#a8c3e8; margin-top:6px; }43 .profile-right { display:flex; align-items:center; gap:28px; }44 .circle-btn { width:72px; height:72px; border-radius:36px; background:#143a72; display:flex; align-items:center; justify-content:center; }45 .circle-btn svg { width:40px; height:40px; fill:#cfe0ff; }46 47 /* Search */48 .search {49 margin-top:24px; background:#0a1e3b; border-radius:16px; height:96px; display:flex; align-items:center; gap:20px; padding:0 28px;50 }51 .search svg { width:40px; height:40px; fill:#a8c3e8; }52 .search span { color:#a8c3e8; font-size:34px; }53 54 /* Content area dark */55 .content {56 background:#0a1220;57 height:1990px;58 border-top-left-radius:24px; border-top-right-radius:24px;59 padding:24px 24px 220px 24px;60 }61 62 /* Banner */63 .banner {64 background:#0d1a2e; border:1px solid #203453; color:#d7e8ff;65 border-radius:14px; padding:24px; margin-bottom:14px;66 }67 .banner-title { font-weight:800; font-size:40px; }68 .banner-sub { font-size:28px; color:#a8c3e8; margin-top:8px; }69 .banner-close { position:absolute; right:24px; top:24px; }70 .meeting-row { display:flex; align-items:center; gap:18px; margin-top:8px; }71 .meeting-row svg { width:40px; height:40px; fill:#9ec3ff; }72 73 /* Chat list */74 .chat-item { display:flex; align-items:flex-start; gap:26px; padding:28px 10px; border-bottom:1px solid rgba(255,255,255,0.06); }75 .chat-avatar {76 width:120px; height:120px; border-radius:60px; overflow:hidden;77 background:#E0E0E0; border:1px solid #BDBDBD; color:#757575; display:flex; align-items:center; justify-content:center; font-size:26px; text-align:center;78 position:relative;79 }80 .small-overlay {81 position:absolute; right:6px; bottom:6px; width:28px; height:28px; border-radius:14px; background:#f3a23a; border:4px solid #0a1220;82 }83 .chat-body { flex:1; }84 .chat-top { display:flex; align-items:center; gap:12px; justify-content:space-between; }85 .chat-name { font-size:40px; font-weight:800; color:#e8f0ff; }86 .chat-time { color:#a8c3e8; font-size:28px; }87 .badge { min-width:46px; height:46px; border-radius:23px; background:#1e78ff; color:#fff; display:flex; align-items:center; justify-content:center; font-weight:700; font-size:28px; }88 .subtext { margin-top:8px; color:#b7c8e8; font-size:32px; }89 .verified {90 display:inline-flex; align-items:center; gap:8px; margin-left:8px;91 color:#99c9ff; font-size:28px;92 }93 .verified svg { width:28px; height:28px; fill:#4ea1ff; }94 .pill {95 display:inline-flex; align-items:center; justify-content:center;96 padding:18px 28px; border-radius:28px; border:1px solid #2e4f80; color:#b7d3ff; font-size:30px;97 margin:12px 0 0 144px; width:auto; background:#0c1c34;98 }99 100 /* Floating compose */101 .fab {102 position:absolute; right:36px; bottom:250px; width:150px; height:150px; border-radius:75px;103 background:#1e78ff; box-shadow:0 8px 20px rgba(0,0,0,0.4);104 display:flex; align-items:center; justify-content:center;105 }106 .fab svg { width:64px; height:64px; fill:#fff; }107 108 /* Bottom nav */109 .bottom-bar {110 position:absolute; left:0; bottom:0; width:100%; height:180px; background:#0b172b; border-top:1px solid rgba(255,255,255,0.08);111 display:flex; align-items:center; justify-content:space-around;112 }113 .nav-item { color:#cfe0ff; font-size:32px; display:flex; flex-direction:column; align-items:center; gap:18px; position:relative; }114 .nav-item svg { width:64px; height:64px; fill:#cfe0ff; }115 .nav-item.active svg { fill:#1e78ff; }116 .badge-small {117 position:absolute; left:70px; top:12px; min-width:44px; height:44px; border-radius:22px; background:#ff5050;118 display:flex; align-items:center; justify-content:center; color:#fff; font-weight:700; font-size:26px;119 border:2px solid #0b172b;120 }121</style>122</head>123<body>124<div id="render-target">125 126 <!-- Status bar -->127 <div class="status-bar">128 <div>7:47</div>129 <div class="status-icons">130 <div class="dot"></div>131 <svg viewBox="0 0 24 24"><path d="M3 10h18v4H3z"/></svg>132 <svg viewBox="0 0 24 24"><path d="M12 2l5 5h-4v10h-2V7H7l5-5z"/></svg>133 <svg viewBox="0 0 24 24"><path d="M18 8a6 6 0 11-12 0 6 6 0 0112 0z"/></svg>134 <div style="font-size:34px; color:#cfe0ff;">95%</div>135 </div>136 </div>137 138 <!-- Header with profile and search -->139 <div class="header">140 <div class="profile-row">141 <div class="profile-left">142 <div class="avatar">RW<div class="presence-dot"></div></div>143 <div>144 <div class="name">Richard Wagner</div>145 <div class="sub">Share what you're up to</div>146 </div>147 </div>148 <div class="profile-right">149 <div class="circle-btn">150 <svg viewBox="0 0 24 24"><path d="M4 5h16v2H4zm0 6h16v2H4zm0 6h10v2H4z"/></svg>151 </div>152 <div class="circle-btn">153 <svg viewBox="0 0 24 24"><path d="M12 22a2 2 0 002-2H10a2 2 0 002 2zm6-6V9a6 6 0 10-12 0v7l-2 2v1h16v-1l-2-2z"/></svg>154 </div>155 </div>156 </div>157 158 <div class="search">159 <svg viewBox="0 0 24 24"><path d="M10 2a8 8 0 105.3 14.1l4.6 4.6 1.4-1.4-4.6-4.6A8 8 0 0010 2zm0 2a6 6 0 110 12 6 6 0 010-12z"/></svg>160 <span>Search</span>161 </div>162 </div>163 164 <!-- Content area -->165 <div class="content">166 167 <!-- Easy meetings banner -->168 <div class="banner">169 <div class="banner-title">Easy meetings with anyone</div>170 <div class="banner-sub">Tap here to start a video meeting</div>171 <div class="meeting-row">172 <svg viewBox="0 0 24 24"><path d="M3 6h12a2 2 0 012 2v8a2 2 0 01-2 2H3V6zm18 3l-4 3v-6l4 3z"/></svg>173 <span style="color:#a8c3e8; font-size:28px;">Video meeting</span>174 </div>175 </div>176 177 <!-- Chat: Bing -->178 <div class="chat-item">179 <div class="chat-avatar">180 [IMG: Bing Logo]181 </div>182 <div class="chat-body">183 <div class="chat-top">184 <div style="display:flex; align-items:center; gap:10px;">185 <div class="chat-name">Bing</div>186 <span class="verified">187 <svg viewBox="0 0 24 24"><path d="M12 2l10 5-10 15L2 7l10-5zm-1 12l5-5-1.4-1.4L11 10.2 9.4 8.6 8 10l3 4z"/></svg>188 </span>189 </div>190 <div class="chat-time">12/12/2023</div>191 </div>192 <div class="subtext">Hey, this is Bing! How can I help y…</div>193 </div>194 <div class="badge">1</div>195 </div>196 <div class="pill">Compose a new national anthem</div>197 198 <!-- Chat: Richard Wagner (You) -->199 <div class="chat-item">200 <div class="chat-avatar">[IMG: User Avatar]</div>201 <div class="chat-body">202 <div class="chat-top">203 <div style="display:flex; align-items:center; gap:10px;">204 <div class="chat-name">Richard Wagner (You)</div>205 <span class="verified">206 <svg viewBox="0 0 24 24"><path d="M12 2l10 5-10 15L2 7l10-5zm-1 12l5-5-1.4-1.4L11 10.2 9.4 8.6 8 10l3 4z"/></svg>207 </span>208 </div>209 <svg viewBox="0 0 24 24" style="width:36px;height:36px;fill:#99c9ff;"><path d="M12 17.27L18.18 21l-1.64-7.03L22 9.24l-7.19-.61L12 2 9.19 8.63 2 9.24l5.46 4.73L5.82 21z"/></svg>210 </div>211 <div class="subtext"></div>212 </div>213 </div>214 215 <!-- Chat: Natalie Larson -->216 <div class="chat-item">217 <div class="chat-avatar">218 [IMG: Floral Avatar]219 <div class="small-overlay"></div>220 </div>221 <div class="chat-body">222 <div class="chat-top">223 <div class="chat-name">Natalie Larson</div>224 <div class="chat-time">7:42 AM</div>225 </div>226 <div class="subtext">Hi Natalie</div>227 </div>228 </div>229 230 <!-- Chat: sandra Abraham -->231 <div class="chat-item">232 <div class="chat-avatar">[IMG: Initials SA]</div>233 <div class="chat-body">234 <div class="chat-top">235 <div class="chat-name">sandra Abraham</div>236 <div class="chat-time">Fri</div>237 </div>238 <div class="subtext">Translated Conversation requested</div>239 </div>240 </div>241 242 <!-- Chat: Hilary May Konadu -->243 <div class="chat-item">244 <div class="chat-avatar">[IMG: User Avatar]</div>245 <div class="chat-body">246 <div class="chat-top">247 <div class="chat-name">Hilary May Konadu</div>248 <div class="chat-time">12/15/2023</div>249 </div>250 <div class="subtext">Translated Conversation requested</div>251 </div>252 <div class="badge">1</div>253 </div>254 255 <!-- Chat: Friends group -->256 <div class="chat-item">257 <div class="chat-avatar" style="background:#d9c9ff; color:#6a49b8;">FR258 <div style="position:absolute; right:-6px; bottom:-6px; width:54px; height:54px; border-radius:27px; background:#E0E0E0; border:1px solid #BDBDBD; color:#757575; display:flex; align-items:center; justify-content:center; font-size:20px;">[IMG]</div>259 </div>260 <div class="chat-body">261 <div class="chat-top">262 <div class="chat-name">Friends</div>263 <div class="chat-time">12/13/2023</div>264 </div>265 <div class="subtext">Amelia miller has made the chat hist…</div>266 </div>267 </div>268 269 <!-- Chat: Amelia miller -->270 <div class="chat-item">271 <div class="chat-avatar">272 [IMG: Plant Avatar]273 <div class="small-overlay"></div>274 </div>275 <div class="chat-body">276 <div class="chat-top">277 <div class="chat-name">Amelia miller</div>278 <div class="chat-time">12/13/2023</div>279 </div>280 <div class="subtext">↪ quoted message</div>281 </div>282 </div>283 284 </div>285 286 <!-- Floating compose button -->287 <div class="fab">288 <svg viewBox="0 0 24 24"><path d="M3 17.25V21h3.75L17.81 9.94l-3.75-3.75L3 17.25zM20.71 7.04a1 1 0 000-1.41l-2.34-2.34a1 1 0 00-1.41 0l-1.83 1.83 3.75 3.75 1.83-1.83z"/></svg>289 </div>290 291 <!-- Bottom navigation -->292 <div class="bottom-bar">293 <div class="nav-item active">294 <svg viewBox="0 0 24 24"><path d="M3 11l9-8 9 8v10H3V11zm9-5l7 6v7H4v-7l8-6z"/></svg>295 <div>Chats</div>296 <div class="badge-small">2</div>297 </div>298 <div class="nav-item">299 <svg viewBox="0 0 24 24"><path d="M6.62 10.79a15.05 15.05 0 006.59 6.59l2.2-2.2a1 1 0 011.06-.24 11.36 11.36 0 003.58.57 1 1 0 011 1V21a1 1 0 01-1 1A17 17 0 013 5a1 1 0 011-1h3.49a1 1 0 011 1 11.36 11.36 0 00.57 3.58 1 1 0 01-.24 1.06l-2.2 2.15z"/></svg>300 <div>Calls</div>301 </div>302 <div class="nav-item">303 <svg viewBox="0 0 24 24"><path d="M4 4h7v7H4V4zm9 0h7v7h-7V4zM4 13h7v7H4v-7zm9 0h7v7h-7v-7z"/></svg>304 <div>Phone</div>305 </div>306 <div class="nav-item">307 <svg viewBox="0 0 24 24"><path d="M3 5h18v14H3zM5 7v10h14V7H5z"/></svg>308 <div>Contacts</div>309 </div>310 <div class="nav-item">311 <svg viewBox="0 0 24 24"><path d="M12 2a10 10 0 100 20 10 10 0 000-20zm1 5v6h5v-2h-3V7h-2z"/></svg>312 <div>Today</div>313 </div>314 </div>315 316</div>317</body>318</html>