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 Mock</title>7<style>8 body { margin: 0; padding: 0; background: transparent; font-family: "Segoe UI", Roboto, Helvetica, Arial, sans-serif; }9 #render-target {10 position: relative;11 width: 1080px;12 height: 2400px;13 overflow: hidden;14 background: #ffffff;15 }16 17 /* Top bars */18 .status-bar {19 height: 90px;20 background: #0C84A6;21 color: #fff;22 display: flex;23 align-items: center;24 padding: 0 36px;25 font-size: 36px;26 letter-spacing: 0.5px;27 }28 .status-left { flex: 1; }29 .status-right { display: flex; gap: 26px; align-items: center; }30 .app-bar {31 height: 160px;32 background: #0C84A6;33 color: #fff;34 display: flex;35 align-items: center;36 padding: 0 24px;37 }38 .app-bar .back {39 width: 96px;40 height: 96px;41 display: flex;42 align-items: center;43 justify-content: center;44 }45 .app-bar .title {46 font-size: 48px;47 font-weight: 600;48 margin-left: 8px;49 display: flex;50 align-items: center;51 }52 .presence-dot {53 width: 22px;54 height: 22px;55 border-radius: 50%;56 border: 3px solid #fff;57 margin-left: 12px;58 opacity: 0.9;59 }60 .app-actions {61 margin-left: auto;62 display: flex;63 gap: 26px;64 align-items: center;65 padding-right: 12px;66 }67 68 /* Chat body */69 .chat-area {70 height: 1100px;71 background: #ffffff;72 padding: 24px;73 box-sizing: border-box;74 }75 .bubble {76 max-width: 860px;77 padding: 28px 32px 22px 32px;78 border-radius: 20px;79 margin: 12px 0;80 box-shadow: 0 2px 6px rgba(0,0,0,0.06);81 position: relative;82 }83 .bubble.outgoing {84 background: #DFF3FA;85 color: #1b1b1b;86 margin-left: 24px;87 }88 .bubble p {89 margin: 0;90 font-size: 40px;91 line-height: 56px;92 }93 .bubble .meta {94 position: absolute;95 right: 20px;96 bottom: 10px;97 font-size: 30px;98 color: #7b8b94;99 display: flex;100 align-items: center;101 gap: 10px;102 }103 104 /* Quick replies */105 .quick-replies {106 height: 120px;107 display: flex;108 align-items: center;109 gap: 24px;110 padding: 0 24px;111 box-sizing: border-box;112 background: #ffffff;113 }114 .chip {115 padding: 18px 28px;116 border: 3px solid #0C84A6;117 border-radius: 40px;118 color: #0C84A6;119 font-size: 34px;120 white-space: nowrap;121 }122 123 /* Input row */124 .input-row {125 height: 120px;126 display: flex;127 align-items: center;128 padding: 0 24px 0 24px;129 box-sizing: border-box;130 gap: 18px;131 background: #ffffff;132 }133 .input-field {134 flex: 1;135 height: 92px;136 background: #F2F3F5;137 border-radius: 46px;138 display: flex;139 align-items: center;140 padding: 0 24px;141 box-sizing: border-box;142 color: #777;143 font-size: 36px;144 }145 .input-field .attach {146 width: 56px;147 height: 56px;148 margin-right: 16px;149 display: flex;150 align-items: center;151 justify-content: center;152 color: #7b8b94;153 }154 .camera-btn {155 width: 96px;156 height: 96px;157 border-radius: 50%;158 background: #0C84A6;159 display: flex;160 align-items: center;161 justify-content: center;162 }163 164 /* Keyboard mock */165 .keyboard {166 height: 810px;167 background: #171717;168 padding: 24px 18px 70px 18px;169 box-sizing: border-box;170 color: #eaeaea;171 }172 .key-row {173 display: flex;174 justify-content: space-between;175 margin-bottom: 26px;176 padding: 0 18px;177 }178 .key {179 width: 86px;180 height: 100px;181 background: #2a2a2a;182 border-radius: 18px;183 display: flex;184 align-items: center;185 justify-content: center;186 font-size: 40px;187 box-shadow: inset 0 -2px 0 rgba(255,255,255,0.05);188 }189 .key.small {190 width: 140px;191 }192 .key.wide {193 flex: 1;194 height: 100px;195 margin: 0 14px;196 }197 .key.icon {198 width: 140px;199 }200 .gesture-pill {201 position: absolute;202 bottom: 18px;203 left: 50%;204 transform: translateX(-50%);205 width: 320px;206 height: 10px;207 background: #ffffff;208 border-radius: 10px;209 opacity: 0.92;210 }211</style>212</head>213<body>214<div id="render-target">215 216 <!-- Status Bar -->217 <div class="status-bar">218 <div class="status-left">8:19</div>219 <div class="status-right">220 <!-- simple lock icon -->221 <svg width="36" height="36" viewBox="0 0 24 24" fill="none">222 <rect x="6" y="10" width="12" height="9" rx="2" fill="#ffffff" opacity="0.9"></rect>223 <path d="M8 10V8a4 4 0 118 0v2" stroke="#ffffff" stroke-width="2" stroke-linecap="round"></path>224 </svg>225 <!-- wifi -->226 <svg width="36" height="36" viewBox="0 0 24 24" fill="none">227 <path d="M2 8c5-4 15-4 20 0" stroke="#fff" stroke-width="2" stroke-linecap="round" opacity="0.9"/>228 <path d="M5 12c3-3 11-3 14 0" stroke="#fff" stroke-width="2" stroke-linecap="round" opacity="0.9"/>229 <path d="M9 16c2-2 4-2 6 0" stroke="#fff" stroke-width="2" stroke-linecap="round" opacity="0.9"/>230 <circle cx="12" cy="19" r="1.5" fill="#fff"/>231 </svg>232 <!-- battery -->233 <svg width="36" height="36" viewBox="0 0 24 24" fill="none">234 <rect x="3" y="6" width="16" height="12" rx="2" stroke="#fff" stroke-width="2"></rect>235 <rect x="5" y="8" width="12" height="8" rx="1" fill="#fff"></rect>236 <rect x="19" y="10" width="2" height="8" rx="1" fill="#fff"></rect>237 </svg>238 </div>239 </div>240 241 <!-- App Bar -->242 <div class="app-bar">243 <div class="back">244 <svg width="48" height="48" viewBox="0 0 24 24" fill="none">245 <path d="M15 18l-6-6 6-6" stroke="#ffffff" stroke-width="2.5" stroke-linecap="round" stroke-linejoin="round"></path>246 </svg>247 </div>248 <div class="title">achi.gupta<div class="presence-dot"></div></div>249 <div class="app-actions">250 <!-- info circle -->251 <svg width="48" height="48" viewBox="0 0 24 24" fill="none">252 <circle cx="12" cy="12" r="10" stroke="#ffffff" stroke-width="2"></circle>253 <circle cx="12" cy="8" r="1.5" fill="#ffffff"></circle>254 <rect x="11" y="11" width="2" height="6" rx="1" fill="#ffffff"></rect>255 </svg>256 <!-- kebab menu -->257 <svg width="48" height="48" viewBox="0 0 24 24" fill="none">258 <circle cx="12" cy="5.5" r="2" fill="#ffffff"></circle>259 <circle cx="12" cy="12" r="2" fill="#ffffff"></circle>260 <circle cx="12" cy="18.5" r="2" fill="#ffffff"></circle>261 </svg>262 </div>263 </div>264 265 <!-- Chat Area -->266 <div class="chat-area">267 <div class="bubble outgoing">268 <p>Can we make a deal of 4500 rupees of the product?</p>269 <div class="meta">Now270 <svg width="26" height="26" viewBox="0 0 24 24" fill="none">271 <path d="M5 13l3 3 11-11" stroke="#7b8b94" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"></path>272 </svg>273 </div>274 </div>275 </div>276 277 <!-- Quick Replies -->278 <div class="quick-replies">279 <div class="chip">Is it available?</div>280 <div class="chip">Is the price negotiable?</div>281 <div class="chip">How old is it?</div>282 </div>283 284 <!-- Input Row -->285 <div class="input-row">286 <div class="input-field">287 <div class="attach">288 <svg width="40" height="40" viewBox="0 0 24 24" fill="none">289 <path d="M7 13l6-6a4 4 0 115 5l-7 7a5 5 0 11-7-7l6-6" stroke="#7b8b94" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"></path>290 </svg>291 </div>292 <div>Type your message here</div>293 </div>294 <div class="camera-btn">295 <svg width="46" height="46" viewBox="0 0 24 24" fill="none">296 <rect x="4" y="7" width="16" height="12" rx="2" stroke="#ffffff" stroke-width="2"></rect>297 <circle cx="12" cy="13" r="4" stroke="#ffffff" stroke-width="2"></circle>298 <path d="M8 7l2-2h4l2 2" stroke="#ffffff" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"></path>299 </svg>300 </div>301 </div>302 303 <!-- Keyboard Mock -->304 <div class="keyboard">305 <div class="key-row">306 <div class="key">Q</div><div class="key">W</div><div class="key">E</div><div class="key">R</div><div class="key">T</div><div class="key">Y</div><div class="key">U</div><div class="key">I</div><div class="key">O</div><div class="key">P</div>307 </div>308 <div class="key-row" style="padding: 0 60px;">309 <div class="key">A</div><div class="key">S</div><div class="key">D</div><div class="key">F</div><div class="key">G</div><div class="key">H</div><div class="key">J</div><div class="key">K</div><div class="key">L</div>310 </div>311 <div class="key-row" style="padding: 0 130px;">312 <div class="key">Z</div><div class="key">X</div><div class="key">C</div><div class="key">V</div><div class="key">B</div><div class="key">N</div><div class="key">M</div>313 <div class="key icon">314 <svg width="40" height="40" viewBox="0 0 24 24" fill="none">315 <path d="M5 10l7 7 7-7" stroke="#eaeaea" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"></path>316 </svg>317 </div>318 </div>319 <div class="key-row">320 <div class="key small">?123</div>321 <div class="key small">,</div>322 <div class="key small">323 <svg width="36" height="36" viewBox="0 0 24 24" fill="none">324 <circle cx="12" cy="12" r="10" stroke="#eaeaea" stroke-width="2"></circle>325 <circle cx="12" cy="9" r="2" fill="#eaeaea"></circle>326 <rect x="11" y="12" width="2" height="6" rx="1" fill="#eaeaea"></rect>327 </svg>328 </div>329 <div class="key wide">SPACE</div>330 <div class="key">.</div>331 <div class="key icon">332 <svg width="40" height="40" viewBox="0 0 24 24" fill="none">333 <path d="M4 7h16M4 12h16M4 17h10" stroke="#eaeaea" stroke-width="2" stroke-linecap="round"></path>334 </svg>335 </div>336 <div class="key icon" style="background:#7BC4DD;color:#0C84A6;">337 <svg width="40" height="40" viewBox="0 0 24 24" fill="none">338 <path d="M5 12h10l-3-3m3 3l-3 3" stroke="#0C84A6" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"></path>339 </svg>340 </div>341 </div>342 <div class="gesture-pill"></div>343 </div>344 345</div>346</body>347</html>