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 UI</title>7<style>8 body { margin: 0; padding: 0; background: transparent; font-family: "Segoe UI", Arial, sans-serif; color: #222; }9 #render-target {10 width: 1080px; height: 2400px;11 position: relative; overflow: hidden;12 background: #F6F6F8;13 }14 15 /* Header */16 .status-bar {17 height: 110px;18 background: #1F1F1F;19 color: #fff;20 display: flex;21 align-items: center;22 padding: 0 40px;23 font-weight: 600;24 font-size: 40px;25 letter-spacing: 0.2px;26 }27 .status-right {28 margin-left: auto; display: flex; align-items: center; gap: 28px;29 }30 .header {31 height: 140px;32 background: #1F1F1F;33 color: #fff;34 display: flex;35 align-items: center;36 padding: 0 40px;37 }38 .header-title {39 font-size: 42px;40 font-weight: 600;41 margin-left: 20px;42 }43 .header-title .accent { color: #8B5CF6; font-weight: 700; }44 .header-actions { margin-left: auto; display: flex; gap: 36px; }45 46 /* Search */47 .content { padding: 32px 36px; }48 .search-bar {49 height: 110px; border-radius: 22px;50 background: #ECEDEF; display: flex; align-items: center;51 padding: 0 32px; color: #737373; font-size: 40px;52 box-shadow: inset 0 0 0 2px #E5E6E8;53 }54 .search-bar .spacer { flex: 1; }55 56 /* Chips and filters */57 .filters { display: flex; gap: 22px; margin-top: 28px; }58 .chip {59 height: 92px; padding: 0 28px; border-radius: 18px;60 border: 2px solid #E3E3E6; background: #fff;61 display: inline-flex; align-items: center; gap: 18px;62 color: #4B4B50; font-size: 36px; font-weight: 600;63 }64 .chip .caret { margin-left: 10px; }65 66 /* Promo banner */67 .promo {68 background: #fff;69 border-radius: 26px;70 padding: 26px;71 margin-top: 28px;72 display: flex; align-items: center; gap: 26px;73 box-shadow: 0 2px 0 #EDEDF0 inset;74 }75 .promo .img {76 width: 160px; height: 140px;77 background: #E0E0E0; border: 1px solid #BDBDBD;78 display: flex; justify-content: center; align-items: center; color: #757575; border-radius: 14px;79 font-size: 28px; text-align: center;80 }81 .promo .text { flex: 1; }82 .promo .title { font-size: 44px; font-weight: 800; line-height: 1.2; }83 .promo .sub { font-size: 36px; color: #5B5B61; margin-top: 6px; }84 .promo .arrow { margin-left: 18px; }85 86 /* Product list */87 .list { margin-top: 18px; }88 .divider { height: 2px; background: #E9E9EC; margin: 10px -36px 30px -36px; }89 90 .product-card { padding: 24px 0 10px 0; }91 .product-row { display: flex; gap: 28px; }92 .prod-img-wrap {93 width: 300px; height: 360px;94 background: #F0F0F2; border-radius: 26px;95 position: relative; display: flex; align-items: center; justify-content: center;96 border: 2px solid #ECECF0;97 }98 .img-placeholder {99 width: 240px; height: 300px;100 background: #E0E0E0; border: 1px solid #BDBDBD; border-radius: 16px;101 display: flex; align-items: center; justify-content: center; color: #757575; font-size: 30px; text-align: center;102 }103 .wishlist {104 position: absolute; right: 16px; top: 16px;105 width: 72px; height: 72px; border-radius: 36px;106 background: #fff; border: 2px solid #E6E6EA; display: flex; align-items: center; justify-content: center;107 }108 109 .prod-info { flex: 1; padding-right: 20px; }110 .prod-title { font-size: 46px; font-weight: 800; line-height: 1.25; color: #1F1F24; }111 .price-row { display: flex; align-items: center; gap: 18px; margin-top: 16px; }112 .price { font-size: 48px; font-weight: 900; }113 .old-price { font-size: 42px; color: #7A7A80; text-decoration: line-through; }114 .off { border: 2px solid #E5E5E9; border-radius: 16px; padding: 8px 16px; font-size: 34px; font-weight: 700; color: #4B4B4F; background: #fff; }115 116 .badge-row { display: flex; gap: 18px; margin-top: 18px; flex-wrap: wrap; }117 .badge {118 display: inline-flex; align-items: center; gap: 12px;119 background: #F2F2F5; border: 2px solid #E6E6EA; color: #52525A;120 border-radius: 16px; padding: 12px 18px; font-size: 34px; font-weight: 600;121 }122 .badge .neu { color: #8B5CF6; font-weight: 800; }123 124 /* Bottom gesture bar */125 .gesture {126 position: absolute; bottom: 24px; left: 50%; transform: translateX(-50%);127 width: 280px; height: 16px; background: #1F1F1F; border-radius: 10px; opacity: 0.9;128 }129 130 /* Simple icon styles */131 svg { display: block; }132</style>133</head>134<body>135<div id="render-target">136 137 <!-- Status bar -->138 <div class="status-bar">139 2:10140 <div class="status-right">141 <!-- Do Not Disturb icon -->142 <svg width="42" height="42" viewBox="0 0 24 24" fill="none">143 <circle cx="12" cy="12" r="10" stroke="#fff" stroke-width="2"></circle>144 <rect x="6" y="11" width="12" height="2" fill="#fff"></rect>145 </svg>146 <!-- Battery -->147 <svg width="60" height="42" viewBox="0 0 30 18" fill="none">148 <rect x="1" y="3" width="24" height="12" rx="2" stroke="#fff" stroke-width="2"></rect>149 <rect x="3" y="5" width="18" height="8" rx="1" fill="#fff"></rect>150 <rect x="26" y="6" width="3" height="6" rx="1" fill="#fff"></rect>151 </svg>152 <!-- 100% -->153 <span style="font-size:38px; font-weight:700;">100%</span>154 </div>155 </div>156 157 <!-- Header navigation -->158 <div class="header">159 <!-- Back -->160 <svg width="56" height="56" viewBox="0 0 24 24" fill="none">161 <path d="M15 19L8 12l7-7" stroke="#fff" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"></path>162 </svg>163 <div class="header-title">Deliver to <span class="accent">110009</span></div>164 <div class="header-actions">165 <!-- Heart -->166 <svg width="56" height="56" viewBox="0 0 24 24" fill="none">167 <path d="M12 21s-6.5-4.2-8.4-7.1C2.3 11.2 3.3 8 6.2 8c2.1 0 3.1 1.4 3.8 2.4.7-1 1.7-2.4 3.8-2.4 2.9 0 3.9 3.2 2.6 5.9C18.5 16.8 12 21 12 21z" stroke="#fff" stroke-width="2" fill="none"></path>168 </svg>169 <!-- Cart -->170 <svg width="56" height="56" viewBox="0 0 24 24" fill="none">171 <path d="M6 6h15l-2 8H8L6 6z" stroke="#fff" stroke-width="2" fill="none"></path>172 <circle cx="9" cy="19" r="2" fill="#fff"></circle>173 <circle cx="18" cy="19" r="2" fill="#fff"></circle>174 </svg>175 </div>176 </div>177 178 <div class="content">179 <!-- Search bar -->180 <div class="search-bar">181 <svg width="44" height="44" viewBox="0 0 24 24" fill="none">182 <circle cx="11" cy="11" r="7" stroke="#7B7B7B" stroke-width="2"></circle>183 <path d="M20 20l-4-4" stroke="#7B7B7B" stroke-width="2" stroke-linecap="round"></path>184 </svg>185 <div style="margin-left:16px;">locks</div>186 <div class="spacer"></div>187 <svg width="44" height="44" viewBox="0 0 24 24" fill="none">188 <path d="M18 6L6 18M6 6l12 12" stroke="#9B9BA2" stroke-width="2" stroke-linecap="round"></path>189 </svg>190 </div>191 192 <!-- Filters -->193 <div class="filters">194 <div class="chip">195 <!-- sliders icon -->196 <svg width="44" height="44" viewBox="0 0 24 24" fill="none">197 <path d="M6 5h12M6 12h12M6 19h12" stroke="#6A6A71" stroke-width="2" stroke-linecap="round"></path>198 <circle cx="9" cy="5" r="2" fill="#6A6A71"></circle>199 <circle cx="15" cy="12" r="2" fill="#6A6A71"></circle>200 <circle cx="11" cy="19" r="2" fill="#6A6A71"></circle>201 </svg>202 </div>203 <div class="chip">Sort204 <svg class="caret" width="32" height="32" viewBox="0 0 24 24" fill="none">205 <path d="M6 9l6 6 6-6" stroke="#6A6A71" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"></path>206 </svg>207 </div>208 <div class="chip">Delivery Mode209 <svg class="caret" width="32" height="32" viewBox="0 0 24 24" fill="none">210 <path d="M6 9l6 6 6-6" stroke="#6A6A71" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"></path>211 </svg>212 </div>213 <div class="chip">Brand214 <svg class="caret" width="32" height="32" viewBox="0 0 24 24" fill="none">215 <path d="M6 9l6 6 6-6" stroke="#6A6A71" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"></path>216 </svg>217 </div>218 <div class="chip">Price219 <svg class="caret" width="32" height="32" viewBox="0 0 24 24" fill="none">220 <path d="M6 9l6 6 6-6" stroke="#6A6A71" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"></path>221 </svg>222 </div>223 </div>224 225 <!-- Promo banner -->226 <div class="promo">227 <div class="img">[IMG: Credit Cards]</div>228 <div class="text">229 <div class="title">Get upto 5% extra NeuCoins</div>230 <div class="sub">with Tata Neu HDFC Bank Credit Card. Apply Now!</div>231 </div>232 <div class="arrow">233 <svg width="42" height="42" viewBox="0 0 24 24" fill="none">234 <path d="M8 5l8 7-8 7" stroke="#8B8B91" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"></path>235 </svg>236 </div>237 </div>238 239 <div class="list">240 <div class="divider"></div>241 242 <!-- Product 1 -->243 <div class="product-card">244 <div class="product-row">245 <div class="prod-img-wrap">246 <div class="img-placeholder">[IMG: CP PLUS Door Sensor]</div>247 <div class="wishlist">248 <svg width="36" height="36" viewBox="0 0 24 24" fill="none">249 <path d="M12 21s-6.5-4.2-8.4-7.1C2.3 11.2 3.3 8 6.2 8c2.1 0 3.1 1.4 3.8 2.4.7-1 1.7-2.4 3.8-2.4 2.9 0 3.9 3.2 2.6 5.9C18.5 16.8 12 21 12 21z" stroke="#8C8C93" stroke-width="2" fill="none"></path>250 </svg>251 </div>252 </div>253 <div class="prod-info">254 <div class="prod-title">CP PLUS Smart Door Sensor (Wireless Sensor, CP-HAS-D33-W, White)</div>255 <div class="price-row">256 <div class="price">₹1,614</div>257 <div class="old-price">₹2,100</div>258 <div class="off">23% OFF</div>259 </div>260 <div class="badge-row">261 <div class="badge">262 <svg width="36" height="36" viewBox="0 0 24 24" fill="none">263 <circle cx="12" cy="12" r="9" stroke="#8B5CF6" stroke-width="2"></circle>264 </svg>265 Grab <span class="neu">81 NeuCoins</span> with NeuPass266 </div>267 <div class="badge">268 <svg width="36" height="36" viewBox="0 0 24 24" fill="none">269 <path d="M3 16V8l2-2h10l2 2v8H3z" stroke="#6A6A71" stroke-width="2" fill="none"></path>270 <circle cx="16" cy="13" r="2" fill="#6A6A71"></circle>271 </svg>272 Delivery by <span style="font-weight:800;">28th Dec</span>273 </div>274 </div>275 </div>276 </div>277 </div>278 279 <div class="divider"></div>280 281 <!-- Product 2 -->282 <div class="product-card">283 <div class="product-row">284 <div class="prod-img-wrap">285 <div class="img-placeholder">[IMG: Travel Blue Combination Lock]</div>286 <div class="wishlist">287 <svg width="36" height="36" viewBox="0 0 24 24" fill="none">288 <path d="M12 21s-6.5-4.2-8.4-7.1C2.3 11.2 3.3 8 6.2 8c2.1 0 3.1 1.4 3.8 2.4.7-1 1.7-2.4 3.8-2.4 2.9 0 3.9 3.2 2.6 5.9C18.5 16.8 12 21 12 21z" stroke="#8C8C93" stroke-width="2" fill="none"></path>289 </svg>290 </div>291 </div>292 <div class="prod-info">293 <div class="prod-title">TRAVEL BLUE Numeric Combination Lock (TSA Approved, TB-036BL, Black)</div>294 <div class="price-row">295 <div class="price">₹699</div>296 <div class="old-price">₹895</div>297 <div class="off">22% OFF</div>298 </div>299 <div class="badge-row">300 <div class="badge">301 <svg width="36" height="36" viewBox="0 0 24 24" fill="none">302 <circle cx="12" cy="12" r="9" stroke="#8B5CF6" stroke-width="2"></circle>303 </svg>304 Grab <span class="neu">35 NeuCoins</span> with NeuPass305 </div>306 <div class="badge">307 <svg width="36" height="36" viewBox="0 0 24 24" fill="none">308 <path d="M3 16V8l2-2h10l2 2v8H3z" stroke="#6A6A71" stroke-width="2" fill="none"></path>309 <circle cx="16" cy="13" r="2" fill="#6A6A71"></circle>310 </svg>311 Delivery by <span style="font-weight:800;">28th Dec</span>312 </div>313 </div>314 </div>315 </div>316 </div>317 318 <div class="divider"></div>319 320 <!-- Product 3 (partial at bottom) -->321 <div class="product-card">322 <div class="product-row">323 <div class="prod-img-wrap">324 <div class="img-placeholder">[IMG: Yale Smart Lock]</div>325 <div class="wishlist">326 <svg width="36" height="36" viewBox="0 0 24 24" fill="none">327 <path d="M12 21s-6.5-4.2-8.4-7.1C2.3 11.2 3.3 8 6.2 8c2.1 0 3.1 1.4 3.8 2.4.7-1 1.7-2.4 3.8-2.4 2.9 0 3.9 3.2 2.6 5.9C18.5 16.8 12 21 12 21z" stroke="#8C8C93" stroke-width="2" fill="none"></path>328 </svg>329 </div>330 </div>331 <div class="prod-info">332 <div class="prod-title">Yale Smart Locks (Power Bank Support, YLDRPB- IV, Ivory)</div>333 <div class="price-row">334 <div class="price">₹2,399</div>335 <div class="old-price">₹3,999</div>336 <div class="off">40% OFF</div>337 </div>338 <div class="badge-row">339 <div class="badge">340 <svg width="36" height="36" viewBox="0 0 24 24" fill="none">341 <circle cx="12" cy="12" r="9" stroke="#8B5CF6" stroke-width="2"></circle>342 </svg>343 Grab <span class="neu">120 NeuCoins</span> with NeuPass344 </div>345 <div class="badge">346 <svg width="36" height="36" viewBox="0 0 24 24" fill="none">347 <path d="M3 16V8l2-2h10l2 2v8H3z" stroke="#6A6A71" stroke-width="2" fill="none"></path>348 <circle cx="16" cy="13" r="2" fill="#6A6A71"></circle>349 </svg>350 Delivery by <span style="font-weight:800;">28th Dec</span>351 </div>352 </div>353 </div>354 </div>355 </div>356 357 </div>358 </div>359 360 <div class="gesture"></div>361</div>362</body>363</html>