Hugging Face's logo

Spaces:
Tsoxer
/
nulla
Running

App Files Community
Tsoxer commited on
Commit
bddde01
·
verified ·
1 Parent(s): 12f2490

Update index.html

Browse files
Files changed (1) hide show
  1. index.html +116 -26
index.html CHANGED
@@ -3,37 +3,127 @@
3
  <head>
4
  <meta charset="utf-8" />
5
  <meta name="viewport" content="width=device-width, initial-scale=1" />
6
- <title>Nulla Demo</title>
 
 
7
  <style>
8
- body { font-family: system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif; margin: 0; padding: 24px; }
9
- .container { max-width: 1000px; margin: 0 auto; }
10
- h1 { margin: 0 0 12px; }
11
- a { word-break: break-word; }
12
- .video-wrap { position: relative; padding-top: 56.25%; margin: 16px 0; border-radius: 12px; overflow: hidden; background: #000; }
13
- .video-wrap iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; }
14
- .footer { margin-top: 16px; font-size: 0.95rem; }
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
15
  </style>
16
  </head>
 
17
  <body>
18
  <div class="container">
19
- <h1>Nulla — Demo</h1>
20
- <p>Demo video + source link 👇</p>
21
-
22
- <div class="video-wrap">
23
- <iframe
24
- src="https://www.youtube-nocookie.com/embed/OAvTm5ev9Ns"
25
- title="Nulla demo"
26
- allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share"
27
- allowfullscreen>
28
- </iframe>
29
- </div>
30
 
31
- <p class="footer">
32
- GitHub:
33
- <a href="https://github.com/Tsoxer/nulla" target="_blank" rel="noopener noreferrer">
34
- https://github.com/Tsoxer/nulla
35
- </a>
36
- </p>
 
 
 
 
 
 
 
 
 
 
37
  </div>
38
  </body>
39
- </html>
 
3
  <head>
4
  <meta charset="utf-8" />
5
  <meta name="viewport" content="width=device-width, initial-scale=1" />
6
+ <meta name="theme-color" content="#0b0f19" />
7
+ <title>Nulla — Demo</title>
8
+
9
  <style>
10
+ :root{
11
+ /* HF-ish dark */
12
+ --bg: #0b0f19;
13
+ --panel: #0f1629;
14
+ --border: rgba(255,255,255,.08);
15
+ --text: rgba(255,255,255,.92);
16
+ --muted: rgba(255,255,255,.70);
17
+ --link: #7aa2ff; /* calm blue link */
18
+ --accent: #ffd21e; /* HF-ish yellow accent */
19
+ }
20
+
21
+ * { box-sizing: border-box; }
22
+ body {
23
+ margin: 0;
24
+ padding: 28px 18px;
25
+ background: radial-gradient(1200px 600px at 50% -120px, rgba(255,210,30,.10), transparent 60%),
26
+ var(--bg);
27
+ color: var(--text);
28
+ font-family: ui-sans-serif, system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif;
29
+ }
30
+
31
+ .container {
32
+ max-width: 980px;
33
+ margin: 0 auto;
34
+ }
35
+
36
+ .card {
37
+ background: linear-gradient(180deg, rgba(255,255,255,.04), transparent 40%),
38
+ var(--panel);
39
+ border: 1px solid var(--border);
40
+ border-radius: 16px;
41
+ padding: 22px;
42
+ box-shadow: 0 10px 30px rgba(0,0,0,.35);
43
+ }
44
+
45
+ h1 {
46
+ margin: 0 0 8px;
47
+ font-size: 38px;
48
+ letter-spacing: -0.5px;
49
+ }
50
+
51
+ .subtitle {
52
+ margin: 0 0 16px;
53
+ color: var(--muted);
54
+ font-size: 16px;
55
+ }
56
+
57
+ .pill {
58
+ display: inline-block;
59
+ padding: 6px 10px;
60
+ border-radius: 999px;
61
+ background: rgba(255,210,30,.12);
62
+ border: 1px solid rgba(255,210,30,.22);
63
+ color: rgba(255,255,255,.9);
64
+ font-size: 13px;
65
+ margin-bottom: 14px;
66
+ }
67
+
68
+ .video-wrap {
69
+ position: relative;
70
+ padding-top: 56.25%;
71
+ border-radius: 14px;
72
+ overflow: hidden;
73
+ background: #000;
74
+ border: 1px solid var(--border);
75
+ }
76
+
77
+ .video-wrap iframe {
78
+ position: absolute;
79
+ inset: 0;
80
+ width: 100%;
81
+ height: 100%;
82
+ border: 0;
83
+ }
84
+
85
+ a {
86
+ color: var(--link);
87
+ text-decoration: none;
88
+ }
89
+ a:hover { text-decoration: underline; }
90
+
91
+ .footer {
92
+ margin-top: 14px;
93
+ color: var(--muted);
94
+ font-size: 15px;
95
+ }
96
+
97
+ .footer b {
98
+ color: var(--text);
99
+ font-weight: 600;
100
+ }
101
  </style>
102
  </head>
103
+
104
  <body>
105
  <div class="container">
106
+ <div class="card">
107
+ <div class="pill">Demo video + source link</div>
108
+ <h1>Nulla — Demo</h1>
109
+ <p class="subtitle">Quick watch, quick click. No eye damage this time.</p>
 
 
 
 
 
 
 
110
 
111
+ <div class="video-wrap">
112
+ <iframe
113
+ src="https://www.youtube-nocookie.com/embed/OAvTm5ev9Ns"
114
+ title="Nulla demo"
115
+ allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share"
116
+ allowfullscreen>
117
+ </iframe>
118
+ </div>
119
+
120
+ <p class="footer">
121
+ <b>GitHub:</b>
122
+ <a href="https://github.com/Tsoxer/nulla" target="_blank" rel="noopener noreferrer">
123
+ https://github.com/Tsoxer/nulla
124
+ </a>
125
+ </p>
126
+ </div>
127
  </div>
128
  </body>
129
+ </html>