GD-ML/AndroidCode
13.4k
1<!DOCTYPE html>2<html lang="en">3<head>4<meta charset="UTF-8">5<meta name="viewport" content="width=1080, initial-scale=1.0">6<title>Ladies dance shoes - Mock UI</title>7<style>8 /* Body reset and transparency */9 body { margin: 0; padding: 0; background: transparent; font-family: Arial, Helvetica, sans-serif; color: #222; }10 11 /* Render target (mobile screen) */12 #render-target {13 width: 1080px;14 height: 2400px;15 position: relative;16 overflow: hidden;17 background: #F6F7F7;18 }19 20 /* Top gradient header */21 .header-gradient {22 width: 100%;23 height: 320px;24 background: linear-gradient(180deg, #A7E2D8 0%, #BFE6E9 100%);25 position: relative;26 }27 28 /* Status bar */29 .status-bar {30 height: 90px;31 padding: 0 36px;32 display: flex;33 align-items: center;34 justify-content: space-between;35 color: #10221C;36 font-size: 38px;37 opacity: 0.95;38 }39 .status-left { display: flex; align-items: center; gap: 18px; }40 .status-right { display: flex; align-items: center; gap: 26px; }41 42 /* Search row */43 .search-row {44 display: flex;45 align-items: center;46 gap: 18px;47 padding: 12px 24px 8px 24px;48 }49 .back-btn {50 width: 70px;51 height: 70px;52 display: flex; align-items: center; justify-content: center;53 }54 .search-box {55 flex: 1;56 height: 110px;57 border-radius: 26px;58 background: #FFFFFF;59 box-shadow: 0 4px 12px rgba(0,0,0,0.10);60 display: flex; align-items: center;61 padding: 0 26px;62 gap: 18px;63 font-size: 42px;64 color: #5A5A5A;65 }66 .scan-btn {67 width: 72px; height: 72px;68 display: flex; align-items: center; justify-content: center;69 }70 71 /* Location bar */72 .location-bar {73 margin: 14px 0 0;74 background: rgba(255, 255, 255, 0.45);75 backdrop-filter: blur(2px);76 height: 90px;77 display: flex; align-items: center;78 padding: 0 32px;79 gap: 18px;80 color: #234;81 font-size: 36px;82 }83 .location-text { flex: 1; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }84 .chev { width: 28px; height: 28px; }85 86 /* Tabs row: prime + filters */87 .tabs-row {88 width: 100%;89 height: 110px;90 background: #FFFFFF;91 border-top: 1px solid #E6E6E6;92 border-bottom: 1px solid #E6E6E6;93 display: flex; align-items: center; justify-content: space-between;94 padding: 0 28px;95 }96 .prime-chip { display: flex; align-items: center; gap: 18px; font-size: 36px; color: #3A63FF; }97 .toggle {98 width: 84px; height: 46px; background: #E6E6E6; border-radius: 40px; position: relative;99 }100 .toggle:after {101 content: ""; position: absolute; width: 40px; height: 40px; border-radius: 50%;102 background: #FFFFFF; top: 3px; left: 3px; box-shadow: 0 1px 3px rgba(0,0,0,0.2);103 }104 .filters { font-size: 36px; color: #2B3B45; display: flex; align-items: center; gap: 8px; }105 106 /* Content area */107 .content {108 padding: 24px 24px 180px 24px; /* bottom padding for nav bar */109 }110 111 .sponsored-head {112 display: flex; align-items: center; gap: 20px;113 padding: 18px 10px;114 color: #2A2A2A;115 font-size: 44px;116 }117 .brand-badge {118 width: 140px; height: 80px; background: #E64D3C; color: #FFF;119 display: flex; align-items: center; justify-content: center; font-weight: bold; font-size: 28px; border-radius: 10px;120 }121 122 .hero-card {123 background: #FFFFFF;124 border-radius: 20px;125 box-shadow: 0 4px 14px rgba(0,0,0,0.08);126 padding: 18px;127 }128 129 .img-placeholder {130 width: 100%;131 height: 580px;132 background: #E0E0E0;133 border: 1px solid #BDBDBD;134 border-radius: 18px;135 display: flex; align-items: center; justify-content: center;136 color: #666;137 font-size: 36px;138 text-align: center;139 }140 141 /* Deal cards row */142 .deal-row {143 margin-top: 18px;144 display: flex; gap: 20px;145 }146 .deal-card {147 flex: 1;148 background: #FFFFFF;149 border-radius: 18px;150 box-shadow: 0 3px 10px rgba(0,0,0,0.08);151 padding: 16px;152 }153 .deal-img {154 width: 100%; height: 160px;155 background: #E0E0E0; border: 1px solid #BDBDBD; border-radius: 12px;156 display: flex; align-items: center; justify-content: center; color: #666; font-size: 30px; margin-bottom: 14px;157 }158 .deal-badge {159 display: inline-block; background: #B65433; color: #FFF; border-radius: 8px;160 padding: 6px 12px; font-size: 28px; margin-bottom: 6px;161 }162 .price-line { font-size: 50px; font-weight: bold; color: #222; }163 .prime-tick { color: #3A63FF; font-size: 40px; font-weight: bold; margin-left: 8px; }164 .strike { color: #6B6B6B; text-decoration: line-through; margin-right: 8px; }165 .subtle { color: #666; font-size: 30px; }166 167 .cta-line {168 display: flex; align-items: center; justify-content: space-between;169 margin: 18px 6px 6px;170 }171 .cta-link { color: #2A89C7; font-size: 38px; }172 .sponsored-flag { color: #7A7A7A; font-size: 30px; display: flex; align-items: center; gap: 8px; }173 174 /* Product grid below */175 .section-hint { color: #666; font-size: 34px; margin: 24px 6px 16px; }176 .grid {177 display: grid; grid-template-columns: 1fr 1fr; gap: 20px;178 }179 .grid-card {180 background: #FFFFFF; border-radius: 16px; box-shadow: 0 3px 10px rgba(0,0,0,0.07);181 padding: 16px;182 }183 .grid-img {184 width: 100%; height: 420px; background: #E0E0E0; border: 1px solid #BDBDBD; border-radius: 12px;185 display: flex; align-items: center; justify-content: center; color: #666; font-size: 32px;186 }187 188 /* Bottom navigation */189 .bottom-nav {190 position: absolute; left: 0; right: 0; bottom: 24px;191 height: 160px; background: #FFFFFF; border-top: 1px solid #E0E0E0;192 display: flex; align-items: center; justify-content: space-around;193 }194 .nav-item { display: flex; flex-direction: column; align-items: center; gap: 8px; color: #2B3B45; font-size: 30px; }195 .nav-item.active { color: #1C9AA5; }196 .home-indicator {197 position: absolute; left: 50%; transform: translateX(-50%);198 bottom: 0; width: 320px; height: 10px; background: #C9C9C9; border-radius: 8px;199 }200 /* Small helpers */201 .icon { display: inline-flex; width: 44px; height: 44px; align-items: center; justify-content: center; }202</style>203</head>204<body>205<div id="render-target">206 <div class="header-gradient">207 <!-- Status bar -->208 <div class="status-bar">209 <div class="status-left">210 <div>6:31</div>211 <div>17°</div>212 <div class="icon" title="alarm">213 <svg width="42" height="42" viewBox="0 0 24 24" fill="none" stroke="#0E2F2A" stroke-width="2">214 <circle cx="12" cy="13" r="7"></circle>215 <path d="M12 10v4l3 2"></path>216 <path d="M5 3l3 3M19 3l-3 3"></path>217 </svg>218 </div>219 </div>220 <div class="status-right">221 <svg width="36" height="36" viewBox="0 0 24 24" fill="#10221C"><path d="M12 3c4.97 0 9 4.03 9 9h-3c0-3.31-2.69-6-6-6V3z"/></svg>222 <svg width="36" height="36" viewBox="0 0 24 24" fill="none" stroke="#10221C" stroke-width="2"><path d="M6 8h12v10H6z"/><path d="M6 6h12"/></svg>223 </div>224 </div>225 226 <!-- Search row -->227 <div class="search-row">228 <div class="back-btn">229 <svg width="54" height="54" viewBox="0 0 24 24" fill="none" stroke="#203B39" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">230 <path d="M15 18l-6-6 6-6"></path>231 </svg>232 </div>233 <div class="search-box">234 <svg width="44" height="44" viewBox="0 0 24 24" fill="none" stroke="#666" stroke-width="2">235 <circle cx="11" cy="11" r="7"></circle>236 <path d="M21 21l-4.3-4.3"></path>237 </svg>238 <div style="flex:1; color:#333;">ladies dance shoes</div>239 <div class="scan-btn">240 <svg width="44" height="44" viewBox="0 0 24 24" fill="none" stroke="#666" stroke-width="2">241 <path d="M3 7V5a2 2 0 0 1 2-2h2"></path>242 <path d="M21 7V5a2 2 0 0 0-2-2h-2"></path>243 <path d="M3 17v2a2 2 0 0 0 2 2h2"></path>244 <path d="M21 17v2a2 2 0 0 1-2 2h-2"></path>245 </svg>246 </div>247 </div>248 </div>249 250 <!-- Location -->251 <div class="location-bar">252 <svg width="38" height="38" viewBox="0 0 24 24" fill="none" stroke="#203B39" stroke-width="2">253 <path d="M12 21s-6-5.33-6-10a6 6 0 0 1 12 0c0 4.67-6 10-6 10z"></path>254 <circle cx="12" cy="11" r="2"></circle>255 </svg>256 <div class="location-text">Select a location to see product availability</div>257 <svg class="chev" viewBox="0 0 24 24" fill="none" stroke="#203B39" stroke-width="2"><path d="M6 9l6 6 6-6"/></svg>258 </div>259 </div>260 261 <!-- Tabs row -->262 <div class="tabs-row">263 <div class="prime-chip">264 <span>prime</span>265 <div class="toggle"></div>266 </div>267 <div class="filters">268 <span>Filters</span>269 <svg width="28" height="28" viewBox="0 0 24 24" fill="none" stroke="#2B3B45" stroke-width="2"><path d="M6 9l6 6 6-6"/></svg>270 </div>271 </div>272 273 <!-- Content -->274 <div class="content">275 <div class="sponsored-head">276 <div class="brand-badge">DOCTOR<br>EXTRA SOFT</div>277 <div>Comfort meets fashion in every step</div>278 </div>279 <div class="hero-card">280 <div class="img-placeholder">[IMG: Lifestyle banner with navy slip-on shoes and indoor setting]</div>281 282 <div class="deal-row">283 <div class="deal-card">284 <div class="deal-img">[IMG: Navy shoe]</div>285 <div class="deal-badge">Deal of the Day</div>286 <div class="price-line">₹775 <span class="prime-tick">prime</span></div>287 <div class="subtle"><span class="strike">₹999</span> (22% off)</div>288 </div>289 <div class="deal-card">290 <div class="deal-img">[IMG: Navy shoe]</div>291 <div class="deal-badge">Deal of the Day</div>292 <div class="price-line">₹775 <span class="prime-tick">prime</span></div>293 <div class="subtle"><span class="strike">₹999</span> (22% off)</div>294 </div>295 <div class="deal-card">296 <div class="deal-img">[IMG: Navy shoe]</div>297 <div class="deal-badge">Deal of the Day</div>298 <div class="price-line">₹775 <span class="prime-tick">prime</span></div>299 <div class="subtle"><span class="strike">₹999</span> (22% off)</div>300 </div>301 </div>302 303 <div class="cta-line">304 <div class="cta-link">Save up to 22% on Doctor Extra Soft ›</div>305 <div class="sponsored-flag">Sponsored306 <svg width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="#7A7A7A" stroke-width="2">307 <circle cx="12" cy="12" r="9"></circle>308 <path d="M12 8v5"></path><circle cx="12" cy="16" r="1"></circle>309 </svg>310 </div>311 </div>312 </div>313 314 <div class="section-hint">Price and other details may vary based on product size and colour.</div>315 <div class="grid">316 <div class="grid-card">317 <div class="grid-img">[IMG: Beige ballet flats]</div>318 </div>319 <div class="grid-card">320 <div class="grid-img">[IMG: Beige pointe shoe toe pads]</div>321 </div>322 </div>323 </div>324 325 <!-- Bottom navigation -->326 <div class="bottom-nav">327 <div class="nav-item active">328 <svg width="44" height="44" viewBox="0 0 24 24" fill="none" stroke="#1C9AA5" stroke-width="2">329 <path d="M3 10l9-7 9 7v8a2 2 0 0 1-2 2h-4a2 2 0 0 1-2-2v-3H9v3a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2z"></path>330 </svg>331 <div>Home</div>332 </div>333 <div class="nav-item">334 <svg width="44" height="44" viewBox="0 0 24 24" fill="none" stroke="#2B3B45" stroke-width="2">335 <circle cx="12" cy="7" r="4"></circle>336 <path d="M6 21v-2a6 6 0 0 1 12 0v2"></path>337 </svg>338 <div>You</div>339 </div>340 <div class="nav-item">341 <svg width="44" height="44" viewBox="0 0 24 24" fill="none" stroke="#2B3B45" stroke-width="2">342 <path d="M21 12a9 9 0 1 1-2.64-6.36"></path>343 <path d="M21 3v6h-6"></path>344 </svg>345 <div>More</div>346 </div>347 <div class="nav-item">348 <svg width="44" height="44" viewBox="0 0 24 24" fill="none" stroke="#2B3B45" stroke-width="2">349 <path d="M6 6h15l-1.5 9H7.5z"></path>350 <circle cx="9" cy="20" r="1.5"></circle>351 <circle cx="18" cy="20" r="1.5"></circle>352 </svg>353 <div>Cart</div>354 </div>355 <div class="nav-item">356 <svg width="44" height="44" viewBox="0 0 24 24" fill="none" stroke="#2B3B45" stroke-width="2">357 <path d="M3 6h18"></path>358 <path d="M3 12h18"></path>359 <path d="M3 18h18"></path>360 </svg>361 <div>Menu</div>362 </div>363 </div>364 <div class="home-indicator"></div>365</div>366</body>367</html>