GD-ML/AndroidCode
13.4k
1<html lang="en">2<head>3<meta charset="utf-8">4<title>Women Formal Shoes - Mock UI</title>5<meta name="viewport" content="width=1080, initial-scale=1.0">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, #bfe8e3 0%, #d1f1ee 40%, #ffffff 60%);14 border-radius: 20px;15 box-shadow: 0 8px 24px rgba(0,0,0,0.15);16 }17 18 /* Status bar */19 .status-bar {20 height: 90px;21 padding: 0 32px;22 display: flex;23 align-items: center;24 color: #2f3f3f;25 font-size: 42px;26 }27 .status-right {28 margin-left: auto;29 display: flex;30 gap: 28px;31 align-items: center;32 }33 .dot { width: 14px; height: 14px; background:#3a4; border-radius: 50%; display:inline-block; }34 35 /* Top app bar */36 .top-row {37 padding: 10px 30px 24px 30px;38 }39 .back-btn {40 width: 80px; height: 80px;41 display: inline-flex; align-items: center; justify-content: center;42 }43 .search-bar {44 display: inline-flex;45 align-items: center;46 width: 940px;47 height: 110px;48 background: #ffffff;49 border-radius: 22px;50 box-shadow: 0 4px 10px rgba(0,0,0,0.08);51 margin-left: 10px;52 padding: 0 24px;53 gap: 22px;54 }55 .search-input {56 flex: 1;57 font-size: 40px;58 color: #222;59 }60 .search-placeholder { color:#2f2f2f; opacity: 0.9; }61 .chip-row {62 display: flex;63 gap: 24px;64 padding: 10px 30px;65 }66 .chip {67 display: inline-flex;68 align-items: center;69 gap: 18px;70 background: #f1f5f7;71 border: 1px solid #d8dde2;72 color: #1f2b30;73 padding: 18px 26px;74 border-radius: 18px;75 font-size: 34px;76 white-space: nowrap;77 }78 .chip .close {79 width: 42px; height: 42px;80 border-radius: 50%;81 border: 1px solid #c5cbd0;82 display:flex; align-items:center; justify-content:center;83 color:#6b7b85; font-size:28px;84 }85 .chip .dropdown {86 margin-left: 8px;87 width: 0; height: 0;88 border-left: 9px solid transparent;89 border-right: 9px solid transparent;90 border-top: 14px solid #6b7b85;91 }92 93 /* Grid and cards */94 .content {95 padding: 0 30px 180px 30px;96 }97 .grid {98 display: grid;99 grid-template-columns: 1fr 1fr;100 gap: 26px;101 }102 .card {103 background: #fff;104 border: 1px solid #e2e6ea;105 border-radius: 12px;106 overflow: hidden;107 }108 .img {109 width: 100%;110 height: 520px;111 background: #E0E0E0;112 border-bottom: 1px solid #BDBDBD;113 color: #757575;114 display:flex; align-items:center; justify-content:center;115 font-size: 36px;116 }117 .card-body {118 padding: 26px;119 }120 .brand {121 font-size: 40px;122 font-weight: 700;123 color:#0d1b24;124 margin-bottom: 10px;125 }126 .title {127 font-size: 36px;128 color:#24323a;129 line-height: 1.35;130 margin-bottom: 18px;131 }132 .price-row {133 display:flex; align-items: baseline; gap: 14px; margin: 8px 0 10px 0;134 }135 .price { font-size: 48px; font-weight: 800; color:#111; }136 .mrp { font-size: 32px; color:#6b7b85; text-decoration: line-through; }137 .off { font-size: 32px; color:#2e7d32; }138 .prime {139 display:inline-flex; align-items:center; gap:10px; color:#1976d2; font-weight:700; margin: 8px 0;140 }141 .prime svg { width: 32px; height: 32px; }142 .subtext { font-size: 30px; color:#5b6b75; }143 .rating-row { display:flex; align-items:center; gap: 10px; margin: 8px 0 16px 0; }144 .rating-score { font-size: 34px; color:#0d1b24; }145 .stars { display:flex; gap:6px; }146 .deal-pill {147 display:inline-block; background:#8B1F1F; color:#fff;148 padding: 14px 22px; border-radius: 12px; font-size: 34px; margin: 10px 0 18px 0;149 }150 151 /* Bottom navigation */152 .bottom-nav {153 position: absolute;154 bottom: 0; left: 0; right: 0;155 height: 170px;156 background: #ffffff;157 border-top: 1px solid #e2e6ea;158 display:flex; align-items:center; justify-content: space-around;159 padding-bottom: 12px;160 }161 .nav-item {162 display:flex; flex-direction: column; align-items:center; justify-content:center; gap: 10px;163 color:#1b2a33;164 font-size: 34px;165 }166 .nav-icon {167 width: 78px; height: 78px; display:flex; align-items:center; justify-content:center;168 }169 .label { font-size: 36px; color:#1b2a33; }170 /* simple helpers */171 .muted { color:#6b7b85; }172</style>173</head>174<body>175<div id="render-target">176 177 <!-- Status bar -->178 <div class="status-bar">179 <div>6:43</div>180 <div class="status-right">181 <!-- small status icons: just circles to mimic -->182 <span class="dot" style="background:#999;"></span>183 <span class="dot" style="background:#555;"></span>184 <span class="dot" style="background:#222;"></span>185 <span class="dot" style="background:#1b7;"></span>186 </div>187 </div>188 189 <!-- Search area -->190 <div class="top-row">191 <div style="display:flex; align-items:center;">192 <div class="back-btn">193 <svg width="42" height="42" viewBox="0 0 24 24">194 <path d="M15 18l-6-6 6-6" fill="none" stroke="#1b2a33" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>195 </svg>196 </div>197 <div class="search-bar">198 <div class="nav-icon">199 <svg width="48" height="48" viewBox="0 0 24 24">200 <circle cx="11" cy="11" r="7" stroke="#1b2a33" stroke-width="2" fill="none"/>201 <line x1="20" y1="20" x2="16.5" y2="16.5" stroke="#1b2a33" stroke-width="2"/>202 </svg>203 </div>204 <div class="search-input"><span class="search-placeholder">women formal shoes</span></div>205 <div class="nav-icon">206 <!-- camera icon -->207 <svg width="48" height="48" viewBox="0 0 24 24">208 <rect x="3" y="7" width="18" height="12" rx="3" fill="none" stroke="#1b2a33" stroke-width="2"/>209 <path d="M9 7l2-3h2l2 3" fill="none" stroke="#1b2a33" stroke-width="2"/>210 <circle cx="12" cy="13" r="3.5" fill="none" stroke="#1b2a33" stroke-width="2"/>211 </svg>212 </div>213 </div>214 </div>215 </div>216 217 <!-- Chips -->218 <div class="chip-row">219 <div class="chip">220 AJANTA221 <span class="close">×</span>222 </div>223 <div class="chip">224 Shoes & Handb...225 <span class="close">×</span>226 </div>227 <div class="chip">228 BATA229 </div>230 <div class="chip">231 Filters (2)232 <span class="dropdown"></span>233 </div>234 </div>235 236 <!-- Products grid -->237 <div class="content">238 <div class="grid">239 240 <!-- Card 1 -->241 <div class="card">242 <div class="img">[IMG: Brown Formal Shoe]</div>243 <div class="card-body">244 <div class="brand">AJANTA</div>245 <div class="title">Womens Brown Formal Shoe</div>246 <div class="price-row">247 <div class="price">₹479</div>248 <div class="mrp">M.R.P: ₹659</div>249 <div class="off">(27% off)</div>250 </div>251 <div class="prime">252 <svg viewBox="0 0 24 24">253 <path d="M3 12l4 4 7-9" fill="none" stroke="#1976d2" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>254 </svg>255 prime256 </div>257 <div class="subtext">FREE Delivery over ₹499. Fulfilled by Amazon.</div>258 </div>259 </div>260 261 <!-- Card 2 -->262 <div class="card">263 <div class="img">[IMG: Black Slip-on Shoe]</div>264 <div class="card-body">265 <div class="brand">AJANTA</div>266 <div class="title">SL0653-3-$P</div>267 268 <div class="rating-row">269 <div class="rating-score">3.4</div>270 <div class="stars">271 <svg width="34" height="34" viewBox="0 0 24 24"><path d="M12 2l3 6 6 .8-4.5 4 1.2 6.2L12 16l-5.7 3.9L7.5 12.8 3 8.8 9 8l3-6z" fill="#f5a623"/></svg>272 <svg width="34" height="34" viewBox="0 0 24 24"><path d="M12 2l3 6 6 .8-4.5 4 1.2 6.2L12 16l-5.7 3.9L7.5 12.8 3 8.8 9 8l3-6z" fill="#f5a623"/></svg>273 <svg width="34" height="34" viewBox="0 0 24 24"><path d="M12 2l3 6 6 .8-4.5 4 1.2 6.2L12 16l-5.7 3.9L7.5 12.8 3 8.8 9 8l3-6z" fill="#f5a623"/></svg>274 <svg width="34" height="34" viewBox="0 0 24 24"><path d="M12 2l3 6 6 .8-4.5 4 1.2 6.2L12 16l-5.7 3.9L7.5 12.8 3 8.8 9 8l3-6z" fill="#f5a623"/></svg>275 <svg width="34" height="34" viewBox="0 0 24 24"><path d="M12 2l3 6 6 .8-4.5 4 1.2 6.2L12 16l-5.7 3.9L7.5 12.8 3 8.8 9 8l3-6z" fill="#f5d7a5"/></svg>276 </div>277 <div class="muted">(5)</div>278 </div>279 280 <div class="deal-pill">Limited time deal</div>281 282 <div class="price-row">283 <div class="price">₹829<span style="font-size:32px;">08</span></div>284 <div class="mrp">M.R.P: ₹929</div>285 <div class="off">(11% off)</div>286 </div>287 <div class="prime">288 <svg viewBox="0 0 24 24">289 <path d="M3 12l4 4 7-9" fill="none" stroke="#1976d2" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>290 </svg>291 prime292 </div>293 <div class="subtext">FREE Delivery by Amazon</div>294 </div>295 </div>296 297 <!-- Card 3 -->298 <div class="card">299 <div class="img">[IMG: Textured Beige Flat Shoe]</div>300 <div class="card-body">301 <div class="brand">BATA</div>302 <div class="title">Beige Textured Formal Flat</div>303 <div class="price-row">304 <div class="price">₹699</div>305 <div class="mrp">M.R.P: ₹899</div>306 <div class="off">(22% off)</div>307 </div>308 <div class="subtext">FREE Delivery over ₹499.</div>309 </div>310 </div>311 312 <!-- Card 4 -->313 <div class="card">314 <div class="img">[IMG: Brown Formal Shoe with Strap]</div>315 <div class="card-body">316 <div class="brand">AJANTA</div>317 <div class="title">Brown Formal Shoe with Strap</div>318 <div class="price-row">319 <div class="price">₹799</div>320 <div class="mrp">M.R.P: ₹999</div>321 <div class="off">(20% off)</div>322 </div>323 <div class="subtext">Fulfilled by Amazon</div>324 </div>325 </div>326 327 </div>328 </div>329 330 <!-- Bottom navigation -->331 <div class="bottom-nav">332 <div class="nav-item">333 <div class="nav-icon">334 <svg width="48" height="48" viewBox="0 0 24 24">335 <path d="M3 12l9-8 9 8v8H3z" fill="none" stroke="#1b2a33" stroke-width="2"/>336 </svg>337 </div>338 <div class="label">Home</div>339 </div>340 <div class="nav-item">341 <div class="nav-icon">342 <svg width="48" height="48" viewBox="0 0 24 24">343 <circle cx="12" cy="8" r="4" fill="none" stroke="#1b2a33" stroke-width="2"/>344 <path d="M4 21c0-4.4 4-7 8-7s8 2.6 8 7" fill="none" stroke="#1b2a33" stroke-width="2"/>345 </svg>346 </div>347 <div class="label">You</div>348 </div>349 <div class="nav-item">350 <div class="nav-icon">351 <svg width="48" height="48" viewBox="0 0 24 24">352 <path d="M12 3a9 9 0 100 18 9 9 0 000-18z" fill="none" stroke="#1b2a33" stroke-width="2"/>353 <path d="M12 7v5l4 2" stroke="#1b2a33" stroke-width="2" fill="none"/>354 </svg>355 </div>356 <div class="label">More</div>357 </div>358 <div class="nav-item">359 <div class="nav-icon">360 <svg width="48" height="48" viewBox="0 0 24 24">361 <path d="M6 6h15l-2 10H7L6 6z" fill="none" stroke="#1b2a33" stroke-width="2"/>362 <circle cx="9" cy="20" r="2" fill="none" stroke="#1b2a33" stroke-width="2"/>363 <circle cx="17" cy="20" r="2" fill="none" stroke="#1b2a33" stroke-width="2"/>364 </svg>365 </div>366 <div class="label">Cart</div>367 </div>368 <div class="nav-item">369 <div class="nav-icon">370 <svg width="48" height="48" viewBox="0 0 24 24">371 <path d="M3 6h18M3 12h18M3 18h18" stroke="#1b2a33" stroke-width="2"/>372 </svg>373 </div>374 <div class="label">Menu</div>375 </div>376 </div>377 378</div>379</body>380</html>