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>New Chat UI Mock</title>7<style>8 body { margin: 0; padding: 0; background: transparent; font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; }9 #render-target {10 width: 1080px;11 height: 2400px;12 position: relative;13 overflow: hidden;14 background: #F5F6FA;15 }16 17 /* Status bar */18 .status-bar {19 position: absolute;20 top: 0; left: 0; right: 0;21 height: 120px;22 background: #BDBDBF;23 color: #fff;24 font-weight: 600;25 }26 .status-inner {27 position: absolute; inset: 0;28 padding: 0 32px;29 display: flex; align-items: center; justify-content: space-between;30 }31 .status-left { font-size: 40px; letter-spacing: 1px; }32 .status-right { display: flex; gap: 24px; align-items: center; }33 .sb-icon { width: 42px; height: 42px; fill: #fff; opacity: 0.95; }34 35 /* Header */36 .header {37 position: absolute;38 top: 120px; left: 0; right: 0;39 height: 190px;40 background: #FFFFFF;41 box-shadow: 0 1px 0 rgba(0,0,0,0.06);42 }43 .header-row {44 display: flex; align-items: center; justify-content: space-between;45 padding: 28px 36px 0 36px;46 }47 .head-left, .head-right {48 display: flex; align-items: center; gap: 18px;49 color: #222;50 }51 .head-title {52 font-size: 44px; font-weight: 700; color: #1e1e1e;53 }54 .head-right { color: #8E8E93; font-weight: 600; }55 .head-right .label { font-size: 38px; }56 .header-tab {57 position: absolute; left: 50%; transform: translateX(-50%);58 bottom: 16px;59 width: 160px; height: 18px; border-radius: 9px; background: #E6E6E8;60 }61 .head-divider {62 position: absolute; bottom: 0; left: 0; right: 0; height: 6px; background: #F1F1F3;63 }64 65 /* Search / To input */66 .to-row {67 position: absolute;68 top: 310px; left: 32px; right: 32px;69 padding-top: 6px;70 }71 .to-label {72 font-size: 34px; color: #6D6D72; margin: 12px 6px;73 }74 .to-input {75 height: 96px; border-radius: 22px;76 background: #F0F1F4;77 box-shadow: inset 0 1px 0 rgba(0,0,0,0.04);78 }79 80 /* Cards and lists */81 .card {82 background: #fff; border-radius: 28px;83 box-shadow: 0 14px 28px rgba(0,0,0,0.06);84 padding: 28px 32px;85 }86 .row {87 display: flex; align-items: center; justify-content: space-between;88 }89 .left {90 display: flex; align-items: center; gap: 24px;91 }92 .title { font-size: 42px; color: #1f1f1f; font-weight: 700; }93 .sub { font-size: 32px; color: #7A7A80; margin-top: 6px; }94 .chev {95 width: 30px; height: 30px; fill: #B8BAC1;96 }97 98 .section-title {99 position: absolute; left: 40px;100 font-weight: 800; color: #2E2F34; letter-spacing: 0.2px;101 }102 .sec-best { top: 640px; font-size: 40px; }103 .sec-recents { top: 980px; font-size: 40px; }104 105 /* Image placeholders (avatars) */106 .avatar {107 width: 88px; height: 88px; border-radius: 50%;108 background: #E0E0E0; border: 1px solid #BDBDBD;109 display: flex; align-items: center; justify-content: center;110 color: #757575; font-size: 22px;111 flex: 0 0 88px;112 }113 114 /* New Group card */115 .new-group {116 position: absolute;117 top: 460px; left: 32px; right: 32px;118 }119 .ng-ico {120 width: 56px; height: 56px; fill: #111;121 }122 .ng-meta { display: flex; flex-direction: column; }123 .ng-right { display: flex; align-items: center; gap: 18px; }124 125 /* Best Friend item */126 .bf-item {127 position: absolute;128 top: 720px; left: 32px; right: 32px;129 background: #fff; border-radius: 24px;130 box-shadow: 0 14px 28px rgba(0,0,0,0.06);131 padding: 26px 32px;132 }133 .friend-name { font-size: 40px; font-weight: 700; color: #1c1c1f; }134 .friend-note { font-size: 36px; margin-left: 12px; }135 .select-dot {136 width: 56px; height: 56px; border-radius: 50%;137 border: 3px solid #D4D5DA; background: #fff;138 }139 140 /* Recents list card */141 .recents {142 position: absolute;143 top: 1060px; left: 32px; right: 32px;144 }145 .list-card { padding: 8px 0; }146 .list-row {147 padding: 30px 32px; display: flex; align-items: center; justify-content: space-between;148 border-bottom: 1px solid #F0F1F4;149 }150 .list-row:last-child { border-bottom: none; }151 .contact-name { font-size: 40px; font-weight: 700; color: #1c1c1f; }152 .contact-sub { font-size: 34px; color: #8B8C93; margin-top: 4px; }153 .name-wrap { display: flex; flex-direction: column; }154 .chip-red { color: #E74C3C; }155 .chip-pin { color: #D35400; }156 .row-right { display: flex; align-items: center; gap: 18px; }157 158 /* Right index bar */159 .index-bar {160 position: absolute;161 top: 560px; right: 12px;162 display: flex; flex-direction: column; align-items: center; gap: 18px;163 color: #BFC1C9; font-weight: 700; font-size: 28px;164 }165 .index-dot { font-size: 34px; }166 .index-letter { width: 38px; text-align: center; }167 168 /* Floating Chat pill */169 .float-pill {170 position: absolute;171 left: 50%; transform: translateX(-50%);172 top: 1560px;173 background: #C9CDD6; color: #fff;174 height: 120px; width: 380px;175 border-radius: 60px;176 display: flex; align-items: center; justify-content: center;177 font-size: 44px; font-weight: 800; letter-spacing: 0.2px;178 box-shadow: 0 12px 24px rgba(0,0,0,0.15);179 }180 181 /* Keyboard mock */182 .keyboard {183 position: absolute; left: 0; right: 0; bottom: 80px;184 height: 720px; background: #F3F0F8;185 border-top-left-radius: 24px; border-top-right-radius: 24px;186 box-shadow: 0 -8px 24px rgba(0,0,0,0.08);187 padding: 18px 22px;188 }189 .kb-toolbar { display: flex; align-items: center; gap: 36px; padding: 10px 8px 16px 8px; }190 .kb-tool {191 background: #fff; color: #1f1f1f; border-radius: 18px;192 padding: 12px 20px; font-weight: 700; font-size: 34px;193 box-shadow: 0 2px 0 rgba(0,0,0,0.04);194 }195 .kb-keys { margin-top: 8px; display: grid; gap: 16px; }196 .kb-row { display: grid; grid-template-columns: repeat(10, 1fr); gap: 12px; }197 .key {198 background: #FFFFFF; border-radius: 16px; height: 110px;199 display: flex; align-items: center; justify-content: center;200 font-size: 40px; color: #222; box-shadow: 0 2px 0 rgba(0,0,0,0.05);201 }202 .key-wide { grid-column: span 2; }203 .key-shift { background: #FADAE3; }204 .key-func { background: #FADAE3; }205 .key-enter { background: #B9E3B9; }206 .kb-bottom { display: grid; grid-template-columns: 1.5fr 1fr 6fr 1fr 1.5fr; gap: 12px; margin-top: 14px; }207 .space { background: #FFFFFF; border-radius: 18px; height: 110px; box-shadow: 0 2px 0 rgba(0,0,0,0.05); }208 209 /* Home indicator */210 .home-indicator {211 position: absolute; left: 50%; transform: translateX(-50%);212 bottom: 20px; width: 320px; height: 10px; border-radius: 6px; background: #9DA1A8;213 opacity: 0.7;214 }215 216 /* Utility icon styles */217 .icon {218 width: 44px; height: 44px; fill: currentColor;219 }220</style>221</head>222<body>223<div id="render-target">224 <!-- Status Bar -->225 <div class="status-bar">226 <div class="status-inner">227 <div class="status-left">3:28</div>228 <div class="status-right">229 <!-- simple connectivity icon -->230 <svg class="sb-icon" viewBox="0 0 24 24" aria-hidden="true"><path d="M2 8c5.5-5.3 14.5-5.3 20 0l-2 2c-4.5-4.3-11.5-4.3-16 0L2 8zm4 4c3.4-3.2 8.6-3.2 12 0l-2 2c-2.2-2-5.8-2-8 0l-2-2zm4 4c1.3-1.2 3.7-1.2 5 0l-2.5 2.5L10 16z"/></svg>231 <!-- battery -->232 <svg class="sb-icon" viewBox="0 0 24 24" aria-hidden="true"><path d="M2 8h14a2 2 0 0 1 2 2v4a2 2 0 0 1-2 2H2a2 2 0 0 1-2-2v-4a2 2 0 0 1 2-2zm18 2h2v4h-2v-4z"/></svg>233 </div>234 </div>235 </div>236 237 <!-- Header -->238 <div class="header">239 <div class="header-row">240 <div class="head-left">241 <svg class="icon" viewBox="0 0 24 24"><path d="M3 6h8v2H3V6zm0 5h12v2H3v-2zm0 5h6v2H3v-2z"/></svg>242 <div class="head-title">New Chat</div>243 </div>244 <div class="head-right">245 <svg class="icon" viewBox="0 0 24 24"><path d="M6.6 10.8l2.8-2.8 8.5 8.5-2.8 2.8c-1 .9-2.4 1-3.3.1l-5.2-5.2c-.9-.9-.8-2.3 0-3.4zM15.4 5l3.6 3.6-1.9 1.9L13.4 6.9 15.4 5z"/></svg>246 <div class="label">New Call</div>247 </div>248 </div>249 <div class="header-tab"></div>250 <div class="head-divider"></div>251 </div>252 253 <!-- To: -->254 <div class="to-row">255 <div class="to-label">To:</div>256 <div class="to-input"></div>257 </div>258 259 <!-- New Group Card -->260 <div class="new-group card">261 <div class="row">262 <div class="left">263 <div class="avatar">[IMG: Group Icon]</div>264 <div class="ng-meta">265 <div class="title">New Group</div>266 <div class="sub">Chat with up to 200 friends</div>267 </div>268 </div>269 <svg class="chev" viewBox="0 0 24 24"><path d="M9 6l6 6-6 6" fill="none" stroke="#B8BAC1" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/></svg>270 </div>271 </div>272 273 <!-- Section titles -->274 <div class="section-title sec-best">Best Friends</div>275 276 <!-- Best Friend Item -->277 <div class="bf-item">278 <div class="row">279 <div class="left">280 <div class="avatar">[IMG: Avatar]</div>281 <div class="friend-name">Amelia miller <span class="friend-note">😊</span></div>282 </div>283 <div class="select-dot"></div>284 </div>285 </div>286 287 <!-- Recents -->288 <div class="section-title sec-recents">Recents</div>289 <div class="recents card list-card">290 <div class="list-row">291 <div class="left">292 <div class="avatar">[IMG: Avatar]</div>293 <div class="name-wrap">294 <div class="contact-name">Richard Wagner</div>295 </div>296 </div>297 <div class="row-right">298 <div class="select-dot"></div>299 </div>300 </div>301 <div class="list-row">302 <div class="left">303 <div class="avatar">[IMG: Bot Avatar]</div>304 <div class="name-wrap">305 <div class="contact-name">My AI</div>306 <div class="contact-sub">🤖 <span class="chip-pin">📌</span></div>307 </div>308 </div>309 <div class="row-right"><div class="select-dot"></div></div>310 </div>311 <div class="list-row">312 <div class="left">313 <div class="avatar">[IMG: Avatar]</div>314 <div class="name-wrap">315 <div class="contact-name">Natalie</div>316 </div>317 </div>318 <div class="row-right"><div class="select-dot"></div></div>319 </div>320 </div>321 322 <!-- Right alphabet/index bar -->323 <div class="index-bar">324 <div class="index-dot">😊</div>325 <div class="index-dot">😎</div>326 <div class="index-letter">A</div>327 <div class="index-letter">B</div>328 <div class="index-letter">C</div>329 <div class="index-letter">D</div>330 <div class="index-letter">E</div>331 <div class="index-letter">F</div>332 <div class="index-letter">G</div>333 <div class="index-letter">H</div>334 <div class="index-letter">I</div>335 <div class="index-letter">J</div>336 <div class="index-letter">K</div>337 </div>338 339 <!-- Floating Chat pill -->340 <div class="float-pill">Chat</div>341 342 <!-- Keyboard mock -->343 <div class="keyboard">344 <div class="kb-toolbar">345 <div class="kb-tool">GIF</div>346 <div class="kb-tool">🙂</div>347 <div class="kb-tool">⚙️</div>348 <div class="kb-tool">G↔️</div>349 <div class="kb-tool">🎨</div>350 <div class="kb-tool">🎤</div>351 </div>352 353 <div class="kb-keys">354 <div class="kb-row">355 <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>356 <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>357 </div>358 <div class="kb-row">359 <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>360 <div class="key">h</div><div class="key">j</div><div class="key">k</div><div class="key">l</div><div class="key">;</div>361 </div>362 <div class="kb-row">363 <div class="key key-shift">⇧</div>364 <div class="key">z</div><div class="key">x</div><div class="key">c</div><div class="key">v</div>365 <div class="key">b</div><div class="key">n</div><div class="key">m</div>366 <div class="key key-func">⌫</div>367 <div class="key key-enter">✓</div>368 </div>369 <div class="kb-bottom">370 <div class="key key-func">?123</div>371 <div class="key">,</div>372 <div class="space"></div>373 <div class="key">.</div>374 <div class="key key-enter">✓</div>375 </div>376 </div>377 </div>378 379 <!-- Home indicator -->380 <div class="home-indicator"></div>381</div>382</body>383</html>