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>Search Results - Drill Machine</title>7<style>8 body { margin: 0; padding: 0; background: transparent; font-family: Arial, Helvetica, sans-serif; color: #222; }9 #render-target {10 position: relative;11 overflow: hidden;12 width: 1080px;13 height: 2400px;14 background: linear-gradient(180deg, #9ad9d6 0%, #a4e0c4 180px, #f6f7f8 180px, #f6f7f8 100%);15 }16 17 /* Status bar */18 .status-bar {19 position: absolute;20 top: 0; left: 0; right: 0;21 height: 110px;22 padding: 0 32px;23 display: flex; align-items: center; justify-content: space-between;24 color: #1b1b1b;25 font-weight: 600;26 font-size: 40px;27 }28 .status-icons { display: flex; align-items: center; gap: 26px; color: #455a64; font-weight: 500; }29 .battery {30 width: 56px; height: 28px; border: 3px solid #455a64; border-radius: 6px; position: relative;31 }32 .battery::after {33 content: ''; position: absolute; right: -10px; top: 8px; width: 6px; height: 12px; background: #455a64; border-radius: 2px;34 }35 .battery .level { position: absolute; left: 4px; top: 4px; bottom: 4px; width: 70%; background: #66bb6a; }36 37 /* Top search row */38 .top-search {39 position: absolute; top: 110px; left: 0; right: 0;40 height: 125px; padding: 16px 24px 16px 24px;41 display: flex; align-items: center; gap: 18px;42 }43 .back-btn {44 width: 88px; height: 88px; border-radius: 44px;45 display: flex; align-items: center; justify-content: center;46 color: #333;47 }48 .search-box {49 flex: 1;50 height: 96px;51 background: #ffffff;52 border-radius: 26px;53 box-shadow: 0 2px 0 rgba(0,0,0,0.08);54 display: flex; align-items: center; padding: 0 24px; gap: 18px;55 border: 1px solid #e3e3e3;56 }57 .search-input {58 flex: 1; font-size: 40px; color: #222;59 }60 .search-placeholder { color: #6d6d6d; }61 .icon-btn {62 width: 72px; height: 72px; border-radius: 18px; display: flex; align-items: center; justify-content: center; background: #f3f4f6; border: 1px solid #e0e0e0;63 }64 65 /* Chips row */66 .chip-row {67 position: absolute; top: 235px; left: 0; right: 0;68 height: 100px; padding: 0 20px;69 display: flex; align-items: center; gap: 16px; overflow: hidden;70 background: #ffffff;71 border-top: 1px solid #eaeaea;72 border-bottom: 1px solid #eaeaea;73 }74 .chip {75 display: inline-flex; align-items: center; gap: 12px;76 padding: 18px 26px; font-size: 34px; color: #333;77 background: #f2f3f5; border: 1px solid #e1e2e5; border-radius: 999px;78 white-space: nowrap;79 }80 .toggle {81 width: 68px; height: 36px; border-radius: 18px; background: #dfe3e8; position: relative; border: 1px solid #cfd4da;82 }83 .toggle::after {84 content: ''; position: absolute; left: 2px; top: 2px; width: 32px; height: 32px; border-radius: 16px; background: #ffffff; border: 1px solid #cfd4da;85 }86 87 /* List area */88 .list {89 position: absolute; top: 335px; left: 0; right: 0; bottom: 180px;90 overflow: hidden; /* static mock, no scrolling in render */91 padding-bottom: 16px;92 }93 .card {94 width: 1000px; margin: 22px auto; background: #fff; border-radius: 24px;95 border: 1px solid #e8e8e8; box-shadow: 0 1px 0 rgba(0,0,0,0.04);96 display: flex; gap: 22px; padding: 22px;97 }98 .product-img {99 width: 360px; height: 320px; background: #E0E0E0; border: 1px solid #BDBDBD;100 display: flex; align-items: center; justify-content: center; color: #757575; font-size: 28px; text-align: center; border-radius: 14px;101 }102 .right {103 flex: 1; display: flex; flex-direction: column; gap: 12px;104 }105 .sponsored { color: #8a8a8a; font-size: 30px; }106 .title { font-size: 34px; font-weight: 700; line-height: 1.25; color: #1a1a1a; }107 .pill {108 display: inline-block; background: #eef0f2; border: 1px solid #d7dadf; color: #2f3a44;109 padding: 8px 16px; border-radius: 10px; font-size: 28px; font-weight: 700;110 }111 .rating-row { display: flex; align-items: center; gap: 12px; }112 .rating-score { color: #1976d2; font-size: 30px; }113 .deal { display: inline-block; background: #d84315; color: #fff; border-radius: 10px; padding: 10px 16px; font-size: 28px; font-weight: 700; }114 115 .price-row { display: flex; align-items: baseline; gap: 12px; }116 .price { font-size: 52px; font-weight: 800; }117 .mrp { color: #7a7a7a; text-decoration: line-through; font-size: 30px; }118 .off { color: #2e7d32; font-size: 30px; }119 120 .prime-row { display: flex; align-items: center; gap: 10px; font-size: 30px; }121 .prime-badge { color: #1e88e5; font-weight: 800; }122 .prime-tick {123 width: 28px; height: 28px; border-radius: 50%; background: #ffb74d; display: inline-flex; align-items: center; justify-content: center; color: #fff; font-size: 22px;124 }125 .free-del { color: #8a8a8a; font-size: 28px; }126 127 /* Bottom nav */128 .bottom-nav {129 position: absolute; left: 0; right: 0; bottom: 60px; height: 160px; background: #fff;130 border-top: 1px solid #e0e0e0; display: flex; align-items: center; justify-content: space-around;131 }132 .nav-item { display: flex; flex-direction: column; align-items: center; gap: 10px; color: #1f2937; font-size: 28px; }133 .nav-item.active { color: #11a683; }134 .gesture {135 position: absolute; left: 50%; transform: translateX(-50%);136 bottom: 16px; width: 360px; height: 10px; background: #c7c7c7; border-radius: 6px;137 }138 139 /* Simple SVG icon helpers */140 .icon { width: 48px; height: 48px; }141 .star { width: 30px; height: 30px; fill: #f59e0b; }142 .star.gray { fill: #e0e0e0; }143</style>144</head>145<body>146<div id="render-target">147 148 <!-- Status bar -->149 <div class="status-bar">150 <div>8:23</div>151 <div class="status-icons">152 <span>ib</span>153 <span>LR</span>154 <span>•</span>155 <span style="opacity:.8;">⊖</span>156 <span style="opacity:.8;">📶</span>157 <div class="battery"><div class="level"></div></div>158 <span style="font-size:30px; color:#455a64;">82%</span>159 </div>160 </div>161 162 <!-- Search row -->163 <div class="top-search">164 <div class="back-btn" aria-label="Back">165 <svg class="icon" viewBox="0 0 24 24">166 <path d="M15.5 5.5L9 12l6.5 6.5-1.4 1.4L6.2 12l7.9-7.9 1.4 1.4z" fill="#222"/>167 </svg>168 </div>169 <div class="search-box">170 <svg class="icon" viewBox="0 0 24 24">171 <path d="M10 3a7 7 0 015.6 11.2l4.6 4.6-1.4 1.4-4.6-4.6A7 7 0 1110 3zm0 2a5 5 0 100 10 5 5 0 000-10z" fill="#6b7280"/>172 </svg>173 <div class="search-input"><span class="search-placeholder">drill machine</span></div>174 <div class="icon-btn" aria-label="Scan">175 <svg class="icon" viewBox="0 0 24 24">176 <path d="M4 4h6v2H6v4H4V4zm10 0h6v6h-2V6h-4V4zM4 14h2v4h4v2H4v-6zm14 0h2v6h-6v-2h4v-4z" fill="#374151"/>177 </svg>178 </div>179 </div>180 </div>181 182 <!-- Filter chips -->183 <div class="chip-row">184 <div class="chip">185 <span style="color:#f7a600; font-weight:800;">✓prime</span>186 <div class="toggle"></div>187 </div>188 <div class="chip">189 <div style="display:flex; align-items:center;">190 <svg class="star" viewBox="0 0 24 24"><path d="M12 2l3 7h7l-5.8 4.2L18 21l-6-4-6 4 1.8-7.8L2 9h7z"/></svg>191 <svg class="star" viewBox="0 0 24 24"><path d="M12 2l3 7h7l-5.8 4.2L18 21l-6-4-6 4 1.8-7.8L2 9h7z"/></svg>192 <svg class="star" viewBox="0 0 24 24"><path d="M12 2l3 7h7l-5.8 4.2L18 21l-6-4-6 4 1.8-7.8L2 9h7z"/></svg>193 <svg class="star" viewBox="0 0 24 24"><path d="M12 2l3 7h7l-5.8 4.2L18 21l-6-4-6 4 1.8-7.8L2 9h7z"/></svg>194 </div>195 <span> & Up</span>196 </div>197 <div class="chip">Under ₹500</div>198 <div class="chip">Filters199 <svg class="icon" viewBox="0 0 24 24" style="width:32px;height:32px;">200 <path d="M7 10l5 6 5-6H7z" fill="#374151"/>201 </svg>202 </div>203 </div>204 205 <!-- Product list -->206 <div class="list">207 208 <!-- Card 1 -->209 <div class="card">210 <div class="product-img">[IMG: Yellow Impact Drill + bits]</div>211 <div class="right">212 <div class="sponsored">Sponsored</div>213 <div class="title">GOLDEN BULLET HI93 Impact Drill - Reversible Drill -600W 0-2800rpm -13mm chuck- 6 drill...</div>214 <div class="pill">Corded Electric</div>215 <div class="rating-row">216 <div class="rating-score">3.7</div>217 <svg class="star" viewBox="0 0 24 24"><path d="M12 2l3 7h7l-5.8 4.2L18 21l-6-4-6 4 1.8-7.8L2 9h7z"/></svg>218 <svg class="star" viewBox="0 0 24 24"><path d="M12 2l3 7h7l-5.8 4.2L18 21l-6-4-6 4 1.8-7.8L2 9h7z"/></svg>219 <svg class="star" viewBox="0 0 24 24"><path d="M12 2l3 7h7l-5.8 4.2L18 21l-6-4-6 4 1.8-7.8L2 9h7z"/></svg>220 <svg class="star" viewBox="0 0 24 24"><path d="M12 2l3 7h7l-5.8 4.2L18 21l-6-4-6 4 1.8-7.8L2 9h7z"/></svg>221 <svg class="star gray" viewBox="0 0 24 24"><path d="M12 2l3 7h7l-5.8 4.2L18 21l-6-4-6 4 1.8-7.8L2 9h7z"/></svg>222 <div style="color:#777;">(1,924)</div>223 </div>224 <div class="deal">Deal of the Day</div>225 <div class="price-row">226 <div class="price">₹1,661</div>227 <div class="mrp">M.R.P: ₹2,987</div>228 <div class="off">(44% off)</div>229 </div>230 <div class="prime-row">231 <span class="prime-badge"><span class="prime-tick">✓</span> prime</span>232 <span>Get it by Wednesday, 13 December</span>233 </div>234 <div class="free-del">FREE Delivery by Amazon</div>235 </div>236 </div>237 238 <!-- Card 2 -->239 <div class="card">240 <div class="product-img">[IMG: Green Drill + bits combo]</div>241 <div class="right">242 <div class="title">KHADIJA Drill Machine 10mm With Free 13Pcs HSS Drill Bits & 1Pc Masonary Bit Combo 6...</div>243 <div class="pill">Corded Electric</div>244 <div class="rating-row">245 <div class="rating-score">3.8</div>246 <svg class="star" viewBox="0 0 24 24"><path d="M12 2l3 7h7l-5.8 4.2L18 21l-6-4-6 4 1.8-7.8L2 9h7z"/></svg>247 <svg class="star" viewBox="0 0 24 24"><path d="M12 2l3 7h7l-5.8 4.2L18 21l-6-4-6 4 1.8-7.8L2 9h7z"/></svg>248 <svg class="star" viewBox="0 0 24 24"><path d="M12 2l3 7h7l-5.8 4.2L18 21l-6-4-6 4 1.8-7.8L2 9h7z"/></svg>249 <svg class="star" viewBox="0 0 24 24"><path d="M12 2l3 7h7l-5.8 4.2L18 21l-6-4-6 4 1.8-7.8L2 9h7z"/></svg>250 <svg class="star gray" viewBox="0 0 24 24"><path d="M12 2l3 7h7l-5.8 4.2L18 21l-6-4-6 4 1.8-7.8L2 9h7z"/></svg>251 <div style="color:#777;">(5,637)</div>252 </div>253 <div class="price-row">254 <div class="price">₹1,099</div>255 <div class="mrp">M.R.P: ₹2,499</div>256 <div class="off">(56% off)</div>257 </div>258 <div class="prime-row">259 <span class="prime-badge"><span class="prime-tick">✓</span> prime</span>260 <span>Get it by Tomorrow, 12 December</span>261 </div>262 <div class="free-del">FREE Delivery by Amazon</div>263 </div>264 </div>265 266 <!-- Card 3 -->267 <div class="card">268 <div class="product-img">[IMG: Red ENON Drill + accessory packs]</div>269 <div class="right">270 <div class="title">ENON Electric Drill Machine 650W, 10mm Chuck, 3300RPM, Forward/Reverse function,...</div>271 <div class="pill">Corded Electric</div>272 <div class="rating-row">273 <div class="rating-score">3.6</div>274 <svg class="star" viewBox="0 0 24 24"><path d="M12 2l3 7h7l-5.8 4.2L18 21l-6-4-6 4 1.8-7.8L2 9h7z"/></svg>275 <svg class="star" viewBox="0 0 24 24"><path d="M12 2l3 7h7l-5.8 4.2L18 21l-6-4-6 4 1.8-7.8L2 9h7z"/></svg>276 <svg class="star" viewBox="0 0 24 24"><path d="M12 2l3 7h7l-5.8 4.2L18 21l-6-4-6 4 1.8-7.8L2 9h7z"/></svg>277 <svg class="star gray" viewBox="0 0 24 24"><path d="M12 2l3 7h7l-5.8 4.2L18 21l-6-4-6 4 1.8-7.8L2 9h7z"/></svg>278 <svg class="star gray" viewBox="0 0 24 24"><path d="M12 2l3 7h7l-5.8 4.2L18 21l-6-4-6 4 1.8-7.8L2 9h7z"/></svg>279 <div style="color:#777;">(11)</div>280 </div>281 <div class="price-row">282 <div class="price">₹1,399</div>283 <div class="mrp">M.R.P: ₹2,900</div>284 <div class="off">(52% off)</div>285 </div>286 <div class="deal" style="background:#2e7d32;">Save ₹80</div>287 <div class="prime-row">288 <span class="prime-badge"><span class="prime-tick">✓</span> prime</span>289 <span>Get it by Tomorrow, 12 December</span>290 </div>291 </div>292 </div>293 294 </div>295 296 <!-- Bottom Nav -->297 <div class="bottom-nav">298 <div class="nav-item active">299 <svg class="icon" viewBox="0 0 24 24"><path d="M12 3l9 8h-2v9h-5v-6H10v6H5v-9H3l9-8z" fill="#11a683"/></svg>300 <div>Home</div>301 </div>302 <div class="nav-item">303 <svg class="icon" viewBox="0 0 24 24"><path d="M12 12a5 5 0 100-10 5 5 0 000 10zm-7 9v-1c0-3.3 3.6-6 7-6s7 2.7 7 6v1H5z" fill="#374151"/></svg>304 <div>You</div>305 </div>306 <div class="nav-item">307 <svg class="icon" viewBox="0 0 24 24"><path d="M4 6h16v2H4V6zm0 5h16v2H4v-2zm0 5h16v2H4v-2z" fill="#374151"/></svg>308 <div>More</div>309 </div>310 <div class="nav-item">311 <svg class="icon" viewBox="0 0 24 24"><path d="M7 6h13l-1.5 9h-11L6 4H3V2h3l1 4zm3 16a2 2 0 110-4 2 2 0 010 4zm8