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>Wrench Tool Listing</title>7<style>8 body { margin: 0; padding: 0; background: transparent; font-family: Arial, Helvetica, sans-serif; }9 #render-target {10 width: 1080px; height: 2400px;11 position: relative; overflow: hidden;12 background: #ffffff;13 }14 * { box-sizing: border-box; }15 /* Status bar */16 .statusbar {17 height: 120px;18 background: #4da1a9;19 color: #fff;20 padding: 0 36px;21 display: flex;22 align-items: center;23 justify-content: space-between;24 font-size: 34px;25 }26 .status-right { display: flex; align-items: center; gap: 22px; }27 .dot { width: 10px; height: 10px; background: #ffffff; opacity: 0.7; border-radius: 50%; display: inline-block; }28 /* App bar */29 .appbar {30 height: 140px;31 background: #ffffff;32 border-bottom: 1px solid #e6e6e6;33 display: flex;34 align-items: center;35 padding: 0 24px;36 }37 .app-left { display: flex; align-items: center; gap: 20px; }38 .back-btn {39 width: 72px; height: 72px; display: flex; align-items: center; justify-content: center;40 }41 .app-title {42 font-size: 46px; font-weight: 600; letter-spacing: 1px; color: #2f2f2f; text-transform: uppercase;43 }44 .app-actions {45 margin-left: auto;46 display: flex; align-items: center; gap: 36px;47 }48 .icon-btn { width: 72px; height: 72px; display: flex; align-items: center; justify-content: center; }49 /* Filter bar */50 .filterbar {51 height: 112px;52 border-bottom: 1px solid #e9e9e9;53 display: grid;54 grid-template-columns: repeat(4, 1fr);55 background: #ffffff;56 }57 .filter-item {58 display: flex; align-items: center; justify-content: center;59 gap: 18px; color: #757575; font-size: 36px; position: relative;60 }61 .filter-item:not(:last-child)::after {62 content: ""; position: absolute; right: 0; top: 22px; bottom: 22px; width: 1px; background: #ececec;63 }64 /* Product grid */65 .product-grid {66 display: grid;67 grid-template-columns: 1fr 1fr;68 width: 100%;69 }70 .card {71 border-right: 1px solid #ececec;72 border-bottom: 1px solid #ececec;73 padding: 24px;74 position: relative;75 min-height: 760px;76 }77 .product-img {78 width: 100%;79 height: 420px;80 background: #E0E0E0;81 border: 1px solid #BDBDBD;82 display: flex; align-items: center; justify-content: center;83 color: #757575; font-size: 32px; text-align: center;84 position: relative;85 border-radius: 6px;86 }87 .fav-circle {88 position: absolute; top: 18px; right: 18px;89 width: 96px; height: 96px; border-radius: 50%;90 background: #ffffff; border: 1px solid #e5e5e5;91 display: flex; align-items: center; justify-content: center;92 box-shadow: 0 2px 4px rgba(0,0,0,0.06);93 }94 .badge {95 position: absolute; bottom: 18px; left: 18px;96 background: #e9f6ef; border: 1px solid #b7d7c2; color: #3d7f57;97 padding: 10px 16px; border-radius: 20px; font-size: 26px;98 }99 .title {100 margin-top: 22px; font-size: 34px; color: #333; line-height: 1.3;101 }102 .price-row { margin-top: 12px; display: flex; align-items: baseline; gap: 16px; }103 .price-now { font-size: 44px; font-weight: 700; color: #222; }104 .price-old { font-size: 32px; color: #9e9e9e; text-decoration: line-through; }105 .discount { margin-top: 8px; color: #1e88e5; font-size: 32px; font-weight: 600; }106 .rating { margin-top: 10px; display: flex; gap: 6px; align-items: center; }107 .ship {108 margin-top: 18px; display: inline-block;109 border: 1px solid #cfa574; color: #a16b39;110 padding: 14px 20px; border-radius: 14px; font-size: 30px; background: #fff7ed;111 }112 /* Simple SVG icons styling */113 svg { display: block; }114</style>115</head>116<body>117<div id="render-target">118 <!-- Status Bar -->119 <div class="statusbar">120 <div>8:28</div>121 <div class="status-right">122 <span class="dot"></span>123 <span class="dot"></span>124 <span class="dot"></span>125 <span class="dot"></span>126 <span class="dot"></span>127 <div style="display:flex;align-items:center;gap:10px;">128 <!-- Battery icon -->129 <svg width="44" height="44" viewBox="0 0 24 24">130 <rect x="2" y="6" width="18" height="12" rx="2" ry="2" fill="none" stroke="#fff" stroke-width="2"></rect>131 <rect x="4" y="8" width="12" height="8" fill="#fff"></rect>132 <rect x="20" y="10" width="2" height="4" fill="#fff"></rect>133 </svg>134 <span>100%</span>135 </div>136 </div>137 </div>138 139 <!-- App Bar -->140 <div class="appbar">141 <div class="app-left">142 <div class="back-btn">143 <svg width="48" height="48" viewBox="0 0 24 24">144 <path d="M15 18l-6-6 6-6" fill="none" stroke="#4da1a9" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"></path>145 </svg>146 </div>147 <div class="app-title">WRENCH TOOL</div>148 </div>149 <div class="app-actions">150 <div class="icon-btn">151 <!-- Search icon -->152 <svg width="48" height="48" viewBox="0 0 24 24">153 <circle cx="11" cy="11" r="6" fill="none" stroke="#4da1a9" stroke-width="2"></circle>154 <path d="M20 20l-4.5-4.5" stroke="#4da1a9" stroke-width="2" stroke-linecap="round"></path>155 </svg>156 </div>157 <div class="icon-btn">158 <!-- Cart icon -->159 <svg width="48" height="48" viewBox="0 0 24 24">160 <path d="M3 5h2l2 10h10l2-7H7" fill="none" stroke="#4da1a9" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"></path>161 <circle cx="9" cy="19" r="1.8" fill="#4da1a9"></circle>162 <circle cx="17" cy="19" r="1.8" fill="#4da1a9"></circle>163 </svg>164 </div>165 </div>166 </div>167 168 <!-- Filter Bar -->169 <div class="filterbar">170 <div class="filter-item">171 <span>Category</span>172 <svg width="32" height="32" viewBox="0 0 24 24">173 <path d="M6 9l6 6 6-6" fill="none" stroke="#9e9e9e" stroke-width="2" stroke-linecap="round"></path>174 </svg>175 </div>176 <div class="filter-item">177 <!-- Filter sliders icon -->178 <svg width="36" height="36" viewBox="0 0 24 24">179 <path d="M4 6h16M8 6v8M4 18h16M16 18V10" fill="none" stroke="#9e9e9e" stroke-width="2" stroke-linecap="round"></path>180 </svg>181 <span>Filter</span>182 </div>183 <div class="filter-item">184 <span>₹ ↓ Price</span>185 </div>186 <div class="filter-item">187 <span>⇅ Sort</span>188 </div>189 </div>190 191 <!-- Product Grid -->192 <div class="product-grid">193 <!-- Card 1 -->194 <div class="card">195 <div class="product-img">196 [IMG: Wrench socket set case]197 <div class="fav-circle">198 <svg width="38" height="38" viewBox="0 0 24 24">199 <path d="M12 21s-6-4.35-8.5-7.1C1.3 11.5 2.5 8.5 5.4 8.5c1.9 0 3 1.2 3.6 2.2.6-1 1.7-2.2 3.6-2.2 2.9 0 4.1 3 1.9 5.4C18 16.65 12 21 12 21z" fill="none" stroke="#c0c0c0" stroke-width="2"></path>200 </svg>201 </div>202 <div class="badge">made in INDIA</div>203 </div>204 <div class="title">love4ride Aiwa 40 Pieces Combination Socket Wrench Set</div>205 <div class="price-row">206 <div class="price-now">₹569</div>207 <div class="price-old">₹999</div>208 </div>209 <div class="discount">43% off</div>210 <div class="rating">211 <!-- 3.5 stars visualized as 3 filled + 1 half + 1 empty -->212 <svg width="32" height="32" viewBox="0 0 24 24"><path d="M12 17l-5.2 2.7 1-5.8-4.2-4.1 5.8-.9L12 3l2.6 5.9 5.8.9-4.2 4.1 1 5.8z" fill="#ffc107"></path></svg>213 <svg width="32" height="32" viewBox="0 0 24 24"><path d="M12 17l-5.2 2.7 1-5.8-4.2-4.1 5.8-.9L12 3l2.6 5.9 5.8.9-4.2 4.1 1 5.8z" fill="#ffc107"></path></svg>214 <svg width="32" height="32" viewBox="0 0 24 24"><path d="M12 17l-5.2 2.7 1-5.8-4.2-4.1 5.8-.9L12 3l2.6 5.9 5.8.9-4.2 4.1 1 5.8z" fill="#ffc107"></path></svg>215 <svg width="32" height="32" viewBox="0 0 24 24"><path d="M12 17l-5.2 2.7 1-5.8-4.2-4.1 5.8-.9L12 3l2.6 5.9 5.8.9-4.2 4.1 1 5.8z" fill="none" stroke="#ffc107" stroke-width="2"></path></svg>216 <svg width="32" height="32" viewBox="0 0 24 24"><path d="M12 17l-5.2 2.7 1-5.8-4.2-4.1 5.8-.9L12 3l2.6 5.9 5.8.9-4.2 4.1 1 5.8z" fill="none" stroke="#bdbdbd" stroke-width="2"></path></svg>217 </div>218 <div class="ship">Free shipping</div>219 </div>220 221 <!-- Card 2 -->222 <div class="card">223 <div class="product-img">224 [IMG: Adjustable wrenches + screwdriver kit]225 <div class="fav-circle">226 <svg width="38" height="38" viewBox="0 0 24 24">227 <path d="M12 21s-6-4.35-8.5-7.1C1.3 11.5 2.5 8.5 5.4 8.5c1.9 0 3 1.2 3.6 2.2.6-1 1.7-2.2 3.6-2.2 2.9 0 4.1 3 1.9 5.4C18 16.65 12 21 12 21z" fill="none" stroke="#c0c0c0" stroke-width="2"></path>228 </svg>229 </div>230 </div>231 <div class="title">Kudos SNAP N GRIP Adjustable Wrench with Multi Screwdriver</div>232 <div class="price-row">233 <div class="price-now">₹469</div>234 <div class="price-old">₹999</div>235 </div>236 <div class="discount">53% off</div>237 <div class="rating">238 <svg width="32" height="32" viewBox="0 0 24 24"><path d="M12 17l-5.2 2.7 1-5.8-4.2-4.1 5.8-.9L12 3l2.6 5.9 5.8.9-4.2 4.1 1 5.8z" fill="#ffc107"></path></svg>239 <svg width="32" height="32" viewBox="0 0 24 24"><path d="M12 17l-5.2 2.7 1-5.8-4.2-4.1 5.8-.9L12 3l2.6 5.9 5.8.9-4.2 4.1 1 5.8z" fill="#ffc107"></path></svg>240 <svg width="32" height="32" viewBox="0 0 24 24"><path d="M12 17l-5.2 2.7 1-5.8-4.2-4.1 5.8-.9L12 3l2.6 5.9 5.8.9-4.2 4.1 1 5.8z" fill="none" stroke="#ffc107" stroke-width="2"></path></svg>241 <svg width="32" height="32" viewBox="0 0 24 24"><path d="M12 17l-5.2 2.7 1-5.8-4.2-4.1 5.8-.9L12 3l2.6 5.9 5.8.9-4.2 4.1 1 5.8z" fill="none" stroke="#bdbdbd" stroke-width="2"></path></svg>242 <svg width="32" height="32" viewBox="0 0 24 24"><path d="M12 17l-5.2 2.7 1-5.8-4.2-4.1 5.8-.9L12 3l2.6 5.9 5.8.9-4.2 4.1 1 5.8z" fill="none" stroke="#bdbdbd" stroke-width="2"></path></svg>243 </div>244 <div class="ship">Free shipping</div>245 </div>246 247 <!-- Card 3 -->248 <div class="card">249 <div class="product-img">250 [IMG: Pliers, pipe wrench and yellow hammer]251 <div class="fav-circle">252 <svg width="38" height="38" viewBox="0 0 24 24">253 <path d="M12 21s-6-4.35-8.5-7.1C1.3 11.5 2.5 8.5 5.4 8.5c1.9 0 3 1.2 3.6 2.2.6-1 1.7-2.2 3.6-2.2 2.9 0 4.1 3 1.9 5.4C18 16.65 12 21 12 21z" fill="none" stroke="#c0c0c0" stroke-width="2"></path>254 </svg>255 </div>256 </div>257 <div class="title">Hand Tool Set with Pliers, Pipe Wrench and Heavy Hammer</div>258 <div class="price-row">259 <div class="price-now">₹599</div>260 <div class="price-old">₹899</div>261 </div>262 <div class="discount">33% off</div>263 <div class="rating">264 <svg width="32" height="32" viewBox="0 0 24 24"><path d="M12 17l-5.2 2.7 1-5.8-4.2-4.1 5.8-.9L12 3l2.6 5.9 5.8.9-4.2 4.1 1 5.8z" fill="#ffc107"></path></svg>265 <svg width="32" height="32" viewBox="0 0 24 24"><path d="M12 17l-5.2 2.7 1-5.8-4.2-4.1 5.8-.9L12 3l2.6 5.9 5.8.9-4.2 4.1 1 5.8z" fill="#ffc107"></path></svg>266 <svg width="32" height="32" viewBox="0 0 24 24"><path d="M12 17l-5.2 2.7 1-5.8-4.2-4.1 5.8-.9L12 3l2.6 5.9 5.8.9-4.2 4.1 1 5.8z" fill="#ffc107"></path></svg>267 <svg width="32" height="32" viewBox="0 0 24 24"><path d="M12 17l-5.2 2.7 1-5.8-4.2-4.1 5.8-.9L12 3l2.6 5.9 5.8.9-4.2 4.1 1 5.8z" fill="none" stroke="#bdbdbd" stroke-width="2"></path></svg>268 <svg width="32" height="32" viewBox="0 0 24 24"><path d="M12 17l-5.2 2.7 1-5.8-4.2-4.1 5.8-.9L12 3l2.6 5.9 5.8.9-4.2 4.1 1 5.8z" fill="none" stroke="#bdbdbd" stroke-width="2"></path></svg>269 </div>270 <div class="ship">Free shipping</div>271 </div>272 273 <!-- Card 4 -->274 <div class="card">275 <div class="product-img">276 [IMG: Watch case opener wrench tool with bits]277 <div class="fav-circle">278 <svg width="38" height="38" viewBox="0 0 24 24">279 <path d="M12 21s-6-4.35-8.5-7.1C1.3 11.5 2.5 8.5 5.4 8.5c1.9 0 3 1.2 3.6 2.2.6-1 1.7-2.2 3.6-2.2 2.9 0 4.1 3 1.9 5.4C18 16.65 12 21 12 21z" fill="none" stroke="#c0c0c0" stroke-width="2"></path>280 </svg>281 </div>282 </div>283 <div class="title">Watch Case Opener Wrench Tool with 12 Bits</div>284 <div class="price-row">285 <div class="price-now">₹499</div>286 <div class="price-old">₹799</div>287 </div>288 <div class="discount">38% off</div>289 <div class="rating">290 <svg width="32" height="32" viewBox="0 0 24 24"><path d="M12 17l-5.2 2.7 1-5.8-4.2-4.1 5.8-.9L12 3l2.6 5.9 5.8.9-4.2 4.1 1 5.8z" fill="#ffc107"></path></svg>291 <svg width="32" height="32" viewBox="0 0 24 24"><path d="M12 17l-5.2 2.7 1-5.8-4.2-4.1 5.8-.9L12 3l2.6 5.9 5.8.9-4.2 4.1 1 5.8z" fill="#ffc107"></path></svg>292 <svg width="32" height="32" viewBox="0 0 24 24"><path d="M12 17l-5.2 2.7 1-5.8-4.2-4.1 5.8-.9L12 3l2.6 5.9 5.8.9-4.2 4.1 1 5.8z" fill="none" stroke="#ffc107" stroke-width="2"></path></svg>293 <svg width="32" height="32" viewBox="0 0 24 24"><path d="M12 17l-5.2 2.7 1-5.8-4.2-4.1 5.8-.9L12 3l2.6 5.9 5.8.9-4.2 4.1 1 5.8z" fill="none" stroke="#bdbdbd" stroke-width="2"></path></svg>294 <svg width="32" height="32" viewBox="0 0 24 24"><path d="M12 17l-5.2 2.7 1-5.8-4.2-4.1 5.8-.9L12 3l2.6 5.9 5.8.9-4.2 4.1 1 5.8z" fill="none" stroke="#bdbdbd" stroke-width="2"></path></svg>295 </div>296 <div class="ship">Free shipping</div>297 </div>298 </div>299 300 <!-- Bottom indicator bar (home pill) -->301 <div style="position:absolute; bottom:24px; left:50%; transform:translateX(-50%); width: 360px; height: 16px; background:#000000; opacity:0.15; border-radius: 12px;"></div>302</div>303</body>304</html>