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 UI - Pizza</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: #FFFFFF;13 font-family: Arial, Helvetica, sans-serif;14 color: #333;15 }16 17 /* Top hero / carousel */18 .hero {19 position: relative;20 width: 100%;21 height: 560px;22 }23 .hero .img {24 position: absolute;25 left: 0; top: 0; right: 0; bottom: 0;26 background: #E0E0E0;27 border-bottom: 1px solid #BDBDBD;28 display: flex; align-items: center; justify-content: center;29 color: #757575; font-size: 32px; letter-spacing: 0.5px;30 }31 /* overlay icons in hero */32 .icon-btn {33 position: absolute;34 width: 64px; height: 64px;35 display: flex; align-items: center; justify-content: center;36 border-radius: 32px;37 }38 .icon-btn svg { width: 40px; height: 40px; }39 .icon-white svg path, .icon-white svg polyline, .icon-white svg circle { stroke: #FFFFFF; fill: none; stroke-width: 8; stroke-linecap: round; stroke-linejoin: round; }40 .dots {41 position: absolute; right: 40px; top: 140px;42 }43 .dots svg { width: 36px; height: 36px; }44 .dots circle { fill: #FFFFFF; }45 46 .chev-left { left: 120px; top: 250px; }47 .chev-right { right: 120px; top: 250px; }48 .back-top { left: 40px; top: 120px; }49 .carousel-indicator {50 position: absolute; right: 60px; bottom: 34px; display: flex; gap: 12px;51 }52 .carousel-indicator .dot {53 width: 14px; height: 14px; border-radius: 50%;54 background: #CFCFCF;55 }56 .carousel-indicator .dot.active { background: #C9C9C9; }57 58 /* Title area */59 .header {60 padding: 0 40px;61 background: #fff;62 }63 .title {64 font-size: 48px; font-weight: 600;65 color: #222;66 margin: 20px 0 8px 0;67 }68 69 /* Action icons row */70 .actions {71 display: flex; align-items: center; gap: 44px;72 padding: 22px 40px 18px 40px;73 }74 .actions svg { width: 42px; height: 42px; }75 .actions svg path, .actions svg rect, .actions svg polyline, .actions svg circle {76 stroke: #555; fill: none; stroke-width: 4; stroke-linecap: round; stroke-linejoin: round;77 }78 79 /* Author + rating */80 .meta {81 display: flex; align-items: center; justify-content: space-between;82 padding: 0 40px 24px 40px;83 }84 .author { display: flex; align-items: center; gap: 24px; }85 .avatar {86 width: 56px; height: 56px; border-radius: 50%;87 background: #CFCFCF;88 }89 .username { font-size: 30px; color: #777; }90 91 .rating { display: flex; align-items: center; gap: 10px; }92 .stars { display: inline-flex; gap: 8px; }93 .star {94 font-size: 34px; line-height: 34px;95 color: #FFC107;96 }97 .star.half {98 position: relative;99 color: #FFC107;100 }101 .star.half:before {102 content: "★";103 color: #FFC107;104 position: absolute; left: 0; top: 0;105 width: 50%; overflow: hidden;106 -webkit-mask-image: linear-gradient(to right, #000 50%, transparent 50%);107 mask-image: linear-gradient(to right, #000 50%, transparent 50%);108 }109 .star.half:after {110 content: "☆";111 color: #FFC107;112 }113 .rating-count { font-size: 28px; color: #777; margin-left: 6px; }114 115 /* Tabs */116 .tabs {117 display: flex; gap: 60px;118 padding: 10px 40px 0 40px;119 border-bottom: 1px solid #E5E5E5;120 }121 .tab {122 font-size: 30px; letter-spacing: 0.3px; padding: 18px 0;123 color: #111; font-weight: 700;124 }125 .tab.active { color: #D64C4C; }126 .active-underline {127 width: 210px; height: 4px; background: #D64C4C; margin-left: 40px;128 }129 130 /* time + servings row */131 .info-row {132 display: flex; align-items: center; justify-content: space-between;133 padding: 24px 40px;134 color: #9E9E9E;135 font-size: 30px;136 }137 .info-row .left, .info-row .right { display: flex; align-items: center; gap: 18px; }138 .info-row svg { width: 36px; height: 36px; }139 .info-row svg path, .info-row svg circle { stroke: #9E9E9E; fill: none; stroke-width: 4; }140 141 /* Ingredients list */142 .ingredients {143 padding: 0 40px;144 }145 .note-box {146 background: #EFEFEF;147 border: 1px solid #D8D8D8;148 border-radius: 4px;149 padding: 24px;150 font-size: 30px;151 color: #666;152 margin-bottom: 22px;153 }154 .ing-row {155 display: flex; justify-content: space-between; align-items: center;156 background: #F5F5F5;157 border: 1px solid #D9D9D9;158 border-radius: 4px;159 padding: 28px 24px;160 margin-bottom: 22px;161 }162 .ing-left {163 font-weight: 700; font-size: 34px; color: #333;164 }165 .ing-right {166 font-size: 32px; color: #666;167 }168 169 /* My notes and more ideas */170 .section-title {171 padding: 14px 40px;172 font-size: 32px; font-weight: 700; color: #D64C4C; letter-spacing: 0.3px;173 display: flex; align-items: center; gap: 18px;174 }175 .section-title svg { width: 34px; height: 34px; stroke: #9E9E9E; fill: none; stroke-width: 4; }176 177 /* FAB */178 .fab {179 position: absolute;180 right: 40px; bottom: 180px;181 width: 140px; height: 140px; border-radius: 50%;182 background: #E74A3B;183 box-shadow: 0 10px 16px rgba(0,0,0,0.25);184 display: flex; align-items: center; justify-content: center;185 }186 .fab svg { width: 60px; height: 60px; }187 .fab svg path { stroke: #fff; stroke-width: 12; stroke-linecap: round; }188 189 /* Bottom navigation bar placeholder */190 .nav-bar {191 position: absolute; left: 0; bottom: 0;192 width: 100%; height: 120px; background: #000;193 display: flex; align-items: center; justify-content: center;194 }195 .nav-pill {196 width: 180px; height: 12px; border-radius: 6px; background: #FFFFFF;197 opacity: 0.85;198 }199</style>200</head>201<body>202<div id="render-target">203 204 <!-- HERO / banner -->205 <div class="hero">206 <div class="img">[IMG: Recipe Photo]</div>207 208 <!-- small back icon -->209 <div class="icon-btn back-top icon-white">210 <svg viewBox="0 0 100 100">211 <polyline points="60,20 30,50 60,80"></polyline>212 </svg>213 </div>214 215 <!-- big left chevron -->216 <div class="icon-btn chev-left icon-white">217 <svg viewBox="0 0 100 100">218 <polyline points="70,20 30,50 70,80"></polyline>219 </svg>220 </div>221 222 <!-- big right chevron -->223 <div class="icon-btn chev-right icon-white">224 <svg viewBox="0 0 100 100">225 <polyline points="30,20 70,50 30,80"></polyline>226 </svg>227 </div>228 229 <!-- more vertical dots -->230 <div class="dots">231 <svg viewBox="0 0 32 32">232 <circle cx="16" cy="6" r="3"></circle>233 <circle cx="16" cy="16" r="3"></circle>234 <circle cx="16" cy="26" r="3"></circle>235 </svg>236 </div>237 238 <!-- carousel dots -->239 <div class="carousel-indicator">240 <div class="dot"></div>241 <div class="dot active"></div>242 </div>243 </div>244 245 <!-- Title -->246 <div class="header">247 <div class="title">Pizza</div>248 </div>249 250 <!-- Action icons row -->251 <div class="actions">252 <!-- Share -->253 <svg viewBox="0 0 100 100">254 <circle cx="20" cy="30" r="10"></circle>255 <circle cx="80" cy="18" r="10"></circle>256 <circle cx="80" cy="75" r="10"></circle>257 <polyline points="30,30 70,18"></polyline>258 <polyline points="30,30 70,75"></polyline>259 </svg>260 <!-- Heart -->261 <svg viewBox="0 0 100 100">262 <path d="M50 80 L20 50 C10 40 15 25 30 25 C40 25 46 30 50 36 C54 30 60 25 70 25 C85 25 90 40 80 50 L50 80 Z"></path>263 </svg>264 <!-- Bookmark -->265 <svg viewBox="0 0 100 100">266 <path d="M25 15 H75 V85 L50 70 L25 85 Z"></path>267 </svg>268 <!-- Camera -->269 <svg viewBox="0 0 100 100">270 <rect x="20" y="30" width="60" height="45" rx="6" ry="6"></rect>271 <rect x="35" y="20" width="30" height="12" rx="4"></rect>272 <circle cx="50" cy="52" r="16"></circle>273 </svg>274 <!-- Printer -->275 <svg viewBox="0 0 100 100">276 <rect x="25" y="15" width="50" height="22" rx="3"></rect>277 <rect x="18" y="40" width="64" height="36" rx="6"></rect>278 <rect x="30" y="70" width="40" height="16" rx="3"></rect>279 </svg>280 </div>281 282 <!-- Author and rating -->283 <div class="meta">284 <div class="author">285 <div class="avatar"></div>286 <div class="username">ellie36</div>287 </div>288 <div class="rating">289 <div class="stars">290 <span class="star">★</span>291 <span class="star">★</span>292 <span class="star">★</span>293 <span class="star">★</span>294 <span class="star half"></span>295 </div>296 <div class="rating-count">9</div>297 </div>298 </div>299 300 <!-- Tabs -->301 <div class="tabs">302 <div class="tab active">INGREDIENTS</div>303 <div class="tab">PREPARATION</div>304 <div class="tab">NUTRITION</div>305 </div>306 <div class="active-underline"></div>307 308 <!-- Info row -->309 <div class="info-row">310 <div class="left">311 <svg viewBox="0 0 100 100">312 <circle cx="50" cy="50" r="35"></circle>313 <path d="M50 50 L50 27"></path>314 <path d="M50 50 L68 60"></path>315 </svg>316 <span>2 hr. total</span>317 </div>318 <div class="right">319 <svg viewBox="0 0 100 100">320 <path d="M25 65 C25 50 45 50 45 65"></path>321 <circle cx="35" cy="40" r="10"></circle>322 <path d="M55 65 C55 50 75 50 75 65"></path>323 <circle cx="65" cy="40" r="10"></circle>324 </svg>325 <span>6 Servings ▾</span>326 </div>327 </div>328 329 <!-- Ingredients list -->330 <div class="ingredients">331 <div class="note-box">Dough, will make 2 (10-12 inch) pizzas</div>332 333 <div class="ing-row">334 <div class="ing-left">1.75 cups</div>335 <div class="ing-right">all purpose flour</div>336 </div>337 338 <div class="ing-row">339 <div class="ing-left">1 cup</div>340 <div class="ing-right">cake flour</div>341 </div>342 343 <div class="ing-row">344 <div class="ing-left">2 tsps</div>345 <div class="ing-right">Sugar</div>346 </div>347 348 <div class="ing-row">349 <div class="ing-left">1.5 tsps</div>350 <div class="ing-right">table salt, (not kosher)</div>351 </div>352 353 <div class="ing-row">354 <div class="ing-left">1.25 tsp</div>355 <div class="ing-right">instant yeast, or rapid rise</div>356 </div>357 358 <div class="ing-row">359 <div class="ing-left">1 cup</div>360 <div class="ing-right">warm water, (110 deg)</div>361 </div>362 </div>363 364 <!-- My Notes -->365 <div class="section-title">366 <span>MY NOTES</span>367 <svg viewBox="0 0 100 100">368 <path d="M20 75 L30 60 L70 20 L80 30 L40 70 Z"></path>369 </svg>370 </div>371 372 <!-- More Ideas -->373 <div class="section-title" style="padding-top: 8px;">MORE IDEAS</div>374 375 <!-- Floating Action Button -->376 <div class="fab">377 <svg viewBox="0 0 100 100">378 <path d="M50 25 V75"></path>379 <path d="M25 50 H75"></path>380 </svg>381 </div>382 383 <!-- Bottom nav bar -->384 <div class="nav-bar">385 <div class="nav-pill"></div>386 </div>387 388</div>389</body>390</html>