GD-ML/AndroidCode
13.4k
1<!DOCTYPE html>2<html lang="en">3<head>4<meta charset="UTF-8">5<title>Compare Products - Mockup</title>6<meta name="viewport" content="width=1440, initial-scale=1.0">7<style>8 body { margin: 0; padding: 0; background: transparent; font-family: Arial, Helvetica, sans-serif; color: #333; }9 #render-target {10 width: 1440px;11 height: 3120px;12 position: relative;13 overflow: hidden;14 background: #ffffff;15 }16 17 /* Top status bar (system) */18 .status-bar {19 height: 120px;20 background: #dcdcdc;21 padding: 0 40px;22 display: flex;23 align-items: center;24 justify-content: space-between;25 color: #707070;26 font-size: 44px;27 letter-spacing: 1px;28 }29 .status-icons {30 display: flex; align-items: center; gap: 28px;31 }32 .dot { width: 14px; height: 14px; background: #9e9e9e; border-radius: 50%; display: inline-block; }33 34 /* App header */35 .app-bar {36 height: 160px;37 display: flex;38 align-items: center;39 justify-content: space-between;40 padding: 0 60px;41 }42 .icon-btn { width: 72px; height: 72px; display: flex; align-items: center; justify-content: center; cursor: default; }43 .right-icons { display: flex; align-items: center; gap: 40px; }44 45 /* Title row */46 .title-row {47 padding: 10px 60px 0 60px;48 display: flex; align-items: center; gap: 24px;49 }50 .title {51 font-size: 58px;52 font-weight: 800;53 letter-spacing: 1px;54 color: #2e2e2e;55 }56 .rule {57 height: 6px; background: #e7e7e7; flex: 1;58 }59 60 /* Compare grid (cards) */61 .compare-grid {62 margin: 40px 80px 0 80px;63 padding: 0 20px;64 display: grid;65 grid-template-columns: 1fr 1fr;66 column-gap: 120px;67 }68 .product-card .img {69 width: 100%; height: 460px;70 background: #E0E0E0; border: 1px solid #BDBDBD;71 display: flex; align-items: center; justify-content: center;72 color: #757575; font-size: 36px;73 }74 .product-name {75 margin-top: 24px;76 font-size: 42px;77 color: #404040;78 }79 80 .section-divider {81 margin: 36px 0 0 0;82 height: 2px; background: #e8eef2;83 }84 85 /* Comparison table rows */86 .table {87 margin: 0 80px;88 border-top: 2px solid #e2e8ee;89 }90 .row {91 display: grid;92 grid-template-columns: 1fr 1fr;93 column-gap: 120px;94 padding: 28px 40px;95 align-items: center;96 border-bottom: 2px solid #edf2f6;97 }98 .price-tag {99 position: relative;100 display: inline-block;101 background: #ffe500;102 color: #222;103 font-weight: 800;104 padding: 18px 30px;105 font-size: 44px;106 letter-spacing: .5px;107 border-radius: 8px 0 0 8px;108 }109 .price-tag:after {110 content: "";111 position: absolute;112 right: -36px; top: 0;113 border-left: 36px solid #ffe500;114 border-top: 72px solid transparent;115 border-bottom: 72px solid transparent;116 }117 118 .rating {119 display: flex; align-items: center; gap: 14px;120 font-size: 40px;121 }122 .rating .text { color: #0b78d0; font-weight: 700; }123 .spec {124 font-size: 42px; color: #444;125 }126 127 /* Buttons */128 .btn {129 background: #ffe500;130 color: #1d1d1d;131 font-weight: 900;132 border-radius: 16px;133 padding: 30px 40px;134 display: inline-flex;135 align-items: center;136 justify-content: center;137 gap: 18px;138 font-size: 42px;139 box-shadow: inset 0 -2px 0 rgba(0,0,0,0.08);140 }141 .btn-row .btn { width: 520px; }142 .btn-row { padding: 24px 0; }143 144 /* Customers also bought */145 .section-title {146 padding: 24px 60px;147 font-size: 54px; font-weight: 800; color: #2e2e2e;148 }149 .also-grid {150 margin: 0 60px;151 display: grid;152 grid-template-columns: 1fr 1fr;153 gap: 36px;154 }155 .thumb {156 height: 320px; background: #E0E0E0; border: 1px solid #BDBDBD;157 display: flex; align-items: center; justify-content: center; color: #757575; font-size: 34px;158 }159 160 /* Sticky bottom bar */161 .sticky-cta {162 position: absolute;163 left: 40px; right: 40px;164 bottom: 200px;165 background: #ffffff;166 border-radius: 28px;167 box-shadow: 0 18px 40px rgba(0,0,0,0.15);168 padding: 24px;169 display: grid;170 grid-template-columns: 180px 1fr;171 align-items: center;172 gap: 24px;173 }174 .fav-box {175 height: 180px;176 border: 4px solid #e2e8ee;177 border-radius: 22px;178 display: flex; align-items: center; justify-content: center;179 }180 .sticky-cta .big-btn {181 height: 180px; font-size: 56px; border-radius: 22px;182 }183 184 /* Home indicator */185 .home-indicator {186 position: absolute;187 bottom: 84px;188 left: 50%; transform: translateX(-50%);189 width: 380px; height: 16px;190 background: #000; border-radius: 10px;191 opacity: 0.85;192 }193 /* Utility */194 .muted { color: #a9b3bf; }195</style>196</head>197<body>198<div id="render-target">199 200 <!-- Status bar -->201 <div class="status-bar">202 <div>1:26</div>203 <div class="status-icons">204 <span class="dot"></span>205 <span class="dot"></span>206 <span class="dot"></span>207 <span class="dot"></span>208 </div>209 </div>210 211 <!-- App bar -->212 <div class="app-bar">213 <div class="icon-btn" title="Back">214 <svg width="64" height="64" viewBox="0 0 24 24" fill="none" stroke="#1f1f1f" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">215 <polyline points="15 18 9 12 15 6"></polyline>216 </svg>217 </div>218 <div class="right-icons">219 <div class="icon-btn" title="Search">220 <svg width="64" height="64" viewBox="0 0 24 24" fill="none" stroke="#1f1f1f" stroke-width="2">221 <circle cx="11" cy="11" r="7"></circle>222 <line x1="20" y1="20" x2="16.5" y2="16.5"></line>223 </svg>224 </div>225 <div class="icon-btn" title="Wishlist">226 <svg width="64" height="64" viewBox="0 0 24 24" fill="none" stroke="#1f1f1f" stroke-width="2">227 <path d="M20.8 6.3a5.5 5.5 0 0 0-7.8 0L12 7.3l-1-1a5.5 5.5 0 1 0-7.8 7.8l8.8 8.6 8.8-8.6a5.5 5.5 0 0 0 0-7.8z"></path>228 </svg>229 </div>230 <div class="icon-btn" title="Cart">231 <svg width="64" height="64" viewBox="0 0 24 24" fill="none" stroke="#1f1f1f" stroke-width="2">232 <circle cx="9" cy="21" r="1.8"></circle>233 <circle cx="18" cy="21" r="1.8"></circle>234 <path d="M1 3h3l2.4 12.3a2 2 0 0 0 2 1.7h8.6a2 2 0 0 0 2-1.6L22 7H6"></path>235 </svg>236 </div>237 </div>238 </div>239 240 <!-- Title -->241 <div class="title-row">242 <div class="title">COMPARE PRODUCTS</div>243 <div class="rule"></div>244 <div class="icon-btn" title="Collapse">245 <svg width="48" height="48" viewBox="0 0 24 24" fill="none" stroke="#6b6b6b" stroke-width="2">246 <polyline points="6 14 12 8 18 14"></polyline>247 </svg>248 </div>249 </div>250 251 <!-- Product preview cards -->252 <div class="compare-grid">253 <div class="product-card">254 <div class="img">[IMG: Black Running Shoe]</div>255 <div class="product-name">Jog Flow 100 - 8733469</div>256 </div>257 <div class="product-card">258 <div class="img">[IMG: Navy Running Shoe]</div>259 <div class="product-name">Run Active Men</div>260 </div>261 </div>262 263 <div class="table">264 <!-- Price row -->265 <div class="row">266 <div><span class="price-tag">₹1,799</span></div>267 <div><span class="price-tag">₹2,299</span></div>268 </div>269 270 <!-- Ratings row -->271 <div class="row">272 <div class="rating">273 <svg width="36" height="36" viewBox="0 0 24 24" fill="#ffc107">274 <polygon points="12 2 15.09 8.26 22 9.27 17 14.14 18.18 21.02 12 17.77 5.82 21.02 7 14.14 2 9.27 8.91 8.26 12 2"/>275 </svg>276 <span class="text">4.5 (74)</span>277 </div>278 <div class="rating">279 <svg width="36" height="36" viewBox="0 0 24 24" fill="#ffc107">280 <polygon points="12 2 15.09 8.26 22 9.27 17 14.14 18.18 21.02 12 17.77 5.82 21.02 7 14.14 2 9.27 8.91 8.26 12 2"/>281 </svg>282 <span class="text">4.4 (15.6k)</span>283 </div>284 </div>285 286 <!-- Spec rows -->287 <div class="row">288 <div class="spec">4/5</div>289 <div class="spec">4/5</div>290 </div>291 <div class="row">292 <div class="spec">5/5</div>293 <div class="spec">4/5</div>294 </div>295 <div class="row">296 <div class="spec">3/5</div>297 <div class="spec">5/5</div>298 </div>299 300 <!-- Add to cart row for each column -->301 <div class="row btn-row">302 <div>303 <button class="btn">304 ADD TO CART305 <svg width="42" height="42" viewBox="0 0 24 24" fill="none" stroke="#1b1b1b" stroke-width="2">306 <circle cx="9" cy="21" r="1.6"></circle>307 <circle cx="18" cy="21" r="1.6"></circle>308 <path d="M1 3h3l2.4 12.3a2 2 0 0 0 2 1.7h8.6a2 2 0 0 0 2-1.6L22 7H6"></path>309 </svg>310 </button>311 </div>312 <div>313 <button class="btn">314 ADD TO CART315 <svg width="42" height="42" viewBox="0 0 24 24" fill="none" stroke="#1b1b1b" stroke-width="2">316 <circle cx="9" cy="21" r="1.6"></circle>317 <circle cx="18" cy="21" r="1.6"></circle>318 <path d="M1 3h3l2.4 12.3a2 2 0 0 0 2 1.7h8.6a2 2 0 0 0 2-1.6L22 7H6"></path>319 </svg>320 </button>321 </div>322 </div>323 </div>324 325 <!-- Customers also bought -->326 <div class="section-title">CUSTOMERS ALSO BOUGHT</div>327 <div class="also-grid">328 <div class="thumb">[IMG: Product Suggestion 1]</div>329 <div class="thumb">[IMG: Product Suggestion 2]</div>330 </div>331 332 <!-- Sticky bottom action -->333 <div class="sticky-cta">334 <div class="fav-box">335 <svg width="88" height="88" viewBox="0 0 24 24" fill="none" stroke="#0b78d0" stroke-width="2">336 <path d="M20.8 6.3a5.5 5.5 0 0 0-7.8 0L12 7.3l-1-1a5.5 5.5 0 1 0-7.8 7.8l8.8 8.6 8.8-8.6a5.5 5.5 0 0 0 0-7.8z"></path>337 <path d="M12 6v8"></path>338 <path d="M8 10h8"></path>339 </svg>340 </div>341 <button class="btn big-btn">342 ADD TO CART343 <svg width="52" height="52" viewBox="0 0 24 24" fill="none" stroke="#1b1b1b" stroke-width="2">344 <circle cx="9" cy="21" r="1.8"></circle>345 <circle cx="18" cy="21" r="1.8"></circle>346 <path d="M1 3h3l2.4 12.3a2 2 0 0 0 2 1.7h8.6a2 2 0 0 0 2-1.6L22 7H6"></path>347 </svg>348 </button>349 </div>350 351 <!-- Home indicator -->352 <div class="home-indicator"></div>353</div>354</body>355</html>