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>Mock - Amazon Search Results</title>7<style>8 body { margin: 0; padding: 0; background: transparent; }9 * { box-sizing: border-box; font-family: Arial, Helvetica, sans-serif; }10 11 #render-target {12 position: relative;13 overflow: hidden;14 width: 1080px;15 height: 2400px;16 background: #ffffff;17 }18 19 /* Top gradient header */20 .header {21 position: relative;22 width: 100%;23 height: 250px;24 background: linear-gradient(180deg, #90e0d8 0%, #a2e7df 100%);25 padding: 20px 28px;26 }27 .status {28 display: flex;29 justify-content: space-between;30 align-items: center;31 color: #1f2a2e;32 font-size: 40px;33 padding: 10px 4px 0 0;34 }35 .status-icons {36 display: flex; gap: 20px; align-items: center;37 }38 .icon { width: 44px; height: 44px; }39 40 .search-row {41 position: absolute;42 left: 28px;43 right: 28px;44 top: 112px;45 display: flex;46 align-items: center;47 gap: 20px;48 }49 .back-btn {50 width: 64px; height: 64px; display: flex; align-items: center; justify-content: center;51 }52 .searchbar {53 flex: 1;54 height: 100px;55 background: #ffffff;56 border-radius: 22px;57 box-shadow: 0 4px 10px rgba(0,0,0,0.12);58 display: flex; align-items: center; padding: 0 28px; gap: 18px;59 }60 .search-text { font-size: 42px; color: #333; }61 .scan-btn {62 margin-left: auto;63 width: 72px; height: 72px; border-radius: 16px;64 border: 1px solid #d0d0d0; display: flex; align-items: center; justify-content: center;65 background: #fff;66 }67 68 /* Tabs */69 .tabs {70 position: relative;71 width: 100%;72 height: 118px;73 background: #ffffff;74 border-top: 1px solid #e9e9e9;75 border-bottom: 1px solid #ececec;76 display: flex; align-items: center; justify-content: space-around;77 color: #1f2a2e;78 font-size: 44px;79 }80 .tabs .up {81 position: absolute; right: 24px;82 }83 84 /* Horizontal deals scroller */85 .deal-strip {86 padding: 24px 0 4px 24px;87 overflow-x: auto;88 display: flex; gap: 34px;89 border-bottom: 1px solid #f0f0f0;90 }91 .deal-card {92 min-width: 320px;93 max-width: 320px;94 }95 .img-ph {96 width: 100%;97 height: 180px;98 background: #E0E0E0;99 border: 1px solid #BDBDBD;100 color: #757575;101 display: flex; align-items: center; justify-content: center;102 font-size: 28px;103 }104 .title-sm {105 margin: 10px 0 6px;106 color: #007185;107 font-size: 34px; line-height: 1.2;108 }109 .stars { display: flex; align-items: center; gap: 6px; }110 .reviews { color: #666; font-size: 28px; margin-left: 8px; }111 .badge {112 display: inline-block; background: #b43615; color: #fff; padding: 10px 14px; border-radius: 6px;113 font-size: 28px; margin: 10px 0;114 }115 .price-row { display: flex; align-items: center; gap: 10px; }116 .price { color: #b12704; font-weight: bold; font-size: 40px; }117 .prime { color: #1a98ff; font-size: 30px; }118 .strike { color: #8b8b8b; text-decoration: line-through; font-size: 28px; }119 120 /* Recommendation section */121 .section {122 padding: 28px;123 }124 .section h2 {125 font-size: 56px; margin: 18px 0; color: #111; line-height: 1.15;126 }127 .grid {128 display: grid;129 grid-template-columns: 1fr 1fr;130 gap: 28px;131 }132 .prod-card {133 background: #fff;134 }135 .img-large {136 width: 100%;137 height: 520px;138 border-radius: 24px;139 background: #E0E0E0;140 border: 1px solid #BDBDBD;141 color: #757575;142 display: flex; align-items: center; justify-content: center;143 font-size: 36px;144 }145 .prod-title {146 color: #007185; font-size: 44px; margin: 18px 6px 10px;147 }148 .rating-row { display: flex; align-items: center; gap: 8px; margin: 0 6px 10px; }149 .count { color: #666; font-size: 32px; }150 .prod-price { font-size: 48px; color: #111; font-weight: 700; margin: 0 6px 6px; }151 152 /* Bottom nav */153 .bottom-nav {154 position: absolute; left: 0; right: 0; bottom: 0;155 height: 160px; background: #ffffff; border-top: 1px solid #e5e5e5;156 display: flex; justify-content: space-around; align-items: center;157 }158 .nav-item { display: flex; flex-direction: column; align-items: center; gap: 6px; color: #222; font-size: 28px; }159 .nav-item.active { color: #0a7c7d; }160 .gesture {161 position: absolute; left: 50%; transform: translateX(-50%);162 bottom: 18px; width: 280px; height: 10px; border-radius: 8px; background: #cfcfcf;163 }164</style>165</head>166<body>167<div id="render-target">168 169 <!-- Header -->170 <div class="header">171 <div class="status">172 <div>3:48</div>173 <div class="status-icons">174 <!-- WiFi -->175 <svg class="icon" viewBox="0 0 24 24" fill="#223">176 <path d="M12 18.5a1.5 1.5 0 1 0 0 3 1.5 1.5 0 0 0 0-3Zm0-4.5c-2 0-3.9.8-5.3 2.2l1.4 1.4C9.1 16.9 10.5 16.3 12 16.3c1.5 0 2.9.6 3.9 1.8l1.4-1.4C15.9 14.8 14 14 12 14Zm0-4.5c-3.7 0-7.1 1.4-9.7 4l1.4 1.4C5.9 13.3 8.8 12.1 12 12.1c3.2 0 6.1 1.2 8.3 3.4l1.4-1.4c-2.6-2.6-6-4-9.7-4Z"/>177 </svg>178 <!-- Battery -->179 <svg class="icon" viewBox="0 0 24 24" fill="#223">180 <path d="M2 8a2 2 0 0 1 2-2h13a2 2 0 0 1 2 2v8a2 2 0 0 1-2 2H4a2 2 0 0 1-2-2V8Zm19 3h2v2h-2v-2Z"/>181 </svg>182 </div>183 </div>184 185 <div class="search-row">186 <div class="back-btn">187 <svg class="icon" viewBox="0 0 24 24" fill="#1b1b1b">188 <path d="M15.5 3.5 7 12l8.5 8.5 1.5-1.5L10 12l7-7-1.5-1.5Z"/>189 </svg>190 </div>191 <div class="searchbar">192 <svg class="icon" viewBox="0 0 24 24" fill="#222">193 <path d="M10 2a8 8 0 1 0 5.3 14l4.8 4.8 1.4-1.4-4.8-4.8A8 8 0 0 0 10 2Zm0 2.5a5.5 5.5 0 1 1 0 11 5.5 5.5 0 0 1 0-11Z"/>194 </svg>195 <div class="search-text">chair</div>196 <div class="scan-btn">197 <svg class="icon" viewBox="0 0 24 24" fill="#333">198 <path d="M4 4h6v2H6v4H4V4Zm10 0h6v6h-2V6h-4V4ZM4 14h2v4h4v2H4v-6Zm14 0h2v6h-6v-2h4v-4Z"/>199 </svg>200 </div>201 </div>202 </div>203 </div>204 205 <!-- Tabs -->206 <div class="tabs">207 <div>Details</div>208 <div>Compare</div>209 <div>Reviews</div>210 <div class="up">211 <svg class="icon" viewBox="0 0 24 24" fill="#111">212 <path d="M12 7 5 14l1.5 1.5L12 10l5.5 5.5L19 14 12 7Z"/>213 </svg>214 </div>215 </div>216 217 <!-- Horizontal deals -->218 <div class="deal-strip">219 <div class="deal-card">220 <div class="img-ph">[IMG: Product]</div>221 <div class="title-sm">amazon basics Padded, Zero-Gravi...</div>222 <div class="stars">223 <svg width="32" height="32" viewBox="0 0 24 24" fill="#f59a23"><path d="m12 2 2.6 6.1 6.6.6-5 4.1 1.6 6.3L12 16l-5.8 3.1 1.6-6.3-5-4.1 6.6-.6L12 2z"/></svg>224 <svg width="32" height="32" viewBox="0 0 24 24" fill="#f59a23"><path d="m12 2 2.6 6.1 6.6.6-5 4.1 1.6 6.3L12 16l-5.8 3.1 1.6-6.3-5-4.1 6.6-.6L12 2z"/></svg>225 <svg width="32" height="32" viewBox="0 0 24 24" fill="#f59a23"><path d="m12 2 2.6 6.1 6.6.6-5 4.1 1.6 6.3L12 16l-5.8 3.1 1.6-6.3-5-4.1 6.6-.6L12 2z"/></svg>226 <svg width="32" height="32" viewBox="0 0 24 24" fill="#f59a23"><path d="m12 2 2.6 6.1 6.6.6-5 4.1 1.6 6.3L12 16l-5.8 3.1 1.6-6.3-5-4.1 6.6-.6L12 2z"/></svg>227 <svg width="32" height="32" viewBox="0 0 24 24" fill="#ccc"><path d="m12 2 2.6 6.1 6.6.6-5 4.1 1.6 6.3L12 16l-5.8 3.1 1.6-6.3-5-4.1 6.6-.6L12 2z"/></svg>228 <span class="reviews">1017 reviews</span>229 </div>230 <div class="badge">Deal of the Day</div>231 <div class="price-row">232 <div class="price">₹7,999</div><div class="prime">prime</div>233 </div>234 <div class="strike">₹9,500 (16% off)</div>235 </div>236 237 <div class="deal-card">238 <div class="img-ph">[IMG: Mattress]</div>239 <div class="title-sm">The Sleep Company SmartGRID Styl...</div>240 <div class="stars">241 <svg width="32" height="32" viewBox="0 0 24 24" fill="#f59a23"><path d="m12 2 2.6 6.1 6.6.6-5 4.1 1.6 6.3L12 16l-5.8 3.1 1.6-6.3-5-4.1 6.6-.6L12 2z"/></svg>242 <svg width="32" height="32" viewBox="0 0 24 24" fill="#f59a23"><path d="m12 2 2.6 6.1 6.6.6-5 4.1 1.6 6.3L12 16l-5.8 3.1 1.6-6.3-5-4.1 6.6-.6L12 2z"/></svg>243 <svg width="32" height="32" viewBox="0 0 24 24" fill="#f59a23"><path d="m12 2 2.6 6.1 6.6.6-5 4.1 1.6 6.3L12 16l-5.8 3.1 1.6-6.3-5-4.1 6.6-.6L12 2z"/></svg>244 <svg width="32" height="32" viewBox="0 0 24 24" fill="#f59a23"><path d="m12 2 2.6 6.1 6.6.6-5 4.1 1.6 6.3L12 16l-5.8 3.1 1.6-6.3-5-4.1 6.6-.6L12 2z"/></svg>245 <svg width="32" height="32" viewBox="0 0 24 24" fill="#ccc"><path d="m12 2 2.6 6.1 6.6.6-5 4.1 1.6 6.3L12 16l-5.8 3.1 1.6-6.3-5-4.1 6.6-.6L12 2z"/></svg>246 <span class="reviews">1006 reviews</span>247 </div>248 <div class="badge">Deal of the Day</div>249 <div class="price-row">250 <div class="price">₹17,999</div><div class="prime">prime</div>251 </div>252 <div class="strike">₹35,999 (50% off)</div>253 </div>254 255 <div class="deal-card">256 <div class="img-ph">[IMG: Office Chair]</div>257 <div class="title-sm">CELLBELL C104 Mesh...</div>258 <div class="stars">259 <svg width="32" height="32" viewBox="0 0 24 24" fill="#f59a23"><path d="m12 2 2.6 6.1 6.6.6-5 4.1 1.6 6.3L12 16l-5.8 3.1 1.6-6.3-5-4.1 6.6-.6L12 2z"/></svg>260 <svg width="32" height="32" viewBox="0 0 24 24" fill="#f59a23"><path d="m12 2 2.6 6.1 6.6.6-5 4.1 1.6 6.3L12 16l-5.8 3.1 1.6-6.3-5-4.1 6.6-.6L12 2z"/></svg>261 <svg width="32" height="32" viewBox="0 0 24 24" fill="#f59a23"><path d="m12 2 2.6 6.1 6.6.6-5 4.1 1.6 6.3L12 16l-5.8 3.1 1.6-6.3-5-4.1 6.6-.6L12 2z"/></svg>262 <svg width="32" height="32" viewBox="0 0 24 24" fill="#f59a23"><path d="m12 2 2.6 6.1 6.6.6-5 4.1 1.6 6.3L12 16l-5.8 3.1 1.6-6.3-5-4.1 6.6-.6L12 2z"/></svg>263 <svg width="32" height="32" viewBox="0 0 24 24" fill="#ccc"><path d="m12 2 2.6 6.1 6.6.6-5 4.1 1.6 6.3L12 16l-5.8 3.1 1.6-6.3-5-4.1 6.6-.6L12 2z"/></svg>264 <span class="reviews">15843 reviews</span>265 </div>266 <div class="badge" style="background:#c64a14">#1 Best Seller</div>267 <div class="price-row">268 <div class="price">₹3,999</div><div class="prime">prime</div>269 </div>270 <div class="strike">₹9,999 (60% off)</div>271 </div>272 </div>273 274 <!-- Recommendations -->275 <div class="section">276 <h2>What other items do customers buy after viewing this item?</h2>277 <div class="grid">278 <div class="prod-card">279 <div class="img-large">[IMG: Two black chairs]</div>280 <div class="prod-title">Ikea ADDE Chair (Stainless Steel, Black, Pack of 2)</div>281 <div class="rating-row">282 <svg width="36" height="36" viewBox="0 0 24 24" fill="#f59a23"><path d="m12 2 2.6 6.1 6.6.6-5 4.1 1.6 6.3L12 16l-5.8 3.1 1.6-6.3-5-4.1 6.6-.6L12 2z"/></svg>283 <svg width="36" height="36" viewBox="0 0 24 24" fill="#f59a23"><path d="m12 2 2.6 6.1 6.6.6-5 4.1 1.6 6.3L12 16l-5.8 3.1 1.6-6.3-5-4.1 6.6-.6L12 2z"/></svg>284 <svg width="36" height="36" viewBox="0 0 24 24" fill="#f59a23"><path d="m12 2 2.6 6.1 6.6.6-5 4.1 1.6 6.3L12 16l-5.8 3.1 1.6-6.3-5-4.1 6.6-.6L12 2z"/></svg>285 <svg width="36" height="36" viewBox="0 0 24 24" fill="#f59a23"><path d="m12 2 2.6 6.1 6.6.6-5 4.1 1.6 6.3L12 16l-5.8 3.1 1.6-6.3-5-4.1 6.6-.6L12 2z"/></svg>286 <svg width="36" height="36" viewBox="0 0 24 24" fill="#ccc"><path d="m12 2 2.6 6.1 6.6.6-5 4.1 1.6 6.3L12 16l-5.8 3.1 1.6-6.3-5-4.1 6.6-.6L12 2z"/></svg>287 <span class="count">119</span>288 </div>289 <div class="prod-price">₹2,539.00</div>290 </div>291 292 <div class="prod-card">293 <div class="img-large">[IMG: Black stool]</div>294 <div class="prod-title">IKEA Marius Durable Stool - 45 cm - by STOCKLAND...</div>295 <div class="rating-row">296 <svg width="36" height="36" viewBox="0 0 24 24" fill="#f59a23"><path d="m12 2 2.6 6.1 6.6.6-5 4.1 1.6 6.3L12 16l-5.8 3.1 1.6-6.3-5-4.1 6.6-.6L12 2z"/></svg>297 <svg width="36" height="36" viewBox="0 0 24 24" fill="#f59a23"><path d="m12 2 2.6 6.1 6.6.6-5 4.1 1.6 6.3L12 16l-5.8 3.1 1.6-6.3-5-4.1 6.6-.6L12 2z"/></svg>298 <svg width="36" height="36" viewBox="0 0 24 24" fill="#f59a23"><path d="m12 2 2.6 6.1 6.6.6-5 4.1 1.6 6.3L12 16l-5.8 3.1 1.6-6.3-5-4.1 6.6-.6L12 2z"/></svg>299 <svg width="36" height="36" viewBox="0 0 24 24" fill="#f59a23"><path d="m12 2 2.6 6.1 6.6.6-5 4.1 1.6 6.3L12 16l-5.8 3.1 1.6-6.3-5-4.1 6.6-.6L12 2z"/></svg>300 <svg width="36" height="36" viewBox="0 0 24 24" fill="#ccc"><path d="m12 2 2.6 6.1 6.6.6-5 4.1 1.6 6.3L12 16l-5.8 3.1 1.6-6.3-5-4.1 6.6-.6L12 2z"/></svg>301 <span class="count">413</span>302 </div>303 <div class="prod-price">₹648.00</div>304 </div>305 </div>306 </div>307 308 <!-- Bottom navigation -->309 <div class="bottom-nav">310 <div class="nav-item active">311 <svg class="icon" viewBox="0 0 24 24" fill="currentColor">312 <path d="M12 3 3 10h2v10h5v-6h4v6h5V10h2L12 3z"/>313 </svg>314 <div>Home</div>315 </div>316 <div class="nav-item">317 <svg class="icon" viewBox="0 0 24 24" fill="currentColor">318 <path d="M12 12a5 5 0 1 0-5-5 5 5 0 0 0 5 5Zm0 2c-4.4 0-8 2.2-8 5v2h16v-2c0-2.8-3.6-5-8-5z"/>319 </svg>320 <div>Account</div>321 </div>322 <div class="nav-item">323 <svg class="icon" viewBox="0 0 24 24" fill="currentColor">324 <path d="M3 5h18v3H3V5Zm3 5h12v3H6v-3Zm-3 5h18v3H3v-3