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 - Delhi</title>7<style>8 body { margin: 0; padding: 0; background: transparent; font-family: Roboto, Arial, sans-serif; }9 #render-target {10 width: 1080px;11 height: 2400px;12 position: relative;13 overflow: hidden;14 background: #262D32; /* dark charcoal */15 border-radius: 0;16 box-shadow: none;17 color: #ECEFF1;18 }19 20 /* Status bar */21 .status-bar {22 position: absolute;23 top: 0;24 left: 0;25 width: 1080px;26 height: 120px;27 background: #2B3238;28 color: #DCE3E8;29 display: flex;30 align-items: center;31 padding: 0 36px;32 box-sizing: border-box;33 font-weight: 500;34 }35 .status-left { font-size: 40px; }36 .status-right {37 margin-left: auto;38 display: flex;39 align-items: center;40 gap: 28px;41 font-size: 32px;42 }43 .status-icon svg { width: 38px; height: 38px; fill: none; stroke: #DCE3E8; stroke-width: 3; }44 45 /* Search area */46 .content {47 position: absolute;48 top: 150px;49 left: 0;50 width: 100%;51 padding: 0 48px;52 box-sizing: border-box;53 }54 .search-row {55 display: flex;56 align-items: center;57 gap: 28px;58 }59 .search-box {60 flex: 1;61 height: 120px;62 background: #333B41;63 border-radius: 16px;64 box-shadow: inset 0 0 0 2px rgba(255,255,255,0.06);65 display: flex;66 align-items: center;67 padding: 0 28px;68 box-sizing: border-box;69 color: #FAFAFA;70 }71 .search-icon { margin-right: 22px; }72 .search-icon svg { width: 44px; height: 44px; stroke: #B0BEC5; stroke-width: 4; fill: none; }73 .search-text { font-size: 48px; letter-spacing: 0.5px; }74 .cancel-btn { color: #C7CDD2; font-size: 42px; }75 76 .use-location {77 display: flex;78 align-items: center;79 gap: 24px;80 margin-top: 44px;81 color: #C7CDD2;82 font-size: 40px;83 }84 .use-location .icon svg { width: 40px; height: 40px; stroke: #C7CDD2; stroke-width: 3; fill: none; }85 86 /* List */87 .results {88 margin-top: 36px;89 background: transparent;90 border-top: 1px solid #3A4248;91 }92 .result-item {93 display: flex;94 align-items: center;95 justify-content: space-between;96 height: 150px;97 border-bottom: 1px solid #3A4248;98 padding: 0 32px;99 box-sizing: border-box;100 }101 .result-title { font-size: 42px; color: #E9EEF2; }102 .favorite {103 display: flex;104 align-items: center;105 gap: 18px;106 color: #C7CDD2;107 font-size: 38px;108 }109 .favorite .plus {110 width: 64px;111 height: 64px;112 border-radius: 50%;113 border: 2px solid #C7CDD2;114 display: flex;115 align-items: center;116 justify-content: center;117 }118 .favorite .plus svg { width: 36px; height: 36px; stroke: #C7CDD2; stroke-width: 4; fill: none; }119 120 /* Keyboard */121 .keyboard {122 position: absolute;123 bottom: 96px;124 left: 0;125 width: 100%;126 height: 980px;127 background: #1B1F22;128 border-top: 1px solid #3A4248;129 box-sizing: border-box;130 padding-top: 18px;131 }132 .suggestions {133 display: flex;134 align-items: center;135 gap: 28px;136 padding: 0 28px 18px;137 box-sizing: border-box;138 }139 .chip {140 background: #2A2F33;141 color: #E0E5EA;142 padding: 18px 26px;143 border-radius: 34px;144 font-size: 38px;145 border: 1px solid #3A4248;146 }147 .suggestions .mic {148 margin-left: auto;149 width: 74px;150 height: 74px;151 background: #2A2F33;152 border-radius: 50%;153 border: 1px solid #3A4248;154 display: flex;155 align-items: center;156 justify-content: center;157 }158 .suggestions .mic svg { width: 38px; height: 38px; stroke: #C7CDD2; stroke-width: 3; fill: none; }159 160 .keys {161 padding: 0 22px;162 box-sizing: border-box;163 display: grid;164 grid-template-rows: repeat(4, 1fr);165 gap: 26px;166 height: 820px;167 }168 .key-row {169 display: grid;170 grid-auto-columns: 1fr;171 grid-auto-flow: column;172 gap: 16px;173 }174 .key {175 background: #2A2F33;176 color: #E6EBEF;177 border-radius: 18px;178 height: 150px;179 display: flex;180 align-items: center;181 justify-content: center;182 font-size: 52px;183 border: 1px solid #3A4248;184 }185 .key.small { font-size: 40px; }186 .key.wide { grid-column: span 2; }187 .key.icon svg { width: 42px; height: 42px; stroke: #E6EBEF; stroke-width: 3; fill: none; }188 .enter-area {189 display: grid;190 grid-template-columns: 1.2fr 1fr 1fr 1fr 2.2fr 1fr 1fr;191 gap: 16px;192 }193 .search-action {194 position: absolute;195 right: 26px;196 bottom: 150px;197 width: 110px;198 height: 110px;199 background: #B9EF74;200 border-radius: 55px;201 display: flex;202 align-items: center;203 justify-content: center;204 }205 .search-action svg { width: 48px; height: 48px; stroke: #1B1F22; stroke-width: 4; fill: none; }206 207 /* Home indicator */208 .home-pill {209 position: absolute;210 bottom: 24px;211 left: 50%;212 transform: translateX(-50%);213 width: 240px;214 height: 12px;215 background: #E6EBEF;216 opacity: 0.7;217 border-radius: 8px;218 }219</style>220</head>221<body>222<div id="render-target">223 224 <!-- Status Bar -->225 <div class="status-bar">226 <div class="status-left">8:18</div>227 <div class="status-right">228 <div class="status-icon" title="Mute">229 <svg viewBox="0 0 24 24"><path d="M4 9h4l5-4v14l-5-4H4z"></path><path d="M16 9l4 4m0-4l-4 4"></path></svg>230 </div>231 <div class="status-icon" title="Do Not Disturb">232 <svg viewBox="0 0 24 24"><circle cx="12" cy="12" r="9"></circle><path d="M6 12h12"></path></svg>233 </div>234 <div class="status-icon" title="Wi-Fi">235 <svg viewBox="0 0 24 24"><path d="M2 8c5-4 15-4 20 0"></path><path d="M5 12c3-3 11-3 14 0"></path><path d="M8 16c2-2 6-2 8 0"></path><circle cx="12" cy="19" r="1.5"></circle></svg>236 </div>237 <div class="status-icon" title="Battery">238 <svg viewBox="0 0 24 24"><rect x="3" y="6" width="16" height="12" rx="2"></rect><rect x="19" y="10" width="2" height="4"></rect><rect x="5" y="8" width="12" height="8" fill="#DCE3E8"></rect></svg>239 </div>240 <div style="font-size:32px;">91%</div>241 </div>242 </div>243 244 <!-- Search Area -->245 <div class="content">246 <div class="search-row">247 <div class="search-box">248 <div class="search-icon">249 <svg viewBox="0 0 24 24"><circle cx="10" cy="10" r="6"></circle><path d="M15 15l5 5"></path></svg>250 </div>251 <div class="search-text">Delhi</div>252 </div>253 <div class="cancel-btn">Cancel</div>254 </div>255 256 <div class="use-location">257 <div class="icon">258 <svg viewBox="0 0 24 24"><path d="M3 11l18-7-7 18-2-7-7-4z"></path></svg>259 </div>260 <div>Use current location</div>261 </div>262 263 <div class="results">264 <div class="result-item">265 <div class="result-title">Delhi, Delhi, IN</div>266 <div class="favorite">267 <div class="plus">268 <svg viewBox="0 0 24 24"><path d="M12 5v14M5 12h14"></path></svg>269 </div>270 <div>Favorite</div>271 </div>272 </div>273 <div class="result-item">274 <div class="result-title">Delhi, Qinghai, CN</div>275 <div class="favorite">276 <div class="plus">277 <svg viewBox="0 0 24 24"><path d="M12 5v14M5 12h14"></path></svg>278 </div>279 <div>Favorite</div>280 </div>281 </div>282 <div class="result-item">283 <div class="result-title">Delhi Cantonment, Delhi, IN</div>284 <div class="favorite">285 <div class="plus">286 <svg viewBox="0 0 24 24"><path d="M12 5v14M5 12h14"></path></svg>287 </div>288 <div>Favorite</div>289 </div>290 </div>291 <div class="result-item">292 <div class="result-title">Delhi, California, US</div>293 <div class="favorite">294 <div class="plus">295 <svg viewBox="0 0 24 24"><path d="M12 5v14M5 12h14"></path></svg>296 </div>297 <div>Favorite</div>298 </div>299 </div>300 <div class="result-item">301 <div class="result-title">Delhi Settlement, Siparia, TT</div>302 <div class="favorite">303 <div class="plus">304 <svg viewBox="0 0 24 24"><path d="M12 5v14M5 12h14"></path></svg>305 </div>306 <div>Favorite</div>307 </div>308 </div>309 <div class="result-item">310 <div class="result-title">Delhi Hills, Ohio, US</div>311 <div class="favorite">312 <div class="plus">313 <svg viewBox="0 0 24 24"><path d="M12 5v14M5 12h14"></path></svg>314 </div>315 <div>Favorite</div>316 </div>317 </div>318 </div>319 </div>320 321 <!-- Keyboard -->322 <div class="keyboard">323 <div class="suggestions">324 <div class="chip">Delhi</div>325 <div class="chip">Dekhi</div>326 <div class="chip">Dekho</div>327 <div class="mic">328 <svg viewBox="0 0 24 24"><rect x="9" y="4" width="6" height="10" rx="3"></rect><path d="M5 11c0 4 3 6 7 6s7-2 7-6M12 17v3M8 20h8"></path></svg>329 </div>330 </div>331 <div class="keys">332 <div class="key-row">333 <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>334 </div>335 <div class="key-row">336 <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><div class="key">h</div><div class="key">j</div><div class="key">k</div><div class="key">l</div>337 </div>338 <div class="key-row">339 <div class="key icon">340 <svg viewBox="0 0 24 24"><path d="M7 15l5-5 5 5"></path></svg>341 </div>342 <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>343 <div class="key icon">344 <svg viewBox="0 0 24 24"><path d="M4 12h12M12 6l6 6-6 6"></path></svg>345 </div>346 </div>347 <div class="key-row enter-area">348 <div class="key small">?123</div>349 <div class="key small">,</div>350 <div class="key small">🙂</div>351 <div class="key wide"></div>352 <div class="key wide"></div>353 <div class="key small">.</div>354 <div class="key icon">355 <svg viewBox="0 0 24 24"><circle cx="10" cy="10" r="6"></circle><path d="M15 15l5 5"></path></svg>356 </div>357 </div>358 </div>359 <div class="search-action" title="Search">360 <svg viewBox="0 0 24 24"><circle cx="10" cy="10" r="6"></circle><path d="M15 15l5 5"></path></svg>361 </div>362 </div>363 364 <div class="home-pill"></div>365</div>366</body>367</html>