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 Steps - Apple Pie From Scratch</title>7<style>8  body { margin: 0; padding: 0; background: transparent; font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, "Noto Sans", "Apple Color Emoji", "Segoe UI Emoji"; }9  #render-target {10    position: relative;11    overflow: hidden;12    width: 1080px;13    height: 2400px;14    background: #1f2328;15    color: #E7E9ED;16  }17 18  .status-bar {19    height: 110px;20    padding: 0 36px;21    display: flex;22    align-items: center;23    justify-content: space-between;24    color: #E7E9ED;25    font-size: 34px;26    letter-spacing: 0.5px;27    opacity: 0.95;28  }29  .status-left { display: flex; align-items: center; gap: 14px; }30  .status-right { display: flex; align-items: center; gap: 22px; }31 32  .header {33    height: 150px;34    padding: 0 36px;35    display: flex;36    align-items: center;37    justify-content: space-between;38  }39  .header-left { display: flex; align-items: center; gap: 24px; }40  .title {41    font-weight: 800;42    font-size: 56px;43    color: #F2F3F5;44    letter-spacing: 0.3px;45  }46  .header-actions { display: flex; align-items: center; gap: 28px; }47 48  .content {49    position: absolute;50    left: 0; right: 0;51    top: 260px; /* below status + header */52    bottom: 310px; /* keep space for ad + nav */53    overflow: hidden;54    padding: 24px 30px 0 30px;55  }56 57  .list {58    position: absolute;59    inset: 0;60    overflow-y: auto;61    padding-right: 10px;62  }63 64  .card {65    background: #2a2f36;66    border-radius: 22px;67    padding: 34px 36px;68    display: flex;69    gap: 28px;70    align-items: flex-start;71    margin: 18px 6px;72    box-shadow: inset 0 0 0 1px rgba(255,255,255,0.04);73  }74  .num {75    min-width: 84px;76    height: 84px;77    border-radius: 14px;78    background: #22262c;79    display: flex;80    align-items: center;81    justify-content: center;82    color: #FFFFFF;83    font-weight: 800;84    font-size: 40px;85  }86  .card-text {87    color: #D6DADF;88    font-size: 40px;89    line-height: 1.5;90    flex: 1;91  }92  .play {93    margin-left: 10px;94    vertical-align: -4px;95  }96 97  /* Bottom ad banner */98  .ad-banner {99    position: absolute;100    left: 24px;101    right: 24px;102    bottom: 210px;103    height: 180px;104    background: #FFFFFF;105    color: #222;106    border-radius: 22px;107    box-shadow: 0 10px 30px rgba(0,0,0,0.35);108    display: flex;109    align-items: center;110    padding: 22px 26px;111    gap: 24px;112  }113  .ad-icon {114    width: 116px; height: 116px;115    background: #E0E0E0;116    border: 1px solid #BDBDBD;117    border-radius: 26px;118    display: flex; align-items: center; justify-content: center;119    color: #757575; font-weight: 600;120    font-size: 26px;121    flex-shrink: 0;122  }123  .ad-info { flex: 1; }124  .ad-title { font-size: 44px; font-weight: 700; margin-bottom: 6px; }125  .ad-sub { font-size: 30px; color: #666; }126  .ad-cta {127    background: #10A760;128    color: #fff;129    font-weight: 700;130    border: none;131    border-radius: 999px;132    padding: 22px 36px;133    font-size: 34px;134  }135 136  /* Bottom navigation */137  .nav {138    position: absolute;139    left: 0; right: 0; bottom: 74px;140    height: 160px;141    background: #22262c;142    border-top: 1px solid rgba(255,255,255,0.06);143    display: flex;144    justify-content: space-around;145    align-items: center;146  }147  .nav-item {148    display: flex; flex-direction: column;149    align-items: center; gap: 10px;150    color: #AEB4BC; font-size: 28px;151  }152  .nav-item.active { color: #FF5A7D; }153  .home-indicator {154    position: absolute;155    left: 50%;156    transform: translateX(-50%);157    bottom: 24px;158    width: 280px;159    height: 12px;160    background: #E6E6E6;161    border-radius: 12px;162    opacity: 0.9;163  }164 165  /* helpers for small icon color */166  .accent { color: #FF5A7D; }167</style>168</head>169<body>170<div id="render-target">171 172  <!-- Status bar -->173  <div class="status-bar">174    <div class="status-left">175      <span>10:48</span>176      <span style="opacity:0.8;">60°</span>177    </div>178    <div class="status-right">179      <!-- simple wifi icon -->180      <svg width="44" height="44" viewBox="0 0 32 32" fill="none">181        <path d="M4 12c7-6 17-6 24 0" stroke="#E7E9ED" stroke-width="2.8" stroke-linecap="round"/>182        <path d="M8 16c5-4 11-4 16 0" stroke="#E7E9ED" stroke-width="2.8" stroke-linecap="round"/>183        <path d="M12 20c3-2 5-2 8 0" stroke="#E7E9ED" stroke-width="2.8" stroke-linecap="round"/>184        <circle cx="16" cy="24" r="2" fill="#E7E9ED"/>185      </svg>186      <!-- battery -->187      <svg width="48" height="44" viewBox="0 0 40 24" fill="none">188        <rect x="2" y="4" width="30" height="16" rx="3" stroke="#E7E9ED" stroke-width="2.8"/>189        <rect x="5" y="7" width="24" height="10" rx="2" fill="#E7E9ED"/>190        <rect x="34" y="9" width="4" height="6" rx="1" fill="#E7E9ED"/>191      </svg>192    </div>193  </div>194 195  <!-- Header -->196  <div class="header">197    <div class="header-left">198      <svg width="64" height="64" viewBox="0 0 32 32" class="accent">199        <polyline points="20,6 10,16 20,26" fill="none" stroke="#FF5A7D" stroke-width="4" stroke-linecap="round" stroke-linejoin="round"/>200      </svg>201      <div class="title">Apple Pie From Scratch</div>202    </div>203    <div class="header-actions">204      <!-- Share -->205      <svg width="56" height="56" viewBox="0 0 32 32">206        <circle cx="24" cy="8" r="3" fill="#FF5A7D"/>207        <circle cx="8" cy="16" r="3" fill="#FF5A7D"/>208        <circle cx="24" cy="24" r="3" fill="#FF5A7D"/>209        <path d="M11 16 L21 10" stroke="#FF5A7D" stroke-width="2.8" />210        <path d="M11 16 L21 22" stroke="#FF5A7D" stroke-width="2.8" />211      </svg>212      <!-- Heart -->213      <svg width="56" height="56" viewBox="0 0 32 32">214        <path d="M16 27s-9-6.3-11-10c-2.4-4.3 2-9 6.7-7 1.6.7 3 2.2 4.3 3.9 1.2-1.7 2.6-3.2 4.3-3.9C25 8 29.4 12.7 27 17c-2 3.7-11 10-11 10z" fill="none" stroke="#FF5A7D" stroke-width="3.2" stroke-linejoin="round"/>215      </svg>216    </div>217  </div>218 219  <!-- Scrollable content -->220  <div class="content">221    <div class="list">222      <!-- Step 5 -->223      <div class="card">224        <div class="num">5</div>225        <div class="card-text">226          Peel the apples, then core and slice.227          <svg class="play" width="26" height="26" viewBox="0 0 24 24">228            <polygon points="6,4 20,12 6,20" fill="#FF5A7D"></polygon>229          </svg>230        </div>231      </div>232 233      <!-- Step 6 -->234      <div class="card">235        <div class="num">6</div>236        <div class="card-text">237          In a bowl, add the sliced apples, sugar, flour, salt, cinnamon, nutmeg, and juice from the lemon.238          <svg class="play" width="26" height="26" viewBox="0 0 24 24">239            <polygon points="6,4 20,12 6,20" fill="#FF5A7D"></polygon>240          </svg>241        </div>242      </div>243 244      <!-- Step 7 -->245      <div class="card">246        <div class="num">7</div>247        <div class="card-text">248          Mix until combined and all apples are coated. Refrigerate.249          <svg class="play" width="26" height="26" viewBox="0 0 24 24">250            <polygon points="6,4 20,12 6,20" fill="#FF5A7D"></polygon>251          </svg>252        </div>253      </div>254 255      <!-- Step 8 -->256      <div class="card">257        <div class="num">8</div>258        <div class="card-text">259          Preheat the oven to 375°F (200°C).260        </div>261      </div>262 263      <!-- Step 9 -->264      <div class="card">265        <div class="num">9</div>266        <div class="card-text">267          On a floured surface, cut the pie dough in half and roll out both halves until round and about 1/8-inch (3 mm) thick.268          <svg class="play" width="26" height="26" viewBox="0 0 24 24">269            <polygon points="6,4 20,12 6,20" fill="#FF5A7D"></polygon>270          </svg>271        </div>272      </div>273 274      <!-- Step 10 -->275      <div class="card">276        <div class="num">10</div>277        <div class="card-text">278          Roll the dough around the rolling pin and unroll onto a pie dish making sure the dough reaches all edges. Trim extra if necessary.279          <svg class="play" width="26" height="26" viewBox="0 0 24 24">280            <polygon points="6,4 20,12 6,20" fill="#FF5A7D"></polygon>281          </svg>282        </div>283      </div>284 285      <!-- Step 11 -->286      <div class="card">287        <div class="num">11</div>288        <div class="card-text">289          Pour in apple filling mixture and pat down.290          <svg class="play" width="26" height="26" viewBox="0 0 24 24">291            <polygon points="6,4 20,12 6,20" fill="#FF5A7D"></polygon>292          </svg>293        </div>294      </div>295 296      <!-- Step 12 -->297      <div class="card">298        <div class="num">12</div>299        <div class="card-text">300          Roll the other half of the dough on top.301          <svg class="play" width="26" height="26" viewBox="0 0 24 24">302            <polygon points="6,4 20,12 6,20" fill="#FF5A7D"></polygon>303          </svg>304        </div>305      </div>306 307      <!-- Step 13 -->308      <div class="card">309        <div class="num">13</div>310        <div class="card-text">311          Trim the extra dough from the edges and pinch the edges to create a crimp.312        </div>313      </div>314    </div>315  </div>316 317  <!-- Ad banner -->318  <div class="ad-banner">319    <div class="ad-icon">[IMG: App Icon]</div>320    <div class="ad-info">321      <div class="ad-title">Jupiter</div>322      <div class="ad-sub">4.5 ★  •  FREE</div>323    </div>324    <button class="ad-cta">INSTALL</button>325  </div>326 327  <!-- Bottom navigation -->328  <div class="nav">329    <div class="nav-item active">330      <svg width="44" height="44" viewBox="0 0 32 32">331        <circle cx="14" cy="14" r="10" stroke="#FF5A7D" stroke-width="3" fill="none"/>332        <line x1="22" y1="22" x2="30" y2="30" stroke="#FF5A7D" stroke-width="4" stroke-linecap="round"/>333      </svg>334      <div>Discover</div>335    </div>336    <div class="nav-item">337      <svg width="44" height="44" viewBox="0 0 32 32">338        <rect x="6" y="10" width="20" height="16" rx="3" stroke="#AEB4BC" stroke-width="2.6" fill="none"/>339        <line x1="6" y1="14" x2="26" y2="14" stroke="#AEB4BC" stroke-width="2.6"/>340        <circle cx="16" cy="20" r="3" fill="#AEB4BC"/>341      </svg>342      <div>Community</div>343    </div>344    <div class="nav-item">345      <svg width="44" height="44" viewBox="0 0 32 32">346        <path d="M6 10h20l-2 14H8L6 10z" stroke="#AEB4BC" stroke-width="2.6" fill="none"/>347        <circle cx="12" cy="26" r="2" fill="#AEB4BC"/>348        <circle cx="22" cy="26" r="2" fill="#AEB4BC"/>349      </svg>350      <div>My Cart</div>351    </div>352    <div class="nav-item">353      <svg width="44" height="44" viewBox="0 0 32 32">354        <circle cx="16" cy="12" r="6" fill="#AEB4BC"/>355        <rect x="6" y="20" width="20" height="8" rx="4" fill="#AEB4BC"/>356      </svg>357      <div>Profile</div>358    </div>359  </div>360 361  <div class="home-indicator"></div>362 363</div>364</body>365</html>