-
Notifications
You must be signed in to change notification settings - Fork 5
/
Copy pathroom-grid.html
178 lines (171 loc) · 11 KB
/
room-grid.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
171
172
173
174
175
176
177
178
<!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>House Tour | 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="House Tour | 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 rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?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">
<script src="https://cdn.tailwindcss.com"></script>
</head>
<body class="min-h-screen mb-0 overflow-x-hidden select-none relative" 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 class="relative sticky top-0 pb-4" style="background:#2e2a20;">
<h1 class="pt-4 pb-2 text-2xl text-center text-black neon-text md:text-3xl"
style="font-family: 'Knewave', cursive;">
<a href="./index.html">riddles in the dark</a>
</h1>
<p class="text-center text-black select-none font-lg"
style="font-family: 'Knewave', cursive; text-shadow: 0 0 4px #fff, 0 0 11px #fff, 0 0 19px #fff;""
>
welcome to our humble home
</p>
<p class="text-center text-black select-none font-lg mt-2 md:mt-6"
style="font-family: 'Knewave', cursive; text-shadow: 0 0 4px #fff, 0 0 11px #fff, 0 0 19px #fff;""
>
which room would you like to visit next?
</p>
<p class="text-yellow-200 text-center pt-2 text-lg tracking-widest" style="font-family: 'Knewave', cursive;"><span id="room-name"></span>?</p>
<img src="./images/bats.png" class="absolute -top-4 right-0 w-24 md:w-64" alt="bats" />
<img src="./images/moon.png" class="absolute top-8 left-1 w-12 md:w-24" alt="moon" />
</header>
<main class="container min-h-screen mx-auto md:mt-12">
<img src="./images/owl.png" class="w-8 mx-auto" alt="owl" />
<div id="grid" class="mx-auto flex flex-wrap items-start justify-center px-2">
</div>
</main>
<div class="relative bg-green-900/50 w-full h-24">
<img src="./images/tree.png" class="absolute -left-32 md:-left-16 lg:left-0 -top-60 w-60" alt="tree" />
<img src="./images/tree-2.png" class="hidden md:flex absolute -right-32 md:-right-16 lg:right-0 -top-60 w-60" alt="tree" />
</div>
<!-- FOOTER -->
<footer class="px-4 pt-8 pb-16 text-center bg-zinc-700 w-full">
<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="./all-riddles.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">see all riddles?</span>
</a>
</nav>
<div class="flex items-center justify-between">
<label class="relative block text-base cursor-pointer select-none pl-9 checkbox-container"
style="font-family: 'Knewave', cursive;">Wipe mode!
<input type="checkbox" name="wipe-mode" id="wipe-mode" class="absolute w-0 h-0 opacity-0 cursor-pointer" />
<span class="absolute top-0 left-0 w-6 h-6 bg-white rounded checkmark"></span>
</label>
<label class="relative block text-base cursor-pointer select-none pl-9 checkbox-container"
style="font-family: 'Knewave', cursive;">Noise, please!
<input type="checkbox" name="allow-audio" id="allow-audio" class="absolute w-0 h-0 opacity-0 cursor-pointer" />
<span class="absolute top-0 left-0 w-6 h-6 bg-white rounded checkmark"></span>
</label>
</div>
<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">
<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>
<script src="./js/rooms.js" async defer></script>
<script src="./js/facebookShare.js" async defer></script>
<script>
const gridEl = document.getElementById('grid')
const roomNameEl = document.getElementById('room-name')
function getCurrentYear() {
const currentYear = new Date().getFullYear();
document.getElementById('current-year').textContent = currentYear;
}
window.addEventListener('load', () => {
getCurrentYear()
const shuffledRooms = fisherYatesShuffle(roomImages)
shuffledRooms.forEach(roomImage => {
const roomEl = document.createElement('div')
roomEl.classList.add('w-32', 'h-24', 'md:w-64', 'md:h-48', 'bg-cover', 'bg-center', 'bg-no-repeat', 'border-4', 'md:border-8', 'border-black', 'lg:w-72', 'lg:h-56')
roomEl.style = `background-image: url('${roomImage}')`
roomEl.addEventListener('click', goToRoom)
roomEl.addEventListener('mouseenter', () => {
roomEl.classList.remove('border-black')
roomEl.classList.add('border-green-500')
let imageUrl = roomImage.slice(4, -1).replace(/"/g, "").split('/').pop()
const imageSlug = imageUrl.split(".")[0]
const formattedRoomName = imageSlug
.split('-')
.join(' ')
console.log(formattedRoomName)
roomNameEl.textContent = formattedRoomName
})
roomEl.addEventListener('mouseleave', () => {
roomEl.classList.remove('border-green-500')
roomEl.classList.add('border-black')
})
gridEl.appendChild(roomEl)
})
})
function goToRoom(event) {
const styles = window.getComputedStyle(event.target)
let imageUrl = styles.backgroundImage.slice(4, -1).replace(/"/g, "").split('/').pop()
const imageSlug = imageUrl.split(".")[0]
const url = `./room.html?room=${imageSlug}`
window.open(url, "_blank");
}
</script>
</body>
</html>