GD-ML/AndroidCode
13.4k
1<html lang="en">2<head>3<meta charset="UTF-8">4<title>Women Formal Shoes - Listing</title>5<style>6 body { margin:0; padding:0; background:transparent; font-family: Arial, Helvetica, sans-serif; }7 #render-target {8 width:1080px; height:2400px; position:relative; overflow:hidden;9 background:#f6f7f9;10 }11 12 /* Header / Status */13 .header {14 position:absolute; top:0; left:0; width:100%; height:220px;15 background:linear-gradient(180deg,#a6e4df 0%, #b7e9e3 60%, #c7ece6 100%);16 box-shadow:0 2px 6px rgba(0,0,0,0.1);17 }18 .status-bar {19 height:70px; display:flex; align-items:center; justify-content:space-between;20 padding:0 28px; color:#1b2b2b; font-weight:600; font-size:36px;21 }22 .status-right { display:flex; gap:26px; align-items:center; }23 .status-dot { width:26px; height:26px; background:#1b2b2b; border-radius:50%; opacity:0.85; }24 .icon-battery { width:50px; height:24px; border:3px solid #1b2b2b; border-radius:6px; position:relative; }25 .icon-battery::after { content:""; position:absolute; right:-10px; top:6px; width:8px; height:12px; background:#1b2b2b; border-radius:2px; }26 .icon-battery .level { position:absolute; left:3px; top:3px; width:36px; height:14px; background:#1b2b2b; }27 28 /* Search Row */29 .search-row { position:absolute; top:84px; left:0; width:100%; padding:0 26px; display:flex; align-items:center; gap:22px; }30 .back-btn {31 width:72px; height:72px; display:flex; align-items:center; justify-content:center;32 border-radius:16px; color:#0f2d2e;33 }34 .back-btn svg { width:40px; height:40px; }35 .search-box {36 flex:1; height:104px; background:#fff; border-radius:56px; box-shadow:0 3px 6px rgba(0,0,0,0.12);37 display:flex; align-items:center; padding:0 26px; gap:20px; border:1px solid #d7e8e6;38 }39 .search-icon, .camera-icon {40 width:48px; height:48px; border-radius:12px; display:flex; align-items:center; justify-content:center;41 color:#4b5c5c;42 }43 .camera-icon { background:#f0f3f4; border:1px solid #cbd3d6; }44 .search-text { flex:1; font-size:36px; color:#1f3131; }45 46 /* Content */47 .content { position:absolute; top:220px; left:0; width:100%; padding:26px; }48 .grid { display:grid; grid-template-columns:repeat(2, 1fr); gap:26px; }49 50 .card {51 background:#fff; border:1px solid #e2e6ea; border-radius:22px; overflow:hidden;52 box-shadow:0 2px 6px rgba(0,0,0,0.06);53 }54 .card-header { position:relative; padding:18px; }55 .best-badge {56 position:absolute; left:18px; top:18px; background:#f39c12; color:#fff; font-size:28px;57 padding:12px 20px; border-radius:12px; font-weight:700;58 }59 .product-img {60 width:100%; height:520px; background:#E0E0E0; border:1px solid #BDBDBD;61 display:flex; align-items:center; justify-content:center; color:#757575; font-size:30px; border-radius:16px;62 }63 .img-overlay {64 position:absolute; left:28px; bottom:24px; width:72px; height:72px; border-radius:50%;65 background:#ffffff; border:1px solid #cdd4d8; display:flex; align-items:center; justify-content:center;66 box-shadow:0 2px 6px rgba(0,0,0,0.12);67 }68 .card-body { padding:22px; }69 .color-dots { display:flex; gap:22px; margin-bottom:16px; }70 .dot { width:60px; height:60px; border-radius:50%; border:2px solid #cdd4d8; }71 .dot.black { background:#222; }72 .dot.brown { background:#3a2f2b; }73 .dot.beige { background:#b08f73; }74 .dot.grey { background:#bfc2c7; }75 .dot.more { display:flex; align-items:center; justify-content:center; color:#444; font-weight:700; background:#eee; }76 .title { font-size:34px; line-height:44px; color:#1a1a1a; font-weight:700; margin-bottom:12px; }77 .sub { font-size:30px; color:#333; margin-bottom:16px; }78 79 .rating-row { display:flex; align-items:center; gap:14px; margin:10px 0 14px; }80 .rating-score { font-size:32px; font-weight:700; color:#0d3d89; }81 .stars { display:flex; gap:6px; }82 .stars svg { width:30px; height:30px; }83 .reviews { font-size:28px; color:#666; }84 85 .price-row { display:flex; align-items:flex-end; gap:16px; margin:12px 0; }86 .price { font-size:44px; font-weight:800; color:#000; }87 .mrp { font-size:30px; color:#777; text-decoration:line-through; }88 .off { font-size:28px; color:#2f7a2f; font-weight:700; }89 90 .prime { display:inline-block; margin-top:10px; background:#e6f1ff; color:#0d57d0; font-weight:800;91 border-radius:14px; padding:8px 16px; font-size:28px; }92 .delivery { font-size:28px; color:#444; margin-top:8px; }93 94 /* Bottom navigation */95 .bottom-nav {96 position:absolute; bottom:0; left:0; width:100%; height:160px; background:#fff;97 border-top:1px solid #e2e6ea; display:flex; align-items:center; justify-content:space-around;98 }99 .nav-item { display:flex; flex-direction:column; align-items:center; gap:8px; color:#1f1f1f; }100 .nav-item .label { font-size:30px; }101 .nav-icon {102 width:70px; height:70px; border-radius:18px; background:#f4f6f8; border:1px solid #d7dde3;103 display:flex; align-items:center; justify-content:center;104 }105 .nav-icon svg { width:40px; height:40px; }106 107 /* small text above grid (tiny snippets to mimic top row) */108 .mini-top {109 display:grid; grid-template-columns:repeat(2, 1fr); gap:26px; margin-bottom:18px;110 }111 .mini-item {112 background:#fff; border:1px solid #e2e6ea; border-radius:18px; padding:16px;113 display:flex; align-items:center; gap:14px;114 }115 .mini-stars { display:flex; gap:4px; }116 .mini-stars svg { width:24px; height:24px; }117 .mini-price { font-size:34px; font-weight:800; }118 .mini-prime { color:#0d57d0; font-weight:800; font-size:26px; }119</style>120</head>121<body>122<div id="render-target">123 124 <div class="header">125 <div class="status-bar">126 <div>6:29</div>127 <div class="status-right">128 <div class="status-dot"></div>129 <div class="status-dot"></div>130 <div class="status-dot"></div>131 <div class="icon-battery"><div class="level"></div></div>132 </div>133 </div>134 135 <div class="search-row">136 <div class="back-btn" aria-label="Back">137 <svg viewBox="0 0 24 24"><path d="M15 4 L7 12 L15 20" stroke="#0f2d2e" stroke-width="3" fill="none" stroke-linecap="round" stroke-linejoin="round"/></svg>138 </div>139 <div class="search-box">140 <div class="search-icon">141 <svg viewBox="0 0 24 24"><circle cx="10" cy="10" r="7" stroke="#4b5c5c" stroke-width="2" fill="none"/><line x1="15" y1="15" x2="22" y2="22" stroke="#4b5c5c" stroke-width="2"/></svg>142 </div>143 <div class="search-text">women formal shoes</div>144 <div class="camera-icon">145 <svg viewBox="0 0 24 24"><rect x="3" y="6" width="18" height="12" rx="3" ry="3" fill="none" stroke="#6a7a7a" stroke-width="2"/><circle cx="12" cy="12" r="4" fill="none" stroke="#6a7a7a" stroke-width="2"/></svg>146 </div>147 </div>148 </div>149 </div>150 151 <div class="content">152 <!-- little preview items to resemble top hints -->153 <div class="mini-top">154 <div class="mini-item">155 <div class="mini-stars">156 <svg viewBox="0 0 24 24"><path d="M12 2 L15 9 L22 9 L17 14 L19 22 L12 18 L5 22 L7 14 L2 9 L9 9 Z" fill="#f5a623"/></svg>157 <svg viewBox="0 0 24 24"><path d="M12 2 L15 9 L22 9 L17 14 L19 22 L12 18 L5 22 L7 14 L2 9 L9 9 Z" fill="#f5a623"/></svg>158 <svg viewBox="0 0 24 24"><path d="M12 2 L15 9 L22 9 L17 14 L19 22 L12 18 L5 22 L7 14 L2 9 L9 9 Z" fill="#f5a623"/></svg>159 <svg viewBox="0 0 24 24"><path d="M12 2 L15 9 L22 9 L17 14 L19 22 L12 18 L5 22 L7 14 L2 9 L9 9 Z" fill="#f5a623"/></svg>160 <svg viewBox="0 0 24 24"><path d="M12 2 L15 9 L22 9 L17 14 L19 22 L12 18 L5 22 L7 14 L2 9 L9 9 Z" fill="#ddd"/></svg>161 </div>162 <div class="mini-price">₹599</div>163 <div class="mini-prime">prime</div>164 </div>165 <div class="mini-item">166 <div class="mini-price">₹499</div>167 <div class="mini-prime">prime</div>168 </div>169 </div>170 171 <!-- Product Grid -->172 <div class="grid">173 174 <!-- Left Card -->175 <div class="card">176 <div class="card-header">177 <div class="best-badge">Best seller</div>178 <div class="product-img">[IMG: Black Slip-on Formal Shoes]</div>179 <div class="img-overlay">180 <svg viewBox="0 0 24 24"><rect x="4" y="6" width="16" height="12" rx="3" fill="none" stroke="#6a7a7a" stroke-width="2"/><circle cx="12" cy="12" r="4" fill="none" stroke="#6a7a7a" stroke-width="2"/></svg>181 </div>182 </div>183 <div class="card-body">184 <div class="color-dots">185 <div class="dot black"></div>186 <div class="dot brown"></div>187 </div>188 <div class="title">Elegant feet</div>189 <div class="sub">Latest Collection | Comfortable Stylish Solid..</div>190 191 <div class="rating-row">192 <div class="rating-score">2.7</div>193 <div class="stars">194 <svg viewBox="0 0 24 24"><path d="M12 2 L15 9 L22 9 L17 14 L19 22 L12 18 L5 22 L7 14 L2 9 L9 9 Z" fill="#f5a623"/></svg>195 <svg viewBox="0 0 24 24"><path d="M12 2 L15 9 L22 9 L17 14 L19 22 L12 18 L5 22 L7 14 L2 9 L9 9 Z" fill="#f5a623"/></svg>196 <svg viewBox="0 0 24 24"><path d="M12 2 L15 9 L22 9 L17 14 L19 22 L12 18 L5 22 L7 14 L2 9 L9 9 Z" fill="#f5a623"/></svg>197 <svg viewBox="0 0 24 24"><path d="M12 2 L15 9 L22 9 L17 14 L19 22 L12 18 L5 22 L7 14 L2 9 L9 9 Z" fill="#ddd"/></svg>198 <svg viewBox="0 0 24 24"><path d="M12 2 L15 9 L22 9 L17 14 L19 22 L12 18 L5 22 L7 14 L2 9 L9 9 Z" fill="#ddd"/></svg>199 </div>200 <div class="reviews">(9)</div>201 </div>202 203 <div class="price-row">204 <div class="price">₹699</div>205 <div class="mrp">M.R.P: ₹999</div>206 <div class="off">30% off</div>207 </div>208 <div class="prime">prime</div>209 <div class="delivery">FREE Delivery by Amazon</div>210 </div>211 </div>212 213 <!-- Right Card -->214 <div class="card">215 <div class="card-header">216 <div class="product-img">[IMG: Black Pumps Heels Formal]</div>217 <div class="img-overlay" style="left:28px;">218 <svg viewBox="0 0 24 24"><rect x="4" y="6" width="16" height="12" rx="3" fill="none" stroke="#6a7a7a" stroke-width="2"/><circle cx="12" cy="12" r="4" fill="none" stroke="#6a7a7a" stroke-width="2"/></svg>219 </div>220 </div>221 <div class="card-body">222 <div class="color-dots">223 <div class="dot black"></div>224 <div class="dot beige"></div>225 <div class="dot grey"></div>226 <div class="dot more">+1</div>227 </div>228 <div class="title">Marc Loire</div>229 <div class="sub">Women Solid Pumps Heels for Office, Party and...</div>230 231 <div class="rating-row">232 <div class="rating-score">4.0</div>233 <div class="stars">234 <svg viewBox="0 0 24 24"><path d="M12 2 L15 9 L22 9 L17 14 L19 22 L12 18 L5 22 L7 14 L2 9 L9 9 Z" fill="#f5a623"/></svg>235 <svg viewBox="0 0 24 24"><path d="M12 2 L15 9 L22 9 L17 14 L19 22 L12 18 L5 22 L7 14 L2 9 L9 9 Z" fill="#f5a623"/></svg>236 <svg viewBox="0 0 24 24"><path d="M12 2 L15 9 L22 9 L17 14 L19 22 L12 18 L5 22 L7 14 L2 9 L9 9 Z" fill="#f5a623"/></svg>237 <svg viewBox="0 0 24 24"><path d="M12 2 L15 9 L22 9 L17 14 L19 22 L12 18 L5 22 L7 14 L2 9 L9 9 Z" fill="#f5a623"/></svg>238 <svg viewBox="0 0 24 24"><path d="M12 2 L15 9 L22 9 L17 14 L19 22 L12 18 L5 22 L7 14 L2 9 L9 9 Z" fill="#ddd"/></svg>239 </div>240 <div class="reviews">(109)</div>241 </div>242 243 <div class="price-row">244 <div class="price">₹999</div>245 <div class="mrp">M.R.P: ₹2,495</div>246 <div class="off">60% off</div>247 </div>248 <div class="prime">prime</div>249 <div class="delivery">FREE Delivery by Amazon</div>250 </div>251 </div>252 253 </div>254 </div>255 256 <!-- Bottom Navigation -->257 <div class="bottom-nav">258 <div class="nav-item">259 <div class="nav-icon">260 <svg viewBox="0 0 24 24"><path d="M3 11 L12 4 L21 11 V21 H14 V15 H10 V21 H3 Z" fill="#566" /></svg>261 </div>262 <div class="label">Home</div>263 </div>264 <div class="nav-item">265 <div class="nav-icon">266 <svg viewBox="0 0 24 24"><circle cx="12" cy="9" r="5" fill="#566"/><path d="M4 22 C4 16, 20 16, 20 22 Z" fill="#566"/></svg>267 </div>268 <div class="label">You</div>269 </div>270 <div class="nav-item">271 <div class="nav-icon">272 <svg viewBox="0 0 24 24"><path d="M12 4 A8 8 0 1 0 12 20 A8 8 0 1 0 12 4 Z" fill="#566"/><circle cx="12" cy="12" r="3" fill="#fff"/></svg>273 </div>274 <div class="label">More</div>275 </div>276 <div class="nav-item">277 <div class="nav-icon">278 <svg viewBox="0 0 24 24"><path d="M6 6 H21 L19 14 H8 L6 6 Z M8 17 H18 V19 H8 V17 Z" fill="#566"/></svg>279 </div>280 <div class="label">Cart</div>281 </div>282 <div class="nav-item">283 <div class="nav-icon">284 <svg viewBox="0 0 24 24"><rect x="4" y="4" width="16" height="3" fill="#566"/><rect x="4" y="10" width="16" height="3" fill="#566"/><rect x="4" y="16" width="16" height="3" fill="#566"/></svg>285 </div>286 <div class="label">Menu</div>287 </div>288 </div>289 290</div>291</body>292</html>