-
Notifications
You must be signed in to change notification settings - Fork 0
/
Copy pathindex.html
116 lines (101 loc) · 3.63 KB
/
index.html
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
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
<!DOCTYPE html>
<html data-theme="light">
<head>
<title>Project Popcorn</title>
<link rel="icon" href="data:image/svg+xml,<svg xmlns=%22http://www.w3.org/2000/svg%22 viewBox=%220 0 100 100%22><text y=%22.9em%22 font-size=%2290%22>🍿</text></svg>">
<style>
:root[data-theme="light"] {
--bg-color: white;
--text-color: black;
}
:root[data-theme="dark"] {
--bg-color: #1a1a1a;
--text-color: #ffffff;
}
body {
font-family: monospace;
white-space: pre-wrap;
padding: 20px;
max-width: 800px;
margin: 0 auto;
line-height: 1.5;
background-color: var(--bg-color);
color: var(--text-color);
}
a {
color: var(--text-color);
text-decoration: none;
}
a:hover {
text-decoration: underline;
}
#theme-toggle {
position: fixed;
top: 20px;
right: 20px;
padding: 8px 12px;
border: none;
border-radius: 5px;
cursor: pointer;
font-family: monospace;
background-color: var(--text-color);
color: var(--bg-color);
}
#theme-toggle:hover {
opacity: 0.9;
}
</style>
</head>
<body>
<button id="theme-toggle">🌓 Toggle Theme</button>
<div id="content"></div>
<script>
// Theme toggle functionality
const themeToggle = document.getElementById('theme-toggle');
const html = document.documentElement;
function toggleTheme() {
const currentTheme = html.getAttribute('data-theme');
const newTheme = currentTheme === 'light' ? 'dark' : 'light';
html.setAttribute('data-theme', newTheme);
localStorage.setItem('theme', newTheme);
}
// Load saved theme preference
const savedTheme = localStorage.getItem('theme');
if (savedTheme) {
html.setAttribute('data-theme', savedTheme);
}
themeToggle.addEventListener('click', toggleTheme);
function convertMarkdownLinks(text) {
// Match both [text](url) and bare URLs
const linkRegex = /\[([^\]]+)\]\(([^)]+)\)|(\b(?:https?:\/\/|www\.)[^\s<]+[\w/#])/g;
let lastIndex = 0;
let result = '';
let match;
while ((match = linkRegex.exec(text)) !== null) {
// Add text before the match
result += text.slice(lastIndex, match.index);
if (match[1] && match[2]) {
// [text](url) format
result += `<a href="${match[2]}" target="_blank">[${match[1]}](${match[2]})</a>`;
} else {
// bare URL format
const url = match[3];
result += `<a href="${url}" target="_blank">${url}</a>`;
}
lastIndex = linkRegex.lastIndex;
}
// Add remaining text
result += text.slice(lastIndex);
return result;
}
fetch('README.md')
.then(response => response.text())
.then(text => {
document.getElementById('content').innerHTML = convertMarkdownLinks(text);
})
.catch(err => {
document.getElementById('content').textContent = 'Error loading markdown: ' + err;
});
</script>
</body>
</html>