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 UI - Apple Pie</title>7<style>8  body { margin: 0; padding: 0; background: transparent; font-family: system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif; }9  #render-target {10    width: 1080px; height: 2400px;11    position: relative; overflow: hidden;12    background: #2b2c2f; color: #f3f3f3;13  }14 15  .status-bar {16    position: absolute; top: 0; left: 0; width: 100%; height: 110px;17    padding: 30px 40px 0 40px; box-sizing: border-box;18    color: #eaeaea; font-weight: 600; font-size: 40px;19  }20  .status-right {21    position: absolute; right: 40px; top: 30px; display: flex; gap: 26px; align-items: center;22  }23  .icon { display: inline-block; vertical-align: middle; }24  .accent { color: #ff6f8e; }25  .muted { color: #b7b7be; }26 27  .header-area {28    position: absolute; left: 40px; top: 130px; right: 40px;29  }30  .top-actions {31    display: flex; justify-content: space-between; align-items: center; margin-bottom: 40px;32  }33  .left-actions { display: flex; align-items: center; gap: 22px; }34  .right-actions { display: flex; align-items: center; gap: 30px; }35  .back-btn svg { width: 38px; height: 38px; stroke: #ff6f8e; stroke-width: 8; fill: none; }36  .share-icon svg { width: 44px; height: 44px; stroke: #ff6f8e; stroke-width: 6; fill: none; }37  .heart-icon svg { width: 48px; height: 48px; stroke: #ff6f8e; stroke-width: 6; fill: none; }38 39  h1.title {40    font-size: 80px; line-height: 1.05; margin: 0 0 26px 0; font-weight: 800; letter-spacing: 0.2px;41  }42  .desc {43    font-size: 36px; line-height: 1.5; color: #c7c7cc; max-width: 960px;44  }45  .chev-down { margin-top: 24px; }46  .chev-down svg { width: 40px; height: 40px; stroke: #ff6f8e; stroke-width: 8; fill: none; }47 48  .featured {49    margin-top: 30px; font-size: 34px; color: #dddddf;50  }51  .featured .link { color: #ff8ea5; font-weight: 800; }52 53  .rating-row {54    margin-top: 28px; display: flex; align-items: center; gap: 18px; font-size: 40px; color: #eaeaea;55  }56  .thumb-icon svg { width: 44px; height: 44px; stroke: #eaeaea; stroke-width: 6; fill: none; }57 58  .hero-image {59    position: absolute; left: 0; right: 0; top: 720px; height: 800px;60    background: #E0E0E0; border-top: 1px solid #BDBDBD; border-bottom: 1px solid #BDBDBD;61    display: flex; justify-content: center; align-items: center; color: #757575; font-size: 38px; font-weight: 600;62  }63 64  .ingredients-bar {65    position: absolute; left: 0; right: 0; top: 1540px; height: 160px;66    background: #33343a; border-top: 1px solid #3e4046; border-bottom: 1px solid #3e4046;67    display: flex; align-items: center; padding: 0 40px; box-sizing: border-box;68  }69  .ingredients-title { font-size: 58px; font-weight: 800; }70  .qty-control {71    margin-left: auto; display: flex; align-items: center; gap: 22px;72    background: #2b2c2f; border: 2px solid #45464c; border-radius: 20px; padding: 16px 28px; height: 92px;73  }74  .qty-btn {75    width: 50px; height: 50px; border-radius: 50%; background: #33343a;76    display: flex; justify-content: center; align-items: center; color: #ff6f8e; font-size: 44px; font-weight: 700;77  }78  .qty-number { font-size: 52px; font-weight: 800; color: #f3f3f3; width: 60px; text-align: center; }79 80  .ad-strip {81    position: absolute; left: 40px; right: 40px; top: 1700px; height: 220px;82    background: #ffffff; border: 1px solid #dadada; border-radius: 16px;83    display: flex; align-items: center; gap: 14px; padding: 16px; box-sizing: border-box;84    overflow: hidden;85  }86  .ad-thumb {87    width: 180px; height: 180px; background: #E0E0E0; border: 1px solid #BDBDBD;88    display: flex; justify-content: center; align-items: center; color: #757575; font-size: 26px; text-align: center;89  }90 91  .bottom-nav {92    position: absolute; left: 0; right: 0; bottom: 90px; height: 180px;93    background: #2f3034; border-top: 1px solid #3d3f44;94    display: flex; justify-content: space-around; align-items: center; color: #cfcfd6;95  }96  .nav-item { display: flex; flex-direction: column; align-items: center; gap: 18px; font-size: 30px; }97  .nav-item .label { font-weight: 700; }98  .nav-item svg { width: 54px; height: 54px; stroke: #bdbdc4; stroke-width: 6; fill: none; }99  .nav-item.active .label { color: #ff6f8e; }100  .nav-item.active svg { stroke: #ff6f8e; }101 102  .home-indicator {103    position: absolute; left: 50%; transform: translateX(-50%);104    bottom: 24px; width: 260px; height: 12px; background: #ffffff; border-radius: 6px; opacity: 0.9;105  }106</style>107</head>108<body>109<div id="render-target">110 111  <!-- Status Bar -->112  <div class="status-bar">113    <div>10:46 <span class="muted" style="font-weight:600;">60°</span></div>114    <div class="status-right">115      <!-- simple network icon -->116      <svg class="icon" viewBox="0 0 64 64">117        <path d="M6 48 L58 16" stroke="#eaeaea" stroke-width="6" fill="none"/>118        <circle cx="6" cy="48" r="4" fill="#eaeaea"/>119        <circle cx="58" cy="16" r="4" fill="#eaeaea"/>120      </svg>121      <!-- wifi icon -->122      <svg class="icon" viewBox="0 0 64 64">123        <path d="M8 26 C20 16,44 16,56 26" stroke="#eaeaea" stroke-width="6" fill="none"/>124        <path d="M16 34 C26 26,38 26,48 34" stroke="#eaeaea" stroke-width="6" fill="none"/>125        <circle cx="32" cy="44" r="5" fill="#eaeaea"/>126      </svg>127      <!-- battery icon -->128      <svg class="icon" viewBox="0 0 84 64">129        <rect x="6" y="12" width="64" height="40" rx="6" ry="6" stroke="#eaeaea" stroke-width="6" fill="none"/>130        <rect x="72" y="22" width="10" height="20" fill="#eaeaea"/>131        <rect x="12" y="18" width="52" height="28" fill="#eaeaea"/>132      </svg>133    </div>134  </div>135 136  <!-- Header Area -->137  <div class="header-area">138    <div class="top-actions">139      <div class="left-actions">140        <div class="back-btn">141          <svg viewBox="0 0 80 80">142            <path d="M50 16 L22 40 L50 64" />143          </svg>144        </div>145      </div>146      <div class="right-actions">147        <div class="share-icon">148          <svg viewBox="0 0 80 80">149            <circle cx="18" cy="40" r="8" />150            <circle cx="60" cy="20" r="8" />151            <circle cx="60" cy="60" r="8" />152            <path d="M26 40 L52 24" />153            <path d="M26 40 L52 56" />154          </svg>155        </div>156        <div class="heart-icon">157          <svg viewBox="0 0 80 80">158            <path d="M40 64 L28 52 C14 40 14 22 28 22 C34 22 38 26 40 30 C42 26 46 22 52 22 C66 22 66 40 52 52 L40 64" />159          </svg>160        </div>161      </div>162    </div>163 164    <h1 class="title">Apple Pie From Scratch</h1>165    <div class="desc">166      Nothing beats a classic apple pie made from scratch. This recipe will guide you through every step, from making the flaky crust to the cinnamon-spiced filling, resulting in a dessert that's a favorite for a reason.167    </div>168    <div class="chev-down">169      <svg viewBox="0 0 80 80">170        <path d="M20 30 L40 50 L60 30" />171      </svg>172    </div>173 174    <div class="featured">featured in <span class="link">18 Tasty Pie Recipes</span></div>175 176    <div class="rating-row">177      <div class="thumb-icon">178        <svg viewBox="0 0 80 80">179          <path d="M20 50 L20 28 L28 28 L28 50 Z" />180          <path d="M28 28 L40 18 L40 50 L24 50" />181        </svg>182      </div>183      <div><span style="font-weight:800;">97%</span> would make this again</div>184    </div>185  </div>186 187  <!-- Hero Image Placeholder -->188  <div class="hero-image">[IMG: Close-up Apple Pie with Ice Cream]</div>189 190  <!-- Ingredients Bar -->191  <div class="ingredients-bar">192    <div class="ingredients-title">Ingredients for</div>193    <div class="qty-control">194      <div class="qty-btn">−</div>195      <div class="qty-number">8</div>196      <div class="qty-btn">+</div>197    </div>198  </div>199 200  <!-- Ad Strip -->201  <div class="ad-strip">202    <div class="ad-thumb">[IMG: App Install Badge]</div>203    <div class="ad-thumb">[IMG: Microwave]</div>204    <div class="ad-thumb">[IMG: Small Cabinet]</div>205    <div class="ad-thumb">[IMG: Wardrobe]</div>206    <div class="ad-thumb">[IMG: Sofa]</div>207    <div class="ad-thumb">[IMG: Landscape Photo]</div>208  </div>209 210  <!-- Bottom Navigation -->211  <div class="bottom-nav">212    <div class="nav-item active">213      <svg viewBox="0 0 80 80"><circle cx="34" cy="34" r="18" /><path d="M56 56 L72 72" /></svg>214      <div class="label">Discover</div>215    </div>216    <div class="nav-item">217      <svg viewBox="0 0 80 80"><path d="M22 54 C22 40 58 40 58 54" /><rect x="26" y="58" width="28" height="8" /></svg>218      <div class="label">Community</div>219    </div>220    <div class="nav-item">221      <svg viewBox="0 0 80 80"><rect x="16" y="26" width="48" height="28" rx="6" /><path d="M16 26 L10 16 M64 26 L70 16" /></svg>222      <div class="label">My Cart</div>223    </div>224    <div class="nav-item">225      <svg viewBox="0 0 80 80"><circle cx="40" cy="30" r="12" /><path d="M18 66 C18 50 62 50 62 66" /></svg>226      <div class="label">Profile</div>227    </div>228  </div>229 230  <!-- Home Indicator -->231  <div class="home-indicator"></div>232 233</div>234</body>235</html>