| <!doctype html> |
| <html lang="en"> |
| <head> |
| <meta charset="utf-8" /> |
| <meta name="viewport" content="width=device-width, initial-scale=1" /> |
| <meta name="theme-color" content="#0b0f19" /> |
| <title>Nulla — Demo</title> |
|
|
| <style> |
| :root{ |
| --bg: #0b0f19; |
| --panel: #0f1629; |
| --panel-highlight: #151d33; |
| --border: rgba(255,255,255,.08); |
| --text: rgba(255,255,255,.92); |
| --muted: rgba(255,255,255,.70); |
| --link: #7aa2ff; |
| --accent: #ffd21e; |
| } |
| |
| * { |
| box-sizing: border-box; |
| } |
| |
| body { |
| margin: 0; |
| padding: 28px 18px; |
| background: |
| radial-gradient( |
| 1200px 600px at 50% -120px, |
| rgba(255,210,30,.10), |
| transparent 60% |
| ), |
| var(--bg); |
| color: var(--text); |
| font-family: |
| ui-sans-serif, |
| system-ui, |
| -apple-system, |
| Segoe UI, |
| Roboto, |
| Arial, |
| sans-serif; |
| } |
| |
| .container { |
| max-width: 980px; |
| margin: 0 auto; |
| } |
| |
| .card { |
| background: |
| linear-gradient( |
| 180deg, |
| rgba(255,255,255,.04), |
| transparent 40% |
| ), |
| var(--panel); |
| border: 1px solid var(--border); |
| border-radius: 16px; |
| padding: 22px; |
| box-shadow: 0 10px 30px rgba(0,0,0,.35); |
| } |
| |
| h1 { |
| margin: 0 0 8px; |
| font-size: 38px; |
| letter-spacing: -0.5px; |
| } |
| |
| h2 { |
| margin: 0 0 6px; |
| font-size: 24px; |
| letter-spacing: -0.3px; |
| } |
| |
| .pill { |
| display: inline-block; |
| padding: 6px 10px; |
| border-radius: 999px; |
| background: rgba(255,210,30,.12); |
| border: 1px solid rgba(255,210,30,.22); |
| color: rgba(255,255,255,.9); |
| font-size: 13px; |
| margin-bottom: 14px; |
| } |
| |
| .meta { |
| margin: 0 0 18px; |
| color: var(--muted); |
| font-size: 15px; |
| line-height: 1.45; |
| } |
| |
| .meta b { |
| color: var(--text); |
| font-weight: 600; |
| } |
| |
| .install-section { |
| margin-top: 24px; |
| padding: 18px; |
| border-radius: 14px; |
| background: |
| linear-gradient( |
| 180deg, |
| rgba(255,210,30,.06), |
| rgba(255,255,255,.015) |
| ), |
| var(--panel-highlight); |
| border: 1px solid rgba(255,210,30,.18); |
| } |
| |
| .install-label { |
| display: inline-block; |
| margin-bottom: 8px; |
| color: var(--accent); |
| font-size: 13px; |
| font-weight: 700; |
| text-transform: uppercase; |
| letter-spacing: .6px; |
| } |
| |
| .install-description { |
| margin: 0 0 14px; |
| color: var(--muted); |
| font-size: 15px; |
| line-height: 1.5; |
| } |
| |
| .demos-heading { |
| margin: 28px 0 6px; |
| font-size: 26px; |
| } |
| |
| .demos-description { |
| margin: 0 0 18px; |
| color: var(--muted); |
| font-size: 15px; |
| } |
| |
| .section { |
| margin-top: 18px; |
| } |
| |
| .subtitle { |
| margin: 0 0 12px; |
| color: var(--muted); |
| font-size: 16px; |
| } |
| |
| .video-wrap { |
| position: relative; |
| padding-top: 56.25%; |
| border-radius: 14px; |
| overflow: hidden; |
| background: #000; |
| border: 1px solid var(--border); |
| } |
| |
| .video-wrap iframe { |
| position: absolute; |
| inset: 0; |
| width: 100%; |
| height: 100%; |
| border: 0; |
| } |
| |
| .divider { |
| margin: 22px 0; |
| height: 1px; |
| background: var(--border); |
| } |
| |
| a { |
| color: var(--link); |
| text-decoration: none; |
| word-break: break-word; |
| } |
| |
| a:hover { |
| text-decoration: underline; |
| } |
| </style> |
| </head> |
|
|
| <body> |
| <div class="container"> |
| <div class="card"> |
|
|
| <div class="pill">Installation guide + demo videos + source link</div> |
|
|
| <h1>Nulla — Demo</h1> |
|
|
| <p class="meta"> |
| <b>GitHub (download) Nulla v0.0.9:</b> |
| <a |
| href="https://github.com/Tsoxer/nulla" |
| target="_blank" |
| rel="noopener noreferrer" |
| > |
| https://github.com/Tsoxer/nulla |
| </a> |
| </p> |
|
|
|
|
| |
| <div class="install-section"> |
|
|
| <div class="install-label">Installation Guide</div> |
|
|
| <h2>How to Install Nulla v0.0.9</h2> |
|
|
| <p class="install-description"> |
| Step-by-step installation guide for Nulla v0.0.9. |
| </p> |
|
|
| <div class="video-wrap"> |
| <iframe |
| src="https://www.youtube-nocookie.com/embed/Zw-FMh60PLs" |
| title="How to Install Nulla v0.0.9" |
| allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share" |
| allowfullscreen> |
| </iframe> |
| </div> |
|
|
| </div> |
|
|
|
|
| |
| <h2 class="demos-heading">Demo Videos</h2> |
|
|
| <p class="demos-description"> |
| Version-specific demonstrations of Nulla. |
| </p> |
|
|
|
|
| <div class="section"> |
| <p class="subtitle">v0.0.9</p> |
|
|
| <div class="video-wrap"> |
| <iframe |
| src="https://www.youtube-nocookie.com/embed/n8MNbeL-WNQ" |
| title="Nulla demo v0.0.9" |
| allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share" |
| allowfullscreen> |
| </iframe> |
| </div> |
| </div> |
|
|
|
|
| <div class="divider"></div> |
|
|
|
|
| <div class="section"> |
| <p class="subtitle">v0.0.8</p> |
|
|
| <div class="video-wrap"> |
| <iframe |
| src="https://www.youtube-nocookie.com/embed/sKnwlFnl7kk" |
| title="Nulla demo v0.0.8" |
| allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share" |
| allowfullscreen> |
| </iframe> |
| </div> |
| </div> |
|
|
|
|
| <div class="divider"></div> |
|
|
|
|
| <div class="section"> |
| <p class="subtitle">v0.0.7</p> |
|
|
| <div class="video-wrap"> |
| <iframe |
| src="https://www.youtube-nocookie.com/embed/OAvTm5ev9Ns" |
| title="Nulla demo v0.0.7" |
| allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share" |
| allowfullscreen> |
| </iframe> |
| </div> |
| </div> |
|
|
| </div> |
| </div> |
| </body> |
| </html> |
