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 Steps - Apple Pie</title>7<style>8 :root{9 --bg:#23252b;10 --panel:#2b2d33;11 --bar:#292b30;12 --text:#e9e9ea;13 --muted:#cfcfd4;14 --accent:#ff5e7d;15 --divider:#33363d;16 --navText:#aab0b7;17 }18 body{ margin:0; padding:0; background:transparent; font-family: "Inter", Arial, Helvetica, sans-serif; }19 #render-target{20 width:1080px; height:2400px;21 position:relative; overflow:hidden;22 background:var(--bg); color:var(--text);23 }24 25 /* Status bar */26 .statusbar{27 position:absolute; left:0; top:0; width:100%; height:110px;28 background:var(--bar); color:var(--text);29 display:flex; align-items:center; padding:0 36px; box-sizing:border-box;30 font-weight:600; letter-spacing:0.5px;31 }32 .status-right{ margin-left:auto; display:flex; align-items:center; gap:26px; color:#d7d7db; font-size:30px; }33 .sb-icon{ width:38px; height:38px; opacity:.85; }34 35 /* App bar */36 .appbar{37 position:absolute; left:0; top:110px; width:100%; height:160px;38 background:var(--bar); display:flex; align-items:center;39 padding:0 36px; box-sizing:border-box; border-bottom:1px solid var(--divider);40 }41 .appbar .title{42 font-size:56px; font-weight:800; margin:0 auto; color:#f1f1f3;43 }44 .icon-btn{ width:84px; height:84px; display:flex; align-items:center; justify-content:center; }45 .icon-right{ color:var(--accent); }46 .icon-left{ color:#e1e1e6; }47 48 /* Content list */49 .content{50 position:absolute; left:0; right:0; top:270px; bottom:420px; /* leaves space for ad + bottom bar */51 overflow:hidden;52 }53 .step-card{54 margin:26px 36px;55 background:var(--panel);56 border-radius:22px;57 padding:34px 36px;58 display:flex; align-items:flex-start; gap:28px;59 box-shadow: 0 2px 0 rgba(0,0,0,0.15) inset;60 }61 .num{62 width:100px; min-width:100px;63 font-size:42px; font-weight:800; color:var(--muted);64 display:flex; align-items:center; justify-content:flex-start;65 }66 .step-text{67 font-size:36px; line-height:1.55; color:#e6e6ea; flex:1;68 }69 .go{70 width:0; height:0; margin-top:8px;71 border-left:26px solid var(--accent);72 border-top:16px solid transparent;73 border-bottom:16px solid transparent;74 }75 76 /* Ad banner */77 .ad-wrap{78 position:absolute; left:0; right:0; bottom:240px;79 display:flex; justify-content:center;80 }81 .ad{82 width:980px; height:220px; background:#ffffff;83 border-radius:18px; box-shadow:0 6px 20px rgba(0,0,0,0.25);84 display:flex; align-items:center; padding:26px; box-sizing:border-box; gap:28px;85 }86 .ad .ad-img{87 width:140px; height:140px; background:#E0E0E0; border:1px solid #BDBDBD;88 border-radius:28px; display:flex; align-items:center; justify-content:center; color:#757575; font-weight:700;89 }90 .ad .ad-info{ flex:1; color:#222; }91 .ad .ad-title{ font-size:44px; font-weight:700; color:#111; }92 .ad .ad-meta{ font-size:32px; color:#555; margin-top:6px; }93 .ad .install{94 background:#17b36b; color:#fff; border:none; border-radius:60px;95 padding:24px 40px; font-size:36px; font-weight:800; cursor:default;96 }97 .ad .small{98 position:absolute; left:68px; bottom:240px; transform:translateY(-20px); /* just to hint an info icon near the ad left */99 display:none;100 }101 102 /* Bottom navigation */103 .bottom-nav{104 position:absolute; left:0; bottom:0; width:100%; height:216px;105 background:var(--bar); border-top:1px solid var(--divider);106 display:flex; align-items:center; justify-content:space-around;107 padding-bottom:18px; box-sizing:border-box;108 }109 .nav-item{ width:25%; text-align:center; color:var(--navText); }110 .nav-item .label{ font-size:30px; margin-top:14px; }111 .nav-item svg{ width:56px; height:56px; }112 .active{ color:var(--accent); }113 .profile-dot{114 width:64px; height:64px; border-radius:50%; background:#d5a992; color:#2a2a2a;115 display:inline-flex; align-items:center; justify-content:center; font-weight:800;116 }117 118 /* Home indicator (pill) */119 .home-ind{120 position:absolute; left:50%; transform:translateX(-50%);121 bottom:18px; width:300px; height:12px; border-radius:12px; background:#e9e9ee; opacity:.85;122 }123</style>124</head>125<body>126<div id="render-target">127 128 <!-- Status bar -->129 <div class="statusbar">130 <div style="font-size:40px;">10:48</div>131 <div class="status-right">132 <span>60°</span>133 <svg class="sb-icon" viewBox="0 0 24 24" fill="#d7d7db"><path d="M12 2C7 2 3 6 3 11c0 5 9 11 9 11s9-6 9-11c0-5-4-9-9-9zm0 12a3 3 0 110-6 3 3 0 010 6z"/></svg>134 <svg class="sb-icon" viewBox="0 0 24 24" fill="#d7d7db"><path d="M12 2l10 6v8l-10 6L2 16V8l10-6z"/></svg>135 <svg class="sb-icon" viewBox="0 0 24 24" fill="#d7d7db"><path d="M16 2H8v20h8c1.1 0 2-.9 2-2V4c0-1.1-.9-2-2-2z"/></svg>136 </div>137 </div>138 139 <!-- App bar -->140 <div class="appbar">141 <div class="icon-btn icon-left">142 <svg viewBox="0 0 24 24" width="64" height="64" stroke="currentColor" stroke-width="2.5" fill="none" stroke-linecap="round" stroke-linejoin="round">143 <path d="M15 18l-6-6 6-6"/>144 </svg>145 </div>146 <div class="title">Apple Pie From Scratch</div>147 <div class="icon-btn icon-right">148 <svg viewBox="0 0 24 24" width="56" height="56" stroke="currentColor" stroke-width="2.2" fill="none" stroke-linecap="round" stroke-linejoin="round">149 <circle cx="18" cy="5" r="2"></circle>150 <circle cx="6" cy="12" r="2"></circle>151 <circle cx="18" cy="19" r="2"></circle>152 <path d="M8 12h8M16 6l-8 4m8 8l-8-4"></path>153 </svg>154 </div>155 <div class="icon-btn icon-right" style="margin-left:6px;">156 <svg viewBox="0 0 24 24" width="60" height="60" stroke="currentColor" stroke-width="2.2" fill="none" stroke-linecap="round" stroke-linejoin="round">157 <path d="M20.8 4.6c-1.9-1.8-5-1.8-6.9.1L12 6.7l-1.9-2c-1.9-1.9-5-1.9-6.9-.1-2.1 2-2.1 5.3 0 7.3L12 21l8.8-9.1c2.1-2 2.1-5.3 0-7.3z"/>158 </svg>159 </div>160 </div>161 162 <!-- Content - steps -->163 <div class="content">164 <div class="step-card">165 <div class="num">11</div>166 <div class="step-text">Pour in apple filling mixture and pat down.</div>167 <div class="go"></div>168 </div>169 170 <div class="step-card">171 <div class="num">12</div>172 <div class="step-text">Roll the other half of the dough on top.</div>173 <div class="go"></div>174 </div>175 176 <div class="step-card">177 <div class="num">13</div>178 <div class="step-text">Trim the extra dough from the edges and pinch the edges to create a crimp. Make sure edges are sealed together.</div>179 <div class="go"></div>180 </div>181 182 <div class="step-card">183 <div class="num">14</div>184 <div class="step-text">Brush the pie with the beaten egg and sprinkle with the sugar.</div>185 <div class="go"></div>186 </div>187 188 <div class="step-card">189 <div class="num">15</div>190 <div class="step-text">Cut four slits in the top of the pie to create a vent.</div>191 <div class="go"></div>192 </div>193 194 <div class="step-card">195 <div class="num">16</div>196 <div class="step-text">Bake pie for 50–60 minutes or until the crust is golden brown and no greyish or undercooked pastry remains.</div>197 <div class="go"></div>198 </div>199 200 <div class="step-card">201 <div class="num">17</div>202 <div class="step-text">Allow to cool completely before slicing.</div>203 <div class="go"></div>204 </div>205 206 <div class="step-card">207 <div class="num">18</div>208 <div class="step-text">Top with ice cream and serve.</div>209 <div class="go"></div>210 </div>211 212 <div class="step-card">213 <div class="num">19</div>214 <div class="step-text">Enjoy!</div>215 <div class="go"></div>216 </div>217 </div>218 219 <!-- Ad banner -->220 <div class="ad-wrap">221 <div class="ad">222 <div class="ad-img">[IMG: App Icon]</div>223 <div class="ad-info">224 <div class="ad-title">Jupiter</div>225 <div class="ad-meta">4.5 ★ FREE</div>226 </div>227 <button class="install">INSTALL</button>228 </div>229 </div>230 231 <!-- Bottom navigation -->232 <div class="bottom-nav">233 <div class="nav-item active">234 <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.2" stroke-linecap="round" stroke-linejoin="round">235 <circle cx="11" cy="11" r="6"></circle>236 <path d="M21 21l-4.35-4.35"></path>237 </svg>238 <div class="label">Discover</div>239 </div>240 <div class="nav-item">241 <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.2" stroke-linecap="round" stroke-linejoin="round" stroke="#aab0b7">242 <path d="M4 19h16M6 19l1.5-8h9L18 19M9 11V7a3 3 0 116 0v4"></path>243 </svg>244 <div class="label">Community</div>245 </div>246 <div class="nav-item">247 <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.2" stroke-linecap="round" stroke-linejoin="round" stroke="#aab0b7">248 <path d="M6 6h15l-1.5 9H7.5L6 6z"></path>249 <circle cx="9" cy="20" r="1.5"></circle>250 <circle cx="18" cy="20" r="1.5"></circle>251 </svg>252 <div class="label">My Cart</div>253 </div>254 <div class="nav-item">255 <div class="profile-dot">I</div>256 <div class="label">Profile</div>257 </div>258 </div>259 260 <div class="home-ind"></div>261</div>262</body>263</html>