GD-ML/AndroidCode

1<!DOCTYPE html>2<html>3<head>4<meta charset="UTF-8" />5<meta name="viewport" content="width=1080, initial-scale=1.0" />6<title>Barbeque Salad - Results</title>7<style>8  body { margin: 0; padding: 0; background: transparent; font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Arial, sans-serif; }9  #render-target {10    width: 1080px;11    height: 2400px;12    position: relative;13    overflow: hidden;14    background: #242629;15    color: #ECECEC;16  }17 18  /* Status bar */19  .status-bar {20    height: 120px;21    background: #0F0F10;22    display: flex;23    align-items: center;24    padding: 0 36px;25    color: #fff;26    font-weight: 600;27    font-size: 38px;28  }29  .status-bar .spacer { flex: 1; }30  .status-icons {31    display: flex;32    align-items: center;33    gap: 28px;34  }35  .icon-wifi, .icon-battery {36    width: 48px; height: 32px;37  }38 39  /* Search/Header row */40  .search-row {41    height: 128px;42    display: flex;43    align-items: center;44    padding: 0 24px;45    border-bottom: 2px solid #4A4D52;46    background: #242629;47  }48  .icon-btn {49    width: 96px;50    height: 96px;51    display: flex;52    align-items: center;53    justify-content: center;54  }55  .search-text {56    flex: 1;57    color: #F0F0F0;58    font-size: 46px;59    padding: 0 8px;60  }61 62  /* Page padding */63  .content {64    padding: 26px 24px 140px 24px;65  }66 67  /* Videos card */68  .videos-card {69    background: #2E3034;70    border-radius: 28px;71    padding: 28px;72    box-shadow: 0 10px 24px rgba(0,0,0,0.35);73  }74  .videos-header {75    display: flex;76    align-items: baseline;77    justify-content: space-between;78  }79  .videos-title {80    font-size: 44px;81    font-weight: 700;82    color: #EDEDED;83  }84  .videos-sub {85    margin-top: 6px;86    color: #A8ACB1;87    font-size: 30px;88  }89  .more-link {90    color: #CFCFCF;91    font-weight: 700;92    letter-spacing: 1px;93    font-size: 32px;94  }95  .video-list {96    margin-top: 26px;97    display: flex;98    gap: 26px;99    overflow: hidden;100  }101  .video-item {102    width: 484px;103  }104  .thumb {105    width: 100%;106    height: 300px;107    background: #E0E0E0;108    border: 1px solid #BDBDBD;109    border-radius: 22px;110    display: flex;111    align-items: center;112    justify-content: center;113    color: #757575;114    font-size: 30px;115    text-align: center;116    padding: 12px;117  }118  .channel {119    margin-top: 18px;120    color: #C1C5CA;121    font-size: 30px;122  }123  .video-title {124    margin-top: 8px;125    color: #F2F2F2;126    font-size: 40px;127    line-height: 1.24;128    letter-spacing: 0.2px;129  }130 131  /* Recipes heading */132  .recipes-heading {133    text-align: center;134    margin: 36px 0 18px;135    font-size: 48px;136    font-weight: 700;137    color: #EDEDED;138  }139 140  /* Grid of recipe cards */141  .grid {142    display: grid;143    grid-template-columns: 1fr 1fr;144    gap: 28px;145  }146  .recipe-card {147    background: #2E3034;148    border-radius: 26px;149    padding: 14px 14px 20px;150    box-shadow: 0 6px 16px rgba(0,0,0,0.25);151  }152  .recipe-image {153    width: 100%;154    height: 360px;155    background: #E0E0E0;156    border: 1px solid #BDBDBD;157    border-radius: 22px;158    display: flex;159    align-items: center;160    justify-content: center;161    color: #757575;162    font-size: 30px;163    text-align: center;164    padding: 16px;165  }166  .recipe-title {167    margin-top: 18px;168    font-size: 40px;169    color: #F0F0F0;170    line-height: 1.25;171  }172  .meta-row {173    display: flex;174    align-items: center;175    justify-content: space-between;176    margin-top: 14px;177  }178  .meta {179    color: #B8BCC1;180    font-size: 30px;181  }182  .likes {183    display: flex;184    align-items: center;185    gap: 10px;186    color: #C9CDD1;187    font-size: 30px;188  }189  .heart {190    width: 38px;191    height: 38px;192  }193 194  /* Bottom home indicator */195  .home-indicator {196    position: absolute;197    bottom: 24px;198    left: 50%;199    transform: translateX(-50%);200    width: 360px;201    height: 14px;202    background: #D8D8D8;203    border-radius: 8px;204    opacity: 0.9;205  }206</style>207</head>208<body>209<div id="render-target">210  <!-- Status bar -->211  <div class="status-bar">212    <div>11:03</div>213    <div class="spacer"></div>214    <div class="status-icons">215      <svg class="icon-wifi" viewBox="0 0 24 24" fill="none" stroke="#fff" stroke-width="2">216        <path d="M2 8c5.5-4 14.5-4 20 0"></path>217        <path d="M5 12c4-3 10-3 14 0"></path>218        <path d="M8 16c2.5-2 5.5-2 8 0"></path>219        <circle cx="12" cy="19" r="1.5" fill="#fff"></circle>220      </svg>221      <svg class="icon-battery" viewBox="0 0 26 14">222        <rect x="1" y="2" width="20" height="10" rx="2" fill="none" stroke="#fff" stroke-width="2"></rect>223        <rect x="3" y="4" width="16" height="6" fill="#fff"></rect>224        <rect x="22" y="5" width="3" height="4" rx="1" fill="#fff"></rect>225      </svg>226    </div>227  </div>228 229  <!-- Search row -->230  <div class="search-row">231    <div class="icon-btn">232      <svg width="48" height="48" viewBox="0 0 24 24" fill="none" stroke="#F2F2F2" stroke-width="2.5" stroke-linecap="round" stroke-linejoin="round">233        <path d="M15 18l-6-6 6-6"></path>234      </svg>235    </div>236    <div class="search-text">barbeque salad</div>237    <div class="icon-btn">238      <svg width="44" height="44" viewBox="0 0 24 24" stroke="#F2F2F2" stroke-width="2.5" fill="none" stroke-linecap="round">239        <path d="M6 6l12 12M18 6L6 18"></path>240      </svg>241    </div>242  </div>243 244  <div class="content">245    <!-- Videos You Might Like Card -->246    <div class="videos-card">247      <div class="videos-header">248        <div>249          <div class="videos-title">Videos You Might Like...</div>250          <div class="videos-sub">Popular recipe videos</div>251        </div>252        <div class="more-link">MORE</div>253      </div>254 255      <div class="video-list">256        <div class="video-item">257          <div class="thumb">[IMG: Colorful salad bowl with corn, tomatoes, avocado]</div>258          <div class="channel">Evolving Table</div>259          <div class="video-title">The Summer Salad Every BBQ Needs!</div>260        </div>261        <div class="video-item">262          <div class="thumb">[IMG: Salad ingredients collage with onions, greens and beans]</div>263          <div class="channel">Her Wholesome Kitchen</div>264          <div class="video-title">BBQ Chicken Salad with Ranch Dressing</div>265        </div>266      </div>267    </div>268 269    <!-- Recipes Heading -->270    <div class="recipes-heading">Recipes</div>271 272    <!-- Recipes Grid -->273    <div class="grid">274      <!-- Card 1 -->275      <div class="recipe-card">276        <div class="recipe-image">[IMG: Lettuce and tomatoes with barbeque vinaigrette]</div>277        <div class="recipe-title">Barbeque Vinaigrette Salad Dressing</div>278        <div class="meta-row">279          <div class="meta">207.7 Calories</div>280          <div class="likes">281            <svg class="heart" viewBox="0 0 24 24" fill="none" stroke="#D0D3D7" stroke-width="2">282              <path d="M12 21s-7-4.6-9.2-8.2C1 10 2.7 6 6.5 6c2 0 3.2 1 3.5 2.1C10.3 7 11.5 6 13.5 6 17.3 6 19 10 21.2 12.8 19 16.4 12 21 12 21z"/>283            </svg>284            <span>2</span>285          </div>286        </div>287        <div class="meta">10mins</div>288      </div>289 290      <!-- Card 2 -->291      <div class="recipe-card">292        <div class="recipe-image">[IMG: No image available placeholder]</div>293        <div class="recipe-title">Hawaiian Barbeque Macaroni Salad</div>294        <div class="meta-row">295          <div class="meta">165.3 Calories</div>296          <div class="likes">297            <svg class="heart" viewBox="0 0 24 24" fill="none" stroke="#D0D3D7" stroke-width="2">298              <path d="M12 21s-7-4.6-9.2-8.2C1 10 2.7 6 6.5 6c2 0 3.2 1 3.5 2.1C10.3 7 11.5 6 13.5 6 17.3 6 19 10 21.2 12.8 19 16.4 12 21 12 21z"/>299            </svg>300            <span>0</span>301          </div>302        </div>303        <div class="meta">40mins</div>304      </div>305 306      <!-- Card 3 -->307      <div class="recipe-card">308        <div class="recipe-image">[IMG: No image available placeholder]</div>309        <div class="recipe-title">Grilled Corn and BBQ Salad Bowl</div>310        <div class="meta-row">311          <div class="meta">312 Calories</div>312          <div class="likes">313            <svg class="heart" viewBox="0 0 24 24" fill="none" stroke="#D0D3D7" stroke-width="2">314              <path d="M12 21s-7-4.6-9.2-8.2C1 10 2.7 6 6.5 6c2 0 3.2 1 3.5 2.1C10.3 7 11.5 6 13.5 6 17.3 6 19 10 21.2 12.8 19 16.4 12 21 12 21z"/>315            </svg>316            <span>5</span>317          </div>318        </div>319        <div class="meta">25mins</div>320      </div>321 322      <!-- Card 4 -->323      <div class="recipe-card">324        <div class="recipe-image">[IMG: No image available placeholder]</div>325        <div class="recipe-title">Smoky BBQ Chickpea Salad</div>326        <div class="meta-row">327          <div class="meta">248 Calories</div>328          <div class="likes">329            <svg class="heart" viewBox="0 0 24 24" fill="none" stroke="#D0D3D7" stroke-width="2">330              <path d="M12 21s-7-4.6-9.2-8.2C1 10 2.7 6 6.5 6c2 0 3.2 1 3.5 2.1C10.3 7 11.5 6 13.5 6 17.3 6 19 10 21.2 12.8 19 16.4 12 21 12 21z"/>331            </svg>332            <span>1</span>333          </div>334        </div>335        <div class="meta">30mins</div>336      </div>337    </div>338  </div>339 340  <!-- Home indicator -->341  <div class="home-indicator"></div>342</div>343</body>344</html>