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>Search UI</title>7<style>8 body { margin: 0; padding: 0; background: transparent; font-family: Roboto, Arial, sans-serif; }9 #render-target {10 position: relative;11 overflow: hidden;12 width: 1080px;13 height: 2400px;14 background: #FFFFFF;15 }16 17 /* Status bar */18 .status-bar {19 position: absolute;20 top: 0;21 left: 0;22 width: 1080px;23 height: 92px;24 padding: 0 36px;25 display: flex;26 align-items: center;27 justify-content: space-between;28 color: #2E2E2E;29 font-size: 36px;30 }31 .status-left { display: flex; align-items: center; gap: 24px; }32 .status-icons { display: flex; gap: 10px; }33 .dot { width: 16px; height: 16px; background: #8E8E8E; border-radius: 50%; }34 .status-right { display: flex; align-items: center; gap: 18px; }35 .icon-small {36 width: 34px; height: 24px; display: inline-block; position: relative;37 }38 .wifi { border: 2px solid #5F5F5F; border-radius: 16px 16px 0 0; border-bottom: none; width: 34px; height: 20px; }39 .battery {40 width: 44px; height: 22px; border: 2px solid #5F5F5F; border-radius: 6px; position: relative;41 }42 .battery::after { content: ''; position: absolute; right: -8px; top: 6px; width: 6px; height: 10px; background: #5F5F5F; border-radius: 2px; }43 .battery-level { position: absolute; left: 3px; top: 3px; width: 28px; height: 14px; background: #5F5F5F; border-radius: 3px; }44 45 /* Search header */46 .search-header {47 position: absolute;48 top: 96px;49 left: 0;50 width: 1080px;51 padding: 28px 36px;52 box-sizing: border-box;53 }54 .search-row {55 display: flex;56 align-items: center;57 gap: 26px;58 }59 .back-btn {60 width: 80px;61 height: 80px;62 border-radius: 40px;63 display: flex;64 align-items: center;65 justify-content: center;66 }67 .back-btn svg { width: 40px; height: 40px; fill: none; stroke: #5F5F5F; stroke-width: 6; }68 .search-bar {69 flex: 1;70 height: 112px;71 background: #F1F3F4;72 border-radius: 56px;73 display: flex;74 align-items: center;75 padding: 0 32px;76 box-sizing: border-box;77 }78 .search-text {79 font-size: 44px;80 color: #202124;81 flex: 1;82 display: flex;83 align-items: center;84 gap: 10px;85 }86 .caret {87 width: 3px;88 height: 50px;89 background: #1A73E8;90 border-radius: 2px;91 margin-left: 6px;92 }93 .clear-btn {94 width: 64px; height: 64px; border-radius: 32px;95 background: #E0E0E0;96 display: flex; align-items: center; justify-content: center;97 margin-left: 12px;98 }99 .clear-btn svg { width: 30px; height: 30px; stroke: #5F5F5F; stroke-width: 6; fill: none; }100 101 /* Results list */102 .results {103 position: absolute;104 top: 260px;105 left: 0;106 width: 1080px;107 padding: 8px 0 0;108 box-sizing: border-box;109 }110 .result-item {111 display: grid;112 grid-template-columns: 120px 1fr 90px;113 align-items: center;114 padding: 26px 36px;115 gap: 10px;116 }117 .left-icon {118 width: 72px; height: 72px;119 border-radius: 36px;120 background: #EEEEEE;121 border: 1px solid #D5D5D5;122 display: flex; align-items: center; justify-content: center;123 }124 .left-icon svg { width: 40px; height: 40px; fill: none; stroke: #7A7A7A; stroke-width: 4; }125 .texts .title { font-size: 40px; color: #202124; font-weight: 600; }126 .texts .subtitle { font-size: 32px; color: #777; margin-top: 8px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }127 .action { display: flex; align-items: center; justify-content: flex-end; }128 .action svg { width: 40px; height: 40px; stroke: #7A7A7A; stroke-width: 6; fill: none; }129 .divider {130 height: 2px; background: #E5E5E5; margin: 0 36px;131 }132 133 /* Keyboard */134 .keyboard {135 position: absolute;136 left: 0;137 bottom: 0;138 width: 1080px;139 height: 920px;140 background: #1F1F1F;141 border-top-left-radius: 32px;142 border-top-right-radius: 32px;143 box-sizing: border-box;144 padding: 24px 24px 40px;145 color: #EDEDED;146 }147 .suggestions {148 display: flex; gap: 24px; padding: 8px 12px 18px;149 }150 .suggestion {151 padding: 12px 24px;152 background: #2A2A2A;153 border-radius: 20px;154 font-size: 34px;155 color: #DADADA;156 }157 .rows { margin-top: 8px; display: flex; flex-direction: column; gap: 18px; }158 .key-row { display: flex; gap: 12px; justify-content: center; }159 .key {160 min-width: 86px;161 height: 120px;162 background: #2A2A2A;163 border-radius: 18px;164 display: flex;165 align-items: center;166 justify-content: center;167 font-size: 42px;168 color: #F5F5F5;169 padding: 0 8px;170 }171 .key.wide { min-width: 140px; }172 .bottom-row { display: flex; gap: 12px; align-items: center; justify-content: center; margin-top: 6px; }173 .space { flex: 1; height: 120px; background: #2A2A2A; border-radius: 18px; }174 .search-btn {175 width: 140px; height: 120px; background: #BFD0E8; color: #22374E;176 border-radius: 24px; display: flex; align-items: center; justify-content: center;177 }178 .search-btn svg { width: 48px; height: 48px; stroke: #22374E; stroke-width: 6; fill: none; }179 .gesture-bar {180 position: absolute; bottom: 16px; left: 50%; transform: translateX(-50%);181 width: 280px; height: 10px; background: #EDEDED; border-radius: 8px; opacity: 0.9;182 }183</style>184</head>185<body>186<div id="render-target">187 188 <!-- Status Bar -->189 <div class="status-bar">190 <div class="status-left">191 <div>6:42</div>192 <div class="status-icons">193 <div class="dot"></div>194 <div class="dot"></div>195 <div class="dot"></div>196 <div class="dot"></div>197 </div>198 <div class="dot" style="margin-left:8px;"></div>199 </div>200 <div class="status-right">201 <div class="wifi"></div>202 <div class="battery"><div class="battery-level"></div></div>203 </div>204 </div>205 206 <!-- Search Header -->207 <div class="search-header">208 <div class="search-row">209 <div class="back-btn">210 <svg viewBox="0 0 24 24">211 <path d="M15 4 L7 12 L15 20" />212 </svg>213 </div>214 <div class="search-bar">215 <div class="search-text">216 <span>Funes</span>217 <span class="caret"></span>218 </div>219 <div class="clear-btn">220 <svg viewBox="0 0 24 24">221 <path d="M5 5 L19 19 M19 5 L5 19" />222 </svg>223 </div>224 </div>225 </div>226 </div>227 228 <!-- Results -->229 <div class="results">230 <div class="result-item">231 <div class="left-icon">232 <!-- clock/history icon -->233 <svg viewBox="0 0 24 24">234 <circle cx="12" cy="12" r="8"></circle>235 <path d="M12 6 L12 12 L16 14"></path>236 </svg>237 </div>238 <div class="texts">239 <div class="title">Funes</div>240 <div class="subtitle">Santa Fe Province, Argentina</div>241 </div>242 <div class="action">243 <svg viewBox="0 0 24 24">244 <path d="M7 17 L17 7 M12 7 H17 V12" />245 </svg>246 </div>247 </div>248 <div class="divider"></div>249 250 <div class="result-item">251 <div class="left-icon">252 <!-- pin icon -->253 <svg viewBox="0 0 24 24">254 <path d="M12 3 C8.7 3 6 5.7 6 9 c0 4.5 6 12 6 12 s6-7.5 6-12 c0-3.3-2.7-6-6-6z"></path>255 <circle cx="12" cy="9" r="3"></circle>256 </svg>257 </div>258 <div class="texts">259 <div class="title">Funes Hills San Marino</div>260 <div class="subtitle">Avenida Fuerza Aerea, Funes, Santa Fe Province...</div>261 </div>262 <div class="action">263 <svg viewBox="0 0 24 24"><path d="M7 17 L17 7 M12 7 H17 V12"/></svg>264 </div>265 </div>266 <div class="divider"></div>267 268 <div class="result-item">269 <div class="left-icon">270 <svg viewBox="0 0 24 24">271 <path d="M12 3 C8.7 3 6 5.7 6 9 c0 4.5 6 12 6 12 s6-7.5 6-12 c0-3.3-2.7-6-6-6z"></path>272 <circle cx="12" cy="9" r="3"></circle>273 </svg>274 </div>275 <div class="texts">276 <div class="title">Funes Hills Cadaques</div>277 <div class="subtitle">Avenida Fuerza Aerea, Funes, Santa Fe Province...</div>278 </div>279 <div class="action">280 <svg viewBox="0 0 24 24"><path d="M7 17 L17 7 M12 7 H17 V12"/></svg>281 </div>282 </div>283 <div class="divider"></div>284 285 <div class="result-item">286 <div class="left-icon">287 <svg viewBox="0 0 24 24">288 <path d="M12 3 C8.7 3 6 5.7 6 9 c0 4.5 6 12 6 12 s6-7.5 6-12 c0-3.3-2.7-6-6-6z"></path>289 <circle cx="12" cy="9" r="3"></circle>290 </svg>291 </div>292 <div class="texts">293 <div class="title">Funes Town</div>294 <div class="subtitle">Av. Juan Gregorio de Las Heras, Funes, Santa Fe Province...</div>295 </div>296 <div class="action">297 <svg viewBox="0 0 24 24"><path d="M7 17 L17 7 M12 7 H17 V12"/></svg>298 </div>299 </div>300 <div class="divider"></div>301 302 <div class="result-item">303 <div class="left-icon">304 <svg viewBox="0 0 24 24">305 <path d="M12 3 C8.7 3 6 5.7 6 9 c0 4.5 6 12 6 12 s6-7.5 6-12 c0-3.3-2.7-6-6-6z"></path>306 <circle cx="12" cy="9" r="3"></circle>307 </svg>308 </div>309 <div class="texts">310 <div class="title">Funes Hills Miraflores</div>311 <div class="subtitle">Funes, Santa Fe Province, Argentina</div>312 </div>313 <div class="action">314 <svg viewBox="0 0 24 24"><path d="M7 17 L17 7 M12 7 H17 V12"/></svg>315 </div>316 </div>317 <div class="divider"></div>318 319 <div class="result-item">320 <div class="left-icon">321 <svg viewBox="0 0 24 24">322 <path d="M12 3 C8.7 3 6 5.7 6 9 c0 4.5 6 12 6 12 s6-7.5 6-12 c0-3.3-2.7-6-6-6z"></path>323 <circle cx="12" cy="9" r="3"></circle>324 </svg>325 </div>326 <div class="texts">327 <div class="title">Funes City</div>328 <div class="subtitle">Vélez Sarsfield, Funes, Santa Fe Province...</div>329 </div>330 <div class="action">331 <svg viewBox="0 0 24 24"><path d="M7 17 L17 7 M12 7 H17 V12"/></svg>332 </div>333 </div>334 <div class="divider"></div>335 336 <div class="result-item">337 <div class="left-icon">338 <svg viewBox="0 0 24 24">339 <path d="M12 3 C8.7 3 6 5.7 6 9 c0 4.5 6 12 6 12 s6-7.5 6-12 c0-3.3-2.7-6-6-6z"></path>340 <circle cx="12" cy="9" r="3"></circle>341 </svg>342 </div>343 <div class="texts">344 <div class="title">Funes</div>345 <div class="subtitle">Roldán, Santa Fe Province, Argentina</div>346 </div>347 <div class="action">348 <svg viewBox="0 0 24 24"><path d="M7 17 L17 7 M12 7 H17 V12"/></svg>349 </div>350 </div>351 </div>352 353 <!-- Keyboard -->354 <div class="keyboard">355 <div class="suggestions">356 <div class="suggestion">Funes</div>357 <div class="suggestion">Dunes</div>358 <div class="suggestion">Dines</div>359 </div>360 361 <div class="rows">362 <div class="key-row">363 <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>364 <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>365 </div>366 <div class="key-row">367 <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>368 <div class="key">h</div><div class="key">j</div><div class="key">k</div><div class="key">l</div>369 </div>370 <div class="key-row">371 <div class="key wide">⇧</div>372 <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>373 <div class="key wide">374 <svg viewBox="0 0 24 24" style="width:38px;height:38px; stroke:#EFEFEF; stroke-width:3; fill:none;">375 <path d="M5 5 L19 19 M5 19 L19 5"></path>376 </svg>377 </div>378 </div>379 <div class="bottom-row">380 <div class="key wide">?123</div>381 <div class="key">,</div>382 <div class="space"></div>383 <div class="key">.</div>384 <div class="key wide">385 <svg viewBox="0 0 24 24" style="width:28px;height:28px; stroke:#EFEFEF; stroke-width:2.5; fill:none;">386 <circle cx="10" cy="10" r="6"></circle>387 <path d="M14 14 L20 20"></path>388 </svg>389 </div>390 <div class="search-btn">391 <svg viewBox="0 0 24 24">392 <circle cx="10" cy="10" r="6"></circle>393 <path d="M14 14 L20 20"></path>394 </svg>395 </div>396 </div>397 </div>398 399 <div class="gesture-bar"></div>400 </div>401 402</div>403</body>404</html>