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=1080, initial-scale=1.0">6<title>Product Detail - Sports Shoes</title>7<style>8 body { margin: 0; padding: 0; background: transparent; font-family: Arial, Helvetica, sans-serif; }9 #render-target {10 width: 1080px; height: 2400px;11 position: relative; overflow: hidden;12 background: #ffffff; border-radius: 24px;13 box-shadow: 0 8px 24px rgba(0,0,0,0.08);14 color: #1a1a1a;15 }16 17 /* Header gradient area */18 .header {19 width: 100%; height: 230px;20 background: linear-gradient(90deg, #9de6d3, #b8e6f3);21 position: relative;22 padding-top: 20px;23 }24 .status-bar {25 display: flex; align-items: center; justify-content: space-between;26 padding: 20px 40px; color: #1a1a1a; font-weight: 600; font-size: 36px;27 opacity: 0.85;28 }29 .status-icons { display: flex; align-items: center; gap: 24px; }30 .status-dot { width: 10px; height: 10px; background:#1a1a1a; border-radius:50%; opacity:0.5; }31 .battery {32 display: inline-flex; align-items: center; gap: 8px; font-size: 30px;33 }34 .battery-box{ width:40px; height:20px; border:2px solid #1a1a1a; border-radius:4px; position:relative;}35 .battery-box::after{ content:""; position:absolute; right:-8px; top:5px; width:6px; height:10px; background:#1a1a1a; border-radius:2px;}36 .battery-level{ width:26px; height:14px; background:#1a1a1a; margin:3px; }37 38 /* Search Row */39 .search-row {40 display: flex; align-items: center; gap: 24px;41 padding: 0 32px 24px 32px;42 }43 .back-btn {44 width: 72px; height: 72px; display: flex; align-items:center; justify-content:center;45 }46 .search-box {47 flex: 1;48 background: #ffffff; height: 92px; border-radius: 36px;49 box-shadow: 0 6px 12px rgba(0,0,0,0.12);50 display: flex; align-items: center; padding: 0 28px; gap: 18px;51 }52 .search-text {53 flex: 1; font-size: 34px; color: #444;54 }55 .scan-btn {56 width: 64px; height: 64px; border-radius: 16px; background:#f2f2f2;57 display:flex; align-items:center; justify-content:center; border:1px solid #ddd;58 }59 60 /* Title & rating section */61 .info-bar {62 display: flex; align-items: flex-start; justify-content: space-between;63 padding: 26px 40px 10px 40px; border-bottom: 1px solid #eee;64 }65 .brand { font-size: 34px; color:#1a1a1a; }66 .brand .link { color:#1a73e8; font-weight: 600; }67 .title { font-size: 32px; color:#666; margin-top: 10px; }68 .rating { display: flex; align-items: center; gap: 16px; }69 .rating-count { font-size: 32px; color:#333; }70 71 /* Product image area */72 .image-area {73 position: relative; padding: 24px 40px 0 40px;74 }75 .product-image {76 width: 100%; height: 860px;77 background: #E0E0E0; border: 1px solid #BDBDBD; border-radius: 12px;78 display: flex; justify-content: center; align-items: center; color: #757575; font-size: 40px;79 }80 .share-btn, .wish-btn {81 position: absolute; width: 96px; height: 96px; border-radius: 48px;82 background: #ffffff; box-shadow: 0 6px 12px rgba(0,0,0,0.16);83 display: flex; align-items: center; justify-content: center; border:1px solid #e6e6e6;84 }85 .share-btn { right: 56px; top: 56px; }86 .wish-btn { left: 56px; bottom: 120px; }87 88 /* Carousel dots */89 .dots {90 display: flex; justify-content: center; gap: 24px;91 padding: 26px 0 24px 0;92 }93 .dot {94 width: 22px; height: 22px; border-radius: 50%;95 border: 2px solid #bbb; background: #ddd;96 }97 .dot.active { background: #6b6b6b; border-color: #6b6b6b; }98 99 /* Color options */100 .color-section {101 padding: 20px 40px;102 border-top: 1px solid #eee;103 }104 .color-title { font-size: 36px; color:#333; }105 .color-title .strong { font-weight: 700; }106 .thumb-list {107 display: flex; gap: 36px; margin-top: 24px; align-items: flex-start;108 }109 .thumb {110 width: 180px; height: 180px; border-radius: 90px;111 background: #E0E0E0; border: 2px solid #BDBDBD;112 display: flex; align-items:center; justify-content:center; color:#757575; font-size: 24px;113 }114 .thumb.selected { border: 6px solid #111; }115 .price-tag { font-size: 34px; color:#333; margin-top: 18px; margin-left: 16px; }116 .mini-lines {117 display: grid; grid-template-columns: repeat(2, 1fr); gap: 12px; width: 360px; margin-top: 20px;118 }119 .line { height: 18px; background:#eee; border-radius:8px; }120 121 /* Size row */122 .size-row {123 padding: 24px 40px 260px 40px; /* leave space before bottom nav */124 font-size: 38px; color:#333;125 }126 .size-row .strong { font-weight: 700; }127 128 /* Bottom navigation bar */129 .bottom-nav {130 position: absolute; bottom: 0; left: 0; width: 100%; height: 200px;131 background: #ffffff; border-top: 1px solid #e5e5e5;132 display: grid; grid-template-columns: repeat(5, 1fr);133 align-items: center; text-align: center;134 }135 .nav-item { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 12px; }136 .nav-label { font-size: 30px; color:#2b2b2b; }137 .nav-item.active .nav-label { color: #16c0c9; font-weight: 700; }138 .nav-icon { width: 60px; height: 60px; }139 140 /* Utility SVG color */141 .icon-muted { fill: none; stroke: #333; stroke-width: 2; }142 .icon-teal { stroke: #16c0c9; }143 .star { width: 44px; height: 44px; }144 .star-fill { fill: #ff8f00; }145 .star-outline { fill: none; stroke: #ff8f00; stroke-width: 3; }146</style>147</head>148<body>149<div id="render-target">150 151 <!-- Header -->152 <div class="header">153 <div class="status-bar">154 <div>10:39</div>155 <div class="status-icons">156 <div class="status-dot"></div>157 <div class="status-dot"></div>158 <div class="status-dot"></div>159 <div class="battery">160 <svg width="28" height="28" viewBox="0 0 24 24"><circle cx="12" cy="12" r="10" fill="none" stroke="#333" stroke-width="2"/></svg>161 <div class="battery-box"><div class="battery-level"></div></div>162 <div>100%</div>163 </div>164 </div>165 </div>166 <div class="search-row">167 <div class="back-btn">168 <svg width="44" height="44" viewBox="0 0 48 48">169 <path d="M28 10 L14 24 L28 38" stroke="#333" stroke-width="4" fill="none" stroke-linecap="round" stroke-linejoin="round"/>170 </svg>171 </div>172 <div class="search-box">173 <svg width="40" height="40" viewBox="0 0 48 48">174 <circle cx="20" cy="20" r="14" stroke="#666" stroke-width="3" fill="none"/>175 <line x1="34" y1="34" x2="46" y2="46" stroke="#666" stroke-width="3" />176 </svg>177 <div class="search-text">sports shoes for men</div>178 <div class="scan-btn">179 <svg width="34" height="34" viewBox="0 0 48 48">180 <rect x="10" y="10" width="28" height="28" rx="4" fill="none" stroke="#333" stroke-width="3"/>181 <path d="M10 18 H6 M42 18 H46 M10 30 H6 M42 30 H46" stroke="#333" stroke-width="3"/>182 </svg>183 </div>184 </div>185 </div>186 </div>187 188 <!-- Title and rating -->189 <div class="info-bar">190 <div>191 <div class="brand">Brand: <span class="link">Nike</span></div>192 <div class="title">Nike Mens React Infinity Run Fk 3 Running Shoe</div>193 </div>194 <div class="rating">195 <div>196 <svg class="star" viewBox="0 0 24 24"><path class="star-fill" d="M12 2l3.1 6.3 6.9 1-5 4.8 1.2 6.9L12 18l-6.2 3.1 1.2-6.9-5-4.8 6.9-1z"/></svg>197 <svg class="star" viewBox="0 0 24 24"><path class="star-fill" d="M12 2l3.1 6.3 6.9 1-5 4.8 1.2 6.9L12 18l-6.2 3.1 1.2-6.9-5-4.8 6.9-1z"/></svg>198 <svg class="star" viewBox="0 0 24 24"><path class="star-fill" d="M12 2l3.1 6.3 6.9 1-5 4.8 1.2 6.9L12 18l-6.2 3.1 1.2-6.9-5-4.8 6.9-1z"/></svg>199 <svg class="star" viewBox="0 0 24 24"><path class="star-fill" d="M12 2l3.1 6.3 6.9 1-5 4.8 1.2 6.9L12 18l-6.2 3.1 1.2-6.9-5-4.8 6.9-1z"/></svg>200 <svg class="star" viewBox="0 0 24 24"><path class="star-outline" d="M12 2l3.1 6.3 6.9 1-5 4.8 1.2 6.9L12 18l-6.2 3.1 1.2-6.9-5-4.8 6.9-1z"/></svg>201 </div>202 <div class="rating-count">136</div>203 </div>204 </div>205 206 <!-- Product image -->207 <div class="image-area">208 <div class="product-image">[IMG: Nike Running Shoe]</div>209 <div class="share-btn">210 <svg width="44" height="44" viewBox="0 0 48 48">211 <circle cx="12" cy="12" r="4" fill="#666"/>212 <circle cx="36" cy="10" r="4" fill="#666"/>213 <circle cx="36" cy="34" r="4" fill="#666"/>214 <path d="M16 12 L32 10 M16 12 L32 34" stroke="#666" stroke-width="3" fill="none"/>215 </svg>216 </div>217 <div class="wish-btn">218 <svg width="44" height="44" viewBox="0 0 48 48">219 <path d="M24 40s-12-7.5-16-14c-3-5 1-12 8-12 4 0 6 3 8 5 2-2 4-5 8-5 7 0 11 7 8 12-4 6.5-16 14-16 14z" fill="none" stroke="#333" stroke-width="3"/>220 </svg>221 </div>222 </div>223 224 <!-- Dots -->225 <div class="dots">226 <div class="dot active"></div>227 <div class="dot"></div>228 <div class="dot"></div>229 <div class="dot"></div>230 <div class="dot"></div>231 <div class="dot"></div>232 </div>233 234 <!-- Color options -->235 <div class="color-section">236 <div class="color-title">Colour: <span class="strong">Night Forest/Pilgrim-Glacier Blue</span></div>237 <div class="thumb-list">238 <div>239 <div class="thumb">[IMG: Colour 1]</div>240 <div class="mini-lines">241 <div class="line"></div><div class="line"></div>242 <div class="line"></div><div class="line"></div>243 </div>244 </div>245 <div>246 <div class="thumb selected">[IMG: Selected Colour]</div>247 <div class="price-tag">₹13,995.00</div>248 <div class="mini-lines">249 <div class="line"></div><div class="line"></div>250 <div class="line"></div><div class="line"></div>251 </div>252 </div>253 <div>254 <div class="thumb">[IMG: Colour 3]</div>255 <div class="mini-lines">256 <div class="line"></div><div class="line"></div>257 <div class="line"></div><div class="line"></div>258 </div>259 </div>260 <div>261 <div class="thumb">[IMG: Colour 4]</div>262 <div class="mini-lines">263 <div class="line"></div><div class="line"></div>264 <div class="line"></div><div class="line"></div>265 </div>266 </div>267 </div>268 </div>269 270 <!-- Size row -->271 <div class="size-row">Size: <span class="strong">7 UK (8 US)</span></div>272 273 <!-- Bottom Navigation -->274 <div class="bottom-nav">275 <div class="nav-item active">276 <svg class="nav-icon" viewBox="0 0 48 48">277 <path d="M8 22 L24 8 L40 22 V40 H28 V28 H20 V40 H8 Z" fill="none" stroke="#16c0c9" stroke-width="3" />278 </svg>279 <div class="nav-label">Home</div>280 </div>281 <div class="nav-item">282 <svg class="nav-icon" viewBox="0 0 48 48">283 <circle cx="24" cy="16" r="8" fill="none" stroke="#333" stroke-width="3"/>284 <path d="M8 40 C8 30 18 28 24 28 C30 28 40 30 40 40" fill="none" stroke="#333" stroke-width="3"/>285 </svg>286 <div class="nav-label">You</div>287 </div>288 <div class="nav-item">289 <svg class="nav-icon" viewBox="0 0 48 48">290 <rect x="10" y="10" width="28" height="12" rx="3" fill="none" stroke="#333" stroke-width="3"/>291 <rect x="10" y="26" width="28" height="12" rx="3" fill="none" stroke="#333" stroke-width="3"/>292 </svg>293 <div class="nav-label">More</div>294 </div>295 <div class="nav-item">296 <svg class="nav-icon" viewBox="0 0 48 48">297 <path d="M10 14 H40 L38 28 H12 Z" fill="none" stroke="#333" stroke-width="3"/>298 <circle cx="16" cy="36" r="4" stroke="#333" stroke-width="3" fill="none"/>299 <circle cx="34" cy="36" r="4" stroke="#333" stroke-width="3" fill="none"/>300 </svg>301 <div class="nav-label">Cart</div>302 </div>303 <div class="nav-item">304 <svg class="nav-icon" viewBox="0 0 48 48">305 <path d="M10 14 H38 M10 24 H38 M10 34 H38" stroke="#333" stroke-width="3" />306 </svg>307 <div class="nav-label">Menu</div>308 </div>309 </div>310 311</div>312</body>313</html>