-
Notifications
You must be signed in to change notification settings - Fork 1
/
index.html
164 lines (133 loc) · 7.58 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
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
<!DOCTYPE html>
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<title>Modern Voyeur</title>
<meta name="description" content="">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta.2/css/bootstrap.min.css" integrity="sha384-PsH8R72JQ3SOdhVi3uxftmaW6Vc51MKb0q5P2rRUpPvrszuE4W1povHYgTpBfshb" crossorigin="anonymous">
<link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet" integrity="sha384-wvfXpqpZZVQGK6TAh5PVlGOfQNHSoD2xbE+QkPxCAFlNEevoEH3Sl0sibVcOQVnN" crossorigin="anonymous">
<!-- CSS file -->
<link rel="stylesheet" type="text/css" href="./assets/css/style.css" />
</head>
<body class="bg-success">
<!--navbar-->
<nav class="navbar navbar-expand-lg navbar-light bg-light fixed-top">
<a class="navbar-brand" href="https://rnorton12.github.io/modern-voyeur-project/">
<i class="fa fa-globe" aria-hidden="true"></i> Modern Voyeur</a>
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarSupportedContent" aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse justify-content-end" id="navbarSupportedContent">
<ul class="navbar-nav mr-auto">
<li class="nav-item dropdown active">
<a class="nav-link dropdown-toggle" href="#" id="navbarDropdown" role="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
<i class="fa fa-video-camera" aria-hidden="true"></i> Country Options</a>
<div class="dropdown-menu" aria-labelledby="navbarDropdown">
<a id="list" class="dropdown-item" href="#"></a>
</div>
</li>
</ul>
<!--favorites menu-->
<div class="dropdown">
<button class="btn btn-outline-info dropdown-toggle" type="button" id="dropdownRecommended" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
Recommendations
</button>
<div class="dropdown-menu" aria-labelledby="dropdownMenuButton">
<option>Holiday</option>
<a id="1297607015" class="dropdown-item recommended" href="#">Romania-Mioveni</a>
<a id="1510071656" class="dropdown-item recommended" href="#">Slovenia-Kranjska Gora</a>
<div class="dropdown-divider"></div>
<option>Day View</option>
<a id="1477310006" class="dropdown-item recommended" href="#">Dominican Republic-Villa Taina</a>
<a id="1508543668" class="dropdown-item recommended" href="#">New Caledonia-Plage De I'anse vata</a>
<a id="1252749312" class="dropdown-item recommended" href="#">Turkey-Konya</a>
<div class="dropdown-divider"></div>
<option>Night View</option>
<a id="1501205040" class="dropdown-item recommended" href="#">Costa Rica-Palmares</a>
<a id="1169741426" class="dropdown-item recommended" href="#">Malta-St.Julians</a>
<a id="1352947970" class="dropdown-item recommended" href="#">Russia-Baykal'sk</a>
</div>
<button id="instructions" type="button" class="btn btn-success" data-toggle="popover" data-placement="bottom" title="Instructions" data-content="Welcome to Modern Voyeur! Our website provides users with the ability to view livestreaming webcams throughout the world,
anytime, anywhere. The Replay button allows for viewing of the past 24 hours, 30 days, 12 months, and lifetime.
The Live button allows you to view your desired location in real time. If creeping on strangers in foreign
lands is what you like to do, we are here for you!">Instructions</button>
</div>
</div>
</nav>
<!--end of navbar-->
<div class="wrapper">
<div class="container-fluid text-center">
<!-- page heading goes here -->
<div class="row my-5">
<div class="col-md-12 text-center">
<span id="heading"></span>
</div>
</div>
<!-- page load progress goes here -->
<div class="row">
<div class="col-md-2 text-center">
</div>
<div class="col-md-8 text-left">
<span id="progress"></span>
</div>
<div class="col-md-2 text-center">
</div>
</div>
<!-- video title goes here -->
<div class="row mb-1">
<div class="col-md-12 text-center">
<div id="video-title"></div>
</div>
</div>
<!-- embedded video goes here -->
<div class="row mb-1">
<div class="col-md-12 text-center">
<div class="mx-auto d-block" id="embedded-video"></div>
</div>
</div>
<!-- video city and country goes here -->
<div class="row mb-4">
<div class="col-md-12 text-center">
<div id="video-city-country"></div>
</div>
</div>
<!-- table summary and details goes here -->
<div class="row my-5">
<div class="col-md-12">
<div id="table-summary">
</div>
<br>
<div id="table-details">
</div>
</div>
</div>
<!-- "back" and "next" button go here -->
<div class="row my-5">
<div class="col-md-12 text-center">
<button class="btn btn-info back" id="back-button" type="button" style="display: none;">
<i class="fa fa-arrow-circle-o-left" aria-hidden="true"></i>
Back</button>
<button class="btn btn-info next" id="next-button" type="button" style="display: none;">
Next
<i class="fa fa-arrow-circle-o-right" aria-hidden="true"></i>
</button>
</div>
</div>
<!-- the page footer goes here -->
<div class="row">
<div id="footer" class="col-md-12 footer bg-muted text-center text-muted fixed-bottom">
<span>© 2017: Kelly | Roy | David | Ernesto</span>
</div>
</div>
</div>
</div>
<!-- javascripts go here -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.3/umd/popper.min.js" integrity="sha384-vFJXuSJphROIrBnz7yo7oB41mKfc8JzQZiCq4NCceLEaO4IHwicKwpJf9c9IpFgh" crossorigin="anonymous"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta.2/js/bootstrap.min.js" integrity="sha384-alpBpkh1PFOepccYVYDB4do5UnbKysX5WZXm3XxPqe5iKTfUKjNkCk9SaVuEZflJ" crossorigin="anonymous"></script>
<script async defer src="https://maps.googleapis.com/maps/api/js?key=AIzaSyD1sbW_gnhRRv0w750EZ070APTX7Rv6NME"></script>
<!-- JS file -->
<script src="./assets/javascript/apps.js"></script>
</body>
</html>