GD-ML/AndroidCode
13.4k
1<!DOCTYPE html>2<html>3<head>4<meta charset="utf-8"/>5<title>Recipe - Pizza</title>6<style>7 body { margin: 0; padding: 0; background: transparent; }8 #render-target {9 position: relative;10 overflow: hidden;11 width: 1080px;12 height: 2400px;13 background: #FFFFFF;14 font-family: Arial, Helvetica, sans-serif;15 color: #333;16 }17 18 /* Top carousel area */19 .hero {20 position: relative;21 width: 100%;22 height: 530px;23 background: linear-gradient(#9E9E9E, #B0B0B0);24 }25 .hero .img-placeholder {26 position: absolute;27 left: 40px;28 right: 40px;29 top: 100px;30 bottom: 60px;31 display: flex;32 justify-content: center;33 align-items: center;34 background: #E0E0E0;35 border: 1px solid #BDBDBD;36 color: #757575;37 font-size: 28px;38 }39 .top-actions {40 position: absolute;41 top: 90px;42 left: 30px;43 right: 30px;44 height: 60px;45 display: flex;46 align-items: center;47 justify-content: space-between;48 }49 .icon-btn {50 width: 56px;51 height: 56px;52 display: flex;53 align-items: center;54 justify-content: center;55 border-radius: 28px;56 background: transparent;57 }58 .icon {59 width: 40px;60 height: 40px;61 fill: #FFFFFF;62 stroke: none;63 }64 .menu-dots {65 display: flex; gap: 8px; align-items: center;66 }67 .menu-dots span {68 width: 8px; height: 8px; background: #FFFFFF; border-radius: 50%;69 display: inline-block;70 }71 .chevrons {72 position: absolute;73 left: 40px;74 right: 40px;75 top: 230px;76 display: flex;77 justify-content: space-between;78 align-items: center;79 }80 .hero .pager-dots {81 position: absolute;82 right: 40px;83 bottom: 30px;84 display: flex; gap: 12px;85 }86 .hero .pager-dots span {87 width: 12px; height: 12px; border-radius: 50%;88 background: #CFCFCF;89 opacity: 0.7;90 }91 92 /* Title */93 .title {94 padding: 24px 40px 18px 40px;95 font-size: 54px;96 font-weight: 500;97 color: #2E2E2E;98 }99 100 /* Actions row under title */101 .post-meta {102 display: flex;103 align-items: center;104 padding: 8px 40px 12px 40px;105 gap: 28px;106 }107 .post-meta .meta-icons {108 display: flex; gap: 36px; align-items: center;109 }110 .post-meta .meta-icons .icon {111 width: 44px; height: 44px; fill: #555; stroke: #555;112 }113 .post-meta .rating {114 margin-left: auto;115 display: flex;116 align-items: center;117 gap: 12px;118 }119 .star {120 width: 44px; height: 44px;121 }122 .rating .count { font-size: 34px; color: #666; }123 124 .author-row {125 display: flex;126 align-items: center;127 padding: 8px 40px 28px 40px;128 gap: 18px;129 }130 .avatar {131 width: 60px; height: 60px; border-radius: 30px;132 background: #E0E0E0; border: 1px solid #BDBDBD;133 display: flex; align-items: center; justify-content: center;134 color: #757575; font-size: 18px;135 }136 .author-name { font-size: 36px; color: #555; }137 138 /* Tabs */139 .tabs {140 display: flex;141 padding: 0 40px;142 gap: 60px;143 border-bottom: 1px solid #E0E0E0;144 }145 .tab {146 padding: 30px 0;147 font-size: 36px;148 color: #111;149 font-weight: 600;150 }151 .tab.active { color: #D64B49; position: relative; }152 .tab.active::after {153 content: '';154 position: absolute; left: 0; right: 0; bottom: -2px;155 height: 6px; background: #D64B49;156 }157 158 /* Time and servings */159 .stats-row {160 display: flex;161 align-items: center;162 padding: 26px 40px 16px 40px;163 }164 .stats-row .time {165 display: flex; align-items: center; gap: 16px; color: #7A7A7A; font-size: 34px;166 }167 .stats-row .servings {168 margin-left: auto; display: flex; align-items: center; gap: 16px;169 color: #9A9A9A; font-size: 34px;170 }171 172 /* Ingredient list */173 .ingredients {174 padding: 0 20px 0 20px;175 }176 .ing-card {177 margin: 16px 20px;178 background: #F1F1F1;179 border: 1px solid #D5D5D5;180 border-radius: 4px;181 padding: 26px 24px;182 display: grid;183 grid-template-columns: 300px 1fr;184 align-items: center;185 gap: 24px;186 }187 .ing-card.header {188 grid-template-columns: 1fr;189 font-size: 34px;190 color: #666;191 }192 .ing-amount {193 font-size: 38px; font-weight: 700; color: #333;194 }195 .ing-unit { font-weight: 700; color: #333; }196 .ing-desc {197 font-size: 34px; color: #5C5C5C;198 }199 200 /* Notes and more */201 .notes {202 padding: 30px 40px;203 display: flex; align-items: center; gap: 16px;204 color: #D64B49; font-size: 36px; font-weight: 700;205 }206 .more-ideas {207 padding: 6px 40px 140px 40px;208 color: #D64B49; font-size: 36px; font-weight: 700;209 }210 211 /* Floating action button */212 .fab {213 position: absolute;214 right: 40px;215 bottom: 160px;216 width: 140px; height: 140px; border-radius: 70px;217 background: #E44E4E;218 box-shadow: 0 8px 18px rgba(0,0,0,0.25);219 display: flex; align-items: center; justify-content: center;220 }221 .fab svg { width: 70px; height: 70px; fill: #FFF; }222 223 /* Bottom gesture bar */224 .gesture-bar {225 position: absolute;226 bottom: 30px; left: 50%; transform: translateX(-50%);227 width: 380px; height: 12px; border-radius: 6px;228 background: #000; opacity: 0.9;229 }230</style>231</head>232<body>233<div id="render-target">234 235 <div class="hero">236 <div class="top-actions">237 <div class="icon-btn">238 <svg class="icon" viewBox="0 0 24 24">239 <path d="M15 6 L9 12 L15 18" stroke="#FFF" stroke-width="2" fill="none" stroke-linecap="round" stroke-linejoin="round"/>240 </svg>241 </div>242 <div class="menu-dots">243 <span></span><span></span><span></span>244 </div>245 </div>246 247 <div class="img-placeholder">[IMG: Pizza carousel]</div>248 249 <div class="chevrons">250 <svg class="icon" viewBox="0 0 24 24">251 <path d="M15 4 L7 12 L15 20" stroke="#FFF" stroke-width="3" fill="none" stroke-linecap="round" stroke-linejoin="round"/>252 </svg>253 <svg class="icon" viewBox="0 0 24 24">254 <path d="M9 4 L17 12 L9 20" stroke="#FFF" stroke-width="3" fill="none" stroke-linecap="round" stroke-linejoin="round"/>255 </svg>256 </div>257 258 <div class="pager-dots"><span></span><span></span></div>259 </div>260 261 <div class="title">Pizza</div>262 263 <div class="post-meta">264 <div class="meta-icons">265 <!-- Share -->266 <svg class="icon" viewBox="0 0 24 24">267 <path d="M16 6a3 3 0 1 0 0 6 3 3 0 0 0 0-6zM8 12a3 3 0 1 0 0 6 3 3 0 0 0 0-6z" fill="none" stroke="#555" stroke-width="2"/>268 <path d="M9.5 13.5 L14.5 10.5" stroke="#555" stroke-width="2" />269 <path d="M9.5 8.5 L14.5 11.5" stroke="#555" stroke-width="2" />270 </svg>271 <!-- Heart -->272 <svg class="icon" viewBox="0 0 24 24">273 <path d="M12 20s-7-4.5-7-9a4.5 4.5 0 0 1 8-3 4.5 4.5 0 0 1 8 3c0 4.5-7 9-7 9z" fill="none" stroke="#555" stroke-width="2" />274 </svg>275 <!-- Bookmark -->276 <svg class="icon" viewBox="0 0 24 24">277 <path d="M6 4h12v16l-6-4-6 4z" fill="none" stroke="#555" stroke-width="2"/>278 </svg>279 <!-- Camera -->280 <svg class="icon" viewBox="0 0 24 24">281 <path d="M4 7h4l2-2h4l2 2h4v12H4z" fill="none" stroke="#555" stroke-width="2"/>282 <circle cx="12" cy="13" r="3.5" fill="none" stroke="#555" stroke-width="2"/>283 </svg>284 <!-- Print -->285 <svg class="icon" viewBox="0 0 24 24">286 <path d="M6 8h12v8H6z" fill="none" stroke="#555" stroke-width="2"/>287 <path d="M7 5h10v3H7z" fill="none" stroke="#555" stroke-width="2"/>288 </svg>289 </div>290 291 <div class="rating">292 <!-- Stars -->293 <svg class="star" viewBox="0 0 24 24">294 <path d="M12 2l3.1 6.3 7 1-5.1 5 1.3 7.4L12 18l-6.3 3.7 1.3-7.4-5.1-5 7-1z" fill="#FBC02D"/>295 </svg>296 <svg class="star" viewBox="0 0 24 24">297 <path d="M12 2l3.1 6.3 7 1-5.1 5 1.3 7.4L12 18l-6.3 3.7 1.3-7.4-5.1-5 7-1z" fill="#FBC02D"/>298 </svg>299 <svg class="star" viewBox="0 0 24 24">300 <path d="M12 2l3.1 6.3 7 1-5.1 5 1.3 7.4L12 18l-6.3 3.7 1.3-7.4-5.1-5 7-1z" fill="#FBC02D"/>301 </svg>302 <svg class="star" viewBox="0 0 24 24">303 <path d="M12 2l3.1 6.3 7 1-5.1 5 1.3 7.4L12 18l-6.3 3.7 1.3-7.4-5.1-5 7-1z" fill="#FBC02D"/>304 </svg>305 <!-- Half star -->306 <svg class="star" viewBox="0 0 24 24">307 <defs>308 <linearGradient id="halfFill" x1="0%" y1="0%" x2="100%" y2="0%">309 <stop offset="50%" stop-color="#FBC02D"/>310 <stop offset="50%" stop-color="#FFFFFF"/>311 <stop offset="100%" stop-color="#FFFFFF"/>312 </linearGradient>313 </defs>314 <path d="M12 2l3.1 6.3 7 1-5.1 5 1.3 7.4L12 18l-6.3 3.7 1.3-7.4-5.1-5 7-1z" fill="url(#halfFill)" stroke="#FBC02D" stroke-width="1"/>315 </svg>316 <div class="count">9</div>317 </div>318 </div>319 320 <div class="author-row">321 <div class="avatar">Avatar</div>322 <div class="author-name">ellie36</div>323 </div>324 325 <div class="tabs">326 <div class="tab active">INGREDIENTS</div>327 <div class="tab">PREPARATION</div>328 <div class="tab">NUTRITION</div>329 </div>330 331 <div class="stats-row">332 <div class="time">333 <svg width="42" height="42" viewBox="0 0 24 24">334 <circle cx="12" cy="12" r="9" fill="none" stroke="#9E9E9E" stroke-width="2"/>335 <path d="M12 6v6l4 2" stroke="#9E9E9E" stroke-width="2" fill="none" stroke-linecap="round"/>336 </svg>337 <span>2 hr. total</span>338 </div>339 <div class="servings">340 <svg width="42" height="42" viewBox="0 0 24 24">341 <circle cx="8" cy="9" r="3" fill="#BDBDBD"/>342 <circle cx="16" cy="9" r="3" fill="#BDBDBD" opacity="0.7"/>343 <path d="M3 19c0-3 4-5 5-5s5 2 5 5" stroke="#BDBDBD" stroke-width="2" fill="none"/>344 <path d="M13 19c0-2.5 3.3-4 4-4s4 1.5 4 4" stroke="#BDBDBD" stroke-width="2" fill="none" opacity="0.7"/>345 </svg>346 <span>6 Servings ▾</span>347 </div>348 </div>349 350 <div class="ingredients">351 <div class="ing-card header">Dough, will make 2 (10-12 inch) pizzas</div>352 353 <div class="ing-card">354 <div class="ing-amount">1.75 <span class="ing-unit">cups</span></div>355 <div class="ing-desc">all purpose flour</div>356 </div>357 358 <div class="ing-card">359 <div class="ing-amount">1 <span class="ing-unit">cup</span></div>360 <div class="ing-desc">cake flour</div>361 </div>362 363 <div class="ing-card">364 <div class="ing-amount">2 <span class="ing-unit">tsps</span></div>365 <div class="ing-desc">Sugar</div>366 </div>367 368 <div class="ing-card">369 <div class="ing-amount">1.5 <span class="ing-unit">tsps</span></div>370 <div class="ing-desc">table salt, (not kosher)</div>371 </div>372 373 <div class="ing-card">374 <div class="ing-amount">1.25 <span class="ing-unit">tsp</span></div>375 <div class="ing-desc">instant yeast, or rapid rise</div>376 </div>377 378 <div class="ing-card">379 <div class="ing-amount">1 <span class="ing-unit">cup</span></div>380 <div class="ing-desc">warm water, (110 deg)</div>381 </div>382 </div>383 384 <div class="notes">385 <svg width="40" height="40" viewBox="0 0 24 24">386 <path d="M6 18l12-12" stroke="#D64B49" stroke-width="2"/>387 <path d="M5 19l1-4 3 3-4 1z" fill="#D64B49"/>388 </svg>389 <span>MY NOTES</span>390 </div>391 392 <div class="more-ideas">MORE IDEAS</div>393 394 <div class="fab">395 <svg viewBox="0 0 24 24">396 <path d="M12 5v14M5 12h14" stroke="#FFF" stroke-width="3" stroke-linecap="round"/>397 </svg>398 </div>399 400 <div class="gesture-bar"></div>401 402</div>403</body>404</html>