GD-ML/AndroidCode
13.4k
1<!DOCTYPE html>2<html lang="en">3<head>4<meta charset="UTF-8">5<title>Search - Mozzarella</title>6<style>7 body { margin: 0; padding: 0; background: transparent; font-family: Arial, Helvetica, sans-serif; }8 #render-target {9 width: 1080px;10 height: 2400px;11 position: relative;12 overflow: hidden;13 background: #FFFFFF;14 }15 /* Status bar */16 .status-bar {17 position: absolute;18 top: 0;19 left: 0;20 height: 96px;21 width: 100%;22 padding: 0 36px;23 box-sizing: border-box;24 display: flex;25 align-items: center;26 justify-content: space-between;27 color: #333;28 font-size: 36px;29 }30 /* Top search header */31 .search-header {32 position: absolute;33 top: 96px;34 left: 0;35 width: 100%;36 height: 148px;37 box-sizing: border-box;38 padding: 0 24px;39 border-bottom: 2px solid #E0E0E0;40 display: flex;41 align-items: center;42 }43 .back-btn, .close-btn {44 width: 96px;45 height: 96px;46 display: flex;47 align-items: center;48 justify-content: center;49 }50 .search-text {51 flex: 1;52 font-size: 44px;53 color: #222;54 font-weight: 600;55 display: flex;56 align-items: center;57 }58 .caret {59 width: 4px;60 height: 48px;61 background: #F57C00;62 margin-left: 8px;63 border-radius: 2px;64 }65 66 /* Suggestion block */67 .suggestion {68 position: absolute;69 top: 244px;70 left: 0;71 width: 100%;72 box-sizing: border-box;73 padding: 28px 40px 24px 40px;74 border-bottom: 1px solid #E0E0E0;75 }76 .suggestion .title {77 font-size: 40px;78 font-weight: 700;79 color: #111;80 margin-bottom: 12px;81 }82 .suggestion .link {83 font-size: 34px;84 color: #F57C00;85 }86 87 .section-label {88 position: absolute;89 top: 388px;90 left: 0;91 width: 100%;92 background: #F5F5F5;93 color: #757575;94 font-size: 34px;95 padding: 18px 40px;96 box-sizing: border-box;97 border-top: 1px solid #E0E0E0;98 border-bottom: 1px solid #E0E0E0;99 }100 101 /* List */102 .list {103 position: absolute;104 top: 460px;105 left: 0;106 width: 100%;107 }108 .list-item {109 display: flex;110 align-items: center;111 padding: 30px 40px;112 box-sizing: border-box;113 border-bottom: 1px solid #E0E0E0;114 background: #FFF;115 }116 .item-icon {117 width: 120px;118 height: 120px;119 border: 2px solid #BDBDBD;120 border-radius: 12px;121 display: flex;122 align-items: center;123 justify-content: center;124 margin-right: 32px;125 }126 .item-text .title {127 font-size: 40px;128 color: #333;129 font-weight: 600;130 margin-bottom: 6px;131 }132 .item-text .subtitle {133 font-size: 30px;134 color: #9E9E9E;135 }136 137 /* Keyboard mock */138 .keyboard {139 position: absolute;140 left: 0;141 bottom: 0;142 width: 100%;143 height: 980px;144 background: #1E1E1E;145 box-shadow: 0 -6px 20px rgba(0,0,0,0.25);146 color: #FFF;147 box-sizing: border-box;148 padding: 24px 26px 60px 26px;149 }150 .kb-top {151 display: flex;152 align-items: center;153 gap: 40px;154 margin-bottom: 22px;155 color: #BDBDBD;156 font-size: 30px;157 }158 .kb-pill {159 background: #2A2A2A;160 padding: 16px 22px;161 border-radius: 16px;162 }163 .kb-row {164 display: flex;165 justify-content: space-between;166 margin: 18px 0;167 padding: 0 8px;168 }169 .key {170 background: #2A2A2A;171 color: #FFF;172 border-radius: 22px;173 height: 120px;174 min-width: 88px;175 flex: 1;176 margin: 0 8px;177 display: flex;178 align-items: center;179 justify-content: center;180 font-size: 42px;181 box-shadow: inset 0 -2px 0 rgba(255,255,255,0.06);182 }183 .key.wide { flex: 1.4; }184 .key.space { flex: 4.4; }185 .key.light {186 background: #DADCFD;187 color: #222;188 }189 .key.circle {190 border-radius: 60px;191 width: 160px;192 flex: 0 0 160px;193 }194 195 .home-indicator {196 position: absolute;197 bottom: 18px;198 left: 50%;199 transform: translateX(-50%);200 width: 260px;201 height: 10px;202 background: #EAEAEA;203 border-radius: 6px;204 opacity: 0.9;205 }206 207 /* Utility */208 .divider { height: 1px; background: #E0E0E0; }209</style>210</head>211<body>212<div id="render-target">213 214 <!-- Status bar -->215 <div class="status-bar">216 <div>9:08</div>217 <div style="display:flex; align-items:center; gap:22px;">218 <!-- Simple wifi icon -->219 <svg width="42" height="42" viewBox="0 0 24 24" fill="none">220 <path d="M2 8c4-4 16-4 20 0" stroke="#616161" stroke-width="2" stroke-linecap="round"/>221 <path d="M5 11c3-3 11-3 14 0" stroke="#616161" stroke-width="2" stroke-linecap="round"/>222 <path d="M8 14c2-2 6-2 8 0" stroke="#616161" stroke-width="2" stroke-linecap="round"/>223 <circle cx="12" cy="18" r="2" fill="#616161"/>224 </svg>225 <!-- Battery icon -->226 <svg width="42" height="42" viewBox="0 0 24 24" fill="none">227 <rect x="2" y="6" width="18" height="12" rx="2" stroke="#616161" stroke-width="2"/>228 <rect x="4" y="8" width="12" height="8" rx="1" fill="#616161"/>229 <rect x="20" y="9" width="2" height="6" rx="1" fill="#616161"/>230 </svg>231 </div>232 </div>233 234 <!-- Search header -->235 <div class="search-header">236 <div class="back-btn">237 <svg width="44" height="44" viewBox="0 0 24 24" fill="none">238 <path d="M15 19L8 12l7-7" stroke="#333" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>239 </svg>240 </div>241 <div class="search-text">242 Mozzarella cheese 150g243 <span class="caret"></span>244 </div>245 <div class="close-btn">246 <svg width="44" height="44" viewBox="0 0 24 24" fill="none">247 <path d="M6 6l12 12M18 6L6 18" stroke="#333" stroke-width="2" stroke-linecap="round"/>248 </svg>249 </div>250 </div>251 252 <!-- Suggestion -->253 <div class="suggestion">254 <div class="title">Mozzarella cheese 150g</div>255 <div class="link">Search in the store assortment</div>256 </div>257 258 <div class="section-label">Product recommendations</div>259 260 <!-- Product list -->261 <div class="list">262 <div class="list-item">263 <div class="item-icon">264 <svg width="90" height="90" viewBox="0 0 64 64" fill="none">265 <rect x="10" y="16" width="22" height="36" rx="4" stroke="#9E9E9E" stroke-width="3"/>266 <rect x="18" y="6" width="10" height="10" rx="2" stroke="#9E9E9E" stroke-width="3"/>267 <rect x="36" y="36" width="22" height="16" rx="3" stroke="#9E9E9E" stroke-width="3"/>268 <circle cx="44" cy="44" r="2.5" fill="#9E9E9E"/>269 <circle cx="52" cy="48" r="2.5" fill="#9E9E9E"/>270 </svg>271 </div>272 <div class="item-text">273 <div class="title">Mozzarella</div>274 <div class="subtitle">Milchprodukte & Eier</div>275 </div>276 </div>277 278 <div class="list-item">279 <div class="item-icon">280 <svg width="90" height="90" viewBox="0 0 64 64" fill="none">281 <rect x="10" y="16" width="22" height="36" rx="4" stroke="#9E9E9E" stroke-width="3"/>282 <rect x="18" y="6" width="10" height="10" rx="2" stroke="#9E9E9E" stroke-width="3"/>283 <rect x="36" y="36" width="22" height="16" rx="3" stroke="#9E9E9E" stroke-width="3"/>284 <circle cx="44" cy="44" r="2.5" fill="#9E9E9E"/>285 <circle cx="52" cy="48" r="2.5" fill="#9E9E9E"/>286 </svg>287 </div>288 <div class="item-text">289 <div class="title">Mozzarella</div>290 <div class="subtitle">Milchprodukte & Eier</div>291 </div>292 </div>293 294 <div class="list-item">295 <div class="item-icon">296 <svg width="90" height="90" viewBox="0 0 64 64" fill="none">297 <rect x="10" y="16" width="22" height="36" rx="4" stroke="#9E9E9E" stroke-width="3"/>298 <rect x="18" y="6" width="10" height="10" rx="2" stroke="#9E9E9E" stroke-width="3"/>299 <rect x="36" y="36" width="22" height="16" rx="3" stroke="#9E9E9E" stroke-width="3"/>300 <circle cx="44" cy="44" r="2.5" fill="#9E9E9E"/>301 <circle cx="52" cy="48" r="2.5" fill="#9E9E9E"/>302 </svg>303 </div>304 <div class="item-text">305 <div class="title">Galbani Mozzarella</div>306 <div class="subtitle">Milchprodukte & Eier</div>307 </div>308 </div>309 310 <div class="list-item">311 <div class="item-icon">312 <svg width="90" height="90" viewBox="0 0 64 64" fill="none">313 <rect x="10" y="16" width="22" height="36" rx="4" stroke="#9E9E9E" stroke-width="3"/>314 <rect x="18" y="6" width="10" height="10" rx="2" stroke="#9E9E9E" stroke-width="3"/>315 <rect x="36" y="36" width="22" height="16" rx="3" stroke="#9E9E9E" stroke-width="3"/>316 <circle cx="44" cy="44" r="2.5" fill="#9E9E9E"/>317 <circle cx="52" cy="48" r="2.5" fill="#9E9E9E"/>318 </svg>319 </div>320 <div class="item-text">321 <div class="title">Mozzarella Bufflonne</div>322 <div class="subtitle">Milchprodukte & Eier</div>323 </div>324 </div>325 326 <div class="list-item">327 <div class="item-icon">328 <svg width="90" height="90" viewBox="0 0 64 64" fill="none">329 <rect x="10" y="16" width="22" height="36" rx="4" stroke="#9E9E9E" stroke-width="3"/>330 <rect x="18" y="6" width="10" height="10" rx="2" stroke="#9E9E9E" stroke-width="3"/>331 <rect x="36" y="36" width="22" height="16" rx="3" stroke="#9E9E9E" stroke-width="3"/>332 <circle cx="44" cy="44" r="2.5" fill="#9E9E9E"/>333 <circle cx="52" cy="48" r="2.5" fill="#9E9E9E"/>334 </svg>335 </div>336 <div class="item-text">337 <div class="title">M-Budget Mozzarella</div>338 <div class="subtitle">Milchprodukte & Eier</div>339 </div>340 </div>341 </div>342 343 <!-- Keyboard (mock) -->344 <div class="keyboard">345 <div class="kb-top">346 <div class="kb-pill">▤▤</div>347 <div class="kb-pill">🙂</div>348 <div class="kb-pill">GIF</div>349 <div class="kb-pill">⚙︎</div>350 <div class="kb-pill">Gx</div>351 <div class="kb-pill">🎨</div>352 </div>353 354 <div class="kb-row">355 <div class="key">q</div>356 <div class="key">w</div>357 <div class="key">e</div>358 <div class="key">r</div>359 <div class="key">t</div>360 <div class="key">y</div>361 <div class="key">u</div>362 <div class="key">i</div>363 <div class="key">o</div>364 <div class="key">p</div>365 </div>366 367 <div class="kb-row" style="padding: 0 58px;">368 <div class="key">a</div>369 <div class="key">s</div>370 <div class="key">d</div>371 <div class="key">f</div>372 <div class="key">g</div>373 <div class="key">h</div>374 <div class="key">j</div>375 <div class="key">k</div>376 <div class="key">l</div>377 </div>378 379 <div class="kb-row">380 <div class="key wide">⇧</div>381 <div class="key">z</div>382 <div class="key">x</div>383 <div class="key">c</div>384 <div class="key">v</div>385 <div class="key">b</div>386 <div class="key">n</div>387 <div class="key">m</div>388 <div class="key wide">⌫</div>389 </div>390 391 <div class="kb-row" style="align-items:center;">392 <div class="key circle" style="background:#3A3A3A;">?123</div>393 <div class="key circle" style="background:#3A3A3A;">🙂</div>394 <div class="key circle" style="background:#3A3A3A;">,</div>395 <div class="key space"></div>396 <div class="key circle" style="background:#3A3A3A;">.</div>397 <div class="key circle light">398 <svg width="42" height="42" viewBox="0 0 24 24" fill="none">399 <circle cx="11" cy="11" r="7" stroke="#333" stroke-width="2"/>400 <path d="M16 16l5 5" stroke="#333" stroke-width="2" stroke-linecap="round"/>401 </svg>402 </div>403 </div>404 </div>405 406 <div class="home-indicator"></div>407 408</div>409</body>410</html>