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 Detail - 5-ingredient Healthy Brownies</title>7<style>8  body { margin: 0; padding: 0; background: transparent; }9  #render-target {10    width: 1080px;11    height: 2400px;12    position: relative;13    overflow: hidden;14    background: #232326;15    color: #EDEDED;16    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;17  }18 19  /* Status bar (mock) */20  .status-bar {21    height: 84px;22    padding: 0 40px;23    display: flex;24    align-items: center;25    justify-content: space-between;26    color: #f3f3f3;27    font-weight: 600;28    font-size: 34px;29    opacity: 0.9;30  }31  .status-icons { display: flex; gap: 26px; align-items: center; }32  .status-dot {33    width: 18px; height: 18px; border-radius: 50%;34    background: #f8f8f8;35    opacity: .95;36  }37 38  /* Header controls */39  .top-actions {40    padding: 22px 40px 0 40px;41    display: flex;42    align-items: center;43    justify-content: space-between;44    color: #f2a0ad;45  }46  .icon-btn {47    width: 60px; height: 60px;48    display: inline-flex; align-items: center; justify-content: center;49    cursor: default;50  }51  .content {52    padding: 10px 64px 0 64px;53  }54  h1 {55    margin: 10px 0 18px 0;56    font-size: 84px;57    line-height: 1.05;58    font-weight: 800;59    letter-spacing: -0.5px;60    color: #E8E8E8;61  }62  .desc {63    font-size: 36px;64    line-height: 1.55;65    color: #CFCFCF;66    margin-bottom: 26px;67  }68  .featured {69    font-size: 36px;70    color: #CFCFCF;71    margin: 18px 0 32px 0;72  }73  .featured .link {74    color: #F09AA8;75    font-weight: 800;76  }77 78  .meta {79    display: flex;80    flex-direction: column;81    gap: 26px;82    margin-bottom: 36px;83  }84  .meta-row {85    display: flex; align-items: center; gap: 18px;86    font-size: 38px; color: #E7E7E7;87  }88  .meta-row .muted { color: #D0D0D0; }89  .meta-row strong { font-weight: 800; }90 91  /* Video/Image placeholder */92  .video-placeholder {93    width: 100%;94    height: 1050px;95    background: #E0E0E0;96    border-top: 1px solid #BDBDBD;97    border-bottom: 1px solid #BDBDBD;98    display: flex; flex-direction: column;99    align-items: center; justify-content: center;100    color: #333;101    text-align: center;102  }103  .video-placeholder .title {104    font-size: 72px; font-weight: 800; letter-spacing: 3px; color: #111;105    margin-bottom: 18px;106  }107  .video-placeholder .subtitle { font-size: 54px; color: #333; }108 109  /* Ad banner */110  .ad-wrap {111    position: absolute;112    left: 0; right: 0;113    bottom: 245px; /* sit above bottom nav */114    display: flex; justify-content: center;115    pointer-events: none;116  }117  .ad {118    width: 900px; height: 150px;119    background: #E0E0E0;120    border: 1px solid #BDBDBD;121    border-radius: 12px;122    display: flex; align-items: center; justify-content: center;123    color: #757575;124    font-weight: 700; font-size: 40px;125  }126 127  /* Bottom navigation */128  .bottom-nav {129    position: absolute;130    left: 0; bottom: 0;131    width: 100%; height: 220px;132    background: #1E1F22;133    border-top: 1px solid rgba(255,255,255,0.06);134    display: flex; align-items: center; justify-content: space-around;135  }136  .nav-item {137    width: 210px; height: 170px;138    display: flex; flex-direction: column;139    align-items: center; justify-content: center;140    gap: 16px; color: #CFCFCF; font-size: 32px;141  }142  .nav-item.active { color: #F09AA8; }143  .avatar {144    width: 68px; height: 68px; border-radius: 50%;145    background: #D06B3B; color: #fff; display: flex; align-items: center; justify-content: center;146    font-weight: 800; font-size: 36px;147  }148 149  /* Helper icons */150  svg { display: block; }151</style>152</head>153<body>154<div id="render-target">155 156  <!-- Mock status bar -->157  <div class="status-bar">158    <div>7:44</div>159    <div class="status-icons">160      <div class="status-dot"></div>161      <div class="status-dot"></div>162    </div>163  </div>164 165  <!-- Top action row -->166  <div class="top-actions">167    <div class="icon-btn" aria-label="Back">168      <svg width="48" height="48" viewBox="0 0 24 24" fill="#F09AA8">169        <path d="M14.5 5L8 11.5 14.5 18" stroke="#F09AA8" stroke-width="2.5" stroke-linecap="round" stroke-linejoin="round"/>170      </svg>171    </div>172    <div style="display:flex; gap:28px;">173      <div class="icon-btn" aria-label="Share">174        <svg width="48" height="48" viewBox="0 0 24 24" fill="#F09AA8">175          <path d="M18 8a3 3 0 10-2.8-4h0A3 3 0 1012 9l4.5-2.5M6 20a3 3 0 112.8-4" stroke="#F09AA8" stroke-width="2.4" stroke-linecap="round" stroke-linejoin="round"/>176        </svg>177      </div>178      <div class="icon-btn" aria-label="Favorite">179        <svg width="48" height="48" viewBox="0 0 24 24" fill="#F09AA8">180          <path d="M12 20.5l-1.3-1.18C6 15 3 12.3 3 8.9A4.4 4.4 0 017.5 4.5c1.5 0 3 .74 3.9 1.9a5 5 0 013.9-1.9A4.4 4.4 0 0120.7 9c0 3.4-3 6.1-7.7 10.4L12 20.5z"/>181        </svg>182      </div>183    </div>184  </div>185 186  <!-- Main content -->187  <div class="content">188    <h1>5-ingredient Healthy Brownies</h1>189    <div class="desc">190      These brownies prove that sometimes less is more. With just five simple ingredients, you can create a rich and fudgy dessert that will satisfy any chocolate craving.191    </div>192 193    <div class="featured">194      featured in <span class="link">7 Desserts That Are 5 Ingredients Or Less</span>195    </div>196 197    <div class="meta">198      <div class="meta-row">199        <!-- thumbs up -->200        <svg width="40" height="40" viewBox="0 0 24 24" fill="none">201          <path d="M2 10h4v10H2zM8.5 20H17a3 3 0 003-3v-3.7a2 2 0 00-2-2h-5.2l.6-3.7a2.3 2.3 0 00-4.6.5V11" stroke="#E7E7E7" stroke-width="2.2" stroke-linecap="round" stroke-linejoin="round"/>202        </svg>203        <span><strong>90%</strong> would make this again</span>204      </div>205      <div class="meta-row">206        <!-- clock -->207        <svg width="40" height="40" viewBox="0 0 24 24" fill="none">208          <circle cx="12" cy="12" r="9" stroke="#E7E7E7" stroke-width="2.2"/>209          <path d="M12 7v6l4 2" stroke="#E7E7E7" stroke-width="2.2" stroke-linecap="round" stroke-linejoin="round"/>210        </svg>211        <span>Ready in <strong>under 30 minutes</strong></span>212      </div>213    </div>214  </div>215 216  <!-- Video/Image placeholder -->217  <div class="video-placeholder">218    <div class="title">MICROWAVE</div>219    <div class="subtitle">15-sec intervals</div>220    <div style="margin-top:28px; color:#757575; font-size:34px;">[IMG: Recipe video frame]</div>221  </div>222 223  <!-- Ad banner -->224  <div class="ad-wrap">225    <div class="ad">[IMG: Sponsored Banner Ad]</div>226  </div>227 228  <!-- Bottom navigation -->229  <div class="bottom-nav">230    <div class="nav-item active">231      <svg width="54" height="54" viewBox="0 0 24 24" fill="none">232        <circle cx="11" cy="11" r="7" stroke="#F09AA8" stroke-width="2.4"/>233        <path d="M20 20l-4-4" stroke="#F09AA8" stroke-width="2.4" stroke-linecap="round"/>234      </svg>235      <div>Discover</div>236    </div>237    <div class="nav-item">238      <svg width="54" height="54" viewBox="0 0 24 24" fill="none">239        <path d="M7 19h10M6 10h12l-1 7H7L6 10zm3-5h6l1 5H8l1-5z" stroke="#CFCFCF" stroke-width="2"/>240      </svg>241      <div>Community</div>242    </div>243    <div class="nav-item">244      <svg width="54" height="54" viewBox="0 0 24 24" fill="none">245        <path d="M6 7h12l-1.5 12H7.5L6 7zm2-3h8v3H8V4z" stroke="#CFCFCF" stroke-width="2"/>246      </svg>247      <div>My Bag</div>248    </div>249    <div class="nav-item">250      <div class="avatar">C</div>251      <div>Profile</div>252    </div>253  </div>254 255</div>256</body>257</html>