-
Notifications
You must be signed in to change notification settings - Fork 0
/
Copy pathindex.html
104 lines (93 loc) · 4.79 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
<!DOCTYPE html>
<html lang="en">
<head>
<title>Go-Diverse!</title>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width,initial-scale=1" />
<meta name="robots" content="noindex,nofollow" />
<meta name="description" content="Biodiversity educational tool" />
<link href="assets/styles.css" rel="stylesheet" />
</head>
<body>
<header>
<h1>
<img src="assets/images/logos/Go_Diverse.png" alt="Go Diverse logo" width="219" height="90" />
</h1>
</header>
<main>
<nav>
<button id="btnPesticides" disabled onclick="usePesticides()">
<img src="assets/images/Pesticide_Thumbnail.png" alt="Pesticide container" width="150" height="150" />
</button>
<button id="btnReset" disabled onclick="reset()">
<img src="assets/images/Reset_Thumbnail.png" alt="Reset" width="150" height="150" />
</button>
</nav>
<section>
<div>
<img src="assets/images/Base.png" alt="A piece of greenfield land" width="920" height="920" class="terrain active" />
<img src="assets/images/Barn.png" alt="Red farm barn" width="920" height="920" class="terrain" data-area="barn" />
<img src="assets/images/Diverse_Fields.png" alt="Fields with diverse planting" width="920" height="920" class="terrain" data-area="diverse-fields" />
<img src="assets/images/Copse.png" alt="Copse with green-leafed trees" width="920" height="920" class="terrain" data-area="copse" />
<img src="assets/images/Seed_Stripe.png" alt="Row of sunflowers" width="920" height="920" class="terrain" data-area="sunflower" />
<img src="assets/images/Manure.png" alt="Heap of manure" width="920" height="920" class="terrain" data-area="manure" />
<img src="assets/images/animals/Brown_Hare.png" alt="Brown hare" width="242" height="242" class="animal hare" data-area="sunflower" />
<img src="assets/images/animals/Little_Owl.png" alt="Little owl" width="142" height="142" class="animal owl" data-area="barn" />
<img src="assets/images/animals/Emberiza_Citrinella.png" alt="Yellowhammer" width="123" height="123" class="animal yellowhammer" data-area="manure" />
<img src="assets/images/animals/Fox.png" alt="Fox" width="235" height="235" class="animal fox" data-area="copse" />
<img src="assets/images/animals/Partridge.png" alt="Partridge" width="200" height="200" class="animal partridge" data-area="diverse-fields" />
</div>
</section>
<nav>
<button data-area="barn" onclick="toggleArea(this)">
<img src="assets/images/Barn_Thumbnail.png" alt="Red farm barn" width="150" height="150" />
</button>
<button data-area="diverse-fields" onclick="toggleArea(this)">
<img src="assets/images/Diverse_Fields_Thumbnail.png" alt="Fields with diverse planting" width="150" height="150" />
</button>
<button data-area="copse" onclick="toggleArea(this)">
<img src="assets/images/Copse_Thumbnail.png" alt="Green-leafed tree" width="150" height="150" />
</button>
<button data-area="sunflower" onclick="toggleArea(this)">
<img src="assets/images/Sunflower_Thumbnail.png" alt="Sunflower" width="150" height="150" />
</button>
<button data-area="manure" onclick="toggleArea(this)">
<img src="assets/images/Manure_Thumbnail.png" alt="Heap of manure" width="150" height="150" />
</button>
</nav>
<audio loop preload="auto" data-area="sunflower">
<source src="assets/sounds/Hare.mp3" type="audio/mp3" />
</audio>
<audio loop preload="auto" data-area="barn">
<source src="assets/sounds/Little_Owl.mp3" type="audio/mp3" />
</audio>
<audio loop preload="auto" data-area="manure">
<source src="assets/sounds/Yellowhammer.mp3" type="audio/mp3" />
</audio>
<audio loop preload="auto" data-area="copse">
<source src="assets/sounds/Fox.mp3" type="audio/mp3" />
</audio>
<audio loop preload="auto" data-area="diverse-fields">
<source src="assets/sounds/Partridge.mp3" type="audio/mp3" />
</audio>
</main>
<footer>
<a href="https://www.ivb.cz/">
<img src="assets/images/logos/Logo_IVB.png" alt="IVB" width="88" height="40" />
</a>
<a href="https://strategie.avcr.cz/">
<img src="assets/images/logos/Logo_Strategy.png" alt="Strategie" width="69" height="40" />
</a>
<a href="https://www.happyporch.com/">
<img src="assets/images/logos/Logo_HappyPorch.png" alt="HappyPorch logo" width="40" height="40" />
</a>
<a href="https://strategie.avcr.cz/en/">
<img src="assets/images/logos/Logo_Strategy_EN.png" alt="IVB" width="69" height="40" />
</a>
<a href="https://www.ivb.cz/en/">
<img src="assets/images/logos/Logo_IVB_EN.png" alt="IVB" width="89" height="40" />
</a>
</footer>
<script src="assets/scripts.js"></script>
</body>
</html>