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>Nykaa Fashion - Mock UI</title>7<style>8 body { margin: 0; padding: 0; background: transparent; }9 #render-target {10 position: relative;11 overflow: hidden;12 width: 1080px;13 height: 2400px;14 background: #FFFFFF;15 font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;16 color: #111;17 }18 19 /* Common */20 .row { display: flex; align-items: center; }21 .space-between { justify-content: space-between; }22 .muted { color: #757575; }23 .thin-border { border: 1px solid #E0E0E0; }24 .icon-btn { width: 72px; height: 72px; display: flex; align-items: center; justify-content: center; }25 .title-strong { font-weight: 700; }26 27 /* Status bar */28 .status-bar {29 height: 88px;30 padding: 0 28px;31 font-size: 34px;32 color: #222;33 }34 .status-icons svg { width: 36px; height: 36px; margin-left: 18px; fill: #222; }35 36 /* App header */37 .app-header {38 height: 120px;39 padding: 0 32px;40 border-bottom: 1px solid #ECECEC;41 }42 .logo {43 display: flex;44 flex-direction: column;45 line-height: 1;46 }47 .logo .brand {48 font-weight: 900;49 letter-spacing: 4px;50 font-size: 44px;51 }52 .logo .sub {53 margin-top: 6px;54 font-size: 24px;55 letter-spacing: 1px;56 }57 .header-actions .icon-btn svg { width: 44px; height: 44px; fill: #333; }58 59 /* Search bar */60 .search-wrap {61 padding: 18px 24px;62 background: #F5F5F5;63 border-top: 1px solid #EEE;64 border-bottom: 1px solid #EEE;65 }66 .search-bar {67 height: 92px;68 background: #F0F0F0;69 border: 1px solid #DBDBDB;70 border-radius: 16px;71 padding: 0 24px;72 display: flex;73 align-items: center;74 font-size: 34px;75 color: #9E9E9E;76 }77 .search-bar svg { width: 40px; height: 40px; margin-right: 18px; fill: #9E9E9E; }78 79 /* Scroll area */80 .content {81 position: absolute;82 top: 88px; /* status bar */83 bottom: 164px; /* bottom nav */84 left: 0; right: 0;85 overflow-y: auto;86 -webkit-overflow-scrolling: touch;87 padding-bottom: 24px;88 }89 90 /* Hero banner (image placeholder) */91 .hero {92 padding: 18px 0 0;93 background: #FFF;94 }95 .img-ph {96 background: #E0E0E0;97 border: 1px solid #BDBDBD;98 color: #616161;99 display: flex;100 align-items: center;101 justify-content: center;102 text-align: center;103 }104 .hero .img-ph {105 height: 420px;106 margin: 0 24px;107 border-radius: 14px;108 font-size: 36px;109 font-weight: 600;110 }111 112 /* Categories row */113 .categories {114 padding: 24px 0 6px;115 background: #FFF;116 }117 .cat-row {118 padding: 0 24px;119 display: flex;120 gap: 34px;121 }122 .cat {123 width: 176px;124 display: flex;125 flex-direction: column;126 align-items: center;127 }128 .cat .circle {129 width: 176px; height: 176px;130 border-radius: 50%;131 background: #E0E0E0;132 border: 2px solid #D1C4E9;133 display: flex; align-items: center; justify-content: center;134 color: #616161; font-size: 26px; text-align: center;135 }136 .cat label {137 margin-top: 18px;138 font-size: 34px;139 color: #1F1F1F;140 }141 142 /* Bank offer strip */143 .bank-strip {144 margin: 18px 24px;145 padding: 20px 24px;146 background: #FFF;147 border: 2px solid #DADADA;148 border-radius: 14px;149 display: flex; align-items: center; gap: 24px;150 }151 .bank-logo {152 width: 140px; height: 80px;153 }154 .bank-text { font-size: 30px; line-height: 1.3; color: #333; }155 156 /* Promo grid */157 .promo-grid {158 padding: 6px 24px 24px;159 display: grid;160 grid-template-columns: 1fr 1fr;161 gap: 24px;162 }163 .promo-card {164 background: #FFFFFF;165 border-radius: 16px;166 overflow: hidden;167 border: 1px solid #E6E6E6;168 }169 .promo-card .img-ph {170 height: 560px;171 border: none;172 border-bottom: 1px solid #EEE;173 font-size: 32px;174 padding: 0 24px;175 }176 .badge {177 position: absolute;178 top: 18px; left: 18px;179 background: rgba(74,78,105,0.95);180 color: #fff; padding: 10px 16px; border-radius: 10px;181 font-size: 26px; font-weight: 700;182 }183 .promo-card .body {184 padding: 20px 24px 28px;185 }186 .promo-title { font-size: 34px; font-weight: 800; margin-bottom: 8px; }187 .promo-sub { font-size: 28px; color: #555; }188 .promo-cta { margin-top: 10px; font-size: 28px; font-weight: 700; }189 190 /* Bottom navigation */191 .bottom-nav {192 position: absolute;193 left: 0; right: 0; bottom: 0;194 height: 164px;195 border-top: 1px solid #EAEAEA;196 background: #FFFFFF;197 display: flex;198 justify-content: space-around;199 align-items: center;200 }201 .nav-item { display: flex; flex-direction: column; align-items: center; color: #6B6B6B; }202 .nav-item.active { color: #FF4776; }203 .nav-item svg { width: 48px; height: 48px; margin-bottom: 10px; }204 .nav-item span { font-size: 26px; }205 206 /* Separator safe area indicator (gesture bar) */207 .gesture-bar {208 position: absolute; bottom: 8px; left: 50%;209 transform: translateX(-50%);210 width: 300px; height: 8px; background: #1F1F1F; opacity: 0.12; border-radius: 4px;211 pointer-events: none;212 }213</style>214</head>215<body>216<div id="render-target">217 218 <!-- Scrollable content area -->219 <div class="content">220 <!-- Status bar -->221 <div class="status-bar row space-between">222 <div>10:26</div>223 <div class="status-icons row">224 <!-- simple circular icon -->225 <svg viewBox="0 0 24 24"><circle cx="12" cy="12" r="8"/></svg>226 <!-- wifi -->227 <svg viewBox="0 0 24 24"><path d="M2 8c5-4 15-4 20 0l-2 2c-4-3-12-3-16 0L2 8zm4 4c3-2 9-2 12 0l-2 2c-2-1-6-1-8 0l-2-2zm4 4l2 2 2-2-2-2-2 2z"/></svg>228 <!-- battery -->229 <svg viewBox="0 0 24 24"><rect x="2" y="7" width="18" height="10" rx="2"/><rect x="20" y="10" width="2" height="4"/></svg>230 </div>231 </div>232 233 <!-- Header -->234 <div class="app-header row space-between">235 <div class="logo">236 <div class="brand">NYKAA</div>237 <div class="sub">FASHION</div>238 </div>239 <div class="header-actions row">240 <!-- Bell -->241 <div class="icon-btn">242 <svg viewBox="0 0 24 24"><path d="M12 22a2 2 0 0 0 2-2h-4a2 2 0 0 0 2 2zm6-6V11a6 6 0 1 0-12 0v5l-2 2v1h16v-1l-2-2z"/></svg>243 </div>244 <!-- Heart -->245 <div class="icon-btn">246 <svg viewBox="0 0 24 24"><path d="M12.1 21S4 15 4 9.6C4 6.6 6.4 4 9.3 4c1.6 0 2.9.7 3.8 1.9C14 4.7 15.3 4 16.9 4 19.8 4 22 6.6 22 9.6 22 15 13.9 21 13.9 21h-1.8z" fill="none" stroke="#333" stroke-width="2"/></svg>247 </div>248 <!-- Bag -->249 <div class="icon-btn">250 <svg viewBox="0 0 24 24"><path d="M6 7h12l1 12a2 2 0 0 1-2 2H7a2 2 0 0 1-2-2L6 7z"/><path d="M9 7V6a3 3 pipeline 0 1 1 6 0v1" fill="none" stroke="#333" stroke-width="2"/></svg>251 </div>252 </div>253 </div>254 255 <!-- Search -->256 <div class="search-wrap">257 <div class="search-bar">258 <svg viewBox="0 0 24 24"><path d="M15.5 14h-.8l-.3-.3a6 6 0 1 0-.8.8l.3.3v.8l5 5 1.5-1.5-5-5zm-6 0a4 4 0 1 1 0-8 4 4 0 0 1 0 8z"/></svg>259 <span>Search for styles, brands & more</span>260 </div>261 </div>262 263 <!-- Hero banner -->264 <div class="hero">265 <div class="img-ph">[IMG: Pink Friday Sale banner]</div>266 </div>267 268 <!-- Categories -->269 <div class="categories">270 <div class="cat-row">271 <div class="cat">272 <div class="circle">[IMG: Indianwear]</div>273 <label>Indianwear</label>274 </div>275 <div class="cat">276 <div class="circle">[IMG: Westernwear]</div>277 <label>Westernwear</label>278 </div>279 <div class="cat">280 <div class="circle">[IMG: Mens]</div>281 <label>Mens</label>282 </div>283 <div class="cat">284 <div class="circle">[IMG: Footwear]</div>285 <label>Footwear</label>286 </div>287 <div class="cat">288 <div class="circle">[IMG: Winterwear]</div>289 <label>Winterwear</label>290 </div>291 </div>292 </div>293 294 <!-- Bank offer strip -->295 <div class="bank-strip">296 <div class="img-ph bank-logo row" style="justify-content:center;">[IMG: HDFC Bank Logo]</div>297 <div class="bank-text">298 Upto 12% instant discount on a minimum order value of ₹4000 with HDFC BANK Credit Cards and EMI. <span class="muted">*T&C apply</span>299 </div>300 </div>301 302 <!-- Promo grid -->303 <div class="promo-grid">304 <!-- Left promo -->305 <div class="promo-card" style="position:relative;">306 <div class="badge">Ends In 02h 33m 17s</div>307 <div class="img-ph">[IMG: Flash Sale - Lingerie model]</div>308 <div class="body">309 <div class="promo-title">FLASH SALE</div>310 <div class="promo-sub">lola & mae</div>311 <div class="promo-cta">UP TO 30% OFF + EXTRA 10% OFF</div>312 </div>313 </div>314 <!-- Right promo -->315 <div class="promo-card" style="position:relative;">316 <div class="badge">Ends In 02h 33m 17s</div>317 <div class="img-ph">[IMG: Sneakers - Step in Style]</div>318 <div class="body">319 <div class="promo-title">STEP IN STYLE</div>320 <div class="promo-sub">Catwalk</div>321 <div class="promo-cta">UP TO 70% OFF + EXTRA 15% OFF</div>322 </div>323 </div>324 </div>325 326 <!-- Extra spacer for scroll feel -->327 <div style="height: 80px;"></div>328 </div>329 330 <!-- Bottom Navigation -->331 <div class="bottom-nav">332 <div class="nav-item active">333 <svg viewBox="0 0 24 24"><path d="M3 12l9-8 9 8v8a2 2 0 0 1-2 2h-4v-7H9v7H5a2 2 0 0 1-2-2v-8z"/></svg>334 <span>Home</span>335 </div>336 <div class="nav-item">337 <svg viewBox="0 0 24 24"><path d="M3 3h8v8H3V3zm10 0h8v8h-8V3zM3 13h8v8H3v-8zm10 0h8v8h-8v-8z"/></svg>338 <span>Categories</span>339 </div>340 <div class="nav-item">341 <svg viewBox="0 0 24 24"><path d="M8 5v14l11-7z"/></svg>342 <span>Stream</span>343 </div>344 <div class="nav-item">345 <svg viewBox="0 0 24 24"><path d="M12 12a5 5 0 1 0 0-10 5 5 0 0 0 0 10zm0 2c-5 0-9 3-9 7h18c0-4-4-7-9-7z"/></svg>346 <span>Account</span>347 </div>348 <div class="gesture-bar"></div>349 </div>350 351</div>352</body>353</html>