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 - Dior Perfume for Women</title>7<style>8  body { margin: 0; padding: 0; background: transparent; }9  #render-target {10    width: 1080px; height: 2400px;11    position: relative; overflow: hidden;12    background: #ffffff; color: #1f2a37;13    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Arial, sans-serif;14  }15  .safe-pad { padding: 0 48px; }16 17  /* Top app bar */18  .topbar {19    height: 140px;20    display: flex; align-items: center; justify-content: space-between;21  }22  .left-group, .right-icons { display: flex; align-items: center; gap: 28px; }23  .brand {24    font-weight: 800; color: #ff2a7b; letter-spacing: 1px; font-size: 44px; font-style: italic;25  }26  .icon {27    width: 48px; height: 48px; color: #263238;28  }29  .icon svg { width: 100%; height: 100%; }30 31  /* Title section */32  .title-block { margin-top: 8px; }33  .title-block h1 {34    margin: 0; font-size: 66px; line-height: 1.15; color: #0b1421; font-weight: 800;35  }36  .subtitle { margin-top: 12px; color: #64748b; font-size: 30px; }37 38  /* Chips */39  .chips { margin-top: 28px; display: flex; gap: 26px; }40  .chip {41    display: inline-flex; align-items: center; gap: 16px;42    padding: 20px 28px; border-radius: 28px; border: 1px solid #E6E7EB; background: #fff;43    color: #3b4758; font-weight: 600; font-size: 32px;44    box-shadow: 0 1px 0 rgba(0,0,0,0.02);45  }46  .chip .chip-icon { width: 40px; height: 40px; color: #ff2a7b; }47 48  /* Divider */49  .divider { margin-top: 24px; height: 1px; background: #EFEFF2; }50 51  /* Product grid */52  .grid {53    margin-top: 18px;54    display: grid; grid-template-columns: 1fr 1fr;55  }56  .card {57    padding: 28px 36px 24px 36px; min-height: 880px;58    position: relative; background: #fff;59  }60  .card:nth-child(2n+1) { border-right: 1px solid #EFEFF2; }61  .row-divider { grid-column: 1 / -1; height: 1px; background: #EFEFF2; }62 63  .tag {64    position: absolute; top: 18px; right: 36px;65    background: #f7c7cf; color: #914757; font-size: 24px; font-weight: 700;66    padding: 8px 16px; border-radius: 6px; letter-spacing: .5px;67  }68  .warn-tag {69    display: inline-block; background: #ffe9db; color: #c0542a; font-weight: 800;70    font-size: 24px; padding: 8px 14px; border-radius: 8px; margin-bottom: 12px;71  }72 73  .img-ph {74    width: 100%; height: 360px; background: #E0E0E0;75    border: 1px solid #BDBDBD; border-radius: 10px;76    display: flex; align-items: center; justify-content: center; color: #757575;77    font-size: 28px; margin-top: 56px;78  }79  .brand-name { margin-top: 28px; font-weight: 800; font-size: 36px; color: #0b1421; }80  .prod-title { margin-top: 8px; font-size: 30px; color: #2c3b4b; }81  .meta { margin-top: 8px; color: #768496; font-size: 28px; display: flex; align-items: center; gap: 8px; }82  .price { margin-top: 12px; font-weight: 800; font-size: 38px; }83  .rating { margin-top: 8px; color: #485668; display: flex; align-items: center; gap: 8px; }84  .rating .count { color: #7a8b9c; font-size: 26px; }85 86  .actions { margin-top: 22px; display: flex; align-items: center; gap: 20px; }87  .wish-btn {88    width: 120px; height: 88px; border-radius: 18px; border: 1px solid #E6E7EB; background: #fff;89    display: flex; align-items: center; justify-content: center;90  }91  .wish-btn svg { width: 44px; height: 44px; color: #ff2a7b; }92  .cta {93    flex: 1; height: 88px; background: #ff117a; color: white; border-radius: 20px;94    border: none; font-size: 34px; font-weight: 800; display: flex; align-items: center; justify-content: center; gap: 12px;95    box-shadow: 0 6px 12px rgba(255, 17, 122, 0.25);96  }97  .cta .caret {98    width: 18px; height: 18px; border: 8px solid transparent; border-top-color: white; margin-top: 10px;99  }100 101  /* Bottom toolbar */102  .bottom-toolbar {103    position: absolute; left: 0; right: 0; bottom: 96px;104    display: grid; grid-template-columns: 1fr 1fr; border-top: 1px solid #EFEFF2;105    background: #fff;106  }107  .bt-item {108    padding: 24px 40px; display: flex; align-items: center; gap: 22px;109  }110  .bt-item + .bt-item { border-left: 1px solid #EFEFF2; }111  .bt-icon { width: 44px; height: 44px; color: #3b4758; }112  .bt-text { display: flex; flex-direction: column; }113  .bt-title { font-weight: 700; font-size: 34px; color: #2d3a49; }114  .bt-sub { font-size: 26px; color: #7a8b9c; margin-top: 4px; }115 116  /* Home indicator */117  .home-indicator {118    position: absolute; left: 50%; transform: translateX(-50%);119    bottom: 28px; width: 360px; height: 10px; border-radius: 6px; background: #0b0b0b33;120  }121</style>122</head>123<body>124<div id="render-target">125  <div class="safe-pad">126    <!-- Top Bar -->127    <div class="topbar">128      <div class="left-group">129        <div class="icon">130          <svg viewBox="0 0 24 24">131            <path d="M15 3 L6 12 L15 21" fill="none" stroke="currentColor" stroke-width="3" stroke-linecap="round" stroke-linejoin="round"/>132          </svg>133        </div>134        <div class="brand">NYKAA</div>135      </div>136      <div class="right-icons">137        <div class="icon">138          <svg viewBox="0 0 24 24">139            <circle cx="10" cy="10" r="7" fill="none" stroke="currentColor" stroke-width="2"/>140            <path d="M16 16 L22 22" stroke="currentColor" stroke-width="2" stroke-linecap="round"/>141          </svg>142        </div>143        <div class="icon">144          <svg viewBox="0 0 24 24">145            <path d="M12 21c6-4 7-7 7-9a4 4 0 0 0-7-2 4 4 0 0 0-7 2c0 2 1 5 7 9z" fill="none" stroke="currentColor" stroke-width="2"/>146          </svg>147        </div>148        <div class="icon">149          <svg viewBox="0 0 24 24">150            <rect x="5" y="8" width="14" height="12" rx="2" fill="none" stroke="currentColor" stroke-width="2"/>151            <path d="M8 8c0-2 1.5-3 4-3s4 1 4 3" fill="none" stroke="currentColor" stroke-width="2"/>152          </svg>153        </div>154      </div>155    </div>156 157    <!-- Title -->158    <div class="title-block">159      <h1>Dior perfume for Women</h1>160      <div class="subtitle">28 products</div>161    </div>162 163    <!-- Chips -->164    <div class="chips">165      <div class="chip">166        <span class="chip-icon">167          <svg viewBox="0 0 24 24">168            <path d="M12 2l2.2 4.5 5 0.7-3.6 3.5 0.9 5-4.5-2.3-4.5 2.3 0.9-5L4.8 7.2l5-0.7L12 2z" fill="currentColor"/>169          </svg>170        </span>171        Bestseller172      </div>173      <div class="chip">174        <span class="chip-icon">175          <svg viewBox="0 0 24 24">176            <path d="M12 2l3 6 7 1-5 5 1 7-6-3-6 3 1-7-5-5 7-1z" fill="currentColor"/>177          </svg>178        </span>179        Top Rated180      </div>181    </div>182  </div>183 184  <div class="divider"></div>185 186  <!-- Product Grid -->187  <div class="grid safe-pad">188    <!-- Card 1 -->189    <div class="card">190      <div class="tag">WOMEN</div>191      <div class="img-ph">[IMG: Pink Perfume Bottle - Miss Dior]</div>192      <div class="brand-name">DIOR</div>193      <div class="prod-title">Miss Dior Eau De Parfum</div>194      <div class="meta">195        <svg width="26" height="26" viewBox="0 0 24 24"><rect x="3" y="6" width="18" height="12" rx="2" fill="#f8b24d"/></svg>196        3 Sizes197      </div>198      <div class="price">₹10,900</div>199      <div class="rating">200        <svg width="26" height="26" viewBox="0 0 24 24"><path d="M12 2l3 6 7 1-5 5 1 7-6-3-6 3 1-7-5-5 7-1z" fill="#1f2a37"/></svg>201        <svg width="26" height="26" viewBox="0 0 24 24"><path d="M12 2l3 6 7 1-5 5 1 7-6-3-6 3 1-7-5-5 7-1z" fill="#1f2a37"/></svg>202        <svg width="26" height="26" viewBox="0 0 24 24"><path d="M12 2l3 6 7 1-5 5 1 7-6-3-6 3 1-7-5-5 7-1z" fill="#1f2a37"/></svg>203        <svg width="26" height="26" viewBox="0 0 24 24"><path d="M12 2l3 6 7 1-5 5 1 7-6-3-6 3 1-7-5-5 7-1z" fill="#1f2a37"/></svg>204        <svg width="26" height="26" viewBox="0 0 24 24"><path d="M12 2l3 6 7 1-5 5 1 7-6-3-6 3 1-7-5-5 7-1z" fill="#b0b8c3"/></svg>205        <span class="count">(45)</span>206      </div>207      <div class="actions">208        <div class="wish-btn">209          <svg viewBox="0 0 24 24">210            <path d="M12 21c6-4 7-7 7-9a4 4 0 0 0-7-2 4 4 0 0 0-7 2c0 2 1 5 7 9z" fill="none" stroke="currentColor" stroke-width="2"/>211            <path d="M6 14l2 2" stroke="#ff2a7b" stroke-width="2" stroke-linecap="round"/>212          </svg>213        </div>214        <button class="cta">Select Size <span class="caret"></span></button>215      </div>216    </div>217 218    <!-- Card 2 -->219    <div class="card">220      <div class="tag">WOMEN</div>221      <div class="img-ph">[IMG: Pink Perfume Bottle - Absolutely Blooming]</div>222      <div class="warn-tag">ONLY A FEW LEFT</div>223      <div class="brand-name">DIOR</div>224      <div class="prod-title">Miss Dior Absolutely Blooming Eau De Parfum</div>225      <div class="meta">226        <svg width="26" height="26" viewBox="0 0 24 24"><rect x="3" y="6" width="18" height="12" rx="2" fill="#f8b24d"/></svg>227        2 Sizes228      </div>229      <div class="price">₹10,900</div>230      <div class="rating">231        <svg width="26" height="26" viewBox="0 0 24 24"><path d="M12 2l3 6 7 1-5 5 1 7-6-3-6 3 1-7-5-5 7-1z" fill="#1f2a37"/></svg>232        <svg width="26" height="26" viewBox="0 0 24 24"><path d="M12 2l3 6 7 1-5 5 1 7-6-3-6 3 1-7-5-5 7-1z" fill="#1f2a37"/></svg>233        <svg width="26" height="26" viewBox="0 0 24 24"><path d="M12 2l3 6 7 1-5 5 1 7-6-3-6 3 1-7-5-5 7-1z" fill="#1f2a37"/></svg>234        <svg width="26" height="26" viewBox="0 0 24 24"><path d="M12 2l3 6 7 1-5 5 1 7-6-3-6 3 1-7-5-5 7-1z" fill="#1f2a37"/></svg>235        <svg width="26" height="26" viewBox="0 0 24 24"><path d="M12 2l3 6 7 1-5 5 1 7-6-3-6 3 1-7-5-5 7-1z" fill="#b0b8c3"/></svg>236        <span class="count">(8)</span>237      </div>238      <div class="actions">239        <div class="wish-btn">240          <svg viewBox="0 0 24 24">241            <path d="M12 21c6-4 7-7 7-9a4 4 0 0 0-7-2 4 4 0 0 0-7 2c0 2 1 5 7 9z" fill="none" stroke="currentColor" stroke-width="2"/>242            <path d="M6 14l2 2" stroke="#ff2a7b" stroke-width="2" stroke-linecap="round"/>243          </svg>244        </div>245        <button class="cta">Select Size <span class="caret"></span></button>246      </div>247    </div>248 249    <div class="row-divider"></div>250 251    <!-- Card 3 -->252    <div class="card">253      <div class="tag">WOMEN</div>254      <div class="img-ph" style="height: 420px; margin-top: 40px;">[IMG: Teardrop Gold Perfume Bottle]</div>255    </div>256 257    <!-- Card 4 -->258    <div class="card">259      <div class="tag">WOMEN</div>260      <div class="img-ph" style="height: 420px; margin-top: 40px;">[IMG: Dark Blue Tall Perfume Bottle]</div>261    </div>262  </div>263 264  <!-- Bottom Toolbar -->265  <div class="bottom-toolbar">266    <div class="bt-item">267      <div class="bt-icon">268        <svg viewBox="0 0 24 24">269          <path d="M6 21V9M12 21V5M18 21V13" stroke="currentColor" stroke-width="2" stroke-linecap="round"/>270        </svg>271      </div>272      <div class="bt-text">273        <div class="bt-title">Sort by</div>274        <div class="bt-sub">Relevance</div>275      </div>276    </div>277    <div class="bt-item">278      <div class="bt-icon">279        <svg viewBox="0 0 24 24">280          <path d="M3 5h18M6 11h12M9 17h6" stroke="currentColor" stroke-width="2" stroke-linecap="round"/>281        </svg>282      </div>283      <div class="bt-text">284        <div class="bt-title">Filter</div>285        <div class="bt-sub">Apply Filters</div>286      </div>287    </div>288  </div>289 290  <div class="home-indicator"></div>291</div>292</body>293</html>