GD-ML/AndroidCode
13.4k
1<html lang="en">2<head>3<meta charset="UTF-8">4<title>Amazon Search - Asian Shoes for Men</title>5<meta name="viewport" content="width=1080, initial-scale=1.0">6<style>7 body { margin: 0; padding: 0; background: transparent; font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; }8 #render-target {9 width: 1080px;10 height: 2400px;11 position: relative;12 overflow: hidden;13 background: linear-gradient(180deg, #b7e7df 0%, #c6ece6 20%, #f6f7f8 20%, #f6f7f8 100%);14 }15 16 /* Common */17 .row { display: flex; align-items: center; }18 .spacer { flex: 1; }19 .pill {20 display: inline-flex;21 align-items: center;22 padding: 18px 28px;23 border: 1px solid #d7d7d7;24 border-radius: 32px;25 background: #fff;26 font-size: 36px;27 color: #2b2b2b;28 margin-right: 18px;29 }30 .muted { color: #666; }31 .small { font-size: 28px; }32 .tiny { font-size: 24px; }33 34 /* Status bar */35 .status-bar {36 position: absolute;37 top: 0;38 left: 0;39 height: 90px;40 width: 100%;41 padding: 0 28px;42 color: #222;43 font-size: 40px;44 display: flex;45 align-items: center;46 }47 .status-icons svg { width: 44px; height: 44px; margin-left: 22px; }48 49 /* Search area */50 .search-area {51 position: absolute;52 top: 90px;53 left: 24px;54 right: 24px;55 }56 .search-bar {57 background: #fff;58 border-radius: 22px;59 height: 120px;60 box-shadow: 0 2px 0 rgba(0,0,0,0.04);61 display: flex;62 align-items: center;63 padding: 0 26px;64 }65 .search-input {66 flex: 1;67 margin: 0 20px;68 height: 84px;69 border-radius: 16px;70 background: #f2f3f5;71 display: flex;72 align-items: center;73 padding: 0 24px;74 color: #333;75 font-size: 40px;76 }77 .search-input .placeholder { color: #1a1a1a; }78 .cam-btn {79 width: 94px; height: 94px; border-radius: 50%;80 border: 2px solid #d9d9d9; display: flex; align-items: center; justify-content: center;81 background: #fff;82 }83 .cam-btn svg { width: 50px; height: 50px; }84 85 /* Location */86 .location-row {87 margin-top: 22px;88 height: 80px;89 display: flex;90 align-items: center;91 padding: 0 8px;92 color: #202223;93 font-size: 34px;94 }95 .location-row svg { width: 40px; height: 40px; margin-right: 16px; }96 .location-row .update { color: #0f766e; margin-left: 10px; }97 98 /* Chips */99 .chip-row {100 margin-top: 28px;101 display: flex;102 align-items: center;103 padding-bottom: 10px;104 border-bottom: 1px solid #e7e7e7;105 }106 .prime-toggle {107 width: 120px; height: 64px; border-radius: 32px; border: 2px solid #d5d5d5; position: relative; margin-right: 22px; background: #fff;108 }109 .prime-toggle::before {110 content: ""; position: absolute; top: 4px; left: 4px; width: 54px; height: 54px; border-radius: 50%; background: #eee; border: 1px solid #cfcfcf;111 }112 113 /* Info text */114 .info-text {115 margin: 26px 8px;116 font-size: 34px;117 color: #5a5a5a;118 }119 120 /* Product grid */121 .grid {122 display: flex;123 padding: 0 24px;124 }125 .card {126 width: 504px;127 margin-right: 24px;128 background: #fff;129 border-radius: 16px;130 }131 .img-box {132 width: 100%;133 height: 540px;134 background: #E0E0E0;135 border: 1px solid #BDBDBD;136 color: #757575;137 display: flex;138 align-items: center;139 justify-content: center;140 font-size: 34px;141 border-top-left-radius: 16px;142 border-top-right-radius: 16px;143 position: relative;144 }145 .best-seller {146 position: absolute;147 top: 20px; left: 20px;148 background: #f59e0b;149 color: #fff;150 padding: 10px 22px;151 border-radius: 12px;152 font-weight: 600;153 font-size: 30px;154 }155 .circle-badge {156 position: absolute;157 bottom: 26px; right: 26px;158 display: flex; align-items: center;159 gap: 10px;160 }161 .circle-badge .dot {162 width: 40px; height: 40px; border-radius: 20px; background: #2c2c2c; border: 3px solid #cfcfcf;163 }164 .circle-badge .count {165 background: #ececec; color: #333; border: 1px solid #cfcfcf; padding: 6px 14px; border-radius: 20px; font-size: 28px;166 }167 168 .content {169 padding: 22px;170 }171 .sponsored { color: #7a7a7a; font-size: 28px; margin-bottom: 8px; }172 .brand { font-size: 44px; font-weight: 800; margin-bottom: 8px; }173 .title { font-size: 36px; color: #2b2b2b; margin-bottom: 14px; }174 .rating-row { display: flex; align-items: center; gap: 8px; margin-bottom: 10px; }175 .rating-row .score { color: #0d9488; font-weight: 700; font-size: 34px; }176 .stars svg { width: 32px; height: 32px; }177 .count { color: #5a5a5a; font-size: 30px; margin-left: 8px; }178 179 .price-row { display: flex; align-items: baseline; gap: 12px; margin: 12px 0; }180 .price { font-size: 52px; font-weight: 800; }181 .mrp { color: #5a5a5a; font-size: 32px; text-decoration: line-through; }182 .off { color: #2b2b2b; font-size: 32px; }183 184 .deal-note { font-size: 30px; color: #333; margin: 8px 0 18px; }185 .prime-badge { display: inline-flex; align-items: center; gap: 10px; font-weight: 700; color: #0e62ff; margin: 16px 0 8px; }186 .prime-badge svg { width: 28px; height: 28px; }187 .delivery { font-size: 34px; color: #3b3b3b; margin-top: 8px; }188 189 /* Bottom nav */190 .bottom-nav {191 position: absolute;192 bottom: 0; left: 0; right: 0;193 height: 160px;194 background: #fff;195 border-top: 1px solid #e1e1e1;196 display: flex;197 align-items: center; justify-content: space-around;198 }199 .nav-item { display: flex; flex-direction: column; align-items: center; font-size: 34px; color: #222; }200 .nav-item svg { width: 64px; height: 64px; }201 .badge {202 position: absolute;203 top: -6px; right: -12px;204 background: #0f766e; color: #fff; font-size: 28px; border-radius: 16px; padding: 4px 10px;205 }206 207 /* Minor */208 .gray-note { color: #6a6a6a; font-size: 30px; }209 210</style>211</head>212<body>213<div id="render-target">214 215 <!-- Status Bar -->216 <div class="status-bar">217 <div>4:13</div>218 <div class="spacer"></div>219 <div class="status-icons row">220 <!-- Simple status icons -->221 <svg viewBox="0 0 24 24"><circle cx="12" cy="12" r="10" fill="#111"/></svg>222 <svg viewBox="0 0 24 24"><rect x="3" y="8" width="18" height="8" fill="#111"/></svg>223 <svg viewBox="0 0 24 24"><path d="M3 11h18v2H3z" fill="#111"/></svg>224 <svg viewBox="0 0 24 24"><path d="M4 8h14v8H4z" stroke="#111" fill="none"/><rect x="19" y="10" width="3" height="4" fill="#111"/></svg>225 </div>226 </div>227 228 <!-- Search Area -->229 <div class="search-area">230 <div class="search-bar">231 <!-- Back arrow -->232 <svg viewBox="0 0 24 24" width="56" height="56">233 <path d="M15 5l-8 7 8 7" stroke="#222" stroke-width="2" fill="none" stroke-linecap="round" stroke-linejoin="round"/>234 </svg>235 <div class="search-input">236 <span class="placeholder">asian shoes for men</span>237 </div>238 <div class="cam-btn">239 <svg viewBox="0 0 24 24">240 <rect x="5" y="8" width="14" height="10" rx="2" fill="#333"/>241 <circle cx="12" cy="13" r="3" fill="#fff"/>242 </svg>243 </div>244 </div>245 246 <!-- Location Row -->247 <div class="location-row">248 <svg viewBox="0 0 24 24">249 <path d="M12 2a7 7 0 0 1 7 7c0 5-7 13-7 13S5 14 5 9a7 7 0 0 1 7-7z" fill="#222"/>250 <circle cx="12" cy="9" r="3" fill="#fff"/>251 </svg>252 <span>Delivering to Mohali 160071 -</span>253 <span class="update">Update location</span>254 <svg viewBox="0 0 24 24" style="margin-left:8px;"><path d="M7 10l5 5 5-5" stroke="#0f766e" stroke-width="2" fill="none"/></svg>255 </div>256 257 <!-- Chips -->258 <div class="chip-row">259 <div class="row pill" style="padding:14px 20px; background:#f9fafb;">260 <svg viewBox="0 0 24 24" width="28" height="28">261 <path d="M3 12h14" stroke="#0e62ff" stroke-width="2"/>262 <rect x="3" y="10" width="14" height="4" fill="#0e62ff"/>263 </svg>264 <span style="margin-left:10px; color:#0e62ff; font-weight:700;">prime</span>265 <div class="prime-toggle" style="margin-left:16px;"></div>266 </div>267 <div class="pill">Lace-Up</div>268 <div class="pill">Men's Running ...</div>269 <div class="pill">Filters (2)270 <svg viewBox="0 0 24 24" style="margin-left:8px; width:28px; height:28px;"><path d="M7 10l5 5 5-5" stroke="#222" stroke-width="2" fill="none"/></svg>271 </div>272 </div>273 274 <div class="info-text">Price and other details may vary based on product size and colour.</div>275 </div>276 277 <!-- Product Grid -->278 <div class="grid" style="margin-top: 500px;">279 <!-- Left Card -->280 <div class="card">281 <div class="img-box">282 [IMG: Black Road Jog Running Shoe]283 </div>284 <div class="content">285 <div class="sponsored">Sponsored</div>286 <div class="brand">ASICS</div>287 <div class="title">Men's Road Jog Running Shoes</div>288 289 <div class="rating-row">290 <div class="score">4.1</div>291 <div class="stars">292 <svg viewBox="0 0 24 24"><path d="M12 2l3 7 7 1-5 5 1 7-6-3-6 3 1-7-5-5 7-1z" fill="#f59e0b"/></svg>293 <svg viewBox="0 0 24 24"><path d="M12 2l3 7 7 1-5 5 1 7-6-3-6 3 1-7-5-5 7-1z" fill="#f59e0b"/></svg>294 <svg viewBox="0 0 24 24"><path d="M12 2l3 7 7 1-5 5 1 7-6-3-6 3 1-7-5-5 7-1z" fill="#f59e0b"/></svg>295 <svg viewBox="0 0 24 24"><path d="M12 2l3 7 7 1-5 5 1 7-6-3-6 3 1-7-5-5 7-1z" fill="#f59e0b"/></svg>296 <svg viewBox="0 0 24 24"><path d="M12 2l3 7 7 1-5 5 1 7-6-3-6 3 1-7-5-5 7-1z" fill="#ddd"/></svg>297 </div>298 <div class="count">(1,459)</div>299 </div>300 301 <div class="price-row">302 <div class="price">₹2,789</div>303 <div class="mrp">M.R.P: ₹4,499</div>304 <div class="off">(38% off)</div>305 </div>306 307 <div class="gray-note">Buy for ₹2,510 with OneCard c...</div>308 309 <div class="prime-badge">310 <svg viewBox="0 0 24 24"><path d="M3 12h14" stroke="#0e62ff" stroke-width="2"/><rect x="3" y="10" width="14" height="4" fill="#0e62ff"/></svg>311 <span>prime</span>312 </div>313 <div class="delivery">FREE Delivery by Amazon</div>314 </div>315 </div>316 317 <!-- Right Card -->318 <div class="card" style="margin-right:0;">319 <div class="img-box">320 <div class="best-seller">Best seller</div>321 [IMG: Grey & Teal Men's Running Shoe]322 <div class="circle-badge">323 <div class="dot"></div>324 <div class="count">13</div>325 </div>326 </div>327 <div class="content">328 <div class="brand">ASIAN</div>329 <div class="title">Men's Running Shoes</div>330 331 <div class="rating-row">332 <div class="score">3.9</div>333 <div class="stars">334 <svg viewBox="0 0 24 24"><path d="M12 2l3 7 7 1-5 5 1 7-6-3-6 3 1-7-5-5 7-1z" fill="#f59e0b"/></svg>335 <svg viewBox="0 0 24 24"><path d="M12 2l3 7 7 1-5 5 1 7-6-3-6 3 1-7-5-5 7-1z" fill="#f59e0b"/></svg>336 <svg viewBox="0 0 24 24"><path d="M12 2l3 7 7 1-5 5 1 7-6-3-6 3 1-7-5-5 7-1z" fill="#f59e0b"/></svg>337 <svg viewBox="0 0 24 24"><path d="M12 2l3 7 7 1-5 5 1 7-6-3-6 3 1-7-5-5 7-1z" fill="#f59e0b"/></svg>338 <svg viewBox="0 0 24 24"><path d="M12 2l3 7 7 1-5 5 1 7-6-3-6 3 1-7-5-5 7-1z" fill="#ddd"/></svg>339 </div>340 <div class="count">(92,984)</div>341 </div>342 343 <div class="price-row">344 <div class="price">₹589</div>345 <div class="mrp">M.R.P: ₹699</div>346 <div class="off">(16% off)</div>347 </div>348 349 <div class="prime-badge">350 <svg viewBox="0 0 24 24"><path d="M3 12h14" stroke="#0e62ff" stroke-width="2"/><rect x="3" y="10" width="14" height="4" fill="#0e62ff"/></svg>351 <span>prime</span>352 </div>353 <div class="delivery">FREE Delivery by Amazon</div>354 </div>355 </div>356 </div>357 358 <!-- Second row previews to hint scroll (placeholders) -->359 <div class="grid" style="margin-top: 24px;">360 <div class="card">361 <div class="img-box">[IMG: Running Shoe - Grey/Blue]</div>362 </div>363 <div class="card" style="margin-right:0;">364 <div class="img-box">[IMG: Running Shoe - Green Accent]</div>365 </div>366 </div>367 368 <!-- Bottom Navigation -->369 <div class="bottom-nav">370 <div class="nav-item">371 <svg viewBox="0 0 24 24">372 <path d="M3 12l9-8 9 8v8H3z" fill="#222"/>373 </svg>374 <div>Home</div>375 </div>376 <div class="nav-item">377 <svg viewBox="0 0 24 24">378 <circle cx="12" cy="7" r="4" fill="#222"/>379 <rect x="6" y="12" width="12" height="8" rx="4" fill="#222"/>380 </svg>381 <div>You</div>382 </div>383 <div class="nav-item">384 <svg viewBox="0 0 24 24">385 <path d="M3 6h18v4H3zM3 14h18v4H3z" fill="#222"/>386 </svg>387 <div>More</div>388 </div>389 <div class="nav-item" style="position:relative;">390 <svg viewBox="0 0 24 24">391 <path d="M6 6h14l-2 10H8L6 6z" fill="#222"/>392 <circle cx="9" cy="20" r="2" fill="#222"/>393 <circle cx="17" cy="20" r="2" fill="#222"/>394 </svg>395 <div class="badge">2</div>396 <div>Cart</div>397 </div>398 <div class="nav-item">399 <svg viewBox="0 0 24 24">400 <path d="M4 6h16M4 12h16M4 18h16" stroke="#222" stroke-width="2" stroke-linecap="round"/>401 </svg>402 <div>Menu</div>403 </div>404 </div>405 406</div>407</body>408</html>