GD-ML/AndroidCode
13.4k
1<html lang="en">2<head>3<meta charset="UTF-8">4<meta name="viewport" content="width=1080, initial-scale=1.0">5<title>Amazon App Mock</title>6<style>7 body { margin: 0; padding: 0; background: transparent; font-family: Arial, Helvetica, sans-serif; }8 #render-target {9 width: 1080px;10 height: 2400px;11 position: relative;12 overflow: hidden;13 background: #ffffff;14 border-radius: 0;15 box-sizing: border-box;16 }17 18 /* Scrollable page content inside the fixed-size canvas */19 .page {20 position: absolute;21 inset: 0;22 overflow-y: auto;23 -webkit-overflow-scrolling: touch;24 background: #ffffff;25 }26 27 /* Top header gradient area */28 .top-gradient {29 background: linear-gradient(180deg, #bfe9e5 0%, #cdeee8 40%, #e4f6f2 100%);30 padding-bottom: 24px;31 }32 33 /* Status bar */34 .status-bar {35 height: 64px;36 padding: 0 24px;37 display: flex;38 align-items: center;39 justify-content: space-between;40 color: #1a1a1a;41 font-size: 28px;42 }43 .status-icons {44 display: flex;45 align-items: center;46 gap: 18px;47 }48 .battery {49 width: 36px; height: 18px; border: 2px solid #1a1a1a; border-radius: 3px; position: relative;50 }51 .battery::after {52 content: ""; position: absolute; right: -6px; top: 4px; width: 4px; height: 8px; background: #1a1a1a; border-radius: 1px;53 }54 .battery-fill { width: 28px; height: 12px; background: #1a1a1a; margin: 2px; }55 56 /* Search bar */57 .search-wrap {58 padding: 16px 24px 8px 24px;59 }60 .search-bar {61 height: 110px;62 border-radius: 18px;63 background: #ffffff;64 border: 1px solid #d9d9d9;65 display: flex;66 align-items: center;67 padding: 0 22px;68 box-shadow: 0 2px 6px rgba(0,0,0,0.06);69 }70 .search-icon {71 width: 40px; height: 40px; margin-right: 18px; color: #606060;72 }73 .search-text { color: #6e6e6e; font-size: 36px; flex: 1; }74 .camera-btn {75 width: 72px; height: 72px; border-radius: 12px; background: #f2f2f2; display: flex; align-items: center; justify-content: center; border: 1px solid #dcdcdc;76 }77 78 /* Location row */79 .location-row {80 display: flex;81 align-items: center;82 gap: 14px;83 padding: 14px 24px 18px 24px;84 color: #21323a;85 font-size: 34px;86 }87 .location-pin { width: 34px; height: 34px; color: #1a3a42; }88 89 /* Categories */90 .categories {91 display: flex;92 gap: 32px;93 padding: 8px 16px 18px 16px;94 overflow-x: auto;95 }96 .cat {97 width: 160px;98 display: flex; flex-direction: column; align-items: center; gap: 12px;99 }100 .cat .img {101 width: 140px; height: 120px; background: #E0E0E0; border: 1px solid #BDBDBD; border-radius: 20px;102 display: flex; align-items: center; justify-content: center; color: #757575; font-size: 24px; text-align: center; padding: 6px;103 }104 .cat span { font-size: 28px; color: #222; }105 106 /* Hero banner */107 .hero {108 margin: 12px 16px 8px 16px;109 background: linear-gradient(90deg, #ffe8b8, #fde5b6);110 border: 1px solid #e6d1a1;111 height: 520px;112 border-radius: 18px;113 padding: 24px;114 position: relative;115 }116 .hero .title {117 font-size: 64px; font-weight: 800; letter-spacing: -1px; color: #1b1b1b;118 }119 .hero .subtitle { font-size: 32px; color: #333; margin-top: 8px; }120 .hero .banner-img {121 position: absolute; right: 24px; bottom: 24px; width: 480px; height: 360px;122 background: #E0E0E0; border: 1px solid #BDBDBD; display: flex; align-items: center; justify-content: center; color: #757575; text-align: center; border-radius: 12px;123 }124 .dots {125 display: flex; gap: 20px; justify-content: center; margin: 16px 0 6px 0;126 }127 .dot { width: 18px; height: 18px; border-radius: 50%; background: #cfd8dc; }128 .dot.active { background: #2f8aa0; }129 130 /* Card row */131 .cards-row {132 display: flex;133 gap: 18px;134 padding: 8px 16px;135 overflow-x: auto;136 }137 .card {138 width: 520px;139 background: #ffffff;140 border: 1px solid #e1e1e1;141 border-radius: 18px;142 padding: 20px;143 box-shadow: 0 2px 6px rgba(0,0,0,0.05);144 flex: 0 0 auto;145 }146 .card h3 { margin: 0 0 16px 0; font-size: 40px; color: #111; }147 .pay-grid {148 display: grid;149 grid-template-columns: repeat(2, 1fr);150 gap: 18px;151 }152 .pay-item {153 border: 1px solid #e3e3e3; border-radius: 16px; padding: 24px; display: flex; align-items: center; gap: 16px; background: #fafafa;154 }155 .mini-icn {156 width: 52px; height: 52px; border-radius: 12px; background: #f0f0f0; border: 1px solid #ddd; display: flex; align-items: center; justify-content: center; color: #666;157 }158 .product-img {159 width: 460px; height: 320px; background: #E0E0E0; border: 1px solid #BDBDBD; display: flex; align-items: center; justify-content: center; color: #757575; border-radius: 12px; margin-top: 8px;160 }161 162 /* Feature bullets */163 .features {164 display: flex; justify-content: space-around; align-items: center; margin: 20px 16px; padding: 18px 0; border-top: 1px solid #eee; border-bottom: 1px solid #eee;165 }166 .feat {167 display: flex; align-items: center; gap: 14px; font-size: 30px; color: #333;168 }169 .feat .circle {170 width: 56px; height: 56px; border-radius: 50%; background: #ffe4b5; border: 1px solid #f2c48b;171 display: flex; align-items: center; justify-content: center; color: #9b6b16; font-weight: bold;172 }173 174 /* Lower banner */175 .beauty-banner {176 margin: 10px 16px 240px 16px;177 height: 320px; border-radius: 18px; border: 1px solid #e7d0d6;178 background: radial-gradient(circle at 70% 60%, #f7a6b3, #f3c7cf 45%, #f9e5e9 75%);179 position: relative;180 overflow: hidden;181 }182 .beauty-banner .label {183 position: absolute; left: 24px; bottom: 24px; font-size: 64px; font-weight: 700; color: #8e2b3b;184 }185 186 /* Bottom navigation */187 .bottom-nav {188 position: absolute; left: 0; right: 0; bottom: 0;189 height: 160px; background: #ffffff; border-top: 1px solid #e5e5e5;190 display: flex; justify-content: space-around; align-items: center;191 }192 .nav-item { display: flex; flex-direction: column; align-items: center; gap: 8px; color: #333; font-size: 28px; }193 .nav-item.active { color: #0a7a8a; font-weight: 700; }194 .nav-icn { width: 56px; height: 56px; color: currentColor; }195</style>196</head>197<body>198<div id="render-target">199 <div class="page">200 <div class="top-gradient">201 <div class="status-bar">202 <div>9:24</div>203 <div class="status-icons">204 <svg width="28" height="28" viewBox="0 0 24 24" fill="#1a1a1a" xmlns="http://www.w3.org/2000/svg"><path d="M12 3a9 9 0 1 0 .001 18.001A9 9 0 0 0 12 3Zm0 2a7 7 0 1 1 0 14 7 7 0 0 1 0-14Zm0 3a1 1 0 0 1 1 1v3.2l2.4 1.4a1 1 0 1 1-1 1.732l-3-1.75A1 1 0 0 1 11 12V9a1 1 0 0 1 1-1Z"/></svg>205 <svg width="28" height="28" viewBox="0 0 24 24" fill="#1a1a1a" xmlns="http://www.w3.org/2000/svg"><path d="M12 4a8 8 0 1 0 0 16 8 8 0 0 0 0-16Zm0 2.5a5.5 5.5 0 1 1 0 11 5.5 5.5 0 0 1 0-11Z"/></svg>206 <div class="battery"><div class="battery-fill"></div></div>207 </div>208 </div>209 210 <div class="search-wrap">211 <div class="search-bar">212 <svg class="search-icon" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">213 <circle cx="11" cy="11" r="7" stroke="#666"/>214 <line x1="16.5" y1="16.5" x2="22" y2="22" stroke="#666"/>215 </svg>216 <div class="search-text">Search Amazon.in</div>217 <div class="camera-btn">218 <svg width="36" height="36" viewBox="0 0 24 24" fill="#666">219 <path d="M9 3l2 2h4a3 3 0 0 1 3 3v8a3 3 0 0 1-3 3H6a3 3 0 0 1-3-3V8a3 3 0 0 1 3-3h1l2-2Zm3 5a5 5 0 1 0 .001 10.001A5 5 0 0 0 12 8Zm0 2a3 3 0 1 1-.001 5.999A3 3 0 0 1 12 10Z"/>220 </svg>221 </div>222 </div>223 </div>224 225 <div class="location-row">226 <svg class="location-pin" viewBox="0 0 24 24" fill="#1a3a42">227 <path d="M12 2C7.8 2 5 5.2 5 8.9c0 5.3 7 12.9 7 12.9s7-7.6 7-12.9C19 5.2 16.2 2 12 2Zm0 4a3 3 0 1 1 0 6 3 3 0 0 1 0-6Z"/>228 </svg>229 <div>Delivering to Delhi 110001 - Update location ▾</div>230 </div>231 232 <div class="categories">233 <div class="cat">234 <div class="img">[IMG: Mobiles]</div>235 <span>Mobiles</span>236 </div>237 <div class="cat">238 <div class="img">[IMG: Electronics]</div>239 <span>Electronics</span>240 </div>241 <div class="cat">242 <div class="img">[IMG: Home]</div>243 <span>Home</span>244 </div>245 <div class="cat">246 <div class="img">[IMG: Fashion]</div>247 <span>Fashion</span>248 </div>249 <div class="cat">250 <div class="img">[IMG: miniTV]</div>251 <span>miniTV</span>252 </div>253 <div class="cat">254 <div class="img">[IMG: Beauty]</div>255 <span>Beauty</span>256 </div>257 </div>258 </div>259 260 <div class="hero">261 <div class="title">STARTING ₹199</div>262 <div class="subtitle">Shop your favourites in clothing, beauty & more</div>263 <div class="banner-img">[IMG: Fashion Banner - Blazer, Dress, Shoes]</div>264 </div>265 266 <div class="dots">267 <div class="dot active"></div>268 <div class="dot"></div>269 <div class="dot"></div>270 <div class="dot"></div>271 <div class="dot"></div>272 <div class="dot"></div>273 </div>274 275 <div class="cards-row">276 <div class="card" style="width: 520px;">277 <h3>Amazon Pay</h3>278 <div class="pay-grid">279 <div class="pay-item">280 <div class="mini-icn">₹</div>281 <div>Amazon Pay</div>282 </div>283 <div class="pay-item">284 <div class="mini-icn">⇧</div>285 <div>Send Money</div>286 </div>287 <div class="pay-item">288 <div class="mini-icn">▦</div>289 <div>Scan any QR</div>290 </div>291 <div class="pay-item">292 <div class="mini-icn">₹</div>293 <div>Pay Bills</div>294 </div>295 </div>296 </div>297 298 <div class="card">299 <h3>Keep shopping for</h3>300 <div class="product-img">[IMG: Trail Running Shoe]</div>301 </div>302 303 <div class="card">304 <h3>Keep browsing</h3>305 <div class="product-img">[IMG: Analog Watch]</div>306 </div>307 </div>308 309 <div class="features">310 <div class="feat"><div class="circle">✓</div>WIDE SELECTION</div>311 <div class="feat"><div class="circle">₹</div>PAY ON DELIVERY</div>312 <div class="feat"><div class="circle">↺</div>EASY RETURNS</div>313 </div>314 315 <div class="beauty-banner">316 <div class="label">The Beauty Sale</div>317 </div>318 319 <div class="bottom-nav">320 <div class="nav-item active">321 <svg class="nav-icn" viewBox="0 0 24 24" fill="currentColor"><path d="M12 3 2 11h3v8h6v-5h2v5h6v-8h3L12 3z"/></svg>322 <div>Home</div>323 </div>324 <div class="nav-item">325 <svg class="nav-icn" viewBox="0 0 24 24" fill="currentColor"><path d="M12 12a5 5 0 1 0-5-5 5 5 0 0 0 5 5Zm0 2c-4.418 0-8 2.239-8 5v2h16v-2c0-2.761-3.582-5-8-5z"/></svg>326 <div>You</div>327 </div>328 <div class="nav-item">329 <svg class="nav-icn" viewBox="0 0 24 24" fill="currentColor"><path d="M4 4h7v7H4V4zm9 0h7v7h-7V4zM4 13h7v7H4v-7zm9 0h7v7h-7v-7z"/></svg>330 <div>More</div>331 </div>332 <div class="nav-item">333 <svg class="nav-icn" viewBox="0 0 24 24" fill="currentColor"><path d="M7 6h14l-1.5 9h-11L7 6zm-2 0v2h2l1.6 10.2A2 2 0 0 0 10.6 20h7.8a2 2 0 0 0 2-1.8L22 6H5zM7 22a2 2 0 1 0 0-4 2 2 0 0 0 0 4zm10 0a2 2 0 1 0 .001-4.001A2 2 0 0 0 17 22z"/></svg>334 <div>Cart</div>335 </div>336 <div class="nav-item">337 <svg class="nav-icn" viewBox="0 0 24 24" fill="currentColor"><path d="M3 6h18v2H3V6zm0 5h18v2H3v-2zm0 5h18v2H3v-2z"/></svg>338 <div>Menu</div>339 </div>340 </div>341 </div>342</div>343</body>344</html>