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>Electric Lawn Mower - Shopping</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;11 position: relative; overflow: hidden;12 background: #ffffff; color: #222;13 }14 15 /* Top search area */16 .top-bar { padding: 26px 32px 18px; }17 .search-row { display: flex; align-items: center; gap: 24px; }18 .icon-btn { width: 56px; height: 56px; display: flex; align-items: center; justify-content: center; }19 .pill-input {20 flex: 1;21 height: 90px;22 border: 2px solid #CFCFCF;23 border-radius: 45px;24 display: flex; align-items: center;25 padding: 0 24px;26 }27 .pill-input .placeholder { font-size: 36px; color: #333; flex: 1; }28 .pill-input .input-icons { display: flex; gap: 24px; align-items: center; }29 30 /* Chips */31 .chips { display: flex; gap: 16px; padding: 16px 32px; flex-wrap: wrap; }32 .chip {33 display: inline-flex; align-items: center; gap: 12px;34 padding: 18px 28px; border-radius: 28px;35 background: #F1F1F1; color: #4d4d4d; font-size: 30px; border: 1px solid #E4E4E4;36 }37 .chip .small-icon { width: 30px; height: 30px; display: inline-flex; align-items: center; justify-content: center; }38 39 /* Banner */40 .benefits {41 display: flex; gap: 32px; align-items: center;42 padding: 22px 32px; background: #FBEFE1; color: #1f7a2a; font-size: 30px; border-top: 1px solid #F2D7B9; border-bottom: 1px solid #F2D7B9;43 }44 .benefit { display: inline-flex; align-items: center; gap: 14px; }45 46 /* Filter tags row */47 .tags { display: flex; gap: 16px; padding: 18px 32px; flex-wrap: wrap; }48 .tag { background: #ffffff; border: 1px solid #E0E0E0; border-radius: 28px; padding: 18px 26px; font-size: 30px; color: #333; box-shadow: 0 0 0 0 rgba(0,0,0,0); }49 .tag.dark { background: #f7f7f7; }50 51 /* Product grid */52 .grid { display: flex; flex-wrap: wrap; gap: 24px; padding: 12px 24px 120px; }53 .card {54 width: calc(50% - 24px);55 border-radius: 18px; background: #fff;56 }57 .img {58 position: relative; width: 100%; height: 420px;59 background: #E0E0E0; border: 1px solid #BDBDBD;60 display: flex; align-items: center; justify-content: center; color: #757575; font-size: 30px; text-align: center; padding: 12px;61 }62 .discount {63 position: absolute; left: 0; bottom: 0; width: 100%; height: 60px;64 background: #C62828; color: #fff; display: flex; align-items: center; gap: 12px; padding: 0 16px; font-size: 28px; font-weight: 700;65 }66 .discount span { font-weight: 600; }67 .content { padding: 16px 12px 8px; }68 .title {69 font-size: 30px; color: #222; line-height: 1.2;70 white-space: nowrap; overflow: hidden; text-overflow: ellipsis; margin-bottom: 10px;71 }72 .badge {73 display: inline-block; padding: 8px 14px; border-radius: 10px; background: #FF8C27; color: #fff; font-weight: 700; font-size: 26px; margin-bottom: 8px;74 }75 .warning { color: #ff7a00; font-size: 28px; margin: 6px 0 8px; }76 .rating { font-size: 28px; color: #000; margin: 6px 0; }77 .rating .muted { color: #666; }78 .price-row { display: flex; align-items: center; justify-content: space-between; margin-top: 8px; }79 .price { font-weight: 800; font-size: 36px; }80 .sold { color: #666; font-size: 28px; margin-left: 10px; }81 .cart-btn {82 width: 68px; height: 68px; border-radius: 34px; border: 2px solid #333;83 display: flex; align-items: center; justify-content: center;84 }85 86 /* Floating cart badge */87 .floating-cart {88 position: absolute; right: 24px; bottom: 540px;89 background: #16C35C; color: #fff; border-radius: 40px;90 display: inline-flex; align-items: center; gap: 12px;91 padding: 14px 22px; font-size: 28px; box-shadow: 0 6px 16px rgba(0,0,0,0.15);92 border: 3px solid #fff;93 }94 .floating-cart .dot {95 width: 36px; height: 36px; background: #FF8C27; color: #fff; border-radius: 18px;96 display: inline-flex; align-items: center; justify-content: center; font-weight: 800; font-size: 24px;97 position: absolute; top: -16px; right: -16px; border: 2px solid #fff;98 }99 100 /* Home indicator */101 .home-indicator {102 position: absolute; left: 50%; bottom: 24px; transform: translateX(-50%);103 width: 360px; height: 10px; background: #000; border-radius: 6px; opacity: 0.15;104 }105</style>106</head>107<body>108<div id="render-target">109 110 <!-- Search header -->111 <div class="top-bar">112 <div class="search-row">113 <div class="icon-btn">114 <svg width="40" height="40" viewBox="0 0 24 24"><path d="M15 18l-6-6 6-6" fill="none" stroke="#222" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/></svg>115 </div>116 <div class="pill-input">117 <div class="placeholder">Electric Lawn Mower</div>118 <div class="input-icons">119 <svg width="40" height="40" viewBox="0 0 24 24"><path d="M18 6L6 18M6 6l12 12" stroke="#777" stroke-width="2" stroke-linecap="round"/></svg>120 <svg width="40" height="40" viewBox="0 0 24 24">121 <rect x="3" y="7" width="18" height="12" rx="2" ry="2" fill="none" stroke="#222" stroke-width="2"/>122 <circle cx="12" cy="13" r="3.2" fill="none" stroke="#222" stroke-width="2"/>123 <path d="M8 6l1-2h6l1 2" fill="none" stroke="#222" stroke-width="2"/>124 </svg>125 </div>126 </div>127 </div>128 </div>129 130 <!-- Chips row -->131 <div class="chips">132 <div class="chip">133 <span class="small-icon">134 <svg width="26" height="26" viewBox="0 0 24 24"><path d="M3 5h18M6 10h12M9 15h6" stroke="#666" stroke-width="2" stroke-linecap="round"/></svg>135 </span>136 Filters137 </div>138 <div class="chip">Sort by</div>139 <div class="chip">Category</div>140 <div class="chip">Color</div>141 <div class="chip">Power Source</div>142 </div>143 144 <!-- Benefit banner -->145 <div class="benefits">146 <div class="benefit">147 <svg width="32" height="32" viewBox="0 0 24 24"><path d="M20 6l-11 11-5-5" fill="none" stroke="#1f7a2a" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/></svg>148 Free shipping149 </div>150 <div class="benefit">151 <svg width="32" height="32" viewBox="0 0 24 24"><path d="M20 6l-11 11-5-5" fill="none" stroke="#1f7a2a" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/></svg>152 Price adjustment within 30 days153 </div>154 </div>155 156 <!-- Tags -->157 <div class="tags">158 <div class="tag">★★★★★ & up</div>159 <div class="tag dark">Mowers & Outdoor Power Tools</div>160 <div class="tag">Black</div>161 <div class="tag">On Sale</div>162 </div>163 164 <!-- Product grid -->165 <div class="grid">166 167 <!-- Card 1 -->168 <div class="card">169 <div class="img">[IMG: Person using electric lawn trimmer in garden]170 <div class="discount"><span>CHRISTMAS</span> 44% off discount</div>171 </div>172 <div class="content">173 <div class="title">Rechargeable Electric Lawn Mower Trimmer</div>174 <div class="badge">Only 3 Left</div>175 <div class="rating">★★★★★ <span class="muted">(8)</span></div>176 <div class="price-row">177 <div>178 <span class="price">10,98€</span>179 <span class="sold">8 sold</span>180 </div>181 <div class="cart-btn">182 <svg width="32" height="32" viewBox="0 0 24 24"><path d="M5 6h14l-2 8H7L5 6z" fill="none" stroke="#222" stroke-width="2"/><circle cx="9" cy="19" r="1.8" /><circle cx="17" cy="19" r="1.8" /></svg>183 </div>184 </div>185 </div>186 </div>187 188 <!-- Card 2 -->189 <div class="card">190 <div class="img">[IMG: Lawn mower auxiliary wheel assistive tools on grass]191 <div class="discount"><span>CHRISTMAS</span> 33% off discount</div>192 </div>193 <div class="content">194 <div class="title">1 Set, Lawn Mower Auxiliary Wheels</div>195 <div class="warning">Almost sold out</div>196 <div class="rating">★★★★☆ <span class="muted">(3.439)</span></div>197 <div class="price-row">198 <div>199 <span class="price">22,28€</span>200 <span class="sold">1.2K+ sold</span>201 </div>202 <div class="cart-btn">203 <svg width="32" height="32" viewBox="0 0 24 24"><path d="M5 6h14l-2 8H7L5 6z" fill="none" stroke="#222" stroke-width="2"/><circle cx="9" cy="19" r="1.8" /><circle cx="17" cy="19" r="1.8" /></svg>204 </div>205 </div>206 </div>207 </div>208 209 <!-- Card 3 -->210 <div class="card">211 <div class="img">[IMG: Grinding wheel sharpening lawn mower blade]212 <div class="discount"><span>CHRISTMAS</span> 36% off discount</div>213 </div>214 <div class="content">215 <div class="title">Electric Lawn Mower Knife Sharpener</div>216 <div class="badge">Only 5 Left</div>217 <div class="rating">★★★★★ <span class="muted">(19.487)</span> <span class="muted">just bought</span></div>218 <div class="price-row">219 <div>220 <span class="price">3,18€</span>221 <span class="sold">169 sold</span>222 </div>223 <div class="cart-btn">224 <svg width="32" height="32" viewBox="0 0 24 24"><path d="M5 6h14l-2 8H7L5 6z" fill="none" stroke="#222" stroke-width="2"/><circle cx="9" cy="19" r="1.8" /><circle cx="17" cy="19" r="1.8" /></svg>225 </div>226 </div>227 </div>228 </div>229 230 <!-- Card 4 -->231 <div class="card">232 <div class="img">[IMG: Drill-driven grinding wheel sharpener set]233 <div class="discount"><span>CHRISTMAS</span> 35% off discount</div>234 </div>235 <div class="content">236 <div class="title">Electric Lawn Mower Knife Sharpener Set</div>237 <div class="badge">Only 2 Left</div>238 <div class="rating">★★★★★ <span class="muted">(14.862)</span></div>239 <div class="price-row">240 <div>241 <span class="price">2,69€</span>242 <span class="sold">13 sold</span>243 </div>244 <div class="cart-btn">245 <svg width="32" height="32" viewBox="0 0 24 24"><path d="M5 6h14l-2 8H7L5 6z" fill="none" stroke="#222" stroke-width="2"/><circle cx="9" cy="19" r="1.8" /><circle cx="17" cy="19" r="1.8" /></svg>246 </div>247 </div>248 </div>249 </div>250 251 <!-- Start of next row preview (as seen at bottom of screenshot) -->252 <div class="card">253 <div class="img">[IMG: Green field with daisies outdoors]</div>254 <div class="content">255 <div class="title">Outdoor Lawn Care Accessories</div>256 <div class="rating">★★★★☆ <span class="muted">(2.1K)</span></div>257 <div class="price-row">258 <div>259 <span class="price">9,99€</span>260 </div>261 <div class="cart-btn">262 <svg width="32" height="32" viewBox="0 0 24 24"><path d="M5 6h14l-2 8H7L5 6z" fill="none" stroke="#222" stroke-width="2"/><circle cx="9" cy="19" r="1.8" /><circle cx="17" cy="19" r="1.8" /></svg>263 </div>264 </div>265 </div>266 </div>267 268 <div class="card">269 <div class="img">[IMG: AUXILIARY WHEELS - lawnmower universal banner]</div>270 <div class="content">271 <div class="title">Auxiliary Wheels - Lawnmower Universal</div>272 <div class="rating">★★★★☆ <span class="muted">(1.8K)</span></div>273 <div class="price-row">274 <div>275 <span class="price">15,50€</span>276 </div>277 <div class="cart-btn">278 <svg width="32" height="32" viewBox="0 0 24 24"><path d="M5 6h14l-2 8H7L5 6z" fill="none" stroke="#222" stroke-width="2"/><circle cx="9" cy="19" r="1.8" /><circle cx="17" cy="19" r="1.8" /></svg>279 </div>280 </div>281 </div>282 </div>283 284 </div>285 286 <!-- Floating cart with free shipping -->287 <div class="floating-cart">288 <svg width="30" height="30" viewBox="0 0 24 24"><path d="M5 6h14l-2 8H7L5 6z" fill="none" stroke="#fff" stroke-width="2"/><circle cx="9" cy="19" r="1.8" fill="#fff"/><circle cx="17" cy="19" r="1.8" fill="#fff"/></svg>289 Cart290 <span style="background:#fff;color:#16C35C;border-radius:14px;padding:6px 10px;font-weight:700;">Free Shipping</span>291 <div class="dot">1</div>292 </div>293 294 <!-- Home indicator -->295 <div class="home-indicator"></div>296 297</div>298</body>299</html>