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: Arial, Helvetica, sans-serif; }8 #render-target {9 position: relative;10 overflow: hidden;11 width: 1080px;12 height: 2400px;13 background: #ffffff;14 border-radius: 0;15 }16 /* Status bar */17 .status-bar {18 position: absolute;19 top: 0;20 left: 0;21 width: 1080px;22 height: 84px;23 background: rgba(0,0,0,0.35);24 color: #fff;25 font-size: 32px;26 display: flex;27 align-items: center;28 padding: 0 28px;29 box-sizing: border-box;30 }31 .status-time { letter-spacing: 1px; }32 .status-icons {33 margin-left: auto;34 display: flex;35 align-items: center;36 gap: 22px;37 }38 .status-icons svg { fill: none; stroke: #fff; stroke-width: 2.5; }39 40 /* Header / hero */41 .hero {42 position: absolute;43 top: 84px;44 left: 0;45 width: 1080px;46 height: 560px;47 background: linear-gradient(180deg, #3a3a3a 0%, #4a4a4a 60%, #5a5a5a 100%);48 }49 .hero-img {50 position: absolute;51 inset: 0;52 margin: 40px 48px;53 height: 480px;54 border: 1px solid #BDBDBD;55 background: #E0E0E0;56 color: #757575;57 display: flex;58 align-items: center;59 justify-content: center;60 font-size: 36px;61 }62 .hero .chevron-left, .hero .chevron-right {63 position: absolute;64 top: 50%;65 transform: translateY(-50%);66 opacity: 0.35;67 }68 .hero .chevron-left { left: 60px; }69 .hero .chevron-right { right: 60px; }70 .hero .chevron-left svg, .hero .chevron-right svg { fill: none; stroke: #cfcfcf; stroke-width: 24; }71 .hero .back-arrow {72 position: absolute;73 left: 34px;74 top: 160px;75 opacity: 0.25;76 }77 .hero .more-vert {78 position: absolute;79 right: 36px;80 top: 200px;81 opacity: 0.5;82 }83 .hero .dots {84 position: absolute;85 right: 76px;86 bottom: 30px;87 display: flex;88 gap: 14px;89 opacity: 0.35;90 }91 .hero .dots span {92 width: 12px; height: 12px; background: #d0d0d0; border-radius: 50%;93 }94 95 /* Title below header */96 .title {97 position: absolute;98 top: 660px;99 left: 36px;100 font-size: 60px;101 color: #707070;102 letter-spacing: 1px;103 }104 105 /* Actions/author row */106 .actions {107 position: absolute;108 top: 740px;109 left: 36px;110 right: 36px;111 display: flex;112 align-items: center;113 gap: 28px;114 }115 .avatar {116 width: 64px; height: 64px; background: #9e9e9e; border-radius: 50%;117 border: 1px solid #bdbdbd;118 }119 .username { font-size: 36px; color: #4a4a4a; margin-right: 24px; }120 .action-icons { display: flex; align-items: center; gap: 36px; margin-left: 18px; }121 .action-icons svg { stroke: #2b2b2b; fill: none; stroke-width: 3; }122 .rating {123 margin-left: auto;124 display: flex;125 align-items: center;126 gap: 8px;127 }128 .rating .star { width: 44px; height: 44px; }129 .rating .star svg { fill: #FFC107; }130 .rating .star.half svg { fill: url(#halfGrad); }131 .rating .score { font-size: 36px; color: #4a4a4a; margin-left: 6px; }132 133 /* Tabs */134 .tabs {135 position: absolute;136 top: 850px;137 left: 36px;138 right: 36px;139 display: flex;140 gap: 80px;141 align-items: flex-end;142 }143 .tab {144 font-size: 38px;145 color: #121212;146 font-weight: 700;147 padding-bottom: 16px;148 }149 .tab.active { color: #C62828; }150 .tab-underline {151 position: absolute;152 left: 36px;153 top: 910px;154 width: 220px;155 height: 6px;156 background: #C62828;157 }158 159 /* Info row */160 .info-row {161 position: absolute;162 top: 960px;163 left: 36px;164 right: 36px;165 display: flex;166 justify-content: space-between;167 align-items: center;168 color: #757575;169 font-size: 34px;170 }171 .info-left,172 .info-right {173 display: flex;174 align-items: center;175 gap: 16px;176 }177 .info-row svg { stroke: #757575; fill: none; stroke-width: 3; }178 179 /* Bottom sheet */180 .sheet {181 position: absolute;182 left: 0;183 right: 0;184 top: 1040px;185 height: 1200px;186 background: #ffffff;187 box-shadow: 0 -8px 24px rgba(0,0,0,0.2);188 border-top-left-radius: 16px;189 border-top-right-radius: 16px;190 padding: 44px 36px;191 box-sizing: border-box;192 }193 .sheet h2 {194 margin: 0 0 36px 0;195 font-size: 44px;196 color: #6e6e6e;197 font-weight: 500;198 }199 .input-line {200 height: 80px;201 border-bottom: 2px solid #bdbdbd;202 margin-bottom: 26px;203 }204 .add-btn {205 position: absolute;206 right: 36px;207 top: 216px;208 font-size: 40px;209 color: #D32F2F;210 font-weight: 700;211 }212 .section-title {213 margin-top: 70px;214 font-size: 42px;215 color: #8a8a8a;216 font-weight: 500;217 }218 .folder-list {219 margin-top: 36px;220 display: flex;221 flex-direction: column;222 gap: 44px;223 }224 .folder-item {225 display: flex;226 align-items: center;227 gap: 28px;228 }229 .icon-circle {230 width: 96px; height: 96px; border-radius: 50%;231 background: #b3b3b3;232 display: flex; align-items: center; justify-content: center;233 }234 .icon-circle svg { fill: none; stroke: #ffffff; stroke-width: 4; }235 .folder-text { display: flex; flex-direction: column; }236 .folder-title { font-size: 42px; color: #4a4a4a; }237 .folder-sub { font-size: 32px; color: #9e9e9e; }238 239 /* Bottom navigation bar */240 .bottom-bar {241 position: absolute;242 bottom: 0;243 left: 0;244 width: 1080px;245 height: 140px;246 background: #000;247 }248 .home-pill {249 position: absolute;250 left: 50%;251 bottom: 38px;252 transform: translateX(-50%);253 width: 260px;254 height: 14px;255 border-radius: 14px;256 background: #cfcfcf;257 opacity: 0.95;258 }259</style>260</head>261<body>262<div id="render-target">263 264 <!-- Status Bar -->265 <div class="status-bar">266 <div class="status-time">1:13</div>267 <div class="status-icons">268 <!-- message bubble -->269 <svg width="34" height="34" viewBox="0 0 24 24"><path d="M3 4h18v12H8l-5 5V4z"/></svg>270 <!-- bell -->271 <svg width="34" height="34" viewBox="0 0 24 24"><path d="M12 22a2 2 0 0 0 2-2H10a2 2 0 0 0 2 2zm7-6V11a7 7 0 0 0-14 0v5l-2 2h18l-2-2z"/></svg>272 <!-- text size -->273 <svg width="34" height="34" viewBox="0 0 24 24"><path d="M3 6h18M8 6v12M16 10v8"/></svg>274 <!-- edit -->275 <svg width="34" height="34" viewBox="0 0 24 24"><path d="M3 17.25V21h3.75L17.81 9.94l-3.75-3.75L3 17.25zM20.71 7.04a1 1 0 0 0 0-1.41l-2.34-2.34a1 1 0 0 0-1.41 0l-1.83 1.83 3.75 3.75 1.83-1.83z"/></svg>276 <!-- dot -->277 <svg width="10" height="10"><circle cx="5" cy="5" r="4" fill="#fff"/></svg>278 <!-- wifi -->279 <svg width="34" height="34" viewBox="0 0 24 24"><path d="M2 8a16 16 0 0 1 20 0M5 12a11 11 0 0 1 14 0M8 16a6 6 0 0 1 8 0M12 20l2-2h-4l2 2z"/></svg>280 <!-- battery -->281 <svg width="40" height="34" viewBox="0 0 28 18"><rect x="1" y="3" width="22" height="12" rx="2" ry="2" fill="none" stroke="#fff"/><rect x="3" y="5" width="16" height="8" fill="#fff"/><rect x="23" y="6" width="3" height="6" fill="#fff"/></svg>282 </div>283 </div>284 285 <!-- Hero area -->286 <div class="hero">287 <div class="hero-img">[IMG: Recipe Header Photo]</div>288 <div class="back-arrow">289 <svg width="80" height="80" viewBox="0 0 24 24"><path d="M15 19l-7-7 7-7" stroke="#cfcfcf" stroke-width="2" fill="none"/></svg>290 </div>291 <div class="chevron-left">292 <svg width="100" height="100" viewBox="0 0 24 24"><path d="M15 19l-7-7 7-7" /></svg>293 </div>294 <div class="chevron-right">295 <svg width="100" height="100" viewBox="0 0 24 24"><path d="M9 5l7 7-7 7" /></svg>296 </div>297 <div class="more-vert">298 <svg width="40" height="100" viewBox="0 0 24 24"><circle cx="12" cy="5" r="2" fill="#d0d0d0"/><circle cx="12" cy="12" r="2" fill="#d0d0d0"/><circle cx="12" cy="19" r="2" fill="#d0d0d0"/></svg>299 </div>300 <div class="dots"><span></span><span></span></div>301 </div>302 303 <!-- Title -->304 <div class="title">Pizza</div>305 306 <!-- Actions and author -->307 <div class="actions">308 <div class="avatar"></div>309 <div class="username">ellie36</div>310 <div class="action-icons">311 <!-- share -->312 <svg width="48" height="48" viewBox="0 0 24 24"><circle cx="5" cy="12" r="2"/><circle cx="19" cy="5" r="2"/><circle cx="19" cy="19" r="2"/><path d="M7 12l10-7M7 12l10 7"/></svg>313 <!-- heart -->314 <svg width="48" height="48" viewBox="0 0 24 24"><path d="M12 21s-6.5-4.35-8.5-7.5A5 5 0 0 1 12 6a5 5 0 0 1 8.5 7.5C18.5 16.65 12 21 12 21z"/></svg>315 <!-- bookmark -->316 <svg width="48" height="48" viewBox="0 0 24 24"><path d="M6 3h12v18l-6-4-6 4V3z"/></svg>317 <!-- add photo -->318 <svg width="48" height="48" viewBox="0 0 24 24"><rect x="3" y="5" width="18" height="14" rx="2" ry="2"/><circle cx="12" cy="12" r="3"/><path d="M19 7l-2-2"/></svg>319 <!-- printer -->320 <svg width="48" height="48" viewBox="0 0 24 24"><path d="M6 9V3h12v6H6z"/><rect x="4" y="10" width="16" height="8" rx="2"/><rect x="7" y="16" width="10" height="5"/></svg>321 </div>322 323 <!-- Rating -->324 <div class="rating">325 <svg class="star" viewBox="0 0 24 24"><polygon points="12,2 15,9 22,9 17,13 19,21 12,17 5,21 7,13 2,9 9,9"/></svg>326 <svg class="star" viewBox="0 0 24 24"><polygon points="12,2 15,9 22,9 17,13 19,21 12,17 5,21 7,13 2,9 9,9"/></svg>327 <svg class="star" viewBox="0 0 24 24"><polygon points="12,2 15,9 22,9 17,13 19,21 12,17 5,21 7,13 2,9 9,9"/></svg>328 <svg class="star" viewBox="0 0 24 24"><polygon points="12,2 15,9 22,9 17,13 19,21 12,17 5,21 7,13 2,9 9,9"/></svg>329 <svg class="star half" viewBox="0 0 24 24">330 <defs>331 <linearGradient id="halfGrad">332 <stop offset="50%" stop-color="#FFC107"></stop>333 <stop offset="50%" stop-color="transparent"></stop>334 </linearGradient>335 </defs>336 <polygon points="12,2 15,9 22,9 17,13 19,21 12,17 5,21 7,13 2,9 9,9"/>337 </svg>338 <div class="score">9</div>339 </div>340 </div>341 342 <!-- Tabs -->343 <div class="tabs">344 <div class="tab active">INGREDIENTS</div>345 <div class="tab">PREPARATION</div>346 <div class="tab">NUTRITION</div>347 </div>348 <div class="tab-underline"></div>349 350 <!-- Info row -->351 <div class="info-row">352 <div class="info-left">353 <svg width="44" height="44" viewBox="0 0 24 24"><circle cx="12" cy="12" r="9"/><path d="M12 7v6l4 2"/></svg>354 <div>2 hr. total</div>355 </div>356 <div class="info-right">357 <svg width="52" height="44" viewBox="0 0 24 24"><path d="M16 11a4 4 0 1 0-8 0c0 2.5 2 3 4 3s4-.5 4-3z"/><path d="M4 20c0-3 3-5 8-5s8 2 8 5"/></svg>358 <div>6 Servings</div>359 <svg width="20" height="20" viewBox="0 0 20 20"><path d="M6 8l4 4 4-4" stroke="#757575" stroke-width="2" fill="none"/></svg>360 </div>361 </div>362 363 <!-- Bottom sheet overlay -->364 <div class="sheet">365 <h2>Add to a new folder</h2>366 <div class="input-line"></div>367 <div class="add-btn">ADD</div>368 369 <div class="section-title">Choose an existing folder</div>370 371 <div class="folder-list">372 <div class="folder-item">373 <div class="icon-circle">374 <svg width="40" height="40" viewBox="0 0 24 24"><path d="M12 5v14M5 12h14"/></svg>375 </div>376 <div class="folder-text">377 <div class="folder-title">Added</div>378 <div class="folder-sub">0 recipes</div>379 </div>380 </div>381 382 <div class="folder-item">383 <div class="icon-circle">384 <svg width="40" height="40" viewBox="0 0 24 24"><path d="M12 21s-6.5-4.35-8.5-7.5A5 5 0 0 1 12 6a5 5 0 0 1 8.5 7.5C18.5 16.65 12 21 12 21z"/></svg>385 </div>386 <div class="folder-text">387 <div class="folder-title">Favorites</div>388 <div class="folder-sub">0 recipes</div>389 </div>390 </div>391 392 <div class="folder-item">393 <div class="icon-circle">394 <svg width="40" height="40" viewBox="0 0 24 24"><path d="M6 3h12v18l-6-4-6 4V3z"/></svg>395 </div>396 <div class="folder-text">397 <div class="folder-title">Try</div>398 <div class="folder-sub">0 recipes</div>399 </div>400 </div>401 </div>402 </div>403 404 <!-- Bottom navigation bar -->405 <div class="bottom-bar">406 <div class="home-pill"></div>407 </div>408 409</div>410</body>411</html>