-
Notifications
You must be signed in to change notification settings - Fork 2
Expand file tree
/
Copy pathtimeline.html
More file actions
111 lines (105 loc) · 6.7 KB
/
timeline.html
File metadata and controls
111 lines (105 loc) · 6.7 KB
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
<!DOCTYPE html>
<html>
<head>
<title>Climate Change Game v0.9</title>
<link rel="stylesheet" type="text/css" href="css/timeline.css">
<link href="https://fonts.googleapis.com/css?family=Open+Sans" rel="stylesheet">
<script src="lib/jquery-3.0.0.min.js"></script>
<script src="js/timeline.js"></script>
</head>
<body>
<div id="timelineContainer">
<svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
width="771px" height="502px" viewBox="0 0 771 502" enable-background="new 0 0 771 502" xml:space="preserve">
<line fill="none" stroke="#000000" stroke-width="2" stroke-miterlimit="10" x1="1" y1="0" x2="1" y2="458"/>
<line fill="none" stroke="#000000" stroke-width="2" stroke-miterlimit="10" x1="1" y1="459" x2="756" y2="459"/>
<g>
<g>
<path id="upToPresent" stroke-dasharray="10" stroke-dashoffset="10" fill="#FF0000" d="M2.03,415.231c14.503,8.229,22.717-7.858,30.541-17.256c-0.854-0.354-1.707-0.707-2.561-1.061
c0.183,3.213,0.93,6.353,1.063,9.574c0.048,1.162,1.23,1.834,2.257,1.295c6.642-3.481,12.508-8.22,19.149-11.702
c-0.752-0.432-1.504-0.863-2.257-1.295c0.444,3.438,2.75,6.164,3.191,9.574c0.152,1.177,1.144,1.804,2.257,1.295
c7.65-3.492,14.75-0.709,16.946,7.614c0.323,1.226,2.126,1.515,2.742,0.358c2.641-4.965,6.198-9.354,9.574-13.829
c-0.932-0.252-1.864-0.505-2.795-0.757c0.294,3.907,1.946,7.388,3.245,11.036c0.398,1.118,2.123,1.621,2.742,0.358
c1.528-3.12,5.722-3.936,8.276-6.079c-0.835-0.221-1.671-0.441-2.507-0.662c1.512,3.731,3.652,7.799,8.29,7.205
c4.333-0.555,8.107-4.953,11.239-7.606c-0.785-0.102-1.57-0.202-2.356-0.304c1.3,2.215,2.956,4.168,4.255,6.383
c0.401,0.685,1.362,0.979,2.052,0.538c4.591-2.933,8.457-6.86,12.957-9.931c2.618-1.787,7.67-4.486,10.103-0.961
c0.978,1.417,1.132,3.249,2.217,4.623c6.61,8.372,24.1-5.02,30.748-7.41c-0.615-0.349-1.23-0.698-1.845-1.048
c0.394,2.271,1.735,4.121,2.127,6.383c0.13,0.751,1.133,1.322,1.845,1.048c2.756-1.062,5.754-1.064,8.511-2.127
c-0.565-0.229-1.129-0.459-1.694-0.689c1.349,2.523,2.907,4.924,4.255,7.446c0.5,0.936,1.63,0.868,2.356,0.304
c6.826-5.304,15.486-3.177,23.454-3.654c8.245-0.494,13.732-5.354,17.207-12.606c-0.864,0-1.727,0-2.591,0
c1.064,2.128,2.128,4.256,3.191,6.383c0.445,0.89,1.694,0.936,2.356,0.304c2.849-2.716,6.03-5.148,7.682-8.814
c-0.914-0.119-1.828-0.238-2.742-0.358c0.886,6.375,0.02,12.977,2.127,19.148c0.329,0.965,1.742,1.602,2.507,0.662
c3.974-4.879,8.321-9.381,12.766-13.829c-0.835-0.221-1.671-0.441-2.507-0.662c0.642,2.115,2.238,3.786,3.342,5.678
c0.503,0.862,1.649,0.954,2.356,0.304c2.831-2.603,6.595-4.481,8.746-7.751c-0.932-0.252-1.864-0.505-2.795-0.757
c0.173,2.514,0.891,4.935,1.064,7.447c0.079,1.143,1.211,1.858,2.257,1.295c5.864-3.156,10.371,1.641,15.629,3.667
c5.089,1.961,9.333,0.608,13.398-2.838c-0.707,0-1.414,0-2.121,0c13.101,13.25,31.258-1.122,45.077-4.934"/>
</g>
</g>
<g>
<linearGradient id="SVGID_1_" gradientUnits="userSpaceOnUse" x1="840.0215" y1="208.5479" x2="362.7494" y2="208.5478">
<stop offset="0.2406" style="stop-color:#FFFFFF"/>
<stop offset="0.9062" style="stop-color:#FF0000"/>
</linearGradient>
<path id="futureGradient" fill="url(#SVGID_1_)" d="M338.958,395.787c0,0,324.468-44.681,374.478-374.479c-0.009,68.323,0,222.352,0,278.734
C601.724,363.872,338.958,395.787,338.958,395.787"/>back
</g>
<g>
<g>
<path id="futureTop" fill="#FF0000" d="M339.356,397.233c22.565-3.118,44.961-9.725,66.507-16.887c50.657-16.839,98.958-41.333,141.784-73.263
c56.798-42.348,102.396-98.204,131.664-162.785c17.639-38.92,29.114-80.402,35.57-122.592c0.29-1.892-2.601-2.705-2.893-0.798"/>
</g>
</g>
<g>
<g>
<path id="futureBottom" fill="#FF0000" d="M338.958,397.287c56.385-5.918,112.583-16.561,167.814-29.12c70.817-16.104,141.161-36.815,207.421-66.829"/>
</g>
</g>
<g>
<g>
<path id="futureMiddle" fill="#FF0000" d="M338.958,397.287c35.641-3.736,71.172-11.473,105.782-20.53c68.171-17.841,136.519-43.964,193.254-86.572
c31.669-23.784,59.286-53.507,76.737-89.321"/>
</g>
</g>
<line fill="none" stroke="#CCCCCC" stroke-width="2" stroke-miterlimit="10" x1="339" y1="459" x2="339" y2="0"/>
<line fill="none" stroke="#CCCCCC" stroke-width="2" stroke-miterlimit="10" x1="534" y1="459" x2="534" y2="0"/>
<line fill="none" stroke="#CCCCCC" stroke-width="2" stroke-miterlimit="10" x1="632" y1="459" x2="632" y2="0"/>
<line fill="none" stroke="#CCCCCC" stroke-width="2" stroke-miterlimit="10" x1="713" y1="459" x2="713" y2="0"/>
<circle fill="#F7931E" cx="339.404" cy="395.724" r="8.51" onClick="circleClicked(0, 'low', this)" class="point upToPresent"/>
<circle fill="#F7931E" cx="534.404" cy="313.724" r="8.51" onClick="circleClicked(1, 'high', this)" class="point futureTop"/>
<circle fill="#F7931E" cx="534.404" cy="342.724" r="8.51" onClick="circleClicked(1, 'medium', this)" class="point futureMiddle"/>
<circle fill="#F7931E" cx="534.404" cy="364.724" r="8.51" onClick="circleClicked(1, 'low', this)" class="point futureBottom"/>
<circle fill="#F7931E" cx="632.404" cy="220.724" r="8.51" onClick="circleClicked(2, 'high', this)" class="point futureTop"/>
<circle fill="#F7931E" cx="632.404" cy="293.724" r="8.51" onClick="circleClicked(2, 'medium', this)" class="point futureMiddle"/>
<circle fill="#F7931E" cx="632.404" cy="333.724" r="8.51" onClick="circleClicked(2, 'low', this)" class="point futureBottom"/>
<circle fill="#F7931E" cx="713.404" cy="21.724" r="8.51" onClick="circleClicked(3, 'high', this)" class="point futureTop"/>
<circle fill="#F7931E" cx="713.404" cy="199.724" r="8.51" onClick="circleClicked(3, 'medium', this)" class="point futureMiddle"/>
<circle fill="#F7931E" cx="713.404" cy="299.724" r="8.51" onClick="circleClicked(3, 'low', this)" class="point futureBottom"/>
<rect x="320" y="469" fill="none" width="75" height="33"/>
<text transform="matrix(1 0 0 1 320 481.7803)" font-family="'MyriadHebrew-Regular'" font-size="18">2020</text>
<rect x="518" y="469" fill="none" width="75" height="33"/>
<text transform="matrix(1 0 0 1 518 481.7803)" font-family="'MyriadHebrew-Regular'" font-size="18">2025</text>
<rect x="614" y="469" fill="none" width="75" height="33"/>
<text transform="matrix(1 0 0 1 614 481.7803)" font-family="'MyriadHebrew-Regular'" font-size="18">2035</text>
<rect x="696" y="469" fill="none" width="75" height="33"/>
<text transform="matrix(1 0 0 1 696 481.7803)" font-family="'MyriadHebrew-Regular'" font-size="18">2045</text>
</svg>
<div id="mainText">
<div id="mainTextContent">
</div>
<div id="playButton"></div>
</div>
<div id="climateFacts">
<div class="title"></div>
<div class="text"></div>
</div>
<div id="artAccent"></div>
</div>
<div id="blackout"></div>
<div id="centerText"></div>
<script>
$( document ).ready(function() {
startIntro();
});
</script>
</body>
</html>