GD-ML/AndroidCode
13.4k
1<html lang="en">2<head>3<meta charset="UTF-8">4<meta name="viewport" content="width=1080, initial-scale=1.0">5<title>Women Formal Shoes - UI Mock</title>6<style>7 body { margin: 0; padding: 0; background: transparent; font-family: Arial, Helvetica, sans-serif; }8 #render-target {9 width: 1080px;10 height: 2400px;11 position: relative;12 overflow: hidden;13 background: linear-gradient(180deg, #a8e9e8 0%, #bfe9dc 60%, #e8f4ef 100%);14 border-radius: 38px;15 box-shadow: 0 8px 24px rgba(0,0,0,0.15);16 }17 /* Status bar */18 .status-bar {19 height: 90px;20 display: flex;21 align-items: center;22 padding: 0 36px;23 color: #2f3a3b;24 font-weight: 600;25 font-size: 36px;26 }27 .status-left { display: flex; align-items: center; gap: 18px; }28 .status-right { margin-left: auto; display: flex; align-items: center; gap: 28px; }29 /* Search */30 .search-row {31 display: flex;32 align-items: center;33 padding: 0 24px;34 height: 120px;35 }36 .back-btn {37 width: 88px; height: 88px; border-radius: 18px; display: flex; align-items: center; justify-content: center;38 background: transparent;39 }40 .search-box {41 flex: 1;42 background: #fff;43 border-radius: 20px;44 box-shadow: 0 8px 18px rgba(0,0,0,0.08);45 display: flex; align-items: center;46 height: 96px;47 padding: 0 28px;48 gap: 18px;49 }50 .search-input {51 flex: 1;52 font-size: 40px;53 color: #1f2a2b;54 }55 .camera-btn {56 width: 84px; height: 84px; border-radius: 18px; display: flex; align-items: center; justify-content: center;57 background: #f3f6f7;58 border: 1px solid #d9e1e4;59 }60 /* Chips / filters */61 .chips {62 display: flex; align-items: center; gap: 20px;63 padding: 24px;64 }65 .chip {66 display: inline-flex; align-items: center; gap: 14px;67 background: #fff;68 color: #1f2a2b;69 border-radius: 999px;70 padding: 18px 26px;71 box-shadow: 0 8px 16px rgba(0,0,0,0.06);72 font-size: 34px;73 }74 .chip.dark { background: #070707; color: #fff; }75 .chip .toggle {76 width: 64px; height: 40px; background: #eef2f5; border-radius: 22px; position: relative; border: 1px solid #dbe2e6;77 }78 .chip .toggle::after {79 content:""; position:absolute; top:4px; left:4px; width:32px; height:32px; background:#fff; border-radius:50%; border:1px solid #cfd7dc;80 }81 /* Horizontal product teasers */82 .teaser-row { display: flex; gap: 22px; padding: 0 24px; margin-top: 10px; }83 .teaser-card {84 width: 512px; background: #fff; border-radius: 18px;85 box-shadow: 0 8px 16px rgba(0,0,0,0.08);86 overflow: hidden;87 }88 .teaser-img { height: 240px; display:flex; align-items:center; justify-content:center; background:#E0E0E0; border-bottom:1px solid #BDBDBD; color:#757575; }89 .deal-label {90 background: #a33a22; color: #fff; font-weight: 700; font-size: 34px;91 padding: 16px 22px; display: inline-block; border-radius: 12px; margin: 16px 16px 8px;92 }93 .price-line { display:flex; align-items:center; gap:12px; padding: 6px 16px 18px; font-size: 36px; color:#1f2a2b; }94 .mrp { color:#7b8b92; text-decoration: line-through; font-size: 30px; }95 .prime-tag {96 display: inline-flex; align-items: center; gap: 8px; font-size: 28px; color:#1573ff; background:#f0f6ff; padding: 6px 12px; border-radius: 12px;97 }98 /* Informational rows */99 .info-row { padding: 24px; font-size: 36px; color:#2b3a3c; }100 .sponsored { display:flex; align-items:center; justify-content:flex-end; padding: 0 24px; color:#596a70; font-size: 32px; gap: 10px; }101 /* Two-column product grid */102 .grid-note { padding: 10px 24px; font-size: 32px; color:#516168; }103 .product-grid { display:flex; gap: 22px; padding: 0 24px; }104 .product-card {105 width: 516px; background:#fff; border-radius: 18px; box-shadow: 0 8px 14px rgba(0,0,0,0.08); overflow:hidden;106 }107 .badge {108 position: absolute; top: -12px; left: 24px; background:#f4a43a; color:#1f2a2b; font-weight:700;109 padding: 12px 20px; border-radius: 12px; font-size: 32px;110 }111 .p-img { height: 460px; background:#E0E0E0; border-bottom:1px solid #BDBDBD; display:flex; align-items:center; justify-content:center; color:#757575; position:relative; }112 .p-content { padding: 18px; }113 .mini-link { color:#0f60ff; font-size: 32px; }114 .spon-line { color:#6b7b83; font-size: 28px; display:flex; align-items:center; gap:8px; margin-top:4px; }115 .title { font-size: 36px; color:#1f2a2b; font-weight:700; margin-top: 10px; }116 .subtitle { font-size: 32px; color:#2d3e41; margin-top: 6px; }117 .rating { display:flex; align-items:center; gap:8px; margin-top: 8px; font-size: 32px; color:#1f2a2b; }118 .stars svg { width: 28px; height: 28px; }119 .price-block { display:flex; align-items:center; gap:14px; margin-top: 12px; font-size: 42px; color:#111; }120 .mrp-small { color:#75858c; text-decoration: line-through; font-size: 30px; }121 .save-pill { display:inline-block; background:#2faa3a; color:#fff; padding: 8px 14px; border-radius: 10px; font-size: 30px; margin-top: 6px; }122 /* Bottom nav */123 .bottom-nav {124 position:absolute; bottom:0; left:0; right:0;125 height: 180px; background:#fff; border-top-left-radius:22px; border-top-right-radius:22px;126 box-shadow: 0 -8px 16px rgba(0,0,0,0.08);127 display:flex; align-items:center; justify-content:space-around;128 }129 .nav-item { display:flex; flex-direction:column; align-items:center; gap: 8px; color:#1f2a2b; font-size: 30px; }130 .nav-item .label { font-size: 34px; }131 /* Utility icons */132 .icon { display:inline-block; }133</style>134</head>135<body>136<div id="render-target">137 138 <!-- Status Bar -->139 <div class="status-bar">140 <div class="status-left">141 <span>5:47</span>142 <span>42°</span>143 </div>144 <div class="status-right">145 <!-- simple dot icons to mimic screenshot -->146 <svg class="icon" width="30" height="30"><circle cx="15" cy="15" r="4" fill="#2f3a3b"/></svg>147 <svg class="icon" width="30" height="30"><rect x="6" y="9" width="18" height="12" rx="2" fill="#2f3a3b"/></svg>148 <svg class="icon" width="30" height="30"><circle cx="15" cy="15" r="10" stroke="#2f3a3b" stroke-width="3" fill="none"/></svg>149 </div>150 </div>151 152 <!-- Search Row -->153 <div class="search-row">154 <div class="back-btn">155 <svg width="48" height="48" viewBox="0 0 24 24">156 <path d="M15 18l-6-6 6-6" stroke="#1f2a2b" stroke-width="2" fill="none" stroke-linecap="round" stroke-linejoin="round"/>157 </svg>158 </div>159 <div class="search-box">160 <svg width="40" height="40" viewBox="0 0 24 24">161 <circle cx="11" cy="11" r="7" stroke="#405155" stroke-width="2" fill="none"/>162 <path d="M20 20l-4.2-4.2" stroke="#405155" stroke-width="2" fill="none" stroke-linecap="round"/>163 </svg>164 <div class="search-input">women formal shoes</div>165 <div class="camera-btn">166 <svg width="32" height="32" viewBox="0 0 24 24">167 <path d="M7 7h10l-2-3H9l-2 3z" fill="#2f3a3b"/>168 <rect x="4" y="8" width="16" height="10" rx="2" fill="#2f3a3b"/>169 <circle cx="12" cy="13" r="3" fill="#fff"/>170 </svg>171 </div>172 </div>173 </div>174 175 <!-- Chips Row -->176 <div class="chips">177 <div class="chip">178 <span style="color:#ff9900; font-weight:700;">prime</span>179 <div class="toggle"></div>180 </div>181 <div class="chip">182 <!-- stars -->183 <div class="stars">184 <svg viewBox="0 0 24 24"><path d="M12 2l3 6 6 .8-4.5 4 1.3 6.2L12 16l-5.8 3.9L7.5 13 3 8.8 9 8l3-6z" fill="#ffb400"/></svg>185 </div>186 <span>& Up</span>187 </div>188 <div class="chip dark">Black</div>189 <div class="chip">190 Filters191 <svg width="24" height="24" viewBox="0 0 24 24"><path d="M6 9l6 6 6-6" stroke="#1f2a2b" stroke-width="2" fill="none" stroke-linecap="round"/></svg>192 </div>193 </div>194 195 <!-- Teasers -->196 <div class="teaser-row">197 <div class="teaser-card">198 <div class="teaser-img">[IMG: Navy Loafer Shoe]</div>199 <div class="deal-label">Deal of the Day</div>200 <div class="price-line">201 ₹799202 <div class="prime-tag">203 <svg width="18" height="18" viewBox="0 0 24 24"><path d="M4 12l4 4 12-12" stroke="#1573ff" stroke-width="3" fill="none"/></svg>204 prime205 </div>206 <span class="mrp">₹999</span>207 <span style="color:#435a61; font-size:30px;">(20% off)</span>208 </div>209 </div>210 211 <div class="teaser-card">212 <div class="teaser-img">[IMG: Blue Loafer Shoe]</div>213 <div class="deal-label">Deal of the Day</div>214 <div class="price-line">215 ₹799216 <div class="prime-tag">217 <svg width="18" height="18" viewBox="0 0 24 24"><path d="M4 12l4 4 12-12" stroke="#1573ff" stroke-width="3" fill="none"/></svg>218 prime219 </div>220 <span class="mrp">₹999</span>221 <span style="color:#435a61; font-size:30px;">(20% off)</span>222 </div>223 </div>224 </div>225 226 <div class="info-row">Save up to 20% on Doctor Extra Soft</div>227 <div class="sponsored">228 Sponsored229 <svg width="22" height="22" viewBox="0 0 24 24"><circle cx="12" cy="12" r="10" stroke="#6b7b83" stroke-width="2" fill="none"/><text x="11" y="16" font-size="12" fill="#6b7b83">i</text></svg>230 </div>231 232 <div class="grid-note">Price and other details may vary based on product size and colour.</div>233 234 <!-- Product Grid -->235 <div class="product-grid">236 <div class="product-card">237 <div class="p-img">238 <div class="badge">Best seller</div>239 [IMG: Elegant Feet Black Formal Shoes]240 </div>241 <div class="p-content">242 <div class="mini-link">+1 colour/pattern</div>243 <div class="spon-line">244 Sponsored245 <svg width="20" height="20" viewBox="0 0 24 24"><circle cx="12" cy="12" r="9" stroke="#6b7b83" stroke-width="2" fill="none"/><text x="11" y="16" font-size="12" fill="#6b7b83">i</text></svg>246 </div>247 <div class="title">Elegant feet</div>248 <div class="subtitle">Latest Collection | Comfortable Stylish Solid..</div>249 <div class="rating">250 <span style="color:#2b7adb; font-weight:700;">2.7</span>251 <div class="stars">252 <svg viewBox="0 0 24 24"><path d="M12 2l3 6 6 .8-4.5 4 1.3 6.2L12 16l-5.8 3.9L7.5 13 3 8.8 9 8l3-6z" fill="#ffb400"/></svg>253 <svg viewBox="0 0 24 24"><path d="M12 2l3 6 6 .8-4.5 4 1.3 6.2L12 16l-5.8 3.9L7.5 13 3 8.8 9 8l3-6z" fill="#ffb400"/></svg>254 <svg viewBox="0 0 24 24"><path d="M12 2l3 6 6 .8-4.5 4 1.3 6.2L12 16l-5.8 3.9L7.5 13 3 8.8 9 8l3-6z" fill="#ffb400"/></svg>255 <svg viewBox="0 0 24 24"><path d="M12 2l3 6 6 .8-4.5 4 1.3 6.2L12 16l-5.8 3.9L7.5 13 3 8.8 9 8l3-6z" fill="#ffb400"/></svg>256 <svg viewBox="0 0 24 24"><path d="M12 2l3 6 6 .8-4.5 4 1.3 6.2L12 16l-5.8 3.9L7.5 13 3 8.8 9 8l3-6z" fill="#ddd"/></svg>257 </div>258 <span>(9)</span>259 </div>260 <div class="price-block">261 ₹699262 <span class="mrp-small">M.R.P: ₹1999</span>263 </div>264 </div>265 </div>266 267 <div class="product-card">268 <div class="p-img">[IMG: Right Steps Black Formal Shoes]</div>269 <div class="p-content">270 <div class="mini-link">+1 colour/pattern</div>271 <div class="spon-line">272 Sponsored273 <svg width="20" height="20" viewBox="0 0 24 24"><circle cx="12" cy="12" r="9" stroke="#6b7b83" stroke-width="2" fill="none"/><text x="11" y="16" font-size="12" fill="#6b7b83">i</text></svg>274 </div>275 <div class="title">Right Steps</div>276 <div class="subtitle">Formal Shoes for Women's and Girls</div>277 <div class="rating">278 <span style="color:#2b7adb; font-weight:700;">3.4</span>279 <div class="stars">280 <svg viewBox="0 0 24 24"><path d="M12 2l3 6 6 .8-4.5 4 1.3 6.2L12 16l-5.8 3.9L7.5 13 3 8.8 9 8l3-6z" fill="#ffb400"/></svg>281 <svg viewBox="0 0 24 24"><path d="M12 2l3 6 6 .8-4.5 4 1.3 6.2L12 16l-5.8 3.9L7.5 13 3 8.8 9 8l3-6z" fill="#ffb400"/></svg>282 <svg viewBox="0 0 24 24"><path d="M12 2l3 6 6 .8-4.5 4 1.3 6.2L12 16l-5.8 3.9L7.5 13 3 8.8 9 8l3-6z" fill="#ffb400"/></svg>283 <svg viewBox="0 0 24 24"><path d="M12 2l3 6 6 .8-4.5 4 1.3 6.2L12 16l-5.8 3.9L7.5 13 3 8.8 9 8l3-6z" fill="#ffb400"/></svg>284 <svg viewBox="0 0 24 24"><path d="M12 2l3 6 6 .8-4.5 4 1.3 6.2L12 16l-5.8 3.9L7.5 13 3 8.8 9 8l3-6z" fill="#ddd"/></svg>285 </div>286 <span>(9)</span>287 </div>288 <div class="price-block">289 ₹899290 <span class="mrp-small">M.R.P: ₹999 (10% off)</span>291 </div>292 <div class="save-pill">Save 5%</div>293 <div class="subtitle" style="color:#6b7b83;">(limited sizes/colours)</div>294 </div>295 </div>296 </div>297 298 <!-- Bottom Navigation -->299 <div class="bottom-nav">300 <div class="nav-item">301 <svg width="52" height="52" viewBox="0 0 24 24">302 <path d="M3 10l9-7 9 7v9a1 1 0 0 1-1 1h-5v-6H9v6H4a1 1 0 0 1-1-1v-9z" fill="#0f60ff"/>303 </svg>304 <div class="label">Home</div>305 </div>306 <div class="nav-item">307 <svg width="52" height="52" viewBox="0 0 24 24">308 <circle cx="12" cy="8" r="4" fill="#1f2a2b"/>309 <path d="M4 20c0-4 4-7 8-7s8 3 8 7" fill="none" stroke="#1f2a2b" stroke-width="2"/>310 </svg>311 <div class="label">You</div>312 </div>313 <div class="nav-item">314 <svg width="52" height="52" viewBox="0 0 24 24">315 <path d="M12 6a6 6 0 1 1 0 12 6 6 0 0 1 0-12z" fill="#1f2a2b"/>316 <path d="M10 12h4" stroke="#fff" stroke-width="2"/>317 </svg>318 <div class="label">More</div>319 </div>320 <div class="nav-item">321 <svg width="52" height="52" viewBox="0 0 24 24">322 <path d="M6 6h14l-2 10H8L6 6z" fill="#1f2a2b"/>323 <circle cx="9" cy="19" r="2" fill="#1f2a2b"/>324 <circle cx="17" cy="19" r="2" fill="#1f2a2b"/>325 </svg>326 <div class="label">Cart</div>327 </div>328 <div class="nav-item">329 <svg width="52" height="52" viewBox="0 0 24 24">330 <path d="M4 6h16M4 12h16M4 18h16" stroke="#1f2a2b" stroke-width="2" stroke-linecap="round"/>331 </svg>332 <div class="label">Menu</div>333 </div>334 </div>335 336</div>337</body>338</html>