From 36e64e399eb48f61f3515c6347a0bbf8472ec4d4 Mon Sep 17 00:00:00 2001
From: realaravinth <realaravinth@batsense.net>
Date: Tue, 6 Apr 2021 21:34:11 +0530
Subject: [PATCH] panel layout

---
 frontend/templates/auth/login/index.html      |  60 ++-
 frontend/templates/auth/login/index.js        |   7 +-
 frontend/templates/auth/register/index.js     |  16 +-
 .../templates/auth/register/userExists.js     |   8 +-
 frontend/templates/components/headers.html    |  10 +-
 frontend/templates/index.js                   |  25 +-
 frontend/templates/main.scss                  |   2 +
 frontend/templates/panel/index.html           |  23 +-
 frontend/templates/panel/index.js             | 135 +++---
 frontend/templates/panel/layout.html          | 395 ++++++++++++++++++
 frontend/templates/panel/main.scss            | 122 +-----
 frontend/templates/panel/nav/index.html       |  16 +-
 frontend/templates/panel/nav/main.scss        | 114 +++++
 .../panel/nav/menu/section/item.html          |   5 +-
 frontend/templates/panel/vars.scss            |   4 +
 frontend/webpack.common.js                    |   2 -
 frontend/webpack.dev.js                       |  10 +-
 frontend/webpack.prod.js                      |   5 +
 18 files changed, 694 insertions(+), 265 deletions(-)
 create mode 100644 frontend/templates/main.scss
 create mode 100644 frontend/templates/panel/layout.html
 create mode 100644 frontend/templates/panel/nav/main.scss
 create mode 100644 frontend/templates/panel/vars.scss

diff --git a/frontend/templates/auth/login/index.html b/frontend/templates/auth/login/index.html
index efd4dcc2..578fb6c2 100644
--- a/frontend/templates/auth/login/index.html
+++ b/frontend/templates/auth/login/index.html
@@ -1,30 +1,46 @@
 <. include!("../../components/headers.html"); .>
-    <div class="form-container">
-      <img src="../static/img/icon-trans.png" class="form__logo" alt="">
-      <h2 class="form__brand">Sign in to mCaptcha</h2>
+<div class="form-container">
+  <img src="../static/img/icon-trans.png" class="form__logo" alt="" />
+  <h2 class="form__brand">Sign in to mCaptcha</h2>
 
-      <form class="form__box" id="form">
-        <label class="form__in-group" for="username">Username
-          <input class="form__in-field" id="username" type="text" name="username" required="">
-        </label>
+  <form class="form__box" id="form">
+    <label class="form__in-group" for="username"
+      >Username
+      <input
+        class="form__in-field"
+        id="username"
+        type="text"
+        name="username"
+        required=""
+      />
+    </label>
 
-        <label for="password" class="form__in-group">Password
-          <input class="form__in-field" type="password" id="password" name="password" required="">
-          <!--
+    <label for="password" class="form__in-group"
+      >Password
+      <input
+        class="form__in-field"
+        type="password"
+        id="password"
+        name="password"
+        required=""
+      />
+      <!--
           <a class="form__pw-recovery" -href="/recovert/password"
             >Forgot password?</a
           >
           -->
-        </label>
-        <button class="form__submit-button" type="submit">
-        Submit
-        </button>
-      </form>
-      <div class="form__secondary-action">
-        <p class="form__secondary-action__banner">
-          New to mCaptcha?
-          <a href="/register" class="form__secondary-action__link">Create account</a>
-        </p>
-      </div>
-    </div>
+    </label>
+    <button class="form__submit-button" type="submit">
+      Submit
+    </button>
+  </form>
+  <div class="form__secondary-action">
+    <p class="form__secondary-action__banner">
+      New to mCaptcha?
+      <a href="/register" class="form__secondary-action__link"
+        >Create account</a
+      >
+    </p>
+  </div>
+</div>
 <. include!("../../components/footers.html"); .>
diff --git a/frontend/templates/auth/login/index.js b/frontend/templates/auth/login/index.js
index 6ab771bd..5d5b557e 100644
--- a/frontend/templates/auth/login/index.js
+++ b/frontend/templates/auth/login/index.js
@@ -3,6 +3,8 @@ import ROUTES from '../../api/v1/routes';
 import isBlankString from '../../utils/genJsonPayload';
 import genJsonPayload from '../../utils/genJsonPayload';
 
+import '../forms.scss';
+
 const login = e => {
   e.preventDefault();
   let username = document.getElementById('username').value;
@@ -23,4 +25,7 @@ const login = e => {
   });
 };
 
-export default login;
+export const index = () => {
+  let form = document.getElementById('form');
+  form.addEventListener('submit', login, true);
+};
diff --git a/frontend/templates/auth/register/index.js b/frontend/templates/auth/register/index.js
index 8f21aecc..ab2a3779 100644
--- a/frontend/templates/auth/register/index.js
+++ b/frontend/templates/auth/register/index.js
@@ -3,9 +3,11 @@ import ROUTES from '../../api/v1/routes';
 import isBlankString from '../../utils/genJsonPayload';
 import genJsonPayload from '../../utils/genJsonPayload';
 
-import {checkUsernameExists} from './userExists';
+import userExists from './userExists';
 import {checkEmailExists} from './emailExists';
 
+import '../forms.scss';
+
 const registerUser = async e => {
   e.preventDefault();
 
@@ -46,10 +48,12 @@ const registerUser = async e => {
   }
 };
 
-let form = document.getElementById('form');
-form.addEventListener('submit', registerUser, true);
+const index = () => {
+  let form = document.getElementById('form');
+  form.addEventListener('submit', registerUser, true);
 
-let username = document.getElementById('username');
-username.addEventListener('input', checkUsernameEventHandler, false);
+  let username = document.getElementById('username');
+  username.addEventListener('input', userExists, false);
+}
 
-export default registerUser;
+export default index;
diff --git a/frontend/templates/auth/register/userExists.js b/frontend/templates/auth/register/userExists.js
index ba05b7fa..ba2277dd 100644
--- a/frontend/templates/auth/register/userExists.js
+++ b/frontend/templates/auth/register/userExists.js
@@ -3,12 +3,8 @@ import ROUTES from '../../api/v1/routes';
 import genJsonPayload from '../../utils/genJsonPayload';
 
 
-const checkUsernameEventHandler = _e => {
-  checkUsernameExists();
-};
-
 //export const checkUsernameExists = async () => {
-async function checkUsernameExists()  {
+async function userExists()  {
   let username = document.getElementById('username');
   let val = username.value;
   let payload = {
@@ -45,4 +41,4 @@ async function checkUsernameExists()  {
   return false;
 };
 
-export {checkUsernameExists, checkUsernameEventHandler};
+export default userExists;
diff --git a/frontend/templates/components/headers.html b/frontend/templates/components/headers.html
index 624cf4c8..e45ef921 100644
--- a/frontend/templates/components/headers.html
+++ b/frontend/templates/components/headers.html
@@ -1,7 +1,7 @@
-<html lang="en"><head>
-		<meta charset="UTF-8">
-<meta name="viewport" content="width=device-width, initial-scale=1.0">
-<title><.= title .>|<.= name .></title>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <title><.= title .>|<.= name .></title>
   </head>
   <body>
-
diff --git a/frontend/templates/index.js b/frontend/templates/index.js
index bd23d3ac..6fe87879 100644
--- a/frontend/templates/index.js
+++ b/frontend/templates/index.js
@@ -1,20 +1,17 @@
-import './auth/forms.scss';
-
-import signin from './auth/login';
-import  registerUser from './auth/register';
-import {run as runPanel} from './panel/index';
-import {checkUsernameEventHandler} from './auth/register/userExists';
+import * as login from './auth/login';
+import * as register from './auth/register';
+import * as panel from './panel/index';
 
 if (window.location.pathname == '/') {
-  let form = document.getElementById('form');
-  form.addEventListener('submit', signin, true);
-} else if (window.location.pathname == '/signup') {
-  let form = document.getElementById('form');
-  form.addEventListener('submit', registerUser, true);
-  let username = document.getElementById('username');
-  username.addEventListener('input', checkUsernameEventHandler, false);
+  login.index();
+} else if (window.location.pathname == '/register') {
+  register.index();
+//  let form = document.getElementById('form');
+//  form.addEventListener('submit', registerUser, true);
+//  let username = document.getElementById('username');
+//  username.addEventListener('input', checkUsernameEventHandler, false);
 } else if (window.location.pathname.includes('panel')) {
-  runPanel();
+  panel.index();
 } else {
 }
 
diff --git a/frontend/templates/main.scss b/frontend/templates/main.scss
new file mode 100644
index 00000000..85130aa5
--- /dev/null
+++ b/frontend/templates/main.scss
@@ -0,0 +1,2 @@
+@use './auth/forms';
+@use './panel/main';
diff --git a/frontend/templates/panel/index.html b/frontend/templates/panel/index.html
index 807b520b..261bf0ca 100644
--- a/frontend/templates/panel/index.html
+++ b/frontend/templates/panel/index.html
@@ -1,6 +1,4 @@
-<. include!("../components/headers.html"); .> <.# include!("svg.html"); .>
-<. include!("style.html"); .>
-<. include!("nav/index.html"); .>
+<. include!("../components/headers.html"); .> <. include!("nav/index.html"); .>
 
 <section class="page-content">
   <section class="search-and-user">
@@ -13,7 +11,7 @@
       </button>
     </form>
     <div class="admin-profile">
-      <span class="greeting">Hello admin</span>
+      <span class="greeting">Hello Batman</span>
       <div class="notifications">
         <span class="badge">1</span>
         <svg>
@@ -30,19 +28,12 @@
     <article></article>
     <article></article>
     <article></article>
-    <article></article>
+    <article>
+
+
+    </article>
+
   </section>
-  <footer class="page-footer">
-    <span>made by </span>
-    <a href="https://georgemartsoukos.com/" target="_blank">
-      <img
-        width="24"
-        height="24"
-        src="https://assets.codepen.io/162656/george-martsoukos-small-logo.svg"
-        alt="George Martsoukos logo"
-      />
-    </a>
-  </footer>
 </section>
 
 <. include!("../components/footers.html"); .>
diff --git a/frontend/templates/panel/index.js b/frontend/templates/panel/index.js
index 62a45420..9068b621 100644
--- a/frontend/templates/panel/index.js
+++ b/frontend/templates/panel/index.js
@@ -1,67 +1,72 @@
-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';
+import './main.scss';
+import './nav/main.scss';
 
-  /*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');
-    }
-  });
+export const index = () => {
+  //  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');
+  //    }
+  //  });
+  //
+  let a;
 };
diff --git a/frontend/templates/panel/layout.html b/frontend/templates/panel/layout.html
new file mode 100644
index 00000000..7eaf4934
--- /dev/null
+++ b/frontend/templates/panel/layout.html
@@ -0,0 +1,395 @@
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <title>Document</title>
+  </head>
+  <body>
+    <header>
+      <nav class="secondary-menu">
+        <ul>
+          <li class="secondary-menu__item">mCaptcha</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>
+        </ul>
+      </nav>
+      <!-- Nav/Side/Secondary bar -->
+    </header>
+    <!--
+    <nav class="secondary-menu">
+      <ul>
+        <li class="secondary-menu__item">Sidebar Item</li>
+        <li class="secondary-menu__item">Sidebar Item</li>
+        <li class="secondary-menu__item">Sidebar Item</li>
+        <li class="secondary-menu__item">Sidebar Item</li>
+        <li class="secondary-menu__item">Sidebar Item</li>
+      </ul>
+    </nav>
+    -->
+
+    <main>
+      <ul class="task-bar">
+        <!--
+        <li class="task-bar__action">Brand Name</li>
+        -->
+        <li class="task-bar__action"></li>
+        <li class="task-bar__action">
+          <img src="../../static/img/svg/bell.svg" alt="Notifications" />
+        </li>
+
+        <li class="task-bar__action">
+          <img src="../../static/img/svg/user.svg" alt="Profile" />
+        </li>
+      </ul>
+
+      <ul class="main-menu">
+        <!-- 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">
+          <button class="main-menu__add-site">+ New Site</button>
+        </li>
+      </ul>
+
+      <ul class="help-text">
+        <li class="help-text__instructions">
+          <span class="help-text__serial-num">1</span>
+          Add sitekey
+        </li>
+        <li class="help-text__instructions">
+          <span class="help-text__serial-num">2</span>
+          Add client-side code snippets in places that you want to protext
+        </li>
+        <li class="help-text__instructions">
+          <span class="help-text__serial-num">3</span>
+          Add servers-side verification logic
+        </li>
+      </ul>
+
+      <!-- Main content container -->
+      <div class="inner-container">
+        <!-- Main menu/ important actions roaster -->
+
+        <form class="sitekey-form" action="/something" method="post">
+          <div class="sitekey-form__title-flex-container">
+            <b class="sitekey-form__title">Add Site Key</b>
+          </div>
+          <div class="sitekey-form__add-level-flex-container">
+            <label class="sitekey-form__label" for="description"
+              >Description</label
+            >
+          </div>
+          <input
+            class="sitekey-form__input"
+            type="text/"
+            name="description"
+            id="description"
+            value=""
+          />
+
+          <div class="sitekey-form__add-level-flex-container">
+            <!-- insert Javascript for adding more levels as needed -->
+            <label class="sitekey-form__label" for="level1">Level 1</label>
+          </div>
+
+          <input
+            class="sitekey-form__input"
+            type="text/"
+            name="level1"
+            id="level1"
+            value=""
+          />
+
+          <div class="sitekey-form__add-level-flex-container">
+            <label class="sitekey-form__label" for="level1">Level 2</label>
+          </div>
+
+          <div class="sitekey-form__add-level-flex-container">
+            <!--
+              <div class="sitekey-form__add-level-spacer"></div>
+              -->
+            <input
+              class="sitekey-form__input--add-level"
+              type="text/"
+              name="level2"
+              id="level2"
+              value=""
+            />
+
+            <button class="sitekey-form__add-level">Add Level</button>
+          </div>
+          <button class="sitekey-form__submit" type="submit">Submit</button>
+        </form>
+      </div>
+      <!-- end of container -->
+    </main>
+  </body>
+  <style>
+    * {
+      margin: 0;
+      padding: 0;
+    }
+
+    .home-button {
+      width: 250px;
+      margin: auto;
+      flex: 5;
+    }
+    .secondary-menu {
+      position: fixed;
+      width: 14%;
+      left: 0;
+      bottom: 0;
+      top: 0;
+      right: 0;
+      height: 100%;
+      overflow: auto;
+
+      background-color: #2b2c30;
+      color: white;
+      color: rgba(255, 255, 255, 0.87);
+    }
+
+    .secondary-menu__item {
+      margin: auto;
+      padding: 20px;
+      list-style: none;
+    }
+
+    .secondary-menu__section-partition {
+      border-bottom: 1px solid #c3c3c3;
+      list-style: none;
+      margin: 20px 0;
+    }
+
+    .secondary-menu__item:hover {
+      color: #5cad66 !important;
+      cursor: grab;
+    }
+
+    main {
+      position: fixed;
+      top: 0;
+      right: 0;
+      left: 14%;
+      bottom: 0;
+      background-color: #f0f0f0;
+    }
+
+    .task-bar {
+      display: flex;
+      padding: 0px;
+      margin: 0px;
+      background-color: #fff;
+    }
+
+    .task-bar__action {
+      display: inline-block;
+      list-style: none;
+      flex: 1;
+      padding: 15px 0px;
+      margin: auto;
+    }
+
+    .task-bar__action:first-child {
+      min-width: 250px;
+      flex: 6;
+    }
+
+    .main-menu {
+      display: flex;
+      flex-grow: 0;
+      padding-top: 20px;
+      padding-left: 10px;
+    }
+
+    .main-menu__item {
+      list-style: none;
+      background-color: #c3c3c3;
+      flex: 2;
+      text-align: center;
+      vertical-align: middle;
+      margin: auto 20px;
+      padding: 10px 0;
+    }
+
+    .main-menu__item--spacer {
+      list-style: none;
+      flex: 3;
+      text-align: center;
+    }
+
+    .main-menu__item:hover {
+      background-color: grey;
+      cursor: grab;
+    }
+
+    .main-menu__item:last-child {
+      padding: 0;
+      display: flex;
+      flex: 2;
+      border: none;
+      background-color: unset;
+    }
+
+    .main-menu__item:last-child:hover {
+      cursor: unset;
+      background-color: unset;
+    }
+
+    .main-menu__add-site {
+      display: inline-block;
+      background-color: purple;
+      color: white;
+      padding: 10px;
+
+      border-radius: 5px;
+      border: 1px grey solid;
+      min-height: 45px;
+      min-width: 125px;
+      margin: auto;
+    }
+
+    .main-menu__add-site:hover {
+      background-color: 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;
+      display: flex;
+      margin-top: 50px;
+      margin-left: 25px;
+    }
+
+    .help-text__serial-num {
+      display: inline-flex;
+      background-color: purple;
+      color: #fff;
+      width: 30px;
+      height: 30px;
+      border-radius: 50%;
+      align-items: center;
+      justify-content: center;
+    }
+
+    .help-text__instructions {
+      display: inline-block;
+      list-style: none;
+      font-size: 16px;
+      padding: 10px;
+      margin: auto;
+    }
+
+    .inner-container {
+      display: flex;
+      box-sizing: border-box;
+      max-width: 50%;
+      margin: 50px auto;
+      border-radius: 5px;
+      display: flex;
+    }
+
+    .sitekey-form {
+      display: flex;
+      flex-direction: column;
+      width: 90%;
+      justify-content: center;
+      align-items: center;
+      box-sizing: content-box;
+      background-color: #fff;
+      margin: auto;
+    }
+
+
+    .sitekey-form__title-flex-container {
+      display: flex;
+      width: 100%;
+      border-bottom: 0.1px solid rgba(0,0,0,.125);
+    }
+
+    .sitekey-form__title{
+      padding-left: 10px;
+      font-size: 1rem;
+      padding: .75rem 1.25rem;
+    }
+
+
+
+    .sitekey-form__label {
+      display: block;
+      margin: 10px 0;
+      box-sizing: inherit;
+      justify-self: left;
+    }
+
+    .sitekey-form__input {
+      position: relative;
+      margin-top: 5px;
+      box-sizing: border-box;
+      height: 40px;
+      width: 90%;
+    }
+
+    .sitekey-form__input--add-level {
+      position: relative;
+      margin-top: 5px;
+      box-sizing: inherit;
+      flex: 3;
+      height: 40px;
+      margin-right: 20px;
+    }
+
+    .sitekey-form__add-level-flex-container {
+      display: flex;
+      box-sizing: border-box;
+      width: 90%;
+      margin-top: 10px;
+    }
+
+    .sitekey-form__add-level-spacer {
+      flex: 3;
+    }
+
+    .sitekey-form__add-level {
+      background-color: purple;
+      color: white;
+      padding: 10px;
+
+      border-radius: 5px;
+      border: 1px grey solid;
+      height: 40px;
+      min-width: 125px;
+      margin: auto;
+    }
+
+    .sitekey-form__submit {
+      margin-top: 50px;
+      display: block;
+      background-color: purple;
+      color: white;
+      padding: 10px;
+
+      border-radius: 5px;
+      border: 1px grey solid;
+      min-height: 45px;
+      width: 125px;
+    }
+  </style>
+</html>
diff --git a/frontend/templates/panel/main.scss b/frontend/templates/panel/main.scss
index e67163e5..260c57b6 100644
--- a/frontend/templates/panel/main.scss
+++ b/frontend/templates/panel/main.scss
@@ -1,3 +1,5 @@
+@use './vars';
+
 /*
 <style>
   /* RESET RULES
@@ -24,124 +26,12 @@
 	
   }
 
-$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);
-  }
-
-  */
+.test-button {
+	background-color: red;
+	z-index: 500;
+}
diff --git a/frontend/templates/panel/nav/index.html b/frontend/templates/panel/nav/index.html
index 7cb115f2..45763541 100644
--- a/frontend/templates/panel/nav/index.html
+++ b/frontend/templates/panel/nav/index.html
@@ -1,20 +1,24 @@
-<header class="page-header nav-container">
+<header class="nav-container">
   <nav class="nav">
     <a href="#0" aria-label="forecastr logo" class="nav__home-btn">
       <img class="nav__logo" src="/svg/shield.svg" alt="logo" />
     </a>
     <button
-      class="toggle-mob-menu nav__show-menu"
+      class="nav__show-menu"
       aria-expanded="false"
       aria-label="open menu"
     >
       <.# TODO change show-menu icon .>
-      <svg width="20" height="20" class="nav__show-menu-icon" aria-hidden="true">
+      <svg
+        width="20"
+        height="20"
+        class="nav__show-menu-icon"
+        aria-hidden="true"
+      >
         <use xlink:href="#down"></use>
       </svg>
     </button>
-    <. include!("menu/index.html"); .>
-    <. include!("theme-toggle/index.html"); .>
-    <. include!("collapse-nav/index.html"); .>
+    <. include!("menu/index.html"); .> <. include!("theme-toggle/index.html");
+    .> <. include!("collapse-nav/index.html"); .>
   </nav>
 </header>
diff --git a/frontend/templates/panel/nav/main.scss b/frontend/templates/panel/nav/main.scss
new file mode 100644
index 00000000..5be9e822
--- /dev/null
+++ b/frontend/templates/panel/nav/main.scss
@@ -0,0 +1,114 @@
+@import '../vars';
+
+$nav-width: 220px;
+$nav-txt-color: #dde9f8;
+$nav-bg-color: #242e42;
+
+
+.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);
+}
diff --git a/frontend/templates/panel/nav/menu/section/item.html b/frontend/templates/panel/nav/menu/section/item.html
index 8d981ee8..625eda38 100644
--- a/frontend/templates/panel/nav/menu/section/item.html
+++ b/frontend/templates/panel/nav/menu/section/item.html
@@ -1,5 +1,6 @@
-<li 
+<li
   class='<.= if active.name == heading.name {"nav-section__item--active"} else { "nav-section__item"} .>'
+>
   <a href="#0" class="nav-menu__item__link nav-section__item__link">
     <img
       class="icon nav-menu__item__icon nav-section__item__icon"
@@ -10,6 +11,7 @@
   </a>
 </li>
 
+<!--
 <style>
   .nav-section__item__link {
     filter: invert(100%) sepia(0%) saturate(0%) hue-rotate(298deg)
@@ -22,3 +24,4 @@
     outline: none;
   }
 </style>
+-->
diff --git a/frontend/templates/panel/vars.scss b/frontend/templates/panel/vars.scss
new file mode 100644
index 00000000..e9617734
--- /dev/null
+++ b/frontend/templates/panel/vars.scss
@@ -0,0 +1,4 @@
+$page-content-blockColor: #fff;
+$border-radius: 4px;
+$black: #333;
+$white: #fff;
diff --git a/frontend/webpack.common.js b/frontend/webpack.common.js
index 96d5356f..d7965f92 100644
--- a/frontend/webpack.common.js
+++ b/frontend/webpack.common.js
@@ -1,5 +1,3 @@
-const path = require('path');
-
 module.exports = {
   entry: {
     main: './templates/index.js',
diff --git a/frontend/webpack.dev.js b/frontend/webpack.dev.js
index 3f8836a1..799c9600 100644
--- a/frontend/webpack.dev.js
+++ b/frontend/webpack.dev.js
@@ -10,17 +10,17 @@ module.exports = merge(common, {
     path: path.resolve(__dirname, 'dist'),
   },
   plugins: [
-    new HtmlWebpackPlugin({
-      template: './output/index.html',
-    }),
     new HtmlWebpackPlugin({
       filename: 'register/index.html',
-      template: './output/register/index.html',
+      template: path.resolve(__dirname, 'output/register/', 'index.html'),
     }),
 
     new HtmlWebpackPlugin({
       filename: 'panel/index.html',
-      template: './output/panel/index.html',
+      template: path.resolve(__dirname, 'output/panel/', 'index.html'),
+    }),
+    new HtmlWebpackPlugin({
+      template: path.resolve(__dirname, 'output/', 'index.html'),
     }),
   ],
   module: {
diff --git a/frontend/webpack.prod.js b/frontend/webpack.prod.js
index c30d324c..0ff4ac37 100644
--- a/frontend/webpack.prod.js
+++ b/frontend/webpack.prod.js
@@ -37,6 +37,11 @@ module.exports = merge(common, {
       new HtmlWebpackPlugin({
         filename: 'panel/index.html',
         template: './output/panel/index.html',
+        minify: {
+          removeAttributeQuotes: true,
+          collapseWhitespace: true,
+          removeComments: true,
+        }
       }),
     ],
   },