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>E-commerce Search - Football Training Hurdles</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; position: relative; overflow: hidden;11 background: #ffffff; color: #111;12 }13 14 /* Top app bar */15 .appbar {16 height: 140px; padding: 0 28px; box-sizing: border-box;17 display: flex; align-items: center; gap: 22px; border-bottom: 1px solid #e6e6e6;18 background: #fff;19 }20 .back-btn { width: 64px; height: 64px; display: flex; align-items: center; justify-content: center; }21 .search-pill {22 flex: 1; height: 78px; border-radius: 16px; border: 1px solid #e2e2e2; padding: 0 22px;23 display: flex; align-items: center; gap: 18px; color: #444;24 }25 .search-pill .text { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; font-size: 32px; color: #222; }26 .appbar-icons { display: flex; gap: 26px; align-items: center; }27 .icon { width: 44px; height: 44px; fill: none; stroke: #222; stroke-width: 2.5; }28 .icon.fill { fill: #222; stroke: none; }29 30 /* Sort / Filter bar */31 .sort-filter {32 height: 110px; display: grid; grid-template-columns: 1fr 1fr; border-bottom: 1px solid #ececec;33 background: #fff;34 }35 .sf-item { display: flex; align-items: center; justify-content: center; gap: 14px; font-size: 34px; color: #333; }36 .sf-item + .sf-item { border-left: 1px solid #eee; }37 38 /* Banner */39 .banner {40 height: 200px; margin: 0 0; background: linear-gradient(90deg, #4a32f4, #4739f7);41 color: #fff; display: flex; align-items: center; justify-content: space-between; padding: 0 28px; box-sizing: border-box;42 }43 .badge { background: #b8ff51; color: #1c1c1c; padding: 8px 16px; border-radius: 10px; font-weight: bold; }44 .banner-side { background: #E0E0E0; border: 1px solid #BDBDBD; color: #757575; height: 130px; width: 220px;45 display: flex; align-items: center; justify-content: center; border-radius: 10px;46 }47 48 /* Grid listing */49 .content {50 position: absolute; left: 0; right: 0; top: 450px; bottom: 180px; /* 140 + 110 + 200 = 450, nav = 180 */51 overflow: hidden;52 }53 .grid {54 height: 100%; overflow-y: auto; padding: 26px; box-sizing: border-box;55 display: grid; grid-template-columns: repeat(2, 1fr); gap: 26px;56 background: #fafafa;57 }58 .card {59 background: #fff; border: 1px solid #ececec; border-radius: 18px; overflow: hidden; position: relative;60 }61 .card .img {62 height: 380px; background: #E0E0E0; border-bottom: 1px solid #BDBDBD;63 display: flex; align-items: center; justify-content: center; color: #757575; font-size: 30px;64 }65 .heart {66 position: absolute; top: 18px; right: 18px; width: 60px; height: 60px; border-radius: 50%;67 background: rgba(255,255,255,0.95); display: flex; align-items: center; justify-content: center; box-shadow: 0 2px 8px rgba(0,0,0,0.08);68 }69 .card-body { padding: 22px; }70 .brand { font-size: 34px; font-weight: 700; margin-bottom: 6px; color: #222; }71 .sub { font-size: 28px; color: #6b6b6b; margin-bottom: 12px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }72 .price-line { font-size: 30px; margin-bottom: 10px; }73 .discount { color: #1aae44; font-weight: 700; margin-right: 10px; }74 .old { color: #9e9e9e; text-decoration: line-through; margin-right: 10px; }75 .new { font-weight: 800; }76 .rating { display: flex; align-items: center; gap: 8px; color: #4a4a4a; font-size: 26px; margin: 12px 0 16px; }77 .star { width: 28px; height: 28px; fill: #16a34a; }78 .coupon {79 display: flex; align-items: center; justify-content: space-between;80 background: #e9f9ea; color: #1a7d35; border-radius: 12px; overflow: hidden;81 }82 .coupon .left, .coupon .right { padding: 16px 18px; font-size: 28px; }83 .coupon .divider { width: 2px; height: 100%; border-left: 2px dashed #7edc9f; }84 85 /* Bottom nav */86 .bottom-nav {87 position: absolute; left: 0; right: 0; bottom: 0; height: 180px; background: #fff; border-top: 1px solid #e9e9e9;88 display: grid; grid-template-columns: repeat(5, 1fr); align-items: center; text-align: center; font-size: 28px; color: #606060;89 }90 .nav-item { display: flex; flex-direction: column; align-items: center; gap: 10px; }91 .active { color: #4353ff; position: relative; }92 .active::before {93 content: ""; position: absolute; top: -8px; width: 70px; height: 6px; border-radius: 4px; background: #4353ff;94 }95 .nav-icon { width: 44px; height: 44px; stroke: currentColor; fill: none; stroke-width: 2.6; }96</style>97</head>98<body>99<div id="render-target">100 101 <!-- App Bar -->102 <div class="appbar">103 <div class="back-btn" aria-label="Back">104 <svg class="icon" viewBox="0 0 24 24"><path d="M15 6l-6 6 6 6"/></svg>105 </div>106 <div class="search-pill">107 <svg class="icon" viewBox="0 0 24 24"><circle cx="11" cy="11" r="7"/><path d="M20 20l-3-3"/></svg>108 <div class="text">Football training hur...</div>109 </div>110 <div class="appbar-icons">111 <svg class="icon" viewBox="0 0 24 24"><circle cx="11" cy="11" r="7"/><path d="M20 20l-3-3"/></svg>112 <svg class="icon" viewBox="0 0 24 24"><path d="M12 3a5 5 0 0 0-5 5v4H5l7 7 7-7h-2V8a5 5 0 0 0-5-5z"/></svg>113 <svg class="icon" viewBox="0 0 24 24"><path d="M7 7h14l-2 10H7L5 4H2"/></svg>114 </div>115 </div>116 117 <!-- Sort / Filter -->118 <div class="sort-filter">119 <div class="sf-item">120 <svg class="icon" viewBox="0 0 24 24"><path d="M3 5h14M3 11h10M3 17h6"/></svg>121 <span>Sort</span>122 </div>123 <div class="sf-item">124 <svg class="icon" viewBox="0 0 24 24"><path d="M4 6h16M7 12h10M10 18h4"/></svg>125 <span>Filter</span>126 </div>127 </div>128 129 <!-- Promo Banner -->130 <div class="banner">131 <div style="font-size:42px; font-weight:700;">Ye Hai <span class="badge">Best Value</span> Ka Badge</div>132 <div class="banner-side">[IMG: Savings Badge]</div>133 </div>134 135 <!-- Content Grid -->136 <div class="content">137 <div class="grid">138 139 <!-- Card 1 -->140 <div class="card">141 <div class="img">[IMG: Orange & Yellow Hurdle Set]</div>142 <div class="heart">143 <svg class="icon" viewBox="0 0 24 24"><path d="M12 21s-7-4.35-7-10a4 4 0 0 1 7-2 4 4 0 0 1 7 2c0 5.65-7 10-7 10z"/></svg>144 </div>145 <div class="card-body">146 <div class="brand">PEPUP</div>147 <div class="sub">PVC (Polyvinyl Chloride) Speed...</div>148 <div class="price-line">149 <span class="discount">37% off</span>150 <span class="old">₹800</span>151 <span class="new">₹499</span>152 </div>153 <div class="rating">154 <svg class="star" viewBox="0 0 24 24"><path d="M12 2l3.1 6.3 6.9 1-5 4.8L18.2 21 12 17.8 5.8 21l1.2-6.9-5-4.8 6.9-1z"/></svg>155 <svg class="star" viewBox="0 0 24 24"><path d="M12 2l3.1 6.3 6.9 1-5 4.8L18.2 21 12 17.8 5.8 21l1.2-6.9-5-4.8 6.9-1z"/></svg>156 <svg class="star" viewBox="0 0 24 24"><path d="M12 2l3.1 6.3 6.9 1-5 4.8L18.2 21 12 17.8 5.8 21l1.2-6.9-5-4.8 6.9-1z"/></svg>157 <svg class="star" viewBox="0 0 24 24"><path d="M12 2l3.1 6.3 6.9 1-5 4.8L18.2 21 12 17.8 5.8 21l1.2-6.9-5-4.8 6.9-1z"/></svg>158 <svg class="star" viewBox="0 0 24 24"><path d="M12 2l3.1 6.3 6.9 1-5 4.8L18.2 21 12 17.8 5.8 21l1.2-6.9-5-4.8 6.9-1z"/></svg>159 <span style="color:#666;">(6)</span>160 </div>161 <div class="coupon">162 <div class="left">₹40</div>163 <div class="divider"></div>164 <div class="right">Coupon available</div>165 </div>166 </div>167 </div>168 169 <!-- Card 2 -->170 <div class="card">171 <div class="img">[IMG: Yellow Folded Hurdles]</div>172 <div class="heart">173 <svg class="icon" viewBox="0 0 24 24"><path d="M12 21s-7-4.35-7-10a4 4 0 0 1 7-2 4 4 0 0 1 7 2c0 5.65-7 10-7 10z"/></svg>174 </div>175 <div class="card-body">176 <div class="brand">PEPUP</div>177 <div class="sub">PVC (Polyvinyl Chloride) Speed...</div>178 <div class="price-line">179 <span class="discount">33% off</span>180 <span class="old">₹1,099</span>181 <span class="new">₹729</span>182 </div>183 <div class="rating">184 <svg class="star" viewBox="0 0 24 24"><path d="M12 2l3.1 6.3 6.9 1-5 4.8L18.2 21 12 17.8 5.8 21l1.2-6.9-5-4.8 6.9-1z"/></svg>185 <svg class="star" viewBox="0 0 24 24"><path d="M12 2l3.1 6.3 6.9 1-5 4.8L18.2 21 12 17.8 5.8 21l1.2-6.9-5-4.8 6.9-1z"/></svg>186 <svg class="star" viewBox="0 0 24 24"><path d="M12 2l3.1 6.3 6.9 1-5 4.8L18.2 21 12 17.8 5.8 21l1.2-6.9-5-4.8 6.9-1z"/></svg>187 <svg class="star" viewBox="0 0 24 24"><path d="M12 2l3.1 6.3 6.9 1-5 4.8L18.2 21 12 17.8 5.8 21l1.2-6.9-5-4.8 6.9-1z"/></svg>188 <svg class="star" viewBox="0 0 24 24"><path d="M12 2l3.1 6.3 6.9 1-5 4.8L18.2 21 12 17.8 5.8 21l1.2-6.9-5-4.8 6.9-1z"/></svg>189 <span style="color:#666;">(40)</span>190 </div>191 <div class="coupon">192 <div class="left">₹40</div>193 <div class="divider"></div>194 <div class="right">Coupon available</div>195 </div>196 </div>197 </div>198 199 <!-- Card 3 -->200 <div class="card">201 <div class="img">[IMG: Neon Yellow Hurdle Set]</div>202 <div class="heart">203 <svg class="icon" viewBox="0 0 24 24"><path d="M12 21s-7-4.35-7-10a4 4 0 0 1 7-2 4 4 0 0 1 7 2c0 5.65-7 10-7 10z"/></svg>204 </div>205 <div class="card-body">206 <div class="brand">PEPUP</div>207 <div class="sub">PVC (Polyvinyl Chloride) Speed...</div>208 <div class="price-line">209 <span class="discount">30% off</span>210 <span class="old">₹999</span>211 <span class="new">₹699</span>212 </div>213 <div class="rating">214 <svg class="star" viewBox="0 0 24 24"><path d="M12 2l3.1 6.3 6.9 1-5 4.8L18.2 21 12 17.8 5.8 21l1.2-6.9-5-4.8 6.9-1z"/></svg>215 <svg class="star" viewBox="0 0 24 24"><path d="M12 2l3.1 6.3 6.9 1-5 4.8L18.2 21 12 17.8 5.8 21l1.2-6.9-5-4.8 6.9-1z"/></svg>216 <svg class="star" viewBox="0 0 24 24"><path d="M12 2l3.1 6.3 6.9 1-5 4.8L18.2 21 12 17.8 5.8 21l1.2-6.9-5-4.8 6.9-1z"/></svg>217 <svg class="star" viewBox="0 0 24 24"><path d="M12 2l3.1 6.3 6.9 1-5 4.8L18.2 21 12 17.8 5.8 21l1.2-6.9-5-4.8 6.9-1z"/></svg>218 <svg class="star" viewBox="0 0 24 24"><path d="M12 2l3.1 6.3 6.9 1-5 4.8L18.2 21 12 17.8 5.8 21l1.2-6.9-5-4.8 6.9-1z"/></svg>219 <span style="color:#666;">(12)</span>220 </div>221 <div class="coupon">222 <div class="left">₹40</div>223 <div class="divider"></div>224 <div class="right">Coupon available</div>225 </div>226 </div>227 </div>228 229 <!-- Card 4 -->230 <div class="card">231 <div class="img">[IMG: Yellow Hurdles Bundled]</div>232 <div class="heart">233 <svg class="icon" viewBox="0 0 24 24"><path d="M12 21s-7-4.35-7-10a4 4 0 0 1 7-2 4 4 0 0 1 7 2c0 5.65-7 10-7 10z"/></svg>234 </div>235 <div class="card-body">236 <div class="brand">PEPUP</div>237 <div class="sub">PVC (Polyvinyl Chloride) Speed...</div>238 <div class="price-line">239 <span class="discount">33% off</span>240 <span class="old">₹1,099</span>241 <span class="new">₹729</span>242 </div>243 <div class="rating">244 <svg class="star" viewBox="0 0 24 24"><path d="M12 2l3.1 6.3 6.9 1-5 4.8L18.2 21 12 17.8 5.8 21l1.2-6.9-5-4.8 6.9-1z"/></svg>245 <svg class="star" viewBox="0 0 24 24"><path d="M12 2l3.1 6.3 6.9 1-5 4.8L18.2 21 12 17.8 5.8 21l1.2-6.9-5-4.8 6.9-1z"/></svg>246 <svg class="star" viewBox="0 0 24 24"><path d="M12 2l3.1 6.3 6.9 1-5 4.8L18.2 21 12 17.8 5.8 21l1.2-6.9-5-4.8 6.9-1z"/></svg>247 <svg class="star" viewBox="0 0 24 24"><path d="M12 2l3.1 6.3 6.9 1-5 4.8L18.2 21 12 17.8 5.8 21l1.2-6.9-5-4.8 6.9-1z"/></svg>248 <svg class="star" viewBox="0 0 24 24"><path d="M12 2l3.1 6.3 6.9 1-5 4.8L18.2 21 12 17.8 5.8 21l1.2-6.9-5-4.8 6.9-1z"/></svg>249 <span style="color:#666;">(40)</span>250 </div>251 <div class="coupon">252 <div class="left">₹40</div>253 <div class="divider"></div>254 <div class="right">Coupon available</div>255 </div>256 </div>257 </div>258 259 </div>260 </div>261 262 <!-- Bottom Navigation -->263 <div class="bottom-nav">264 <div class="nav-item">265 <svg class="nav-icon" viewBox="0 0 24 24"><path d="M3 10l9-7 9 7v10H3z"/><path d="M9 21V9h6v12" stroke-width="0"/></svg>266 <div>Home</div>267 </div>268 <div class="nav-item active">269 <svg class="nav-icon" viewBox="0 0 24 24"><circle cx="11" cy="11" r="7"/><path d="M20 20l-3-3"/></svg>270 <div>Search</div>271 </div>272 <div class="nav-item">273 <svg class="nav-icon" viewBox="0 0 24 24"><path d="M4 4h7v7H4zM13 4h7v7h-7zM4 13h7v7H4zM13 13h7v7h-7z"/></svg>274 <div>Categories</div>275 </div>276 <div class="nav-item">277 <svg class="nav-icon" viewBox="0 0 24 24"><circle cx="12" cy="7" r="4"/><path d="M4 22c0-4 4-7 8-7s8 3 8 7"/></svg>278 <div>Account</div>279 </div>280 <div class="nav-item">281 <svg class="nav-icon" viewBox="0 0 24 24"><path d="M7 7h14l-2 10H7L5 4H2"/><circle cx="9" cy="20" r="1.8"/><circle cx="17" cy="20" r="1.8"/></svg>282 <div>Cart</div>283 </div>284 </div>285 286</div>287</body>288</html>