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 Group 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 position: relative;11 width: 1080px;12 height: 2400px;13 overflow: hidden;14 background: #F6F7F9;15 }16 17 /* Status bar */18 .status-bar {19 position: absolute;20 top: 0; left: 0; right: 0;21 height: 118px;22 background: #9CA0A6;23 color: #FFFFFF;24 display: flex;25 align-items: center;26 padding: 0 36px;27 font-size: 40px;28 letter-spacing: 0.5px;29 }30 .status-bar .right {31 margin-left: auto;32 display: flex;33 align-items: center;34 gap: 22px;35 }36 .status-icon {37 width: 34px; height: 34px; opacity: 0.95;38 }39 40 /* Tabs header */41 .tabs {42 position: absolute;43 top: 118px; left: 0; right: 0;44 height: 168px;45 background: #FFFFFF;46 display: flex;47 align-items: center;48 padding: 0 40px;49 color: #8C8F93;50 font-size: 44px;51 font-weight: 600;52 }53 .tabs .tab {54 display: flex;55 align-items: center;56 gap: 18px;57 color: #8E8E93;58 }59 .tabs .tab:first-child { margin-right: auto; }60 .tabs .center-dot {61 position: absolute;62 left: 50%;63 top: 46%;64 transform: translate(-50%, -50%);65 width: 160px;66 height: 18px;67 border-radius: 12px;68 background: #E5E6EA;69 }70 .tabs .underline {71 position: absolute;72 left: 0; right: 0; bottom: 0;73 height: 6px;74 background: #1C1C1E;75 opacity: 0.9;76 }77 .icon { width: 38px; height: 38px; }78 79 /* Title area */80 .title-area {81 position: absolute;82 top: 286px; left: 0; right: 0;83 height: 150px;84 display: flex;85 align-items: center;86 justify-content: center;87 color: #7F8287;88 }89 .title-area .title {90 font-size: 56px;91 font-weight: 700;92 display: inline-flex;93 align-items: center;94 gap: 16px;95 }96 97 /* To field */98 .to-field {99 position: absolute;100 top: 430px; left: 40px; right: 40px;101 height: 112px;102 background: #ECEDEF;103 border-radius: 56px;104 display: flex; align-items: center;105 padding: 0 24px;106 box-shadow: inset 0 1px 0 rgba(0,0,0,0.04);107 }108 .to-field .label {109 color: #7C7F85; font-size: 40px; font-weight: 600; margin-right: 16px;110 }111 .chip {112 background: #FFFFFF; border: 1px solid #E1E3E6;113 color: #1DA1FF; font-weight: 700;114 font-size: 38px; padding: 12px 22px;115 border-radius: 28px;116 }117 118 /* Sections */119 .section-title {120 color: #1C1C1E; font-weight: 800; font-size: 44px;121 margin: 24px 0;122 }123 .content {124 position: absolute;125 top: 566px; left: 40px; right: 40px;126 }127 128 .friend-card {129 background: #FFFFFF; border-radius: 28px;130 box-shadow: 0 12px 28px rgba(0,0,0,0.08);131 padding: 24px;132 display: flex; align-items: center; gap: 24px;133 }134 .avatar {135 width: 112px; height: 112px; border-radius: 56px;136 background: #E0E0E0; border: 1px solid #BDBDBD;137 display: flex; align-items: center; justify-content: center;138 color: #757575; font-size: 26px; text-align: center; padding: 6px;139 flex: 0 0 auto;140 }141 .avatar.green { background: #C7EF9E; border-color: #A7D979; color: #557A33; }142 .avatar.purple { background: #D9CCFF; border-color: #B7A6FF; color: #5B3FBF; }143 .avatar.red { background: #FFCDD2; border-color: #F8A8B0; color: #A73F4A; }144 145 .friend-info { flex: 1; }146 .friend-info .name { font-size: 46px; font-weight: 800; color: #12A1FF; }147 .friend-info .sub { margin-top: 6px; font-size: 40px; }148 149 .check {150 width: 72px; height: 72px; border-radius: 50%;151 border: 2px solid #C7E5FF;152 display: flex; align-items: center; justify-content: center;153 }154 .check.selected { background: #45AFFF; border-color: #45AFFF; }155 156 /* Recents */157 .list-card {158 margin-top: 26px;159 background: #FFFFFF; border-radius: 28px;160 box-shadow: 0 12px 28px rgba(0,0,0,0.08);161 overflow: hidden;162 }163 .list-item {164 display: flex; align-items: center; gap: 24px;165 padding: 20px 24px;166 height: 154px;167 }168 .list-item + .list-item { border-top: 1px solid #EFEFF2; }169 .li-name { font-size: 44px; font-weight: 700; color: #1C1C1E; }170 .li-sub { font-size: 36px; margin-top: 6px; color: #70747A; }171 .radio {172 margin-left: auto;173 width: 68px; height: 68px; border-radius: 50%;174 border: 3px solid #D9DCE1;175 }176 177 /* Right alphabet index */178 .alphabet {179 position: absolute;180 right: 10px; top: 900px;181 width: 40px; display: flex; flex-direction: column; align-items: center;182 gap: 10px; color: #A8ABB0; font-size: 30px; line-height: 1;183 user-select: none;184 }185 .alphabet .letter { padding: 2px 0; }186 187 /* Chat button */188 .chat-btn {189 position: absolute;190 left: 210px;191 bottom: 920px;192 width: 660px; height: 144px;193 border-radius: 80px; background: #4AA8FF;194 border: none; color: #FFFFFF; font-size: 54px; font-weight: 800;195 box-shadow: 0 16px 28px rgba(41,132,216,0.35);196 display: flex; align-items: center; justify-content: center;197 cursor: default;198 }199 200 /* Keyboard mock */201 .keyboard {202 position: absolute;203 left: 0; right: 0; bottom: 0;204 height: 860px;205 background: #F1EEF8;206 border-top-left-radius: 26px;207 border-top-right-radius: 26px;208 box-shadow: 0 -6px 20px rgba(0,0,0,0.08);209 padding: 16px 18px 32px;210 display: flex; flex-direction: column;211 }212 .kbd-top {213 display: flex; align-items: center; gap: 16px;214 margin: 8px 6px 10px;215 }216 .kbd-pill {217 background: #DAF2D7; color: #3A6B2F;218 border-radius: 24px; padding: 18px; width: 84px; height: 84px;219 display: flex; align-items: center; justify-content: center; font-weight: 700;220 border: 1px solid #C9E7C4;221 }222 .kbd-top .small { background: #FFFFFF; border-color: #E4E6EA; width: 84px; height: 84px; border-radius: 20px; }223 .keys { margin-top: 8px; display: grid; gap: 14px; }224 .row { display: flex; justify-content: center; gap: 12px; }225 .key {226 background: #FFFFFF; border: 1px solid #E2E4E9;227 width: 88px; height: 120px; border-radius: 20px;228 display: flex; align-items: center; justify-content: center;229 font-size: 40px; color: #1C1C1E; font-weight: 600;230 }231 .key.wide { width: 150px; }232 .key.space { width: 460px; }233 .key.pink { background: #FBD9E0; border-color: #F0B3BE; color: #7A3A45; }234 .key.green { background: #CFEFC5; border-color: #B4E5A9; color: #2B6A2B; }235 .home-indicator {236 position: absolute; bottom: 10px; left: 50%;237 transform: translateX(-50%);238 width: 300px; height: 10px; background: #BFC3C9; border-radius: 6px;239 opacity: 0.9;240 }241 242 /* SVG helpers */243 .stroke { stroke: currentColor; fill: none; stroke-width: 5; stroke-linecap: round; stroke-linejoin: round; }244 .fill { fill: currentColor; }245</style>246</head>247<body>248<div id="render-target">249 250 <!-- Status Bar -->251 <div class="status-bar">252 <div class="left">3:29</div>253 <div class="right">254 <svg class="status-icon" viewBox="0 0 24 24"><path class="fill" d="M3 6h2v12H3zM7 9h2v9H7zM11 11h2v7h-2zM15 8h2v10h-2zM19 5h2v13h-2z"/></svg>255 <svg class="status-icon" viewBox="0 0 24 24"><path class="fill" d="M12 2a9 9 0 1 0 9 9h-2a7 7 0 1 1-7-7V2z"/></svg>256 <svg class="status-icon" viewBox="0 0 24 24"><rect class="fill" x="3" y="7" width="18" height="10" rx="2"/><rect x="21" y="10" width="2" height="4" rx="1" fill="#fff"/></svg>257 </div>258 </div>259 260 <!-- Tabs -->261 <div class="tabs">262 <div class="tab">263 <svg class="icon" viewBox="0 0 24 24"><path class="stroke" d="M4 20l5-1 10-10a2 2 0 0 0-3-3L6 16l-2 4z"/><path class="stroke" d="M14 6l4 4"/></svg>264 <span>New Chat</span>265 </div>266 <div class="tab">267 <svg class="icon" viewBox="0 0 24 24"><path class="stroke" d="M6 8c2 4 6 8 10 10l2-2a2 2 0 0 0 .5-2.2L17 10a2 2 0 0 0-2.2-.5L12 10"/></svg>268 <span>New Call</span>269 </div>270 <div class="center-dot"></div>271 <div class="underline"></div>272 </div>273 274 <!-- Title -->275 <div class="title-area">276 <div class="title">277 New Group Name278 <svg class="icon" viewBox="0 0 24 24"><path class="stroke" d="M21 12.5l-8.5 8.5a4 4 0 0 1-5.7-5.7L16 6a3 3 0 1 1 4.2 4.2L8 22"/></svg>279 </div>280 </div>281 282 <!-- To field -->283 <div class="to-field">284 <div class="label">To:</div>285 <div class="chip">Amelia miller</div>286 </div>287 288 <!-- Content -->289 <div class="content">290 <div class="section-title">Best Friends</div>291 <div class="friend-card">292 <div class="avatar green">[IMG: Avatar]</div>293 <div class="friend-info">294 <div class="name">Amelia miller</div>295 <div class="sub">😊</div>296 </div>297 <div class="check selected">298 <svg viewBox="0 0 24 24" width="42" height="42"><path d="M9.2 16.2l-3.2-3.2-1.4 1.4 4.6 4.6 9-9-1.4-1.4-7.6 7.6z" fill="#fff"/></svg>299 </div>300 </div>301 302 <div class="section-title" style="margin-top: 28px;">Recents</div>303 <div class="list-card">304 <div class="list-item">305 <div class="avatar">[IMG: Avatar]</div>306 <div class="li-text">307 <div class="li-name">Richard Wagner</div>308 </div>309 <div class="radio"></div>310 </div>311 <div class="list-item">312 <div class="avatar purple">[IMG: Robot Avatar]</div>313 <div class="li-text">314 <div class="li-name">My AI</div>315 <div class="li-sub">🤖📌</div>316 </div>317 <div class="radio"></div>318 </div>319 <div class="list-item">320 <div class="avatar red">[IMG: Avatar]</div>321 <div class="li-text">322 <div class="li-name">Natalie</div>323 </div>324 <div class="radio"></div>325 </div>326 </div>327 </div>328 329 <!-- Alphabet index -->330 <div class="alphabet">331 <div class="letter">A</div>332 <div class="letter">B</div>333 <div class="letter">C</div>334 <div class="letter">D</div>335 <div class="letter">E</div>336 <div class="letter">F</div>337 <div class="letter">G</div>338 <div class="letter">H</div>339 <div class="letter">I</div>340 <div class="letter">J</div>341 <div class="letter">K</div>342 </div>343 344 <!-- Chat button -->345 <button class="chat-btn">Chat</button>346 347 <!-- Keyboard mock -->348 <div class="keyboard">349 <div class="kbd-top">350 <div class="kbd-pill">⌨</div>351 <div class="kbd-pill small">😊</div>352 <div class="kbd-pill small">GIF</div>353 <div class="kbd-pill small">⚙</div>354 <div class="kbd-pill small">G✕</div>355 <div class="kbd-pill small">🎨</div>356 <div class="kbd-pill" style="background:#CDE9C8;border-color:#B9DDB2;color:#2E6D2C;">🎤</div>357 </div>358 <div class="keys">359 <div class="row">360 <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>361 </div>362 <div class="row">363 <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>364 </div>365 <div class="row">366 <div class="key pink wide">⇧</div>367 <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>368 <div class="key pink wide">⌫</div>369 </div>370 <div class="row">371 <div class="key pink wide">?123</div>372 <div class="key pink">,</div>373 <div class="key">😊</div>374 <div class="key space"></div>375 <div class="key">.</div>376 <div class="key green wide">✓</div>377 </div>378 </div>379 </div>380 381 <div class="home-indicator"></div>382</div>383</body>384</html>