GD-ML/AndroidCode

1<!DOCTYPE html>2<html lang="en">3<head>4<meta charset="UTF-8">5<title>Food Search UI Mock</title>6<style>7  body {8    margin: 0;9    padding: 0;10    background: transparent;11    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen, Ubuntu, Cantarell, "Helvetica Neue", Arial, sans-serif;12  }13  #render-target {14    width: 1080px;15    height: 2400px;16    position: relative;17    overflow: hidden;18    background: #FFFFFF;19  }20 21  /* Status bar */22  .status-bar {23    position: absolute;24    top: 0;25    left: 0;26    width: 1080px;27    height: 120px;28    background: #fff;29    display: flex;30    align-items: center;31    justify-content: space-between;32    padding: 0 40px;33    box-sizing: border-box;34    color: #3d3a53;35    font-size: 40px;36  }37  .status-icons {38    display: flex;39    gap: 24px;40    align-items: center;41  }42  .dot {43    width: 14px;44    height: 14px;45    background: #6f6a86;46    border-radius: 50%;47    margin: 0 10px;48  }49 50  /* Search bar group */51  .search-wrap {52    position: absolute;53    top: 160px;54    left: 40px;55    width: 1000px;56    height: 120px;57    border: 2px solid #E6E1F7;58    border-radius: 60px;59    box-shadow: 0 2px 0 rgba(163, 156, 199, 0.2) inset;60    display: flex;61    overflow: hidden;62    background: #fff;63  }64  .search-field, .loc-field {65    display: flex;66    align-items: center;67    padding: 0 32px;68    box-sizing: border-box;69    color: #3f3d56;70    font-size: 38px;71  }72  .search-field {73    width: 60%;74    gap: 24px;75  }76  .loc-field {77    width: 40%;78    gap: 24px;79    border-left: 1px solid #EEEAF8;80  }81  .muted {82    color: #6f6a86;83  }84 85  /* Chips row */86  .chips {87    position: absolute;88    top: 320px;89    left: 40px;90    width: 1000px;91    display: flex;92    gap: 22px;93    align-items: center;94  }95  .chip {96    height: 100px;97    padding: 0 36px;98    border-radius: 50px;99    border: 2px solid #4B4764;100    color: #4B4764;101    background: #fff;102    display: inline-flex;103    align-items: center;104    gap: 18px;105    font-size: 40px;106    box-sizing: border-box;107  }108  .chip.active {109    background: #4B4764;110    color: #fff;111    border-color: #4B4764;112  }113  .chip svg {114    width: 48px;115    height: 48px;116  }117 118  /* Cards */119  .card {120    position: absolute;121    left: 40px;122    width: 1000px;123    border-radius: 34px;124    background: #fff;125    box-shadow: 0 10px 16px rgba(138, 124, 185, 0.2);126    overflow: hidden;127  }128  .card .img {129    height: 480px;130    background: #EDEDEF;131  }132  .card .info {133    background: #fff;134    padding: 32px;135  }136  .skeleton {137    height: 60px;138    background: #EDEDEF;139    border-radius: 16px;140    margin-bottom: 24px;141  }142  .skeleton.short {143    width: 70%;144  }145  .skeleton.tiny {146    width: 55%;147    height: 50px;148  }149 150  /* Bottom nav */151  .bottom-nav {152    position: absolute;153    bottom: 90px;154    left: 0;155    width: 1080px;156    height: 210px;157    background: #ffffff;158    border-top: 2px solid #EEEAF8;159    display: flex;160    align-items: center;161    justify-content: space-around;162    box-shadow: 0 -6px 10px rgba(158, 146, 205, 0.08);163  }164  .nav-item {165    width: 240px;166    height: 160px;167    display: flex;168    flex-direction: column;169    align-items: center;170    justify-content: center;171    color: #6A667F;172    font-size: 36px;173    gap: 14px;174  }175  .nav-item svg {176    width: 64px;177    height: 64px;178  }179  .nav-item.active {180    color: #FF7A00;181  }182  .nav-item.active svg path {183    fill: #FF7A00;184  }185 186  /* Home indicator */187  .home-indicator {188    position: absolute;189    bottom: 24px;190    left: 50%;191    transform: translateX(-50%);192    width: 300px;193    height: 16px;194    background: #0a0a0a;195    border-radius: 10px;196    opacity: 0.8;197  }198</style>199</head>200<body>201<div id="render-target">202 203  <!-- Status Bar -->204  <div class="status-bar">205    <div>11:15</div>206    <div class="status-icons">207      <div style="width:44px;height:44px;background:#6f6a86;border-radius:8px;"></div>208      <div style="width:44px;height:44px;background:#6f6a86;border-radius:8px;"></div>209      <div style="width:44px;height:44px;background:#6f6a86;border-radius:8px;"></div>210      <span class="dot"></span>211      <svg viewBox="0 0 24 24" width="44" height="44"><path d="M12 3l8 6v8c0 1.1-.9 2-2 2H6c-1.1 0-2-.9-2-2V9l8-6z" fill="#6f6a86"/></svg>212      <svg viewBox="0 0 24 24" width="44" height="44"><path d="M5 20h14V8H5v12zm10-15V3H9v2H5v2h14V5h-4z" fill="#6f6a86"/></svg>213    </div>214  </div>215 216  <!-- Search bar -->217  <div class="search-wrap">218    <div class="search-field">219      <!-- Back arrow -->220      <svg viewBox="0 0 24 24">221        <path d="M15 6l-6 6 6 6" stroke="#6A667F" stroke-width="2" fill="none" stroke-linecap="round" stroke-linejoin="round"></path>222      </svg>223      <span class="muted">Papa johns resta...</span>224    </div>225    <div class="loc-field">226      <!-- Location pin -->227      <svg viewBox="0 0 24 24">228        <path d="M12 2c-3.3 0-6 2.7-6 6 0 4.5 6 12 6 12s6-7.5 6-12c0-3.3-2.7-6-6-6z" fill="#6A667F"></path>229        <circle cx="12" cy="8" r="2.5" fill="#ffffff"></circle>230      </svg>231      <span class="muted">Seattle, WA 98101</span>232    </div>233  </div>234 235  <!-- Chips row -->236  <div class="chips">237    <div class="chip active">238      <!-- Scooter icon -->239      <svg viewBox="0 0 24 24">240        <circle cx="6" cy="18" r="2.5" fill="#fff"></circle>241        <circle cx="18" cy="18" r="2.5" fill="#fff"></circle>242        <path d="M5 16h6l2-5h4l2 3" stroke="#fff" stroke-width="2" fill="none" stroke-linecap="round" stroke-linejoin="round"></path>243      </svg>244      <span>Delivery</span>245    </div>246    <div class="chip">247      <!-- Walk icon -->248      <svg viewBox="0 0 24 24">249        <circle cx="12" cy="5" r="2.2" fill="#4B4764"></circle>250        <path d="M10 8l-2 4m6-2l-2 4m-3 6l2-6m5 6l-2-6" stroke="#4B4764" stroke-width="2" fill="none" stroke-linecap="round"></path>251      </svg>252      <span>Pickup</span>253    </div>254    <div class="chip active">255      <span>Restaurants</span>256      <svg viewBox="0 0 24 24">257        <path d="M6 9l6 6 6-6" fill="none" stroke="#fff" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"></path>258      </svg>259    </div>260    <div class="chip" style="padding-right:28px;">261      <!-- Filter/Sort icon -->262      <svg viewBox="0 0 24 24">263        <path d="M4 6h12" stroke="#4B4764" stroke-width="2" stroke-linecap="round"></path>264        <circle cx="18" cy="6" r="2" fill="#4B4764"></circle>265        <path d="M4 12h8" stroke="#4B4764" stroke-width="2" stroke-linecap="round"></path>266        <circle cx="16" cy="12" r="2" fill="#4B4764"></circle>267        <path d="M4 18h10" stroke="#4B4764" stroke-width="2" stroke-linecap="round"></path>268        <circle cx="16" cy="18" r="2" fill="#4B4764"></circle>269      </svg>270      <span>Sort</span>271    </div>272  </div>273 274  <!-- Cards -->275  <div class="card" style="top: 460px; height: 700px;">276    <div class="img">277      <div style="width:100%;height:100%;display:flex;align-items:center;justify-content:center;color:#757575;border:1px solid #BDBDBD;box-sizing:border-box;">278        [IMG: Restaurant banner]279      </div>280    </div>281    <div class="info">282      <div class="skeleton short"></div>283      <div class="skeleton tiny"></div>284    </div>285  </div>286 287  <div class="card" style="top: 1200px; height: 700px;">288    <div class="img">289      <div style="width:100%;height:100%;display:flex;align-items:center;justify-content:center;color:#757575;border:1px solid #BDBDBD;box-sizing:border-box;">290        [IMG: Restaurant banner]291      </div>292    </div>293    <div class="info">294      <div class="skeleton short"></div>295      <div class="skeleton tiny" style="width:50%;"></div>296    </div>297  </div>298 299  <div class="card" style="top: 1940px; height: 360px;">300    <div class="img" style="height: 360px;">301      <div style="width:100%;height:100%;display:flex;align-items:center;justify-content:center;color:#757575;border:1px solid #BDBDBD;box-sizing:border-box;">302        [IMG: Restaurant banner]303      </div>304    </div>305  </div>306 307  <!-- Bottom Navigation -->308  <div class="bottom-nav">309    <div class="nav-item active">310      <svg viewBox="0 0 24 24">311        <path d="M12 3l9 8v10a1 1 0 0 1-1 1h-5v-6H9v6H4a1 1 0 0 1-1-1V11l9-8z" fill="#FF7A00"></path>312      </svg>313      <div>Home</div>314    </div>315    <div class="nav-item">316      <svg viewBox="0 0 24 24">317        <path d="M16 3l3 5h-6l3-5zM4 9h16v12H4V9zm5 3h6v6H9v-6z" fill="#6A667F"></path>318      </svg>319      <div>Rewards</div>320    </div>321    <div class="nav-item">322      <svg viewBox="0 0 24 24">323        <path d="M6 2h12v20H6z" fill="#6A667F"></path>324        <path d="M9 6h6M9 10h6M9 14h6" stroke="#fff" stroke-width="2" stroke-linecap="round"></path>325      </svg>326      <div>Orders</div>327    </div>328    <div class="nav-item">329      <svg viewBox="0 0 24 24">330        <circle cx="12" cy="7" r="4" fill="#6A667F"></circle>331        <path d="M4 22c0-4.4 3.6-8 8-8s8 3.6 8 8" fill="#6A667F"></path>332      </svg>333      <div>Account</div>334    </div>335  </div>336 337  <div class="home-indicator"></div>338</div>339</body>340</html>