GD-ML/AndroidCode
13.4k
1<!DOCTYPE html>2<html>3<head>4<meta charset="utf-8">5<meta name="viewport" content="width=1080, initial-scale=1">6<style>7 body { margin:0; padding:0; background:transparent; font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; color:#222; }8 #render-target {9 width:1080px; height:2400px; position:relative; overflow:hidden; background:#ffffff;10 }11 12 /* Top gradient header */13 .topbar {14 position:absolute; left:0; top:0; width:1080px; height:220px;15 background: linear-gradient(180deg, #9EE1D8 0%, #B7E9E0 60%, #EAF8F6 100%);16 box-shadow: 0 2px 0 rgba(0,0,0,0.06);17 }18 .status-row {19 height:60px; padding:0 26px; display:flex; align-items:center; justify-content:space-between; color:#0a2a2a; font-weight:600; font-size:32px;20 }21 .status-left { display:flex; align-items:center; gap:16px; }22 .status-right { display:flex; align-items:center; gap:22px; font-size:28px; }23 .icon-dot { width:18px; height:18px; background:#111; border-radius:50%; display:inline-block; }24 .search-row {25 display:flex; align-items:center; gap:20px;26 padding:0 22px;27 }28 .back-btn {29 width:76px; height:76px; display:flex; align-items:center; justify-content:center;30 }31 .search-pill {32 flex:1; height:86px; background:#fff; border-radius:44px; box-shadow:0 0 0 2px rgba(0,0,0,0.06) inset;33 display:flex; align-items:center; padding:0 26px; gap:16px; font-size:34px; color:#555;34 }35 .search-pill .camera {36 margin-left:auto; width:60px; height:60px; border-radius:30px; background:#f2f2f2; display:flex; align-items:center; justify-content:center;37 border:1px solid #ddd;38 }39 40 /* Tabs */41 .tabs {42 position:absolute; top:220px; left:0; width:1080px; height:116px; background:#fff; border-bottom:1px solid #e5e5e5;43 display:flex; align-items:flex-end; padding:0 22px;44 }45 .tabs .tab {46 padding:28px 26px 24px; font-size:34px; color:#6b6b6b;47 }48 .tabs .active {49 color:#222; font-weight:600; position:relative;50 }51 .tabs .active::after {52 content:""; position:absolute; left:26px; right:26px; bottom:0; height:8px; background:#ff7a00; border-radius:4px;53 }54 .tabs .arrow-up {55 margin-left:auto; display:flex; align-items:center; padding:0 16px 24px 16px;56 }57 58 /* Compare grid section */59 .compare-wrap {60 position:absolute; top:336px; left:0; width:1080px; background:#fff;61 border-bottom:1px solid #eee;62 }63 .grid {64 display:grid; grid-template-columns: 220px 286px 286px 286px;65 border-top:1px solid #ddd; border-left:1px solid #ddd;66 }67 .cell {68 padding:22px; font-size:30px; border-right:1px solid #ddd; border-bottom:1px solid #ddd;69 }70 .cell.label { font-weight:700; color:#606060; }71 .price { color:#d73a2e; font-weight:700; }72 .ship-badge { display:inline-block; background:#f7f7f7; border:1px solid #bdbdbd; padding:6px 10px; border-radius:6px; font-size:26px; }73 .rating { display:flex; align-items:center; gap:6px; }74 .stars svg { width:26px; height:26px; }75 .more-details {76 margin:12px 22px 0; height:120px; border:1px solid #e0e0e0; border-radius:16px; display:flex; align-items:center; justify-content:center; gap:16px; color:#555; font-size:34px;77 }78 .chev {79 width:28px; height:28px; border-left:4px solid #777; border-bottom:4px solid #777; transform:rotate(45deg);80 }81 82 /* Section title */83 .section {84 position:absolute; top:960px; left:0; width:1080px; padding:24px 26px;85 border-top:8px solid #f5f5f5;86 }87 .section .label {88 font-size:50px; font-weight:800; margin-top:22px;89 }90 .section .sub {91 color:#777; font-size:28px; display:flex; align-items:center; gap:10px;92 }93 .info-dot {94 width:26px; height:26px; border-radius:50%; background:#e9eef9; border:1px solid #c7d0e7; display:inline-block;95 }96 97 /* Product cards */98 .product-list {99 margin-top:24px; display:flex; gap:24px;100 }101 .card {102 width:332px; border-radius:12px; padding:0 0 14px; background:#fff;103 }104 .img {105 width:100%; height:240px; background:#E0E0E0; border:1px solid #BDBDBD; display:flex; align-items:center; justify-content:center; color:#757575; font-size:28px;106 border-top-left-radius:12px; border-top-right-radius:12px;107 }108 .title {109 margin:12px 0 6px; padding:0 8px; font-size:32px; color:#1a1a1a; line-height:1.25; font-weight:600;110 }111 .reviews { padding:0 8px; color:#777; font-size:28px; display:flex; align-items:center; gap:8px; }112 .price-row { padding:10px 8px; display:flex; align-items:center; gap:14px; flex-wrap:wrap; }113 .deal-badge { background:#a8341f; color:#fff; padding:8px 12px; border-radius:6px; font-size:26px; }114 .save-badge { background:#7AC46E; color:#fff; padding:6px 10px; border-radius:6px; font-size:26px; }115 .prime { color:#2b7ff7; font-size:28px; font-weight:700; }116 .old-price { color:#999; text-decoration:line-through; font-size:28px; }117 .off { color:#777; font-size:26px; }118 119 /* Bottom nav */120 .bottom-nav {121 position:absolute; left:0; bottom:0; width:1080px; height:150px; border-top:1px solid #e6e6e6; background:#fff;122 display:flex; align-items:center; justify-content:space-around;123 }124 .nav-item { display:flex; flex-direction:column; align-items:center; color:#0b9; gap:10px; }125 .nav-item.inactive { color:#666; }126 .nav-item svg { width:48px; height:48px; }127 .nav-label { font-size:30px; }128 .gesture-bar {129 position:absolute; bottom:10px; left:50%; transform:translateX(-50%); width:240px; height:10px; background:#bdbdbd; border-radius:6px;130 }131 /* Simple star color */132 .star-fill { fill:#ff9f1a; }133 .star-stroke { stroke:#ff9f1a; fill:none; }134</style>135</head>136<body>137<div id="render-target">138 139 <!-- Top header -->140 <div class="topbar">141 <div class="status-row">142 <div class="status-left">143 <span>9:01</span>144 <span class="icon-dot"></span>145 <svg width="34" height="34" viewBox="0 0 24 24"><circle cx="11" cy="11" r="8" stroke="#0a2a2a" stroke-width="2" fill="none"/></svg>146 <svg width="34" height="34" viewBox="0 0 24 24"><circle cx="11" cy="11" r="8" stroke="#0a2a2a" stroke-width="2" fill="none"/><line x1="18" y1="18" x2="22" y2="22" stroke="#0a2a2a" stroke-width="2"/></svg>147 <span class="icon-dot"></span>148 <span style="font-size:16px;">•</span>149 </div>150 <div class="status-right">151 <svg width="34" height="34" viewBox="0 0 24 24"><path d="M2 18h20M6 14h12M10 10h4" stroke="#0a2a2a" stroke-width="2" fill="none"/></svg>152 <svg width="34" height="34" viewBox="0 0 24 24"><rect x="3" y="6" width="18" height="12" rx="2" stroke="#0a2a2a" stroke-width="2" fill="none"/><rect x="4" y="7" width="16" height="10" fill="#0a2a2a"/></svg>153 </div>154 </div>155 156 <div class="search-row">157 <div class="back-btn">158 <svg width="40" height="40" viewBox="0 0 24 24">159 <path d="M15 6 L9 12 L15 18" stroke="#222" stroke-width="2" fill="none" stroke-linecap="round" stroke-linejoin="round"/>160 </svg>161 </div>162 <div class="search-pill">163 <svg width="36" height="36" viewBox="0 0 24 24">164 <circle cx="11" cy="11" r="7" stroke="#777" stroke-width="2" fill="none"/>165 <line x1="16.5" y1="16.5" x2="21" y2="21" stroke="#777" stroke-width="2"/>166 </svg>167 <span>portable tool box for toolbox for h...</span>168 <div class="camera">169 <svg width="28" height="28" viewBox="0 0 24 24">170 <rect x="5" y="7" width="14" height="10" rx="2" stroke="#777" stroke-width="2" fill="none"/>171 <circle cx="12" cy="12" r="3" stroke="#777" stroke-width="2" fill="none"/>172 </svg>173 </div>174 </div>175 </div>176 </div>177 178 <!-- Tabs -->179 <div class="tabs">180 <div class="tab">Details</div>181 <div class="tab">Questions</div>182 <div class="tab active">Compare</div>183 <div class="tab">Reviews</div>184 <div class="arrow-up">185 <svg width="34" height="34" viewBox="0 0 24 24">186 <path d="M12 6 L6 12 H18 Z" fill="#777"/>187 </svg>188 </div>189 </div>190 191 <!-- Comparison grid -->192 <div class="compare-wrap">193 <div class="grid">194 <div class="cell label">PRICE</div>195 <div class="cell price">₹2,184.00</div>196 <div class="cell price">₹2,249.00</div>197 <div class="cell price">₹1,599.00</div>198 199 <div class="cell label">SHIPPING</div>200 <div class="cell"><span class="ship-badge">Fulfilled</span> FREE Delivery</div>201 <div class="cell"><span class="ship-badge">Fulfilled</span> FREE Delivery</div>202 <div class="cell"><span class="ship-badge">Fulfilled</span> FREE Delivery</div>203 204 <div class="cell label">SOLD BY</div>205 <div class="cell">Plantex-Globalbees</div>206 <div class="cell">Clicktech Retail</div>207 <div class="cell">Clicktech Retail</div>208 209 <div class="cell label">DURABILITY</div>210 <div class="cell rating">211 <span>4.1</span>212 <div class="stars">213 <svg viewBox="0 0 24 24"><path class="star-fill" d="M12 3l3 6 6 .9-4.5 4.4 1 6.3L12 18l-5.5 2.6 1-6.3L3 9.9l6-.9z"/></svg>214 <svg viewBox="0 0 24 24"><path class="star-fill" d="M12 3l3 6 6 .9-4.5 4.4 1 6.3L12 18l-5.5 2.6 1-6.3L3 9.9l6-.9z"/></svg>215 <svg viewBox="0 0 24 24"><path class="star-fill" d="M12 3l3 6 6 .9-4.5 4.4 1 6.3L12 18l-5.5 2.6 1-6.3L3 9.9l6-.9z"/></svg>216 <svg viewBox="0 0 24 24"><path class="star-fill" d="M12 3l3 6 6 .9-4.5 4.4 1 6.3L12 18l-5.5 2.6 1-6.3L3 9.9l6-.9z"/></svg>217 <svg viewBox="0 0 24 24"><path class="star-stroke" d="M12 3l3 6 6 .9-4.5 4.4 1 6.3L12 18l-5.5 2.6 1-6.3L3 9.9l6-.9z"/></svg>218 </div>219 </div>220 <div class="cell">—</div>221 <div class="cell rating">222 <span>4.1</span>223 <div class="stars">224 <svg viewBox="0 0 24 24"><path class="star-fill" d="M12 3l3 6 6 .9-4.5 4.4 1 6.3L12 18l-5.5 2.6 1-6.3L3 9.9l6-.9z"/></svg>225 </div>226 </div>227 228 <div class="cell label">STURDINESS</div>229 <div class="cell rating">230 <span>4.2</span>231 <div class="stars">232 <svg viewBox="0 0 24 24"><path class="star-fill" d="M12 3l3 6 6 .9-4.5 4.4 1 6.3L12 18l-5.5 2.6 1-6.3L3 9.9l6-.9z"/></svg>233 <svg viewBox="0 0 24 24"><path class="star-fill" d="M12 3l3 6 6 .9-4.5 4.4 1 6.3L12 18l-5.5 2.6 1-6.3L3 9.9l6-.9z"/></svg>234 <svg viewBox="0 0 24 24"><path class="star-fill" d="M12 3l3 6 6 .9-4.5 4.4 1 6.3L12 18l-5.5 2.6 1-6.3L3 9.9l6-.9z"/></svg>235 <svg viewBox="0 0 24 24"><path class="star-fill" d="M12 3l3 6 6 .9-4.5 4.4 1 6.3L12 18l-5.5 2.6 1-6.3L3 9.9l6-.9z"/></svg>236 <svg viewBox="0 0 24 24"><path class="star-stroke" d="M12 3l3 6 6 .9-4.5 4.4 1 6.3L12 18l-5.5 2.6 1-6.3L3 9.9l6-.9z"/></svg>237 </div>238 </div>239 <div class="cell">—</div>240 <div class="cell rating">241 <span>4.2</span>242 <div class="stars">243 <svg viewBox="0 0 24 24"><path class="star-fill" d="M12 3l3 6 6 .9-4.5 4.4 1 6.3L12 18l-5.5 2.6 1-6.3L3 9.9l6-.9z"/></svg>244 </div>245 </div>246 </div>247 248 <div class="more-details">249 <div class="chev"></div>250 <span>See more details</span>251 </div>252 </div>253 254 <!-- Free delivery section and product cards -->255 <div class="section">256 <div class="sub">Sponsored <span class="info-dot"></span></div>257 <div class="label">Free delivery for eligible orders</div>258 259 <div class="product-list">260 <!-- Card 1 -->261 <div class="card">262 <div class="img">[IMG: Tool Kit in Carry Case]</div>263 <div class="title">IBELL Professional Tool Kit with...</div>264 <div class="reviews">265 <div class="stars">266 <svg viewBox="0 0 24 24"><path class="star-fill" d="M12 3l3 6 6 .9-4.5 4.4 1 6.3L12 18l-5.5 2.6 1-6.3L3 9.9l6-.9z"/></svg>267 <svg viewBox="0 0 24 24"><path class="star-fill" d="M12 3l3 6 6 .9-4.5 4.4 1 6.3L12 18l-5.5 2.6 1-6.3L3 9.9l6-.9z"/></svg>268 <svg viewBox="0 0 24 24"><path class="star-fill" d="M12 3l3 6 6 .9-4.5 4.4 1 6.3L12 18l-5.5 2.6 1-6.3L3 9.9l6-.9z"/></svg>269 <svg viewBox="0 0 24 24"><path class="star-fill" d="M12 3l3 6 6 .9-4.5 4.4 1 6.3L12 18l-5.5 2.6 1-6.3L3 9.9l6-.9z"/></svg>270 <svg viewBox="0 0 24 24"><path class="star-stroke" d="M12 3l3 6 6 .9-4.5 4.4 1 6.3L12 18l-5.5 2.6 1-6.3L3 9.9l6-.9z"/></svg>271 </div>272 <span>9006 reviews</span>273 </div>274 <div class="price-row">275 <span class="deal-badge">Deal of the Day</span>276 <span class="price" style="color:#d73a2e; font-weight:800; font-size:38px;">₹3,138.00</span>277 <span class="prime">prime</span>278 <div style="width:100%"></div>279 <span class="old-price">₹6,840.00</span>280 <span class="off">(54% off)</span>281 </div>282 </div>283 284 <!-- Card 2 -->285 <div class="card">286 <div class="img">[IMG: Socket & Screwdriver Set]</div>287 <div class="title">Kridez 46 In 1 Pcs Tool Kit&Scre...</div>288 <div class="reviews">289 <div class="stars">290 <svg viewBox="0 0 24 24"><path class="star-fill" d="M12 3l3 6 6 .9-4.5 4.4 1 6.3L12 18l-5.5 2.6 1-6.3L3 9.9l6-.9z"/></svg>291 <svg viewBox="0 0 24 24"><path class="star-fill" d="M12 3l3 6 6 .9-4.5 4.4 1 6.3L12 18l-5.5 2.6 1-6.3L3 9.9l6-.9z"/></svg>292 <svg viewBox="0 0 24 24"><path class="star-fill" d="M12 3l3 6 6 .9-4.5 4.4 1 6.3L12 18l-5.5 2.6 1-6.3L3 9.9l6-.9z"/></svg>293 <svg viewBox="0 0 24 24"><path class="star-fill" d="M12 3l3 6 6 .9-4.5 4.4 1 6.3L12 18l-5.5 2.6 1-6.3L3 9.9l6-.9z"/></svg>294 <svg viewBox="0 0 24 24"><path class="star-stroke" d="M12 3l3 6 6 .9-4.5 4.4 1 6.3L12 18l-5.5 2.6 1-6.3L3 9.9l6-.9z"/></svg>295 </div>296 <span>63 reviews</span>297 </div>298 <div class="price-row">299 <span class="price" style="color:#d73a2e; font-weight:800; font-size:38px;">₹699.00</span>300 <span class="prime">prime</span>301 <div style="width:100%"></div>302 <span class="save-badge">Save 2%</span>303 <span style="color:#555; font-size:28px;">with coupon</span>304 </div>305 </div>306 307 <!-- Card 3 -->308 <div class="card">309 <div class="img">[IMG: Hammer & Wrench Tool Kit]</div>310 <div class="title">IBELL HT Tool Kit for...</div>311 <div class="reviews">312 <div class="stars">313 <svg viewBox="0 0 24 24"><path class="star-fill" d="M12 3l3 6 6 .9-4.5 4.4 1 6.3L12 18l-5.5 2.6 1-6.3L3 9.9l6-.9z"/></svg>314 <svg viewBox="0 0 24 24"><path class="star-fill" d="M12 3l3 6 6 .9-4.5 4.4 1 6.3L12 18l-5.5 2.6 1-6.3L3 9.9l6-.9z"/></svg>315 <svg viewBox="0 0 24 24"><path class="star-fill" d="M12 3l3 6 6 .9-4.5 4.4 1 6.3L12 18l-5.5 2.6 1-6.3L3 9.9l6-.9z"/></svg>316 <svg viewBox="0 0 24 24"><path class="star-fill" d="M12 3l3 6 6 .9-4.5 4.4 1 6.3L12 18l-5.5 2.6 1-6.3L3 9.9l6-.9z"/></svg>317 <svg viewBox="0 0 24 24"><path class="star-stroke" d="M12 3l3 6 6 .9-4.5 4.4 1 6.3L12 18l-5.5 2.6 1-6.3L3 9.9l6-.9z"/></svg>318 </div>319 <span>226 reviews</span>320 </div>321 <div class="price-row">322 <span class="price" style="color:#d73a2e; font-weight:800; font-size:38px;">₹899.00</span>323 </div>324 </div>325 </div>326 </div>327 328 <!-- Bottom navigation -->329 <div class="bottom-nav">330 <div class="nav-item">331 <svg viewBox="0 0 24 24">332 <path d="M3 11 L12 4 L21 11 V20 H14 V14 H10 V20 H3 Z" fill="#00a3a3"/>333 </svg>334 <div class="nav-label">Home</div>335 </div>336 <div class="nav-item inactive">337 <svg viewBox="0 0 24 24"><circle cx="12" cy="8" r="4" fill="#666"/><path d="M4 20c0-4 4-6 8-6s8 2 8 6" fill="#666"/></svg>338 <div class="nav-label">You</div>339 </div>340 <div class="nav-item inactive">341 <svg viewBox="0 0 24 24"><rect x="5" y="5" width="14" height="5" fill="#666"/><rect x="7" y="11" width="10" height="4" fill="#666"/><rect x="9" y="16" width="6" height="3" fill="#666"/></svg>342 <div class="nav-label">More</div>343 </div>344 <div class="nav-item inactive">345 <svg viewBox="0 0 24 24"><path d="M3 4h3l2 12h10l2-8H7" fill="none" stroke="#666" stroke-width="2"/><circle cx="9" cy="20" r="2" fill="#666"/><circle cx="18" cy="20" r="2" fill="#666"/></svg>346 <div class="nav-label">Cart</div>347 </div>348 <div class="nav-item inactive">349 <svg viewBox="0 0 24 24"><rect x="4" y="6" width="16" height="2" fill="#666"/><rect x="4" y="11" width="16" height="2" fill="#666"/><rect x="4" y="16" width="16" height="2" fill="#666"/></svg>350 <div class="nav-label">Menu</div>351 </div>352 </div>353 <div class="gesture-bar"></div>354 355</div>356</body>357</html>