GD-ML/AndroidCode

1<!DOCTYPE html>2<html lang="en">3<head>4<meta charset="UTF-8">5<title>Eggplant Hasselback - Discover</title>6<meta name="viewport" content="width=1080, initial-scale=1.0">7<style>8  body { margin: 0; padding: 0; background: transparent; font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Inter, Arial, sans-serif; }9  #render-target {10    width: 1080px; height: 2400px;11    position: relative; overflow: hidden;12    background: #26262b; color: #ffffff;13  }14 15  /* Colors */16  :root{17    --pink:#ff3b6e;18    --cardText:#f4f4f6;19    --muted:#a9a9b2;20    --line:#494a50;21    --chip:#7fd0c6;22  }23 24  /* Status bar */25  .status-bar{26    position:absolute; top:28px; left:40px; right:40px;27    display:flex; align-items:center; justify-content:space-between;28    color:#ffffff; font-weight:600; font-size:32px;29    opacity:0.95;30  }31  .status-icons{ display:flex; align-items:center; gap:26px; }32  .status-icons svg{ width:40px; height:40px; }33 34  /* Search row */35  .search-row{36    position:relative;37    margin-top:120px;38    padding:0 40px;39    display:flex; align-items:center; gap:28px;40  }41  .back-btn svg{ width:56px; height:56px; }42  .search-field{43    flex:1; height:120px;44    background:#2e2f35; border:2px solid #55565c;45    border-radius:60px; display:flex; align-items:center;46    padding:0 36px; gap:26px;47    color:#d7d7dd; font-size:42px; font-weight:600;48  }49  .search-field .placeholder{ flex:1; }50  .filter-btn{51    width:96px; height:96px; border-radius:48px;52    display:flex; align-items:center; justify-content:center;53  }54  .filter-btn svg{ width:64px; height:64px; }55 56  /* Results grid */57  .content{ padding:40px; }58  .grid{59    display:flex; gap:40px;60  }61  .card{ width:460px; }62  .thumb{63    width:460px; height:360px;64    background:#E0E0E0; border:1px solid #BDBDBD;65    border-radius:24px;66    display:flex; align-items:center; justify-content:center;67    color:#757575; font-weight:600;68  }69  .title{70    margin-top:24px; font-size:44px; line-height:1.15; color:var(--cardText);71    font-weight:800;72  }73  .meta{74    margin-top:16px; display:flex; align-items:center; gap:14px;75    color:var(--chip); font-weight:700; font-size:34px;76  }77  .meta svg{ width:32px; height:32px; }78 79  /* Bottom navigation */80  .bottom-nav{81    position:absolute; left:0; right:0; bottom:120px;82    height:200px;83    display:flex; align-items:flex-start; justify-content:space-around;84    padding-top:22px;85    color:#a9a9b2;86  }87  .nav-item{ width:220px; text-align:center; }88  .nav-icon{ width:84px; height:84px; margin:0 auto 18px; }89  .nav-item.active .label{ color:#ffffff; font-weight:800; }90  .nav-item.active svg{ stroke:var(--pink); fill:none; }91  .nav-item svg{ stroke:#7d7d84; fill:none; stroke-width:6; }92 93  .profile-avatar{94    width:84px; height:84px; border-radius:42px;95    background:#5f7f88; color:#ffffff; display:flex; align-items:center; justify-content:center;96    margin:0 auto 18px; font-weight:800; font-size:44px;97  }98 99  /* Home pill */100  .home-pill{101    position:absolute; left:50%; transform:translateX(-50%);102    bottom:40px; width:240px; height:18px; border-radius:12px;103    background:#e9e9ec; opacity:0.9;104  }105</style>106</head>107<body>108<div id="render-target">109 110  <!-- Status Bar -->111  <div class="status-bar">112    <div class="time">3:09</div>113    <div class="status-icons">114      <!-- WiFi -->115      <svg viewBox="0 0 24 24">116        <path d="M2 8c5-4 15-4 20 0" stroke="#ffffff" stroke-width="2" fill="none" stroke-linecap="round"/>117        <path d="M5 12c4-3 10-3 14 0" stroke="#ffffff" stroke-width="2" fill="none" stroke-linecap="round"/>118        <circle cx="12" cy="16" r="1.8" fill="#ffffff"/>119      </svg>120      <!-- Battery -->121      <svg viewBox="0 0 34 18">122        <rect x="1" y="3" width="28" height="12" rx="3" ry="3" stroke="#ffffff" fill="none" stroke-width="2"/>123        <rect x="30" y="6" width="3" height="6" rx="1" fill="#ffffff"/>124        <rect x="4" y="5" width="20" height="8" rx="2" fill="#ffffff"/>125      </svg>126    </div>127  </div>128 129  <!-- Search -->130  <div class="search-row">131    <div class="back-btn">132      <svg viewBox="0 0 24 24">133        <path d="M15 5l-7 7 7 7" fill="none" stroke="#ff3b6e" stroke-width="3" stroke-linecap="round" stroke-linejoin="round"/>134      </svg>135    </div>136 137    <div class="search-field">138      <svg viewBox="0 0 24 24" width="48" height="48">139        <circle cx="10" cy="10" r="6" stroke="#bdbdc5" fill="none" stroke-width="3"/>140        <path d="M15 15l6 6" stroke="#bdbdc5" stroke-width="3" stroke-linecap="round"/>141      </svg>142      <div class="placeholder">eggplant hasselback</div>143    </div>144 145    <div class="filter-btn">146      <svg viewBox="0 0 24 24">147        <path d="M3 6h14M3 12h10M3 18h6" stroke="#ff3b6e" stroke-width="3" stroke-linecap="round"/>148        <circle cx="19" cy="6" r="2.5" fill="none" stroke="#ff3b6e" stroke-width="3"/>149        <circle cx="15" cy="12" r="2.5" fill="none" stroke="#ff3b6e" stroke-width="3"/>150        <circle cx="11" cy="18" r="2.5" fill="none" stroke="#ff3b6e" stroke-width="3"/>151      </svg>152    </div>153  </div>154 155  <!-- Content Grid -->156  <div class="content">157    <div class="grid">158      <!-- Card 1 -->159      <div class="card">160        <div class="thumb">[IMG: Eggplant Hasselback Dish]</div>161        <div class="title">Eggplant Hasselback</div>162        <div class="meta">163          <!-- Tag icon -->164          <svg viewBox="0 0 24 24">165            <path d="M3 7v6l8 8 10-10-8-8H5a2 2 0 0 0-2 2z" fill="none" stroke="#7fd0c6" stroke-width="2" stroke-linejoin="round"/>166            <circle cx="7" cy="9" r="1.6" fill="#7fd0c6"/>167          </svg>168          <span>Affordable</span>169        </div>170      </div>171 172      <!-- Card 2 -->173      <div class="card">174        <div class="thumb">[IMG: Hasse