-
Notifications
You must be signed in to change notification settings - Fork 0
/
index.html
105 lines (86 loc) · 3.9 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
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Birds of Aotearoa</title>
<link rel="icon" href="./assets/logos/logo.svg" type="image/svg+xml">
<link rel=”mask-icon” href=./assets/logos/logo.svg”>
<link rel="stylesheet" href="./styles.css">
<script src="./main.js" defer></script>
<script src="https://cdn.jsdelivr.net/npm/sweetalert2@11"></script>
</head>
<body>
<div class="background">
<div class="gradient"></div>
</div>
<main class="main">
<nav>
<div class="logo"></div>
<h2>Birds of Aotearoa</h2>
</nav>
<section class="header">
<h1 class="head_text">Birds of <span class="orange_gradient">Aotearoa</span></h1>
<br>
<p>Explore 68 species of New Zealand birds thanks to University of Otago in collaboration with The National Museum of NZ (Te Papa), the Department of Conservation (DOC) and
the Ornithological Society of NZ (Birds NZ) </p>
</section>
<section class="card_filtering">
<h2>Filter Birds</h2>
<button
class="reset_button"
title="Reset all filters"
onclick="resetFilters()"
>
Reset Filters
<!-- <img class="reset_filters_img" src="./assets/reset.svg" alt="Reset Icon"> -->
</button>
<form>
<input type="text" id="search_input" name="search_input" placeholder="Search NZ Birds by Name ">
<div class="filter_options">
<label for="filter_conservation_status">Conservation Status:</label>
<div class="filter_options_select">
<select name="filter_conservation_status" id="filter_conservation_status">
<!-- Dynamically populated dropdown using JS -->
<option value="Any">Any</option>
</select>
<div class="dropdown_arrow"></div>
<button
type="button"
title="Conservation Status Key"
class="help_icon tooltip"
onclick="conservationKeyHelp()"
style="text-decoration: none;"
>
<span class="tooltiptext">Help with Conservation Status</span>
</button>
</div>
</div>
<div class="filter_options">
<label for="sort_cards">Sort By:</label>
<div class="filter_options_select">
<select name="sort_cards" id="sort_cards">
<!-- Dynamically populated dropdown using JS -->
</select>
<div class="dropdown_arrow"></div>
<button
type="button"
title="Help for Sort By"
class="help_icon tooltip"
onclick="sortByHelp()"
>
<span class="tooltiptext">Help with sorting</span>
</button>
</div>
</div>
</form>
</section>
<div class="all_cards_container">
</div>
<footer class="credit">
<p>This data was kindly provided to us by <a href="https://www.birdsnz.org.nz/">Birds NZ</a> under good faith under the condition it is only used for research and educational
purposes here at the University of Otago.</p>
</footer>
</main>
</body>
</html>