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 - Mock</title>7<style>8 body { margin: 0; padding: 0; background: transparent; font-family: "Segoe UI", Arial, Helvetica, sans-serif; color: #111; }9 #render-target {10 width: 1080px; height: 2400px; position: relative; overflow: hidden;11 background: #ffffff;12 }13 14 /* Top gradient header */15 .topbar {16 position: relative;17 width: 100%;18 height: 230px;19 background: linear-gradient(90deg, #89d9d5, #c7efd8);20 }21 .status-row {22 position: absolute; left: 28px; right: 28px; top: 16px;23 height: 48px; display: flex; align-items: center; justify-content: space-between;24 color: #0f4b4a; font-size: 34px; opacity: 0.9;25 }26 .status-icons { display: flex; gap: 18px; align-items: center; }27 .dot { width: 10px; height: 10px; background: #0f4b4a; border-radius: 50%; opacity: 0.6; }28 29 .back-wrap {30 position: absolute; left: 22px; top: 96px; width: 72px; height: 72px; display: flex; align-items: center; justify-content: center;31 }32 .search-bar {33 position: absolute; left: 120px; right: 40px; top: 86px;34 height: 106px; background: #fff; border-radius: 60px;35 display: flex; align-items: center; padding: 0 28px; gap: 22px;36 box-shadow: 0 8px 18px rgba(0,0,0,0.15);37 }38 .search-bar .placeholder {39 font-size: 40px; color: #666;40 white-space: nowrap; overflow: hidden; text-overflow: ellipsis;41 }42 .icon { width: 48px; height: 48px; }43 44 /* Hero image area */45 .hero {46 width: 100%; background: #f7f7f7; border-top: 1px solid #ececec; border-bottom: 1px solid #ececec;47 padding-top: 40px; padding-bottom: 36px;48 }49 .hero .image {50 width: 1000px; height: 300px; margin: 0 auto; background: #E0E0E0; border: 1px solid #BDBDBD;51 display: flex; align-items: center; justify-content: center; color: #757575; font-size: 36px;52 }53 .fav {54 position: absolute; left: 36px; top: 360px; width: 88px; height: 88px; border-radius: 44px;55 background: #fff; box-shadow: 0 4px 10px rgba(0,0,0,0.12); display: flex; align-items: center; justify-content: center;56 }57 .dots { display: flex; justify-content: center; gap: 22px; margin-top: 26px; }58 .dots span {59 width: 22px; height: 22px; border-radius: 50%; border: 3px solid #bdbdbd; background: #fff;60 }61 .dots span.active { background: #777; border-color: #777; }62 .divider { height: 16px; background: #f2f2f2; border-top: 1px solid #e6e6e6; }63 64 /* Content sections */65 .content { padding: 36px 40px 220px; }66 h2 { margin: 18px 0; font-size: 44px; font-weight: 600; }67 .bold { font-weight: 700; }68 69 .variants { display: flex; gap: 40px; margin-top: 16px; }70 .variant {71 width: 300px;72 }73 .variant .thumb {74 width: 300px; height: 220px; border-radius: 160px; overflow: hidden; position: relative;75 border: 6px solid #dedede; background: #fff; display: flex; align-items: center; justify-content: center;76 }77 .variant.selected .thumb { border-color: #111; }78 .thumb .img {79 width: 260px; height: 180px; background: #E0E0E0; border: 1px solid #BDBDBD; color: #757575;80 display: flex; align-items: center; justify-content: center; font-size: 28px; border-radius: 140px;81 }82 .badge {83 position: absolute; left: 24px; bottom: -18px; background: #d81b60; color: #fff; font-weight: 700;84 padding: 10px 22px; border-radius: 16px; font-size: 28px;85 }86 .price { margin-top: 30px; font-size: 34px; }87 .price .old { color: #9E9E9E; text-decoration: line-through; font-size: 30px; margin-top: 6px; }88 89 .size-row { display: flex; gap: 24px; flex-wrap: wrap; margin-top: 20px; }90 .chip {91 min-width: 150px; padding: 24px 32px; border: 3px solid #cfcfcf; border-radius: 18px; text-align: center; font-size: 36px; color: #111; background: #fff;92 }93 .chip.selected { background: #111; color: #fff; border-color: #111; }94 .link { color: #0a7aa4; font-size: 40px; margin: 36px 0 18px; }95 96 .deal {97 margin-top: 26px;98 border-top: 1px solid #e9e9e9; padding-top: 28px;99 }100 .deal-badge {101 display: inline-block; background: #d81b60; color: #fff; padding: 14px 22px; border-radius: 14px; font-weight: 700; font-size: 34px;102 }103 .deal-main { display: flex; align-items: baseline; gap: 22px; margin-top: 18px; }104 .off { color: #d81b60; font-size: 88px; font-weight: 700; }105 .price-big { font-size: 86px; font-weight: 700; }106 .muted { color: #777; font-size: 34px; }107 .strike { text-decoration: line-through; color: #9E9E9E; }108 109 .offer-card {110 margin-top: 36px; border: 1px solid #e4e4e4; border-radius: 18px; overflow: hidden;111 }112 .offer-header {113 padding: 26px; display: flex; align-items: center; gap: 24px; background: #fafafa;114 }115 .offer-title { font-size: 40px; font-weight: 700; }116 .offer-sub { font-size: 34px; color: #606060; margin-top: 4px; }117 .grow { flex: 1; }118 119 /* Bottom navigation */120 .bottom-nav {121 position: absolute; left: 0; right: 0; bottom: 40px; height: 170px; border-top: 1px solid #e6e6e6; background: #fff;122 display: flex; align-items: center; justify-content: space-around;123 }124 .nav-item { display: flex; flex-direction: column; align-items: center; gap: 10px; color: #333; font-size: 30px; }125 .nav-item.active { color: #0e8d8a; }126 .gesture {127 position: absolute; left: 50%; transform: translateX(-50%);128 bottom: 8px; width: 300px; height: 10px; background: #bdbdbd; border-radius: 8px;129 }130</style>131</head>132<body>133<div id="render-target">134 135 <div class="topbar">136 <div class="status-row">137 <div>11:08</div>138 <div class="status-icons">139 <div class="dot"></div><div class="dot"></div><div class="dot"></div><div class="dot"></div>140 <div style="width:8px;"></div>141 <svg class="icon" viewBox="0 0 24 24"><path d="M2 18h20L12 6 2 18z" fill="#0f4b4a"/></svg>142 <svg class="icon" viewBox="0 0 24 24"><rect x="3" y="6" width="14" height="12" rx="2" ry="2" stroke="#0f4b4a" fill="none" stroke-width="2"/><rect x="19" y="10" width="2" height="4" fill="#0f4b4a"/></svg>143 </div>144 </div>145 146 <div class="back-wrap">147 <svg width="56" height="56" viewBox="0 0 24 24">148 <path d="M15 5 L8 12 L15 19" fill="none" stroke="#111" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>149 </svg>150 </div>151 152 <div class="search-bar">153 <svg class="icon" viewBox="0 0 24 24">154 <circle cx="10" cy="10" r="7" stroke="#444" stroke-width="2" fill="none"/>155 <path d="M15 15 L21 21" stroke="#444" stroke-width="2" stroke-linecap="round"/>156 </svg>157 <div class="placeholder">party wear shoes for mens</div>158 <div style="margin-left:auto;"></div>159 <svg class="icon" viewBox="0 0 24 24">160 <path d="M3 7 L3 5 L7 5" stroke="#444" stroke-width="2" fill="none" stroke-linecap="round"/>161 <path d="M21 7 L21 5 L17 5" stroke="#444" stroke-width="2" fill="none" stroke-linecap="round"/>162 <path d="M3 17 L3 19 L7 19" stroke="#444" stroke-width="2" fill="none" stroke-linecap="round"/>163 <path d="M21 17 L21 19 L17 19" stroke="#444" stroke-width="2" fill="none" stroke-linecap="round"/>164 <rect x="6" y="7" width="12" height="10" rx="2" ry="2" stroke="#444" stroke-width="2" fill="none"/>165 </svg>166 </div>167 </div>168 169 <div class="hero">170 <div class="image">[IMG: Product Shoe Banner]</div>171 <div class="dots">172 <span class="active"></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span>173 </div>174 </div>175 <div class="fav">176 <svg width="44" height="44" viewBox="0 0 24 24">177 <path d="M12 21s-7-4.3-7-9.5C5 8 7 6 9.5 6c1.6 0 2.5.8 2.5 1.7C12 6.8 12.9 6 14.5 6 17 6 19 8 19 11.5 19 16.7 12 21 12 21z" fill="none" stroke="#777" stroke-width="1.8"/>178 </svg>179 </div>180 <div class="divider"></div>181 182 <div class="content">183 <h2>Colour: <span class="bold">Black</span></h2>184 185 <div class="variants">186 <div class="variant selected">187 <div class="thumb">188 <div class="img">[IMG: Black Shoe]</div>189 <div class="badge">Limited Time</div>190 </div>191 <div class="price">192 ₹709.00193 <div class="old">₹2,499.00</div>194 </div>195 </div>196 197 <div class="variant">198 <div class="thumb">199 <div class="img">[IMG: Brown Shoe]</div>200 </div>201 <div class="price">202 ₹759.00203 <div class="old">₹2,499.00</div>204 </div>205 </div>206 207 <div class="variant">208 <div class="thumb">209 <div class="img">[IMG: Tan Shoe]</div>210 <div class="badge">Limited Time</div>211 </div>212 <div class="price">213 ₹709.00214 <div class="old">₹2,499.00</div>215 </div>216 </div>217 </div>218 219 <h2 style="margin-top: 40px;">Size: <span class="bold">9 UK</span></h2>220 <div class="size-row">221 <div class="chip">6 UK</div>222 <div class="chip">7 UK</div>223 <div class="chip">8 UK</div>224 <div class="chip selected">9 UK</div>225 <div class="chip">10 UK</div>226 <div class="chip">11 UK</div>227 </div>228 229 <div class="link">Size guide</div>230 231 <div class="deal">232 <div class="deal-badge">Deal of the Day</div>233 <div class="deal-main">234 <div class="off">-72%</div>235 <div class="price-big">₹709</div>236 </div>237 <div class="muted">M.R.P.: <span class="strike">₹2,499</span></div>238 <div style="margin-top: 12px; font-size: 36px;">Inclusive of all taxes</div>239 240 <div class="offer-card">241 <div class="offer-header">242 <svg width="52" height="52" viewBox="0 0 24 24">243 <circle cx="12" cy="12" r="9" stroke="#555" fill="none" stroke-width="1.6"/>244 <text x="12" y="16" text-anchor="middle" font-size="12" fill="#555">%</text>245 </svg>246 <div class="grow">247 <div class="offer-title">Save Extra with Offers</div>248 <div class="offer-sub">Bank Offers and Partner Offers</div>249 </div>250 <svg width="36" height="36" viewBox="0 0 24 24">251 <path d="M6 9l6 6 6-6" stroke="#333" stroke-width="2" fill="none" stroke-linecap="round" stroke-linejoin="round"/>252 </svg>253 </div>254 </div>255 </div>256 </div>257 258 <div class="bottom-nav">259 <div class="nav-item active">260 <svg width="56" height="56" viewBox="0 0 24 24">261 <path d="M3 10l9-7 9 7v9a1 1 0 0 1-1 1h-5v-6H9v6H4a1 1 0 0 1-1-1z" fill="currentColor"/>262 </svg>263 <div>Home</div>264 </div>265 <div class="nav-item">266 <svg width="56" height="56" viewBox="0 0 24 24">267 <circle cx="12" cy="8" r="4" fill="currentColor"/>268 <path d="M4 21c0-4 4-7 8-7s8 3 8 7" fill="currentColor"/>269 </svg>270 <div>You</div>271 </div>272 <div class="nav-item">273 <svg width="56" height="56" viewBox="0 0 24 24">274 <rect x="4" y="4" width="16" height="6" rx="1" fill="currentColor"/>275 <rect x="4" y="12" width="16" height="6" rx="1" fill="currentColor"/>276 </svg>277 <div>More</div>278 </div>279 <div class="nav-item">280 <svg width="56" height="56" viewBox="0 0 24 24">281 <path d="M7 6h14l-2 10H9L7 6z" fill="currentColor"/>282 <circle cx="9" cy="19" r="1.5" fill="currentColor"/>283 <circle cx="17" cy="19" r="1.5" fill="currentColor"/>284 </svg>285 <div>Cart</div>286 </div>287 <div class="nav-item">288 <svg width="56" height="56" viewBox="0 0 24 24">289 <rect x="4" y="6" width="16" height="2" fill="currentColor"/>290 <rect x="4" y="11" width="16" height="2" fill="currentColor"/>291 <rect x="4" y="16" width="16" height="2" fill="currentColor"/>292 </svg>293 <div>Menu</div>294 </div>295 </div>296 297 <div class="gesture"></div>298</div>299</body>300</html>