GD-ML/AndroidCode
13.4k
1<!DOCTYPE html>2<html lang="en">3<head>4<meta charset="UTF-8">5<title>Store Search UI Mock</title>6<style>7 body { margin: 0; padding: 0; background: transparent; }8 #render-target {9 width: 1080px;10 height: 2400px;11 position: relative;12 overflow: hidden;13 background: #ffffff;14 font-family: "Segoe UI", Arial, Helvetica, sans-serif;15 color: #222;16 }17 18 /* Status bar */19 .status-bar {20 position: absolute;21 top: 0;22 left: 0;23 width: 100%;24 height: 110px;25 display: flex;26 align-items: center;27 justify-content: space-between;28 padding: 0 28px;29 color: #333;30 font-size: 40px;31 }32 .status-icons {33 display: flex;34 align-items: center;35 gap: 26px;36 }37 .icon { display: inline-block; vertical-align: middle; }38 39 /* Search header */40 .search-header {41 position: absolute;42 top: 110px;43 left: 0;44 width: 100%;45 height: 170px;46 display: flex;47 align-items: center;48 padding: 0 24px;49 box-sizing: border-box;50 }51 .back-btn {52 width: 80px;53 height: 80px;54 display: flex;55 align-items: center;56 justify-content: center;57 margin-right: 14px;58 }59 .search-input {60 flex: 1;61 display: flex;62 align-items: center;63 color: #646464;64 font-size: 56px;65 line-height: 1;66 }67 .caret {68 width: 6px;69 height: 58px;70 background: #FF6D00;71 border-radius: 2px;72 margin-right: 16px;73 }74 .scan-btn {75 width: 82px;76 height: 82px;77 display: flex;78 align-items: center;79 justify-content: center;80 margin-left: 10px;81 }82 83 /* Category / Find stores row */84 .utility-row {85 position: absolute;86 top: 280px;87 left: 0;88 width: 100%;89 height: 120px;90 background: #F0F0F0;91 border-top: 1px solid #ddd;92 border-bottom: 1px solid #ddd;93 display: flex;94 align-items: center;95 box-sizing: border-box;96 padding: 0 24px;97 column-gap: 24px;98 }99 .utility-item {100 flex: 1;101 display: flex;102 align-items: center;103 gap: 18px;104 color: #333;105 font-size: 40px;106 }107 .divider {108 width: 2px;109 height: 60px;110 background: #C9C9C9;111 }112 113 /* Promo banner */114 .promo {115 position: absolute;116 top: 400px;117 left: 24px;118 width: 1032px;119 height: 420px;120 background: #E0E0E0;121 border: 1px solid #BDBDBD;122 display: flex;123 justify-content: center;124 align-items: center;125 color: #757575;126 font-size: 40px;127 box-sizing: border-box;128 }129 .promo .badge {130 position: absolute;131 top: 18px;132 right: 18px;133 background: #FF8A00;134 color: #fff;135 padding: 12px 18px;136 font-size: 34px;137 font-weight: 700;138 border-radius: 8px;139 }140 141 .promo-caption {142 position: absolute;143 top: 840px;144 left: 24px;145 width: 1032px;146 font-size: 44px;147 font-weight: 700;148 color: #3a3a3a;149 }150 151 /* Offers header */152 .offers-header {153 position: absolute;154 top: 920px;155 left: 24px;156 width: 1032px;157 display: flex;158 justify-content: space-between;159 align-items: center;160 }161 .offers-title {162 font-size: 54px;163 font-weight: 700;164 color: #2a2a2a;165 }166 .offers-link {167 font-size: 40px;168 color: #FF6D00;169 font-weight: 600;170 }171 .offers-sub {172 position: absolute;173 top: 990px;174 left: 24px;175 font-size: 36px;176 color: #8a8a8a;177 }178 179 /* Product cards */180 .product-grid {181 position: absolute;182 top: 1070px;183 left: 24px;184 width: 1032px;185 display: grid;186 grid-template-columns: repeat(3, 1fr);187 gap: 24px;188 }189 .card {190 background: #fff;191 border: 1px solid #E3E3E3;192 border-radius: 24px;193 overflow: hidden;194 position: relative;195 box-shadow: 0 1px 2px rgba(0,0,0,0.06);196 height: 420px;197 }198 .card-img {199 width: 100%;200 height: 320px;201 background: #E0E0E0;202 border-bottom: 1px solid #D0D0D0;203 display: flex;204 justify-content: center;205 align-items: center;206 color: #757575;207 font-size: 32px;208 }209 .card .add-list {210 position: absolute;211 top: 16px;212 right: 16px;213 width: 70px;214 height: 70px;215 border-radius: 16px;216 background: #ffffff;217 border: 1px solid #D5D5D5;218 display: flex;219 align-items: center;220 justify-content: center;221 }222 .hit-tag {223 position: absolute;224 bottom: 0;225 left: 0;226 background: #FF8A00;227 color: #fff;228 font-size: 34px;229 font-weight: 800;230 padding: 8px 16px;231 border-top-right-radius: 12px;232 }233 234 /* Keyboard mock */235 .keyboard {236 position: absolute;237 bottom: 60px;238 left: 0;239 width: 100%;240 height: 900px;241 background: #1E1E1E;242 border-top-left-radius: 28px;243 border-top-right-radius: 28px;244 box-shadow: 0 -6px 18px rgba(0,0,0,0.25);245 color: #eaeaea;246 box-sizing: border-box;247 padding: 24px 24px 30px;248 }249 .kb-top {250 display: flex;251 align-items: center;252 gap: 26px;253 margin-bottom: 20px;254 }255 .kb-top .pill {256 background: #2A2A2A;257 border: 1px solid #333;258 padding: 14px 20px;259 border-radius: 14px;260 font-size: 32px;261 color: #cfcfcf;262 }263 .kb-rows {264 display: flex;265 flex-direction: column;266 gap: 18px;267 }268 .kb-row {269 display: flex;270 justify-content: center;271 gap: 14px;272 }273 .key {274 background: #2B2B2B;275 border: 1px solid #3A3A3A;276 border-radius: 18px;277 width: 90px;278 height: 100px;279 display: flex;280 align-items: center;281 justify-content: center;282 font-size: 40px;283 color: #f5f5f5;284 }285 .key.wide { width: 170px; }286 .space { width: 520px; }287 .key.light {288 background: #D4D9FF;289 color: #111;290 border-color: #C7CCFF;291 }292 293 /* Gesture bar */294 .gesture {295 position: absolute;296 bottom: 18px;297 left: 50%;298 transform: translateX(-50%);299 width: 220px;300 height: 10px;301 border-radius: 6px;302 background: #E8E8E8;303 }304</style>305</head>306<body>307<div id="render-target">308 309 <!-- Status Bar -->310 <div class="status-bar">311 <div>9:07</div>312 <div class="status-icons">313 <!-- Simple cellular/wifi/battery icons -->314 <svg class="icon" width="38" height="38" viewBox="0 0 48 48">315 <path d="M6 36h6l18-18 6 6-18 18H6z" fill="#888"/>316 </svg>317 <svg class="icon" width="38" height="38" viewBox="0 0 48 48">318 <path d="M6 34c10-10 26-10 36 0" stroke="#888" stroke-width="4" fill="none"/>319 <path d="M12 34c7-7 19-7 26 0" stroke="#888" stroke-width="4" fill="none"/>320 <circle cx="24" cy="34" r="2.5" fill="#888"/>321 </svg>322 <svg class="icon" width="42" height="42" viewBox="0 0 48 48">323 <rect x="6" y="10" width="30" height="20" rx="3" ry="3" stroke="#888" stroke-width="3" fill="none"/>324 <rect x="38" y="16" width="4" height="8" fill="#888"/>325 </svg>326 </div>327 </div>328 329 <!-- Search Header -->330 <div class="search-header">331 <div class="back-btn">332 <svg width="54" height="54" viewBox="0 0 48 48">333 <path d="M30 10 L16 24 L30 38" stroke="#444" stroke-width="5" fill="none" stroke-linecap="round" stroke-linejoin="round"/>334 </svg>335 </div>336 <div class="search-input">337 <span class="caret"></span>338 <span>Search for products in store</span>339 </div>340 <div class="scan-btn">341 <svg width="64" height="64" viewBox="0 0 48 48">342 <path d="M8 12h6M34 12h6M8 36h6M34 36h6" stroke="#444" stroke-width="4" stroke-linecap="round"/>343 <rect x="14" y="16" width="20" height="16" stroke="#444" stroke-width="3" fill="none"/>344 <path d="M18 20h12M18 24h12" stroke="#444" stroke-width="3" />345 </svg>346 </div>347 </div>348 349 <!-- Utility row -->350 <div class="utility-row">351 <div class="utility-item">352 <svg width="48" height="48" viewBox="0 0 48 48">353 <path d="M10 14h28M10 24h28M10 34h28" stroke="#333" stroke-width="4" stroke-linecap="round"/>354 </svg>355 <span>All products</span>356 </div>357 <div class="divider"></div>358 <div class="utility-item">359 <svg width="48" height="48" viewBox="0 0 48 48">360 <path d="M24 10c6 0 10 4 10 10 0 8-10 18-10 18S14 28 14 20c0-6 4-10 10-10z" stroke="#333" stroke-width="3" fill="none"/>361 <circle cx="24" cy="20" r="4" fill="#333"/>362 </svg>363 <span>Find stores</span>364 </div>365 </div>366 367 <!-- Promo banner -->368 <div class="promo">369 [IMG: Promo banner with peanuts, chocolates, cups]370 <div class="badge">Up to 40%</div>371 </div>372 373 <div class="promo-caption">Weekend sensation - only from this Thursday to Sunday</div>374 375 <!-- Offers header -->376 <div class="offers-header">377 <div class="offers-title">Offers in the stores</div>378 <div class="offers-link">Show all</div>379 </div>380 <div class="offers-sub">No region selected</div>381 382 <!-- Product cards -->383 <div class="product-grid">384 <div class="card">385 <div class="card-img">[IMG: Plush blanket set]</div>386 <div class="add-list">387 <svg width="44" height="44" viewBox="0 0 48 48">388 <rect x="6" y="8" width="28" height="22" rx="4" ry="4" stroke="#555" stroke-width="3" fill="none"/>389 <path d="M38 16v18H16" stroke="#555" stroke-width="3" fill="none"/>390 <path d="M24 18v8M20 22h8" stroke="#555" stroke-width="3"/>391 </svg>392 </div>393 <div class="hit-tag">Hit</div>394 </div>395 <div class="card">396 <div class="card-img">[IMG: Kitchen tool set]</div>397 <div class="add-list">398 <svg width="44" height="44" viewBox="0 0 48 48">399 <rect x="6" y="8" width="28" height="22" rx="4" ry="4" stroke="#555" stroke-width="3" fill="none"/>400 <path d="M38 16v18H16" stroke="#555" stroke-width="3" fill="none"/>401 <path d="M24 18v8M20 22h8" stroke="#555" stroke-width="3"/>402 </svg>403 </div>404 <div class="hit-tag">Hit</div>405 </div>406 <div class="card">407 <div class="card-img">[IMG: LED light packs]</div>408 <div class="add-list">409 <svg width="44" height="44" viewBox="0 0 48 48">410 <rect x="6" y="8" width="28" height="22" rx="4" ry="4" stroke="#555" stroke-width="3" fill="none"/>411 <path d="M38 16v18H16" stroke="#555" stroke-width="3" fill="none"/>412 <path d="M24 18v8M20 22h8" stroke="#555" stroke-width="3"/>413 </svg>414 </div>415 <div class="hit-tag">Hit</div>416 </div>417 </div>418 419 <!-- Keyboard mock -->420 <div class="keyboard">421 <div class="kb-top">422 <div class="pill">GIF</div>423 <div class="pill">Settings</div>424 <div class="pill">Gᵀᴿ</div>425 <div class="pill">Palette</div>426 </div>427 <div class="kb-rows">428 <div class="kb-row">429 <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>430 <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>431 </div>432 <div class="kb-row">433 <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>434 <div class="key">h</div><div class="key">j</div><div class="key">k</div><div class="key">l</div>435 </div>436 <div class="kb-row">437 <div class="key wide">⇧</div>438 <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>439 <div class="key">n</div><div class="key">m</div>440 <div class="key wide">⌫</div>441 </div>442 <div class="kb-row">443 <div class="key wide">?123</div>444 <div class="key">,</div>445 <div class="key">🙂</div>446 <div class="key space"></div>447 <div class="key">.</div>448 <div class="key light">449 <svg width="42" height="42" viewBox="0 0 48 48">450 <circle cx="20" cy="20" r="12" stroke="#333" stroke-width="3" fill="none"/>451 <path d="M28 28l8 8" stroke="#333" stroke-width="3"/>452 </svg>453 </div>454 </div>455 </div>456 </div>457 458 <div class="gesture"></div>459 460</div>461</body>462</html>