-
Notifications
You must be signed in to change notification settings - Fork 0
/
footprint_narrative_3.html
91 lines (88 loc) · 3.69 KB
/
footprint_narrative_3.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
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="footprint_narrative.css">
<title>digital carbon footprint inquiry</title>
</head>
<body>
<div class="wrapper">
<div class="container">
<section class="open-book">
<header>
<h1>Digital Carbon Footprint Inquiry</h1>
<h6>Digital Humanities Center</h6>
</header>
<article>
<p>
</br>
How about streaming services?
</br>
</br>
</p>
<form id="calc" oninput="updateOutput()">
<b>Digital Carbon Footprint:</b> <output name="carbon" for="Netflix Hulu">0</output> kg<br><br>
<b> Digital Water Footprint:</b> <output name="water" for="Netflix Hulu">0</output> l<br><br>
<b>Digital Land Footprint: </b><output name="land" for="Netflix Hulu">0</output> cm<sup>2</sup><br><br>
<table>
<tbody><tr>
<th>Platform</th>
<th>Data (GB/hr)</th>
<th>Hours/day</th>
<th>Carbon (g)</th>
<th>Water (l)</th>
<th>Land (cm<sup>2</sup>)</th>
</tr>
<tr>
<td><div class="platform_name">Netflix: </div></td>
<td>7</td>
<td><input name="Netflix" value="0" type="number" min="0" step="0.5"></td>
<td><output name="carbon_netflix" for="Netflix">0</output></td>
<td><output name="water_netflix" for="Netflix">0</output></td>
<td><output name="land_netflix" for="Netflix">0</output></td>
</tr>
<tr>
<td><div class="platform_name">Hulu: </div></td>
<td>7.2</td>
<td><input name="Hulu" value="0" type="number" min="0" step="0.5"></td>
<td><output name="carbon_hulu" for="Hulu">0</output></td>
<td><output name="water_hulu" for="Hulu">0</output></td>
<td><output name="land_hulu" for="Hulu">0</output></td>
</tr>
<tr>
<td><div class="platform_name">Amazon Video: </div></td>
<td>7</td>
<td><input name="Amazon" value="0" type="number" min="0" step="0.5"></td>
<td><output name="carbon_amazon" for="Amazon">0</output></td>
<td><output name="water_amazon" for="Amazon">0</output></td>
<td><output name="land_amazon" for="Amazon">0</output></td>
</tr>
<tr>
<td><div class="platform_name">Youtube: </div></td>
<td>15.98</td>
<td><input name="Youtube" value="0" type="number" min="0" step="0.5"></td>
<td><output name="carbon_youtube" for="Youtube">0</output></td>
<td><output name="water_youtube" for="Youtube">0</output></td>
<td><output name="land_youtube" for="Youtube">0</output></td>
</tr>
<tr>
<td><div class="platform_name">Spotify: </div></td>
<td>0.04</td>
<td><input name="Spotify" value="0" type="number" min="0" step="0.5"></td>
<td><output name="carbon_spotify" for="Spotify">0</output></td>
<td><output name="water_spotify" for="Spotify">0</output></td>
<td><output name="land_spotify" for="Spotify">0</output></td>
</tr>
</article>
<footer>
<ol id="page-numbers">
<li></li>
<li><a href="footprint_narrative_4.html">Next Page</a></li>
</ol>
</footer>
</section>
</div>
</div>
</body>
<script type="text/javascript" src="calculator_narrative_3.js" defer=""></script>
</html>