-
Notifications
You must be signed in to change notification settings - Fork 0
/
Copy pathindex.html
142 lines (130 loc) · 3.82 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
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Buttons with Custom Actions</title>
<style>
body {
font-family: Arial, sans-serif;
text-align: center;
margin: 50px;
}
.button-container {
display: flex;
flex-direction: column;
align-items: center;
gap: 20px;
}
.button-group {
width: 200px;
text-align: left;
}
button {
width: 100%;
padding: 10px 20px;
font-size: 16px;
cursor: pointer;
border: 1px solid #333;
background-color: #f0f0f0;
transition: background-color 0.3s;
}
button:hover {
background-color: #ddd; /* Hover effect for regular buttons */
}
.button-red {
padding: 10px 20px;
font-size: 16px;
cursor: pointer;
border: 2px solid #d32f2f; /* Dark red border */
background-color: #f44336; /* Red background */
color: white; /* White text */
transition: background-color 0.3s ease;
}
.button-red:hover {
background-color: #d32f2f; /* Darker red when hovered */
}
.hidden-text, .hidden-image {
display: none;
margin-top: 10px;
font-size: 16px;
}
img {
width: 100%;
max-width: 300px;
height: auto;
border: 1px solid #ddd;
border-radius: 5px;
}
.fade-in {
opacity: 0;
display: none;
transition: opacity 1s ease-in-out;
}
.fade-in.visible {
display: block;
opacity: 1;
}
</style>
</head>
<body>
<h1>Clue #1</h1>
<div class="button-container">
<!-- First Button: Reveals Text -->
<div class="button-group">
<button onclick="toggleText('text1')">Give me a hint</button>
<div id="text1" class="hidden-text">By the staircase</div>
</div>
<!-- Second Button: Reveals Image -->
<div class="button-group">
<button onclick="toggleImage('image1')">Reveal a picture</button>
<div id="image1" class="hidden-image">
<img src="https://via.placeholder.com/300" alt="Placeholder Image">
</div>
</div>
<!-- Third Button: Initially Hidden -->
<div class="button-group fade-in" id="thirdButton">
<button class="button-red" onclick="askConfirmation()">Skip to next clue</button>
</div>
<!-- Bottom Text: Initially Hidden -->
<div class="fade-in" id="finalText">
Are you extra stuck, and none of the hints are helping you?<br/>
You can contact this secret email address (but it might take a while to respond!):<br/>
<a href="mailto:[email protected]">[email protected]</a>
</div>
</div>
<script>
let textRevealed = false;
let imageRevealed = false;
function toggleText(id) {
const element = document.getElementById(id);
element.style.display = (element.style.display === 'none' || element.style.display === '') ? 'block' : 'none';
textRevealed = true;
checkRevealState();
}
function toggleImage(id) {
const element = document.getElementById(id);
element.style.display = (element.style.display === 'none' || element.style.display === '') ? 'block' : 'none';
imageRevealed = true;
checkRevealState();
}
function askConfirmation() {
const confirmed = confirm("Are you sure?");
if (confirmed) {
goToLink('https://example.com');
}
}
function goToLink(url) {
// Redirect to the provided URL
window.location.href = url;
}
function checkRevealState() {
if (textRevealed && imageRevealed) {
// Make third button and final text visible
document.getElementById('thirdButton').classList.add('visible');
document.getElementById('finalText').classList.add('visible');
}
}
</script>
</body>
</html>