MajorSystemGame/index.html at main · DavidTbilisi/MajorSystemGame · 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
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
206
207
208
209
210
211
212
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>MAJOR SYSTEM PROTOCOL - MATRIX INTERFACE</title>
    <link rel="stylesheet" href="style.css">
    <link rel="icon" href="data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 100'><text y='.9em' font-size='90' fill='%2300ff00'>M</text></svg>">
</head>
<body>
    <!-- Matrix Rain Canvas -->
    <canvas id="matrix-rain"></canvas>

    <div class="container">
        <div class="matrix-header">
            <div class="system-status">SYSTEM: ONLINE | PROTOCOL: ACTIVE | SECURITY: ENABLED</div>
        </div>

        <div class="number"></div>
        <div class="images"></div>

        <div class="matrix-footer">
            <div class="terminal-line">root@matrix:~$ execute major_system.exe</div>
        </div>
    </div>

    <script>
        // Matrix Rain Effect
        const canvas = document.getElementById('matrix-rain');
        const ctx = canvas.getContext('2d');

        // Set canvas size
        function resizeCanvas() {
            canvas.width = window.innerWidth;
            canvas.height = window.innerHeight;
        }

        resizeCanvas();
        window.addEventListener('resize', resizeCanvas);

        // Matrix characters - mix of Japanese katakana, numbers, and symbols
        const matrixChars = 'アカサタナハマヤラワガザダバパイキシチニヒミリギジヂビピウクスツヌフムユルグズヅブプエケセテネヘメレゲゼデベペオコソトノホモヨロゴゾドボポヴッン0123456789ABCDEFGHIJKLMNOPQRSTUVWXYZ';
        const fontSize = 14;
        const columns = Math.floor(canvas.width / fontSize);

        // Array to store drops
        const drops = [];

        // Initialize drops
        for (let i = 0; i < columns; i++) {
            drops[i] = Math.floor(Math.random() * canvas.height / fontSize);
        }

        function drawMatrix() {
            // Semi-transparent black background for fade effect
            ctx.fillStyle = 'rgba(0, 0, 0, 0.05)';
            ctx.fillRect(0, 0, canvas.width, canvas.height);

            ctx.fillStyle = '#00ff00';
            ctx.font = fontSize + 'px "Courier Prime", monospace';

            for (let i = 0; i < drops.length; i++) {
                const char = matrixChars[Math.floor(Math.random() * matrixChars.length)];
                const x = i * fontSize;
                const y = drops[i] * fontSize;

                // Add some variation in brightness
                const brightness = Math.random();
                if (brightness > 0.95) {
                    ctx.fillStyle = '#ffffff'; // Bright white for leading chars
                } else if (brightness > 0.8) {
                    ctx.fillStyle = '#39ff14'; // Bright green
                } else {
                    ctx.fillStyle = '#00ff00'; // Normal green
                }

                ctx.fillText(char, x, y);

                // Reset drop to top after it reaches bottom
                if (y > canvas.height && Math.random() > 0.975) {
                    drops[i] = 0;
                }

                drops[i]++;
            }
        }

        // Start the animation
        setInterval(drawMatrix, 50);

        // Glitch effects
        function addGlitchEffects() {
            const glitchElements = document.querySelectorAll('.number, .images img, .stats, .export-buttons button, .system-status, .terminal-line');

            glitchElements.forEach(element => {
                // Random position glitch
                if (Math.random() > 0.985) {
                    element.style.animation = 'glitch1 0.2s ease-in-out';
                    setTimeout(() => {
                        element.style.animation = '';
                    }, 200);
                }

                // Random color glitch
                if (Math.random() > 0.992) {
                    element.style.animation = 'colorGlitch 0.4s ease-in-out';
                    setTimeout(() => {
                        element.style.animation = '';
                    }, 400);
                }

                // Digital noise effect
                if (Math.random() > 0.996) {
                    element.style.animation = 'digitalNoise 0.3s ease-in-out';
                    setTimeout(() => {
                        element.style.animation = '';
                    }, 300);
                }
            });

            // Random screen flicker
            if (Math.random() > 0.998) {
                document.body.style.animation = 'glitch2 0.1s ease-in-out';
                setTimeout(() => {
                    document.body.style.animation = '';
                }, 100);
            }
        }

        // Apply glitch effects more frequently for Matrix feel
        setInterval(addGlitchEffects, 80);

        // Dynamic system status
        const systemStatus = document.querySelector('.system-status');
        const terminalLine = document.querySelector('.terminal-line');

        const statusMessages = [
            'NEURAL INTERFACE: ACTIVE | SECURITY: MAXIMUM',
            'SCANNING MEMORY PATTERNS | STATUS: OPTIMAL',
            'QUANTUM PROCESSORS: ONLINE | THREAT LEVEL: LOW',
            'MATRIX CONNECTION: STABLE | TRAINING MODE: ON',
            'COGNITIVE MAPPING: IN PROGRESS | EFFICIENCY: 97%'
        ];

        const terminalCommands = [
            'root@matrix:~$ monitor neural_pathways.exe',
            'root@matrix:~$ analyze response_patterns.dat',
            'root@matrix:~$ execute memory_optimization.sh',
            'root@matrix:~$ scan cognitive_matrix.bin',
            'root@matrix:~$ run pattern_recognition.py'
        ];

        // Update system status every 4 seconds
        setInterval(() => {
            if (systemStatus) {
                systemStatus.textContent = statusMessages[Math.floor(Math.random() * statusMessages.length)];
            }
        }, 4000);

        // Update terminal command every 3 seconds
        setInterval(() => {
            if (terminalLine) {
                terminalLine.textContent = terminalCommands[Math.floor(Math.random() * terminalCommands.length)];
            }
        }, 3000);
    </script>

    <script type="module">
        // Matrix-style loading animation
        const loadingTexts = [
            'INITIALIZING NEURAL INTERFACE...',
            'LOADING MEMORY PALACE...',
            'ESTABLISHING SECURE CONNECTION...',
            'ACTIVATING MAJOR SYSTEM PROTOCOL...',
            'DEPLOYING GLITCH COUNTERMEASURES...',
            'SYSTEM READY'
        ];

        let currentText = 0;
        const showLoading = () => {
            if (currentText < loadingTexts.length - 1) {
                console.log(`> ${loadingTexts[currentText]}`);
                currentText++;
                setTimeout(showLoading, 300);
            } else {
                console.log(`> ${loadingTexts[currentText]} ✓`);
            }
        };

        showLoading();

        // Inline error handling for module loading
        try {
            import('./main.js').catch(err => {
                console.error('CRITICAL ERROR: Module files not found:', err);
                document.body.innerHTML = `
                    <div style="color: #ff4444; font-family: 'Courier Prime', monospace; text-align: center; margin-top: 50px; text-shadow: 0 0 10px #ff4444;">
                        <h2>SYSTEM FAILURE</h2>
                        <p>ERROR: Module files not found</p>
                        <p>Please ensure all module files are created.</p>
                        <div style="margin-top: 20px; color: #00ff00;">
                            > ATTEMPTING SYSTEM RECOVERY...
                        </div>
                    </div>
                `;
            });
        } catch (err) {
            console.error('FATAL ERROR: Module import failed:', err);
        }
    </script>
</body>
</html>