GD-ML/AndroidCode

1<html>2<head>3<meta charset="UTF-8">4<title>Search UI Mock</title>5<style>6  body { margin: 0; padding: 0; background: transparent; font-family: Arial, Helvetica, sans-serif; }7  #render-target {8    width: 1080px;9    height: 2400px;10    position: relative;11    overflow: hidden;12    background: #ffffff;13    color: #8c8c8c;14  }15 16  /* Status bar */17  .status-bar {18    position: absolute;19    top: 0;20    left: 0;21    width: 1080px;22    height: 120px;23    padding: 22px 40px;24    box-sizing: border-box;25    color: #6f6f6f;26    font-size: 38px;27    display: flex;28    align-items: center;29    justify-content: space-between;30  }31  .status-icons {32    display: flex;33    align-items: center;34    gap: 24px;35  }36  .icon {37    width: 44px;38    height: 44px;39    display: inline-block;40  }41 42  /* Header actions (close + view toggles) */43  .top-actions {44    position: absolute;45    top: 140px;46    left: 40px;47    right: 40px;48    height: 80px;49    display: flex;50    align-items: center;51    justify-content: space-between;52  }53  .actions-right {54    display: flex;55    gap: 40px;56  }57 58  /* Category tabs */59  .tabs {60    position: absolute;61    top: 220px;62    left: 40px;63    right: 40px;64    height: 80px;65    display: flex;66    align-items: center;67    gap: 48px;68    font-size: 36px;69    letter-spacing: 1px;70  }71  .tab {72    color: #b0b0b0;73  }74  .tab.active {75    color: #9c9c9c;76    border-bottom: 4px solid #e0e0e0;77    padding-bottom: 14px;78  }79  .tabs .results {80    margin-left: auto;81    color: #b0b0b0;82  }83 84  /* Search bar */85  .search-bar {86    position: absolute;87    top: 330px;88    left: 40px;89    width: 1000px;90    height: 110px;91    border: 2px solid #e6e6e6;92    border-radius: 10px;93    box-sizing: border-box;94    display: flex;95    align-items: center;96    padding: 0 24px;97    color: #bdbdbd;98    font-size: 40px;99  }100  .search-text {101    flex: 1;102  }103  .search-clear {104    width: 56px;105    height: 56px;106  }107 108  /* Filter buttons */109  .filters {110    position: absolute;111    top: 480px;112    left: 40px;113    display: flex;114    gap: 30px;115  }116  .filter-btn {117    padding: 24px 38px;118    border: 2px solid #e6e6e6;119    border-radius: 8px;120    color: #b5b5b5;121    font-size: 34px;122    background: #ffffff;123  }124 125  /* Loading area */126  .content {127    position: absolute;128    top: 620px;129    left: 0;130    right: 0;131    bottom: 200px;132  }133  .spinner {134    position: absolute;135    top: 960px;136    left: 50%;137    transform: translateX(-50%);138    width: 90px;139    height: 90px;140    border: 8px solid #e0e0e0;141    border-top-color: #7a7a7a;142    border-radius: 50%;143    animation: spin 1.1s linear infinite;144  }145  @keyframes spin {146    to { transform: translateX(-50%) rotate(360deg); }147  }148 149  /* Bottom navigation */150  .bottom-nav {151    position: absolute;152    bottom: 0;153    left: 0;154    width: 1080px;155    height: 170px;156    border-top: 2px solid #eeeeee;157    display: flex;158    align-items: center;159    justify-content: space-around;160    font-size: 40px;161    color: #8f8f8f;162    background: #ffffff;163  }164  .nav-item {165    position: relative;166    text-align: center;167  }168  .nav-item.active::after {169    content: "";170    position: absolute;171    bottom: -16px;172    left: 50%;173    width: 80px;174    height: 8px;175    background: #cfcfcf;176    transform: translateX(-50%);177    border-radius: 6px;178  }179</style>180</head>181<body>182  <div id="render-target">183    <!-- Status bar -->184    <div class="status-bar">185      <div>11:03</div>186      <div class="status-icons">187        <!-- small circle (do not disturb) -->188        <svg class="icon" viewBox="0 0 24 24">189          <circle cx="12" cy="12" r="10" fill="none" stroke="#7f7f7f" stroke-width="2"/>190          <rect x="6" y="11" width="12" height="2" fill="#7f7f7f"/>191        </svg>192        <!-- wifi -->193        <svg class="icon" viewBox="0 0 24 24">194          <path d="M2 8c5-4 15-4 20 0" stroke="#7f7f7f" stroke-width="2" fill="none" />195          <path d="M6 12c3-3 9-3 12 0" stroke="#7f7f7f" stroke-width="2" fill="none" />196          <circle cx="12" cy="16" r="2" fill="#7f7f7f"/>197        </svg>198        <!-- battery -->199        <svg class="icon" viewBox="0 0 24 24">200          <rect x="2" y="6" width="18" height="12" rx="2" ry="2" fill="none" stroke="#7f7f7f" stroke-width="2"/>201          <rect x="4" y="8" width="14" height="8" fill="#7f7f7f"/>202          <rect x="20" y="10" width="2" height="6" fill="#7f7f7f"/>203        </svg>204        <div style="font-size:38px; color:#616161;">100%</div>205      </div>206    </div>207 208    <!-- Header actions -->209    <div class="top-actions">210      <!-- Close icon -->211      <svg class="icon" viewBox="0 0 24 24">212        <path d="M4 4 L20 20 M20 4 L4 20" stroke="#b7b7b7" stroke-width="2" />213      </svg>214      <div class="actions-right">215        <!-- list icon -->216        <svg class="icon" viewBox="0 0 24 24">217          <rect x="4" y="5" width="16" height="3" fill="#b7b7b7"/>218          <rect x="4" y="10" width="16" height="3" fill="#b7b7b7"/>219          <rect x="4" y="15" width="16" height="3" fill="#b7b7b7"/>220        </svg>221        <!-- grid icon -->222        <svg class="icon" viewBox="0 0 24 24">223          <rect x="3" y="3" width="8" height="8" fill="#b7b7b7"/>224          <rect x="13" y="3" width="8" height="8" fill="#b7b7b7"/>225          <rect x="3" y="13" width="8" height="8" fill="#b7b7b7"/>226          <rect x="13" y="13" width="8" height="8" fill="#b7b7b7"/>227        </svg>228      </div>229    </div>230 231    <!-- Category tabs -->232    <div class="tabs">233      <div class="tab active">WOMAN</div>234      <div class="tab">MAN</div>235      <div class="tab">KIDS</div>236      <div class="tab">HOME</div>237      <div class="tab">MASSIMC</div>238      <div class="results">2 RESULTS</div>239    </div>240 241    <!-- Search bar -->242    <div class="search-bar">243      <div class="search-text">YOGA PANTS</div>244      <svg class="search-clear" viewBox="0 0 24 24">245        <circle cx="12" cy="12" r="10" fill="none" stroke="#d3d3d3" stroke-width="2"/>246        <path d="M8 8 L16 16 M16 8 L8 16" stroke="#bfbfbf" stroke-width="2"/>247      </svg>248    </div>249 250    <!-- Filters -->251    <div class="filters">252      <div class="filter-btn">SIZES</div>253      <div class="filter-btn">COLOR</div>254    </div>255 256    <!-- Content area with spinner -->257    <div class="content">258      <div class="spinner"></div>259    </div>260 261    <!-- Bottom navigation -->262    <div class="bottom-nav">263      <div class="nav-item active">HOME</div>264      <div class="nav-item">MENU</div>265      <div class="nav-item">ACCOUNT</div>266      <div class="nav-item">BASKET (0)</div>267    </div>268  </div>269</body>270</html>