-
Notifications
You must be signed in to change notification settings - Fork 1
/
Copy pathspoti5.html
139 lines (116 loc) · 4.66 KB
/
spoti5.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
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
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Audio Flag Challenge | HashVault</title>
<link rel="favicon" href="favicon.ico" type="image/x-icon">
<script src="https://cdn.tailwindcss.com"></script>
<link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0-beta3/css/all.min.css" rel="stylesheet">
<style>
@import url('https://fonts.googleapis.com/css2?family=Orbitron:wght@400;700&family=VT323&display=swap');
body {
font-family: 'Orbitron', sans-serif;
background-color: #1e293b;
color: #e0e0e0;
margin: 0;
padding: 0;
min-height: 100vh;
display: flex;
flex-direction: column;
}
.terminal-text {
font-family: 'VT323', monospace;
color: #38bdf8;
}
.challenge-container {
max-width: 1000px;
margin: 0 auto;
padding: 20px;
}
.challenge-card {
background-color: rgba(30, 41, 59, 0.9);
border-radius: 16px;
border: 1px solid rgba(34, 197, 94, 0.5);
padding: 30px;
backdrop-filter: blur(10px);
}
.glitch-text {
animation: glitch 1s infinite;
}
.hidden-button {
opacity: 0;
pointer-events: none;
}
.show-button:hover {
opacity: 1 !important;
pointer-events: auto !important;
}
@keyframes glitch {
2%,
64% {
transform: translate(2px, 0) skew(0deg);
}
4%,
60% {
transform: translate(-2px, 0) skew(0deg);
}
62% {
transform: translate(0, 0) skew(5deg);
}
}
</style>
</head>
<body class="bg-black">
<div class="container mx-auto px-4 py-10">
<div class="text-center mb-10">
<h1 class="text-3xl sm:text-4xl font-bold text-white glitch-text">
Spoti5 <span class="text-emerald-400">Skip Ad</span> Challenge
</h1>
<p class="mt-4 text-gray-300">Listen carefully to find the secret flag!</p>
</div>
<div class="challenge-container">
<div class="challenge-card">
<h2 class="text-2xl font-bold text-emerald-400 mb-6">Challenge Description</h2>
<p class="text-gray-200 mb-6">
Play and Enjoy the music! 🎧
</p>
<audio id="audio-player" autoplay controls class="w-full">
<source src="spoti5.mp3" type="audio/mpeg">
Your browser does not support the audio element.
</audio>
<div class="flex items-center justify-between mt-6">
<button id="decrease-volume" class="show-button bg-gray-800 text-white py-2 px-4 rounded-md">- Volume</button>
<button id="increase-volume" class="show-button bg-gray-800 text-white py-2 px-4 rounded-md">+ Volume</button>
</div>
<div class="mt-4 text-sm text-gray-300 text-center">
Hint: You may hav to increase the volume too. 🔊
</div>
<div class="challenge-input mb-6 mt-10">
<div style="background-color: #1a202c; border: 1px solid #4a5568; color: #e0e0e0; padding: 16px; border-radius: 8px; margin-top: 10px;">
<span style="font-weight: bold; color: #48bb78; display: block; margin-bottom: 8px;">Flag Format:</span>
<span>HVFLAG{THISISTHEFLAG}</span>
</div>
</div>
</div>
</div>
</div>
<script>
const audio = document.getElementById('audio-player');
const increaseVolumeBtn = document.getElementById('increase-volume');
const decreaseVolumeBtn = document.getElementById('decrease-volume');
const card = document.querySelector('.challenge-card');
// Set initial volume to 0 (muted)
audio.volume = 0;
increaseVolumeBtn.classList.add('show-button');
decreaseVolumeBtn.classList.add('show-button');
// Volume controls
increaseVolumeBtn.addEventListener('click', () => {
if (audio.volume < 1) audio.volume = Math.min(1, audio.volume + 0.1);
});
decreaseVolumeBtn.addEventListener('click', () => {
if (audio.volume > 0) audio.volume = Math.max(0, audio.volume - 0.1);
});
</script>
</body>
</html>