GD-ML/AndroidCode
13.4k
1<!DOCTYPE html>2<html lang="en">3<head>4<meta charset="UTF-8">5<title>Recipe Tips - Apple Pie From Scratch</title>6<meta name="viewport" content="width=1080, initial-scale=1.0">7<style>8 :root{9 --bg:#24272b;10 --panel:#30343a;11 --text:#e9eaec;12 --muted:#b9bcc1;13 --pink:#ff7b8d;14 --teal:#9ad6d6;15 --card:#2b2f34;16 }17 body{ margin:0; padding:0; background:transparent; font-family: system-ui, -apple-system, Segoe UI, Roboto, Arial, "Helvetica Neue", Helvetica, sans-serif; color:var(--text); }18 #render-target{19 width:1080px; height:2400px;20 position:relative; overflow:hidden;21 background:var(--bg);22 border-radius:24px; box-shadow:0 10px 30px rgba(0,0,0,0.35);23 }24 25 /* top app bar */26 .topbar{ padding:60px 48px 24px; }27 .title-row{28 display:flex; align-items:center; justify-content:space-between;29 margin-top:12px;30 }31 .title-left{ display:flex; align-items:center; gap:24px; }32 .app-title{ font-weight:800; font-size:54px; letter-spacing:0.5px; }33 34 .icon-btn{ width:56px; height:56px; display:flex; align-items:center; justify-content:center; }35 .icon{ width:38px; height:38px; }36 .icon.stroke-pink path, .icon.stroke-pink circle, .icon.stroke-pink line{ stroke:var(--pink); }37 .icon.fill-pink path{ fill:var(--pink); }38 .icon.stroke-muted path, .icon.stroke-muted circle, .icon.stroke-muted line{ stroke:var(--muted); }39 40 /* section headings */41 .section{ padding:0 48px; }42 .h1{ font-size:44px; font-weight:800; margin:18px 0 28px; }43 .h2{ font-size:44px; font-weight:800; margin:40px 0 24px; }44 45 /* tip card */46 .tip-row{ display:flex; gap:24px; align-items:flex-start; }47 .avatar{48 width:110px; height:110px; border-radius:55px; overflow:hidden;49 background:#E0E0E0; border:1px solid #BDBDBD;50 display:flex; align-items:center; justify-content:center; color:#757575; font-weight:600; font-size:20px;51 }52 .tip-meta{ margin-bottom:6px; color:var(--muted); font-weight:700; }53 .tip-author{ color:var(--pink); font-weight:800; font-size:32px; margin-top:4px; }54 .tip-text{ font-size:34px; line-height:1.6; color:#d8dade; margin-top:16px; }55 .tip-link{ color:var(--pink); font-size:36px; font-weight:800; margin-top:24px; display:inline-flex; align-items:center; gap:12px; }56 57 /* action button */58 .cta{59 margin:40px 48px 12px;60 border:4px solid var(--pink);61 border-radius:22px;62 height:140px; display:flex; align-items:center; justify-content:center;63 color:var(--pink); font-size:42px; font-weight:800;64 background:transparent;65 }66 67 /* cards row */68 .cards{ display:flex; gap:32px; padding:0 48px; }69 .card{70 width:316px; background:var(--card); border-radius:22px; overflow:hidden;71 }72 .card .img{73 width:100%; height:270px; background:#E0E0E0; border-bottom:1px solid #BDBDBD;74 display:flex; align-items:center; justify-content:center; color:#757575; font-weight:600;75 }76 .card .title{ padding:18px 18px 22px; font-size:34px; font-weight:750; color:#e6e7e9; }77 .card .tag{ display:flex; align-items:center; gap:10px; padding:0 18px 22px; color:#a9d7de; font-size:30px; font-weight:700; }78 79 /* divider heading */80 .divider{81 margin:42px 0 0; background:var(--panel); height:120px; display:flex; align-items:center;82 padding:0 48px; border-top:1px solid rgba(255,255,255,0.06);83 }84 85 /* ad banner */86 .ad{87 margin:24px 48px; background:#ffffff; color:#222; border-radius:18px; padding:22px;88 display:flex; align-items:center; justify-content:space-between;89 }90 .ad-left{ display:flex; align-items:center; gap:22px; }91 .adicon{92 width:96px; height:96px; border-radius:20px; background:#E0E0E0; border:1px solid #BDBDBD;93 display:flex; align-items:center; justify-content:center; color:#757575; font-weight:700;94 }95 .ad-title{ font-size:36px; font-weight:800; }96 .ad-sub{ font-size:30px; color:#555; }97 .ad-actions{ display:flex; align-items:center; gap:22px; }98 .pill{99 background:#14b866; color:#fff; font-weight:800; border-radius:40px; padding:16px 36px; font-size:34px;100 }101 .ad-mini{ color:#7f8186; }102 103 /* bottom nav */104 .bottom-nav{105 position:absolute; left:0; right:0; bottom:0;106 height:220px; background:var(--panel);107 border-top:1px solid rgba(255,255,255,0.08);108 display:flex; align-items:center; justify-content:space-around;109 padding:0 24px;110 }111 .nav-item{ display:flex; flex-direction:column; align-items:center; gap:12px; color:#c9cacc; font-size:28px; }112 .nav-item.active{ color:var(--pink); }113 .nav-icon{ width:44px; height:44px; }114 115 .home-indicator{116 position:absolute; bottom:16px; left:50%; transform:translateX(-50%);117 width:280px; height:10px; border-radius:8px; background:#dcdde1; opacity:0.65;118 }119</style>120</head>121<body>122<div id="render-target">123 124 <div class="topbar">125 <div class="title-row">126 <div class="title-left">127 <div class="icon-btn">128 <svg class="icon stroke-pink" viewBox="0 0 48 48" fill="none">129 <path d="M30 10 L14 24 L30 38" stroke-width="4" stroke-linecap="round" stroke-linejoin="round"/>130 </svg>131 </div>132 <div class="app-title">Apple Pie From Scratch</div>133 </div>134 <div style="display:flex; gap:22px;">135 <div class="icon-btn">136 <svg class="icon stroke-pink" viewBox="0 0 48 48" fill="none">137 <circle cx="12" cy="12" r="4" stroke-width="4"/>138 <circle cx="36" cy="24" r="4" stroke-width="4"/>139 <circle cx="12" cy="36" r="4" stroke-width="4"/>140 <path d="M16 12 L32 22" stroke-width="4" stroke-linecap="round"/>141 <path d="M32 26 L16 34" stroke-width="4" stroke-linecap="round"/>142 </svg>143 </div>144 <div class="icon-btn">145 <svg class="icon stroke-pink" viewBox="0 0 48 48" fill="none">146 <path d="M24 40 C12 30 8 26 8 18 C8 12 12 8 18 8 C21 8 23 9 24 11 C25 9 27 8 30 8 C36 8 40 12 40 18 C40 26 36 30 24 40 Z" stroke-width="4" stroke-linejoin="round"/>147 </svg>148 </div>149 </div>150 </div>151 152 <div class="section">153 <div class="h1">Tips (1430)</div>154 <div class="tip-row">155 <div class="avatar">[IMG: Avatar]</div>156 <div style="flex:1;">157 <div class="tip-meta">Top Tip</div>158 <div class="tip-author">cardinalfire</div>159 <div class="tip-text">160 It turned out really good. I replaced 1/4 of the white sugar with brown sugar and I used store bought pie crust instead of homemade. I sliced the apples a little thinner than in the video too because my family likes ours on the soft side. I also sprinkled cinnamon sugar on the top instead of just white sugar. šš¼161 </div>162 <div class="tip-link">163 See all tips and photos164 <svg class="icon stroke-pink" viewBox="0 0 48 48" fill="none" style="width:34px; height:34px;">165 <path d="M18 12 L30 24 L18 36" stroke-width="4" stroke-linecap="round" stroke-linejoin="round"/>166 </svg>167 </div>168 </div>169 </div>170 </div>171 </div>172 173 <div class="cta">I made this!</div>174 175 <div class="section">176 <div class="h2">Related Recipes</div>177 </div>178 179 <div class="cards">180 <div class="card">181 <div class="img">[IMG: Apple Caramel Pie]</div>182 <div class="title">Apple Caramel Pie</div>183 </div>184 <div class="card">185 <div class="img">[IMG: Basic Pecan Pie]</div>186 <div class="title">Basic Pecan Pie</div>187 <div class="tag">188 <svg class="icon stroke-muted" viewBox="0 0 48 48" fill="none" style="width:30px; height:30px;">189 <rect x="12" y="20" width="24" height="18" rx="4" stroke-width="3"/>190 <path d="M18 20 V14 C18 10 22 8 24 8 C26 8 30 10 30 14 V20" stroke-width="3"/>191 </svg>192 Affordable193 </div>194 </div>195 <div class="card">196 <div class="img">[IMG: Deep Fried Pie]</div>197 <div class="title">Deep Fried Pie</div>198 </div>199 </div>200 201 <div class="divider">202 <div class="h2" style="margin:0;">Preparation</div>203 </div>204 205 <div class="ad">206 <div class="ad-left">207 <div class="adicon">[IMG: Jupiter]</div>208 <div>209 <div class="ad-title">Jupiter</div>210 <div class="ad-sub">4.5 ā
FREE</div>211 </div>212 </div>213 <div class="ad-actions">214 <div class="ad-mini">ā¹ļø</div>215 <div class="ad-mini">ā</div>216 <div class="pill">INSTALL</div>217 </div>218 </div>219 220 <div class="bottom-nav">221 <div class="nav-item active">222 <svg class="nav-icon stroke-pink" viewBox="0 0 48 48" fill="none">223 <circle cx="20" cy="20" r="10" stroke-width="4"/>224 <line x1="28" y1="28" x2="40" y2="40" stroke-width="4" stroke-linecap="round"/>225 </svg>226 <div>Discover</div>227 </div>228 <div class="nav-item">229 <svg class="nav-icon stroke-muted" viewBox="0 0 48 48" fill="none">230 <path d="M10 34 C16 28 32 28 38 34" stroke-width="4" stroke-linecap="round"/>231 <circle cx="16" cy="18" r="6" stroke-width="4"/>232 <circle cx="32" cy="18" r="6" stroke-width="4"/>233 </svg>234 <div>Community</div>235 </div>236 <div class="nav-item">237 <svg class="nav-icon stroke-muted" viewBox="0 0 48 48" fill="none">238 <path d="M8 12 H40 L36 34 H12 L8 12 Z" stroke-width="4" stroke-linejoin="round"/>239 <circle cx="18" cy="38" r="3" fill="none" stroke-width="4"/>240 <circle cx="30" cy="38" r="3" fill="none" stroke-width="4"/>241 </svg>242 <div>My Cart</div>243 </div>244 <div class="nav-item">245 <svg class="nav-icon stroke-muted" viewBox="0 0 48 48" fill="none">246 <circle cx="24" cy="18" r="8" stroke-width="4"/>247 <path d="M8 40 C10 30 38 30 40 40" stroke-width="4" stroke-linecap="round"/>248 </svg>249 <div>Profile</div>250 </div>251 </div>252 253 <div class="home-indicator"></div>254 255</div>256</body>257</html>