GD-ML/AndroidCode
13.4k
1<html>2<head>3<meta charset="utf-8">4<title>Women Formal Shoes - Product</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;color:#111;}8 #render-target{9 position:relative; overflow:hidden;10 width:1080px; height:2400px;11 background:#ffffff;12 border-radius:0;13 }14 /* Header gradient area */15 .header{16 width:100%;17 height:250px;18 background: linear-gradient(90deg,#bfeae2,#bfe3d9);19 position:relative;20 box-shadow: 0 1px 0 rgba(0,0,0,0.06) inset;21 padding-top:18px;22 }23 .status-bar{24 display:flex; align-items:center; justify-content:space-between;25 padding:0 40px; color:#1b1b1b; font-weight:600; font-size:40px;26 }27 .status-icons{display:flex; gap:26px; align-items:center;}28 .search-row{29 display:flex; align-items:center; gap:22px;30 padding:22px 30px 20px 30px;31 }32 .back-btn{33 width:70px; height:70px; border-radius:50%; display:flex; align-items:center; justify-content:center;34 }35 .search-box{36 flex:1; height:110px; background:#fff; border-radius:24px; display:flex; align-items:center; padding:0 28px;37 box-shadow:0 1px 0 rgba(0,0,0,0.1) inset; border:1px solid #e0e0e0;38 }39 .search-placeholder{color:#222; font-size:44px;}40 .scan-btn{41 width:110px; height:110px; background:#fff; border:1px solid #e0e0e0; border-radius:24px; display:flex; align-items:center; justify-content:center;42 }43 44 /* Content area */45 .content{padding:18px 36px 180px 36px;}46 .dots{display:flex; gap:22px; justify-content:center; margin:8px 0 24px 0;}47 .dot{width:20px;height:20px;border-radius:50%;border:3px solid #aaa;}48 .dot.active{background:#444;border-color:#444;}49 .section-title{font-size:46px; font-weight:700; margin:28px 0 18px;}50 .color-row{display:flex; gap:40px; align-items:flex-start;}51 .thumb{52 width:180px;height:180px;border-radius:50%;background:#E0E0E0;border:2px solid #BDBDBD;display:flex;align-items:center;justify-content:center;color:#666;text-align:center;padding:10px;53 }54 .price-under{55 font-size:38px;color:#111;margin-top:18px;56 }57 .mrp-strike{font-size:32px;color:#8a8a8a;text-decoration:line-through;margin-top:6px;}58 .size-row-title{font-size:46px; font-weight:700; margin:36px 0 20px;}59 .sizes{display:flex; gap:28px; flex-wrap:wrap;}60 .size-btn{61 width:200px;height:110px;border:2px solid #ddd;border-radius:18px;display:flex;align-items:center;justify-content:center;font-size:44px;color:#222;background:#fff;62 }63 .size-btn.active{background:#111;color:#fff;border-color:#111;}64 .price-area{display:flex; align-items:flex-end; gap:30px; margin:40px 0 10px;}65 .discount{font-size:88px;color:#d32f2f;font-weight:700;}66 .sell-price{font-size:90px;font-weight:800;}67 .mrp-line{font-size:38px;color:#707070;margin-top:6px;}68 .tax-note{font-size:40px;color:#333;margin-top:10px;}69 .divider{height:1px;background:#e5e5e5;margin:34px 0;}70 .offer-row{display:flex; align-items:center; gap:28px;}71 .offer-title{font-size:48px;font-weight:800;}72 .offer-sub{font-size:42px;color:#555;margin:10px 0 0 0;}73 .accordion{display:flex;justify-content:space-between;align-items:center;width:100%;}74 .info-line{font-size:42px;color:#222;line-height:1.35;}75 .info-line b{font-weight:800;}76 .green{color:#1faa59;}77 .blue{color:#017185;}78 .location-row{display:flex; align-items:center; gap:22px; font-size:44px; color:#2f4f4f; margin-top:26px;}79 .instock{font-size:56px; color:#0f9d58; margin:40px 0;}80 .qty-row{display:flex; align-items:center; gap:20px;}81 .qty-pill{82 width:320px; height:110px; border-radius:22px; border:2px solid #ddd; display:flex; align-items:center; justify-content:space-between; padding:0 30px; font-size:44px; color:#222;83 }84 85 /* Bottom navigation */86 .bottom-nav{87 position:absolute; left:0; right:0; bottom:0; height:160px; border-top:1px solid #e5e5e5; background:#fff;88 display:flex; justify-content:space-around; align-items:center;89 }90 .nav-item{display:flex; flex-direction:column; align-items:center; gap:10px; color:#333; font-size:36px;}91 .nav-item.active{color:#0a6d6a;}92 .img-placeholder{background:#E0E0E0; border:1px solid #BDBDBD; color:#757575; display:flex; align-items:center; justify-content:center;}93 /* Small helper */94 .muted{color:#7a7a7a;}95</style>96</head>97<body>98<div id="render-target">99 100 <div class="header">101 <div class="status-bar">102 <div>6:30</div>103 <div class="status-icons">104 <!-- simple dots representing icons -->105 <svg width="34" height="34"><circle cx="17" cy="17" r="6" fill="#2d2d2d"/></svg>106 <svg width="34" height="34"><circle cx="17" cy="17" r="6" fill="#2d2d2d"/></svg>107 <svg width="34" height="34"><circle cx="17" cy="17" r="6" fill="#2d2d2d"/></svg>108 <svg width="34" height="34"><circle cx="17" cy="17" r="6" fill="#2d2d2d"/></svg>109 <svg width="34" height="34"><circle cx="17" cy="17" r="6" fill="#2d2d2d"/></svg>110 </div>111 </div>112 113 <div class="search-row">114 <div class="back-btn">115 <svg width="52" height="52" viewBox="0 0 24 24">116 <path d="M15 18l-6-6 6-6" stroke="#111" stroke-width="2" fill="none" stroke-linecap="round" stroke-linejoin="round"/>117 </svg>118 </div>119 <div class="search-box">120 <svg width="44" height="44" viewBox="0 0 24 24" style="margin-right:16px">121 <circle cx="11" cy="11" r="7" stroke="#555" stroke-width="2" fill="none"/>122 <path d="M16.5 16.5l5 5" stroke="#555" stroke-width="2" />123 </svg>124 <div class="search-placeholder">women formal shoes</div>125 </div>126 <div class="scan-btn">127 <!-- camera icon -->128 <svg width="52" height="52" viewBox="0 0 24 24">129 <rect x="3" y="7" width="18" height="12" rx="2" ry="2" stroke="#111" fill="none" stroke-width="2"/>130 <path d="M9 7l1.5-2h3L15 7" stroke="#111" fill="none" stroke-width="2"/>131 <circle cx="12" cy="13" r="3" stroke="#111" stroke-width="2" fill="none"/>132 </svg>133 </div>134 </div>135 </div>136 137 <div class="content">138 139 <div class="dots">140 <div class="dot"></div>141 <div class="dot active"></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 149 <div class="section-title">Colour: <span style="font-weight:900;">Black</span></div>150 151 <div class="color-row">152 <div>153 <div class="thumb"><div>[IMG: Black Shoe]</div></div>154 <div class="price-under">₹699.00</div>155 <div class="mrp-strike">₹999.00</div>156 </div>157 <div>158 <div class="thumb"><div>[IMG: Brown Shoe]</div></div>159 <div class="price-under">₹699.00</div>160 <div class="mrp-strike">₹999.00</div>161 </div>162 </div>163 164 <div class="size-row-title">Size: <span style="font-weight:800;">8 UK</span></div>165 <div class="sizes">166 <div class="size-btn">5 UK</div>167 <div class="size-btn">6 UK</div>168 <div class="size-btn">7 UK</div>169 <div class="size-btn active">8 UK</div>170 <div class="size-btn">9 UK</div>171 </div>172 173 <div class="price-area">174 <div class="discount">-30%</div>175 <div class="sell-price">₹699</div>176 </div>177 <div class="mrp-line">M.R.P.: <span class="muted" style="text-decoration:line-through;">₹999</span></div>178 <div class="tax-note">Inclusive of all taxes</div>179 180 <div class="divider"></div>181 182 <div class="accordion">183 <div>184 <div class="offer-row">185 <svg width="56" height="56" viewBox="0 0 24 24">186 <circle cx="8" cy="8" r="2" fill="#f0a500"/>187 <circle cx="16" cy="16" r="2" fill="#f0a500"/>188 <path d="M7 17l10-10" stroke="#f0a500" stroke-width="2"/>189 </svg>190 <div>191 <div class="offer-title">Save Extra with Offers</div>192 <div class="offer-sub">Bank Offers and Partner Offers</div>193 </div>194 </div>195 </div>196 <div style="padding-right:10px;">197 <svg width="44" height="44" viewBox="0 0 24 24">198 <path d="M6 9l6 6 6-6" stroke="#444" stroke-width="2" fill="none" stroke-linecap="round"/>199 </svg>200 </div>201 </div>202 203 <div class="divider"></div>204 205 <div class="info-line">206 <span class="blue">FREE delivery</span> <b>Friday, 29 September.</b> Order within <span class="green">18 hrs 15 mins.</span> <span class="blue">Details</span>207 </div>208 209 <div class="location-row">210 <svg width="44" height="44" viewBox="0 0 24 24">211 <path d="M12 22s7-7 7-12a7 7 0 10-14 0c0 5 7 12 7 12z" stroke="#2f4f4f" stroke-width="2" fill="none"/>212 <circle cx="12" cy="10" r="3" stroke="#2f4f4f" stroke-width="2" fill="none"/>213 </svg>214 <div>Deliver to Loni 201102</div>215 </div>216 217 <div class="instock">In stock</div>218 219 <div class="qty-row">220 <div class="qty-pill">221 <span>Qty: 1</span>222 <svg width="34" height="34" viewBox="0 0 24 24">223 <path d="M6 9l6 6 6-6" stroke="#444" stroke-width="2" fill="none" stroke-linecap="round"/>224 </svg>225 </div>226 </div>227 228 </div>229 230 <div class="bottom-nav">231 <div class="nav-item active">232 <svg width="56" height="56" viewBox="0 0 24 24">233 <path d="M3 10l9-7 9 7v9a2 2 0 0 1-2 2h-4v-6H9v6H5a2 2 0 0 1-2-2z" fill="#0a6d6a"/>234 </svg>235 <div>Home</div>236 </div>237 <div class="nav-item">238 <svg width="56" height="56" viewBox="0 0 24 24">239 <circle cx="12" cy="8" r="4" stroke="#333" stroke-width="2" fill="none"/>240 <path d="M4 20c2-4 14-4 16 0" stroke="#333" stroke-width="2" fill="none"/>241 </svg>242 <div>You</div>243 </div>244 <div class="nav-item">245 <svg width="56" height="56" viewBox="0 0 24 24">246 <circle cx="12" cy="12" r="9" stroke="#333" stroke-width="2" fill="none"/>247 <path d="M12 7v10M7 12h10" stroke="#333" stroke-width="2"/>248 </svg>249 <div>More</div>250 </div>251 <div class="nav-item">252 <svg width="56" height="56" viewBox="0 0 24 24">253 <path d="M6 6h15l-2 10H7L6 6z" stroke="#333" stroke-width="2" fill="none"/>254 <circle cx="9" cy="20" r="2" fill="#333"/>255 <circle cx="17" cy="20" r="2" fill="#333"/>256 </svg>257 <div>Cart</div>258 </div>259 <div class="nav-item">260 <svg width="56" height="56" viewBox="0 0 24 24">261 <path d="M3 6h18M3 12h18M3 18h18" stroke="#333" stroke-width="2"/>262 </svg>263 <div>Menu</div>264 </div>265 </div>266 267</div>268</body>269</html>