forked from sophshep/isthelakefullyet
-
Notifications
You must be signed in to change notification settings - Fork 0
/
Copy pathindex.html
105 lines (105 loc) · 4.65 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
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
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>Is The Lake Full Yet?</title>
<meta name="description" content="Are you wondering about the current status of Lake Travis?">
<meta name="viewport" content="width=device-width, initial-scale=1">
<meta property="og:title" content="Is the Lake Full Yet?">
<meta property="og:type" content="website">
<meta property="og:description" content="Are you wondering about the current status of Lake Travis? This central Texas reservoir on the Colorado River is considered 'full' or 'at maximum desired capacity' when the lake's water level is at 681 feet (208 m) above mean sea level (msl).">
<meta property="og:determiner" content="the">
<meta property="og:locale" content="en_US">
<meta property="og:url" content="https://isthelakefullyet.com">
<meta property="og:image" content="https://isthelakefullyet.com/img/og-image-1200.jpg">
<meta name="twitter:card" content="summary_large_image">
<meta name="twitter:title" content="Is the Lake Full Yet?">
<meta name="twitter:description" content="Are you wondering about the current status of Lake Travis? This central Texas reservoir on the Colorado River is considered 'full' when the lake's water level is at 681 feet above mean sea level.">
<meta name="twitter:image" content="https://isthelakefullyet.com/img/og-image-1200.jpg">
<meta name="apple-mobile-web-app-title" content="Full Lake?">
<link rel="apple-touch-icon" href="img/touch-icon-iphone.png">
<link rel="apple-touch-icon" sizes="76x76" href="img/touch-icon-ipad.png">
<link rel="apple-touch-icon" sizes="120x120" href="img/touch-icon-iphone-retina.png">
<link rel="apple-touch-icon" sizes="152x152" href="img/touch-icon-ipad-retina.png">
<link rel="stylesheet" href="css/style.css">
<link href="https://fonts.googleapis.com/css?family=Open+Sans:400,800" rel="stylesheet" type="text/css">
<link href="https://fonts.googleapis.com/css?family=Anton" rel="stylesheet" type="text/css">
</head>
<body>
<div id="text">
<span id="status">Loading…</span>
<span id="remainder"></span>
</div>
<div class="water-level-marker">
<div class="depth">
<div class="level-1 sixths level-a thirds">
<span class="two-line">501 ft. <br />(Empty)</span>
</div>
<div class="level-2 sixths">
<span>531</span>
</div>
<div class="level-3 sixths level-b thirds">
<span>561</span>
</div>
<div class="level-4 sixths">
<span>591</span>
</div>
<div class="level-5 sixths level-c thirds">
<span>621</span>
</div>
<div class="level-6 sixths">
<span>651</span>
</div>
<div class="level-7 level-d sixths thirds">
<span class="two-line">681 ft. <br />(Full)</span>
</div>
</div>
<div class="volume">
<div class="level-10 tenths">
<span>10%</span>
</div>
<div class="level-20 tenths">
<span>20%</span>
</div>
<div class="level-25 quarters">
<span>25%</span>
</div>
<div class="level-30 tenths">
<span>30%</span>
</div>
<div class="level-40 tenths">
<span>40%</span>
</div>
<div class="level-50 tenths quarters">
<span>50%</span>
</div>
<div class="level-60 tenths">
<span>60%</span>
</div>
<div class="level-70 tenths">
<span>70%</span>
</div>
<div class="level-75 quarters">
<span>75%</span>
</div>
<div class="level-80 tenths">
<span>80%</span>
</div>
<div class="level-90 tenths">
<span>90%</span>
</div>
<div class="level-capacity tenths quarters">
<span>100% (Lake Is Full)</span>
</div>
</div>
</div>
<div id="water-level"></div>
<div id="blue-fill"></div>
<div id="display-switch">
<a class="depth" data-choice="depth">Depth</a>
<a class="volume" data-choice="volume">Volume</a>
</div>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>
<script src="js/script.js"></script>
</body>
</html>