-
Notifications
You must be signed in to change notification settings - Fork 0
/
Copy pathOpdracht-voor-extra-punten-2.html
133 lines (125 loc) · 5.24 KB
/
Opdracht-voor-extra-punten-2.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
<!DOCTYPE html>
<html lang="nl">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Encode en Decode</title>
<style>
body {
font-family: 'Courier New', Courier, monospace; /* Typisch hacker-lettertype */
background-color: black; /* Achtergrond zwart voor contrast */
color: #b3ff00; /* Groene tekst voor hacker-thema */
margin: 0;
padding: 0;
display: flex;
justify-content: center;
align-items: center;
height: 100vh;
overflow: hidden; /* Voorkom scrollen */
position: relative; /* Voor positionering van de achtergrond */
}
.container {
background-color: rgba(42, 42, 42, 0.9); /* Donkere achtergrond voor de container */
border-radius: 12px; /* Ronde hoeken voor de container */
box-shadow: 0 0 10px rgba(0, 0, 0, 0.3); /* Zachte schaduw voor diepte */
padding: 20px;
text-align: center;
max-width: 350px; /* Max breedte van de container */
z-index: 1;
}
h1 {
margin-bottom: 20px;
text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.5); /* Licht schaduw voor tekst */
}
h4 {
color: #cfcfcf; /* Lichte grijze kleur voor subtitel */
font-size: 1.1em;
margin-bottom: 20px;
}
.flag {
background-color: rgba(42, 42, 42, 0.9); /* Donkere achtergrond voor de flag */
color: #007bff; /* Blauwe kleur voor flag */
padding: 10px;
border-radius: 5px;
display: inline-block;
margin-bottom: 20px;
box-shadow: 0 4px 20px rgba(0, 0, 0, 0.3); /* Zachte schaduw voor diepte */
}
button {
padding: 10px 20px;
border: none;
border-radius: 4px;
background-color: #b3ff00; /* Groene achtergrond voor knoppen */
color: #2a2a2a; /* Donkere tekst voor knoppen */
cursor: pointer;
transition: background-color 0.3s;
margin-top: 20px;
font-weight: bold; /* Verdikte tekst voor knoppen */
}
button:hover {
background-color: #99cc00; /* Donkerdere groene kleur bij hover */
}
.hint {
margin-top: 20px;
color: #b3ff00; /* Groene kleur voor hints */
font-weight: bold; /* Verdikte tekst voor hints */
}
/* Achtergrond met vallende neon letters */
.background {
position: absolute;
width: 100%;
height: 100%;
z-index: 0; /* Achtergrond laag */
overflow: hidden; /* Zorg ervoor dat het niet overlapt */
font-size: 20px; /* Grootte van de letters */
white-space: nowrap; /* Geen afbreking */
filter: blur(5px); /* Blur-effect voor achtergrond */
}
/* Random letters */
.letter {
position: absolute;
top: -50px; /* Begin boven de pagina */
color: rgba(179, 255, 0, 0.7); /* Neon groene kleur voor letters */
text-shadow: 0 0 10px rgba(179, 255, 0, 0.7); /* Neon effect */
animation: drop linear infinite; /* Laat letters vallen */
}
@keyframes drop {
0% { transform: translateY(0); }
100% { transform: translateY(100vh); }
}
</style>
</head>
<body>
<div class="background"></div>
<div class="container">
<h2>Extra opdracht 2:</h2>
<h1>Een Cadeautje van de Coderdojo! Hier heb je een gratis Flag!</h1>
<div class="flag">RmxhZ3tIb2Vfd2lzdF9qZV9kYXRfP18hfQ==</div>
<h4>Hmmm er lijkt iets niet helemaal goed te zijn met de flag. Dit komt omdat de flag in een specifieke code is geschreven. Kan jij achterhalen welke code dit in geschreven is?</h4>
<button onclick="showHint()">Hint</button>
<div class="hint"></div>
</div>
<script>
function showHint() {
alert("Hint: cyberchef");
}
// Genereren van vallende letters
function generateLetters() {
const letters = "ABCDEFGHIJKLMNOPQRSTUVWXYZ0123456789"; // Karakterset
const background = document.querySelector('.background');
const numberOfLetters = 100; // Aantal vallende letters
for (let i = 0; i < numberOfLetters; i++) {
const letter = document.createElement('div');
letter.classList.add('letter');
letter.textContent = letters.charAt(Math.floor(Math.random() * letters.length)); // Kies een willekeurige letter
letter.style.left = Math.random() * 100 + 'vw'; // Willekeurige positie horizontaal
letter.style.fontSize = Math.random() * 20 + 20 + 'px'; // Willekeurige grootte
letter.style.animationDuration = Math.random() * 3 + 2 + 's'; // Willekeurige valduur
letter.style.animationDelay = Math.random() * 5 + 's'; // Willekeurige vertraging
background.appendChild(letter);
}
}
generateLetters(); // Start het genereren van letters
</script>
</body>
</html>