Early prototype
This commit is contained in:
1
.gitignore
vendored
Normal file
1
.gitignore
vendored
Normal file
@ -0,0 +1 @@
|
||||
.idea/
|
||||
@ -1,30 +1,31 @@
|
||||
<!DOCTYPE html>
|
||||
<html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<title>Locutus</title>
|
||||
<meta charset="UTF-8"/>
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0"/>
|
||||
<link rel="stylesheet" href="/res/styles/styles.css" type="text/css"/>
|
||||
<script src="/res/js/locutus.js" type="text/javascript"></script>
|
||||
<style type="text/css">
|
||||
html {
|
||||
height: 100%;
|
||||
text-family: 'Arial', sans-serif;
|
||||
}
|
||||
body {
|
||||
height: 100%;
|
||||
margin: 0;
|
||||
}
|
||||
noscript {
|
||||
text-align: center;
|
||||
}
|
||||
</style>
|
||||
<meta http-equiv="Content-Security-Policy" content="
|
||||
default-src 'none';
|
||||
style-src 'self';
|
||||
script-src 'self';
|
||||
img-src * blob: data:;
|
||||
connect-src *;
|
||||
media-src * blob: data:;">
|
||||
</head>
|
||||
<body>
|
||||
<noscript>
|
||||
Your browser either does not support JavaScript or has disabled script execution.<br/>
|
||||
Locutus needs JavaScript to be enabled.
|
||||
</noscript>
|
||||
<main id="locutus">
|
||||
<main>
|
||||
</main>
|
||||
<div id="windows">
|
||||
<noscript>
|
||||
Your browser either does not support JavaScript or has disabled script execution.<br/>
|
||||
Locutus needs JavaScript to be enabled to function correctly.
|
||||
</noscript>
|
||||
</div>
|
||||
<footer>
|
||||
<div>Locutus USIMP web client</div>
|
||||
<div>Copyright © 2021 Thomas Hilscher, Lorenz Stechauner</div>
|
||||
</footer>
|
||||
</body>
|
||||
</html>
|
||||
|
||||
BIN
www/res/images/background.jpg
Normal file
BIN
www/res/images/background.jpg
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 1.6 MiB |
@ -1 +1,65 @@
|
||||
|
||||
"use strict";
|
||||
|
||||
let main, windows;
|
||||
|
||||
function createWelcomeWindow() {
|
||||
let win = document.createElement("div");
|
||||
win.id = "welcome-win";
|
||||
|
||||
win.innerHTML = `
|
||||
<h1>Welcome to Locutus!</h1>
|
||||
<a href="#/login">Login</a>`;
|
||||
|
||||
while (windows.lastChild) windows.removeChild(windows.lastChild);
|
||||
windows.appendChild(win);
|
||||
}
|
||||
|
||||
function createLoginWindow() {
|
||||
let win = document.createElement("div");
|
||||
win.id = "login-win";
|
||||
|
||||
win.innerHTML = `
|
||||
<h1>Login to USIMP Account</h1>
|
||||
<form>
|
||||
<input name="account" placeholder="Account name" type="text"/>
|
||||
<input name="domain" placeholder="Domain" type="text"/>
|
||||
<input name="password" placeholder="Password" type="password"/>
|
||||
</form>`;
|
||||
|
||||
while (windows.lastChild) windows.removeChild(windows.lastChild);
|
||||
windows.appendChild(win);
|
||||
}
|
||||
|
||||
function handleHash(hash) {
|
||||
if (hash[0] === '#') hash = hash.substr(1);
|
||||
if (hash === '') hash = '/welcome';
|
||||
switch (hash) {
|
||||
case "/welcome": createWelcomeWindow(); break;
|
||||
case "/login": createLoginWindow(); break;
|
||||
default:
|
||||
console.error(`Invalid url hash "${hash}"`);
|
||||
hash = "/welcome";
|
||||
break;
|
||||
}
|
||||
let url = new URL(document.URL);
|
||||
url.hash = hash;
|
||||
location.href = url.toString();
|
||||
}
|
||||
|
||||
function handleUrl(url) {
|
||||
handleHash(new URL(url).hash)
|
||||
}
|
||||
|
||||
window.addEventListener("load", function () {
|
||||
main = document.getElementsByTagName("main")[0];
|
||||
windows = document.getElementById("windows");
|
||||
|
||||
// Remove <noscript> tag
|
||||
document.getElementsByTagName("noscript")[0].remove();
|
||||
|
||||
handleUrl(document.URL)
|
||||
});
|
||||
|
||||
window.addEventListener("hashchange", function (evt) {
|
||||
handleUrl(evt.newURL);
|
||||
});
|
||||
|
||||
@ -1 +1,137 @@
|
||||
|
||||
|
||||
* {
|
||||
font-family: 'Arial', sans-serif;
|
||||
--win-bg: rgba(64, 64, 64, 0.25);
|
||||
}
|
||||
|
||||
noscript {
|
||||
display: block;
|
||||
text-align: center;
|
||||
margin: 20vh auto 1em auto;
|
||||
max-width: 650px;
|
||||
padding: 2em !important;
|
||||
}
|
||||
|
||||
body {
|
||||
margin: 0;
|
||||
min-height: 100vh;
|
||||
background-image: url("/res/images/background.jpg");
|
||||
background-repeat: no-repeat;
|
||||
background-position: center;
|
||||
background-size: cover;
|
||||
}
|
||||
|
||||
main {
|
||||
max-width: 800px;
|
||||
height: calc(100% - 2em);
|
||||
padding: 1em;
|
||||
box-sizing: border-box;
|
||||
margin: 0 auto;
|
||||
}
|
||||
|
||||
h1, h2, h3, h4, h5, h6 {
|
||||
color: #202020;
|
||||
font-weight: normal;
|
||||
}
|
||||
|
||||
div#windows {
|
||||
position: fixed;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
box-sizing: border-box;
|
||||
padding: 1em;
|
||||
top: 0;
|
||||
left: 0;
|
||||
}
|
||||
|
||||
div#windows > * {
|
||||
backdrop-filter: blur(32px);
|
||||
border: 1px solid var(--win-bg);
|
||||
background: var(--win-bg);
|
||||
border-radius: 4px;
|
||||
padding: 0.5em 1em;
|
||||
box-sizing: border-box;
|
||||
}
|
||||
|
||||
div#login-win,
|
||||
div#welcome-win {
|
||||
max-width: 650px;
|
||||
margin: 20vh auto 1em auto;
|
||||
}
|
||||
|
||||
div#login-win h1,
|
||||
div#welcome-win h1 {
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
div#welcome-win a {
|
||||
text-decoration: none;
|
||||
background-color: var(--win-bg);
|
||||
border: 1px solid var(--win-bg);
|
||||
padding: 0.5em 1em;
|
||||
margin: 1em auto;
|
||||
border-radius: 4px;
|
||||
display: block;
|
||||
width: 50px;
|
||||
text-align: center;
|
||||
color: #202020;
|
||||
}
|
||||
|
||||
div#welcome-win a:hover {
|
||||
|
||||
}
|
||||
|
||||
footer {
|
||||
position: fixed;
|
||||
bottom: 0;
|
||||
left: 0;
|
||||
width: 100%;
|
||||
border-top: 1px solid var(--win-bg);
|
||||
background: var(--win-bg);
|
||||
height: 2em;
|
||||
backdrop-filter: blur(32px);
|
||||
margin-top: 1em;
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
box-sizing: border-box;
|
||||
}
|
||||
|
||||
@media screen and (max-width: 600px) {
|
||||
footer {
|
||||
flex-direction: column;
|
||||
height: 4em;
|
||||
}
|
||||
}
|
||||
|
||||
footer div {
|
||||
font-size: 0.75em;
|
||||
display: inline;
|
||||
color: #202020;
|
||||
margin: 0.5em 1em;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
form {
|
||||
max-width: 400px;
|
||||
margin: 2em auto;
|
||||
}
|
||||
|
||||
form input {
|
||||
background-color: var(--win-bg);
|
||||
border: 1px solid var(--win-bg);
|
||||
border-radius: 4px;
|
||||
outline: none;
|
||||
padding: 0.5em 1em;
|
||||
display: block;
|
||||
width: 100%;
|
||||
box-sizing: border-box;
|
||||
margin: 1em 0;
|
||||
font-size: 1em;
|
||||
color: #202020;
|
||||
}
|
||||
|
||||
form input::placeholder {
|
||||
color: #404040;
|
||||
opacity: 1;
|
||||
}
|
||||
|
||||
Reference in New Issue
Block a user