GD-ML/AndroidCode

1<!DOCTYPE html>2<html>3<head>4<meta charset="UTF-8">5<title>Nykaa Search - Mock</title>6<style>7  body { margin: 0; padding: 0; background: transparent; font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; }8  #render-target {9    width: 1080px;10    height: 2400px;11    position: relative;12    overflow: hidden;13    background: #ffffff;14  }15  /* Status bar */16  .statusbar {17    height: 120px;18    padding: 0 40px;19    display: flex;20    align-items: center;21    justify-content: space-between;22    color: #3c3c3c;23  }24  .status-right {25    display: flex;26    align-items: center;27    gap: 28px;28  }29  /* Header with search */30  #search-header {31    padding: 16px 28px 0 28px;32  }33  .search-row {34    display: flex;35    align-items: center;36    gap: 24px;37    padding: 8px 0 16px 0;38  }39  .back-btn {40    width: 88px;41    height: 88px;42    border-radius: 44px;43    display: flex;44    align-items: center;45    justify-content: center;46  }47  .search-wrapper {48    position: relative;49    width: 780px;50  }51  .search-bar {52    height: 110px;53    background: #F2F3F5;54    border-radius: 55px;55    color: #6f7379;56    font-size: 38px;57    display: flex;58    align-items: center;59    padding: 0 36px;60  }61  .search-underline {62    position: absolute;63    left: 0;64    right: 0;65    bottom: -6px;66    height: 6px;67    background: #ff2e7e;68    border-radius: 3px;69  }70  .mic-btn {71    width: 110px;72    height: 110px;73    border-radius: 55px;74    background: #ffe9f1;75    display: flex;76    align-items: center;77    justify-content: center;78  }79  .divider {80    height: 2px;81    background: #E6E6E6;82    margin-top: 18px;83  }84  /* Recent searches header */85  .recent-header {86    display: flex;87    align-items: center;88    justify-content: space-between;89    padding: 28px 36px;90  }91  .recent-header .title {92    font-size: 44px;93    font-weight: 600;94    color: #222;95  }96  .trash-btn {97    width: 72px;98    height: 72px;99    border-radius: 16px;100    display: flex;101    align-items: center;102    justify-content: center;103  }104  /* Recent search item */105  .recent-item {106    display: flex;107    align-items: center;108    padding: 20px 36px 40px 36px;109    gap: 28px;110  }111  .img-circle {112    width: 140px;113    height: 140px;114    border-radius: 70px;115    background: #E0E0E0;116    border: 1px solid #BDBDBD;117    display: flex;118    align-items: center;119    justify-content: center;120    color: #757575;121    font-size: 26px;122    text-align: center;123    line-height: 1.2;124    padding: 8px;125  }126  .recent-text .line1 {127    font-size: 40px;128    color: #333;129    margin-bottom: 10px;130  }131  .recent-text .line2 {132    font-size: 34px;133    color: #6f6f6f;134  }135  /* Skeleton list area */136  .skeleton-area {137    background: #f3f3f3;138    margin-top: 20px;139    padding: 40px 36px;140  }141  .skeleton-item {142    display: flex;143    align-items: center;144    gap: 36px;145    margin-bottom: 60px;146  }147  .sk-thumb {148    width: 160px;149    height: 160px;150    background: #e9e9e9;151    border-radius: 12px;152  }153  .sk-lines {154    flex: 1;155  }156  .sk-line {157    height: 28px;158    background: #e9e9e9;159    border-radius: 6px;160    margin-bottom: 26px;161  }162  .sk-line.short { width: 360px; }163  .sk-line.medium { width: 600px; }164  .sk-line.long { width: 760px; }165  /* Bottom gesture bar */166  .gesture {167    position: absolute;168    left: 0;169    right: 0;170    bottom: 0;171    height: 120px;172    background: #000;173    display: flex;174    align-items: center;175    justify-content: center;176  }177  .gesture .pill {178    width: 220px;179    height: 12px;180    border-radius: 6px;181    background: #e0e0e0;182  }183</style>184</head>185<body>186<div id="render-target">187  <!-- Status bar -->188  <div class="statusbar">189    <div style="font-size:36px;">11:17</div>190    <div class="status-right">191      <!-- Simple wifi icon -->192      <svg width="40" height="40" viewBox="0 0 40 40">193        <path d="M6 16c8-6 20-6 28 0" stroke="#666" stroke-width="3" fill="none" stroke-linecap="round"/>194        <path d="M10 21c6-4 14-4 20 0" stroke="#666" stroke-width="3" fill="none" stroke-linecap="round"/>195        <circle cx="20" cy="27" r="3" fill="#666"/>196      </svg>197      <!-- Battery icon -->198      <svg width="54" height="40" viewBox="0 0 54 40">199        <rect x="2" y="10" width="42" height="20" rx="4" stroke="#666" stroke-width="3" fill="none"/>200        <rect x="6" y="14" width="34" height="12" rx="2" fill="#666"/>201        <rect x="46" y="15" width="6" height="10" rx="2" fill="#666"/>202      </svg>203    </div>204  </div>205 206  <!-- Search header -->207  <div id="search-header">208    <div class="search-row">209      <div class="back-btn">210        <svg width="44" height="44" viewBox="0 0 44 44">211          <path d="M28 8 L14 22 L28 36" stroke="#5c5c5c" stroke-width="4" fill="none" stroke-linecap="round" stroke-linejoin="round"/>212        </svg>213      </div>214 215      <div class="search-wrapper">216        <div class="search-bar">Search on Nykaa</div>217        <div class="search-underline"></div>218      </div>219 220      <div class="mic-btn">221        <svg width="44" height="44" viewBox="0 0 44 44">222          <rect x="16" y="10" width="12" height="16" rx="6" fill="#ff2e7e"/>223          <path d="M10 22c0 6 6 10 12 10s12-4 12-10" stroke="#ff2e7e" stroke-width="3" fill="none" stroke-linecap="round"/>224          <rect x="20" y="30" width="4" height="6" fill="#ff2e7e"/>225        </svg>226      </div>227    </div>228    <div class="divider"></div>229  </div>230 231  <!-- Recent searches header -->232  <div class="recent-header">233    <div class="title">Recent Searches</div>234    <div class="trash-btn">235      <svg width="44" height="44" viewBox="0 0 44 44">236        <path d="M12 12h20" stroke="#707070" stroke-width="3" stroke-linecap="round"/>237        <rect x="14" y="14" width="16" height="22" rx="3" stroke="#707070" stroke-width="3" fill="none"/>238        <rect x="18" y="18" width="2" height="14" fill="#707070"/>239        <rect x="24" y="18" width="2" height="14" fill="#707070"/>240      </svg>241    </div>242  </div>243 244  <!-- Recent search item -->245  <div class="recent-item">246    <div class="img-circle">[IMG: Pink Dior Perfume]</div>247    <div class="recent-text">248      <div class="line1">dior</div>249      <div class="line2">perfume ...</div>250    </div>251  </div>252 253  <!-- Skeleton suggestions area -->254  <div class="skeleton-area">255    <div class="skeleton-item">256      <div class="sk-thumb"></div>257      <div class="sk-lines">258        <div class="sk-line long"></div>259        <div class="sk-line short"></div>260      </div>261    </div>262    <div class="skeleton-item">263      <div class="sk-thumb"></div>264      <div class="sk-lines">265        <div class="sk-line medium"></div>266        <div class="sk-line short"></div>267      </div>268    </div>269    <div class="skeleton-item">270      <div class="sk-thumb"></div>271      <div class="sk-lines">272        <div class="sk-line long"></div>273        <div class="sk-line short"></div>274      </div>275    </div>276  </div>277 278  <!-- Bottom gesture bar -->279  <div class="gesture"><div class="pill"></div></div>280</div>281</body>282</html>