GD-ML/AndroidCode

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>Search UI Mock</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    color: #111;16    font-family: Arial, Helvetica, sans-serif;17  }18 19  /* Top status bar */20  .status-bar {21    position: absolute;22    top: 0;23    left: 0;24    width: 1080px;25    height: 170px;26    background: #000;27    color: #fff;28  }29  .status-inner {30    position: absolute;31    left: 36px;32    right: 36px;33    top: 40px;34    height: 90px;35    display: flex;36    align-items: center;37    justify-content: space-between;38    font-weight: 600;39    font-size: 36px;40    letter-spacing: 1px;41  }42  .status-icons {43    display: flex;44    align-items: center;45    gap: 26px;46  }47  .icon-dot {48    width: 18px;49    height: 18px;50    background: #fff;51    border-radius: 50%;52    opacity: 0.9;53  }54 55  /* Back chevron inside black bar */56  .top-back {57    position: absolute;58    left: 36px;59    top: 130px;60    width: 48px;61    height: 48px;62  }63 64  /* Promo banner */65  .promo {66    position: absolute;67    top: 170px;68    left: 0;69    width: 1080px;70    height: 130px;71    background: #E5E5E5;72    border-bottom: 1px solid #D0D0D0;73  }74  .promo-left {75    position: absolute;76    left: 0;77    top: 0;78    width: 110px;79    height: 130px;80    display: flex;81    align-items: center;82    justify-content: center;83  }84  .promo-text {85    position: absolute;86    left: 120px;87    right: 120px;88    top: 0;89    height: 130px;90    display: flex;91    flex-direction: column;92    align-items: center;93    justify-content: center;94    text-transform: uppercase;95    font-weight: 700;96    font-size: 32px;97    letter-spacing: 6px;98    color: #111;99  }100  .promo-text .underline {101    border-bottom: 4px solid #111;102    padding-bottom: 6px;103    margin-top: 10px;104  }105  .promo-close {106    position: absolute;107    right: 24px;108    top: 24px;109    width: 80px;110    height: 80px;111  }112 113  /* Main content */114  .content {115    position: absolute;116    top: 330px;117    left: 60px;118    right: 60px;119    bottom: 150px;120  }121 122  .search-header {123    position: relative;124    margin-top: 40px;125    margin-bottom: 40px;126  }127  .search-title {128    font-size: 56px;129    font-weight: 800;130    letter-spacing: 6px;131    text-transform: uppercase;132  }133  .search-close {134    position: absolute;135    right: 0;136    top: -6px;137    width: 70px;138    height: 70px;139  }140 141  /* Radio group */142  .radio-row {143    display: flex;144    align-items: center;145    gap: 80px;146    margin: 40px 0 30px 0;147  }148  .radio {149    display: inline-flex;150    align-items: center;151    gap: 24px;152    font-size: 36px;153    letter-spacing: 4px;154    text-transform: uppercase;155    color: #111;156  }157  .radio .dot {158    width: 34px;159    height: 34px;160    border: 4px solid #111;161    border-radius: 50%;162    display: inline-block;163    position: relative;164  }165  .radio.selected .dot::after {166    content: "";167    position: absolute;168    left: 6px;169    top: 6px;170    width: 16px;171    height: 16px;172    background: #111;173    border-radius: 50%;174  }175 176  /* Search input row */177  .search-row {178    position: relative;179    height: 120px;180    margin-top: 20px;181    border-bottom: 6px solid #111;182    display: flex;183    align-items: center;184    justify-content: space-between;185  }186  .placeholder {187    color: #8A8A8A;188    font-size: 40px;189    padding-left: 4px;190  }191  .search-btn {192    width: 160px;193    height: 120px;194    background: #000;195    display: flex;196    align-items: center;197    justify-content: center;198  }199 200  /* Section title */201  .section-title {202    margin-top: 50px;203    font-size: 44px;204    font-weight: 800;205    letter-spacing: 6px;206    text-transform: uppercase;207  }208 209  /* Bottom safe area / gesture bar */210  .bottom-bar {211    position: absolute;212    left: 0;213    bottom: 0;214    width: 1080px;215    height: 140px;216    background: #000;217    display: flex;218    align-items: center;219    justify-content: center;220  }221  .gesture-pill {222    width: 240px;223    height: 16px;224    border-radius: 8px;225    background: #E6E6E6;226    opacity: 0.9;227  }228 229  /* Simple SVG strokes */230  svg { display: block; }231</style>232</head>233<body>234<div id="render-target">235 236  <!-- Status bar -->237  <div class="status-bar">238    <div class="status-inner">239      <div>10:52</div>240      <div class="status-icons">241        <div class="icon-dot"></div>242        <div class="icon-dot" style="opacity:0.8;"></div>243        <div class="icon-dot" style="opacity:0.7;"></div>244        <div class="icon-dot" style="opacity:0.6;"></div>245        <!-- Simple Wi-Fi icon -->246        <svg width="44" height="44" viewBox="0 0 44 44">247          <path d="M6 16c8-8 24-8 32 0M12 22c6-6 18-6 24 0M18 28c4-4 12-4 16 0M22 36a4 4 0 1 0 0.1 0" stroke="#fff" stroke-width="3" fill="none" stroke-linecap="round"/>248        </svg>249        <!-- Battery icon -->250        <svg width="60" height="44" viewBox="0 0 60 44">251          <rect x="2" y="8" width="48" height="28" rx="4" stroke="#fff" stroke-width="3" fill="none"/>252          <rect x="6" y="12" width="38" height="20" fill="#fff"/>253          <rect x="52" y="16" width="6" height="16" rx="2" fill="#fff"/>254        </svg>255      </div>256    </div>257    <!-- Back chevron -->258    <svg class="top-back" viewBox="0 0 48 48">259      <path d="M32 10 L16 24 L32 38" stroke="#fff" stroke-width="4" fill="none" stroke-linecap="round" stroke-linejoin="round"/>260    </svg>261  </div>262 263  <!-- Promo banner -->264  <div class="promo">265    <div class="promo-left">266      <svg width="60" height="60" viewBox="0 0 60 60">267        <path d="M22 12 L40 30 L22 48" stroke="#111" stroke-width="6" fill="none" stroke-linecap="round" stroke-linejoin="round"/>268      </svg>269    </div>270    <div class="promo-text">271      <div>Valentino Garavani Vlogo Moon |</div>272      <div class="underline">Discover Now</div>273    </div>274    <svg class="promo-close" viewBox="0 0 80 80">275      <path d="M18 18 L62 62 M62 18 L18 62" stroke="#111" stroke-width="4" stroke-linecap="round"/>276    </svg>277  </div>278 279  <!-- Content -->280  <div class="content">281    <div class="search-header">282      <div class="search-title">SEARCH</div>283      <svg class="search-close" viewBox="0 0 70 70">284        <path d="M12 12 L58 58 M58 12 L12 58" stroke="#888" stroke-width="4" stroke-linecap="round"/>285      </svg>286    </div>287 288    <div class="radio-row">289      <div class="radio selected">290        <span class="dot"></span>291        <span>Woman</span>292      </div>293      <div class="radio">294        <span class="dot"></span>295        <span>Man</span>296      </div>297    </div>298 299    <div class="search-row">300      <div class="placeholder">Search</div>301      <div class="search-btn">302        <svg width="56" height="56" viewBox="0 0 56 56">303          <circle cx="24" cy="24" r="16" stroke="#fff" stroke-width="3" fill="none"/>304          <path d="M34 34 L46 46" stroke="#fff" stroke-width="3" stroke-linecap="round"/>305        </svg>306      </div>307    </div>308 309    <div class="section-title">Must Haves Woman</div>310  </div>311 312  <!-- Bottom gesture area -->313  <div class="bottom-bar">314    <div class="gesture-pill"></div>315  </div>316</div>317</body>318</html>