-
Notifications
You must be signed in to change notification settings - Fork 0
/
Copy pathfamily.html
272 lines (240 loc) · 10.2 KB
/
family.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
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
206
207
208
209
210
211
212
213
214
215
216
217
218
219
220
221
222
223
224
225
226
227
228
229
230
231
232
233
234
235
236
237
238
239
240
241
242
243
244
245
246
247
248
249
250
251
252
253
254
255
256
257
258
259
260
261
262
263
264
265
266
267
268
269
270
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="icon" href="images/camera.png">
<link rel="stylesheet" href="css/html5reset.css">
<link rel="stylesheet" href="css/all.min.css">
<link rel="stylesheet" href="css/style.css">
<title>Family</title>
<!-- Global site tag (gtag.js) - Google Analytics -->
<script async src="https://www.googletagmanager.com/gtag/js?id=G-XXMT8M416L"></script>
<script>
window.dataLayer = window.dataLayer || [];
function gtag(){dataLayer.push(arguments);}
gtag('js', new Date());
gtag('config', 'G-XXMT8M416L');
</script>
</head>
<body>
<a class = "skip" href="#main">Skip to Main Content</a>
<header>
<nav>
<ul class="nav_links">
<li class="home"><a href = "index.html"><i class="fa-solid fa-camera"></i> About</a></li>
<li><a href = "landscape.html"><i class="fa-solid fa-mountain-sun"></i> Landscape</a></li>
<li><a href = "wildlife.html"><i class="fa-solid fa-cow"></i> Wildlife</a></li>
<li class="active"><a href = "family.html"><i class="fa-solid fa-people-group"></i> Family</a></li>
</ul>
</nav>
<h1 id="main">Family</h1>
</header>
<main>
<button onclick="changeLanguage(this)" id="language">中文</button>
<p class="en">Besides taking pictures of nature and wildlife, Dad likes to take pictures of the rest of us as well.
He has always loved taking pictures of us since I was very little.
We have lots of videos and photos from childhood that are a classic.
He came to every single of my sports competitions and my brothers' to take pictures of the whole team.
That means we have always all got really nice pictures.
Unfortunately that means he's not in a lot of pictures.
</p>
<p class="ch">
除了给大自然和野生动物拍照，爸爸也喜欢给我们其他人拍照。
从我很小的时候起，他就一直喜欢给我们拍照。
我们有很多经典的童年视频和照片。
他每次参加我的体育比赛和我兄弟们的比赛，都来为全队拍照。
这意味着我们总是得到非常好的照片。
不幸的是，这意味着他不在很多照片中。
</p>
<div class='gridGallery' id="specialgrid">
<figure onmouseover="color(this)" onmouseout="blackwhite(this)">
<img src = "images/claireeric.jpg" alt = "claire and eric by a river" class='image'/>
<figcaption class="fig_text">Claire and Eric by Snake River</figcaption>
</figure>
<figure onmouseover="color(this)" onmouseout="blackwhite(this)">
<img src = "images/momclaire.jpg" alt = "mom posing with claire stretching in the background at an overlook" class='image'/>
<figcaption class="fig_text">Mom and Claire at Overlook</figcaption>
</figure>
</div>
<p class="en">The rest of the family also loves taking pictures too. That means that occasionally Dad will make it in the pictures!
Here are instances where my dad caught us all taking pictures and a photo where he makes it in.
</p>
<p class="ch">
家里的其他人也喜欢拍照。 这意味着爸爸偶尔会出现在照片中!
以下是我父亲抓到我们都在拍照的例子，还有一张他进去的照片。
</p>
<div class='gridGallery'>
<figure onmouseover="color(this)" onmouseout="blackwhite(this)">
<img src = "images/clairecamera.jpg" alt = "claire takes photo of old faithful with camera" class='image'/>
<figcaption class="fig_text">Claire Steals Dad's Camera to Take Photos</figcaption>
</figure>
<figure onmouseover="color(this)" onmouseout="blackwhite(this)">
<img src = "images/momphone.jpg" alt = "mom takes photo on iphone on a boardwalk" class='image'/>
<figcaption class="fig_text">Mom Takes Photos on iPhone</figcaption>
</figure>
<figure onmouseover="color(this)" onmouseout="blackwhite(this)">
<img src = "images/ericozmo.jpg" alt = "eric takes a panorma picture with ozmo" class='image'/>
<figcaption class="fig_text">Eric Takes a Photo on Ozmo</figcaption>
</figure>
<figure onmouseover="color(this)" onmouseout="blackwhite(this)">
<img src = "images/dadinpic.jpg" alt = "dad, mom, and eric in front of hot springs" class='image'/>
<figcaption class="fig_text">Dad Makes it in the Picture!</figcaption>
</figure>
<figure id="S" onmouseover="color(this)" onmouseout="blackwhite(this)">
<img src = "images/ericpic.jpg" alt = "eric taking a picture on his phone" class='image'/>
<figcaption class="fig_text">Eric Takes a Photo on Phone</figcaption>
</figure>
</div>
<div id="gameSpace">
<h1>Play a Game!</h1>
<p>Correctly guess who took each of these pictures to see a bonus picture of everyone together!
There are 4 rounds, each person can be selected only once.
</p>
<p id="correct">Correct!</p>
<p id="gameText">Round 1</p>
<img src="images/gameClaire.jpg" alt = "chipmunk with flower" class = 'gamePic special' id='Claire'/>
<img src="images/gameMom.jpg" alt = "mountains and clouds" class = 'gamePic special' id='Mom'/>
<img src="images/gameDad.jpg" alt = "two people in car" class = 'gamePic special' id='Dad'/>
<img src="images/gameEric.jpg" alt = "deer in front of mountains" class = 'gamePic special' id='Eric'/>
<button onclick="gameDad()" class="gameButton">Dad</button>
<button onclick="gameMom()" class="gameButton">Mom</button>
<button onclick="gameClaire()" class="gameButton">Claire</button>
<button onclick="gameEric()" class="gameButton">Eric</button>
</div>
</main>
<footer>
<p>Claire Wan ~ Yellowsone Photographs</p>
</footer>
<script>
function changeLanguage(item) {
console.log('button pressed')
// console.log(document.get)
var ch = document.getElementsByClassName('ch');
var en = document.getElementsByClassName('en');
console.log("inner text: " + item.innerText)
// console.log(item.innerText)
if (item.innerText == 'English') {
console.log("ENGLISH")
for (let i = 0; i < ch.length; i++) {
ch[i].style.display = "none";
en[i].style.display = "block";
}
item.innerText = '中文'
}
else {
console.log("CHINESE")
for (let i = 0; i < ch.length; i++) {
ch[i].style.display = "block";
en[i].style.display = "none";
}
item.innerText = 'English'
}
}
function gameClaire() {
var text = document.getElementById('gameText');
document.getElementById('correct').style.display = "block";
var round1 = document.getElementById('Claire');
var round2 = document.getElementById('Mom');
if (text.innerText == 'Round 1') {
text.innerText = 'Round 2';
round1.style.display = 'none';
round2.style.display = 'block';
}
else {
document.getElementById('correct').style.display = "none";
text.innerText = "Wrong, Game Over";
var images = document.getElementsByClassName('gamePic');
for (let i = 0; i < images.length; i++) {
images[i].style.display = 'none';
}
var buttons = document.getElementsByClassName('gameButton');
for (let i = 0; i < buttons.length; i++) {
buttons[i].style.display = "none";
}
}
}
function gameMom() {
var text = document.getElementById('gameText');
var round2 = document.getElementById('Mom');
var round3 = document.getElementById('Dad');
if (text.innerText == 'Round 2') {
text.innerText = 'Round 3'
round2.style.display = 'none';
round3.style.display = 'block';
}
else {
document.getElementById('correct').style.display = "none";
text.innerText = "Wrong, Game Over";
var images = document.getElementsByClassName('gamePic');
for (let i = 0; i < images.length; i++) {
images[i].style.display = 'none';
}
var buttons = document.getElementsByClassName('gameButton');
for (let i = 0; i < buttons.length; i++) {
buttons[i].style.display = "none";
}
}
}
function gameDad() {
var text = document.getElementById('gameText');
var round3 = document.getElementById('Dad');
var round4 = document.getElementById('Eric');
if (text.innerText == 'Round 3') {
text.innerText = 'Round 4'
round3.style.display = 'none';
round4.style.display = 'block';
}
else {
document.getElementById('correct').style.display = "none";
text.innerText = "Wrong, Game Over";
var images = document.getElementsByClassName('gamePic');
for (let i = 0; i < images.length; i++) {
images[i].style.display = 'none';
}
var buttons = document.getElementsByClassName('gameButton');
for (let i = 0; i < buttons.length; i++) {
buttons[i].style.display = "none";
}
}
}
function gameEric() {
var text = document.getElementById('gameText');
var round4 = document.getElementById('Eric');
if (text.innerText == 'Round 4') {
text.innerText = 'Congrats, you win! However, there actually does not exist a picture with all of us at Yellowstone so you win nothing.';
round4.style.display = 'none';
}
else {
document.getElementById('correct').style.display = "none";
text.innerText = "Wrong, Game Over";
var images = document.getElementsByClassName('gamePic');
for (let i = 0; i < images.length; i++) {
images[i].style.display = 'none';
}
var buttons = document.getElementsByClassName('gameButton');
for (let i = 0; i < buttons.length; i++) {
buttons[i].style.display = "none";
}
}
}
function color(item) {
console.log(item)
var image = item.getElementsByClassName('image')[0];
var text = item.getElementsByClassName('fig_text')[0];
console.log(image)
image.style.filter = 'none'
image.style.transition = '0.75s'
text.style.display = 'table-caption';
}
function blackwhite(item) {
var image = item.getElementsByClassName('image')[0];
var text = item.getElementsByClassName('fig_text')[0];
console.log(image)
image.style.filter = 'grayscale(100%)'
image.style.transition = '3s'
text.style.display = 'none';
}
</script>
</body>
</html>