GD-ML/AndroidCode
13.4k
1<html>2<head>3<meta charset="UTF-8">4<meta name="viewport" content="width=1080, initial-scale=1.0">5<title>Myntra Search - Mock</title>6<style>7 body { margin:0; padding:0; background:transparent; font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Arial, sans-serif; }8 #render-target {9 width:1080px; height:2400px; position:relative; overflow:hidden;10 background:#ffffff; border-radius:0;11 color:#222;12 }13 14 /* Status bar */15 .status-bar {16 height:120px; padding:0 36px; display:flex; align-items:center; justify-content:space-between;17 font-weight:600; font-size:42px; color:#222;18 }19 .status-right { display:flex; gap:26px; align-items:center; }20 .icon { width:42px; height:42px; display:inline-block; }21 22 /* Search header */23 .search-area { padding:0 36px 24px; }24 .search-row { display:flex; align-items:center; gap:28px; }25 .back-btn { width:64px; height:64px; display:flex; align-items:center; justify-content:center; }26 .search-input {27 flex:1; height:116px; border-radius:24px; background:#f5f5f7; border:1px solid #e0e0e0;28 display:flex; align-items:center; padding:0 28px; font-size:44px; color:#111;29 }30 .search-input .text { flex:1; }31 .search-input .clear { width:64px; height:64px; display:flex; align-items:center; justify-content:center; }32 33 /* Suggestions list */34 .suggestions { margin-top:12px; border-top:1px solid #eee; }35 .item { padding:36px 36px; display:flex; align-items:center; border-bottom:1px solid #eee; }36 .item .left { width:72px; height:72px; display:flex; align-items:center; justify-content:center; margin-right:26px; }37 .item .text { flex:1; font-size:44px; }38 .item .count { font-size:38px; color:#757575; margin-right:18px; }39 .item .chev { width:44px; height:44px; }40 .item .sub { color:#757575; font-weight:500; }41 42 /* Global store row */43 .store-row { padding:30px 36px; display:flex; align-items:center; gap:22px; }44 .store-badge {45 width:84px; height:84px; border:1px solid #d0d0d0; border-radius:12px;46 display:flex; align-items:center; justify-content:center; font-size:30px; color:#777; background:#E0E0E0;47 }48 .store-info { display:flex; flex-direction:column; }49 .store-title { font-size:42px; font-weight:700; display:flex; align-items:center; gap:14px; }50 .verified { width:28px; height:28px; background:#ff3e6c; border-radius:50%; display:inline-block; }51 .followers { font-size:34px; color:#757575; margin-top:6px; }52 53 /* Banner */54 .banner {55 margin:24px 36px; height:280px; border:1px solid #bdbdbd; background:#E0E0E0;56 display:flex; align-items:center; justify-content:center; color:#757575; font-size:40px; border-radius:18px;57 }58 59 /* Section header */60 .section-header {61 padding:20px 36px 10px; display:flex; align-items:center; justify-content:space-between;62 }63 .section-title { font-size:46px; font-weight:800; }64 .view-btn {65 background:#ff3e6c; color:#fff; border:none; border-radius:18px; padding:22px 34px; font-size:40px; font-weight:700;66 }67 68 /* Keyboard */69 .keyboard { position:absolute; left:0; bottom:0; width:100%; background:#f2f3ea; border-top:1px solid #ddd; }70 .kb-suggest { display:flex; align-items:center; gap:34px; padding:22px 28px; background:#f6f7f0; font-size:40px; }71 .chip { padding:16px 28px; background:#ffffff; border:1px solid #ddd; border-radius:30px; }72 .kb-rows { padding:20px; }73 .row { display:grid; grid-template-columns: repeat(10, 1fr); gap:16px; margin-bottom:18px; }74 .row-2 { grid-template-columns: repeat(9, 1fr); }75 .row-3 { grid-template-columns: 1.2fr repeat(7, 1fr) 1.4fr; }76 .row-4 { display:grid; grid-template-columns: 1.4fr 1fr 1fr 6fr 1fr 1.8fr; gap:16px; }77 .key {78 background:#ffffff; border:1px solid #d6d6d6; height:120px; border-radius:28px;79 display:flex; align-items:center; justify-content:center; font-size:46px; box-shadow:0 1px 0 #e6e6e6 inset;80 }81 .space { height:120px; }82 .small { font-size:40px; color:#666; }83</style>84</head>85<body>86<div id="render-target">87 88 <!-- Status Bar -->89 <div class="status-bar">90 <div>10:46</div>91 <div class="status-right">92 <!-- Simple status icons -->93 <svg class="icon" viewBox="0 0 24 24">94 <circle cx="12" cy="12" r="8" fill="#555"/>95 </svg>96 <svg class="icon" viewBox="0 0 24 24">97 <path d="M2 13 L12 3 L22 13" stroke="#555" stroke-width="2" fill="none"/>98 <rect x="6" y="13" width="12" height="8" fill="#555"/>99 </svg>100 <svg class="icon" viewBox="0 0 24 24">101 <rect x="3" y="6" width="18" height="12" rx="2" ry="2" stroke="#555" fill="none" stroke-width="2"/>102 <rect x="5" y="8" width="12" height="8" fill="#555"/>103 </svg>104 </div>105 </div>106 107 <!-- Search Area -->108 <div class="search-area">109 <div class="search-row">110 <div class="back-btn">111 <svg width="44" height="44" viewBox="0 0 24 24">112 <path d="M15 5 L7 12 L15 19" stroke="#333" stroke-width="3" fill="none" stroke-linecap="round" stroke-linejoin="round"/>113 </svg>114 </div>115 <div class="search-input">116 <div class="text">nike shoes</div>117 <div class="clear">118 <svg width="40" height="40" viewBox="0 0 24 24">119 <path d="M6 6 L18 18 M18 6 L6 18" stroke="#555" stroke-width="2"/>120 </svg>121 </div>122 </div>123 </div>124 </div>125 126 <!-- Suggestions -->127 <div class="suggestions">128 <div class="item">129 <div class="left">130 <svg width="48" height="48" viewBox="0 0 24 24">131 <circle cx="10" cy="10" r="6" stroke="#666" stroke-width="2" fill="none"/>132 <line x1="15" y1="15" x2="21" y2="21" stroke="#666" stroke-width="2"/>133 </svg>134 </div>135 <div class="text"><span style="font-weight:700">Nike Shoes</span></div>136 <div class="count">731</div>137 <div class="chev">138 <svg width="36" height="36" viewBox="0 0 24 24">139 <path d="M9 5 L16 12 L9 19" stroke="#777" stroke-width="2" fill="none" stroke-linecap="round"/>140 </svg>141 </div>142 </div>143 144 <div class="item">145 <div class="left">146 <svg width="48" height="48" viewBox="0 0 24 24">147 <circle cx="10" cy="10" r="6" stroke="#666" stroke-width="2" fill="none"/>148 <line x1="15" y1="15" x2="21" y2="21" stroke="#666" stroke-width="2"/>149 </svg>150 </div>151 <div class="text"><span style="font-weight:700">Nike Shoes</span> <span class="sub">Men</span></div>152 <div class="count">209</div>153 <div class="chev">154 <svg width="36" height="36" viewBox="0 0 24 24">155 <path d="M9 5 L16 12 L9 19" stroke="#777" stroke-width="2" fill="none" stroke-linecap="round"/>156 </svg>157 </div>158 </div>159 160 <div class="item">161 <div class="left">162 <svg width="48" height="48" viewBox="0 0 24 24">163 <circle cx="10" cy="10" r="6" stroke="#666" stroke-width="2" fill="none"/>164 <line x1="15" y1="15" x2="21" y2="21" stroke="#666" stroke-width="2"/>165 </svg>166 </div>167 <div class="text"><span style="font-weight:700">Nike Shoes</span> <span class="sub">Women</span></div>168 <div class="count">203</div>169 <div class="chev">170 <svg width="36" height="36" viewBox="0 0 24 24">171 <path d="M9 5 L16 12 L9 19" stroke="#777" stroke-width="2" fill="none" stroke-linecap="round"/>172 </svg>173 </div>174 </div>175 176 <div class="item">177 <div class="left">178 <svg width="48" height="48" viewBox="0 0 24 24">179 <circle cx="10" cy="10" r="6" stroke="#666" stroke-width="2" fill="none"/>180 <line x1="15" y1="15" x2="21" y2="21" stroke="#666" stroke-width="2"/>181 </svg>182 </div>183 <div class="text"><span style="font-weight:700">Nike Shoes</span> <span class="sub">Casual</span></div>184 <div class="count">329</div>185 <div class="chev">186 <svg width="36" height="36" viewBox="0 0 24 24">187 <path d="M9 5 L16 12 L9 19" stroke="#777" stroke-width="2" fill="none" stroke-linecap="round"/>188 </svg>189 </div>190 </div>191 192 <div class="item">193 <div class="left">194 <svg width="48" height="48" viewBox="0 0 24 24">195 <circle cx="10" cy="10" r="6" stroke="#666" stroke-width="2" fill="none"/>196 <line x1="15" y1="15" x2="21" y2="21" stroke="#666" stroke-width="2"/>197 </svg>198 </div>199 <div class="text"><span style="font-weight:700">Nike Shoes</span> <span class="sub">Boys</span></div>200 <div class="count">33</div>201 <div class="chev">202 <svg width="36" height="36" viewBox="0 0 24 24">203 <path d="M9 5 L16 12 L9 19" stroke="#777" stroke-width="2" fill="none" stroke-linecap="round"/>204 </svg>205 </div>206 </div>207 208 <div class="item">209 <div class="left">210 <svg width="48" height="48" viewBox="0 0 24 24">211 <circle cx="10" cy="10" r="6" stroke="#666" stroke-width="2" fill="none"/>212 <line x1="15" y1="15" x2="21" y2="21" stroke="#666" stroke-width="2"/>213 </svg>214 </div>215 <div class="text"><span style="font-weight:700">Nike Shoes</span> <span class="sub">White</span></div>216 <div class="count">281</div>217 <div class="chev">218 <svg width="36" height="36" viewBox="0 0 24 24">219 <path d="M9 5 L16 12 L9 19" stroke="#777" stroke-width="2" fill="none" stroke-linecap="round"/>220 </svg>221 </div>222 </div>223 224 <div class="item">225 <div class="left">226 <svg width="48" height="48" viewBox="0 0 24 24">227 <circle cx="10" cy="10" r="6" stroke="#666" stroke-width="2" fill="none"/>228 <line x1="15" y1="15" x2="21" y2="21" stroke="#666" stroke-width="2"/>229 </svg>230 </div>231 <div class="text"><span style="font-weight:700">Nike Shoes</span> <span class="sub">Running</span></div>232 <div class="count">253</div>233 <div class="chev">234 <svg width="36" height="36" viewBox="0 0 24 24">235 <path d="M9 5 L16 12 L9 19" stroke="#777" stroke-width="2" fill="none" stroke-linecap="round"/>236 </svg>237 </div>238 </div>239 </div>240 241 <!-- Myntra Global Store -->242 <div class="store-row">243 <div class="store-badge">[IMG: GLOBAL]</div>244 <div class="store-info">245 <div class="store-title">Myntra Global Store <span class="verified"></span></div>246 <div class="followers">8095 followers</div>247 </div>248 </div>249 250 <!-- Banner -->251 <div class="banner">[IMG: Flat ₹400 OFF banner - Code MYNTRA400]</div>252 253 <!-- Section header -->254 <div class="section-header">255 <div class="section-title">MOST SEARCHED ARTICLES</div>256 <button class="view-btn">View All</button>257 </div>258 259 <!-- Keyboard -->260 <div class="keyboard">261 <div class="kb-suggest">262 <div class="chip">shoes</div>263 <div class="chip">shows</div>264 <div class="chip">👟</div>265 <div style="flex:1"></div>266 <!-- Mic icon -->267 <svg width="54" height="54" viewBox="0 0 24 24">268 <rect x="9" y="4" width="6" height="10" rx="3" fill="#666"/>269 <path d="M5 11 C5 15 9 17 12 17 C15 17 19 15 19 11" stroke="#666" stroke-width="2" fill="none"/>270 <line x1="12" y1="17" x2="12" y2="21" stroke="#666" stroke-width="2"/>271 </svg>272 </div>273 274 <div class="kb-rows">275 <div class="row">276 <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>277 </div>278 <div class="row row-2">279 <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>280 </div>281 <div class="row row-3">282 <div class="key small">⇧</div>283 <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>284 <div class="key small">⌫</div>285 </div>286 <div class="row-4">287 <div class="key small">?123</div>288 <div class="key small">,</div>289 <div class="key small">☺</div>290 <div class="key space"> </div>291 <div class="key small">.</div>292 <div class="key small">✔</div>293 </div>294 </div>295 </div>296 297</div>298</body>299</html>