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 Search - Mock</title>7<style>8 body { margin:0; padding:0; background:transparent; font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; color:#212121; }9 #render-target {10 width:1080px; height:2400px; position:relative; overflow:hidden; background:#ffffff;11 }12 13 /* Status bar */14 .status-bar{15 height:100px;16 padding:0 28px;17 display:flex; align-items:center; justify-content:space-between;18 color:#343a40; font-weight:600;19 box-sizing:border-box;20 }21 .status-icons{ display:flex; align-items:center; gap:26px; }22 .icon{ width:36px; height:36px; display:inline-block; }23 .status-time{ font-size:40px; letter-spacing:0.5px; }24 25 /* Search header */26 .search-header{27 position:relative;28 padding:18px 22px 28px;29 display:flex; align-items:center; gap:22px;30 box-sizing:border-box;31 }32 .back-btn{33 width:72px; height:72px; border-radius:36px;34 display:flex; align-items:center; justify-content:center;35 }36 .search-input{37 flex:1;38 height:84px;39 background:#f1f4f6;40 border-radius:44px;41 display:flex; align-items:center;42 padding:0 30px;43 color:#616161; font-size:34px;44 box-sizing:border-box;45 }46 .search-input .placeholder{ color:#8a8f94; }47 .mic-btn{48 width:84px; height:84px; border-radius:50%;49 background:#ffe6f0;50 display:flex; align-items:center; justify-content:center;51 }52 .header-underline{53 position:absolute; left:140px; right:140px; bottom:8px;54 height:6px; background:#ff2e88; border-radius:4px;55 }56 57 /* Sections */58 .content{ padding:10px 0 0; }59 .section{ padding:22px 32px; box-sizing:border-box; }60 .section-title{61 font-size:28px; letter-spacing:1px; color:#6b7280;62 font-weight:700;63 }64 65 .recent-item{66 display:flex; align-items:center; justify-content:space-between;67 padding:24px 6px 6px 6px;68 border-bottom:1px solid #eceff1;69 margin-top:6px;70 }71 .recent-left{ display:flex; align-items:center; gap:20px; }72 .avatar{73 width:120px; height:120px; border-radius:60px; background:#E0E0E0;74 border:1px solid #BDBDBD;75 display:flex; align-items:center; justify-content:center;76 color:#757575; font-size:24px; text-align:center; padding:8px; box-sizing:border-box;77 }78 .recent-text{ line-height:1.2; }79 .recent-text .t1{ font-size:32px; color:#2c2c2c; }80 .recent-text .t2{ font-size:28px; color:#6b6f74; }81 82 .trash{83 width:56px; height:56px; border-radius:12px;84 display:flex; align-items:center; justify-content:center; color:#6b7280;85 }86 87 .chips{88 margin-top:14px;89 display:flex; flex-wrap:wrap; gap:18px;90 }91 .chip{92 padding:18px 26px; border:2px solid #dfe3e8; background:#fff;93 color:#34495e; font-size:30px; border-radius:44px;94 white-space:nowrap;95 }96 97 /* Keyboard mock */98 .keyboard{99 position:absolute; left:0; right:0; bottom:0;100 height:920px; background:#f5f2ff;101 border-top:1px solid #e6e6ee;102 box-shadow:0 -6px 18px rgba(0,0,0,0.06) inset;103 box-sizing:border-box;104 padding:16px 18px 34px;105 }106 .kbd-top{107 height:90px; display:flex; align-items:center; gap:24px;108 }109 .kbd-circle{110 width:84px; height:84px; border-radius:22px;111 background:#e8f5e9; display:flex; align-items:center; justify-content:center;112 color:#2e7d32; font-weight:700;113 }114 .kbd-top .small{ background:#ffffff; border:1px solid #ececec; color:#6b7280; }115 .rows{ margin-top:10px; display:flex; flex-direction:column; gap:18px; }116 .row{ display:flex; justify-content:center; gap:14px; }117 .key{118 min-width:84px; height:120px; background:#ffffff; border:1px solid #ededf3; border-radius:22px;119 display:flex; align-items:center; justify-content:center; font-size:42px; color:#1f2937;120 box-shadow:0 1px 0 rgba(0,0,0,0.04);121 padding:0 14px;122 }123 .key.wide{ min-width:140px; }124 .key.extra{ background:#ffe5ee; color:#6d1b3b; }125 .key.action{ background:#c9f1c6; color:#0b3d0b; }126 .space{ flex:1; min-width:420px; }127 .gesture-bar{128 position:absolute; bottom:12px; left:50%; transform:translateX(-50%);129 width:200px; height:10px; background:#282828; border-radius:8px; opacity:0.5;130 }131</style>132</head>133<body>134<div id="render-target">135 136 <!-- Status Bar -->137 <div class="status-bar">138 <div class="status-time">11:17</div>139 <div class="status-icons">140 <!-- small sun icon -->141 <svg class="icon" viewBox="0 0 24 24"><circle cx="12" cy="12" r="4" fill="#616161"/><g stroke="#616161" stroke-width="2" stroke-linecap="round"><line x1="12" y1="1" x2="12" y2="4"/><line x1="12" y1="20" x2="12" y2="23"/><line x1="1" y1="12" x2="4" y2="12"/><line x1="20" y1="12" x2="23" y2="12"/><line x1="4" y1="4" x2="6" y2="6"/><line x1="18" y1="18" x2="20" y2="20"/><line x1="18" y1="6" x2="20" y2="4"/><line x1="4" y1="20" x2="6" y2="18"/></g></svg>142 <!-- wifi -->143 <svg class="icon" viewBox="0 0 24 24"><path d="M2 8c5-4 15-4 20 0" stroke="#616161" stroke-width="2" fill="none" stroke-linecap="round"/><path d="M5 12c3-3 11-3 14 0" stroke="#616161" stroke-width="2" fill="none" stroke-linecap="round"/><path d="M9 16c2-2 4-2 6 0" stroke="#616161" stroke-width="2" fill="none" stroke-linecap="round"/><circle cx="12" cy="19" r="1.6" fill="#616161"/></svg>144 <!-- battery -->145 <svg class="icon" viewBox="0 0 24 24"><rect x="2" y="7" width="18" height="10" rx="2" ry="2" fill="none" stroke="#616161" stroke-width="2"/><rect x="20" y="10" width="2" height="4" fill="#616161"/></svg>146 </div>147 </div>148 149 <!-- Search Header -->150 <div class="search-header">151 <div class="back-btn">152 <svg width="38" height="38" viewBox="0 0 24 24">153 <path d="M15 6 L9 12 L15 18" stroke="#374151" stroke-width="2.5" stroke-linecap="round" stroke-linejoin="round" fill="none"/>154 </svg>155 </div>156 <div class="search-input"><span class="placeholder">Search on Nykaa</span></div>157 <div class="mic-btn">158 <svg width="36" height="36" viewBox="0 0 24 24">159 <path d="M12 3a3 3 0 0 1 3 3v5a3 3 0 0 1-6 0V6a3 3 0 0 1 3-3z" fill="#ff2e88"/>160 <path d="M5 11a7 7 0 0 0 14 0" stroke="#ff2e88" stroke-width="2" fill="none" stroke-linecap="round"/>161 <line x1="12" y1="18" x2="12" y2="22" stroke="#ff2e88" stroke-width="2" stroke-linecap="round"/>162 </svg>163 </div>164 <div class="header-underline"></div>165 </div>166 167 <!-- Content Scroll Area -->168 <div class="content">169 <div class="section">170 <div class="section-title">RECENT SEARCHES</div>171 <div class="recent-item">172 <div class="recent-left">173 <div class="avatar">[IMG: Perfume]</div>174 <div class="recent-text">175 <div class="t1">dior</div>176 <div class="t2">perfume ...</div>177 </div>178 </div>179 <div class="trash" title="delete">180 <svg width="40" height="40" viewBox="0 0 24 24">181 <path d="M7 7h10l-1 12H8L7 7z" fill="none" stroke="#6b7280" stroke-width="2"/>182 <path d="M9 7V5h6v2" stroke="#6b7280" stroke-width="2" fill="none" stroke-linecap="round"/>183 </svg>184 </div>185 </div>186 </div>187 188 <div class="section">189 <div class="section-title">POPULAR CATEGORIES</div>190 <div class="chips">191 <div class="chip">Face Moisturizer & Day Cream</div>192 <div class="chip">Face Sunscreen</div>193 <div class="chip">Serums & Essence</div>194 <div class="chip">Moisturizers</div>195 <div class="chip">Cleanser</div>196 <div class="chip">Lipstick</div>197 </div>198 </div>199 200 <div class="section" style="padding-bottom:980px;">201 <div class="section-title">POPULAR BRANDS</div>202 <div class="chips">203 <div class="chip">Maybelline New York</div>204 <div class="chip">Lakme</div>205 <div class="chip">M.A.C</div>206 <div class="chip">L'Oreal Paris</div>207 <div class="chip">Huda Beauty</div>208 <div class="chip">NYX</div>209 </div>210 </div>211 </div>212 213 <!-- Keyboard Mock -->214 <div class="keyboard">215 <div class="kbd-top">216 <div class="kbd-circle">⌗</div>217 <div class="kbd-circle small">😊</div>218 <div class="kbd-circle small">GIF</div>219 <div class="kbd-circle small">⚙︎</div>220 <div class="kbd-circle small">G✲</div>221 <div class="kbd-circle small">🎨</div>222 <div class="kbd-circle small">🎤</div>223 </div>224 <div class="rows">225 <div class="row">226 <div class="key">q</div><div class="key">w</div><div class="key">e</div><div class="key">r</div><div class="key">t</div><div class="key">y</div><div class="key">u</div><div class="key">i</div><div class="key">o</div><div class="key">p</div>227 </div>228 <div class="row">229 <div class="key">a</div><div class="key">s</div><div class="key">d</div><div class="key">f</div><div class="key">g</div><div class="key">h</div><div class="key">j</div><div class="key">k</div><div class="key">l</div>230 </div>231 <div class="row">232 <div class="key extra wide">⇧</div>233 <div class="key">z</div><div class="key">x</div><div class="key">c</div><div class="key">v</div><div class="key">b</div><div class="key">n</div><div class="key">m</div>234 <div class="key extra wide">⌫</div>235 </div>236 <div class="row">237 <div class="key extra wide">?123</div>238 <div class="key">,</div>239 <div class="key space"></div>240 <div class="key">.</div>241 <div class="key action wide">242 <svg width="44" height="44" viewBox="0 0 24 24">243 <circle cx="12" cy="12" r="10" fill="#0b3d0b" opacity="0.15"/>244 <path d="M10 17l5-5-5-5" stroke="#0b3d0b" stroke-width="2.2" fill="none" stroke-linecap="round" stroke-linejoin="round"/>245 </svg>246 </div>247 </div>248 </div>249 <div class="gesture-bar"></div>250 </div>251 252</div>253</body>254</html>