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 body { margin: 0; padding: 0; background: transparent; }9 #render-target {10 width: 1080px;11 height: 2400px;12 position: relative;13 overflow: hidden;14 background: #ffffff;15 font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Arial, sans-serif;16 color: #222;17 }18 19 /* Top status bar */20 .status {21 height: 96px;22 padding: 0 36px;23 display: flex;24 align-items: center;25 justify-content: space-between;26 color: #222;27 font-size: 36px;28 }29 .status .icons {30 display: flex;31 align-items: center;32 gap: 24px;33 }34 .dot {35 width: 12px; height: 12px; background: #9E9E9E; border-radius: 50%;36 }37 .ico {38 width: 44px; height: 44px; display: inline-flex; align-items: center; justify-content: center;39 }40 .ico svg { width: 36px; height: 36px; fill: #6e6e6e; }41 42 /* Search header */43 .search-bar-wrap {44 padding: 12px 24px 0 24px;45 }46 .search-row {47 display: flex;48 align-items: center;49 gap: 20px;50 }51 .back-btn {52 width: 84px; height: 84px; border-radius: 42px;53 display: flex; align-items: center; justify-content: center;54 }55 .back-btn svg { width: 48px; height: 48px; fill: #6d6d6d; }56 .search-field {57 flex: 1;58 height: 96px;59 background: #F4F5F7;60 border: 1px solid #E1E1E1;61 border-radius: 18px 18px 0 0;62 position: relative;63 display: flex; align-items: center;64 padding: 0 28px;65 color: #8a8a8a;66 font-size: 40px;67 }68 .search-underline {69 position: relative;70 height: 8px;71 background: #FF6F9E;72 border-radius: 0 0 18px 18px;73 margin: 0 24px 0 128px; /* visually aligns with field edges */74 }75 76 /* Category pills */77 .categories {78 padding: 24px;79 display: flex;80 gap: 22px;81 overflow: hidden;82 }83 .cat-pill {84 display: flex; align-items: center; gap: 16px;85 padding: 12px 26px 12px 12px;86 border-radius: 50px;87 border: 2px solid #d9d9d9;88 background: #fff;89 font-size: 36px;90 color: #555;91 }92 .cat-pill .avatar {93 width: 76px; height: 76px; border-radius: 38px; overflow: hidden;94 background: #E0E0E0; border: 1px solid #BDBDBD;95 display: flex; align-items: center; justify-content: center;96 color: #757575; font-size: 20px; padding: 6px; text-align: center;97 }98 .cat-pill.active {99 border-color: #FF6F9E;100 background: #FFE8F0;101 color: #FF3D82;102 box-shadow: inset 0 0 0 2px #FFE8F0;103 }104 105 /* Cards */106 .card {107 margin: 18px 24px;108 background: #F6F7F9;109 border-radius: 28px;110 padding: 32px;111 }112 .card-header {113 display: flex; align-items: center; justify-content: space-between;114 margin-bottom: 22px;115 }116 .card-title {117 font-size: 44px; color: #2C3E50; font-weight: 700;118 }119 .trash { width: 48px; height: 48px; }120 .trash svg { width: 48px; height: 48px; fill: #E65151; }121 122 .chip-wrap {123 display: flex; flex-wrap: wrap; gap: 20px 22px;124 }125 .chip {126 font-size: 34px; color: #3b3b3b;127 padding: 22px 28px;128 border: 2px solid #E0E0E0;129 background: #fff;130 border-radius: 999px;131 }132 .more {133 display: flex; align-items: center; justify-content: flex-end;134 margin-top: 18px; color: #5a5a5a; font-size: 36px; gap: 10px;135 }136 .more svg { width: 32px; height: 32px; fill: #777; }137 138 /* Keyboard mock */139 .keyboard {140 position: absolute;141 left: 0; right: 0; bottom: 0;142 height: 920px;143 background: #121212;144 border-top-left-radius: 18px; border-top-right-radius: 18px;145 box-shadow: 0 -4px 10px rgba(0,0,0,0.25);146 color: #eee;147 padding: 18px 18px 0 18px;148 }149 .kbd-suggest {150 height: 88px;151 display: flex; align-items: center; gap: 18px;152 color: #bbb; font-size: 32px;153 }154 .kbd-suggest .sg {155 background: #1f1f1f; padding: 16px 22px; border-radius: 14px; border: 1px solid #2a2a2a;156 }157 .keys {158 margin-top: 12px;159 display: grid;160 grid-template-columns: repeat(10, 1fr);161 gap: 12px;162 }163 .key {164 height: 110px;165 background: #1f1f1f;166 border: 1px solid #2a2a2a;167 border-radius: 16px;168 }169 .row-gap { height: 8px; }170 .keys-row {171 display: grid;172 grid-template-columns: repeat(10, 1fr);173 gap: 12px;174 margin-top: 12px;175 }176 .space-row {177 display: grid;178 grid-template-columns: 1.2fr 5fr 1.2fr 1.2fr;179 gap: 12px;180 margin-top: 12px;181 }182 .key.label {183 display: flex; align-items: center; justify-content: center; color: #ddd; font-size: 34px;184 }185 .search-btn {186 background: #BFD3FF;187 color: #0b1a3a;188 display: flex; align-items: center; justify-content: center;189 gap: 12px; font-weight: 600;190 }191 .gesture-bar {192 position: absolute; left: 50%; transform: translateX(-50%);193 bottom: 16px; width: 360px; height: 10px; background: #ffffff; opacity: 0.9; border-radius: 6px;194 }195</style>196</head>197<body>198<div id="render-target">199 200 <!-- Status bar -->201 <div class="status">202 <div class="time">10:27</div>203 <div class="icons">204 <span class="ico"><svg viewBox="0 0 24 24"><circle cx="12" cy="12" r="9"/></svg></span>205 <span class="ico"><svg viewBox="0 0 24 24"><circle cx="12" cy="12" r="4"/></svg></span>206 <span class="ico"><svg viewBox="0 0 24 24"><path d="M12 3a9 9 0 0 0-9 9h2a7 7 0 0 1 14 0h2a9 9 0 0 0-9-9z"/></svg></span>207 <span class="dot"></span>208 <span class="ico"><svg viewBox="0 0 24 24"><path d="M2 8l10 7 10-7" /><path d="M5 18h14"/></svg></span>209 <span class="ico"><svg viewBox="0 0 24 24"><path d="M6 8h12v10a2 2 0 0 1-2 2H8a2 2 0 0 1-2-2V8z"/><path d="M9 6h6v2H9z"/></svg></span>210 </div>211 </div>212 213 <!-- Search bar -->214 <div class="search-bar-wrap">215 <div class="search-row">216 <div class="back-btn">217 <svg viewBox="0 0 24 24"><path d="M15.5 19L8.5 12l7-7" /></svg>218 </div>219 <div class="search-field">Search in Nykaa Fashion Store</div>220 </div>221 <div class="search-underline"></div>222 </div>223 224 <!-- Category pills -->225 <div class="categories">226 <div class="cat-pill active">227 <div class="avatar">[IMG]</div>228 <div>All</div>229 </div>230 <div class="cat-pill">231 <div class="avatar">[IMG]</div>232 <div>Women</div>233 </div>234 <div class="cat-pill">235 <div class="avatar">[IMG]</div>236 <div>Men</div>237 </div>238 <div class="cat-pill">239 <div class="avatar">[IMG]</div>240 <div>Kids</div>241 </div>242 </div>243 244 <!-- Recent searches card -->245 <div class="card">246 <div class="card-header">247 <div class="card-title">Your recent searches</div>248 <div class="trash">249 <svg viewBox="0 0 24 24"><path d="M6 7h12l-1 13a2 2 0 0 1-2 2H9a2 2 0 0 1-2-2L6 7z"/><path d="M9 4h6l1 2H8l1-2z"/></svg>250 </div>251 </div>252 <div class="chip-wrap">253 <div class="chip">black formal shirts f...</div>254 <div class="chip">pink formal shirt for...</div>255 <div class="chip">formal suits for men</div>256 <div class="chip">formal jeans for wo...</div>257 <div class="chip">formal dresses for w...</div>258 <div class="chip">Formal Trousers</div>259 </div>260 <div class="more">261 <span>+4 more</span>262 <svg viewBox="0 0 24 24"><path d="M6 9l6 6 6-6"/></svg>263 </div>264 </div>265 266 <!-- Trending Collections card -->267 <div class="card" style="margin-top: 18px;">268 <div class="card-header">269 <div class="card-title">Trending Collections</div>270 <span></span>271 </div>272 <div class="chip-wrap">273 <div class="chip">Hidden Gems</div>274 <div class="chip">Bestsellers on Nykaa</div>275 <div class="chip">Exciting Deals</div>276 <div class="chip">Editor's Pick</div>277 <div class="chip">New on Nykaa</div>278 <div class="chip">Revolve Store</div>279 <div class="chip">Fit Zone</div>280 </div>281 </div>282 283 <!-- Keyboard mock -->284 <div class="keyboard">285 <div class="kbd-suggest">286 <div class="sg">GIF</div>287 <div class="sg">Emoji</div>288 <div class="sg">Translate</div>289 <div class="sg">Themes</div>290 <div class="sg">Voice</div>291 </div>292 293 <!-- Rows of keys -->294 <div class="keys-row">295 <div class="key label">q</div><div class="key label">w</div><div class="key label">e</div><div class="key label">r</div><div class="key label">t</div><div class="key label">y</div><div class="key label">u</div><div class="key label">i</div><div class="key label">o</div><div class="key label">p</div>296 </div>297 <div class="keys-row">298 <div class="key label">a</div><div class="key label">s</div><div class="key label">d</div><div class="key label">f</div><div class="key label">g</div><div class="key label">h</div><div class="key label">j</div><div class="key label">k</div><div class="key label">l</div><div class="key label">⌫</div>299 </div>300 <div class="keys-row">301 <div class="key label">⇧</div><div class="key label">z</div><div class="key label">x</div><div class="key label">c</div><div class="key label">v</div><div class="key label">b</div><div class="key label">n</div><div class="key label">m</div><div class="key label">.</div><div class="key label">,</div>302 </div>303 <div class="space-row">304 <div class="key label">?123</div>305 <div class="key label">space</div>306 <div class="key label">.</div>307 <div class="key label search-btn">308 <svg viewBox="0 0 24 24" width="28" height="28"><circle cx="11" cy="11" r="7" stroke="#0b1a3a" stroke-width="2" fill="none"/><path d="M16 16l5 5" stroke="#0b1a3a" stroke-width="2"/></svg>309 <span>Search</span>310 </div>311 </div>312 <div class="gesture-bar"></div>313 </div>314 315</div>316</body>317</html>