GD-ML/AndroidCode
13.4k
1<!DOCTYPE html>2<html lang="en">3<head>4<meta charset="UTF-8">5<title>Nykaa Style UI - Mock</title>6<meta name="viewport" content="width=1080, initial-scale=1.0">7<style>8 :root{9 --pink:#ff2f78;10 --soft-pink:#ffe6ef;11 --text:#111;12 --muted:#666;13 --border:#e5e5e5;14 --bg:#ffffff;15 }16 body{ margin:0; padding:0; background:transparent; }17 #render-target{18 width:1080px; height:2400px; position:relative; overflow:hidden;19 background:#ffffff; border-radius:28px;20 box-shadow:0 8px 40px rgba(0,0,0,0.08);21 font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, "Apple Color Emoji","Segoe UI Emoji";22 color:var(--text);23 }24 /* Status bar */25 .statusbar{26 height:110px; padding:0 36px; display:flex; align-items:center; justify-content:space-between;27 color:#000;28 }29 .status-left{ font-size:38px; font-weight:700; letter-spacing:0.5px; }30 .status-right{ display:flex; align-items:center; gap:26px; }31 .icon{ width:44px; height:44px; display:inline-flex; align-items:center; justify-content:center; }32 .topbar{33 height:120px; padding:0 36px; display:flex; align-items:center; justify-content:space-between;34 }35 .brand{ display:flex; align-items:center; gap:16px; }36 .brand .logo{ font-weight:900; color:var(--pink); font-size:48px; letter-spacing:1px; }37 .brand .sub{ font-size:30px; color:#aa8; font-style:italic; }38 .top-icons{ display:flex; align-items:center; gap:24px; }39 .circle-btn{ width:72px; height:72px; border-radius:50%; border:1px solid var(--border); display:flex; align-items:center; justify-content:center; background:#fff; }40 /* Search */41 .search-row{ padding:0 36px 18px 36px; display:flex; gap:18px; align-items:center; }42 .searchbar{43 flex:1; height:108px; border:2px solid var(--border); border-radius:54px; padding:0 30px; display:flex; align-items:center; gap:18px; background:#fff;44 color:var(--muted);45 }46 .searchbar input{ border:none; outline:none; font-size:36px; flex:1; color:#333; background:transparent; }47 .mic-round{ width:108px; height:108px; background:var(--soft-pink); border-radius:54px; display:flex; align-items:center; justify-content:center; }48 /* Category scroller */49 .categories{ padding:18px 36px; display:flex; gap:22px; overflow:hidden; }50 .cat-card{51 width:220px; height:160px; border-radius:22px; overflow:hidden; background:#fff;52 }53 .img-ph{54 width:100%; height:100%; background:#E0E0E0; border:1px solid #BDBDBD; display:flex; justify-content:center; align-items:center; color:#757575; font-size:32px; text-align:center; padding:10px;55 border-radius:20px;56 }57 /* Hero banner */58 .hero{ padding:10px 36px; }59 .hero .banner{60 width:100%; height:760px; border-radius:28px; overflow:hidden;61 }62 .section{ padding:26px 36px 10px 36px; }63 .section h2{ margin:0; font-size:54px; font-weight:800; color:#101010; }64 .coupon{ padding:0 36px; }65 .coupon .coupon-banner{66 width:100%; height:190px; border-radius:24px; overflow:hidden;67 }68 /* Mega tiles */69 .tiles{ padding:10px 36px; display:flex; gap:22px; }70 .tile{ width:320px; height:160px; border-radius:22px; overflow:hidden; }71 /* Bottom nav */72 .bottom-nav{73 position:absolute; left:0; right:0; bottom:46px; height:180px; background:#fff; border-top:1px solid var(--border);74 display:flex; justify-content:space-around; align-items:center;75 }76 .nav-item{ display:flex; flex-direction:column; align-items:center; gap:12px; font-size:26px; color:#777; }77 .nav-item.active{ color:var(--pink); font-weight:700; }78 .home-indicator{79 position:absolute; left:50%; transform:translateX(-50%);80 bottom:12px; width:300px; height:12px; background:#000; opacity:0.22; border-radius:6px;81 }82</style>83</head>84<body>85<div id="render-target">86 <!-- Status bar -->87 <div class="statusbar">88 <div class="status-left">11:14</div>89 <div class="status-right">90 <!-- Simple sun icon -->91 <span class="icon" aria-label="sun">92 <svg width="44" height="44" viewBox="0 0 24 24" fill="none" stroke="#555" stroke-width="2">93 <circle cx="12" cy="12" r="4"></circle>94 <path d="M12 1v3M12 20v3M4.2 4.2l2.1 2.1M17.7 17.7l2.1 2.1M1 12h3M20 12h3M4.2 19.8l2.1-2.1M17.7 6.3l2.1-2.1"></path>95 </svg>96 </span>97 <!-- Signal -->98 <span class="icon" aria-label="signal">99 <svg width="44" height="44" viewBox="0 0 24 24" fill="#555">100 <rect x="2" y="14" width="3" height="6" rx="1"></rect>101 <rect x="7" y="12" width="3" height="8" rx="1"></rect>102 <rect x="12" y="9" width="3" height="11" rx="1"></rect>103 <rect x="17" y="5" width="3" height="15" rx="1"></rect>104 </svg>105 </span>106 <!-- Battery -->107 <span class="icon" aria-label="battery">108 <svg width="52" height="44" viewBox="0 0 32 18" fill="none" stroke="#555" stroke-width="2">109 <rect x="1" y="3" width="26" height="12" rx="2"></rect>110 <rect x="3" y="5" width="18" height="8" fill="#555" stroke="none"></rect>111 <rect x="28" y="7" width="3" height="6" rx="1" fill="#555" stroke="none"></rect>112 </svg>113 </span>114 </div>115 </div>116 117 <!-- Top bar -->118 <div class="topbar">119 <div class="brand">120 <span class="icon" aria-label="dropdown">121 <svg width="44" height="44" viewBox="0 0 24 24" fill="none" stroke="#333" stroke-width="2">122 <path d="M7 10l5 5 5-5"></path>123 </svg>124 </span>125 <div class="logo">NYKAA</div>126 <div class="sub">join privé</div>127 </div>128 <div class="top-icons">129 <div class="circle-btn" aria-label="notifications">130 <svg width="34" height="34" viewBox="0 0 24 24" fill="none" stroke="#333" stroke-width="2">131 <path d="M12 22a2 2 0 0 0 2-2H10a2 2 0 0 0 2 2z"></path>132 <path d="M18 16v-5a6 6 0 1 0-12 0v5l-2 2h16l-2-2z"></path>133 </svg>134 </div>135 <div class="circle-btn" aria-label="wishlist">136 <svg width="34" height="34" viewBox="0 0 24 24" fill="none" stroke="#333" stroke-width="2">137 <path d="M20.8 6.1a5.5 5.5 0 0 0-7.8 0L12 7.1l-1-1a5.5 5.5 0 0 0-7.8 7.8l1 1L12 22l7.8-7.1 1-1a5.5 5.5 0 0 0 0-7.8z"></path>138 </svg>139 </div>140 <div class="circle-btn" aria-label="bag">141 <svg width="34" height="34" viewBox="0 0 24 24" fill="none" stroke="#333" stroke-width="2">142 <path d="M6 7h12l1 12H5L6 7z"></path>143 <path d="M9 7a3 3 0 1 1 6 0"></path>144 </svg>145 </div>146 </div>147 </div>148 149 <!-- Search -->150 <div class="search-row">151 <div class="searchbar">152 <svg width="40" height="40" viewBox="0 0 24 24" fill="none" stroke="#777" stroke-width="2">153 <circle cx="11" cy="11" r="7"></circle>154 <path d="M21 21l-4.3-4.3"></path>155 </svg>156 <input type="text" placeholder="Search on Nykaa" />157 </div>158 <div class="mic-round" aria-label="mic">159 <svg width="40" height="40" viewBox="0 0 24 24" fill="none" stroke="#ff2f78" stroke-width="2">160 <rect x="9" y="4" width="6" height="10" rx="3"></rect>161 <path d="M12 15v4"></path>162 <path d="M7 12a5 5 0 0 0 10 0"></path>163 </svg>164 </div>165 </div>166 167 <!-- Categories -->168 <div class="categories">169 <div class="cat-card"><div class="img-ph">[IMG: Haircare]</div></div>170 <div class="cat-card"><div class="img-ph">[IMG: Makeup]</div></div>171 <div class="cat-card"><div class="img-ph">[IMG: Luxe Beauty]</div></div>172 <div class="cat-card"><div class="img-ph">[IMG: Skincare]</div></div>173 <div class="cat-card"><div class="img-ph">[IMG: Fragrances]</div></div>174 </div>175 176 <!-- Hero banner -->177 <div class="hero">178 <div class="banner">179 <div class="img-ph" style="height:100%; border-radius:28px;">[IMG: Nykaa Strobe & Glow Highlighters Promo]</div>180 </div>181 </div>182 183 <!-- First purchase offers -->184 <div class="section"><h2>First Purchase App Offers</h2></div>185 <div class="coupon">186 <div class="coupon-banner">187 <div class="img-ph" style="height:100%; border-radius:24px;">[IMG: First Order Coupon - EXTRA ₹400 OFF]</div>188 </div>189 </div>190 191 <!-- Mega Beauty Fiesta -->192 <div class="section"><h2>Mega Beauty Fiesta</h2></div>193 <div class="tiles">194 <div class="tile"><div class="img-ph">[IMG: Beauty Deal Tile]</div></div>195 <div class="tile"><div class="img-ph">[IMG: K-Beauty Tile]</div></div>196 <div class="tile"><div class="img-ph">[IMG: Best of Beauty Tile]</div></div>197 </div>198 199 <!-- Bottom navigation -->200 <div class="bottom-nav">201 <div class="nav-item active">202 <svg width="40" height="40" viewBox="0 0 24 24" fill="none" stroke="#ff2f78" stroke-width="2">203 <path d="M12 3l9 8h-3v8H6v-8H3l9-8z"></path>204 </svg>205 <div>Beauty</div>206 </div>207 <div class="nav-item">208 <svg width="40" height="40" viewBox="0 0 24 24" fill="none" stroke="#777" stroke-width="2">209 <circle cx="12" cy="8" r="4"></circle>210 <path d="M4 21a8 8 0 0 1 16 0"></path>211 </svg>212 <div>Offers</div>213 </div>214 <div class="nav-item">215 <svg width="40" height="40" viewBox="0 0 24 24" fill="none" stroke="#777" stroke-width="2">216 <rect x="3" y="4" width="7" height="7"></rect>217 <rect x="14" y="4" width="7" height="7"></rect>218 <rect x="3" y="15" width="7" height="7"></rect>219 <rect x="14" y="15" width="7" height="7"></rect>220 </svg>221 <div>Categories</div>222 </div>223 <div class="nav-item">224 <svg width="40" height="40" viewBox="0 0 24 24" fill="none" stroke="#777" stroke-width="2">225 <path d="M4 4h16v12H4z"></path>226 <path d="M10 22l2-6 2 6"></path>227 </svg>228 <div>Stream</div>229 </div>230 <div class="nav-item">231 <svg width="40" height="40" viewBox="0 0 24 24" fill="none" stroke="#777" stroke-width="2">232 <circle cx="12" cy="8" r="4"></circle>233 <path d="M6 20c0-3.3 2.7-6 6-6s6 2.7 6 6"></path>234 </svg>235 <div>Account</div>236 </div>237 </div>238 239 <!-- Home indicator -->240 <div class="home-indicator"></div>241</div>242</body>243</html>