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>Hammer Drills - Search</title>7<style>8 body { margin: 0; padding: 0; background: transparent; font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Inter, Arial, sans-serif; }9 #render-target {10 width: 1080px;11 height: 2400px;12 position: relative;13 overflow: hidden;14 background: #f4f4f6;15 }16 17 /* General helpers */18 .row { display: flex; align-items: center; }19 .space-between { justify-content: space-between; }20 .muted { color: #888; }21 .divider { height: 1px; background: #e5e5e8; }22 .v-divider { width: 2px; height: 60px; background: #ececee; margin: 0 24px; }23 .chip {24 display: inline-flex; align-items: center; gap: 12px;25 padding: 22px 26px; border: 1px solid #e5e5e8; border-radius: 16px; background: #fff;26 color: #444; font-size: 32px;27 }28 29 /* Status bar */30 .status-bar {31 height: 120px; background: #8c8c90; color: #fff; padding: 0 36px;32 display: flex; align-items: center; justify-content: space-between;33 }34 .status-left { display: flex; gap: 30px; align-items: center; }35 .status-right { display: flex; gap: 26px; align-items: center; }36 .status-dot { width: 16px; height: 16px; background: #fff; border-radius: 50%; opacity: 0.8; }37 38 /* App bar */39 .app-bar {40 height: 150px; background: #ffffff; padding: 0 32px;41 display: flex; align-items: center; gap: 24px; box-shadow: 0 2px 0 rgba(0,0,0,0.04);42 }43 .icon-btn { width: 84px; height: 84px; display: flex; align-items: center; justify-content: center; border-radius: 18px; }44 .logo {45 width: 84px; height: 84px; border-radius: 18px; background: #e94a4a; display: flex; align-items: center; justify-content: center; color: #fff; font-weight: 700; font-size: 54px;46 }47 .search-field {48 flex: 1; height: 96px; background: #fafafa; border: 2px solid #e6e6ea; border-radius: 48px; padding: 0 30px; display: flex; align-items: center; gap: 20px;49 }50 .search-input { border: none; outline: none; background: transparent; font-size: 38px; flex: 1; color: #333; }51 .search-input::placeholder { color: #9aa0a6; }52 .circle-btn {53 width: 72px; height: 72px; border-radius: 50%; background: #eaf3ff; display: flex; align-items: center; justify-content: center;54 }55 56 /* Category/sort row */57 .toolbar {58 background: #ffffff; padding: 22px 32px; display: flex; align-items: center;59 box-shadow: 0 1px 0 rgba(0,0,0,0.05);60 }61 .toolbar .item { display: flex; align-items: center; gap: 22px; color: #333; font-size: 40px; }62 .toolbar .item .label { font-weight: 600; }63 .toolbar .item .accent { color: #e23a3a; }64 65 /* Section header */66 .section {67 padding: 34px 32px;68 }69 .section h2 {70 margin: 0; font-size: 54px; color: #2b2b2b;71 }72 .section .count { font-size: 40px; color: #777; margin-left: 16px; font-weight: 500; }73 74 /* Product card */75 .card {76 margin: 0 24px 32px 24px;77 background: #ffffff;78 border-radius: 28px;79 box-shadow: 0 2px 0 rgba(0,0,0,0.04);80 border: 1px solid #ececee;81 padding: 28px;82 }83 .card-top { display: flex; gap: 26px; }84 .img-box {85 width: 360px; height: 320px; background: #E0E0E0; border: 1px solid #BDBDBD;86 display: flex; justify-content: center; align-items: center; color: #757575; font-size: 36px; border-radius: 18px; position: relative;87 }88 .badge {89 position: absolute; top: 16px; left: 16px; background: #ff4d57; color: #fff;90 padding: 14px 18px; border-radius: 16px; font-weight: 700; font-size: 30px;91 }92 .play {93 position: absolute; bottom: 16px; left: 16px; background: #ff5147; color: #fff;94 width: 90px; height: 64px; border-radius: 16px; display: flex; align-items: center; justify-content: center; font-size: 28px;95 }96 .details { flex: 1; }97 .rating-line { display: flex; align-items: center; gap: 18px; margin-bottom: 12px; }98 .rating-chip {99 background: #22c55e; color: #fff; font-weight: 800; padding: 14px 18px; border-radius: 16px; font-size: 34px; display: inline-flex; align-items: center; gap: 10px;100 }101 .reviews { color: #666; font-size: 36px; }102 .title { font-size: 44px; color: #222; font-weight: 700; line-height: 1.25; margin: 12px 0 10px; }103 .old-price { font-size: 36px; color: #9aa0a6; text-decoration: line-through; margin-right: 18px; }104 .discount { font-size: 36px; color: #22c55e; font-weight: 800; }105 .price { font-size: 58px; color: #1a1a1a; font-weight: 800; margin: 10px 0 6px; }106 .coupon { display: flex; align-items: center; gap: 16px; color: #22a652; font-size: 36px; font-weight: 700; }107 .coupon .sub { font-weight: 500; }108 .chips-row { display: flex; gap: 18px; flex-wrap: wrap; margin-top: 24px; }109 .card-actions { display: flex; gap: 28px; margin-top: 24px; }110 .btn {111 flex: 1; height: 110px; border-radius: 20px; font-size: 42px; font-weight: 800; display: flex; align-items: center; justify-content: center; gap: 24px;112 }113 .btn-outline { border: 3px solid #e34b4b; color: #e34b4b; background: #fff; }114 .btn-solid { background: #e34b4b; color: #fff; }115 .chat-fab {116 position: absolute; right: 38px; bottom: 42px; width: 120px; height: 120px; background: #e34b4b;117 border-radius: 60px; display: flex; align-items: center; justify-content: center; box-shadow: 0 6px 12px rgba(0,0,0,0.15);118 }119 120 /* Bottom navigation pill */121 .nav-pill {122 position: absolute; bottom: 24px; left: 50%; transform: translateX(-50%);123 width: 300px; height: 16px; border-radius: 16px; background: #000; opacity: 0.8;124 }125 126 /* SVG icon sizing */127 svg { display: block; }128</style>129</head>130<body>131<div id="render-target">132 133 <!-- Status bar -->134 <div class="status-bar">135 <div class="status-left">136 <div style="font-size:42px; font-weight:700;">9:37</div>137 <!-- Simple status icons -->138 <div class="status-dot"></div>139 <div class="status-dot"></div>140 <div class="status-dot"></div>141 <div class="status-dot"></div>142 <div class="status-dot"></div>143 </div>144 <div class="status-right">145 <!-- Network -->146 <svg width="60" height="36" viewBox="0 0 60 36"><path d="M3 33h6v-6H3v6zm12 0h6V21h-6v12zm12 0h6V15h-6v18zm12 0h6V9h-6v24z" fill="#fff"/></svg>147 <!-- Battery -->148 <svg width="60" height="36" viewBox="0 0 60 36">149 <rect x="3" y="8" width="46" height="20" rx="4" ry="4" fill="none" stroke="#fff" stroke-width="3"/>150 <rect x="6" y="11" width="38" height="14" rx="2" fill="#fff"/>151 <rect x="51" y="14" width="6" height="8" rx="2" fill="#fff"/>152 </svg>153 </div>154 </div>155 156 <!-- App bar -->157 <div class="app-bar">158 <!-- Back -->159 <div class="icon-btn">160 <svg width="52" height="52" viewBox="0 0 24 24"><path d="M15 6L9 12l6 6" stroke="#111" stroke-width="2.5" fill="none" stroke-linecap="round" stroke-linejoin="round"/></svg>161 </div>162 163 <!-- Logo -->164 <div class="logo">m</div>165 166 <!-- Search field -->167 <div class="search-field">168 <svg width="54" height="54" viewBox="0 0 24 24"><circle cx="11" cy="11" r="7" stroke="#666" stroke-width="2" fill="none"/><path d="M21 21l-4.8-4.8" stroke="#666" stroke-width="2" stroke-linecap="round"/></svg>169 <input class="search-input" placeholder="hammer drill" />170 <div class="circle-btn">171 <svg width="40" height="40" viewBox="0 0 24 24"><path d="M12 2c3 0 5 2 5 5v3l2 2v3h-2v5h-3v-5h-4v5H7v-5H5v-3l2-2V7c0-3 2-5 5-5z" fill="#2a7be4"/></svg>172 </div>173 </div>174 175 <!-- Cart -->176 <div class="icon-btn">177 <svg width="56" height="56" viewBox="0 0 24 24"><path d="M5 6h14l-1.5 9H7L5 6z" fill="none" stroke="#111" stroke-width="2"/><circle cx="9" cy="19" r="2" fill="#111"/><circle cx="17" cy="19" r="2" fill="#111"/></svg>178 </div>179 <!-- Menu -->180 <div class="icon-btn">181 <svg width="56" height="56" viewBox="0 0 24 24"><path d="M3 6h18M3 12h18M3 18h18" stroke="#111" stroke-width="2.5" stroke-linecap="round"/></svg>182 </div>183 </div>184 185 <!-- Toolbar: categories / sort / filters -->186 <div class="toolbar">187 <div class="item">188 <svg width="48" height="48" viewBox="0 0 24 24"><rect x="3" y="3" width="7" height="7" fill="#111"/><rect x="14" y="3" width="7" height="7" fill="#111"/><rect x="3" y="14" width="7" height="7" fill="#111"/><rect x="14" y="14" width="7" height="7" fill="#111"/></svg>189 <div class="label">Categories</div>190 </div>191 <div class="v-divider"></div>192 <div class="item">193 <svg width="48" height="48" viewBox="0 0 24 24"><path d="M4 7h12M4 12h16M4 17h10" stroke="#111" stroke-width="2" stroke-linecap="round"/><circle cx="16" cy="7" r="2" fill="#111"/><circle cx="8" cy="12" r="2" fill="#111"/><circle cx="14" cy="17" r="2" fill="#111"/></svg>194 <div class="label">Sort By <span class="accent">Popularity</span></div>195 </div>196 <div class="v-divider"></div>197 <div class="item">198 <svg width="48" height="48" viewBox="0 0 24 24"><path d="M3 5h18l-6 7v6l-6 2v-8L3 5z" fill="#111"/></svg>199 <div class="label">Filters</div>200 </div>201 </div>202 203 <!-- Section header -->204 <div class="section">205 <div class="row">206 <h2>Hammer Drills</h2>207 <div class="count">(140 items)</div>208 </div>209 </div>210 211 <!-- Product Card 1 -->212 <div class="card">213 <div class="card-top">214 <div class="img-box">215 [IMG: Hammer drill kit]216 <div class="badge">Same Day Dispatch</div>217 <div class="play">▶</div>218 </div>219 <div class="details">220 <div class="rating-line">221 <div class="rating-chip">222 <svg width="30" height="30" viewBox="0 0 24 24"><path d="M12 3l3 6 7 1-5 5 1 7-6-3-6 3 1-7-5-5 7-1 3-6z" fill="#fff"/></svg>223 4.9224 </div>225 <div class="reviews">(7 Reviews)</div>226 </div>227 <div class="title">Pinaka Mod.Pi-226 1600W 26mm Hammer Drill</div>228 <div class="row" style="gap:18px; align-items: baseline;">229 <div class="old-price">₹3,999</div>230 <div class="discount">32% OFF</div>231 </div>232 <div class="price">₹2,699</div>233 <div class="coupon">234 <svg width="40" height="40" viewBox="0 0 24 24"><path d="M3 7h13l2 2v6l-2 2H3V7z" fill="#22a652"/><circle cx="8" cy="12" r="1.6" fill="#fff"/><circle cx="12" cy="12" r="1.6" fill="#fff"/></svg>235 Flat ₹50 OFF <span class="sub">with coupon</span>236 </div>237 238 <div class="chips-row">239 <div class="chip">Power input: 1600 W</div>240 <div class="chip">No load speed: 850 rpm</div>241 <div class="chip">Model: Pi-226</div>242 </div>243 244 <div class="card-actions">245 <div class="btn btn-outline">246 <svg width="46" height="46" viewBox="0 0 24 24"><path d="M6 6h12l-1.5 9H8L6 6z" fill="none" stroke="#e34b4b" stroke-width="2"/><circle cx="9" cy="19" r="2" fill="#e34b4b"/><circle cx="17" cy="19" r="2" fill="#e34b4b"/></svg>247 ADD TO CART248 </div>249 <div class="btn btn-solid">BUY NOW</div>250 </div>251 </div>252 </div>253 </div>254 255 <!-- Product Card 2 -->256 <div class="card" style="position: relative;">257 <div class="card-top">258 <div class="img-box">259 [IMG: Rotary hammer drill kit]260 <div class="badge">Same Day Dispatch</div>261 <div class="play">▶</div>262 </div>263 <div class="details">264 <div class="rating-line">265 <div class="rating-chip">266 <svg width="30" height="30" viewBox="0 0 24 24"><path d="M12 3l3 6 7 1-5 5 1 7-6-3-6 3 1-7-5-5 7-1 3-6z" fill="#fff"/></svg>267 4.7268 </div>269 <div class="reviews">(6 Reviews)</div>270 </div>271 <div class="title">Pinaka Pi 2-20 800W 20mm Black & Blue Rotary Hammer Drill with Variabl...</div>272 <div class="row" style="gap:18px; align-items: baseline;">273 <div class="old-price">₹3,999</div>274 <div class="discount">48% OFF</div>275 </div>276 <div class="price">₹2,049</div>277 <div class="coupon">278 <svg width="40" height="40" viewBox="0 0 24 24"><path d="M3 7h13l2 2v6l-2 2H3V7z" fill="#22a652"/><circle cx="8" cy="12" r="1.6" fill="#fff"/><circle cx="12" cy="12" r="1.6" fill="#fff"/></svg>279 Flat ₹50 OFF <span class="sub">with coupon</span>280 </div>281 282 <div class="chips-row">283 <div class="chip">Colour: Black & Blue</div>284 <div class="chip">Drilling capacity: 20 mm</div>285 <div class="chip">Power input: 800 W</div>286 </div>287 288 <div class="card-actions">289 <div class="btn btn-outline">290 <svg width="46" height="46" viewBox="0 0 24 24"><path d="M6 6h12l-1.5 9H8L6 6z" fill="none" stroke="#e34b4b" stroke-width="2"/><circle cx="9" cy="19" r="2" fill="#e34b4b"/><circle cx="17" cy="19" r="2" fill="#e34b4b"/></svg>291 ADD TO CART292 </div>293 <div class="btn btn-solid">BUY NOW</div>294 </div>295 </div>296 </div>297 298 <!-- Floating chat icon -->299 <div class="chat-fab">300 <svg width="56" height="56" viewBox="0 0 24 24"><path d="M4 5h16v10H8l-4 4V5z" fill="#fff"/></svg>301 </div>302 </div>303 304 <!-- Product Card 3 (partial preview) -->305 <div class="card">306 <div class="card-top">307 <div class="img-box">308 [IMG: Hammer drill with accessories]309 <div class="badge" style="background:#20c997;">Deal of The Day</div>310 </div>311 <div class="details">312 <div class="rating-line">313 <div class="rating-chip">314 <svg width="30" height="30" viewBox="0 0 24 24"><path d="M12 3l3 6 7 1-5 5 1 7-6-3-6 3 1-7-5-5 7-1 3-6z" fill="#fff"/></svg>315 4.3316 </div>317 <div class="reviews">(6 Reviews)</div>318 </div>319 <div class="title">Hillgrove HGCM28M1 1200W 26mm Hammer Drill</div>320 <div class="row" style="gap:18px; align-items: baseline;">321 <div class="old-price">₹3,499</div>322 <div class="discount">38% OFF</div>323 </div>324 <div class="price">₹2,159</div>325 </div>326 </div>327 </div>328 329 <!-- Bottom navigation pill -->330 <div class="nav-pill"></div>331</div>332</body>333</html>