44 lines
1.8 KiB
HTML
44 lines
1.8 KiB
HTML
<!DOCTYPE html>
|
|
<html lang="zh-CN">
|
|
<head>
|
|
<meta charset="UTF-8">
|
|
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
|
<title>Slides</title>
|
|
<style>
|
|
* { margin: 0; padding: 0; box-sizing: border-box; }
|
|
body { font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif; background: #0f172a; color: #e2e8f0; min-height: 100vh; display: flex; align-items: center; justify-content: center; }
|
|
.container { max-width: 640px; width: 100%; padding: 2rem; }
|
|
h1 { font-size: 2rem; font-weight: 700; margin-bottom: 2rem; color: #f8fafc; }
|
|
.deck-list { display: flex; flex-direction: column; gap: 0.75rem; }
|
|
a.deck { display: flex; align-items: center; justify-content: space-between; padding: 1rem 1.25rem; background: #1e293b; border: 1px solid #334155; border-radius: 0.75rem; text-decoration: none; color: #e2e8f0; transition: all 0.2s; }
|
|
a.deck:hover { background: #334155; border-color: #475569; transform: translateY(-1px); }
|
|
a.deck .name { font-size: 1.125rem; font-weight: 600; }
|
|
a.deck .arrow { font-size: 1.25rem; color: #64748b; }
|
|
a.deck:hover .arrow { color: #94a3b8; }
|
|
.empty { color: #64748b; font-style: italic; padding: 1rem 0; }
|
|
</style>
|
|
</head>
|
|
<body>
|
|
<div class="container">
|
|
<h1>Slide Decks</h1>
|
|
<div class="deck-list" id="decks">
|
|
<p class="empty">Loading...</p>
|
|
</div>
|
|
</div>
|
|
<script>
|
|
const decks = ['demo', 'showcase'];
|
|
const container = document.getElementById('decks');
|
|
if (decks.length === 0) {
|
|
container.innerHTML = '<p class="empty">No slide decks yet.</p>';
|
|
} else {
|
|
container.innerHTML = decks.map(name =>
|
|
`<a class="deck" href="/${name}/">
|
|
<span class="name">${name}</span>
|
|
<span class="arrow">→</span>
|
|
</a>`
|
|
).join('');
|
|
}
|
|
</script>
|
|
</body>
|
|
</html>
|