-
Notifications
You must be signed in to change notification settings - Fork 0
/
Copy pathindex.html
145 lines (125 loc) · 4.46 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
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
<!DOCTYPE html>
<html lang="nl">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Verstopte Tekst</title>
<style>
body {
font-family: 'Courier New', Courier, monospace;
color: #d0d0d0;
margin: 0;
padding: 0;
display: flex;
justify-content: center;
align-items: center;
height: 100vh;
background-color: #1a1a1a;
overflow: hidden;
position: relative;
}
.background {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
background-color: rgba(0, 0, 0, 0.6);
filter: blur(8px);
z-index: -1;
}
.letter {
position: absolute;
font-size: 20px;
color: rgba(173, 255, 47, 0.8); /* Groen-geel tint */
animation: fall linear infinite;
}
@keyframes fall {
0% { transform: translateY(-100vh); opacity: 0; }
10% { opacity: 1; }
90% { opacity: 1; }
100% { transform: translateY(100vh); opacity: 0; }
}
.container {
max-width: 400px;
padding: 20px;
background-color: #292929;
border-radius: 16px;
box-shadow: 0 0 20px rgba(0, 0, 0, 0.5);
border: 1px solid #444;
position: relative;
overflow: hidden;
z-index: 1;
animation: fadeIn 0.5s ease;
text-align: center;
}
h1 {
margin-bottom: 20px;
color: #00ff00;
font-size: 1.5em;
text-shadow: 0 0 8px #00ff00;
}
h2 {
color: #ff6600;
font-size: 1.2em;
}
p {
line-height: 1.6;
color: #d0d0d0;
font-size: 1rem;
margin-bottom: 20px;
}
a {
decoration: none;
}
.hidden-message {
opacity: 0;
transition: opacity 0.3s ease;
}
.hidden-message:hover {
opacity: 1;
color: #00ff00;
text-shadow: 0 0 5px #00ff00;
}
.white-text {
color: #00ff00;
font-weight: bold;
}
</style>
</head>
<body>
<div class="background"></div>
<div class="container">
<h1>Welkom bij de CoderDojo CTF!</h1>
<p>Vandaag gaan we leren hacken! Maar maak je geen zorgen, we gaan alleen maar ethisch hacken om vlaggen te zoeken. Elke vlag die je vindt, is punten waard! Als je een vlag hebt gevonden, geef dit dan door aan de begeleiding.</p>
<p>Het is belangrijk om te onthouden dat de kennis die je hier opdoet alleen bedoeld is voor deze CTF en niet voor andere websites. Hacken zonder toestemming is illegaal en kan ernstige gevolgen hebben. Deze activiteit is bedoeld om meer te leren over online veiligheid en om je probleemoplossende vaardigheden te verbeteren! <span class="white-text">Doe altijd veilig!</span></p>
<h2>Opdracht 1:<h2>
<h2>Zoek de Verstopte Boodschap</h2>
<span id="hidden-message" class="hidden-message"></span>
</div>
<script>
const part1 = "RmxhZ3tXZWx";
const part2 = "rb21fYmlqX";
const part3 = "2RlX0NvZGV";
const part4 = "yZG9qb19D";
const part5 = "VEYhfQ==";
function revealFlag(elementId) {
const element = document.getElementById(elementId);
const encodedFlag = part1 + part2 + part3 + part4 + part5;
element.innerHTML = "<a class='hidden-message' href='" + encodedFlag + ".html'>" + atob(encodedFlag) + "</a>";
element.style.display = 'inline';
}
revealFlag('hidden-message');
const letters = "ABCDEFGHIJKLMNOPQRSTUVWXYZ0123456789";
for (let i = 0; i < 100; i++) {
const letter = document.createElement("div");
letter.className = "letter";
letter.innerText = letters[Math.floor(Math.random() * letters.length)];
letter.style.left = `${Math.random() * 100}vw`;
letter.style.animationDuration = `${2 + Math.random() * 3}s`;
letter.style.animationDelay = `${Math.random() * 5}s`;
document.querySelector(".background").appendChild(letter);
}
</script>
</body>
</html>