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 - Search</title>7<style>8 html, body { margin: 0; padding: 0; background: transparent; }9 * { box-sizing: border-box; }10 #render-target {11 position: relative;12 overflow: hidden;13 width: 1080px;14 height: 2400px;15 background: #ffffff;16 font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Arial, sans-serif;17 color: #243445;18 }19 20 /* Status bar */21 .status-bar {22 height: 120px;23 padding: 0 36px;24 display: flex;25 align-items: center;26 color: #6B6F75;27 font-weight: 600;28 font-size: 38px;29 }30 .status-icons { margin-left: auto; display: flex; align-items: center; gap: 22px; }31 .dot { width: 12px; height: 12px; background: #9aa0a6; border-radius: 50%; display: inline-block; }32 .sb-icon {33 width: 36px; height: 36px; border-radius: 50%;34 border: 2px solid #AEB4BA; display: inline-block;35 }36 .wifi {37 width: 40px; height: 28px; border: 3px solid #76808A; border-top-left-radius: 30px; border-top-right-radius: 30px; border-bottom: none;38 }39 .battery {40 width: 48px; height: 28px; border: 3px solid #76808A; position: relative; border-radius: 6px;41 }42 .battery:after {43 content: ""; position: absolute; right: -8px; top: 8px; width: 6px; height: 12px; background: #76808A; border-radius: 2px;44 }45 46 /* Search header */47 .search-header {48 padding: 8px 24px 0;49 }50 .search-row {51 display: flex; align-items: center; gap: 24px;52 padding: 14px 12px 0 12px;53 }54 .back-btn {55 width: 72px; height: 72px; display: flex; align-items: center; justify-content: center;56 }57 .search-box {58 flex: 1;59 background: #F2F3F5;60 height: 110px;61 border-radius: 16px;62 position: relative;63 display: flex; align-items: center;64 padding: 0 28px;65 border-bottom: 8px solid #F3A7B6;66 }67 .search-input {68 border: none; outline: none; background: transparent;69 width: 100%;70 font-size: 40px; color: #7A838C;71 }72 73 /* Horizontal category chips */74 .chips-scroll {75 margin-top: 18px;76 padding: 0 24px 8px 24px;77 overflow-x: auto; white-space: nowrap;78 }79 .chip-avatar {80 display: inline-flex; align-items: center; gap: 16px;81 padding: 12px 26px 12px 12px;82 border: 2px solid #D9DCE1; border-radius: 999px; background: #fff;83 margin-right: 18px;84 font-size: 36px; color: #313E4D;85 vertical-align: middle;86 }87 .chip-avatar.selected {88 background: #FFE9EF; border-color: #F39BB0; color: #E3516B;89 }90 .avatar {91 width: 78px; height: 78px; border-radius: 50%;92 background: #E0E0E0; border: 1px solid #BDBDBD;93 display: flex; align-items: center; justify-content: center;94 color: #757575; font-size: 22px;95 overflow: hidden;96 }97 98 /* Cards */99 .section-card {100 margin: 28px 24px 0 24px;101 background: #F4F6F8;102 border-radius: 24px;103 padding: 28px;104 position: relative;105 }106 .section-title {107 font-size: 44px;108 font-weight: 700;109 color: #1C3346;110 margin: 8px 0 24px 6px;111 }112 .trash {113 position: absolute; right: 28px; top: 32px; width: 48px; height: 48px;114 display: flex; align-items: center; justify-content: center;115 }116 .chips-wrap {117 display: flex; flex-wrap: wrap; gap: 22px 24px;118 padding: 6px;119 }120 .tag {121 display: inline-block;122 padding: 20px 28px;123 background: #fff;124 border: 2px solid #D6DADF;125 border-radius: 999px;126 font-size: 34px;127 color: #2C3E50;128 max-width: 460px;129 white-space: nowrap;130 overflow: hidden;131 text-overflow: ellipsis;132 }133 .more-row {134 margin-top: 18px; text-align: right; padding-right: 10px;135 font-size: 36px; color: #5A6A79; font-weight: 600;136 }137 .divider-space { height: 16px; }138 139 /* Bottom gesture bar */140 .gesture {141 position: absolute; left: 50%; transform: translateX(-50%);142 bottom: 28px; width: 320px; height: 14px; background: #000; border-radius: 10px; opacity: 0.9;143 }144</style>145</head>146<body>147<div id="render-target">148 149 <!-- Status Bar -->150 <div class="status-bar">151 10:27152 <div class="status-icons">153 <span class="sb-icon"></span>154 <span class="dot"></span>155 <span class="sb-icon"></span>156 <div class="wifi"></div>157 <div class="battery"></div>158 </div>159 </div>160 161 <!-- Search -->162 <div class="search-header">163 <div class="search-row">164 <div class="back-btn" aria-label="Back">165 <svg width="48" height="48" viewBox="0 0 24 24" fill="none">166 <path d="M14.5 5L7.5 12l7 7" stroke="#526371" stroke-width="2.4" stroke-linecap="round" stroke-linejoin="round"/>167 </svg>168 </div>169 <div class="search-box">170 <input class="search-input" placeholder="Search in Nykaa Fashion Store" />171 </div>172 </div>173 174 <!-- Category chips -->175 <div class="chips-scroll">176 <span class="chip-avatar selected">177 <span class="avatar">IMG</span>178 All179 </span>180 <span class="chip-avatar">181 <span class="avatar">IMG</span>182 Women183 </span>184 <span class="chip-avatar">185 <span class="avatar">IMG</span>186 Men187 </span>188 <span class="chip-avatar">189 <span class="avatar">IMG</span>190 Kids191 </span>192 </div>193 </div>194 195 <!-- Recent Searches -->196 <div class="section-card">197 <div class="section-title">Your recent searches</div>198 <div class="trash" title="Clear">199 <svg width="40" height="40" viewBox="0 0 24 24">200 <path d="M3 6h18M8 6V4h8v2m-9 0l1 13h8l1-13" fill="none" stroke="#E0626F" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>201 </svg>202 </div>203 <div class="chips-wrap">204 <span class="tag">black formal shirts f...</span>205 <span class="tag">pink formal shirt for...</span>206 <span class="tag">formal suits for men</span>207 <span class="tag">formal jeans for wo...</span>208 <span class="tag">formal dresses for w...</span>209 <span class="tag">Formal Trousers</span>210 </div>211 <div class="more-row">+4 more212 <svg width="28" height="28" viewBox="0 0 24 24" style="vertical-align: -4px; margin-left: 6px;">213 <path d="M6 9l6 6 6-6" fill="none" stroke="#687787" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>214 </svg>215 </div>216 </div>217 218 <!-- Trending Collections -->219 <div class="section-card" style="margin-top: 28px;">220 <div class="section-title">Trending Collections</div>221 <div class="chips-wrap">222 <span class="tag">Hidden Gems</span>223 <span class="tag">Bestsellers on Nykaa</span>224 <span class="tag">Exciting Deals</span>225 <span class="tag">Editor's Pick</span>226 <span class="tag">New on Nykaa</span>227 <span class="tag">Revolve Store</span>228 <span class="tag">Fit Zone</span>229 </div>230 </div>231 232 <!-- Popular Categories -->233 <div class="section-card" style="margin-top: 28px;">234 <div class="section-title">Popular Categories</div>235 <div class="chips-wrap">236 <span class="tag">Co-ord Sets</span>237 <span class="tag">Dresses</span>238 <span class="tag">Jeans</span>239 <span class="tag">Tops</span>240 <span class="tag">Suits & Sets</span>241 <span class="tag">Earrings</span>242 <span class="tag">Sling Bags</span>243 <span class="tag">Sportswear</span>244 <span class="tag">Watches</span>245 <span class="tag">Tech Accessories</span>246 </div>247 </div>248 249 <!-- Popular Brands -->250 <div class="section-card" style="margin-top: 28px;">251 <div class="section-title">Popular Brands</div>252 <div class="chips-wrap">253 <span class="tag">Cider</span>254 <span class="tag">Biba</span>255 <span class="tag">Forever 21</span>256 <span class="tag">Puma</span>257 <span class="tag">Adidas</span>258 <span class="tag">U.S.Polo Assn</span>259 <span class="tag">ONLY</span>260 <span class="tag">Accessorize London</span>261 </div>262 </div>263 264 <!-- Bottom gesture -->265 <div class="gesture"></div>266</div>267</body>268</html>