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: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen, Ubuntu, Cantarell, "Helvetica Neue", Arial, sans-serif; }8 #render-target {9 position: relative;10 width: 1080px;11 height: 2400px;12 overflow: hidden;13 background: linear-gradient(180deg, #a9e3e0 0%, #cbe9f0 18%, #ffffff 18%);14 }15 .status-bar {16 height: 95px;17 padding: 0 28px;18 display: flex;19 align-items: center;20 color: #2f3a40;21 font-weight: 600;22 font-size: 38px;23 }24 .status-icons {25 margin-left: 24px;26 display: flex;27 gap: 22px;28 }29 .status-right {30 margin-left: auto;31 display: flex;32 gap: 24px;33 align-items: center;34 }35 .icon {36 width: 40px; height: 40px;37 }38 39 .search-row {40 padding: 16px 24px 8px 24px;41 display: flex;42 align-items: center;43 gap: 20px;44 }45 .back-btn {46 width: 76px; height: 76px; border-radius: 38px; background: rgba(0,0,0,0.06);47 display: flex; align-items: center; justify-content: center;48 }49 .search-bar {50 flex: 1;51 background: #fff;52 border-radius: 18px;53 box-shadow: 0 2px 0 rgba(0,0,0,0.06);54 border: 1px solid #d9dde2;55 height: 94px;56 display: flex; align-items: center;57 padding: 0 20px;58 gap: 16px;59 }60 .search-input {61 flex: 1;62 font-size: 38px;63 color: #111;64 }65 .search-input::placeholder { color: #777; }66 .search-action {67 width: 78px; height: 78px; border-radius: 16px; background: #edf2f6;68 display: flex; align-items: center; justify-content: center; border: 1px solid #d7dce2;69 }70 71 .chip-row {72 display: flex;73 align-items: center;74 gap: 18px;75 padding: 8px 24px 16px 24px;76 }77 .chip {78 display: inline-flex;79 align-items: center;80 gap: 10px;81 padding: 18px 22px;82 border-radius: 16px;83 background: #ffffff;84 border: 1px solid #d9dde2;85 font-size: 32px;86 color: #222;87 }88 .chip .star {89 width: 32px; height: 32px;90 }91 .chip .color-swatch {92 width: 36px; height: 36px; border-radius: 8px; background: #000;93 border: 1px solid #888;94 }95 .filter-chip {96 margin-left: auto;97 font-weight: 600;98 }99 .toggle {100 width: 70px; height: 36px; border-radius: 18px; background: #e6f3ff; border: 1px solid #b6d8ff; position: relative;101 }102 .toggle:after {103 content: ""; position: absolute; width: 30px; height: 30px; border-radius: 15px; background: #0a84ff; top: 2px; left: 36px;104 }105 106 .section-title {107 padding: 8px 24px;108 font-size: 40px;109 font-weight: 600;110 color: #222;111 }112 113 .banner {114 margin: 8px 24px 10px 24px;115 height: 470px;116 border-radius: 18px;117 overflow: hidden;118 border: 1px solid #d9dde2;119 background: #E0E0E0;120 display: flex; align-items: center; justify-content: center; color: #555;121 font-size: 36px;122 }123 124 .deal-cards {125 display: flex; gap: 24px; padding: 6px 24px;126 }127 .deal-card {128 flex: 1;129 border: 1px solid #d9dde2;130 border-radius: 18px;131 background: #fff;132 padding: 20px;133 }134 .deal-card .thumb {135 width: 160px; height: 110px; background: #E0E0E0; border: 1px solid #BDBDBD;136 display: flex; align-items: center; justify-content: center; color: #757575; font-size: 26px; border-radius: 12px;137 }138 .deal-header {139 display: inline-block;140 background: #e64a19;141 color: #fff;142 padding: 10px 16px;143 border-radius: 10px;144 font-size: 30px;145 font-weight: 700;146 margin-left: 16px;147 }148 .price-row {149 display: flex; align-items: baseline; gap: 12px; margin-top: 12px; padding-left: 176px;150 }151 .price {152 font-size: 44px; font-weight: 800; color: #111;153 }154 .prime-badge {155 display: inline-flex; align-items: center; gap: 8px; background: #f0f8ff; border: 1px solid #c8def7;156 padding: 8px 12px; border-radius: 12px; font-size: 26px; color: #0a84ff;157 }158 .strike {159 color: #777; text-decoration: line-through; font-size: 30px; margin-top: 10px; padding-left: 176px;160 }161 .off {162 color: #333; font-size: 30px; padding-left: 176px;163 }164 165 .shop-row {166 display: flex; align-items: center; justify-content: space-between;167 padding: 22px 24px;168 font-size: 34px;169 }170 .shop-row a { color: #0a84ff; text-decoration: none; font-weight: 600; }171 .sponsored {172 color: #666;173 display: flex; align-items: center; gap: 10px;174 }175 176 .info-icon {177 width: 30px; height: 30px;178 }179 180 .subheading {181 padding: 18px 24px;182 font-size: 34px;183 color: #555;184 }185 186 .product-grid {187 display: grid;188 grid-template-columns: 1fr 1fr;189 gap: 24px;190 padding: 0 24px;191 }192 .product-card {193 border: 1px solid #d9dde2;194 border-radius: 18px;195 background: #fff;196 height: 840px;197 display: flex; align-items: center; justify-content: center;198 }199 .product-card .img {200 width: 95%; height: 95%;201 background: #E0E0E0; border: 1px solid #BDBDBD; color: #757575;202 display: flex; align-items: center; justify-content: center; font-size: 36px; border-radius: 14px; text-align: center; padding: 20px;203 }204 205 .bottom-nav {206 position: absolute; left: 0; bottom: 0; width: 100%; height: 160px; background: #ffffff; border-top: 1px solid #d9dde2;207 display: grid; grid-template-columns: repeat(5, 1fr);208 }209 .nav-item {210 display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 12px; color: #111;211 font-size: 30px;212 }213 .nav-icon { width: 64px; height: 64px; }214 /* helper */215 .muted { color: #777; }216</style>217</head>218<body>219<div id="render-target">220 221 <!-- Status Bar -->222 <div class="status-bar">223 <div>6:41</div>224 <div class="status-icons">225 <!-- simple dots to suggest small status icons -->226 <svg class="icon" viewBox="0 0 40 40"><circle cx="20" cy="20" r="8" fill="#2f3a40"/></svg>227 <svg class="icon" viewBox="0 0 40 40"><rect x="10" y="10" width="20" height="20" fill="#2f3a40"/></svg>228 <svg class="icon" viewBox="0 0 40 40"><polygon points="8,20 20,8 32,20 20,32" fill="#2f3a40"/></svg>229 <svg class="icon" viewBox="0 0 40 40"><circle cx="20" cy="20" r="6" fill="#2f3a40"/></svg>230 </div>231 <div class="status-right">232 <!-- location dot -->233 <svg class="icon" viewBox="0 0 40 40">234 <path d="M20 6c7 0 12 5 12 12 0 9-10 16-12 16S8 27 8 18c0-7 5-12 12-12z" fill="#2f3a40"/>235 <circle cx="20" cy="18" r="5" fill="#cfe6e7"/>236 </svg>237 <!-- battery -->238 <svg class="icon" viewBox="0 0 40 40">239 <rect x="6" y="12" width="26" height="16" rx="3" ry="3" fill="#2f3a40"/>240 <rect x="33" y="15" width="3" height="10" fill="#2f3a40"/>241 <rect x="9" y="15" width="20" height="10" fill="#cfe6e7"/>242 </svg>243 </div>244 </div>245 246 <!-- Search Row -->247 <div class="search-row">248 <div class="back-btn">249 <svg class="icon" viewBox="0 0 40 40">250 <path d="M24 10 L12 20 L24 30" stroke="#222" stroke-width="4" fill="none" stroke-linecap="round" stroke-linejoin="round"/>251 </svg>252 </div>253 <div class="search-bar">254 <svg class="icon" viewBox="0 0 40 40">255 <circle cx="16" cy="16" r="10" stroke="#555" stroke-width="3" fill="none"/>256 <line x1="24" y1="24" x2="34" y2="34" stroke="#555" stroke-width="3" />257 </svg>258 <div class="search-input">women formal shoes</div>259 <div class="search-action">260 <svg class="icon" viewBox="0 0 40 40">261 <rect x="6" y="12" width="28" height="18" rx="3" ry="3" fill="#333"/>262 <rect x="14" y="8" width="12" height="6" rx="2" ry="2" fill="#333"/>263 <circle cx="20" cy="21" r="5" fill="#cfe6e7"/>264 </svg>265 </div>266 </div>267 </div>268 269 <!-- Filter Chips -->270 <div class="chip-row">271 <div class="chip">272 <span style="color:#ff9900; font-weight:700;">prime</span>273 <div class="toggle"></div>274 </div>275 <div class="chip">276 <svg class="star" viewBox="0 0 24 24"><polygon points="12,2 15,9 22,9 17,14 19,22 12,18 5,22 7,14 2,9 9,9" fill="#ff9900"/></svg>277 <svg class="star" viewBox="0 0 24 24"><polygon points="12,2 15,9 22,9 17,14 19,22 12,18 5,22 7,14 2,9 9,9" fill="#ff9900"/></svg>278 <svg class="star" viewBox="0 0 24 24"><polygon points="12,2 15,9 22,9 17,14 19,22 12,18 5,22 7,14 2,9 9,9" fill="#ff9900"/></svg>279 <svg class="star" viewBox="0 0 24 24"><polygon points="12,2 15,9 22,9 17,14 19,22 12,18 5,22 7,14 2,9 9,9" fill="#ff9900"/></svg>280 <span> & Up</span>281 </div>282 <div class="chip">283 <div class="color-swatch"></div>284 <span>Black</span>285 </div>286 <div class="chip filter-chip">287 Filters288 <svg class="icon" viewBox="0 0 40 40"><polyline points="10,16 20,26 30,16" fill="none" stroke="#333" stroke-width="4" stroke-linecap="round" stroke-linejoin="round"/></svg>289 </div>290 </div>291 292 <!-- Section title -->293 <div class="section-title">Comfort meets fashion in every step</div>294 295 <!-- Banner Image -->296 <div class="banner">[IMG: Blue slip-on shoes with insoles on table]</div>297 298 <!-- Deal cards row -->299 <div class="deal-cards">300 <div class="deal-card">301 <div style="display:flex; align-items:center; gap:14px;">302 <div class="thumb">[IMG: Navy slip-on]</div>303 <div class="deal-header">Deal of the Day</div>304 </div>305 <div class="price-row">306 <div class="price">₹799</div>307 <div class="prime-badge">308 <svg width="20" height="20" viewBox="0 0 20 20"><path d="M3 10l4 4 10-10" stroke="#0a84ff" stroke-width="3" fill="none"/></svg>309 prime310 </div>311 </div>312 <div class="strike">₹999.00</div>313 <div class="off">(20% off)</div>314 </div>315 316 <div class="deal-card">317 <div style="display:flex; align-items:center; gap:14px;">318 <div class="thumb">[IMG: Blue slip-on]</div>319 <div class="deal-header">Deal of the Day</div>320 </div>321 <div class="price-row">322 <div class="price">₹799</div>323 <div class="prime-badge">324 <svg width="20" height="20" viewBox="0 0 20 20"><path d="M3 10l4 4 10-10" stroke="#0a84ff" stroke-width="3" fill="none"/></svg>325 prime326 </div>327 </div>328 <div class="strike">₹999.00</div>329 <div class="off">(20% off)</div>330 </div>331 </div>332 333 <!-- Save row + Sponsored -->334 <div class="shop-row">335 <a href="#">Save up to 20% on Doctor Extra Soft ›</a>336 <div class="sponsored">337 Sponsored338 <svg class="info-icon" viewBox="0 0 30 30">339 <circle cx="15" cy="15" r="14" fill="#d9dde2" stroke="#a8b0b6"/>340 <rect x="14" y="11" width="2" height="9" fill="#666"/>341 <circle cx="15" cy="8" r="1.6" fill="#666"/>342 </svg>343 </div>344 </div>345 346 <!-- Subheading -->347 <div class="subheading">Price and other details may vary based on product size and colour.</div>348 349 <!-- Product Grid -->350 <div class="product-grid">351 <div class="product-card">352 <div class="img">[IMG: Brown lace-up formal shoes (pair)]</div>353 </div>354 <div class="product-card">355 <div class="img">[IMG: Black loafer with buckle]</div>356 </div>357 </div>358 359 <!-- Bottom Navigation -->360 <div class="bottom-nav">361 <div class="nav-item">362 <svg class="nav-icon" viewBox="0 0 64 64"><path d="M8 30 L32 12 L56 30 V54 H38 V40 H26 V54 H8 Z" fill="#333"/></svg>363 <div>Home</div>364 </div>365 <div class="nav-item">366 <svg class="nav-icon" viewBox="0 0 64 64">367 <circle cx="32" cy="22" r="10" fill="#333"/>368 <path d="M10 54c4-12 16-18 22-18s18 6 22 18" fill="#333"/>369 </svg>370 <div>You</div>371 </div>372 <div class="nav-item">373 <svg class="nav-icon" viewBox="0 0 64 64">374 <path d="M18 32a14 14 0 1 1 28 0" stroke="#333" stroke-width="6" fill="none"/>375 <polyline points="12,40 6,32 12,24" stroke="#333" stroke-width="6" fill="none" stroke-linecap="round" stroke-linejoin="round"/>376 </svg>377 <div>More</div>378 </div>379 <div class="nav-item">380 <svg class="nav-icon" viewBox="0 0 64 64">381 <path d="M10 16h8l6 28h22l6-18H24" stroke="#333" stroke-width="6" fill="none" stroke-linecap="round" stroke-linejoin="round"/>382 <circle cx="28" cy="54" r="4" fill="#333"/>383 <circle cx="48" cy="54" r="4" fill="#333"/>384 </svg>385 <div>Cart</div>386 </div>387 <div class="nav-item">388 <svg class="nav-icon" viewBox="0 0 64 64">389 <rect x="10" y="14" width="44" height="6" fill="#333"/>390 <rect x="10" y="28" width="44" height="6" fill="#333"/>391 <rect x="10" y="42" width="44" height="6" fill="#333"/>392 </svg>393 <div>Menu</div>394 </div>395 </div>396 397</div>398</body>399</html>