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: Arial, Helvetica, sans-serif; }9 #render-target {10 width: 1080px; height: 2400px;11 position: relative; overflow: hidden;12 background: #ffffff; border-radius: 28px; box-shadow: 0 6px 24px rgba(0,0,0,0.12);13 color: #222;14 }15 16 /* Status bar */17 .status-bar {18 height: 90px; padding: 0 36px;19 display: flex; align-items: center; justify-content: space-between;20 color: #454545; font-weight: 600; font-size: 36px;21 }22 .status-left { display: flex; align-items: center; gap: 20px; }23 .status-right { display: flex; align-items: center; gap: 18px; font-size: 32px; }24 .status-icon {25 width: 26px; height: 26px; border-radius: 50%; background: #bfbfbf;26 }27 28 /* Header */29 .chat-header {30 height: 130px; padding: 0 24px;31 display: flex; align-items: center; gap: 24px; border-bottom: 1px solid #eee;32 }33 .back-btn { width: 64px; height: 64px; border: none; background: none; padding: 0; }34 .avatar {35 width: 72px; height: 72px; border-radius: 50%;36 background: #E0E0E0; border: 1px solid #BDBDBD;37 display: flex; align-items: center; justify-content: center; color: #757575; font-size: 22px;38 }39 .title { font-size: 46px; font-weight: 700; flex: 1; }40 .header-actions { display: flex; align-items: center; gap: 18px; }41 .circle-btn {42 width: 72px; height: 72px; border-radius: 50%; background: #f3f3f3; border: 1px solid #ddd;43 display: flex; align-items: center; justify-content: center;44 }45 .circle-btn svg { width: 40px; height: 40px; fill: #333; }46 47 /* Notification bar */48 .notif-bar {49 height: 80px; display: flex; align-items: center; padding: 0 28px;50 color: #7a7a7a; font-size: 30px; background: #fafafa; border-bottom: 1px solid #eee;51 }52 .notif-bar a { color: #1E88E5; text-decoration: none; margin-left: 6px; }53 54 /* Chat content */55 .chat-content { position: absolute; left: 0; right: 0; top: 300px; bottom: 1230px; overflow: hidden; }56 .chat-scroll { height: 100%; overflow: auto; padding: 18px 28px 0; }57 .day-label {58 text-align: center; color: #9e9e9e; font-size: 30px; margin: 24px 0;59 letter-spacing: 2px;60 }61 62 .thread { position: relative; }63 .me-tag {64 position: absolute; left: 10px; top: 0; color: #e53935; font-weight: 700; font-size: 26px;65 }66 .thread-line {67 position: absolute; left: 24px; top: 30px; bottom: 0; width: 6px; background: #ff4c4c; border-radius: 3px;68 }69 70 .bubble {71 margin-left: 60px; margin-right: 120px;72 background: #ffffff; border: 1px solid #e6e6e6; border-radius: 24px;73 box-shadow: 0 3px 8px rgba(0,0,0,0.06);74 padding: 18px 24px; margin-bottom: 24px; position: relative;75 }76 .bubble:before {77 content: ""; position: absolute; left: 12px; top: 20px; bottom: 20px;78 width: 6px; background: #1E88E5; border-radius: 3px;79 }80 .sender { margin-left: 24px; font-size: 28px; font-weight: 700; color: #1E88E5; letter-spacing: 0.5px; }81 .msg { margin-left: 24px; font-size: 36px; margin-top: 6px; }82 .meta { margin-left: 24px; font-size: 26px; color: #9e9e9e; margin-top: 8px; }83 84 .me-text {85 margin-left: 62px; margin-top: 18px; font-size: 38px;86 }87 88 .image-post {89 margin-left: 60px; width: 720px; height: 560px;90 border-radius: 24px; background: #E0E0E0; border: 1px solid #BDBDBD;91 display: flex; align-items: center; justify-content: center; color: #757575; font-size: 32px;92 position: relative; margin-top: 20px;93 }94 .download-overlay {95 position: absolute; right: -70px; top: 220px;96 width: 84px; height: 84px; border-radius: 50%;97 background: #f2f2f2; border: 1px solid #d6d6d6;98 display: flex; align-items: center; justify-content: center;99 }100 .download-overlay svg { width: 44px; height: 44px; fill: #616161; }101 102 /* Composer */103 .composer {104 position: absolute; left: 0; right: 0; bottom: 1080px;105 height: 110px; padding: 16px 22px; background: #ffffff; border-top: 1px solid #eee;106 display: flex; align-items: center; gap: 16px;107 }108 .composer .cam {109 width: 72px; height: 72px; border-radius: 50%; background: #f4f4f4; border: 1px solid #ddd;110 display: flex; align-items: center; justify-content: center;111 }112 .composer .input {113 flex: 1; height: 72px; border-radius: 36px; background: #f7f7f7; border: 1px solid #e2e2e2;114 display: flex; align-items: center; padding: 0 26px; color: #9e9e9e; font-size: 32px;115 }116 .composer .tool {117 width: 60px; height: 60px; border-radius: 50%; background: #f4f4f4; border: 1px solid #ddd;118 display: flex; align-items: center; justify-content: center;119 }120 .composer .tool svg, .composer .cam svg { width: 34px; height: 34px; fill: #444; }121 122 /* Keyboard mock */123 .keyboard {124 position: absolute; left: 0; right: 0; bottom: 40px;125 height: 1040px; background: #14181c; border-top-left-radius: 28px; border-top-right-radius: 28px;126 color: #e6e6e6;127 }128 .kb-topbar {129 height: 110px; padding: 0 24px; display: flex; align-items: center; gap: 28px; color: #cfcfcf; font-size: 30px;130 }131 .kb-chip {132 padding: 12px 22px; background: #1c2126; border-radius: 22px; border: 1px solid #2b3138;133 }134 .keys { padding: 22px; display: grid; grid-template-columns: repeat(10, 1fr); gap: 14px; }135 .key {136 height: 120px; background: #23282d; border-radius: 18px; display: flex; align-items: center; justify-content: center;137 border: 1px solid #2e343b; font-size: 42px; color: #e6e6e6;138 }139 .key.small { font-size: 34px; }140 .space-row { padding: 12px 22px; display: grid; grid-template-columns: 1.2fr 4fr 1.2fr 1.2fr; gap: 14px; }141 .space { height: 120px; background: #23282d; border: 1px solid #2e343b; border-radius: 18px; display: flex; align-items: center; justify-content: center; font-size: 38px; color: #bfc6cc; }142 .send-btn {143 position: absolute; right: 22px; bottom: 140px; width: 120px; height: 120px; border-radius: 60px;144 background: #63f1c9; display: flex; align-items: center; justify-content: center;145 }146 .send-btn svg { width: 54px; height: 54px; fill: #0b3b30; }147 148 /* Gesture bar */149 .gesture {150 position: absolute; left: 0; right: 0; bottom: 0; height: 40px; display: flex; align-items: center; justify-content: center;151 }152 .gesture-line {153 width: 360px; height: 10px; background: #d8d8d8; border-radius: 10px;154 }155</style>156</head>157<body>158<div id="render-target">159 <!-- Status Bar -->160 <div class="status-bar">161 <div class="status-left">162 <div>8:47</div>163 <div class="status-icon"></div>164 <div class="status-icon"></div>165 <div class="status-icon"></div>166 <div class="status-icon"></div>167 <div class="status-icon"></div>168 </div>169 <div class="status-right">170 <div class="status-icon"></div>171 <div>42%</div>172 </div>173 </div>174 175 <!-- Header -->176 <div class="chat-header">177 <button class="back-btn" aria-label="Back">178 <svg viewBox="0 0 24 24">179 <path d="M15.5 4.5L7 12l8.5 7.5-2 2L3 12l10.5-9.5z"/>180 </svg>181 </button>182 <div class="avatar">[IMG: User Avatar]</div>183 <div class="title">Natalie Larson</div>184 <div class="header-actions">185 <div class="circle-btn" aria-label="Call">186 <svg viewBox="0 0 24 24">187 <path d="M6 2h4l2 5-3 2c1 2 3 4 5 5l2-3 5 2v4c0 1-1 2-2 2C10 19 5 14 4 6c0-1 1-2 2-2z"/>188 </svg>189 </div>190 <div class="circle-btn" aria-label="Video">191 <svg viewBox="0 0 24 24">192 <path d="M3 6h12v12H3zM21 8l-4 3v2l4 3z"/>193 </svg>194 </div>195 </div>196 </div>197 198 <!-- Notification -->199 <div class="notif-bar">200 <span>Don't miss Chats from Natalie!</span><a href="#">Enable Notifications</a>201 </div>202 203 <!-- Chat Content -->204 <div class="chat-content">205 <div class="chat-scroll">206 <div class="day-label">FRIDAY</div>207 208 <div class="thread">209 <div class="me-tag">ME</div>210 <div class="thread-line"></div>211 212 <div class="bubble">213 <div class="sender">NATALIE LARSON</div>214 <div class="msg">Hlo Richard</div>215 <div class="meta">Friday</div>216 </div>217 218 <div class="me-text">I'm good, What about you, Natalie?</div>219 220 <div class="image-post">[IMG: Potted Green Plant]221 <div class="download-overlay" aria-label="Download">222 <svg viewBox="0 0 24 24">223 <path d="M12 3v10l4-4 2 2-7 7-7-7 2-2 4 4V3h2z"/>224 </svg>225 </div>226 </div>227 </div>228 </div>229 </div>230 231 <!-- Composer -->232 <div class="composer">233 <div class="cam">234 <svg viewBox="0 0 24 24">235 <path d="M7 6l2-2h6l2 2h3v14H2V6h5zm5 3a5 5 0 100 10 5 5 0 000-10z"/>236 </svg>237 </div>238 <div class="input">Send a chat</div>239 <div class="tool" aria-label="Mic">240 <svg viewBox="0 0 24 24"><path d="M12 3a3 3 0 013 3v6a3 3 0 11-6 0V6a3 3 0 013-3zm-5 9h2a5 5 0 0010 0h2a7 7 0 01-6 6v3h-4v-3a7 7 0 01-6-6z"/></svg>241 </div>242 <div class="tool" aria-label="Emoji">243 <svg viewBox="0 0 24 24">244 <path d="M12 2a10 10 0 1010 10A10 10 0 0012 2zm-4 8a1.5 1.5 0 110-3 1.5 1.5 0 010 3zm8 0a1.5 1.5 0 110-3 1.5 1.5 0 010 3zm-8 6a6 6 0 008 0l-1.5-1.2a4 4 0 01-5 0z"/>245 </svg>246 </div>247 <div class="tool" aria-label="Cards">248 <svg viewBox="0 0 24 24"><path d="M3 6h13v12H3zM8 4h13v12H8z"/></svg>249 </div>250 <div class="tool" aria-label="Plus">251 <svg viewBox="0 0 24 24"><path d="M11 4h2v16h-2zM4 11h16v2H4z"/></svg>252 </div>253 </div>254 255 <!-- Keyboard -->256 <div class="keyboard">257 <div class="kb-topbar">258 <div class="kb-chip">GIF</div>259 <div class="kb-chip">⚙</div>260 <div class="kb-chip">Gᵀʳ</div>261 <div class="kb-chip">🎨</div>262 </div>263 264 <div class="keys">265 <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>266 </div>267 <div class="keys">268 <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><div class="key small">⌫</div>269 </div>270 <div class="keys">271 <div class="key small">⇧</div><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><div class="key small">.</div><div class="key small">↵</div>272 </div>273 <div class="space-row">274 <div class="space">?123</div>275 <div class="space">Space</div>276 <div class="space">,</div>277 <div class="space">🎙</div>278 </div>279 280 <div class="send-btn" aria-label="Send">281 <svg viewBox="0 0 24 24"><path d="M2 21l20-9L2 3l4 7 9 2-9 2-4 7z"/></svg>282 </div>283 </div>284 285 <!-- Gesture Bar -->286 <div class="gesture"><div class="gesture-line"></div></div>287</div>288</body>289</html>