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>White Sauce Pasta Search</title>7<style>8  body { margin: 0; padding: 0; background: transparent; }9  #render-target {10    position: relative;11    width: 1080px;12    height: 2400px;13    overflow: hidden;14    background: #ffffff;15    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Arial, sans-serif;16    color: #222;17  }18 19  /* Top status bar */20  .status-bar {21    position: absolute;22    top: 0;23    left: 0;24    width: 1080px;25    height: 120px;26    background: #3a3a3a;27    color: #fff;28    display: flex;29    align-items: center;30    padding: 0 36px;31    box-sizing: border-box;32    font-weight: 600;33  }34  .status-bar .time {35    font-size: 42px;36    letter-spacing: 0.5px;37  }38  .status-icons {39    margin-left: auto;40    display: flex;41    align-items: center;42    gap: 28px;43  }44  .status-icons svg { width: 36px; height: 36px; fill: #ffffff; opacity: 0.95; }45 46  /* Search area */47  .search-area {48    position: absolute;49    top: 120px;50    left: 0;51    width: 1080px;52    height: 180px;53    background: #ffffff;54    display: flex;55    align-items: center;56    padding: 0 48px;57    box-sizing: border-box;58    border-bottom: 1px solid #e6e6e6;59  }60  .search-icon {61    width: 56px; height: 56px; margin-right: 28px;62  }63  .search-text {64    font-size: 60px;65    color: #8d8d8d;66    font-weight: 700;67  }68 69  /* Filter/results bar */70  .results-bar {71    position: absolute;72    top: 300px;73    left: 0;74    width: 1080px;75    height: 110px;76    background: #0e0e0e;77    color: #f0f0f0;78    display: flex;79    align-items: center;80    box-sizing: border-box;81    padding: 0 48px;82    letter-spacing: 0.5px;83  }84  .results-left {85    display: flex;86    gap: 22px;87    font-size: 34px;88    font-weight: 800;89    align-items: baseline;90  }91  .results-left .count { color: #cfcfcf; }92  .results-left .filters { color: #ff8a22; }93  .results-right {94    margin-left: auto;95    display: flex;96    align-items: center;97    gap: 16px;98    font-size: 34px;99    font-weight: 800;100  }101  .lock-icon {102    width: 36px; height: 36px; fill: #ffffff;103  }104 105  /* Hero card image */106  .hero-card {107    position: absolute;108    top: 410px;109    left: 0;110    width: 1080px;111    height: 800px;112    overflow: hidden;113  }114  .img-placeholder {115    width: 100%;116    height: 100%;117    background: #E0E0E0;118    border: 1px solid #BDBDBD;119    display: flex;120    justify-content: center;121    align-items: center;122    color: #757575;123    font-size: 42px;124    font-weight: 600;125  }126  .img-gradient {127    position: absolute;128    left: 0;129    bottom: 0;130    width: 100%;131    height: 50%;132    background: linear-gradient(to top, rgba(0,0,0,0.55), rgba(0,0,0,0.0));133    pointer-events: none;134  }135  .hero-info {136    position: absolute;137    left: 48px;138    bottom: 40px;139    color: #ffffff;140    text-shadow: 0 2px 8px rgba(0,0,0,0.35);141  }142  .hero-title {143    font-size: 72px;144    font-weight: 800;145    margin: 0 0 12px 0;146  }147  .hero-subtitle {148    font-size: 30px;149    font-weight: 700;150    opacity: 0.9;151  }152  .fab {153    position: absolute;154    right: 48px;155    bottom: 48px;156    width: 110px;157    height: 110px;158    background: #5bb7a7;159    border-radius: 55px;160    box-shadow: 0 8px 20px rgba(0,0,0,0.25);161    display: flex;162    align-items: center;163    justify-content: center;164  }165  .fab svg { width: 56px; height: 56px; fill: #ffffff; }166 167  /* Second image */168  .second-image {169    position: absolute;170    top: 1210px;171    left: 0;172    width: 1080px;173    height: 680px;174    overflow: hidden;175    border-top: 1px solid #cfcfcf;176  }177 178  /* Bottom navigation */179  .bottom-nav {180    position: absolute;181    bottom: 110px;182    left: 0;183    width: 1080px;184    height: 160px;185    background: #ffffff;186    border-top: 1px solid #e6e6e6;187    display: flex;188    align-items: center;189    justify-content: space-around;190    box-sizing: border-box;191  }192  .bottom-nav .nav-item {193    display: flex; flex-direction: column; align-items: center; gap: 16px;194    color: #222;195  }196  .bottom-nav svg { width: 72px; height: 72px; fill: none; stroke: #111; stroke-width: 48; stroke-linecap: round; stroke-linejoin: round; }197  .gesture {198    position: absolute;199    bottom: 40px;200    left: 50%;201    transform: translateX(-50%);202    width: 320px;203    height: 16px;204    background: #cfcfcf;205    border-radius: 10px;206  }207</style>208</head>209<body>210<div id="render-target">211 212  <!-- Status Bar -->213  <div class="status-bar">214    <div class="time">3:03</div>215    <div class="status-icons">216      <!-- Chat bubble -->217      <svg viewBox="0 0 24 24"><path d="M4 4h16v12H8l-4 4V4z"/></svg>218      <!-- Trophy -->219      <svg viewBox="0 0 24 24"><path d="M5 4h14v3h2v2a5 5 0 0 1-5 5h-1v2h2v2H7v-2h2v-2H8a5 5 0 0 1-5-5V7h2V4z"/></svg>220      <!-- Pencil -->221      <svg viewBox="0 0 24 24"><path d="M3 17.25V21h3.75L17.81 9.94l-3.75-3.75L3 17.25zM20.71 7.04a1 1 0 0 0 0-1.41l-2.34-2.34a1 1 0 0 0-1.41 0l-1.83 1.83 3.75 3.75 1.83-1.83z"/></svg>222      <!-- Pin -->223      <svg viewBox="0 0 24 24"><path d="M12 2a7 7 0 0 1 7 7c0 5-7 13-7 13S5 14 5 9a7 7 0 0 1 7-7zm0 9.5a2.5 2.5 0 1 0 0-5 2.5 2.5 0 0 0 0 5z"/></svg>224      <!-- Dot -->225      <svg viewBox="0 0 24 24"><circle cx="12" cy="12" r="3" fill="#fff"/></svg>226      <!-- WiFi -->227      <svg viewBox="0 0 24 24"><path d="M2 8a16 16 0 0 1 20 0M5 12a11 11 0 0 1 14 0M8 16a6 6 0 0 1 8 0M12 20h0"/></svg>228      <!-- Battery -->229      <svg viewBox="0 0 24 24"><path d="M2 8h18v8H2z"/><path d="M22 10v4" stroke="#fff" stroke-width="2"/></svg>230    </div>231  </div>232 233  <!-- Search Area -->234  <div class="search-area">235    <svg class="search-icon" viewBox="0 0 24 24">236      <circle cx="11" cy="11" r="7" stroke="#9e9e9e" stroke-width="2" fill="none"/>237      <path d="M20 20l-4-4" stroke="#9e9e9e" stroke-width="2" />238    </svg>239    <div class="search-text">white sauce pasta</div>240  </div>241 242  <!-- Results/Filters Bar -->243  <div class="results-bar">244    <div class="results-left">245      <div class="count">351 RESULTS</div>246      <div class="filters">0 FILTERS</div>247    </div>248    <div class="results-right">249      <div>FILTER</div>250      <svg class="lock-icon" viewBox="0 0 24 24"><path d="M6 10h12v10H6z"/><path d="M8 10V7a4 4 0 0 1 8 0v3" fill="none" stroke="#fff" stroke-width="2"/></svg>251    </div>252  </div>253 254  <!-- Hero Card -->255  <div class="hero-card">256    <div class="img-placeholder">[IMG: Shrimp Pasta Plate]</div>257    <div class="img-gradient"></div>258    <div class="hero-info">259      <div class="hero-title">White Wine Sauce</div>260      <div class="hero-subtitle">COORDINATELY YOURS BY JULIE BLANNER</div>261    </div>262    <div class="fab">263      <svg viewBox="0 0 24 24"><path d="M12 5v14M5 12h14" stroke="#fff" stroke-width="2"/></svg>264    </div>265  </div>266 267  <!-- Second Image -->268  <div class="second-image">269    <div class="img-placeholder">[IMG: White Sauce Bowl]</div>270  </div>271 272  <!-- Bottom Navigation -->273  <div class="bottom-nav">274    <div class="nav-item">275      <!-- Home -->276      <svg viewBox="0 0 24 24"><path d="M4 10l8-6 8 6v8H6v-8z"/></svg>277    </div>278    <div class="nav-item">279      <!-- Search -->280      <svg viewBox="0 0 24 24"><circle cx="11" cy="11" r="6"/><path d="M20 20l-5-5"/></svg>281    </div>282    <div class="nav-item">283      <!-- User -->284      <svg viewBox="0 0 24 24"><circle cx="12" cy="8" r="4"/><path d="M4 20a8 8 0 0 1 16 0"/></svg>285    </div>286    <div class="nav-item">287      <!-- List -->288      <svg viewBox="0 0 24 24"><path d="M5 6h14M5 12h14M5 18h14"/></svg>289    </div>290    <div class="nav-item">291      <!-- Oven/Appliance -->292      <svg viewBox="0 0 24 24"><rect x="4" y="6" width="16" height="12" rx="2" ry="2"/><path d="M7 9h10M7 13h10"/></svg>293    </div>294  </div>295 296  <!-- Gesture bar -->297  <div class="gesture"></div>298 299</div>300</body>301</html>