GD-ML/AndroidCode
13.4k
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 - Apple Pie From Scratch</title>7<style>8 :root{9 --bg:#1f2228;10 --card:#2b2f36;11 --text:#E5E7EB;12 --muted:#B7BAC2;13 --sub:#8CAAB0;14 --accent:#c21b59;15 --accent-2:#e04873;16 --chip:#353942;17 }18 body{ margin:0; padding:0; background:transparent; font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; }19 #render-target{20 position:relative; overflow:hidden;21 width:1080px; height:2400px;22 background:var(--bg); color:var(--text);23 }24 25 /* Status bar (mock) */26 .status-bar{27 position:absolute; left:0; top:0; right:0; height:110px;28 padding:0 36px; display:flex; align-items:center; justify-content:space-between;29 color:#fff; font-weight:600; letter-spacing:0.5px;30 opacity:0.92;31 }32 .status-left{ display:flex; gap:18px; align-items:center; font-size:38px; }33 .status-right{ display:flex; gap:22px; align-items:center; }34 .status-icon svg{ width:42px; height:42px; fill:#fff; opacity:0.9; }35 36 /* Header with title and actions */37 .header{38 position:absolute; left:0; top:110px; right:0;39 padding:28px 36px 24px;40 }41 .top-actions{42 display:flex; align-items:center; justify-content:space-between; height:96px;43 }44 .back{45 width:88px; height:88px; display:flex; align-items:center; justify-content:center;46 }47 .back svg{ width:54px; height:54px; stroke:var(--accent-2); stroke-width:10; fill:none; }48 .right-actions{ display:flex; gap:36px; align-items:center; }49 .icon-btn svg{ width:56px; height:56px; stroke:#ff8aa8; stroke-width:10; fill:none; }50 .title{51 text-align:center; font-size:64px; font-weight:800; margin-top:-18px;52 }53 .tag{54 margin-top:18px; display:flex; justify-content:center; gap:14px; align-items:center; color:var(--sub);55 font-size:34px; font-weight:700;56 }57 .tag .box{58 width:34px; height:34px; border:3px solid var(--sub); border-radius:6px; opacity:0.9;59 }60 61 /* Body content */62 .content{63 position:absolute; left:0; right:0; top:380px; bottom:0;64 padding:24px 36px 320px; /* leave room for nav */65 }66 .section-title{67 font-size:56px; font-weight:800; margin:26px 6px 28px;68 }69 .mode-btn{70 background:var(--accent); color:#fff; border-radius:24px;71 height:140px; display:flex; align-items:center; justify-content:center;72 font-size:44px; font-weight:800; letter-spacing:0.3px;73 box-shadow:0 6px 0 rgba(0,0,0,0.15);74 margin:10px 6px 28px;75 }76 .mode-btn .arrow{77 margin-left:18px; width:26px; height:26px; border-left:16px solid #fff; border-top:12px solid transparent; border-bottom:12px solid transparent;78 }79 80 .steps{ margin-top:8px; display:flex; flex-direction:column; gap:26px; }81 .step-card{82 position:relative; background:var(--card); border-radius:22px; padding:36px 38px 38px 38px;83 box-shadow: inset 0 0 0 1px rgba(255,255,255,0.03);84 }85 .step-inner{ display:flex; gap:28px; }86 .step-num{87 flex:0 0 88px; height:88px; border-radius:18px; background:#25292f;88 display:flex; align-items:center; justify-content:center; font-weight:800; font-size:44px; color:#fff;89 }90 .step-text{91 font-size:40px; line-height:1.55; color:#D6DBE2; padding-right:90px;92 }93 .play-tip{94 position:absolute; right:32px; bottom:28px;95 }96 .play-tip svg{ width:32px; height:32px; fill:#e64c6a; }97 98 /* Ad banner overlay */99 .ad-bar{100 position:absolute; left:0; right:0; bottom:226px; height:190px;101 background:#ffffff; color:#111; display:flex; align-items:center; padding:0 28px; gap:26px;102 box-shadow:0 -4px 16px rgba(0,0,0,0.45);103 }104 .ad-icon{105 width:128px; height:128px; border-radius:28px; background:#ff846f; color:#fff; font-weight:800;106 display:flex; align-items:center; justify-content:center; font-size:44px;107 }108 .ad-info{ flex:1; }109 .ad-title{ font-size:46px; font-weight:700; margin-bottom:6px; }110 .ad-sub{ font-size:34px; color:#444; display:flex; gap:10px; align-items:center; }111 .ad-sub .star{ color:#ffb300; }112 .ad-cta{113 background:#17a562; color:#fff; font-weight:800; font-size:40px; padding:24px 46px; border-radius:60px;114 }115 116 /* Bottom navigation */117 .bottom-nav{118 position:absolute; left:0; right:0; bottom:0; height:226px; background:#252930;119 border-top:1px solid rgba(255,255,255,0.06);120 display:flex; align-items:center; justify-content:space-around;121 padding-bottom:36px;122 }123 .nav-item{ display:flex; flex-direction:column; align-items:center; gap:16px; color:#9aa1ac; font-size:32px; }124 .nav-item.active{ color:#ff4f86; }125 .nav-icon{ width:56px; height:56px; }126 .nav-icon svg{ width:100%; height:100%; stroke:#9aa1ac; fill:none; stroke-width:8; }127 .nav-item.active .nav-icon svg{ stroke:#ff4f86; }128 .profile-circle{129 width:64px; height:64px; border-radius:50%; background:#6c6f76; color:#fff; display:flex; align-items:center; justify-content:center; font-weight:700;130 }131 132 /* Home indicator */133 .home-indicator{134 position:absolute; left:50%; transform:translateX(-50%);135 bottom:14px; width:280px; height:10px; border-radius:8px; background:#e6e6e6; opacity:0.9;136 }137</style>138</head>139<body>140<div id="render-target">141 142 <!-- Status bar -->143 <div class="status-bar">144 <div class="status-left">145 <div>10:48</div>146 <div style="opacity:.7;">60°</div>147 <span class="status-icon" title="gps">148 <svg viewBox="0 0 24 24"><path d="M12 2v4m0 12v4m8-8h-4M8 12H4M5.6 5.6l2.8 2.8M15.6 15.6l2.8 2.8M18.4 5.6l-2.8 2.8M8.4 15.6L5.6 18.4" stroke="white" stroke-width="2" fill="none" stroke-linecap="round"/></svg>149 </span>150 <span class="status-icon" title="download">151 <svg viewBox="0 0 24 24"><path d="M12 3v10m0 0l4-4m-4 4L8 9M4 20h16" stroke="white" stroke-width="2" fill="none" stroke-linecap="round"/></svg>152 </span>153 </div>154 <div class="status-right">155 <span class="status-icon" title="wifi">156 <svg viewBox="0 0 24 24"><path d="M2 8a16 16 0 0 1 20 0M5 12a11 11 0 0 1 14 0M8 16a6 6 0 0 1 8 0M12 20h0" stroke="white" stroke-width="2" fill="none" stroke-linecap="round"/></svg>157 </span>158 <span class="status-icon" title="battery">159 <svg viewBox="0 0 28 24"><rect x="2" y="6" width="20" height="12" rx="2" fill="none" stroke="white" stroke-width="2"/><rect x="4" y="8" width="14" height="8" fill="white"/><rect x="22" y="10" width="4" height="4" fill="white"/></svg>160 </span>161 </div>162 </div>163 164 <!-- Header -->165 <div class="header">166 <div class="top-actions">167 <div class="back">168 <svg viewBox="0 0 24 24">169 <path d="M15 18l-6-6 6-6" stroke-linecap="round" stroke-linejoin="round"/>170 </svg>171 </div>172 <div class="right-actions">173 <div class="icon-btn" title="share">174 <svg viewBox="0 0 24 24">175 <path d="M16 6a2 2 0 1 0 0-4 2 2 0 0 0 0 4zM6 14a2 2 0 1 0 0-4 2 2 0 0 0 0 4zm10 8a2 2 0 1 0 0-4 2 2 0 0 0 0 4zM8 11l8-5M8 13l8 5" stroke-linecap="round" stroke-linejoin="round"/>176 </svg>177 </div>178 <div class="icon-btn" title="favorite">179 <svg viewBox="0 0 24 24">180 <path d="M12 20s-7-4.5-7-10a4 4 0 0 1 7-2 4 4 0 0 1 7 2c0 5.5-7 10-7 10z" fill="none" />181 </svg>182 </div>183 </div>184 </div>185 <div class="title">Apple Pie From Scratch</div>186 <div class="tag">187 <span class="box"></span>188 <span>Affordable</span>189 </div>190 </div>191 192 <!-- Content -->193 <div class="content">194 <div class="section-title">Preparation</div>195 196 <div class="mode-btn">Step-by-step mode <span class="arrow"></span></div>197 198 <div class="steps">199 <div class="step-card">200 <div class="step-inner">201 <div class="step-num">1</div>202 <div class="step-text">203 In a medium-sized bowl, add the flour and salt. Mix with fork until combined.204 </div>205 </div>206 <div class="play-tip">207 <svg viewBox="0 0 24 24"><path d="M6 4l12 8-12 8z"/></svg>208 </div>209 </div>210 211 <div class="step-card">212 <div class="step-inner">213 <div class="step-num">2</div>214 <div class="step-text">215 Add in cubed butter and break up into flour with a fork. Mixture will still have lumps about the size of small peas.216 </div>217 </div>218 <div class="play-tip">219 <svg viewBox="0 0 24 24"><path d="M6 4l12 8-12 8z"/></svg>220 </div>221 </div>222 223 <div class="step-card">224 <div class="step-inner">225 <div class="step-num">3</div>226 <div class="step-text">227 Gradually add the ice water and continue to mix until the dough starts to come together. You may not need all of the water, but if the dough is too dry then add more. The dough should not be very tacky or sticky.228 </div>229 </div>230 <div class="play-tip">231 <svg viewBox="0 0 24 24"><path d="M6 4l12 8-12 8z"/></svg>232 </div>233 </div>234 235 <div class="step-card">236 <div class="step-inner">237 <div class="step-num">4</div>238 <div class="step-text">239 Work the dough together with your hands and turn out onto a surface. Work into a ball and cover with cling wrap. Refrigerate.240 </div>241 </div>242 <div class="play-tip">243 <svg viewBox="0 0 24 24"><path d="M6 4l12 8-12 8z"/></svg>244 </div>245 </div>246 247 <div class="step-card">248 <div class="step-inner">249 <div class="step-num">5</div>250 <div class="step-text">251 Peel the apples, then core and slice.252 </div>253 </div>254 <div class="play-tip">255 <svg viewBox="0 0 24 24"><path d="M6 4l12 8-12 8z"/></svg>256 </div>257 </div>258 259 <div class="step-card">260 <div class="step-inner">261 <div class="step-num">6</div>262 <div class="step-text">263 In a bowl, add the sliced apples, sugar, flour, and spices. Toss to coat evenly.264 </div>265 </div>266 <div class="play-tip">267 <svg viewBox="0 0 24 24"><path d="M6 4l12 8-12 8z"/></svg>268 </div>269 </div>270 </div>271 </div>272 273 <!-- Ad banner -->274 <div class="ad-bar">275 <div class="ad-icon">J</div>276 <div class="ad-info">277 <div class="ad-title">Jupiter</div>278 <div class="ad-sub">279 <span>4.5</span>280 <span class="star">★</span>281 <span>FREE</span>282 </div>283 </div>284 <div class="ad-cta">INSTALL</div>285 </div>286 287 <!-- Bottom navigation -->288 <div class="bottom-nav">289 <div class="nav-item active">290 <div class="nav-icon">291 <svg viewBox="0 0 24 24"><circle cx="11" cy="11" r="7"/><path d="M20 20l-4-4"/></svg>292 </div>293 <div>Discover</div>294 </div>295 <div class="nav-item">296 <div class="nav-icon">297 <svg viewBox="0 0 24 24"><path d="M4 12h16M6 8h12M8 16h8"/></svg>298 </div>299 <div>Community</div>300 </div>301 <div class="nav-item">302 <div class="nav-icon">303 <svg viewBox="0 0 24 24"><path d="M7 6h13l-2 10H6L5 4H2"/><circle cx="9" cy="20" r="2"/><circle cx="17" cy="20" r="2"/></svg>304 </div>305 <div>My Cart</div>306 </div>307 <div class="nav-item">308 <div class="profile-circle">I</div>309 <div>Profile</div>310 </div>311 </div>312 313 <div class="home-indicator"></div>314</div>315</body>316</html>