GD-ML/AndroidCode
13.4k
1<html lang="en">2<head>3<meta charset="UTF-8">4<meta name="viewport" content="width=1080, initial-scale=1.0">5<title>Product Page Mock</title>6<style>7 body { margin: 0; padding: 0; background: transparent; font-family: Arial, Helvetica, sans-serif; }8 #render-target {9 position: relative;10 width: 1080px;11 height: 2400px;12 overflow: hidden;13 background: #ffffff;14 color: #222;15 }16 /* Top app bar */17 .app-bar {18 position: absolute;19 top: 0;20 left: 0;21 width: 1080px;22 height: 150px;23 background: #ffffff;24 box-shadow: 0 1px 0 #e5e5e5;25 display: flex;26 align-items: center;27 padding: 0 36px;28 box-sizing: border-box;29 }30 .status-time { position: absolute; top: 22px; left: 36px; font-size: 36px; color: #777; }31 .icon-btn {32 width: 80px; height: 80px; border-radius: 12px;33 display: flex; align-items: center; justify-content: center;34 cursor: default;35 }36 .icons-right { margin-left: auto; display: flex; gap: 24px; }37 .back-wrapper { margin-right: 20px; }38 /* Product thumbnails */39 .thumbs {40 position: absolute;41 top: 190px; left: 36px; right: 36px;42 display: flex; gap: 36px;43 }44 .thumb {45 width: 300px; height: 240px; border-radius: 24px;46 border: 3px solid #cfe3ff; background: #E0E0E0;47 display: flex; align-items: center; justify-content: center;48 color: #555; font-size: 32px;49 }50 .thumb.secondary { border-color: #e5e5e5; }51 /* Section titles */52 .section {53 position: absolute; left: 36px; right: 36px;54 }55 .title {56 font-weight: 800; font-size: 52px; letter-spacing: 0.5px;57 margin-bottom: 24px;58 }59 /* Size selector */60 .size-section { top: 470px; }61 .tabs {62 display: flex; gap: 18px; align-items: center;63 margin-bottom: 22px;64 }65 .tab {66 padding: 22px 36px; border-radius: 12px; border: 2px solid #dadada;67 font-size: 34px; color: #444; background: #fff;68 }69 .tab.active { background: #394a58; color: #fff; border-color: #394a58; }70 .size-chart { margin-left: auto; color: #2a6edb; font-size: 36px; }71 .chips {72 display: flex; gap: 24px; flex-wrap: wrap;73 }74 .chip {75 width: 160px; height: 90px; border-radius: 16px; border: 2px solid #e1e1e1;76 display: flex; align-items: center; justify-content: center; font-size: 36px; color: #222;77 background: #fff;78 }79 /* Delivery & services */80 .delivery { top: 760px; }81 .card {82 border: 2px solid #e9e9e9; border-radius: 18px; padding: 26px; box-sizing: border-box;83 background: #fff;84 }85 .pin-row {86 display: flex; align-items: center; gap: 18px; font-size: 36px; color: #777;87 }88 .pin-box {89 flex: 1; border: 2px solid #e5e5e5; border-radius: 14px; padding: 22px; color: #444; font-size: 38px;90 }91 .check-dot {92 width: 40px; height: 40px; background: #26a65b; border-radius: 50%;93 }94 .change-link { color: #2a6edb; font-size: 36px; }95 .service-row { display: flex; align-items: center; gap: 22px; margin-top: 28px; }96 .service-icon {97 width: 72px; height: 72px; border-radius: 12px; background: #eef6ff;98 display: flex; align-items: center; justify-content: center; border: 1px solid #d7e8ff;99 }100 .service-text { font-size: 40px; color: #222; line-height: 1.25; }101 .muted { color: #666; font-size: 34px; }102 .highlight { color: #24a148; font-weight: 700; }103 .stores-link { color: #2a6edb; font-size: 38px; margin-left: auto; }104 /* Seller details */105 .seller { top: 1220px; }106 .subtext { font-size: 36px; color: #666; }107 .bold { font-weight: 700; color: #222; }108 .policy-card {109 margin-top: 28px;110 border: 2px solid #e9e9e9; border-radius: 18px; padding: 36px; display: flex; align-items: center; gap: 22px;111 }112 .policy-icon {113 width: 120px; height: 90px; border-radius: 16px; background: #eef6ff; border: 1px solid #d7e8ff;114 display: flex; align-items: center; justify-content: center;115 }116 .policy-text { font-size: 44px; }117 /* Offers */118 .offers { top: 1500px; }119 .offers-title { font-size: 56px; font-weight: 800; margin-bottom: 12px; }120 .offer-line {121 border: 2px solid #f1f1f1; border-radius: 18px; padding: 26px; color: #666; font-size: 36px;122 }123 /* Add to cart bar */124 .bottom-bar {125 position: absolute; left: 24px; right: 24px; bottom: 160px;126 background: #ffeb53; border-radius: 20px; height: 140px;127 display: flex; align-items: center; justify-content: center; gap: 18px;128 box-shadow: 0 4px 16px rgba(0,0,0,0.08);129 }130 .wishlist-pill {131 position: absolute; left: 24px; bottom: 160px;132 width: 140px; height: 140px; background: #ffffff; border: 2px solid #e9e9e9; border-radius: 22px;133 display: flex; align-items: center; justify-content: center;134 box-shadow: 0 2px 10px rgba(0,0,0,0.06);135 }136 .bottom-text { font-size: 54px; font-weight: 800; letter-spacing: 1px; color: #222; }137 /* Floating chat button */138 .chat-fab {139 position: absolute; right: 60px; bottom: 360px;140 width: 160px; height: 160px; border-radius: 80px; background: #2a86ff;141 display: flex; align-items: center; justify-content: center; box-shadow: 0 8px 24px rgba(0,0,0,0.2);142 border: 10px solid #85b5ff;143 }144 /* Home indicator */145 .home-indicator {146 position: absolute; bottom: 70px; left: 50%; transform: translateX(-50%);147 width: 300px; height: 14px; background: #000; opacity: 0.2; border-radius: 8px;148 }149 /* Utility SVG styles */150 svg { display: block; }151</style>152</head>153<body>154<div id="render-target">155 156 <!-- Status time mimic -->157 <div class="status-time">9:36</div>158 159 <!-- App Bar -->160 <div class="app-bar">161 <div class="icon-btn back-wrapper">162 <!-- Back Arrow -->163 <svg width="48" height="48" viewBox="0 0 24 24">164 <path d="M15 18L9 12l6-6" stroke="#000" stroke-width="2" fill="none" stroke-linecap="round" stroke-linejoin="round"/>165 </svg>166 </div>167 <div class="icons-right">168 <div class="icon-btn">169 <!-- Search Icon -->170 <svg width="46" height="46" viewBox="0 0 24 24">171 <circle cx="11" cy="11" r="7" stroke="#111" stroke-width="2" fill="none"/>172 <path d="M20 20l-4.5-4.5" stroke="#111" stroke-width="2" stroke-linecap="round"/>173 </svg>174 </div>175 <div class="icon-btn">176 <!-- Heart Icon -->177 <svg width="46" height="46" viewBox="0 0 24 24">178 <path d="M12 20s-7-4.7-7-10a4.5 4.5 0 019 0 4.5 4.5 0 019 0c0 5.3-7 10-7 10z" fill="none" stroke="#111" stroke-width="2" stroke-linejoin="round"/>179 </svg>180 </div>181 <div class="icon-btn">182 <!-- Cart Icon -->183 <svg width="46" height="46" viewBox="0 0 24 24">184 <circle cx="9" cy="20" r="2" fill="#111"/>185 <circle cx="17" cy="20" r="2" fill="#111"/>186 <path d="M3 4h2l2 12h10l2-8H7" fill="none" stroke="#111" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>187 </svg>188 </div>189 </div>190 </div>191 192 <!-- Product Thumbnails -->193 <div class="thumbs">194 <div class="thumb">[IMG: Grey Running Shoe]</div>195 <div class="thumb secondary">[IMG: Black Running Shoe]</div>196 </div>197 198 <!-- Size Section -->199 <div class="section size-section">200 <div class="title">SELECT SIZE</div>201 <div class="tabs">202 <div class="tab active">UK SIZE</div>203 <div class="tab">BRAND SIZE</div>204 <div class="size-chart">Size chart</div>205 </div>206 <div class="chips">207 <div class="chip">5.5</div>208 <div class="chip">6.5</div>209 <div class="chip">7</div>210 <div class="chip">8</div>211 <div class="chip">8.5</div>212 </div>213 </div>214 215 <!-- Delivery & Services -->216 <div class="section delivery">217 <div class="title">DELIVERY & SERVICES</div>218 219 <div class="card">220 <div class="pin-row">221 <div class="pin-box">560001</div>222 <div class="check-dot"></div>223 <div class="change-link">Change</div>224 </div>225 226 <div class="service-row">227 <div class="service-icon">228 <!-- Truck icon -->229 <svg width="40" height="40" viewBox="0 0 24 24">230 <path d="M3 7h11v7H3z" fill="none" stroke="#4a90e2" stroke-width="2"/>231 <path d="M14 9h4l3 3v2h-7" fill="none" stroke="#4a90e2" stroke-width="2"/>232 <circle cx="6" cy="17" r="2" fill="#4a90e2"/>233 <circle cx="17" cy="17" r="2" fill="#4a90e2"/>234 </svg>235 </div>236 <div class="service-text">237 Home Delivery by <span class="bold">Tomorrow</span><br>238 <span class="muted">Order within </span><span class="highlight">07h:29m</span>239 </div>240 </div>241 242 <div class="service-row">243 <div class="service-icon">244 <!-- Store icon -->245 <svg width="40" height="40" viewBox="0 0 24 24">246 <path d="M4 10h16v10H4z" fill="none" stroke="#4a90e2" stroke-width="2"/>247 <path d="M3 10l2-5h14l2 5" fill="none" stroke="#4a90e2" stroke-width="2"/>248 <path d="M8 10v10" stroke="#4a90e2" stroke-width="2"/>249 </svg>250 </div>251 <div class="service-text">Free Pickup in Store Available</div>252 <div class="stores-link">View stores</div>253 </div>254 </div>255 </div>256 257 <!-- Seller Details -->258 <div class="section seller">259 <div class="title">SELLER DETAILS</div>260 <div class="subtext">261 Sold and Fulfilled by: <span class="bold">Decathlon Sports India Pvt Ltd</span>262 </div>263 <div class="policy-card">264 <div class="policy-icon">265 <!-- Return arrows icon -->266 <svg width="80" height="60" viewBox="0 0 24 24">267 <path d="M8 6l-4 4 4 4" stroke="#ff7f50" stroke-width="2" fill="none" stroke-linecap="round"/>268 <path d="M16 18l4-4-4-4" stroke="#2a86ff" stroke-width="2" fill="none" stroke-linecap="round"/>269 <circle cx="12" cy="12" r="3" stroke="#999" stroke-width="2" fill="none"/>270 </svg>271 </div>272 <div class="policy-text">30 Days Return Policy</div>273 </div>274 </div>275 276 <!-- Offers -->277 <div class="section offers">278 <div class="offers-title">OFFERS</div>279 <div class="offer-line">Buy 3 product(s) and save ₹308</div>280 </div>281 282 <!-- Wishlist small button -->283 <div class="wishlist-pill">284 <!-- Heart with plus -->285 <svg width="64" height="64" viewBox="0 0 24 24">286 <path d="M12 20s-7-4.7-7-10a4.5 4.5 0 019 0 4.5 4.5 0 019 0c0 5.3-7 10-7 10z" fill="none" stroke="#2a86ff" stroke-width="2"/>287 <path d="M19 6v6M22 9h-6" stroke="#2a86ff" stroke-width="2" stroke-linecap="round"/>288 </svg>289 </div>290 291 <!-- Add to cart bottom bar -->292 <div class="bottom-bar">293 <div class="bottom-text">ADD TO CART</div>294 <!-- Cart glyph -->295 <svg width="70" height="70" viewBox="0 0 24 24">296 <circle cx="9" cy="20" r="2" fill="#222"/>297 <circle cx="17" cy="20" r="2" fill="#222"/>298 <path d="M3 4h2l2 12h10l2-8H7" fill="none" stroke="#222" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>299 </svg>300 </div>301 302 <!-- Floating chat button -->303 <div class="chat-fab">304 <svg width="84" height="84" viewBox="0 0 24 24">305 <path d="M4 5h16v11H8l-4 4V5z" fill="#fff"/>306 <circle cx="9" cy="11" r="1.5" fill="#2a86ff"/>307 <circle cx="13" cy="11" r="1.5" fill="#2a86ff"/>308 <circle cx="17" cy="11" r="1.5" fill="#2a86ff"/>309 </svg>310 </div>311 312 <!-- Home indicator -->313 <div class="home-indicator"></div>314 315</div>316</body>317</html>