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 - Dark</title>7<style>8 body { margin: 0; padding: 0; background: transparent; font-family: Roboto, Arial, sans-serif; }9 #render-target {10 position: relative;11 overflow: hidden;12 width: 1080px;13 height: 2400px;14 background: #0f2f2f;15 color: #e7f2f2;16 }17 18 /* Layout columns */19 .column { display: flex; flex-direction: column; height: 100%; }20 21 /* Status bar */22 .status-bar {23 height: 96px;24 padding: 0 36px;25 display: flex;26 align-items: center;27 justify-content: space-between;28 color: #e9f3f3;29 font-size: 36px;30 letter-spacing: 1px;31 }32 .status-right { display: flex; align-items: center; gap: 26px; opacity: 0.95; }33 .status-icon svg { width: 40px; height: 40px; fill: none; stroke: #e9f3f3; stroke-width: 3; }34 35 /* App header */36 .app-header {37 height: 180px;38 background: #0a3a39;39 display: flex;40 align-items: center;41 padding: 0 24px 0 12px;42 box-shadow: 0 2px 0 rgba(0,0,0,0.15) inset;43 }44 .back-btn { width: 100px; display: flex; justify-content: center; }45 .title-wrap {46 display: flex;47 align-items: center;48 gap: 22px;49 flex: 1;50 }51 .avatar {52 width: 100px; height: 100px; border-radius: 50%;53 background: #7d3cff; display: grid; place-items: center;54 font-weight: 700; font-size: 54px;55 position: relative;56 }57 .avatar .dot {58 position: absolute; right: 2px; bottom: 6px;59 width: 18px; height: 18px; border-radius: 50%;60 background: #0f2f2f; border: 4px solid #9ad0c8;61 }62 .title {63 display: flex; flex-direction: column;64 }65 .title .name { font-size: 48px; font-weight: 600; letter-spacing: 0.2px; }66 .header-actions { display: flex; gap: 26px; }67 .icon-btn svg { width: 56px; height: 56px; stroke: #e9f3f3; fill: none; stroke-width: 3.5; }68 69 /* Chat area */70 .chat-area {71 flex: 1;72 overflow: hidden;73 display: flex;74 flex-direction: column;75 }76 .messages {77 flex: 1;78 overflow: hidden;79 padding: 36px 36px 0 36px;80 }81 .timestamp {82 color: #86aaaa;83 font-size: 26px;84 }85 .day-divider {86 text-align: center;87 margin: 40px 0 20px;88 color: #8fb3b3;89 font-size: 30px;90 }91 /* Bubbles */92 .row { display: flex; margin: 18px 0; }93 .left { justify-content: flex-start; }94 .right { justify-content: flex-end; }95 .bubble {96 max-width: 70%;97 padding: 26px 32px;98 font-size: 40px;99 line-height: 1.25;100 border-radius: 28px;101 }102 .bubble.right {103 background: #0e5646;104 border-bottom-right-radius: 12px;105 }106 .bubble.left {107 background: #283738;108 border-bottom-left-radius: 12px;109 }110 .meta {111 display: flex;112 align-items: center;113 gap: 18px;114 margin: 14px 0 8px 0;115 }116 .meta .mini-avatar {117 width: 80px; height: 80px; border-radius: 50%;118 background: #7d3cff; color: #fff; display: grid; place-items: center; font-weight: 700; font-size: 40px;119 }120 .meta .who { color: #9ec3c3; font-size: 28px; }121 122 /* Composer */123 .composer-wrap {124 padding: 18px 20px 18px 20px;125 display: flex; align-items: center; gap: 18px;126 background: linear-gradient(to bottom, rgba(0,0,0,0) 0%, rgba(0,0,0,0.12) 100%);127 }128 .circle-btn {129 width: 92px; height: 92px; border-radius: 50%;130 background: #1f8f74; display: grid; place-items: center;131 }132 .circle-btn.light { background: #2ad0a4; }133 .input-pill {134 flex: 1;135 display: flex; align-items: center; gap: 18px;136 border: 2px solid rgba(180,220,220,0.35);137 padding: 18px 24px;138 border-radius: 48px;139 color: #d9efef;140 background: rgba(255,255,255,0.04);141 }142 .input-text { font-size: 40px; color: #d9efef; flex: 1; }143 .emoji-btn svg { width: 48px; height: 48px; stroke: #d9efef; }144 .send-btn {145 width: 96px; height: 96px; border-radius: 50%;146 background: #2ad0a4; display: grid; place-items: center;147 }148 .send-btn svg { width: 52px; height: 52px; fill: #0f2f2f; }149 150 /* Keyboard */151 .keyboard {152 height: 760px;153 background: #1b2627;154 padding: 18px 18px 26px;155 box-shadow: 0 -2px 0 rgba(0,0,0,0.25) inset;156 }157 .key-row {158 display: flex; justify-content: center; gap: 12px;159 margin: 12px 0;160 }161 .key {162 height: 120px; min-width: 84px; padding: 0 20px;163 border-radius: 18px;164 background: #2a3334; color: #e6ebeb; display: grid; place-items: center;165 font-size: 46px; box-shadow: 0 2px 0 rgba(0,0,0,0.25);166 }167 .key.wide { min-width: 140px; }168 .space { flex: 1; min-width: 420px; }169 .enter { background: #2ad0a4; color: #0f2f2f; font-weight: 700; }170 .bottom-row { align-items: center; }171 .comma, .period { min-width: 100px; }172</style>173</head>174<body>175<div id="render-target">176 <div class="column">177 178 <!-- Status Bar -->179 <div class="status-bar">180 <div class="status-left">11:01</div>181 <div class="status-right">182 <div class="status-icon">183 <svg viewBox="0 0 24 24"><path d="M2 18h3M2 14h7M2 10h11M2 6h15" /></svg>184 </div>185 <div class="status-icon">186 <svg viewBox="0 0 24 24"><path d="M3 10a9 9 0 0 1 18 0" /><path d="M6 10a6 6 0 0 1 12 0" /><circle cx="12" cy="17" r="2"/></svg>187 </div>188 <div class="status-icon">189 <svg viewBox="0 0 24 24"><rect x="2" y="7" width="16" height="10" rx="2"/><path d="M18 9l4-2v10l-4-2z"/></svg>190 </div>191 <div class="status-icon">192 <svg viewBox="0 0 24 24"><rect x="3" y="6" width="18" height="12" rx="3"/><rect x="5" y="8" width="14" height="8" rx="2" fill="#e9f3f3"/></svg>193 </div>194 </div>195 </div>196 197 <!-- App Header -->198 <div class="app-header">199 <div class="back-btn">200 <svg viewBox="0 0 24 24" width="64" height="64" stroke="#e9f3f3" stroke-width="3.5" fill="none" stroke-linecap="round" stroke-linejoin="round">201 <path d="M15 6L9 12l6 6"/>202 </svg>203 </div>204 <div class="title-wrap">205 <div class="avatar">A<span class="dot"></span></div>206 <div class="title">207 <div class="name">Amelia miller</div>208 </div>209 </div>210 <div class="header-actions">211 <div class="icon-btn">212 <svg viewBox="0 0 24 24"><path d="M22 16l-5-5M3 21l6-2 9-9a3 3 0 0 0-4-4l-9 9-2 6z"/></svg>213 </div>214 <div class="icon-btn">215 <svg viewBox="0 0 24 24"><rect x="3" y="6" width="13" height="10" rx="2"/><path d="M16 9l5-3v12l-5-3z"/></svg>216 </div>217 <div class="icon-btn">218 <svg viewBox="0 0 24 24" fill="#e9f3f3" stroke="none">219 <circle cx="12" cy="5" r="2.2"/><circle cx="12" cy="12" r="2.2"/><circle cx="12" cy="19" r="2.2"/>220 </svg>221 </div>222 </div>223 </div>224 225 <!-- Chat Area -->226 <div class="chat-area">227 <div class="messages">228 229 <!-- Right timestamp and bubble -->230 <div class="row right">231 <div class="timestamp">9:27 AM</div>232 </div>233 <div class="row right">234 <div class="bubble right">Hi Amelia</div>235 </div>236 237 <div class="day-divider">Today</div>238 239 <!-- Left meta and bubble -->240 <div class="meta">241 <div class="mini-avatar">A</div>242 <div class="who">Amelia miller 9:49 AM</div>243 </div>244 <div class="row left">245 <div class="bubble left">Hello Richard</div>246 </div>247 248 </div>249 250 <!-- Composer -->251 <div class="composer-wrap">252 <div class="circle-btn">253 <svg viewBox="0 0 24 24" width="44" height="44" stroke="#0f2f2f" stroke-width="3" fill="none" stroke-linecap="round">254 <path d="M12 5v14M5 12h14"/>255 </svg>256 </div>257 <div class="input-pill">258 <div class="input-text">How are you, Amelia?</div>259 <div class="emoji-btn">260 <svg viewBox="0 0 24 24" fill="none" stroke-width="2.2" stroke-linecap="round" stroke-linejoin="round">261 <circle cx="12" cy="12" r="9" stroke="#d9efef"/>262 <path d="M8 15c1 .8 2.5 1.2 4 1.2s3-.4 4-1.2" stroke="#d9efef"/>263 <circle cx="9" cy="10" r="1" fill="#d9efef"/>264 <circle cx="15" cy="10" r="1" fill="#d9efef"/>265 </svg>266 </div>267 </div>268 <div class="send-btn">269 <svg viewBox="0 0 24 24">270 <path d="M2 21l20-9-20-9 5 9-5 9z"/>271 </svg>272 </div>273 </div>274 275 <!-- Keyboard -->276 <div class="keyboard">277 <div class="key-row">278 <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>279 <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>280 </div>281 <div class="key-row">282 <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>283 <div class="key">h</div><div class="key">j</div><div class="key">k</div><div class="key">l</div>284 </div>285 <div class="key-row">286 <div class="key wide">⇧</div>287 <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>288 <div class="key wide">⌫</div>289 </div>290 <div class="key-row bottom-row">291 <div class="key wide">?123</div>292 <div class="key comma">,</div>293 <div class="key">🙂</div>294 <div class="key space">space</div>295 <div class="key period">.</div>296 <div class="key enter">↩</div>297 </div>298 </div>299 </div>300 301 </div>302</div>303</body>304</html>