mees/Undecked
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

Initial commit

Browse Source
This commit is contained in:
Mees van der Wijk
2023-08-29 19:55:48 +02:00
commit 7c2eec4446
473 changed files with 40947 additions and 0 deletions
Download Patch File Download Diff File Expand all files Collapse all files

41
Frontend/pages/layouts/main/index.handlebars Normal file
View File

@@ -0,0 +1,41 @@
<!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="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link
href="https://fonts.googleapis.com/css2?family=Montserrat:ital,wght@0,100;0,200;0,300;0,400;0,500;0,600;0,700;0,800;0,900;1,100;1,200;1,300;1,400;1,500;1,600;1,700;1,800;1,900&display=swap"
rel="stylesheet">
<link rel="stylesheet" href="/ld/main/style">
<script src="/ld/main/script"></script>
</head>
<body>
<div class="headercontainer">
<img src="/stc/logo/512.png">
<div class="title">
<div class="main">Undecked</div>
<a class="sub" target="_blank" href="http://morphix.productions">by Morphix</a>
</div>
</div>
<div class="bodycontainer">
{{{body}}}
</div>
<div class="feedback">
<div class="notificationcontainer">
<div class="notification">
Key has been saved to the clipboard.
</div>
</div>
</div>
</body>
</html>

8
Frontend/pages/layouts/main/sass/Anchors.scss Normal file
View File

@@ -0,0 +1,8 @@
a {
color: var(--main-color);
text-decoration: none;
&:hover {
color: var(--main-hover-color);
}
}

21
Frontend/pages/layouts/main/sass/Button.scss Normal file
View File

@@ -0,0 +1,21 @@
.button {
padding: 4px 15px;
background: var(--main-color);
border-radius: var(--border-radius);
text-decoration: none;
transition-duration: .2s;
cursor: pointer;
font-weight: 500;
&.secondary {
background: #565656;
&:hover {
background: #303030;
}
}
&:hover {
background: var(--main-hover-color);
}
}

38
Frontend/pages/layouts/main/sass/Feedback.scss Normal file
View File

@@ -0,0 +1,38 @@
.feedback {
position: absolute;
inset: 0px;
z-index: 2;
overflow: hidden;
pointer-events: none;
.notificationcontainer {
position: absolute;
bottom: -50px;
left: 20px;
right: 20px;
display: flex;
justify-content: center;
align-items: flex-end;
.notification {
padding: 10px 100px;
border-radius: var(--border-radius);
font-size: 14px;
font-weight: 600;
pointer-events: auto;
cursor: pointer;
&.info {
background: var(--main-hover-color);
box-shadow: 0px 0px 4px #243d5e;
}
&.error {
background: var(--color-red-hover);
box-shadow: 0px 0px 4px #431616;
}
}
}
}

37
Frontend/pages/layouts/main/sass/Input.scss Normal file
View File

@@ -0,0 +1,37 @@
input,
select,
textarea {
border: 2px solid var(--main-hover-color);
transition-duration: .2s;
border-radius: var(--border-radius);
padding: 5px 10px;
background: var(--background);
color: white;
font-family: 'Montserrat', sans-serif;
font-size: 12px;
&:hover {
border: 2px solid var(--main-color);
}
&:focus,
&:active {
border: 2px solid var(--main-color);
outline: none;
}
}
input[type="color"] {
overflow: hidden;
&::-webkit-color-swatch-wrapper {
padding: 0px;
width: calc(100% + 22px);
height: calc(100% + 12px);
margin-top: -6px;
margin-left: -11px;
outline: none;
border: none;
}
}

67
Frontend/pages/layouts/main/sass/Layout.scss Normal file
View File

@@ -0,0 +1,67 @@
:root {
--background: #323232;
--main-color: #4676b7;
--main-hover-color: #305383;
--main-secondary-color: #253e5e;
--border-radius: 10px;
--small-border-radius: 10px;
--panel-color: #222;
--subpanel-color: #2c2c2c;
--color-red: #af2a20;
--color-red-hover: #76201a;
--color-green: #195e19;
--color-green-hover: #124412;
}
body {
background: var(--background);
color: white;
padding: 0px;
margin: 0px;
font-family: 'Montserrat', sans-serif;
}
.headercontainer {
position: absolute;
top: 10px;
left: 10px;
right: 10px;
height: 40px;
display: flex;
justify-content: flex-start;
align-items: center;
img {
height: 100%;
}
.title {
display: flex;
flex-direction: column;
align-items: flex-start;
margin-left: 10px;
.main {
font-size: 24px;
font-weight: 300;
}
.sub {
font-size: 12px;
font-weight: 300;
color: lightgrey;
}
}
}
.bodycontainer {
position: absolute;
top: 60px;
bottom: 10px;
left: 10px;
right: 10px;
}

1
Frontend/pages/layouts/main/script.js Normal file
View File

@@ -0,0 +1 @@
function ce(e,n,t,i,o,s){var c=document.createElement(e);if(n&&("string"==typeof n?c.classList.add(n):(e=c.classList).add.apply(e,n)),t)for(var r in t)c.setAttribute(r,t[r]);if(i&&(c.innerText=i),o&&(c.innerHTML=o),s)for(var r in s)c.style[r]=s[r];return c}var notificationTimeout,UndeckedNotification,notificationOpen=!1;window.addEventListener("DOMContentLoaded",function(){var o={isOpen:!(UndeckedNotification=function(e,n,t){o.open(e,n=void 0===n?"info":n,t=void 0===t?2e3:t)}),timeout:null,transitionDuration:200,elements:{container:document.querySelector(".feedback").querySelector(".notificationcontainer"),box:document.querySelector(".feedback").querySelector(".notification")},open:function(e,n,t){void 0===n&&(n="info");function i(){o.elements.box.classList.remove("info","error"),o.elements.box.classList.add(n),o.elements.box.innerText=e,o.elements.container.style.transitionTimingFunction="ease-out",o.elements.container.style.transitionDuration="".concat(o.transitionDuration,"ms"),o.elements.container.style.bottom="50px",o.isOpen=!0,o.timeout=setTimeout(o.close,t),o.elements.box.onclick=function(){return o.close()}}1==o.isOpen?o.close(i):i()},close:function(e){clearTimeout(o.timeout),o.elements.container.style.transitionTimingFunction="ease-in",o.elements.container.style.bottom="-50px",setTimeout(function(){e&&e(),o.isOpen=!1},o.transitionDuration+100)}}});

5
Frontend/pages/layouts/main/style.css Normal file
View File

@@ -0,0 +1,5 @@
a{color:var(--main-color);text-decoration:none}a:hover{color:var(--main-hover-color)}
.button{padding:4px 15px;background:var(--main-color);border-radius:var(--border-radius);text-decoration:none;transition-duration:.2s;cursor:pointer;font-weight:500}.button.secondary{background:#565656}.button.secondary:hover{background:#303030}.button:hover{background:var(--main-hover-color)}
.feedback{position:absolute;inset:0;z-index:2;overflow:hidden;pointer-events:none}.feedback .notificationcontainer{position:absolute;bottom:-50px;left:20px;right:20px;display:flex;justify-content:center;align-items:flex-end}.feedback .notificationcontainer .notification{padding:10px 100px;border-radius:var(--border-radius);font-size:14px;font-weight:600;pointer-events:auto;cursor:pointer}.feedback .notificationcontainer .notification.info{background:var(--main-hover-color);box-shadow:0 0 4px #243d5e}.feedback .notificationcontainer .notification.error{background:var(--color-red-hover);box-shadow:0 0 4px #431616}
input,select,textarea{border:2px solid var(--main-hover-color);transition-duration:.2s;border-radius:var(--border-radius);padding:5px 10px;background:var(--background);color:#fff;font-family:Montserrat,sans-serif;font-size:12px}input:hover,select:hover,textarea:hover{border:2px solid var(--main-color)}input:active,input:focus,select:active,select:focus,textarea:active,textarea:focus{border:2px solid var(--main-color);outline:0}input[type=color]{overflow:hidden}input[type=color]::-webkit-color-swatch-wrapper{padding:0;width:calc(100% + 22px);height:calc(100% + 12px);margin-top:-6px;margin-left:-11px;outline:0;border:none}
:root{--background:#323232;--main-color:#4676b7;--main-hover-color:#305383;--main-secondary-color:#253e5e;--border-radius:10px;--small-border-radius:10px;--panel-color:#222;--subpanel-color:#2c2c2c;--color-red:#af2a20;--color-red-hover:#76201a;--color-green:#195e19;--color-green-hover:#124412}body{background:var(--background);color:#fff;padding:0;margin:0;font-family:Montserrat,sans-serif}.headercontainer{position:absolute;top:10px;left:10px;right:10px;height:40px;display:flex;justify-content:flex-start;align-items:center}.headercontainer img{height:100%}.headercontainer .title{display:flex;flex-direction:column;align-items:flex-start;margin-left:10px}.headercontainer .title .main{font-size:24px;font-weight:300}.headercontainer .title .sub{font-size:12px;font-weight:300;color:#d3d3d3}.bodycontainer{position:absolute;top:60px;bottom:10px;left:10px;right:10px}

20
Frontend/pages/layouts/main/ts/CE.ts Normal file
View File

@@ -0,0 +1,20 @@
function ce(
type: string,
classList?: string | string[],
attributes?: { [key: string]: string },
innerText?: string,
innerHTML?: string,
styling?: { [key: string]: string }
) {
var element = document.createElement(type);
if (classList)
if (typeof classList == 'string') element.classList.add(classList);
else element.classList.add(...classList);
if (attributes) for (var key in attributes) element.setAttribute(key, attributes[key]);
if (innerText) element.innerText = innerText;
if (innerHTML) element.innerHTML = innerHTML;
if (styling) for (var key in styling) element.style[key] = styling[key];
return element;
}
// declare var ce:(type:string, classList?:string|string[], attributes?:{[key:string]:string}, innerText?:string, innerHTML?:string) => HTMLDivElement;

54
Frontend/pages/layouts/main/ts/Notification.ts Normal file
View File

@@ -0,0 +1,54 @@
var notificationOpen = false;
var notificationTimeout: NodeJS.Timeout;
var UndeckedNotification: (message: string, type?: 'info' | 'error', time?: number) => void;
window.addEventListener('DOMContentLoaded', () => {
UndeckedNotification = (message: string, type: 'info' | 'error' = 'info', time: number = 2000) => {
_UndeckedNotification.open(message, type, time);
};
var _UndeckedNotification = {
isOpen: false,
timeout: null as NodeJS.Timeout,
transitionDuration: 200,
elements: {
container: document.querySelector('.feedback').querySelector('.notificationcontainer') as HTMLDivElement,
box: document.querySelector('.feedback').querySelector('.notification') as HTMLDivElement
},
open: (message: string, type: 'info' | 'error' = 'info', time: number) => {
var open = () => {
_UndeckedNotification.elements.box.classList.remove('info', 'error');
_UndeckedNotification.elements.box.classList.add(type);
_UndeckedNotification.elements.box.innerText = message;
_UndeckedNotification.elements.container.style.transitionTimingFunction = 'ease-out';
_UndeckedNotification.elements.container.style.transitionDuration = `${_UndeckedNotification.transitionDuration}ms`;
_UndeckedNotification.elements.container.style.bottom = '50px';
_UndeckedNotification.isOpen = true;
_UndeckedNotification.timeout = setTimeout(_UndeckedNotification.close, time);
_UndeckedNotification.elements.box.onclick = () => _UndeckedNotification.close();
};
if (_UndeckedNotification.isOpen == true) {
_UndeckedNotification.close(open);
} else open();
},
close: (callback?: Function) => {
clearTimeout(_UndeckedNotification.timeout);
_UndeckedNotification.elements.container.style.transitionTimingFunction = 'ease-in';
_UndeckedNotification.elements.container.style.bottom = '-50px';
setTimeout(() => {
if (callback) callback();
_UndeckedNotification.isOpen = false;
}, _UndeckedNotification.transitionDuration + 100);
}
};
});
// declare var UndeckedNotification: (message:string, type?:'info'|"error", time?:number) => void;

6
Frontend/pages/layouts/main/tsconfig.json Normal file
View File

@@ -0,0 +1,6 @@
{
"compilerOptions": {
"inlineSourceMap": true,
"noImplicitUseStrict": true
}
}