/
index.html
134 lines (125 loc) · 6.46 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
<!DOCTYPE html>
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<title>Color Spectron-o-meter</title>
<meta name="description" content="">
<meta name="viewport" content="width=device-width, initial-scale=1">
<!-- Reset CSS -->
<link rel="stylesheet" href="assets/css/reset.css">
<!-- Bootstrap Link -->
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha2/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-aFq/bzH65dt+w6FI2ooMVUpc+21e0SRygnTpmBvdBgSdnuTN7QbdgL+OapgHtvPp" crossorigin="anonymous">
<!-- Group CSS -->
<link rel="stylesheet" href="assets/css/style.css">
</head>
<body>
<input id="pac-input" class="controls" type="text" placeholder="Search Box">
<div id="results"></div>
<div id="colorbuttonsdiv">
<button id="onoffbutton">On/Off</button>
<button id="redbutton">Red</button>
<button id="greenbutton">Green</button>
<button id="bluebutton">Blue</button>
<button id="purplebutton">Purple</button>
<button id="yellowbutton">Yellow</button>
</div>
<div id="map"></div>
<!-- end of wacked in buttons-->
<div class="container ">
<div class="modal fade" id="token-input-modal" tabindex="-1" role="dialog" aria-labelledby="token-input-modal"
aria-hidden="true">
<div class="modal-dialog modal-dialog-centered" role="document">
<div class="modal-content">
<div class="modal-header">
<h5 class="modal-title" id="token-input-title">Enter your LiFX token</h5>
<button type="button" class="close" data-dismiss="modal" aria-label="Close">
<span aria-hidden="true">×</span>
</button>
</div>
<form action="">
<div class="modal-body">
<label for="token-input">Enter your lifx token: </label>
<input type="text" class="form-control" name="token-input" id="token-input">
</div>
<div class="modal-footer">
<button type="submit" name="submit" id="set-token" class="btn btn-primary">Save</button>
</div>
</form>
</div>
</div>
</div>
<div class="modal fade" id="bulb-input-modal" tabindex="-1" role="dialog" aria-labelledby="token-input-modal"
aria-hidden="true">
<div class="modal-dialog modal-dialog-centered" role="document">
<div class="modal-content">
<div class="modal-header">
<h5 class="modal-title" id="bulb-input-title">Choose your LiFX bulb</h5>
<button type="button" class="close" data-dismiss="modal" aria-label="Close">
<span aria-hidden="true">×</span>
</button>
</div>
<form action="">
<div class="modal-body">
<label for="bulb-id">Bulb ID: </label>
<select name="bulb-id" id="bulb-id" class="form-control"></select>
</div>
<div class="modal-footer">
<button type="submit" name="submit" id="set-bulb" class="btn btn-primary">Save</button>
</div>
</form>
</div>
</div>
</div>
</div>
<!-- Include your JavaScript files -->
<!-- <script type="module" src="firebaseInit.js"></script>
<script type="module" src="auth.js"></script>
<script type="module" src="database.js"></script>
<script type="module" src="lifxAPI.js"></script>
<script type="module" src="googleMaps.js"></script> -->
<!-- firebase links - gets rid of the console warning -->
<script src="https://www.gstatic.com/firebasejs/5.9.3/firebase-app.js"></script>
<script src="https://www.gstatic.com/firebasejs/5.9.3/firebase-auth.js"></script>
<script src="https://www.gstatic.com/firebasejs/5.9.3/firebase-database.js"></script>
<!-- jquery link -->
<script src="https://code.jquery.com/jquery-3.4.0.min.js"
integrity="sha256-BJeo0qm959uMBGb65z40ejJYGSgR7REI4+CW1fNKwOg=" crossorigin="anonymous"></script>
<!-- bootstrap scripts - needed for modal -->
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha2/dist/js/bootstrap.bundle.min.js" integrity="sha384-qKXV1j0HvMUeCBQ+QVp7JcfGl760yU08IQ+GpUo5hlbpg51QRiuqHAJz8+BrxE/N" crossorigin="anonymous"></script>
<!-- <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js"
integrity="sha384-UO2eT0CpHqdSJQ6hJty5KVphtPhzWj9WO1clHTMGa3JDZwrnQq4sF86dIHNDz0W1"
crossorigin="anonymous"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js"
integrity="sha384-JjSmVgyd0p3pXB1rRibZUAYoIIy6OrQ6VrjIEaFf/nJGzIxFDsf4x0xIM+B07jRM"
crossorigin="anonymous"></script> -->
<!-- google maps -->
<script
src="https://maps.googleapis.com/maps/api/js?key=AIzaSyBbZgOOIAHvVKdrZWfjGrHkbwqrCAzmqno&libraries=places&callback=initAutocomplete"
async defer></script>
<!-- js link -->
<script src="assets/javascript/configs.js"></script>
<script src="assets/javascript/script.js"></script>
<script>
$(function () {
$("#token-input-modal").modal({ show: false });
$("#bulb-input-modal").modal({ show: false });
$("#set-token").on("click", function (event) {
event.preventDefault();
var theToken = $("#token-input").val().trim();
console.log(theToken);
$("#token-input").val("");
if (theToken.length) {
SetToken(theToken);
}
});
$("#set-bulb").on("click", function (event) {
event.preventDefault();
var theBulb = $("#bulb-id").val().trim();
if (theBulb.length) {
SetBulb(theBulb);
}
});
});
</script>
</body>
</html>