GD-ML/AndroidCode
13.4k
1<!DOCTYPE html>2<html lang="en">3<head>4<meta charset="UTF-8">5<title>Product Detail - Size & Offers</title>6<meta name="viewport" content="width=device-width, initial-scale=1.0">7<style>8 body { margin: 0; padding: 0; background: transparent; font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; }9 #render-target {10 position: relative;11 width: 1440px;12 height: 3120px;13 overflow: hidden;14 background: #ffffff;15 color: #222;16 }17 18 /* Top status bar */19 .status-bar {20 height: 120px;21 background: #1e1e1f;22 color: #fff;23 display: flex;24 align-items: center;25 padding: 0 48px;26 font-size: 46px;27 letter-spacing: 0.5px;28 box-sizing: border-box;29 }30 .status-right {31 margin-left: auto;32 display: flex;33 align-items: center;34 gap: 34px;35 }36 .status-dot {37 width: 18px; height: 18px; border-radius: 50%; background: #fff; opacity: 0.9;38 }39 40 /* App header */41 .app-header {42 height: 160px;43 background: #1e1e1f;44 display: flex;45 align-items: center;46 padding: 0 36px;47 box-sizing: border-box;48 color: #fff;49 border-bottom-left-radius: 22px;50 border-bottom-right-radius: 22px;51 }52 .icon-btn {53 width: 96px; height: 96px; display: inline-flex; align-items: center; justify-content: center; cursor: default;54 }55 .header-actions {56 margin-left: auto;57 display: flex; gap: 18px; align-items: center;58 }59 .separator-shadow {60 height: 28px; background: transparent; box-shadow: 0 10px 18px rgba(0,0,0,0.12) inset;61 }62 63 /* Content */64 .content {65 padding: 48px 60px 260px;66 box-sizing: border-box;67 }68 .section {69 margin-bottom: 56px;70 }71 72 /* Size section */73 .size-head {74 display: flex;75 align-items: center;76 font-size: 54px;77 font-weight: 700;78 color: #222;79 margin-bottom: 28px;80 }81 .size-head .guide {82 margin-left: auto;83 font-size: 46px;84 font-weight: 700;85 color: #e91e63;86 }87 .size-grid {88 display: grid;89 grid-template-columns: repeat(4, 1fr);90 gap: 28px;91 max-width: 1310px;92 }93 .size-pill {94 border: 3px solid #bdbdbd;95 border-radius: 28px;96 padding: 34px 24px;97 text-align: center;98 font-size: 44px;99 font-weight: 600;100 color: #333;101 background: #fff;102 }103 .muted-note {104 font-size: 44px;105 color: #555;106 margin-top: 36px;107 }108 .muted-note .link {109 color: #e91e63;110 font-weight: 700;111 margin-left: 10px;112 }113 114 /* Offers */115 .offers-title {116 font-size: 58px;117 font-weight: 800;118 margin: 56px 0 28px;119 }120 .offers-row {121 display: flex;122 gap: 28px;123 flex-wrap: wrap;124 }125 .offer-card {126 flex: 1 1 48%;127 min-width: 620px;128 background: #fff;129 border-radius: 26px;130 border: 1px solid #eee;131 box-shadow: 0 6px 18px rgba(0,0,0,0.08);132 padding: 36px 40px;133 box-sizing: border-box;134 display: flex;135 align-items: center;136 gap: 28px;137 }138 .offer-logo {139 width: 96px; height: 96px; background: #E0E0E0; border: 1px solid #BDBDBD; border-radius: 50%;140 display: flex; align-items: center; justify-content: center; color: #757575; font-size: 24px;141 }142 .offer-text {143 flex: 1;144 }145 .offer-title {146 font-size: 46px; font-weight: 800; color: #333; margin-bottom: 8px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis;147 }148 .offer-sub {149 font-size: 38px; color: #666;150 }151 .offer-code {152 margin-left: 20px;153 border: 2px dashed #d6d6d6;154 color: #8a8a8a;155 font-weight: 700;156 padding: 20px 26px;157 border-radius: 16px;158 font-size: 36px;159 white-space: nowrap;160 }161 162 /* Ship to */163 .divider {164 height: 2px; background: #eee; margin: 48px 0;165 }166 .ship-title {167 font-size: 54px; font-weight: 800; margin-bottom: 18px;168 }169 .ship-input {170 width: 100%;171 border: 2px solid #e6e6e6;172 border-radius: 18px;173 height: 120px;174 box-sizing: border-box;175 padding: 0 24px;176 font-size: 44px;177 color: #444;178 background: #fff;179 }180 181 /* Bottom action bar */182 .action-bar {183 position: absolute;184 left: 0; right: 0; bottom: 84px;185 padding: 24px 60px;186 box-sizing: border-box;187 }188 .action-wrap {189 background: #fff;190 border-top: 1px solid #eaeaea;191 padding: 28px 0;192 display: flex;193 gap: 28px;194 }195 .btn {196 flex: 1;197 height: 152px;198 border-radius: 22px;199 font-size: 52px;200 font-weight: 800;201 display: inline-flex; align-items: center; justify-content: center;202 cursor: default;203 }204 .btn-outline {205 background: #fff;206 border: 2px solid #e2e2e2;207 color: #333;208 }209 .btn-primary {210 background: #e91e63;211 color: #fff;212 border: none;213 }214 .btn .icon-left {215 margin-right: 18px;216 }217 218 /* Bottom gesture bar */219 .gesture-bar {220 position: absolute;221 bottom: 18px; left: 50%;222 transform: translateX(-50%);223 width: 440px; height: 16px; background: #000; border-radius: 12px; opacity: 0.16;224 }225</style>226</head>227<body>228<div id="render-target">229 230 <!-- Status bar -->231 <div class="status-bar">232 <div>9:45</div>233 <div class="status-right">234 <!-- simple signal/search placeholders -->235 <svg width="44" height="44" viewBox="0 0 24 24" fill="none" stroke="white" stroke-width="2"><circle cx="11" cy="11" r="7"></circle><line x1="20" y1="20" x2="16" y2="16"></line></svg>236 <div class="status-dot"></div>237 <svg width="44" height="44" viewBox="0 0 24 24" fill="none" stroke="white" stroke-width="2"><path d="M12 22c4 0 7-3 7-7V7l-3-3H8L5 7v8c0 4 3 7 7 7z"></path></svg>238 </div>239 </div>240 241 <!-- App header -->242 <div class="app-header">243 <div class="icon-btn" title="Back">244 <svg width="64" height="64" viewBox="0 0 24 24" fill="none" stroke="white" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">245 <polyline points="15 18 9 12 15 6"></polyline>246 </svg>247 </div>248 <div class="header-actions">249 <div class="icon-btn">250 <svg width="56" height="56" viewBox="0 0 24 24" fill="none" stroke="white" stroke-width="2">251 <circle cx="11" cy="11" r="7"></circle><line x1="20" y1="20" x2="16" y2="16"></line>252 </svg>253 </div>254 <div class="icon-btn">255 <svg width="56" height="56" viewBox="0 0 24 24" fill="none" stroke="white" stroke-width="2">256 <path d="M20.8 8.6a5.5 5.5 0 0 0-9.8-3.7l-1 1-1-1a5.5 5.5 0 1 0-7.8 7.8l1 1L10 22l7.8-8.2 1-1a5.5 5.5 0 0 0 2-4.2z"></path>257 </svg>258 </div>259 <div class="icon-btn">260 <svg width="56" height="56" viewBox="0 0 24 24" fill="none" stroke="white" stroke-width="2">261 <path d="M6 7l1-3h10l1 3"></path>262 <path d="M6 7h12l-1.5 12H7.5L6 7z"></path>263 <circle cx="9" cy="21" r="1"></circle>264 <circle cx="15" cy="21" r="1"></circle>265 </svg>266 </div>267 </div>268 </div>269 270 <div class="separator-shadow"></div>271 272 <div class="content">273 274 <!-- Size section -->275 <div class="section">276 <div class="size-head">277 <div>Size:</div>278 <div class="guide">Size Guide</div>279 </div>280 281 <div class="size-grid">282 <div class="size-pill">UK/IND-6</div>283 <div class="size-pill">UK/IND-7</div>284 <div class="size-pill">UK/IND-8</div>285 <div class="size-pill">UK/IND-9</div>286 </div>287 288 <div class="muted-note">289 Size out of stock?290 <span class="link">View Similar</span>291 </div>292 </div>293 294 <div class="divider"></div>295 296 <!-- Offers -->297 <div class="offers-title">Available Offers</div>298 299 <div class="offers-row">300 <div class="offer-card">301 <div class="offer-logo">[IMG]</div>302 <div class="offer-text">303 <div class="offer-title">Get 10% Instant Discount on Kotak Bank…</div>304 <div class="offer-sub">Min Purchase: ₹1500 | Max Discount: ₹1000</div>305 </div>306 <div class="offer-code">USE CODE</div>307 </div>308 309 <div class="offer-card">310 <div class="offer-logo">[IMG]</div>311 <div class="offer-text">312 <div class="offer-title">Flat 10% off Upto Rs 500 on minimum…</div>313 <div class="offer-sub">Min Purchase: ₹2500</div>314 </div>315 <div class="offer-code">CLIQ500</div>316 </div>317 318 <div class="offer-card">319 <div class="offer-logo">[IMG]</div>320 <div class="offer-text">321 <div class="offer-title">Flat Rs 400 off. Valid on the app only</div>322 <div class="offer-sub">Min Purchase: ₹2000 | Max Discount: ₹400</div>323 </div>324 <div class="offer-code">FIRSTCLIQ</div>325 </div>326 327 <div class="offer-card">328 <div class="offer-logo">[IMG]</div>329 <div class="offer-text">330 <div class="offer-title">Up to 5% NeuCoins on Tata Neu HDFC Bank Credit…</div>331 <div class="offer-sub">Every Spend. Every Time | 1 NeuCoin = Rs.1</div>332 </div>333 <div class="offer-code">USE OFFER</div>334 </div>335 </div>336 337 <div class="divider"></div>338 339 <!-- Ship to -->340 <div class="ship-title">Ship to</div>341 <input class="ship-input" placeholder="Enter pincode or select location" />342 </div>343 344 <!-- Bottom action bar -->345 <div class="action-bar">346 <div class="action-wrap">347 <div class="btn btn-outline">348 <span class="icon-left">349 <svg width="54" height="54" viewBox="0 0 24 24" fill="none" stroke="#333" stroke-width="2">350 <path d="M20.8 8.6a5.5 5.5 0 0 0-9.8-3.7l-1 1-1-1a5.5 5.5 0 1 0-7.8 7.8l1 1L10 22l7.8-8.2 1-1a5.5 5.5 0 0 0 2-4.2z"></path>351 </svg>352 </span>353 Wishlist354 </div>355 <div class="btn btn-primary">Add to Bag</div>356 </div>357 </div>358 359 <div class="gesture-bar"></div>360</div>361</body>362</html>