-
Notifications
You must be signed in to change notification settings - Fork 5
/
all-riddles.html
170 lines (164 loc) · 10.2 KB
/
all-riddles.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
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
<!DOCTYPE html>
<!--[if lt IE 7]> <html class="no-js lt-ie9 lt-ie8 lt-ie7"> <![endif]-->
<!--[if IE 7]> <html class="no-js lt-ie9 lt-ie8"> <![endif]-->
<!--[if IE 8]> <html class="no-js lt-ie9"> <![endif]-->
<!--[if gt IE 8]> <html class="no-js"> <!--<![endif]-->
<html>
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<title>Riddles in the Dark</title>
<meta name="description" content="Can you find and solve the riddles?">
<meta property="og:image" content="https://ethyl2.github.io/riddles/images/riddles_in_the_dark.png" />
<meta property="og:url" content="https://ethyl2.github.io/riddles/" />
<meta property="og:title" content="Riddles in the Dark" />
<meta property="og:type" content="website" />
<meta property="og:description" content="Can you find and solve the riddles?" />
<meta name="twitter:card" content="summary_large_image">
<meta name="twitter:creator" content="@ethyl22">
<meta name="twitter:title" content="Riddles in the Dark">
<meta name="twitter:description" content="Can you find and solve the riddles?">
<meta name="twitter:image" content="https://ethyl2.github.io/riddles/images/riddles_in_the_dark.png">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link href="https://unpkg.com/tailwindcss@^2/dist/tailwind.min.css" rel="stylesheet">
<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=Caveat&family=Knewave&display=swap" rel="stylesheet">
<link rel="shortcut icon" href="favicon.ico?" type="image/x-icon">
<link rel="icon" type="image/x-icon" href="favicon.ico?">
<link rel="stylesheet" href="styles.css">
</head>
<body class="min-h-screen mb-0 overflow-x-auto select-none" style="background:#2e2a20;">
<!--[if lt IE 7]>
<p class="browsehappy">You are using an <strong>outdated</strong> browser. Please <a href="#">upgrade your browser</a> to improve your experience.</p>
<![endif]-->
<header>
<h1 class="pt-4 pb-2 text-2xl text-center text-black neon-text md:text-3xl"
style="font-family: 'Knewave', cursive;">
riddles in the dark
</h1>
</header>
<main>
<h2
class="text-center text-lg neon-text"
style="font-family: 'Knewave', cursive; text-shadow: 0 0 4px #fff, 0 0 11px #fff, 0 0 19px #fff;"
>
all of them
</h2>
<div class="flex items-center justify-center mt-8">
<button id="print-button" type="button">
<a
href="./print-all-riddles.html"
class="rounded px-2 py-1 bg-black text-yellow-600 hover:bg-gray-800"
style="font-family: 'Knewave', cursive;"
>
print</a>
</button>
</div>
<div
id="all-riddles"
class="flex flex-wrap text-white text-lg w-full px-4 pt-8 font-thin items-stretch justify-center"
style="font-family: 'Caveat', cursive;"
>
</div>
<!-- FOOTER -->
<footer class="px-4 pt-8 pb-16 mt-12 mb-0 text-center bg-gradient-to-t w-full from-yellow-600 to-yellow-300 sm:mt-32">
<nav class="flex items-stretch justify-center space-x-2 max-w-sm mx-auto pb-4">
<a href="./index.html" title="home tour" class="w-1/4 bg-gray-800 p-2 rounded flex flex-col items-center justify-center hover:bg-gray-500">
<img src="images/orange-eyes.png" alt="eyes" class="w-8 h-8 md:w-16 md:h-16"/>
<span style="font-family: 'Knewave', cursive;" class="text-xs text-yellow-500">back to the dark?</span>
</a>
<a href="./more-riddles.html" title="more riddles" class="w-1/4 bg-yellow-300 p-2 rounded flex flex-col items-center justify-center hover:bg-yellow-400">
<img src="images/owl.png" alt="owl" class="w-8 h-8 md:w-16 md:h-16"/>
<span style="font-family: 'Knewave', cursive;" class="text-xs">more riddles?</span>
</a>
<a href="./add-riddle.html" title="send riddles" class="w-1/4 bg-yellow-600 p-3 rounded flex flex-col items-center justify-between hover:bg-yellow-800 group">
<img src="images/send-letter.png" alt="letter" class="w-8 md:w-16 mt-2"/>
<span style="font-family: 'Knewave', cursive;" class="text-xs text-white">send us <br />a riddle?</span>
</a>
<a href="./room-grid.html" title="all riddles" class="w-1/4 bg-black p-2 rounded flex flex-col items-center justify-center hover:bg-gray-900 group">
<img src="images/cat-eyes.gif" alt="cat eyes" class="w-8 h-8 md:w-16 md:h-16"/>
<span style="font-family: 'Knewave', cursive;" class="text-xs text-yellow-200 group-hover:text-white">go on a tour?</span>
</a>
</nav>
<section class="flex flex-col items-center justify-center">
<div id="fb-root"></div>
<div
class="fb-share-button"
data-href="https://ethyl2.github.io/riddles/"
data-layout="button"
data-lazy="true"
></div>
<div class="flex items-center justify-center text-gray-darkest">
<a
href="https://github.com/ethyl2/riddles"
target="_blank"
rel="noopener noreferrer"
class="p-1 rounded hover:bg-white"
title="github repo"
>
<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true"
focusable="false" width="1.73em" height="1.5em" style="
-ms-transform: rotate(360deg);
-webkit-transform: rotate(360deg);
transform: rotate(360deg);
" preserveAspectRatio="xMidYMid meet" viewBox="0 0 1227.825 1000">
<path
d="M1078.94-.985c-33.192-.491-110.295 10.777-239.027 96.936c-70.161-17.535-144.812-26.188-219.591-26.188c-82.278 0-165.425 10.448-242.965 31.719C192.534-24.605 110.955 1.234 110.955 1.234c-53.258 133.183-20.347 231.788-10.344 256.277C38.014 325.069-.2 411.338-.2 517.07c0 79.822 9.085 151.416 31.281 213.653c1.231 4.803.832 3.732 2.906 7.844c4.89 12.884 10.327 25.39 16.438 37.468c2.094 4.346 4 7.563 4 7.563c62.395 116.307 185.396 191.438 404.244 215.028l330.995.375c233.392-23.144 345.386-98.499 396.994-215.591l3.281-7.625c4.89-11.828 9.153-24.135 20.813-65.562c11.659-41.427 16.875-113.172 16.875-193.185c0-114.755-43.1-206.577-113.092-276.434c12.231-39.48 28.57-127.158-16.313-239.402c0 0-6.293-1.995-19.281-2.188zM818.1 420.133c53.893-.117 100.057 9.136 134.717 45.499v.031c43.369 45.541 68.749 100.525 68.749 159.778c0 276.658-177.932 284.183-397.4 284.183c-219.506 0-397.4-38.336-397.4-284.183c0-58.861 25.009-113.516 67.843-158.872c71.451-75.59 192.365-35.562 329.558-35.562c70.423-.011 136.564-10.75 193.935-10.875zm-408.807 81.468c-45.666 0-82.687 61.741-82.687 137.936c0 76.206 37.019 137.967 82.687 137.967c45.666 0 82.687-61.761 82.687-137.967c0-76.184-37.019-137.881-82.687-137.936zm443.649 0c-45.666 0-82.687 61.741-82.687 137.936c0 76.206 37.019 137.967 82.687 137.967c45.666 0 82.687-61.761 82.687-137.967c0-76.184-37.019-137.881-82.687-137.936z"
fill="black" />
</svg>
<span class="sr-only">GitHub Repo</span>
</a>
<p class="text-sm font-semibold">Copyright <span id="current-year">2022</span> Heather Nuffer et al.</p>
</div>
</section>
</footer>
</main>
<script src="./js/riddles.js" async defer></script>
<script type="text/javascript">
const riddlesSection = document.getElementById('all-riddles')
const printButton = document.getElementById('print-button')
const colorOptions = ['#FF4D00', '#FF0000', '#C400C6', '#FFD700', '#4ECCA3', '#66ff00']
function shuffle(a) { for (var j, i = a.length - 1; i > 0; i--) { j = Math.floor(Math.random() * (i + 1));[a[i], a[j]] = [a[j], a[i]] } }
function toggleOpacity(event) {
const answerSection = event.target.nextElementSibling
if (answerSection.classList.contains('opacity-0')) {
answerSection.classList.remove('opacity-0')
answerSection.classList.add('opacity-100')
} else {
answerSection.classList.remove('opacity-100')
answerSection.classList.add('opacity-0')
}
}
window.addEventListener('load', () => {
shuffle(riddles)
riddles.forEach(riddle => {
const riddleBox = document.createElement('div')
const questionEl = document.createElement('p')
questionEl.textContent = riddle.question
questionEl.classList.add('hover:text-yellow-500')
questionEl.tabIndex = "0"
riddleBox.append(questionEl)
const answerSection = document.createElement('div')
answerSection.classList.add('flex', 'flex-wrap', 'items-center', 'justify-center', 'opacity-0', 'transition', 'duration-500', 'ease-in-out')
riddle.answer.forEach(option => {
const answerPill = document.createElement('p')
answerPill.textContent = option
answerPill.classList.add('rounded-full', 'px-3', 'py-1', 'm-1', 'bg-black')
answerPill.style.color = colorOptions[Math.floor(Math.random() * colorOptions.length)]
answerSection.append(answerPill)
})
riddleBox.append(answerSection)
riddleBox.classList.add('w-full', 'sm:w-1/2', 'md:w-1/3', 'lg:w-1/4', 'p-2', 'border', 'border-yellow-400', 'rounded', 'm-2', 'flex', 'flex-col', 'items-center', 'justify-start')
questionEl.addEventListener('click', toggleOpacity)
questionEl.addEventListener('keydown', (event) => {
if (event.keyCode === 13) {
toggleOpacity(event)
}
})
riddlesSection.append(riddleBox)
})
})
</script>
</body>
</html>