| <!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; |
| --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; |
| } |
| |
| .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; |
| } |
| |
| .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">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="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> |
