404MNG.github.io/index.html at main · 404MNG/404MNG.github.io · 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
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Uxarieus | Command Center</title>
    <link rel="preconnect" href="https://fonts.googleapis.com">
    <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0/css/all.min.css">
    <link href="https://fonts.googleapis.com/css2?family=Sansation:wght@400;700&display=swap" rel="stylesheet">
    <link rel="stylesheet" href="style.css">
</head>
<body>

    <audio id="tardis-sound" src="https://cdn.pixabay.com/audio/2022/03/10/audio_5866163351.mp3" preload="auto"></audio>

    <div class="dust-container"></div>

    <nav>
        <div class="member-stat">
            Citizens: <span id="citizen-total">Loading...</span>
        </div>
    </nav>

    <audio id="bg-music" loop>
  <source src="your-music-file.mp3.mp3" type="audio/mpeg">
  Your browser does not support the audio element.
</audio>

<div class="audio-controls">
  <button id="music-toggle" class="music-btn">
    <i id="music-icon" class="fas fa-volume-mute"></i>
  </button>
</div>

    <div class="tardis-wrap">
        <div class="tardis-3d">
            <div class="side front"></div>
            <div class="side back"></div>
            <div class="side left"></div>
            <div class="side right"></div>
            <div class="side top"></div>
            <div class="side bottom"></div>
        </div>
    </div>

    <div class="bg-orb orb-1"></div>
    <div class="bg-orb orb-2"></div>

    <div class="main-container">
        <header class="hero">
            <h3 class="subtitle">DALEK MOD UNIVERSE</h3>
            <h1 class="glitch-title">UXARIEUS</h1>
            <p>Welcome to the town of Jayden and K256!</p>
        </header>

        <div class="menu-grid">
            <a href="rules/rules.html" class="menu-card" style="--accent-color: #ff3366;">
                <div class="card-icon">⚖️</div>
                <div class="card-info">
                    <h3>Town Ordinances</h3>
                    <p>Essential rules and enforcement policies.</p>
                </div>
            </a>

            <a href="metro/metro.html" class="menu-card" style="--accent-color: #00e5ff;">
                <div class="card-icon">🚇</div>
                <div class="card-info">
                    <h3>Metro Network</h3>
                    <p>Live maps and transit routes.</p>
                </div>
            </a>

            <a href="account/login.html" class="menu-card" style="--accent-color: #bc13fe;">
                <div class="card-icon">🔐</div>
                <div class="card-info">
                    <h3>Citizen Portal</h3>
                    <p>Access your secure town profile.</p>
                </div>
            </a>
        </div>

        <footer class="server-status">
            <div class="pulse-dot"></div>
            <span>System Status: <strong>Testing</strong></span>

            <a href="https://discord.gg/55K5d5KR" target="_blank" class="discord-link">
                <i class="fab fa-discord"></i> JOIN COMMS
            </a>
        </footer>
    </div>

    <script src="https://cdn.jsdelivr.net/npm/@supabase/supabase-js@2"></script>
    <script>
        // 1. Supabase Configuration
        const SUPABASE_URL = 'https://rzzondwhtswpfeawujfu.supabase.co';
        const SUPABASE_KEY = 'sb_publishable_j5UPlvsxbiY8gxE_54bvQQ_XWi0SZt8';
        const supabaseClient = supabase.createClient(SUPABASE_URL, SUPABASE_KEY);

        // 2. Function to sync the Citizen Count
        async function syncCitizenCount() {
            const display = document.getElementById('citizen-total');
            try {
                const { count, error } = await supabaseClient
                    .from('citizens')
                    .select('id', { count: 'exact', head: true });

                if (error) throw error;
                display.innerText = count !== null ? count : 0;
                display.style.textShadow = "0 0 15px #00e5ff";
            } catch (err) {
                console.error('System Link Error:', err.message);
                display.innerText = 'OFFLINE';
            }
        }

        // 3. Music Control Logic (Keep this separate from the counter!)
        const music = document.getElementById('bg-music');
        const musicBtn = document.getElementById('music-toggle');
        const musicIcon = document.getElementById('music-icon');

        // Set default volume so it's not too loud (0.0 to 1.0)
        music.volume = 0.4;

        musicBtn.addEventListener('click', () => {
            if (music.paused) {
                music.play();
                musicIcon.classList.remove('fa-volume-mute');
                musicIcon.classList.add('fa-volume-up');
                musicBtn.style.borderColor = "#00e5ff";
            } else {
                music.pause();
                musicIcon.classList.remove('fa-volume-up');
                musicIcon.classList.add('fa-volume-mute');
                musicBtn.style.borderColor = "#bc13fe";
            }
        });

        // 4. Initial Launch
        syncCitizenCount();
        setInterval(syncCitizenCount, 60000);
    </script>

    <script>
    const tardisSound = document.getElementById('tardis-sound');

    // Trigger on the first click anywhere on the page
    document.addEventListener('click', () => {
        if (tardisSound.paused) {
            tardisSound.volume = 0.6; // 60% volume
            tardisSound.play().catch(error => {
                console.log("Audio play failed:", error);
            });
        }
    }, { once: true }); // '{ once: true }' makes sure it doesn't play every time you click
</script>

</body>
</html>