-
Notifications
You must be signed in to change notification settings - Fork 0
/
Copy pathindex.html
108 lines (90 loc) · 3.16 KB
/
index.html
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
<html>
<header>
<link rel="stylesheet" href="stylesheet.css">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.3/css/all.min.css">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>sacul.xyz</title>
<script>
function hideSplashscreen() {
var splashscreen = document.getElementById('splashscreen');
var content = document.getElementById('content');
splashscreen.style.display = 'none';
content.style.display = 'block';
typewriter.typeString(text).start();
audio.play();
}
function toggleMute() {
audio.muted = !audio.muted;
updateMuteButton();
}
function updateMuteButton() {
var muteButton = document.getElementById('muteButton');
var icon = muteButton.querySelector('i');
if (audio.muted) {
icon.classList.remove('fa-volume-up');
icon.classList.add('fa-volume-mute');
} else {
icon.classList.remove('fa-volume-mute');
icon.classList.add('fa-volume-up');
}
}
function updateVolume(volume) {
audio.volume = volume;
if (volume == 0) {
audio.muted = true;
} else {
audio.muted = false;
}
updateMuteButton();
}
window.addEventListener('DOMContentLoaded', function() {
audio = document.getElementById('song');
audio.addEventListener('canplaythrough', function() {
var muteButton = document.getElementById('muteButton');
var volumeSlider = document.getElementById('volumeSlider');
muteButton.style.display = 'inline-block';
volumeSlider.style.display = 'inline-block';
});
});
function fadeAudioIn(element) {
var duration = 5000;
var interval = 10;
var targetVolume = 0.7;
element.volume = 0;
element.play();
var volumeStep = targetVolume / (duration / interval);
var fadeInterval = setInterval(function() {
if (element.volume + volumeStep < targetVolume) {
element.volume += volumeStep;
} else {
element.volume = targetVolume;
clearInterval(fadeInterval);
}
}, interval);
}
</script>
</header>
<body>
<div id="splashscreen" onclick="hideSplashscreen()">
<p>- click to enter -</p>
</div>
<pre>
$$\
$$ |
$$ |$$\ $$\ $$$$$$$\ $$$$$$\ $$$$$$$\
$$ |$$ | $$ |$$ _____|\____$$\ $$ _____|
$$ |$$ | $$ |$$ / $$$$$$$ |\$$$$$$\
$$ |$$ | $$ |$$ | $$ __$$ | \____$$\
$$ |\$$$$$$ |\$$$$$$$\\$$$$$$$ |$$$$$$$ |
\__| \______/ \_______|\_______|\_______/
</pre>
<div id="content"></div>
<button id="muteButton" class="mute-button" onclick="toggleMute()">
<i class="fas fa-volume-up"></i>
</button>
<!--<input type="range" id="volumeSlider" min="0" max="1" step="0.1" value="0.7" onchange="updateVolume(this.value)">--->
<script src="https://unpkg.com/typewriter-effect@latest/dist/core.js"></script>
<script src="typewriter.js"></script>
<audio id="song" src="audio.mp3"></audio>
</body>
</html>