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=1440, initial-scale=1.0" />6<title>Product Comparison - Shoes</title>7<style>8 body { margin: 0; padding: 0; background: transparent; font-family: Arial, Helvetica, sans-serif; color: #1f2a37; }9 #render-target {10 width: 1440px;11 height: 3120px;12 position: relative;13 overflow: hidden;14 background: #ffffff;15 }16 17 /* Top status/OS bar (visual only) */18 .os-bar {19 position: absolute;20 top: 0;21 left: 0;22 width: 1440px;23 height: 120px;24 background: #e7e7e7;25 }26 27 /* App header */28 .app-header {29 position: absolute;30 top: 120px;31 left: 0;32 width: 1440px;33 height: 120px;34 background: #ffffff;35 }36 .app-header .inner {37 height: 100%;38 display: flex;39 align-items: center;40 padding: 0 60px;41 justify-content: space-between;42 }43 .icon-btn {44 width: 72px;45 height: 72px;46 display: inline-flex;47 align-items: center;48 justify-content: center;49 cursor: default;50 }51 .icon {52 width: 48px;53 height: 48px;54 stroke: #1f2a37;55 fill: none;56 stroke-width: 30;57 }58 59 /* Comparison section */60 .comparison {61 position: absolute;62 top: 260px;63 left: 0;64 width: 1440px;65 }66 67 .product-images {68 width: 100%;69 padding: 0 80px;70 box-sizing: border-box;71 display: grid;72 grid-template-columns: 420px 430px 430px;73 column-gap: 40px;74 align-items: stretch;75 }76 .product-images .spacer { /* left spacer aligns with labels column */77 height: 560px;78 }79 .img-box {80 height: 560px;81 background: #E0E0E0;82 border: 1px solid #BDBDBD;83 display: flex;84 align-items: center;85 justify-content: center;86 color: #757575;87 font-size: 34px;88 letter-spacing: 0.5px;89 }90 91 .comparison-grid {92 margin-top: 20px;93 width: 100%;94 padding: 0 80px;95 box-sizing: border-box;96 display: grid;97 grid-template-columns: 420px 430px 430px;98 column-gap: 40px;99 }100 101 .row {102 display: contents;103 }104 105 .cell {106 padding: 46px 36px;107 border-bottom: 2px solid #e6ebef;108 font-size: 42px;109 line-height: 1.2;110 }111 112 .label {113 font-weight: 700;114 color: #2b3a4a;115 }116 117 .spec {118 background: #f3f9fe;119 }120 121 .price-badge {122 display: inline-block;123 background: #ffe317;124 color: #0f1e2d;125 font-weight: 800;126 font-size: 40px;127 padding: 18px 28px;128 border-radius: 10px;129 }130 131 .reviews {132 display: inline-flex;133 align-items: center;134 gap: 18px;135 color: #1976d2;136 font-weight: 700;137 }138 .star {139 width: 40px;140 height: 40px;141 fill: #ffb400;142 vertical-align: middle;143 }144 145 .v-sep {146 position: absolute;147 top: 260px;148 left: 560px; /* 80 padding + 420 label + 60? adjust below with calc */149 }150 151 .cta-row {152 display: flex;153 gap: 40px;154 }155 .cta {156 display: inline-flex;157 align-items: center;158 justify-content: center;159 gap: 18px;160 background: #ffe317;161 color: #0f1e2d;162 font-weight: 800;163 font-size: 42px;164 border-radius: 22px;165 padding: 30px 60px;166 border: 0;167 box-shadow: 0 3px 0 #d9c700 inset;168 }169 .cta svg { width: 46px; height: 46px; stroke: #0f1e2d; stroke-width: 24; fill: none; }170 171 /* Customers also bought */172 .section-title {173 margin: 60px 80px 24px 80px;174 font-weight: 800;175 font-size: 54px;176 letter-spacing: 1px;177 color: #2b3a4a;178 }179 180 .also-bought {181 margin: 0 80px;182 display: grid;183 grid-template-columns: 1fr 1fr;184 gap: 36px;185 }186 187 .thumb {188 position: relative;189 height: 420px;190 background: #E0E0E0;191 border: 1px solid #BDBDBD;192 display: flex;193 align-items: center;194 justify-content: center;195 color: #757575;196 font-size: 34px;197 }198 .ribbon {199 position: absolute;200 top: 18px;201 left: 18px;202 background: #0084ff;203 color: #fff;204 font-weight: 800;205 font-size: 28px;206 padding: 10px 18px;207 border-radius: 6px;208 }209 .ribbon.green { background: #2e7d32; }210 211 /* Sticky bottom bar */212 .sticky-bar {213 position: absolute;214 left: 60px;215 right: 60px;216 bottom: 80px;217 background: #ffffff;218 border-radius: 30px;219 box-shadow: 0 8px 24px rgba(0,0,0,0.1);220 padding: 26px;221 display: flex;222 align-items: center;223 gap: 26px;224 }225 .fav-box {226 width: 180px;227 height: 140px;228 border-radius: 20px;229 background: #f7fafc;230 border: 4px solid #dbe6f3;231 display: flex;232 align-items: center;233 justify-content: center;234 }235 .fav-box svg { width: 72px; height: 72px; stroke: #1e88e5; stroke-width: 26; fill: none; }236 .sticky-cta {237 flex: 1;238 height: 140px;239 background: #ffe317;240 border: none;241 border-radius: 20px;242 font-size: 56px;243 font-weight: 900;244 color: #0f1e2d;245 letter-spacing: 1px;246 display: flex;247 align-items: center;248 justify-content: center;249 gap: 26px;250 box-shadow: 0 3px 0 #d9c700 inset;251 }252 .sticky-cta svg { width: 62px; height: 62px; stroke: #0f1e2d; stroke-width: 26; fill: none; }253 254 /* Fine tune grid lines (visual separators) */255 .comparison-grid .cell:not(.label):not(.spec) { background: #ffffff; }256 .comparison-grid .cell.spec { background: #eef6fb; }257 258 /* Helper for small gray subtitle text */259 .muted { color: #6b7b8a; font-weight: 600; }260 261 /* Ensure enough content height */262 .spacer-bottom { height: 720px; }263</style>264</head>265<body>266<div id="render-target">267 268 <!-- OS status area -->269 <div class="os-bar"></div>270 271 <!-- Header with back/search/wishlist/cart -->272 <div class="app-header">273 <div class="inner">274 <div class="icon-btn" title="Back">275 <svg class="icon" viewBox="0 0 512 512">276 <path d="M320 96 L160 256 L320 416" />277 </svg>278 </div>279 <div style="display:flex; gap:36px;">280 <div class="icon-btn" title="Search">281 <svg class="icon" viewBox="0 0 512 512">282 <circle cx="224" cy="224" r="160"></circle>283 <line x1="344" y1="344" x2="456" y2="456"></line>284 </svg>285 </div>286 <div class="icon-btn" title="Wishlist">287 <svg class="icon" viewBox="0 0 512 512">288 <path d="M256 440 C256 440 96 344 96 216 C96 154 144 112 200 112 C237 112 256 136 256 136 C256 136 275 112 312 112 C368 112 416 154 416 216 C416 344 256 440 256 440 Z" />289 </svg>290 </div>291 <div class="icon-btn" title="Cart">292 <svg class="icon" viewBox="0 0 512 512">293 <circle cx="192" cy="432" r="40"></circle>294 <circle cx="352" cy="432" r="40"></circle>295 <path d="M88 96 H132 L170 320 H412 L456 176 H192" />296 </svg>297 </div>298 </div>299 </div>300 </div>301 302 <!-- Comparison images row -->303 <div class="comparison">304 <div class="product-images">305 <div class="spacer"></div>306 <div class="img-box">[IMG: Grey running shoe]</div>307 <div class="img-box">[IMG: Black running shoe]</div>308 </div>309 310 <!-- Comparison table -->311 <div class="comparison-grid">312 <!-- Name -->313 <div class="row">314 <div class="cell label">Name</div>315 <div class="cell spec">Men Run 100</div>316 <div class="cell">Jog Flow 100</div>317 </div>318 319 <!-- Price -->320 <div class="row">321 <div class="cell label">Price</div>322 <div class="cell spec"><span class="price-badge">₹899</span></div>323 <div class="cell"><span class="price-badge">₹1,799</span></div>324 </div>325 326 <!-- Reviews -->327 <div class="row">328 <div class="cell label">Reviews</div>329 <div class="cell spec">330 <span class="reviews">331 <svg class="star" viewBox="0 0 24 24"><path d="M12 2l3.09 6.26L22 9.27l-5 4.87L18.18 22 12 18.6 5.82 22 7 14.14l-5-4.87 6.91-1.01z"/></svg>332 4.4 (17.5k)333 </span>334 </div>335 <div class="cell">336 <span class="reviews">337 <svg class="star" viewBox="0 0 24 24"><path d="M12 2l3.09 6.26L22 9.27l-5 4.87L18.18 22 12 18.6 5.82 22 7 14.14l-5-4.87 6.91-1.01z"/></svg>338 4.5 (74)339 </span>340 </div>341 </div>342 343 <!-- Foam -->344 <div class="row">345 <div class="cell label">Foam</div>346 <div class="cell spec">2/5</div>347 <div class="cell">4/5</div>348 </div>349 350 <!-- Lightweight -->351 <div class="row">352 <div class="cell label">Lightweight</div>353 <div class="cell spec">5/5</div>354 <div class="cell">5/5</div>355 </div>356 357 <!-- Grip -->358 <div class="row">359 <div class="cell label">Grip</div>360 <div class="cell spec">3/5</div>361 <div class="cell">3/5</div>362 </div>363 364 <!-- Add to cart buttons row -->365 <div class="row">366 <div class="cell label"></div>367 <div class="cell spec">368 <button class="cta">369 ADD TO CART370 <svg viewBox="0 0 512 512">371 <circle cx="192" cy="432" r="36"></circle>372 <circle cx="352" cy="432" r="36"></circle>373 <path d="M88 96 H132 L170 320 H412 L456 176 H192" />374 </svg>375 </button>376 </div>377 <div class="cell">378 <button class="cta">379 ADD TO CART380 <svg viewBox="0 0 512 512">381 <circle cx="192" cy="432" r="36"></circle>382 <circle cx="352" cy="432" r="36"></circle>383 <path d="M88 96 H132 L170 320 H412 L456 176 H192" />384 </svg>385 </button>386 </div>387 </div>388 </div>389 390 <!-- Customers also bought -->391 <div class="section-title">CUSTOMERS ALSO BOUGHT</div>392 <div class="also-bought">393 <div class="thumb">394 <div class="ribbon">BESTSELLER</div>395 [IMG: Men track pants]396 </div>397 <div class="thumb">398 <div class="ribbon green">ECO DESIGN</div>399 [IMG: Small massage device]400 </div>401 </div>402 403 <div class="spacer-bottom"></div>404 </div>405 406 <!-- Bottom sticky cart bar -->407 <div class="sticky-bar">408 <div class="fav-box">409 <svg viewBox="0 0 512 512">410 <path d="M256 440 C256 440 96 344 96 216 C96 154 144 112 200 112 C237 112 256 136 256 136 C256 136 275 112 312 112 C368 112 416 154 416 216 C416 344 256 440 256 440 Z" />411 <line x1="256" y1="172" x2="256" y2="296"></line>412 <line x1="196" y1="236" x2="316" y2="236"></line>413 </svg>414 </div>415 <button class="sticky-cta">416 ADD TO CART417 <svg viewBox="0 0 512 512">418 <circle cx="192" cy="432" r="40"></circle>419 <circle cx="352" cy="432" r="40"></circle>420 <path d="M88 96 H132 L170 320 H412 L456 176 H192" />421 </svg>422 </button>423 </div>424 425</div>426</body>427</html>