GD-ML/AndroidCode
13.4k
1<!DOCTYPE html>2<html>3<head>4<meta charset="UTF-8">5<title>Search Results - Locks</title>6<style>7 body { margin: 0; padding: 0; background: transparent; font-family: system-ui, -apple-system, Segoe UI, Roboto, Helvetica, Arial; }8 #render-target {9 width: 1080px;10 height: 2400px;11 position: relative;12 overflow: hidden;13 background: #ffffff;14 color: #222;15 }16 /* Top dark area */17 .topbar {18 background: #1f1f1f;19 color: #fff;20 padding: 36px 40px 20px 40px;21 }22 .status-row {23 display: flex;24 justify-content: space-between;25 align-items: center;26 font-size: 38px;27 opacity: 0.95;28 }29 .status-icons { display: flex; align-items: center; gap: 28px; }30 .header-row {31 margin-top: 24px;32 display: flex;33 align-items: center;34 justify-content: space-between;35 }36 .header-left { display: flex; align-items: center; gap: 24px; }37 .back-btn {38 width: 60px; height: 60px;39 display: inline-flex; align-items: center; justify-content: center;40 }41 .deliver-text {42 font-size: 44px;43 font-weight: 600;44 color: #eaeaea;45 }46 .pin { color: #9769ff; font-weight: 700; }47 .header-right { display: flex; align-items: center; gap: 36px; }48 .icon-btn { width: 60px; height: 60px; display: inline-flex; align-items: center; justify-content: center; }49 /* Content area */50 .content { padding: 36px 40px; }51 .searchbar {52 background: #eeeeee;53 border-radius: 24px;54 height: 120px;55 display: flex;56 align-items: center;57 padding: 0 36px;58 gap: 24px;59 color: #6b6b6b;60 font-size: 40px;61 }62 .searchbar .spacer { flex: 1; }63 .chip-row { display: flex; gap: 28px; margin-top: 36px; flex-wrap: wrap; }64 .chip {65 border: 1px solid #d9d9d9;66 border-radius: 24px;67 padding: 24px 32px;68 font-size: 34px;69 color: #3b3b3b;70 background: #fff;71 display: inline-flex;72 align-items: center;73 gap: 18px;74 }75 .grey-placeholder {76 width: 380px; height: 56px; border-radius: 18px; background: #e6e6e6; margin: 34px 0;77 }78 .promo-row { display: flex; gap: 28px; margin-bottom: 24px; flex-wrap: wrap; }79 .promo-chip {80 border-radius: 18px;81 padding: 22px 32px;82 font-size: 34px;83 font-weight: 600;84 }85 .promo-blue { background: #0b64d9; color: #fff; }86 .promo-light { background: #d7e3ff; color: #2a4ea3; }87 /* Product card */88 .product-card {89 display: grid;90 grid-template-columns: 300px 1fr;91 gap: 36px;92 padding: 28px;93 border-radius: 26px;94 border: 1px solid #e6e6e6;95 background: #fff;96 align-items: start;97 }98 .img-wrap {99 position: relative;100 padding: 20px;101 background: #f4f4f4;102 border-radius: 28px;103 }104 .wishlist {105 position: absolute;106 right: 24px; top: 24px;107 width: 60px; height: 60px;108 display: flex; align-items: center; justify-content: center;109 background: #ffffff;110 border-radius: 30px;111 box-shadow: 0 2px 6px rgba(0,0,0,0.08);112 }113 .img-placeholder {114 width: 260px; height: 440px;115 background: #E0E0E0;116 border: 1px solid #BDBDBD;117 display: flex; justify-content: center; align-items: center;118 color: #757575; font-size: 30px; text-align: center;119 border-radius: 12px;120 margin: 0 auto;121 }122 .prod-title {123 font-size: 42px;124 font-weight: 700;125 line-height: 1.25;126 color: #2d2d2d;127 margin-top: 6px;128 }129 .price-row {130 display: flex; align-items: center; gap: 18px; margin-top: 18px;131 }132 .price-now { font-size: 48px; font-weight: 800; }133 .price-old { font-size: 36px; color: #9a9a9a; text-decoration: line-through; }134 .off-badge {135 font-size: 32px; color: #3d3d3d; background: #eeeeee; border-radius: 16px; padding: 10px 16px;136 }137 .meta-row { display: flex; align-items: center; gap: 16px; margin-top: 14px; }138 .tag {139 display: inline-flex; align-items: center; gap: 12px;140 font-size: 32px; color: #4c4c4c;141 background: #f0f0f3; padding: 12px 16px; border-radius: 16px;142 }143 .delivery {144 display: inline-flex; align-items: center; gap: 12px; font-size: 34px; color: #4c4c4c; margin-top: 10px;145 }146 .card-action-row { display: flex; gap: 24px; margin: 24px 28px; }147 .action-btn {148 background: #0b64d9; color: #fff; padding: 22px 32px; border-radius: 16px; font-size: 34px; font-weight: 700;149 }150 .action-btn.light { background: #d7e3ff; color: #2a4ea3; font-weight: 600; }151 .separator { height: 1px; background: #e6e6e6; margin: 28px 0; }152 /* Banners */153 .banner {154 background: #f6f6f8;155 border: 1px solid #e8e8e8;156 border-radius: 28px;157 padding: 28px;158 display: grid;159 grid-template-columns: 120px 1fr 60px;160 align-items: center;161 gap: 24px;162 margin-bottom: 24px;163 }164 .circle-icon {165 width: 100px; height: 100px; border-radius: 50%;166 background: #8a42ff; display: flex; align-items: center; justify-content: center;167 }168 .banner-title { font-size: 40px; font-weight: 800; color: #2d2d2d; }169 .banner-desc { font-size: 34px; color: #5a5a5a; margin-top: 6px; }170 .arrow-btn { display: flex; align-items: center; justify-content: center; }171 /* Simple SVG icon styles */172 svg { width: 44px; height: 44px; }173</style>174</head>175<body>176<div id="render-target">177 178 <div class="topbar">179 <div class="status-row">180 <div>2:10</div>181 <div class="status-icons">182 <!-- simple status glyphs -->183 <span style="font-size:34px; opacity:0.9;">⏺</span>184 <span style="font-size:34px;">📶</span>185 <span style="font-size:34px;">🔋 100%</span>186 </div>187 </div>188 <div class="header-row">189 <div class="header-left">190 <div class="back-btn">191 <svg viewBox="0 0 24 24" fill="#fff"><path d="M15.5 4l-8 8 8 8" stroke="#fff" stroke-width="2" fill="none" stroke-linecap="round" stroke-linejoin="round"/></svg>192 </div>193 <div class="deliver-text">Deliver to <span class="pin">110009</span></div>194 </div>195 <div class="header-right">196 <div class="icon-btn">197 <svg viewBox="0 0 24 24" fill="none" stroke="#fff" stroke-width="2"><path d="M12 21s-7-4.35-7-10a4 4 0 018 0 4 4 0 018 0c0 5.65-7 10-7 10z"/></svg>198 </div>199 <div class="icon-btn">200 <svg viewBox="0 0 24 24" fill="none" stroke="#fff" stroke-width="2"><path d="M6 6h15l-2 10H8L6 6z"/><circle cx="9" cy="20" r="2"/><circle cx="18" cy="20" r="2"/></svg>201 </div>202 </div>203 </div>204 </div>205 206 <div class="content">207 <!-- Search bar -->208 <div class="searchbar">209 <svg viewBox="0 0 24 24" fill="none" stroke="#777" stroke-width="2"><circle cx="10" cy="10" r="7"/><path d="M21 21l-5.5-5.5"/></svg>210 <div>locks</div>211 <div class="spacer"></div>212 <svg viewBox="0 0 24 24" fill="none" stroke="#777" stroke-width="2"><path d="M18 6L6 18M6 6l12 12"/></svg>213 </div>214 215 <!-- Filter chips -->216 <div class="chip-row">217 <div class="chip">218 <svg viewBox="0 0 24 24" fill="none" stroke="#555" stroke-width="2"><path d="M4 6h16M7 12h10M10 18h4"/></svg>219 <span>Filters</span>220 </div>221 <div class="chip">222 <span>Sort</span>223 <svg viewBox="0 0 24 24" fill="none" stroke="#555" stroke-width="2"><path d="M6 9l6 6 6-6"/></svg>224 </div>225 <div class="chip">226 <span>Delivery Mode</span>227 <svg viewBox="0 0 24 24" fill="none" stroke="#555" stroke-width="2"><path d="M6 9l6 6 6-6"/></svg>228 </div>229 <div class="chip">230 <span>Brand</span>231 <svg viewBox="0 0 24 24" fill="none" stroke="#555" stroke-width="2"><path d="M6 9l6 6 6-6"/></svg>232 </div>233 <div class="chip">234 <span>Price</span>235 <svg viewBox="0 0 24 24" fill="none" stroke="#555" stroke-width="2"><path d="M6 9l6 6 6-6"/></svg>236 </div>237 </div>238 239 <div class="grey-placeholder"></div>240 241 <div class="promo-row">242 <div class="promo-chip promo-blue">Extra 5% off on cart</div>243 <div class="promo-chip promo-light">Launch offer</div>244 </div>245 246 <!-- Product Card -->247 <div class="product-card">248 <div class="img-wrap">249 <div class="wishlist">250 <svg viewBox="0 0 24 24" fill="none" stroke="#7d7d7d" stroke-width="2"><path d="M12 21s-7-4.35-7-10a4 4 0 018 0 4 4 0 018 0c0 5.65-7 10-7 10z"/></svg>251 </div>252 <div class="img-placeholder">[IMG: Black Smart Lock]</div>253 </div>254 <div>255 <div class="prod-title">Yale Smart Locks For Private Space (Smart Keypad, YDME 100 NxT, Black)</div>256 257 <div class="price-row">258 <div class="price-now">₹14,500</div>259 <div class="price-old">₹25,999</div>260 <div class="off-badge">44% OFF</div>261 </div>262 263 <div class="meta-row">264 <div class="tag">265 <span style="width:24px;height:24px; background:#ff2; border-radius:6px; display:inline-block;"></span>266 Grab 725 NeuCoins with NeuPass267 </div>268 </div>269 270 <div class="delivery">271 <svg viewBox="0 0 24 24" fill="none" stroke="#666" stroke-width="2"><path d="M3 7h11v8H3zM14 10h4l3 3v2h-7z"/><circle cx="6" cy="17" r="2"/><circle cx="17" cy="17" r="2"/></svg>272 <span>Delivery by 28th Dec</span>273 </div>274 </div>275 </div>276 277 <div class="card-action-row">278 <div class="action-btn">Extra 5% off on cart</div>279 <div class="action-btn light">Launch offer</div>280 </div>281 282 <div class="separator"></div>283 284 <!-- Banner: Tata Pay Later -->285 <div class="banner">286 <div class="circle-icon">287 <svg viewBox="0 0 24 24" fill="none" stroke="#fff" stroke-width="2"><path d="M6 6h15l-2 10H8L6 6z"/><circle cx="9" cy="20" r="2"/><circle cx="18" cy="20" r="2"/></svg>288 </div>289 <div>290 <div class="banner-title">Tata Pay Later</div>291 <div class="banner-desc">Instant Credit up to ₹ 25,000 and one-click checkouts. Activate Tata Pay Later</div>292 </div>293 <div class="arrow-btn">294 <svg viewBox="0 0 24 24" fill="none" stroke="#777" stroke-width="2"><path d="M8 4l8 8-8 8"/></svg>295 </div>296 </div>297 298 <!-- Banner: NeuCoins -->299 <div class="banner">300 <div style="display:flex; align-items:center; justify-content:center;">301 <div class="img-placeholder" style="width:100px;height:100px; font-size:24px;">[IMG: Credit Cards]</div>302 </div>303 <div>304 <div class="banner-title">Get upto 5% extra NeuCoins</div>305 <div class="banner-desc">with Tata Neu HDFC Bank Credit Card. Apply Now!</div>306 </div>307 <div class="arrow-btn">308 <svg viewBox="0 0 24 24" fill="none" stroke="#777" stroke-width="2"><path d="M8 4l8 8-8 8"/></svg>309 </div>310 </div>311 312 <!-- Next product snippet -->313 <div class="product-card" style="grid-template-columns: 240px 1fr;">314 <div class="img-wrap" style="padding:16px;">315 <div class="wishlist">316 <svg viewBox="0 0 24 24" fill="none" stroke="#7d7d7d" stroke-width="2"><path d="M12 21s-7-4.35-7-10a4 4 0 018 0 4 4 0 018 0c0 5.65-7 10-7 10z"/></svg>317 </div>318 <div class="img-placeholder" style="width:200px;height:200px;">[IMG: Smart Door Sensor]</div>319 </div>320 <div>321 <div class="prod-title">CP PLUS Smart Door Sensor (Wireless Sensor, CP-HAS-D33-W, White)</div>322 </div>323 </div>324 325 </div>326 327</div>328</body>329</html>