haxxorshere/index.html at master · CSeCIITB/haxxorshere · 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
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Hacking Via CTFs</title>
    <link rel="stylesheet" href="style.css">
</head>
<body>
    <div class="matrix-rain" id="matrixRain"></div>

    <header class="header">
        <h1 class="title glitch" data-text="CHALLENGE MATRIX">CHALLENGE MATRIX</h1>
        <div class="progress-bar">
            <div class="progress-fill" id="progressFill"></div>
        </div>
        <div class="progress-text" id="progressText">Progress: 0/3 Challenges Completed</div>
    </header>

    <main class="main-container">
        <div class="challenges-grid" id="challengesGrid">
            <!-- Challenge cards will be dynamically generated -->
        </div>

        <div class="audio-controls">
            <button class="btn btn-secondary" id="muteBtn">🔊 Audio On</button>
            <input type="range" id="volumeSlider" min="0" max="100" value="70" class="volume-slider">
        </div>
    </main>

    <!-- Challenge Modal -->
    <div class="modal hidden" id="challengeModal">
        <div class="modal-content">
            <div class="modal-header">
                <h2 id="modalTitle"></h2>
                <button class="close-btn" id="closeModal">&times;</button>
            </div>
            <div class="modal-body">
                <div class="challenge-info">
                    <div class="difficulty-badge" id="modalDifficulty"></div>
                    <p id="modalDescription" class="typing-text"></p>
                </div>
                <div class="flag-input-section">
                    <label for="flagInput" class="form-label">Enter Flag:</label>
                    <input type="text" id="flagInput" class="form-control neon-input" placeholder="haxxor{...}">
                    <button class="btn btn-primary" id="submitFlag">Submit Flag</button>
                </div>
                <div class="challenge-actions">
                    <button class="btn btn-download" id="downloadBtn" disabled>
                        📁 Download Challenge
                    </button>
                </div>
                <div class="feedback-message" id="feedbackMessage"></div>
            </div>
        </div>
    </div>

    <!-- Overlay -->
    <div class="overlay hidden" id="overlay"></div>

    <!-- Success Effects -->
    <div class="success-effects" id="successEffects">
        <div class="particles"></div>
    </div>

    <footer class="footer">
        <p>&copy; 2025 Hacking Via CTFs | CyberSecurity Community IIT Bombay</p>
        <p class="instructions">Enter the correct flags to unlock challenges and download files</p>
    </footer>

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