|
|
<!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):</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.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> |
