diff --git a/www/index.html b/www/index.html index 59da2d7..291b14d 100644 --- a/www/index.html +++ b/www/index.html @@ -6,6 +6,7 @@ + -
-
+
+
+
+
- diff --git a/www/res/js/locutus.js b/www/res/js/locutus.js index b10a7f5..ec3168c 100644 --- a/www/res/js/locutus.js +++ b/www/res/js/locutus.js @@ -9,7 +9,7 @@ function createWelcomeWindow() { win.innerHTML = `

Welcome to Locutus!

- Login`; + Login`; while (windows.lastChild) windows.removeChild(windows.lastChild); windows.appendChild(win); @@ -22,11 +22,22 @@ function createLoginWindow() { win.innerHTML = `

Login to USIMP Account

- - - + + + +
`; + win.getElementsByTagName('form')[0].addEventListener("submit", function (evt) { + evt.preventDefault(); + let form = evt.target; + usimp.lookup(form.domain.value) + .then(res => res.json() + .then(data => console.log(data)) + .catch(reason => console.error(reason))) + .catch(reason => console.error(reason)); + }); + while (windows.lastChild) windows.removeChild(windows.lastChild); windows.appendChild(win); } @@ -53,7 +64,7 @@ function handleUrl(url) { handleHash(new URL(url).hash); } -window.addEventListener("load", function () { +window.addEventListener("DOMContentLoaded", function () { main = document.getElementsByTagName("main")[0]; windows = document.getElementById("windows"); diff --git a/www/res/js/usimp.js b/www/res/js/usimp.js new file mode 100644 index 0000000..079c6ef --- /dev/null +++ b/www/res/js/usimp.js @@ -0,0 +1,9 @@ +"use strict"; + +let usimp = {}; + +usimp.lookup = function (domain_name) { + return fetch(`https://${domain_name}/.well-known/usimp.json`, { + redirect: "manual", + }); +} diff --git a/www/res/styles/styles.css b/www/res/styles/styles.css index 1f3a1d6..e0ba82d 100644 --- a/www/res/styles/styles.css +++ b/www/res/styles/styles.css @@ -4,6 +4,7 @@ --bg-win: rgba(192, 192, 192, 0.25); --bg: rgba(224, 224, 224, 0.5); --fg-soft: rgba(32, 32, 32, 0.5); + --footer-height: 2em; } noscript { @@ -31,6 +32,18 @@ main { margin: 0 auto; } +div#wrapper { + box-sizing: border-box; + width: 100%; + height: calc(100vh - var(--footer-height)); +} + +@media screen and (max-width: 600px) { + div#wrapper { + height: 100vh; + } +} + h1, h2, h3, h4, h5, h6 { color: #000000; font-weight: normal; @@ -64,35 +77,15 @@ div#welcome-win { div#login-win h1, div#welcome-win h1 { text-align: center; -} - -div#welcome-win a { - text-decoration: none; - background-color: var(--bg); - border: 1px solid var(--bg); - padding: 0.5em 1em; - margin: 1em auto; - border-radius: 4px; - display: block; - width: 50px; - text-align: center; - color: #000000; -} - -div#welcome-win a:hover { - + font-size: 1.5rem; } footer { - position: fixed; - bottom: 0; - left: 0; width: 100%; border-top: 1px solid var(--bg-win); background: var(--bg-win); - height: 2em; + height: var(--footer-height); backdrop-filter: blur(32px); - margin-top: 1em; display: flex; justify-content: center; align-items: center; @@ -102,7 +95,9 @@ footer { @media screen and (max-width: 600px) { footer { flex-direction: column; - height: 4em; + } + * { + --footer-height: 4em; } } @@ -116,24 +111,57 @@ footer div { form { max-width: 400px; - margin: 2em auto; + margin: 1.5em auto; } -form input { +form input, +form button, +a.button { background-color: var(--bg); border: 1px solid var(--bg); border-radius: 4px; outline: none; padding: 0.5em 1em; display: block; - width: 100%; box-sizing: border-box; - margin: 1em 0; + margin: 1em auto; font-size: 1em; color: #000000; + transition: border-color 0.125s, background-color 0.125s; +} + +a.button { + text-decoration: none; + text-align: center; + display: block; + width: 100px; +} + +form input, +form button { + width: 100%; +} + +form button, +a.button { + cursor: pointer; } form input::placeholder { color: var(--fg-soft); opacity: 1; } + +form input:focus, +form input:hover, +form button:focus, +form button:hover, +a.button:focus, +a.button:hover { + border-color: rgba(255, 255, 255, 0.75); +} + +form button:active, +a.button:active { + background-color: rgba(224, 224, 224, 0.75); +}