diff --git a/hodor/controllers/__init__.pyc b/hodor/controllers/__init__.pyc
deleted file mode 100644
index a2297423541c3db4b85e110ae010eb8dd50e2ac7..0000000000000000000000000000000000000000
Binary files a/hodor/controllers/__init__.pyc and /dev/null differ
diff --git a/hodor/controllers/index.py b/hodor/controllers/index.py
new file mode 100644
index 0000000000000000000000000000000000000000..44296a4a0b3429d84f1c52acbd8f630f5de77ef9
--- /dev/null
+++ b/hodor/controllers/index.py
@@ -0,0 +1,16 @@
+# -*- coding: utf-8 -*-
+from hodor import app
+from flask import render_template, request
+from flask_wtf import FlaskForm
+from wtforms import StringField
+from wtforms.validators import DataRequired
+
+
+class CreateForm(FlaskForm):
+ text = StringField('name', validators=[DataRequired()])
+
+
+@app.route('/')
+def start():
+ return render_template('index/index.html')
+
diff --git a/hodor/controllers/printer.py b/hodor/controllers/printer.py
deleted file mode 100644
index 0e16da938b14b94fe03a5e745afa4569f47d0789..0000000000000000000000000000000000000000
--- a/hodor/controllers/printer.py
+++ /dev/null
@@ -1,26 +0,0 @@
-# -*- coding: utf-8 -*-
-from hodor import app
-from flask import render_template, request
-from flask_wtf import FlaskForm
-from wtforms import StringField
-from wtforms.validators import DataRequired
-
-
-class CreateForm(FlaskForm):
- text = StringField('name', validators=[DataRequired()])
-
-
-@app.route('/')
-def start():
- return render_template('printer/index.html')
-
-
-@app.route('/print', methods=['GET', 'POST'])
-def printer():
- form = CreateForm(request.form)
- if request.method == 'POST' and form.validate():
- from hodor.models.Printer import Printer
- printer = Printer()
- printer.show_string(form.text.data)
- return render_template('printer/index.html')
- return render_template('printer/print.html', form=form)
diff --git a/hodor/controllers/printer.pyc b/hodor/controllers/printer.pyc
deleted file mode 100644
index ea6819b1d2dcb1e3da2e1a69e339c9444584ba74..0000000000000000000000000000000000000000
Binary files a/hodor/controllers/printer.pyc and /dev/null differ
diff --git a/hodor/models/Printer.pyc b/hodor/models/Printer.pyc
deleted file mode 100644
index d32f52d671695991007c380483dd1f059fad3196..0000000000000000000000000000000000000000
Binary files a/hodor/models/Printer.pyc and /dev/null differ
diff --git a/hodor/models/__init__.pyc b/hodor/models/__init__.pyc
deleted file mode 100644
index a72112d105cd02ad89fe253f200a059151aec919..0000000000000000000000000000000000000000
Binary files a/hodor/models/__init__.pyc and /dev/null differ
diff --git a/hodor/models/Printer.py b/hodor/models/index.py
similarity index 100%
rename from hodor/models/Printer.py
rename to hodor/models/index.py
diff --git a/hodor/static/css/style.css b/hodor/static/css/style.css
deleted file mode 100644
index dcbbde0d5ebb604aeccc10df8bc2141259d8766c..0000000000000000000000000000000000000000
--- a/hodor/static/css/style.css
+++ /dev/null
@@ -1,71 +0,0 @@
-body {
- font-family: sans-serif;
- background: #eee;
-}
-
-a,h1,h2 {
- color: #377BA8;
-}
-
-h1,h2 {
- font-family: 'Georgia', serif;
- margin: 0;
-}
-
-h1 {
- border-bottom: 2px solid #eee;
-}
-
-h2 {
- font-size: 1.2em;
-}
-
-.page {
- margin: 2em auto;
- width: 35em;
- border: 5px solid #ccc;
- padding: 0.8em;
- background: white;
-}
-
-.entries {
- list-style: none;
- margin: 0;
- padding: 0;
-}
-
-.entries li {
- margin: 0.8em 1.2em;
-}
-
-.entries li h2 {
- margin-left: -1em;
-}
-
-.add-entry {
- font-size: 0.9em;
- border-bottom: 1px solid #ccc;
-}
-
-.add-entry dl {
- font-weight: bold;
-}
-
-.metanav {
- text-align: right;
- font-size: 0.8em;
- padding: 0.3em;
- margin-bottom: 1em;
- background: #fafafa;
-}
-
-.flash {
- background: #CEE5F5;
- padding: 0.5em;
- border: 1px solid #AACBE2;
-}
-
-.error {
- background: #F0D6D6;
- padding: 0.5em;
-}
\ No newline at end of file
diff --git a/hodor/static/css/styles.css b/hodor/static/css/styles.css
new file mode 100644
index 0000000000000000000000000000000000000000..00ddb18d4962d68e74682cd59f856b04ad83ff92
--- /dev/null
+++ b/hodor/static/css/styles.css
@@ -0,0 +1,587 @@
+html {
+ background-color: #111111 !important;
+}
+body {
+ height: 100%;
+ background-color: #111111 !important;
+ height: 99vh;
+ position: relative;
+}
+
+canvas {
+ display:block;
+ position: fixed;
+}
+
+li {
+ list-style:none !important;
+
+}
+.container-fluid{
+ height: 100%;
+}
+
+.nav-hodor {
+ float: left !important;
+}
+
+.content {
+ height: 99vh !important;
+ max-height: 90% !important;
+}
+
+.img-block {
+ display: inline-block;
+}
+
+/* --------------------------------
+
+Primary style
+
+-------------------------------- */
+html * {
+ -webkit-font-smoothing: antialiased;
+ -moz-osx-font-smoothing: grayscale;
+}
+
+*, *:after, *:before {
+ -webkit-box-sizing: border-box;
+ -moz-box-sizing: border-box;
+ box-sizing: border-box;
+}
+
+body {
+ font-size: 100%;
+ font-family: "PT Sans", sans-serif;
+ color: #505260;
+ background-color: #fff;
+}
+
+a {
+ color: #2f889a;
+ text-decoration: none;
+}
+
+img {
+ max-width: 100%;
+}
+
+input, textarea {
+ font-family: "PT Sans", sans-serif;
+ font-size: 16px;
+ font-size: 1rem;
+}
+input::-ms-clear, textarea::-ms-clear {
+ display: none;
+}
+
+/* --------------------------------
+
+Main components
+
+-------------------------------- */
+header[role=banner] {
+ position: relative;
+ height: 50px;
+ background: #343642;
+}
+header[role=banner] #cd-logo {
+ float: left;
+ margin: 4px 0 0 5%;
+ /* reduce logo size on mobile and make sure it is left aligned with the transform-origin property */
+ -webkit-transform-origin: 0 50%;
+ -moz-transform-origin: 0 50%;
+ -ms-transform-origin: 0 50%;
+ -o-transform-origin: 0 50%;
+ transform-origin: 0 50%;
+ -webkit-transform: scale(0.8);
+ -moz-transform: scale(0.8);
+ -ms-transform: scale(0.8);
+ -o-transform: scale(0.8);
+ transform: scale(0.8);
+}
+header[role=banner] #cd-logo img {
+ display: block;
+}
+header[role=banner]::after {
+ /* clearfix */
+ content: '';
+ display: table;
+ clear: both;
+}
+@media only screen and (min-width: 768px) {
+ header[role=banner] {
+ height: 80px;
+ }
+ header[role=banner] #cd-logo {
+ margin: 20px 0 0 5%;
+ -webkit-transform: scale(1);
+ -moz-transform: scale(1);
+ -ms-transform: scale(1);
+ -o-transform: scale(1);
+ transform: scale(1);
+ }
+}
+
+.main-nav {
+ float: right;
+ margin-right: 5%;
+ width: 44px;
+ height: 100%;
+ background: url("https://s3-us-west-2.amazonaws.com/s.cdpn.io/148866/cd-icon-menu.svg") no-repeat center center;
+ cursor: pointer;
+}
+.main-nav ul {
+ position: absolute;
+ top: 0;
+ left: 0;
+ width: 100%;
+ -webkit-transform: translateY(-100%);
+ -moz-transform: translateY(-100%);
+ -ms-transform: translateY(-100%);
+ -o-transform: translateY(-100%);
+ transform: translateY(-100%);
+}
+.main-nav ul.is-visible {
+ -webkit-transform: translateY(50px);
+ -moz-transform: translateY(50px);
+ -ms-transform: translateY(50px);
+ -o-transform: translateY(50px);
+ transform: translateY(50px);
+}
+.main-nav a {
+ display: block;
+ height: 50px;
+ line-height: 50px;
+ padding-left: 5%;
+ background: #292a34;
+ border-top: 1px solid #3b3d4b;
+ color: #FFF;
+}
+@media only screen and (min-width: 768px) {
+ .main-nav {
+ width: auto;
+ height: auto;
+ background: none;
+ cursor: auto;
+ }
+ .main-nav ul {
+ position: static;
+ width: auto;
+ -webkit-transform: translateY(0);
+ -moz-transform: translateY(0);
+ -ms-transform: translateY(0);
+ -o-transform: translateY(0);
+ transform: translateY(0);
+ line-height: 80px;
+ }
+ .main-nav ul.is-visible {
+ -webkit-transform: translateY(0);
+ -moz-transform: translateY(0);
+ -ms-transform: translateY(0);
+ -o-transform: translateY(0);
+ transform: translateY(0);
+ }
+ .main-nav li {
+ display: inline-block;
+ margin-left: 1em;
+ }
+ .main-nav li:nth-last-child(2) {
+ margin-left: 2em;
+ }
+ .main-nav a {
+ display: inline-block;
+ height: auto;
+ line-height: normal;
+ background: transparent;
+ }
+ .main-nav a.cd-signin, .main-nav a.cd-signup {
+ padding: .6em 1em;
+ border: 1px solid rgba(255, 255, 255, 0.6);
+ border-radius: 50em;
+ }
+ .main-nav a.cd-signup {
+ background: #2f889a;
+ border: none;
+ }
+}
+
+/* --------------------------------
+
+xsigin/signup popup
+
+-------------------------------- */
+.cd-user-modal {
+ position: fixed;
+ top: 0;
+ left: 0;
+ width: 100%;
+ height: 100%;
+ background: rgba(52, 54, 66, 0.9);
+ z-index: 3;
+ overflow-y: auto;
+ cursor: pointer;
+ visibility: hidden;
+ opacity: 0;
+ -webkit-transition: opacity 0.3s 0, visibility 0 0.3s;
+ -moz-transition: opacity 0.3s 0, visibility 0 0.3s;
+ transition: opacity 0.3s 0, visibility 0 0.3s;
+}
+.cd-user-modal.is-visible {
+ visibility: visible;
+ opacity: 1;
+ -webkit-transition: opacity 0.3s 0, visibility 0 0;
+ -moz-transition: opacity 0.3s 0, visibility 0 0;
+ transition: opacity 0.3s 0, visibility 0 0;
+}
+.cd-user-modal.is-visible .cd-user-modal-container {
+ -webkit-transform: translateY(0);
+ -moz-transform: translateY(0);
+ -ms-transform: translateY(0);
+ -o-transform: translateY(0);
+ transform: translateY(0);
+}
+
+.cd-user-modal-container {
+ position: relative;
+ width: 90%;
+ max-width: 600px;
+ background: #FFF;
+ margin: 3em auto 4em;
+ cursor: auto;
+ border-radius: 0.25em;
+ -webkit-transform: translateY(-30px);
+ -moz-transform: translateY(-30px);
+ -ms-transform: translateY(-30px);
+ -o-transform: translateY(-30px);
+ transform: translateY(-30px);
+ -webkit-transition-property: -webkit-transform;
+ -moz-transition-property: -moz-transform;
+ transition-property: transform;
+ -webkit-transition-duration: 0.3s;
+ -moz-transition-duration: 0.3s;
+ transition-duration: 0.3s;
+}
+.cd-user-modal-container .cd-switcher::after {
+ clear: both;
+ content: "";
+ display: table;
+}
+.cd-user-modal-container .cd-switcher li {
+ width: 50%;
+ float: left;
+ text-align: center;
+}
+.cd-user-modal-container .cd-switcher li:first-child a {
+ border-radius: .25em 0 0 0;
+}
+.cd-user-modal-container .cd-switcher li:last-child a {
+ border-radius: 0 .25em 0 0;
+}
+.cd-user-modal-container .cd-switcher a {
+ display: block;
+ width: 100%;
+ height: 50px;
+ line-height: 50px;
+ background: #d2d8d8;
+ color: #809191;
+}
+.cd-user-modal-container .cd-switcher a.selected {
+ background: #FFF;
+ color: #505260;
+}
+@media only screen and (min-width: 600px) {
+ .cd-user-modal-container {
+ margin: 4em auto;
+ }
+ .cd-user-modal-container .cd-switcher a {
+ height: 70px;
+ line-height: 70px;
+ }
+}
+
+.cd-form {
+ padding: 1.4em;
+}
+.cd-form .fieldset {
+ position: relative;
+ margin: 1.4em 0;
+}
+.cd-form .fieldset:first-child {
+ margin-top: 0;
+}
+.cd-form .fieldset:last-child {
+ margin-bottom: 0;
+}
+.cd-form label {
+ font-size: 14px;
+ font-size: 0.875rem;
+}
+.cd-form label.image-replace {
+ /* replace text with an icon */
+ display: inline-block;
+ position: absolute;
+ left: 15px;
+ top: 50%;
+ bottom: auto;
+ -webkit-transform: translateY(-50%);
+ -moz-transform: translateY(-50%);
+ -ms-transform: translateY(-50%);
+ -o-transform: translateY(-50%);
+ transform: translateY(-50%);
+ height: 20px;
+ width: 20px;
+ overflow: hidden;
+ text-indent: 100%;
+ white-space: nowrap;
+ color: transparent;
+ text-shadow: none;
+ background-repeat: no-repeat;
+ background-position: 50% 0;
+}
+.cd-form label.cd-username {
+ background-image: url("https://s3-us-west-2.amazonaws.com/s.cdpn.io/148866/cd-icon-username.svg");
+}
+.cd-form label.cd-email {
+ background-image: url("https://s3-us-west-2.amazonaws.com/s.cdpn.io/148866/cd-icon-email.svg");
+}
+.cd-form label.cd-password {
+ background-image: url("https://s3-us-west-2.amazonaws.com/s.cdpn.io/148866/cd-icon-password.svg");
+}
+.cd-form input {
+ margin: 0;
+ padding: 0;
+ border-radius: 0.25em;
+}
+.cd-form input.full-width {
+ width: 100%;
+}
+.cd-form input.has-padding {
+ padding: 12px 20px 12px 50px;
+}
+.cd-form input.has-border {
+ border: 1px solid #d2d8d8;
+ -webkit-appearance: none;
+ -moz-appearance: none;
+ -ms-appearance: none;
+ -o-appearance: none;
+ appearance: none;
+}
+.cd-form input.has-border:focus {
+ border-color: #343642;
+ box-shadow: 0 0 5px rgba(52, 54, 66, 0.1);
+ outline: none;
+}
+.cd-form input.has-error {
+ border: 1px solid #d76666;
+}
+.cd-form input[type=password] {
+ /* space left for the HIDE button */
+ padding-right: 65px;
+}
+.cd-form input[type=submit] {
+ padding: 16px 0;
+ cursor: pointer;
+ background: #2f889a;
+ color: #FFF;
+ font-weight: bold;
+ border: none;
+ -webkit-appearance: none;
+ -moz-appearance: none;
+ -ms-appearance: none;
+ -o-appearance: none;
+ appearance: none;
+}
+.no-touch .cd-form input[type=submit]:hover, .no-touch .cd-form input[type=submit]:focus {
+ background: #3599ae;
+ outline: none;
+}
+.cd-form .hide-password {
+ display: inline-block;
+ position: absolute;
+ right: 0;
+ top: 0;
+ padding: 6px 15px;
+ border-left: 1px solid #d2d8d8;
+ top: 50%;
+ bottom: auto;
+ -webkit-transform: translateY(-50%);
+ -moz-transform: translateY(-50%);
+ -ms-transform: translateY(-50%);
+ -o-transform: translateY(-50%);
+ transform: translateY(-50%);
+ font-size: 14px;
+ font-size: 0.875rem;
+ color: #343642;
+}
+.cd-form .cd-error-message {
+ display: inline-block;
+ position: absolute;
+ left: -5px;
+ bottom: -35px;
+ background: rgba(215, 102, 102, 0.9);
+ padding: .8em;
+ z-index: 2;
+ color: #FFF;
+ font-size: 13px;
+ font-size: 0.8125rem;
+ border-radius: 0.25em;
+ /* prevent click and touch events */
+ pointer-events: none;
+ visibility: hidden;
+ opacity: 0;
+ -webkit-transition: opacity 0.2s 0, visibility 0 0.2s;
+ -moz-transition: opacity 0.2s 0, visibility 0 0.2s;
+ transition: opacity 0.2s 0, visibility 0 0.2s;
+}
+.cd-form .cd-error-message::after {
+ /* triangle */
+ content: '';
+ position: absolute;
+ left: 22px;
+ bottom: 100%;
+ height: 0;
+ width: 0;
+ border-bottom: 8px solid rgba(215, 102, 102, 0.9);
+ border-left: 8px solid transparent;
+ border-right: 8px solid transparent;
+}
+.cd-form .cd-error-message.is-visible {
+ opacity: 1;
+ visibility: visible;
+ -webkit-transition: opacity 0.2s 0, visibility 0 0;
+ -moz-transition: opacity 0.2s 0, visibility 0 0;
+ transition: opacity 0.2s 0, visibility 0 0;
+}
+@media only screen and (min-width: 600px) {
+ .cd-form {
+ padding: 2em;
+ }
+ .cd-form .fieldset {
+ margin: 2em 0;
+ }
+ .cd-form .fieldset:first-child {
+ margin-top: 0;
+ }
+ .cd-form .fieldset:last-child {
+ margin-bottom: 0;
+ }
+ .cd-form input.has-padding {
+ padding: 16px 20px 16px 50px;
+ }
+ .cd-form input[type=submit] {
+ padding: 16px 0;
+ }
+}
+
+.cd-form-message {
+ padding: 1.4em 1.4em 0;
+ font-size: 14px;
+ font-size: 0.875rem;
+ line-height: 1.4;
+ text-align: center;
+}
+@media only screen and (min-width: 600px) {
+ .cd-form-message {
+ padding: 2em 2em 0;
+ }
+}
+
+.cd-form-bottom-message {
+ position: absolute;
+ width: 100%;
+ left: 0;
+ bottom: -30px;
+ text-align: center;
+ font-size: 14px;
+ font-size: 0.875rem;
+}
+.cd-form-bottom-message a {
+ color: #FFF;
+ text-decoration: underline;
+}
+
+.cd-close-form {
+ /* form X button on top right */
+ display: block;
+ position: absolute;
+ width: 40px;
+ height: 40px;
+ right: 0;
+ top: -40px;
+ background: url("https://s3-us-west-2.amazonaws.com/s.cdpn.io/148866/cd-icon-close.svg") no-repeat center center;
+ text-indent: 100%;
+ white-space: nowrap;
+ overflow: hidden;
+}
+@media only screen and (min-width: 1170px) {
+ .cd-close-form {
+ display: none;
+ }
+}
+
+#cd-login, #cd-signup, #cd-reset-password {
+ display: none;
+}
+
+#cd-login.is-selected, #cd-signup.is-selected, #cd-reset-password.is-selected {
+ display: block;
+}
+
+
+.abs {
+ position: absolute;
+ text-align: center;
+ width: 100%;
+ height: 90%;
+ z-index: 1;
+}
+
+#caption {
+ height: fit-content;
+ z-index: 1;
+ margin-right: auto;
+ margin-left: auto;
+ margin-top: 4em;
+ font-family: Lato, sans-serif;
+ font-weight: 100;
+ font-size : 70px;
+ color: white;
+}
+
+#subtitle {
+ z-index: 1;
+ height: fit-content;
+ width: fit-content;
+ margin-left: auto;
+ margin-right: auto;
+ margin-top: 18em;
+ font-family: Lato, sans-serif;
+ font-size : 20px;
+ color: white;
+}
+
+
+#logo {
+ z-index: 1;
+ margin-right: auto;
+ margin-left: auto;
+ margin-top: 6em;
+ color: white;
+}
+
+#version {
+ z-index: 1;
+ font-size: 40px;
+ color: orange;
+ font-weight: 300;
+}
+
+#more {
+ height: 8%;
+ margin-right: auto;
+ margin-left: auto;
+ margin-top: 30em;
+ color: white;
+ z-index: 1;
+}
diff --git a/hodor/static/img/hodor.png b/hodor/static/img/hodor.png
new file mode 100644
index 0000000000000000000000000000000000000000..8c7932c709f7e13c9d9d65504d2771fe2adcc6c1
Binary files /dev/null and b/hodor/static/img/hodor.png differ
diff --git a/hodor/static/js/app.js b/hodor/static/js/app.js
new file mode 100644
index 0000000000000000000000000000000000000000..f09419ea66317b2810149fc80ca7fa85cff1f5b8
--- /dev/null
+++ b/hodor/static/js/app.js
@@ -0,0 +1,4 @@
+/* particlesJS.load(@dom-id, @path-json, @callback (optional)); */
+particlesJS.load('particles-js', '/static/particles.json', function() {
+ console.log('callback - particles.js config loaded');
+});
diff --git a/hodor/static/js/modals.js b/hodor/static/js/modals.js
new file mode 100644
index 0000000000000000000000000000000000000000..ebb483569c22ba8d44368241af56b306b62ed5af
--- /dev/null
+++ b/hodor/static/js/modals.js
@@ -0,0 +1,152 @@
+/*! modernizr 3.5.0 (Custom Build) | MIT *
+ * https://modernizr.com/download/?-input-setclasses !*/
+!function(e,n,t){function s(e,n){return typeof e===n}function a(){var e,n,t,a,o,i,f;for(var c in r)if(r.hasOwnProperty(c)){if(e=[],n=r[c],n.name&&(e.push(n.name.toLowerCase()),n.options&&n.options.aliases&&n.options.aliases.length))for(t=0;t<n.options.aliases.length;t++)e.push(n.options.aliases[t].toLowerCase());for(a=s(n.fn,"function")?n.fn():n.fn,o=0;o<e.length;o++)i=e[o],f=i.split("."),1===f.length?Modernizr[f[0]]=a:(!Modernizr[f[0]]||Modernizr[f[0]]instanceof Boolean||(Modernizr[f[0]]=new Boolean(Modernizr[f[0]])),Modernizr[f[0]][f[1]]=a),l.push((a?"":"no-")+f.join("-"))}}function o(e){var n=c.className,t=Modernizr._config.classPrefix||"";if(u&&(n=n.baseVal),Modernizr._config.enableJSClass){var s=new RegExp("(^|\\s)"+t+"no-js(\\s|$)");n=n.replace(s,"$1"+t+"js$2")}Modernizr._config.enableClasses&&(n+=" "+t+e.join(" "+t),u?c.className.baseVal=n:c.className=n)}function i(){return"function"!=typeof n.createElement?n.createElement(arguments[0]):u?n.createElementNS.call(n,"http://www.w3.org/2000/svg",arguments[0]):n.createElement.apply(n,arguments)}var l=[],r=[],f={_version:"3.5.0",_config:{classPrefix:"",enableClasses:!0,enableJSClass:!0,usePrefixes:!0},_q:[],on:function(e,n){var t=this;setTimeout(function(){n(t[e])},0)},addTest:function(e,n,t){r.push({name:e,fn:n,options:t})},addAsyncTest:function(e){r.push({name:null,fn:e})}},Modernizr=function(){};Modernizr.prototype=f,Modernizr=new Modernizr;var c=n.documentElement,u="svg"===c.nodeName.toLowerCase(),p=i("input"),m="autocomplete autofocus list placeholder max min multiple pattern required step".split(" "),d={};Modernizr.input=function(n){for(var t=0,s=n.length;s>t;t++)d[n[t]]=!!(n[t]in p);return d.list&&(d.list=!(!i("datalist")||!e.HTMLDataListElement)),d}(m),a(),o(l),delete f.addTest,delete f.addAsyncTest;for(var g=0;g<Modernizr._q.length;g++)Modernizr._q[g]();e.Modernizr=Modernizr}(window,document);
+
+
+jQuery(document).ready(function($){
+ var $form_modal = $('.cd-user-modal'),
+ $form_login = $form_modal.find('#cd-login'),
+ $form_signup = $form_modal.find('#cd-signup'),
+ $form_forgot_password = $form_modal.find('#cd-reset-password'),
+ $form_modal_tab = $('.cd-switcher'),
+ $tab_login = $form_modal_tab.children('li').eq(0).children('a'),
+ $tab_signup = $form_modal_tab.children('li').eq(1).children('a'),
+ $forgot_password_link = $form_login.find('.cd-form-bottom-message a'),
+ $back_to_login_link = $form_forgot_password.find('.cd-form-bottom-message a'),
+ $main_nav = $('.hodor-nav');
+
+ //open modal
+ $main_nav.on('click', function(event){
+
+ if( $(event.target).is($main_nav) ) {
+ // on mobile open the submenu
+ $(this).children('ul').toggleClass('is-visible');
+ } else {
+ // on mobile close submenu
+ $main_nav.children('ul').removeClass('is-visible');
+ //show modal layer
+ $form_modal.addClass('is-visible');
+ //show the selected form
+ ( $(event.target).is('.cd-signup') ) ? signup_selected() : login_selected();
+ }
+
+ });
+
+ //close modal
+ $('.cd-user-modal').on('click', function(event){
+ if( $(event.target).is($form_modal) || $(event.target).is('.cd-close-form') ) {
+ $form_modal.removeClass('is-visible');
+ }
+ });
+ //close modal when clicking the esc keyboard button
+ $(document).keyup(function(event){
+ if(event.which=='27'){
+ $form_modal.removeClass('is-visible');
+ }
+ });
+
+ //switch from a tab to another
+ $form_modal_tab.on('click', function(event) {
+ event.preventDefault();
+ ( $(event.target).is( $tab_login ) ) ? login_selected() : signup_selected();
+ });
+
+ //hide or show password
+ $('.hide-password').on('click', function(){
+ var $this= $(this),
+ $password_field = $this.prev('input');
+
+ ( 'password' == $password_field.attr('type') ) ? $password_field.attr('type', 'text') : $password_field.attr('type', 'password');
+ ( 'Hide' == $this.text() ) ? $this.text('Show') : $this.text('Hide');
+ //focus and move cursor to the end of input field
+ $password_field.putCursorAtEnd();
+ });
+
+ //show forgot-password form
+ $forgot_password_link.on('click', function(event){
+ event.preventDefault();
+ forgot_password_selected();
+ });
+
+ //back to login from the forgot-password form
+ $back_to_login_link.on('click', function(event){
+ event.preventDefault();
+ login_selected();
+ });
+
+ function login_selected(){
+ $form_login.addClass('is-selected');
+ $form_signup.removeClass('is-selected');
+ $form_forgot_password.removeClass('is-selected');
+ $tab_login.addClass('selected');
+ $tab_signup.removeClass('selected');
+ }
+
+ function signup_selected(){
+ $form_login.removeClass('is-selected');
+ $form_signup.addClass('is-selected');
+ $form_forgot_password.removeClass('is-selected');
+ $tab_login.removeClass('selected');
+ $tab_signup.addClass('selected');
+ }
+
+ function forgot_password_selected(){
+ $form_login.removeClass('is-selected');
+ $form_signup.removeClass('is-selected');
+ $form_forgot_password.addClass('is-selected');
+ }
+
+ //REMOVE THIS - it's just to show error messages
+ $form_login.find('input[type="submit"]').on('click', function(event){
+ event.preventDefault();
+ $form_login.find('input[type="email"]').toggleClass('has-error').next('span').toggleClass('is-visible');
+ });
+ $form_signup.find('input[type="submit"]').on('click', function(event){
+ event.preventDefault();
+ $form_signup.find('input[type="email"]').toggleClass('has-error').next('span').toggleClass('is-visible');
+ });
+
+
+ //IE9 placeholder fallback
+ //credits http://www.hagenburger.net/BLOG/HTML5-Input-Placeholder-Fix-With-jQuery.html
+ if(!Modernizr.input.placeholder){
+ $('[placeholder]').focus(function() {
+ var input = $(this);
+ if (input.val() == input.attr('placeholder')) {
+ input.val('');
+ }
+ }).blur(function() {
+ var input = $(this);
+ if (input.val() == '' || input.val() == input.attr('placeholder')) {
+ input.val(input.attr('placeholder'));
+ }
+ }).blur();
+ $('[placeholder]').parents('form').submit(function() {
+ $(this).find('[placeholder]').each(function() {
+ var input = $(this);
+ if (input.val() == input.attr('placeholder')) {
+ input.val('');
+ }
+ })
+ });
+ }
+
+});
+
+
+//credits https://css-tricks.com/snippets/jquery/move-cursor-to-end-of-textarea-or-input/
+jQuery.fn.putCursorAtEnd = function() {
+ return this.each(function() {
+ // If this function exists...
+ if (this.setSelectionRange) {
+ // ... then use it (Doesn't work in IE)
+ // Double the length because Opera is inconsistent about whether a carriage return is one character or two. Sigh.
+ var len = $(this).val().length * 2;
+ this.setSelectionRange(len, len);
+ } else {
+ // ... otherwise replace the contents with itself
+ // (Doesn't work in Google Chrome)
+ $(this).val($(this).val());
+ }
+ });
+};
\ No newline at end of file
diff --git a/hodor/static/js/particles.js b/hodor/static/js/particles.js
new file mode 100644
index 0000000000000000000000000000000000000000..c599dd18a5e77f09db56d3aad368a2f788f2258d
--- /dev/null
+++ b/hodor/static/js/particles.js
@@ -0,0 +1,1541 @@
+/* -----------------------------------------------
+/* Author : Vincent Garreau - vincentgarreau.com
+/* MIT license: http://opensource.org/licenses/MIT
+/* Demo / Generator : vincentgarreau.com/particles.js
+/* GitHub : github.com/VincentGarreau/particles.js
+/* How to use? : Check the GitHub README
+/* v2.0.0
+/* ----------------------------------------------- */
+
+var pJS = function(tag_id, params){
+
+ var canvas_el = document.querySelector('#'+tag_id+' > .particles-js-canvas-el');
+
+ /* particles.js variables with default values */
+ this.pJS = {
+ canvas: {
+ el: canvas_el,
+ w: canvas_el.offsetWidth,
+ h: canvas_el.offsetHeight
+ },
+ particles: {
+ number: {
+ value: 400,
+ density: {
+ enable: true,
+ value_area: 800
+ }
+ },
+ color: {
+ value: '#fff'
+ },
+ shape: {
+ type: 'circle',
+ stroke: {
+ width: 0,
+ color: '#ff0000'
+ },
+ polygon: {
+ nb_sides: 5
+ },
+ image: {
+ src: '',
+ width: 100,
+ height: 100
+ }
+ },
+ opacity: {
+ value: 1,
+ random: false,
+ anim: {
+ enable: false,
+ speed: 2,
+ opacity_min: 0,
+ sync: false
+ }
+ },
+ size: {
+ value: 20,
+ random: false,
+ anim: {
+ enable: false,
+ speed: 20,
+ size_min: 0,
+ sync: false
+ }
+ },
+ line_linked: {
+ enable: true,
+ distance: 100,
+ color: '#fff',
+ opacity: 1,
+ width: 1
+ },
+ move: {
+ enable: true,
+ speed: 2,
+ direction: 'none',
+ random: false,
+ straight: false,
+ out_mode: 'out',
+ bounce: false,
+ attract: {
+ enable: false,
+ rotateX: 3000,
+ rotateY: 3000
+ }
+ },
+ array: []
+ },
+ interactivity: {
+ detect_on: 'canvas',
+ events: {
+ onhover: {
+ enable: true,
+ mode: 'grab'
+ },
+ onclick: {
+ enable: true,
+ mode: 'push'
+ },
+ resize: true
+ },
+ modes: {
+ grab:{
+ distance: 100,
+ line_linked:{
+ opacity: 1
+ }
+ },
+ bubble:{
+ distance: 200,
+ size: 80,
+ duration: 0.4
+ },
+ repulse:{
+ distance: 200,
+ duration: 0.4
+ },
+ push:{
+ particles_nb: 4
+ },
+ remove:{
+ particles_nb: 2
+ }
+ },
+ mouse:{}
+ },
+ retina_detect: false,
+ fn: {
+ interact: {},
+ modes: {},
+ vendors:{}
+ },
+ tmp: {}
+ };
+
+ var pJS = this.pJS;
+
+ /* params settings */
+ if(params){
+ Object.deepExtend(pJS, params);
+ }
+
+ pJS.tmp.obj = {
+ size_value: pJS.particles.size.value,
+ size_anim_speed: pJS.particles.size.anim.speed,
+ move_speed: pJS.particles.move.speed,
+ line_linked_distance: pJS.particles.line_linked.distance,
+ line_linked_width: pJS.particles.line_linked.width,
+ mode_grab_distance: pJS.interactivity.modes.grab.distance,
+ mode_bubble_distance: pJS.interactivity.modes.bubble.distance,
+ mode_bubble_size: pJS.interactivity.modes.bubble.size,
+ mode_repulse_distance: pJS.interactivity.modes.repulse.distance
+ };
+
+
+ pJS.fn.retinaInit = function(){
+
+ if(pJS.retina_detect && window.devicePixelRatio > 1){
+ pJS.canvas.pxratio = window.devicePixelRatio;
+ pJS.tmp.retina = true;
+ }
+ else{
+ pJS.canvas.pxratio = 1;
+ pJS.tmp.retina = false;
+ }
+
+ pJS.canvas.w = pJS.canvas.el.offsetWidth * pJS.canvas.pxratio;
+ pJS.canvas.h = pJS.canvas.el.offsetHeight * pJS.canvas.pxratio;
+
+ pJS.particles.size.value = pJS.tmp.obj.size_value * pJS.canvas.pxratio;
+ pJS.particles.size.anim.speed = pJS.tmp.obj.size_anim_speed * pJS.canvas.pxratio;
+ pJS.particles.move.speed = pJS.tmp.obj.move_speed * pJS.canvas.pxratio;
+ pJS.particles.line_linked.distance = pJS.tmp.obj.line_linked_distance * pJS.canvas.pxratio;
+ pJS.interactivity.modes.grab.distance = pJS.tmp.obj.mode_grab_distance * pJS.canvas.pxratio;
+ pJS.interactivity.modes.bubble.distance = pJS.tmp.obj.mode_bubble_distance * pJS.canvas.pxratio;
+ pJS.particles.line_linked.width = pJS.tmp.obj.line_linked_width * pJS.canvas.pxratio;
+ pJS.interactivity.modes.bubble.size = pJS.tmp.obj.mode_bubble_size * pJS.canvas.pxratio;
+ pJS.interactivity.modes.repulse.distance = pJS.tmp.obj.mode_repulse_distance * pJS.canvas.pxratio;
+
+ };
+
+
+
+ /* ---------- pJS functions - canvas ------------ */
+
+ pJS.fn.canvasInit = function(){
+ pJS.canvas.ctx = pJS.canvas.el.getContext('2d');
+ };
+
+ pJS.fn.canvasSize = function(){
+
+ pJS.canvas.el.width = pJS.canvas.w;
+ pJS.canvas.el.height = pJS.canvas.h;
+
+ if(pJS && pJS.interactivity.events.resize){
+
+ window.addEventListener('resize', function(){
+
+ pJS.canvas.w = pJS.canvas.el.offsetWidth;
+ pJS.canvas.h = pJS.canvas.el.offsetHeight;
+
+ /* resize canvas */
+ if(pJS.tmp.retina){
+ pJS.canvas.w *= pJS.canvas.pxratio;
+ pJS.canvas.h *= pJS.canvas.pxratio;
+ }
+
+ pJS.canvas.el.width = pJS.canvas.w;
+ pJS.canvas.el.height = pJS.canvas.h;
+
+ /* repaint canvas on anim disabled */
+ if(!pJS.particles.move.enable){
+ pJS.fn.particlesEmpty();
+ pJS.fn.particlesCreate();
+ pJS.fn.particlesDraw();
+ pJS.fn.vendors.densityAutoParticles();
+ }
+
+ /* density particles enabled */
+ pJS.fn.vendors.densityAutoParticles();
+
+ });
+
+ }
+
+ };
+
+
+ pJS.fn.canvasPaint = function(){
+ pJS.canvas.ctx.fillRect(0, 0, pJS.canvas.w, pJS.canvas.h);
+ };
+
+ pJS.fn.canvasClear = function(){
+ pJS.canvas.ctx.clearRect(0, 0, pJS.canvas.w, pJS.canvas.h);
+ };
+
+
+ /* --------- pJS functions - particles ----------- */
+
+ pJS.fn.particle = function(color, opacity, position){
+
+ /* size */
+ this.radius = (pJS.particles.size.random ? Math.random() : 1) * pJS.particles.size.value;
+ if(pJS.particles.size.anim.enable){
+ this.size_status = false;
+ this.vs = pJS.particles.size.anim.speed / 100;
+ if(!pJS.particles.size.anim.sync){
+ this.vs = this.vs * Math.random();
+ }
+ }
+
+ /* position */
+ this.x = position ? position.x : Math.random() * pJS.canvas.w;
+ this.y = position ? position.y : Math.random() * pJS.canvas.h;
+
+ /* check position - into the canvas */
+ if(this.x > pJS.canvas.w - this.radius*2) this.x = this.x - this.radius;
+ else if(this.x < this.radius*2) this.x = this.x + this.radius;
+ if(this.y > pJS.canvas.h - this.radius*2) this.y = this.y - this.radius;
+ else if(this.y < this.radius*2) this.y = this.y + this.radius;
+
+ /* check position - avoid overlap */
+ if(pJS.particles.move.bounce){
+ pJS.fn.vendors.checkOverlap(this, position);
+ }
+
+ /* color */
+ this.color = {};
+ if(typeof(color.value) == 'object'){
+
+ if(color.value instanceof Array){
+ var color_selected = color.value[Math.floor(Math.random() * pJS.particles.color.value.length)];
+ this.color.rgb = hexToRgb(color_selected);
+ }else{
+ if(color.value.r != undefined && color.value.g != undefined && color.value.b != undefined){
+ this.color.rgb = {
+ r: color.value.r,
+ g: color.value.g,
+ b: color.value.b
+ }
+ }
+ if(color.value.h != undefined && color.value.s != undefined && color.value.l != undefined){
+ this.color.hsl = {
+ h: color.value.h,
+ s: color.value.s,
+ l: color.value.l
+ }
+ }
+ }
+
+ }
+ else if(color.value == 'random'){
+ this.color.rgb = {
+ r: (Math.floor(Math.random() * (255 - 0 + 1)) + 0),
+ g: (Math.floor(Math.random() * (255 - 0 + 1)) + 0),
+ b: (Math.floor(Math.random() * (255 - 0 + 1)) + 0)
+ }
+ }
+ else if(typeof(color.value) == 'string'){
+ this.color = color;
+ this.color.rgb = hexToRgb(this.color.value);
+ }
+
+ /* opacity */
+ this.opacity = (pJS.particles.opacity.random ? Math.random() : 1) * pJS.particles.opacity.value;
+ if(pJS.particles.opacity.anim.enable){
+ this.opacity_status = false;
+ this.vo = pJS.particles.opacity.anim.speed / 100;
+ if(!pJS.particles.opacity.anim.sync){
+ this.vo = this.vo * Math.random();
+ }
+ }
+
+ /* animation - velocity for speed */
+ var velbase = {}
+ switch(pJS.particles.move.direction){
+ case 'top':
+ velbase = { x:0, y:-1 };
+ break;
+ case 'top-right':
+ velbase = { x:0.5, y:-0.5 };
+ break;
+ case 'right':
+ velbase = { x:1, y:-0 };
+ break;
+ case 'bottom-right':
+ velbase = { x:0.5, y:0.5 };
+ break;
+ case 'bottom':
+ velbase = { x:0, y:1 };
+ break;
+ case 'bottom-left':
+ velbase = { x:-0.5, y:1 };
+ break;
+ case 'left':
+ velbase = { x:-1, y:0 };
+ break;
+ case 'top-left':
+ velbase = { x:-0.5, y:-0.5 };
+ break;
+ default:
+ velbase = { x:0, y:0 };
+ break;
+ }
+
+ if(pJS.particles.move.straight){
+ this.vx = velbase.x;
+ this.vy = velbase.y;
+ if(pJS.particles.move.random){
+ this.vx = this.vx * (Math.random());
+ this.vy = this.vy * (Math.random());
+ }
+ }else{
+ this.vx = velbase.x + Math.random()-0.5;
+ this.vy = velbase.y + Math.random()-0.5;
+ }
+
+ // var theta = 2.0 * Math.PI * Math.random();
+ // this.vx = Math.cos(theta);
+ // this.vy = Math.sin(theta);
+
+ this.vx_i = this.vx;
+ this.vy_i = this.vy;
+
+
+
+ /* if shape is image */
+
+ var shape_type = pJS.particles.shape.type;
+ if(typeof(shape_type) == 'object'){
+ if(shape_type instanceof Array){
+ var shape_selected = shape_type[Math.floor(Math.random() * shape_type.length)];
+ this.shape = shape_selected;
+ }
+ }else{
+ this.shape = shape_type;
+ }
+
+ if(this.shape == 'image'){
+ var sh = pJS.particles.shape;
+ this.img = {
+ src: sh.image.src,
+ ratio: sh.image.width / sh.image.height
+ }
+ if(!this.img.ratio) this.img.ratio = 1;
+ if(pJS.tmp.img_type == 'svg' && pJS.tmp.source_svg != undefined){
+ pJS.fn.vendors.createSvgImg(this);
+ if(pJS.tmp.pushing){
+ this.img.loaded = false;
+ }
+ }
+ }
+
+
+
+ };
+
+
+ pJS.fn.particle.prototype.draw = function() {
+
+ var p = this;
+
+ if(p.radius_bubble != undefined){
+ var radius = p.radius_bubble;
+ }else{
+ var radius = p.radius;
+ }
+
+ if(p.opacity_bubble != undefined){
+ var opacity = p.opacity_bubble;
+ }else{
+ var opacity = p.opacity;
+ }
+
+ if(p.color.rgb){
+ var color_value = 'rgba('+p.color.rgb.r+','+p.color.rgb.g+','+p.color.rgb.b+','+opacity+')';
+ }else{
+ var color_value = 'hsla('+p.color.hsl.h+','+p.color.hsl.s+'%,'+p.color.hsl.l+'%,'+opacity+')';
+ }
+
+ pJS.canvas.ctx.fillStyle = color_value;
+ pJS.canvas.ctx.beginPath();
+
+ switch(p.shape){
+
+ case 'circle':
+ pJS.canvas.ctx.arc(p.x, p.y, radius, 0, Math.PI * 2, false);
+ break;
+
+ case 'edge':
+ pJS.canvas.ctx.rect(p.x-radius, p.y-radius, radius*2, radius*2);
+ break;
+
+ case 'triangle':
+ pJS.fn.vendors.drawShape(pJS.canvas.ctx, p.x-radius, p.y+radius / 1.66, radius*2, 3, 2);
+ break;
+
+ case 'polygon':
+ pJS.fn.vendors.drawShape(
+ pJS.canvas.ctx,
+ p.x - radius / (pJS.particles.shape.polygon.nb_sides/3.5), // startX
+ p.y - radius / (2.66/3.5), // startY
+ radius*2.66 / (pJS.particles.shape.polygon.nb_sides/3), // sideLength
+ pJS.particles.shape.polygon.nb_sides, // sideCountNumerator
+ 1 // sideCountDenominator
+ );
+ break;
+
+ case 'star':
+ pJS.fn.vendors.drawShape(
+ pJS.canvas.ctx,
+ p.x - radius*2 / (pJS.particles.shape.polygon.nb_sides/4), // startX
+ p.y - radius / (2*2.66/3.5), // startY
+ radius*2*2.66 / (pJS.particles.shape.polygon.nb_sides/3), // sideLength
+ pJS.particles.shape.polygon.nb_sides, // sideCountNumerator
+ 2 // sideCountDenominator
+ );
+ break;
+
+ case 'image':
+
+ function draw(){
+ pJS.canvas.ctx.drawImage(
+ img_obj,
+ p.x-radius,
+ p.y-radius,
+ radius*2,
+ radius*2 / p.img.ratio
+ );
+ }
+
+ if(pJS.tmp.img_type == 'svg'){
+ var img_obj = p.img.obj;
+ }else{
+ var img_obj = pJS.tmp.img_obj;
+ }
+
+ if(img_obj){
+ draw();
+ }
+
+ break;
+
+ }
+
+ pJS.canvas.ctx.closePath();
+
+ if(pJS.particles.shape.stroke.width > 0){
+ pJS.canvas.ctx.strokeStyle = pJS.particles.shape.stroke.color;
+ pJS.canvas.ctx.lineWidth = pJS.particles.shape.stroke.width;
+ pJS.canvas.ctx.stroke();
+ }
+
+ pJS.canvas.ctx.fill();
+
+ };
+
+
+ pJS.fn.particlesCreate = function(){
+ for(var i = 0; i < pJS.particles.number.value; i++) {
+ pJS.particles.array.push(new pJS.fn.particle(pJS.particles.color, pJS.particles.opacity.value));
+ }
+ };
+
+ pJS.fn.particlesUpdate = function(){
+
+ for(var i = 0; i < pJS.particles.array.length; i++){
+
+ /* the particle */
+ var p = pJS.particles.array[i];
+
+ // var d = ( dx = pJS.interactivity.mouse.click_pos_x - p.x ) * dx + ( dy = pJS.interactivity.mouse.click_pos_y - p.y ) * dy;
+ // var f = -BANG_SIZE / d;
+ // if ( d < BANG_SIZE ) {
+ // var t = Math.atan2( dy, dx );
+ // p.vx = f * Math.cos(t);
+ // p.vy = f * Math.sin(t);
+ // }
+
+ /* move the particle */
+ if(pJS.particles.move.enable){
+ var ms = pJS.particles.move.speed/2;
+ p.x += p.vx * ms;
+ p.y += p.vy * ms;
+ }
+
+ /* change opacity status */
+ if(pJS.particles.opacity.anim.enable) {
+ if(p.opacity_status == true) {
+ if(p.opacity >= pJS.particles.opacity.value) p.opacity_status = false;
+ p.opacity += p.vo;
+ }else {
+ if(p.opacity <= pJS.particles.opacity.anim.opacity_min) p.opacity_status = true;
+ p.opacity -= p.vo;
+ }
+ if(p.opacity < 0) p.opacity = 0;
+ }
+
+ /* change size */
+ if(pJS.particles.size.anim.enable){
+ if(p.size_status == true){
+ if(p.radius >= pJS.particles.size.value) p.size_status = false;
+ p.radius += p.vs;
+ }else{
+ if(p.radius <= pJS.particles.size.anim.size_min) p.size_status = true;
+ p.radius -= p.vs;
+ }
+ if(p.radius < 0) p.radius = 0;
+ }
+
+ /* change particle position if it is out of canvas */
+ if(pJS.particles.move.out_mode == 'bounce'){
+ var new_pos = {
+ x_left: p.radius,
+ x_right: pJS.canvas.w,
+ y_top: p.radius,
+ y_bottom: pJS.canvas.h
+ }
+ }else{
+ var new_pos = {
+ x_left: -p.radius,
+ x_right: pJS.canvas.w + p.radius,
+ y_top: -p.radius,
+ y_bottom: pJS.canvas.h + p.radius
+ }
+ }
+
+ if(p.x - p.radius > pJS.canvas.w){
+ p.x = new_pos.x_left;
+ p.y = Math.random() * pJS.canvas.h;
+ }
+ else if(p.x + p.radius < 0){
+ p.x = new_pos.x_right;
+ p.y = Math.random() * pJS.canvas.h;
+ }
+ if(p.y - p.radius > pJS.canvas.h){
+ p.y = new_pos.y_top;
+ p.x = Math.random() * pJS.canvas.w;
+ }
+ else if(p.y + p.radius < 0){
+ p.y = new_pos.y_bottom;
+ p.x = Math.random() * pJS.canvas.w;
+ }
+
+ /* out of canvas modes */
+ switch(pJS.particles.move.out_mode){
+ case 'bounce':
+ if (p.x + p.radius > pJS.canvas.w) p.vx = -p.vx;
+ else if (p.x - p.radius < 0) p.vx = -p.vx;
+ if (p.y + p.radius > pJS.canvas.h) p.vy = -p.vy;
+ else if (p.y - p.radius < 0) p.vy = -p.vy;
+ break;
+ }
+
+ /* events */
+ if(isInArray('grab', pJS.interactivity.events.onhover.mode)){
+ pJS.fn.modes.grabParticle(p);
+ }
+
+ if(isInArray('bubble', pJS.interactivity.events.onhover.mode) || isInArray('bubble', pJS.interactivity.events.onclick.mode)){
+ pJS.fn.modes.bubbleParticle(p);
+ }
+
+ if(isInArray('repulse', pJS.interactivity.events.onhover.mode) || isInArray('repulse', pJS.interactivity.events.onclick.mode)){
+ pJS.fn.modes.repulseParticle(p);
+ }
+
+ /* interaction auto between particles */
+ if(pJS.particles.line_linked.enable || pJS.particles.move.attract.enable){
+ for(var j = i + 1; j < pJS.particles.array.length; j++){
+ var p2 = pJS.particles.array[j];
+
+ /* link particles */
+ if(pJS.particles.line_linked.enable){
+ pJS.fn.interact.linkParticles(p,p2);
+ }
+
+ /* attract particles */
+ if(pJS.particles.move.attract.enable){
+ pJS.fn.interact.attractParticles(p,p2);
+ }
+
+ /* bounce particles */
+ if(pJS.particles.move.bounce){
+ pJS.fn.interact.bounceParticles(p,p2);
+ }
+
+ }
+ }
+
+
+ }
+
+ };
+
+ pJS.fn.particlesDraw = function(){
+
+ /* clear canvas */
+ pJS.canvas.ctx.clearRect(0, 0, pJS.canvas.w, pJS.canvas.h);
+
+ /* update each particles param */
+ pJS.fn.particlesUpdate();
+
+ /* draw each particle */
+ for(var i = 0; i < pJS.particles.array.length; i++){
+ var p = pJS.particles.array[i];
+ p.draw();
+ }
+
+ };
+
+ pJS.fn.particlesEmpty = function(){
+ pJS.particles.array = [];
+ };
+
+ pJS.fn.particlesRefresh = function(){
+
+ /* init all */
+ cancelRequestAnimFrame(pJS.fn.checkAnimFrame);
+ cancelRequestAnimFrame(pJS.fn.drawAnimFrame);
+ pJS.tmp.source_svg = undefined;
+ pJS.tmp.img_obj = undefined;
+ pJS.tmp.count_svg = 0;
+ pJS.fn.particlesEmpty();
+ pJS.fn.canvasClear();
+
+ /* restart */
+ pJS.fn.vendors.start();
+
+ };
+
+
+ /* ---------- pJS functions - particles interaction ------------ */
+
+ pJS.fn.interact.linkParticles = function(p1, p2){
+
+ var dx = p1.x - p2.x,
+ dy = p1.y - p2.y,
+ dist = Math.sqrt(dx*dx + dy*dy);
+
+ /* draw a line between p1 and p2 if the distance between them is under the config distance */
+ if(dist <= pJS.particles.line_linked.distance){
+
+ var opacity_line = pJS.particles.line_linked.opacity - (dist / (1/pJS.particles.line_linked.opacity)) / pJS.particles.line_linked.distance;
+
+ if(opacity_line > 0){
+
+ /* style */
+ var color_line = pJS.particles.line_linked.color_rgb_line;
+ pJS.canvas.ctx.strokeStyle = 'rgba('+color_line.r+','+color_line.g+','+color_line.b+','+opacity_line+')';
+ pJS.canvas.ctx.lineWidth = pJS.particles.line_linked.width;
+ //pJS.canvas.ctx.lineCap = 'round'; /* performance issue */
+
+ /* path */
+ pJS.canvas.ctx.beginPath();
+ pJS.canvas.ctx.moveTo(p1.x, p1.y);
+ pJS.canvas.ctx.lineTo(p2.x, p2.y);
+ pJS.canvas.ctx.stroke();
+ pJS.canvas.ctx.closePath();
+
+ }
+
+ }
+
+ };
+
+
+ pJS.fn.interact.attractParticles = function(p1, p2){
+
+ /* condensed particles */
+ var dx = p1.x - p2.x,
+ dy = p1.y - p2.y,
+ dist = Math.sqrt(dx*dx + dy*dy);
+
+ if(dist <= pJS.particles.line_linked.distance){
+
+ var ax = dx/(pJS.particles.move.attract.rotateX*1000),
+ ay = dy/(pJS.particles.move.attract.rotateY*1000);
+
+ p1.vx -= ax;
+ p1.vy -= ay;
+
+ p2.vx += ax;
+ p2.vy += ay;
+
+ }
+
+
+ }
+
+
+ pJS.fn.interact.bounceParticles = function(p1, p2){
+
+ var dx = p1.x - p2.x,
+ dy = p1.y - p2.y,
+ dist = Math.sqrt(dx*dx + dy*dy),
+ dist_p = p1.radius+p2.radius;
+
+ if(dist <= dist_p){
+ p1.vx = -p1.vx;
+ p1.vy = -p1.vy;
+
+ p2.vx = -p2.vx;
+ p2.vy = -p2.vy;
+ }
+
+ }
+
+
+ /* ---------- pJS functions - modes events ------------ */
+
+ pJS.fn.modes.pushParticles = function(nb, pos){
+
+ pJS.tmp.pushing = true;
+
+ for(var i = 0; i < nb; i++){
+ pJS.particles.array.push(
+ new pJS.fn.particle(
+ pJS.particles.color,
+ pJS.particles.opacity.value,
+ {
+ 'x': pos ? pos.pos_x : Math.random() * pJS.canvas.w,
+ 'y': pos ? pos.pos_y : Math.random() * pJS.canvas.h
+ }
+ )
+ )
+ if(i == nb-1){
+ if(!pJS.particles.move.enable){
+ pJS.fn.particlesDraw();
+ }
+ pJS.tmp.pushing = false;
+ }
+ }
+
+ };
+
+
+ pJS.fn.modes.removeParticles = function(nb){
+
+ pJS.particles.array.splice(0, nb);
+ if(!pJS.particles.move.enable){
+ pJS.fn.particlesDraw();
+ }
+
+ };
+
+
+ pJS.fn.modes.bubbleParticle = function(p){
+
+ /* on hover event */
+ if(pJS.interactivity.events.onhover.enable && isInArray('bubble', pJS.interactivity.events.onhover.mode)){
+
+ var dx_mouse = p.x - pJS.interactivity.mouse.pos_x,
+ dy_mouse = p.y - pJS.interactivity.mouse.pos_y,
+ dist_mouse = Math.sqrt(dx_mouse*dx_mouse + dy_mouse*dy_mouse),
+ ratio = 1 - dist_mouse / pJS.interactivity.modes.bubble.distance;
+
+ function init(){
+ p.opacity_bubble = p.opacity;
+ p.radius_bubble = p.radius;
+ }
+
+ /* mousemove - check ratio */
+ if(dist_mouse <= pJS.interactivity.modes.bubble.distance){
+
+ if(ratio >= 0 && pJS.interactivity.status == 'mousemove'){
+
+ /* size */
+ if(pJS.interactivity.modes.bubble.size != pJS.particles.size.value){
+
+ if(pJS.interactivity.modes.bubble.size > pJS.particles.size.value){
+ var size = p.radius + (pJS.interactivity.modes.bubble.size*ratio);
+ if(size >= 0){
+ p.radius_bubble = size;
+ }
+ }else{
+ var dif = p.radius - pJS.interactivity.modes.bubble.size,
+ size = p.radius - (dif*ratio);
+ if(size > 0){
+ p.radius_bubble = size;
+ }else{
+ p.radius_bubble = 0;
+ }
+ }
+
+ }
+
+ /* opacity */
+ if(pJS.interactivity.modes.bubble.opacity != pJS.particles.opacity.value){
+
+ if(pJS.interactivity.modes.bubble.opacity > pJS.particles.opacity.value){
+ var opacity = pJS.interactivity.modes.bubble.opacity*ratio;
+ if(opacity > p.opacity && opacity <= pJS.interactivity.modes.bubble.opacity){
+ p.opacity_bubble = opacity;
+ }
+ }else{
+ var opacity = p.opacity - (pJS.particles.opacity.value-pJS.interactivity.modes.bubble.opacity)*ratio;
+ if(opacity < p.opacity && opacity >= pJS.interactivity.modes.bubble.opacity){
+ p.opacity_bubble = opacity;
+ }
+ }
+
+ }
+
+ }
+
+ }else{
+ init();
+ }
+
+
+ /* mouseleave */
+ if(pJS.interactivity.status == 'mouseleave'){
+ init();
+ }
+
+ }
+
+ /* on click event */
+ else if(pJS.interactivity.events.onclick.enable && isInArray('bubble', pJS.interactivity.events.onclick.mode)){
+
+
+ if(pJS.tmp.bubble_clicking){
+ var dx_mouse = p.x - pJS.interactivity.mouse.click_pos_x,
+ dy_mouse = p.y - pJS.interactivity.mouse.click_pos_y,
+ dist_mouse = Math.sqrt(dx_mouse*dx_mouse + dy_mouse*dy_mouse),
+ time_spent = (new Date().getTime() - pJS.interactivity.mouse.click_time)/1000;
+
+ if(time_spent > pJS.interactivity.modes.bubble.duration){
+ pJS.tmp.bubble_duration_end = true;
+ }
+
+ if(time_spent > pJS.interactivity.modes.bubble.duration*2){
+ pJS.tmp.bubble_clicking = false;
+ pJS.tmp.bubble_duration_end = false;
+ }
+ }
+
+
+ function process(bubble_param, particles_param, p_obj_bubble, p_obj, id){
+
+ if(bubble_param != particles_param){
+
+ if(!pJS.tmp.bubble_duration_end){
+ if(dist_mouse <= pJS.interactivity.modes.bubble.distance){
+ if(p_obj_bubble != undefined) var obj = p_obj_bubble;
+ else var obj = p_obj;
+ if(obj != bubble_param){
+ var value = p_obj - (time_spent * (p_obj - bubble_param) / pJS.interactivity.modes.bubble.duration);
+ if(id == 'size') p.radius_bubble = value;
+ if(id == 'opacity') p.opacity_bubble = value;
+ }
+ }else{
+ if(id == 'size') p.radius_bubble = undefined;
+ if(id == 'opacity') p.opacity_bubble = undefined;
+ }
+ }else{
+ if(p_obj_bubble != undefined){
+ var value_tmp = p_obj - (time_spent * (p_obj - bubble_param) / pJS.interactivity.modes.bubble.duration),
+ dif = bubble_param - value_tmp;
+ value = bubble_param + dif;
+ if(id == 'size') p.radius_bubble = value;
+ if(id == 'opacity') p.opacity_bubble = value;
+ }
+ }
+
+ }
+
+ }
+
+ if(pJS.tmp.bubble_clicking){
+ /* size */
+ process(pJS.interactivity.modes.bubble.size, pJS.particles.size.value, p.radius_bubble, p.radius, 'size');
+ /* opacity */
+ process(pJS.interactivity.modes.bubble.opacity, pJS.particles.opacity.value, p.opacity_bubble, p.opacity, 'opacity');
+ }
+
+ }
+
+ };
+
+
+ pJS.fn.modes.repulseParticle = function(p){
+
+ if(pJS.interactivity.events.onhover.enable && isInArray('repulse', pJS.interactivity.events.onhover.mode) && pJS.interactivity.status == 'mousemove') {
+
+ var dx_mouse = p.x - pJS.interactivity.mouse.pos_x,
+ dy_mouse = p.y - pJS.interactivity.mouse.pos_y,
+ dist_mouse = Math.sqrt(dx_mouse*dx_mouse + dy_mouse*dy_mouse);
+
+ var normVec = {x: dx_mouse/dist_mouse, y: dy_mouse/dist_mouse},
+ repulseRadius = pJS.interactivity.modes.repulse.distance,
+ velocity = 100,
+ repulseFactor = clamp((1/repulseRadius)*(-1*Math.pow(dist_mouse/repulseRadius,2)+1)*repulseRadius*velocity, 0, 50);
+
+ var pos = {
+ x: p.x + normVec.x * repulseFactor,
+ y: p.y + normVec.y * repulseFactor
+ }
+
+ if(pJS.particles.move.out_mode == 'bounce'){
+ if(pos.x - p.radius > 0 && pos.x + p.radius < pJS.canvas.w) p.x = pos.x;
+ if(pos.y - p.radius > 0 && pos.y + p.radius < pJS.canvas.h) p.y = pos.y;
+ }else{
+ p.x = pos.x;
+ p.y = pos.y;
+ }
+
+ }
+
+
+ else if(pJS.interactivity.events.onclick.enable && isInArray('repulse', pJS.interactivity.events.onclick.mode)) {
+
+ if(!pJS.tmp.repulse_finish){
+ pJS.tmp.repulse_count++;
+ if(pJS.tmp.repulse_count == pJS.particles.array.length){
+ pJS.tmp.repulse_finish = true;
+ }
+ }
+
+ if(pJS.tmp.repulse_clicking){
+
+ var repulseRadius = Math.pow(pJS.interactivity.modes.repulse.distance/6, 3);
+
+ var dx = pJS.interactivity.mouse.click_pos_x - p.x,
+ dy = pJS.interactivity.mouse.click_pos_y - p.y,
+ d = dx*dx + dy*dy;
+
+ var force = -repulseRadius / d * 1;
+
+ function process(){
+
+ var f = Math.atan2(dy,dx);
+ p.vx = force * Math.cos(f);
+ p.vy = force * Math.sin(f);
+
+ if(pJS.particles.move.out_mode == 'bounce'){
+ var pos = {
+ x: p.x + p.vx,
+ y: p.y + p.vy
+ }
+ if (pos.x + p.radius > pJS.canvas.w) p.vx = -p.vx;
+ else if (pos.x - p.radius < 0) p.vx = -p.vx;
+ if (pos.y + p.radius > pJS.canvas.h) p.vy = -p.vy;
+ else if (pos.y - p.radius < 0) p.vy = -p.vy;
+ }
+
+ }
+
+ // default
+ if(d <= repulseRadius){
+ process();
+ }
+
+ // bang - slow motion mode
+ // if(!pJS.tmp.repulse_finish){
+ // if(d <= repulseRadius){
+ // process();
+ // }
+ // }else{
+ // process();
+ // }
+
+
+ }else{
+
+ if(pJS.tmp.repulse_clicking == false){
+
+ p.vx = p.vx_i;
+ p.vy = p.vy_i;
+
+ }
+
+ }
+
+ }
+
+ }
+
+
+ pJS.fn.modes.grabParticle = function(p){
+
+ if(pJS.interactivity.events.onhover.enable && pJS.interactivity.status == 'mousemove'){
+
+ var dx_mouse = p.x - pJS.interactivity.mouse.pos_x,
+ dy_mouse = p.y - pJS.interactivity.mouse.pos_y,
+ dist_mouse = Math.sqrt(dx_mouse*dx_mouse + dy_mouse*dy_mouse);
+
+ /* draw a line between the cursor and the particle if the distance between them is under the config distance */
+ if(dist_mouse <= pJS.interactivity.modes.grab.distance){
+
+ var opacity_line = pJS.interactivity.modes.grab.line_linked.opacity - (dist_mouse / (1/pJS.interactivity.modes.grab.line_linked.opacity)) / pJS.interactivity.modes.grab.distance;
+
+ if(opacity_line > 0){
+
+ /* style */
+ var color_line = pJS.particles.line_linked.color_rgb_line;
+ pJS.canvas.ctx.strokeStyle = 'rgba('+color_line.r+','+color_line.g+','+color_line.b+','+opacity_line+')';
+ pJS.canvas.ctx.lineWidth = pJS.particles.line_linked.width;
+ //pJS.canvas.ctx.lineCap = 'round'; /* performance issue */
+
+ /* path */
+ pJS.canvas.ctx.beginPath();
+ pJS.canvas.ctx.moveTo(p.x, p.y);
+ pJS.canvas.ctx.lineTo(pJS.interactivity.mouse.pos_x, pJS.interactivity.mouse.pos_y);
+ pJS.canvas.ctx.stroke();
+ pJS.canvas.ctx.closePath();
+
+ }
+
+ }
+
+ }
+
+ };
+
+
+
+ /* ---------- pJS functions - vendors ------------ */
+
+ pJS.fn.vendors.eventsListeners = function(){
+
+ /* events target element */
+ if(pJS.interactivity.detect_on == 'window'){
+ pJS.interactivity.el = window;
+ }else{
+ pJS.interactivity.el = pJS.canvas.el;
+ }
+
+
+ /* detect mouse pos - on hover / click event */
+ if(pJS.interactivity.events.onhover.enable || pJS.interactivity.events.onclick.enable){
+
+ /* el on mousemove */
+ pJS.interactivity.el.addEventListener('mousemove', function(e){
+
+ if(pJS.interactivity.el == window){
+ var pos_x = e.clientX,
+ pos_y = e.clientY;
+ }
+ else{
+ var pos_x = e.offsetX || e.clientX,
+ pos_y = e.offsetY || e.clientY;
+ }
+
+ pJS.interactivity.mouse.pos_x = pos_x;
+ pJS.interactivity.mouse.pos_y = pos_y;
+
+ if(pJS.tmp.retina){
+ pJS.interactivity.mouse.pos_x *= pJS.canvas.pxratio;
+ pJS.interactivity.mouse.pos_y *= pJS.canvas.pxratio;
+ }
+
+ pJS.interactivity.status = 'mousemove';
+
+ });
+
+ /* el on onmouseleave */
+ pJS.interactivity.el.addEventListener('mouseleave', function(e){
+
+ pJS.interactivity.mouse.pos_x = null;
+ pJS.interactivity.mouse.pos_y = null;
+ pJS.interactivity.status = 'mouseleave';
+
+ });
+
+ }
+
+ /* on click event */
+ if(pJS.interactivity.events.onclick.enable){
+
+ pJS.interactivity.el.addEventListener('click', function(){
+
+ pJS.interactivity.mouse.click_pos_x = pJS.interactivity.mouse.pos_x;
+ pJS.interactivity.mouse.click_pos_y = pJS.interactivity.mouse.pos_y;
+ pJS.interactivity.mouse.click_time = new Date().getTime();
+
+ if(pJS.interactivity.events.onclick.enable){
+
+ switch(pJS.interactivity.events.onclick.mode){
+
+ case 'push':
+ if(pJS.particles.move.enable){
+ pJS.fn.modes.pushParticles(pJS.interactivity.modes.push.particles_nb, pJS.interactivity.mouse);
+ }else{
+ if(pJS.interactivity.modes.push.particles_nb == 1){
+ pJS.fn.modes.pushParticles(pJS.interactivity.modes.push.particles_nb, pJS.interactivity.mouse);
+ }
+ else if(pJS.interactivity.modes.push.particles_nb > 1){
+ pJS.fn.modes.pushParticles(pJS.interactivity.modes.push.particles_nb);
+ }
+ }
+ break;
+
+ case 'remove':
+ pJS.fn.modes.removeParticles(pJS.interactivity.modes.remove.particles_nb);
+ break;
+
+ case 'bubble':
+ pJS.tmp.bubble_clicking = true;
+ break;
+
+ case 'repulse':
+ pJS.tmp.repulse_clicking = true;
+ pJS.tmp.repulse_count = 0;
+ pJS.tmp.repulse_finish = false;
+ setTimeout(function(){
+ pJS.tmp.repulse_clicking = false;
+ }, pJS.interactivity.modes.repulse.duration*1000)
+ break;
+
+ }
+
+ }
+
+ });
+
+ }
+
+
+ };
+
+ pJS.fn.vendors.densityAutoParticles = function(){
+
+ if(pJS.particles.number.density.enable){
+
+ /* calc area */
+ var area = pJS.canvas.el.width * pJS.canvas.el.height / 1000;
+ if(pJS.tmp.retina){
+ area = area/(pJS.canvas.pxratio*2);
+ }
+
+ /* calc number of particles based on density area */
+ var nb_particles = area * pJS.particles.number.value / pJS.particles.number.density.value_area;
+
+ /* add or remove X particles */
+ var missing_particles = pJS.particles.array.length - nb_particles;
+ if(missing_particles < 0) pJS.fn.modes.pushParticles(Math.abs(missing_particles));
+ else pJS.fn.modes.removeParticles(missing_particles);
+
+ }
+
+ };
+
+
+ pJS.fn.vendors.checkOverlap = function(p1, position){
+ for(var i = 0; i < pJS.particles.array.length; i++){
+ var p2 = pJS.particles.array[i];
+
+ var dx = p1.x - p2.x,
+ dy = p1.y - p2.y,
+ dist = Math.sqrt(dx*dx + dy*dy);
+
+ if(dist <= p1.radius + p2.radius){
+ p1.x = position ? position.x : Math.random() * pJS.canvas.w;
+ p1.y = position ? position.y : Math.random() * pJS.canvas.h;
+ pJS.fn.vendors.checkOverlap(p1);
+ }
+ }
+ };
+
+
+ pJS.fn.vendors.createSvgImg = function(p){
+
+ /* set color to svg element */
+ var svgXml = pJS.tmp.source_svg,
+ rgbHex = /#([0-9A-F]{3,6})/gi,
+ coloredSvgXml = svgXml.replace(rgbHex, function (m, r, g, b) {
+ if(p.color.rgb){
+ var color_value = 'rgba('+p.color.rgb.r+','+p.color.rgb.g+','+p.color.rgb.b+','+p.opacity+')';
+ }else{
+ var color_value = 'hsla('+p.color.hsl.h+','+p.color.hsl.s+'%,'+p.color.hsl.l+'%,'+p.opacity+')';
+ }
+ return color_value;
+ });
+
+ /* prepare to create img with colored svg */
+ var svg = new Blob([coloredSvgXml], {type: 'image/svg+xml;charset=utf-8'}),
+ DOMURL = window.URL || window.webkitURL || window,
+ url = DOMURL.createObjectURL(svg);
+
+ /* create particle img obj */
+ var img = new Image();
+ img.addEventListener('load', function(){
+ p.img.obj = img;
+ p.img.loaded = true;
+ DOMURL.revokeObjectURL(url);
+ pJS.tmp.count_svg++;
+ });
+ img.src = url;
+
+ };
+
+
+ pJS.fn.vendors.destroypJS = function(){
+ cancelAnimationFrame(pJS.fn.drawAnimFrame);
+ canvas_el.remove();
+ pJSDom = null;
+ };
+
+
+ pJS.fn.vendors.drawShape = function(c, startX, startY, sideLength, sideCountNumerator, sideCountDenominator){
+
+ // By Programming Thomas - https://programmingthomas.wordpress.com/2013/04/03/n-sided-shapes/
+ var sideCount = sideCountNumerator * sideCountDenominator;
+ var decimalSides = sideCountNumerator / sideCountDenominator;
+ var interiorAngleDegrees = (180 * (decimalSides - 2)) / decimalSides;
+ var interiorAngle = Math.PI - Math.PI * interiorAngleDegrees / 180; // convert to radians
+ c.save();
+ c.beginPath();
+ c.translate(startX, startY);
+ c.moveTo(0,0);
+ for (var i = 0; i < sideCount; i++) {
+ c.lineTo(sideLength,0);
+ c.translate(sideLength,0);
+ c.rotate(interiorAngle);
+ }
+ //c.stroke();
+ c.fill();
+ c.restore();
+
+ };
+
+ pJS.fn.vendors.exportImg = function(){
+ window.open(pJS.canvas.el.toDataURL('image/png'), '_blank');
+ };
+
+
+ pJS.fn.vendors.loadImg = function(type){
+
+ pJS.tmp.img_error = undefined;
+
+ if(pJS.particles.shape.image.src != ''){
+
+ if(type == 'svg'){
+
+ var xhr = new XMLHttpRequest();
+ xhr.open('GET', pJS.particles.shape.image.src);
+ xhr.onreadystatechange = function (data) {
+ if(xhr.readyState == 4){
+ if(xhr.status == 200){
+ pJS.tmp.source_svg = data.currentTarget.response;
+ pJS.fn.vendors.checkBeforeDraw();
+ }else{
+ console.log('Error pJS - Image not found');
+ pJS.tmp.img_error = true;
+ }
+ }
+ }
+ xhr.send();
+
+ }else{
+
+ var img = new Image();
+ img.addEventListener('load', function(){
+ pJS.tmp.img_obj = img;
+ pJS.fn.vendors.checkBeforeDraw();
+ });
+ img.src = pJS.particles.shape.image.src;
+
+ }
+
+ }else{
+ console.log('Error pJS - No image.src');
+ pJS.tmp.img_error = true;
+ }
+
+ };
+
+
+ pJS.fn.vendors.draw = function(){
+
+ if(pJS.particles.shape.type == 'image'){
+
+ if(pJS.tmp.img_type == 'svg'){
+
+ if(pJS.tmp.count_svg >= pJS.particles.number.value){
+ pJS.fn.particlesDraw();
+ if(!pJS.particles.move.enable) cancelRequestAnimFrame(pJS.fn.drawAnimFrame);
+ else pJS.fn.drawAnimFrame = requestAnimFrame(pJS.fn.vendors.draw);
+ }else{
+ //console.log('still loading...');
+ if(!pJS.tmp.img_error) pJS.fn.drawAnimFrame = requestAnimFrame(pJS.fn.vendors.draw);
+ }
+
+ }else{
+
+ if(pJS.tmp.img_obj != undefined){
+ pJS.fn.particlesDraw();
+ if(!pJS.particles.move.enable) cancelRequestAnimFrame(pJS.fn.drawAnimFrame);
+ else pJS.fn.drawAnimFrame = requestAnimFrame(pJS.fn.vendors.draw);
+ }else{
+ if(!pJS.tmp.img_error) pJS.fn.drawAnimFrame = requestAnimFrame(pJS.fn.vendors.draw);
+ }
+
+ }
+
+ }else{
+ pJS.fn.particlesDraw();
+ if(!pJS.particles.move.enable) cancelRequestAnimFrame(pJS.fn.drawAnimFrame);
+ else pJS.fn.drawAnimFrame = requestAnimFrame(pJS.fn.vendors.draw);
+ }
+
+ };
+
+
+ pJS.fn.vendors.checkBeforeDraw = function(){
+
+ // if shape is image
+ if(pJS.particles.shape.type == 'image'){
+
+ if(pJS.tmp.img_type == 'svg' && pJS.tmp.source_svg == undefined){
+ pJS.tmp.checkAnimFrame = requestAnimFrame(check);
+ }else{
+ //console.log('images loaded! cancel check');
+ cancelRequestAnimFrame(pJS.tmp.checkAnimFrame);
+ if(!pJS.tmp.img_error){
+ pJS.fn.vendors.init();
+ pJS.fn.vendors.draw();
+ }
+
+ }
+
+ }else{
+ pJS.fn.vendors.init();
+ pJS.fn.vendors.draw();
+ }
+
+ };
+
+
+ pJS.fn.vendors.init = function(){
+
+ /* init canvas + particles */
+ pJS.fn.retinaInit();
+ pJS.fn.canvasInit();
+ pJS.fn.canvasSize();
+ pJS.fn.canvasPaint();
+ pJS.fn.particlesCreate();
+ pJS.fn.vendors.densityAutoParticles();
+
+ /* particles.line_linked - convert hex colors to rgb */
+ pJS.particles.line_linked.color_rgb_line = hexToRgb(pJS.particles.line_linked.color);
+
+ };
+
+
+ pJS.fn.vendors.start = function(){
+
+ if(isInArray('image', pJS.particles.shape.type)){
+ pJS.tmp.img_type = pJS.particles.shape.image.src.substr(pJS.particles.shape.image.src.length - 3);
+ pJS.fn.vendors.loadImg(pJS.tmp.img_type);
+ }else{
+ pJS.fn.vendors.checkBeforeDraw();
+ }
+
+ };
+
+
+
+
+ /* ---------- pJS - start ------------ */
+
+
+ pJS.fn.vendors.eventsListeners();
+
+ pJS.fn.vendors.start();
+
+
+
+};
+
+/* ---------- global functions - vendors ------------ */
+
+Object.deepExtend = function(destination, source) {
+ for (var property in source) {
+ if (source[property] && source[property].constructor &&
+ source[property].constructor === Object) {
+ destination[property] = destination[property] || {};
+ arguments.callee(destination[property], source[property]);
+ } else {
+ destination[property] = source[property];
+ }
+ }
+ return destination;
+};
+
+window.requestAnimFrame = (function(){
+ return window.requestAnimationFrame ||
+ window.webkitRequestAnimationFrame ||
+ window.mozRequestAnimationFrame ||
+ window.oRequestAnimationFrame ||
+ window.msRequestAnimationFrame ||
+ function(callback){
+ window.setTimeout(callback, 1000 / 60);
+ };
+})();
+
+window.cancelRequestAnimFrame = ( function() {
+ return window.cancelAnimationFrame ||
+ window.webkitCancelRequestAnimationFrame ||
+ window.mozCancelRequestAnimationFrame ||
+ window.oCancelRequestAnimationFrame ||
+ window.msCancelRequestAnimationFrame ||
+ clearTimeout
+} )();
+
+function hexToRgb(hex){
+ // By Tim Down - http://stackoverflow.com/a/5624139/3493650
+ // Expand shorthand form (e.g. "03F") to full form (e.g. "0033FF")
+ var shorthandRegex = /^#?([a-f\d])([a-f\d])([a-f\d])$/i;
+ hex = hex.replace(shorthandRegex, function(m, r, g, b) {
+ return r + r + g + g + b + b;
+ });
+ var result = /^#?([a-f\d]{2})([a-f\d]{2})([a-f\d]{2})$/i.exec(hex);
+ return result ? {
+ r: parseInt(result[1], 16),
+ g: parseInt(result[2], 16),
+ b: parseInt(result[3], 16)
+ } : null;
+};
+
+function clamp(number, min, max) {
+ return Math.min(Math.max(number, min), max);
+};
+
+function isInArray(value, array) {
+ return array.indexOf(value) > -1;
+}
+
+
+/* ---------- particles.js functions - start ------------ */
+
+window.pJSDom = [];
+
+window.particlesJS = function(tag_id, params){
+
+ //console.log(params);
+
+ /* no string id? so it's object params, and set the id with default id */
+ if(typeof(tag_id) != 'string'){
+ params = tag_id;
+ tag_id = 'particles-js';
+ }
+
+ /* no id? set the id to default id */
+ if(!tag_id){
+ tag_id = 'particles-js';
+ }
+
+ /* pJS elements */
+ var pJS_tag = document.getElementById(tag_id),
+ pJS_canvas_class = 'particles-js-canvas-el',
+ exist_canvas = pJS_tag.getElementsByClassName(pJS_canvas_class);
+
+ /* remove canvas if exists into the pJS target tag */
+ if(exist_canvas.length){
+ while(exist_canvas.length > 0){
+ pJS_tag.removeChild(exist_canvas[0]);
+ }
+ }
+
+ /* create canvas element */
+ var canvas_el = document.createElement('canvas');
+ canvas_el.className = pJS_canvas_class;
+
+ /* set size canvas */
+ canvas_el.style.width = "100%";
+ canvas_el.style.height = "100%";
+
+ /* append canvas */
+ var canvas = document.getElementById(tag_id).appendChild(canvas_el);
+
+ /* launch particle.js */
+ if(canvas != null){
+ pJSDom.push(new pJS(tag_id, params));
+ }
+
+};
+
+window.particlesJS.load = function(tag_id, path_config_json, callback){
+
+ /* load json config */
+ var xhr = new XMLHttpRequest();
+ xhr.open('GET', path_config_json);
+ xhr.onreadystatechange = function (data) {
+ if(xhr.readyState == 4){
+ if(xhr.status == 200){
+ var params = JSON.parse(data.currentTarget.response);
+ window.particlesJS(tag_id, params);
+ if(callback) callback();
+ }else{
+ console.log('Error pJS - XMLHttpRequest status: '+xhr.status);
+ console.log('Error pJS - File config not found');
+ }
+ }
+ };
+ xhr.send();
+
+};
\ No newline at end of file
diff --git a/hodor/static/particles.json b/hodor/static/particles.json
new file mode 100644
index 0000000000000000000000000000000000000000..7573576d965f8a1b157d02bbb75c7de5688356bc
--- /dev/null
+++ b/hodor/static/particles.json
@@ -0,0 +1,110 @@
+{
+ "particles": {
+ "number": {
+ "value": 50,
+ "density": {
+ "enable": true,
+ "value_area": 800
+ }
+ },
+ "color": {
+ "value": "#ffc400"
+ },
+ "shape": {
+ "type": "circle",
+ "stroke": {
+ "width": 0,
+ "color": "#000000"
+ },
+ "polygon": {
+ "nb_sides": 5
+ },
+ "image": {
+ "src": "img/github.svg",
+ "width": 100,
+ "height": 100
+ }
+ },
+ "opacity": {
+ "value": 0.5,
+ "random": false,
+ "anim": {
+ "enable": false,
+ "speed": 1,
+ "opacity_min": 0.1,
+ "sync": false
+ }
+ },
+ "size": {
+ "value": 3,
+ "random": true,
+ "anim": {
+ "enable": true,
+ "speed": 10,
+ "size_min": 0.1,
+ "sync": false
+ }
+ },
+ "line_linked": {
+ "enable": true,
+ "distance": 150,
+ "color": "#ffffff",
+ "opacity": 0.4,
+ "width": 1
+ },
+ "move": {
+ "enable": true,
+ "speed": 5,
+ "direction": "none",
+ "random": true,
+ "straight": false,
+ "out_mode": "bounce",
+ "bounce": false,
+ "attract": {
+ "enable": true,
+ "rotateX": 600,
+ "rotateY": 1200
+ }
+ }
+ },
+ "interactivity": {
+ "detect_on": "window",
+ "events": {
+ "onhover": {
+ "enable": false,
+ "mode": "repulse"
+ },
+ "onclick": {
+ "enable": true,
+ "mode": "repulse"
+ },
+ "resize": true
+ },
+ "modes": {
+ "grab": {
+ "distance": 400,
+ "line_linked": {
+ "opacity": 1
+ }
+ },
+ "bubble": {
+ "distance": 400,
+ "size": 40,
+ "duration": 2,
+ "opacity": 8,
+ "speed": 3
+ },
+ "repulse": {
+ "distance": 200,
+ "duration": 0.4
+ },
+ "push": {
+ "particles_nb": 4
+ },
+ "remove": {
+ "particles_nb": 2
+ }
+ }
+ },
+ "retina_detect": true
+}
diff --git a/hodor/templates/index/index.html b/hodor/templates/index/index.html
new file mode 100644
index 0000000000000000000000000000000000000000..3ed12c1bd4fa781144a2707e39e693f730eca30d
--- /dev/null
+++ b/hodor/templates/index/index.html
@@ -0,0 +1,38 @@
+<!DOCTYPE html>
+<html>
+ <head>
+ <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.11.0/umd/popper.min.js" integrity="sha384-b/U6ypiBEHpOf/4+1nzFpr53nxSS+GLCkfwBdFNTxtclqqenISfwAzpKaMNFNmj4" crossorigin="anonymous"></script>
+ <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta/js/bootstrap.min.js" integrity="sha384-h0AbiXch4ZDo7tp9hKZ4TsHbi047NrKGLO3SEJAg45jXxnGIfYzk4Si90RDIqNm1" crossorigin="anonymous"></script>
+ <script src="{{ url_for('static', filename='js/particles.js') }}"></script>
+ <script src="{{ url_for('static', filename='js/modals.js') }}"></script>
+ <script>
+ particlesJS.load('particles-js', '/static/particles.json', function() {
+ console.log('callback - particles.js config loaded');
+ });
+ </script>
+ <link rel="stylesheet" href="{{ url_for('static', filename='css/styles.css') }}">
+ <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta/css/bootstrap.min.css" integrity="sha384-/Y6pD6FV/Vv2HJnA6t+vslU6fwYXjCFtcEpHbNJ0lyAFsXTsjBbfaDjzALeQsN6M" crossorigin="anonymous">
+ <link href="https://fonts.googleapis.com/css?family=Lato:300,100" rel="stylesheet">
+ <title> Hodor Security Training</title>
+ </head>
+ <body>
+ {% include 'layout/navigation.html' %}
+ <div id="particles-js" class="container-fluid content">
+ <div class="row text-center abs">
+ <img id="logo" src="{{ url_for('static', filename='img/hodor.png') }}" width="150" height="180">
+ </div>
+ <div class="row text-center abs">
+ <h2 id="caption"> Hodor <span id="version">v.0.0.1 alpha</span></h2>
+ </div>
+ <div class="row text-center abs">
+ <pre id="subtitle"> Hodor is an open-sourced, cyber-security training and practice platform designed for beginners.
+ Hodor is currently in alpha development stage
+ </pre>
+ </div>
+ <div class="row text-center abs">
+ <button id="more" class="btn btn-outline-danger">Know More</button>
+ </div>
+ </div>
+ </body>
+</html>
diff --git a/hodor/templates/layout/layout.html b/hodor/templates/layout/layout.html
deleted file mode 100644
index 9636093b0b115dfe9f9b90f1c38e20823b26fc94..0000000000000000000000000000000000000000
--- a/hodor/templates/layout/layout.html
+++ /dev/null
@@ -1,21 +0,0 @@
-<!doctype html>
- <head>
- <link rel="stylesheet" type="text/css" href="{{ url_for('static', filename='css/style.css') }}">
- <title>Flask-MVC</title>
- </head>
- <body>
- <a style="text-align:center" href="{{ url_for('start') }}">Home</a>
- <div class="page">
- <h1>Flask MVC Boilerplate</h1>
- {% for message in get_flashed_messages() %}
- <div class="flash">{{ message }}</div>
- {% endfor %}
- {% macro render_error(field) %}
- {% if field.errors %}
- {% for error in field.errors %}<span class='error'>{{ error }}</span>{% endfor %}
- {% endif %}
- {% endmacro %}
- {% block body %}{% endblock %}
- </div>
- </body>
-</html>
diff --git a/hodor/templates/layout/navigation.html b/hodor/templates/layout/navigation.html
new file mode 100644
index 0000000000000000000000000000000000000000..c80baee3aeafb18a7f6c8a25cc46fcbd4872e055
--- /dev/null
+++ b/hodor/templates/layout/navigation.html
@@ -0,0 +1,116 @@
+<nav class="navbar navbar-expand-lg navbar-dark bg-dark justify-content-between hodor-nav" style="background-color:#101010;">
+ <div class="container-fluid">
+ <div class="row">
+ <a class="navbar-brand nav-hodor float-sm-left" href="#">
+ <img src="{{ url_for('static', filename='img/hodor.png') }}" width="25" class="d-inline-block align-top" alt="">
+ Hodor Project
+ </a>
+ </div>
+ <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarText" aria-controls="navbarText" aria-expanded="false" aria-label="Toggle navigation">
+ <span class="navbar-toggler-icon"></span>
+ </button>
+ <div class="collapse navbar-collapse" id="navbarText">
+ <ul class="nav navbar-nav mr-auto"></ul> <!-- Stupid Bootstrap -->
+ <ul class="nav navbar-nav">
+ <span class="navbar-text">
+ <!-- TO DO: Change Guest to a variable -->
+ Welcome, <span style="font-weight: bolder; color: white;"> Guest</span>
+ </span>
+ <ul class="nav-item">
+ <button class="btn btn-outline-success my-2 my-sm-0 mr-3 cd-signin" >Sign In</button>
+ <button class="btn btn-outline-info my-2 my-sm-0 mr-3 cd-signup" >Register</button>
+ </ul>
+ </ul>
+ </div>
+ </div>
+</nav>
+<!-- Navigation Ends here -->
+
+<div class="cd-user-modal"> <!-- this is the entire modal form, including the background -->
+<div class="cd-user-modal-container"> <!-- this is the container wrapper -->
+<ul class="cd-switcher">
+<li><a href="#0">Sign in</a></li>
+<li><a href="#0">New account</a></li>
+</ul>
+
+<div id="cd-login"> <!-- log in form -->
+<form class="cd-form">
+ <p class="fieldset">
+ <label class="image-replace cd-email" for="signin-email">E-mail</label>
+ <input class="full-width has-padding has-border" id="signin-email" required type="email" placeholder="E-mail">
+ <span class="cd-error-message">Invalid E-mail</span>
+ </p>
+
+ <p class="fieldset">
+ <label class="image-replace cd-password" for="signin-password">Password</label>
+ <input class="full-width has-padding has-border" id="signin-password" required type="text" placeholder="Password">
+ <a href="#0" class="hide-password">Hide</a>
+ <span class="cd-error-message">Hmm, that doesn't look right!</span>
+ </p>
+
+ <p class="fieldset">
+ <input type="checkbox" id="remember-me" checked>
+ <label for="remember-me">Remember me</label>
+ </p>
+
+ <p class="fieldset">
+ <input class="full-width" type="submit" value="Login">
+ </p>
+</form>
+
+<p class="cd-form-bottom-message"><a href="#0">Forgot your password?</a></p>
+</div> <!-- cd-login -->
+<div id="cd-signup"> <!-- sign up form -->
+<form class="cd-form">
+ <p class="fieldset">
+ <label class="image-replace cd-username" for="signup-username">Username</label>
+ <input class="full-width has-padding has-border" id="signup-username" required type="text" placeholder="Username">
+ <span class="cd-error-message">Error message here!</span>
+ </p>
+
+ <p class="fieldset">
+ <label class="image-replace cd-email" for="signup-email">E-mail</label>
+ <input class="full-width has-padding has-border" id="signup-email" required type="email" placeholder="E-mail">
+ <span class="cd-error-message">Error message here!</span>
+ </p>
+
+ <p class="fieldset">
+ <label class="image-replace cd-password" for="signup-password">Password</label>
+ <input class="full-width has-padding has-border" id="signup-password" type="text" required placeholder="Password">
+ <a href="#0" class="hide-password">Hide</a>
+ <span class="cd-error-message">Error message here!</span>
+ </p>
+
+ <p class="fieldset">
+ <input type="checkbox" required id="accept-terms">
+ <label for="accept-terms">I agree to the <a href="#0">Terms</a></label>
+ </p>
+
+ <p class="fieldset">
+ <input class="full-width has-padding" type="submit" value="Create account">
+ </p>
+</form>
+
+<!-- <a href="#0" class="cd-close-form">Close</a> -->
+</div> <!-- cd-signup -->
+
+<div id="cd-reset-password"> <!-- reset password form -->
+<p class="cd-form-message">Lost your password? Please enter your email address. You will receive a link to create a new password.</p>
+
+<form class="cd-form">
+ <p class="fieldset">
+ <label class="image-replace cd-email" for="reset-email">E-mail</label>
+ <input class="full-width has-padding has-border" id="reset-email" type="email" placeholder="E-mail">
+ <span class="cd-error-message">Error message here!</span>
+ </p>
+
+ <p class="fieldset">
+ <input class="full-width has-padding" type="submit" value="Reset password">
+ </p>
+</form>
+
+<p class="cd-form-bottom-message"><a href="#0">Back to log-in</a></p>
+</div> <!-- cd-reset-password -->
+<a href="#0" class="cd-close-form">Close</a>
+</div> <!-- cd-user-modal-container -->
+</div> <!-- cd-user-modal -->
diff --git a/hodor/templates/printer/index.html b/hodor/templates/printer/index.html
deleted file mode 100644
index 00e9c5e8162012901bda0d21bb8f00d4f814a85b..0000000000000000000000000000000000000000
--- a/hodor/templates/printer/index.html
+++ /dev/null
@@ -1,8 +0,0 @@
-{% extends "layout/layout.html" %}
-{% block body %}
- <ul>
- <p>
- <a href="{{ url_for('printer') }}">Click here to print!</a>
- </p>
- </ul>
-{% endblock %}
diff --git a/hodor/templates/printer/print.html b/hodor/templates/printer/print.html
deleted file mode 100644
index 6053f5488a5102a507d1bff1f9b0dba9bfe45629..0000000000000000000000000000000000000000
--- a/hodor/templates/printer/print.html
+++ /dev/null
@@ -1,10 +0,0 @@
-{% extends "layout/layout.html" %}
-{% block body %}
- <form action="{{ url_for('printer') }}" method="post">
- {{ form.csrf_token }}
- <dl>
- <dd>{{ form.text.label }} {{ form.text(size=20) }} {{ render_error(form.text) }}</dd>
- <dd><input type="submit" value="Flash"/></dd>
- </dl>
- </form>
-{% endblock %}