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 - 1kg hammer</title>7<style>8 body { margin: 0; padding: 0; background: transparent; font-family: Arial, Helvetica, sans-serif; }9 #render-target {10 width: 1080px;11 height: 2400px;12 position: relative;13 overflow: hidden;14 background: #ffffff;15 }16 17 /* Top gradient header */18 .top-gradient {19 width: 100%;20 height: 380px;21 background: linear-gradient(180deg, #9fe0d3 0%, #bfe8dc 100%);22 position: relative;23 }24 25 /* Status bar */26 .status-bar {27 height: 80px;28 padding: 0 32px;29 display: flex;30 align-items: center;31 justify-content: space-between;32 color: #2a3b3b;33 font-size: 34px;34 letter-spacing: 0.5px;35 }36 .status-icons {37 display: flex;38 align-items: center;39 gap: 22px;40 }41 .dot { width: 10px; height: 10px; background: #526b6a; border-radius: 50%; display: inline-block; }42 .battery {43 width: 48px; height: 26px; border: 3px solid #2a3b3b; border-radius: 6px; position: relative;44 }45 .battery::after { content: ""; position: absolute; right: -10px; top: 6px; width: 6px; height: 14px; background: #2a3b3b; border-radius: 2px; }46 .battery .level { width: 70%; height: 100%; background: #2a3b3b; }47 48 /* Search row */49 .search-row {50 padding: 18px 28px 10px 16px;51 display: flex;52 align-items: center;53 gap: 20px;54 }55 .back-btn {56 width: 72px; height: 72px; border-radius: 36px;57 display: flex; align-items: center; justify-content: center;58 }59 .search-box {60 flex: 1;61 background: #ffffff;62 border-radius: 22px;63 box-shadow: 0 6px 14px rgba(0,0,0,0.18);64 height: 92px;65 display: flex; align-items: center;66 padding: 0 22px;67 gap: 18px;68 }69 .search-placeholder {70 color: #4a4a4a;71 font-size: 40px;72 flex: 1;73 }74 .search-icon, .camera-icon, .pin-icon, .chevron-down { display: inline-flex; }75 76 /* Location row */77 .location-row {78 padding: 14px 32px 18px 32px;79 display: flex; align-items: center; gap: 16px;80 color: #214244;81 font-size: 34px;82 }83 .location-row .muted { color: #2b595a; }84 85 /* Filter chips area */86 .chips-bar {87 width: 100%;88 background: #ffffff;89 border-top-left-radius: 26px;90 border-top-right-radius: 26px;91 margin-top: -4px;92 padding: 20px 20px 22px 20px;93 display: flex; align-items: center; gap: 16px; flex-wrap: nowrap;94 overflow: hidden;95 }96 .chip {97 background: #f1f3f4;98 color: #1f2b2c;99 border-radius: 28px;100 padding: 18px 26px;101 font-size: 32px;102 white-space: nowrap;103 border: 1px solid #e2e6e8;104 }105 .chip.primary {106 display: flex; align-items: center; gap: 12px;107 }108 .toggle {109 width: 70px; height: 36px; background: #e7e7e7; border-radius: 18px; position: relative; margin-left: 6px;110 }111 .toggle::after { content: ""; position: absolute; width: 30px; height: 30px; background: #ffffff; border-radius: 50%; top: 3px; left: 3px; box-shadow: 0 0 0 1px #cfd8dc inset; }112 113 /* Scrollable results area */114 .content {115 position: absolute;116 top: 512px; /* below chips */117 left: 0;118 right: 0;119 bottom: 190px; /* leave space for bottom bar */120 overflow-y: auto;121 padding: 16px 22px 120px 22px;122 background: #f6f7f8;123 }124 125 .card {126 background: #ffffff;127 border-radius: 22px;128 border: 1px solid #ececec;129 box-shadow: 0 2px 0 rgba(0,0,0,0.02);130 padding: 22px;131 display: grid;132 grid-template-columns: 280px 1fr;133 gap: 24px;134 margin-bottom: 22px;135 }136 .img-ph {137 width: 100%; height: 280px;138 background: #E0E0E0;139 border: 1px solid #BDBDBD;140 border-radius: 14px;141 display: flex; align-items: center; justify-content: center;142 color: #757575; font-size: 30px; text-align: center; padding: 10px;143 }144 .sponsored { color: #757575; font-size: 28px; margin-bottom: 6px; }145 .title { font-size: 36px; color: #222; line-height: 1.25; margin-bottom: 10px; }146 .badge {147 display: inline-block;148 background: #eef1f2;149 border: 1px solid #d7dbde;150 color: #333;151 font-size: 26px;152 padding: 6px 12px;153 border-radius: 8px;154 margin-bottom: 10px;155 }156 .rating-row {157 display: flex; align-items: center; gap: 10px;158 margin: 6px 0 10px 0;159 }160 .rating-score { color: #1a73e8; font-size: 30px; }161 .stars { display: inline-flex; gap: 4px; }162 .stars svg { width: 26px; height: 26px; }163 .reviews { color: #7b7b7b; font-size: 28px; }164 165 .price-row { display: flex; align-items: baseline; gap: 14px; margin: 10px 0 6px 0; }166 .price { font-size: 44px; color: #222; font-weight: bold; }167 .mrp { color: #777; font-size: 28px; text-decoration: line-through; }168 .off { color: #555; font-size: 28px; }169 170 .prime-line { display: flex; align-items: center; gap: 10px; color: #1a73e8; font-weight: bold; font-size: 30px; margin: 8px 0; }171 .prime-line small { color: #444; font-weight: normal; }172 .delivery { color: #757575; font-size: 28px; }173 .warning { color: #c63c22; font-size: 28px; margin-top: 6px; }174 175 .deal {176 display: inline-block;177 background: #b33a21;178 color: #fff;179 padding: 8px 14px;180 border-radius: 10px;181 font-size: 28px;182 margin: 6px 0;183 }184 185 /* Bottom navigation */186 .bottom-nav {187 position: absolute;188 left: 0; right: 0; bottom: 40px;189 height: 150px;190 background: #ffffff;191 border-top: 1px solid #e6e6e6;192 display: flex; align-items: center; justify-content: space-around;193 }194 .nav-item { display: flex; flex-direction: column; align-items: center; gap: 8px; color: #111; font-size: 28px; }195 .nav-item.active { color: #0b9a99; }196 .nav-item svg { width: 48px; height: 48px; }197 198 /* Gesture bar */199 .gesture {200 position: absolute;201 bottom: 12px; left: 50%;202 transform: translateX(-50%);203 width: 230px; height: 10px; background: #cfcfcf; border-radius: 8px;204 }205</style>206</head>207<body>208<div id="render-target">209 210 <div class="top-gradient">211 <div class="status-bar">212 <div>12:31</div>213 <div class="status-icons">214 <div class="dot"></div>215 <div class="dot"></div>216 <div class="dot"></div>217 <div class="dot"></div>218 <div class="dot"></div>219 <div class="battery"><div class="level"></div></div>220 <div style="font-size:28px;color:#2a3b3b;">94%</div>221 </div>222 </div>223 224 <div class="search-row">225 <div class="back-btn">226 <svg class="back-icon" viewBox="0 0 24 24" width="44" height="44" fill="none" stroke="#213c3d" stroke-width="2.5" stroke-linecap="round" stroke-linejoin="round">227 <path d="M15 18l-6-6 6-6"/>228 </svg>229 </div>230 <div class="search-box">231 <svg class="search-icon" viewBox="0 0 24 24" width="36" height="36" fill="none" stroke="#5f6d6d" stroke-width="2.2">232 <circle cx="11" cy="11" r="7"></circle>233 <path d="M20 20l-3.5-3.5"></path>234 </svg>235 <div class="search-placeholder">1kg hammer</div>236 <svg class="camera-icon" viewBox="0 0 24 24" width="40" height="40" fill="none" stroke="#4c5a5a" stroke-width="2">237 <rect x="3" y="6" width="18" height="12" rx="2"></rect>238 <path d="M9 6l1.5-2h3L15 6"></path>239 <circle cx="12" cy="12" r="3.2"></circle>240 </svg>241 </div>242 </div>243 244 <div class="location-row">245 <svg class="pin-icon" viewBox="0 0 24 24" width="34" height="34" fill="#214244">246 <path d="M12 2C8.7 2 6 4.7 6 8c0 5 6 12 6 12s6-7 6-12c0-3.3-2.7-6-6-6zm0 8.5A2.5 2.5 0 1 1 12 5.5a2.5 2.5 0 0 1 0 5z"/>247 </svg>248 <div class="muted">Delivering to Dehradun 248001 - Update location</div>249 <svg class="chevron-down" viewBox="0 0 24 24" width="26" height="26" fill="#214244">250 <path d="M6 9l6 6 6-6"/>251 </svg>252 </div>253 </div>254 255 <div class="chips-bar">256 <div class="chip primary">257 <span style="color:#f0a200; font-weight:bold;">prime</span>258 <div class="toggle"></div>259 </div>260 <div class="chip">Claw Hammers</div>261 <div class="chip">Club Hammers</div>262 <div class="chip">Filters ▼</div>263 </div>264 265 <div class="content">266 <!-- Card 1 -->267 <div class="card">268 <div class="img-ph">[IMG: Orange-black ball pein hammer]</div>269 <div>270 <div class="sponsored">Sponsored</div>271 <div class="title">Groz Ball Pein Hammer with Overstrike Protection | Fibreglass Handle| Durable and Lightweight...</div>272 <div class="badge">Industrial</div>273 <div class="rating-row">274 <div class="rating-score">5.0</div>275 <div class="stars">276 <svg viewBox="0 0 24 24" fill="#f59e0b"><path d="M12 2l3.1 6.3 7 .9-5 4.9 1.2 7L12 17l-6.3 4.1 1.2-7-5-4.9 7-.9z"/></svg>277 <svg viewBox="0 0 24 24" fill="#f59e0b"><path d="M12 2l3.1 6.3 7 .9-5 4.9 1.2 7L12 17l-6.3 4.1 1.2-7-5-4.9 7-.9z"/></svg>278 <svg viewBox="0 0 24 24" fill="#f59e0b"><path d="M12 2l3.1 6.3 7 .9-5 4.9 1.2 7L12 17l-6.3 4.1 1.2-7-5-4.9 7-.9z"/></svg>279 <svg viewBox="0 0 24 24" fill="#f59e0b"><path d="M12 2l3.1 6.3 7 .9-5 4.9 1.2 7L12 17l-6.3 4.1 1.2-7-5-4.9 7-.9z"/></svg>280 <svg viewBox="0 0 24 24" fill="#f59e0b"><path d="M12 2l3.1 6.3 7 .9-5 4.9 1.2 7L12 17l-6.3 4.1 1.2-7-5-4.9 7-.9z"/></svg>281 </div>282 <div class="reviews">(1)</div>283 </div>284 <div class="price-row">285 <div class="price">₹718</div>286 <div class="mrp">₹898</div>287 <div class="off">(20% off)</div>288 </div>289 <div class="prime-line">290 ✓ prime <small>Get it by Tomorrow, 21 November</small>291 </div>292 <div class="delivery">FREE Delivery by Amazon</div>293 </div>294 </div>295 296 <!-- Card 2 -->297 <div class="card">298 <div class="img-ph">[IMG: Orange-black stoning hammer]</div>299 <div>300 <div class="sponsored">Sponsored</div>301 <div class="title">Harden 1000 grams (1KG) Professional Stoning Hammer, Forged Fine Grain Carbon Steel...</div>302 <div class="badge">Ergonomic</div>303 <div class="rating-row">304 <div class="rating-score" style="color:#1e88e5;">4.0</div>305 <div class="stars">306 <svg viewBox="0 0 24 24" fill="#f59e0b"><path d="M12 2l3.1 6.3 7 .9-5 4.9 1.2 7L12 17l-6.3 4.1 1.2-7-5-4.9 7-.9z"/></svg>307 <svg viewBox="0 0 24 24" fill="#f59e0b"><path d="M12 2l3.1 6.3 7 .9-5 4.9 1.2 7L12 17l-6.3 4.1 1.2-7-5-4.9 7-.9z"/></svg>308 <svg viewBox="0 0 24 24" fill="#f59e0b"><path d="M12 2l3.1 6.3 7 .9-5 4.9 1.2 7L12 17l-6.3 4.1 1.2-7-5-4.9 7-.9z"/></svg>309 <svg viewBox="0 0 24 24" fill="#f59e0b"><path d="M12 2l3.1 6.3 7 .9-5 4.9 1.2 7L12 17l-6.3 4.1 1.2-7-5-4.9 7-.9z"/></svg>310 <svg viewBox="0 0 24 24" fill="#ddd"><path d="M12 2l3.1 6.3 7 .9-5 4.9 1.2 7L12 17l-6.3 4.1 1.2-7-5-4.9 7-.9z"/></svg>311 </div>312 <div class="reviews">(2)</div>313 </div>314 <div class="deal">Deal of the Day</div>315 <div class="price-row">316 <div class="price">₹920</div>317 <div class="mrp">₹1,130</div>318 <div class="off">(19% off)</div>319 </div>320 <div class="prime-line">321 ✓ prime <small>Get it by Sunday, 26 November</small>322 </div>323 <div class="delivery">FREE Delivery by Amazon</div>324 <div class="warning">Only 2 left in stock.</div>325 </div>326 </div>327 328 <!-- Partial third card header to hint list continuation -->329 <div style="display:flex; align-items:center; gap:12px; margin: 10px 0;">330 <div style="background:#0a5b55;color:#fff;border-radius:10px 0 0 10px;padding:10px 16px;font-size:28px;">Amazon's</div>331 <div style="background:#f6f7f8;color:#0a5b55;border:1px solid #d7d7d7;border-left:0;border-radius:0 10px 10px 0;padding:10px 16px;font-size:28px;">Choice</div>332 </div>333 <div class="card" style="grid-template-columns: 180px 1fr;">334 <div class="img-ph" style="height:180px;">[IMG: Sledge hammer]</div>335 <div>336 <div class="title" style="font-size:34px;">Proxima Sledge Hammer with Fiber Glass Handle (Head Weight: 1 Kg)...</div>337 <div class="delivery">Eligible for FREE Delivery</div>338 </div>339 </div>340 341 </div>342 343 <!-- Bottom navigation -->344 <div class="bottom-nav">345 <div class="nav-item active">346 <svg viewBox="0 0 24 24" fill="none" stroke="#0b9a99" stroke-width="2">347 <path d="M3 10l9-7 9 7v9a2 2 0 0 1-2 2h-4v-6H9v6H5a2 2 0 0 1-2-2z"/>348 </svg>349 <div>Home</div>350 </div>351 <div class="nav-item">352 <svg viewBox="0 0 24 24" fill="none" stroke="#111" stroke-width="2">353 <circle cx="12" cy="8" r="4"></circle>354 <path d="M5.5 21a7 7 0 0 1 13 0"></path>355 </svg>356 <div>You</div>357 </div>358 <div class="nav-item">359 <svg viewBox="0 0 24 24" fill="none" stroke="#111" stroke-width="2">360 <rect x="3" y="3" width="7" height="7"></rect>361 <rect x="14" y="3" width="7" height="7"></rect>362 <rect x="3" y="14" width="7" height="7"></rect>363 </svg>364 <div>More</div>365 </div>366 <div class="nav-item">367 <svg viewBox="0 0 24 24" fill="none" stroke="#111" stroke-width="2">368 <path d="M6 6h15l-1.5 9H7.5L6 6z"></path>369 <circle cx="9" cy="20" r="1.5"></circle>370 <circle cx="18" cy="20" r="1.5"></circle>371 </svg>372 <div>Cart</div>373 </div>374 <div class="nav-item">375 <svg viewBox="0 0 24 24" fill="none" stroke="#111" stroke-width="2">376 <path d="M3 6h18M3 12h18M3 18h18"></path>377 </svg>378 <div>Menu</div>379 </div>380 </div>381 382 <div class="gesture"></div>383</div>384</body>385</html>