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>Pumpkin Mac ’n’ Cheese</title>7<style>8 body { margin:0; padding:0; background:transparent; }9 #render-target {10 width:1080px; height:2400px;11 position:relative; overflow:hidden;12 background:#1f2023;13 font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;14 color:#E9E9EA;15 }16 /* Top status bar */17 .status-bar {18 position:absolute; top:24px; left:32px; right:32px; height:48px;19 display:flex; align-items:center; justify-content:space-between;20 color:#fff; opacity:0.95; font-weight:600; letter-spacing:0.5px;21 font-size:38px;22 }23 .status-icons { display:flex; gap:24px; align-items:center; }24 /* Header content */25 .header {26 position:absolute; top:96px; left:36px; right:36px;27 padding-top:24px;28 }29 .top-actions {30 display:flex; align-items:center; justify-content:space-between;31 margin-bottom:32px;32 }33 .action-left { display:flex; align-items:center; gap:16px; }34 .action-right { display:flex; align-items:center; gap:36px; }35 .title {36 font-size:72px; line-height:84px; font-weight:800; margin:24px 0 16px 0;37 color:#ECECEC;38 }39 .subtitle {40 font-size:36px; line-height:52px; color:#BFC0C4; max-width:900px;41 margin-bottom:22px;42 }43 .featured { font-size:34px; line-height:48px; color:#BFC0C4; }44 .featured .link { color:#ff708c; font-weight:700; }45 .social-row {46 display:flex; align-items:center; gap:18px;47 margin-top:28px; margin-bottom:40px;48 color:#D9D9DA; font-size:36px;49 }50 .like-text { color:#EFEFF0; font-weight:700; }51 .divider-dark {52 height:2px; background:#2a2b2f; margin-top:12px;53 }54 55 /* Media / video placeholder */56 .video-area {57 position:absolute; top:680px; left:0; right:0; height:900px;58 background:#F5F5F6;59 display:flex; align-items:center; justify-content:center;60 border-top:1px solid #2a2b2f;61 border-bottom:1px solid #D9D9DA;62 }63 .img-ph {64 width:92%; height:86%;65 background:#E0E0E0; border:1px solid #BDBDBD;66 display:flex; align-items:center; justify-content:center;67 color:#757575; font-size:36px; border-radius:12px;68 }69 .play-btn {70 position:absolute; width:150px; height:150px; border-radius:50%;71 background:#ff0f5a; box-shadow:0 8px 24px rgba(255,15,90,0.35);72 display:flex; align-items:center; justify-content:center;73 }74 .ingredients {75 position:absolute; left:0; right:0; top:1580px; height:600px;76 background:#232427;77 padding:40px 36px 220px 36px;78 box-sizing:border-box;79 border-top:1px solid #2a2b2f;80 }81 .ing-header {82 display:flex; align-items:flex-end; justify-content:space-between;83 }84 .ing-title { font-size:58px; font-weight:800; color:#EFEFEF; }85 .servings { font-size:40px; color:#C7C8CB; margin-top:14px; }86 .stepper {87 display:flex; align-items:center; gap:36px;88 background:#2a2b2f; border:1px solid #3a3b40;89 border-radius:28px; padding:22px 40px; height:120px;90 color:#ff6c86; font-weight:800; font-size:44px;91 }92 .stepper .num { color:#EFEFEF; font-weight:800; }93 .ing-list { margin-top:36px; }94 .ing-item {95 display:flex; align-items:center; justify-content:space-between;96 font-size:40px; padding:28px 0; color:#E7E8EA;97 }98 .ing-item .left { color:#E7E8EA; }99 .ing-item .right { color:#EFEFEF; font-weight:700; }100 .line { height:2px; background:#3a3b40; }101 /* New badge */102 .badge-new {103 position:absolute; top:1530px; right:72px;104 width:200px; height:140px; background:#E5D45A; color:#1f2023;105 border-radius:18px; box-shadow:0 10px 20px rgba(0,0,0,0.25);106 display:flex; align-items:center; justify-content:center;107 font-weight:800; font-size:44px;108 }109 .badge-new:after{110 content:""; position:absolute; bottom:-22px; right:48px;111 border-width:22px 18px 0 18px; border-style:solid;112 border-color:#E5D45A transparent transparent transparent;113 }114 115 /* Bottom navigation */116 .bottom-nav {117 position:absolute; left:0; right:0; bottom:0; height:220px;118 background:#202125; border-top:1px solid #2a2b2f;119 display:flex; align-items:flex-start; justify-content:space-around;120 padding-top:32px;121 }122 .nav-item { display:flex; flex-direction:column; align-items:center; gap:16px; }123 .nav-label { font-size:32px; color:#B9BAC0; }124 .nav-item.active .nav-label { color:#FFFFFF; font-weight:700; }125 .home-indicator {126 position:absolute; bottom:18px; left:50%; transform:translateX(-50%);127 width:360px; height:14px; background:#e6e6e6; border-radius:8px; opacity:0.9;128 }129 /* Utility colors */130 .pink { color:#ff6a85; }131 .muted { color:#BFC0C4; }132 svg { display:block; }133</style>134</head>135<body>136<div id="render-target">137 138 <!-- Status Bar -->139 <div class="status-bar">140 <div>3:12</div>141 <div class="status-icons">142 <!-- WiFi icon -->143 <svg width="42" height="32" viewBox="0 0 42 32">144 <path d="M2 10c9-7 29-7 38 0" stroke="#fff" stroke-width="3" fill="none" stroke-linecap="round"/>145 <path d="M8 16c6-4 20-4 26 0" stroke="#fff" stroke-width="3" fill="none" stroke-linecap="round"/>146 <circle cx="21" cy="23" r="3" fill="#fff"/>147 </svg>148 <!-- Battery icon -->149 <svg width="46" height="28" viewBox="0 0 46 28">150 <rect x="2" y="3" width="36" height="22" rx="4" stroke="#fff" stroke-width="3" fill="none"/>151 <rect x="40" y="9" width="4" height="10" rx="2" fill="#fff"/>152 <rect x="6" y="7" width="24" height="14" rx="2" fill="#fff"/>153 </svg>154 </div>155 </div>156 157 <!-- Header content -->158 <div class="header">159 <div class="top-actions">160 <div class="action-left">161 <!-- Back arrow -->162 <svg width="56" height="56" viewBox="0 0 56 56">163 <path d="M32 12 L16 28 L32 44" stroke="#ff6a85" stroke-width="6" fill="none" stroke-linecap="round" stroke-linejoin="round"/>164 </svg>165 </div>166 <div class="action-right">167 <!-- Share icon -->168 <svg width="56" height="56" viewBox="0 0 56 56">169 <circle cx="14" cy="28" r="5" fill="#ff6a85"/>170 <circle cx="42" cy="16" r="5" fill="#ff6a85"/>171 <circle cx="42" cy="40" r="5" fill="#ff6a85"/>172 <path d="M18 26 L36 18 M18 30 L36 38" stroke="#ff6a85" stroke-width="4" stroke-linecap="round"/>173 </svg>174 <!-- Heart outline -->175 <svg width="56" height="56" viewBox="0 0 56 56">176 <path d="M28 46 C12 34 8 28 8 20 C8 14 13 10 18 10 C22 10 25 12 28 16 C31 12 34 10 38 10 C43 10 48 14 48 20 C48 28 44 34 28 46 Z"177 fill="none" stroke="#ff6a85" stroke-width="4" stroke-linejoin="round"/>178 </svg>179 </div>180 </div>181 182 <div class="title">Pumpkin Mac ‘n’ Cheese</div>183 <div class="subtitle">184 This creamy and indulgent mac 'n' cheese recipe is made185 with pumpkin puree and a blend of cheeses.186 </div>187 <div class="featured">188 featured in <span class="link">25 Mac 'N' Cheese Recipes</span>189 </div>190 191 <div class="social-row">192 <!-- Thumbs up icon -->193 <svg width="44" height="44" viewBox="0 0 44 44">194 <path d="M8 24 v12 h10 v-12 h-10 Z" fill="#ddd" stroke="#2a2b2f" stroke-width="2"/>195 <path d="M18 24 c6-6 6-14 6-14 h8 c2 0 3 2 2 4 l-4 14 c-1 4-4 6-8 6 h-4 v-10 Z"196 fill="#ddd" stroke="#2a2b2f" stroke-width="2"/>197 </svg>198 <span class="like-text">94%</span>199 <span>would make this again</span>200 </div>201 <div class="divider-dark"></div>202 </div>203 204 <!-- Video area -->205 <div class="video-area">206 <div class="img-ph">[IMG: Recipe video thumbnail]</div>207 <div class="play-btn">208 <svg width="60" height="60" viewBox="0 0 60 60">209 <polygon points="18,12 48,30 18,48" fill="#fff"/>210 </svg>211 </div>212 </div>213 214 <!-- New badge -->215 <div class="badge-new">New!</div>216 217 <!-- Ingredients section -->218 <div class="ingredients">219 <div class="ing-header">220 <div>221 <div class="ing-title">Ingredients for</div>222 <div class="servings">4 servings</div>223 </div>224 <div class="stepper">225 <span>-</span>226 <span class="num">4</span>227 <span>+</span>228 </div>229 </div>230 231 <div class="ing-list">232 <div class="ing-item">233 <div class="left">pumpkin, or squash, chopped</div>234 <div class="right">2 ¼ cup</div>235 </div>236 <div class="line"></div>237 <div class="ing-item">238 <div class="left">oil</div>239 <div class="right">2 tablespoons</div>240 </div>241 </div>242 </div>243 244 <!-- Bottom navigation -->245 <div class="bottom-nav">246 <div class="nav-item active">247 <!-- Search icon -->248 <svg width="56" height="56" viewBox="0 0 56 56">249 <circle cx="24" cy="24" r="14" stroke="#ff0f5a" stroke-width="6" fill="none"/>250 <line x1="36" y1="36" x2="50" y2="50" stroke="#ff0f5a" stroke-width="6" stroke-linecap="round"/>251 </svg>252 <div class="nav-label">Discover</div>253 </div>254 255 <div class="nav-item">256 <!-- Pot icon -->257 <svg width="56" height="56" viewBox="0 0 56 56">258 <rect x="10" y="24" width="36" height="18" rx="4" fill="#A9AAAF"/>259 <rect x="16" y="18" width="24" height="6" rx="3" fill="#A9AAAF"/>260 </svg>261 <div class="nav-label">Community</div>262 </div>263 264 <div class="nav-item">265 <!-- Bag icon -->266 <svg width="56" height="56" viewBox="0 0 56 56">267 <rect x="12" y="20" width="32" height="24" rx="4" fill="#A9AAAF"/>268 <path d="M20 20 c0-6 4-8 8-8 s8 2 8 8" stroke="#A9AAAF" stroke-width="4" fill="none"/>269 </svg>270 <div class="nav-label">My Bag</div>271 </div>272 273 <div class="nav-item">274 <!-- Profile circle -->275 <svg width="56" height="56" viewBox="0 0 56 56">276 <circle cx="28" cy="28" r="24" fill="#5EA1B4"/>277 <text x="28" y="34" font-size="28" font-weight="800" text-anchor="middle" fill="#fff">C</text>278 </svg>279 <div class="nav-label">Profile</div>280 </div>281 </div>282 283 <div class="home-indicator"></div>284 285</div>286</body>287</html>