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 Detail - Pizza</title>7<style>8 body { margin: 0; padding: 0; background: transparent; }9 #render-target {10 width: 1080px;11 height: 2400px;12 position: relative;13 overflow: hidden;14 background: #f6f6f6;15 font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;16 color: #333;17 }18 19 /* Header / Hero */20 .hero {21 position: relative;22 width: 100%;23 height: 540px;24 background: linear-gradient(#bdbdbd, #cfcfcf);25 }26 .hero .img-placeholder {27 position: absolute;28 left: 24px; right: 24px; top: 80px; bottom: 80px;29 background: #E0E0E0;30 border: 1px solid #BDBDBD;31 display: flex;32 justify-content: center; align-items: center;33 color: #757575; font-size: 28px; letter-spacing: .2px;34 }35 .top-icons {36 position: absolute; top: 24px; left: 24px; right: 24px;37 display: flex; justify-content: space-between; align-items: center;38 color: #fff;39 }40 .icon-btn {41 width: 44px; height: 44px; border-radius: 22px;42 display: flex; align-items: center; justify-content: center;43 cursor: default;44 }45 .icon-light svg { fill: #fff; }46 .hero .side-arrow {47 position: absolute; top: 260px; width: 64px; height: 64px;48 display: flex; align-items: center; justify-content: center;49 }50 .hero .side-arrow.left { left: 40px; }51 .hero .side-arrow.right { right: 40px; }52 .hero .page-dots {53 position: absolute; right: 56px; bottom: 32px;54 display: flex; gap: 12px;55 }56 .hero .dot {57 width: 12px; height: 12px; border-radius: 6px; background: #d0d0d0;58 opacity: .8;59 }60 61 .title-bar {62 position: relative;63 background: #fff;64 border-top-left-radius: 24px;65 border-top-right-radius: 24px;66 margin-top: -24px;67 padding: 24px 32px 16px 32px;68 box-shadow: 0 -2px 0 rgba(0,0,0,0.06);69 }70 .recipe-title {71 font-size: 48px; font-weight: 600; color: #424242; margin: 8px 0 16px 0;72 }73 74 /* Action row */75 .action-row {76 display: grid;77 grid-template-columns: 1fr auto;78 align-items: center;79 gap: 24px;80 }81 .actions {82 display: flex; gap: 36px; align-items: center;83 color: #616161;84 }85 .actions .icon {86 width: 36px; height: 36px;87 }88 .author {89 display: flex; align-items: center; gap: 18px;90 margin-top: 18px;91 }92 .avatar {93 width: 64px; height: 64px; border-radius: 32px;94 background: #E0E0E0; border: 1px solid #BDBDBD;95 display: flex; align-items: center; justify-content: center;96 color: #757575; font-size: 20px;97 }98 .author .name { font-size: 32px; color: #616161; }99 100 .rating {101 display: flex; align-items: center; gap: 8px;102 position: absolute; right: 32px; top: 140px;103 }104 .rating .star svg { width: 36px; height: 36px; fill: #FBC02D; }105 .rating .count { margin-left: 8px; color: #616161; font-size: 28px; }106 107 /* Tabs */108 .tabs {109 display: flex; gap: 64px; margin-top: 28px; padding: 0 0 12px 0;110 border-bottom: 1px solid #e0e0e0;111 }112 .tab {113 font-size: 30px; letter-spacing: .5px;114 color: #424242;115 }116 .tab.active { color: #d46b6b; font-weight: 600; }117 .tab-underline {118 width: 220px; height: 4px; background: #d46b6b; border-radius: 2px; margin-top: 14px;119 }120 121 /* Meta info */122 .meta {123 display: flex; justify-content: space-between; align-items: center;124 padding: 18px 32px 10px 32px; color: #757575;125 }126 .meta-left, .meta-right { display: flex; align-items: center; gap: 14px; font-size: 28px; }127 .meta svg { fill: #9e9e9e; width: 30px; height: 30px; }128 129 /* Ingredients list */130 .list {131 margin: 12px 24px 0 24px;132 background: #fff;133 border-radius: 12px;134 box-shadow: 0 1px 0 rgba(0,0,0,0.04);135 overflow: hidden;136 }137 .row {138 display: grid;139 grid-template-columns: 280px 1fr;140 align-items: center;141 border-top: 1px solid #e5e5e5;142 min-height: 120px;143 padding: 0 24px;144 }145 .row:first-child { border-top: none; }146 .row.note {147 background: #efefef; color: #666; font-size: 30px;148 }149 .qty { font-weight: 700; color: #616161; font-size: 34px; }150 .desc { font-size: 32px; color: #616161; }151 152 /* Floating actions */153 .fab-group {154 position: absolute; right: 36px; top: 1180px; display: flex; flex-direction: column; gap: 64px;155 }156 .fab {157 width: 108px; height: 108px; border-radius: 54px;158 background: #e74c3c;159 display: flex; align-items: center; justify-content: center;160 box-shadow: 0 10px 24px rgba(0,0,0,0.15);161 }162 .fab svg { width: 48px; height: 48px; fill: #fff; }163 .fab-label {164 position: absolute;165 right: 160px;166 top: 24px;167 transform: translateY(-50%);168 background: #fff;169 color: #555;170 font-size: 30px;171 padding: 12px 20px;172 border-radius: 8px;173 box-shadow: 0 6px 20px rgba(0,0,0,0.18);174 white-space: nowrap;175 }176 .fab-wrapper { position: relative; }177 .big-fab {178 position: absolute; right: 36px; bottom: 180px;179 width: 140px; height: 140px; border-radius: 70px;180 background: #e74c3c;181 box-shadow: 0 12px 26px rgba(0,0,0,0.2);182 }183 184 /* Section headers */185 .section {186 margin: 28px 32px;187 color: #d46b6b;188 font-size: 34px; font-weight: 700;189 display: flex; align-items: center; gap: 16px;190 }191 .pencil svg { width: 28px; height: 28px; fill: #9e9e9e; }192</style>193</head>194<body>195<div id="render-target">196 197 <div class="hero">198 <div class="top-icons">199 <div class="icon-btn icon-light">200 <svg viewBox="0 0 24 24" width="32" height="32">201 <path d="M15 6l-6 6 6 6" stroke="#fff" stroke-width="2" fill="none" stroke-linecap="round" stroke-linejoin="round"/>202 </svg>203 </div>204 <div class="icon-btn icon-light">205 <svg viewBox="0 0 24 24" width="28" height="28">206 <circle cx="12" cy="5" r="2"></circle>207 <circle cx="12" cy="12" r="2"></circle>208 <circle cx="12" cy="19" r="2"></circle>209 </svg>210 </div>211 </div>212 213 <div class="side-arrow left">214 <svg viewBox="0 0 24 24" width="48" height="48">215 <path d="M15 6l-6 6 6 6" stroke="#fff" stroke-width="3" fill="none" stroke-linecap="round" stroke-linejoin="round"/>216 </svg>217 </div>218 <div class="side-arrow right">219 <svg viewBox="0 0 24 24" width="48" height="48">220 <path d="M9 6l6 6-6 6" stroke="#fff" stroke-width="3" fill="none" stroke-linecap="round" stroke-linejoin="round"/>221 </svg>222 </div>223 224 <div class="img-placeholder">[IMG: Recipe Hero]</div>225 226 <div class="page-dots">227 <div class="dot"></div>228 <div class="dot" style="opacity:.4"></div>229 </div>230 </div>231 232 <div class="title-bar">233 <div class="recipe-title">Pizza</div>234 235 <div class="action-row">236 <div class="actions">237 <svg class="icon" viewBox="0 0 24 24">238 <path d="M18 8a3 3 0 00-6 0v8a3 3 0 106 0V8zM12 8a3 3 0 00-6 0v4a3 3 0 106 0V8z" fill="#757575"/>239 </svg>240 <svg class="icon" viewBox="0 0 24 24">241 <path d="M12 21s-7-4.35-7-10a4 4 0 017-2 4 4 0 017 2c0 5.65-7 10-7 10z" fill="none" stroke="#757575" stroke-width="2"/>242 </svg>243 <svg class="icon" viewBox="0 0 24 24">244 <path d="M6 4h12v16H6zM9 4v16" fill="none" stroke="#757575" stroke-width="2"/>245 </svg>246 <svg class="icon" viewBox="0 0 24 24">247 <path d="M20 8h-3l-1-2H8L7 8H4v12h16V8z" fill="#757575"/>248 </svg>249 <svg class="icon" viewBox="0 0 24 24">250 <path d="M6 9h12v2H6zM6 13h12v6H6zM8 4h8v3H8z" fill="#757575"/>251 </svg>252 </div>253 <div class="rating">254 <div class="star"><svg viewBox="0 0 24 24"><path d="M12 17.3l5.6 3.4-1.5-6.3 4.9-4.1-6.4-.6L12 3 9.4 9.7l-6.4.6 4.9 4.1-1.5 6.3z"/></svg></div>255 <div class="star"><svg viewBox="0 0 24 24"><path d="M12 17.3l5.6 3.4-1.5-6.3 4.9-4.1-6.4-.6L12 3 9.4 9.7l-6.4.6 4.9 4.1-1.5 6.3z"/></svg></div>256 <div class="star"><svg viewBox="0 0 24 24"><path d="M12 17.3l5.6 3.4-1.5-6.3 4.9-4.1-6.4-.6L12 3 9.4 9.7l-6.4.6 4.9 4.1-1.5 6.3z"/></svg></div>257 <div class="star"><svg viewBox="0 0 24 24"><path d="M12 17.3l5.6 3.4-1.5-6.3 4.9-4.1-6.4-.6L12 3 9.4 9.7l-6.4.6 4.9 4.1-1.5 6.3z"/></svg></div>258 <div class="star"><svg viewBox="0 0 24 24"><path d="M12 17.3l5.6 3.4-1.5-6.3 4.9-4.1-6.4-.6L12 3 9.4 9.7l-6.4.6 4.9 4.1-1.5 6.3z"/></svg></div>259 <div class="count">9</div>260 </div>261 262 <div class="author">263 <div class="avatar">[IMG: Avatar]</div>264 <div class="name">ellie36</div>265 </div>266 </div>267 268 <div class="tabs">269 <div>270 <div class="tab active">INGREDIENTS</div>271 <div class="tab-underline"></div>272 </div>273 <div class="tab">PREPARATION</div>274 <div class="tab">NUTRITION</div>275 </div>276 </div>277 278 <div class="meta">279 <div class="meta-left">280 <svg viewBox="0 0 24 24"><path d="M12 7v5l4 2" stroke="#9e9e9e" stroke-width="2" fill="none" stroke-linecap="round"/><circle cx="12" cy="12" r="9" fill="none" stroke="#9e9e9e" stroke-width="2"/></svg>281 <div>2 hr. total</div>282 </div>283 <div class="meta-right">284 <svg viewBox="0 0 24 24"><path d="M4 8c1.1 0 2 .9 2 2s-.9 2-2 2-2-.9-2-2 .9-2 2-2zm8 0c1.1 0 2 .9 2 2s-.9 2-2 2-2-.9-2-2 .9-2 2-2zm8 0c1.1 0 2 .9 2 2s-.9 2-2 2-2-.9-2-2 .9-2 2-2z" fill="#9e9e9e"/></svg>285 <div>6 Servings</div>286 <svg viewBox="0 0 24 24"><path d="M7 10l5 5 5-5" stroke="#9e9e9e" stroke-width="2" fill="none" stroke-linecap="round"/></svg>287 </div>288 </div>289 290 <div class="list">291 <div class="row note"><div></div><div>Dough, will make 2 (10-12 inch) pizzas</div></div>292 <div class="row"><div class="qty">1.75 cups</div><div class="desc">all purpose flour</div></div>293 <div class="row"><div class="qty">1 cup</div><div class="desc">cake flour</div></div>294 <div class="row"><div class="qty">2 tsps</div><div class="desc">Sugar</div></div>295 <div class="row"><div class="qty">1.5 tsps</div><div class="desc">table salt, (not kosher)</div></div>296 <div class="row"><div class="qty">1.25 tsp</div><div class="desc">instant yeast, or rapid rise</div></div>297 <div class="row"><div class="qty">1 cup</div><div class="desc">warm water, (~105°)</div></div>298 </div>299 300 <!-- Floating actions to the right with labels -->301 <div class="fab-group">302 <div class="fab-wrapper">303 <div class="fab"><svg viewBox="0 0 24 24"><path d="M10 4H4v16h16V8h-6l-4-4z" fill="#fff"/></svg></div>304 <div class="fab-label">Folder</div>305 </div>306 <div class="fab-wrapper">307 <div class="fab"><svg viewBox="0 0 24 24"><path d="M6 4h12v16H6zM9 7h6" stroke="#fff" stroke-width="2" fill="none"/></svg></div>308 <div class="fab-label">Note</div>309 </div>310 <div class="fab-wrapper">311 <div class="fab"><svg viewBox="0 0 24 24"><path d="M7 4h10l3 7H4l3-7zm-3 9h18l-2 7H6l-2-7z" fill="#fff"/></svg></div>312 <div class="fab-label">Grocery List</div>313 </div>314 <div class="fab-wrapper">315 <div class="fab"><svg viewBox="0 0 24 24"><path d="M4 5h16v14H4zM8 3v4M16 3v4M8 10h8" stroke="#fff" stroke-width="2" fill="none"/></svg></div>316 <div class="fab-label">Meal Planner</div>317 </div>318 </div>319 320 <div class="section">321 <div>MY NOTES</div>322 <div class="pencil">323 <svg viewBox="0 0 24 24"><path d="M3 17l2 4 4-2L19 9l-4-4L5 15l-2 2z" fill="#9e9e9e"/></svg>324 </div>325 </div>326 <div class="section" style="margin-top: 0;">MORE IDEAS</div>327 328 <div class="big-fab"></div>329</div>330</body>331</html>