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: system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif; }9 #render-target {10 width: 1080px;11 height: 2400px;12 position: relative;13 overflow: hidden;14 background: #FFFFFF;15 border-radius: 28px;16 box-shadow: 0 4px 18px rgba(0,0,0,0.08);17 color: #212121;18 }19 20 /* Status bar */21 .status-bar {22 height: 110px;23 padding: 0 36px;24 display: flex;25 align-items: center;26 justify-content: space-between;27 color: #2E2E2E;28 font-size: 34px;29 }30 .status-right { display: flex; align-items: center; gap: 26px; }31 .status-icon svg { width: 36px; height: 36px; fill: none; stroke: #2E2E2E; stroke-width: 2.5; }32 33 /* Search */34 .search-area { padding: 12px 36px 10px 36px; }35 .searchbar {36 height: 112px;37 background: #F3F4F6;38 border: 1px solid #E0E0E0;39 border-radius: 56px;40 display: flex;41 align-items: center;42 padding: 0 28px;43 gap: 22px;44 }45 .searchbar svg { width: 48px; height: 48px; stroke: #70757a; }46 .search-placeholder {47 flex: 1;48 font-size: 36px;49 color: #7A7A7A;50 }51 52 /* Shortcut chips */53 .chips {54 display: flex;55 align-items: stretch;56 padding: 18px 36px 8px 36px;57 gap: 24px;58 }59 .chip {60 flex: none;61 width: 232px;62 background: #FFFFFF;63 border: 1px solid #E6E6E6;64 border-radius: 24px;65 padding: 20px 18px;66 display: flex;67 align-items: center;68 gap: 18px;69 box-shadow: 0 1px 0 rgba(0,0,0,0.06);70 }71 .chip-icon {72 width: 58px;73 height: 58px;74 border-radius: 29px;75 background: #F3F3F3;76 border: 1px solid #E0E0E0;77 display: grid;78 place-items: center;79 }80 .chip svg { width: 34px; height: 34px; stroke: #5F6368; fill: none; stroke-width: 2.5; }81 .chip-text .t { font-size: 30px; font-weight: 600; }82 .chip-text .s { font-size: 26px; color: #8C8C8C; margin-top: 6px; }83 .chip-divider {84 width: 1px;85 background: #E6E6E6;86 margin: 0 4px;87 }88 .more-chip { width: 160px; justify-content: center; }89 90 /* Section divider + title */91 .section-divider { height: 1px; background: #EAEAEA; margin: 24px 0 6px 0; }92 .section-title {93 font-size: 32px;94 color: #6F6F6F;95 padding: 0 36px;96 }97 98 /* Recent list */99 .list { margin-top: 8px; }100 .item {101 display: flex;102 align-items: flex-start;103 padding: 26px 36px;104 gap: 22px;105 }106 .item-icon {107 width: 62px; height: 62px;108 border-radius: 31px;109 border: 1px solid #D9D9D9;110 background: #F5F5F5;111 display: grid; place-items: center;112 }113 .item-icon svg { width: 34px; height: 34px; stroke: #70757a; fill: none; stroke-width: 2.5; }114 .item-text .title { font-size: 36px; font-weight: 600; line-height: 1.2; }115 .item-text .sub { font-size: 26px; color: #7A7A7A; margin-top: 10px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 860px; }116 .row-divider { height: 1px; background: #EAEAEA; margin: 12px 36px; }117 118 /* Keyboard placeholder */119 .keyboard {120 position: absolute;121 left: 0; right: 0; bottom: 0;122 height: 820px;123 background: #EEF0E8;124 border-top: 1px solid #E0E0E0;125 }126 .kb-top {127 height: 110px;128 display: flex;129 align-items: center;130 gap: 26px;131 padding: 0 24px;132 }133 .kb-top .pill {134 height: 72px;135 padding: 0 26px;136 border-radius: 36px;137 background: #FFFFFF;138 border: 1px solid #E1E1E1;139 display: flex; align-items: center; gap: 16px;140 font-size: 28px; color: #5F6368;141 }142 .kb-top svg { width: 30px; height: 30px; stroke: #5F6368; fill: none; stroke-width: 2.4; }143 144 .keys { padding: 8px 18px 0; display: grid; gap: 18px; }145 .row { display: grid; grid-template-columns: repeat(10, 1fr); gap: 14px; }146 .row.mid { grid-template-columns: repeat(9, 1fr); }147 .row.bottom { grid-template-columns: 1.2fr 1.2fr repeat(7, 1fr) 1.4fr 1.4fr; }148 .key {149 height: 116px;150 border-radius: 18px;151 background: #FFFFFF;152 border: 1px solid #E1E1E1;153 display: grid; place-items: center;154 font-size: 44px; color: #2E2E2E;155 box-shadow: 0 1px 0 rgba(0,0,0,0.05);156 }157 .key.small { font-size: 34px; color: #4A4A4A; }158 .key.green { background: #DDE9D3; border-color: #C9D9BF; }159 .home-indicator {160 position: absolute; bottom: 22px; left: 50%;161 transform: translateX(-50%);162 width: 240px; height: 8px; border-radius: 8px;163 background: #BDBDBD;164 }165</style>166</head>167<body>168<div id="render-target">169 170 <!-- Status Bar -->171 <div class="status-bar">172 <div class="status-left">3:33</div>173 <div class="status-right">174 <div class="status-icon">175 <svg viewBox="0 0 24 24"><path d="M12 3c-3.9 0-7 3.1-7 7 0 6 7 11 7 11s7-5 7-11c0-3.9-3.1-7-7-7z"/><circle cx="12" cy="10" r="3"/></svg>176 </div>177 <div class="status-icon">178 <svg viewBox="0 0 24 24"><path d="M3 16c3-3 7-3 11 0m-7-4c2-2 5-2 7 0m-3-4c1-1 3-1 4 0" stroke-linecap="round"/></svg>179 </div>180 <div class="status-icon">181 <svg viewBox="0 0 24 24"><rect x="3" y="6" width="16" height="12" rx="2"/><rect x="20" y="10" width="2" height="4"/></svg>182 </div>183 </div>184 </div>185 186 <!-- Search -->187 <div class="search-area">188 <div class="searchbar">189 <svg viewBox="0 0 24 24"><circle cx="10" cy="10" r="6" fill="none" stroke-width="2.5"/><path d="M14.5 14.5L20 20" stroke-width="2.5" stroke-linecap="round"/></svg>190 <div class="search-placeholder">Search here</div>191 <svg viewBox="0 0 24 24"><rect x="10" y="4" width="4" height="10" rx="2"/><path d="M6 11c0 3 3 5 6 5s6-2 6-5M12 16v4" stroke-width="2.5" stroke-linecap="round"/></svg>192 </div>193 </div>194 195 <!-- Shortcut chips -->196 <div class="chips">197 <div class="chip">198 <div class="chip-icon">199 <svg viewBox="0 0 24 24"><path d="M4 11l8-6 8 6v8H4v-8z"/><path d="M9 19v-5h6v5"/></svg>200 </div>201 <div class="chip-text">202 <div class="t">Home</div>203 <div class="s">Set location</div>204 </div>205 </div>206 207 <div class="chip-divider"></div>208 209 <div class="chip">210 <div class="chip-icon">211 <svg viewBox="0 0 24 24"><path d="M6 8h12v10H6z"/><path d="M9 6h6v2H9z"/></svg>212 </div>213 <div class="chip-text">214 <div class="t">Work</div>215 <div class="s">Set location</div>216 </div>217 </div>218 219 <div class="chip-divider"></div>220 221 <div class="chip more-chip">222 <div class="chip-icon">223 <svg viewBox="0 0 24 24"><circle cx="6" cy="12" r="2"/><circle cx="12" cy="12" r="2"/><circle cx="18" cy="12" r="2"/></svg>224 </div>225 <div class="chip-text">226 <div class="t">More</div>227 <div class="s"> </div>228 </div>229 </div>230 </div>231 232 <div class="section-divider"></div>233 <div class="section-title">Recent</div>234 235 <!-- Recent list items -->236 <div class="list">237 <div class="item">238 <div class="item-icon">239 <svg viewBox="0 0 24 24"><path d="M12 3c-3.9 0-7 3.1-7 7 0 6 7 11 7 11s7-5 7-11c0-3.9-3.1-7-7-7z"/><circle cx="12" cy="10" r="3"/></svg>240 </div>241 <div class="item-text">242 <div class="title">Noida sector 51</div>243 <div class="sub">H9J8+QMF, Hoshiarpur, Hoshiarpur Village, S...</div>244 </div>245 </div>246 <div class="row-divider"></div>247 248 <div class="item">249 <div class="item-icon">250 <svg viewBox="0 0 24 24"><path d="M12 3c-3.9 0-7 3.1-7 7 0 6 7 11 7 11s7-5 7-11c0-3.9-3.1-7-7-7z"/><circle cx="12" cy="10" r="3"/></svg>251 </div>252 <div class="item-text">253 <div class="title">Taj Mahal</div>254 <div class="sub">Dharmapuri, Forest Colony, Tajganj, Agra, Uttar...</div>255 </div>256 </div>257 <div class="row-divider"></div>258 259 <div class="item">260 <div class="item-icon">261 <svg viewBox="0 0 24 24"><circle cx="12" cy="12" r="9"/><path d="M12 7v6l4 2" stroke-linecap="round"/></svg>262 </div>263 <div class="item-text">264 <div class="title">Puri High Street</div>265 <div class="sub">Puri High Street, Sector 81, Faridabad, Haryana</div>266 </div>267 </div>268 <div class="row-divider"></div>269 270 <div class="item">271 <div class="item-icon">272 <svg viewBox="0 0 24 24"><circle cx="12" cy="12" r="9"/><path d="M12 7v6l4 2" stroke-linecap="round"/></svg>273 </div>274 <div class="item-text">275 <div class="title">Faridabad, Haryana</div>276 <div class="sub">Recent search</div>277 </div>278 </div>279 <div class="row-divider"></div>280 281 <div class="item">282 <div class="item-icon">283 <svg viewBox="0 0 24 24"><circle cx="12" cy="12" r="9"/><path d="M12 7v6l4 2" stroke-linecap="round"/></svg>284 </div>285 <div class="item-text">286 <div class="title">Amolik heights RPS CITY ,sector 88 FBD.</div>287 <div class="sub">Amolik Heights, RPS City, Sector 88, Faridabad,...</div>288 </div>289 </div>290 <div class="row-divider"></div>291 </div>292 293 <!-- Keyboard placeholder -->294 <div class="keyboard">295 <div class="kb-top">296 <div class="pill">297 <svg viewBox="0 0 24 24"><path d="M5 12l4 4 10-10" stroke-linecap="round"/></svg>298 <span>GIF</span>299 </div>300 <div class="pill">301 <svg viewBox="0 0 24 24"><circle cx="12" cy="12" r="9"/><path d="M12 8v8M8 12h8"/></svg>302 <span>Settings</span>303 </div>304 <div class="pill">305 <svg viewBox="0 0 24 24"><path d="M4 12h16M12 4v16"/></svg>306 <span>Translate</span>307 </div>308 <div class="pill">309 <svg viewBox="0 0 24 24"><circle cx="5" cy="12" r="2"/><circle cx="12" cy="12" r="2"/><circle cx="19" cy="12" r="2"/></svg>310 <span>More</span>311 </div>312 <div class="pill">313 <svg viewBox="0 0 24 24"><path d="M21 7l-9 9-4-4" stroke-linecap="round"/></svg>314 </div>315 </div>316 317 <div class="keys">318 <div class="row">319 <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>320 </div>321 <div class="row mid">322 <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>323 </div>324 <div class="row bottom">325 <div class="key green small">?123</div>326 <div class="key green small">,</div>327 <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>328 <div class="key green small">.</div>329 <div class="key green">330 <svg viewBox="0 0 24 24" style="width:44px;height:44px;stroke:#2E2E2E;fill:none;stroke-width:2.5;"><circle cx="11" cy="11" r="6"/><path d="M16 16l5 5" stroke-linecap="round"/></svg>331 </div>332 </div>333 </div>334 335 <div class="home-indicator"></div>336 </div>337 338</div>339</body>340</html>