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 - Milk</title>7<style>8  body {9    margin: 0;10    padding: 0;11    background: transparent;12    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;13  }14  #render-target {15    width: 1080px;16    height: 2400px;17    position: relative;18    overflow: hidden;19    background: #ffffff;20  }21 22  /* Status bar */23  .status-bar {24    position: absolute;25    top: 0;26    left: 0;27    width: 1080px;28    height: 120px;29    display: flex;30    align-items: center;31    justify-content: space-between;32    padding: 0 40px;33    color: #2e2e2e;34    font-weight: 500;35    font-size: 38px;36  }37  .status-icons {38    display: flex;39    align-items: center;40    gap: 26px;41  }42  .icon {43    display: inline-flex;44    align-items: center;45    justify-content: center;46  }47 48  /* Header controls */49  .back-btn {50    position: absolute;51    top: 150px;52    left: 40px;53    width: 72px;54    height: 72px;55    color: #66161d; /* burgundy */56  }57  .cart-btn {58    position: absolute;59    top: 250px;60    right: 80px;61    width: 72px;62    height: 72px;63    color: #66161d;64  }65 66  /* Search bar */67  .search-bar {68    position: absolute;69    top: 240px;70    left: 60px;71    width: 960px;72    height: 140px;73    border: 4px solid #2f2f2f;74    border-radius: 90px;75    display: flex;76    align-items: center;77    padding: 0 40px;78    box-sizing: border-box;79  }80  .search-left {81    display: flex;82    align-items: center;83    gap: 26px;84    flex: 1;85  }86  .search-text {87    font-size: 48px;88    color: #2e2e2e;89  }90  .barcode-btn {91    width: 110px;92    height: 110px;93    border: 3px solid #2f2f2f;94    border-radius: 60px;95    display: flex;96    align-items: center;97    justify-content: center;98    color: #2f2f2f;99  }100 101  /* Segmented control */102  .segmented-wrap {103    position: absolute;104    top: 430px;105    left: 120px;106    height: 130px;107    width: 520px;108    background: #ffffff;109    border: 2px solid #eeeaea;110    border-radius: 80px;111    box-shadow: 0 2px 0 rgba(0,0,0,0.02) inset;112    display: flex;113    align-items: center;114    padding: 10px;115    box-sizing: border-box;116    gap: 10px;117  }118  .segment {119    height: 110px;120    border-radius: 70px;121    padding: 0 42px;122    display: flex;123    align-items: center;124    justify-content: center;125    font-size: 44px;126    font-weight: 600;127    color: #8e8e8e;128  }129  .segment.active {130    background: #5b1218;131    color: #ffffff;132    box-shadow: 0 4px 12px rgba(91,18,24,0.25);133  }134 135  /* Refine */136  .refine {137    position: absolute;138    top: 460px;139    right: 100px;140    display: flex;141    align-items: center;142    gap: 20px;143    color: #5b1218;144    font-size: 48px;145    font-weight: 500;146  }147  .refine .icon {148    color: #5b1218;149  }150 151  /* Spinner */152  .spinner {153    position: absolute;154    top: 1200px;155    left: 540px;156    width: 120px;157    height: 120px;158    transform: translate(-50%, -50%);159  }160  .spinner-dot {161    position: absolute;162    width: 16px;163    height: 16px;164    background: #d9d4d4;165    border-radius: 50%;166    transform-origin: 60px 60px;167    animation: spin 1.2s linear infinite;168  }169  .spinner-dot:nth-child(1){ transform: rotate(0deg) translate(0, -48px); background:#5b1218; animation-delay: -1.1s;}170  .spinner-dot:nth-child(2){ transform: rotate(30deg) translate(0, -48px); animation-delay: -1.0s;}171  .spinner-dot:nth-child(3){ transform: rotate(60deg) translate(0, -48px); animation-delay: -0.9s;}172  .spinner-dot:nth-child(4){ transform: rotate(90deg) translate(0, -48px); animation-delay: -0.8s;}173  .spinner-dot:nth-child(5){ transform: rotate(120deg) translate(0, -48px); animation-delay: -0.7s;}174  .spinner-dot:nth-child(6){ transform: rotate(150deg) translate(0, -48px); animation-delay: -0.6s;}175  .spinner-dot:nth-child(7){ transform: rotate(180deg) translate(0, -48px); animation-delay: -0.5s;}176  .spinner-dot:nth-child(8){ transform: rotate(210deg) translate(0, -48px); animation-delay: -0.4s;}177  .spinner-dot:nth-child(9){ transform: rotate(240deg) translate(0, -48px); animation-delay: -0.3s;}178  .spinner-dot:nth-child(10){ transform: rotate(270deg) translate(0, -48px); animation-delay: -0.2s;}179  .spinner-dot:nth-child(11){ transform: rotate(300deg) translate(0, -48px); animation-delay: -0.1s;}180  .spinner-dot:nth-child(12){ transform: rotate(330deg) translate(0, -48px); animation-delay: 0s;}181  @keyframes spin {182    0% { opacity: 1; }183    50% { opacity: 0.3; }184    100% { opacity: 1; }185  }186 187  /* Bottom gesture area */188  .bottom-bar {189    position: absolute;190    bottom: 0;191    left: 0;192    width: 1080px;193    height: 120px;194    background: #000000;195    display: flex;196    align-items: center;197    justify-content: center;198  }199  .home-indicator {200    width: 320px;201    height: 14px;202    background: #dcdcdc;203    border-radius: 10px;204  }205</style>206</head>207<body>208<div id="render-target">209 210  <!-- Status bar -->211  <div class="status-bar">212    <div>11:20</div>213    <div class="status-icons">214      <!-- wifi -->215      <svg class="icon" width="42" height="42" viewBox="0 0 24 24">216        <path d="M12 18.5c.9 0 1.5.7 1.5 1.5s-.6 1.5-1.5 1.5-1.5-.7-1.5-1.5.6-1.5 1.5-1.5zm-4.9-3.7c3.3-3.3 8.5-3.3 11.8 0l-1.6 1.6c-2.4-2.4-6.3-2.4-8.7 0l-1.5-1.6zm-3.7-3.6c5.3-5.3 13.9-5.3 19.2 0l-1.6 1.6c-4.4-4.4-11.6-4.4-16 0l-1.6-1.6z" fill="#4c4c4c"/>217      </svg>218      <!-- battery -->219      <svg class="icon" width="58" height="42" viewBox="0 0 28 16">220        <rect x="1" y="3" width="22" height="10" rx="2" ry="2" fill="none" stroke="#4c4c4c" stroke-width="2"/>221        <rect x="3" y="5" width="18" height="6" rx="1" ry="1" fill="#4c4c4c"/>222        <rect x="24" y="6" width="3" height="4" rx="1" ry="1" fill="#4c4c4c"/>223      </svg>224    </div>225  </div>226 227  <!-- Back arrow -->228  <svg class="back-btn" viewBox="0 0 48 48">229    <path d="M28 8 L12 24 L28 40" stroke="currentColor" stroke-width="4" fill="none" stroke-linecap="round" stroke-linejoin="round"/>230  </svg>231 232  <!-- Cart icon -->233  <svg class="cart-btn" viewBox="0 0 48 48">234    <path d="M6 14h6l4 18h18l4-14H16" fill="none" stroke="currentColor" stroke-width="3" stroke-linecap="round" stroke-linejoin="round"/>235    <circle cx="20" cy="40" r="3" fill="currentColor"/>236    <circle cx="36" cy="40" r="3" fill="currentColor"/>237  </svg>238 239  <!-- Search bar -->240  <div class="search-bar">241    <div class="search-left">242      <!-- search icon -->243      <svg class="icon" width="56" height="56" viewBox="0 0 24 24">244        <circle cx="11" cy="11" r="7" fill="none" stroke="#6f6f6f" stroke-width="2"/>245        <path d="M21 21l-4.2-4.2" stroke="#6f6f6f" stroke-width="2" stroke-linecap="round"/>246      </svg>247      <div class="search-text">milk</div>248    </div>249    <div class="barcode-btn">250      <svg class="icon" width="70" height="70" viewBox="0 0 24 24">251        <rect x="3" y="3" width="18" height="18" rx="3" ry="3" fill="none" stroke="#2f2f2f" stroke-width="2"/>252        <path d="M6 7v10M9 7v10M12 7v10M15 7v10M18 7v10" stroke="#2f2f2f" stroke-width="1.6"/>253      </svg>254    </div>255  </div>256 257  <!-- Segmented control -->258  <div class="segmented-wrap">259    <div class="segment active">Products</div>260    <div class="segment">Deals</div>261  </div>262 263  <!-- Refine -->264  <div class="refine">265    <svg class="icon" width="64" height="64" viewBox="0 0 24 24">266      <path d="M4 7h14M4 12h10M4 17h14" stroke="currentColor" stroke-width="2" stroke-linecap="round"/>267      <circle cx="18" cy="7" r="2" fill="currentColor"/>268      <circle cx="14" cy="12" r="2" fill="currentColor"/>269      <circle cx="8" cy="17" r="2" fill="currentColor"/>270    </svg>271    <span>Refine</span>272  </div>273 274  <!-- Loading spinner -->275  <div class="spinner">276    <div class="spinner-dot"></div>277    <div class="spinner-dot"></div>278    <div class="spinner-dot"></div>279    <div class="spinner-dot"></div>280    <div class="spinner-dot"></div>281    <div class="spinner-dot"></div>282    <div class="spinner-dot"></div>283    <div class="spinner-dot"></div>284    <div class="spinner-dot"></div>285    <div class="spinner-dot"></div>286    <div class="spinner-dot"></div>287    <div class="spinner-dot"></div>288  </div>289 290  <!-- Bottom gesture area -->291  <div class="bottom-bar">292    <div class="home-indicator"></div>293  </div>294</div>295</body>296</html>