GD-ML/AndroidCode
13.4k
1<!DOCTYPE html>2<html>3<head>4<meta charset="UTF-8">5<title>Main Group - Search</title>6<style>7 body { margin: 0; padding: 0; background: transparent; font-family: system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif; }8 #render-target {9 width: 1080px; height: 2400px; position: relative; overflow: hidden;10 background: #121212; color: #FFFFFF;11 }12 13 /* Status bar */14 .status-bar {15 position: absolute; top: 0; left: 0; width: 100%; height: 70px;16 padding: 0 32px; box-sizing: border-box; display: flex; align-items: center; justify-content: space-between;17 color: #fff; font-size: 28px;18 }19 .status-left { display: flex; align-items: center; gap: 18px; }20 .status-right { display: flex; align-items: center; gap: 24px; }21 .status-icon {22 width: 26px; height: 26px; border-radius: 14px; border: 2px solid #A7A7A7;23 opacity: 0.9;24 }25 .wifi {26 width: 36px; height: 24px;27 }28 .wifi svg { display: block; }29 .battery {30 width: 52px; height: 24px; border: 2px solid #BDBDBD; border-radius: 4px; position: relative;31 }32 .battery::after {33 content: ""; position: absolute; right: -8px; top: 7px; width: 6px; height: 10px; background: #BDBDBD; border-radius: 2px;34 }35 .battery .level { position: absolute; left: 2px; top: 2px; height: 18px; width: 28px; background: #BDBDBD; border-radius: 2px; }36 37 /* Header */38 .header {39 position: absolute; top: 70px; left: 0; width: 100%; height: 160px; display: flex; align-items: center; justify-content: center;40 }41 .header-title {42 font-size: 48px; font-weight: 500; letter-spacing: 0.3px;43 }44 .back-btn {45 position: absolute; left: 24px; top: 42px; width: 56px; height: 56px; display: flex; align-items: center; justify-content: center;46 }47 .close-btn {48 position: absolute; right: 24px; bottom: 20px; width: 56px; height: 56px; display: flex; align-items: center; justify-content: center;49 }50 51 /* Search input line */52 .search-line {53 position: absolute; top: 210px; left: 0; width: 100%; padding: 0 48px 18px 72px; box-sizing: border-box;54 border-bottom: 1px solid #2E2E2E;55 }56 .search-text {57 font-size: 40px; color: #FFFFFF; position: relative;58 }59 .caret {60 position: absolute; width: 3px; height: 54px; background: #D55AFF; margin-left: 8px; top: -6px;61 }62 63 /* Results list */64 .results {65 position: absolute; top: 292px; left: 0; width: 100%; padding: 0 32px; box-sizing: border-box;66 }67 .result-item {68 display: flex; align-items: center; justify-content: space-between;69 padding: 34px 8px; border-bottom: 1px solid #2A2A2A;70 }71 .result-left { display: flex; align-items: flex-start; gap: 30px; }72 .pin {73 width: 40px; height: 40px; margin-top: 10px;74 }75 .place-text { display: flex; flex-direction: column; gap: 12px; }76 .place-title { font-size: 42px; font-weight: 500; color: #FFFFFF; }77 .place-sub { font-size: 32px; color: #BDBDBD; }78 .flag {79 width: 132px; height: 88px; background: #E0E0E0; border: 1px solid #BDBDBD; border-radius: 4px;80 display: flex; align-items: center; justify-content: center; color: #757575; font-size: 26px; text-align: center; padding: 6px;81 }82 83 /* Keyboard */84 .keyboard {85 position: absolute; left: 0; bottom: 0; width: 100%; height: 980px; background: #1B1B1B; border-top: 1px solid #2A2A2A;86 box-sizing: border-box;87 }88 .suggest-strip {89 height: 90px; display: flex; align-items: center; padding: 0 24px; box-sizing: border-box; color: #EAEAEA;90 border-bottom: 1px solid #2A2A2A; gap: 18px; font-size: 34px;91 }92 .kbd-icon {93 width: 56px; height: 56px; border-radius: 12px; background: #2A2A2A; display: flex; align-items: center; justify-content: center;94 }95 .suggest-divider { width: 2px; height: 40px; background: #3A3A3A; }96 .suggest { padding: 14px 26px; background: #2A2A2A; border-radius: 22px; }97 .suggest-strip .spacer { flex: 1; }98 .keys { padding: 24px 22px; box-sizing: border-box; display: grid; grid-template-rows: repeat(4, 1fr); gap: 20px; }99 .row { display: flex; gap: 18px; justify-content: center; }100 .key {101 height: 120px; min-width: 86px; padding: 0 22px; background: #2B2B2B; border-radius: 18px; display: flex; align-items: center; justify-content: center;102 color: #FFFFFF; font-size: 42px; box-shadow: inset 0 0 0 1px #3A3A3A;103 }104 .key.wide { min-width: 180px; }105 .key.space { flex: 1; }106 .key.extra { background: #3D3D3D; color: #E1E1E1; }107 .key.search {108 background: #CFE0FF; color: #1A1A1A; font-weight: 600;109 }110 .gesture-pill {111 position: absolute; bottom: 22px; left: 50%; transform: translateX(-50%);112 width: 220px; height: 8px; background: #EDEDED; border-radius: 4px; opacity: 0.9;113 }114</style>115</head>116<body>117<div id="render-target">118 119 <!-- Status bar -->120 <div class="status-bar">121 <div class="status-left">122 <div style="font-weight:600;">9:30</div>123 <div class="status-icon"></div>124 <div class="status-icon"></div>125 <div class="status-icon"></div>126 <div class="status-icon"></div>127 <div style="width:10px;height:10px;background:#BDBDBD;border-radius:50%;"></div>128 </div>129 <div class="status-right">130 <div class="status-icon"></div>131 <div class="wifi">132 <svg width="36" height="24" viewBox="0 0 36 24">133 <path d="M4 8c8-6 20-6 28 0" stroke="#BDBDBD" stroke-width="2.8" fill="none" stroke-linecap="round"/>134 <path d="M8 12c6-4 14-4 20 0" stroke="#BDBDBD" stroke-width="2.8" fill="none" stroke-linecap="round"/>135 <circle cx="18" cy="18" r="3" fill="#BDBDBD"/>136 </svg>137 </div>138 <div class="battery"><div class="level"></div></div>139 </div>140 </div>141 142 <!-- Header -->143 <div class="header">144 <div class="header-title">Main Group</div>145 <div class="back-btn">146 <svg width="44" height="44" viewBox="0 0 24 24">147 <path d="M15 5L7 12l8 7" stroke="#FFFFFF" stroke-width="2.4" fill="none" stroke-linecap="round" stroke-linejoin="round"/>148 </svg>149 </div>150 <div class="close-btn">151 <svg width="44" height="44" viewBox="0 0 24 24">152 <path d="M6 6l12 12M18 6L6 18" stroke="#FFFFFF" stroke-width="2.4" stroke-linecap="round"/>153 </svg>154 </div>155 </div>156 157 <!-- Search line -->158 <div class="search-line">159 <div class="search-text">Sydney<span class="caret"></span></div>160 </div>161 162 <!-- Results -->163 <div class="results">164 <div class="result-item">165 <div class="result-left">166 <div class="pin">167 <svg width="40" height="40" viewBox="0 0 24 24">168 <path d="M12 2a7 7 0 0 0-7 7c0 5 7 13 7 13s7-8 7-13a7 7 0 0 0-7-7zm0 9a2 2 0 1 1 0-4 2 2 0 0 1 0 4z" fill="#FFFFFF"/>169 </svg>170 </div>171 <div class="place-text">172 <div class="place-title">Sydney</div>173 <div class="place-sub">New South Wales, Australia</div>174 </div>175 </div>176 <div class="flag">[IMG: Flag - Australia]</div>177 </div>178 179 <div class="result-item">180 <div class="result-left">181 <div class="pin">182 <svg width="40" height="40" viewBox="0 0 24 24">183 <path d="M12 2a7 7 0 0 0-7 7c0 5 7 13 7 13s7-8 7-13a7 7 0 0 0-7-7zm0 9a2 2 0 1 1 0-4 2 2 0 0 1 0 4z" fill="#FFFFFF"/>184 </svg>185 </div>186 <div class="place-text">187 <div class="place-title">Sydney</div>188 <div class="place-sub">Nova Scotia, Canada</div>189 </div>190 </div>191 <div class="flag">[IMG: Flag - Canada]</div>192 </div>193 194 <div class="result-item">195 <div class="result-left">196 <div class="pin">197 <svg width="40" height="40" viewBox="0 0 24 24">198 <path d="M12 2a7 7 0 0 0-7 7c0 5 7 13 7 13s7-8 7-13a7 7 0 0 0-7-7zm0 9a2 2 0 1 1 0-4 2 2 0 0 1 0 4z" fill="#FFFFFF"/>199 </svg>200 </div>201 <div class="place-text">202 <div class="place-title">Sydney Central Business District</div>203 <div class="place-sub">New South Wales, Australia</div>204 </div>205 </div>206 <div class="flag">[IMG: Flag - Australia]</div>207 </div>208 209 <div class="result-item">210 <div class="result-left">211 <div class="pin">212 <svg width="40" height="40" viewBox="0 0 24 24">213 <path d="M12 2a7 7 0 0 0-7 7c0 5 7 13 7 13s7-8 7-13a7 7 0 0 0-7-7zm0 9a2 2 0 1 1 0-4 2 2 0 0 1 0 4z" fill="#FFFFFF"/>214 </svg>215 </div>216 <div class="place-text">217 <div class="place-title">North Sydney</div>218 <div class="place-sub">New South Wales, Australia</div>219 </div>220 </div>221 <div class="flag">[IMG: Flag - Australia]</div>222 </div>223 224 <div class="result-item" style="border-bottom: none;">225 <div class="result-left">226 <div class="pin">227 <svg width="40" height="40" viewBox="0 0 24 24">228 <path d="M12 2a7 7 0 0 0-7 7c0 5 7 13 7 13s7-8 7-13a7 7 0 0 0-7-7zm0 9a2 2 0 1 1 0-4 2 2 0 0 1 0 4z" fill="#FFFFFF"/>229 </svg>230 </div>231 <div class="place-text">232 <div class="place-title">Sydney Mines</div>233 <div class="place-sub">Nova Scotia, Canada</div>234 </div>235 </div>236 <div class="flag">[IMG: Flag - Canada]</div>237 </div>238 </div>239 240 <!-- Keyboard -->241 <div class="keyboard">242 <div class="suggest-strip">243 <div class="kbd-icon">244 <svg width="32" height="32" viewBox="0 0 24 24">245 <rect x="3" y="4" width="18" height="16" rx="2" fill="#6A6A6A"/>246 <rect x="6" y="7" width="3" height="3" rx="1" fill="#9A9A9A"/>247 <rect x="11" y="7" width="3" height="3" rx="1" fill="#9A9A9A"/>248 <rect x="16" y="7" width="3" height="3" rx="1" fill="#9A9A9A"/>249 </svg>250 </div>251 <div class="suggest">Sydney</div>252 <div class="suggest-divider"></div>253 <div class="suggest">Sydney's</div>254 <div class="spacer"></div>255 <div class="kbd-icon">256 <svg width="26" height="26" viewBox="0 0 24 24">257 <path d="M12 19a7 7 0 0 0 7-7V9a7 7 0 1 0-14 0v3a7 7 0 0 0 7 7z" stroke="#CFCFCF" stroke-width="2" fill="none"/>258 <rect x="10" y="16" width="4" height="4" rx="2" fill="#CFCFCF"/>259 </svg>260 </div>261 </div>262 263 <div class="keys">264 <div class="row">265 <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>266 </div>267 <div class="row">268 <div class="key wide">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 wide">l</div>269 </div>270 <div class="row">271 <div class="key extra">⇧</div>272 <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>273 <div class="key extra">274 <svg width="36" height="36" viewBox="0 0 24 24">275 <path d="M6 7h12M6 12h8M6 17h12" stroke="#FFFFFF" stroke-width="2" stroke-linecap="round"/>276 </svg>277 </div>278 </div>279 <div class="row">280 <div class="key extra">?123</div>281 <div class="key">,</div>282 <div class="key space"></div>283 <div class="key">.</div>284 <div class="key search">285 <svg width="36" height="36" viewBox="0 0 24 24">286 <circle cx="11" cy="11" r="6" stroke="#1A1A1A" stroke-width="2" fill="none"/>287 <path d="M16 16l5 5" stroke="#1A1A1A" stroke-width="2" stroke-linecap="round"/>288 </svg>289 </div>290 </div>291 </div>292 <div class="gesture-pill"></div>293 </div>294 295</div>296</body>297</html>