-
Notifications
You must be signed in to change notification settings - Fork 0
/
Copy pathindex.html
111 lines (95 loc) · 4.46 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
106
107
108
109
110
111
<!DOCTYPE html>
<html>
<head>
<title>H2Opinions</title>
<meta charset="utf-8" />
<link rel="shortcut icon" href="#">
<link rel="stylesheet" href="styles/index.css">
<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=Open+Sans:ital,wght@0,300..800;1,300..800&display=swap" rel="stylesheet">
<!-- MapLibreGL's css-->
<link rel="stylesheet" href="https://unpkg.com/maplibre-gl/dist/maplibre-gl.css" />
<!-- MapLibreGL's JavaScript-->
<script src="https://unpkg.com/maplibre-gl/dist/maplibre-gl.js"></script>
<!-- PapaParse Library-->
<script src="https://cdnjs.cloudflare.com/ajax/libs/PapaParse/5.3.0/papaparse.min.js"></script>
</head>
<body>
<header>
<div id="title">
<h1>Newbury Park Student Athletes' H2Opinions</h1>
</div>
<div id="navbar">
<a class="redirect" href="index.html">HOME</a>
<a class="redirect" href="about.html">ABOUT</a>
<a class="redirect" href="survey.html">SURVEY</a>
</div>
</header>
<section id="intro">
<div class="intro-col2">
<!-- Progress bar for the second column -->
<div id="chart"></div>
</div>
</section>
<!-- Modal -->
<div id="modal" class="modal">
<div class="modal-content">
<span class="close">×</span>
<div class="intro-col1">
<div class="intro-title">
<h2>At Newbury Park High School in 2024, there are</h2></br>
<div class="stats-container">
<div class="stat-item">
<div class="stat-number special-number">3</div>
<div class="stat-description special-text">water fountains</div>
</div>
<h3>for</h3></br>
<div class="stat-item">
<div class="stat-number">2,287</div>
<div class="stat-description">students</div>
</div>
<h3>and</h3></br>
<div class="stat-item">
<div class="stat-number">26</div>
<div class="stat-description">sports teams</div>
</div>
</div>
<p>
Water fountain conditions play a crucial role in the health, performance, and daily experience of student athletes at NPHS. Use the chart and the map on this website to learn more about the experiences of NPHS student athletes on this matter.</br></br>
Click the <b>x</b> button or anywhere outside this modal to close this message. Click on the <img src="images/info.png" alt="More Information"> button at the bottom right corner to show this modal again.
</p>
</div>
</div>
</div>
</div>
<button id="open-modal-btn" class="sticky-button">
<img src="images/info.png" alt="More Information">
</button>
<main>
<div class="main-col2">
<div id="map">
<!-- Map will be inserted here -->
<div id="legend"></div>
</div>
</div>
<div class="main-col3">
<div id="panel-info">
<h3>Currently viewing all responses</h3>
<p style="padding-top:10px;">Click on a polygon <span style="margin: 0px 5px; height:20px; width:20px;
background-color: #86CBED; border: solid 1.75px white;
transform: translateY(20%);" class="square">
</span> on the map to view responses from just that location.</p>
</div>
<div id="filter"></div>
<div id="cards"></div>
<div id="panel-end">You have reached the end of all available responses.</div>
</div>
</main>
<div id="footer">
<p>COPYRIGHT 2024</p>
</div>
<script type="module" src="js/init.js"></script>
<script type="module" src="js/panelTop.js"></script>
</body>
</html>