GD-ML/AndroidCode

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 Style Mock</title>7<style>8  body { margin: 0; padding: 0; background: transparent; font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Arial, sans-serif; }9  #render-target {10    width: 1080px;11    height: 2400px;12    position: relative;13    overflow: hidden;14    background: #ffffff;15    color: #1d1d1f;16  }17 18  /* Status bar */19  .status-bar {20    height: 64px;21    padding: 16px 24px;22    display: flex;23    align-items: center;24    justify-content: space-between;25    color: #8e8e93;26    font-size: 28px;27  }28  .status-right { display: flex; align-items: center; gap: 18px; }29  .sys-icon { width: 36px; height: 24px; }30 31  /* Header */32  .header {33    padding: 10px 32px 0 32px;34  }35  .brand-row {36    display: flex;37    align-items: center;38    justify-content: space-between;39  }40  .brand-left {41    display: flex;42    align-items: center;43    gap: 18px;44  }45  .brand-name {46    font-weight: 800;47    font-size: 46px;48    color: #ff2d84;49    letter-spacing: 2px;50  }51  .brand-sub {52    margin-left: 10px;53    font-size: 28px;54    color: #ff2d84;55    font-style: italic;56    opacity: 0.8;57  }58  .actions {59    display: flex;60    align-items: center;61    gap: 34px;62  }63  .icon {64    width: 44px;65    height: 44px;66    color: #263238;67  }68 69  /* Search */70  .search-row {71    display: flex;72    align-items: center;73    gap: 18px;74    margin-top: 22px;75  }76  .search-box {77    flex: 1;78    height: 104px;79    border: 2px solid #d9d9de;80    border-radius: 52px;81    display: flex;82    align-items: center;83    padding: 0 30px;84    color: #9aa0a6;85    font-size: 34px;86    box-shadow: 0 2px 0 rgba(0,0,0,0.02) inset;87  }88  .search-box svg { margin-right: 16px; color: #ff2d84; }89  .mic {90    width: 104px;91    height: 104px;92    border-radius: 52px;93    background: #ffe6f0;94    display: flex;95    align-items: center;96    justify-content: center;97  }98  .mic svg { width: 44px; height: 44px; color: #ff2d84; }99 100  /* Content grid */101  .content {102    padding: 26px 32px 220px 32px; /* bottom space for nav */103  }104  .grid {105    display: grid;106    grid-template-columns: 1fr 1fr;107    gap: 26px;108  }109 110  .img-ph {111    background: #E0E0E0;112    border: 1px solid #BDBDBD;113    border-radius: 28px;114    height: 360px;115    display: flex;116    align-items: center;117    justify-content: center;118    color: #757575;119    font-size: 28px;120    text-align: center;121  }122  .img-ph.big { grid-column: span 2; height: 440px; }123  .img-ph.tall { height: 420px; }124  .img-ph.wide { grid-column: span 2; height: 380px; }125 126  /* Bottom nav */127  .tabbar {128    position: absolute;129    left: 0; right: 0; bottom: 0;130    height: 180px;131    background: #ffffff;132    border-top: 1px solid #e5e7eb;133    display: flex;134    align-items: center;135    justify-content: space-around;136  }137  .tab {138    display: flex;139    flex-direction: column;140    align-items: center;141    gap: 14px;142    color: #7b8794;143    font-size: 28px;144  }145  .tab.active { color: #ff2d84; }146  .tab svg { width: 52px; height: 52px; }147  .home-indicator {148    position: absolute;149    left: 50%;150    transform: translateX(-50%);151    bottom: 20px;152    width: 220px;153    height: 10px;154    border-radius: 8px;155    background: #0b0b0c;156    opacity: 0.8;157  }158</style>159</head>160<body>161<div id="render-target">162  <!-- Status bar -->163  <div class="status-bar">164    <div>11:14</div>165    <div class="status-right">166      <!-- Simple sun/brightness glyph -->167      <svg class="sys-icon" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">168        <circle cx="12" cy="12" r="4"></circle>169        <path d="M12 1v3M12 20v3M4.22 4.22l2.12 2.12M17.66 17.66l2.12 2.12M1 12h3M20 12h3M4.22 19.78l2.12-2.12M17.66 6.34l2.12-2.12"></path>170      </svg>171      <!-- Signal -->172      <svg class="sys-icon" viewBox="0 0 24 24" fill="currentColor">173        <path d="M2 20h2a0 0 0 0 0 0 0v-2a0 0 0 0 0 0 0H2a0 0 0 0 0 0 0v2zM6 20h2v-6H6v6zm4 0h2v-10h-2v10zm4 0h2v-14h-2v14zm4 0h2v-18h-2v18z"/>174      </svg>175      <!-- Battery -->176      <svg class="sys-icon" viewBox="0 0 28 16" fill="none" stroke="currentColor" stroke-width="2">177        <rect x="1" y="3" width="22" height="10" rx="2"></rect>178        <rect x="3" y="5" width="18" height="6" fill="currentColor"></rect>179        <rect x="24" y="6" width="3" height="4" rx="1" fill="currentColor" stroke="none"></rect>180      </svg>181    </div>182  </div>183 184  <!-- Header -->185  <div class="header">186    <div class="brand-row">187      <div class="brand-left">188        <!-- Chevron down -->189        <svg class="icon" viewBox="0 0 24 24" fill="none" stroke="#263238" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">190          <path d="M6 9l6 6 6-6"></path>191        </svg>192        <div class="brand-name">NYKAA</div>193        <div class="brand-sub">join privé</div>194      </div>195      <div class="actions">196        <!-- Bell -->197        <svg class="icon" viewBox="0 0 24 24" fill="none" stroke="#263238" stroke-width="2" stroke-linecap="round">198          <path d="M18 8a6 6 0 10-12 0c0 7-3 7-3 7h18s-3 0-3-7"></path>199          <path d="M13.73 21a2 2 0 01-3.46 0"></path>200        </svg>201        <!-- Heart -->202        <svg class="icon" viewBox="0 0 24 24" fill="none" stroke="#263238" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">203          <path d="M20.8 4.6a5.5 5.5 0 00-7.8 0L12 5.6l-1-1a5.5 5.5 0 00-7.8 7.8l1 1L12 21l7.8-7.6 1-1a5.5 5.5 0 000-7.8z"></path>204        </svg>205        <!-- Bag -->206        <svg class="icon" viewBox="0 0 24 24" fill="none" stroke="#263238" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">207          <path d="M6 7h12l1 13H5L6 7z"></path>208          <path d="M9 7V5a3 3 0 016 0v2"></path>209        </svg>210      </div>211    </div>212 213    <div class="search-row">214      <div class="search-box">215        <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">216          <circle cx="11" cy="11" r="7"></circle>217          <path d="M21 21l-3.5-3.5"></path>218        </svg>219        <span>Search on Nykaa</span>220      </div>221      <div class="mic">222        <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">223          <rect x="9" y="3" width="6" height="10" rx="3"></rect>224          <path d="M5 11a7 7 0 0014 0M12 18v3"></path>225        </svg>226      </div>227    </div>228  </div>229 230  <!-- Content -->231  <div class="content">232    <div class="grid">233      <div class="img-ph big">[IMG: Hero Promo Banner]</div>234      <div class="img-ph tall">[IMG: Featured Deal]</div>235      <div class="img-ph tall">[IMG: New Arrivals]</div>236      <div class="img-ph wide">[IMG: Limited Time Offer]</div>237      <div class="img-ph">[IMG: Category Tile]</div>238      <div class="img-ph">[IMG: Category Tile]</div>239      <div class="img-ph big">[IMG: Curated Collection]</div>240      <div class="img-ph">[IMG: Product Spotlight]</div>241      <div class="img-ph">[IMG: Product Spotlight]</div>242      <div class="img-ph wide">[IMG: Beauty Advice Banner]</div>243    </div>244  </div>245 246  <!-- Bottom Tab Bar -->247  <div class="tabbar">248    <div class="tab active">249      <svg viewBox="0 0 24 24" fill="none" stroke="#ff2d84" stroke-width="3" stroke-linecap="round">250        <path d="M5 20l7-16M12 4l7 16"></path>251      </svg>252      <div>Beauty</div>253    </div>254    <div class="tab">255      <svg viewBox="0 0 24 24" fill="none" stroke="#7b8794" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">256        <circle cx="12" cy="12" r="9"></circle>257        <path d="M12 8v4l3 2"></path>258      </svg>259      <div>Offers</div>260    </div>261    <div class="tab">262      <svg viewBox="0 0 24 24" fill="none" stroke="#7b8794" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">263        <rect x="3" y="3" width="7" height="7"></rect>264        <rect x="14" y="3" width="7" height="7"></rect>265        <rect x="3" y="14" width="7" height="7"></rect>266        <rect x="14" y="14" width="7" height="7"></rect>267      </svg>268      <div>Categories</div>269    </div>270    <div class="tab">271      <svg viewBox="0 0 24 24" fill="none" stroke="#7b8794" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">272        <circle cx="12" cy="12" r="9"></circle>273        <circle cx="12" cy="12" r="4"></circle>274      </svg>275      <div>Stream</div>276    </div>277    <div class="tab">278      <svg viewBox="0 0 24 24" fill="none" stroke="#7b8794" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">279        <circle cx="12" cy="8" r="4"></circle>280        <path d="M6 20c0-3.3 3-6 6-6s6 2.7 6 6"></path>281      </svg>282      <div>Account</div>283    </div>284 285    <div class="home-indicator"></div>286  </div>287</div>288</body>289</html>