From 4a30205c7c2ca5dee773bc41f0cce448c98ad72f Mon Sep 17 00:00:00 2001 From: Saumit Dinesan Date: Thu, 11 May 2023 02:18:29 +0530 Subject: webui: flask dump --- webui/index.html | 64 +++++++++++++++++++++ webui/main.py | 12 ++++ webui/static/favicon-32x32.png | Bin 816 -> 0 bytes webui/static/favicon.ico | Bin 1150 -> 0 bytes webui/static/main.js | 98 --------------------------------- webui/static/robots.txt | 3 - webui/static/style.css | 7 --- webui/static/style2.css | 34 ------------ webui/stream.py | 94 +++++++++++++++++++++++++++++++ webui/stream2.py | 95 ++++++++++++++++++++++++++++++++ webui/templates/404.html | 3 - webui/templates/index.html | 89 ------------------------------ webui/website/__init__.py | 13 +++++ webui/website/auth.py | 15 +++++ webui/website/models.py | 0 webui/website/static/favicon-32x32.png | Bin 0 -> 816 bytes webui/website/static/favicon.ico | Bin 0 -> 1150 bytes webui/website/static/main.js | 98 +++++++++++++++++++++++++++++++++ webui/website/static/navbar.css | 60 ++++++++++++++++++++ webui/website/static/robots.txt | 3 + webui/website/static/style.css | 7 +++ webui/website/static/style2.css | 34 ++++++++++++ webui/website/templates/404.html | 13 +++++ webui/website/templates/base.html | 70 +++++++++++++++++++++++ webui/website/templates/home.html | 19 +++++++ webui/website/templates/html.html | 44 +++++++++++++++ webui/website/templates/index2.html | 0 webui/website/templates/index3.html | 58 +++++++++++++++++++ webui/website/templates/live.html | 9 +++ webui/website/views.py | 12 ++++ 30 files changed, 720 insertions(+), 234 deletions(-) create mode 100644 webui/index.html create mode 100644 webui/main.py delete mode 100644 webui/static/favicon-32x32.png delete mode 100644 webui/static/favicon.ico delete mode 100644 webui/static/main.js delete mode 100644 webui/static/robots.txt delete mode 100644 webui/static/style.css delete mode 100644 webui/static/style2.css create mode 100644 webui/stream.py create mode 100644 webui/stream2.py delete mode 100644 webui/templates/404.html delete mode 100644 webui/templates/index.html create mode 100644 webui/website/__init__.py create mode 100644 webui/website/auth.py create mode 100644 webui/website/models.py create mode 100644 webui/website/static/favicon-32x32.png create mode 100644 webui/website/static/favicon.ico create mode 100644 webui/website/static/main.js create mode 100644 webui/website/static/navbar.css create mode 100644 webui/website/static/robots.txt create mode 100644 webui/website/static/style.css create mode 100644 webui/website/static/style2.css create mode 100644 webui/website/templates/404.html create mode 100644 webui/website/templates/base.html create mode 100644 webui/website/templates/home.html create mode 100644 webui/website/templates/html.html create mode 100644 webui/website/templates/index2.html create mode 100644 webui/website/templates/index3.html create mode 100644 webui/website/templates/live.html create mode 100644 webui/website/views.py (limited to 'webui') diff --git a/webui/index.html b/webui/index.html new file mode 100644 index 0000000..e16e613 --- /dev/null +++ b/webui/index.html @@ -0,0 +1,64 @@ + + + + Raspberry Pi Face Recognition + + + + + + + + + + + +
+
+

Raspberry Pi Face Recognition

+

This project aims to develop a portable and wireless Face Recognition System (FRS) using Raspberry Pi with a Camera Module attachment.

+ + + + +
+ +
+ + + +
+ + +
+ + + + + + + + + + + + + + + diff --git a/webui/main.py b/webui/main.py new file mode 100644 index 0000000..c281aac --- /dev/null +++ b/webui/main.py @@ -0,0 +1,12 @@ +from website import create_app +from flask import render_template + +app = create_app() + +# Define the route for the custom 404 error +@app.errorhandler(404) +def page_not_found(e): + return render_template('404.html'), 404 + +if __name__ == '__main__': + app.run(debug=True) diff --git a/webui/static/favicon-32x32.png b/webui/static/favicon-32x32.png deleted file mode 100644 index b56e05f..0000000 Binary files a/webui/static/favicon-32x32.png and /dev/null differ diff --git a/webui/static/favicon.ico b/webui/static/favicon.ico deleted file mode 100644 index ab8f313..0000000 Binary files a/webui/static/favicon.ico and /dev/null differ diff --git a/webui/static/main.js b/webui/static/main.js deleted file mode 100644 index a40c504..0000000 --- a/webui/static/main.js +++ /dev/null @@ -1,98 +0,0 @@ -/** - * 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/static/robots.txt b/webui/static/robots.txt deleted file mode 100644 index a252a5f..0000000 --- a/webui/static/robots.txt +++ /dev/null @@ -1,3 +0,0 @@ -User-agent: * -Disallow: -Allow: / diff --git a/webui/static/style.css b/webui/static/style.css deleted file mode 100644 index 1fa7d1b..0000000 --- a/webui/static/style.css +++ /dev/null @@ -1,7 +0,0 @@ -/*! 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/static/style2.css b/webui/static/style2.css deleted file mode 100644 index f50e8f0..0000000 --- a/webui/static/style2.css +++ /dev/null @@ -1,34 +0,0 @@ -.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/stream.py b/webui/stream.py new file mode 100644 index 0000000..5560efb --- /dev/null +++ b/webui/stream.py @@ -0,0 +1,94 @@ +#!/usr/bin/python3 + +# Run this script, then point a web browser at http::8000 + +import io +import logging +import socketserver +from http import server +from threading import Condition + +from picamera2 import Picamera2 +from picamera2.encoders import JpegEncoder +from picamera2.outputs import FileOutput + +PAGE = """\ + + +picamera2 MJPEG streaming demo + + +

Picamera2 MJPEG Streaming Demo

+ + + +""" + + +class StreamingOutput(io.BufferedIOBase): + def __init__(self): + self.frame = None + self.condition = Condition() + + def write(self, buf): + with self.condition: + self.frame = buf + self.condition.notify_all() + + +class StreamingHandler(server.BaseHTTPRequestHandler): + def do_GET(self): + if self.path == '/': + self.send_response(301) + self.send_header('Location', '/index.html') + self.end_headers() + elif self.path == '/index.html': + content = PAGE.encode('utf-8') + self.send_response(200) + self.send_header('Content-Type', 'text/html') + self.send_header('Content-Length', len(content)) + self.end_headers() + self.wfile.write(content) + elif self.path == '/stream.mjpg': + self.send_response(200) + self.send_header('Age', 0) + self.send_header('Cache-Control', 'no-cache, private') + self.send_header('Pragma', 'no-cache') + self.send_header('Content-Type', 'multipart/x-mixed-replace; boundary=FRAME') + self.end_headers() + try: + while True: + with output.condition: + output.condition.wait() + frame = output.frame + self.wfile.write(b'--FRAME\r\n') + self.send_header('Content-Type', 'image/jpeg') + self.send_header('Content-Length', len(frame)) + self.end_headers() + self.wfile.write(frame) + self.wfile.write(b'\r\n') + except Exception as e: + logging.warning( + 'Removed streaming client %s: %s', + self.client_address, str(e)) + else: + self.send_error(404) + self.end_headers() + + +class StreamingServer(socketserver.ThreadingMixIn, server.HTTPServer): + allow_reuse_address = True + daemon_threads = True + + +picam2 = Picamera2() +picam2.configure(picam2.create_video_configuration(main={"size": (640, 480)})) +output = StreamingOutput() +picam2.start_recording(JpegEncoder(), FileOutput(output)) + +try: + address = ('', 80) + server = StreamingServer(address, StreamingHandler) + server.serve_forever() +finally: + picam2.stop_recording() diff --git a/webui/stream2.py b/webui/stream2.py new file mode 100644 index 0000000..67439c8 --- /dev/null +++ b/webui/stream2.py @@ -0,0 +1,95 @@ +#!/usr/bin/python3 + +import io +import logging +import socketserver +from http import server +from threading import Condition + +from picamera2 import Picamera2 +from picamera2.encoders import JpegEncoder +from picamera2.outputs import FileOutput + +PAGE = """\ + + +picamera2 MJPEG streaming demo + + +

Picamera2 MJPEG Streaming Demo

+ + + +""" + + +class StreamingOutput(io.BufferedIOBase): + def __init__(self): + self.frame = None + self.condition = Condition() + + def write(self, buf): + with self.condition: + self.frame = buf + self.condition.notify_all() + + +class StreamingHandler(server.BaseHTTPRequestHandler): + def do_GET(self): + if self.path == '/': + self.send_response(301) + self.send_header('Location', '/index.html') + self.end_headers() + elif self.path == '/index.html': + content = PAGE.encode('utf-8') + self.send_response(200) + self.send_header('Content-Type', 'text/html') + self.send_header('Content-Length', len(content)) + self.end_headers() + self.wfile.write(content) + elif self.path == '/stream.mjpg': + self.send_response(200) + self.send_header('Age', 0) + self.send_header('Cache-Control', 'no-cache, private') + self.send_header('Pragma', 'no-cache') + self.send_header('Content-Type', 'multipart/x-mixed-replace; boundary=FRAME') + self.end_headers() + try: + while True: + with output.condition: + output.condition.wait() + frame = output.frame + self.wfile.write(b'--FRAME\r\n') + self.send_header('Content-Type', 'image/jpeg') + self.send_header('Content-Length', len(frame)) + self.end_headers() + self.wfile.write(frame) + self.wfile.write(b'\r\n') + except Exception as e: + logging.warning( + 'Removed streaming client %s: %s', + self.client_address, str(e)) + else: + self.send_error(404) + self.end_headers() + + +class StreamingServer(socketserver.ThreadingMixIn, server.HTTPServer): + allow_reuse_address = True + daemon_threads = True + + +picam2 = Picamera2() +picam2.preview_configuration.main.size = (640, 480) +picam2.start_preview() + +output = StreamingOutput() +picam2.start_recording(JpegEncoder(), FileOutput(output)) + +try: + address = ('', 8000) + server = StreamingServer(address, StreamingHandler) + server.serve_forever() +finally: + picam2.stop_recording() + picam2.stop_preview() diff --git a/webui/templates/404.html b/webui/templates/404.html deleted file mode 100644 index f8414f0..0000000 --- a/webui/templates/404.html +++ /dev/null @@ -1,3 +0,0 @@ - -404 Not Found -

404 Not Found

diff --git a/webui/templates/index.html b/webui/templates/index.html deleted file mode 100644 index 195dcb1..0000000 --- a/webui/templates/index.html +++ /dev/null @@ -1,89 +0,0 @@ - - - - - - - - - - - - Raspberry Pi Face Recognition - - - -
-
-

Raspberry Pi Face Recognition

-

This project aims to develop a portable and wireless Face Recognition System (FRS) using Raspberry Pi with a Camera Module attachment.

- - - - -
- - -
- - - - - - - - - - - - - - - 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 diff --git a/webui/website/static/favicon-32x32.png b/webui/website/static/favicon-32x32.png new file mode 100644 index 0000000..b56e05f Binary files /dev/null and b/webui/website/static/favicon-32x32.png differ diff --git a/webui/website/static/favicon.ico b/webui/website/static/favicon.ico new file mode 100644 index 0000000..ab8f313 Binary files /dev/null and b/webui/website/static/favicon.ico differ 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 @@ + + + + Page Not Found + + + +
+

404 - Page Not Found

+

This feature will soon be added!

+
+ + \ 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 @@ + + + + + + + + + + + + + + + + {% block title %}Raspberry Pi Face Recognition{% endblock %} + + + + + +
{% block content %} {% endblock %}
+ + + + + + + + + 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 %} + + +
+
+

Raspberry Pi Face Recognition

+

This project aims to develop a portable and wireless Face Recognition System (FRS) using Raspberry Pi with a Camera Module attachment.

+ +
+ + + +{% 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 @@ + + + + + + + + Document + + + +
+ +
+
+ MysteryCode +
+
+
+ +
+ +
+ +
+
+ + \ 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 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 @@ + + + + + + + + + + + + + + + Raspberry Pi Face Recognition + + +
+
+

Raspberry Pi Face Recognition

+

This project aims to develop a portable and wireless Face Recognition System (FRS) using Raspberry Pi with a Camera Module attachment.

+ + + + +
+ +
+ + + +
+ + + + + + + + + + + + + + + + + + \ 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 %} + +
+

Hi

+

+ +{% 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") + -- cgit v1.2.3