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>Amazon Search Mock</title>7<style>8 body { margin: 0; padding: 0; background: transparent; font-family: Arial, Helvetica, sans-serif; color:#222; }9 #render-target {10 width:1080px; height:2400px;11 position:relative; overflow:hidden;12 background:#F6F7F8;13 }14 15 /* Status bar */16 .status-bar {17 position:absolute; top:0; left:0; right:0; height:90px;18 padding:0 28px; display:flex; align-items:center; justify-content:space-between;19 color:#0b0b0b; font-weight:600; font-size:38px; z-index:5;20 }21 .status-right { display:flex; align-items:center; gap:24px; }22 .circle-icon { width:22px; height:22px; background:#1b1b1b; border-radius:50%; display:inline-block; }23 .dot { width:10px; height:10px; background:#4a4a4a; border-radius:50%; display:inline-block; }24 .wifi {25 width:36px; height:26px;26 }27 .battery {28 width:52px; height:26px;29 }30 31 /* Header with gradient */32 .header {33 position:absolute; top:0; left:0; right:0; height:370px;34 background: linear-gradient(180deg, #7fd6d0 0%, #b7ead8 100%);35 padding-top:98px;36 }37 .search-row { display:flex; align-items:center; gap:24px; padding:0 28px; }38 .back-btn {39 width:80px; height:80px; border-radius:40px; display:flex; align-items:center; justify-content:center;40 }41 .search-box {42 flex:1; background:#fff; height:112px; border-radius:28px; box-shadow:0 2px 0 rgba(0,0,0,0.08);43 display:flex; align-items:center; padding:0 28px; gap:22px; border:1px solid #e6e6e6;44 }45 .search-input {46 flex:1; color:#333; font-size:38px; white-space:nowrap; overflow:hidden; text-overflow:ellipsis;47 }48 .scan {49 width:70px; height:70px; border-radius:18px; border:1px solid #D0D0D0; display:flex; align-items:center; justify-content:center; color:#666; font-size:26px;50 background:#fafafa;51 }52 53 .location-row {54 margin-top:20px; padding:0 28px;55 display:flex; align-items:center; gap:18px; color:#0f1111; font-size:34px;56 }57 .chip-row {58 margin-top:24px; padding:0 28px; display:flex; align-items:center; gap:20px;59 }60 .chip { background:#ffffff; border:1px solid #e9e9e9; color:#222; padding:24px 32px; font-size:34px; border-radius:28px; }61 .filters { margin-left:auto; }62 63 .prime-toggle { display:flex; align-items:center; gap:14px; padding:16px 18px; border-radius:28px; background:#fff; border:1px solid #eee; }64 .toggle {65 width:84px; height:44px; background:#f0f0f0; border-radius:22px; position:relative; border:1px solid #ddd;66 }67 .toggle::after {68 content:""; position:absolute; top:4px; left:4px; width:36px; height:36px; background:#fff; border-radius:50%; box-shadow:0 1px 2px rgba(0,0,0,0.2);69 }70 71 /* Cards */72 .list { position:absolute; top:370px; left:0; right:0; bottom:150px; padding:24px 24px 170px; overflow:hidden; }73 .card {74 display:flex; gap:26px; background:#fff; border-radius:24px; border:1px solid #ececec; padding:22px; margin-bottom:28px;75 box-shadow:0 1px 0 rgba(0,0,0,0.03);76 }77 .img {78 width:350px; height:300px; background:#E0E0E0; border:1px solid #BDBDBD; border-radius:16px; display:flex; align-items:center; justify-content:center; color:#757575; text-align:center; font-size:28px; padding:10px;79 }80 .content { flex:1; }81 .sponsored { color:#777; font-size:28px; margin-bottom:6px; }82 .title { font-size:38px; line-height:1.2; color:#111; margin-bottom:12px; }83 .rating { display:flex; align-items:center; gap:12px; font-size:32px; color:#007185; margin:8px 0 14px; }84 .stars { display:flex; gap:4px; }85 .badge {86 display:inline-block; background:#c6432d; color:#fff; padding:12px 18px; border-radius:10px; font-weight:700; font-size:28px; margin:8px 0 14px;87 }88 .price-row { display:flex; align-items:baseline; gap:16px; margin:6px 0 10px; }89 .price { font-size:56px; font-weight:700; }90 .mrp { color:#777; font-size:30px; }91 .prime-line { display:flex; align-items:center; gap:12px; color:#0F1111; font-size:30px; }92 .prime-mark { color:#f7a800; font-weight:700; }93 .delivery { color:#555; font-size:30px; }94 95 .best-seller {96 position:absolute; background:#f89c2b; color:#fff; font-weight:700; font-size:30px; padding:10px 16px; border-radius:10px 10px 10px 0;97 left:24px; transform:translateY(-16px);98 }99 .relative { position:relative; }100 101 /* Bottom nav */102 .bottom-nav {103 position:absolute; left:0; right:0; bottom:0; height:140px; background:#ffffff; border-top:1px solid #e5e5e5;104 display:flex; align-items:center; justify-content:space-around;105 }106 .nav-item { display:flex; flex-direction:column; align-items:center; justify-content:center; gap:8px; color:#555; font-size:28px; }107 .nav-item.active { color:#0ea5a6; font-weight:700; }108 .nav-icon { width:48px; height:48px; }109 .cart-badge {110 position:absolute; right:-10px; top:-10px; background:#e53935; color:#fff; width:34px; height:34px; border-radius:50%;111 font-size:22px; display:flex; align-items:center; justify-content:center;112 }113 .cart-wrap { position:relative; }114 115 /* Gesture bar */116 .gesture {117 position:absolute; bottom:10px; left:50%; transform:translateX(-50%); width:360px; height:10px; background:#cfcfcf; border-radius:6px;118 }119</style>120</head>121<body>122<div id="render-target">123 124 <!-- Status bar -->125 <div class="status-bar">126 <div>8:59</div>127 <div class="status-right">128 <span class="circle-icon"></span>129 <svg class="nav-icon" viewBox="0 0 24 24" fill="none" stroke="#333" stroke-width="2">130 <circle cx="10" cy="10" r="4"></circle>131 </svg>132 <span class="dot"></span>133 <svg class="wifi" viewBox="0 0 24 24" fill="none" stroke="#333" stroke-width="2">134 <path d="M2 8c5-5 15-5 20 0"></path>135 <path d="M5 11c4-4 10-4 14 0"></path>136 <path d="M8 14c2.5-2.5 5.5-2.5 8 0"></path>137 <circle cx="12" cy="17.5" r="1.2" fill="#333"></circle>138 </svg>139 <svg class="battery" viewBox="0 0 28 14" xmlns="http://www.w3.org/2000/svg">140 <rect x="1" y="2" width="22" height="10" rx="2" ry="2" fill="none" stroke="#333" stroke-width="2"/>141 <rect x="3" y="4" width="14" height="6" fill="#333"/>142 <rect x="24" y="5" width="3" height="4" rx="1" fill="#333"/>143 </svg>144 </div>145 </div>146 147 <!-- Header -->148 <div class="header">149 <div class="search-row">150 <div class="back-btn">151 <svg class="nav-icon" viewBox="0 0 24 24" fill="none" stroke="#111" stroke-width="2.5">152 <path d="M15 4L7 12l8 8"></path>153 </svg>154 </div>155 <div class="search-box">156 <svg class="nav-icon" viewBox="0 0 24 24" fill="none" stroke="#111" stroke-width="2.2">157 <circle cx="10" cy="10" r="6"></circle>158 <path d="M15 15l6 6"></path>159 </svg>160 <div class="search-input">portable tool box for toolbox for h...</div>161 <div class="scan">162 <svg viewBox="0 0 24 24" width="36" height="36" stroke="#666" fill="none" stroke-width="2">163 <path d="M4 8V5a1 1 0 0 1 1-1h3"></path>164 <path d="M20 8V5a1 1 0 0 0-1-1h-3"></path>165 <path d="M4 16v3a1 1 0 0 0 1 1h3"></path>166 <path d="M20 16v3a1 1 0 0 1-1 1h-3"></path>167 </svg>168 </div>169 </div>170 </div>171 172 <div class="location-row">173 <svg class="nav-icon" viewBox="0 0 24 24" fill="none" stroke="#0b4a4a" stroke-width="2.2">174 <path d="M12 22s8-8 8-13a8 8 0 1 0-16 0c0 5 8 13 8 13z"></path>175 <circle cx="12" cy="9" r="3"></circle>176 </svg>177 <div>Delivering to Delhi 110001 - Update location</div>178 <svg class="nav-icon" viewBox="0 0 24 24" fill="none" stroke="#0b4a4a" stroke-width="2">179 <path d="M6 9l6 6 6-6"></path>180 </svg>181 </div>182 183 <div class="chip-row">184 <div class="prime-toggle">185 <span class="prime-mark">✓prime</span>186 <div class="toggle"></div>187 </div>188 <div class="chip">Tool Organisers</div>189 <div class="chip">Hand Tools</div>190 <div class="chip filters">Filters191 <svg style="width:28px;height:28px;margin-left:8px;vertical-align:middle" viewBox="0 0 24 24" fill="none" stroke="#333" stroke-width="2">192 <path d="M6 9l6 6 6-6"></path>193 </svg>194 </div>195 </div>196 </div>197 198 <!-- Product list -->199 <div class="list">200 201 <!-- Card 1 -->202 <div class="card">203 <div class="img">[IMG: Orange Metal Tool Box]</div>204 <div class="content">205 <div class="sponsored">Sponsored</div>206 <div class="title">Plantex High Grade Metal Tool Box for Tools/Tool Kit Box for Home and Garage/Tool Box...</div>207 <div class="rating">208 <span>4.3</span>209 <div class="stars">210 <svg width="30" height="30" viewBox="0 0 24 24" fill="#f59e0b"><path d="M12 2l3 6 7 1-5 5 1 7-6-3-6 3 1-7-5-5 7-1z"/></svg>211 <svg width="30" height="30" viewBox="0 0 24 24" fill="#f59e0b"><path d="M12 2l3 6 7 1-5 5 1 7-6-3-6 3 1-7-5-5 7-1z"/></svg>212 <svg width="30" height="30" viewBox="0 0 24 24" fill="#f59e0b"><path d="M12 2l3 6 7 1-5 5 1 7-6-3-6 3 1-7-5-5 7-1z"/></svg>213 <svg width="30" height="30" viewBox="0 0 24 24" fill="#f59e0b"><path d="M12 2l3 6 7 1-5 5 1 7-6-3-6 3 1-7-5-5 7-1z"/></svg>214 <svg width="30" height="30" viewBox="0 0 24 24" fill="#f59e0b" opacity="0.5"><path d="M12 2l3 6 7 1-5 5 1 7-6-3-6 3 1-7-5-5 7-1z"/></svg>215 </div>216 <span style="color:#666">(1,171)</span>217 </div>218 <div class="badge">Deal of the Day</div>219 <div class="price-row">220 <div class="price">₹2,184</div>221 <div class="mrp">M.R.P.: ₹6,335 (66% off)</div>222 </div>223 <div class="prime-line"><span class="prime-mark">✓prime</span> Get it by Friday, 8 December</div>224 <div class="delivery">FREE Delivery by Amazon</div>225 </div>226 </div>227 228 <!-- Card 2 -->229 <div class="card">230 <div class="img">[IMG: Yellow Metal Tool Box]</div>231 <div class="content">232 <div class="sponsored">Sponsored</div>233 <div class="title">PAHAL Tool Box Metal Single Compartment Portable Heavy Duty For Electrician Plumber...</div>234 <div class="rating">235 <span>3.4</span>236 <div class="stars">237 <svg width="30" height="30" viewBox="0 0 24 24" fill="#f59e0b"><path d="M12 2l3 6 7 1-5 5 1 7-6-3-6 3 1-7-5-5 7-1z"/></svg>238 <svg width="30" height="30" viewBox="0 0 24 24" fill="#f59e0b"><path d="M12 2l3 6 7 1-5 5 1 7-6-3-6 3 1-7-5-5 7-1z"/></svg>239 <svg width="30" height="30" viewBox="0 0 24 24" fill="#f59e0b"><path d="M12 2l3 6 7 1-5 5 1 7-6-3-6 3 1-7-5-5 7-1z"/></svg>240 <svg width="30" height="30" viewBox="0 0 24 24" fill="#f59e0b" opacity="0.5"><path d="M12 2l3 6 7 1-5 5 1 7-6-3-6 3 1-7-5-5 7-1z"/></svg>241 <svg width="30" height="30" viewBox="0 0 24 24" fill="#f59e0b" opacity="0.3"><path d="M12 2l3 6 7 1-5 5 1 7-6-3-6 3 1-7-5-5 7-1z"/></svg>242 </div>243 <span style="color:#666">(21)</span>244 </div>245 <div class="price-row">246 <div class="price">₹789</div>247 <div class="mrp">M.R.P.: ₹1,750 (55% off)</div>248 </div>249 <div class="delivery">Get it by Sunday, 10 December</div>250 </div>251 </div>252 253 <!-- Card 3 -->254 <div class="card relative">255 <div class="best-seller">Best seller</div>256 <div class="img">[IMG: Black & Yellow Plastic Toolbox]</div>257 <div class="content">258 <div class="title">STANLEY 1-71-948 13" Organised Maestro Heavy-Duty Portable Plastic Essential Toolbox with...</div>259 <div class="rating">260 <span>3.8</span>261 <div class="stars">262 <svg width="30" height="30" viewBox="0 0 24 24" fill="#f59e0b"><path d="M12 2l3 6 7 1-5 5 1 7-6-3-6 3 1-7-5-5 7-1z"/></svg>263 <svg width="30" height="30" viewBox="0 0 24 24" fill="#f59e0b"><path d="M12 2l3 6 7 1-5 5 1 7-6-3-6 3 1-7-5-5 7-1z"/></svg>264 <svg width="30" height="30" viewBox="0 0 24 24" fill="#f59e0b"><path d="M12 2l3 6 7 1-5 5 1 7-6-3-6 3 1-7-5-5 7-1z"/></svg>265 <svg width="30" height="30" viewBox="0 0 24 24" fill="#f59e0b" opacity="0.6"><path d="M12 2l3 6 7 1-5 5 1 7-6-3-6 3 1-7-5-5 7-1z"/></svg>266 <svg width="30" height="30" viewBox="0 0 24 24" fill="#f59e0b" opacity="0.2"><path d="M12 2l3 6 7 1-5 5 1 7-6-3-6 3 1-7-5-5 7-1z"/></svg>267 </div>268 <span style="color:#666">(5,495)</span>269 </div>270 <div class="badge" style="background:#b4372b;">Limited time deal</div>271 <div class="price-row">272 <div class="price">₹345</div>273 <div class="mrp">M.R.P.: ₹412 (16% off)</div>274 </div>275 <div class="delivery">Buy 2 Get 3% off & Buy 3 Get 5% off</div>276 <div class="prime-line" style="margin-top:6px;"><span class="prime-mark">✓prime</span> Get it by Today, 5 December</div>277 </div>278 </div>279 280 </div>281 282 <!-- Bottom navigation -->283 <div class="bottom-nav">284 <div class="nav-item active">285 <svg class="nav-icon" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">286 <path d="M3 11l9-7 9 7"></path>287 <path d="M5 10v10h14V10"></path>288 </svg>289 <div>Home</div>290 </div>291 <div class="nav-item">292 <svg class="nav-icon" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">293 <circle cx="12" cy="8" r="4"></circle>294 <path d="M4 22c2-4 6-6 8-6s6 2 8 6"></path>295 </svg>296 <div>You</div>297 </div>298 <div class="nav-item">299 <svg class="nav-icon" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">300 <rect x="3" y="3" width="7" height="7"></rect>301 <rect x="14" y="3" width="7" height="7"></rect>302 <rect x="3" y="14" width="7" height="7"></rect>303 <rect x="14" y="14" width="7" height="7"></rect>304 </svg>305 <div>More</div>306 </div>307 <div class="nav-item">308 <div class="cart-wrap">309 <svg class="nav-icon" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">310 <circle cx="9" cy="20" r="2"></circle>311 <circle cx="17" cy="20" r="2"></circle>312 <path d="M3 4h2l3 12h10l2-8H6"></path>313 </svg>314 <div class="cart-badge">1</div>315 </div>316 <div>Cart</div>317 </div>318 <div class="nav-item">319 <svg class="nav-icon" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">320 <path d="M3 6h18M3 12h18M3 18h18"></path>321 </svg>322 <div>Menu</div>323 </div>324 </div>325 <div class="gesture"></div>326 327</div>328</body>329</html>