GD-ML/AndroidCode
13.4k
1<!DOCTYPE html>2<html lang="en">3<head>4<meta charset="UTF-8">5<title>Recipe Screen - 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: #2b2b2b;16 }17 /* Hero / banner */18 .hero {19 position: relative;20 width: 1080px;21 height: 520px;22 background: #E0E0E0;23 border-bottom: 1px solid #d0d0d0;24 border-left: 1px solid #BDBDBD;25 border-right: 1px solid #BDBDBD;26 display: flex;27 align-items: center;28 justify-content: center;29 color: #757575;30 font-size: 34px;31 letter-spacing: 0.5px;32 }33 .hero::before {34 content: "";35 position: absolute;36 top: 0;37 left: 0;38 right: 0;39 height: 140px;40 background: linear-gradient(to bottom, rgba(0,0,0,0.25), rgba(0,0,0,0));41 pointer-events: none;42 }43 .hero .kebab {44 position: absolute;45 top: 110px;46 right: 40px;47 }48 .hero .back-top {49 position: absolute;50 top: 110px;51 left: 40px;52 }53 .hero .chev-left, .hero .chev-right {54 position: absolute;55 top: 50%;56 transform: translateY(-50%);57 }58 .hero .chev-left { left: 120px; }59 .hero .chev-right { right: 120px; }60 .hero .dots {61 position: absolute;62 right: 60px;63 bottom: 36px;64 display: flex;65 gap: 16px;66 }67 .dot { width: 18px; height: 18px; border-radius: 50%; background: #9e9e9e; opacity: 0.35; }68 .dot.active { opacity: 0.7; }69 70 /* Title */71 .title {72 font-size: 56px;73 font-weight: 600;74 padding: 26px 40px 16px 40px;75 }76 77 /* Action icons row */78 .actions {79 display: flex;80 gap: 48px;81 padding: 8px 40px 0 40px;82 align-items: center;83 }84 .actions svg { width: 48px; height: 48px; stroke: #555; fill: none; }85 .actions .solid { fill: #555; stroke: none; }86 87 /* Avatar / rating row */88 .meta {89 display: flex;90 justify-content: space-between;91 align-items: center;92 padding: 26px 40px 18px 40px;93 }94 .user {95 display: flex;96 align-items: center;97 gap: 22px;98 font-size: 40px;99 color: #616161;100 }101 .avatar {102 width: 76px;103 height: 76px;104 border-radius: 50%;105 background: #BDBDBD;106 }107 .rating {108 display: flex;109 align-items: center;110 gap: 10px;111 }112 .star { width: 48px; height: 48px; }113 .half-star {114 width: 24px;115 height: 48px;116 overflow: hidden;117 }118 .reviews-count { font-size: 40px; color: #616161; margin-left: 8px; }119 120 /* Tabs */121 .tabs {122 display: flex;123 gap: 80px;124 padding: 16px 40px 0 40px;125 border-bottom: 1px solid #e0e0e0;126 font-size: 38px;127 font-weight: 600;128 }129 .tab { padding: 22px 0; color: #000; }130 .tab.active { color: #d84343; position: relative; }131 .tab.active::after {132 content: "";133 position: absolute;134 left: 0;135 bottom: -2px;136 width: 160px;137 height: 6px;138 background: #d84343;139 border-radius: 3px;140 }141 142 /* Time & servings row */143 .info-row {144 display: flex;145 justify-content: space-between;146 padding: 26px 40px;147 color: #757575;148 font-size: 38px;149 align-items: center;150 }151 .info-left, .info-right {152 display: flex; align-items: center; gap: 18px;153 }154 .small-icon { width: 40px; height: 40px; }155 156 /* Ingredients list */157 .ingredients {158 padding: 0 40px;159 }160 .note {161 background: #EFEFEF;162 border: 1px solid #D1D1D1;163 padding: 34px;164 font-size: 36px;165 color: #616161;166 margin-bottom: 20px;167 }168 .ing-row {169 display: grid;170 grid-template-columns: 320px 1fr;171 align-items: center;172 background: #EFEFEF;173 border: 1px solid #D1D1D1;174 margin-bottom: 22px;175 padding: 30px 34px;176 font-size: 40px;177 color: #616161;178 }179 .ing-left {180 font-weight: 700;181 color: #2b2b2b;182 }183 .ing-left .unit {184 font-weight: 700;185 margin-left: 10px;186 }187 188 /* Section labels */189 .section-label {190 padding: 34px 40px 18px 40px;191 font-size: 40px;192 font-weight: 700;193 color: #d84343;194 display: flex;195 align-items: center;196 gap: 16px;197 }198 .section-label .pencil { width: 40px; height: 40px; stroke: #757575; }199 200 /* FAB */201 .fab {202 position: absolute;203 right: 40px;204 bottom: 160px;205 width: 150px;206 height: 150px;207 border-radius: 50%;208 background: #e53935;209 box-shadow: 0 10px 24px rgba(0,0,0,0.25);210 display: flex;211 align-items: center;212 justify-content: center;213 }214 .fab svg { width: 84px; height: 84px; stroke: #fff; }215 216 /* Home indicator */217 .home-indicator {218 position: absolute;219 left: 50%;220 transform: translateX(-50%);221 bottom: 60px;222 width: 420px;223 height: 16px;224 border-radius: 12px;225 background: #1a1a1a;226 opacity: 0.75;227 }228</style>229</head>230<body>231<div id="render-target">232 233 <!-- Hero / banner -->234 <div class="hero">235 <div>[IMG: Recipe Banner]</div>236 237 <!-- Top back icon -->238 <div class="back-top">239 <svg viewBox="0 0 48 48">240 <path d="M30 10 L12 24 L30 38" stroke="#ffffff" stroke-width="5" fill="none" stroke-linecap="round" stroke-linejoin="round"/>241 </svg>242 </div>243 244 <!-- Kebab menu -->245 <div class="kebab">246 <svg viewBox="0 0 24 48">247 <circle cx="12" cy="14" r="3" fill="#ffffff"/>248 <circle cx="12" cy="24" r="3" fill="#ffffff"/>249 <circle cx="12" cy="34" r="3" fill="#ffffff"/>250 </svg>251 </div>252 253 <!-- Carousel chevrons -->254 <div class="chev-left">255 <svg viewBox="0 0 60 60">256 <path d="M40 12 L20 30 L40 48" stroke="#ffffff" stroke-width="8" fill="none" stroke-linecap="round" stroke-linejoin="round"/>257 </svg>258 </div>259 <div class="chev-right">260 <svg viewBox="0 0 60 60">261 <path d="M20 12 L40 30 L20 48" stroke="#ffffff" stroke-width="8" fill="none" stroke-linecap="round" stroke-linejoin="round"/>262 </svg>263 </div>264 265 <!-- Dots -->266 <div class="dots">267 <div class="dot active"></div>268 <div class="dot"></div>269 </div>270 </div>271 272 <!-- Title -->273 <div class="title">Pizza</div>274 275 <!-- Action icons row -->276 <div class="actions">277 <!-- Share -->278 <svg viewBox="0 0 48 48">279 <circle cx="10" cy="24" r="4" fill="#555"/>280 <circle cx="30" cy="12" r="4" fill="#555"/>281 <circle cx="38" cy="34" r="4" fill="#555"/>282 <path d="M14 24 L26 16 M14 24 L34 32" stroke="#555" stroke-width="3" fill="none" stroke-linecap="round"/>283 </svg>284 <!-- Heart -->285 <svg viewBox="0 0 48 48">286 <path d="M24 40 L8 26 C2 20 6 10 16 12 C20 13 23 16 24 18 C25 16 28 13 32 12 C41 10 46 19 40 26 L24 40 Z" stroke="#555" stroke-width="2.8" fill="none" stroke-linejoin="round"/>287 </svg>288 <!-- Bookmark -->289 <svg viewBox="0 0 48 48">290 <path d="M14 8 H34 V40 L24 32 L14 40 Z" stroke="#555" stroke-width="2.8" fill="none" stroke-linejoin="round"/>291 </svg>292 <!-- Camera -->293 <svg viewBox="0 0 48 48">294 <rect x="6" y="14" width="36" height="24" rx="4" ry="4" stroke="#555" stroke-width="2.8" fill="none"/>295 <rect x="16" y="10" width="12" height="6" rx="2" stroke="#555" stroke-width="2.8" fill="none"/>296 <circle cx="24" cy="26" r="6" stroke="#555" stroke-width="2.8" fill="none"/>297 </svg>298 <!-- Printer -->299 <svg viewBox="0 0 48 48">300 <rect x="10" y="8" width="28" height="12" rx="2" stroke="#555" stroke-width="2.6" fill="none"/>301 <rect x="8" y="18" width="32" height="16" rx="3" stroke="#555" stroke-width="2.6" fill="none"/>302 <rect x="12" y="30" width="24" height="10" rx="1" stroke="#555" stroke-width="2.6" fill="none"/>303 </svg>304 </div>305 306 <!-- Avatar and rating -->307 <div class="meta">308 <div class="user">309 <div class="avatar"></div>310 <div>ellie36</div>311 </div>312 <div class="rating">313 <!-- 4 full stars -->314 <svg class="star" viewBox="0 0 50 50">315 <polygon points="25,4 31,18 46,18 34,28 39,42 25,34 11,42 16,28 4,18 19,18" fill="#FFD54F"/>316 </svg>317 <svg class="star" viewBox="0 0 50 50">318 <polygon points="25,4 31,18 46,18 34,28 39,42 25,34 11,42 16,28 4,18 19,18" fill="#FFD54F"/>319 </svg>320 <svg class="star" viewBox="0 0 50 50">321 <polygon points="25,4 31,18 46,18 34,28 39,42 25,34 11,42 16,28 4,18 19,18" fill="#FFD54F"/>322 </svg>323 <svg class="star" viewBox="0 0 50 50">324 <polygon points="25,4 31,18 46,18 34,28 39,42 25,34 11,42 16,28 4,18 19,18" fill="#FFD54F"/>325 </svg>326 <!-- half star -->327 <div class="half-star">328 <svg class="star" viewBox="0 0 50 50">329 <polygon points="25,4 31,18 46,18 34,28 39,42 25,34 11,42 16,28 4,18 19,18" fill="#FFD54F"/>330 </svg>331 </div>332 <div class="reviews-count">9</div>333 </div>334 </div>335 336 <!-- Tabs -->337 <div class="tabs">338 <div class="tab active">INGREDIENTS</div>339 <div class="tab">PREPARATION</div>340 <div class="tab">NUTRITION</div>341 </div>342 343 <!-- Time & servings -->344 <div class="info-row">345 <div class="info-left">346 <svg class="small-icon" viewBox="0 0 48 48">347 <circle cx="24" cy="24" r="18" stroke="#9e9e9e" stroke-width="3" fill="none"/>348 <path d="M24 24 L24 14 M24 24 L34 28" stroke="#9e9e9e" stroke-width="3" stroke-linecap="round"/>349 </svg>350 <div>2 hr. total</div>351 </div>352 <div class="info-right">353 <svg class="small-icon" viewBox="0 0 48 48">354 <circle cx="18" cy="18" r="7" stroke="#9e9e9e" stroke-width="3" fill="none"/>355 <circle cx="30" cy="22" r="5" stroke="#9e9e9e" stroke-width="3" fill="none"/>356 <path d="M8 38 C8 30 18 30 18 30 C18 30 30 30 34 36" stroke="#9e9e9e" stroke-width="3" fill="none"/>357 </svg>358 <div>6 Servings</div>359 <svg class="small-icon" viewBox="0 0 24 24">360 <path d="M6 9 L12 15 L18 9" stroke="#9e9e9e" stroke-width="3" fill="none" stroke-linecap="round" stroke-linejoin="round"/>361 </svg>362 </div>363 </div>364 365 <!-- Ingredients list -->366 <div class="ingredients">367 <div class="note">Dough, will make 2 (10-12 inch) pizzas</div>368 369 <div class="ing-row">370 <div class="ing-left">1.75 <span class="unit">cups</span></div>371 <div>all purpose flour</div>372 </div>373 <div class="ing-row">374 <div class="ing-left">1 <span class="unit">cup</span></div>375 <div>cake flour</div>376 </div>377 <div class="ing-row">378 <div class="ing-left">2 <span class="unit">tsps</span></div>379 <div>Sugar</div>380 </div>381 <div class="ing-row">382 <div class="ing-left">1.5 <span class="unit">tsps</span></div>383 <div>table salt, (not kosher)</div>384 </div>385 <div class="ing-row">386 <div class="ing-left">1.25 <span class="unit">tsp</span></div>387 <div>instant yeast, or rapid rise</div>388 </div>389 <div class="ing-row">390 <div class="ing-left">1 <span class="unit">cup</span></div>391 <div>warm water, (110 deg)</div>392 </div>393 </div>394 395 <!-- My Notes -->396 <div class="section-label">397 <div>MY NOTES</div>398 <svg class="pencil" viewBox="0 0 48 48">399 <path d="M12 34 L34 12 L38 16 L16 38 L10 38 Z" stroke="#757575" stroke-width="2.8" fill="none"/>400 </svg>401 </div>402 403 <!-- More ideas -->404 <div class="section-label" style="padding-top: 0;">MORE IDEAS</div>405 406 <!-- Floating Action Button -->407 <div class="fab">408 <svg viewBox="0 0 48 48">409 <path d="M24 10 L24 38 M10 24 L38 24" stroke="#ffffff" stroke-width="6" stroke-linecap="round"/>410 </svg>411 </div>412 413 <!-- Home indicator -->414 <div class="home-indicator"></div>415</div>416</body>417</html>