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>UI Render</title>7<style>8 body { margin:0; padding:0; background:transparent; font-family: system-ui, -apple-system, Segoe UI, Roboto, Helvetica, Arial, sans-serif; color:#2c2c2c; }9 #render-target {10 width:1080px; height:2400px; position:relative; overflow:hidden;11 background:#F6F7FB;12 border-radius:32px; box-shadow:0 8px 24px rgba(0,0,0,0.08);13 }14 15 /* Status bar */16 .status-bar {17 position:absolute; top:0; left:0; width:100%; height:140px;18 background:#9FA0A4; color:#fff; padding:0 40px; display:flex; align-items:center; justify-content:space-between;19 box-sizing:border-box; font-weight:600;20 }21 .status-left { display:flex; align-items:center; gap:18px; font-size:44px; }22 .status-right { display:flex; align-items:center; gap:28px; }23 .sb-icon { width:48px; height:48px; }24 .battery { width:64px; height:32px; border:3px solid #fff; border-radius:6px; position:relative; }25 .battery::after { content:""; position:absolute; right:-10px; top:8px; width:8px; height:16px; background:#fff; border-radius:2px; }26 .battery-level { position:absolute; left:3px; top:3px; height:24px; width:40px; background:#fff; border-radius:3px; }27 28 /* Header with actions */29 .header {30 position:absolute; top:140px; left:0; width:100%; height:180px; background:#FFFFFF;31 display:flex; align-items:center; justify-content:center;32 }33 .header-inner { width:100%; max-width:980px; display:flex; align-items:center; justify-content:space-between; padding:0 40px; box-sizing:border-box; }34 .header-action { display:flex; align-items:center; gap:18px; color:#8A8D92; font-size:46px; font-weight:700; }35 .header-action svg { width:56px; height:56px; fill:#8A8D92; }36 .header-indicator {37 position:absolute; top:260px; left:50%; transform:translateX(-50%);38 width:180px; height:22px; background:#E2E3E7; border-radius:11px;39 }40 .header-underline {41 position:absolute; top:300px; left:40px; width:1000px; height:6px; background:#1C1C1C;42 border-radius:3px;43 }44 45 /* Content area */46 .content {47 position:absolute; top:320px; left:0; width:100%; padding:40px; box-sizing:border-box;48 }49 50 .group-name {51 font-size:72px; font-weight:800; color:#6E6F74; display:flex; align-items:center; gap:18px; margin-bottom:36px;52 }53 .pencil {54 width:50px; height:50px; border:2px dashed #B8BBC2; border-radius:50%;55 }56 57 .to-row {58 background:#EFEFF2; border-radius:44px; padding:24px 28px; display:flex; align-items:center; gap:22px;59 color:#6E6F74; font-size:42px; margin-bottom:40px;60 }61 .chip { background:#FFFFFF; border:1px solid #D7D9DE; border-radius:34px; padding:16px 28px; color:#4A4D52; font-weight:700; }62 .label { font-weight:800; font-size:48px; margin:22px 0; color:#3A3A3E; }63 64 .card {65 background:#FFFFFF; border-radius:36px; box-shadow:0 10px 24px rgba(0,0,0,0.08);66 padding:24px; margin-bottom:28px;67 }68 69 .friend-item {70 display:flex; align-items:center; justify-content:space-between; padding:18px 22px;71 }72 .friend-left { display:flex; align-items:center; gap:24px; }73 .avatar {74 width:96px; height:96px; border-radius:50%; background:#E0E0E0; border:1px solid #BDBDBD;75 display:flex; align-items:center; justify-content:center; color:#757575; font-size:26px;76 }77 .friend-name { font-size:46px; font-weight:800; color:#2E86FF; }78 .friend-sub { font-size:36px; color:#9A9CA3; margin-top:6px; }79 .check {80 width:72px; height:72px; border-radius:50%; background:#5CB6FF; display:flex; align-items:center; justify-content:center; color:#fff; font-weight:900;81 }82 .circle {83 width:64px; height:64px; border-radius:50%; border:3px solid #D8DADF;84 }85 86 .list { padding:8px 0; }87 .list-row {88 display:flex; align-items:center; justify-content:space-between; padding:26px 22px; border-top:1px solid #EFEFF3;89 }90 .list-left { display:flex; align-items:center; gap:24px; }91 .name-primary { font-size:44px; font-weight:800; color:#2E86FF; }92 .name { font-size:44px; font-weight:800; color:#323338; }93 .sub { font-size:34px; color:#8C8E94; }94 95 /* Floating CTA button */96 .cta {97 position:absolute; right:180px; top:1260px; background:#5CB6FF; color:#fff; font-size:44px; font-weight:800;98 padding:30px 48px; border-radius:60px; box-shadow:0 10px 24px rgba(92,182,255,0.5);99 }100 101 /* Alphabet rail + mini icons on right */102 .rail {103 position:absolute; right:16px; top:800px; width:56px; display:flex; flex-direction:column; align-items:center; gap:16px; color:#8C8E94;104 font-weight:700;105 }106 .rail .glyph {107 width:42px; height:42px; border-radius:21px; background:#F0F1F4; display:flex; align-items:center; justify-content:center; font-size:24px;108 }109 .rail .letter { font-size:28px; }110 111 /* Keyboard mock */112 .keyboard {113 position:absolute; bottom:0; left:0; width:100%; height:920px; background:#EFEAF6; border-top-left-radius:28px; border-top-right-radius:28px;114 box-shadow:0 -8px 24px rgba(0,0,0,0.08); padding:26px 28px; box-sizing:border-box;115 }116 .kb-top {117 display:flex; align-items:center; gap:28px; margin-bottom:24px;118 }119 .kb-pill { background:#D7EAD6; width:86px; height:86px; border-radius:22px; display:flex; align-items:center; justify-content:center; font-weight:800; color:#3A3F36; }120 .kb-tool { background:#FFFFFF; border:1px solid #DFE3EA; width:86px; height:86px; border-radius:22px; display:flex; align-items:center; justify-content:center; font-weight:800; color:#3A3A3E; }121 .kb-tool.wide { width:132px; }122 .kb-grid { display:grid; grid-template-columns: repeat(10, 1fr); gap:18px; }123 .key {124 background:#FFFFFF; border:1px solid #E1E4EA; border-radius:18px; height:120px; display:flex; align-items:center; justify-content:center;125 font-size:48px; font-weight:700; color:#222;126 }127 .key.pink { background:#F8DDE4; }128 .key.green { background:#D7EAD6; }129 .kb-row { margin-top:18px; }130 .space-row {131 display:grid; grid-template-columns: 170px 1fr 170px 170px; gap:18px; align-items:center; margin-top:18px;132 }133 .space { height:120px; border-radius:22px; background:#FFFFFF; border:1px solid #E1E4EA; display:flex; align-items:center; justify-content:center; color:#666; font-weight:700; }134 .space.long { height:120px; }135 .mic { background:#D7EAD6; border:1px solid #CFE0CD; border-radius:22px; height:120px; display:flex; align-items:center; justify-content:center; font-weight:800; }136 137 /* Simple icons */138 .icon-chat, .icon-call { width:56px; height:56px; }139 .icon-chat path, .icon-call path { fill:#8A8D92; }140</style>141</head>142<body>143<div id="render-target">144 145 <!-- Status Bar -->146 <div class="status-bar">147 <div class="status-left">148 <span style="font-weight:800;">3:30</span>149 <span style="font-size:40px;">🚶</span>150 </div>151 <div class="status-right">152 <!-- WiFi -->153 <svg class="sb-icon" viewBox="0 0 24 24">154 <path d="M12 18c-.8 0-1.5.7-1.5 1.5S11.2 21 12 21s1.5-.7 1.5-1.5S12.8 18 12 18z" fill="#fff"/>155 <path d="M2 8c5.5-5.3 14.5-5.3 20 0l-2 2c-4.3-4.1-11.7-4.1-16 0L2 8z" fill="#fff" opacity="0.7"/>156 <path d="M5 11c4.1-3.9 9.9-3.9 14 0l-2 2c-3-2.8-7-2.8-10 0l-2-2z" fill="#fff" opacity="0.7"/>157 <path d="M8 14c2.6-2.5 6.4-2.5 9 0l-2 2c-1.8-1.7-4.2-1.7-6 0l-2-2z" fill="#fff" opacity="0.7"/>158 </svg>159 <!-- Battery -->160 <div class="battery"><div class="battery-level"></div></div>161 </div>162 </div>163 164 <!-- Header -->165 <div class="header">166 <div class="header-inner">167 <div class="header-action">168 <svg class="icon-chat" viewBox="0 0 24 24">169 <path d="M4 4h16v12H7l-3 3V4z"/>170 </svg>171 <span>New Chat</span>172 </div>173 <div class="header-action">174 <svg class="icon-call" viewBox="0 0 24 24">175 <path d="M6 2l4 2-2 3c1.5 3.2 4.1 5.8 7.3 7.3l3-2 2 4-3 3c-1 .8-2.3 1-3.5.6C8.4 18.7 5.3 15.6 3.1 11.2c-.4-1.2-.2-2.5.6-3.5L6 2z"/>176 </svg>177 <span>New Call</span>178 </div>179 </div>180 </div>181 <div class="header-indicator"></div>182 <div class="header-underline"></div>183 184 <!-- Content -->185 <div class="content">186 <div class="group-name">187 <span>New Group Name</span>188 <div class="pencil"></div>189 </div>190 191 <div class="to-row">192 <strong>To:</strong>193 <div class="chip">Amelia miller</div>194 <div class="chip">Richard Wagner</div>195 </div>196 197 <div class="label">Best Friends</div>198 <div class="card">199 <div class="friend-item">200 <div class="friend-left">201 <div class="avatar">[IMG: Green Avatar]</div>202 <div>203 <div class="friend-name">Amelia miller</div>204 <div class="friend-sub">😊</div>205 </div>206 </div>207 <div class="check">✓</div>208 </div>209 </div>210 211 <div class="label">Recents</div>212 <div class="card">213 <div class="list">214 <div class="list-row">215 <div class="list-left">216 <div class="avatar">[IMG: User Avatar]</div>217 <div class="name-primary">Richard Wagner</div>218 </div>219 <div class="check" style="width:64px;height:64px;">✓</div>220 </div>221 <div class="list-row">222 <div class="list-left">223 <div class="avatar">[IMG: AI Avatar]</div>224 <div>225 <div class="name">My AI</div>226 <div class="sub">🤖 📌</div>227 </div>228 </div>229 <div class="circle"></div>230 </div>231 <div class="list-row">232 <div class="list-left">233 <div class="avatar">[IMG: Red Avatar]</div>234 <div class="name">Natalie</div>235 </div>236 <div class="circle"></div>237 </div>238 </div>239 </div>240 241 <div class="cta">Chat with Group</div>242 </div>243 244 <!-- Right rail -->245 <div class="rail">246 <div class="glyph">🙂</div>247 <div class="glyph">😊</div>248 <div class="letter">A</div>249 <div class="letter">B</div>250 <div class="letter">C</div>251 <div class="letter">D</div>252 <div class="letter">E</div>253 <div class="letter">F</div>254 <div class="letter">G</div>255 <div class="letter">H</div>256 <div class="letter">I</div>257 <div class="letter">J</div>258 <div class="letter">K</div>259 <div class="letter">L</div>260 </div>261 262 <!-- Keyboard -->263 <div class="keyboard">264 <div class="kb-top">265 <div class="kb-pill">◻︎</div>266 <div class="kb-tool">🙂</div>267 <div class="kb-tool wide">GIF</div>268 <div class="kb-tool">⚙️</div>269 <div class="kb-tool">↔️</div>270 <div class="kb-tool">🎨</div>271 <div class="kb-pill">🎙️</div>272 </div>273 274 <div class="kb-grid">275 <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>276 <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>277 </div>278 <div class="kb-grid kb-row" style="grid-template-columns: repeat(9, 1fr); padding:0 54px;">279 <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>280 <div class="key">H</div><div class="key">J</div><div class="key">K</div><div class="key">L</div>281 </div>282 <div class="kb-grid kb-row" style="grid-template-columns: 140px repeat(7, 1fr) 140px;">283 <div class="key pink">⇧</div>284 <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>285 <div class="key pink">⌫</div>286 </div>287 <div class="space-row">288 <div class="space pink">?123</div>289 <div class="space long">Space</div>290 <div class="space">.</div>291 <div class="mic">✓</div>292 </div>293 </div>294 295</div>296</body>297</html>