GD-ML/AndroidCode
13.4k
1<!DOCTYPE html>2<html>3<head>4<meta charset="UTF-8">5<meta name="viewport" content="width=1080, initial-scale=1.0">6<title>Chat UI with Bottom Sheet</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;11 position: relative; overflow: hidden;12 background: #FFFFFF;13 }14 15 /* Status bar */16 .status-bar {17 height: 120px;18 background: #ffffff;19 color: #333;20 display: flex;21 align-items: center;22 padding: 0 36px;23 font-size: 40px;24 box-sizing: border-box;25 }26 .status-left { flex: 1; display: flex; align-items: center; gap: 18px; }27 .status-right { display: flex; align-items: center; gap: 28px; }28 .status-icon { width: 40px; height: 40px; }29 30 /* Header */31 .header {32 height: 164px;33 border-bottom: 1px solid #e5e5e5;34 display: flex; align-items: center;35 padding: 0 30px;36 box-sizing: border-box;37 }38 .back-btn { width: 72px; height: 72px; display: flex; align-items: center; justify-content: center; margin-right: 6px; }39 .avatar {40 width: 96px; height: 96px; border-radius: 50%;41 background: #E0E0E0; border: 1px solid #BDBDBD;42 display: flex; align-items: center; justify-content: center;43 color: #757575; font-size: 32px; margin-right: 24px;44 }45 .title { flex: 1; }46 .title .name { font-size: 44px; font-weight: 700; color: #222; }47 .status-row { display: flex; align-items: center; gap: 10px; margin-top: 6px; }48 .green-dot { width: 18px; height: 18px; background: #22aa3f; border-radius: 50%; }49 .status-text { font-size: 32px; color: #444; }50 .header-actions { display: flex; align-items: center; gap: 36px; }51 .icon-btn { width: 72px; height: 72px; display: flex; align-items: center; justify-content: center; }52 53 /* Conversation area */54 .chat {55 padding: 24px 30px 180px 30px;56 box-sizing: border-box;57 }58 .day-sep {59 display: flex; align-items: center; gap: 24px; color: #666; font-size: 32px;60 margin: 28px 0;61 }62 .day-sep .line { flex: 1; height: 2px; background: #d1d1d1; }63 .msg-row { display: flex; align-items: flex-end; margin: 32px 0; }64 .msg-row .msg-avatar { margin-right: 18px; }65 .msg-bubble {66 max-width: 620px;67 padding: 26px 32px;68 border-radius: 28px;69 font-size: 40px;70 line-height: 1.3;71 color: #222;72 }73 .incoming { background: #eaeaea; }74 .outgoing { background: #77A8AB; color: #0b1f22; margin-left: auto; }75 .msg-time { font-size: 30px; color: #666; margin: 0 18px; }76 .emoji { width: 54px; height: 54px; border-radius: 50%; background: #E0E0E0; border: 1px solid #BDBDBD; color: #757575;77 display: flex; align-items: center; justify-content: center; font-size: 24px; margin-left: 18px; }78 79 /* Dim overlay for sheet */80 .overlay {81 position: absolute; left: 0; top: 0; width: 100%; height: 100%;82 background: rgba(0,0,0,0.35);83 }84 85 /* Bottom sheet */86 .sheet {87 position: absolute; left: 0; bottom: 80px;88 width: 100%;89 background: #ffffff;90 border-top-left-radius: 36px; border-top-right-radius: 36px;91 box-shadow: 0 0 0 rgba(0,0,0,0);92 padding-bottom: 30px;93 }94 .handle {95 width: 160px; height: 14px; background: #BDBDBD; border-radius: 7px;96 margin: 20px auto 24px;97 }98 .sheet-section { margin: 0 24px 24px 24px; background: #f2f2f2; border-radius: 24px; overflow: hidden; }99 .sheet-item {100 display: flex; align-items: center; justify-content: flex-start;101 padding: 28px; gap: 28px; font-size: 40px; color: #222; background: #f2f2f2;102 border-bottom: 1px solid #e7e7e7;103 }104 .sheet-item:last-child { border-bottom: none; }105 .sheet-icon { width: 60px; height: 60px; display: flex; align-items: center; justify-content: center; }106 .danger { color: #d23a3a; }107 .danger-row {108 margin: 18px 24px 0 24px; background: #ffffff; border-radius: 24px; border: 1px solid #f1f1f1;109 overflow: hidden;110 }111 .danger-item {112 display: flex; align-items: center; gap: 28px; padding: 28px; font-size: 40px; color: #d23a3a;113 }114 115 /* Gesture bar */116 .gesture-bar {117 position: absolute; left: 50%; transform: translateX(-50%);118 bottom: 20px; width: 320px; height: 16px; background: #777; border-radius: 8px;119 }120 121 /* Utility avatar placeholder */122 .avatar-placeholder {123 width: 80px; height: 80px; border-radius: 50%;124 background: #E0E0E0; border: 1px solid #BDBDBD;125 display: flex; align-items: center; justify-content: center;126 color: #757575; font-size: 26px;127 }128</style>129</head>130<body>131<div id="render-target">132 133 <!-- Status Bar -->134 <div class="status-bar">135 <div class="status-left">136 <div>3:12</div>137 <svg class="status-icon" viewBox="0 0 24 24">138 <path d="M12 2l3 6H9l3-6zm0 10a4 4 0 100 8 4 4 0 000-8z" fill="#666"/>139 </svg>140 </div>141 <div class="status-right">142 <svg class="status-icon" viewBox="0 0 24 24">143 <path d="M12 2a8 8 0 018 8h-3a5 5 0 00-10 0H4a8 8 0 018-8z" fill="#666"/>144 </svg>145 <svg class="status-icon" viewBox="0 0 24 24">146 <rect x="8" y="2" width="8" height="20" rx="2" fill="#666"/>147 </svg>148 </div>149 </div>150 151 <!-- Header -->152 <div class="header">153 <div class="back-btn">154 <svg width="44" height="44" viewBox="0 0 24 24">155 <path d="M15 18l-6-6 6-6" stroke="#333" stroke-width="2" fill="none" stroke-linecap="round" stroke-linejoin="round"/>156 </svg>157 </div>158 <div class="avatar">RW</div>159 <div class="title">160 <div class="name">Richard Wagner</div>161 <div class="status-row">162 <span class="green-dot"></span>163 <span class="status-text">Active now</span>164 </div>165 </div>166 <div class="header-actions">167 <div class="icon-btn">168 <svg width="48" height="48" viewBox="0 0 24 24">169 <rect x="3" y="5" width="18" height="14" rx="2" stroke="#333" stroke-width="2" fill="none"/>170 <path d="M16 10l5-3v10l-5-3" fill="#333"/>171 </svg>172 </div>173 <div class="icon-btn">174 <svg width="48" height="48" viewBox="0 0 24 24">175 <path d="M6 2h5l3 5-4 3 3 5-4 3L6 22l-2-4 3-3-3-3 2-4z" fill="#333"/>176 </svg>177 </div>178 </div>179 </div>180 181 <!-- Conversation -->182 <div class="chat">183 <div class="day-sep">184 <div class="line"></div>185 <div>Yesterday</div>186 <div class="line"></div>187 </div>188 189 <!-- Right outgoing bubble -->190 <div class="msg-row">191 <div class="msg-time" style="margin-left:auto;">4:37 PM</div>192 </div>193 <div class="msg-row">194 <div class="msg-bubble outgoing">Hii Richard</div>195 </div>196 197 <div class="day-sep" style="margin-top: 40px;">198 <div class="line"></div>199 <div>Today</div>200 <div class="line"></div>201 </div>202 203 <!-- Incoming message -->204 <div class="msg-row">205 <div class="msg-avatar avatar-placeholder">RW</div>206 <div style="font-size:30px; color:#666; margin-bottom: 8px;">Richard, 7:30 AM</div>207 </div>208 <div class="msg-row">209 <div class="msg-avatar avatar-placeholder">RW</div>210 <div class="msg-bubble incoming">Hi Natalie</div>211 <div class="emoji">:)</div>212 </div>213 214 <!-- Another incoming -->215 <div class="msg-row" style="margin-top: 22px;">216 <div class="msg-avatar avatar-placeholder">RW</div>217 <div style="font-size:30px; color:#666; margin-bottom: 8px;">Richard, 7:42 AM</div>218 </div>219 <div class="msg-row">220 <div class="msg-avatar avatar-placeholder">RW</div>221 <div class="msg-bubble incoming">Hi Natalie</div>222 <div class="emoji">:)</div>223 </div>224 225 <!-- Outgoing latest -->226 <div class="msg-row" style="margin-top: 60px;">227 <div class="msg-time" style="margin-left:auto;">8:14 AM</div>228 </div>229 <div class="msg-row">230 <div class="msg-bubble outgoing" style="margin-left:auto;">How are you doing?</div>231 </div>232 </div>233 234 <!-- Dimmed overlay -->235 <div class="overlay"></div>236 237 <!-- Bottom Sheet -->238 <div class="sheet">239 <div class="handle"></div>240 241 <div class="sheet-section">242 <div class="sheet-item">243 <div class="sheet-icon">244 <svg width="44" height="44" viewBox="0 0 24 24">245 <path d="M4 20l4-4h8v-8H8l-4-4v16z" stroke="#333" stroke-width="2" fill="none" stroke-linejoin="round"/>246 </svg>247 </div>248 <div>Edit</div>249 </div>250 <div class="sheet-item">251 <div class="sheet-icon">252 <svg width="44" height="44" viewBox="0 0 24 24">253 <path d="M15 6l-6 6 6 6" stroke="#333" stroke-width="2" fill="none" stroke-linecap="round" stroke-linejoin="round"/>254 </svg>255 </div>256 <div>Reply</div>257 </div>258 <div class="sheet-item">259 <div class="sheet-icon">260 <svg width="44" height="44" viewBox="0 0 24 24">261 <path d="M9 6l6 6-6 6" stroke="#333" stroke-width="2" fill="none" stroke-linecap="round" stroke-linejoin="round"/>262 </svg>263 </div>264 <div>Forward</div>265 </div>266 </div>267 268 <div class="sheet-section">269 <div class="sheet-item">270 <div class="sheet-icon">271 <svg width="44" height="44" viewBox="0 0 24 24">272 <rect x="6" y="3" width="12" height="18" rx="2" stroke="#333" stroke-width="2" fill="none"/>273 <path d="M9 7h6M9 11h6M9 15h6" stroke="#333" stroke-width="2"/>274 </svg>275 </div>276 <div>Copy</div>277 </div>278 <div class="sheet-item">279 <div class="sheet-icon">280 <svg width="44" height="44" viewBox="0 0 24 24">281 <path d="M7 17h10M6 7h12M8 12h8" stroke="#333" stroke-width="2"/>282 <text x="4" y="9" font-size="6" fill="#333">aあ</text>283 </svg>284 </div>285 <div>Translate</div>286 </div>287 <div class="sheet-item">288 <div class="sheet-icon">289 <svg width="44" height="44" viewBox="0 0 24 24">290 <path d="M6 4h12v16l-6-4-6 4V4z" stroke="#333" stroke-width="2" fill="none"/>291 </svg>292 </div>293 <div>Add bookmark</div>294 </div>295 <div class="sheet-item">296 <div class="sheet-icon">297 <svg width="44" height="44" viewBox="0 0 24 24">298 <circle cx="12" cy="12" r="9" stroke="#333" stroke-width="2" fill="none"/>299 <path d="M9 12l2 2 4-4" stroke="#333" stroke-width="2" fill="none" stroke-linecap="round"/>300 </svg>301 </div>302 <div>Select Messages</div>303 </div>304 </div>305 306 <div class="danger-row">307 <div class="danger-item">308 <div class="sheet-icon">309 <svg width="44" height="44" viewBox="0 0 24 24">310 <path d="M4 7h16l-1 12H5L4 7z" fill="none" stroke="#d23a3a" stroke-width="2"/>311 <path d="M10 3h4l1 4H9l1-4z" fill="#d23a3a"/>312 </svg>313 </div>314 <div class="danger">Remove</div>315 </div>316 </div>317 </div>318 319 <!-- Gesture bar -->320 <div class="gesture-bar"></div>321</div>322</body>323</html>