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 - Locks</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: #ffffff;15 font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Arial, sans-serif;16 color: #222;17 }18 /* Status bar */19 .status-bar {20 position: absolute;21 top: 0;22 left: 0;23 width: 1080px;24 height: 140px;25 background: #1f1f1f;26 color: #fff;27 }28 .status-time {29 position: absolute;30 left: 36px;31 top: 38px;32 font-size: 44px;33 font-weight: 600;34 letter-spacing: 0.5px;35 }36 .status-icons {37 position: absolute;38 right: 36px;39 top: 40px;40 display: flex;41 align-items: center;42 gap: 26px;43 }44 .icon { width: 48px; height: 48px; }45 /* App bar */46 .app-bar {47 position: absolute;48 top: 140px;49 left: 0;50 width: 1080px;51 height: 150px;52 background: #1f1f1f;53 color: #fff;54 }55 .back-btn {56 position: absolute;57 left: 32px;58 top: 50px;59 width: 64px;60 height: 64px;61 }62 .app-title {63 position: absolute;64 left: 120px;65 top: 55px;66 font-size: 42px;67 font-weight: 600;68 }69 .zip { color: #8B5CF6; font-weight: 700; }70 .app-actions {71 position: absolute;72 right: 36px;73 top: 50px;74 display: flex;75 gap: 36px;76 }77 /* Search */78 .search-area {79 position: absolute;80 top: 310px;81 left: 32px;82 width: 1016px;83 }84 .search-bar {85 width: 100%;86 height: 110px;87 border-radius: 24px;88 background: #EDEDED;89 border: 1px solid #D6D6D6;90 display: flex;91 align-items: center;92 padding: 0 28px;93 box-sizing: border-box;94 color: #555;95 font-size: 40px;96 gap: 24px;97 }98 .search-spacer { flex: 1; }99 /* Filters row */100 .filters {101 margin-top: 28px;102 display: flex;103 gap: 24px;104 align-items: center;105 flex-wrap: nowrap;106 }107 .chip, .chip-outline {108 height: 88px;109 padding: 0 36px;110 border-radius: 18px;111 display: inline-flex;112 align-items: center;113 gap: 16px;114 font-size: 34px;115 color: #333;116 box-sizing: border-box;117 background: #F7F7F7;118 border: 1px solid #DADADA;119 }120 .chip.small {121 width: 120px;122 justify-content: center;123 }124 /* List area */125 .list {126 position: absolute;127 top: 580px;128 left: 0;129 width: 1080px;130 height: auto;131 }132 .divider {133 width: 100%;134 height: 2px;135 background: #E8E8E8;136 }137 .card {138 padding: 36px 32px;139 display: flex;140 gap: 36px;141 align-items: flex-start;142 }143 .thumb {144 width: 300px;145 height: 300px;146 border-radius: 32px;147 background: #E0E0E0;148 border: 1px solid #BDBDBD;149 display: flex;150 justify-content: center;151 align-items: center;152 color: #757575;153 font-size: 32px;154 text-align: center;155 position: relative;156 }157 .fav {158 position: absolute;159 right: 16px;160 top: 16px;161 width: 64px;162 height: 64px;163 border-radius: 50%;164 background: #F2F2F2;165 border: 1px solid #DDD;166 display: flex;167 justify-content: center;168 align-items: center;169 }170 .details {171 flex: 1;172 padding-top: 6px;173 }174 .title {175 font-size: 42px;176 font-weight: 700;177 line-height: 1.22;178 color: #222;179 }180 .meta {181 margin-top: 18px;182 display: flex;183 align-items: center;184 gap: 22px;185 }186 .price {187 font-size: 44px;188 font-weight: 800;189 color: #1f1f1f;190 }191 .strike {192 font-size: 38px;193 color: #9A9A9A;194 text-decoration: line-through;195 }196 .deal {197 font-size: 34px;198 padding: 10px 16px;199 border: 1px solid #CFCFCF;200 border-radius: 14px;201 color: #333;202 background: #F5F5F5;203 }204 .benefit {205 margin-top: 22px;206 display: flex;207 align-items: center;208 gap: 18px;209 color: #444;210 font-size: 34px;211 }212 .benefit .badge {213 width: 40px;214 height: 40px;215 border-radius: 10px;216 background: linear-gradient(45deg,#A64FFF,#FFAE00);217 }218 .delivery {219 margin-top: 14px;220 display: flex;221 align-items: center;222 gap: 16px;223 color: #555;224 font-size: 34px;225 }226 .actions {227 margin-top: 28px;228 display: flex;229 gap: 24px;230 }231 .btn-primary {232 background: #1565D8;233 color: #fff;234 padding: 22px 28px;235 border-radius: 16px;236 font-size: 34px;237 font-weight: 700;238 }239 .btn-secondary {240 background: #E7EFFB;241 color: #2C5AC8;242 padding: 22px 28px;243 border-radius: 16px;244 font-size: 34px;245 font-weight: 700;246 }247 .rating {248 display: flex;249 align-items: center;250 gap: 12px;251 font-size: 32px;252 color: #666;253 margin-bottom: 4px;254 }255 .nav-pill {256 position: absolute;257 bottom: 36px;258 left: 360px;259 width: 360px;260 height: 14px;261 background: #111;262 border-radius: 10px;263 opacity: 0.9;264 }265 /* Simple icon chevrons in chips */266 .chev {267 width: 34px;268 height: 34px;269 }270</style>271</head>272<body>273<div id="render-target">274 275 <!-- Status Bar -->276 <div class="status-bar">277 <div class="status-time">2:10</div>278 <div class="status-icons">279 <!-- Do Not Disturb icon -->280 <svg class="icon" viewBox="0 0 24 24" fill="#fff">281 <circle cx="12" cy="12" r="10" stroke="#fff" stroke-width="2" fill="none"></circle>282 <rect x="6" y="11" width="12" height="2" fill="#fff"></rect>283 </svg>284 <!-- Wi-Fi icon -->285 <svg class="icon" viewBox="0 0 24 24" fill="none">286 <path d="M2 8c5-4 15-4 20 0" stroke="#fff" stroke-width="2" stroke-linecap="round"/>287 <path d="M5 12c3-3 11-3 14 0" stroke="#fff" stroke-width="2" stroke-linecap="round"/>288 <path d="M8 16c2-2 6-2 8 0" stroke="#fff" stroke-width="2" stroke-linecap="round"/>289 <circle cx="12" cy="19" r="1.6" fill="#fff"/>290 </svg>291 <!-- Battery icon -->292 <svg class="icon" viewBox="0 0 28 24" fill="none">293 <rect x="2" y="6" width="20" height="12" rx="2" stroke="#fff" stroke-width="2"></rect>294 <rect x="4" y="8" width="14" height="8" rx="1" fill="#fff"></rect>295 <rect x="22" y="9" width="4" height="6" rx="1" fill="#fff"></rect>296 </svg>297 <div style="font-size:34px; line-height:48px;">100%</div>298 </div>299 </div>300 301 <!-- App Bar -->302 <div class="app-bar">303 <!-- Back -->304 <svg class="back-btn" viewBox="0 0 24 24">305 <path d="M15 19l-7-7 7-7" stroke="#fff" stroke-width="3" stroke-linecap="round" stroke-linejoin="round" fill="none"/>306 </svg>307 <div class="app-title">Deliver to <span class="zip">110009</span></div>308 <div class="app-actions">309 <!-- Heart outline -->310 <svg class="icon" viewBox="0 0 24 24" fill="none">311 <path d="M12 21s-7-4.7-9.5-8.2C1 10 2.7 6.5 6.2 6.5c2 0 3.2 1 3.8 2 0.6-1 1.8-2 3.8-2 3.5 0 5.2 3.5 3.7 6.3C19 16.3 12 21 12 21z" stroke="#fff" stroke-width="2" fill="none"/>312 </svg>313 <!-- Cart outline -->314 <svg class="icon" viewBox="0 0 24 24" fill="none">315 <path d="M3 5h2l2 12h10l2-8H7" stroke="#fff" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>316 <circle cx="9" cy="20" r="2" fill="#fff"/>317 <circle cx="17" cy="20" r="2" fill="#fff"/>318 </svg>319 </div>320 </div>321 322 <!-- Search -->323 <div class="search-area">324 <div class="search-bar">325 <!-- Search icon -->326 <svg class="icon" viewBox="0 0 24 24" fill="none">327 <circle cx="10" cy="10" r="7" stroke="#666" stroke-width="2"></circle>328 <path d="M15 15l6 6" stroke="#666" stroke-width="2" stroke-linecap="round"/>329 </svg>330 <div>locks</div>331 <div class="search-spacer"></div>332 <!-- Close icon -->333 <svg class="icon" viewBox="0 0 24 24" fill="none">334 <path d="M5 5l14 14M19 5L5 19" stroke="#777" stroke-width="2" stroke-linecap="round"/>335 </svg>336 </div>337 338 <!-- Filters -->339 <div class="filters">340 <div class="chip small">341 <svg class="icon" viewBox="0 0 24 24" fill="none">342 <path d="M4 6h16M7 12h10M10 18h4" stroke="#555" stroke-width="2" stroke-linecap="round"/>343 </svg>344 </div>345 <div class="chip">346 <span>Sort</span>347 <svg class="chev" viewBox="0 0 24 24">348 <path d="M6 9l6 6 6-6" stroke="#555" stroke-width="2" fill="none" stroke-linecap="round"/>349 </svg>350 </div>351 <div class="chip">352 <span>Delivery Mode</span>353 <svg class="chev" viewBox="0 0 24 24">354 <path d="M6 9l6 6 6-6" stroke="#555" stroke-width="2" fill="none" stroke-linecap="round"/>355 </svg>356 </div>357 <div class="chip">358 <span>Brand</span>359 <svg class="chev" viewBox="0 0 24 24">360 <path d="M6 9l6 6 6-6" stroke="#555" stroke-width="2" fill="none" stroke-linecap="round"/>361 </svg>362 </div>363 <div class="chip">364 <span>Price</span>365 <svg class="chev" viewBox="0 0 24 24">366 <path d="M6 9l6 6 6-6" stroke="#555" stroke-width="2" fill="none" stroke-linecap="round"/>367 </svg>368 </div>369 </div>370 </div>371 372 <!-- Product List -->373 <div class="list">374 375 <!-- Card 1 -->376 <div class="divider"></div>377 <div class="card">378 <div class="thumb">379 [IMG: Yale Smart Lock Round Device]380 <div class="fav">381 <svg viewBox="0 0 24 24" width="34" height="34" fill="none">382 <path d="M12 21s-7-4.7-9.5-8.2C1 10 2.7 6.5 6.2 6.5c2 0 3.2 1 3.8 2 0.6-1 1.8-2 3.8-2 3.5 0 5.2 3.5 3.7 6.3C19 16.3 12 21 12 21z" stroke="#777" stroke-width="2" fill="none"/>383 </svg>384 </div>385 </div>386 <div class="details">387 <div class="title">Yale Smart Locks (Power Bank Support, YLDRPBP- IV, Ivory)</div>388 <div class="meta">389 <div class="price">₹2,399</div>390 <div class="strike">₹3,999</div>391 <div class="deal">40% OFF</div>392 </div>393 <div class="benefit">394 <div class="badge"></div>395 <div>Grab <b>120 NeuCoins</b> with NeuPass</div>396 </div>397 <div class="delivery">398 <svg class="icon" viewBox="0 0 24 24" fill="none">399 <path d="M3 7h11v8H3zM14 9h5l2 2v4h-7V9z" stroke="#666" stroke-width="2" fill="none"/>400 <circle cx="6" cy="17" r="2" fill="#666"/>401 <circle cx="17" cy="17" r="2" fill="#666"/>402 </svg>403 <span>Delivery by <b>28th Dec</b></span>404 </div>405 <div class="actions">406 <div class="btn-primary">Extra 5% off on cart</div>407 <div class="btn-secondary">Launch offer</div>408 </div>409 </div>410 </div>411 412 <!-- Card 2 -->413 <div class="divider"></div>414 <div class="card">415 <div class="thumb">416 [IMG: Gold TSA Padlocks and Keys]417 <div class="fav">418 <svg viewBox="0 0 24 24" width="34" height="34" fill="none">419 <path d="M12 21s-7-4.7-9.5-8.2C1 10 2.7 6.5 6.2 6.5c2 0 3.2 1 3.8 2 0.6-1 1.8-2 3.8-2 3.5 0 5.2 3.5 3.7 6.3C19 16.3 12 21 12 21z" stroke="#777" stroke-width="2" fill="none"/>420 </svg>421 </div>422 </div>423 <div class="details">424 <div class="rating">425 <svg viewBox="0 0 24 24" width="34" height="34" fill="#14994F">426 <path d="M12 17.3l-5.3 3 1.5-5.8L3 9.8l6-0.5L12 4l3 5.3 6 0.5-5.2 4.7 1.5 5.8z"/>427 </svg>428 <span>4</span>429 <span style="color:#888;">• 2 ratings</span>430 </div>431 <div class="title">TRAVEL BLUE 2 x TSA Lock (23, Gold)</div>432 <div class="meta">433 <div class="price">₹599</div>434 <div class="strike">₹995</div>435 <div class="deal">40% OFF</div>436 </div>437 <div class="benefit">438 <div class="badge"></div>439 <div>Grab <b>30 NeuCoins</b> with NeuPass</div>440 </div>441 <div class="delivery">442 <svg class="icon" viewBox="0 0 24 24" fill="none">443 <path d="M3 7h11v8H3zM14 9h5l2 2v4h-7V9z" stroke="#666" stroke-width="2" fill="none"/>444 <circle cx="6" cy="17" r="2" fill="#666"/>445 <circle cx="17" cy="17" r="2" fill="#666"/>446 </svg>447 <span>Delivery by <b>28th Dec</b></span>448 </div>449 </div>450 </div>451 452 <!-- Card 3 (partial preview) -->453 <div class="divider"></div>454 <div class="card">455 <div class="thumb">456 [IMG: Yale Smart Lock (Black)]457 <div class="fav">458 <svg viewBox="0 0 24 24" width="34" height="34" fill="none">459 <path d="M12 21s-7-4.7-9.5-8.2C1 10 2.7 6.5 6.2 6.5c2 0 3.2 1 3.8 2 0.6-1 1.8-2 3.8-2 3.5 0 5.2 3.5 3.7 6.3C19 16.3 12 21 12 21z" stroke="#777" stroke-width="2" fill="none"/>460 </svg>461 </div>462 </div>463 <div class="details">464 <div class="title">Yale Smart Locks (Power Bank Support, YLDRPBP- BL, Black)</div>465 <div class="meta">466 <div class="price">₹—</div>467 <div class="strike">₹—</div>468 <div class="deal">Deal</div>469 </div>470 </div>471 </div>472 </div>473 474 <!-- Bottom Navigation Pill -->475 <div class="nav-pill"></div>476</div>477</body>478</html>