-
Notifications
You must be signed in to change notification settings - Fork 0
/
index.html
160 lines (159 loc) · 6.01 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
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
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<meta http-equiv="X-UA-Compatible" content="ie=edge" />
<title>Water Tip Matching Game</title>
<link rel="preconnect" href="https://fonts.googleapis.com" />
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin />
<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=Lato&display=swap"
rel="stylesheet"
/>
<link rel="stylesheet" href="app.css" />
<link rel="icon" href="bwsIcon.png" />
<script src="jquery-3.6.3.min.js"></script>
</head>
<body>
<div class="container">
<header>
<h2>BWS Water Conservation Tips</h2>
<button class="open-instructions"><h4>Instructions</h4></button>
<button onclick="resetGame()"><h4>Reset</h4></button>
</header>
<div id="game"></div>
<!-- displayed once the game is complete -->
<div id="win">
<h2>Great job!</h2>
<h3>
Make sure to share these tips with your family and friends for a
smarter community and a better environment.
</h3>
</div>
<!-- instructions -->
<dialog class="modal modal-instructions">
<h2>Instructions:</h2>
<h3>
The goal of this game is to correctly match cards with the same
pictures. Tap on a card to flip it over. Every time you match two
cards, you'll learn a new water conservation tip. Good luck!
</h3>
<button class="close-button">
<h4>close</h4>
</button>
</dialog>
<!-- 1. Water sheds -->
<dialog class="modal modal-watersheds">
<!--You could also add videos instead of images instead-->
<!-- <video controls src="waterfall.mp4">
Your browser does not support the video tag.
</video> -->
<img src="watershed.jpg" alt="watershed" />
<h3>Protect the watersheds in your area</h3>
<p>
Watersheds are areas of land that channel water into rivers and
creeks. Keeping these areas clean will help maintain healthy
watersheds.
</p>
<button class="close-button">
<h4>close</h4>
</button>
</dialog>
<!-- 2. Water at certain hours -->
<dialog class="modal modal-certainHours">
<img src="grassNight.jpg" alt="grass at night" />
<h3>Water your lawn sparingly at certain hours</h3>
<p>
If you water during the day when the sun is out, the water will
evaporate much more quickly. Instead, water during the morning or
evening. Lawns also don't need to be watered every day. Watering once
every three days is enough to keep your lawn healthy.
</p>
<button class="close-button">
<h4>close</h4>
</button>
</dialog>
<!-- 3. Check for plumbing leaks -->
<dialog class="modal modal-leaks">
<img src="faucet.jpg" alt="faucet" />
<h3>Pay attention to leaks in your home</h3>
<p>
All sorts of appliances in your home can leak. Some include faucets,
shower heads, and dishwashers. Make sure to inform someone whenever
you find a leak to get it fixed.
</p>
<button class="close-button">
<h4>close</h4>
</button>
</dialog>
<!-- 4. dedicated bottle -->
<dialog class="modal modal-dedicatedBottle">
<img src="bottle.jpg" alt="water bottle" />
<h3>Use a dedicated bottle or cup for water</h3>
<p>
Refill the bottle or cup you're using instead of getting a new one.
This cuts back on the number of dishes that need to get washed.
</p>
<button class="close-button">
<h4>close</h4>
</button>
</dialog>
<!-- 5. take shorter showers -->
<dialog class="modal modal-shortShowers">
<img src="shower.jpg" alt="shower" />
<h3>Take shorter showers</h3>
<p>
Every minute trimmed from a shower will save 3 to 6 gallons of water,
so try to keep your shower times as short as possible!
</p>
<button class="close-button">
<h4>close</h4>
</button>
</dialog>
<!-- 6. put a nozzle on garden hoses -->
<dialog class="modal modal-nozzle">
<img src="hose.jpg" alt="hose" />
<h3>Put a nozzle on garden hoses</h3>
<p>
Left unattended, a running garden hose can waste over 100 gallons of
water in just minutes. Put a nozzle on your hose so you only use what
you need when you're watering the plants, cleaning the house, or
washing the car.
</p>
<button class="close-button">
<h4>close</h4>
</button>
</dialog>
<!-- 7. Don't let the faucet run too long -->
<dialog class="modal modal-faucetOff">
<img src="toothBrush.jpg" alt="tooth brush" />
<h3>Don't let the faucet run too long</h3>
<p>
When you're in the bathroom, turn off the tap while brushing your
teeth. In the kitchen, use a dishpan to hold soapy water and then
rinse dishes with clean water quickly.
</p>
<button class="close-button">
<h4>close</h4>
</button>
</dialog>
<!-- 8. Never use the toilet to throw away trash -->
<dialog class="modal modal-toilet">
<img src="toilet.jpg" alt="toilet" />
<h3>Never use the toilet to throw away trash</h3>
<p>
Throwing trash in the toilet can use a lot of unnecessary water with
each flush. It also has the potential to clog up your plumbing which
is expensive to fix.
</p>
<button class="close-button">
<p>close</p>
</button>
</dialog>
</div>
<script src="app.js"></script>
</body>
</html>