GD-ML/AndroidCode

1<!DOCTYPE html>2<html lang="en">3<head>4<meta charset="UTF-8">5<title>Recipe Search - Pizza</title>6<style>7  body { margin: 0; padding: 0; background: transparent; font-family: Arial, Helvetica, sans-serif; }8  #render-target {9    position: relative;10    overflow: hidden;11    width: 1080px;12    height: 2400px;13    background: #f0f0f0;14    border-radius: 0;15  }16 17  /* Top app bar */18  .appbar {19    position: absolute;20    top: 0;21    left: 0;22    width: 1080px;23    height: 300px;24    background: #c53939; /* material red-like */25    color: #fff;26  }27 28  .status-bar {29    height: 110px;30    display: flex;31    align-items: center;32    padding: 0 36px;33    font-size: 36px;34    opacity: 0.95;35  }36  .status-spacer { flex: 1; }37  .status-icon {38    width: 34px; height: 34px; border-radius: 50%; background: rgba(255,255,255,0.26);39    margin-left: 22px;40  }41 42  .search-row {43    padding: 0 36px;44  }45  .search-box {46    height: 110px;47    background: #ffffff;48    border-radius: 12px;49    box-shadow: 0 2px 4px rgba(0,0,0,0.2);50    display: flex;51    align-items: center;52    padding: 0 26px;53    color: #333;54  }55  .search-text {56    flex: 1;57    font-size: 42px;58    color: #333;59    margin-left: 18px;60  }61  .icon-btn {62    width: 60px; height: 60px; display: flex; align-items: center; justify-content: center;63  }64 65  .tabs {66    height: 80px;67    display: flex;68    align-items: flex-end;69    padding: 0 36px;70    gap: 60px;71    color: #fff;72    font-weight: 600;73    letter-spacing: 1px;74    font-size: 34px;75  }76  .tab {77    position: relative;78    padding-bottom: 14px;79    opacity: 0.95;80  }81  .tab.active::after {82    content: "";83    position: absolute;84    bottom: 0;85    left: 0;86    width: 140px;87    height: 6px;88    background: #fff;89    border-radius: 3px;90  }91 92  /* Content area */93  .content {94    position: absolute;95    top: 300px;96    left: 0;97    right: 0;98    bottom: 0;99    background: #eeeeee;100    padding: 24px;101  }102 103  .grid {104    display: grid;105    grid-template-columns: 1fr 1fr;106    gap: 26px;107    padding-bottom: 140px;108  }109 110  .card {111    background: #fff;112    border-radius: 8px;113    box-shadow: 0 4px 8px rgba(0,0,0,0.12);114    overflow: hidden;115  }116  .card .img {117    height: 520px;118    background: #E0E0E0;119    border-bottom: 1px solid #BDBDBD;120    display: flex;121    align-items: center;122    justify-content: center;123    color: #757575;124    font-size: 32px;125  }126  .card .body {127    padding: 26px 26px 18px 26px;128    border-top: 0;129  }130  .title {131    font-size: 40px;132    font-weight: 700;133    color: #333;134    margin-bottom: 16px;135  }136  .stars {137    color: #D6B24A;138    font-size: 38px;139    letter-spacing: 6px;140    margin-bottom: 18px;141  }142  .author {143    display: flex;144    align-items: center;145    border-top: 1px solid #e6e6e6;146    margin-top: 12px;147    padding-top: 18px;148    font-size: 34px;149    color: #666;150  }151  .avatar {152    width: 86px; height: 86px; border-radius: 50%;153    background: #BDBDBD; margin-right: 22px;154    border: 1px solid #AFAFAF;155  }156 157  /* Floating Action Button */158  .fab {159    position: absolute;160    right: 40px;161    bottom: 170px;162    width: 150px; height: 150px;163    background: #d64545;164    border-radius: 50%;165    box-shadow: 0 8px 16px rgba(0,0,0,0.25);166    display: flex; align-items: center; justify-content: center;167  }168 169  /* Bottom gesture bar */170  .gesture {171    position: absolute; bottom: 0; left: 0; width: 100%; height: 100px; background: #000000;172  }173  .gesture .pill {174    width: 240px; height: 16px; background: #e6e6e6; border-radius: 10px;175    margin: 0 auto; position: relative; top: 42px;176    opacity: 0.6;177  }178 179  /* Simple icon styles */180  svg { display: block; }181</style>182</head>183<body>184<div id="render-target">185 186  <div class="appbar">187    <div class="status-bar">188      <div>8:27</div>189      <div class="status-spacer"></div>190      <div class="status-icon"></div>191      <div class="status-icon"></div>192      <div class="status-icon"></div>193      <div class="status-icon"></div>194      <div class="status-icon"></div>195    </div>196 197    <div class="search-row">198      <div class="search-box">199        <div class="icon-btn">200          <!-- Back Arrow -->201          <svg width="40" height="40" viewBox="0 0 24 24">202            <path d="M15 5L8 12l7 7" stroke="#c53939" stroke-width="2" fill="none" stroke-linecap="round" stroke-linejoin="round"/>203          </svg>204        </div>205        <div class="search-text">pizza</div>206        <div class="icon-btn">207          <!-- Clear (X) -->208          <svg width="40" height="40" viewBox="0 0 24 24">209            <path d="M6 6l12 12M18 6L6 18" stroke="#444" stroke-width="2" stroke-linecap="round"/>210          </svg>211        </div>212      </div>213    </div>214 215    <div class="tabs">216      <div class="tab active">ALL</div>217      <div class="tab">MY RECIPES</div>218      <div class="tab">COOKS</div>219    </div>220  </div>221 222  <div class="content">223    <div class="grid">224      <!-- Card 1 -->225      <div class="card">226        <div class="img">[IMG: Recipe Photo]</div>227        <div class="body">228          <div class="title">Pizza</div>229          <div class="stars">★ ★ ★ ★ ☆</div>230          <div class="author">231            <div class="avatar"></div>232            <div>by ellie36</div>233          </div>234        </div>235      </div>236 237      <!-- Card 2 -->238      <div class="card">239        <div class="img">[IMG: Recipe Photo]</div>240        <div class="body">241          <div class="title">Bruschetta Pizza</div>242          <div class="stars">★ ★ ★ ★ ★</div>243          <div class="author">244            <div class="avatar"></div>245            <div>by ThePioneerWomanRecipes</div>246          </div>247        </div>248      </div>249 250      <!-- Card 3 -->251      <div class="card">252        <div class="img">[IMG: Recipe Photo]</div>253        <div class="body">254          <div class="title">Pizza</div>255          <div class="stars">★ ★ ★ ★ ☆</div>256          <div class="author">257            <div class="avatar"></div>258            <div>by AddisonKirk</div>259          </div>260        </div>261      </div>262 263      <!-- Card 4 -->264      <div class="card">265        <div class="img">[IMG: Recipe Photo]</div>266        <div class="body">267          <div class="title">Pizza Hut Pizza Crust</div>268          <div class="stars">★ ★ ★ ★ ☆</div>269          <div class="author">270            <div class="avatar"></div>271            <div>by Anonymous</div>272          </div>273        </div>274      </div>275 276      <!-- Additional placeholders to suggest more content -->277      <div class="card">278        <div class="img">[IMG: Recipe Photo]</div>279        <div class="body">280          <div class="title">Pizza</div>281          <div class="stars">★ ★ ★ ★ ☆</div>282          <div class="author">283            <div class="avatar"></div>284            <div>by ChefA</div>285          </div>286        </div>287      </div>288      <div class="card">289        <div class="img">[IMG: Recipe Photo]</div>290        <div class="body">291          <div class="title">Garlic Pizza</div>292          <div class="stars">★ ★ ★ ★ ★</div>293          <div class="author">294            <div class="avatar"></div>295            <div>by ChefB</div>296          </div>297        </div>298      </div>299    </div>300  </div>301 302  <!-- Floating Action Button -->303  <div class="fab">304    <svg width="88" height="88" viewBox="0 0 64 64">305      <circle cx="28" cy="28" r="18" fill="none" stroke="#fff" stroke-width="4"/>306      <line x1="43" y1="43" x2="60" y2="60" stroke="#fff" stroke-width="5" stroke-linecap="round"/>307      <line x1="28" y1="22" x2="28" y2="34" stroke="#fff" stroke-width="4" stroke-linecap="round"/>308      <line x1="22" y1="28" x2="34" y2="28" stroke="#fff" stroke-width="4" stroke-linecap="round"/>309    </svg>310  </div>311 312  <!-- Gesture bar -->313  <div class="gesture"><div class="pill"></div></div>314 315</div>316</body>317</html>