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 Recipes UI</title>7<style>8  body { margin: 0; padding: 0; background: transparent; font-family: system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif; }9  #render-target {10    width: 1080px;11    height: 2400px;12    position: relative;13    overflow: hidden;14    background: #FFFFFF;15  }16 17  /* Status bar */18  .status-bar {19    position: absolute;20    top: 0;21    left: 0;22    width: 1080px;23    height: 140px;24    background: #3A3A3A;25    color: #FFF;26    display: flex;27    align-items: center;28    padding: 0 36px;29    box-sizing: border-box;30    font-weight: 600;31  }32  .status-left { font-size: 42px; }33  .status-right {34    margin-left: auto;35    display: flex;36    align-items: center;37    gap: 26px;38  }39  .status-icon svg { display: block; }40 41  /* Main content */42  .content {43    position: absolute;44    top: 140px;45    left: 0;46    right: 0;47    bottom: 200px; /* leave space for nav bar */48    padding: 40px 48px 0;49    box-sizing: border-box;50    overflow-y: auto;51  }52 53  /* Search header row */54  .search-row {55    display: flex;56    align-items: center;57    gap: 28px;58    margin-top: 26px;59    margin-bottom: 28px;60  }61  .search-row .label {62    font-size: 64px;63    line-height: 1.2;64    color: #BDBDBD;65    font-weight: 700;66    letter-spacing: 0.5px;67  }68 69  /* Promo card */70  .promo-card {71    background: #F7F7F7;72    border-radius: 18px;73    box-shadow: 0 2px 0 rgba(0,0,0,0.02);74    border: 1px solid #EAEAEA;75    padding: 36px;76  }77  .promo-title {78    font-size: 52px;79    font-weight: 800;80    color: #171717;81    margin-bottom: 16px;82  }83  .promo-sub {84    font-size: 36px;85    color: #777777;86    margin-bottom: 28px;87  }88  .img-placeholder {89    width: 100%;90    height: 720px;91    background: #E0E0E0;92    border: 1px solid #BDBDBD;93    border-radius: 14px;94    display: flex;95    justify-content: center;96    align-items: center;97    color: #757575;98    font-size: 32px;99    text-align: center;100  }101 102  /* Bottom navigation */103  .bottom-nav {104    position: absolute;105    left: 0;106    bottom: 86px; /* keep above system gesture bar */107    width: 1080px;108    height: 160px;109    background: #FFFFFF;110    border-top: 1px solid #EEEEEE;111    display: flex;112    justify-content: space-around;113    align-items: center;114    padding: 0 28px;115    box-sizing: border-box;116  }117  .nav-item svg {118    width: 72px;119    height: 72px;120    stroke: #1E1E1E;121    stroke-width: 32;122    fill: none;123  }124  .nav-item.search svg {125    stroke: #5C9C98; /* teal accent */126  }127 128  /* System gesture bar */129  .system-bar {130    position: absolute;131    left: 0;132    bottom: 0;133    width: 1080px;134    height: 86px;135    background: #2E2E2E;136  }137  .home-indicator {138    position: absolute;139    left: 50%;140    bottom: 22px;141    width: 360px;142    height: 16px;143    background: #CFCFCF;144    border-radius: 10px;145    transform: translateX(-50%);146    opacity: 0.9;147  }148</style>149</head>150<body>151<div id="render-target">152 153  <!-- Top status bar -->154  <div class="status-bar">155    <div class="status-left">3:02</div>156    <div class="status-right">157      <div class="status-icon">158        <!-- small dot separator -->159        <svg width="10" height="10">160          <circle cx="5" cy="5" r="5" fill="#FFFFFF" opacity="0.6"></circle>161        </svg>162      </div>163      <div class="status-icon">164        <!-- WiFi -->165        <svg width="44" height="44" viewBox="0 0 44 44">166          <path d="M4 16c8-6 28-6 36 0" stroke="#FFF" stroke-width="4" fill="none" stroke-linecap="round"/>167          <path d="M10 22c6-4 18-4 24 0" stroke="#FFF" stroke-width="4" fill="none" stroke-linecap="round"/>168          <path d="M17 28c3-2 7-2 10 0" stroke="#FFF" stroke-width="4" fill="none" stroke-linecap="round"/>169          <circle cx="22" cy="34" r="3" fill="#FFF"/>170        </svg>171      </div>172      <div class="status-icon">173        <!-- Battery -->174        <svg width="60" height="44" viewBox="0 0 60 44">175          <rect x="4" y="10" width="44" height="24" rx="4" stroke="#FFF" stroke-width="4" fill="none"/>176          <rect x="8" y="14" width="36" height="16" rx="2" fill="#FFF"/>177          <rect x="50" y="16" width="6" height="12" rx="2" fill="#FFF"/>178        </svg>179      </div>180    </div>181  </div>182 183  <!-- Main content area -->184  <div class="content">185 186    <div class="search-row">187      <!-- Magnifying glass icon -->188      <svg width="72" height="72" viewBox="0 0 72 72">189        <circle cx="30" cy="30" r="20" stroke="#BDBDBD" stroke-width="6" fill="none"/>190        <line x1="46" y1="46" x2="66" y2="66" stroke="#BDBDBD" stroke-width="6" stroke-linecap="round"/>191      </svg>192      <div class="label">Search for recipes</div>193    </div>194 195    <div class="promo-card">196      <div class="promo-title">Type in ingredients or dishes</div>197      <div class="promo-sub">Find easy recipes to make with what you have.</div>198      <div class="img-placeholder">[IMG: Fresh ingredients and tomatoes on cutting board]</div>199    </div>200 201  </div>202 203  <!-- Bottom navigation bar -->204  <div class="bottom-nav">205    <div class="nav-item home">206      <!-- Home icon -->207      <svg viewBox="0 0 100 100">208        <path d="M14 48 L50 20 L86 48" />209        <rect x="26" y="48" width="48" height="34" rx="6"></rect>210      </svg>211    </div>212    <div class="nav-item search">213      <!-- Search icon -->214      <svg viewBox="0 0 100 100">215        <circle cx="42" cy="42" r="26"></circle>216        <line x1="64" y1="64" x2="88" y2="88" stroke-linecap="round"></line>217      </svg>218    </div>219    <div class="nav-item user">220      <!-- User icon -->221      <svg viewBox="0 0 100 100">222        <circle cx="50" cy="34" r="16"></circle>223        <path d="M22 82c6-16 50-16 56 0" />224      </svg>225    </div>226    <div class="nav-item list">227      <!-- Checklist icon -->228      <svg viewBox="0 0 100 100">229        <circle cx="20" cy="26" r="6"></circle>230        <line x1="34" y1="26" x2="84" y2="26" />231        <circle cx="20" cy="50" r="6"></circle>232        <line x1="34" y1="50" x2="84" y2="50" />233        <circle cx="20" cy="74" r="6"></circle>234        <line x1="34" y1="74" x2="84" y2="74" />235      </svg>236    </div>237    <div class="nav-item oven">238      <!-- Simple oven icon -->239      <svg viewBox="0 0 100 100">240        <rect x="18" y="24" width="64" height="52" rx="8"></rect>241        <rect x="28" y="40" width="44" height="28" rx="4"></rect>242        <circle cx="30" cy="30" r="4"></circle>243        <circle cx="42" cy="30" r="4"></circle>244        <circle cx="54" cy="30" r="4"></circle>245      </svg>246    </div>247  </div>248 249  <!-- System gesture bar -->250  <div class="system-bar">251    <div class="home-indicator"></div>252  </div>253 254</div>255</body>256</html>