-
Notifications
You must be signed in to change notification settings - Fork 1
/
index.html
72 lines (69 loc) · 3.37 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
<html>
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<title>Save Percy the Polar Bear</title>
<meta name="description" content="Find out your carbon footprint and see what you can do to save Percy and all his friends.">
<link rel="stylesheet" href="main.css">
<script type="text/javascript" src="style.js"></script>
<link href="https://fonts.googleapis.com/css?family=Bungee|Lato" rel="stylesheet">
</head>
<body>
<div id = "percy">
<h1>Save Percy</h1>
<img id = "polarBear" src = "Polar%20Bear.png">
<img id = "ice" src = "Ice.png">
</div>
<div id = "tabs">
<ul class="tab">
<li><a href="#menu" class="tablinks" onclick="opentab(event, 'menu');
"><img src = "menu.png"></a></li>
<li><a href="#camera" class="tablinks" onclick="opentab(event, 'camera')"><img src = "photo-camera.png"></a></li>
<li><a href="#chat" class="tablinks" onclick="opentab(event, 'chat')"><img src = "paper-plane.png"></a></li>
<li><a href="#footprint" class="tablinks" onclick="opentab(event, 'footprint')"><img src = "footprint.png"></a></li>
</ul>
</div>
<div id = "content">
<div id = "menu" class="tabcontent">
<h3>What's Your Impact?</h3>
<p style="font-family:Lato; text-align:center"> Here you can monitor your carbon footprint! Each scale displays a range of values that you can change based on how much energy, water, or waste your household produces per month. Try to aim for below the average usage value! </p>
<h4>Energy Usage (kwh/mo) </h4>
<input type="range" min="0" max="1822" value="0" step="1" onchange="showValue(this.value)" />
<span id="energy">0</span>
<span id="energy2">1822</span>
<br>
<br>
<p>USA Average Energy Usage Per Month: 911 kwh/mo</p>
<br>
<h4>Water Usage (gal/mo) </h4>
<input type="range" min="0" max="24800" value="0" step="1" onchange="showValue1(this.value)"/>
<span id="water">0</span>
<span id="water2">24800</span>
<br>
<br>
<p>USA Average Water Usage Per Month: 12,400 gal/mo</p>
<br>
<h4>Waste Production (lbs/mo) </h4>
<input type="range" min="0" max="1066" value="0" step="1" onchange="showValue2(this.value)"/>
<span id="waste">0</span>
<span id="waste2">1066</span>
<br>
<br>
<p>USA Average Waste Production Per Month: 533 lbs/mo</p>
<br>
</div>
<div id="camera" class="tabcontent">
<h3>Take a Look</h3>
<p>Take a picture to see how your surroundings measure up.</p>
</div>
<div id="chat" class="tabcontent">
<h3>Chat With Percy</h3>
<p>Insert Chat Here :)</p>
</div>
<div id="footprint" class="tabcontent">
<h3>Lessen Your Footprint</h3>
<p>Insert Footprint Here :)</p>
</div>
</div>
</body>
</html>