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 Mock</title>7<style>8  body { margin: 0; padding: 0; background: transparent; font-family: "Segoe UI", Arial, sans-serif; }9  #render-target {10    position: relative;11    width: 1080px;12    height: 2400px;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: 130px;24    background: #3c3c3c;25    color: #fff;26  }27  .status-inner {28    height: 100%;29    padding: 28px 36px;30    display: flex;31    align-items: center;32    justify-content: space-between;33    box-sizing: border-box;34    font-weight: 600;35  }36  .status-left {37    display: flex;38    align-items: center;39    gap: 20px;40  }41  .status-icons {42    display: flex;43    align-items: center;44    gap: 18px;45    opacity: 0.9;46  }47  .status-right {48    display: flex;49    align-items: center;50    gap: 22px;51  }52  .status-bar svg { width: 36px; height: 36px; fill: #ffffff; }53 54  /* Search section */55  .search-section {56    position: absolute;57    top: 150px;58    left: 60px;59    width: 960px;60    height: 160px;61    display: flex;62    align-items: center;63    box-sizing: border-box;64  }65  .search-icon {66    width: 72px;67    height: 72px;68    margin-right: 28px;69  }70  .search-input {71    position: relative;72    flex: 1;73    height: 100%;74    display: flex;75    align-items: center;76  }77  .search-caret {78    position: absolute;79    left: 6px;80    top: 30px;81    width: 6px;82    height: 100px;83    background: #1EB2A6; /* teal caret */84    border-radius: 3px;85  }86  .search-placeholder {87    color: #B9B9B9;88    font-size: 64px;89    font-weight: 700;90    letter-spacing: 0.3px;91    margin-left: 22px;92  }93 94  /* Intro card */95  .intro-card {96    position: absolute;97    top: 340px;98    left: 60px;99    width: 960px;100    background: #F4F4F4;101    border: 1px solid #E0E0E0;102    border-radius: 10px;103    box-sizing: border-box;104    padding: 40px;105  }106  .intro-title {107    font-size: 52px;108    font-weight: 800;109    color: #222;110    margin: 0 0 18px 0;111  }112  .intro-sub {113    font-size: 32px;114    color: #7B7B7B;115    margin: 0 0 30px 0;116  }117  .image-placeholder {118    width: 100%;119    height: 560px;120    background: #E0E0E0;121    border: 1px solid #BDBDBD;122    display: flex;123    justify-content: center;124    align-items: center;125    color: #757575;126    font-size: 30px;127    border-radius: 6px;128  }129 130  /* Spacer to mimic empty area above keyboard */131  .content-spacer {132    position: absolute;133    left: 0;134    top: 1040px; /* 130 + 160 + 750 approx */135    width: 1080px;136    height: 430px;137    background: #FFFFFF;138  }139 140  /* Keyboard mock */141  .keyboard {142    position: absolute;143    bottom: 0;144    left: 0;145    width: 1080px;146    height: 820px;147    background: #F2F4EA;148    box-sizing: border-box;149    padding: 28px 28px 34px 28px;150  }151  .kb-top-icons {152    display: flex;153    align-items: center;154    justify-content: space-between;155    width: 640px;156    margin: 0 auto 26px auto;157  }158  .kb-top-icons svg { width: 54px; height: 54px; fill: #606A5A; }159 160  .kb-row {161    display: flex;162    justify-content: center;163    gap: 18px;164    margin-bottom: 18px;165  }166  .key {167    width: 88px;168    height: 110px;169    background: #FFFFFF;170    border-radius: 24px;171    box-shadow: 0 1px 0 rgba(0,0,0,0.06);172    display: flex;173    align-items: center;174    justify-content: center;175    color: #3A3A3A;176    font-size: 40px;177    font-weight: 500;178  }179  .key.wide { width: 150px; }180  .key.space { width: 420px; }181  .key.icon { background: #D7E7CC; }182 183  .kb-bottom {184    display: flex;185    align-items: center;186    justify-content: space-between;187    gap: 18px;188    padding: 6px 36px 0 36px;189  }190  .kb-bottom .key { height: 100px; }191  .kb-bottom .key.round { border-radius: 26px; }192  .kb-bottom .right-group {193    display: flex;194    align-items: center;195    gap: 18px;196  }197 198  /* Simple icons */199  .icon { display: inline-flex; align-items: center; justify-content: center; }200  .icon svg { width: 48px; height: 48px; }201</style>202</head>203<body>204<div id="render-target">205 206  <!-- Status Bar -->207  <div class="status-bar">208    <div class="status-inner">209      <div class="status-left">210        <div style="font-size:48px;">3:02</div>211        <div class="status-icons">212          <!-- chat bubble -->213          <svg viewBox="0 0 24 24"><path d="M4 4h16v12H8l-4 4V4z"/></svg>214          <!-- trophy -->215          <svg viewBox="0 0 24 24"><path d="M6 4h12v4h3v2a6 6 0 0 1-6 6h-6a6 6 0 0 1-6-6V8h3V4zM9 18h6v2H9z"/></svg>216          <!-- pencil -->217          <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>218          <!-- Pinterest P -->219          <div style="width:40px;height:40px;border-radius:20px;background:#ffffff;color:#3c3c3c;display:flex;align-items:center;justify-content:center;font-weight:800;">P</div>220          <!-- dot -->221          <div style="width:10px;height:10px;background:#ffffff;border-radius:50%;opacity:0.8;"></div>222        </div>223      </div>224      <div class="status-right">225        <!-- wifi -->226        <svg viewBox="0 0 24 24"><path d="M12 18a2 2 0 1 0 0 4 2 2 0 0 0 0-4zm-7-7 2 2a9 9 0 0 1 10 0l2-2a12 12 0 0 0-14 0zm3 3 2 2a5 5 0 0 1 6 0l2-2a8 8 0 0 0-10 0z"/></svg>227        <!-- battery -->228        <svg viewBox="0 0 24 24"><path d="M20 8h1v8h-1zM3 7h16v10H3z"/></svg>229      </div>230    </div>231  </div>232 233  <!-- Search bar -->234  <div class="search-section">235    <div class="search-icon icon">236      <svg viewBox="0 0 24 24"><path d="M10 18a8 8 0 1 1 5.3-14.3l5 5-1.4 1.4-5-5A6 6 0 1 0 10 16z"/></svg>237    </div>238    <div class="search-input">239      <div class="search-caret"></div>240      <div class="search-placeholder">Search for recipes</div>241    </div>242  </div>243 244  <!-- Intro card -->245  <div class="intro-card">246    <h1 class="intro-title">Type in ingredients or dishes</h1>247    <p class="intro-sub">Find easy recipes to make with what you have.</p>248    <div class="image-placeholder">[IMG: Food ingredients photo]</div>249  </div>250 251  <!-- Empty content area -->252  <div class="content-spacer"></div>253 254  <!-- Keyboard mock -->255  <div class="keyboard">256    <div class="kb-top-icons">257      <!-- smile -->258      <svg viewBox="0 0 24 24"><path d="M12 2a10 10 0 1 0 0 20A10 10 0 0 0 12 2zm-4 9a1 1 0 1 1 0-2 1 1 0 0 1 0 2zm8 0a1 1 0 1 1 0-2 1 1 0 0 1 0 2zm-8.5 4a6.5 6.5 0 0 0 9 0l-1.5-1a4.5 4.5 0 0 1-6 0l-1.5 1z"/></svg>259      <!-- GIF -->260      <div style="width:54px;height:54px;border-radius:12px;background:#fff;display:flex;align-items:center;justify-content:center;color:#606A5A;font-weight:700;">GIF</div>261      <!-- settings -->262      <svg viewBox="0 0 24 24"><path d="M12 8a4 4 0 1 1 0 8 4 4 0 0 1 0-8zm-9 4 3-1 1-3 3-1 1-3h4l1 3 3 1 1 3 3 1v4l-3 1-1 3-3 1-1 3h-4l-1-3-3-1-1-3-3-1v-4z"/></svg>263      <!-- translate -->264      <svg viewBox="0 0 24 24"><path d="M4 4h9v6H4zM14 10h6v10h-6zM6 16l3-6 3 6z"/></svg>265      <!-- palette -->266      <svg viewBox="0 0 24 24"><path d="M12 3a9 9 0 0 0-9 9 6 6 0 0 0 6 6h3a3 3 0 1 1 0 6 9 9 0 0 0 0-21z"/></svg>267    </div>268 269    <div class="kb-row">270      <div class="key">q</div><div class="key">w</div><div class="key">e</div><div class="key">r</div><div class="key">t</div>271      <div class="key">y</div><div class="key">u</div><div class="key">i</div><div class="key">o</div><div class="key">p</div>272    </div>273    <div class="kb-row">274      <div class="key">a</div><div class="key">s</div><div class="key">d</div><div class="key">f</div><div class="key">g</div>275      <div class="key">h</div><div class="key">j</div><div class="key">k</div><div class="key">l</div>276    </div>277    <div class="kb-row">278      <div class="key icon">⇧</div>279      <div class="key">z</div><div class="key">x</div><div class="key">c</div><div class="key">v</div>280      <div class="key">b</div><div class="key">n</div><div class="key">m</div>281      <div class="key icon">282        <svg viewBox="0 0 24 24"><path d="M6 12h12l-4 4v-3H6v-2h8V8l4 4z"/></svg>283      </div>284    </div>285 286    <div class="kb-bottom">287      <div class="key icon round" style="background:#D7E7CC;">⌨</div>288      <div class="key wide">?123</div>289      <div class="key">,</div>290      <div class="key wide">😊</div>291      <div class="key space"></div>292      <div class="right-group">293        <div class="key">.</div>294        <div class="key icon round" style="background:#D7E7CC;">295          <!-- search key -->296          <svg viewBox="0 0 24 24"><path d="M10 18a8 8 0 1 1 5.3-14.3l5 5-1.4 1.4-5-5A6 6 0 1 0 10 16z"/></svg>297        </div>298        <div class="key icon round">299          <!-- mic -->300          <svg viewBox="0 0 24 24"><path d="M12 14a3 3 0 0 0 3-3V5a3 3 0 1 0-6 0v6a3 3 0 0 0 3 3zm-6-3h2a4 4 0 0 0 8 0h2a6 6 0 0 1-6 6v2h-2v-2a6 6 0 0 1-6-6z"/></svg>301        </div>302      </div>303    </div>304  </div>305 306  <!-- Home handle indicator -->307  <div style="position:absolute; bottom:20px; left:50%; transform:translateX(-50%); width:360px; height:12px; border-radius:6px; background:#9B9B9B; opacity:0.6;"></div>308 309</div>310</body>311</html>