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>Meal Plan - Ingredients</title>7<style>8  body { margin: 0; padding: 0; background: transparent; font-family: Arial, Helvetica, sans-serif; }9  #render-target {10    width: 1080px; height: 2400px; position: relative; overflow: hidden;11    background: #0C1322; /* deep navy app background */12  }13 14  /* Top/hero area */15  .hero {16    position: absolute; top: 0; left: 0; width: 1080px; height: 740px;17    background: #0C1322;18    border-bottom-left-radius: 32px; border-bottom-right-radius: 32px;19  }20  .status-bar {21    height: 88px; color: #fff; font-size: 36px; line-height: 88px;22    padding: 0 32px; opacity: 0.9;23    display: flex; justify-content: space-between; align-items: center;24  }25  .status-icons { display: flex; align-items: center; gap: 24px; }26  .appbar {27    height: 110px; display: flex; align-items: center; justify-content: space-between;28    padding: 0 32px; color: #fff;29  }30  .icon-btn { width: 56px; height: 56px; display: inline-flex; align-items: center; justify-content: center; }31  .cta {32    position: absolute; left: 60px; right: 60px; bottom: 86px;33    height: 124px; border: 4px solid #EC7E2F; color: #EC7E2F; background: transparent;34    border-radius: 22px; font-size: 34px; letter-spacing: 1px; font-weight: 700;35  }36 37  /* Content area */38  .content {39    position: absolute; top: 740px; left: 0; width: 1080px; height: 1660px;40    background: #F3F4F5; padding: 44px 40px 0 40px;41  }42  .section-title {43    font-size: 44px; font-weight: 800; color: #1A1A1A; margin: 0 0 18px 6px;44  }45  .subtle { color: #8E8E8E; font-weight: 600; font-size: 32px; }46 47  .card {48    background: #FFFFFF; border: 1px solid #E3E3E3; border-radius: 22px;49    padding: 28px; margin: 22px 0 40px 0;50    box-shadow: 0 1px 0 rgba(0,0,0,0.04);51  }52  .pill {53    display: inline-block; background: #F7F7F7; border: 1px solid #E5E5E5;54    border-radius: 14px; padding: 18px 26px; font-size: 32px; color: #333;55  }56  .row { display: flex; align-items: center; justify-content: space-between; }57  .dropdown-chevron { width: 44px; height: 44px; }58 59  .ingredients-title {60    font-size: 48px; font-weight: 800; color: #1A1A1A; margin: 16px 0 24px 6px;61  }62  .ingredients-card {63    background: #FFFFFF; border: 1px solid #E3E3E3; border-radius: 22px;64    padding: 26px; margin-top: 6px;65  }66  .qty-header {67    display: flex; align-items: center; justify-content: space-between;68    padding: 10px 8px 20px 8px; color: #666; font-size: 34px; font-weight: 600;69  }70  .qty-badge {71    display: inline-block; margin: 0 8px; padding: 10px 18px;72    background: #FFE6D4; color: #D26B2A; border-radius: 10px; font-weight: 700; font-size: 32px;73  }74  .stepper {75    display: flex; overflow: hidden; border: 1px solid #E3E3E3; border-radius: 12px;76  }77  .stepper button {78    width: 120px; height: 70px; background: #FFFFFF; border: none; font-size: 40px; color: #555;79    display: flex; align-items: center; justify-content: center;80  }81  .divider { height: 1px; background: #E9E9E9; margin: 12px -26px 10px -26px; }82 83  .ingredient-item {84    display: flex; align-items: center; gap: 28px; padding: 22px 4px;85  }86  .img-placeholder {87    width: 110px; height: 110px; background: #E0E0E0; border: 1px solid #BDBDBD;88    display: flex; align-items: center; justify-content: center; color: #757575; font-size: 26px; border-radius: 12px;89  }90  .ing-text { flex: 1; }91  .ing-name { font-size: 40px; font-weight: 800; color: #111; margin-bottom: 6px; }92  .ing-qty { font-size: 32px; color: #8E8E8E; }93 94  /* Bottom gesture bar */95  .bottom-area {96    position: absolute; left: 0; bottom: 0; width: 1080px; height: 140px; background: #000;97  }98  .home-indicator {99    position: absolute; left: 50%; bottom: 44px; transform: translateX(-50%);100    width: 280px; height: 14px; background: #E8E8E8; border-radius: 12px; opacity: 0.9;101  }102</style>103</head>104<body>105<div id="render-target">106 107  <!-- Dark hero area -->108  <div class="hero">109    <div class="status-bar">110      <div>3:19</div>111      <div class="status-icons">112        <!-- Simple status glyphs -->113        <svg width="36" height="36" viewBox="0 0 36 36">114          <circle cx="6" cy="18" r="4" fill="#fff" />115          <circle cx="18" cy="18" r="4" fill="#fff" />116          <circle cx="30" cy="18" r="4" fill="#fff" />117        </svg>118        <svg width="40" height="36" viewBox="0 0 40 36">119          <rect x="2" y="10" width="26" height="16" rx="3" ry="3" fill="none" stroke="#fff" stroke-width="3"/>120          <rect x="30" y="14" width="8" height="8" fill="#fff"/>121        </svg>122      </div>123    </div>124 125    <div class="appbar">126      <div class="icon-btn">127        <svg width="54" height="54" viewBox="0 0 54 54">128          <path d="M34 10 L18 27 L34 44" fill="none" stroke="#FFFFFF" stroke-width="5" stroke-linecap="round" stroke-linejoin="round"/>129        </svg>130      </div>131      <div style="display:flex; align-items:center; gap:26px;">132        <div class="icon-btn" title="Share">133          <svg width="46" height="46" viewBox="0 0 46 46">134            <circle cx="10" cy="23" r="5" fill="none" stroke="#FFFFFF" stroke-width="3"/>135            <circle cx="36" cy="10" r="5" fill="none" stroke="#FFFFFF" stroke-width="3"/>136            <circle cx="36" cy="36" r="5" fill="none" stroke="#FFFFFF" stroke-width="3"/>137            <path d="M14 21 L31 12" stroke="#FFFFFF" stroke-width="3" />138            <path d="M14 25 L31 34" stroke="#FFFFFF" stroke-width="3" />139          </svg>140        </div>141        <div style="display:flex; align-items:center; gap:10px;">142          <div class="icon-btn" title="Comments">143            <svg width="54" height="54" viewBox="0 0 54 54">144              <rect x="8" y="10" width="36" height="26" rx="6" ry="6" fill="none" stroke="#FFFFFF" stroke-width="4"/>145              <path d="M16 40 L24 36 L38 36" stroke="#FFFFFF" stroke-width="4" fill="none" stroke-linecap="round"/>146            </svg>147          </div>148          <span style="color:#fff; font-size:30px;">0</span>149        </div>150      </div>151    </div>152 153    <button class="cta">ADD TO MY MEAL PLAN</button>154  </div>155 156  <!-- Light content area -->157  <div class="content">158 159    <div class="section-title">Nutrient Info <span class="subtle">(Per Serving)</span></div>160    <div class="card">161      <div class="row">162        <div class="pill">Calories 275 kcal</div>163        <svg class="dropdown-chevron" viewBox="0 0 24 24">164          <path d="M6 9 L12 15 L18 9" fill="none" stroke="#666" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>165        </svg>166      </div>167    </div>168 169    <div class="ingredients-title">Ingredients - 9</div>170    <div class="ingredients-card">171      <div class="qty-header">172        <div>173          Quantity for <span class="qty-badge">8</span> Serving174        </div>175        <div class="stepper">176          <button aria-label="Decrease">177            <svg width="40" height="40" viewBox="0 0 40 40">178              <rect x="8" y="18" width="24" height="4" fill="#999"/>179            </svg>180          </button>181          <button aria-label="Increase" style="border-left:1px solid #E3E3E3;">182            <svg width="40" height="40" viewBox="0 0 40 40">183              <rect x="18" y="8" width="4" height="24" fill="#999"/>184              <rect x="8" y="18" width="24" height="4" fill="#999"/>185            </svg>186          </button>187        </div>188      </div>189 190      <div class="divider"></div>191 192      <!-- Ingredient items -->193      <div class="ingredient-item">194        <div class="img-placeholder">[IMG: Yeast]</div>195        <div class="ing-text">196          <div class="ing-name">Instant Dry Yeast</div>197          <div class="ing-qty">1¼ tsp</div>198        </div>199      </div>200 201      <div class="ingredient-item">202        <div class="img-placeholder">[IMG: Water Bottle]</div>203        <div class="ing-text">204          <div class="ing-name">Water</div>205          <div class="ing-qty">1½ cup</div>206        </div>207      </div>208 209      <div class="ingredient-item">210        <div class="img-placeholder">[IMG: Maida Flour]</div>211        <div class="ing-text">212          <div class="ing-name">Maida</div>213          <div class="ing-qty">3½ cup</div>214        </div>215      </div>216 217      <div class="ingredient-item">218        <div class="img-placeholder">[IMG: Salt Shaker]</div>219        <div class="ing-text">220          <div class="ing-name">Salt</div>221          <div class="ing-qty">2 tsp</div>222        </div>223      </div>224 225      <div class="ingredient-item">226        <div class="img-placeholder">[IMG: Sugar]</div>227        <div class="ing-text">228          <div class="ing-name">Sugar</div>229          <div class="ing-qty">2 tsp</div>230        </div>231      </div>232 233      <div class="ingredient-item">234        <div class="img-placeholder">[IMG: Olive Oil Bottle]</div>235        <div class="ing-text">236          <div class="ing-name">Olive Oil</div>237          <div class="ing-qty">4 tbsp</div>238        </div>239      </div>240 241      <div class="ingredient-item">242        <div class="img-placeholder">[IMG: Olives Bowl]</div>243        <div class="ing-text">244          <div class="ing-name">Olives</div>245          <div class="ing-qty">½ cup</div>246        </div>247      </div>248    </div>249  </div>250 251  <div class="bottom-area">252    <div class="home-indicator"></div>253  </div>254</div>255</body>256</html>