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 - Apple Pie</title>7<style>8  body { margin: 0; padding: 0; background: transparent; font-family: "Segoe UI", Arial, sans-serif; }9  #render-target {10    width: 1080px; height: 2400px; position: relative; overflow: hidden;11    background: #2A2B2F; color: #EEE;12  }13  .status-bar {14    position: absolute; top: 0; left: 0; width: 100%; height: 110px;15    display: flex; align-items: center; justify-content: space-between;16    padding: 0 40px; color: #EEE; font-size: 34px; letter-spacing: 0.5px;17  }18  .status-right { display: flex; gap: 26px; align-items: center; }19  .icon {20    display: inline-flex; align-items: center; justify-content: center;21  }22  .icon svg { display: block; }23  /* Header controls */24  .top-controls {25    position: absolute; top: 140px; left: 40px; right: 40px;26    display: flex; align-items: center; justify-content: space-between;27  }28  .controls-left { display: flex; align-items: center; gap: 26px; }29  .controls-right { display: flex; align-items: center; gap: 30px; }30  .accent { color: #F05B8C; }31  /* Title and description */32  .title { position: absolute; top: 220px; left: 40px; right: 40px; }33  .title h1 {34    margin: 0; font-size: 76px; font-weight: 800; line-height: 1.12; color: #EDEDED;35  }36  .title p {37    margin: 24px 0 0; font-size: 32px; line-height: 1.5; color: #B9BAC0;38    max-width: 940px;39  }40  .chevron {41    position: absolute; top: 530px; right: 40px;42  }43  /* Featured and rating */44  .meta { position: absolute; top: 620px; left: 40px; right: 40px; }45  .meta .featured {46    font-size: 32px; color: #CFCFD4;47  }48  .featured .link { color: #F58AA7; font-weight: 700; }49  .rating {50    margin-top: 30px; display: flex; align-items: center; gap: 18px; color: #DADAE0; font-size: 34px;51  }52  /* Hero image */53  .hero {54    position: absolute; top: 760px; left: 0; width: 1080px; height: 880px; 55  }56  .img-placeholder {57    width: 100%; height: 100%; background: #E0E0E0; border-top: 1px solid #BDBDBD; border-bottom: 1px solid #BDBDBD;58    display: flex; align-items: center; justify-content: center; color: #757575; font-size: 38px; font-weight: 600;59  }60  .play-btn {61    position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%);62    width: 140px; height: 140px; border-radius: 50%; background: #F05B8C; display: flex; align-items: center; justify-content: center; box-shadow: 0 6px 16px rgba(0,0,0,0.35);63  }64  /* Ingredients section */65  .ingredients {66    position: absolute; top: 1645px; left: 0; width: 100%; background: #2A2B2F;67    padding: 50px 40px 0;68  }69  .ingredients h2 {70    margin: 0; font-size: 56px; font-weight: 800; color: #EDEDED;71  }72  .servings-row {73    margin-top: 10px; display: flex; align-items: center; justify-content: space-between;74  }75  .servings-text { font-size: 34px; color: #B9BAC0; }76  .stepper {77    width: 280px; height: 110px; border: 2px solid #3F4046; border-radius: 24px;78    display: flex; align-items: center; justify-content: space-between; padding: 0 28px; color: #EDEDED; background: #2D2E33;79  }80  .stepper .minus, .stepper .plus { color: #F05B8C; font-size: 60px; line-height: 0.8; font-weight: 700; }81  .stepper .value { font-size: 42px; font-weight: 700; }82  .subhead {83    margin-top: 50px; font-size: 36px; letter-spacing: 2px; font-weight: 800; color: #CFCFD4;84  }85  /* Bottom navigation */86  .bottom-nav {87    position: absolute; bottom: 80px; left: 0; width: 100%; height: 140px;88    display: flex; align-items: center; justify-content: space-around; background: rgba(22,22,24,0.35);89    backdrop-filter: blur(2px);90  }91  .nav-item { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 16px; color: #B9BAC0; font-size: 26px; }92  .nav-item.active { color: #F05B8C; font-weight: 700; }93  .nav-icon svg { width: 48px; height: 48px; }94  .profile-dot {95    width: 58px; height: 58px; border-radius: 50%; background: #9B7D74; display: flex; align-items: center; justify-content: center; color: #F1E9E6; font-weight: 700;96  }97  .home-indicator {98    position: absolute; bottom: 20px; left: 50%; transform: translateX(-50%);99    width: 340px; height: 12px; background: #DADADA; border-radius: 10px; opacity: 0.8;100  }101</style>102</head>103<body>104<div id="render-target">105  <!-- Status bar -->106  <div class="status-bar">107    <div>10:46  60°</div>108    <div class="status-right">109      <!-- Simple status icons -->110      <span class="icon">111        <svg width="40" height="40" viewBox="0 0 24 24" fill="none">112          <path d="M4 7h16l-8 10-8-10z" stroke="#EEE" stroke-width="2" fill="none"/>113        </svg>114      </span>115      <span class="icon">116        <svg width="40" height="40" viewBox="0 0 24 24" fill="none">117          <path d="M4 8h16v12H4z" stroke="#EEE" stroke-width="2"/>118          <path d="M8 4h8l-1 4H9l-1-4z" fill="#EEE"/>119        </svg>120      </span>121    </div>122  </div>123 124  <!-- Top controls -->125  <div class="top-controls">126    <div class="controls-left">127      <span class="icon accent">128        <svg width="48" height="48" viewBox="0 0 24 24" fill="none">129          <path d="M15 18l-6-6 6-6" stroke="#F05B8C" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>130        </svg>131      </span>132    </div>133    <div class="controls-right">134      <span class="icon accent">135        <!-- share icon -->136        <svg width="48" height="48" viewBox="0 0 24 24" fill="none">137          <circle cx="6" cy="12" r="2.4" fill="#F05B8C"/>138          <circle cx="18" cy="6" r="2.4" fill="#F05B8C"/>139          <circle cx="18" cy="18" r="2.4" fill="#F05B8C"/>140          <path d="M8.4 11.2L15.6 7.4M8.4 12.8L15.6 16.6" stroke="#F05B8C" stroke-width="2" stroke-linecap="round"/>141        </svg>142      </span>143      <span class="icon accent">144        <!-- heart outline -->145        <svg width="52" height="52" viewBox="0 0 24 24" fill="none">146          <path d="M12 20s-7-4.4-7-10a4.5 4.5 0 0 1 8-2.7A4.5 4.5 0 0 1 19 10c0 5.6-7 10-7 10z" stroke="#F05B8C" stroke-width="2" fill="none"/>147        </svg>148      </span>149    </div>150  </div>151 152  <!-- Title and description -->153  <div class="title">154    <h1>Apple Pie From Scratch</h1>155    <p>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.</p>156  </div>157 158  <!-- Chevron -->159  <div class="chevron">160    <svg width="44" height="44" viewBox="0 0 24 24" fill="none">161      <path d="M6 9l6 6 6-6" stroke="#F05B8C" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>162    </svg>163  </div>164 165  <!-- Meta lines -->166  <div class="meta">167    <div class="featured">featured in <span class="link">18 Tasty Pie Recipes</span></div>168    <div class="rating">169      <span style="font-size:40px;">👍</span>170      <span><strong>97%</strong> would make this again</span>171    </div>172  </div>173 174  <!-- Hero image with play button -->175  <div class="hero">176    <div class="img-placeholder">[IMG: Apple Pie slice with ice cream]</div>177    <div class="play-btn">178      <svg width="70" height="70" viewBox="0 0 24 24" fill="none">179        <path d="M8 6l10 6-10 6V6z" fill="#FFF"/>180      </svg>181    </div>182  </div>183 184  <!-- Ingredients section -->185  <div class="ingredients">186    <h2>Ingredients for</h2>187    <div class="servings-row">188      <div class="servings-text">8 servings</div>189      <div class="stepper">190        <div class="minus">–</div>191        <div class="value">8</div>192        <div class="plus">+</div>193      </div>194    </div>195 196    <div class="subhead">PIE DOUGH</div>197  </div>198 199  <!-- Bottom navigation -->200  <div class="bottom-nav">201    <div class="nav-item active">202      <div class="nav-icon">203        <!-- search icon -->204        <svg viewBox="0 0 24 24">205          <circle cx="11" cy="11" r="6" stroke="#F05B8C" stroke-width="2" fill="none"/>206          <path d="M20 20l-4.2-4.2" stroke="#F05B8C" stroke-width="2" stroke-linecap="round"/>207        </svg>208      </div>209      <div>Discover</div>210    </div>211    <div class="nav-item">212      <div class="nav-icon">213        <!-- pot icon -->214        <svg viewBox="0 0 24 24">215          <rect x="4" y="9" width="16" height="9" rx="2" stroke="#B9BAC0" stroke-width="2" fill="none"/>216          <path d="M7 9V7h10v2" stroke="#B9BAC0" stroke-width="2"/>217          <path d="M6 5c1-1 1 1 2 0M12 5c1-1 1 1 2 0M16 5c1-1 1 1 2 0" stroke="#B9BAC0" stroke-width="2" stroke-linecap="round"/>218        </svg>219      </div>220      <div>Community</div>221    </div>222    <div class="nav-item">223      <div class="nav-icon">224        <!-- cart icon -->225        <svg viewBox="0 0 24 24">226          <path d="M3 5h3l2 10h9l2-7H7" stroke="#B9BAC0" stroke-width="2" fill="none" stroke-linecap="round" stroke-linejoin="round"/>227          <circle cx="9" cy="19" r="1.8" fill="#B9BAC0"/>228          <circle cx="17" cy="19" r="1.8" fill="#B9BAC0"/>229        </svg>230      </div>231      <div>My Cart</div>232    </div>233    <div class="nav-item">234      <div class="profile-dot">I</div>235      <div>Profile</div>236    </div>237  </div>238 239  <!-- Home indicator -->240  <div class="home-indicator"></div>241</div>242</body>243</html>