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>Locks - Listing</title>7<style>8 body { margin: 0; padding: 0; background: transparent; font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Arial, sans-serif; color: #222; }9 #render-target {10 width: 1080px; height: 2400px; position: relative; overflow: hidden;11 background: #ffffff;12 }13 14 /* Top dark area (status + header) */15 .topbar { background:#1f1f1f; color:#fff; }16 .status-bar {17 height: 90px; display:flex; align-items:center; justify-content:space-between;18 padding: 0 40px; font-size: 34px; opacity:0.95;19 }20 .status-icons { display:flex; align-items:center; gap:24px; color:#fff; }21 .header {22 height: 140px; display:flex; align-items:center; justify-content:space-between;23 padding: 0 32px;24 }25 .header-left { display:flex; align-items:center; gap:28px; }26 .header-title { font-size:44px; font-weight:600; color:#fff; }27 .header-title .accent { color:#9c76ff; }28 .header-right { display:flex; align-items:center; gap:32px; }29 30 /* Search bar */31 .search-area { padding: 28px 32px; background:#fff; }32 .search-bar {33 background:#efefef; border-radius:18px; height:100px;34 display:flex; align-items:center; justify-content:space-between;35 padding: 0 32px; color:#666;36 }37 .search-left { display:flex; align-items:center; gap:24px; font-size:40px; }38 .search-right { display:flex; align-items:center; }39 .search-placeholder { font-size:40px; color:#666; }40 41 /* Filters */42 .filters { display:flex; gap:26px; padding: 18px 32px; flex-wrap:wrap; }43 .chip {44 background:#fff; border:1px solid #ddd; border-radius:18px;45 padding: 26px 32px; font-size:36px; color:#333; display:flex; align-items:center; gap:18px;46 }47 48 /* Source / vendor pill */49 .source-line { display:flex; align-items:center; gap:20px; padding: 10px 32px 0; color:#6b6b6b; font-size:34px; }50 .source-pill {51 background:#e8d8ff; color:#6b38ff; border-radius:16px; padding: 18px 24px; font-weight:600; display:flex; align-items:center; gap:14px; font-size:36px;52 }53 54 /* Product list */55 .list { margin-top: 12px; }56 .product {57 display:flex; gap:30px; padding: 40px 32px; border-top:1px solid #eee;58 }59 .product:first-child { border-top:none; }60 .image-box {61 width: 300px; height: 380px; border-radius:26px; background:#E0E0E0;62 border:1px solid #BDBDBD; display:flex; justify-content:center; align-items:center; color:#757575; font-size:32px; position:relative;63 }64 .wish {65 position:absolute; right:22px; top:22px; width:64px; height:64px; border-radius:50%;66 border:1px solid #d9d9d9; background:#fff; display:flex; align-items:center; justify-content:center;67 }68 .details { flex:1; padding-top:6px; }69 .title { font-size:44px; font-weight:700; line-height:1.25; color:#222; }70 .price-row { display:flex; align-items:center; gap:22px; margin-top:18px; }71 .price { font-size:46px; font-weight:800; }72 .mrp { font-size:38px; color:#888; text-decoration:line-through; }73 .off { border:1px solid #d7d7d7; padding: 10px 18px; border-radius:14px; font-size:32px; color:#555; background:#f7f7f7; }74 75 .meta { display:flex; align-items:center; gap:18px; margin-top:20px; }76 .badge { display:flex; align-items:center; gap:12px; background:#f4f4f4; padding: 16px 18px; border-radius:14px; color:#555; font-size:32px; }77 .delivery { display:flex; align-items:center; gap:14px; background:#f4f4f4; padding: 16px 18px; border-radius:14px; color:#555; font-size:32px; }78 79 /* CTAs */80 .cta-row { display:flex; gap:24px; margin-top:24px; }81 .btn-primary { background:#1976ff; color:#fff; padding: 24px 28px; border-radius:16px; font-size:34px; font-weight:700; }82 .btn-secondary { background:#eaf1ff; color:#2a5bd7; padding: 24px 28px; border-radius:16px; font-size:34px; font-weight:700; }83 84 /* Simple icon wrapper */85 .icon { display:inline-flex; align-items:center; justify-content:center; }86 .icon svg { width:44px; height:44px; }87 .small svg { width:38px; height:38px; }88 .tiny svg { width:32px; height:32px; }89 90 /* Footer spacer to emulate OS gesture bar */91 .gesture-bar {92 position:absolute; bottom:20px; left:50%; transform:translateX(-50%);93 width: 360px; height: 12px; background:#000; opacity:0.1; border-radius:10px;94 }95</style>96</head>97<body>98<div id="render-target">99 100 <div class="topbar">101 <div class="status-bar">102 <div>2:10</div>103 <div class="status-icons">104 <span class="icon tiny">105 <svg viewBox="0 0 24 24" fill="none" stroke="#fff" stroke-width="2">106 <circle cx="10" cy="12" r="3"></circle>107 <path d="M15 15l4 4"></path>108 </svg>109 </span>110 <span class="icon tiny">111 <svg viewBox="0 0 24 24" fill="none" stroke="#fff" stroke-width="2">112 <path d="M4 6h16v12H4z"></path>113 <path d="M20 10h2v4h-2z"></path>114 </svg>115 </span>116 <span>100%</span>117 </div>118 </div>119 <div class="header">120 <div class="header-left">121 <span class="icon">122 <svg viewBox="0 0 24 24" fill="none" stroke="#fff" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">123 <path d="M15 18L9 12l6-6"></path>124 </svg>125 </span>126 <div class="header-title">Deliver to <span class="accent">110009</span></div>127 </div>128 <div class="header-right">129 <span class="icon">130 <svg viewBox="0 0 24 24" fill="none" stroke="#fff" stroke-width="2">131 <path d="M12 21s-6-4.35-6-8.5A4.5 4.5 0 0 1 12 8a4.5 4.5 0 0 1 6 4.5C18 16.65 12 21 12 21z"></path>132 </svg>133 </span>134 <span class="icon">135 <svg viewBox="0 0 24 24" fill="none" stroke="#fff" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">136 <path d="M6 6h15l-2 9H7L6 6z"></path>137 <circle cx="9" cy="20" r="1.5"></circle>138 <circle cx="18" cy="20" r="1.5"></circle>139 </svg>140 </span>141 </div>142 </div>143 </div>144 145 <div class="search-area">146 <div class="search-bar">147 <div class="search-left">148 <span class="icon small">149 <svg viewBox="0 0 24 24" fill="none" stroke="#737373" stroke-width="2">150 <circle cx="11" cy="11" r="7"></circle>151 <path d="M20 20l-4.2-4.2"></path>152 </svg>153 </span>154 <div class="search-placeholder">locks</div>155 </div>156 <div class="search-right">157 <span class="icon small">158 <svg viewBox="0 0 24 24" fill="none" stroke="#8d8d8d" stroke-width="2" stroke-linecap="round">159 <path d="M5 5l14 14M19 5L5 19"></path>160 </svg>161 </span>162 </div>163 </div>164 </div>165 166 <div class="filters">167 <div class="chip">168 <span class="icon tiny">169 <svg viewBox="0 0 24 24" fill="none" stroke="#555" stroke-width="2">170 <path d="M4 7h10"></path>171 <circle cx="16" cy="7" r="2"></circle>172 <path d="M4 12h6"></path>173 <circle cx="12" cy="12" r="2"></circle>174 <path d="M4 17h14"></path>175 <circle cx="8" cy="17" r="2"></circle>176 </svg>177 </span>178 </div>179 <div class="chip">Sort180 <span class="icon tiny">181 <svg viewBox="0 0 24 24" fill="none" stroke="#555" stroke-width="2"><path d="M6 9l6 6 6-6"></path></svg>182 </span>183 </div>184 <div class="chip">Delivery Mode185 <span class="icon tiny">186 <svg viewBox="0 0 24 24" fill="none" stroke="#555" stroke-width="2"><path d="M6 9l6 6 6-6"></path></svg>187 </span>188 </div>189 <div class="chip">Brand190 <span class="icon tiny">191 <svg viewBox="0 0 24 24" fill="none" stroke="#555" stroke-width="2"><path d="M6 9l6 6 6-6"></path></svg>192 </span>193 </div>194 <div class="chip">Price195 <span class="icon tiny">196 <svg viewBox="0 0 24 24" fill="none" stroke="#555" stroke-width="2"><path d="M6 9l6 6 6-6"></path></svg>197 </span>198 </div>199 </div>200 201 <div class="source-line">202 <span>52 Products from</span>203 <span class="source-pill">204 <span>Croma</span>205 <span class="icon tiny"><svg viewBox="0 0 24 24" fill="none" stroke="#6b38ff" stroke-width="2"><path d="M6 9l6 6 6-6"></path></svg></span>206 </span>207 </div>208 209 <div class="list">210 211 <!-- Product 1 -->212 <div class="product">213 <div class="image-box">214 [IMG: Smart Lock - Copper]215 <div class="wish">216 <svg viewBox="0 0 24 24" fill="none" stroke="#9c9c9c" stroke-width="2">217 <path d="M12 21s-6-4.35-6-8.5A4.5 4.5 0 0 1 12 8a4.5 4.5 0 0 1 6 4.5C18 16.65 12 21 12 21z"></path>218 </svg>219 </div>220 </div>221 <div class="details">222 <div class="title">Qubo Smart Locks (5 Way Unlock, OC-HLM03CU1, Copper)</div>223 <div class="price-row">224 <div class="price">₹9,290</div>225 <div class="mrp">₹19,990</div>226 <div class="off">54% OFF</div>227 </div>228 <div class="meta">229 <div class="badge">230 <span class="icon tiny">231 <svg viewBox="0 0 24 24" fill="#7e59ff"><circle cx="12" cy="12" r="8"></circle></svg>232 </span>233 Grab 465 NeuCoins with NeuPass234 </div>235 </div>236 <div class="meta">237 <div class="delivery">238 <span class="icon tiny">239 <svg viewBox="0 0 24 24" fill="none" stroke="#777" stroke-width="2">240 <path d="M3 7h11v8H3z"></path>241 <path d="M14 9h4l3 3v3h-7z"></path>242 <circle cx="6" cy="17" r="2"></circle>243 <circle cx="17" cy="17" r="2"></circle>244 </svg>245 </span>246 Delivery by 28th Dec247 </div>248 </div>249 </div>250 </div>251 252 <!-- Product 2 -->253 <div class="product">254 <div class="image-box">255 [IMG: Smart Lock - Black]256 <div class="wish">257 <svg viewBox="0 0 24 24" fill="none" stroke="#9c9c9c" stroke-width="2">258 <path d="M12 21s-6-4.35-6-8.5A4.5 4.5 0 0 1 12 8a4.5 4.5 0 0 1 6 4.5C18 16.65 12 21 12 21z"></path>259 </svg>260 </div>261 </div>262 <div class="details">263 <div class="title">Yale Smart Digital Lock For Private Space (Smart Keypad, YDME 50 NxT, Black)</div>264 <div class="price-row">265 <div class="price">₹11,999</div>266 <div class="mrp">₹17,999</div>267 <div class="off">33% OFF</div>268 </div>269 <div class="meta">270 <div class="badge">271 <span class="icon tiny">272 <svg viewBox="0 0 24 24" fill="#7e59ff"><circle cx="12" cy="12" r="8"></circle></svg>273 </span>274 Grab 600 NeuCoins with NeuPass275 </div>276 </div>277 <div class="meta">278 <div class="delivery">279 <span class="icon tiny">280 <svg viewBox="0 0 24 24" fill="none" stroke="#777" stroke-width="2">281 <path d="M3 7h11v8H3z"></path>282 <path d="M14 9h4l3 3v3h-7z"></path>283 <circle cx="6" cy="17" r="2"></circle>284 <circle cx="17" cy="17" r="2"></circle>285 </svg>286 </span>287 Delivery by 28th Dec288 </div>289 </div>290 <div class="cta-row">291 <div class="btn-primary">Extra 5% off on cart</div>292 <div class="btn-secondary">Launch offer</div>293 </div>294 </div>295 </div>296 297 <!-- Product 3 (partial to extend page height) -->298 <div class="product" style="padding-bottom:140px;">299 <div class="image-box">300 [IMG: Smart Lock]301 <div class="wish">302 <svg viewBox="0 0 24 24" fill="none" stroke="#9c9c9c" stroke-width="2">303 <path d="M12 21s-6-4.35-6-8.5A4.5 4.5 0 0 1 12 8a4.5 4.5 0 0 1 6 4.5C18 16.65 12 21 12 21z"></path>304 </svg>305 </div>306 </div>307 <div class="details">308 <div class="title">Yale Smart Locks For Private Space (Smart Keypad, YDME 100 NxT, Black)</div>309 </div>310 </div>311 312 </div>313 314 <div class="gesture-bar"></div>315</div>316</body>317</html>