GD-ML/AndroidCode
13.4k
1<!DOCTYPE html>2<html>3<head>4<meta charset="UTF-8">5<meta name="viewport" content="width=1080, initial-scale=1.0">6<title>Main Group – Search</title>7<style>8 body { margin: 0; padding: 0; background: transparent; }9 #render-target {10 width: 1080px; height: 2400px;11 position: relative; overflow: hidden;12 background: #111;13 color: #EDEDED;14 font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Inter, "Helvetica Neue", Arial, sans-serif;15 }16 17 /* Status bar */18 .status-bar {19 position: absolute; top: 0; left: 0; right: 0;20 height: 96px;21 padding: 0 32px;22 display: flex; align-items: center; justify-content: space-between;23 color: #fff;24 font-size: 36px; font-weight: 500;25 }26 .status-icons { display: flex; align-items: center; gap: 22px; }27 .status-dot { width: 10px; height: 10px; background: #BDBDBD; border-radius: 50%; }28 29 /* Header */30 .header {31 position: absolute; top: 96px; left: 0; right: 0;32 height: 150px;33 display: flex; align-items: center;34 padding: 0 32px;35 }36 .back-btn {37 width: 72px; height: 72px; display: flex; align-items: center; justify-content: center;38 }39 .title {40 position: absolute; left: 0; right: 0;41 text-align: center;42 font-size: 64px; font-weight: 500; color: #ffffff;43 }44 45 /* Search area */46 .search-area {47 position: absolute; top: 246px; left: 0; right: 0;48 padding: 0 36px 24px 36px;49 }50 .search-row {51 display: flex; align-items: center; justify-content: space-between;52 height: 100px;53 }54 .placeholder {55 color: #9E9E9E; font-size: 40px;56 }57 .divider {58 height: 2px; background: #3A3A3A; width: 100%;59 }60 61 /* Content (empty dark area) */62 .content {63 position: absolute; top: 370px; left: 0; right: 0;64 bottom: 980px; /* space reserved for keyboard */65 background: #121212;66 }67 68 /* Keyboard mock */69 .keyboard {70 position: absolute; left: 0; right: 0; bottom: 0;71 height: 980px;72 background: #1a1a1a;73 border-top: 1px solid #2b2b2b;74 padding: 24px 24px 56px 24px;75 box-sizing: border-box;76 }77 78 .kb-tools {79 display: flex; align-items: center; justify-content: space-between;80 padding: 12px 24px;81 color: #cfcfcf;82 }83 84 .tool-icon {85 width: 72px; height: 72px;86 border-radius: 18px;87 background: #222;88 border: 1px solid #333;89 display: flex; align-items: center; justify-content: center;90 }91 92 .kb-row {93 display: flex; gap: 16px;94 padding: 18px 12px;95 }96 97 .key {98 flex: 1;99 height: 120px;100 background: #2a2a2a;101 border: 1px solid #3a3a3a;102 border-radius: 22px;103 color: #eee;104 font-size: 44px;105 display: flex; align-items: center; justify-content: center;106 }107 .key.sm { flex: 0 0 96px; }108 .key.back { flex: 0 0 170px; }109 .key.wide { flex: 2.6; }110 .key.space { flex: 6; border-radius: 24px; color: #cfcfcf; font-size: 34px; }111 112 /* Bottom gesture bar */113 .gesture {114 position: absolute; bottom: 18px; left: 50%; transform: translateX(-50%);115 width: 360px; height: 12px; border-radius: 8px; background: #9E9E9E;116 opacity: 0.6;117 }118 119 /* SVG styling helpers */120 svg { display: block; }121 .icon { width: 48px; height: 48px; }122 .icon.small { width: 36px; height: 36px; }123 .icon.white path, .icon.white circle, .icon.white rect, .icon.white line { stroke: #fff; fill: none; }124 .icon.gray path, .icon.gray circle, .icon.gray rect, .icon.gray line { stroke: #CFCFCF; fill: none; }125 126</style>127</head>128<body>129<div id="render-target">130 131 <!-- Status Bar -->132 <div class="status-bar">133 <div>9:28</div>134 <div class="status-icons">135 <!-- simple "mute" icon -->136 <svg class="icon white" viewBox="0 0 48 48">137 <path d="M8 18h8l10-8v28l-10-8H8z" stroke-width="3"/>138 <path d="M32 16l8 8" stroke-width="3"/>139 <path d="M40 16l-8 8" stroke-width="3"/>140 </svg>141 <!-- wifi icon -->142 <svg class="icon white" viewBox="0 0 48 48">143 <path d="M6 18c9-8 27-8 36 0" stroke-width="3"/>144 <path d="M12 24c6-5 18-5 24 0" stroke-width="3"/>145 <path d="M18 30c3-3 9-3 12 0" stroke-width="3"/>146 <circle cx="24" cy="36" r="2.8" fill="#fff"/>147 </svg>148 <!-- battery icon -->149 <svg class="icon white" viewBox="0 0 48 48">150 <rect x="8" y="12" width="28" height="24" rx="3" stroke-width="3"/>151 <rect x="12" y="16" width="20" height="16" fill="#fff"/>152 <rect x="36" y="18" width="4" height="12" rx="1" stroke-width="3"/>153 </svg>154 </div>155 </div>156 157 <!-- Header -->158 <div class="header">159 <div class="back-btn">160 <svg class="icon white" viewBox="0 0 48 48">161 <path d="M30 10L14 24l16 14" stroke-width="4"/>162 </svg>163 </div>164 <div class="title">Main Group</div>165 </div>166 167 <!-- Search area -->168 <div class="search-area">169 <div class="search-row">170 <div class="placeholder">Enter name of city or timezone</div>171 <div class="back-btn" style="width:72px;height:72px;">172 <svg class="icon white" viewBox="0 0 48 48">173 <circle cx="22" cy="22" r="10" stroke-width="3"/>174 <line x1="32" y1="32" x2="44" y2="44" stroke-width="4"/>175 </svg>176 </div>177 </div>178 <div class="divider"></div>179 </div>180 181 <!-- Content area -->182 <div class="content"></div>183 184 <!-- Keyboard -->185 <div class="keyboard">186 <div class="kb-tools">187 <div class="tool-icon">188 <!-- grid icon -->189 <svg class="icon gray" viewBox="0 0 48 48">190 <rect x="8" y="8" width="10" height="10" stroke-width="3"/>191 <rect x="20" y="8" width="10" height="10" stroke-width="3"/>192 <rect x="32" y="8" width="10" height="10" stroke-width="3"/>193 <rect x="8" y="20" width="10" height="10" stroke-width="3"/>194 <rect x="20" y="20" width="10" height="10" stroke-width="3"/>195 <rect x="32" y="20" width="10" height="10" stroke-width="3"/>196 </svg>197 </div>198 <div class="tool-icon">199 <!-- smile -->200 <svg class="icon gray" viewBox="0 0 48 48">201 <circle cx="24" cy="24" r="16" stroke-width="3"/>202 <circle cx="18" cy="20" r="2" fill="#CFCFCF"/>203 <circle cx="30" cy="20" r="2" fill="#CFCFCF"/>204 <path d="M16 28c4 4 12 4 16 0" stroke-width="3"/>205 </svg>206 </div>207 <div class="tool-icon">208 <!-- GIF text -->209 <svg class="icon gray" viewBox="0 0 48 48">210 <path d="M10 32h8M10 16h10v8h-6" stroke-width="3"/>211 <path d="M22 16v16" stroke-width="3"/>212 <path d="M28 16h10M33 24h5" stroke-width="3"/>213 </svg>214 </div>215 <div class="tool-icon">216 <!-- gear -->217 <svg class="icon gray" viewBox="0 0 48 48">218 <circle cx="24" cy="24" r="6" stroke-width="3"/>219 <path d="M24 10v6M24 32v6M12 24h6M30 24h6M16 16l4 4M28 28l4 4M16 32l4-4M28 20l4-4" stroke-width="3"/>220 </svg>221 </div>222 <div class="tool-icon">223 <!-- translate -->224 <svg class="icon gray" viewBox="0 0 48 48">225 <path d="M12 34l8-20 8 20" stroke-width="3"/>226 <path d="M15 26h10" stroke-width="3"/>227 <rect x="28" y="14" width="12" height="20" rx="2" stroke-width="3"/>228 <path d="M30 20h8" stroke-width="3"/>229 </svg>230 </div>231 <div class="tool-icon">232 <!-- palette -->233 <svg class="icon gray" viewBox="0 0 48 48">234 <path d="M24 8c-9 0-16 7-16 16 0 6 4 8 8 8h6c2 0 3 2 3 4" stroke-width="3"/>235 <circle cx="16" cy="18" r="2" fill="#CFCFCF"/>236 <circle cx="22" cy="14" r="2" fill="#CFCFCF"/>237 <circle cx="28" cy="18" r="2" fill="#CFCFCF"/>238 </svg>239 </div>240 <div class="tool-icon">241 <!-- mic -->242 <svg class="icon gray" viewBox="0 0 48 48">243 <rect x="18" y="12" width="12" height="18" rx="6" stroke-width="3"/>244 <path d="M12 24c0 8 8 12 12 12s12-4 12-12" stroke-width="3"/>245 <path d="M24 36v6" stroke-width="3"/>246 </svg>247 </div>248 </div>249 250 <!-- QWERTY row -->251 <div class="kb-row">252 <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>253 <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>254 </div>255 256 <!-- ASDF row -->257 <div class="kb-row">258 <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>259 <div class="key">h</div><div class="key">j</div><div class="key">k</div><div class="key">l</div>260 </div>261 262 <!-- ZXCV row -->263 <div class="kb-row">264 <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>265 <div class="key">n</div><div class="key">m</div>266 <div class="key back">267 <svg class="icon gray" viewBox="0 0 48 48">268 <path d="M10 24l8-8h20v16H18z" stroke-width="3"/>269 <path d="M26 20l6 4-6 4" stroke-width="3"/>270 </svg>271 </div>272 </div>273 274 <!-- Bottom row -->275 <div class="kb-row">276 <div class="key back">?123</div>277 <div class="key sm">,</div>278 <div class="key sm">279 <!-- emoji -->280 <svg class="icon gray" viewBox="0 0 48 48">281 <circle cx="24" cy="24" r="16" stroke-width="3"/>282 <circle cx="18" cy="20" r="2" fill="#CFCFCF"/>283 <circle cx="30" cy="20" r="2" fill="#CFCFCF"/>284 <path d="M16 28c4 4 12 4 16 0" stroke-width="3"/>285 </svg>286 </div>287 <div class="key space">space</div>288 <div class="key sm">.</div>289 <div class="key back">290 <!-- search/enter circular button -->291 <svg class="icon gray" viewBox="0 0 48 48">292 <circle cx="22" cy="22" r="10" stroke-width="3"/>293 <line x1="32" y1="32" x2="44" y2="44" stroke-width="4"/>294 </svg>295 </div>296 </div>297 298 <div class="gesture"></div>299 </div>300</div>301</body>302</html>