Caffeinated-kiosk/forme.html at main · MeanCaffeine/Caffeinated-kiosk · GitHub

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
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<div id="logo">
  <img src="images\Logo\Bikes and Bridges-JPG.jpg" style="width: 10%";>
</div>
  <li><a href="menu.html">Menu</a></li>


<style>
body {font-family: "Lato", sans-serif;}

.tablink {
  background-color: #555;
  color: white;
  float: left;
  border: none;
  outline: none;
  cursor: pointer;
  padding: 14px 16px;
  font-size: 17px;
  width: 25%;
}

.tablink:hover {
  background-color: #777;
}

/* Style the tab content */
.tabcontent {
  color: white;
  display: none;
  padding: 50px;
  text-align: center;
}

#Time {background-color:red;}
#Safety{background-color:green;}
#QOL {background-color:blue;}
#Beauty {background-color:orange;}
</style>
</head>
<body>

<p>Tap on Sections to explore each facet of what our Urban Transportation Policy Means for You. When you're done, tap the menu button above.</p>

<div id="Time" class="tabcontent">
  <h1>Time</h1>
  <p>The average American spends 2.5 weeks of their year waiting in traffic during their daily commute!</p>
</div>

<div id="Safety" class="tabcontent">
  <h1>Safety and Health</h1>
  <p>In 2021, 1200 people died in car crashes in Pennsylvania; nearly 70,000 people were injured. (PennDOT)</p>
  <p>The most deadly type of crashes involved a pedestrian or cyclist and a car, where you are 7 times more likely to die in the crash compared to surviving with an injury.</p>
  <p>Every year, 4 Million kids develop asthma due to exposure to car exaust in urban areas. (WHO)</p>
</div>

<div id="QOL" class="tabcontent">
  <h1>Quality of Life</h1>
  <p>Having to wait in traffic, finding and paying for parking, play Frogger in intersections, navigating intersections, and paying for gas are some of the worst parts about being in the city. They are universally hated activities. </p>
  <p>Building car infrastructure like wide roads makes getting around on foot or bike less pleaseant for everyone else. It also isolates us: people in their cars do not interact with one another.
<p>---------------------------------------------------</p>
  <img src="images\informational\PublicSpaces.jfif" style="width: 75%";>
  <div class="text">Credit Twitter @thetolerantweft</div>
</div>

<div id="Beauty" class="tabcontent">
  <h1>Beauty</h1>
  <p>Beauty is subjective, and looks are only part of what makes living anywhere great- but it is something that most people enjoy. Roads act as soulless asphalt deserts that distract from the many beautiful buildings and parks of the city. We idolize the beauty of Tokyo, Paris, London, and countless other old cities. A big part of this is that they were built before cars! Their narrow streets are often for pedestrians only</p>
  <p>Thin, pedestrian-centered streets allow for quiet intimate spaces to have a coffee, meet a friend, or just enjoy local shops- without worrying about the danger or the noise of motor vehicles.</p>
  <img src="images\informational\EuroStreet.jpg" style="width: 75%";>
  <div class="text">Good Design: Copenhagen, Credit Martin Heiberg</div>
</div>

<button class="tablink" onclick="openCity('Time', this, 'red')" id="defaultOpen">Time</button>
<button class="tablink" onclick="openCity('Safety', this, 'green')">Safety</button>
<button class="tablink" onclick="openCity('QOL', this, 'blue')">QOL</button>
<button class="tablink" onclick="openCity('Beauty', this, 'orange')">Beauty</button>

<script>
function openCity(cityName,elmnt,color) {
  var i, tabcontent, tablinks;
  tabcontent = document.getElementsByClassName("tabcontent");
  for (i = 0; i < tabcontent.length; i++) {
    tabcontent[i].style.display = "none";
  }
  tablinks = document.getElementsByClassName("tablink");
  for (i = 0; i < tablinks.length; i++) {
    tablinks[i].style.backgroundColor = "";
  }
  document.getElementById(cityName).style.display = "block";
  elmnt.style.backgroundColor = color;

}
// Get the element with id="defaultOpen" and click on it
document.getElementById("defaultOpen").click();
</script>

</body>
</html>