panel
1
frontend/static/img/svg/bell.svg
Normal file
@@ -0,0 +1 @@
|
||||
<svg xmlns="http://www.w3.org/2000/svg" width="52" height="52" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="feather feather-bell"><path d="M18 8A6 6 0 0 0 6 8c0 7-3 9-3 9h18s-3-2-3-9"></path><path d="M13.73 21a2 2 0 0 1-3.46 0"></path></svg>
|
||||
|
After Width: | Height: | Size: 321 B |
1
frontend/static/img/svg/credit-card.svg
Normal file
@@ -0,0 +1 @@
|
||||
<svg xmlns="http://www.w3.org/2000/svg" width="52" height="52" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="feather feather-credit-card"><rect x="1" y="4" width="22" height="16" rx="2" ry="2"></rect><line x1="1" y1="10" x2="23" y2="10"></line></svg>
|
||||
|
After Width: | Height: | Size: 329 B |
1
frontend/static/img/svg/eye-off.svg
Normal file
@@ -0,0 +1 @@
|
||||
<svg xmlns="http://www.w3.org/2000/svg" width="52" height="52" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="feather feather-eye-off"><path d="M17.94 17.94A10.07 10.07 0 0 1 12 20c-7 0-11-8-11-8a18.45 18.45 0 0 1 5.06-5.94M9.9 4.24A9.12 9.12 0 0 1 12 4c7 0 11 8 11 8a18.5 18.5 0 0 1-2.16 3.19m-6.72-1.07a3 3 0 1 1-4.24-4.24"></path><line x1="1" y1="1" x2="23" y2="23"></line></svg>
|
||||
|
After Width: | Height: | Size: 460 B |
1
frontend/static/img/svg/eye.svg
Normal file
@@ -0,0 +1 @@
|
||||
<svg xmlns="http://www.w3.org/2000/svg" width="52" height="52" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="feather feather-eye"><path d="M1 12s4-8 11-8 11 8 11 8-4 8-11 8-11-8-11-8z"></path><circle cx="12" cy="12" r="3"></circle></svg>
|
||||
|
After Width: | Height: | Size: 316 B |
1
frontend/static/img/svg/file-text.svg
Normal file
@@ -0,0 +1 @@
|
||||
<svg xmlns="http://www.w3.org/2000/svg" width="52" height="52" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="feather feather-file-text"><path d="M14 2H6a2 2 0 0 0-2 2v16a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V8z"></path><polyline points="14 2 14 8 20 8"></polyline><line x1="16" y1="13" x2="8" y2="13"></line><line x1="16" y1="17" x2="8" y2="17"></line><polyline points="10 9 9 9 8 9"></polyline></svg>
|
||||
|
After Width: | Height: | Size: 473 B |
1
frontend/static/img/svg/file.svg
Normal file
@@ -0,0 +1 @@
|
||||
<svg xmlns="http://www.w3.org/2000/svg" width="52" height="52" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="feather feather-file"><path d="M13 2H6a2 2 0 0 0-2 2v16a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V9z"></path><polyline points="13 2 13 9 20 9"></polyline></svg>
|
||||
|
After Width: | Height: | Size: 337 B |
1
frontend/static/img/svg/filter.svg
Normal file
@@ -0,0 +1 @@
|
||||
<svg xmlns="http://www.w3.org/2000/svg" width="52" height="52" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="feather feather-filter"><polygon points="22 3 2 3 10 12.46 10 19 14 21 14 12.46 22 3"></polygon></svg>
|
||||
|
After Width: | Height: | Size: 290 B |
1
frontend/static/img/svg/github.svg
Normal file
@@ -0,0 +1 @@
|
||||
<svg xmlns="http://www.w3.org/2000/svg" width="52" height="52" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="feather feather-github"><path d="M9 19c-5 1.5-5-2.5-7-3m14 6v-3.87a3.37 3.37 0 0 0-.94-2.61c3.14-.35 6.44-1.54 6.44-7A5.44 5.44 0 0 0 20 4.77 5.07 5.07 0 0 0 19.91 1S18.73.65 16 2.48a13.38 13.38 0 0 0-7 0C6.27.65 5.09 1 5.09 1A5.07 5.07 0 0 0 5 4.77a5.44 5.44 0 0 0-1.5 3.78c0 5.42 3.3 6.61 6.44 7A3.37 3.37 0 0 0 9 18.13V22"></path></svg>
|
||||
|
After Width: | Height: | Size: 528 B |
1
frontend/static/img/svg/globe.svg
Normal file
@@ -0,0 +1 @@
|
||||
<svg xmlns="http://www.w3.org/2000/svg" width="52" height="52" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="feather feather-globe"><circle cx="12" cy="12" r="10"></circle><line x1="2" y1="12" x2="22" y2="12"></line><path d="M12 2a15.3 15.3 0 0 1 4 10 15.3 15.3 0 0 1-4 10 15.3 15.3 0 0 1-4-10 15.3 15.3 0 0 1 4-10z"></path></svg>
|
||||
|
After Width: | Height: | Size: 409 B |
1
frontend/static/img/svg/help-circle.svg
Normal file
@@ -0,0 +1 @@
|
||||
<svg xmlns="http://www.w3.org/2000/svg" width="52" height="52" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="feather feather-help-circle"><circle cx="12" cy="12" r="10"></circle><path d="M9.09 9a3 3 0 0 1 5.83 1c0 2-3 3-3 3"></path><line x1="12" y1="17" x2="12.01" y2="17"></line></svg>
|
||||
|
After Width: | Height: | Size: 365 B |
1
frontend/static/img/svg/home.svg
Normal file
@@ -0,0 +1 @@
|
||||
<svg xmlns="http://www.w3.org/2000/svg" width="52" height="52" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="feather feather-home"><path d="M3 9l9-7 9 7v11a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2z"></path><polyline points="9 22 9 12 15 12 15 22"></polyline></svg>
|
||||
|
After Width: | Height: | Size: 332 B |
1
frontend/static/img/svg/log-out.svg
Normal file
@@ -0,0 +1 @@
|
||||
<svg xmlns="http://www.w3.org/2000/svg" width="52" height="52" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="feather feather-log-out"><path d="M9 21H5a2 2 0 0 1-2-2V5a2 2 0 0 1 2-2h4"></path><polyline points="16 17 21 12 16 7"></polyline><line x1="21" y1="12" x2="9" y2="12"></line></svg>
|
||||
|
After Width: | Height: | Size: 367 B |
1
frontend/static/img/svg/menu.svg
Normal file
@@ -0,0 +1 @@
|
||||
<svg xmlns="http://www.w3.org/2000/svg" width="52" height="52" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="feather feather-menu"><line x1="3" y1="12" x2="21" y2="12"></line><line x1="3" y1="6" x2="21" y2="6"></line><line x1="3" y1="18" x2="21" y2="18"></line></svg>
|
||||
|
After Width: | Height: | Size: 346 B |
1
frontend/static/img/svg/moon.svg
Normal file
@@ -0,0 +1 @@
|
||||
<svg xmlns="http://www.w3.org/2000/svg" width="52" height="52" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="feather feather-moon"><path d="M21 12.79A9 9 0 1 1 11.21 3 7 7 0 0 0 21 12.79z"></path></svg>
|
||||
|
After Width: | Height: | Size: 281 B |
1
frontend/static/img/svg/settings.svg
Normal file
@@ -0,0 +1 @@
|
||||
<svg xmlns="http://www.w3.org/2000/svg" width="52" height="52" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="feather feather-settings"><circle cx="12" cy="12" r="3"></circle><path d="M19.4 15a1.65 1.65 0 0 0 .33 1.82l.06.06a2 2 0 0 1 0 2.83 2 2 0 0 1-2.83 0l-.06-.06a1.65 1.65 0 0 0-1.82-.33 1.65 1.65 0 0 0-1 1.51V21a2 2 0 0 1-2 2 2 2 0 0 1-2-2v-.09A1.65 1.65 0 0 0 9 19.4a1.65 1.65 0 0 0-1.82.33l-.06.06a2 2 0 0 1-2.83 0 2 2 0 0 1 0-2.83l.06-.06a1.65 1.65 0 0 0 .33-1.82 1.65 1.65 0 0 0-1.51-1H3a2 2 0 0 1-2-2 2 2 0 0 1 2-2h.09A1.65 1.65 0 0 0 4.6 9a1.65 1.65 0 0 0-.33-1.82l-.06-.06a2 2 0 0 1 0-2.83 2 2 0 0 1 2.83 0l.06.06a1.65 1.65 0 0 0 1.82.33H9a1.65 1.65 0 0 0 1-1.51V3a2 2 0 0 1 2-2 2 2 0 0 1 2 2v.09a1.65 1.65 0 0 0 1 1.51 1.65 1.65 0 0 0 1.82-.33l.06-.06a2 2 0 0 1 2.83 0 2 2 0 0 1 0 2.83l-.06.06a1.65 1.65 0 0 0-.33 1.82V9a1.65 1.65 0 0 0 1.51 1H21a2 2 0 0 1 2 2 2 2 0 0 1-2 2h-.09a1.65 1.65 0 0 0-1.51 1z"></path></svg>
|
||||
|
After Width: | Height: | Size: 1011 B |
1
frontend/static/img/svg/shield-off.svg
Normal file
@@ -0,0 +1 @@
|
||||
<svg xmlns="http://www.w3.org/2000/svg" width="52" height="52" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="feather feather-shield-off"><path d="M19.69 14a6.9 6.9 0 0 0 .31-2V5l-8-3-3.16 1.18"></path><path d="M4.73 4.73L4 5v7c0 6 8 10 8 10a20.29 20.29 0 0 0 5.62-4.38"></path><line x1="1" y1="1" x2="23" y2="23"></line></svg>
|
||||
|
After Width: | Height: | Size: 405 B |
1
frontend/static/img/svg/shield.svg
Normal file
@@ -0,0 +1 @@
|
||||
<svg xmlns="http://www.w3.org/2000/svg" width="52" height="52" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="feather feather-shield"><path d="M12 22s8-4 8-10V5l-8-3-8 3v7c0 6 8 10 8 10z"></path></svg>
|
||||
|
After Width: | Height: | Size: 279 B |
1
frontend/static/img/svg/tag.svg
Normal file
@@ -0,0 +1 @@
|
||||
<svg xmlns="http://www.w3.org/2000/svg" width="52" height="52" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="feather feather-tag"><path d="M20.59 13.41l-7.17 7.17a2 2 0 0 1-2.83 0L2 12V2h10l8.59 8.59a2 2 0 0 1 0 2.82z"></path><line x1="7" y1="7" x2="7.01" y2="7"></line></svg>
|
||||
|
After Width: | Height: | Size: 355 B |
1
frontend/static/img/svg/toggle-left.svg
Normal file
@@ -0,0 +1 @@
|
||||
<svg xmlns="http://www.w3.org/2000/svg" width="52" height="52" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="feather feather-toggle-left"><rect x="1" y="5" width="22" height="14" rx="7" ry="7"></rect><circle cx="8" cy="12" r="3"></circle></svg>
|
||||
|
After Width: | Height: | Size: 323 B |
1
frontend/static/img/svg/toggle-right.svg
Normal file
@@ -0,0 +1 @@
|
||||
<svg xmlns="http://www.w3.org/2000/svg" width="52" height="52" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="feather feather-toggle-right"><rect x="1" y="5" width="22" height="14" rx="7" ry="7"></rect><circle cx="16" cy="12" r="3"></circle></svg>
|
||||
|
After Width: | Height: | Size: 325 B |
1
frontend/static/img/svg/user.svg
Normal file
@@ -0,0 +1 @@
|
||||
<svg xmlns="http://www.w3.org/2000/svg" width="52" height="52" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="feather feather-user"><path d="M20 21v-2a4 4 0 0 0-4-4H8a4 4 0 0 0-4 4v2"></path><circle cx="12" cy="7" r="4"></circle></svg>
|
||||
|
After Width: | Height: | Size: 313 B |
147
frontend/static/js/css/panel/main.scss
Normal file
@@ -0,0 +1,147 @@
|
||||
/*
|
||||
<style>
|
||||
/* RESET RULES
|
||||
–––––––––––––––––––––––––––––––––––––––––––––––––– */
|
||||
:root {
|
||||
--page-header-bgColor: #242e42;
|
||||
--page-header-bgColor-hover: #1d2636;
|
||||
--page-header-txtColor: #dde9f8;
|
||||
--page-header-headingColor: #7889a4;
|
||||
--page-header-width: 220px;
|
||||
--page-content-bgColor: #f0f1f6;
|
||||
--page-content-txtColor: #171616;
|
||||
--page-content-blockColor: #fff;
|
||||
--white: #fff;
|
||||
--black: #333;
|
||||
--blue: #00b9eb;
|
||||
--red: #ec1848;
|
||||
--border-radius: 4px;
|
||||
--box-shadow: 0 0 10px -2px rgba(0, 0, 0, 0.075);
|
||||
--switch-bgLightModeColor: #87cefa;
|
||||
--switch-sunColor: gold;
|
||||
--switch-moonColor: #f4f4f4;
|
||||
--switch-bgDarkModeColor: #1f1f27;
|
||||
|
||||
}
|
||||
|
||||
$nav-width: 220px;
|
||||
$nav-txt-color: #dde9f8;
|
||||
$nav-bg-color: #242e42;
|
||||
|
||||
$page-content-blockColor: #fff;
|
||||
$border-radius: 4px;
|
||||
$black: #333;
|
||||
$white: #fff;
|
||||
|
||||
|
||||
/* HEADER STYLES
|
||||
–––––––––––––––––––––––––––––––––––––––––––––––––– */
|
||||
.nav-container {
|
||||
position: fixed;
|
||||
top: 0;
|
||||
left: 0;
|
||||
right: 0;
|
||||
bottom: 0;
|
||||
overflow: auto;
|
||||
padding-top: 20px;
|
||||
width: $nav-width;
|
||||
color: $nav-txt-color;
|
||||
background: $nav-bg-color;
|
||||
}
|
||||
|
||||
.nav {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
min-height: 100%;
|
||||
}
|
||||
|
||||
.nav__home-btn {
|
||||
display: block;
|
||||
margin: 0 15px;
|
||||
}
|
||||
|
||||
.nav__logo {
|
||||
max-width: 120px;
|
||||
fill: $white;
|
||||
filter: invert(100%) sepia(0%) saturate(0%) hue-rotate(298deg)
|
||||
brightness(104%) contrast(101%);
|
||||
}
|
||||
|
||||
.nav__show-menu {
|
||||
display: none;
|
||||
margin-left: 5px;
|
||||
padding: 4px;
|
||||
background: $page-content-blockColor;
|
||||
border-radius: $border-radius;
|
||||
}
|
||||
|
||||
.nav__show-menu-icon {
|
||||
fill: $black;
|
||||
transition: transform 0.2s;
|
||||
}
|
||||
|
||||
.nav-menu {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
flex-grow: 1;
|
||||
margin-top: 35px;
|
||||
}
|
||||
|
||||
.page-header .admin-menu li:nth-last-child(2) {
|
||||
margin-bottom: 35px;
|
||||
}
|
||||
|
||||
.page-header .admin-menu li:last-child {
|
||||
margin-top: auto;
|
||||
margin-bottom: 20px;
|
||||
}
|
||||
|
||||
.page-header .admin-menu li > * {
|
||||
width: 100%;
|
||||
padding: 12px 15px;
|
||||
}
|
||||
|
||||
.page-header .admin-menu .switcher {
|
||||
display: inline-block;
|
||||
width: auto;
|
||||
}
|
||||
|
||||
.page-header .admin-menu .menu-heading h3 {
|
||||
text-transform: uppercase;
|
||||
letter-spacing: 0.15em;
|
||||
font-size: 12px;
|
||||
margin-top: 12px;
|
||||
color: var(--page-header-headingColor);
|
||||
}
|
||||
|
||||
.page-header .admin-menu svg {
|
||||
width: 20px;
|
||||
height: 20px;
|
||||
fill: var(--page-header-txtColor);
|
||||
margin-right: 10px;
|
||||
}
|
||||
|
||||
.page-header .admin-menu a,
|
||||
.page-header .admin-menu button {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
font-size: 0.9rem;
|
||||
}
|
||||
|
||||
.page-header .admin-menu a:hover,
|
||||
.page-header .admin-menu a:focus,
|
||||
.page-header .admin-menu button:hover,
|
||||
.page-header .admin-menu button:focus {
|
||||
background: var(--page-header-bgColor-hover);
|
||||
color: var(--blue);
|
||||
outline: none;
|
||||
}
|
||||
|
||||
.page-header .admin-menu a:hover svg,
|
||||
.page-header .admin-menu a:focus svg,
|
||||
.page-header .admin-menu button:hover svg,
|
||||
.page-header .admin-menu button:focus svg {
|
||||
fill: var(--blue);
|
||||
}
|
||||
|
||||
*/
|
||||
0
frontend/static/js/css/panel/sidebar/main.css
Normal file
@@ -2,6 +2,7 @@ import './css/forms.scss';
|
||||
|
||||
import signin from './auth/signin';
|
||||
import registerUser from './auth/register';
|
||||
import {run as runPanel} from './panel/index';
|
||||
import {checkUsernameEventHandler} from './auth/userExists';
|
||||
|
||||
if (window.location.pathname == '/') {
|
||||
@@ -12,8 +13,9 @@ if (window.location.pathname == '/') {
|
||||
form.addEventListener('submit', registerUser, true);
|
||||
let username = document.getElementById('username');
|
||||
username.addEventListener('input', checkUsernameEventHandler, false);
|
||||
} else if (window.location.pathname.includes('panel')) {
|
||||
runPanel();
|
||||
} else {
|
||||
}
|
||||
|
||||
|
||||
//export default signin;
|
||||
|
||||
67
frontend/static/js/panel/index.js
Normal file
@@ -0,0 +1,67 @@
|
||||
export const run = () => {
|
||||
const html = document.documentElement;
|
||||
const body = document.body;
|
||||
const menuLinks = document.querySelectorAll('.admin-menu a');
|
||||
const collapseBtn = document.querySelector('.admin-menu .collapse-btn');
|
||||
const toggleMobileMenu = document.querySelector('.toggle-mob-menu');
|
||||
const switchInput = document.querySelector('.switch input');
|
||||
const switchLabel = document.querySelector('.switch label');
|
||||
const switchLabelText = switchLabel.querySelector('span:last-child');
|
||||
const collapsedClass = 'collapsed';
|
||||
const lightModeClass = 'light-mode';
|
||||
|
||||
/*TOGGLE HEADER STATE*/
|
||||
collapseBtn.addEventListener('click', function() {
|
||||
body.classList.toggle(collapsedClass);
|
||||
this.getAttribute('aria-expanded') == 'true'
|
||||
? this.setAttribute('aria-expanded', 'false')
|
||||
: this.setAttribute('aria-expanded', 'true');
|
||||
this.getAttribute('aria-label') == 'collapse menu'
|
||||
? this.setAttribute('aria-label', 'expand menu')
|
||||
: this.setAttribute('aria-label', 'collapse menu');
|
||||
});
|
||||
|
||||
/*TOGGLE MOBILE MENU*/
|
||||
toggleMobileMenu.addEventListener('click', function() {
|
||||
body.classList.toggle('mob-menu-opened');
|
||||
this.getAttribute('aria-expanded') == 'true'
|
||||
? this.setAttribute('aria-expanded', 'false')
|
||||
: this.setAttribute('aria-expanded', 'true');
|
||||
this.getAttribute('aria-label') == 'open menu'
|
||||
? this.setAttribute('aria-label', 'close menu')
|
||||
: this.setAttribute('aria-label', 'open menu');
|
||||
});
|
||||
|
||||
/*SHOW TOOLTIP ON MENU LINK HOVER*/
|
||||
for (const link of menuLinks) {
|
||||
link.addEventListener('mouseenter', function() {
|
||||
if (
|
||||
body.classList.contains(collapsedClass) &&
|
||||
window.matchMedia('(min-width: 768px)').matches
|
||||
) {
|
||||
const tooltip = this.querySelector('span').textContent;
|
||||
this.setAttribute('title', tooltip);
|
||||
} else {
|
||||
this.removeAttribute('title');
|
||||
}
|
||||
});
|
||||
}
|
||||
|
||||
/*TOGGLE LIGHT/DARK MODE*/
|
||||
if (localStorage.getItem('dark-mode') === 'false') {
|
||||
html.classList.add(lightModeClass);
|
||||
switchInput.checked = false;
|
||||
switchLabelText.textContent = 'Light';
|
||||
}
|
||||
|
||||
switchInput.addEventListener('input', function() {
|
||||
html.classList.toggle(lightModeClass);
|
||||
if (html.classList.contains(lightModeClass)) {
|
||||
switchLabelText.textContent = 'Light';
|
||||
localStorage.setItem('dark-mode', 'false');
|
||||
} else {
|
||||
switchLabelText.textContent = 'Dark';
|
||||
localStorage.setItem('dark-mode', 'true');
|
||||
}
|
||||
});
|
||||
};
|
||||