GD-ML/AndroidCode
13.4k
1<html lang="en">2<head>3<meta charset="UTF-8">4<meta name="viewport" content="width=1080, initial-scale=1.0">5<title>Create New Group UI</title>6<style>7 body { margin: 0; padding: 0; background: transparent; font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; }8 #render-target {9 width: 1080px;10 height: 2400px;11 position: relative;12 overflow: hidden;13 background: #111316;14 color: #eaeaea;15 }16 17 /* Top app bar */18 .appbar {19 position: relative;20 height: 140px;21 padding: 0 36px;22 display: flex;23 align-items: center;24 gap: 28px;25 }26 .back-btn {27 width: 64px;28 height: 64px;29 border-radius: 32px;30 display: flex;31 align-items: center;32 justify-content: center;33 }34 .back-btn svg { width: 40px; height: 40px; fill: #eaeaea; }35 .title {36 font-size: 48px;37 font-weight: 700;38 letter-spacing: 0.2px;39 }40 41 /* Search bar */42 .search-bar {43 margin: 12px 36px 22px;44 height: 120px;45 border-radius: 24px;46 background: #1a1d22;47 border: 1px solid #2a2f36;48 display: flex;49 align-items: center;50 padding: 0 32px;51 gap: 24px;52 color: #8c939c;53 font-size: 40px;54 }55 .search-icon {56 width: 48px; height: 48px;57 }58 .search-icon svg { width: 48px; height: 48px; fill: #8c939c; }59 60 /* Section label */61 .section-label {62 margin: 18px 36px 8px;63 font-size: 34px;64 color: #a1a7af;65 }66 67 /* List */68 .list {69 margin-top: 6px;70 }71 .list-item {72 position: relative;73 display: flex;74 align-items: center;75 padding: 26px 36px;76 gap: 28px;77 border-top: 1px solid #20242a;78 }79 .list-item:first-child { border-top: none; }80 .avatar {81 position: relative;82 width: 96px; height: 96px;83 border-radius: 50%;84 overflow: hidden;85 flex-shrink: 0;86 }87 .avatar .img {88 width: 100%; height: 100%;89 background: #E0E0E0;90 border: 1px solid #BDBDBD;91 display: flex;92 align-items: center;93 justify-content: center;94 color: #757575;95 font-size: 22px;96 text-align: center;97 }98 .badge {99 position: absolute;100 right: -2px; bottom: -2px;101 width: 28px; height: 28px; border-radius: 50%;102 border: 3px solid #111316;103 }104 .badge.yellow { background: #f4b73f; }105 .badge.green { background: #59c554; }106 107 .item-content {108 flex: 1;109 display: flex;110 align-items: center;111 justify-content: space-between;112 gap: 20px;113 }114 .name {115 font-size: 44px;116 }117 .sub {118 font-size: 30px;119 color: #8c939c;120 margin-top: 6px;121 }122 123 .select-ring {124 width: 72px; height: 72px;125 border-radius: 50%;126 border: 4px solid #6f7680;127 flex-shrink: 0;128 }129 130 /* Verified mark for Bing */131 .verified {132 display: inline-flex;133 align-items: center;134 gap: 12px;135 }136 .check {137 width: 36px; height: 36px;138 border-radius: 50%;139 background: #3aa0ff;140 display: inline-flex;141 align-items: center;142 justify-content: center;143 }144 .check svg { width: 22px; height: 22px; fill: white; }145 146 /* Bottom button */147 .bottom-action {148 position: absolute;149 left: 0; right: 0; bottom: 140px;150 display: flex;151 justify-content: center;152 }153 .btn-primary {154 width: 360px;155 height: 120px;156 border-radius: 60px;157 background: linear-gradient(90deg, #2f78e8, #57a0ff);158 color: white;159 font-size: 46px;160 font-weight: 700;161 display: flex;162 align-items: center;163 justify-content: center;164 box-shadow: 0 10px 20px rgba(39,120,255,0.35);165 }166</style>167</head>168<body>169<div id="render-target">170 171 <!-- App bar -->172 <div class="appbar">173 <div class="back-btn">174 <svg viewBox="0 0 24 24">175 <path d="M15.5 5.5L9 12l6.5 6.5-2 2L5 12l8.5-8.5z"/>176 </svg>177 </div>178 <div class="title">Create new group</div>179 </div>180 181 <!-- Search -->182 <div class="search-bar">183 <div class="search-icon">184 <svg viewBox="0 0 24 24">185 <path d="M21 20l-4.5-4.5a7 7 0 1 0-1.4 1.4L20 21l1-1zM10 15a5 5 0 1 1 0-10 5 5 0 0 1 0 10z"/>186 </svg>187 </div>188 <div>Search people and bots</div>189 </div>190 191 <!-- Suggested -->192 <div class="section-label">Suggested</div>193 <div class="list">194 <div class="list-item">195 <div class="avatar">196 <div class="img">[IMG: User Avatar]</div>197 <span class="badge yellow"></span>198 </div>199 <div class="item-content">200 <div class="name">Natalie Larson</div>201 <div class="select-ring"></div>202 </div>203 </div>204 205 <div class="list-item">206 <div class="avatar">207 <div class="img">[IMG: Initials "RW"]</div>208 <span class="badge yellow"></span>209 </div>210 <div class="item-content">211 <div class="name">Richard Wagner</div>212 <div class="select-ring"></div>213 </div>214 </div>215 </div>216 217 <!-- People -->218 <div class="section-label">People</div>219 <div class="list">220 <div class="list-item">221 <div class="avatar">222 <div class="img">[IMG: Bing Logo]</div>223 </div>224 <div class="item-content">225 <div class="name verified">226 <span>Bing</span>227 <span class="check">228 <svg viewBox="0 0 24 24"><path d="M9.5 16.2l-3.7-3.7 1.4-1.4 2.3 2.3 4.8-4.8 1.4 1.4z"/></svg>229 </span>230 </div>231 <div class="select-ring"></div>232 </div>233 </div>234 235 <div class="list-item">236 <div class="avatar">237 <div class="img">[IMG: Echo / Sound Test]</div>238 <span class="badge green"></span>239 </div>240 <div class="item-content">241 <div class="name">Echo / Sound Test Service .</div>242 <div class="select-ring"></div>243 </div>244 </div>245 246 <div class="list-item">247 <div class="avatar">248 <div class="img">[IMG: User Avatar]</div>249 <span class="badge yellow"></span>250 </div>251 <div class="item-content">252 <div class="name">Natalie Larson</div>253 <div class="select-ring"></div>254 </div>255 </div>256 257 <div class="list-item">258 <div class="avatar">259 <div class="img">[IMG: Initials "RW"]</div>260 <span class="badge yellow"></span>261 </div>262 <div class="item-content">263 <div class="name">Richard Wagner</div>264 <div class="select-ring"></div>265 </div>266 </div>267 </div>268 269 <!-- Bottom Done button -->270 <div class="bottom-action">271 <div class="btn-primary">Done</div>272 </div>273 274</div>275</body>276</html>