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: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Arial, sans-serif; color: #222; }9 #render-target {10 width: 1080px; height: 2400px; position: relative; overflow: hidden;11 background: #ffffff;12 }13 .header {14 width: 100%;15 height: 230px;16 background: linear-gradient(90deg, #8fd9d2 0%, #b7eadc 100%);17 position: relative;18 }19 .back-btn {20 position: absolute; left: 28px; top: 128px; width: 64px; height: 64px; display: flex; align-items: center; justify-content: center;21 }22 .search-bar {23 position: absolute; left: 120px; right: 40px; top: 100px;24 height: 96px; background: #fff; border-radius: 48px;25 box-shadow: 0 6px 18px rgba(0,0,0,0.15);26 display: flex; align-items: center; padding: 0 28px; gap: 18px;27 }28 .search-input {29 flex: 1; color: #333; font-size: 36px;30 white-space: nowrap; overflow: hidden; text-overflow: ellipsis;31 }32 .icon { width: 44px; height: 44px; }33 .hero {34 height: 360px; background: #f5f5f5; position: relative; display: flex; align-items: center; justify-content: center;35 border-bottom: 1px solid #e6e6e6;36 }37 .hero .img {38 width: 980px; height: 220px; background: #E0E0E0; border: 1px solid #BDBDBD; border-radius: 14px;39 display: flex; align-items: center; justify-content: center; color: #757575; font-size: 34px;40 }41 .wishlist {42 position: absolute; left: 40px; top: 20px; width: 96px; height: 96px; border-radius: 50%;43 background: #fff; border: 2px solid #e9e9e9; display: flex; align-items: center; justify-content: center;44 color: #9aa0a6;45 }46 .dots {47 position: absolute; bottom: 24px; left: 0; right: 0; display: flex; justify-content: center; gap: 22px;48 }49 .dot { width: 20px; height: 20px; border-radius: 50%; border: 2px solid #9e9e9e; }50 .dot.active { background: #6b6b6b; border-color: #6b6b6b; }51 52 .section { padding: 26px 40px; }53 .divider { height: 12px; background: #f1f1f1; border-top: 1px solid #e8e8e8; border-bottom: 1px solid #e8e8e8; }54 .title { font-size: 44px; margin: 18px 0 10px; }55 .title b { font-weight: 700; }56 57 .variants { display: flex; gap: 44px; margin-top: 10px; }58 .variant {59 width: 300px; text-align: center;60 }61 .variant .circle {62 width: 216px; height: 216px; margin: 0 auto 16px; border-radius: 50%;63 background: #E0E0E0; border: 2px solid #BDBDBD; display: flex; align-items: center; justify-content: center; color: #757575; font-size: 26px;64 }65 .variant.selected .circle { border: 6px solid #111; }66 .tag {67 display: inline-block; background: #e41447; color: #fff; font-size: 28px; padding: 8px 18px; border-radius: 14px; margin-bottom: 8px;68 }69 .price { font-size: 30px; margin-top: 6px; }70 .mrp { font-size: 26px; color: #9e9e9e; text-decoration: line-through; }71 72 .size-title { font-size: 44px; margin: 30px 0 18px; }73 .chips { display: flex; gap: 24px; flex-wrap: nowrap; }74 .chip {75 min-width: 160px; height: 96px; border-radius: 16px; border: 2px solid #d0d0d0;76 display: flex; align-items: center; justify-content: center; font-size: 34px; color: #333; background: #fff;77 }78 .chip.selected { background: #111; color: #fff; border-color: #111; }79 .size-guide { color: #0aa3a6; font-size: 38px; margin: 26px 0; }80 81 .pricing { padding: 24px 40px; }82 .pricing-row { display: flex; align-items: baseline; gap: 24px; }83 .discount { color: #e64273; font-size: 100px; font-weight: 700; }84 .amount { font-size: 100px; font-weight: 700; }85 .mrp-line { margin-top: 14px; color: #7e7e7e; font-size: 34px; }86 .mrp-line .strike { text-decoration: line-through; }87 88 .offer-row {89 display: flex; align-items: center; gap: 26px;90 padding: 26px 40px; border-top: 1px solid #e8e8e8; border-bottom: 1px solid #e8e8e8;91 }92 .offer-icon {93 width: 72px; height: 72px; border-radius: 50%; border: 2px dashed #f2b6a2; display: flex; align-items: center; justify-content: center; color: #e99b7b;94 }95 .offer-text { flex: 1; }96 .offer-text b { display: block; font-size: 36px; margin-bottom: 6px; }97 .offer-text span { color: #555; font-size: 30px; }98 .chev { width: 36px; height: 36px; }99 100 .free-line { padding: 20px 40px; font-size: 34px; border-bottom: 1px solid #e8e8e8; }101 .free-line .free { color: #0aa3a6; font-weight: 700; }102 103 .bottom-nav {104 position: absolute; left: 0; right: 0; bottom: 60px; height: 170px; background: #fff; border-top: 1px solid #e5e5e5;105 display: flex; justify-content: space-around; align-items: center;106 }107 .nav-item { text-align: center; color: #666; }108 .nav-item .label { font-size: 26px; margin-top: 8px; }109 .nav-item.active { color: #0aa3a6; }110 .handle {111 position: absolute; left: 50%; transform: translateX(-50%);112 bottom: 24px; width: 300px; height: 10px; background: #c8c8c8; border-radius: 6px;113 }114</style>115</head>116<body>117<div id="render-target">118 119 <div class="header">120 <div class="back-btn" aria-label="Back">121 <svg class="icon" viewBox="0 0 24 24"><path d="M15.5 4.5L7 12l8.5 7.5" fill="none" stroke="#111" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/></svg>122 </div>123 <div class="search-bar">124 <svg class="icon" viewBox="0 0 24 24"><circle cx="11" cy="11" r="7" fill="none" stroke="#555" stroke-width="2"/><path d="M16 16l5 5" stroke="#555" stroke-width="2" stroke-linecap="round"/></svg>125 <div class="search-input">party wear shoes for mens</div>126 <svg class="icon" viewBox="0 0 24 24">127 <rect x="4" y="4" width="16" height="16" rx="2" ry="2" fill="none" stroke="#777" stroke-width="2"/>128 <circle cx="12" cy="12" r="3" fill="none" stroke="#777" stroke-width="2"/>129 </svg>130 </div>131 </div>132 133 <div class="hero">134 <div class="img">[IMG: Brown Loafer - Close-up]</div>135 <div class="wishlist">136 <svg width="40" height="40" viewBox="0 0 24 24"><path d="M12 21s-6.4-4.5-8.5-7.3C1.3 11.3 2 8.3 4.5 7.2 6.6 6.3 8.7 7.3 9.6 8.7L12 12l2.4-3.3c.9-1.4 3-2.4 5.1-1.5 2.5 1.1 3.2 4.1 1 6.5C18.4 16.5 12 21 12 21z" fill="none" stroke="#9aa0a6" stroke-width="1.6"/></svg>137 </div>138 <div class="dots">139 <div class="dot"></div>140 <div class="dot active"></div>141 <div class="dot"></div>142 <div class="dot"></div>143 <div class="dot"></div>144 <div class="dot"></div>145 <div class="dot"></div>146 <div class="dot"></div>147 </div>148 </div>149 150 <div class="divider"></div>151 152 <div class="section">153 <div class="title">Colour: <b>Brown</b></div>154 <div class="variants">155 <div class="variant">156 <div class="circle">[IMG: Black Loafer]</div>157 <div class="tag">Limited Time</div>158 <div class="price">₹709.00</div>159 <div class="mrp">₹2,499.00</div>160 </div>161 <div class="variant selected">162 <div class="circle">[IMG: Brown Loafer]</div>163 <div class="price">₹759.00</div>164 <div class="mrp">₹2,499.00</div>165 </div>166 <div class="variant">167 <div class="circle">[IMG: Tan Lo macro]</div>168 <div class="tag">Limited Time</div>169 <div class="price">₹709.00</div>170 <div class="mrp">₹2,499.00</div>171 </div>172 </div>173 174 <div class="size-title">Size: <b>9 UK</b></div>175 <div class="chips">176 <div class="chip">7 UK</div>177 <div class="chip">8 UK</div>178 <div class="chip selected">9 UK</div>179 <div class="chip">10 UK</div>180 <div class="chip">11 UK</div>181 </div>182 183 <div class="size-guide">Size guide</div>184 </div>185 186 <div class="divider"></div>187 188 <div class="pricing">189 <div class="pricing-row">190 <div class="discount">-70%</div>191 <div class="amount">₹759</div>192 </div>193 <div class="mrp-line">M.R.P.: <span class="strike">₹2,499</span></div>194 <div style="margin-top: 10px; font-size: 34px;">Inclusive of all taxes</div>195 </div>196 197 <div class="offer-row">198 <div class="offer-icon">%</div>199 <div class="offer-text">200 <b>Save Extra with Offers</b>201 <span>Bank Offers and Partner Offers</span>202 </div>203 <svg class="chev" viewBox="0 0 24 24"><path d="M6 9l6 6 6-6" fill="none" stroke="#444" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/></svg>204 </div>205 206 <div class="free-line"><span class="free">FREE delivery</span> Saturday, 18 November. Order within 9</div>207 208 <div class="bottom-nav">209 <div class="nav-item active">210 <svg class="icon" viewBox="0 0 24 24"><path d="M3 10l9-7 9 7v9a1 1 0 0 1-1 1h-5v-6H9v6H4a1 1 0 0 1-1-1z" fill="none" stroke="currentColor" stroke-width="2"/></svg>211 <div class="label">Home</div>212 </div>213 <div class="nav-item">214 <svg class="icon" viewBox="0 0 24 24"><circle cx="12" cy="8" r="4" fill="none" stroke="currentColor" stroke-width="2"/><path d="M4 20c2-3 5-4 8-4s6 1 8 4" fill="none" stroke="currentColor" stroke-width="2"/></svg>215 <div class="label">You</div>216 </div>217 <div class="nav-item">218 <svg class="icon" viewBox="0 0 24 24"><rect x="3" y="3" width="8" height="8" fill="none" stroke="currentColor" stroke-width="2"/><rect x="13" y="13" width="8" height="8" fill="none" stroke="currentColor" stroke-width="2"/><rect x="13" y="3" width="8" height="8" fill="none" stroke="currentColor" stroke-width="2"/></svg>219 <div class="label">More</div>220 </div>221 <div class="nav-item">222 <svg class="icon" viewBox="0 0 24 24"><path d="M6 6h15l-2 8H7L6 6z" fill="none" stroke="currentColor" stroke-width="2"/><circle cx="9" cy="19" r="1.8" fill="currentColor"/><circle cx="17" cy="19" r="1.8" fill="currentColor"/></svg>223 <div class="label">Cart</div>224 </div>225 <div class="nav-item">226 <svg class="icon" viewBox="0 0 24 24"><path d="M4 7h16M4 12h16M4 17h16" stroke="currentColor" stroke-width="2" stroke-linecap="round"/></svg>227 <div class="label">Menu</div>228 </div>229 </div>230 231 <div class="handle"></div>232</div>233</body>234</html>