webui: flask dump

18 files changed, 455 insertions, 0 deletions

diff --git a/webui/website/__init__.py b/webui/website/__init__.py
new file mode 100644
index 0000000..4ca4c4b
--- /dev/null
+++ b/webui/website/__init__.py
@@ -0,0 +1,13 @@
+from flask import Flask
+
+def create_app():
+    app = Flask(__name__)
+    app.config['SECRET_KEY'] = 'fdbcawejhfbwef'
+
+    from .views import views
+    from .auth import auth
+
+    app.register_blueprint(views, url_prefix='/')
+    app.register_blueprint(auth, url_prefix='/')
+
+    return app
\ No newline at end of file
diff --git a/webui/website/auth.py b/webui/website/auth.py
new file mode 100644
index 0000000..c44b421
--- /dev/null
+++ b/webui/website/auth.py
@@ -0,0 +1,15 @@
+from flask import Blueprint, render_template
+
+auth = Blueprint('auth', __name__)
+
+@auth.route('/login')
+def login():
+    return render_template("404.html")
+
+@auth.route('/logout')
+def logout():
+    return render_template("404.html")
+
+@auth.route('/signup')
+def signup():
+    return render_template("404.html")
\ No newline at end of file
diff --git a/webui/website/models.py b/webui/website/models.py
new file mode 100644
index 0000000..e69de29
--- /dev/null
+++ b/webui/website/models.py
diff --git a/webui/website/static/favicon-32x32.png b/webui/website/static/favicon-32x32.png
new file mode 100644
index 0000000..b56e05f
--- /dev/null
+++ b/webui/website/static/favicon-32x32.png
diff --git a/webui/website/static/favicon.ico b/webui/website/static/favicon.ico
new file mode 100644
index 0000000..ab8f313
--- /dev/null
+++ b/webui/website/static/favicon.ico
diff --git a/webui/website/static/main.js b/webui/website/static/main.js
new file mode 100644
index 0000000..a40c504
--- /dev/null
+++ b/webui/website/static/main.js
@@ -0,0 +1,98 @@
+/**
+ * Utils
+ */
+
+// Throttle
+//
+const throttle = (callback, limit) => {
+  let timeoutHandler = null;
+  return () => {
+    if (timeoutHandler == null) {
+      timeoutHandler = setTimeout(() => {
+        callback();
+        timeoutHandler = null;
+      }, limit);
+    }
+  };
+};
+
+// addEventListener Helper
+//
+const listen = (ele, e, callback) => {
+  if (document.querySelector(ele) !== null) {
+    document.querySelector(ele).addEventListener(e, callback);
+  }
+};
+
+/**
+ * Functions
+ */
+
+// Auto Hide Header
+//
+let header = document.getElementById('site-header');
+let lastScrollPosition = window.pageYOffset;
+
+const autoHideHeader = () => {
+  let currentScrollPosition = window.pageYOffset;
+  if (currentScrollPosition > lastScrollPosition) {
+    header.classList.remove('slideInUp');
+    header.classList.add('slideOutDown');
+  } else {
+    header.classList.remove('slideOutDown');
+    header.classList.add('slideInUp');
+  }
+  lastScrollPosition = currentScrollPosition;
+};
+
+// Mobile Menu Toggle
+//
+let mobileMenuVisible = false;
+
+const toggleMobileMenu = () => {
+  let mobileMenu = document.getElementById('mobile-menu');
+  if (mobileMenuVisible == false) {
+    mobileMenu.style.animationName = 'bounceInRight';
+    mobileMenu.style.webkitAnimationName = 'bounceInRight';
+    mobileMenu.style.display = 'block';
+    mobileMenuVisible = true;
+  } else {
+    mobileMenu.style.animationName = 'bounceOutRight';
+    mobileMenu.style.webkitAnimationName = 'bounceOutRight';
+    mobileMenuVisible = false;
+  }
+};
+
+// Featured Image Toggle
+//
+const showImg = () => {
+  document.querySelector('.bg-img').classList.add('show-bg-img');
+};
+
+const hideImg = () => {
+  document.querySelector('.bg-img').classList.remove('show-bg-img');
+};
+
+// ToC Toggle
+//
+const toggleToc = () => {
+  document.getElementById('toc').classList.toggle('show-toc');
+};
+
+if (header !== null) {
+  listen('#menu-btn', 'click', toggleMobileMenu);
+  listen('#toc-btn', 'click', toggleToc);
+  listen('#img-btn', 'click', showImg);
+  listen('.bg-img', 'click', hideImg);
+
+  window.addEventListener(
+    'scroll',
+    throttle(() => {
+      autoHideHeader();
+
+      if (mobileMenuVisible == true) {
+        toggleMobileMenu();
+      }
+    }, 250)
+  );
+}
diff --git a/webui/website/static/navbar.css b/webui/website/static/navbar.css
new file mode 100644
index 0000000..45c5fd3
--- /dev/null
+++ b/webui/website/static/navbar.css
@@ -0,0 +1,60 @@
+/* Add a black background color to the top navigation */

+.topnav {

+  background-color: #333;

+  overflow: hidden;

+  position: fixed;

+  top: 0;

+  width: 100%;

+  z-index: 100;

+}

+

+/* Style the links inside the navigation bar */

+.topnav a {

+  float: left;

+  display: block;

+  color: #f2f2f2;

+  text-align: center;

+  padding: 14px 16px;

+  text-decoration: none;

+  font-size: 17px;

+}

+

+/* Change the color of links on hover */

+.topnav a:hover {

+  background-color: #ddd;

+  color: black;

+}

+

+/* Add an active class to highlight the current page */

+.topnav a.active {

+  background-color: #4b6298;

+  color: white;

+}

+

+/* Hide the link that should open and close the topnav on small screens */

+.topnav .icon {

+  display: none;

+}

+/* When the screen is less than 600 pixels wide, hide all links, except for the first one ("Home"). Show the link that contains should open and close the topnav (.icon) */

+@media screen and (max-width: 600px) {

+  .topnav a:not(:first-child) {display: none;}

+  .topnav a.icon {

+    float: right;

+    display: block;

+  }

+}

+

+/* The "responsive" class is added to the topnav with JavaScript when the user clicks on the icon. This class makes the topnav look good on small screens (display the links vertically instead of horizontally) */

+@media screen and (max-width: 600px) {

+  .topnav.responsive {position: relative;}

+  .topnav.responsive a.icon {

+    position: absolute;

+    right: 0;

+    top: 0;

+  }

+  .topnav.responsive a {

+    float: none;

+    display: block;

+    text-align: left;

+  }

+}

diff --git a/webui/website/static/robots.txt b/webui/website/static/robots.txt
new file mode 100644
index 0000000..a252a5f
--- /dev/null
+++ b/webui/website/static/robots.txt
@@ -0,0 +1,3 @@
+User-agent: *
+Disallow:
+Allow: /
diff --git a/webui/website/static/style.css b/webui/website/static/style.css
new file mode 100644
index 0000000..1fa7d1b
--- /dev/null
+++ b/webui/website/static/style.css
@@ -0,0 +1,7 @@
+/*! normalize.css v8.0.0 | MIT License | github.com/necolas/normalize.css */html{line-height:1.15;-webkit-text-size-adjust:100%;}body{margin:0}h1{font-size:2em;margin:.67em 0}hr{box-sizing:content-box;height:0;overflow:visible;}pre{font-family:monospace,monospace;font-size:1em;}a{background-color:rgba(0,0,0,0)}abbr[title]{border-bottom:none;text-decoration:underline;text-decoration:underline dotted;}b,strong{font-weight:bolder}code,kbd,samp{font-family:monospace,monospace;font-size:1em;}small{font-size:80%}sub,sup{font-size:75%;line-height:0;position:relative;vertical-align:baseline}sub{bottom:-.25em}sup{top:-.5em}img{border-style:none}button,input,optgroup,select,textarea{font-family:inherit;font-size:100%;line-height:1.15;margin:0;}button,input{overflow:visible}button,select{text-transform:none}button,[type=button],[type=reset],[type=submit]{-webkit-appearance:button}button::-moz-focus-inner,[type=button]::-moz-focus-inner,[type=reset]::-moz-focus-inner,[type=submit]::-moz-focus-inner{border-style:none;padding:0}button:-moz-focusring,[type=button]:-moz-focusring,[type=reset]:-moz-focusring,[type=submit]:-moz-focusring{outline:1px dotted ButtonText}fieldset{padding:.35em .75em .625em}legend{box-sizing:border-box;color:inherit;display:table;max-width:100%;padding:0;white-space:normal;}progress{vertical-align:baseline}textarea{overflow:auto}[type=checkbox],[type=radio]{box-sizing:border-box;padding:0;}[type=number]::-webkit-inner-spin-button,[type=number]::-webkit-outer-spin-button{height:auto}[type=search]{-webkit-appearance:textfield;outline-offset:-2px;}[type=search]::-webkit-search-decoration{-webkit-appearance:none}::-webkit-file-upload-button{-webkit-appearance:button;font:inherit;}details{display:block}summary{display:list-item}template{display:none}[hidden]{display:none}.chroma{color:#eee;background-color:#31333d}.chroma .err{color:#960050;background-color:#1e0010}.chroma .lntd{vertical-align:top;padding:0;margin:0;border:0}.chroma .lntable{border-spacing:0;padding:0;margin:0;border:0;width:auto;overflow:auto;display:block}.chroma .hl{display:block;width:100%;background-color:#ffc}.chroma .lnt{margin-right:.4em;padding:0 .4em 0 .4em}.chroma .ln{margin-right:.4em;padding:0 .4em 0 .4em}.chroma .k{color:#66d9ef}.chroma .kc{color:#66d9ef}.chroma .kd{color:#66d9ef}.chroma .kn{color:#f92672}.chroma .kp{color:#66d9ef}.chroma .kr{color:#66d9ef}.chroma .kt{color:#66d9ef}.chroma .na{color:#a6e22e}.chroma .nc{color:#a6e22e}.chroma .no{color:#66d9ef}.chroma .nd{color:#a6e22e}.chroma .ne{color:#a6e22e}.chroma .nf{color:#a6e22e}.chroma .nx{color:#a6e22e}.chroma .nt{color:#f92672}.chroma .l{color:#ae81ff}.chroma .ld{color:#e6db74}.chroma .s{color:#e6db74}.chroma .sa{color:#e6db74}.chroma .sb{color:#e6db74}.chroma .sc{color:#e6db74}.chroma .dl{color:#e6db74}.chroma .sd{color:#e6db74}.chroma .s2{color:#e6db74}.chroma .se{color:#ae81ff}.chroma .sh{color:#e6db74}.chroma .si{color:#e6db74}.chroma .sx{color:#e6db74}.chroma .sr{color:#e6db74}.chroma .s1{color:#e6db74}.chroma .ss{color:#e6db74}.chroma .m{color:#ae81ff}.chroma .mb{color:#ae81ff}.chroma .mf{color:#ae81ff}.chroma .mh{color:#ae81ff}.chroma .mi{color:#ae81ff}.chroma .il{color:#ae81ff}.chroma .mo{color:#ae81ff}.chroma .o{color:#f92672}.chroma .ow{color:#f92672}.chroma .c{color:#75715e}.chroma .ch{color:#75715e}.chroma .cm{color:#75715e}.chroma .c1{color:#75715e}.chroma .cs{color:#75715e}.chroma .cp{color:#75715e}.chroma .cpf{color:#75715e}.chroma .gd{color:#f92672}.chroma .ge{font-style:italic}.chroma .gi{color:#a6e22e}.chroma .gs{font-weight:bold}.chroma .gu{color:#75715e}/*!
+ * animate.css -https://daneden.github.io/animate.css/
+ * Version - 3.7.0
+ * Licensed under the MIT license - http://opensource.org/licenses/MIT
+ *
+ * Copyright (c) 2018 Daniel Eden
+ */@-webkit-keyframes bounceInRight{0%, 60%, 75%, 90%, to{-webkit-animation-timing-function:cubic-bezier(.215, .61, .355, 1);animation-timing-function:cubic-bezier(.215, .61, .355, 1)}0%{opacity:0;-webkit-transform:translate3d(3000px, 0, 0);transform:translate3d(3000px, 0, 0)}60%{opacity:1;-webkit-transform:translate3d(-25px, 0, 0);transform:translate3d(-25px, 0, 0)}75%{-webkit-transform:translate3d(10px, 0, 0);transform:translate3d(10px, 0, 0)}90%{-webkit-transform:translate3d(-5px, 0, 0);transform:translate3d(-5px, 0, 0)}to{-webkit-transform:translateZ(0);transform:translateZ(0)}}@keyframes bounceInRight{0%, 60%, 75%, 90%, to{-webkit-animation-timing-function:cubic-bezier(.215, .61, .355, 1);animation-timing-function:cubic-bezier(.215, .61, .355, 1)}0%{opacity:0;-webkit-transform:translate3d(3000px, 0, 0);transform:translate3d(3000px, 0, 0)}60%{opacity:1;-webkit-transform:translate3d(-25px, 0, 0);transform:translate3d(-25px, 0, 0)}75%{-webkit-transform:translate3d(10px, 0, 0);transform:translate3d(10px, 0, 0)}90%{-webkit-transform:translate3d(-5px, 0, 0);transform:translate3d(-5px, 0, 0)}to{-webkit-transform:translateZ(0);transform:translateZ(0)}}.bounceInRight{-webkit-animation-name:bounceInRight;animation-name:bounceInRight}@-webkit-keyframes bounceOutRight{20%{opacity:1;-webkit-transform:translate3d(-20px, 0, 0);transform:translate3d(-20px, 0, 0)}to{opacity:0;-webkit-transform:translate3d(2000px, 0, 0);transform:translate3d(2000px, 0, 0)}}@keyframes bounceOutRight{20%{opacity:1;-webkit-transform:translate3d(-20px, 0, 0);transform:translate3d(-20px, 0, 0)}to{opacity:0;-webkit-transform:translate3d(2000px, 0, 0);transform:translate3d(2000px, 0, 0)}}.bounceOutRight{-webkit-animation-name:bounceOutRight;animation-name:bounceOutRight}@-webkit-keyframes fadeIn{0%{opacity:0}to{opacity:1}}@keyframes fadeIn{0%{opacity:0}to{opacity:1}}.fadeIn{-webkit-animation-name:fadeIn;animation-name:fadeIn}@-webkit-keyframes slideInUp{0%{-webkit-transform:translate3d(0, 100%, 0);transform:translate3d(0, 100%, 0);visibility:visible}to{-webkit-transform:translateZ(0);transform:translateZ(0)}}@keyframes slideInUp{0%{-webkit-transform:translate3d(0, 100%, 0);transform:translate3d(0, 100%, 0);visibility:visible}to{-webkit-transform:translateZ(0);transform:translateZ(0)}}.slideInUp{-webkit-animation-name:slideInUp;animation-name:slideInUp}@-webkit-keyframes slideOutDown{0%{-webkit-transform:translateZ(0);transform:translateZ(0)}to{visibility:hidden;-webkit-transform:translate3d(0, 100%, 0);transform:translate3d(0, 100%, 0)}}@keyframes slideOutDown{0%{-webkit-transform:translateZ(0);transform:translateZ(0)}to{visibility:hidden;-webkit-transform:translate3d(0, 100%, 0);transform:translate3d(0, 100%, 0)}}.slideOutDown{-webkit-animation-name:slideOutDown;animation-name:slideOutDown}.animated{-webkit-animation-duration:1s;animation-duration:1s;-webkit-animation-fill-mode:both;animation-fill-mode:both}.animated.infinite{-webkit-animation-iteration-count:infinite;animation-iteration-count:infinite}.animated.delay-1s{-webkit-animation-delay:1s;animation-delay:1s}.animated.delay-2s{-webkit-animation-delay:2s;animation-delay:2s}.animated.delay-3s{-webkit-animation-delay:3s;animation-delay:3s}.animated.delay-4s{-webkit-animation-delay:4s;animation-delay:4s}.animated.delay-5s{-webkit-animation-delay:5s;animation-delay:5s}.animated.fast{-webkit-animation-duration:.8s;animation-duration:.8s}.animated.faster{-webkit-animation-duration:.5s;animation-duration:.5s}.animated.slow{-webkit-animation-duration:2s;animation-duration:2s}.animated.slower{-webkit-animation-duration:3s;animation-duration:3s}@media (prefers-reduced-motion){.animated{-webkit-animation:unset !important;animation:unset !important;-webkit-transition:none !important;transition:none !important}}.gg-check{box-sizing:border-box;position:relative;display:block;transform:scale(var(--ggs, 1));width:22px;height:22px;border:2px solid rgba(0,0,0,0);border-radius:100px}.gg-check::after{content:"";display:block;box-sizing:border-box;position:absolute;left:3px;top:-1px;width:6px;height:10px;border-width:0 2px 2px 0;border-style:solid;transform-origin:bottom left;transform:rotate(45deg)}.gg-clipboard{box-sizing:border-box;position:relative;display:block;transform:scale(var(--ggs, 1));width:18px;height:18px;border:2px solid;border-radius:2px}.gg-clipboard::after,.gg-clipboard::before{content:"";display:block;box-sizing:border-box;position:absolute;border-radius:2px;width:10px;left:2px}.gg-clipboard::before{border:2px solid;border-bottom-left-radius:3px;border-bottom-right-radius:3px;top:-2px;height:6px}.gg-clipboard::after{height:2px;background:currentColor;box-shadow:0 -4px 0 0;bottom:2px}::-webkit-scrollbar{width:8px;height:8px;background:#31333d}::-webkit-scrollbar-thumb{background:#888}::-webkit-scrollbar-thumb:hover{background:#c6cddb}html{background:#494f5c;line-height:1.6;letter-spacing:.06em}body,button,input,select,textarea{color:#c6cddb;font-family:"Trebuchet MS",Verdana,"Verdana Ref","Segoe UI",Candara,"Lucida Grande","Lucida Sans Unicode","Lucida Sans",Tahoma,sans-serif}pre,code,pre tt{font-family:Consolas,"Andale Mono WT","Andale Mono",Menlo,Monaco,"Lucida Console","Lucida Sans Typewriter","DejaVu Sans Mono","Bitstream Vera Sans Mono","Liberation Mono","Nimbus Mono L","Courier New",Courier,"YaHei Consolas Hybrid",monospace,"Segoe UI Emoji","PingFang SC","Microsoft YaHei"}pre{max-height:40em;padding:.7em 1.1em;overflow:auto;font-size:.9em;line-height:1.5;letter-spacing:normal;white-space:pre-wrap;word-wrap:break-word;color:#eee;border-radius:4px}pre code{padding:0;margin:0;background:#31333d}code{color:#eee;background:#7d828a;border-radius:3px;padding:0 3px;margin:0 4px;word-break:break-all;letter-spacing:normal}blockquote{border-left:.25em solid;margin:1em;padding:0 1em;font-style:italic}blockquote cite{font-weight:bold;font-style:normal}blockquote cite::before{content:"—— "}a{color:#c6cddb;text-decoration:none;border:none;transition-property:color;transition-duration:.4s;transition-timing-function:ease-out}a:hover{color:#fff}a:focus{outline:none}hr{opacity:.2;border-width:0 0 5px 0;border-style:dashed;background:rgba(0,0,0,0);width:50%;margin:1.8em auto}table{border-collapse:collapse;border-spacing:0;empty-cells:show;width:100%;max-width:100%}table th,table td{padding:1.5%;border:1px solid}table th{font-weight:700;vertical-align:bottom}.section-inner{margin:0 auto;max-width:1200px;width:93%}.thin{max-width:720px;margin:auto}.feather{display:inline-block;vertical-align:-.125em;width:1em;height:1em}.desktop-only,.desktop-only-ib{display:none}.screen-reader-text{border:0;clip:rect(1px, 1px, 1px, 1px);clip-path:inset(50%);height:1px;margin:-1px;overflow:hidden;padding:0;position:absolute !important;width:1px;word-wrap:normal !important}.screen-reader-text:focus{background-color:#f1f1f1;border-radius:3px;box-shadow:0 0 2px 2px rgba(0,0,0,.6);clip:auto !important;clip-path:none;color:#21759b;display:block;font-size:14px;font-size:.875rem;font-weight:bold;height:auto;left:5px;line-height:normal;padding:15px 23px 14px;text-decoration:none;top:5px;width:auto;z-index:100000}#site-header{position:fixed;z-index:1;bottom:0;width:100%;box-sizing:border-box;box-shadow:-1px -2px 3px rgba(0,0,0,.45);background-color:#3b3e48}.hdr-wrapper{display:flex;justify-content:space-between;align-items:center;padding:.5em 0;font-size:1.2rem}.hdr-wrapper .site-branding{display:inline-block;margin-right:.8em;font-size:1.2em}.hdr-wrapper .site-nav{display:inline-block;font-size:1.1em;opacity:.8}.hdr-wrapper .site-nav a{margin-left:.8em}.hdr-icons{font-size:1.2em}.hdr-social{display:inline-block;margin-left:.6em}.hdr-social>a{margin-left:.4em}.hdr-btn{border:none;background:none;padding:0;margin-left:.4em;cursor:pointer}#menu-btn{display:none;margin-left:.6em;cursor:pointer}#mobile-menu{position:fixed;bottom:4.8em;right:1.5em;display:none;padding:.6em 1.8em;z-index:1;box-sizing:border-box;box-shadow:-1px -2px 3px 0px rgba(0,0,0,.45);background-color:#3b3e48}#mobile-menu ul{list-style:none;margin:0;padding:0;line-height:2;font-size:1.2em}#site-footer{text-align:center;font-size:.9em;margin-bottom:96px;margin-top:64px}#site-footer p{margin:0}#spotlight{display:flex;height:100vh;flex-direction:column;align-items:center;justify-content:center;max-width:93%;margin:auto;font-size:1.5rem}#spotlight.error-404{flex-direction:row;line-height:normal}p.img-404{margin:0}p.img-404 svg{width:180px;max-width:100%;height:auto}.banner-404{margin-left:2em}.banner-404 h1{font-size:3em;margin:.5rem 0}.banner-404 p{margin-top:0;margin-bottom:.6em}.banner-404 .btn-404{font-size:.8em}.banner-404 .btn-404 a{display:inline-block;border:2px solid #c6cddb;border-radius:5px;padding:5px;transition-property:color,border-color;word-break:break-all}.banner-404 .btn-404 a:first-child{margin-right:1em}.banner-404 .btn-404 a:hover{border-color:#fff}.banner-404 .btn-404 a svg{margin-right:.5em}#home-center{display:flex;flex-grow:1;flex-direction:column;justify-content:center}#home-title{margin:0;text-align:center}#home-subtitle{margin-top:0;margin-bottom:1.5em;text-align:center;line-height:normal;font-size:.7em;font-style:italic;opacity:.9}#home-social{font-size:1.4em;text-align:center;opacity:.8}#home-social a{margin:0 .2em}#home-nav{opacity:.8}#home-nav a{display:block;text-align:center;margin-top:.5em}#home-footer{text-align:center;font-size:.6em;line-height:normal;opacity:.6}#home-footer p{margin-top:0}.posts-group{display:flex;margin-bottom:1.9em;line-height:normal}.posts-group .post-year{padding-top:6px;margin-right:1.8em;font-size:1.6em;opacity:.6}.posts-group .posts-list{flex-grow:1;margin:0;padding:0;list-style:none}.posts-group .post-item{border-bottom:1px #7d828a dashed}.posts-group .post-item a{display:flex;justify-content:space-between;align-items:baseline;padding:12px 0}.posts-group .post-day{flex-shrink:0;margin-left:1em;opacity:.6}.bg-img{width:100vw;height:100vh;opacity:.03;z-index:-1;position:fixed;top:0;background-attachment:fixed;background-repeat:no-repeat;background-size:cover;background-position:center;transition:opacity .5s}.show-bg-img{z-index:100;opacity:1;cursor:pointer}.post-header{margin-top:1.2em;line-height:normal}.post-header .post-meta{font-size:.9em;letter-spacing:normal;opacity:.6}.post-header h1{margin-top:.1em}hr.post-end{width:50%;margin-top:1.6em;margin-bottom:.8em;margin-left:0;border-style:solid;border-bottom-width:4px}.content{text-align:justify;text-justify:inter-ideograph}.content a{word-break:break-all;border:none;box-shadow:inset 0 -4px 0 #018574;transition-property:background-color}.content a:hover{background-color:#018574}.content figure{max-width:100%;height:auto;margin:0;text-align:center}.content figure p{font-size:.8em;font-style:italic;opacity:.6}.content figure.left{float:left;margin-right:1.5em;max-width:50%}.content figure.right{float:right;margin-left:1.5em;max-width:50%}.content figure.big{max-width:100vw}.content img{display:block;max-width:100%;height:auto;margin:auto;border-radius:4px}.content ul,.content ol{padding:0;margin-left:1.8em}.footnote-definition{font-size:.85em}.footnote-definition a{box-shadow:none;text-decoration:underline;transition-property:color}.footnote-definition a:hover{background:rgba(0,0,0,0)}.footnote-definition a.footnote-return{text-decoration:none}.footnote-definition ol{line-height:1.8}.footnote-definition p{display:inline}.footnote-ref a{box-shadow:none;text-decoration:none;padding:2px;border-radius:2px;background-color:#31333d}.post-info{font-size:.8rem;line-height:normal;opacity:.6}.post-info p{margin:.8em 0}.post-info a:hover{border-bottom:1px solid #018574}.post-info svg{margin-right:.8em}.post-info .tag{margin-right:.5em}.post-info .tag::before{content:"#"}#toc{position:fixed;left:50%;top:0;display:none}.toc-title{margin-left:1em;margin-bottom:.5em;font-size:.8em;font-weight:bold}#TableOfContents{font-size:.8em;opacity:.6}#TableOfContents ul{padding-left:1em;margin:0}#TableOfContents>ul{list-style-type:none}#TableOfContents>ul ul ul{font-size:.9em}#TableOfContents a:hover{border-bottom:#018574 1px solid}.post-nav{display:flex;justify-content:space-between;margin-top:1.5em;margin-bottom:2.5em;font-size:1.2em}.post-nav a{flex-basis:50%;flex-grow:1}.post-nav .next-post{text-align:left;padding-right:5px}.post-nav .prev-post{text-align:right;padding-left:5px}.post-nav .post-nav-label{font-size:.8em;opacity:.8;text-transform:uppercase}@media (min-width: 800px){.site-main{margin-top:3em}hr.post-end{width:40%}}@media (min-width: 960px){.site-main{margin-top:6em}}@media (min-width: 1300px){.site-main{margin-top:8em}.desktop-only,#toc.show-toc{display:block}.desktop-only-ib{display:inline-block}figure.left{margin-left:-240px}figure.left p{text-align:left}figure.right{margin-right:-240px}figure.right p{text-align:right}figure.big{width:1200px;margin-left:-240px}hr.post-end{width:30%}#toc{top:13em;margin-left:370px;max-width:220px}}@media (min-width: 1800px){.site-main{margin-top:10em}.section-inner{max-width:1600px}.thin{max-width:960px}figure.left{max-width:75%;margin-left:-320px}figure.right{max-width:75%;margin-right:-320px}figure.big{width:1600px;margin-left:-320px}hr.post-end{width:30%}#toc{top:15em;margin-left:490px;max-width:300px}}@media (max-width: 760px){.hide-in-mobile,.site-nav.hide-in-mobile{display:none}#menu-btn{display:inline-block}.posts-group{display:block}.posts-group .post-year{margin:-6px 0 4px}#spotlight.error-404{flex-direction:column;text-align:center}#spotlight.error-404 .banner-404{margin:0}}@media (max-width: 520px){.content figure.left,.content figure.right{float:unset;max-width:100%;margin:0}hr.post-end{width:60%}#mobile-menu{right:1.2em}}.code-badge{margin:.4em 0em}.highlight-copy-btn{margin-right:7px;float:right;border:0;border-radius:4px;padding:1px;font-size:.7em;line-height:1.8;color:#fff;background-color:#777;opacity:.6;min-width:55px;text-align:center}
\ No newline at end of file
diff --git a/webui/website/static/style2.css b/webui/website/static/style2.css
new file mode 100644
index 0000000..f50e8f0
--- /dev/null
+++ b/webui/website/static/style2.css
@@ -0,0 +1,34 @@
+.buttonclick {
+  background-color: #383737;
+  border-radius: 4px;
+  border-style: none;
+  box-sizing: border-box;
+  color: #fff;
+  cursor: pointer;
+  display: inline-block;
+  font-family: "Farfetch Basis","Helvetica Neue",Arial,sans-serif;
+  font-size: 16px;
+  font-weight: 700;
+  line-height: 1.5;
+  margin: 0 auto;
+  margin-top: 10px;
+  margin-bottom: 10px;
+  max-width: 200px;
+  min-height: 44px;
+  min-width: 10px;
+  outline: none;
+  overflow: hidden;
+  padding: 9px 20px 8px;
+  position: relative;
+  text-align: center;
+  text-transform: none;
+  user-select: none;
+  -webkit-user-select: none;
+  touch-action: manipulation;
+  width: 100%;
+}
+
+.buttonclick:hover,
+.buttonclick:focus {
+  opacity: .75;
+}
diff --git a/webui/website/templates/404.html b/webui/website/templates/404.html
new file mode 100644
index 0000000..e207e9e
--- /dev/null
+++ b/webui/website/templates/404.html
@@ -0,0 +1,13 @@
+<!DOCTYPE html>
+<html>
+<head>
+  <title>Page Not Found</title>
+  <link rel="stylesheet" type="text/css" href="{{ url_for('static', filename='style.css') }}">
+</head>
+<body>
+  <div class="error-container">
+    <h1>404 - Page Not Found</h1>
+    <p>This feature will soon be added!</p>
+  </div>
+</body>
+</html>
\ No newline at end of file
diff --git a/webui/website/templates/base.html b/webui/website/templates/base.html
new file mode 100644
index 0000000..ed37c38
--- /dev/null
+++ b/webui/website/templates/base.html
@@ -0,0 +1,70 @@
+<!DOCTYPE html>
+<html lang="en-us">
+    <head>
+        <meta charset="UTF-8">
+        <meta name="viewport" content="width=device-width, initial-scale=1.0">
+        <meta itemprop="name" content="Raspberry Pi Face Recognition">
+        <meta itemprop="description" content="My Mini Project">
+        <link rel="icon" type="image/png" sizes="32x32" href="{{ url_for('static', filename='favicon-32x32.png') }}">
+        <link rel="icon" type="image/png" sizes="16x16" href="{{ url_for('static', filename='favicon-16x16.png') }}">
+        <link rel="shortcut icon" type="image/x-icon" href="{{ url_for('static', filename='favicon.ico') }}">
+        <link rel="stylesheet" type="text/css" href="{{ url_for('static', filename='style.css') }}">
+        <link rel="stylesheet" type="text/css" href="{{ url_for('static', filename='style2.css') }}">
+        <link rel="stylesheet" type="text/css" href="{{ url_for('static', filename='navbar.css') }}">
+        <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" crossorigin="anonymous">
+
+        <title>{% block title %}Raspberry Pi Face Recognition{% endblock %}</title>
+    </head>
+    <body>
+
+        <div class="topnav" id="myTopnav">
+            <a href="/" class="active">Home</a>
+            <a href="/live">Live-feed</a>
+            <a href="/login">Login</a>
+            <!-- <a href="/logout">Logout</a> -->
+            <a href="javascript:void(0);" class="icon" onclick="myFunction()">
+                <i class="fa fa-bars"></i>
+            </a>
+        </div>
+
+        <div class="container">{% block content %} {% endblock %}</div>
+        <div id="home-social">
+          <a href="https://github.com/justsaumit/opencv-face-recognition" target="_blank" rel="noopener">
+              <svg xmlns="http://www.w3.org/2000/svg" class="feather" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
+                <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>
+            </a>
+    </div>
+    <div id="home-footer">
+      <p>&copy; 2023
+        <a>TEAM 3 - Meer Junaid, Bikram Kumar Poddar, Saumit Dinesan</a>
+      </p>
+    </div>
+        <script
+          src="https://code.jquery.com/jquery-3.2.1.slim.min.js"
+          integrity="sha384-KJ3o2DKtIkvYIK3UENzmM7KCkRr/rE9/Qpg6aAZGJwFDMVNA/GpGFF93hXpG5KkN"
+          crossorigin="anonymous"
+        ></script>
+        <script
+          src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.9/umd/popper.min.js"
+          integrity="sha384-ApNbgh9B+Y1QKtv3Rn7W3mgPxhU9K/ScQsAP7hUibX39j7fakFPskvXusvfa0b4Q"
+          crossorigin="anonymous"
+        ></script>
+        <script
+          src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js"
+          integrity="sha384-JZR6Spejh4U02d8jOt6vLEHfe/JQGiRRSQQxSfFWpi1MquVdAyjUar5+76PVCmYl"
+          crossorigin="anonymous"
+        ></script>
+        <script>
+          function myFunction() {
+            var x = document.getElementById("myTopnav");
+            if (x.className === "topnav") {
+              x.className += " responsive";
+            } else {
+              x.className = "topnav";
+            }
+          }
+        </script>
+        <script src="{{ url_for('static', filename='main.js') }}"></script>
+    </body>
+</html>
diff --git a/webui/website/templates/home.html b/webui/website/templates/home.html
new file mode 100644
index 0000000..a2c4191
--- /dev/null
+++ b/webui/website/templates/home.html
@@ -0,0 +1,19 @@
+{% extends "base.html" %}
+{% block title %}Raspberry Pi Face Recognition{% endblock %}
+
+{% block content %}
+<body id="page">
+
+    <div id="spotlight" class="animated fadeIn">
+        <div id="home-center">
+          <h1 id="home-title">Raspberry Pi Face Recognition</h1>
+          <p id="home-subtitle">This project aims to develop a portable and wireless Face Recognition System (FRS) using Raspberry Pi with a Camera Module attachment.</p>
+              <nav id="home-nav" class="site-nav">
+                  <a href="/live">Live-feed</a>
+                  <a href="/login">Login</a>
+              </nav>
+      </div>
+
+      
+
+{% endblock %}
\ No newline at end of file
diff --git a/webui/website/templates/html.html b/webui/website/templates/html.html
new file mode 100644
index 0000000..8387ebb
--- /dev/null
+++ b/webui/website/templates/html.html
@@ -0,0 +1,44 @@
+<!DOCTYPE html>

+<html lang="en">

+<head>

+  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">

+    <meta charset="UTF-8">

+    <meta http-equiv="X-UA-Compatible" content="IE=edge">

+    <meta name="viewport" content="width=device-width, initial-scale=1.0">

+    <title>Document</title>

+    <link rel="stylesheet" href="css.css">

+</head>

+<body>

+    <div class="nav">

+        <input type="checkbox" id="nav-check">

+        <div class="nav-header">

+          <div class="nav-title">

+            MysteryCode

+          </div>

+        </div>

+        <div class="nav-btn">

+          <label for="nav-check">

+            <span></span>

+            <span></span>

+            <span></span>

+          </label>

+        </div>

+        

+        <div class="nav-links">

+            <ul>

+          <li><a href="#" target="_blank">Home</a></li>

+          <li><a href="#" target="_blank">About</a></li>

+          <li><a href="#" target="_blank">Services</a></li>

+          <li><a href="#" target="_blank">Portfolio</a></li>

+          <li><a href="#" target="_blank">Contact</a></li>

+          <a class="icon">

+            <i class="fa fa-twitter"></i>

+            <i class="fa fa-linkedin"></i>

+            <i class="fa fa-youtube"></i>

+

+          </a>

+            </ul>

+        </div>

+      </div>

+</body>

+</html>
\ No newline at end of file
diff --git a/webui/website/templates/index2.html b/webui/website/templates/index2.html
new file mode 100644
index 0000000..e69de29
--- /dev/null
+++ b/webui/website/templates/index2.html
diff --git a/webui/website/templates/index3.html b/webui/website/templates/index3.html
new file mode 100644
index 0000000..1c33be9
--- /dev/null
+++ b/webui/website/templates/index3.html
@@ -0,0 +1,58 @@
+<!DOCTYPE html>
+<html lang="en-us">
+  <meta charset="UTF-8">
+  <meta name="viewport" content="width=device-width, initial-scale=1.0">
+  <meta http-equiv="X-UA-Compatible" content="ie=edge">
+  <meta itemprop="name" content="Raspberry Pi Face Recognition">
+  <meta itemprop="description" content="My Mini Project">
+
+  <link rel="icon" type="image/png" sizes="32x32" href="favicon-32x32.png" />
+  <link rel="icon" type="image/png" sizes="16x16" href="favicon-16x16.png" />
+  <link rel="shortcut icon" href="favicon.ico" type="image/x-icon">
+  <link rel="stylesheet" type="text/css" href="style.css">
+  <link rel="stylesheet" type="text/css" href="style2.css">
+  <script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
+  <title>Raspberry Pi Face Recognition</title>
+
+  <body id="page">
+      <div id="spotlight" class="animated fadeIn">
+          <div id="home-center">
+            <h1 id="home-title">Raspberry Pi Face Recognition</h1>
+            <p id="home-subtitle">This project aims to develop a portable and wireless Face Recognition System (FRS) using Raspberry Pi with a Camera Module attachment.</p>
+                <nav id="home-nav" class="site-nav">
+                    <a href="/live">Live-feed</a>
+                    <a href="/login">Login</a>
+                </nav>
+            <button id="button1" class="buttonclick" role="button">1.Input Face</button>
+            <button id="button2" class="buttonclick" role="button">2.Train Model</button>
+            <button id="button2" class="buttonclick" role="button">3.Face Recognizer</button>
+        </div>
+
+        <div id="home-social">
+            <a href="https://github.com/justsaumit/opencv-face-recognition" target="_blank" rel="noopener me" title="github">
+                <svg xmlns="http://www.w3.org/2000/svg" class="feather" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><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>
+            </a>
+	</div>
+
+         <div id="home-footer">
+            <p>&copy; 2023
+               <a href="https:&#x2F;&#x2F;draconyan.xyz&#x2F">TEAM 3- Meer Junaid, Bikram Kumar Poddar, Saumit Dinesan</a>
+               </a>
+            </p>
+         </div>
+	
+	<script src="main.js"></script>
+
+	<!-- Math rendering -->
+	<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/katex@0.11.1/dist/katex.min.css" integrity="sha384-zB1R0rpPzHqg7Kpt0Aljp8JPLqbXI3bhnPWROx27a9N0Ll6ZP/+DiW/UqRcLbRjq" crossorigin="anonymous">
+        <script defer src="https://cdn.jsdelivr.net/npm/katex@0.11.1/dist/katex.min.js" integrity="sha384-y23I5Q6l+B6vatafAwxRu/0oK/79VlbSz7Q9aiSZUvyWYIYsd+qj+o24G5ZU2zJz" crossorigin="anonymous"></script>
+        <script defer src="https://cdn.jsdelivr.net/npm/katex@0.11.1/dist/contrib/auto-render.min.js" integrity="sha384-kWPLUVMOks5AQFrykwIup5lo0m3iMkkHrD0uJ4H5cjeGihAutqP0yW0J6dpFiVkI" crossorigin="anonymous" onload="renderMathInElement(document.body, { delimiters: [ {left: '$$', right: '$$', display: true}, {left: '$', right: '$', display: false}, {left: '\\[', right: '\\]', display: true}, {left: '\\(', right: '\\)', display: false}]});"></script>
+        <link href="https://unpkg.com/highlightjs-badge/highlightjs/styles/railscasts.css" rel="stylesheet">
+	<script src="https://unpkg.com/highlightjs-badge/highlightjs/highlight.pack.js"></script>
+	<script src="https://unpkg.com/highlightjs-badge/highlightjs-badge.min.js"></script>
+	<script> var pres = document.querySelectorAll("pre>code"); for (var i = 0; i < pres.length; i++) { hljs.highlightBlock(pres[i]);}</script>
+	<script src="https://cdnjs.cloudflare.com/ajax/libs/clipboard.js/2.0.6/clipboard.min.js"></script>
+        <script>var options = {copyIconClass: "gg-clipboard",checkIconClass: "gg-check"};window.highlightJsBadge(options);</script>
+
+  </body>
+</html>
\ No newline at end of file
diff --git a/webui/website/templates/live.html b/webui/website/templates/live.html
new file mode 100644
index 0000000..5d7d62f
--- /dev/null
+++ b/webui/website/templates/live.html
@@ -0,0 +1,9 @@
+{% extends "base.html" %}
+{% block title %}Live feed{% endblock %}
+{% block content %}
+<body id="page">
+    <div id="spotlight" class="animated fadeIn">
+        <h1>Hi<h1>
+      </div>
+
+{% endblock %}
\ No newline at end of file
diff --git a/webui/website/views.py b/webui/website/views.py
new file mode 100644
index 0000000..47a02f5
--- /dev/null
+++ b/webui/website/views.py
@@ -0,0 +1,12 @@
+from flask import Blueprint, render_template
+
+views = Blueprint('views', __name__)
+
+@views.route('/')
+def home():
+    return render_template("home.html")
+
+@views.route('/live')
+def live():
+    return render_template("live.html")
+