mirrors/mCaptcha
1
0
Fork 0
mirror of https://github.com/mCaptcha/mCaptcha.git synced 2025-02-17 08:59:46 +03:00
Code Issues Projects Releases Packages Wiki Activity

route normalization, panel icons and styling

Browse source
This commit is contained in:
realaravinth 2021-04-08 11:56:51 +05:30
parent 432905e9f7
commit d1fa3dc671
No known key found for this signature in database
GPG key ID: AD9F0F08E855ED88
26 changed files with 279 additions and 77 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

BIN
frontend/templates/panel/icon-trans.png Normal file
View file

Binary file not shown.
Side by side

After

Width:  |  Height:  |  Size: 1.3 MiB

308
frontend/templates/panel/layout.html
View file

@ -9,25 +9,109 @@
<header>
<nav class="secondary-menu">
<ul>
<li class="secondary-menu__item">mCaptcha</li>
<li class="secondary-menu__heading">
<img
class="secondary-menu__logo"
src="./icon-trans.png"
alt="Logo"
/>
<div class="secondary-menu__brand-name">
mCaptcha
</div>
</li>
<!--
<li class="secondary-menu__section-partition"></li>
<button class="main-menu__add-site">+ New Site</button>
<li class="secondary-menu__item">Overview</li>
<li class="secondary-menu__item">Site Keys</li>
<li class="main-menu__item--spacer"></li>
<li class="secondary-menu__section-partition"></li>
<li class="secondary-menu__item">API Docs</li>
<li class="secondary-menu__section-partition"></li>
<li class="secondary-menu__item">Settings</li>
<li class="secondary-menu__item">Billing</li>
<li class="secondary-menu__section-partition"></li>
<li class="secondary-menu__item">FAQ</li>
<li class="secondary-menu__item">Help</li>
<li class="secondary-menu__item">Support</li>
<li class="secondary-menu__section-partition"></li>
<li class="secondary-menu__item">Source Code</li>
-->
<li class="secondary-menu__item">
<a class="secondary-menu__item-link" href="">
<img class="secondary-menu__icon" src="./svg/home.svg" alt="" />
<div class="secondary-menu__item-name">
Overview
</div>
</a>
</li>
<li class="secondary-menu__item">
<a class="secondary-menu__item-link" href="">
<img class="secondary-menu__icon" src="./svg/key.svg" alt="" />
<div class="secondary-menu__item-name">
Site Keys
</div>
</a>
</li>
<!--
<li class="main-menu__item--spacer"></li>
-->
<li class="secondary-menu__item">
<a class="secondary-menu__item-link" href="">
<img
class="secondary-menu__icon"
src="./svg/settings.svg"
alt=""
/>
<div class="secondary-menu__item-name">
Settings
</div>
</a>
</li>
<li class="secondary-menu__item">
<a class="secondary-menu__item-link" href="">
<img
class="secondary-menu__icon"
src="./svg/credit-card.svg"
alt=""
/>
<div class="secondary-menu__item-name">
Billing
</div>
</a>
</li>
<li class="secondary-menu__item">
<a class="secondary-menu__item-link" href="">
<img
class="secondary-menu__icon"
src="./svg/help-circle.svg"
alt=""
/>
<div class="secondary-menu__item-name">
Help
</div>
</a>
</li>
<li class="secondary-menu__item">
<a class="secondary-menu__item-link" href="">
<img
class="secondary-menu__icon"
src="./svg/message-square.svg"
alt=""
/>
<div class="secondary-menu__item-name">
Support
</div>
</a>
</li>
<li class="secondary-menu__item">
<a class="secondary-menu__item-link" href="">
<img
class="secondary-menu__icon"
src="./svg/file-text.svg"
alt=""
/>
<div class="secondary-menu__item-name">
API Docs
</div>
</a>
</li>
<li class="secondary-menu__item">
<a class="secondary-menu__item-link" href="">
<img class="secondary-menu__icon" src="./svg/github.svg" alt="" />
<div class="secondary-menu__item-name">
Source Code
</div>
</a>
</li>
</ul>
</nav>
<!-- Nav/Side/Secondary bar -->
@ -49,31 +133,43 @@
<!--
<li class="task-bar__action">Brand Name</li>
-->
<li class="task-bar__spacer"></li>
<li class="task-bar__action">
</li>
<button class="main-menu__add-site">+ New Site</button>
</li>
<li class="task-bar__action">
<img src="../../static/img/svg/bell.svg" alt="Notifications" />
<img class="task-bar__icon" src="./svg/moon.svg" alt="Profile" />
</li>
<li class="task-bar__action">
<img
class="task-bar__icon"
src="./svg/bell.svg"
alt="Notifications"
/>
</li>
<li class="task-bar__action">
<img src="../../static/img/svg/user.svg" alt="Profile" />
<img class="task-bar__icon" src="./svg/user.svg" alt="Profile" />
</li>
</ul>
<!--
<ul class="main-menu">
<!-- important actions -->
<!--
<!-- important actions
<!--
<li class="main-menu__item">Overview</li>
<li class="main-menu__item">Site Keys</li>
<li class="main-menu__item">Settings</li>
-->
<li class="main-menu__item--spacer"></li>
<!-- dummy-->
<li class="main-menu__item--spacer"></li>
<!-- dummy
<li class="main-menu__item">
<button class="main-menu__add-site">+ New Site</button>
</li>
</ul>
-->
<ul class="help-text">
<li class="help-text__instructions">
@ -154,15 +250,23 @@
padding: 0;
}
:root {
--green: #5cad66;
}
.home-button {
width: 250px;
margin: auto;
flex: 5;
a {
text-decoration: none;
}
li {
list-style: none;
}
:root {
--green: #5cad66;
--violet: #800080;
--backdrop: #f0f0f0;
--light-text: rgba(255, 255, 255, 0.87);
--secondary-backdrop: #2b2c30;
--light-grey: rgba(0, 0, 0, 0.125);
}
.secondary-menu {
position: fixed;
width: 14%;
@ -173,26 +277,75 @@
height: 100%;
overflow: auto;
background-color: #2b2c30;
color: white;
color: rgba(255, 255, 255, 0.87);
background-color: var(--secondary-backdrop);
color: var(--light-text);
}
.secondary-menu__heading {
margin: auto;
padding: 20px 5px;
display: flex;
}
.secondary-menu__heading:hover {
color: var(--green);
cursor: grab;
}
.secondary-menu__logo {
width: 70px;
display: inline-block;
}
.secondary-menu__brand-name {
display: inline-block;
margin: auto;
font-size: 1.5rem;
}
.secondary-menu__item {
margin: auto;
padding: 20px;
list-style: none;
padding: 20px 25px;
display: flex;
}
.secondary-menu__icon {
filter: invert(100%) sepia(0%) saturate(0%) hue-rotate(93deg)
brightness(103%) contrast(103%);
opacity: 0.8;
width: 1rem;
margin: auto;
margin-right: 10px;
}
.secondary-menu__item-name {
display: inline-block;
margin: auto;
font-size: 1rem;
}
/*
.secondary-menu__section-partition {
border-bottom: 1px solid #c3c3c3;
border-bottom: 1px solid var(--light-text);
margin: auto;
max-width: 70%;
list-style: none;
margin: 20px 0;
margin: 20px;
}
*/
.secondary-menu__item:hover {
.secondary-menu__item-link:hover {
color: var(--green);
cursor: grab;
filter: invert(58%) sepia(60%) saturate(331%) hue-rotate(76deg)
brightness(91%) contrast(92%);
}
.secondary-menu__item-link {
color: inherit;
width: 100%;
height: 100%;
}
main {
@ -201,7 +354,7 @@
right: 0;
left: 14%;
bottom: 0;
background-color: #f0f0f0;
background-color: var(--backdrop);
}
.task-bar {
@ -211,19 +364,28 @@
background-color: #fff;
}
.task-bar__action {
.task-bar__action{
display: inline-block;
list-style: none;
flex: 1;
padding: 15px 0px;
padding: 10px 0px;
margin: auto;
}
.task-bar__action:first-child {
.task-bar__spacer {
min-width: 250px;
flex: 6;
}
.task-bar__icon {
opacity: 0.8;
width: 1.5rem;
margin: auto 20px;
}
.task-bar__icon:hover{
cursor: grab;
}
.main-menu {
display: flex;
flex-grow: 0;
@ -267,37 +429,39 @@
.main-menu__add-site {
display: inline-block;
background-color: purple;
background-color: var(--violet);
color: white;
padding: 10px;
font-weight: 500;
font-size: 16px;
padding: 10px 15px;
border-radius: 5px;
border: 1px grey solid;
min-height: 45px;
min-width: 125px;
margin: auto;
}
.main-menu__add-site:hover {
background-color: violet;
background-color: var(--violet);
cursor: grab;
transform: translateY(-5px);
}
.help-text {
border-radius: 4px;
box-shadow: rgba(0, 0, 0.5) 0px 2px 6px 0px;
max-width: 70%;
height: 70px;
box-shadow: var(--secondary-backdrop) 0px 2px 6px 0px;
min-width: 70%;
max-width: 80%;
min-height: 70px;
display: flex;
margin-top: 50px;
margin-left: 25px;
margin-left: 15px;
margin-top: 40px;
}
.help-text__serial-num {
display: inline-flex;
background-color: purple;
color: #fff;
background-color: var(--violet);
color: var(--light-text);
width: 30px;
height: 30px;
border-radius: 50%;
@ -308,7 +472,8 @@
.help-text__instructions {
display: inline-block;
list-style: none;
font-size: 16px;
font-size: 19px;
font-weight: 500;
padding: 10px;
margin: auto;
}
@ -331,23 +496,21 @@
box-sizing: content-box;
background-color: #fff;
margin: auto;
padding-bottom: 30px;
}
.sitekey-form__title-flex-container {
display: flex;
width: 100%;
border-bottom: 0.1px solid rgba(0,0,0,.125);
border-bottom: 0.1px solid var(--light-grey);
}
.sitekey-form__title{
.sitekey-form__title {
padding-left: 10px;
font-size: 1rem;
padding: .75rem 1.25rem;
padding: 0.75rem 1.25rem;
}
.sitekey-form__label {
display: block;
margin: 10px 0;
@ -384,12 +547,13 @@
}
.sitekey-form__add-level {
background-color: purple;
background-color: var(--violet);
color: white;
padding: 10px;
padding: 5px;
font-size: 16px;
border-radius: 5px;
border: 1px grey solid;
border: 1px var(--light-grey) solid;
height: 40px;
min-width: 125px;
margin: auto;
@ -398,14 +562,16 @@
.sitekey-form__submit {
margin-top: 50px;
display: block;
background-color: purple;
background-color: var(--violet);
color: white;
padding: 10px;
padding: 5px;
font-size: 20px;
border-radius: 5px;
border: 1px grey solid;
border: 1px var(--light-grey) solid;
min-height: 45px;
width: 125px;
width: 90%;
}
</style>
</html>

1
frontend/templates/panel/svg/bell.svg Normal file
View 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>
Side by side

After

Width:  |  Height:  |  Size: 321 B

1
frontend/templates/panel/svg/credit-card.svg Normal file
View 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>
Side by side

After

Width:  |  Height:  |  Size: 329 B

1
frontend/templates/panel/svg/eye-off.svg Normal file
View 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>
Side by side

After

Width:  |  Height:  |  Size: 460 B

1
frontend/templates/panel/svg/eye.svg Normal file
View 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>
Side by side

After

Width:  |  Height:  |  Size: 316 B

1
frontend/templates/panel/svg/file-text.svg Normal file
View 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>
Side by side

After

Width:  |  Height:  |  Size: 473 B

1
frontend/templates/panel/svg/file.svg Normal file
View 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>
Side by side

After

Width:  |  Height:  |  Size: 337 B

1
frontend/templates/panel/svg/filter.svg Normal file
View 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>
Side by side

After

Width:  |  Height:  |  Size: 290 B

1
frontend/templates/panel/svg/github.svg Normal file
View 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>
Side by side

After

Width:  |  Height:  |  Size: 528 B

1
frontend/templates/panel/svg/globe.svg Normal file
View 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>
Side by side

After

Width:  |  Height:  |  Size: 409 B

1
frontend/templates/panel/svg/help-circle.svg Normal file
View 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>
Side by side

After

Width:  |  Height:  |  Size: 365 B

1
frontend/templates/panel/svg/home.svg Normal file
View 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>
Side by side

After

Width:  |  Height:  |  Size: 332 B

1
frontend/templates/panel/svg/key.svg Normal file
View file

@ -0,0 +1 @@
<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="feather feather-key"><path d="M21 2l-2 2m-7.61 7.61a5.5 5.5 0 1 1-7.778 7.778 5.5 5.5 0 0 1 7.777-7.777zm0 0L15.5 7.5m0 0l3 3L22 7l-3-3m-3.5 3.5L19 4"></path></svg>
Side by side

After

Width:  |  Height:  |  Size: 352 B

1
frontend/templates/panel/svg/log-out.svg Normal file
View 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>
Side by side

After

Width:  |  Height:  |  Size: 367 B

1
frontend/templates/panel/svg/menu.svg Normal file
View 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>
Side by side

After

Width:  |  Height:  |  Size: 346 B

1
frontend/templates/panel/svg/message-square.svg Normal file
View file

@ -0,0 +1 @@
<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="feather feather-message-square"><path d="M21 15a2 2 0 0 1-2 2H7l-4 4V5a2 2 0 0 1 2-2h14a2 2 0 0 1 2 2z"></path></svg>
Side by side

After

Width:  |  Height:  |  Size: 305 B

1
frontend/templates/panel/svg/moon.svg Normal file
View 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>
Side by side

After

Width:  |  Height:  |  Size: 281 B

1
frontend/templates/panel/svg/settings.svg Normal file
View 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>
Side by side

After

Width:  |  Height:  |  Size: 1,011 B

1
frontend/templates/panel/svg/shield-off.svg Normal file
View 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>
Side by side

After

Width:  |  Height:  |  Size: 405 B

1
frontend/templates/panel/svg/shield.svg Normal file
View 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>
Side by side

After

Width:  |  Height:  |  Size: 279 B

1
frontend/templates/panel/svg/tag.svg Normal file
View 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>
Side by side

After

Width:  |  Height:  |  Size: 355 B

1
frontend/templates/panel/svg/toggle-left.svg Normal file
View 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>
Side by side

After

Width:  |  Height:  |  Size: 323 B

1
frontend/templates/panel/svg/toggle-right.svg Normal file
View 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>
Side by side

After

Width:  |  Height:  |  Size: 325 B

1
frontend/templates/panel/svg/user.svg Normal file
View 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>
Side by side

After

Width:  |  Height:  |  Size: 313 B

25
frontend/templates/router.js
View file

@ -1,3 +1,19 @@
const normalizeUri = uri => {
if (!uri) {
throw new Error('uri is empty');
}
if (typeof uri !== 'string') {
throw new TypeError('URI must be a string');
}
let uriLength = uri.length;
if (uri[uriLength - 1] == '/') {
uri = uri.slice(0, uriLength - 1);
}
return uri;
};
export class Router {
constructor() {
this.routes = [];
@ -28,11 +44,7 @@ export class Router {
}
});
// normalize URI for trailing slash
let uriLength = uri.length;
if (uri[uriLength - 1] == '/') {
uri = uri.slice(0, uriLength - 1);
}
uri = normalizeUri(uri);
const route = {
uri,
@ -44,8 +56,9 @@ export class Router {
route() {
this.routes.forEach(route => {
// normalize for trailing slash
let pattern = new RegExp(`^${route.uri}/$`);
let pattern = new RegExp(`^${route.uri}$`);
let path = window.location.pathname;
path = normalizeUri(path);
if (path.match(pattern)) {
return route.fn.call();
}