GD-ML/AndroidCode
13.4k
1<!DOCTYPE html>2<html lang="en">3<head>4<meta charset="UTF-8">5<title>Recipe - Pizza</title>6<style>7 body { margin: 0; padding: 0; background: transparent; font-family: "Roboto", Arial, sans-serif; }8 #render-target {9 width: 1080px; height: 2400px; position: relative; overflow: hidden;10 background: #ffffff; border-radius: 28px; box-shadow: 0 12px 30px rgba(0,0,0,0.15);11 }12 13 /* Hero / header */14 .hero {15 position: relative;16 height: 520px;17 background: linear-gradient(#8f8f8f, #9a9a9a);18 }19 .status-bar {20 position: absolute; top: 18px; left: 24px; right: 24px;21 display: flex; align-items: center; justify-content: space-between;22 color: #ffffff; font-size: 34px; opacity: 0.95;23 }24 .status-icons { display: flex; gap: 28px; align-items: center; }25 .status-dot { width: 10px; height: 10px; background: #fff; border-radius: 50%; opacity: 0.9; }26 27 .hero .back-small {28 position: absolute; left: 28px; top: 120px; width: 44px; height: 44px;29 }30 .hero .menu-dots {31 position: absolute; right: 28px; top: 120px; width: 20px; height: 80px; display: flex; flex-direction: column; justify-content: space-between; align-items: center;32 }33 .menu-dots span { width: 8px; height: 8px; background: #fff; border-radius: 50%; opacity: 0.95; }34 35 .carousel-arrow {36 position: absolute; top: 50%; transform: translateY(-50%);37 width: 80px; height: 80px; opacity: 0.9;38 }39 .carousel-left { left: 80px; }40 .carousel-right { right: 80px; }41 42 .pager-dots {43 position: absolute; right: 36px; bottom: 28px; display: flex; gap: 14px;44 }45 .pager-dots span { width: 16px; height: 16px; border-radius: 50%; background: rgba(255,255,255,0.6); }46 .pager-dots span:last-child { background: rgba(255,255,255,0.3); }47 48 /* Title area */49 .title {50 position: absolute; left: 36px; bottom: -2px;51 width: calc(100% - 72px);52 padding-top: 26px; padding-bottom: 26px;53 background: #ffffff;54 box-shadow: 0 -12px 18px rgba(0,0,0,0.08);55 }56 .title h1 {57 margin: 0 0 18px 0; font-size: 60px; color: #2d2d2d; font-weight: 500;58 }59 60 /* Action icons row */61 .actions {62 display: flex; align-items: center; gap: 44px; padding: 10px 0 6px 4px;63 color: #444;64 }65 .actions svg { width: 48px; height: 48px; }66 .rating { margin-left: auto; display: flex; align-items: center; gap: 14px; }67 .rating .stars svg { width: 48px; height: 48px; }68 .rating .count { font-size: 40px; color: #6b6b6b; }69 70 /* Author */71 .author {72 display: flex; align-items: center; gap: 24px; padding: 22px 0 8px 0;73 }74 .avatar {75 width: 68px; height: 68px; background: #bdbdbd; border-radius: 50%;76 }77 .author .name { font-size: 40px; color: #6b6b6b; }78 79 /* Tabs */80 .tabs {81 display: flex; gap: 60px; padding: 24px 0 10px 0; border-bottom: 2px solid #e3e3e3;82 }83 .tab { font-size: 38px; color: #111; font-weight: 600; }84 .tab.active { color: #d84747; position: relative; }85 .tab.active::after {86 content: ""; position: absolute; left: 0; bottom: -14px; width: 220px; height: 6px; background: #d84747; border-radius: 3px;87 }88 89 /* Meta row */90 .meta { display: flex; align-items: center; justify-content: space-between; padding: 24px 0; color: #8a8a8a; }91 .meta-left, .meta-right { display: flex; align-items: center; gap: 16px; font-size: 38px; }92 .meta svg { width: 44px; height: 44px; }93 .meta-right .servings-arrow { margin-left: 10px; }94 95 /* Ingredient list */96 .section-note {97 background: #ededed; border: 1px solid #d7d7d7; border-radius: 6px;98 padding: 22px 26px; font-size: 38px; color: #616161; margin-bottom: 18px;99 }100 .ingredient {101 display: grid; grid-template-columns: 280px 1fr; align-items: center;102 background: #efefef; border: 1px solid #d6d6d6; border-radius: 6px;103 padding: 24px 28px; margin-bottom: 22px;104 }105 .qty { font-size: 42px; font-weight: 700; color: #222; }106 .qty span { font-size: 34px; font-weight: 600; color: #444; margin-left: 8px; }107 .desc { font-size: 40px; color: #5a5a5a; }108 109 /* Snackbar */110 .snackbar {111 position: absolute; left: 0; right: 0; bottom: 130px;112 margin: 0 0; height: 120px; background: #2f2f2f; color: #fff;113 display: flex; align-items: center; justify-content: space-between;114 padding: 0 36px; font-size: 40px;115 box-shadow: 0 -6px 16px rgba(0,0,0,0.25);116 }117 .snackbar .action { color: #e74b4b; font-weight: 700; }118 119 /* FAB */120 .fab {121 position: absolute; right: 50px; bottom: 220px;122 width: 150px; height: 150px; border-radius: 50%;123 background: #e74b4b; color: #fff; display: flex; align-items: center; justify-content: center;124 box-shadow: 0 10px 24px rgba(0,0,0,0.35); font-size: 96px; line-height: 0.8;125 }126 127 /* Gesture bar */128 .gesture {129 position: absolute; left: 50%; transform: translateX(-50%);130 bottom: 32px; width: 280px; height: 12px; background: #e5e5e5; border-radius: 8px;131 }132</style>133</head>134<body>135<div id="render-target">136 137 <div class="hero">138 <div class="status-bar">139 <div>1:14</div>140 <div class="status-icons">141 <svg viewBox="0 0 24 24" width="38" height="38" fill="#fff"><circle cx="12" cy="12" r="9"/></svg>142 <svg viewBox="0 0 24 24" width="38" height="38" fill="#fff"><rect x="4" y="4" width="16" height="14" rx="2"/></svg>143 <div class="status-dot"></div>144 <svg viewBox="0 0 24 24" width="38" height="38" fill="#fff"><path d="M3 18h18l-9-14z"/></svg>145 <svg viewBox="0 0 24 24" width="38" height="38" fill="#fff"><path d="M3 20h18V8H3v12zm6-17h6l1 3H8l1-3z"/></svg>146 </div>147 </div>148 149 <!-- small back arrow -->150 <svg class="back-small" viewBox="0 0 48 48">151 <path d="M28 10 L12 24 L28 38" stroke="#ffffff" stroke-width="6" fill="none" stroke-linecap="round" stroke-linejoin="round"/>152 </svg>153 154 <!-- carousel arrows -->155 <svg class="carousel-arrow carousel-left" viewBox="0 0 60 60">156 <path d="M38 12 L16 30 L38 48" stroke="#ffffff" stroke-width="10" fill="none" stroke-linecap="round" stroke-linejoin="round"/>157 </svg>158 <svg class="carousel-arrow carousel-right" viewBox="0 0 60 60">159 <path d="M22 12 L44 30 L22 48" stroke="#ffffff" stroke-width="10" fill="none" stroke-linecap="round" stroke-linejoin="round"/>160 </svg>161 162 <!-- vertical menu dots -->163 <div class="menu-dots">164 <span></span><span></span><span></span>165 </div>166 167 <div class="pager-dots">168 <span></span><span></span>169 </div>170 171 <div class="title">172 <h1>Pizza</h1>173 174 <div class="actions">175 <!-- share -->176 <svg viewBox="0 0 48 48">177 <circle cx="12" cy="12" r="5" fill="#444"/>178 <circle cx="36" cy="10" r="5" fill="#444"/>179 <circle cx="36" cy="34" r="5" fill="#444"/>180 <path d="M16 12 L31 10 M14 16 L34 30" stroke="#444" stroke-width="4" fill="none" stroke-linecap="round"/>181 </svg>182 <!-- heart -->183 <svg viewBox="0 0 48 48">184 <path d="M24 40 C20 36 8 28 8 18 C8 12 12 9 16 9 C19 9 22 11 24 14 C26 11 29 9 32 9 C36 9 40 12 40 18 C40 28 28 36 24 40 Z" fill="#e74b4b"/>185 </svg>186 <!-- bookmark -->187 <svg viewBox="0 0 48 48">188 <path d="M14 8 H34 V40 L24 32 L14 40 Z" fill="none" stroke="#444" stroke-width="3"/>189 </svg>190 <!-- camera -->191 <svg viewBox="0 0 48 48">192 <rect x="8" y="14" width="32" height="22" rx="3" fill="none" stroke="#444" stroke-width="3"/>193 <rect x="16" y="8" width="16" height="8" rx="2" fill="#444"/>194 <circle cx="24" cy="25" r="6" fill="none" stroke="#444" stroke-width="3"/>195 </svg>196 <!-- printer -->197 <svg viewBox="0 0 48 48">198 <rect x="10" y="24" width="28" height="14" rx="2" fill="none" stroke="#444" stroke-width="3"/>199 <rect x="14" y="8" width="20" height="12" rx="2" fill="none" stroke="#444" stroke-width="3"/>200 <line x1="16" y1="30" x2="32" y2="30" stroke="#444" stroke-width="3"/>201 </svg>202 203 <div class="rating">204 <div class="stars" style="display:flex; gap:8px;">205 <!-- 4 full stars -->206 <svg viewBox="0 0 24 24"><polygon points="12,2 15,9 23,9 17,14 19,22 12,18 5,22 7,14 1,9 9,9" fill="#F6C545"/></svg>207 <svg viewBox="0 0 24 24"><polygon points="12,2 15,9 23,9 17,14 19,22 12,18 5,22 7,14 1,9 9,9" fill="#F6C545"/></svg>208 <svg viewBox="0 0 24 24"><polygon points="12,2 15,9 23,9 17,14 19,22 12,18 5,22 7,14 1,9 9,9" fill="#F6C545"/></svg>209 <svg viewBox="0 0 24 24"><polygon points="12,2 15,9 23,9 17,14 19,22 12,18 5,22 7,14 1,9 9,9" fill="#F6C545"/></svg>210 <!-- half star: left filled, right outline -->211 <svg viewBox="0 0 24 24">212 <defs>213 <clipPath id="half">214 <rect x="0" y="0" width="12" height="24"/>215 </clipPath>216 </defs>217 <polygon points="12,2 15,9 23,9 17,14 19,22 12,18 5,22 7,14 1,9 9,9" fill="#F6C545" clip-path="url(#half)"/>218 <polygon points="12,2 15,9 23,9 17,14 19,22 12,18 5,22 7,14 1,9 9,9" fill="none" stroke="#F6C545" stroke-width="2"/>219 </svg>220 </div>221 <div class="count">9</div>222 </div>223 </div>224 225 <div class="author">226 <div class="avatar"></div>227 <div class="name">ellie36</div>228 </div>229 230 <div class="tabs">231 <div class="tab active">INGREDIENTS</div>232 <div class="tab">PREPARATION</div>233 <div class="tab">NUTRITION</div>234 </div>235 </div>236 </div>237 238 <!-- content area -->239 <div style="padding: 40px 36px 0 36px;">240 <div class="meta">241 <div class="meta-left">242 <svg viewBox="0 0 48 48">243 <circle cx="24" cy="24" r="18" fill="none" stroke="#8a8a8a" stroke-width="4"/>244 <path d="M24 24 L24 12 M24 24 L34 28" stroke="#8a8a8a" stroke-width="4" stroke-linecap="round"/>245 </svg>246 <div>2 hr. total</div>247 </div>248 <div class="meta-right">249 <svg viewBox="0 0 48 48">250 <circle cx="18" cy="18" r="8" fill="none" stroke="#8a8a8a" stroke-width="3"/>251 <circle cx="32" cy="24" r="6" fill="none" stroke="#8a8a8a" stroke-width="3"/>252 <path d="M8 36 C8 30 13 28 18 28 C23 28 28 30 28 36" fill="none" stroke="#8a8a8a" stroke-width="3"/>253 <path d="M26 38 C26 34 29 32 32 32 C35 32 38 34 38 38" fill="none" stroke="#8a8a8a" stroke-width="3"/>254 </svg>255 <div>6 Servings</div>256 <svg class="servings-arrow" viewBox="0 0 24 24">257 <path d="M5 8 L12 16 L19 8" fill="#8a8a8a"/>258 </svg>259 </div>260 </div>261 262 <div class="section-note">Dough, will make 2 (10-12 inch) pizzas</div>263 264 <div class="ingredient">265 <div class="qty">1.75 <span>cups</span></div>266 <div class="desc">all purpose flour</div>267 </div>268 <div class="ingredient">269 <div class="qty">1 <span>cup</span></div>270 <div class="desc">cake flour</div>271 </div>272 <div class="ingredient">273 <div class="qty">2 <span>tsps</span></div>274 <div class="desc">Sugar</div>275 </div>276 <div class="ingredient">277 <div class="qty">1.5 <span>tsps</span></div>278 <div class="desc">table salt, (not kosher)</div>279 </div>280 <div class="ingredient">281 <div class="qty">1.25 <span>tsp</span></div>282 <div class="desc">instant yeast, or rapid rise</div>283 </div>284 <div class="ingredient">285 <div class="qty">1 <span>cup</span></div>286 <div class="desc">warm water, (110 deg)</div>287 </div>288 289 <!-- spacer to mimic scrollable content -->290 <div style="height: 640px;"></div>291 </div>292 293 <div class="snackbar">294 <div>Saved recipe to Favorites!</div>295 <div class="action">SEE FAVORITES</div>296 </div>297 298 <div class="fab">+</div>299 300 <div class="gesture"></div>301</div>302</body>303</html>