Hugging Face's logo

Spaces:
DeepLearning-VT
/
DeepLearning_2026
Running

App Files Community
vlbthambawita commited on
Commit
a81b0ea
·
verified ·
1 Parent(s): 3123d7f

Release lecture-01-v0.2

Browse files
Files changed (1) hide show
  1. index.html +107 -17
index.html CHANGED
@@ -1,19 +1,109 @@
1
  <!doctype html>
2
- <html>
3
- <head>
4
- <meta charset="utf-8" />
5
- <meta name="viewport" content="width=device-width" />
6
- <title>My static Space</title>
7
- <link rel="stylesheet" href="style.css" />
8
- </head>
9
- <body>
10
- <div class="card">
11
- <h1>Welcome to your static Space!</h1>
12
- <p>You can modify this app directly by editing <i>index.html</i> in the Files and versions tab.</p>
13
- <p>
14
- Also don't forget to check the
15
- <a href="https://huggingface.co/docs/hub/spaces" target="_blank">Spaces documentation</a>.
16
- </p>
17
- </div>
18
- </body>
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
19
  </html>
 
1
  <!doctype html>
2
+ <html lang="en">
3
+ <head>
4
+ <meta charset="utf-8">
5
+ <meta name="viewport" content="width=device-width, initial-scale=1">
6
+ <title>Deep Learning 2026 — PGR207</title>
7
+ <meta name="description" content="Animated, interactive lecture slides for PGR207 Deep Learning 2026.">
8
+ <style>
9
+ :root {
10
+ --bg: #ffffff;
11
+ --surface: #f7f9fa;
12
+ --border: #e3e8ea;
13
+ --heading: #111111;
14
+ --body: #595959;
15
+ --muted: #8a8a8a;
16
+ --accent: #0097a7;
17
+ --accent-soft: #e0f4f6;
18
+ }
19
+ @media (prefers-color-scheme: dark) {
20
+ :root {
21
+ --bg: #0d1117;
22
+ --surface: #161b22;
23
+ --border: #2a323d;
24
+ --heading: #f2f5f7;
25
+ --body: #c2cad2;
26
+ --muted: #8b949e;
27
+ --accent: #2ec9d8;
28
+ --accent-soft: #123236;
29
+ }
30
+ }
31
+ * { box-sizing: border-box; }
32
+ body {
33
+ margin: 0;
34
+ background: var(--bg);
35
+ color: var(--body);
36
+ font-family: Inter, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
37
+ line-height: 1.55;
38
+ -webkit-font-smoothing: antialiased;
39
+ }
40
+ .wrap { max-width: 62rem; margin: 0 auto; padding: 4rem 1.5rem 5rem; }
41
+ .eyebrow {
42
+ font-size: .78rem; font-weight: 700; letter-spacing: .18em;
43
+ text-transform: uppercase; color: var(--accent);
44
+ }
45
+ h1 { color: var(--heading); font-size: clamp(2.2rem, 6vw, 3.4rem); line-height: 1.05; margin: .6rem 0 .8rem; letter-spacing: -.02em; }
46
+ .lede { font-size: 1.1rem; max-width: 46ch; margin: 0; }
47
+ .rule { width: 4.5rem; height: 3px; background: var(--accent); border-radius: 2px; margin: 1.6rem 0 2.4rem; }
48
+ .meta { font-size: .92rem; color: var(--muted); }
49
+ .meta a { color: var(--accent); text-decoration: none; }
50
+ .meta a:hover { text-decoration: underline; }
51
+
52
+ h2 { color: var(--heading); font-size: 1.1rem; letter-spacing: .06em; text-transform: uppercase; margin: 3rem 0 1rem; }
53
+
54
+ .decks { display: grid; gap: 1rem; grid-template-columns: repeat(auto-fill, minmax(20rem, 1fr)); }
55
+ .deck {
56
+ display: block; padding: 1.2rem 1.3rem; border: 1px solid var(--border);
57
+ border-left: 3px solid var(--accent); border-radius: 10px; background: var(--surface);
58
+ text-decoration: none; color: inherit; transition: transform .15s ease, border-color .15s ease;
59
+ }
60
+ .deck:hover { transform: translateY(-3px); border-color: var(--accent); }
61
+ .deck__week { font-size: .72rem; font-weight: 700; letter-spacing: .14em; text-transform: uppercase; color: var(--accent); }
62
+ .deck__title { color: var(--heading); font-size: 1.22rem; font-weight: 600; margin: .3rem 0 .25rem; }
63
+ .deck__sub { font-size: .92rem; color: var(--body); }
64
+ .deck__links { margin-top: .8rem; display: flex; flex-wrap: wrap; gap: .9rem; font-size: .82rem; }
65
+ .deck__links span, .deck__links a { color: var(--accent); text-decoration: none; }
66
+
67
+ .empty { padding: 2rem; border: 1px dashed var(--border); border-radius: 10px; color: var(--muted); text-align: center; }
68
+
69
+ footer { margin-top: 4rem; padding-top: 1.5rem; border-top: 1px solid var(--border); font-size: .82rem; color: var(--muted); display: flex; flex-wrap: wrap; gap: 1rem; justify-content: space-between; }
70
+ footer a { color: var(--accent); text-decoration: none; }
71
+
72
+ .tips { margin-top: 2.5rem; padding: 1rem 1.2rem; background: var(--accent-soft); border-radius: 10px; font-size: .9rem; }
73
+ .tips kbd {
74
+ font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size: .8em;
75
+ background: var(--bg); border: 1px solid var(--border); border-bottom-width: 2px;
76
+ border-radius: 4px; padding: .1rem .35rem;
77
+ }
78
+ </style>
79
+ </head>
80
+ <body>
81
+ <div class="wrap">
82
+ <div class="eyebrow">PGR207 · 2026</div>
83
+ <h1>Deep Learning</h1>
84
+ <p class="lede">Animated, interactive lecture slides. Everything runs in your browser — no install, no account.</p>
85
+ <div class="rule"></div>
86
+ <p class="meta">Vajira Thambawita (PhD) · <a href="mailto:vajira@simula.no">vajira@simula.no</a></p>
87
+
88
+ <h2>Lectures</h2>
89
+ <div class="decks">
90
+ <a class="deck" href="lecture-01/">
91
+ <div class="deck__week">Week 1</div>
92
+ <div class="deck__title">Introduction to Deep Learning</div>
93
+ <div class="deck__sub">Course overview, what deep learning is, and where it is used</div>
94
+ <div class="deck__links"><span>Open slides →</span></div>
95
+ </a>
96
+ </div>
97
+
98
+ <div class="tips">
99
+ Navigate with <kbd>→</kbd> / <kbd>←</kbd> or <kbd>Space</kbd>. Press <kbd>o</kbd> for the slide overview,
100
+ <kbd>f</kbd> for fullscreen, <kbd>d</kbd> to toggle dark mode.
101
+ </div>
102
+
103
+ <footer>
104
+ <span>Built with <a href="https://sli.dev/">Slidev</a> · source on <a href="https://github.com/vlbthambawita/DeepLearning">GitHub</a></span>
105
+ <span>Updated 2026-08-16</span>
106
+ </footer>
107
+ </div>
108
+ </body>
109
  </html>