RuneCast/index.html at master · cycle-five/RuneCast · GitHub

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
<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>RuneCast — a neon word game for Discord</title>
  <meta name="description" content="RuneCast is a neon word game you play right inside Discord — daily challenges, live multiplayer, and monthly races.">
  <link rel="preconnect" href="https://fonts.googleapis.com">
  <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
  <link rel="stylesheet" href="styles.css">
  <link rel="icon" type="image/png" sizes="32x32" href="assets/favicon-32.png">
  <link rel="icon" type="image/png" sizes="256x256" href="assets/favicon.png">
  <meta property="og:title" content="RuneCast — a neon word game for Discord">
  <meta property="og:description" content="A neon word game you play right inside Discord — daily challenges, live multiplayer, and monthly races.">
  <meta property="og:image" content="https://runeca.st/assets/og-image.png">
  <meta property="og:url" content="https://runeca.st/">
  <meta property="og:type" content="website">
  <meta name="twitter:card" content="summary_large_image">
</head>
<body>

<!-- NAV -->
<nav class="nav">
  <div class="navmark">RuneCast</div>
  <div class="nav-links">
    <a href="#features">Features</a><a href="#daily">Daily</a><a href="#community">Community</a>
    <a class="cta cta-primary" style="padding:9px 16px;" href="https://discord.com/oauth2/authorize?client_id=1445199102773170206" target="_blank" rel="noopener">Play on Discord</a>
  </div>
</nav>

<!-- HERO A -->
<section class="heroA" aria-label="Introduction">
  <div class="grid"></div>
  <div style="position:relative;z-index:2;display:flex;flex-direction:column;align-items:center;">
    <div class="wm wm-lg"><span class="l1">Rune</span><span class="l2">Cast</span></div>
    <div style="transform:rotate(-6deg);margin:14px 0 2px;"><div class="loadbar">
      <span class="seg on"></span><span class="seg on"></span><span class="seg on"></span><span class="seg on"></span><span class="seg on"></span><span class="seg on"></span><span class="seg on"></span><span class="seg on"></span><span class="seg on"></span><span class="seg"></span><span class="seg"></span><span class="seg"></span><span class="seg"></span>
    </div></div>
    <div class="tag" style="margin-top:12px;">SpellCast, reforged.</div>
    <div class="sub" style="max-width:440px;margin-top:4px;">A neon word game you play right inside Discord — daily challenges, live multiplayer, and monthly races.</div>
    <div class="ctas"><a class="cta cta-primary" href="https://discord.com/oauth2/authorize?client_id=1445199102773170206" target="_blank" rel="noopener">▶ Play on Discord</a><a class="cta cta-ghost" href="https://discord.gg/mru3dpDAYv" target="_blank" rel="noopener">Join Server</a></div>
    <div class="board-frame"><img src="assets/board-desktop.png" alt="RuneCast gameplay — a 5×5 letter board with gem and multiplier tiles"></div>
  </div>
</section>

<!-- LIVE DAILY LEADERBOARD -->
<section class="band" id="daily" aria-label="Live daily leaderboard"><div class="wrap lb-split">
  <div class="copy">
    <div class="kicker"><span class="livedot"></span>Live · updates daily</div>
    <div class="h2">Today's Daily Challenge</div>
    <div class="sub" style="max-width:380px;">One board. Everyone. 90 seconds on the clock. A fresh puzzle drops every day at midnight UTC — climb the board and defend your streak.</div>
    <a class="cta cta-primary" style="margin-top:22px;" href="https://discord.com/oauth2/authorize?client_id=1445199102773170206" target="_blank" rel="noopener">Play today's challenge ▸</a>
  </div>
  <div class="panelwrap"><div class="lb">
    <div class="lb-head"><span>Rank · Player</span><span>Score</span></div>
    <div class="lb-div"><div class="loadbar"><span class="seg on"></span><span class="seg on"></span><span class="seg on"></span><span class="seg on"></span><span class="seg on"></span><span class="seg on"></span><span class="seg on"></span><span class="seg on"></span><span class="seg"></span><span class="seg"></span></div></div>
    <div class="lb-body" id="daily-lb-rows" aria-live="polite">
      <div class="lb-row lb-skeleton"><div class="lb-rank">…</div><div class="lb-name">Loading today's board…</div><div class="lb-score"></div></div>
    </div>
  </div></div>
</div></section>

<!-- FEATURES -->
<section class="band" id="features" aria-label="Features"><div class="wrap" style="text-align:center;">
  <div class="kicker">What's inside</div>
  <div class="h2">More than a word game.</div>
  <div class="features" style="text-align:left;">
    <div class="fcard"><div class="ic">🗓️</div><h3>Daily Challenge</h3><p>One puzzle, everyone, 90 seconds. Compete for the day's top spot.</p></div>
    <div class="fcard"><div class="ic">⚔️</div><h3>Live Multiplayer</h3><p>Free-for-all word battles in your server — or spectate a live match.</p></div>
    <div class="fcard"><div class="ic">🏆</div><h3>Monthly Races</h3><p>Bank points all month long and climb the monthly leaderboard.</p></div>
    <div class="fcard"><div class="ic">💥</div><h3>Adventure Events</h3><p>Bombs, snakes and UFOs shake up the board mid-game.</p></div>
  </div>
</div></section>

<!-- MEDIA / PLAY ANYWHERE -->
<section class="band" aria-label="Play anywhere"><div class="wrap media">
  <div class="shot"><img src="assets/board-mobile.png" alt="RuneCast running as a Discord Activity on mobile — the same 5×5 letter board"></div>
  <div class="copy">
    <div class="kicker">Play anywhere</div>
    <div class="h2">It's a Discord Activity — no install.</div>
    <div class="sub" style="max-width:420px;">Launch RuneCast right inside any Discord channel — voice <em>or</em> text — and play together in seconds. Works on desktop, mobile, and web; your themes, streak, and stats follow you everywhere.</div>
    <div class="pills"><span class="pill">🖥️ Desktop</span><span class="pill">📱 Mobile</span><span class="pill">🌐 Web</span></div>
  </div>
</div></section>

<!-- COMMUNITY -->
<section class="community" id="community" aria-label="Community">
  <div class="fulldiv"><span class="seg on"></span><span class="seg on"></span><span class="seg on"></span><span class="seg on"></span><span class="seg on"></span><span class="seg on"></span><span class="seg on"></span><span class="seg on"></span><span class="seg on"></span><span class="seg on"></span><span class="seg"></span><span class="seg"></span></div>
  <div class="kicker">Community</div>
  <div class="h2">Join the players.</div>
  <div class="sub" style="max-width:440px;margin:0 auto;">Tips, tournaments, and the people behind RuneCast. Come say hi.</div>
  <div class="socials">
    <a class="social" href="https://discord.gg/mru3dpDAYv" target="_blank" rel="noopener"><span class="dot" style="background:#5865F2;"></span>Discord — Join Server</a>
    <a class="social" href="https://reddit.com/r/RuneCast" target="_blank" rel="noopener"><span class="dot" style="background:#FF4500;"></span>Reddit — r/RuneCast</a>
    <a class="social" href="https://facebook.com/RuneCastGame" target="_blank" rel="noopener"><span class="dot" style="background:#1877F2;"></span>Facebook — RuneCast</a>
  </div>
</section>
<footer class="footer">
  <div class="navmark" style="font-size:16px;">RuneCast</div>
  <div>© 2026 Cycle Five · A neon word game for Discord</div>
</footer>

<script type="module" src="script.js"></script>
</body>
</html>