GD-ML/AndroidCode
13.4k
1<html lang="en">2<head>3<meta charset="UTF-8">4<title>Amazon Explore More Mock</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, Arial, sans-serif; }8 #render-target {9 position: relative;10 width: 1080px;11 height: 2400px;12 overflow: hidden;13 background: linear-gradient(180deg, #a6e3d6 0%, #9ad9ce 18%, #ffffff 22%);14 color: #111;15 }16 17 /* Status bar */18 .status-bar {19 position: absolute;20 top: 0;21 left: 0;22 width: 1080px;23 height: 72px;24 padding: 0 36px;25 display: flex;26 align-items: center;27 justify-content: space-between;28 color: #0d2b2a;29 font-size: 32px;30 opacity: 0.9;31 }32 .status-icons {33 display: flex;34 gap: 22px;35 align-items: center;36 }37 .dot {38 width: 18px; height: 18px; border-radius: 50%; background: #1a2; display: inline-block;39 }40 41 /* Top search area */42 .topbar {43 position: absolute;44 top: 72px;45 left: 0;46 width: 1080px;47 height: 136px;48 display: flex;49 align-items: center;50 padding: 0 28px;51 gap: 22px;52 }53 .back-btn {54 width: 72px; height: 72px; border-radius: 50%; display: flex; align-items: center; justify-content: center; color: #1f2f2e;55 }56 .search-box {57 flex: 1;58 height: 100px;59 background: #f7f7f7;60 border-radius: 22px;61 border: 1px solid #d7d7d7;62 display: flex;63 align-items: center;64 padding: 0 26px;65 gap: 18px;66 box-shadow: 0 1px 0 rgba(0,0,0,0.05) inset;67 }68 .search-input {69 flex: 1;70 color: #555;71 font-size: 36px;72 }73 .icon-btn { width: 60px; height: 60px; display: flex; align-items: center; justify-content: center; }74 75 /* Content area */76 .content {77 position: absolute;78 top: 220px;79 left: 0;80 right: 0;81 bottom: 168px;82 background: #fff;83 border-top: 1px solid #e3e3e3;84 overflow-y: auto;85 }86 .divider {87 height: 16px;88 background: #efefef;89 border-top: 1px solid #e2e2e2;90 border-bottom: 1px solid #e2e2e2;91 }92 .section {93 padding: 28px 28px 12px 28px;94 }95 .h1 {96 font-size: 56px;97 font-weight: 700;98 margin: 10px 0 16px 0;99 }100 .h2 {101 font-size: 42px;102 font-weight: 700;103 line-height: 1.2;104 margin: 16px 0 16px 0;105 }106 107 /* Product grid */108 .grid {109 display: grid;110 grid-template-columns: 1fr 1fr;111 gap: 28px;112 padding: 0 28px 34px 28px;113 }114 .card {115 border: 1px solid #e2e2e2;116 border-radius: 12px;117 padding: 0 0 18px 0;118 overflow: hidden;119 background: #fff;120 }121 .pimg {122 height: 520px;123 background: #E0E0E0;124 border-bottom: 1px solid #BDBDBD;125 display: flex;126 align-items: center;127 justify-content: center;128 color: #757575;129 font-size: 30px;130 }131 .swatches {132 display: flex;133 gap: 18px;134 padding: 18px 22px 6px 22px;135 align-items: center;136 }137 .sw {138 width: 64px; height: 64px; border-radius: 50%;139 border: 3px solid #ccc;140 }141 .sw.dark { background: #222; }142 .sw.gray { background: #555; }143 .sw.blue { background: #2b333b; }144 .sw.tan { background: #b59e82; }145 .sw.khak { background: #c9b89d; }146 .sw.brown { background: #6c523e; }147 .plus {148 color: #0a7cc0; font-weight: 700; font-size: 34px; margin-left: auto;149 }150 .title {151 padding: 6px 22px;152 font-size: 34px;153 line-height: 1.25;154 color: #222;155 min-height: 120px;156 font-weight: 700;157 }158 .subtitle {159 padding: 0 22px;160 font-size: 30px;161 color: #555;162 min-height: 88px;163 }164 .rating {165 display: flex; align-items: center; gap: 12px; padding: 6px 22px;166 }167 .stars { color: #f6a800; font-size: 32px; letter-spacing: 2px; }168 .count { color: #777; font-size: 30px; }169 .price {170 padding: 4px 22px 0 22px; font-size: 40px; font-weight: 700;171 }172 .from { color: #666; font-size: 30px; margin-right: 8px; font-weight: 500; }173 174 /* Bottom nav */175 .bottom-nav {176 position: absolute;177 left: 0; right: 0; bottom: 0;178 height: 168px;179 background: #ffffff;180 border-top: 1px solid #dcdcdc;181 display: grid;182 grid-template-columns: repeat(5, 1fr);183 align-items: center;184 text-align: center;185 font-size: 28px;186 }187 .nav-item { display: flex; flex-direction: column; align-items: center; gap: 10px; color: #0b0b0b; }188 .nav-item .lbl { font-size: 32px; }189 .nav-icon { width: 64px; height: 64px; display: inline-flex; align-items: center; justify-content: center; }190 191 /* Small helper for subtle page progress bar look */192 .page-hint {193 position: absolute; bottom: 172px; left: 50%; transform: translateX(-50%);194 width: 540px; height: 14px; border-radius: 8px; background: #d0d0d0;195 }196</style>197</head>198<body>199<div id="render-target">200 201 <!-- Status bar -->202 <div class="status-bar">203 <div>10:00</div>204 <div class="status-icons">205 <span class="dot" style="background:#3a3;"></span>206 <span class="dot" style="background:#000;"></span>207 <span class="dot" style="background:#000;"></span>208 <span class="dot" style="background:#000;"></span>209 <svg width="36" height="36" viewBox="0 0 24 24" fill="#0b0b0b">210 <path d="M17 7H7c-1.7 0-3 1.3-3 3v4c0 1.7 1.3 3 3 3h10c1.7 0 3-1.3 3-3v-4c0-1.7-1.3-3-3-3zm1 7c0 .6-.4 1-1 1H7c-.6 0-1-.4-1-1v-4c0-.6.4-1 1-1h10c.6 0 1 .4 1 1v4z"/>211 </svg>212 </div>213 </div>214 215 <!-- Search bar -->216 <div class="topbar">217 <div class="back-btn">218 <svg width="44" height="44" viewBox="0 0 24 24" fill="none" stroke="#1f2f2e" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">219 <path d="M15 18l-6-6 6-6"/>220 </svg>221 </div>222 223 <div class="search-box">224 <svg width="44" height="44" viewBox="0 0 24 24" fill="none" stroke="#666" stroke-width="2">225 <circle cx="11" cy="11" r="7"></circle>226 <path d="M21 21l-3.5-3.5"></path>227 </svg>228 <div class="search-input">Search Amazon.in</div>229 <div class="icon-btn">230 <svg width="44" height="44" viewBox="0 0 24 24" fill="none" stroke="#666" stroke-width="2">231 <rect x="3" y="5" width="18" height="14" rx="2"></rect>232 <circle cx="12" cy="12" r="3"></circle>233 </svg>234 </div>235 <div class="icon-btn">236 <svg width="44" height="44" viewBox="0 0 24 24" fill="none" stroke="#666" stroke-width="2" stroke-linecap="round">237 <path d="M12 3v10"></path>238 <path d="M8 13a4 4 0 0 0 8 0"></path>239 </svg>240 </div>241 </div>242 </div>243 244 <!-- Scrollable content -->245 <div class="content">246 <div class="divider"></div>247 <div class="section">248 <div class="h1">Explore more</div>249 </div>250 251 <div class="section">252 <div class="h2">What other items do customers buy after viewing this item?</div>253 </div>254 255 <div class="grid">256 <!-- Card 1 -->257 <div class="card">258 <div class="pimg">[IMG: Man in black track pants]</div>259 <div class="swatches">260 <div class="sw dark"></div>261 <div class="sw gray"></div>262 <div class="sw blue"></div>263 <div class="plus">+9</div>264 </div>265 <div class="title">Jockey</div>266 <div class="subtitle">9500 Men's Super Combed Cotton Rich Regular Fit…</div>267 <div class="rating">268 <div class="stars">★★★★★</div>269 <div class="count">7,021</div>270 </div>271 <div class="price">₹999</div>272 </div>273 274 <!-- Card 2 -->275 <div class="card">276 <div class="pimg">[IMG: Beige track pant with black stripe]</div>277 <div class="swatches">278 <div class="sw khak"></div>279 <div class="sw dark"></div>280 <div class="sw brown"></div>281 <div class="plus">+5</div>282 </div>283 <div class="title">MARK LOUIIS</div>284 <div class="subtitle">Track Pant for Men – Regular Fit Track Pants…</div>285 <div class="rating">286 <div class="stars">★★★★★</div>287 <div class="count">15,443</div>288 </div>289 <div class="price"><span class="from">from</span>₹649</div>290 </div>291 292 <!-- Card 3 -->293 <div class="card">294 <div class="pimg">[IMG: Lime green leggings]</div>295 <div class="swatches">296 <div class="sw" style="background:#c9e74a"></div>297 <div class="sw" style="background:#b1b1b1"></div>298 <div class="sw" style="background:#efefef"></div>299 <div class="plus">+3</div>300 </div>301 <div class="title">Active Leggings</div>302 <div class="subtitle">Women’s stretch leggings for yoga & workout</div>303 <div class="rating">304 <div class="stars">★★★★☆</div>305 <div class="count">2,314</div>306 </div>307 <div class="price">₹799</div>308 </div>309 310 <!-- Card 4 -->311 <div class="card">312 <div class="pimg">[IMG: Black joggers with gray waistband]</div>313 <div class="swatches">314 <div class="sw dark"></div>315 <div class="sw gray"></div>316 <div class="sw" style="background:#888"></div>317 <div class="plus">+4</div>318 </div>319 <div class="title">Men’s Joggers</div>320 <div class="subtitle">Casual drawstring jogger pants</div>321 <div class="rating">322 <div class="stars">★★★★☆</div>323 <div class="count">9,581</div>324 </div>325 <div class="price"><span class="from">from</span>₹549</div>326 </div>327 </div>328 329 <div style="height: 520px;"></div>330 </div>331 332 <!-- Bottom bar -->333 <div class="bottom-nav">334 <div class="nav-item">335 <div class="nav-icon">336 <svg width="56" height="56" viewBox="0 0 24 24" fill="none" stroke="#111" stroke-width="2">337 <path d="M3 11l9-7 9 7"></path>338 <path d="M5 10v10h14V10"></path>339 </svg>340 </div>341 <div class="lbl">Home</div>342 </div>343 <div class="nav-item">344 <div class="nav-icon">345 <svg width="56" height="56" viewBox="0 0 24 24" fill="none" stroke="#111" stroke-width="2">346 <circle cx="12" cy="7" r="4"></circle>347 <path d="M4 21c2-4 6-6 8-6s6 2 8 6"></path>348 </svg>349 </div>350 <div class="lbl">You</div>351 </div>352 <div class="nav-item">353 <div class="nav-icon">354 <svg width="56" height="56" viewBox="0 0 24 24" fill="none" stroke="#111" stroke-width="2">355 <path d="M3 7h18v4H3z"></path>356 <path d="M6 11v6h12v-6"></path>357 </svg>358 </div>359 <div class="lbl">More</div>360 </div>361 <div class="nav-item">362 <div class="nav-icon">363 <svg width="56" height="56" viewBox="0 0 24 24" fill="none" stroke="#111" stroke-width="2">364 <path d="M6 6h15l-1 7H8z"></path>365 <circle cx="9" cy="20" r="1.5"></circle>366 <circle cx="18" cy="20" r="1.5"></circle>367 </svg>368 </div>369 <div class="lbl">Cart</div>370 </div>371 <div class="nav-item">372 <div class="nav-icon">373 <svg width="56" height="56" viewBox="0 0 24 24" fill="none" stroke="#111" stroke-width="2">374 <path d="M3 6h18"></path>375 <path d="M3 12h18"></path>376 <path d="M3 18h18"></path>377 </svg>378 </div>379 <div class="lbl">Menu</div>380 </div>381 </div>382 383 <div class="page-hint"></div>384</div>385</body>386</html>