-
Notifications
You must be signed in to change notification settings - Fork 0
/
Copy pathindex.html
141 lines (122 loc) · 4.44 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
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Christmas Gift Unlock</title>
<style>
/* General Styling */
body {
font-family: 'Arial', sans-serif;
background-color: #f2f7ff;
background-image: url('https://png.pngtree.com/thumb_back/fw800/background/20240929/pngtree-christmas-tree-snow-globe-with-lights-festive-surrounded-by-glowing-background-image_16289967.jpg'); /* Add a festive background */
background-size: cover;
background-repeat: no-repeat;
color: #333;
text-align: center;
margin: 0;
padding: 20px;
}
h1 {
color: #b22222; /* Christmas Red */
font-size: 2.5em;
}
.container {
background: rgba(255, 255, 255, 0.9);
border-radius: 10px;
box-shadow: 0 0 10px rgba(0, 0, 0, 0.2);
padding: 20px;
max-width: 500px;
margin: auto;
}
.input-section {
margin: 15px 0;
}
label {
display: block;
margin-bottom: 5px;
font-size: 1.2em;
}
input {
width: 80%;
padding: 10px;
font-size: 1em;
margin-bottom: 10px;
border: 2px solid #ccc;
border-radius: 5px;
text-align: center;
}
button {
background-color: #4CAF50; /* Green */
color: white;
padding: 10px 20px;
border: none;
border-radius: 5px;
cursor: pointer;
font-size: 1.1em;
}
button:hover {
background-color: #45a049;
}
#message {
margin-top: 20px;
font-size: 1.2em;
font-weight: bold;
}
.hidden {
display: none;
}
</style>
</head>
<body>
<h1>🎄 Unlock Your Christmas Gift 🎁</h1>
<div class="container">
<!-- 5-digit Code -->
<div class="input-section">
<label for="code">Enter the 5-digit Code:</label>
<input type="text" id="code" maxlength="5" placeholder="12345">
</div>
<!-- Riddle 1 -->
<div class="input-section">
<label for="riddle1">Riddle 1: I’m tall when I’m young, and I’m short when I’m old. What am I?</label>
<input type="text" id="riddle1" placeholder="Your Answer">
</div>
<!-- Riddle 2 -->
<div class="input-section">
<label for="riddle2">Riddle 2: What has hands but can’t clap?</label>
<input type="text" id="riddle2" placeholder="Your Answer">
</div>
<!-- Riddle 3 -->
<div class="input-section">
<label for="riddle3">Riddle 3: What has many keys but can’t open a single lock?</label>
<input type="text" id="riddle3" placeholder="Your Answer">
</div>
<!-- Submit Button -->
<button onclick="checkInputs()">Unlock Gift</button>
<!-- Message Section -->
<div id="message"></div>
</div>
<script>
const correctCode = "52381"; // Set your 5-digit code
// V II III VIII I
const answers = ["candle", "clock", "piano"]; // Correct answers for the riddles (lowercase)
function checkInputs() {
const codeInput = document.getElementById('code').value.trim();
const riddle1 = document.getElementById('riddle1').value.trim().toLowerCase();
const riddle2 = document.getElementById('riddle2').value.trim().toLowerCase();
const riddle3 = document.getElementById('riddle3').value.trim().toLowerCase();
const messageDiv = document.getElementById('message');
if (codeInput === correctCode &&
riddle1 === answers[0] &&
riddle2 === answers[1] &&
riddle3 === answers[2]) {
messageDiv.style.color = "green";
messageDiv.innerHTML = "🎉 Congratulations! Here's your gift: <a href='https://www.playstation.com/en-gb/games/baldurs-gate-3/'>Click here to open!</a>";
} else {
messageDiv.style.color = "red";
messageDiv.textContent = "Oops! Some answers are incorrect. Try again!";
}
}
</script>
</body>
</html>