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 – Pizza</title>7<style>8 body { margin: 0; padding: 0; background: transparent; }9 #render-target {10 width: 1080px;11 height: 2400px;12 position: relative;13 overflow: hidden;14 background: #F5F4EE;15 font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, system-ui, sans-serif;16 color: #3E3E3E;17 }18 19 /* Status bar */20 .status-bar {21 height: 120px;22 display: flex;23 align-items: center;24 justify-content: space-between;25 padding: 0 36px;26 color: #2E2E2E;27 font-weight: 600;28 font-size: 38px;29 }30 .status-icons { display: flex; align-items: center; gap: 26px; }31 .status-icons svg { width: 42px; height: 42px; }32 33 /* Search header */34 .search-bar {35 height: 140px;36 display: flex;37 align-items: center;38 padding: 0 18px 0 12px;39 border-bottom: 1px solid #E8E6DE;40 }41 .icon-btn {42 width: 110px;43 height: 110px;44 display: flex;45 align-items: center;46 justify-content: center;47 border-radius: 999px;48 }49 .icon-btn svg { width: 54px; height: 54px; }50 .input-shell {51 flex: 1;52 height: 100%;53 display: flex;54 align-items: center;55 gap: 24px;56 }57 .search-text {58 font-size: 44px;59 color: #2F2F2F;60 }61 .clear-circle {62 width: 64px;63 height: 64px;64 border-radius: 50%;65 border: 2px solid #CFCFCF;66 display: flex;67 align-items: center;68 justify-content: center;69 margin-right: 8px;70 }71 .clear-circle svg { width: 32px; height: 32px; stroke: #7C7C7C; }72 73 /* Suggestions list */74 .suggestions {75 position: absolute;76 left: 0;77 right: 0;78 top: 260px; /* 120 + 140 */79 bottom: 980px; /* space for keyboard + gesture pill */80 overflow: hidden;81 padding: 10px 0;82 }83 .s-row {84 display: flex;85 align-items: center;86 padding: 24px 36px;87 gap: 28px;88 height: 120px;89 }90 .s-row + .s-row { border-top: 1px solid #EEEDE7; }91 .s-icon { width: 54px; height: 54px; display: inline-flex; align-items: center; justify-content: center; color: #7A7A7A; }92 .s-text {93 font-size: 42px;94 color: #5A5A5A;95 flex: 1;96 white-space: nowrap;97 overflow: hidden;98 text-overflow: ellipsis;99 }100 .s-text .hl { color: #3A3A3A; font-weight: 600; }101 .s-trailing {102 display: flex;103 align-items: center;104 gap: 20px;105 }106 .chip-x {107 width: 64px; height: 64px; border-radius: 50%;108 border: 2px solid #CFCFCF;109 display: flex; align-items: center; justify-content: center;110 }111 .chip-x svg, .arrow-right svg { width: 32px; height: 32px; }112 .arrow-right { color: #7C7C7C; }113 114 /* Keyboard (mock) */115 .keyboard {116 position: absolute;117 left: 0; right: 0; bottom: 80px;118 height: 900px;119 background: #EEF2E8;120 border-top: 1px solid #DADFD2;121 padding: 18px 18px 28px;122 box-sizing: border-box;123 }124 .kb-suggestions {125 display: flex;126 gap: 18px;127 padding: 8px 6px 16px;128 }129 .kb-suggestions .sg {130 background: #FFFFFF;131 border: 1px solid #E3E6DC;132 border-radius: 24px;133 padding: 10px 22px;134 font-size: 36px;135 color: #4B4B4B;136 }137 .keyboard-rows {138 display: flex;139 flex-direction: column;140 gap: 18px;141 margin-top: 6px;142 }143 .kb-row {144 display: grid;145 grid-auto-flow: column;146 grid-auto-columns: 1fr;147 gap: 14px;148 padding: 0 12px;149 }150 .key {151 height: 120px;152 background: #FFFFFF;153 border: 1px solid #E3E6DC;154 border-radius: 20px;155 display: flex;156 align-items: center;157 justify-content: center;158 font-size: 40px;159 color: #2E2E2E;160 }161 .key.small { font-size: 34px; }162 .key.gray { background: #DDE7D7; }163 .key.circle {164 width: 120px; height: 120px; border-radius: 60px;165 }166 .space {167 grid-column: span 6;168 }169 .kb-bottom {170 display: grid;171 grid-template-columns: 1.2fr 1fr 1fr 6fr 1fr 1.2fr 1.2fr;172 gap: 14px;173 padding: 0 12px;174 }175 .key svg { width: 40px; height: 40px; }176 177 /* Gesture pill */178 .gesture-pill {179 position: absolute;180 bottom: 24px;181 left: 50%;182 transform: translateX(-50%);183 width: 280px;184 height: 14px;185 background: #A8A8A8;186 border-radius: 10px;187 opacity: 0.7;188 }189</style>190</head>191<body>192<div id="render-target">193 194 <!-- Status bar -->195 <div class="status-bar">196 <div>11:11</div>197 <div class="status-icons">198 <!-- notifications dot -->199 <svg viewBox="0 0 24 24" fill="#6F6F6F"><circle cx="12" cy="12" r="3"/></svg>200 <!-- wifi -->201 <svg viewBox="0 0 24 24" fill="none" stroke="#6F6F6F" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">202 <path d="M2 8c5-4 15-4 20 0"/><path d="M5 12c3-3 11-3 14 0"/><path d="M8 16c2-2 6-2 8 0"/><circle cx="12" cy="19" r="1.5" fill="#6F6F6F" stroke="none"/>203 </svg>204 <!-- battery -->205 <svg viewBox="0 0 30 18" fill="none" stroke="#6F6F6F" stroke-width="2">206 <rect x="1" y="3" width="24" height="12" rx="2"></rect>207 <rect x="3" y="5" width="18" height="8" rx="1" fill="#6F6F6F" stroke="none"></rect>208 <rect x="26" y="7" width="3" height="4" rx="1" fill="#6F6F6F" stroke="none"></rect>209 </svg>210 </div>211 </div>212 213 <!-- Search bar -->214 <div class="search-bar">215 <div class="icon-btn">216 <!-- back arrow -->217 <svg viewBox="0 0 24 24" fill="none" stroke="#333" stroke-width="2.4" stroke-linecap="round" stroke-linejoin="round">218 <path d="M15 18l-6-6 6-6"/><path d="M9 12h10"/>219 </svg>220 </div>221 <div class="input-shell">222 <!-- magnifier before text -->223 <svg viewBox="0 0 24 24" class="s-icon" fill="none" stroke="#888" stroke-width="2.2" stroke-linecap="round" stroke-linejoin="round">224 <circle cx="10.5" cy="10.5" r="7"></circle><path d="M16.5 16.5L21 21"/>225 </svg>226 <div class="search-text">pizza</div>227 </div>228 <div class="clear-circle">229 <svg viewBox="0 0 24 24" fill="none" stroke-width="2.2">230 <path d="M6 6l12 12M18 6L6 18"/>231 </svg>232 </div>233 </div>234 235 <!-- Suggestions -->236 <div class="suggestions">237 <div class="s-row">238 <!-- clock recent -->239 <div class="s-icon">240 <svg viewBox="0 0 24 24" fill="none" stroke="#7A7A7A" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">241 <circle cx="12" cy="12" r="9"></circle>242 <path d="M12 7v6l4 2"/>243 </svg>244 </div>245 <div class="s-text">pizza</div>246 <div class="s-trailing">247 <div class="chip-x">248 <svg viewBox="0 0 24 24" fill="none" stroke-width="2">249 <path d="M6 6l12 12M18 6L6 18" stroke="#7C7C7C"/>250 </svg>251 </div>252 </div>253 </div>254 255 <div class="s-row">256 <div class="s-icon">257 <svg viewBox="0 0 24 24" fill="none" stroke="#7A7A7A" stroke-width="2.2" stroke-linecap="round" stroke-linejoin="round">258 <circle cx="10.5" cy="10.5" r="7"></circle><path d="M16.5 16.5L21 21"/>259 </svg>260 </div>261 <div class="s-text"><span class="hl">pizza</span> dough</div>262 </div>263 264 <div class="s-row">265 <div class="s-icon">266 <svg viewBox="0 0 24 24" fill="none" stroke="#7A7A7A" stroke-width="2.2" stroke-linecap="round" stroke-linejoin="round">267 <circle cx="10.5" cy="10.5" r="7"></circle><path d="M16.5 16.5L21 21"/>268 </svg>269 </div>270 <div class="s-text">chicken <span class="hl">pizza</span></div>271 </div>272 273 <div class="s-row">274 <div class="s-icon">275 <svg viewBox="0 0 24 24" fill="none" stroke="#7A7A7A" stroke-width="2.2" stroke-linecap="round" stroke-linejoin="round">276 <circle cx="10.5" cy="10.5" r="7"></circle><path d="M16.5 16.5L21 21"/>277 </svg>278 </div>279 <div class="s-text"><span class="hl">pizza</span> topping</div>280 </div>281 282 <div class="s-row">283 <div class="s-icon">284 <svg viewBox="0 0 24 24" fill="none" stroke="#7A7A7A" stroke-width="2.2" stroke-linecap="round" stroke-linejoin="round">285 <circle cx="10.5" cy="10.5" r="7"></circle><path d="M16.5 16.5L21 21"/>286 </svg>287 </div>288 <div class="s-text">bread <span class="hl">pizza</span></div>289 </div>290 291 <div class="s-row">292 <div class="s-icon">293 <svg viewBox="0 0 24 24" fill="none" stroke="#7A7A7A" stroke-width="2.2" stroke-linecap="round" stroke-linejoin="round">294 <circle cx="10.5" cy="10.5" r="7"></circle><path d="M16.5 16.5L21 21"/>295 </svg>296 </div>297 <div class="s-text">cheese <span class="hl">pizza</span></div>298 </div>299 300 <div class="s-row">301 <div class="s-icon">302 <svg viewBox="0 0 24 24" fill="none" stroke="#7A7A7A" stroke-width="2.2" stroke-linecap="round" stroke-linejoin="round">303 <circle cx="10.5" cy="10.5" r="7"></circle><path d="M16.5 16.5L21 21"/>304 </svg>305 </div>306 <div class="s-text"><span class="hl">pizza</span> sauce</div>307 </div>308 309 <div class="s-row">310 <div class="s-icon">311 <!-- person -->312 <svg viewBox="0 0 24 24" fill="none" stroke="#7A7A7A" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">313 <circle cx="12" cy="8" r="4"></circle>314 <path d="M4 20c2.5-4 13.5-4 16 0"/>315 </svg>316 </div>317 <div class="s-text">Find friends: <span class="hl">pizza</span></div>318 <div class="s-trailing arrow-right">319 <svg viewBox="0 0 24 24" fill="none" stroke="#7C7C7C" stroke-width="2.4" stroke-linecap="round" stroke-linejoin="round">320 <path d="M9 6l6 6-6 6"/>321 </svg>322 </div>323 </div>324 325 <div class="s-row">326 <div class="s-icon">327 <!-- lightbulb -->328 <svg viewBox="0 0 24 24" fill="none" stroke="#7A7A7A" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">329 <path d="M9 18h6"/><path d="M10 22h4"/>330 <path d="M6 10a6 6 0 1 1 12 0c0 2.4-1.2 3.5-2.3 4.6-.6.6-1.1 1.1-1.2 2.4H9.5c-.1-1.3-.6-1.8-1.2-2.4C7.2 13.5 6 12.4 6 10z"/>331 </svg>332 </div>333 <div class="s-text">Search tips: <span class="hl">pizza</span></div>334 <div class="s-trailing arrow-right">335 <svg viewBox="0 0 24 24" fill="none" stroke="#7C7C7C" stroke-width="2.4" stroke-linecap="round" stroke-linejoin="round">336 <path d="M9 6l6 6-6 6"/>337 </svg>338 </div>339 </div>340 </div>341 342 <!-- Keyboard mock -->343 <div class="keyboard">344 <div class="kb-suggestions">345 <div class="sg">pizza</div>346 <div class="sg">Pizza</div>347 <div class="sg">🍕</div>348 </div>349 350 <div class="keyboard-rows">351 <!-- Row 1 -->352 <div class="kb-row" style="grid-template-columns: repeat(10, 1fr);">353 <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>354 <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>355 </div>356 <!-- Row 2 -->357 <div class="kb-row" style="grid-template-columns: repeat(9, 1fr); padding: 0 70px;">358 <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>359 <div class="key">h</div><div class="key">j</div><div class="key">k</div><div class="key">l</div>360 </div>361 <!-- Row 3 -->362 <div class="kb-row" style="grid-template-columns: 1.3fr repeat(7, 1fr) 1.6fr;">363 <div class="key gray small">⇧</div>364 <div class="key">z</div><div class="key">x</div><div class="key">c</div><div class="key">v</div>365 <div class="key">b</div><div class="key">n</div><div class="key">m</div>366 <div class="key gray">367 <svg viewBox="0 0 24 24" fill="none" stroke="#2E2E2E" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">368 <path d="M21 12H8"/><path d="M12 6l-6 6 6 6"/>369 </svg>370 </div>371 </div>372 <!-- Row 4 -->373 <div class="kb-bottom">374 <div class="key small gray">?123</div>375 <div class="key small gray">,</div>376 <div class="key circle gray">377 <svg viewBox="0 0 24 24" fill="none" stroke="#2E2E2E" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">378 <circle cx="12" cy="12" r="9"/><path d="M9.5 9a2.5 2.5 0 0 1 5 0c0 2.5-2.5 2-2.5 4"/><circle cx="12" cy="17" r="1"/>379 </svg>380 </div>381 <div class="key space"></div>382 <div class="key small">.</div>383 <div class="key circle" style="background:#D6E7D3;">384 <!-- mic -->385 <svg viewBox="0 0 24 24" fill="none" stroke="#2E2E2E" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">386 <rect x="9" y="4" width="6" height="10" rx="3"></rect>387 <path d="M5 11a7 7 0 0 0 14 0"/><path d="M12 18v3"/>388 </svg>389 </div>390 <div class="key circle" style="background:#BFDDB9;">391 <!-- search -->392 <svg viewBox="0 0 24 24" fill="none" stroke="#2E2E2E" stroke-width="2.2" stroke-linecap="round" stroke-linejoin="round">393 <circle cx="10.5" cy="10.5" r="7"></circle><path d="M16.5 16.5L21 21"/>394 </svg>395 </div>396 </div>397 </div>398 </div>399 400 <div class="gesture-pill"></div>401</div>402</body>403</html>