Download code/10022/10022_12.html from GD-ML/AndroidCode: direct link, hf CLI and curl.
- Browser
- Download file 8.01 kB
-
https://huggingface.co/datasets/GD-ML/AndroidCode/resolve/main/code/10022/10022_12.html
- Command line
-
hf download hf://datasets/GD-ML/AndroidCode/code/10022/10022_12.html
-
curl -L -o 10022_12.html https://huggingface.co/datasets/GD-ML/AndroidCode/resolve/main/code/10022/10022_12.html
8.01 kB
| <html lang="en"> | |
| <head> | |
| <meta charset="UTF-8"> | |
| <meta name="viewport" content="width=1080, initial-scale=1.0"> | |
| <title>Recipe Detail</title> | |
| <style> | |
| * { box-sizing: border-box; } | |
| body { margin: 0; padding: 0; background: transparent; font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; color: #222; } | |
| #render-target { | |
| position: relative; | |
| overflow: hidden; | |
| width: 1080px; | |
| height: 2400px; | |
| background: #ffffff; | |
| } | |
| /* Status bar */ | |
| .status-bar { | |
| position: absolute; | |
| top: 0; left: 0; right: 0; | |
| height: 120px; | |
| background: #3a3a3a; | |
| color: #fff; | |
| display: flex; | |
| align-items: center; | |
| padding: 0 36px; | |
| font-size: 34px; | |
| letter-spacing: 0.5px; | |
| } | |
| .status-left { flex: 1; display: flex; align-items: center; gap: 20px; opacity: 0.95; } | |
| .status-right { display: flex; align-items: center; gap: 28px; } | |
| .status-icon svg { width: 40px; height: 40px; fill: #fff; } | |
| /* Hero image */ | |
| .hero { | |
| position: absolute; | |
| top: 120px; | |
| left: 0; | |
| width: 1080px; | |
| height: 930px; | |
| background: #E0E0E0; | |
| border-bottom: 1px solid #BDBDBD; | |
| display: flex; | |
| align-items: center; | |
| justify-content: center; | |
| color: #757575; | |
| font-size: 36px; | |
| } | |
| /* Floating action buttons on hero */ | |
| .fab { | |
| position: absolute; | |
| width: 120px; height: 120px; | |
| border-radius: 60px; | |
| background: #ffffff; | |
| box-shadow: 0 6px 18px rgba(0,0,0,0.18); | |
| display: flex; align-items: center; justify-content: center; | |
| } | |
| .fab.left { top: 360px; left: 48px; } | |
| .fab.right { top: 360px; right: 48px; } | |
| .fab svg { width: 56px; height: 56px; stroke: #222; stroke-width: 6; fill: none; } | |
| /* Content area */ | |
| .content { | |
| position: absolute; | |
| top: 1050px; | |
| left: 0; | |
| width: 100%; | |
| background: #fff; | |
| } | |
| .title-row { | |
| position: relative; | |
| padding: 56px 56px 20px 56px; | |
| } | |
| .title { | |
| font-size: 68px; | |
| line-height: 1.15; | |
| font-weight: 700; | |
| margin: 0 180px 16px 0; | |
| color: #2a2a2a; | |
| } | |
| .subtitle { | |
| color: #9aa0a6; | |
| font-weight: 700; | |
| letter-spacing: 3px; | |
| font-size: 28px; | |
| margin-top: 6px; | |
| } | |
| .plus-btn { | |
| position: absolute; | |
| right: 56px; | |
| top: 60px; | |
| width: 120px; | |
| height: 120px; | |
| border-radius: 60px; | |
| background: #2AAE9D; | |
| display: flex; align-items: center; justify-content: center; | |
| box-shadow: 0 8px 18px rgba(42,174,157,0.35); | |
| } | |
| .plus-btn svg { width: 64px; height: 64px; stroke: #fff; stroke-width: 10; } | |
| /* Tabs */ | |
| .tabs { | |
| margin-top: 28px; | |
| display: flex; | |
| border-bottom: 2px solid #e6e6e6; | |
| } | |
| .tab { | |
| flex: 1; | |
| padding: 24px 56px 28px 56px; | |
| } | |
| .tab .label { | |
| font-size: 44px; | |
| font-weight: 700; | |
| color: #2a2a2a; | |
| } | |
| .tab .meta { | |
| margin-top: 12px; | |
| color: #9e9e9e; | |
| font-size: 30px; | |
| } | |
| .tab.active .label { color: #2AAE9D; } | |
| .tab.active { border-bottom: 8px solid #2AAE9D; } | |
| /* List / sections */ | |
| .section-divider { height: 1px; background: #e8e8e8; margin-left: 56px; } | |
| .row { | |
| display: flex; | |
| align-items: center; | |
| padding: 30px 56px; | |
| border-bottom: 1px solid #efefef; | |
| } | |
| .row .left { | |
| display: flex; align-items: center; gap: 26px; flex: 1; | |
| font-size: 42px; font-weight: 600; color: #333; | |
| } | |
| .row .right { | |
| font-size: 42px; color: #333; font-weight: 600; | |
| } | |
| .pill-icon { | |
| width: 82px; height: 82px; border-radius: 18px; border: 2px solid #2AAE9D; | |
| display: flex; align-items: center; justify-content: center; | |
| color: #2AAE9D; | |
| } | |
| .pill-icon svg { width: 44px; height: 44px; } | |
| .icon svg { width: 46px; height: 46px; } | |
| /* Bottom gesture bar */ | |
| .gesture { | |
| position: absolute; left: 0; right: 0; bottom: 0; | |
| height: 120px; background: #2f2f2f; | |
| display: flex; align-items: center; justify-content: center; | |
| } | |
| .gesture .handle { | |
| width: 260px; height: 12px; background: #cbcbcb; border-radius: 8px; | |
| } | |
| </style> | |
| </head> | |
| <body> | |
| <div id="render-target"> | |
| <!-- Status bar --> | |
| <div class="status-bar"> | |
| <div class="status-left"> | |
| <div style="font-weight:600;">8:44</div> | |
| <div>18°</div> | |
| <div class="status-icon"> | |
| <svg viewBox="0 0 24 24"><path d="M3 6h18v12H3z" fill="none" stroke="#fff" stroke-width="2"/><path d="M5 8h8l1 2h5" stroke="#fff" stroke-width="2" fill="none"/></svg> | |
| </div> | |
| <div>32°</div> | |
| </div> | |
| <div class="status-right"> | |
| <div class="status-icon"> | |
| <svg viewBox="0 0 24 24"><path d="M2 18l8-8 4 4 8-8" stroke="#fff" stroke-width="2" fill="none"/></svg> | |
| </div> | |
| <div class="status-icon"> | |
| <svg viewBox="0 0 24 24"><rect x="6" y="4" width="12" height="16" rx="2" fill="#fff"/></svg> | |
| </div> | |
| </div> | |
| </div> | |
| <!-- Hero image placeholder --> | |
| <div class="hero"> | |
| [IMG: Plate of lasagna on wooden table] | |
| </div> | |
| <!-- Floating buttons --> | |
| <div class="fab left" aria-label="Back"> | |
| <svg viewBox="0 0 24 24"><path d="M15 6l-6 6 6 6" /></svg> | |
| </div> | |
| <div class="fab right" aria-label="Share"> | |
| <svg viewBox="0 0 24 24"> | |
| <path d="M8 12h7" /> | |
| <path d="M12 8l3 4-3 4" /> | |
| <circle cx="20" cy="4" r="0" /> | |
| </svg> | |
| </div> | |
| <!-- Content --> | |
| <div class="content"> | |
| <div class="title-row"> | |
| <h1 class="title">Three Cheese Broken | |
| Lasagna</h1> | |
| <div class="subtitle">SECONDS</div> | |
| <div class="plus-btn"> | |
| <svg viewBox="0 0 24 24"><path d="M12 5v14M5 12h14"/></svg> | |
| </div> | |
| </div> | |
| <!-- Tabs --> | |
| <div class="tabs"> | |
| <div class="tab active"> | |
| <div class="label">Overview</div> | |
| </div> | |
| <div class="tab"> | |
| <div class="label">Ingredients</div> | |
| <div class="meta">10 items</div> | |
| </div> | |
| <div class="tab"> | |
| <div class="label">Directions</div> | |
| <div class="meta">15m</div> | |
| </div> | |
| </div> | |
| <!-- Add to Collection --> | |
| <div class="row"> | |
| <div class="left"> | |
| <div class="pill-icon"> | |
| <svg viewBox="0 0 24 24" fill="none" stroke="#2AAE9D" stroke-width="2"> | |
| <path d="M3 7h7l2 2h9v9a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2V7z"/> | |
| <path d="M12 11v6M9 14h6"/> | |
| </svg> | |
| </div> | |
| <span>Add to Collection</span> | |
| </div> | |
| </div> | |
| <!-- Stats rows --> | |
| <div class="row"> | |
| <div class="left"> | |
| <div class="icon"> | |
| <svg viewBox="0 0 24 24" fill="#FB8C00"> | |
| <path d="M12 17.3l-5.5 3 1.5-6.1L3 9.8l6.2-.5L12 3l2.8 6.3 6.2.5-5 4.4 1.5 6.1z"/> | |
| </svg> | |
| </div> | |
| <span>Rating</span> | |
| </div> | |
| <div class="right">4.69</div> | |
| </div> | |
| <div class="row"> | |
| <div class="left"> | |
| <div class="icon"> | |
| <svg viewBox="0 0 24 24" stroke="#FF8A65" stroke-width="2" fill="none"> | |
| <ellipse cx="12" cy="7" rx="7" ry="2.5"/> | |
| <path d="M5 7v4c0 1.4 3.1 2.5 7 2.5s7-1.1 7-2.5V7"/> | |
| <path d="M5 15v2c0 1.4 3.1 2.5 7 2.5s7-1.1 7-2.5v-2"/> | |
| </svg> | |
| </div> | |
| <span>Servings</span> | |
| </div> | |
| <div class="right">4</div> | |
| </div> | |
| <div class="row"> | |
| <div class="left"> | |
| <div class="icon"> | |
| <svg viewBox="0 0 24 24" fill="#FF7043"> | |
| <path d="M12 3c2 3-1 4-1 6s2 3 2 5-2 4-4 4a5 5 0 0 1-5-5c0-3 2-5 5-7 1-1 1-2 1-3 1 1 1 1 2 0z"/> | |
| </svg> | |
| </div> | |
| <span>Calories per serving</span> | |
| </div> | |
| <div class="right">460</div> | |
| </div> | |
| <div class="row" style="border-bottom: none;"> | |
| <div class="left"> | |
| <div class="icon"> | |
| <svg viewBox="0 0 24 24" stroke="#FF8A65" stroke-width="2" fill="none"> | |
| <circle cx="12" cy="12" r="9"/> | |
| <path d="M12 6v7l4 2"/> | |
| </svg> | |
| </div> | |
| <span>Total time</span> | |
| </div> | |
| <div class="right">15m</div> | |
| </div> | |
| </div> | |
| <!-- Gesture bar --> | |
| <div class="gesture"> | |
| <div class="handle"></div> | |
| </div> | |
| </div> | |
| </body> | |
| </html> |