GD-ML/AndroidCode

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; font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Arial, sans-serif; }9  #render-target {10    width: 1080px; height: 2400px;11    position: relative; overflow: hidden;12    background: #F3F4F6;13  }14 15  /* Status bar */16  .status-bar {17    height: 84px; padding: 0 28px;18    display: flex; align-items: center; justify-content: space-between;19    color: #111; font-size: 34px;20  }21  .status-left { display: flex; align-items: center; gap: 16px; }22  .status-right { display: flex; align-items: center; gap: 18px; color: #111; }23  .status-icon { width: 34px; height: 34px; opacity: 0.85; }24 25  /* Top navigation */26  .top-nav {27    padding: 18px 24px 10px 24px;28    display: flex; align-items: center; gap: 20px;29  }30  .icon-btn {31    width: 60px; height: 60px; border-radius: 18px;32    border: none; background: transparent; display: flex; align-items: center; justify-content: center; padding: 0; position: relative;33  }34  .notif-dot {35    width: 16px; height: 16px; background: #ff3b30; border-radius: 50%;36    position: absolute; top: 16px; left: 142px;37  }38 39  .search-bar {40    flex: 1;41    height: 84px; background: #1F1F1F;42    border-radius: 46px;43    display: flex; align-items: center;44    padding: 0 26px;45    box-shadow: inset 0 0 0 2px #111;46    color: #D1D5DB; font-size: 34px;47  }48  .search-input {49    flex: 1; border: none; background: transparent; color: #E5E7EB; font-size: 34px; outline: none;50  }51  .search-icons { display: flex; align-items: center; gap: 18px; margin-left: 10px; }52  .right-badges { display: flex; align-items: center; gap: 16px; }53  .flag-badge {54    width: 52px; height: 52px; border-radius: 50%; background: #fff; border: 2px solid #D1D5DB;55    display: flex; align-items: center; justify-content: center; font-size: 22px; color: #333;56  }57 58  /* Chips */59  .chips {60    padding: 8px 20px 16px 20px; display: flex; align-items: center; gap: 16px; overflow: hidden;61  }62  .chip {63    padding: 18px 28px; background: #fff; border: 2px solid #E5E7EB; border-radius: 26px;64    font-size: 30px; color: #222; display: flex; align-items: center; gap: 14px; white-space: nowrap;65    box-shadow: 0 1px 2px rgba(0,0,0,0.03);66  }67  .chip-icon {68    width: 44px; height: 44px; background: #fff; border: 2px solid #E5E7EB; border-radius: 14px;69    display: flex; align-items: center; justify-content: center;70  }71 72  /* Product grid */73  .products {74    padding: 10px 24px 140px 24px;75    display: grid; grid-template-columns: repeat(2, 1fr); gap: 26px;76  }77  .card {78    background: #fff; border-radius: 30px; padding: 16px;79    box-shadow: 0 6px 16px rgba(0,0,0,0.06);80    position: relative;81  }82  .img {83    height: 360px; background: #E0E0E0; border: 1px solid #BDBDBD; border-radius: 22px;84    display: flex; align-items: center; justify-content: center; color: #6B7280; font-size: 28px; text-align: center; padding: 10px; position: relative;85  }86  .img.green { border: 10px solid #1E8E3E; background: #F7FDF8; color: #1E8E3E; }87  .heart {88    position: absolute; top: 14px; right: 14px; width: 58px; height: 58px; background: #fff; border-radius: 50%;89    display: flex; align-items: center; justify-content: center; box-shadow: 0 2px 6px rgba(0,0,0,0.12);90  }91  .price-row { display: flex; align-items: baseline; gap: 14px; margin-top: 16px; }92  .price { font-weight: 800; color: #111; font-size: 36px; }93  .price.sale { color: #E53935; }94  .old-price { color: #9CA3AF; text-decoration: line-through; font-size: 30px; }95  .shipping { color: #4B5563; font-size: 28px; margin-top: 6px; }96  .mini-cart {97    position: absolute; right: 18px; bottom: 18px;98    width: 84px; height: 84px; background: #fff; border: 2px solid #E5E7EB; border-radius: 22px;99    display: flex; align-items: center; justify-content: center; box-shadow: 0 2px 8px rgba(0,0,0,0.05);100  }101 102  /* Floating cart */103  .floating-cart {104    position: absolute; right: 34px; top: 1230px; width: 110px; height: 110px; border-radius: 55px; background: #111; color: #fff;105    display: flex; align-items: center; justify-content: center; box-shadow: 0 10px 20px rgba(0,0,0,0.25);106    z-index: 10;107  }108 109  /* Bottom home indicator */110  .home-indicator {111    position: absolute; bottom: 22px; left: 50%; transform: translateX(-50%);112    width: 380px; height: 10px; background: #111; border-radius: 8px; opacity: 0.95;113  }114  .play-badge {115    position: absolute; left: 24px; bottom: 24px; width: 66px; height: 66px; border-radius: 50%;116    background: rgba(255,255,255,0.9); display: flex; align-items: center; justify-content: center;117    box-shadow: 0 2px 6px rgba(0,0,0,0.15);118  }119</style>120</head>121<body>122<div id="render-target">123 124  <!-- Status Bar -->125  <div class="status-bar">126    <div class="status-left">127      <span>11:08</span>128      <svg class="status-icon" viewBox="0 0 24 24"><circle cx="12" cy="12" r="9" fill="#9CA3AF"/></svg>129      <svg class="status-icon" viewBox="0 0 24 24"><circle cx="12" cy="12" r="9" fill="#9CA3AF"/></svg>130      <svg class="status-icon" viewBox="0 0 24 24"><circle cx="12" cy="12" r="9" fill="#9CA3AF"/></svg>131      <svg class="status-icon" viewBox="0 0 24 24"><circle cx="12" cy="12" r="3" fill="#9CA3AF"/></svg>132    </div>133    <div class="status-right">134      <svg class="status-icon" viewBox="0 0 24 24"><path d="M4 12h16" stroke="#111" stroke-width="2"/></svg>135      <svg class="status-icon" viewBox="0 0 24 24"><path d="M3 12l7 8 11-16" stroke="#111" stroke-width="2" fill="none"/></svg>136      <svg class="status-icon" viewBox="0 0 24 24"><rect x="4" y="6" width="16" height="12" rx="2" fill="#111"/></svg>137    </div>138  </div>139 140  <!-- Top Navigation -->141  <div class="top-nav">142    <button class="icon-btn" aria-label="Back">143      <svg width="42" height="42" viewBox="0 0 24 24"><path d="M15 18l-6-6 6-6" stroke="#111" stroke-width="2" fill="none" stroke-linecap="round" stroke-linejoin="round"/></svg>144    </button>145    <button class="icon-btn" aria-label="Menu">146      <svg width="42" height="42" viewBox="0 0 24 24"><path d="M3 6h18M3 12h14M3 18h10" stroke="#111" stroke-width="2" stroke-linecap="round"/></svg>147    </button>148    <span class="notif-dot"></span>149    <div class="search-bar">150      <input class="search-input" value="Hammer drill machine" />151      <div class="search-icons">152        <svg width="40" height="40" viewBox="0 0 24 24"><path d="M4 7h16v10H4z" stroke="#CFCFCF" stroke-width="2" fill="none"/><circle cx="12" cy="11" r="2" fill="#CFCFCF"/></svg>153        <svg width="40" height="40" viewBox="0 0 24 24"><circle cx="11" cy="11" r="7" stroke="#CFCFCF" stroke-width="2" fill="none"/><path d="M16 16l5 5" stroke="#CFCFCF" stroke-width="2"/></svg>154      </div>155    </div>156    <div class="right-badges">157      <button class="icon-btn" aria-label="Location">158        <svg width="42" height="42" viewBox="0 0 24 24"><path d="M12 22s7-7 7-12a7 7 0 10-14 0c0 5 7 12 7 12z" stroke="#111" stroke-width="2" fill="none"/></svg>159      </button>160      <div class="flag-badge">GB</div>161    </div>162  </div>163 164  <!-- Filter Chips -->165  <div class="chips">166    <div class="chip-icon" title="Grid">167      <svg width="28" height="28" viewBox="0 0 24 24">168        <rect x="3" y="3" width="8" height="8" fill="#111"/>169        <rect x="13" y="3" width="8" height="8" fill="#111"/>170        <rect x="3" y="13" width="8" height="8" fill="#111"/>171        <rect x="13" y="13" width="8" height="8" fill="#111"/>172      </svg>173    </div>174    <div class="chip">Sort175      <svg width="22" height="22" viewBox="0 0 24 24"><path d="M6 9l6 6 6-6" fill="none" stroke="#111" stroke-width="2"/></svg>176    </div>177    <div class="chip" title="Filter">178      <svg width="28" height="28" viewBox="0 0 24 24"><path d="M3 5h18l-7 8v6l-4-2v-4L3 5z" fill="none" stroke="#111" stroke-width="2"/></svg>179    </div>180    <div class="chip">Category181      <svg width="22" height="22" viewBox="0 0 24 24"><path d="M6 9l6 6 6-6" fill="none" stroke="#111" stroke-width="2"/></svg>182    </div>183    <div class="chip">Price &amp; Deals184      <svg width="22" height="22" viewBox="0 0 24 24"><path d="M6 9l6 6 6-6" fill="none" stroke="#111" stroke-width="2"/></svg>185    </div>186  </div>187 188  <!-- Product Grid -->189  <div class="products">190    <!-- Card 1: Sale -->191    <div class="card">192      <div class="img">193        <div class="heart">194          <svg width="28" height="28" viewBox="0 0 24 24"><path d="M12 21s-7-4.6-9-8.2C1.2 9.7 2.6 6.8 5.6 6.4 7.4 6.2 9 7.2 10 8.5c1-1.3 2.6-2.3 4.4-2.1 3 .4 4.4 3.3 2.6 6.4C19 16.4 12 21 12 21z" fill="none" stroke="#111" stroke-width="2"/></svg>195        </div>196        [IMG: Black Hammer Drill kit]197      </div>198      <div class="price-row">199        <div class="price sale">£ 102.77</div>200        <div class="old-price">£ 250.65</div>201      </div>202      <div class="shipping">Free Shipping</div>203      <div class="mini-cart" title="Add to cart">204        <svg width="34" height="34" viewBox="0 0 24 24"><path d="M3 4h2l2 12h10l2-8H6" stroke="#111" stroke-width="2" fill="none"/><circle cx="9" cy="19" r="2" fill="#111"/><circle cx="17" cy="19" r="2" fill="#111"/></svg>205      </div>206    </div>207 208    <!-- Card 2: Green bordered image -->209    <div class="card">210      <div class="img green">211        <div class="heart">212          <svg width="28" height="28" viewBox="0 0 24 24"><path d="M12 21s-7-4.6-9-8.2C1.2 9.7 2.6 6.8 5.6 6.4 7.4 6.2 9 7.2 10 8.5c1-1.3 2.6-2.3 4.4-2.1 3 .4 4.4 3.3 2.6 6.4C19 16.4 12 21 12 21z" fill="none" stroke="#111" stroke-width="2"/></svg>213        </div>214        [IMG: Yuki Farm demolition drill set]215      </div>216      <div class="price-row">217        <div class="price">£ 598.11</div>218      </div>219      <div class="shipping">Free Shipping</div>220      <div class="mini-cart">221        <svg width="34" height="34" viewBox="0 0 24 24"><path d="M3 4h2l2 12h10l2-8H6" stroke="#111" stroke-width="2" fill="none"/><circle cx="9" cy="19" r="2" fill="#111"/><circle cx="17" cy="19" r="2" fill="#111"/></svg>222      </div>223    </div>224 225    <!-- Card 3 -->226    <div class="card">227      <div class="img green">228        <div class="heart">229          <svg width="28" height="28" viewBox="0 0 24 24"><path d="M12 21s-7-4.6-9-8.2C1.2 9.7 2.6 6.8 5.6 6.4 7.4 6.2 9 7.2 10 8.5c1-1.3 2.6-2.3 4.4-2.1 3 .4 4.4 3.3 2.6 6.4C19 16.4 12 21 12 21z" fill="none" stroke="#111" stroke-width="2"/></svg>230        </div>231        [IMG: Yuki Farm demolition drill + shovel bits]232      </div>233      <div class="price-row">234        <div class="price">£ 598.11</div>235      </div>236      <div class="shipping">Free Shipping</div>237      <div class="mini-cart">238        <svg width="34" height="34" viewBox="0 0 24 24"><path d="M3 4h2l2 12h10l2-8H6" stroke="#111" stroke-width="2" fill="none"/><circle cx="9" cy="19" r="2" fill="#111"/><circle cx="17" cy="19" r="2" fill="#111"/></svg>239      </div>240    </div>241 242    <!-- Card 4 -->243    <div class="card">244      <div class="img green">245        <div class="heart">246          <svg width="28" height="28" viewBox="0 0 24 24"><path d="M12 21s-7-4.6-9-8.2C1.2 9.7 2.6 6.8 5.6 6.4 7.4 6.2 9 7.2 10 8.5c1-1.3 2.6-2.3 4.4-2.1 3 .4 4.4 3.3 2.6 6.4C19 16.4 12 21 12 21z" fill="none" stroke="#111" stroke-width="2"/></svg>247        </div>248        [IMG: Yuki Farm demolition drilling kit]249      </div>250      <div class="price-row">251        <div class="price">£ 598.11</div>252      </div>253      <div class="shipping">Free Shipping</div>254      <div class="mini-cart">255        <svg width="34" height="34" viewBox="0 0 24 24"><path d="M3 4h2l2 12h10l2-8H6" stroke="#111" stroke-width="2" fill="none"/><circle cx="9" cy="19" r="2" fill="#111"/><circle cx="17" cy="19" r="2" fill="#111"/></svg>256      </div>257    </div>258 259    <!-- Card 5: Orange tool set with play badge -->260    <div class="card">261      <div class="img">262        <div class="heart">263          <svg width="28" height="28" viewBox="0 0 24 24"><path d="M12 21s-7-4.6-9-8.2C1.2 9.7 2.6 6.8 5.6 6.4 7.4 6.2 9 7.2 10 8.5c1-1.3 2.6-2.3 4.4-2.1 3 .4 4.4 3.3 2.6 6.4C19 16.4 12 21 12 21z" fill="none" stroke="#111" stroke-width="2"/></svg>264        </div>265        <div class="play-badge">266          <svg width="30" height="30" viewBox="0 0 24 24"><path d="M8 5v14l11-7z" fill="#111"/></svg>267        </div>268        [IMG: Orange cordless tool combo]269      </div>270      <div class="price-row">271        <div class="price">£ 279.00</div>272      </div>273      <div class="shipping">Free Shipping</div>274      <div class="mini-cart">275        <svg width="34" height="34" viewBox="0 0 24 24"><path d="M3 4h2l2 12h10l2-8H6" stroke="#111" stroke-width="2" fill="none"/><circle cx="9" cy="19" r="2" fill="#111"/><circle cx="17" cy="19" r="2" fill="#111"/></svg>276      </div>277    </div>278 279    <!-- Card 6 -->280    <div class="card">281      <div class="img green">282        <div class="heart">283          <svg width="28" height="28" viewBox="0 0 24 24"><path d="M12 21s-7-4.6-9-8.2C1.2 9.7 2.6 6.8 5.6 6.4 7.4 6.2 9 7.2 10 8.5c1-1.3 2.6-2.3 4.4-2.1 3 .4 4.4 3.3 2.6 6.4C19 16.4 12 21 12 21z" fill="none" stroke="#111" stroke-width="2"/></svg>284        </div>285        [IMG: Yuki Farm impact drill bundle]286      </div>287      <div class="price-row">288        <div class="price">£ 598.11</div>289      </div>290      <div class="shipping">Free Shipping</div>291      <div class="mini-cart">292        <svg width="34" height="34" viewBox="0 0 24 24"><path d="M3 4h2l2 12h10l2-8H6" stroke="#111" stroke-width="2" fill="none"/><circle cx="9" cy="19" r="2" fill="#111"/><circle cx="17" cy="19" r="2" fill="#111"/></svg>293      </div>294    </div>295 296  </div>297 298  <!-- Floating Cart -->299  <div class="floating-cart" aria-label="Cart">300    <svg width="44" height="44" viewBox="0 0 24 24"><path d="M3 4h2l2 12h10l2-8H6" stroke="#fff" stroke-width="2" fill="none"/><circle cx="9" cy="19" r="2" fill="#fff"/><circle cx="17" cy="19" r="2" fill="#fff"/></svg>301  </div>302 303  <!-- Home Indicator -->304  <div class="home-indicator"></div>305</div>306</body>307</html>