Skip to content

Commit 43591e7

Browse files
zuedevzuedev
committed
site update (RETRO COOL EPIC)
1 parent d393e77 commit 43591e7

3 files changed

Lines changed: 756 additions & 37 deletions

File tree

‎html/index.html‎

Lines changed: 313 additions & 32 deletions
Original file line numberDiff line numberDiff line change
@@ -3,63 +3,344 @@
33
<head>
44
<meta charset="UTF-8" />
55
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
6-
<title>Arcanum</title>
6+
<title>~*~ Arcanum - The Ultimate Discord Bot for TTRPG Games ~*~</title>
77
<meta
88
name="description"
9-
content="An open-source Discord bot for running TTRPG games."
9+
content="Welcome to Arcanum! The most awesome Discord bot for running TTRPG games. Roll dice, track items, and have epic adventures!"
1010
/>
1111
<meta
1212
name="keywords"
13-
content="discord, bot, ttrpg, rpg, dnd, open-source"
13+
content="discord, bot, ttrpg, rpg, dnd, dice roller, item tracker, open-source, tabletop, gaming"
1414
/>
1515
<link rel="icon" href="icon.png" />
1616
<style>
17-
html {
18-
height: 100%;
19-
background: black;
20-
color: white;
21-
font-family: "Times New Roman", Times, serif;
17+
body {
18+
margin: 0;
19+
padding: 20px;
20+
background: #000000;
21+
background-image:
22+
radial-gradient(circle at 25% 25%, #003300 0%, transparent 50%),
23+
radial-gradient(circle at 75% 75%, #000033 0%, transparent 50%);
24+
color: #00ff00;
25+
font-family: "Courier New", "Times New Roman", monospace;
2226
text-align: center;
23-
display: flex;
24-
flex-direction: column;
25-
justify-content: center;
26-
align-items: center;
27+
min-height: 100vh;
28+
overflow-x: hidden;
2729
}
2830

29-
img {
30-
width: 100px;
31-
height: 100px;
31+
.container {
32+
max-width: 800px;
33+
margin: 0 auto;
34+
padding: 20px;
35+
border: 3px solid #00ff00;
36+
border-radius: 10px;
37+
background: rgba(0, 0, 0, 0.8);
38+
box-shadow: 0 0 20px #00ff00;
39+
animation: glow 2s ease-in-out infinite alternate;
40+
}
41+
42+
@keyframes glow {
43+
from { box-shadow: 0 0 20px #00ff00; }
44+
to { box-shadow: 0 0 30px #00ff00, 0 0 40px #00ff00; }
45+
}
46+
47+
.header {
48+
margin-bottom: 30px;
49+
}
50+
51+
.avatar {
52+
width: 120px;
53+
height: 120px;
54+
border: 3px solid #00ff00;
55+
border-radius: 50%;
56+
margin: 20px auto;
57+
display: block;
58+
animation: spin 10s linear infinite;
59+
}
60+
61+
@keyframes spin {
62+
from { transform: rotate(0deg); }
63+
to { transform: rotate(360deg); }
3264
}
3365

3466
h1 {
67+
font-size: 3em;
68+
color: #00ff00;
69+
text-shadow: 0 0 10px #00ff00;
70+
margin: 20px 0;
71+
animation: pulse 1.5s ease-in-out infinite alternate;
72+
}
73+
74+
@keyframes pulse {
75+
from { text-shadow: 0 0 10px #00ff00; }
76+
to { text-shadow: 0 0 20px #00ff00, 0 0 30px #00ff00; }
77+
}
78+
79+
.subtitle {
80+
font-size: 1.3em;
81+
color: #ffff00;
82+
font-style: italic;
83+
margin-bottom: 30px;
84+
text-shadow: 0 0 5px #ffff00;
85+
}
86+
87+
.features {
88+
text-align: left;
89+
margin: 30px 0;
90+
padding: 20px;
91+
border: 2px dashed #ffff00;
92+
background: rgba(0, 20, 0, 0.5);
93+
}
94+
95+
.features h2 {
96+
text-align: center;
97+
color: #ffff00;
3598
font-size: 2em;
99+
text-decoration: underline;
100+
margin-bottom: 20px;
101+
}
102+
103+
.features ul {
104+
list-style: none;
105+
padding: 0;
106+
}
107+
108+
.features li {
109+
margin: 15px 0;
110+
padding: 10px;
111+
background: rgba(0, 50, 0, 0.3);
112+
border-left: 5px solid #00ff00;
113+
font-size: 1.1em;
114+
}
115+
116+
.features li::before {
117+
content: "🎲 ";
118+
margin-right: 10px;
119+
}
120+
121+
.button-container {
122+
margin: 40px 0;
123+
display: flex;
124+
justify-content: center;
125+
gap: 30px;
126+
flex-wrap: wrap;
127+
}
128+
129+
.retro-button {
130+
display: inline-block;
131+
padding: 15px 30px;
132+
background: linear-gradient(45deg, #003300, #006600);
133+
color: #00ff00;
134+
text-decoration: none;
135+
font-size: 1.4em;
136+
font-weight: bold;
137+
border: 3px solid #00ff00;
138+
border-radius: 5px;
139+
text-shadow: 0 0 5px #00ff00;
140+
transition: all 0.3s ease;
141+
text-transform: uppercase;
142+
letter-spacing: 2px;
143+
}
144+
145+
.retro-button:hover {
146+
background: linear-gradient(45deg, #006600, #009900);
147+
box-shadow: 0 0 15px #00ff00;
148+
transform: scale(1.05);
149+
animation: flash 0.5s ease-in-out;
150+
}
151+
152+
@keyframes flash {
153+
0%, 100% { opacity: 1; }
154+
50% { opacity: 0.8; }
155+
}
156+
157+
.stats {
158+
margin: 40px 0;
159+
padding: 20px;
160+
background: rgba(0, 0, 50, 0.3);
161+
border: 2px solid #0066ff;
162+
border-radius: 10px;
163+
}
164+
165+
.stats h3 {
166+
color: #0066ff;
167+
font-size: 1.8em;
168+
margin-bottom: 15px;
169+
}
170+
171+
.stat-item {
172+
display: inline-block;
173+
margin: 10px 20px;
174+
font-size: 1.2em;
175+
color: #66ccff;
36176
}
37177

38-
p {
39-
font-size: 1.5em;
178+
.visitor-counter {
179+
position: fixed;
180+
bottom: 10px;
181+
right: 10px;
182+
background: rgba(0, 0, 0, 0.8);
183+
color: #ff0066;
184+
padding: 10px;
185+
border: 2px solid #ff0066;
186+
border-radius: 5px;
187+
font-size: 0.9em;
188+
animation: blink 2s infinite;
40189
}
41190

42-
a {
43-
color: white;
44-
text-decoration: underline dotted;
45-
font-size: 1.5em;
46-
margin: 10px;
191+
@keyframes blink {
192+
0%, 50% { opacity: 1; }
193+
51%, 100% { opacity: 0.5; }
47194
}
48195

49-
a:hover {
196+
.footer {
197+
margin-top: 50px;
198+
padding: 20px;
199+
border-top: 3px double #00ff00;
200+
color: #888888;
201+
font-size: 0.9em;
202+
}
203+
204+
.footer a {
205+
color: #00ff00;
206+
text-decoration: none;
207+
}
208+
209+
.footer a:hover {
50210
text-decoration: underline;
211+
color: #ffff00;
212+
}
213+
214+
.marquee {
215+
background: #000033;
216+
color: #00ffff;
217+
padding: 10px;
218+
margin: 20px 0;
219+
border: 2px solid #00ffff;
220+
overflow: hidden;
221+
white-space: nowrap;
222+
}
223+
224+
.marquee-text {
225+
display: inline-block;
226+
animation: scroll-left 15s linear infinite;
227+
}
228+
229+
@keyframes scroll-left {
230+
0% { transform: translate3d(100%, 0, 0); }
231+
100% { transform: translate3d(-100%, 0, 0); }
232+
}
233+
234+
/* Responsive design but keep that 2000s charm */
235+
@media (max-width: 768px) {
236+
.container {
237+
margin: 10px;
238+
padding: 15px;
239+
}
240+
241+
h1 {
242+
font-size: 2.5em;
243+
}
244+
245+
.button-container {
246+
flex-direction: column;
247+
align-items: center;
248+
}
249+
250+
.visitor-counter {
251+
position: relative;
252+
margin: 20px auto;
253+
}
51254
}
52255
</style>
53256
</head>
54257
<body>
55-
<img src="icon.png" alt="Arcanum avatar" />
56-
<h1>Arcanum</h1>
57-
<p>An open-source Discord bot for running TTRPG games.</p>
58-
<a
59-
href="https://discord.com/oauth2/authorize?client_id=1274868942753628210"
60-
target="_blank"
61-
>Install</a
62-
>
63-
<a href="https://github.com/zuedev/Arcanum" target="_blank">GitHub</a>
258+
<div class="container">
259+
<div class="header">
260+
<img src="icon.png" alt="Arcanum avatar" class="avatar" />
261+
<h1>✨ ARCANUM ✨</h1>
262+
<div class="subtitle">~*~ The Ultimate Discord Bot for Epic TTRPG Adventures ~*~</div>
263+
</div>
264+
265+
<div class="marquee">
266+
<div class="marquee-text">
267+
🎲 Welcome to the most awesome Discord bot for tabletop gaming! 🎲 Roll dice, track items, and create legendary adventures! 🎲
268+
</div>
269+
</div>
270+
271+
<div class="features">
272+
<h2>⚔️ EPIC FEATURES ⚔️</h2>
273+
<ul>
274+
<li><strong>Dice Rolling System:</strong> Roll any dice from d4 to d100! Support for multiple dice and custom sides!</li>
275+
<li><strong>Item Tracker:</strong> Keep track of your party's loot, supplies, and magical items per channel!</li>
276+
<li><strong>Smart Search:</strong> Find items with fuzzy matching - no need to remember exact names!</li>
277+
<li><strong>Per-Channel Storage:</strong> Each channel has its own tracker - perfect for multiple campaigns!</li>
278+
<li><strong>Bulk Operations:</strong> Add or remove multiple quantities at once!</li>
279+
<li><strong>Export Data:</strong> Get your tracker data as JSON files for backup!</li>
280+
<li><strong>Permission Controls:</strong> Channel managers can clear trackers when needed!</li>
281+
<li><strong>Lightning Fast:</strong> Optimized for performance with chunked processing for large rolls!</li>
282+
</ul>
283+
</div>
284+
285+
<div class="stats">
286+
<h3>📊 BOT STATISTICS 📊</h3>
287+
<div class="stat-item">🎯 Max 100 Dice Per Roll</div>
288+
<div class="stat-item">🎲 Supports d4, d6, d8, d10, d12, d20, d100</div>
289+
<div class="stat-item">📦 Unlimited Item Tracking</div>
290+
<div class="stat-item">🔍 Smart Fuzzy Search</div>
291+
<div class="stat-item">⚡ Lightning Fast Response</div>
292+
<div class="stat-item">🛡️ 100% Open Source</div>
293+
</div>
294+
295+
<div class="button-container">
296+
<a
297+
href="https://discord.com/oauth2/authorize?client_id=1274868942753628210"
298+
target="_blank"
299+
class="retro-button"
300+
>🚀 Add to Discord 🚀</a>
301+
<a href="https://github.com/zuedev/Arcanum" target="_blank" class="retro-button">
302+
🐙 View on GitHub 🐙</a>
303+
<a href="privacy-policy/" class="retro-button">🔒 Privacy Policy</a>
304+
<a href="terms-of-service/" class="retro-button">📋 Terms of Service</a>
305+
</div>
306+
307+
<div class="marquee">
308+
<div class="marquee-text">
309+
💾 Made with love for the TTRPG community! 💾 Open source and always improving! 💾 Join thousands of adventurers! 💾
310+
</div>
311+
</div>
312+
313+
<div class="footer">
314+
<p>Created with ❤️ for the tabletop gaming community</p>
315+
<p>Built with Node.js • Discord.js • MongoDB</p>
316+
<p><a href="https://github.com/zuedev/Arcanum/issues">Report Issues</a> |
317+
<a href="https://github.com/zuedev/Arcanum/blob/master/README.md">Documentation</a></p>
318+
<p><em>"Roll for initiative!"</em></p>
319+
</div>
320+
</div>
321+
322+
<div class="visitor-counter">
323+
👁️ You are visitor #<span id="visitor-count">1337</span>
324+
</div>
325+
326+
<script>
327+
// Classic 2000s visitor counter simulation
328+
document.addEventListener('DOMContentLoaded', function() {
329+
const counter = document.getElementById('visitor-count');
330+
const baseCount = 1337;
331+
const randomAdd = Math.floor(Math.random() * 999) + 100;
332+
counter.textContent = (baseCount + randomAdd).toLocaleString();
333+
334+
// Add some interactivity
335+
let clickCount = 0;
336+
document.body.addEventListener('click', function() {
337+
clickCount++;
338+
if (clickCount > 5) {
339+
const colors = ['#ff0066', '#00ff00', '#ffff00', '#0066ff', '#ff6600'];
340+
document.body.style.color = colors[Math.floor(Math.random() * colors.length)];
341+
}
342+
});
343+
});
344+
</script>
64345
</body>
65346
</html>

0 commit comments

Comments
 (0)