diff --git a/script.js b/script.js
new file mode 100644
index 0000000..31ee9ea
--- /dev/null
+++ b/script.js
@@ -0,0 +1,84 @@
+ const openSettingScreenButton = document.querySelector("#open-setting-screen-button");
+ const closeSettingScreenButton = document.querySelector("#close-setting-screen-button");
+ const saveSettingsButton = document.querySelector("#save-settings-button");
+
+ const delayUnlockButton = document.querySelector("#delay-unlock-button");
+ const unlockButton = document.querySelector("#unlock-button");
+
+ const settingScreen = document.querySelector(".setting-screen");
+ const mainScreen = document.querySelector(".main-screen");
+
+ const messageContainer = document.querySelector("#message-container");
+
+ const deviceIDInput = document.querySelector("#device-id");
+ const delayInput = document.querySelector("#delay-time");
+ const apiKeyInput = document.querySelector("#api-key");
+
+ const showDelay = document.querySelector("#show-delay");
+ let deviceID = "";
+ let delay = "";
+ let apiKey = "";
+ const unlockUrl = "https://ths.tnet.space/cgi-bin/unlock-main.cgi";
+
+// make fetch function that calls cgi script with attributes (device id, api key, delay)
+ const unlockDoor = (e, dID, aK, d) => {
+ fetch(`${unlockUrl}?deviceID=${dID}&apiKey=${aK}&delay=${d}`)
+// fetch(unlockUrl)
+ .then(response => response.text())
+ .then(data => messageContainer.innerHTML = data);
+ }
+
+ const setSettings = () => {
+ if (localStorage.getItem("apiKey") && localStorage.getItem("deviceID")) {
+ apiKey = localStorage.getItem("apiKey");
+ deviceID = localStorage.getItem("deviceID");
+ if (localStorage.getItem("delay")) {
+ delay = localStorage.getItem("delay");
+ } else {
+ delay = 0;
+ }
+ apiKeyInput.value = apiKey;
+ deviceIDInput.value = deviceID;
+ delayInput.value = delay;
+ showDelay.innerHTML = `${delay}s`;
+ } else {
+ gotoSettingScreen();
+ }
+ }
+
+ const gotoSettingScreen = () => {
+ openSettingScreenButton.style.display = "none";
+ closeSettingScreenButton.style.display = "block";
+ settingScreen.style.left = "0";
+ mainScreen.style.left = "-100%";
+ }
+
+ const gotoMainScreen = () => {
+ closeSettingScreenButton.style.display = "none";
+ openSettingScreenButton.style.display = "block";
+ mainScreen.style.left = "0";
+ settingScreen.style.left = "100%";
+ }
+
+ openSettingScreenButton.addEventListener("click", gotoSettingScreen);
+
+ closeSettingScreenButton.addEventListener("click", gotoMainScreen);
+
+// Save settings button
+ saveSettingsButton.addEventListener("click", function() {
+ localStorage.setItem("deviceID", deviceIDInput.value);
+ localStorage.setItem("delay", delayInput.value);
+ localStorage.setItem("apiKey", apiKeyInput.value);
+ setSettings();
+ gotoMainScreen();
+ });
+
+ unlockButton.addEventListener("click", (e) => unlockDoor(e, deviceID, apiKey, 0));
+
+ delayUnlockButton.addEventListener("click", function () {
+ messageContainer.innerHTML = "Delay Unlock";
+ });
+
+ document.body.onload = setSettings;
+ let date = new Date();
+ messageContainer.innerHTML = date.toLocaleDateString();
diff --git a/style.css b/style.css
new file mode 100644
index 0000000..5014056
--- /dev/null
+++ b/style.css
@@ -0,0 +1,205 @@
+ * {
+ font-family: "sans";
+ box-sizing: border-box;
+ }
+
+ html {
+ position: relative;
+ height: 100%
+ }
+
+ body {
+ height: 100%;
+ padding: 0;
+ margin: 0;
+ background: #333;
+ color: white;
+ }
+
+ .app-bar {
+ background-color: #FF8800;
+ }
+
+ nav {
+ height: 56px;
+ margin: 0;
+ padding: 16px;
+ }
+
+ .app-bar h1 {
+ text-align: center;
+ font-family: sans;
+ font-size: 45px;
+ height: 72;
+ paddng: 0;
+ margin: 0;
+ }
+
+ .app-bar button {
+ position: fixed;
+ font-size: 20px;
+ height: 24px;
+ right: 16px;
+ background-color: #FF8800;
+ border: none;
+ }
+ #open-setting-screen-button {
+ display: block;
+ }
+
+ #close-setting-screen-button {
+ display: none;
+ }
+
+ .screen-container {
+ position: fixed;
+ width: 100%;
+ height: calc(100vh - 56px);
+ padding: 0;
+ margin: 0;
+ }
+
+ .main-screen {
+ left: 0;
+ transition: all, .3s;
+/* border: 1px solid yellow; */
+ }
+
+ .setting-screen {
+ left: 100%;
+ transition: all, .3s;
+/* border: 1px solid blue; */
+
+ }
+
+/* .settings-form h1 { */
+/* text-align: center; */
+ }
+
+ .settings-form ul {
+ position: relative;
+ max-width: 300px;
+ height: 300px;
+ list-style: none;
+/* border: 1px solid #000; */
+ border-radius: 5px;
+ padding: 0px;
+ margin-left: auto;
+ margin-right: auto;
+ }
+
+ .settings-form li {
+ display: flex;
+ padding: 0;
+ padding-top: 20px;
+ margin: 0;
+ justify-content: center;
+ }
+
+ .settings-form label {
+ margin-top: auto;
+ margin-bottom: auto;
+ width: 100px;
+ }
+
+ .settings-form input {
+ font-size: 1em;
+ width: 200px;
+ border: 1px solid #7FBD32;
+ border-radius: 2em;
+ background-color: #EEE;
+ padding: .5em;
+ }
+
+ .settings-form button {
+ width: 100px;
+ padding: .5em;
+ margin-left: auto;
+ margin-right: auto;
+ margin-top: 20px;
+/* border: 2px solid green; */
+ font-size: 1.2em;
+ color: white;
+ border-radius: 3em;
+/* background: #FF8800; */
+ background-color: #555;
+ border: 4px #7FBD32 solid;
+/* color: white; */
+ }
+
+ .settings-form button:active {
+ background-color: green;
+ width: 96px;
+ }
+
+ h1 {
+ text-align: center;
+ font-family: sans;
+ font-size: 24px;
+ background-color: #FF8800;
+ paddng: 0;
+ margin: 0;
+ }
+
+ #message-container {
+ border: 3px solid blue;
+ position: absolute;
+ text-align: center;
+ width: 100vw;
+ bottom: 50vh;
+ font-size: 2em;
+/* border-radius: 56px; */
+/* height: 300px; */
+/* width: 300px; */
+/* margin-left: auto; */
+/* margin-right: auto; */
+ }
+
+ #button-block {
+ position: absolute;
+ width: 100vw;
+ bottom: 0px;
+ }
+
+ .button-container {
+ position: relative;
+ display: block;
+ width: 300px;
+ height: 56px;
+ border-radius: 56px;
+ margin: 32px auto 32px auto;
+ text-align: center;
+ background-color: #555;
+ border: 4px #7FBD32 solid;
+ }
+
+ .button-container:active {
+ background-color: green;
+ width: 290px;
+ }
+
+/* #unlock-button:active { */
+/* background-color: green; */
+/* } */
+
+ .button-icon {
+ width: auto;
+ height: 40px;
+ position: absolute;
+ display: block;
+/* margin-right: 10px; */
+/* margin-left: auto; */
+/* margin-top: 3px; */
+/* margin-bottom: auto; */
+ padding: 2px;
+ left: 6px;
+ bottom: 4px;
+ border: 1px solid white;
+ border-radius: 2em;
+ background-color: white;
+ }
+
+ .app-bar button img {
+ height: 24px;
+ width: auto;
+ }
diff --git a/trigger.html b/trigger.html
index eb497a7..0cf686a 100644
--- a/trigger.html
+++ b/trigger.html
@@ -7,6 +7,8 @@
Door Control
+