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; }9 #render-target {10 width:1080px; height:2400px;11 position:relative; overflow:hidden;12 background:#ffffff;13 font-family: Arial, Helvetica, sans-serif;14 color:#222;15 }16 17 /* Top status bar */18 .status-bar {19 height:90px;20 background:#0a607b;21 color:#fff;22 display:flex;23 align-items:center;24 justify-content:space-between;25 padding:0 32px;26 box-sizing:border-box;27 }28 .status-left { display:flex; align-items:center; gap:12px; font-weight:600; font-size:34px; }29 .status-right { display:flex; align-items:center; gap:24px; }30 .status-icon svg { width:38px; height:38px; fill:none; stroke:#fff; stroke-width:4; }31 32 /* App bar */33 .appbar {34 height:150px;35 background:#0b7fb0;36 color:#fff;37 display:flex;38 align-items:center;39 padding:0 32px;40 box-sizing:border-box;41 }42 .back-btn {43 width:80px; height:80px; display:flex; align-items:center; justify-content:center;44 }45 .back-btn svg { width:54px; height:54px; stroke:#fff; stroke-width:7; fill:none; }46 .title-area {47 flex:1; display:flex; align-items:center; gap:18px;48 font-size:54px; font-weight:700;49 }50 .presence-dot {51 width:22px; height:22px; background:#e6e6e6; border-radius:50%;52 box-shadow:0 0 0 4px rgba(255,255,255,0.3) inset;53 }54 .info-btn {55 width:72px; height:72px; border-radius:50%;56 border:3px solid #ffffff; display:flex; align-items:center; justify-content:center;57 }58 .info-btn svg { width:40px; height:40px; fill:none; stroke:#fff; stroke-width:6; }59 60 /* Chat area */61 .chat-area {62 background:#fff;63 height:958px; /* remaining space above suggestions/input/keyboard */64 }65 66 /* Suggestions chips */67 .suggestions {68 height:140px; display:flex; align-items:center; gap:28px;69 padding:0 28px;70 box-sizing:border-box;71 }72 .chip {73 border:3px solid #0b7fb0; color:#0b7fb0;74 border-radius:44px; padding:22px 32px; font-size:38px; font-weight:600;75 white-space:nowrap;76 }77 78 /* Input bar above keyboard */79 .input-bar {80 height:160px; display:flex; align-items:center;81 padding:0 28px; gap:22px; box-sizing:border-box;82 background:#ffffff;83 }84 .attach {85 width:60px; height:60px; display:flex; align-items:center; justify-content:center;86 }87 .attach svg { width:46px; height:46px; stroke:#7a7a7a; fill:none; stroke-width:6; }88 .input-field {89 flex:1; height:120px; border-radius:60px; background:#f2f2f2;90 display:flex; align-items:center; padding:0 40px; box-sizing:border-box;91 color:#777; font-size:42px;92 border:2px solid #e0e0e0;93 }94 .camera-btn {95 width:120px; height:120px; border-radius:60px; background:#0b7fb0;96 display:flex; align-items:center; justify-content:center;97 }98 .camera-btn svg { width:64px; height:64px; fill:none; stroke:#fff; stroke-width:6; }99 100 /* Keyboard mock */101 .keyboard {102 position:absolute; left:0; bottom:0;103 width:100%; height:900px; background:#111214; color:#fff;104 display:flex; flex-direction:column; box-sizing:border-box;105 border-top-left-radius:18px; border-top-right-radius:18px;106 }107 .kb-tools {108 height:120px; display:flex; align-items:center; justify-content:center; gap:34px;109 }110 .kb-tools .tool {111 width:80px; height:80px; background:#1e1f22; border-radius:16px;112 display:flex; align-items:center; justify-content:center;113 border:1px solid #2a2b2e;114 }115 .kb-tools svg { width:40px; height:40px; fill:none; stroke:#cfcfcf; stroke-width:5; }116 117 .kb-row { display:flex; justify-content:center; gap:18px; padding:0 28px; }118 .kb-row.row1 { height:150px; align-items:center; }119 .kb-row.row2 { height:150px; align-items:center; }120 .kb-row.row3 { height:150px; align-items:center; }121 .kb-row.row4 { height:160px; align-items:center; }122 .kb-key {123 min-width:90px; height:120px; background:#2b2d31; border-radius:22px;124 display:flex; align-items:center; justify-content:center;125 font-size:46px; font-weight:700; color:#f5f5f5;126 border:1px solid #3a3c40;127 }128 .kb-key.wide { min-width:160px; }129 .kb-space { flex:1; height:120px; }130 .kb-space .kb-key { width:100%; }131 .kb-key.light { background:#c9e8f7; color:#0a1a20; }132 .kb-key.blue { background:#bfe6ff; color:#0a1a20; }133 .home-indicator {134 height:60px; display:flex; align-items:center; justify-content:center;135 }136 .home-indicator .pill {137 width:220px; height:12px; border-radius:6px; background:#e6e6e6;138 }139</style>140</head>141<body>142<div id="render-target">143 144 <!-- Status bar -->145 <div class="status-bar">146 <div class="status-left">147 <div>8:07</div>148 <div class="status-icon">149 <!-- Lock icon -->150 <svg viewBox="0 0 24 24">151 <rect x="5" y="10" width="14" height="10" rx="2"></rect>152 <path d="M8 10V7a4 4 0 1 1 8 0v3"></path>153 </svg>154 </div>155 </div>156 <div class="status-right">157 <div class="status-icon">158 <!-- WiFi icon -->159 <svg viewBox="0 0 24 24">160 <path d="M2 8c9-6 11-6 20 0"></path>161 <path d="M5 12c6-4 8-4 14 0"></path>162 <path d="M8 16c3-2 5-2 8 0"></path>163 <circle cx="12" cy="19" r="1.5" fill="#fff" stroke="none"></circle>164 </svg>165 </div>166 <div class="status-icon">167 <!-- Battery icon -->168 <svg viewBox="0 0 24 24">169 <rect x="2" y="6" width="18" height="12" rx="2"></rect>170 <rect x="20" y="10" width="2" height="4"></rect>171 </svg>172 </div>173 </div>174 </div>175 176 <!-- App bar -->177 <div class="appbar">178 <div class="back-btn">179 <svg viewBox="0 0 24 24">180 <path d="M15 18l-6-6 6-6"></path>181 </svg>182 </div>183 <div class="title-area">184 <div>achi.gupta</div>185 <div class="presence-dot"></div>186 </div>187 <div class="info-btn">188 <svg viewBox="0 0 24 24">189 <circle cx="12" cy="12" r="9"></circle>190 <path d="M12 9v0"></path>191 <path d="M12 12v6"></path>192 </svg>193 </div>194 </div>195 196 <!-- Chat messages area (empty white space) -->197 <div class="chat-area"></div>198 199 <!-- Suggestions chips -->200 <div class="suggestions">201 <div class="chip">Is it available?</div>202 <div class="chip">Is the price negotiable?</div>203 <div class="chip">How old is it?</div>204 </div>205 206 <!-- Input bar -->207 <div class="input-bar">208 <div class="attach">209 <!-- Paperclip -->210 <svg viewBox="0 0 24 24">211 <path d="M7 13l7-7a4 4 0 1 1 6 6l-9 9a6 6 0 1 1 -8 -8l9-9"></path>212 </svg>213 </div>214 <div class="input-field">Type your message here</div>215 <div class="camera-btn">216 <!-- Camera icon -->217 <svg viewBox="0 0 24 24">218 <rect x="3" y="7" width="18" height="12" rx="2"></rect>219 <path d="M8 7l2-3h4l2 3"></path>220 <circle cx="12" cy="13" r="3.5"></circle>221 </svg>222 </div>223 </div>224 225 <!-- Keyboard mock -->226 <div class="keyboard">227 <div class="kb-tools">228 <div class="tool">229 <!-- grid icon -->230 <svg viewBox="0 0 24 24"><rect x="3" y="3" width="7" height="7"></rect><rect x="14" y="3" width="7" height="7"></rect><rect x="3" y="14" width="7" height="7"></rect><rect x="14" y="14" width="7" height="7"></rect></svg>231 </div>232 <div class="tool">233 <!-- smile icon -->234 <svg viewBox="0 0 24 24"><circle cx="12" cy="12" r="9"></circle><path d="M8 14c2 2 6 2 8 0"></path><circle cx="9" cy="10" r="1.3" stroke="none" fill="#cfcfcf"></circle><circle cx="15" cy="10" r="1.3" stroke="none" fill="#cfcfcf"></circle></svg>235 </div>236 <div class="tool">237 <!-- GIF text -->238 <svg viewBox="0 0 60 24">239 <text x="5" y="18" font-size="16" fill="#cfcfcf" font-family="Arial" font-weight="700">GIF</text>240 </svg>241 </div>242 <div class="tool">243 <!-- gear -->244 <svg viewBox="0 0 24 24"><circle cx="12" cy="12" r="3"></circle><path d="M4 12h3M17 12h3M12 4v3M12 17v3M6 6l2 2M16 16l2 2M16 6l2 2M6 16l2 2"></path></svg>245 </div>246 <div class="tool">247 <!-- translate -->248 <svg viewBox="0 0 24 24"><path d="M3 5h10v6H3z"></path><path d="M14 13h7v6h-7z"></path><path d="M8 7h0M17 16h0" stroke-linecap="round"></path></svg>249 </div>250 <div class="tool">251 <!-- palette -->252 <svg viewBox="0 0 24 24"><path d="M12 3a9 9 0 1 0 0 18c3 0 3-2 2.5-3.5S18 16 19 16c1-1-1-6-7-6"></path></svg>253 </div>254 </div>255 256 <div class="kb-row row1">257 <div class="kb-key">Q</div><div class="kb-key">W</div><div class="kb-key">E</div><div class="kb-key">R</div>258 <div class="kb-key">T</div><div class="kb-key">Y</div><div class="kb-key">U</div><div class="kb-key">I</div>259 <div class="kb-key">O</div><div class="kb-key">P</div>260 </div>261 <div class="kb-row row2">262 <div class="kb-key">A</div><div class="kb-key">S</div><div class="kb-key">D</div><div class="kb-key">F</div>263 <div class="kb-key">G</div><div class="kb-key">H</div><div class="kb-key">J</div><div class="kb-key">K</div>264 <div class="kb-key">L</div>265 </div>266 <div class="kb-row row3">267 <div class="kb-key">Z</div><div class="kb-key">X</div><div class="kb-key">C</div><div class="kb-key">V</div>268 <div class="kb-key">B</div><div class="kb-key">N</div><div class="kb-key">M</div>269 <div class="kb-key wide">⌫</div>270 </div>271 <div class="kb-row row4">272 <div class="kb-key blue">?123</div>273 <div class="kb-key">,</div>274 <div class="kb-key">😊</div>275 <div class="kb-space"><div class="kb-key">SPACE</div></div>276 <div class="kb-key">.</div>277 <div class="kb-key blue">↵</div>278 </div>279 280 <div class="home-indicator"><div class="pill"></div></div>281 </div>282 283</div>284</body>285</html>