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=device-width, initial-scale=1.0">6<title>Amazon Echo Dot - Added to Cart Sheet</title>7<style>8 body { margin: 0; padding: 0; background: transparent; font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Arial, sans-serif; color: #1a1a1a; }9 #render-target {10 width: 1080px;11 height: 2400px;12 position: relative;13 overflow: hidden;14 background: #f2f3f4;15 border-radius: 0;16 }17 18 /* Top gradient header */19 .top-gradient {20 position: relative;21 width: 100%;22 height: 320px;23 background: linear-gradient(180deg, #b9f0e6 0%, #a7e6e7 100%);24 box-shadow: 0 2px 0 rgba(0,0,0,0.04) inset;25 }26 .status-bar {27 height: 84px;28 display: flex;29 align-items: center;30 justify-content: space-between;31 padding: 0 36px;32 color: #0b1f22;33 font-weight: 600;34 font-size: 36px;35 opacity: 0.9;36 }37 .status-right {38 display: flex; align-items: center; gap: 26px;39 }40 .header-row {41 height: 160px;42 display: flex;43 align-items: center;44 gap: 24px;45 padding: 0 30px;46 }47 .icon-btn {48 width: 84px; height: 84px; border-radius: 42px; display: flex; align-items: center; justify-content: center;49 }50 .search-wrap {51 flex: 1;52 height: 116px;53 background: #ffffff;54 border-radius: 22px;55 box-shadow: 0 8px 18px rgba(0,0,0,0.12);56 display: flex;57 align-items: center;58 padding: 0 28px;59 gap: 18px;60 }61 .search-text {62 flex: 1;63 color: #222;64 font-size: 40px;65 }66 .search-actions {67 display: flex; align-items: center; gap: 22px;68 }69 .chip-top {70 position: absolute; top: 345px; left: 50%; transform: translateX(-50%);71 background: #0b3a3f; color: #e7f3f4;72 padding: 26px 44px; border-radius: 60px; font-weight: 700; font-size: 40px;73 box-shadow: 0 10px 20px rgba(0,0,0,0.25);74 z-index: 2;75 }76 77 /* Content thumbnails */78 .content {79 position: relative;80 padding: 24px 24px 0 24px;81 }82 .thumb-grid {83 display: grid;84 grid-template-columns: 1fr 1fr;85 gap: 28px;86 margin-top: 14px;87 }88 .thumb {89 height: 420px;90 background: #E0E0E0;91 border: 1px solid #BDBDBD;92 border-radius: 28px;93 display: flex; align-items: center; justify-content: center;94 color: #757575; font-size: 40px;95 }96 .section-title {97 font-size: 56px; font-weight: 800; color: #2b2b2b;98 margin: 34px 24px 6px 24px;99 }100 101 /* Scrim for sheet */102 .scrim {103 position: absolute; inset: 0;104 background: rgba(0,0,0,0.5);105 z-index: 10;106 }107 108 /* Bottom sheet */109 .sheet {110 position: absolute;111 left: 0; right: 0;112 bottom: 140px; /* sits above bottom nav */113 background: #ffffff;114 border-top-left-radius: 36px;115 border-top-right-radius: 36px;116 box-shadow: 0 -8px 24px rgba(0,0,0,0.25);117 z-index: 11;118 padding-bottom: 30px;119 }120 .sheet-inner { padding: 18px 32px 30px 32px; }121 .grabber {122 width: 160px; height: 12px; background: #cfcfcf; border-radius: 8px; margin: 16px auto 14px auto;123 }124 .sheet-close {125 position: absolute; right: 30px; top: 26px; width: 80px; height: 80px; display: flex; align-items: center; justify-content: center; cursor: default;126 }127 .added-row {128 display: grid; grid-template-columns: 200px 1fr; gap: 24px; align-items: center; padding: 10px 8px 4px 8px;129 }130 .prod-img {131 width: 180px; height: 180px; border-radius: 90px; background: #E0E0E0; border: 1px solid #BDBDBD;132 display: flex; align-items: center; justify-content: center; color: #757575; font-size: 28px;133 }134 .added-title {135 display: flex; align-items: center; gap: 16px; font-size: 60px; font-weight: 800; color: #2b7a2f;136 }137 .subtext { font-size: 42px; color: #6b6b6b; margin-top: 8px; }138 .divider { height: 2px; background: #eeeeee; margin: 26px 0; }139 140 .progress-wrap {141 display: flex; align-items: center; gap: 18px;142 }143 .progress-track {144 flex: 1; height: 38px; background: #e7efe7; border-radius: 24px; position: relative;145 overflow: hidden; border: 1px solid #d4e5d2;146 }147 .progress-bar {148 position: absolute; left: 0; top: 0; bottom: 0; width: 85%;149 background: #2f8e43; border-radius: 24px;150 }151 .price {152 font-weight: 700; font-size: 44px; color: #2b2b2b;153 }154 .free-row {155 display: flex; align-items: center; gap: 18px; margin-top: 20px; font-size: 40px;156 }157 .free-row .hl { color: #2f8e43; font-weight: 800; }158 .free-row a { color: #1d8bd1; text-decoration: none; }159 160 .carousel-title {161 font-size: 48px; font-weight: 800; color: #2b2b2b; margin: 28px 6px 16px 6px;162 }163 .carousel {164 display: flex; gap: 22px; overflow: hidden;165 }166 .card {167 width: 320px; background: #fff; border-radius: 22px; border: 1px solid #e8e8e8;168 box-shadow: 0 2px 6px rgba(0,0,0,0.06);169 }170 .card .img {171 height: 210px; background: #E0E0E0; border-bottom: 1px solid #BDBDBD;172 display: flex; align-items: center; justify-content: center; color: #757575; font-size: 28px;173 border-top-left-radius: 22px; border-top-right-radius: 22px;174 }175 .card .name {176 padding: 16px 18px 20px 18px; font-size: 36px; color: #333;177 white-space: nowrap; overflow: hidden; text-overflow: ellipsis;178 }179 180 /* Bottom Nav */181 .bottom-nav {182 position: absolute; left: 0; right: 0; bottom: 40px;183 height: 140px; background: #ffffff; border-top: 1px solid #e3e3e3;184 display: flex; align-items: center; justify-content: space-around;185 z-index: 5;186 }187 .nav-item { width: 20%; display: flex; flex-direction: column; align-items: center; gap: 6px; color: #5a5a5a; font-size: 28px; }188 .nav-item.active { color: #1a8b81; font-weight: 700; }189 .nav-icon { width: 56px; height: 56px; }190 191 /* Home indicator */192 .home-pill {193 position: absolute; left: 50%; transform: translateX(-50%);194 bottom: 10px; width: 220px; height: 12px; border-radius: 8px; background: #bdbdbd; z-index: 4;195 }196 197 /* Small utility */198 .muted { color: #6f6f6f; }199</style>200</head>201<body>202<div id="render-target">203 204 <!-- Top gradient header -->205 <div class="top-gradient">206 <div class="status-bar">207 <div>12:36</div>208 <div class="status-right">209 <span>✉️</span>210 <span>⚙️</span>211 <span>📶</span>212 <span>🔋</span>213 </div>214 </div>215 <div class="header-row">216 <div class="icon-btn">217 <svg width="52" height="52" viewBox="0 0 24 24" fill="none" stroke="#0b1f22" stroke-width="2.5" stroke-linecap="round" stroke-linejoin="round">218 <path d="M15 18L9 12l6-6"/>219 </svg>220 </div>221 <div class="search-wrap">222 <svg width="44" height="44" viewBox="0 0 24 24" fill="none" stroke="#495057" stroke-width="2.2" stroke-linecap="round">223 <circle cx="11" cy="11" r="7"></circle>224 <path d="M21 21l-4.3-4.3"></path>225 </svg>226 <div class="search-text">Amazon Echo dot</div>227 <div class="search-actions">228 <svg width="44" height="44" viewBox="0 0 24 24" fill="none" stroke="#495057" stroke-width="2">229 <rect x="3" y="3" width="7" height="7" rx="1"></rect>230 <rect x="14" y="3" width="7" height="7" rx="1"></rect>231 <rect x="3" y="14" width="7" height="7" rx="1"></rect>232 <rect x="14" y="14" width="7" height="7" rx="1"></rect>233 </svg>234 <svg width="42" height="42" viewBox="0 0 24 24" fill="none" stroke="#495057" stroke-width="2" stroke-linecap="round">235 <path d="M12 3a3 3 0 0 0-3 3v5a3 3 0 1 0 6 0V6a3 3 0 0 0-3-3z"></path>236 <path d="M19 10v1a7 7 0 0 1-14 0v-1"></path>237 </svg>238 </div>239 </div>240 </div>241 </div>242 243 <!-- Back to top chip -->244 <div class="chip-top">Back to top</div>245 246 <!-- Content grid -->247 <div class="content">248 <div class="thumb-grid">249 <div class="thumb">[IMG: Echo Dot Review Video]</div>250 <div class="thumb">[IMG: Echo Dot Setup Video]</div>251 </div>252 <div class="section-title">Top reviews from India</div>253 </div>254 255 <!-- Dim background for sheet -->256 <div class="scrim"></div>257 258 <!-- Bottom Sheet -->259 <div class="sheet">260 <div class="grabber"></div>261 <div class="sheet-close">262 <svg width="48" height="48" viewBox="0 0 24 24" stroke="#222" stroke-width="2" fill="none" stroke-linecap="round">263 <path d="M5 5l14 14M19 5L5 19"></path>264 </svg>265 </div>266 <div class="sheet-inner">267 <div class="added-row">268 <div class="prod-img">[IMG: Echo Dot]</div>269 <div>270 <div class="added-title">271 <svg width="52" height="52" viewBox="0 0 24 24" fill="#2f8e43">272 <path d="M12 2a10 10 0 1 0 .001 20.001A10 10 0 0 0 12 2zm-1.2 13.2l-3.5-3.5 1.4-1.4 2.1 2.1 4.6-4.6 1.4 1.4-6 6z"/>273 </svg>274 <span>Added to Cart</span>275 </div>276 <div class="subtext">Black, Echo Dot Only</div>277 </div>278 </div>279 280 <div class="divider"></div>281 282 <div class="progress-wrap">283 <div class="progress-track">284 <div class="progress-bar"></div>285 </div>286 <div class="price">₹499</div>287 </div>288 289 <div class="free-row">290 <svg width="44" height="44" viewBox="0 0 24 24" fill="#2f8e43">291 <path d="M12 2a10 10 0 1 0 0 20 10 10 0 0 0 0-20zm-1 14l-3-3 1.4-1.4L11 12.2l3.6-3.6L16 10l-5 6z"/>292 </svg>293 <div><span class="hl">Your order is eligible for FREE Delivery.</span> Choose <a href="#">FREE Delivery</a> option at checkout.</div>294 </div>295 296 <div class="divider"></div>297 298 <div class="carousel-title">Often reordered in Care and Beauty</div>299 <div class="carousel">300 <div class="card">301 <div class="img">[IMG: NIVEA Deodorant]</div>302 <div class="name">NIVEA MEN Fresh...</div>303 </div>304 <div class="card">305 <div class="img">[IMG: WishCare Hair Serum]</div>306 <div class="name">WishCare Hair Gro...</div>307 </div>308 <div class="card">309 <div class="img">[IMG: Park Avenue]</div>310 <div class="name">Park Avenue Perf...</div>311 </div>312 </div>313 </div>314 </div>315 316 <!-- Bottom Navigation -->317 <div class="bottom-nav">318 <div class="nav-item active">319 <svg class="nav-icon" viewBox="0 0 24 24" fill="none" stroke="#1a8b81" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">320 <path d="M3 10.5l9-7 9 7"></path>321 <path d="M5 10v9h14v-9"></path>322 </svg>323 <div>Home</div>324 </div>325 <div class="nav-item">326 <svg class="nav-icon" viewBox="0 0 24 24" fill="none" stroke="#626262" stroke-width="2" stroke-linecap="round">327 <circle cx="12" cy="8" r="4"></circle>328 <path d="M4 20c1.5-4 14.5-4 16 0"></path>329 </svg>330 <div>You</div>331 </div>332 <div class="nav-item">333 <svg class="nav-icon" viewBox="0 0 24 24" fill="none" stroke="#626262" stroke-width="2" stroke-linecap="round">334 <path d="M4 7h16v10H4z"></path>335 <path d="M8 7V3h8v4"></path>336 </svg>337 <div>More</div>338 </div>339 <div class="nav-item">340 <svg class="nav-icon" viewBox="0 0 24 24" fill="none" stroke="#626262" stroke-width="2" stroke-linecap="round">341 <path d="M6 6h15l-1.5 9h-12z"></path>342 <circle cx="9" cy="20" r="1.6"></circle>343 <circle cx="17" cy="20" r="1.6"></circle>344 </svg>345 <div>Cart</div>346 </div>347 <div class="nav-item">348 <svg class="nav-icon" viewBox="0 0 24 24" fill="none" stroke="#626262" stroke-width="2" stroke-linecap="round">349 <path d="M3 6h18M3 12h18M3 18h18"></path>350 </svg>351 <div>Menu</div>352 </div>353 </div>354 355 <div class="home-pill"></div>356</div>357</body>358</html>