forked from JakobJFL/Hue-Browser-Controller
-
Notifications
You must be signed in to change notification settings - Fork 0
/
Copy pathindex.html
151 lines (147 loc) · 9.38 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
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" type="text/css" href="bootstrap-5.0.0-dist/css/bootstrap.css">
<link rel="stylesheet" type="text/css" href="css/loginStyle.css">
<link rel="stylesheet" type="text/css" href="css/mainStyle.css">
<link rel="stylesheet" type="text/css" href="css/toggleSwitch.css">
<link rel="stylesheet" type="text/css" href="css/slider.css">
<link rel="stylesheet" type="text/css" href="css/selectors.css">
<link rel="apple-touch-icon" sizes="180x180" href="favicon/apple-touch-icon.png">
<link rel="icon" type="image/png" sizes="32x32" href="favicon/favicon-32x32.png">
<link rel="icon" type="image/png" sizes="16x16" href="favicon/favicon-16x16.png">
<link rel="manifest" href="favicon/site.webmanifest">
<meta name="theme-color" content="#5753b9">
<meta property="og:image" content="https://raw.githubusercontent.com/JakobJFL/Hue-Browser-Controller/main/img/ogImage.jpg" />
<meta name="description" content="Control all your Philips Hue lighting from a website or download The Open Hue Controller for your computer.">
<title>Open Hue Controller</title>
</head>
<body>
<!-- Cookie Consent by FreePrivacyPolicy.com https://www.FreePrivacyPolicy.com -->
<script type="text/javascript" src="//www.freeprivacypolicy.com/public/cookie-consent/4.1.0/cookie-consent.js" charset="UTF-8"></script>
<script type="text/javascript" charset="UTF-8">
document.addEventListener('DOMContentLoaded', function () {
cookieconsent.run({"notice_banner_type":"simple","consent_type":"express","palette":"light","language":"en","page_load_consent_levels":["strictly-necessary"],"notice_banner_reject_button_hide":false,"preferences_center_close_button_hide":false,"page_refresh_confirmation_buttons":false,"website_name":"Open Hue Controller"});
});
</script>
<!-- Google Analytics -->
<!-- Google tag (gtag.js) -->
<script type="text/plain" data-cookie-consent="tracking" async src="https://www.googletagmanager.com/gtag/js?id=G-JKBQ4EE7BV"></script>
<script type="text/plain" data-cookie-consent="tracking">
window.dataLayer = window.dataLayer || [];
function gtag(){dataLayer.push(arguments);}
gtag('js', new Date());
gtag('config', 'G-JKBQ4EE7BV');
</script>
<!-- end of Google Analytics-->
<!-- Below is the link that users can use to open Preferences Center to change their preferences. Do not modify the ID parameter. Place it where appropriate, style it as needed. -->
<main id="mainSite">
<div id="overlay">
<h2 class="text-center text-white pt-4">Checking local storage for login...</h2>
</div>
<a href="download.html" type="button" id="downloadBtn" class="btn float-end shadow py-2 px-4">Download</a>
<div class="container py-4">
<div class="login-container">
<div class="row">
<div class="col-md-6">
<img src="img/Light Hue Backgrund.jpg" id="loginImg">
</div>
<div class="col-md-6 right-side text-center p-4">
<h1 class="display-5 ">Open Hue Controller</h1>
<p class="fs-6">The website <strong class="text-danger">requires</strong> that "insecure content" is allowed</p>
<button type="button" class="btn btn-outline-secondary btn-sm btn-round mt-0 mb-3" data-bs-toggle="modal" data-bs-target="#InsecureContentModal">Open guide</button>
<h3 class="fs-4">Choose connection option:</h3>
<div class="text-center">
<button type="button" class="btn btn-primary btn-round" data-bs-toggle="collapse" data-bs-target="#newConnection">Create a new connection</button>
<button type="button" class="btn btn-outline-primary btn-round" data-bs-toggle="collapse" data-bs-target="#existingConnection">Use existing connection</button>
</div>
<div id="connectionType">
<div class="collapse show" id="placeholder" data-bs-parent="#connectionType">
<p class="text-center mt-3 mb-0 fs-4">The Online Controller</p>
<p class="text-center fs-5">Here you can control all your Philips Hue lighting. No installs, and everything is running locally in your browser.</p>
<p class="text-center mb-5">Connect to the Philips Hue bridge by using an existing API connection, or create a new one with the website's auto-connect feature. </p>
</div>
<div class="collapse accordion-collapse" id="existingConnection" data-bs-parent="#connectionType">
<br>
<form id="loginFrom" class="center-form w-75" action="javascript:void(0);">
<div class="mb-3">
<label for="ipAddress" class="form-label">IP Address</label>
<input type="text" class="form-control form-input" id="ipAddress" placeholder="123.123.12.12" required>
</div>
<div class="mb-3">
<label for="accessToken" class="form-label">Access token</label>
<input type="text" class="form-control form-input" id="accessToken" placeholder="123456789abcdefghijklmnopqrstuvwxyz12345678" required>
</div>
<div class="col-auto">
<button type="submit" class="btn btn-primary mb-3 w-100 form-input" id="submitBtn">Connect</button>
</div>
</form>
<p class="errText pb-4" id="errFromBox"></p>
</div>
<div class="collapse accordion-collapse" id="newConnection" data-bs-parent="#connectionType">
<br>
<div id="autoConnect">
<p class="text-center">Looking for a bridge on your network...</p>
<img id="loadingImg" src="svg/loading.svg">
</div>
<div class="mb-3 pb-4 d-flex flex-column">
<label for="manuallyIp" class="form-label align-self-center">Manually enter IP:</label>
<div class="input-group input-manually-group mb-3 align-self-center">
<input type="text" id="manuallyIp" class="form-control form-input" placeholder="123.123.12.12" >
<button class="btn btn-outline-secondary form-input" id="manuallyIpBtn" type="button">Use this IP</button>
</div>
<p class="errText pb-4" id="errAutoBox"></p>
</div>
</div>
</div>
<footer class="text-muted bottom-text-left">
<p class="text-center ">© <script type="text/javascript">document.write(new Date().getFullYear());</script> Jakob Frederik Lykke <a href="https://github.com/JakobJFL" target="_blank">Github</a> - <a href="https://www.youtube.com/channel/UCf3cp8GGxbCJ8IZfGBmbljw" target="_blank">YouTube</a></p>
</footer>
</div>
</div>
</div>
</div>
</main>
<a href="#" class="btn btn-secondary cookie-btn" id="open_preferences_center">Update Cookies</a>
<div class="modal fade" id="InsecureContentModal" tabindex="-1" aria-hidden="true">
<div class="modal-dialog modal-lg">
<div class="modal-content rounded-15">
<div class="modal-body">
<h2 class="pt-4">Allow insecure content</h2>
<h3 class="pt-4">Step 1</h3>
<p>Click on the lock or "Not secure" next to the URL bar. Then click on "Site settings":</p>
<img src="img/InsecureContent1.jpg" alt="" width="100%">
<h3 class="pt-4">Step 2</h3>
<p>Scroll down to find "insecure content" and press allow on the dropdown:</p>
<img src="img/InsecureContent2.jpg" alt="" width="100%">
<h3 class="pt-4">Step 3</h3>
<p>Come back to this website and press done.</p>
<h4 class="pt-4">Why do i have to do this?</h4>
<p>This website uses a secure(HTTPS) connection and it's talking to a local Philips Hue Bridge over a non-secure connection(HTTP).
This is the only way to communicate with a Philips Hue Bridge.
It's by Philips design and there are no problems with this because everything runs locally and cannot be accessed outside this network.
Google Chrome and other browsers are unfortunately not very happy fetching something from a non-secure connection to this website's secure connection.
Therefore you have to tell the browser that it's okay, in this case, to fetch insecure content.
The "Not secure" text at the URL bar is also because of this.
This is all running locally, <strong>so none of this affects the security of any device on your network</strong>, if you were ever in doubt.
Everything runs on the client side and <strong> nothing is being tracked or stored outside your own network.</strong></p>
<div class="modal-footer">
<button type="button" class="btn btn-primary rounded-10" onclick="window.location.reload();">Done</button>
</div>
</div>
</div>
</div>
<script src="bootstrap-5.0.0-dist/js/bootstrap.js"></script>
<script src="js/qrcode.min.js"></script>
<script src="js/api.js"></script>
<script src="js/actions.js"></script>
<script src="libraries/rgb-color-converter/ColorConverter.js"></script>
<script src="js/dashboardSite.js"></script>
<script src="js/mainScript.js"></script>
<script src="js/login.js"></script>
<script src="js/reactOnInput.js"></script>
</body>
</html>