ScriptBox.github.io/soundeffects.html at main · Krontixz/ScriptBox.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
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Sound Effects - ScriptBox</title>

    <link rel="stylesheet" href="styles/style.css">

    <style>
        /* Body and Header styles removed as requested */

        /* This stays here to ensure the 4-column layout works */
        .container {
            display: grid;
            grid-template-columns: repeat(4, 1fr);
            gap: 50px 20px;
            max-width: 800px;
            margin: 0 auto;
            padding-bottom: 100px;
        }

        .sound-item { display: flex; flex-direction: column; align-items: center; }

        .instant-btn {
            width: 80px; height: 80px; border-radius: 50%; border: none; cursor: pointer; position: relative;
            box-shadow: 0 8px #999; transition: all 0.1s; outline: none;
        }

        .instant-btn:active { box-shadow: 0 2px #666; transform: translateY(4px); }

        .btn-red { background-color: #ff4c4c; }
        .btn-blue { background-color: #4c8cff; }
        .btn-yellow { background-color: #ffd14c; }
        .btn-green { background-color: #4cff61; }

        .sound-label { margin-top: 12px; font-weight: bold; font-size: 13px; color: #333; }
        .dl-trigger { margin-top: 8px; cursor: pointer; color: #007bff; font-size: 12px; font-weight: bold; text-decoration: none; }

        #downloadModal {
            display: none; position: fixed; z-index: 9999; left: 0; top: 0;
            width: 100%; height: 100%; background-color: rgba(0,0,0,0.4); backdrop-filter: blur(2px);
        }

        .modal-content {
            background-color: #fff; margin: 25vh auto; border-radius: 14px; width: 280px;
            text-align: center; box-shadow: 0 10px 30px rgba(0,0,0,0.2); font-family: -apple-system, BlinkMacSystemFont, sans-serif;
        }

        .modal-body { padding: 20px; border-bottom: 0.5px solid #ccc; }
        .modal-body p { margin: 0; font-size: 16px; color: #000; line-height: 1.4; }
        .modal-actions { display: flex; }
        .modal-actions a, .modal-actions span { flex: 1; padding: 12px; color: #007aff; cursor: pointer; font-size: 17px; text-decoration: none; }
        .modal-actions span { border-right: 0.5px solid #ccc; }
        .modal-actions a { font-weight: 600; }
    </style>
</head>
<body>

    <header><h1><b>WELCOME TO THE SOUND EFFECTS PAGE</b></h1></header>

    <div class="container">

        <div class="sound-item">
            <button class="instant-btn" onclick="playSound('assets/sounds/Bass_drop.mp3')"></button>
            <span class="sound-label">Bass Drop</span>
            <div class="dl-trigger" onclick="openDownload('Bass Drop', 'assets/sounds/Bass_drop.mp3')">Download</div>
        </div>

        <div class="sound-item">
            <button class="instant-btn" onclick="playSound('assets/sounds/Bruh.mp3.mp3')"></button>
            <span class="sound-label">Bruh</span>
            <div class="dl-trigger" onclick="openDownload('Bruh', 'assets/sounds/Bruh.mp3.mp3')">Download</div>
        </div>

        <div class="sound-item">
            <button class="instant-btn" onclick="playSound('assets/sounds/Correct_button.wav')"></button>
            <span class="sound-label">Correct Button</span>
            <div class="dl-trigger" onclick="openDownload('Correct Button', 'assets/sounds/Correct_button.wav')">Download</div>
        </div>

        <div class="sound-item">
            <button class="instant-btn" onclick="playSound('assets/sounds/Cinematic_piano.mp3')"></button>
            <span class="sound-label">Cinematic Piano</span>
            <div class="dl-trigger" onclick="openDownload('Cinematic piano', 'assets/sounds/Cinematic_piano.mp3')">Download</div>
        </div>

        <div class="sound-item">
            <button class="instant-btn" onclick="playSound('assets/sounds/Distorted-glitch-sound.mp3')"></button>
            <span class="sound-label">Distorted Glitch Sound</span>
            <div class="dl-trigger" onclick="openDownload('Distorted Glitch Sound', 'assets/sounds/Distorted-glitch-sound.mp3')">Download</div>
        </div>

    </div>

    <div id="downloadModal">
        <div class="modal-content">
            <div class="modal-body">
                <p id="modalText">Do you want to download "filename" on "ScriptBox.github.io"?</p>
            </div>
            <div class="modal-actions">
                <span onclick="closeModal()">View</span>
                <a id="confirmDownload" href="#" download>Download</a>
            </div>
        </div>
    </div>

    <script>
        const colors = ['btn-red', 'btn-blue', 'btn-yellow', 'btn-green'];
        document.querySelectorAll('.instant-btn').forEach(btn => {
            const randomColor = colors[Math.floor(Math.random() * colors.length)];
            btn.classList.add(randomColor);
        });

        function playSound(url) {
            const audio = new Audio(url);
            audio.play().catch(e => console.log("File not found:", url));
        }

        function openDownload(name, url) {
            document.getElementById('modalText').innerText = `Do you want to download "${name}" on "ScriptBox.github.io"?`;
            document.getElementById('confirmDownload').href = url;
            document.getElementById('downloadModal').style.display = 'block';
        }

        function closeModal() {
            document.getElementById('downloadModal').style.display = 'none';
        }

        window.onclick = function(event) {
            if (event.target == document.getElementById('downloadModal')) {
                closeModal();
            }
        }
    </script>
</body>
</html>