GD-ML/AndroidCode
13.4k
1<html lang="en">2<head>3<meta charset="UTF-8">4<title>Puma Hybrid NX Product Page</title>5<meta name="viewport" content="width=1080, initial-scale=1.0">6<style>7 body { margin: 0; padding: 0; background: transparent; font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; }8 #render-target {9 width: 1080px; height: 2400px; position: relative; overflow: hidden;10 background: #ffffff; border-radius: 28px; box-shadow: 0 8px 24px rgba(0,0,0,0.08);11 color: #222;12 }13 .status-bar {14 height: 96px; padding: 0 32px; display: flex; align-items: center; justify-content: space-between; font-size: 32px; color: #222;15 }16 .status-right { display: flex; gap: 22px; align-items: center; color: #666; }17 .icon { width: 44px; height: 44px; display: inline-flex; align-items: center; justify-content: center; }18 .container { padding: 0 32px; }19 .top-bar {20 display: flex; align-items: center; justify-content: space-between; padding: 8px 0;21 }22 .title-area { display: flex; align-items: center; gap: 18px; max-width: 760px; }23 .title-area h1 {24 font-size: 42px; margin: 0; font-weight: 700; white-space: nowrap; overflow: hidden; text-overflow: ellipsis;25 }26 .action-icons { display: flex; gap: 28px; align-items: center; }27 .meta-row { display: flex; align-items: center; gap: 18px; color: #666; font-size: 32px; padding: 6px 0 12px; }28 .rating-stars { display: inline-flex; gap: 6px; margin-left: 6px; }29 .dot { width: 8px; height: 8px; background: #999; border-radius: 50%; display: inline-block; margin: 0 8px; }30 /* cards */31 .cards-scroll {32 display: flex; gap: 24px; overflow-x: auto; padding-bottom: 16px;33 }34 .card {35 min-width: 320px; width: 320px; border: 1px solid #e6e6e6; border-radius: 18px; overflow: hidden; background: #fff;36 }37 .card-img {38 width: 100%; height: 170px; background: #E0E0E0; border-bottom: 1px solid #BDBDBD;39 display: flex; align-items: center; justify-content: center; color: #757575; font-size: 28px;40 }41 .card-body { padding: 18px; }42 .card-title { font-size: 30px; font-weight: 600; line-height: 1.25; color: #222; }43 .sub { color: #666; font-size: 26px; margin-top: 10px; }44 .price-row { margin-top: 14px; font-size: 28px; display: flex; align-items: center; gap: 10px; }45 .strike { color: #999; text-decoration: line-through; }46 .discount { color: #1D7A4A; font-weight: 700; }47 .stars-row { display: flex; align-items: center; gap: 8px; margin-top: 8px; color: #111; }48 .card-actions { display: flex; align-items: center; gap: 14px; padding: 14px 18px 18px; }49 .fav {50 width: 64px; height: 64px; border: 2px solid #0F2B39; border-radius: 16px; display: flex; align-items: center; justify-content: center;51 }52 .select-btn {53 flex: 1; background: #0F2B39; color: #fff; border-radius: 14px; padding: 18px 0; text-align: center; font-weight: 700; font-size: 30px;54 }55 /* section headings */56 .section-title { font-size: 40px; font-weight: 800; margin: 24px 0 16px; }57 .divider { height: 1px; background: #eee; margin: 8px 0 16px; }58 /* highlights grid */59 .highlights-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 0 32px; }60 .hl-item { padding: 20px 0; border-bottom: 1px solid #eee; }61 .hl-label { color: #555; font-size: 30px; }62 .hl-value { font-size: 32px; font-weight: 700; margin-top: 8px; }63 /* Know product / description */64 .accordion-row { display: flex; align-items: center; gap: 18px; padding: 14px 0; }65 .doc-icon {66 width: 48px; height: 48px; border-radius: 8px; background: #F2F6FA; border: 1px solid #DAE3EA; display: flex; align-items: center; justify-content: center;67 }68 .desc-title { font-size: 36px; font-weight: 700; }69 .desc-text {70 font-size: 30px; line-height: 42px; color: #333; margin-top: 16px;71 }72 /* bottom add to bag */73 .bottom-bar {74 position: absolute; left: 20px; right: 20px; bottom: 44px;75 display: flex; align-items: center; gap: 24px;76 }77 .bottom-fav {78 width: 160px; height: 100px; border: 1px solid #e6e6e6; border-radius: 28px; background: #fff;79 display: flex; align-items: center; justify-content: center; box-shadow: 0 6px 16px rgba(0,0,0,0.08);80 }81 .bag-btn {82 flex: 1; height: 100px; background: #0F2B39; color: #fff; border-radius: 28px; display: flex; align-items: center; justify-content: center; gap: 18px;83 font-size: 36px; font-weight: 800; box-shadow: 0 10px 24px rgba(15,43,57,0.35);84 }85</style>86</head>87<body>88<div id="render-target">89 <!-- Status Bar -->90 <div class="status-bar">91 <div>12:53</div>92 <div class="status-right">93 <span class="icon" title="signal">94 <svg width="32" height="32" viewBox="0 0 24 24"><path d="M3 20h2v-2H3v2zm4 0h2v-5H7v5zm4 0h2v-8h-2v8zm4 0h2v-11h-2v11zm4 0h2V5h-2v15z" fill="#666"/></svg>95 </span>96 <span class="icon" title="wifi">97 <svg width="32" height="32" viewBox="0 0 24 24"><path d="M12 20l4-4H8l4 4zm-8-8l2 2a10 10 0 0 1 12 0l2-2A12 12 0 0 0 4 12zm4-4l2 2a6 6 0 0 1 8 0l2-2a8 8 0 0 0-12 0z" fill="#666"/></svg>98 </span>99 <span style="font-size:28px;color:#666;">100%</span>100 <span class="icon" title="battery">101 <svg width="40" height="40" viewBox="0 0 24 24"><path d="M2 8h18v8H2V8zm20 3v2h-1v-2h1z" fill="none" stroke="#666" stroke-width="2"/></svg>102 </span>103 </div>104 </div>105 106 <div class="container">107 <!-- Top bar with back and actions -->108 <div class="top-bar">109 <div class="title-area">110 <span class="icon" title="back">111 <svg width="44" height="44" viewBox="0 0 24 24"><path d="M15.5 19l-7-7 7-7" stroke="#0F2B39" stroke-width="2" fill="none" stroke-linecap="round" stroke-linejoin="round"/></svg>112 </span>113 <h1>Puma Hybrid Nx Men Black Runnin...</h1>114 </div>115 <div class="action-icons">116 <span class="icon" title="search">117 <svg width="44" height="44" viewBox="0 0 24 24"><circle cx="11" cy="11" r="6" stroke="#0F2B39" stroke-width="2" fill="none"/><path d="M20 20l-4-4" stroke="#0F2B39" stroke-width="2" stroke-linecap="round"/></svg>118 </span>119 <span class="icon" title="bag">120 <svg width="44" height="44" viewBox="0 0 24 24"><path d="M6 8h12l-1 12H7L6 8z" fill="none" stroke="#0F2B39" stroke-width="2"/><path d="M9 8V6a3 3 0 0 1 6 0v2" stroke="#0F2B39" stroke-width="2" fill="none"/></svg>121 </span>122 </div>123 </div>124 125 <!-- Meta row: rating and price -->126 <div class="meta-row">127 <span style="display:flex; align-items:center; gap:8px;">128 <span style="font-weight:700;">★</span>129 <span>4.0</span>130 </span>131 <span class="dot"></span>132 <span style="font-weight:700;">₹4119</span>133 <span class="dot"></span>134 <span style="color:#1D7A4A; font-weight:700;">45% off</span>135 </div>136 137 <!-- Cards horizontally -->138 <div class="cards-scroll">139 <!-- Card 1 -->140 <div class="card">141 <div class="card-img">[IMG: Puma Softride Enzo Evo Slip SF Unisex Black]</div>142 <div class="card-body">143 <div class="card-title">Puma Softride Enzo Evo Slip SF Unisex Black Ru...</div>144 <div class="sub">11 Sizes</div>145 <div class="price-row">146 <span style="font-weight:700;">₹3849</span>147 <span class="strike">₹6999</span>148 <span class="discount">45%</span>149 </div>150 <div class="stars-row">151 <span style="color:#0F2B39; font-weight:700;">★★★★★</span>152 <span style="color:#666;">5/5 (1)</span>153 </div>154 </div>155 <div class="card-actions">156 <div class="fav">157 <svg width="34" height="34" viewBox="0 0 24 24"><path d="M12 21s-7-4.35-9-8.5C1.6 9.3 3.5 7 6 7c1.7 0 3.1.9 4 2.2C10.9 7.9 12.3 7 14 7c2.5 0 4.4 2.3 3 5.5C19 16.65 12 21 12 21z" fill="none" stroke="#0F2B39" stroke-width="2"/></svg>158 </div>159 <div class="select-btn">Select Size</div>160 </div>161 </div>162 163 <!-- Card 2 -->164 <div class="card">165 <div class="card-img">[IMG: Puma Cell Phase Men Black Running Shoes]</div>166 <div class="card-body">167 <div class="card-title">Puma Cell Phase Men Black Running Shoes</div>168 <div class="sub">8 Sizes</div>169 <div class="price-row">170 <span style="font-weight:700;">₹3569</span>171 <span class="strike">₹6499</span>172 <span class="discount">45%</span>173 </div>174 <div class="stars-row">175 <span style="color:#0F2B39; font-weight:700;">★★★★★</span>176 <span style="color:#666;">5/5 (1)</span>177 </div>178 </div>179 <div class="card-actions">180 <div class="fav">181 <svg width="34" height="34" viewBox="0 0 24 24"><path d="M12 21s-7-4.35-9-8.5C1.6 9.3 3.5 7 6 7c1.7 0 3.1.9 4 2.2C10.9 7.9 12.3 7 14 7c2.5 0 4.4 2.3 3 5.5C19 16.65 12 21 12 21z" fill="none" stroke="#0F2B39" stroke-width="2"/></svg>182 </div>183 <div class="select-btn">Select Size</div>184 </div>185 </div>186 187 <!-- Card 3 -->188 <div class="card">189 <div class="card-img">[IMG: Fila Men Black Running Shoes]</div>190 <div class="card-body">191 <div class="card-title">Fila Men Black Running Shoes</div>192 <div class="sub">7 Sizes</div>193 <div class="price-row">194 <span style="font-weight:700;">₹3200</span>195 </div>196 <div class="stars-row">197 <span style="color:#0F2B39; font-weight:700;">★★★★☆</span>198 <span style="color:#666;">4.0</span>199 </div>200 </div>201 <div class="card-actions">202 <div class="fav">203 <svg width="34" height="34" viewBox="0 0 24 24"><path d="M12 21s-7-4.35-9-8.5C1.6 9.3 3.5 7 6 7c1.7 0 3.1.9 4 2.2C10.9 7.9 12.3 7 14 7c2.5 0 4.4 2.3 3 5.5C19 16.65 12 21 12 21z" fill="none" stroke="#0F2B39" stroke-width="2"/></svg>204 </div>205 <div class="select-btn">Select Size</div>206 </div>207 </div>208 </div>209 210 <div class="divider"></div>211 212 <!-- Highlights -->213 <div class="section-title">Highlights</div>214 <div class="highlights-grid">215 <div class="hl-item">216 <div class="hl-label">Closure</div>217 <div class="hl-value">Lace-Ups</div>218 </div>219 <div class="hl-item">220 <div class="hl-label">Fabric</div>221 <div class="hl-value">Mesh</div>222 </div>223 224 <div class="hl-item">225 <div class="hl-label">Pattern</div>226 <div class="hl-value">Solid/Plain</div>227 </div>228 <div class="hl-item">229 <div class="hl-label">Sole Material</div>230 <div class="hl-value">Rubber</div>231 </div>232 233 <div class="hl-item">234 <div class="hl-label">Warranty</div>235 <div class="hl-value">3 Months</div>236 </div>237 <div class="hl-item">238 <div class="hl-label">Occasion</div>239 <div class="hl-value">Casual</div>240 </div>241 242 <div class="hl-item">243 <div class="hl-label">Season</div>244 <div class="hl-value">Spring/Summer</div>245 </div>246 <div class="hl-item">247 <div class="hl-label">Gender</div>248 <div class="hl-value">Men</div>249 </div>250 251 <div class="hl-item" style="border-bottom:none;">252 <div class="hl-label">Net Qty</div>253 <div class="hl-value">1N</div>254 </div>255 <div class="hl-item" style="border-bottom:none;">256 <div class="hl-label">Color</div>257 <div class="hl-value">Black</div>258 </div>259 </div>260 261 <!-- Know the product -->262 <div class="section-title" style="margin-top:32px;">Know The Product</div>263 264 <div class="accordion-row">265 <div class="doc-icon">266 <svg width="28" height="28" viewBox="0 0 24 24"><path d="M6 3h9l3 3v15H6V3z" fill="none" stroke="#7C8EA0" stroke-width="2"/><path d="M8 8h8M8 12h8M8 16h6" stroke="#7C8EA0" stroke-width="2"/></svg>267 </div>268 <div class="desc-title">Description</div>269 <div style="margin-left:auto;" class="icon">270 <svg width="36" height="36" viewBox="0 0 24 24"><path d="M6 15l6-6 6 6" stroke="#7C8EA0" stroke-width="2" fill="none" stroke-linecap="round" stroke-linejoin="round"/></svg>271 </div>272 </div>273 274 <div class="desc-text">275 PRODUCT STORY: The all-new HYBRID NX Men's Running Shoes is a game-changer in the world of everyday cushioned running shoes. Designed with HYBRID foam and a rubber outsole, this shoe provides excellent cushioning and responsiveness, a combination of the comfort you need for daily wear and the performance you expect when you run. Mesh upper keeps things breathable while the sleek black styling suits casual occasions too.276 </div>277 </div>278 279 <!-- Bottom Add to Bag -->280 <div class="bottom-bar">281 <div class="bottom-fav">282 <svg width="44" height="44" viewBox="0 0 24 24"><path d="M12 21s-7-4.35-9-8.5C1.6 9.3 3.5 7 6 7c1.7 0 3.1.9 4 2.2C10.9 7.9 12.3 7 14 7c2.5 0 4.4 2.3 3 5.5C19 16.65 12 21 12 21z" fill="none" stroke="#0F2B39" stroke-width="2"/></svg>283 </div>284 <div class="bag-btn">285 <svg width="40" height="40" viewBox="0 0 24 24"><path d="M6 8h12l-1 12H7L6 8z" fill="none" stroke="#fff" stroke-width="2"/><path d="M9 8V6a3 3 0 0 1 6 0v2" stroke="#fff" stroke-width="2" fill="none"/></svg>286 <span>Add to Bag</span>287 </div>288 </div>289</div>290</body>291</html>