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 Detail - White Running Shoes</title>7<style>8 /* Page reset and environment */9 html, body { margin: 0; padding: 0; }10 body { background: transparent; font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; color: #212121; }11 12 /* Root render target */13 #render-target {14 width: 1440px;15 height: 3120px;16 position: relative;17 overflow: hidden;18 background: #ffffff;19 }20 21 /* Status bar mock */22 .status-bar {23 height: 120px;24 background: #2B2B2B;25 color: #fff;26 padding: 0 48px;27 display: flex;28 align-items: center;29 justify-content: space-between;30 font-weight: 600;31 font-size: 44px;32 letter-spacing: 1px;33 }34 .status-icons {35 display: flex;36 gap: 36px;37 align-items: center;38 }39 .status-icons svg { fill: #fff; width: 42px; height: 42px; opacity: 0.9; }40 41 /* Hero image area */42 .hero {43 position: relative;44 height: 1080px;45 background: #f1f1f1;46 }47 .hero .img {48 position: absolute;49 inset: 0;50 background: #E0E0E0;51 border: 1px solid #BDBDBD;52 display: flex;53 align-items: center;54 justify-content: center;55 color: #757575;56 font-size: 48px;57 letter-spacing: 0.3px;58 }59 60 /* Top overlay controls */61 .hero-top {62 position: absolute;63 top: 36px;64 left: 24px;65 right: 24px;66 display: flex;67 align-items: center;68 justify-content: space-between;69 padding: 24px 24px;70 }71 .hero-icons {72 display: flex;73 align-items: center;74 gap: 42px;75 }76 .icon-btn {77 width: 88px;78 height: 88px;79 border-radius: 44px;80 display: flex;81 align-items: center;82 justify-content: center;83 background: rgba(255,255,255,0.2);84 backdrop-filter: blur(2px);85 }86 .icon-btn svg { width: 44px; height: 44px; stroke: #fff; fill: none; stroke-width: 4; }87 88 .back {89 width: 72px;90 height: 72px;91 border-radius: 36px;92 background: rgba(0,0,0,0.25);93 display: flex;94 align-items: center;95 justify-content: center;96 }97 .back svg { width: 44px; height: 44px; stroke: #fff; fill: none; stroke-width: 4; }98 99 /* Discount tag */100 .ribbon {101 position: absolute;102 top: 250px;103 left: 36px;104 background: #ff2b6e;105 color: #fff;106 padding: 18px 28px;107 border-radius: 12px 28px 28px 12px;108 font-size: 40px;109 font-weight: 700;110 }111 112 /* Share floating and View Similar */113 .share-fab {114 position: absolute;115 right: 36px;116 top: 720px;117 width: 120px;118 height: 120px;119 border-radius: 28px;120 background: rgba(255,255,255,0.9);121 box-shadow: 0 6px 20px rgba(0,0,0,0.15);122 display: flex;123 align-items: center;124 justify-content: center;125 }126 .share-fab svg { width: 56px; height: 56px; stroke: #444; fill: none; stroke-width: 4; }127 128 .view-similar {129 position: absolute;130 right: 36px;131 bottom: 48px;132 display: flex;133 align-items: center;134 gap: 16px;135 background: rgba(255,255,255,0.95);136 color: #333;137 padding: 24px 30px;138 border-radius: 24px;139 box-shadow: 0 6px 20px rgba(0,0,0,0.12);140 font-size: 40px;141 font-weight: 600;142 }143 .view-similar svg {144 width: 46px; height: 46px; stroke: #555; fill: none; stroke-width: 4;145 }146 147 /* Pager dots */148 .pager {149 position: absolute;150 left: 48px;151 bottom: 60px;152 display: flex;153 gap: 16px;154 }155 .dot {156 width: 22px; height: 22px; border-radius: 50%;157 background: #bdbdbd;158 opacity: 0.7;159 }160 .dot.active { background: #ffffff; opacity: 1; }161 162 /* Content section */163 .content {164 background: #fff;165 padding: 36px 48px 260px;166 }167 .pill {168 display: inline-flex;169 align-items: center;170 gap: 18px;171 background: #fdeef3;172 color: #d81b60;173 padding: 18px 24px;174 border-radius: 24px;175 font-size: 40px;176 margin-top: 12px;177 }178 .pill svg { width: 40px; height: 40px; fill: none; stroke: #d81b60; stroke-width: 4; }179 180 .title-row {181 display: flex;182 justify-content: space-between;183 align-items: flex-start;184 margin-top: 36px;185 }186 .brand {187 font-size: 64px;188 font-weight: 800;189 margin-bottom: 10px;190 }191 .subtitle {192 font-size: 44px;193 color: #555;194 }195 .follow {196 color: #ff2b6e;197 font-size: 44px;198 font-weight: 700;199 align-self: center;200 }201 202 .price-row {203 margin-top: 36px;204 display: flex;205 align-items: baseline;206 gap: 18px;207 }208 .price {209 font-size: 64px;210 font-weight: 800;211 }212 .mrp {213 color: #888;214 text-decoration: line-through;215 font-size: 40px;216 margin-left: 8px;217 }218 .off {219 color: #2e7d32;220 font-weight: 700;221 font-size: 40px;222 }223 .tax {224 color: #777;225 margin-top: 10px;226 font-size: 38px;227 }228 229 .rating-row {230 margin-top: 40px;231 display: flex;232 align-items: center;233 gap: 28px;234 color: #757575;235 font-size: 40px;236 }237 .rating-chip {238 background: #e8f5e9;239 color: #2e7d32;240 padding: 16px 26px;241 border-radius: 24px;242 font-weight: 800;243 display: inline-flex;244 align-items: center;245 gap: 12px;246 font-size: 42px;247 }248 .rating-chip svg {249 width: 34px; height: 34px; fill: #2e7d32;250 }251 252 /* Sticky bottom bar */253 .bottom-bar {254 position: absolute;255 left: 0; right: 0; bottom: 80px;256 padding: 24px 48px;257 border-top: 2px solid #eee;258 background: #fff;259 display: flex;260 gap: 36px;261 }262 .btn {263 flex: 1;264 height: 160px;265 border-radius: 28px;266 font-size: 56px;267 font-weight: 800;268 display: flex;269 align-items: center;270 justify-content: center;271 gap: 22px;272 cursor: default;273 }274 .btn-outline {275 border: 2px solid #e0e0e0;276 color: #333;277 background: #fff;278 }279 .btn-primary {280 background: #ff2b6e;281 color: #fff;282 }283 .btn svg { width: 56px; height: 56px; }284 285 /* Home indicator */286 .home-indicator {287 position: absolute;288 left: 50%;289 transform: translateX(-50%);290 bottom: 20px;291 width: 340px;292 height: 16px;293 background: #000;294 opacity: 0.2;295 border-radius: 10px;296 }297</style>298</head>299<body>300<div id="render-target">301 302 <!-- Status bar -->303 <div class="status-bar">304 <div>9:45</div>305 <div class="status-icons">306 <!-- magnifier -->307 <svg viewBox="0 0 24 24"><circle cx="11" cy="11" r="7"></circle><line x1="16.5" y1="16.5" x2="22" y2="22" stroke="white" stroke-width="2"></line></svg>308 <!-- alert triangle -->309 <svg viewBox="0 0 24 24"><path d="M12 3l10 18H2L12 3z" stroke="white" stroke-width="2" fill="none"></path><circle cx="12" cy="17" r="1.3"></circle><line x1="12" y1="9" x2="12" y2="14" stroke="#fff" stroke-width="2"></line></svg>310 <!-- wifi -->311 <svg viewBox="0 0 24 24"><path d="M2 8c5-5 15-5 20 0" stroke="#fff" stroke-width="2" fill="none"></path><path d="M5 12c4-4 10-4 14 0" stroke="#fff" stroke-width="2" fill="none"></path><path d="M8 16c3-3 5-3 8 0" stroke="#fff" stroke-width="2" fill="none"></path><circle cx="12" cy="19" r="1.2" fill="#fff"></circle></svg>312 <!-- battery -->313 <svg viewBox="0 0 28 14"><rect x="1" y="2" width="22" height="10" rx="2" ry="2" fill="none" stroke="#fff" stroke-width="2"></rect><rect x="3" y="4" width="18" height="6" fill="#fff"></rect><rect x="24" y="5" width="3" height="4" fill="#fff"></rect></svg>314 </div>315 </div>316 317 <!-- Hero section -->318 <div class="hero">319 <div class="img">[IMG: White running shoes]</div>320 321 <div class="hero-top">322 <div class="back">323 <svg viewBox="0 0 24 24"><path d="M15 6l-6 6 6 6" /></svg>324 </div>325 <div class="hero-icons">326 <div class="icon-btn" title="Search">327 <svg viewBox="0 0 24 24"><circle cx="11" cy="11" r="7"></circle><line x1="16.5" y1="16.5" x2="22" y2="22"></line></svg>328 </div>329 <div class="icon-btn" title="Wishlist">330 <svg viewBox="0 0 24 24"><path d="M12 21s-8-5-8-11a5 5 0 0 1 9-3 5 5 0 0 1 9 3c0 6-8 11-8 11z"></path></svg>331 </div>332 <div class="icon-btn" title="Bag">333 <svg viewBox="0 0 24 24"><path d="M6 8h12l-1 12H7L6 8z"></path><path d="M9 8a3 3 0 0 1 6 0"></path></svg>334 </div>335 </div>336 </div>337 338 <div class="ribbon">75% Off</div>339 340 <div class="share-fab" title="Share">341 <svg viewBox="0 0 24 24"><circle cx="18" cy="5" r="2"></circle><circle cx="6" cy="12" r="2"></circle><circle cx="18" cy="19" r="2"></circle><path d="M8 12l8-7M8 12l8 7"></path></svg>342 </div>343 344 <div class="view-similar">345 <svg viewBox="0 0 24 24"><rect x="4" y="3" width="16" height="18" rx="2"></rect><path d="M8 7h8M8 12h8M8 17h6"></path></svg>346 <span>View Similar</span>347 </div>348 349 <div class="pager">350 <div class="dot"></div>351 <div class="dot"></div>352 <div class="dot active"></div>353 <div class="dot"></div>354 <div class="dot"></div>355 </div>356 </div>357 358 <!-- Content area -->359 <div class="content">360 <div class="pill">361 <svg viewBox="0 0 24 24"><path d="M6 6h12l-1 12H7L6 6z"></path><path d="M9 6a3 3 0 0 1 6 0"></path></svg>362 <span>Super hit: Bought 204 times recently</span>363 </div>364 365 <div class="title-row">366 <div>367 <div class="brand">Red Tape</div>368 <div class="subtitle">Red Tape Men's White Running Shoes</div>369 </div>370 <div class="follow">+ Follow</div>371 </div>372 373 <div class="price-row">374 <div class="price">₹1724</div>375 <div class="mrp">MRP: ₹6899</div>376 <div class="off">(75%)</div>377 </div>378 <div class="tax">inclusive of all taxes</div>379 380 <div class="rating-row">381 <div class="rating-chip">382 4.2383 <svg viewBox="0 0 24 24"><path d="M12 2l3 6 7 1-5 5 1 7-6-3-6 3 1-7-5-5 7-1 3-6z"></path></svg>384 </div>385 <div>101 Ratings & 15 Reviews</div>386 </div>387 </div>388 389 <!-- Sticky bottom buttons -->390 <div class="bottom-bar">391 <div class="btn btn-outline">392 <svg viewBox="0 0 24 24" stroke="#444" fill="none" stroke-width="2"><path d="M12 21s-8-5-8-11a5 5 0 0 1 9-3 5 5 0 0 1 9 3c0 6-8 11-8 11z"></path></svg>393 Wishlist394 </div>395 <div class="btn btn-primary">Add to Bag</div>396 </div>397 398 <div class="home-indicator"></div>399</div>400</body>401</html>