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>Puma Hybrid Nx Men Black Running Shoes - Mock UI</title>6<style>7 body { margin: 0; padding: 0; background: transparent; font-family: Arial, Helvetica, sans-serif; }8 #render-target {9 width: 1080px;10 height: 2400px;11 position: relative;12 overflow: hidden;13 background: #ffffff;14 color: #111;15 }16 17 /* Status bar */18 .status-bar {19 height: 90px;20 display: flex;21 align-items: center;22 padding: 0 36px;23 font-size: 32px;24 color: #222;25 }26 .status-left { flex: 1; }27 .status-right { display: flex; gap: 22px; align-items: center; color: #555; }28 .dot { width: 10px; height: 10px; background: #666; border-radius: 50%; display: inline-block; }29 30 /* Top navigation */31 .top-nav {32 height: 120px;33 display: flex;34 align-items: center;35 padding: 0 24px;36 }37 .nav-left, .nav-right { display: flex; align-items: center; }38 .nav-left { flex: 1; gap: 12px; }39 .circle-btn {40 width: 84px;41 height: 84px;42 border-radius: 50%;43 display: flex;44 align-items: center;45 justify-content: center;46 }47 .icon { width: 40px; height: 40px; fill: #222; }48 .nav-right { gap: 32px; }49 50 /* Banner */51 .banner {52 margin: 8px 20px 0 20px;53 height: 150px;54 background: #E0EFFE;55 border: 1px solid #BBD0FF;56 border-radius: 14px;57 display: flex;58 align-items: center;59 justify-content: center;60 color: #0a5bd7;61 font-weight: 700;62 letter-spacing: 0.5px;63 }64 65 /* Title */66 .title-wrap { padding: 18px 28px 10px 28px; }67 .brand { color: #1976d2; font-weight: 700; font-size: 34px; }68 .title-row { display: flex; align-items: center; }69 .product-title {70 font-size: 40px;71 line-height: 1.25;72 font-weight: 700;73 color: #222;74 flex: 1;75 padding-right: 20px;76 }77 .share-btn {78 width: 84px; height: 84px; border-radius: 50%;79 display: flex; align-items: center; justify-content: center;80 }81 82 /* Image gallery */83 .image-card {84 margin: 10px 22px 0 22px;85 background: #fff;86 border: 1px solid #e6e6e6;87 border-radius: 18px;88 height: 960px;89 display: flex;90 align-items: center;91 justify-content: center;92 }93 .img-ph {94 width: 100%;95 height: 100%;96 border-radius: 18px;97 background: #E0E0E0;98 border: 1px solid #BDBDBD;99 display: flex;100 align-items: center;101 justify-content: center;102 color: #757575;103 font-size: 36px;104 }105 .dots {106 display: flex;107 gap: 14px;108 justify-content: center;109 padding: 18px 0 8px;110 }111 .dot-big {112 width: 16px; height: 16px; border-radius: 50%;113 background: #c9d6e2;114 }115 .dot-big.active { background: #6e8aa6; }116 117 /* Pricing section */118 .price-sec {119 display: flex;120 align-items: center;121 justify-content: space-between;122 padding: 22px 28px 6px 28px;123 }124 .price-left { display: flex; align-items: baseline; gap: 22px; }125 .price {126 font-size: 56px; font-weight: 800; color: #111;127 }128 .off {129 color: #ff6a00; background: #fff3e6; padding: 10px 16px; border-radius: 12px; font-weight: 700; font-size: 34px;130 }131 .view-btn {132 display: inline-flex; align-items: center; gap: 16px;133 border: 1px solid #d6d6d6; padding: 18px 24px; border-radius: 50px; font-weight: 700; color: #0d3556;134 background: #ffffff;135 }136 .bag-mini { width: 36px; height: 36px; fill: #0d3556; }137 138 .mrp-row {139 padding: 0 28px;140 color: #666; font-size: 30px;141 display: flex; gap: 22px; align-items: center;142 }143 .strike { text-decoration: line-through; color: #9a9a9a; }144 145 /* Rating row */146 .rating-row {147 padding: 22px 28px;148 display: flex; align-items: center; gap: 28px;149 }150 .rating-pill {151 background: #1bb35e;152 color: white;153 padding: 12px 22px;154 border-radius: 40px;155 font-weight: 700;156 display: inline-flex; align-items: center; gap: 10px; font-size: 32px;157 }158 .ratings-link { color: #0d3556; font-weight: 700; font-size: 34px; display: inline-flex; align-items: center; gap: 10px; }159 .chev { width: 18px; height: 18px; border-right: 3px solid #0d3556; border-bottom: 3px solid #0d3556; transform: rotate(45deg); margin-top: 4px; }160 161 /* Size selector */162 .size-header { padding: 10px 28px; font-weight: 800; font-size: 40px; }163 .sizes { display: flex; flex-wrap: wrap; gap: 24px; padding: 10px 28px 0 28px; }164 .size-btn {165 min-width: 150px; height: 100px; border-radius: 60px;166 border: 2px solid #d7d7d7; display: flex; align-items: center; justify-content: center;167 font-weight: 700; color: #222; background: #fff;168 }169 .size-btn:hover { border-color: #0d3556; }170 .size-guide {171 position: absolute; right: 28px; transform: translateY(-60px);172 color: #0d3556; font-weight: 700; display: inline-flex; align-items: center; gap: 10px; font-size: 34px;173 }174 .soldout {175 color: #8a8a8a; font-size: 28px; padding: 12px 28px;176 text-align: right;177 }178 179 /* Bottom bar */180 .bottom-bar {181 position: absolute; left: 0; right: 0; bottom: 0;182 padding: 16px 16px 30px 16px;183 background: linear-gradient(180deg, rgba(255,255,255,0.0) 0%, rgba(255,255,255,1) 28%, rgba(255,255,255,1) 100%);184 }185 .bottom-row {186 display: flex; gap: 20px;187 }188 .wish-btn {189 width: 180px; height: 120px; border-radius: 18px; background: #ffffff;190 border: 1px solid #d9d9d9; display: flex; align-items: center; justify-content: center;191 }192 .heart { width: 44px; height: 44px; fill: #0d3556; }193 .cta {194 flex: 1; height: 120px; border-radius: 18px; background: #0a3c47; color: #e9fbff;195 display: flex; align-items: center; justify-content: center; gap: 18px; font-weight: 800; font-size: 40px;196 }197 .bag { width: 46px; height: 46px; fill: #e9fbff; }198 199 /* Small helpers */200 .spacer-8 { height: 8px; }201</style>202</head>203<body>204<div id="render-target">205 206 <!-- Status Bar -->207 <div class="status-bar">208 <div class="status-left">12:52</div>209 <div class="status-right">210 <span class="dot"></span>211 <span class="dot"></span>212 <span style="font-weight:700;">100%</span>213 </div>214 </div>215 216 <!-- Top Navigation -->217 <div class="top-nav">218 <div class="nav-left">219 <div class="circle-btn">220 <svg viewBox="0 0 24 24" class="icon">221 <path d="M15.5 19.5 8 12l7.5-7.5" stroke="#222" stroke-width="2.4" fill="none" stroke-linecap="round" stroke-linejoin="round"/>222 </svg>223 </div>224 </div>225 <div class="nav-right">226 <div class="circle-btn">227 <svg viewBox="0 0 24 24" class="icon">228 <circle cx="11" cy="11" r="7" stroke="#222" stroke-width="2" fill="none"/>229 <path d="M16.5 16.5 22 22" stroke="#222" stroke-width="2" fill="none" stroke-linecap="round"/>230 </svg>231 </div>232 <div class="circle-btn">233 <svg viewBox="0 0 24 24" class="icon">234 <path d="M6 7h12l-1 12H7L6 7z" stroke="#222" stroke-width="2" fill="none" stroke-linejoin="round"/>235 <path d="M9 7V5a3 3 0 0 1 6 0v2" stroke="#222" stroke-width="2" fill="none"/>236 </svg>237 </div>238 </div>239 </div>240 241 <!-- Banner -->242 <div class="banner">[IMG: Promotional Banner - GET UP TO ₹300 OFF • USE CODE NYKMAN1ST]</div>243 244 <!-- Title and brand -->245 <div class="title-wrap">246 <div class="brand">Puma</div>247 <div class="title-row">248 <div class="product-title">Hybrid Nx Men Black Running Shoes</div>249 <div class="share-btn">250 <svg viewBox="0 0 24 24" class="icon">251 <circle cx="18" cy="5" r="3" fill="#222"/>252 <circle cx="6" cy="12" r="3" fill="#222"/>253 <circle cx="18" cy="19" r="3" fill="#222"/>254 <path d="M8.7 11l6.6-4M8.7 13l6.6 4" stroke="#222" stroke-width="2" fill="none" stroke-linecap="round"/>255 </svg>256 </div>257 </div>258 </div>259 260 <!-- Image gallery -->261 <div class="image-card">262 <div class="img-ph">[IMG: Black Puma Running Shoes - Primary Image]</div>263 </div>264 <div class="dots">265 <div class="dot-big active"></div>266 <div class="dot-big"></div>267 <div class="dot-big"></div>268 <div class="dot-big"></div>269 <div class="dot-big"></div>270 </div>271 272 <!-- Pricing -->273 <div class="price-sec">274 <div class="price-left">275 <div class="price">₹4119</div>276 <div class="off">45% OFF</div>277 </div>278 <div class="view-btn">279 <svg viewBox="0 0 24 24" class="bag-mini">280 <path d="M6 7h12l-1 12H7L6 7z" stroke="#0d3556" stroke-width="2" fill="none" stroke-linejoin="round"/>281 <path d="M9 7V5a3 3 0 0 1 6 0v2" stroke="#0d3556" stroke-width="2" fill="none"/>282 </svg>283 View Similar284 </div>285 </div>286 <div class="mrp-row">287 <div class="strike">MRP ₹7499</div>288 <div>Inclusive of all taxes</div>289 </div>290 291 <!-- Ratings -->292 <div class="rating-row">293 <div class="rating-pill">4.0 ★</div>294 <div class="ratings-link">8 ratings <span class="chev"></span></div>295 </div>296 297 <!-- Size selection -->298 <div class="size-header">Select Size</div>299 <div class="size-guide">Size Guide300 <span class="chev" style="transform: rotate(-45deg); border-color:#0d3556;"></span>301 </div>302 <div class="sizes">303 <div class="size-btn">UK 6</div>304 <div class="size-btn">UK 7</div>305 <div class="size-btn">UK 8</div>306 <div class="size-btn">UK 9</div>307 <div class="size-btn">UK 10</div>308 <div class="size-btn">UK 11</div>309 </div>310 <div class="soldout">sold out</div>311 312 <!-- Bottom bar -->313 <div class="bottom-bar">314 <div class="bottom-row">315 <div class="wish-btn">316 <svg viewBox="0 0 24 24" class="heart">317 <path d="M12 21s-7-4.4-9.2-8.2C1.2 9.6 2.6 6.5 5.6 6a5 5 0 0 1 4.4 2.3A5 5 0 0 1 14.4 6c3-.5 4.4 3.6 2.8 6.8C19 16.6 12 21 12 21z" fill="none" stroke="#0d3556" stroke-width="2"/>318 </svg>319 </div>320 <div class="cta">321 <svg viewBox="0 0 24 24" class="bag">322 <path d="M6 7h12l-1 12H7L6 7z" stroke="#e9fbff" stroke-width="2" fill="none" stroke-linejoin="round"/>323 <path d="M9 7V5a3 3 0 0 1 6 0v2" stroke="#e9fbff" stroke-width="2" fill="none"/>324 </svg>325 Add to Bag326 </div>327 </div>328 </div>329 330</div>331</body>332</html>