GD-ML/AndroidCode
13.4k
1<html>2<head>3<meta charset="UTF-8">4<title>Create new group UI</title>5<style>6 body { margin: 0; padding: 0; background: transparent; font-family: Arial, Helvetica, sans-serif; }7 #render-target {8 width: 1080px;9 height: 2400px;10 position: relative;11 overflow: hidden;12 background: #121416;13 color: #FFFFFF;14 }15 16 /* Status bar */17 .status-bar {18 position: absolute;19 top: 0;20 left: 0;21 width: 1080px;22 height: 96px;23 padding: 0 36px;24 display: flex;25 align-items: center;26 justify-content: space-between;27 color: #ddd;28 font-size: 36px;29 letter-spacing: 1px;30 }31 .status-icons {32 display: flex;33 gap: 24px;34 align-items: center;35 }36 .dot { width: 14px; height: 14px; background: #ddd; border-radius: 50%; display: inline-block; }37 .wifi {38 width: 40px; height: 28px;39 }40 .battery {41 width: 46px; height: 22px; border: 2px solid #ddd; border-radius: 4px; position: relative; margin-left: 6px;42 }43 .battery::after { content: ""; position: absolute; right: -8px; top: 6px; width: 6px; height: 10px; background: #ddd; border-radius: 2px; }44 .battery-fill { position: absolute; left: 3px; top: 3px; width: 32px; height: 14px; background: #ddd; }45 46 /* Top bar */47 .top-bar {48 position: absolute;49 top: 96px;50 left: 0;51 width: 1080px;52 height: 140px;53 display: flex;54 align-items: center;55 padding: 0 36px;56 }57 .back {58 width: 84px; height: 84px; display: flex; align-items: center; justify-content: center;59 }60 .back svg { width: 52px; height: 52px; fill: none; stroke: #ffffff; stroke-width: 52; stroke-linecap: round; stroke-linejoin: round; }61 .title {62 font-size: 64px;63 font-weight: 700;64 margin-left: 12px;65 }66 67 /* Search bar */68 .search-bar {69 position: absolute;70 top: 236px;71 left: 36px;72 width: 1008px;73 height: 120px;74 background: #1b1f23;75 border: 2px solid #2a2f36;76 border-radius: 24px;77 display: flex;78 align-items: center;79 padding: 0 32px;80 color: #9aa0a6;81 font-size: 42px;82 gap: 24px;83 }84 .search-icon svg { width: 48px; height: 48px; fill: none; stroke: #9aa0a6; stroke-width: 60; }85 86 /* Selected chips row */87 .selected-row {88 position: absolute;89 top: 376px;90 left: 36px;91 width: 1008px;92 display: flex;93 gap: 36px;94 align-items: flex-start;95 }96 .chip {97 width: 200px;98 text-align: center;99 }100 .avatar {101 width: 160px; height: 160px; border-radius: 50%; background: #E0E0E0; border: 1px solid #BDBDBD;102 display: flex; align-items: center; justify-content: center; color: #555; font-size: 28px; position: relative;103 }104 .remove {105 position: absolute; right: -6px; top: -6px;106 width: 56px; height: 56px; background: #2a75f3; border-radius: 50%;107 display: flex; align-items: center; justify-content: center; color: #fff; font-weight: bold; font-size: 34px;108 box-shadow: 0 0 0 4px #121416;109 }110 .chip-label { margin-top: 12px; font-size: 34px; color: #cfd3d8; }111 112 /* Sections */113 .section-title {114 position: absolute;115 left: 36px;116 font-size: 44px;117 font-weight: 700;118 color: #cfd3d8;119 }120 #suggested-title { top: 590px; }121 #people-title { top: 980px; }122 123 /* List items */124 .list {125 position: absolute;126 left: 0;127 width: 1080px;128 }129 #suggested-list { top: 660px; }130 #people-list { top: 1050px; }131 132 .item {133 height: 160px;134 display: flex;135 align-items: center;136 padding: 0 36px;137 border-top: 1px solid #23262b;138 }139 .item:first-child { border-top: none; }140 .item .left {141 display: flex; align-items: center; gap: 26px; flex: 1;142 }143 .small-avatar {144 width: 100px; height: 100px; border-radius: 50%; background: #E0E0E0; border: 1px solid #BDBDBD;145 display: flex; align-items: center; justify-content: center; color: #555; font-size: 24px; position: relative;146 }147 .label { font-size: 46px; color: #e5e7ea; }148 .subtle { color: #9aa0a6; font-size: 40px; }149 .yellow-dot {150 position: absolute; right: -6px; bottom: -6px; width: 26px; height: 26px; background: #f7c846; border-radius: 50%; border: 2px solid #121416;151 }152 .green-dot {153 position: absolute; right: -6px; bottom: -6px; width: 26px; height: 26px; background: #4caf50; border-radius: 50%; border: 2px solid #121416;154 }155 156 .right-check {157 width: 92px; height: 92px; border-radius: 50%; border: 4px solid #9aa0a6; display: flex; align-items: center; justify-content: center;158 }159 .right-check.selected {160 background: #2a75f3; border-color: #2a75f3;161 }162 .right-check svg { width: 52px; height: 52px; fill: none; stroke: #ffffff; stroke-width: 60; }163 164 /* Bing verified badge */165 .verified {166 display: inline-flex; align-items: center; gap: 12px;167 }168 .badge {169 width: 34px; height: 34px; background: #2a75f3; border-radius: 50%; display: inline-flex; justify-content: center; align-items: center;170 }171 .badge svg { width: 24px; height: 24px; fill: none; stroke: #fff; stroke-width: 60; }172 173 /* Done button */174 .done-btn {175 position: absolute;176 bottom: 160px;177 left: 50%;178 transform: translateX(-50%);179 width: 350px;180 height: 120px;181 border-radius: 60px;182 background: linear-gradient(90deg, #2a75f3, #57a6ff);183 display: flex; align-items: center; justify-content: center;184 font-size: 48px; font-weight: 700;185 box-shadow: 0 6px 16px rgba(42,117,243,0.3);186 }187 188 /* Bottom gesture bar (visual) */189 .gesture-bar {190 position: absolute;191 bottom: 72px; left: 50%; transform: translateX(-50%);192 width: 520px; height: 10px; background: #bdbdbd; border-radius: 6px; opacity: 0.5;193 }194</style>195</head>196<body>197<div id="render-target">198 199 <!-- Status Bar -->200 <div class="status-bar">201 <div>11:42</div>202 <div class="status-icons">203 <span class="dot"></span><span class="dot"></span><span class="dot"></span><span class="dot"></span><span class="dot"></span><span class="dot"></span>204 <svg class="wifi" viewBox="0 0 100 60">205 <path d="M10 30 Q50 5 90 30" stroke="#ddd" stroke-width="8" fill="none"/>206 <path d="M22 40 Q50 22 78 40" stroke="#ddd" stroke-width="8" fill="none"/>207 <circle cx="50" cy="50" r="6" fill="#ddd"></circle>208 </svg>209 <div class="battery"><div class="battery-fill"></div></div>210 </div>211 </div>212 213 <!-- Top Bar -->214 <div class="top-bar">215 <div class="back">216 <svg viewBox="0 0 120 120"><path d="M80 20 L40 60 L80 100"/></svg>217 </div>218 <div class="title">Create new group</div>219 </div>220 221 <!-- Search Bar -->222 <div class="search-bar">223 <div class="search-icon">224 <svg viewBox="0 0 120 120">225 <circle cx="52" cy="52" r="40"></circle>226 <line x1="86" y1="86" x2="118" y2="118"></line>227 </svg>228 </div>229 <div>Search people and bots</div>230 </div>231 232 <!-- Selected avatars -->233 <div class="selected-row">234 <div class="chip">235 <div class="avatar">236 [IMG: Avatar]237 <div class="remove">×</div>238 </div>239 <div class="chip-label">Natalie</div>240 </div>241 <div class="chip">242 <div class="avatar">243 [IMG: Avatar]244 <div class="remove">×</div>245 </div>246 <div class="chip-label">Richard</div>247 </div>248 </div>249 250 <!-- Section: Suggested -->251 <div id="suggested-title" class="section-title">Suggested</div>252 <div id="suggested-list" class="list">253 <div class="item">254 <div class="left">255 <div class="small-avatar">[IMG: Avatar]<span class="yellow-dot"></span></div>256 <div class="label">Natalie Larson</div>257 </div>258 <div class="right-check selected">259 <svg viewBox="0 0 120 120"><path d="M30 64 L52 86 L92 36"/></svg>260 </div>261 </div>262 <div class="item">263 <div class="left">264 <div class="small-avatar">[IMG: Avatar]<span class="yellow-dot"></span></div>265 <div class="label">Richard Wagner</div>266 </div>267 <div class="right-check selected">268 <svg viewBox="0 0 120 120"><path d="M30 64 L52 86 L92 36"/></svg>269 </div>270 </div>271 </div>272 273 <!-- Section: People -->274 <div id="people-title" class="section-title">People</div>275 <div id="people-list" class="list">276 <div class="item">277 <div class="left">278 <div class="small-avatar">[IMG: Bing Logo]</div>279 <div class="label verified">280 <span>Bing</span>281 <span class="badge"><svg viewBox="0 0 120 120"><path d="M30 64 L52 86 L92 36"/></svg></span>282 </div>283 </div>284 <div class="right-check"></div>285 </div>286 287 <div class="item">288 <div class="left">289 <div class="small-avatar">[IMG: Headset]<span class="green-dot"></span></div>290 <div class="label">Echo / Sound Test Service</div>291 </div>292 <div class="right-check"></div>293 </div>294 295 <div class="item">296 <div class="left">297 <div class="small-avatar">[IMG: Avatar]<span class="yellow-dot"></span></div>298 <div class="label">Natalie Larson</div>299 </div>300 <div class="right-check selected">301 <svg viewBox="0 0 120 120"><path d="M30 64 L52 86 L92 36"/></svg>302 </div>303 </div>304 305 <div class="item">306 <div class="left">307 <div class="small-avatar">[IMG: Avatar]<span class="yellow-dot"></span></div>308 <div class="label">Richard Wagner</div>309 </div>310 <div class="right-check selected">311 <svg viewBox="0 0 120 120"><path d="M30 64 L52 86 L92 36"/></svg>312 </div>313 </div>314 </div>315 316 <!-- Done button -->317 <div class="done-btn">Done</div>318 <div class="gesture-bar"></div>319</div>320</body>321</html>