GD-ML/AndroidCode
13.4k
1<!DOCTYPE html>2<html>3<head>4<meta charset="utf-8">5<meta name="viewport" content="width=1080, initial-scale=1.0">6<title>Locks - Listing</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, Helvetica, Arial, sans-serif;16 color: #222;17 }18 .statusbar {19 height: 100px;20 background: #EFEFEF;21 display: flex;22 align-items: center;23 justify-content: space-between;24 padding: 0 40px;25 font-size: 34px;26 }27 .status-right {28 display: flex;29 align-items: center;30 gap: 22px;31 color: #555;32 }33 .header {34 height: 140px;35 display: flex;36 align-items: center;37 justify-content: space-between;38 padding: 0 28px;39 border-bottom: 1px solid #EAEAEA;40 background: #fff;41 }42 .header-left {43 display: flex;44 align-items: center;45 gap: 24px;46 font-size: 44px;47 font-weight: 600;48 color: #333;49 }50 .header-icons {51 display: flex;52 align-items: center;53 gap: 36px;54 color: #666;55 }56 .icon-btn { width: 56px; height: 56px; display: inline-flex; align-items: center; justify-content: center; }57 .divider { width: 1px; height: 64px; background: #EAEAEA; }58 .sort-filter {59 height: 120px;60 display: flex;61 align-items: center;62 background: #fff;63 border-bottom: 1px solid #EAEAEA;64 }65 .sf-item {66 width: 50%;67 display: flex;68 align-items: center;69 gap: 18px;70 justify-content: center;71 font-size: 36px;72 color: #333;73 }74 .banner {75 height: 180px;76 margin: 12px 20px 18px;77 border-radius: 20px;78 overflow: hidden;79 position: relative;80 background: #4F57E8;81 border: 1px solid #D6D6D6;82 display: flex;83 align-items: center;84 justify-content: center;85 color: #fff;86 font-weight: 700;87 font-size: 40px;88 }89 .grid {90 display: grid;91 grid-template-columns: repeat(2, 1fr);92 gap: 22px;93 padding: 0 22px 0;94 }95 .card {96 background: #fff;97 border: 1px solid #E6E6E6;98 border-radius: 22px;99 padding: 18px;100 position: relative;101 }102 .badge {103 position: absolute;104 top: 16px;105 left: 16px;106 background: #F3F3F3;107 color: #666;108 font-size: 26px;109 padding: 6px 12px;110 border-radius: 10px;111 border: 1px solid #E0E0E0;112 }113 .badge.trending {114 background: #2FA7A1;115 color: #fff;116 border-color: #2FA7A1;117 }118 .fav-btn {119 position: absolute;120 top: 16px;121 right: 16px;122 width: 64px; height: 64px;123 border-radius: 50%;124 border: 1px solid #E0E0E0;125 background: #fff;126 display: flex; align-items: center; justify-content: center;127 }128 .img-ph {129 width: 100%;130 height: 320px;131 background: #E0E0E0;132 border: 1px solid #BDBDBD;133 border-radius: 14px;134 display: flex; align-items: center; justify-content: center;135 color: #757575;136 font-size: 30px;137 margin-bottom: 16px;138 }139 .title {140 font-size: 32px;141 line-height: 40px;142 color: #333;143 margin-bottom: 10px;144 }145 .price-row {146 display: flex; align-items: baseline; gap: 12px;147 font-size: 34px;148 margin-bottom: 8px;149 }150 .old-price {151 color: #999;152 text-decoration: line-through;153 }154 .new-price {155 font-weight: 700;156 color: #111;157 }158 .discount {159 color: #1FA44B;160 font-weight: 700;161 font-size: 32px;162 }163 .delivery {164 display: flex; align-items: center; gap: 10px;165 color: #3E67FF;166 font-size: 30px;167 margin: 8px 0 16px;168 }169 .coupon {170 background: #EAF9E6;171 border: 1px solid #CFEAC6;172 color: #2A6E2E;173 border-radius: 14px;174 padding: 16px 18px;175 display: flex; align-items: center; justify-content: space-between;176 font-size: 32px;177 }178 .coupon .left {179 display: flex; align-items: center; gap: 10px;180 font-weight: 700;181 }182 .coupon .right { opacity: 0.9; }183 .bottom-nav {184 position: absolute;185 bottom: 90px;186 left: 0; right: 0;187 height: 170px;188 border-top: 1px solid #E3E3E3;189 background: #fff;190 display: flex;191 align-items: center;192 justify-content: space-around;193 padding: 0 20px;194 }195 .nav-item {196 display: flex;197 flex-direction: column;198 align-items: center;199 gap: 10px;200 font-size: 26px;201 color: #666;202 }203 .nav-item.active { color: #5C66FF; }204 .nav-icon { width: 48px; height: 48px; }205 .active-bar {206 position: absolute;207 left: 216px; /* approximate center of Search item */208 bottom: 170px;209 width: 120px;210 height: 6px;211 background: #5C66FF;212 border-radius: 3px;213 }214 .home-indicator {215 position: absolute;216 bottom: 28px;217 left: 50%;218 transform: translateX(-50%);219 width: 360px;220 height: 14px;221 background: #000;222 opacity: 0.12;223 border-radius: 10px;224 }225</style>226</head>227<body>228<div id="render-target">229 230 <!-- Status bar -->231 <div class="statusbar">232 <div>10:31</div>233 <div class="status-right">234 <!-- simple status icons -->235 <svg width="30" height="30"><circle cx="15" cy="15" r="13" fill="#888"/></svg>236 <svg width="34" height="30" viewBox="0 0 24 24">237 <path d="M2 18h20L12 6 2 18z" fill="#666"/>238 </svg>239 <div>92%</div>240 </div>241 </div>242 243 <!-- Header -->244 <div class="header">245 <div class="header-left">246 <div class="icon-btn">247 <svg width="48" height="48" viewBox="0 0 24 24">248 <path d="M15 6L9 12l6 6" stroke="#222" stroke-width="2" fill="none" stroke-linecap="round" stroke-linejoin="round"/>249 <path d="M9 12h10" stroke="#222" stroke-width="2" fill="none" stroke-linecap="round"/>250 </svg>251 </div>252 <div>Locks</div>253 </div>254 <div class="header-icons">255 <div class="icon-btn">256 <!-- search icon -->257 <svg width="48" height="48" viewBox="0 0 24 24">258 <circle cx="11" cy="11" r="7" stroke="#333" stroke-width="2" fill="none"/>259 <path d="M20 20l-4.5-4.5" stroke="#333" stroke-width="2" fill="none" stroke-linecap="round"/>260 </svg>261 </div>262 <div class="icon-btn">263 <!-- mic icon -->264 <svg width="48" height="48" viewBox="0 0 24 24">265 <rect x="9" y="5" width="6" height="10" rx="3" stroke="#333" stroke-width="2" fill="none"/>266 <path d="M6 11c0 3 3 5 6 5s6-2 6-5" stroke="#333" stroke-width="2" fill="none" stroke-linecap="round"/>267 <path d="M12 16v4" stroke="#333" stroke-width="2" stroke-linecap="round"/>268 </svg>269 </div>270 <div class="icon-btn">271 <!-- heart icon -->272 <svg width="48" height="48" viewBox="0 0 24 24">273 <path d="M12 21s-7-4.5-7-10a4.5 4.5 0 018-2 4.5 4.5 0 018 2c0 5.5-7 10-7 10z" stroke="#333" stroke-width="2" fill="none"/>274 </svg>275 </div>276 <div class="icon-btn">277 <!-- cart icon -->278 <svg width="48" height="48" viewBox="0 0 24 24">279 <path d="M3 5h2l2 12h10l2-8H7" stroke="#333" stroke-width="2" fill="none" stroke-linecap="round" stroke-linejoin="round"/>280 <circle cx="9" cy="20" r="1.5" fill="#333"/>281 <circle cx="17" cy="20" r="1.5" fill="#333"/>282 </svg>283 </div>284 </div>285 </div>286 287 <!-- Sort / Filter -->288 <div class="sort-filter">289 <div class="sf-item">290 <svg width="44" height="44" viewBox="0 0 24 24">291 <path d="M10 4h10M4 9h16M8 14h12M6 19h14" stroke="#333" stroke-width="2" fill="none" stroke-linecap="round"/>292 </svg>293 <span>Sort</span>294 </div>295 <div class="divider"></div>296 <div class="sf-item">297 <svg width="44" height="44" viewBox="0 0 24 24">298 <path d="M5 5h4v14H5zM10 9h4v10h-4zM15 12h4v7h-4z" fill="#333"/>299 </svg>300 <span>Filter</span>301 </div>302 </div>303 304 <!-- Banner -->305 <div class="banner">306 Ye Hai Best Value Ka Badge • Budget Deals307 </div>308 309 <!-- Product grid -->310 <div class="grid">311 <!-- Card 1 -->312 <div class="card">313 <div class="badge">Ad</div>314 <div class="fav-btn">315 <svg width="30" height="30" viewBox="0 0 24 24">316 <path d="M12 21s-7-4.5-7-10a4.5 4.5 0 018-2 4.5 4.5 0 018 2c0 5.5-7 10-7 10z" stroke="#666" stroke-width="2" fill="none"/>317 </svg>318 </div>319 <div class="img-ph">[IMG: Round locks with keys - Same Keys]</div>320 <div class="title">Round 40mm 6Keys Same with...</div>321 <div class="price-row">322 <div class="old-price">339</div>323 <div class="new-price">₹155</div>324 <div class="discount">54% off</div>325 </div>326 <div class="delivery">327 <svg width="28" height="28" viewBox="0 0 24 24">328 <path d="M3 7h11v8H3zM14 10h5l2 3v2h-7zM6 18a2 2 0 100-4 2 2 0 000 4zm10 0a2 2 0 100-4 2 2 0 000 4z" fill="#3E67FF"/>329 </svg>330 <span>Free Delivery</span>331 </div>332 <div class="coupon">333 <div class="left">₹39</div>334 <div class="right">Coupon available</div>335 </div>336 </div>337 338 <!-- Card 2 -->339 <div class="card">340 <div class="badge">Ad</div>341 <div class="fav-btn">342 <svg width="30" height="30" viewBox="0 0 24 24">343 <path d="M12 21s-7-4.5-7-10a4.5 4.5 0 018-2 4.5 4.5 0 018 2c0 5.5-7 10-7 10z" stroke="#666" stroke-width="2" fill="none"/>344 </svg>345 </div>346 <div class="img-ph">[IMG: Round 50mm lock with 6 keys and keychain]</div>347 <div class="title">Round 50mm 6 Keys Lock and...</div>348 <div class="price-row">349 <div class="old-price">419</div>350 <div class="new-price">₹175</div>351 <div class="discount">58% off</div>352 </div>353 <div class="delivery">354 <svg width="28" height="28" viewBox="0 0 24 24">355 <path d="M3 7h11v8H3zM14 10h5l2 3v2h-7zM6 18a2 2 0 100-4 2 2 0 000 4zm10 0a2 2 0 100-4 2 2 0 000 4z" fill="#3E67FF"/>356 </svg>357 <span>Free Delivery</span>358 </div>359 <div class="coupon">360 <div class="left">₹40</div>361 <div class="right">Coupon available</div>362 </div>363 </div>364 365 <!-- Card 3 -->366 <div class="card">367 <div class="fav-btn">368 <svg width="30" height="30" viewBox="0 0 24 24">369 <path d="M12 21s-7-4.5-7-10a4.5 4.5 0 018-2 4.5 4.5 0 018 2c0 5.5-7 10-7 10z" stroke="#666" stroke-width="2" fill="none"/>370 </svg>371 </div>372 <div class="img-ph">[IMG: Two heavy round padlocks with keys and Guard logo]</div>373 <div class="title">Active Black- 52MM, 7 Levers...</div>374 <div class="price-row">375 <div class="new-price">₹399</div>376 <div class="discount">Deal</div>377 </div>378 </div>379 380 <!-- Card 4 -->381 <div class="card">382 <div class="badge trending">Trending</div>383 <div class="fav-btn">384 <svg width="30" height="30" viewBox="0 0 24 24">385 <path d="M12 21s-7-4.5-7-10a4.5 4.5 0 018-2 4.5 4.5 0 018 2c0 5.5-7 10-7 10z" stroke="#666" stroke-width="2" fill="none"/>386 </svg>387 </div>388 <div class="img-ph">[IMG: Brass push lock with 2 keys]</div>389 <div class="title">Metal brass push lock with 2 k...</div>390 <div class="price-row">391 <div class="new-price">₹189</div>392 <div class="discount">Sale</div>393 </div>394 </div>395 </div>396 397 <!-- Bottom navigation -->398 <div class="bottom-nav">399 <div class="nav-item">400 <svg class="nav-icon" viewBox="0 0 24 24">401 <path d="M3 11l9-7 9 7v9H3z" stroke="#666" stroke-width="2" fill="none" stroke-linejoin="round"/>402 </svg>403 <div>Home</div>404 </div>405 <div class="nav-item active">406 <svg class="nav-icon" viewBox="0 0 24 24">407 <circle cx="11" cy="11" r="7" stroke="#5C66FF" stroke-width="2" fill="none"/>408 <path d="M20 20l-4.5-4.5" stroke="#5C66FF" stroke-width="2" fill="none" stroke-linecap="round"/>409 </svg>410 <div>Search</div>411 </div>412 <div class="nav-item">413 <svg class="nav-icon" viewBox="0 0 24 24">414 <path d="M4 4h7v7H4zM13 4h7v7h-7zM4 13h7v7H4zM13 13h7v7h-7z" fill="#666"/>415 </svg>416 <div>Categories</div>417 </div>418 <div class="nav-item">419 <svg class="nav-icon" viewBox="0 0 24 24">420 <circle cx="12" cy="8" r="4" stroke="#666" stroke-width="2" fill="none"/>421 <path d="M4 21c0-4 4-7 8-7s8 3 8 7" stroke="#666" stroke-width="2" fill="none"/>422 </svg>423 <div>Account</div>424 </div>425 <div class="nav-item">426 <svg class="nav-icon" viewBox="0 0 24 24">427 <path d="M3 5h2l2 12h10l2-8H7" stroke="#666" stroke-width="2" fill="none" stroke-linecap="round" stroke-linejoin="round"/>428 </svg>429 <div>Cart</div>430 </div>431 </div>432 <div class="active-bar"></div>433 434 <!-- Home indicator -->435 <div class="home-indicator"></div>436 437</div>438</body>439</html>