-
Notifications
You must be signed in to change notification settings - Fork 0
/
footprint_narrative_2.html
108 lines (105 loc) · 4.79 KB
/
footprint_narrative_2.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
<!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>
In this digital age, social media has become a nearly essential way we connect with others. How much time do you
spend on social media?
</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">Facebook: </div></td>
<td>0.16</td>
<td><input name="Facebook" value="0" type="number" min="0" step="0.5"></td>
<td><output name="carbon_facebook" for="Facebook">0</output></td>
<td><output name="water_facebook" for="Facebook">0</output></td>
<td><output name="land_facebook" for="Facebook">0</output></td>
</tr>
<tr>
<td><div class="platform_name">Twitter: </div></td>
<td>0.36</td>
<td><input name="Twitter" value="0" type="number" min="0" step="0.5"></td>
<td><output name="carbon_twitter" for="Twitter">0</output></td>
<td><output name="water_twitter" for="Twitter">0</output></td>
<td><output name="land_twitter" for="Twitter">0</output></td>
</tr>
<tr>
<td><div class="platform_name">Instagram: </div></td>
<td>0.1</td>
<td><input name="Instagram" value="0" type="number" min="0" step="0.5"></td>
<td><output name="carbon_instagram" for="Instagram">0</output></td>
<td><output name="water_instagram" for="Instagram">0</output></td>
<td><output name="land_instagram" for="Instagram">0</output></td>
</tr>
<tr>
<td><div class="platform_name">Snapchat: </div></td>
<td>0.16</td>
<td><input name="Snapchat" value="0" type="number" min="0" step="0.5"></td>
<td><output name="carbon_snapchat" for="Snapchat">0</output></td>
<td><output name="water_snapchat" for="Snapchat">0</output></td>
<td><output name="land_snapchat" for="Snapchat">0</output></td>
</tr>
<tr>
<td><div class="platform_name">TikTok: </div></td>
<td>1.4</td>
<td><input name="TikTok" value="0" type="number" min="0" step="0.5"></td>
<td><output name="carbon_tiktok" for="TikTok">0</output></td>
<td><output name="water_tiktok" for="TikTok">0</output></td>
<td><output name="land_tiktok" for="TikTok">0</output></td>
</tr>
<tr>
<td><div class="platform_name">WhatsApp: </div></td>
<td>0.4</td>
<td><input name="WhatsApp" value="0" type="number" min="0" step="0.5"></td>
<td><output name="carbon_whatsapp" for="WhatsApp">0</output></td>
<td><output name="water_whatsapp" for="WhatsApp">0</output></td>
<td><output name="land_whatsapp" for="WhatsApp">0</output></td>
</tr>
<tr>
<td><div class="platform_name">WeChat: </div></td>
<td>0.11</td>
<td><input name="WeChat" value="0" type="number" min="0" step="0.5"></td>
<td><output name="carbon_wechat" for="WeChat">0</output></td>
<td><output name="water_wechat" for="WeChat">0</output></td>
<td><output name="land_wechat" for="WeChat">0</output></td>
</tr>
</article>
<footer>
<ol id="page-numbers">
<li></li>
<li><a href="footprint_narrative_3.html">Next Page</a></li>
</ol>
</footer>
</section>
</div>
</div>
</body>
<script type="text/javascript" src="calculator_narrative_2.js" defer=""></script>
</html>