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>Recipe Search UI</title>7<style>8  body { margin: 0; padding: 0; background: transparent; font-family: system-ui, -apple-system, Segoe UI, Roboto, "Helvetica Neue", Arial; }9  #render-target {10    width: 1080px;11    height: 2400px;12    position: relative;13    overflow: hidden;14    background: #F6F3EC;15    border-radius: 18px;16    box-shadow: 0 8px 20px rgba(0,0,0,0.08);17    color: #2C2C2C;18  }19 20  /* Status bar */21  .status-bar {22    height: 140px;23    background: #FFFFFF;24    display: flex;25    align-items: center;26    padding: 0 40px;27    box-sizing: border-box;28  }29  .status-left { font-weight: 600; font-size: 42px; color: #333; }30  .status-icons {31    margin-left: 24px;32    display: flex;33    align-items: center;34    gap: 32px;35  }36  .status-right {37    margin-left: auto;38    display: flex;39    align-items: center;40    gap: 28px;41  }42  .icon { width: 40px; height: 40px; }43  .icon path { fill: #6E6E6E; }44 45  /* Search bar */46  .search-wrap {47    padding: 28px 36px 22px 36px;48    background: #FFFFFF;49    box-shadow: 0 10px 18px rgba(0,0,0,0.06);50  }51  .search-bar {52    height: 128px;53    border-radius: 28px;54    background: #EDECEB;55    display: flex;56    align-items: center;57    padding: 0 36px;58    box-sizing: border-box;59    color: #8A8A8A;60    font-size: 40px;61  }62  .search-bar svg { margin-right: 22px; }63  .search-placeholder { color: #8E8E8E; }64 65  /* Sections */66  .content {67    padding: 38px 36px 260px 36px;68    box-sizing: border-box;69  }70  .section-title {71    font-size: 60px;72    font-weight: 700;73    margin: 22px 0 6px 0;74    color: #3A3A3A;75  }76  .section-sub {77    font-size: 36px;78    color: #8A8A8A;79    margin-bottom: 24px;80  }81 82  /* History item */83  .history-card {84    display: flex;85    align-items: center;86    background: #FFFFFF;87    border-radius: 26px;88    box-shadow: 0 6px 14px rgba(0,0,0,0.08);89    padding: 20px;90    box-sizing: border-box;91    gap: 24px;92  }93  .thumb {94    width: 180px;95    height: 130px;96    background: #E0E0E0;97    border: 1px solid #BDBDBD;98    border-radius: 18px;99    display: flex;100    align-items: center;101    justify-content: center;102    color: #757575;103    font-size: 32px;104  }105  .history-info { flex: 1; }106  .history-info .title { font-size: 46px; font-weight: 700; margin: 2px 0; }107  .history-info .time { font-size: 34px; color: #8A8A8A; }108  .chevron {109    width: 56px; height: 56px;110  }111  .chevron path { fill: #8A8A8A; }112 113  /* Popular grid */114  .grid-title { margin-top: 44px; }115  .card-grid {116    display: flex;117    flex-wrap: wrap;118    gap: 30px;119    margin-top: 16px;120  }121  .img-card {122    position: relative;123    width: calc((100% - 30px) / 2);124    height: 260px;125    background: #E0E0E0;126    border: 1px solid #BDBDBD;127    border-radius: 22px;128    overflow: hidden;129    box-shadow: 0 4px 10px rgba(0,0,0,0.08);130  }131  .img-card .img-label {132    position: absolute;133    left: 24px;134    bottom: 24px;135    font-size: 42px;136    font-weight: 700;137    color: #FFFFFF;138    text-shadow: 0 2px 6px rgba(0,0,0,0.35);139  }140  .img-card .img-desc {141    position: absolute;142    inset: 0;143    display: flex;144    align-items: center;145    justify-content: center;146    color: #757575;147    font-size: 30px;148    pointer-events: none;149  }150  .img-card::after {151    content: "";152    position: absolute;153    left: 0; right: 0; bottom: 0;154    height: 55%;155    background: linear-gradient(to top, rgba(0,0,0,0.35), rgba(0,0,0,0));156    pointer-events: none;157  }158 159  /* Bottom nav */160  .bottom-nav {161    position: absolute;162    bottom: 40px;163    left: 0; right: 0;164    height: 160px;165    background: #FFFFFF;166    border-top: 1px solid #E0E0E0;167    display: flex;168    align-items: center;169    justify-content: space-around;170    padding: 0 40px;171    box-sizing: border-box;172  }173  .nav-item { width: 84px; height: 84px; display: flex; align-items: center; justify-content: center; border-radius: 20px; }174  .nav-item.active { color: #F39C3A; }175  .nav-item svg { width: 64px; height: 64px; }176  .nav-item path { fill: #8A8A8A; }177  .nav-item.active path { fill: #F39C3A; }178  .bookmark-wrap { position: relative; }179  .badge {180    position: absolute;181    right: -2px; top: -2px;182    width: 22px; height: 22px;183    background: #F2483B; border-radius: 50%;184  }185  .avatar {186    width: 72px; height: 72px;187    border-radius: 50%;188    background: #BCA693;189    color: #FFFFFF;190    display: flex; align-items: center; justify-content: center;191    font-weight: 700; font-size: 40px;192  }193 194  /* Gesture bar */195  .gesture {196    position: absolute;197    bottom: 8px;198    left: 50%;199    transform: translateX(-50%);200    width: 360px; height: 14px;201    background: #000000;202    border-radius: 8px;203    opacity: 0.9;204  }205</style>206</head>207<body>208<div id="render-target">209 210  <!-- Status bar -->211  <div class="status-bar">212    <div class="status-left">11:10</div>213    <div class="status-icons">214      <svg class="icon" viewBox="0 0 24 24"><path d="M3 4h18v14H7l-4 4V4z"/></svg>215      <svg class="icon" viewBox="0 0 24 24"><path d="M12 2a7 7 0 0 0-7 7v5l-2 2v1h18v-1l-2-2V9a7 7 0 0 0-7-7zm0 20a2 2 0 0 0 2-2H10a2 2 0 0 0 2 2z"/></svg>216      <svg class="icon" viewBox="0 0 24 24"><path d="M3 6h18v2H3zm3 4h12v2H6zm-2 4h16v2H4z"/></svg>217      <svg class="icon" viewBox="0 0 24 24"><path d="M12 2v20M2 12h20" /></svg>218    </div>219    <div class="status-right">220      <svg class="icon" viewBox="0 0 24 24"><path d="M12 2l8 4v8c0 4.418-3.582 8-8 8S4 18.418 4 14V6l8-4z"/></svg>221      <svg class="icon" viewBox="0 0 24 24"><path d="M7 2h10v20H7z"/></svg>222    </div>223  </div>224 225  <!-- Search bar -->226  <div class="search-wrap">227    <div class="search-bar">228      <svg width="54" height="54" viewBox="0 0 24 24"><path fill="#8A8A8A" d="M15.5 14h-.79l-.28-.27A6.471 6.471 0 0 0 16 9.5 6.5 6.5 0 1 0 9.5 16c1.61 0 3.09-.59 4.23-1.57l.27.28v.79l5 5 1.5-1.5-5-5zm-6 0C7.01 14 5 11.99 5 9.5S7.01 5 9.5 5 14 7.01 14 9.5 11.99 14 9.5 14z"/></svg>229      <span class="search-placeholder">Type ingredients...</span>230    </div>231  </div>232 233  <!-- Content -->234  <div class="content">235    <div class="section-title">Your history</div>236    <div class="section-sub">Your recent searches</div>237 238    <div class="history-card">239      <div class="thumb">[IMG: Pizza dish]</div>240      <div class="history-info">241        <div class="title">Pizza</div>242        <div class="time">Today</div>243      </div>244      <svg class="chevron" viewBox="0 0 24 24"><path d="M9 6l6 6-6 6"/></svg>245    </div>246 247    <div class="section-title grid-title">Today’s popular searches</div>248 249    <div class="card-grid">250      <div class="img-card">251        <div class="img-desc">[IMG: Healthy diet food]</div>252        <div class="img-label">Healthy diet</div>253      </div>254      <div class="img-card">255        <div class="img-desc">[IMG: Street style food]</div>256        <div class="img-label">Street style</div>257      </div>258 259      <div class="img-card">260        <div class="img-desc">[IMG: Bhindi]</div>261        <div class="img-label">Bhindi</div>262      </div>263      <div class="img-card">264        <div class="img-desc">[IMG: Salad bowl]</div>265        <div class="img-label">Salad</div>266      </div>267 268      <div class="img-card">269        <div class="img-desc">[IMG: Sandwich]</div>270        <div class="img-label">Sandwich</div>271      </div>272      <div class="img-card">273        <div class="img-desc">[IMG: Continental dessert]</div>274        <div class="img-label">Continental dessert</div>275      </div>276 277      <div class="img-card">278        <div class="img-desc">[IMG: Paneer butter masala]</div>279        <div class="img-label">Paneer butter masala</div>280      </div>281      <div class="img-card">282        <div class="img-desc">[IMG: Aloo paratha]</div>283        <div class="img-label">Aloo paratha</div>284      </div>285 286      <div class="img-card">287        <div class="img-desc">[IMG: Chicken biryani]</div>288        <div class="img-label">Chicken biryani</div>289      </div>290      <div class="img-card">291        <div class="img-desc">[IMG: Chutney varieties]</div>292        <div class="img-label">Chutney</div>293      </div>294    </div>295  </div>296 297  <!-- Bottom navigation -->298  <div class="bottom-nav">299    <div class="nav-item">300      <svg viewBox="0 0 24 24"><path d="M12 3l9 8v9h-6v-6H9v6H3v-9l9-8z"/></svg>301    </div>302    <div class="nav-item active">303      <svg viewBox="0 0 24 24"><path d="M15.5 14h-.79l-.28-.27A6.471 6.471 0 0 0 16 9.5 6.5 6.5 0 1 0 9.5 16c1.61 0 3.09-.59 4.23-1.57l.27.28v.79l5 5 1.5-1.5-5-5zm-6 0C7.01 14 5 11.99 5 9.5S7.01 5 9.5 5 14 7.01 14 9.5 11.99 14 9.5 14z"/></svg>304    </div>305    <div class="nav-item">306      <svg viewBox="0 0 24 24"><path d="M11 11V5h2v6h6v2h-6v6h-2v-6H5v-2z"/></svg>307    </div>308    <div class="nav-item bookmark-wrap">309      <svg viewBox="0 0 24 24"><path d="M6 2h12v20l-6-4-6 4z"/></svg>310      <span class="badge"></span>311    </div>312    <div class="nav-item">313      <div class="avatar">C</div>314    </div>315  </div>316 317  <!-- Gesture bar -->318  <div class="gesture"></div>319</div>320</body>321</html>