GD-ML/AndroidCode
13.4k
1<html>2<head>3<meta charset="UTF-8">4<title>Amazon Compare - Nike Shoes</title>5<style>6 body { margin: 0; padding: 0; background: transparent; font-family: Arial, Helvetica, sans-serif; }7 #render-target {8 width: 1080px;9 height: 2400px;10 position: relative;11 overflow: hidden;12 background: #ffffff;13 border-radius: 0;14 }15 16 /* Top gradient header */17 .top-gradient {18 width: 100%;19 height: 210px;20 background: linear-gradient(180deg, #bde7df 0%, #a2e1d9 60%, #a8e1d7 100%);21 padding-top: 28px;22 box-sizing: border-box;23 }24 25 /* Status row (time and icons simplified) */26 .status-row {27 height: 36px;28 display: flex;29 align-items: center;30 padding: 0 28px;31 color: #2b2b2b;32 font-size: 28px;33 justify-content: space-between;34 }35 36 /* Search bar */37 .search-wrap {38 padding: 10px 24px 16px 24px;39 }40 .search-bar {41 height: 76px;42 background: #ffffff;43 border: 1px solid #dcdcdc;44 border-radius: 40px;45 display: flex;46 align-items: center;47 padding: 0 20px;48 gap: 16px;49 box-shadow: 0 1px 0 rgba(0,0,0,0.04) inset;50 }51 .search-bar input {52 border: none;53 outline: none;54 flex: 1;55 font-size: 30px;56 color: #222;57 }58 .icon {59 width: 34px; height: 34px;60 display: inline-flex; align-items: center; justify-content: center;61 color: #555;62 }63 .icon svg { width: 34px; height: 34px; fill: #333; }64 65 /* Tabs */66 .tabs {67 height: 84px;68 display: flex;69 align-items: center;70 padding: 0 24px;71 border-bottom: 1px solid #eee;72 background: #fff;73 }74 .tab {75 margin-right: 48px;76 font-size: 32px;77 color: #666;78 position: relative;79 }80 .tab.active { color: #e47911; font-weight: 700; }81 .tab.active::after {82 content: "";83 position: absolute; left: 0; right: 0; bottom: -20px;84 height: 6px; background: #e47911; border-radius: 3px;85 }86 .tabs .right-icon { margin-left: auto; }87 88 /* Content area */89 .content {90 padding: 24px;91 }92 .section-title {93 font-size: 44px;94 font-weight: 800;95 color: #111;96 margin: 12px 0 24px 0;97 }98 99 /* Product compare strip */100 .product-strip {101 display: grid;102 grid-template-columns: repeat(3, 1fr);103 gap: 18px;104 }105 .prod {106 text-align: left;107 }108 .img {109 width: 100%;110 height: 200px;111 background: #E0E0E0;112 border: 1px solid #BDBDBD;113 display: flex; align-items: center; justify-content: center;114 color: #757575; font-size: 26px;115 border-radius: 8px;116 }117 .prod .label-small {118 font-size: 26px; color: #111; line-height: 1.2; margin-top: 12px;119 font-weight: 700;120 }121 .prod .sub {122 font-size: 26px; color: #2a2a2a;123 }124 125 /* Comparison table */126 .compare-table {127 margin-top: 18px;128 border: 1px solid #eee;129 border-radius: 10px;130 overflow: hidden;131 }132 .row {133 display: grid;134 grid-template-columns: 220px 1fr 1fr 1fr;135 border-top: 1px solid #f0f0f0;136 background: #fff;137 }138 .row:first-child { border-top: none; }139 .cell {140 padding: 22px;141 font-size: 28px;142 color: #222;143 border-left: 1px solid #f0f0f0;144 }145 .cell:first-child { border-left: none; background:#fafafa; color:#555; font-weight:700; }146 .rating-stars { color: #f5a623; font-size: 28px; }147 .muted { color: #6b6b6b; font-size: 26px; }148 149 .badge-line {150 display: flex; align-items: center; gap: 10px; flex-wrap: wrap;151 }152 .badge {153 background: #232f3e; color: #fff; font-size: 22px; padding: 6px 10px; border-radius: 8px;154 }155 .badge.light { background: #eaf5ff; color: #0077cc; }156 .seller { color: #333; font-size: 26px; }157 158 /* See more details */159 .see-more {160 margin-top: 18px;161 border: 1px solid #e9e9e9;162 border-radius: 12px;163 padding: 28px;164 display: flex; align-items: center; justify-content: center;165 color: #333; font-size: 36px; gap: 12px;166 }167 168 /* Customers also bought */169 .also-title {170 font-size: 46px; font-weight: 800; margin: 40px 0 16px 0; color: #111;171 }172 .gallery {173 display: grid;174 grid-template-columns: 1fr 1fr;175 gap: 22px;176 }177 .tile {178 height: 440px;179 background: #E0E0E0;180 border: 1px solid #BDBDBD;181 border-radius: 10px;182 display:flex; align-items:center; justify-content:center; color:#777; font-size:28px;183 }184 185 /* Bottom navigation */186 .bottom-nav {187 position: absolute;188 bottom: 0;189 left: 0; right: 0;190 height: 140px;191 background: #ffffff;192 border-top: 1px solid #e5e5e5;193 display: flex;194 justify-content: space-around;195 align-items: center;196 }197 .nav-item {198 display: flex; flex-direction: column; align-items: center; gap: 8px;199 color: #111;200 font-size: 26px;201 }202 .nav-item .ni {203 width: 44px; height: 44px;204 }205 .gesture-line {206 position: absolute;207 bottom: 150px; left: 50%;208 transform: translateX(-50%);209 width: 520px; height: 10px; background: #c6c6c6; border-radius: 6px;210 opacity: .7;211 }212</style>213</head>214<body>215<div id="render-target">216 217 <div class="top-gradient">218 <div class="status-row">219 <div>11:51</div>220 <div style="display:flex; gap:16px; align-items:center; color:#333;">221 <span>15°</span>222 <span>•</span>223 <span style="width:16px; height:16px; background:#333; border-radius:50%; display:inline-block;"></span>224 </div>225 </div>226 227 <div class="search-wrap">228 <div class="search-bar">229 <div class="icon">230 <svg viewBox="0 0 24 24"><path d="M4 12l4-4v3h7v2H8v3z"/></svg>231 </div>232 <div class="icon">233 <svg viewBox="0 0 24 24"><path d="M10 2a8 8 0 105.3 14L22 22l-2 2-6.7-6A8 8 0 0010 2zm0 2a6 6 0 110 12A6 6 0 0110 4z"/></svg>234 </div>235 <input value="nike shoes for men" />236 <div class="icon">237 <svg viewBox="0 0 24 24"><path d="M5 7h2V5h2V3H7a2 2 0 00-2 2v2zm12 0h2V5a2 2 0 00-2-2h-2v2h2v2zM5 17v2a2 2 0 002 2h2v-2H7v-2H5zm12 0h2v2a2 2 0 01-2 2h-2v-2h2v-2z"/></svg>238 </div>239 </div>240 </div>241 </div>242 243 <div class="tabs">244 <div class="tab">Details</div>245 <div class="tab active">Compare</div>246 <div class="tab">Reviews</div>247 <div class="right-icon icon">248 <svg viewBox="0 0 24 24"><path d="M7 14l5-5 5 5z"/></svg>249 </div>250 </div>251 252 <div class="content">253 <div class="section-title">Compare with similar items</div>254 255 <div class="product-strip">256 <div class="prod">257 <div class="img">[IMG: Black Nike Shoe]</div>258 <div class="label-small">This item Nike Mens Air Zoom Vomero 16 R...</div>259 </div>260 <div class="prod">261 <div class="img">[IMG: Blue Nike Shoe]</div>262 <div class="label-small">Nike Mens Air Zoom Rival Fly 3...</div>263 </div>264 <div class="prod">265 <div class="img">[IMG: Black Nike Shoe]</div>266 <div class="label-small">Nike Mens Air Zoom Pegasus 4...</div>267 </div>268 </div>269 270 <div class="compare-table">271 <div class="row">272 <div class="cell">RATING</div>273 <div class="cell">274 <div class="rating-stars">★★★★★</div>275 <div class="muted">289 reviews</div>276 </div>277 <div class="cell">278 <div class="rating-stars">★★★★★</div>279 <div class="muted">33 reviews</div>280 </div>281 <div class="cell">282 <div class="rating-stars">★★★★☆</div>283 <div class="muted">49 reviews</div>284 </div>285 </div>286 287 <div class="row">288 <div class="cell">PRICE</div>289 <div class="cell"><strong>₹10,154.30</strong></div>290 <div class="cell"><strong>₹7,284.00</strong></div>291 <div class="cell"><strong>₹8,327.00</strong></div>292 </div>293 294 <div class="row">295 <div class="cell">SHIPPING</div>296 <div class="cell">297 <div class="badge-line">298 <span class="badge">Fulfilled</span>299 <span class="badge light">FREE Delivery</span>300 </div>301 </div>302 <div class="cell">303 <div class="badge-line">304 <span class="badge">Fulfilled</span>305 <span class="badge light">FREE Delivery</span>306 </div>307 </div>308 <div class="cell">309 <div class="badge-line">310 <span class="badge">Fulfilled</span>311 <span class="badge light">FREE Delivery</span>312 </div>313 </div>314 </div>315 316 <div class="row">317 <div class="cell">SOLD BY</div>318 <div class="cell"><div class="seller">Sri Sai Enterprises Store</div></div>319 <div class="cell"><div class="seller">Cocoblu Retail</div></div>320 <div class="cell"><div class="seller">Cocoblu Retail</div></div>321 </div>322 </div>323 324 <div class="see-more">325 <span class="icon"><svg viewBox="0 0 24 24"><path d="M7 10l5 5 5-5z"/></svg></span>326 See more details327 </div>328 329 <div class="also-title">Customers who bought this item also bought</div>330 331 <div class="gallery">332 <div class="tile">[IMG: White Nike Shoe]</div>333 <div class="tile">[IMG: Grey Nike Shoe]</div>334 </div>335 </div>336 337 <div class="gesture-line"></div>338 339 <div class="bottom-nav">340 <div class="nav-item">341 <div class="ni icon"><svg viewBox="0 0 24 24"><path d="M12 3l9 8h-3v9H6v-9H3z"/></svg></div>342 <div>Home</div>343 </div>344 <div class="nav-item">345 <div class="ni icon"><svg viewBox="0 0 24 24"><path d="M12 12a5 5 0 100-10 5 5 0 000 10zm-7 9v-2a7 7 0 0114 0v2z"/></svg></div>346 <div>You</div>347 </div>348 <div class="nav-item">349 <div class="ni icon"><svg viewBox="0 0 24 24"><path d="M12 6v4l3 3-1.4 1.4L10 11V6zM6 12a6 6 0 1111.7 2h-2.2A4 4 0 1010 12z"/></svg></div>350 <div>More</div>351 </div>352 <div class="nav-item">353 <div class="ni icon"><svg viewBox="0 0 24 24"><path d="M7 6h14l-2 9H9L7 6zm-2 0H2V4h3l3.6 9.6L8 16a2 2 0 102 2 2 2 0 00-2-2h8a2 2 0 102 2 2 2 0 00-2-2"/></svg></div>354 <div>Cart</div>355 </div>356 <div class="nav-item">357 <div class="ni icon"><svg viewBox="0 0 24 24"><path d="M3 6h18v2H3zm0 5h18v2H3zm0 5h18v2H3z"/></svg></div>358 <div>Menu</div>359 </div>360 </div>361 362</div>363</body>364</html>