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 Drill Results</title>7<style>8 body { margin: 0; padding: 0; background: transparent; }9 #render-target {10 width: 1080px;11 height: 2400px;12 position: relative;13 overflow: hidden;14 background: #ffffff;15 font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Arial, sans-serif;16 color: #111;17 }18 19 /* Status bar */20 .status-bar {21 height: 92px;22 padding: 0 28px;23 display: flex;24 align-items: center;25 font-size: 30px;26 color: #222;27 }28 .status-left { flex: 1; display: flex; align-items: center; gap: 16px; }29 .status-right { display: flex; align-items: center; gap: 16px; }30 .dot { width: 12px; height: 12px; border-radius: 50%; background: #000; opacity: .2; display: inline-block; }31 32 /* Top search row */33 .top-row {34 display: flex;35 align-items: center;36 padding: 8px 24px 10px 24px;37 gap: 18px;38 }39 .icon-btn {40 width: 78px;41 height: 78px;42 border-radius: 24px;43 display: flex; align-items: center; justify-content: center;44 background: #fff;45 }46 .burger-wrap { position: relative; }47 .notif-dot {48 position: absolute;49 width: 16px; height: 16px; border-radius: 50%;50 background: #ff3b30; right: 8px; top: 8px;51 }52 53 .search-pill {54 flex: 1;55 height: 92px;56 border: 2px solid #1e1e1e;57 border-radius: 50px;58 display: flex;59 align-items: center;60 padding: 0 20px;61 gap: 14px;62 }63 .search-pill .placeholder {64 flex: 1;65 color: #444;66 font-size: 34px;67 white-space: nowrap;68 overflow: hidden;69 text-overflow: ellipsis;70 }71 .pill-icon {72 width: 56px; height: 56px; border-radius: 50%;73 display: flex; align-items: center; justify-content: center;74 background: #f1f1f1;75 border: 1px solid #d0d0d0;76 }77 .lang-badge {78 width: 72px; height: 72px; border-radius: 36px;79 border: 2px solid #cfcfcf;80 display: flex; align-items: center; justify-content: center;81 font-size: 26px; color: #111; background: #fff;82 }83 84 /* Chips row */85 .chips {86 padding: 10px 24px 14px 24px;87 display: flex; gap: 14px; align-items: center;88 overflow: hidden;89 }90 .chip {91 display: flex; align-items: center; gap: 10px;92 height: 76px; padding: 0 26px;93 border-radius: 40px; font-size: 30px;94 background: #fff; border: 2px solid #1e1e1e;95 }96 .chip.light {97 background: #f2f2f2; border-color: #efefef; color: #333;98 }99 .chip .count {100 width: 32px; height: 32px; border-radius: 16px;101 background: #111; color: #fff; font-size: 22px;102 display: inline-flex; align-items: center; justify-content: center;103 }104 105 /* Product area background */106 .product-area {107 position: absolute;108 left: 0; right: 0;109 top: 290px;110 bottom: 120px;111 background: #f5f5f5;112 padding: 22px 20px 80px 20px;113 overflow: hidden;114 }115 116 /* Grid */117 .grid {118 display: grid;119 grid-template-columns: 1fr 1fr;120 gap: 26px;121 padding: 10px 6px 40px 6px;122 }123 124 .card {125 background: #ffffff;126 border-radius: 28px;127 box-shadow: 0 0 0 1px #eee inset;128 padding: 14px;129 position: relative;130 }131 .img-wrap {132 position: relative;133 border-radius: 22px;134 padding: 10px;135 border: 6px solid #0c8a2a;136 overflow: hidden;137 background: #fff;138 }139 .img-ph {140 width: 100%;141 height: 320px;142 background: #E0E0E0;143 border: 1px solid #BDBDBD;144 color: #757575;145 display: flex; align-items: center; justify-content: center;146 font-size: 26px; text-align: center; padding: 10px;147 }148 .heart-btn {149 position: absolute;150 right: 18px; top: 18px;151 width: 58px; height: 58px; border-radius: 30px;152 background: #fff; display: flex; align-items: center; justify-content: center;153 border: 1px solid #ddd;154 }155 156 .price {157 font-size: 42px; font-weight: 800; margin: 18px 6px 6px 6px;158 }159 .ship {160 font-size: 28px; color: #6b6b6b; margin: 0 6px 70px 6px;161 }162 .mini-cart {163 position: absolute;164 right: 22px; bottom: 22px;165 width: 86px; height: 86px; border-radius: 44px;166 background: #fff; display: flex; align-items: center; justify-content: center;167 border: 2px solid #e5e5e5;168 }169 170 /* Floating cart */171 .floating-cart {172 position: absolute;173 right: 22px;174 top: 1240px;175 width: 120px; height: 120px;176 border-radius: 60px;177 background: #111;178 color: #fff;179 display: flex; align-items: center; justify-content: center;180 box-shadow: 0 8px 20px rgba(0,0,0,0.25);181 z-index: 5;182 }183 184 /* Gesture bar */185 .gesture {186 position: absolute;187 bottom: 18px; left: 50%;188 transform: translateX(-50%);189 width: 380px; height: 10px; border-radius: 6px;190 background: rgba(0,0,0,.2);191 }192 193 /* Utility SVG sizing */194 svg { display: block; }195</style>196</head>197<body>198<div id="render-target">199 200 <!-- Status bar -->201 <div class="status-bar">202 <div class="status-left">203 <div>11:09</div>204 <span class="dot"></span>205 <span class="dot" style="opacity:.35;"></span>206 <span class="dot" style="opacity:.5;"></span>207 <span class="dot" style="opacity:.7;"></span>208 </div>209 <div class="status-right">210 <span class="dot" style="width:14px;height:14px;"></span>211 <span class="dot" style="width:14px;height:14px;"></span>212 <span class="dot" style="width:20px;height:20px;"></span>213 </div>214 </div>215 216 <!-- Top row: back, menu, search pill, language -->217 <div class="top-row">218 <div class="icon-btn" title="Back">219 <svg width="40" height="40" viewBox="0 0 24 24" aria-hidden="true">220 <path d="M14.5 4 L6 12 L14.5 20" stroke="#111" stroke-width="2.5" fill="none" stroke-linecap="round" stroke-linejoin="round"/>221 </svg>222 </div>223 <div class="icon-btn burger-wrap" title="Menu">224 <svg width="40" height="40" viewBox="0 0 24 24">225 <path d="M3 7h18M3 12h14M3 17h10" stroke="#111" stroke-width="2.4" fill="none" stroke-linecap="round"/>226 </svg>227 <span class="notif-dot"></span>228 </div>229 230 <div class="search-pill">231 <span class="placeholder">Hammer drill machine</span>232 <div class="pill-icon" title="Camera">233 <svg width="24" height="24" viewBox="0 0 24 24">234 <rect x="3" y="7" width="18" height="12" rx="2" ry="2" fill="none" stroke="#111" stroke-width="2"/>235 <circle cx="12" cy="13" r="3.5" fill="none" stroke="#111" stroke-width="2"/>236 <path d="M8 7l2-3h4l2 3" stroke="#111" stroke-width="2" fill="none" stroke-linecap="round" />237 </svg>238 </div>239 <div class="pill-icon" title="Search">240 <svg width="24" height="24" viewBox="0 0 24 24">241 <circle cx="10" cy="10" r="6" stroke="#111" stroke-width="2" fill="none"/>242 <path d="M15 15l6 6" stroke="#111" stroke-width="2" fill="none" stroke-linecap="round"/>243 </svg>244 </div>245 </div>246 247 <div class="lang-badge" title="Language">EN</div>248 </div>249 250 <!-- Chips -->251 <div class="chips">252 <div class="icon-btn" style="width:76px;height:76px;border:2px solid #1e1e1e;">253 <svg width="26" height="26" viewBox="0 0 24 24">254 <rect x="3" y="3" width="7" height="7" fill="none" stroke="#111" stroke-width="2"/>255 <rect x="14" y="3" width="7" height="7" fill="none" stroke="#111" stroke-width="2"/>256 <rect x="3" y="14" width="7" height="7" fill="none" stroke="#111" stroke-width="2"/>257 <rect x="14" y="14" width="7" height="7" fill="none" stroke="#111" stroke-width="2"/>258 </svg>259 </div>260 261 <div class="chip">262 <span>Sort</span>263 <svg width="18" height="18" viewBox="0 0 24 24">264 <path d="M6 9l6 6 6-6" stroke="#111" stroke-width="2" fill="none" stroke-linecap="round"/>265 </svg>266 </div>267 268 <div class="chip">269 <svg width="22" height="22" viewBox="0 0 24 24">270 <path d="M3 4h18l-6 7v6l-6 3v-9z" fill="none" stroke="#111" stroke-width="2"/>271 </svg>272 <span>Filter</span>273 <span class="count">1</span>274 </div>275 276 <div class="chip light">277 <span>Category</span>278 <svg width="18" height="18" viewBox="0 0 24 24">279 <path d="M6 9l6 6 6-6" stroke="#555" stroke-width="2" fill="none" stroke-linecap="round"/>280 </svg>281 </div>282 283 <div class="chip light">284 <span>Price & Deals</span>285 </div>286 </div>287 288 <!-- Product grid area -->289 <div class="product-area">290 <div class="grid">291 292 <!-- Card 1 -->293 <div class="card">294 <div class="img-wrap">295 <div class="img-ph">[IMG: Yuki Farm hammer drill set]</div>296 <div class="heart-btn">297 <svg width="22" height="22" viewBox="0 0 24 24">298 <path d="M12 21s-7-4.5-9-8.5C1.5 9 3.5 6 6.8 6 8.9 6 10.2 7.2 12 9c1.8-1.8 3.1-3 5.2-3C20.5 6 22.5 9 21 12.5 19 16.5 12 21 12 21z" fill="none" stroke="#111" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>299 </svg>300 </div>301 </div>302 <div class="price">£ 598.11</div>303 <div class="ship">Free Shipping</div>304 <div class="mini-cart">305 <svg width="26" height="26" viewBox="0 0 24 24">306 <circle cx="9" cy="20" r="1.8" fill="#111"/>307 <circle cx="17" cy="20" r="1.8" fill="#111"/>308 <path d="M3 4h2l2.5 12h10l2-8H7" fill="none" stroke="#111" stroke-width="2" stroke-linecap="round" />309 </svg>310 </div>311 </div>312 313 <!-- Card 2 -->314 <div class="card">315 <div class="img-wrap">316 <div class="img-ph">[IMG: Hammer drill set with paddles]</div>317 <div class="heart-btn">318 <svg width="22" height="22" viewBox="0 0 24 24">319 <path d="M12 21s-7-4.5-9-8.5C1.5 9 3.5 6 6.8 6 8.9 6 10.2 7.2 12 9c1.8-1.8 3.1-3 5.2-3C20.5 6 22.5 9 21 12.5 19 16.5 12 21 12 21z" fill="none" stroke="#111" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>320 </svg>321 </div>322 </div>323 <div class="price">£ 598.11</div>324 <div class="ship">Free Shipping</div>325 <div class="mini-cart">326 <svg width="26" height="26" viewBox="0 0 24 24">327 <circle cx="9" cy="20" r="1.8" fill="#111"/>328 <circle cx="17" cy="20" r="1.8" fill="#111"/>329 <path d="M3 4h2l2.5 12h10l2-8H7" fill="none" stroke="#111" stroke-width="2" stroke-linecap="round" />330 </svg>331 </div>332 </div>333 334 <!-- Card 3 (large image like left column) -->335 <div class="card">336 <div class="img-wrap">337 <div class="img-ph" style="height: 420px;">[IMG: Large hammer drill kit]</div>338 <div class="heart-btn">339 <svg width="22" height="22" viewBox="0 0 24 24">340 <path d="M12 21s-7-4.5-9-8.5C1.5 9 3.5 6 6.8 6 8.9 6 10.2 7.2 12 9c1.8-1.8 3.1-3 5.2-3C20.5 6 22.5 9 21 12.5 19 16.5 12 21 12 21z" fill="none" stroke="#111" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>341 </svg>342 </div>343 </div>344 <div class="price">£ 598.11</div>345 <div class="ship">Free Shipping</div>346 <div class="mini-cart">347 <svg width="26" height="26" viewBox="0 0 24 24">348 <circle cx="9" cy="20" r="1.8" fill="#111"/>349 <circle cx="17" cy="20" r="1.8" fill="#111"/>350 <path d="M3 4h2l2.5 12h10l2-8H7" fill="none" stroke="#111" stroke-width="2" stroke-linecap="round" />351 </svg>352 </div>353 </div>354 355 <!-- Card 4 -->356 <div class="card">357 <div class="img-wrap">358 <div class="img-ph">[IMG: Drill chisel set]</div>359 <div class="heart-btn">360 <svg width="22" height="22" viewBox="0 0 24 24">361 <path d="M12 21s-7-4.5-9-8.5C1.5 9 3.5 6 6.8 6 8.9 6 10.2 7.2 12 9c1.8-1.8 3.1-3 5.2-3C20.5 6 22.5 9 21 12.5 19 16.5 12 21 12 21z" fill="none" stroke="#111" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>362 </svg>363 </div>364 </div>365 <div class="price">£ 598.11</div>366 <div class="ship">Free Shipping</div>367 <div class="mini-cart">368 <svg width="26" height="26" viewBox="0 0 24 24">369 <circle cx="9" cy="20" r="1.8" fill="#111"/>370 <circle cx="17" cy="20" r="1.8" fill="#111"/>371 <path d="M3 4h2l2.5 12h10l2-8H7" fill="none" stroke="#111" stroke-width="2" stroke-linecap="round" />372 </svg>373 </div>374 </div>375 376 <!-- Card 5 -->377 <div class="card">378 <div class="img-wrap">379 <div class="img-ph">[IMG: Spare paddles & shovels]</div>380 <div class="heart-btn">381 <svg width="22" height="22" viewBox="0 0 24 24">382 <path d="M12 21s-7-4.5-9-8.5C1.5 9 3.5 6 6.8 6 8.9 6 10.2 7.2 12 9c1.8-1.8 3.1-3 5.2-3C20.5 6 22.5 9 21 12.5 19 16.5 12 21 12 21z" fill="none" stroke="#111" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>383 </svg>384 </div>385 </div>386 <div class="price">£ 100.25</div>387 <div class="ship">Free Shipping</div>388 <div class="mini-cart">389 <svg width="26" height="26" viewBox="0 0 24 24">390 <circle cx="9" cy="20" r="1.8" fill="#111"/>391 <circle cx="17" cy="20" r="1.8" fill="#111"/>392 <path d="M3 4h2l2.5 12h10l2-8H7" fill="none" stroke="#111" stroke-width="2" stroke-linecap="round" />393 </svg>394 </div>395 </div>396 397 <!-- Card 6 (empty to balance layout) -->398 <div class="card">399 <div class="img-wrap">400 <div class="img-ph">[IMG: Drill attachment set]</div>401 <div class="heart-btn">402 <svg width="22" height="22" viewBox="0 0 24 24">403 <path d="M12 21s-7-4.5-9-8.5C1.5 9 3.5 6 6.8 6 8.9 6 10.2 7.2 12 9c1.8-1.8 3.1-3 5.2-3C20.5 6 22.5 9 21 12.5 19 16.5 12 21 12 21z" fill="none" stroke="#111" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>404 </svg>405 </div>406 </div>407 <div class="price">£ 598.11</div>408 <div class="ship">Free Shipping</div>409 <div class="mini-cart">410 <svg width="26" height="26" viewBox="0 0 24 24">411 <circle cx="9" cy="20" r="1.8" fill="#111"/>412 <circle cx="17" cy="20" r="1.8" fill="#111"/>413 <path d="M3 4h2l2.5 12h10l2-8H7" fill="none" stroke="#111" stroke-width="2" stroke-linecap="round" />414 </svg>415 </div>416 </div>417 418 </div>419 </div>420 421 <!-- Floating cart -->422 <div class="floating-cart" title="Cart">423 <svg width="36" height="36" viewBox="0 0 24 24">424 <circle cx="8" cy="20" r="1.6" fill="#fff"/>425 <circle cx="17" cy="20" r="1.6" fill="#fff"/>426 <path d="M3 5h2l2.5 11h10l2-8H7" fill="none" stroke="#fff" stroke-width="2" stroke-linecap="round"/>427 </svg>428 </div>429 430 <!-- Gesture bar -->431 <div class="gesture"></div>432</div>433</body>434</html>