GD-ML/AndroidCode
13.4k
1<html>2<head>3<meta charset="utf-8">4<title>Chat UI - Simone</title>5<style>6 body { margin:0; padding:0; background:transparent; font-family: Arial, Helvetica, sans-serif; }7 #render-target {8 width:1080px; height:2400px;9 position:relative; overflow:hidden;10 background:#ffffff;11 border-radius:0;12 }13 14 /* Top status bar */15 .statusbar {16 height:90px;17 display:flex;18 align-items:center;19 justify-content:space-between;20 padding:0 40px;21 color:#1a1a1a;22 font-size:40px;23 }24 .status-left { display:flex; align-items:center; gap:24px; }25 .status-right { display:flex; align-items:center; gap:22px; }26 .icon { width:42px; height:42px; }27 28 /* Header */29 .header {30 height:160px;31 display:flex;32 align-items:center;33 padding:0 28px;34 border-bottom:1px solid #ececec;35 }36 .back {37 width:84px; height:84px; display:flex; align-items:center; justify-content:center;38 }39 .title-area {40 flex:1;41 padding-left:8px;42 }43 .title-area .name {44 font-size:56px; font-weight:700; color:#111;45 }46 .title-area .sub {47 margin-top:8px; color:#6f6f6f; font-size:34px; display:flex; align-items:center; gap:8px;48 }49 .header-actions {50 display:flex; align-items:center; gap:36px; padding-right:10px;51 }52 .round-icon {53 width:76px; height:76px; border-radius:38px; background:#f4f5f7;54 display:flex; align-items:center; justify-content:center; border:1px solid #e0e0e0;55 }56 57 /* Content area */58 .content {59 position:absolute;60 top:250px; /* status + header */61 left:0;62 right:0;63 bottom:1060px; /* reserve for input + keyboard */64 background:#f7f8fc;65 overflow:auto;66 }67 68 /* Info card */69 .info-card {70 width:1000px; margin:26px auto 0 auto; background:#ffffff;71 border-radius:24px; border:1px solid #e7e7e7;72 box-shadow:0 2px 6px rgba(0,0,0,0.04);73 padding:42px 32px 60px 32px;74 text-align:center;75 position:relative;76 }77 .avatar {78 width:150px; height:150px; border-radius:75px;79 margin: -70px auto 18px auto;80 background:#E0E0E0; border:1px solid #BDBDBD;81 display:flex; align-items:center; justify-content:center; color:#757575;82 font-size:28px;83 }84 .flag {85 position:absolute; left:420px; top:38px;86 width:28px; height:28px; border-radius:14px; overflow:hidden; border:1px solid #ccc;87 }88 .flag div:nth-child(1){width:33%;height:100%;background:#0f9d58;float:left;}89 .flag div:nth-child(2){width:34%;height:100%;background:#ffffff;float:left;}90 .flag div:nth-child(3){width:33%;height:100%;background:#db4437;float:left;}91 92 .info-title { font-size:44px; font-weight:700; color:#1f1f1f; margin-top:4px; }93 .purple-bubble {94 width:900px; margin:28px auto 10px auto;95 background:#C8D1FF; color:#1f1f1f;96 border-radius:24px; padding:26px 28px;97 position:relative; font-size:36px;98 }99 .purple-bubble .dot {100 position:absolute; left:18px; top:50%; transform:translateY(-50%);101 width:16px; height:16px; border-radius:8px; background:#7f8cff;102 }103 .purple-bubble span { display:block; padding-left:32px; text-align:left; }104 105 /* Timestamp */106 .timestamp {107 margin:46px auto 6px auto; text-align:center; color:#8c8c8c; font-size:34px;108 }109 110 /* Chat bubble right */111 .chat-row { padding:22px 40px; }112 .bubble-right {113 max-width:720px; margin-left:auto;114 background:#dbe6ff; color:#102a43;115 border:1px solid #c9d7ff; border-radius:36px;116 padding:18px 26px; font-size:40px;117 }118 119 /* Input bar */120 .input-bar {121 position:absolute; left:0; right:0; bottom:900px; /* above keyboard */122 height:160px; background:#ffffff; border-top:1px solid #e7e7e7;123 display:flex; align-items:center; padding:0 28px; gap:22px;124 }125 .input-field {126 flex:1; height:100px; border:1px solid #e5e5e5; border-radius:28px;127 display:flex; align-items:center; padding:0 28px; color:#9b9b9b; font-size:40px; background:#fafafa;128 }129 .input-icons { display:flex; align-items:center; gap:22px; }130 .circle-btn {131 width:80px; height:80px; border-radius:40px; border:1px solid #e0e0e0; background:#f4f5f7;132 display:flex; align-items:center; justify-content:center;133 }134 135 /* Keyboard mock */136 .keyboard {137 position:absolute; left:0; right:0; bottom:0;138 height:900px; background:#111317;139 border-top-left-radius:22px; border-top-right-radius:22px;140 padding:26px 22px;141 }142 .kb-top { display:flex; align-items:center; gap:18px; color:#b9b9b9; font-size:34px; margin-bottom:16px; }143 .keys { margin-top:18px; }144 .row { display:flex; gap:18px; justify-content:center; margin-bottom:22px; }145 .key {146 width:86px; height:106px; border-radius:18px;147 background:#2a2d31; color:#f4f4f4; display:flex; align-items:center; justify-content:center;148 font-size:42px;149 border:1px solid #202327;150 }151 .key.wide { width:170px; }152 .key.extra-wide { width:300px; }153 .kb-footer { display:flex; justify-content:space-between; align-items:center; margin-top:26px; }154 .left-keys, .right-keys { display:flex; gap:18px; }155</style>156</head>157<body>158<div id="render-target">159 160 <!-- Status Bar -->161 <div class="statusbar">162 <div class="status-left">163 <div>12:34</div>164 <svg class="icon" viewBox="0 0 24 24">165 <path d="M2 4h20v16H2z" fill="none" stroke="#444" stroke-width="2"/>166 <path d="M2 6l10 7 10-7" fill="none" stroke="#444" stroke-width="2"/>167 </svg>168 </div>169 <div class="status-right">170 <svg class="icon" viewBox="0 0 24 24">171 <path d="M2 18l6-6 4 4 8-8" fill="none" stroke="#444" stroke-width="2"/>172 </svg>173 <svg class="icon" viewBox="0 0 24 24">174 <rect x="2" y="6" width="18" height="12" rx="2" ry="2" fill="none" stroke="#444" stroke-width="2"/>175 <rect x="21" y="10" width="2" height="4" fill="#444"/>176 </svg>177 </div>178 </div>179 180 <!-- Header -->181 <div class="header">182 <div class="back">183 <svg class="icon" viewBox="0 0 24 24">184 <path d="M15 18l-6-6 6-6" fill="none" stroke="#333" stroke-width="2"/>185 </svg>186 </div>187 <div class="title-area">188 <div class="name">Simone</div>189 <div class="sub">190 <svg class="icon" viewBox="0 0 24 24" style="width:32px;height:32px;">191 <circle cx="12" cy="8" r="4" fill="#888"/>192 <path d="M12 12c-4 0-7 3-7 7h14c0-4-3-7-7-7z" fill="#bbb"/>193 </svg>194 <span>8:04 AM</span>195 </div>196 </div>197 <div class="header-actions">198 <div class="round-icon">199 <svg class="icon" viewBox="0 0 24 24">200 <path d="M6 2l4 4-2 2-4-4 2-2zm5 5l7 7c1 1 1 3 0 4l-2 2c-1 1-3 1-4 0l-7-7 6-6z" fill="#555"/>201 </svg>202 </div>203 <div class="round-icon">204 <svg class="icon" viewBox="0 0 24 24">205 <circle cx="12" cy="12" r="9" fill="none" stroke="#555" stroke-width="2"/>206 <path d="M12 8v4l3 3" fill="none" stroke="#555" stroke-width="2"/>207 </svg>208 </div>209 </div>210 </div>211 212 <!-- Scrollable Content -->213 <div class="content">214 <div class="info-card">215 <div class="avatar">[IMG: User Avatar]</div>216 <div class="flag"><div></div><div></div><div></div></div>217 <div class="info-title">Simone's Info</div>218 <div class="purple-bubble">219 <div class="dot"></div>220 <span>Simone didn't list any hobbies 😳</span>221 </div>222 </div>223 224 <div class="timestamp">12:34 PM</div>225 226 <div class="chat-row">227 <div class="bubble-right">hello</div>228 </div>229 </div>230 231 <!-- Input Bar -->232 <div class="input-bar">233 <div class="circle-btn">234 <svg class="icon" viewBox="0 0 24 24">235 <path d="M12 5v14M5 12h14" stroke="#555" stroke-width="2" fill="none"/>236 </svg>237 </div>238 <div class="circle-btn">239 <svg class="icon" viewBox="0 0 24 24">240 <path d="M4 12h16" stroke="#555" stroke-width="3"/>241 </svg>242 </div>243 <div class="input-field">Type a message...</div>244 <div class="input-icons">245 <div class="circle-btn">246 <svg class="icon" viewBox="0 0 24 24">247 <circle cx="12" cy="8" r="4" fill="#555"/>248 <path d="M4 20c2-3 6-3 8-3s6 0 8 3" fill="none" stroke="#555" stroke-width="2"/>249 </svg>250 </div>251 <div class="circle-btn">252 <svg class="icon" viewBox="0 0 24 24">253 <path d="M12 4v10a4 4 0 0 0 8 0V9" fill="none" stroke="#555" stroke-width="2"/>254 <path d="M5 10v4a7 7 0 0 0 14 0" fill="none" stroke="#555" stroke-width="2"/>255 </svg>256 </div>257 </div>258 </div>259 260 <!-- Keyboard Mock -->261 <div class="keyboard">262 <div class="kb-top">263 <div class="circle-btn" style="width:70px;height:70px;background:#222;border-color:#222;">264 <svg class="icon" viewBox="0 0 24 24">265 <path d="M12 5v14M5 12h14" stroke="#bdbdbd" stroke-width="2" fill="none"/>266 </svg>267 </div>268 <div>GIF</div>269 <div class="circle-btn" style="width:70px;height:70px;background:#222;border-color:#222;">270 <svg class="icon" viewBox="0 0 24 24">271 <circle cx="12" cy="12" r="4" fill="#bdbdbd"/>272 <path d="M12 2v4M12 18v4M2 12h4M18 12h4" stroke="#bdbdbd" stroke-width="2"/>273 </svg>274 </div>275 <div>G✕</div>276 <div class="circle-btn" style="width:70px;height:70px;background:#222;border-color:#222;">277 <svg class="icon" viewBox="0 0 24 24">278 <circle cx="12" cy="12" r="9" fill="none" stroke="#bdbdbd" stroke-width="2"/>279 <path d="M12 6v6l4 2" fill="none" stroke="#bdbdbd" stroke-width="2"/>280 </svg>281 </div>282 </div>283 284 <div class="keys">285 <div class="row">286 <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>287 </div>288 <div class="row">289 <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>290 </div>291 <div class="row">292 <div class="key wide">⇧</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 wide">⌫</div>293 </div>294 <div class="kb-footer">295 <div class="left-keys">296 <div class="key wide">?123</div>297 <div class="key">,</div>298 <div class="key">🙂</div>299 </div>300 <div class="key extra-wide">Space</div>301 <div class="right-keys">302 <div class="key">.</div>303 <div class="key wide">↵</div>304 </div>305 </div>306 </div>307 </div>308 309</div>310</body>311</html>