-
Notifications
You must be signed in to change notification settings - Fork 2
Expand file tree
/
Copy pathindex.html
More file actions
77 lines (77 loc) · 4.74 KB
/
Copy pathindex.html
File metadata and controls
77 lines (77 loc) · 4.74 KB
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>playsvideo — play any video in the browser</title>
<link rel="icon" type="image/svg+xml" href="/favicon.svg">
<meta name="theme-color" content="#111111">
<style>
:root { --bg: #fff; --fg: #111; --muted: #999; --cta-bg: #111; --cta-fg: #fff; --cta-hover: #333; }
@media (prefers-color-scheme: dark) {
:root { --bg: #111; --fg: #eee; --muted: #999; --cta-bg: #fff; --cta-fg: #111; --cta-hover: #ddd; }
}
html[data-theme="light"] { --bg: #fff; --fg: #111; --muted: #999; --cta-bg: #111; --cta-fg: #fff; --cta-hover: #333; }
html[data-theme="dark"] { --bg: #111; --fg: #eee; --muted: #999; --cta-bg: #fff; --cta-fg: #111; --cta-hover: #ddd; }
body { font-family: system-ui, sans-serif; margin: 0; background: var(--bg); color: var(--fg); display: flex; align-items: center; justify-content: center; min-height: 100vh; }
.landing { text-align: center; padding: 2rem; }
.tagline { color: var(--muted); font-size: 1.1rem; margin: 1.5rem 0 2rem; }
.cta-row { display: flex; gap: 1rem; justify-content: center; flex-wrap: wrap; }
.cta { display: inline-block; padding: 0.75rem 2rem; background: var(--cta-bg); color: var(--cta-fg); text-decoration: none; border-radius: 6px; font-weight: 600; font-size: 1rem; }
.cta:hover { background: var(--cta-hover); }
.debug-link { display: block; color: var(--muted); font-size: 0.85rem; margin-top: 1.5rem; text-decoration: none; }
.debug-link:hover { text-decoration: underline; }
.top-right { position: fixed; top: 1rem; right: 1rem; display: flex; gap: 0.5rem; align-items: center; }
.top-right a, .theme-toggle { background: none; border: 1px solid var(--muted); color: var(--fg); border-radius: 50%; width: 36px; height: 36px; cursor: pointer; font-size: 16px; display: flex; align-items: center; justify-content: center; opacity: 0.6; text-decoration: none; }
.top-right a:hover, .theme-toggle:hover { opacity: 1; }
</style>
<script>
(function() {
var t = localStorage.getItem('pv-theme');
if (t) document.documentElement.setAttribute('data-theme', t);
})();
</script>
</head>
<body>
<div class="top-right">
<a href="https://github.com/kzahel/playsvideo" aria-label="GitHub" title="GitHub">
<svg width="18" height="18" viewBox="0 0 16 16" fill="currentColor"><path d="M8 0C3.58 0 0 3.58 0 8c0 3.54 2.29 6.53 5.47 7.59.4.07.55-.17.55-.38 0-.19-.01-.82-.01-1.49-2.01.37-2.53-.49-2.69-.94-.09-.23-.48-.94-.82-1.13-.28-.15-.68-.52-.01-.53.63-.01 1.08.58 1.23.82.72 1.21 1.87.87 2.33.66.07-.52.28-.87.51-1.07-1.78-.2-3.64-.89-3.64-3.95 0-.87.31-1.59.82-2.15-.08-.2-.36-1.02.08-2.12 0 0 .67-.21 2.2.82.64-.18 1.32-.27 2-.27s1.36.09 2 .27c1.53-1.04 2.2-.82 2.2-.82.44 1.1.16 1.92.08 2.12.51.56.82 1.27.82 2.15 0 3.07-1.87 3.75-3.65 3.95.29.25.54.73.54 1.48 0 1.07-.01 1.93-.01 2.2 0 .21.15.46.55.38A8.01 8.01 0 0016 8c0-4.42-3.58-8-8-8z"/></svg>
</a>
<button class="theme-toggle" id="theme-toggle" aria-label="Toggle theme"></button>
</div>
<div class="landing">
<svg width="340" height="48" viewBox="0 0 340 48" style="transform: translateX(-21px)">
<polygon points="2,4 2,44 32,24" fill="currentColor"/>
<text x="44" y="38" font-family="'Inter', sans-serif" font-weight="700" font-size="38" fill="currentColor" letter-spacing="-2">plays</text>
<text x="164" y="38" font-family="'Inter', sans-serif" font-weight="300" font-size="38" fill="currentColor" letter-spacing="-2">video</text>
</svg>
<p class="tagline">Finally, videos just work.</p>
<div class="cta-row">
<a class="cta" href="/app">Launch App</a>
<a class="cta" href="/player">Launch Player</a>
<a class="cta" href="https://chromewebstore.google.com/detail/playsvideo/leanfmncjikipbkbjghejpaenkpanimp">Chrome Extension</a>
</div>
<a class="debug-link" href="/debug">Debug Player</a>
<a class="debug-link" href="https://graehlarts.com/privacy.html">Privacy Policy</a>
</div>
<script>
(function() {
var btn = document.getElementById('theme-toggle');
function isDark() {
var t = document.documentElement.getAttribute('data-theme');
if (t) return t === 'dark';
return matchMedia('(prefers-color-scheme: dark)').matches;
}
function update() { btn.textContent = isDark() ? '\u2600' : '\u263E'; }
btn.addEventListener('click', function() {
var next = isDark() ? 'light' : 'dark';
document.documentElement.setAttribute('data-theme', next);
localStorage.setItem('pv-theme', next);
update();
});
update();
matchMedia('(prefers-color-scheme: dark)').addEventListener('change', update);
})();
</script>
</body>
</html>