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 - Cinnamon Roll Coffee Cake</title>7<style>8  body { margin: 0; padding: 0; background: transparent; font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Inter, Helvetica, Arial, sans-serif; }9  #render-target {10    width: 1080px; height: 2400px;11    position: relative; overflow: hidden;12    background: #1f2227; color: #ECECEC;13  }14 15  /* Top status bar */16  .status-bar {17    height: 110px;18    display: flex; align-items: center; justify-content: space-between;19    padding: 0 40px;20    color: #fff; font-weight: 600; font-size: 38px;21  }22  .status-icons { display: flex; align-items: center; gap: 28px; opacity: 0.9; }23  .status-icons svg { width: 42px; height: 42px; }24 25  /* App bar */26  .app-bar {27    height: 170px;28    display: flex; align-items: center;29    padding: 0 36px;30    border-bottom: 1px solid rgba(255,255,255,0.06);31  }32  .app-left, .app-right { display: flex; align-items: center; gap: 34px; }33  .app-title {34    flex: 1;35    text-align: center;36    font-size: 58px; font-weight: 700;37    white-space: nowrap; overflow: hidden; text-overflow: ellipsis;38    padding-right: 140px; /* space for right icons */39  }40  .icon-btn svg { width: 56px; height: 56px; }41  .icon-btn { color: #ff6b8e; opacity: 0.95; }42 43  /* Section header */44  .section {45    padding: 40px 48px 0 48px;46  }47  .section h2 {48    font-size: 56px; margin: 24px 0 24px; font-weight: 800;49  }50 51  /* Step-by-step button */52  .cta {53    margin: 12px 0 28px;54    background: #cf1f5f; color: #fff;55    height: 120px; border-radius: 22px;56    display: flex; align-items: center; justify-content: center;57    font-size: 44px; font-weight: 800; letter-spacing: 0.5px;58    box-shadow: 0 6px 0 rgba(0,0,0,0.25) inset;59  }60  .cta span { display: inline-flex; align-items: center; gap: 18px; }61 62  /* Steps cards */63  .steps { padding: 0 48px; }64  .step-card {65    background: #2b2e33;66    border-radius: 26px;67    padding: 32px 32px 38px 32px;68    margin-bottom: 30px;69    box-shadow: 0 2px 0 rgba(0,0,0,0.35) inset;70  }71  .step-card .line {72    display: flex; align-items: flex-start; gap: 26px;73  }74  .step-number {75    width: 64px; height: 64px;76    border-radius: 14px;77    background: rgba(255,255,255,0.08);78    color: #fff; font-weight: 800; font-size: 40px;79    display: flex; align-items: center; justify-content: center;80    flex-shrink: 0;81  }82  .step-text {83    font-size: 40px; line-height: 1.45; color: #D9DBDE;84  }85  .step-text .accent { color: #ff2c6c; }86  .step-card .chev {87    margin-left: auto; margin-top: 6px;88  }89 90  /* Ad banner placeholder */91  .ad-wrap {92    margin: 24px 48px;93    background: #2b2e33;94    border-radius: 20px;95    padding: 16px;96  }97  .ad {98    height: 160px;99    border: 1px solid #BDBDBD;100    background: #E0E0E0;101    border-radius: 16px;102    display: flex; align-items: center; justify-content: space-between;103    padding: 0 28px;104    color: #555;105    font-size: 42px; font-weight: 700;106  }107  .ad .label { color: #757575; }108  .ad .install {109    background: #1fbb7c; color: #fff; font-weight: 800;110    padding: 22px 40px; border-radius: 999px; font-size: 40px;111  }112 113  /* Bottom navigation */114  .bottom-nav {115    position: absolute; left: 0; right: 0; bottom: 0;116    height: 210px;117    background: #25282d;118    border-top: 1px solid rgba(255,255,255,0.07);119    display: flex; align-items: center; justify-content: space-around;120  }121  .nav-item {122    display: flex; flex-direction: column; align-items: center; gap: 16px;123    color: #9EA4AB; font-size: 34px; font-weight: 700;124  }125  .nav-item.active { color: #ff3b7a; }126  .nav-item svg { width: 60px; height: 60px; }127  .profile-badge {128    width: 60px; height: 60px; border-radius: 30px;129    background: #4f79ff; color: #fff; display: flex; align-items: center; justify-content: center;130    font-weight: 800;131  }132 133  /* Home indicator */134  .home-indicator {135    position: absolute; bottom: 18px; left: 50%;136    transform: translateX(-50%);137    width: 260px; height: 10px; background: #fff; opacity: 0.85; border-radius: 6px;138  }139</style>140</head>141<body>142<div id="render-target">143 144  <!-- Status bar -->145  <div class="status-bar">146    <div>7:42</div>147    <div class="status-icons">148      <!-- WiFi icon -->149      <svg viewBox="0 0 24 24" fill="none" stroke="#fff" stroke-width="2">150        <path d="M2 9c5-4 15-4 20 0" />151        <path d="M5 12c4-3 10-3 14 0" />152        <path d="M8 15c3-2 5-2 8 0" />153        <circle cx="12" cy="18" r="1.5" fill="#fff" stroke="none"/>154      </svg>155      <!-- Battery icon -->156      <svg viewBox="0 0 28 24" fill="none" stroke="#fff" stroke-width="2">157        <rect x="2" y="6" width="20" height="12" rx="2"/>158        <rect x="4" y="8" width="16" height="8" fill="#fff" stroke="none"/>159        <rect x="22" y="10" width="4" height="4" rx="1"/>160      </svg>161      <div style="font-size:34px;">100%</div>162    </div>163  </div>164 165  <!-- App bar -->166  <div class="app-bar">167    <div class="app-left">168      <!-- Back arrow -->169      <div class="icon-btn">170        <svg viewBox="0 0 24 24" fill="none" stroke="#ff6b8e" stroke-width="2.6" stroke-linecap="round" stroke-linejoin="round">171          <path d="M15 6 L9 12 L15 18"/>172        </svg>173      </div>174    </div>175    <div class="app-title">Cinnamon Roll Coffee C...</div>176    <div class="app-right">177      <!-- Share -->178      <div class="icon-btn">179        <svg viewBox="0 0 24 24" fill="none" stroke="#ff6b8e" stroke-width="2.4" stroke-linecap="round" stroke-linejoin="round">180          <circle cx="18" cy="5" r="3"/>181          <circle cx="6" cy="12" r="3"/>182          <circle cx="18" cy="19" r="3"/>183          <path d="M8.7 11.1 L15.3 7.9"/>184          <path d="M8.7 12.9 L15.3 16.1"/>185        </svg>186      </div>187      <!-- Heart -->188      <div class="icon-btn">189        <svg viewBox="0 0 24 24" fill="none" stroke="#ff6b8e" stroke-width="2.2" stroke-linecap="round" stroke-linejoin="round">190          <path d="M12 20s-7-4.5-7-9.5A4.5 4.5 0 0 1 9.5 6c1.7 0 2.5 1 2.5 1s0.8-1 2.5-1A4.5 4.5 0 0 1 19 10.5C19 15.5 12 20 12 20z"/>191        </svg>192      </div>193    </div>194  </div>195 196  <!-- Content -->197  <div class="section">198    <h2>Preparation</h2>199    <div class="cta">200      <span>Step-by-step mode201        <svg viewBox="0 0 20 20" width="40" height="40" fill="#fff">202          <path d="M6 4 L14 10 L6 16 Z"/>203        </svg>204      </span>205    </div>206  </div>207 208  <div class="steps">209    <!-- Step 1 -->210    <div class="step-card">211      <div class="line">212        <div class="step-number">1</div>213        <div class="step-text">214          Preheat the oven to 350ºF (180ºC). Grease a 9 x 13-inch baking dish with nonstick spray.215        </div>216      </div>217    </div>218 219    <!-- Step 2 -->220    <div class="step-card">221      <div class="line">222        <div class="step-number">2</div>223        <div class="step-text">224          Make the cinnamon topping: In a medium bowl, mix together the butter, brown sugar, salt, flour, McCormick® Ground Cinnamon, and pecans. Microwave for 30 seconds.225        </div>226        <div class="chev">227          <svg viewBox="0 0 20 20" width="34" height="34" fill="#ff2c6c">228            <path d="M6 4 L14 10 L6 16 Z"/>229          </svg>230        </div>231      </div>232    </div>233 234    <!-- Step 3 -->235    <div class="step-card">236      <div class="line">237        <div class="step-number">3</div>238        <div class="step-text">239          Make the cake: In a large bowl, whisk together the flour, granulated sugar, baking powder, and salt.240        </div>241      </div>242    </div>243 244    <!-- Step 4 -->245    <div class="step-card">246      <div class="line">247        <div class="step-number">4</div>248        <div class="step-text">249          In a medium bowl, whisk together the milk, eggs, and vanilla until well-combined.250        </div>251      </div>252    </div>253 254    <!-- Step 5 -->255    <div class="step-card">256      <div class="line">257        <div class="step-number">5</div>258        <div class="step-text">259          Pour the wet ingredients into the dry ingredients and whisk until mostly incorporated but a few dry streaks remain. Whisk in the melted butter.260        </div>261      </div>262    </div>263  </div>264 265  <!-- Ad -->266  <div class="ad-wrap">267    <div class="ad">268      <div class="label">[IMG: Domino's Pizza Ad]</div>269      <div class="install">INSTALL</div>270    </div>271  </div>272 273  <!-- Bottom navigation -->274  <div class="bottom-nav">275    <div class="nav-item active">276      <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.2" stroke-linecap="round">277        <circle cx="10" cy="10" r="7"/>278        <path d="M22 22 L16 16"/>279      </svg>280      <div>Discover</div>281    </div>282    <div class="nav-item">283      <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.2" stroke-linecap="round" stroke-linejoin="round">284        <path d="M6 20c0-4 3-7 6-7s6 3 6 7"/>285        <circle cx="12" cy="10" r="3"/>286      </svg>287      <div>Community</div>288    </div>289    <div class="nav-item">290      <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.2" stroke-linecap="round" stroke-linejoin="round">291        <path d="M6 7h12l-1 12H7z"/>292        <path d="M9 7c0-2 6-2 6 0"/>293      </svg>294      <div>My Bag</div>295    </div>296    <div class="nav-item">297      <div class="profile-badge">C</div>298      <div>Profile</div>299    </div>300    <div class="home-indicator"></div>301  </div>302 303</div>304</body>305</html>