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 Screen</title>7<style>8  body { margin: 0; padding: 0; background: transparent; font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; }9  #render-target {10    width: 1080px;11    height: 2400px;12    position: relative;13    overflow: hidden;14    background: #000;15    color: #fff;16  }17 18  /* Top status bar */19  .status-bar {20    position: absolute;21    top: 28px;22    left: 36px;23    right: 36px;24    height: 56px;25    display: flex;26    align-items: center;27    justify-content: space-between;28    color: #fff;29    opacity: 0.9;30    font-size: 32px;31  }32  .status-left { font-weight: 600; }33  .status-right {34    display: flex;35    gap: 22px;36    align-items: center;37  }38  .pill-icon {39    width: 56px;40    height: 36px;41    border-radius: 8px;42    border: 1px solid #444;43    display: flex;44    align-items: center;45    justify-content: center;46    font-size: 22px;47    color: #ddd;48  }49  .status-icon svg { width: 42px; height: 42px; fill: none; stroke: #fff; stroke-width: 3; }50 51  /* Title */52  .page-title {53    position: absolute;54    top: 160px;55    left: 56px;56    font-size: 96px;57    font-weight: 800;58    letter-spacing: -0.5px;59  }60 61  /* Search input */62  .search-box {63    position: absolute;64    top: 310px;65    left: 56px;66    width: calc(100% - 112px);67    height: 120px;68    border-radius: 26px;69    border: 2px solid #6c6c6c;70    display: flex;71    align-items: center;72    padding: 0 28px;73    gap: 24px;74    color: #bfbfbf;75    box-sizing: border-box;76  }77  .search-box svg { width: 48px; height: 48px; stroke: #bfbfbf; stroke-width: 5; }78  .search-placeholder { font-size: 42px; color: #bfbfbf; }79 80  /* Web card with button */81  .web-card {82    position: absolute;83    top: 468px;84    left: 56px;85    width: calc(100% - 112px);86    height: 160px;87    border-radius: 32px;88    background: #1f1f1f;89    display: flex;90    align-items: center;91    justify-content: space-between;92    padding: 0 32px;93    box-sizing: border-box;94  }95  .web-card .label { font-size: 42px; color: #eaeaea; }96  .btn-cookbook {97    background: #E0B54E;98    color: #121212;99    font-weight: 700;100    font-size: 34px;101    padding: 22px 36px;102    border-radius: 40px;103    border: 2px solid rgba(0,0,0,0.2);104  }105 106  /* Category grid */107  .grid {108    position: absolute;109    top: 662px;110    left: 56px;111    width: calc(100% - 112px);112    display: grid;113    grid-template-columns: repeat(3, 1fr);114    gap: 36px 36px;115  }116  .card {117    height: 360px;118    background: #1c1c1c;119    border-radius: 36px;120    box-shadow: 0 2px 0 #121212 inset;121    padding: 36px;122    box-sizing: border-box;123    display: flex;124    flex-direction: column;125    justify-content: space-between;126  }127  .img-ph {128    width: 100%;129    height: 210px;130    background: #E0E0E0;131    border: 1px solid #BDBDBD;132    border-radius: 16px;133    display: flex;134    align-items: center;135    justify-content: center;136    color: #757575;137    font-size: 34px;138  }139  .card-label {140    font-size: 40px;141    color: #eaeaea;142    text-align: left;143  }144 145  /* List rows */146  .list-section {147    position: absolute;148    top: 1290px;149    left: 56px;150    width: calc(100% - 112px);151  }152  .list-row {153    height: 120px;154    display: flex;155    align-items: center;156    justify-content: space-between;157    font-size: 44px;158    color: #fff;159  }160  .divider {161    height: 1px;162    background: #2a2a2a;163    margin: 0;164  }165  .chevron {166    width: 38px;167    height: 38px;168  }169  .chevron path { stroke: #d0d0d0; stroke-width: 6; fill: none; }170 171  /* Home indicator */172  .home-indicator {173    position: absolute;174    bottom: 230px;175    left: 50%;176    transform: translateX(-50%);177    width: 220px;178    height: 12px;179    background: #e7e7e7;180    border-radius: 12px;181    opacity: 0.9;182  }183 184  /* Bottom navigation */185  .bottom-nav {186    position: absolute;187    bottom: 0;188    left: 0;189    width: 100%;190    height: 200px;191    background: #1a1a1a;192    border-top: 1px solid #2a2a2a;193    display: flex;194    justify-content: space-around;195    align-items: center;196    padding-bottom: 12px;197    box-sizing: border-box;198  }199  .nav-item {200    width: 240px;201    display: flex;202    flex-direction: column;203    align-items: center;204    gap: 14px;205    color: #9a9a9a;206  }207  .nav-item .label { font-size: 34px; }208  .nav-item svg { width: 64px; height: 64px; stroke: #9a9a9a; stroke-width: 4; fill: none; }209  .nav-item.active { color: #e36a2a; }210  .nav-item.active svg { stroke: #e36a2a; }211</style>212</head>213<body>214<div id="render-target">215 216  <!-- Status Bar -->217  <div class="status-bar">218    <div class="status-left">11:03</div>219    <div class="status-right">220      <div class="pill-icon">LR</div>221      <div class="pill-icon">▤</div>222      <div class="pill-icon">▶</div>223      <div class="status-icon">224        <svg viewBox="0 0 24 24">225          <path d="M3 18c2-4 4-6 9-6s7 2 9 6" />226          <circle cx="3" cy="18" r="1.5" fill="#fff" stroke="none"/>227        </svg>228      </div>229      <div class="status-icon">230        <svg viewBox="0 0 28 24">231          <rect x="2" y="4" width="18" height="16" rx="3" />232          <rect x="21" y="8" width="4" height="8" rx="1" />233        </svg>234      </div>235    </div>236  </div>237 238  <!-- Title -->239  <div class="page-title">Search</div>240 241  <!-- Search box -->242  <div class="search-box">243    <svg viewBox="0 0 24 24">244      <circle cx="10" cy="10" r="7"></circle>245      <line x1="15.5" y1="15.5" x2="22" y2="22"></line>246    </svg>247    <div class="search-placeholder">Hungry?</div>248  </div>249 250  <!-- Web suggestion card -->251  <div class="web-card">252    <div class="label">Find recipes on the web</div>253    <div class="btn-cookbook">COOKBOOK+</div>254  </div>255 256  <!-- Category grid -->257  <div class="grid">258    <div class="card">259      <div class="img-ph">[IMG: Pasta Illustration]</div>260      <div class="card-label">Pasta</div>261    </div>262    <div class="card">263      <div class="img-ph">[IMG: Asian Rice Bowl]</div>264      <div class="card-label">Asian</div>265    </div>266    <div class="card">267      <div class="img-ph">[IMG: Burger Main]</div>268      <div class="card-label">Main</div>269    </div>270    <div class="card">271      <div class="img-ph">[IMG: Quick Toast]</div>272      <div class="card-label">Quick</div>273    </div>274    <div class="card">275      <div class="img-ph">[IMG: Meatless Salad]</div>276      <div class="card-label">Meatless</div>277    </div>278    <div class="card">279      <div class="img-ph">[IMG: Dessert Cake]</div>280      <div class="card-label">Dessert</div>281    </div>282  </div>283 284  <!-- Lists -->285  <div class="list-section">286    <div class="list-row">287      <div>All recipes</div>288      <svg class="chevron" viewBox="0 0 24 24">289        <path d="M8 4l8 8-8 8" />290      </svg>291    </div>292    <div class="divider"></div>293    <div class="list-row">294      <div>All stories</div>295      <svg class="chevron" viewBox="0 0 24 24">296        <path d="M8 4l8 8-8 8" />297      </svg>298    </div>299  </div>300 301  <!-- Home indicator -->302  <div class="home-indicator"></div>303 304  <!-- Bottom Navigation -->305  <div class="bottom-nav">306    <div class="nav-item">307      <svg viewBox="0 0 24 24">308        <path d="M3 10l9-7 9 7" />309        <path d="M5 10v10h14V10" />310      </svg>311      <div class="label">Today</div>312    </div>313    <div class="nav-item active">314      <svg viewBox="0 0 24 24">315        <circle cx="10" cy="10" r="7"></circle>316        <line x1="15.5" y1="15.5" x2="22" y2="22"></line>317      </svg>318      <div class="label">Search</div>319    </div>320    <div class="nav-item">321      <svg viewBox="0 0 24 24">322        <circle cx="12" cy="8" r="4"></circle>323        <path d="M4 22c0-5 16-5 16 0" />324      </svg>325      <div class="label">Profile</div>326    </div>327  </div>328 329</div>330</body>331</html>