+
+
+
\ No newline at end of file
diff --git a/src/pages/matrix.html b/src/pages/matrix.html
new file mode 100644
index 0000000..176114d
--- /dev/null
+++ b/src/pages/matrix.html
@@ -0,0 +1,93 @@
+
+
+
+
+
+
+
+
\ No newline at end of file
diff --git a/src/styles/base.less b/src/styles/base.less
new file mode 100644
index 0000000..56abe86
--- /dev/null
+++ b/src/styles/base.less
@@ -0,0 +1,41 @@
+.hidden {
+ display: none;
+}
+
+.shown {
+ display: block;
+}
+
+.disabled {
+ opacity: 0.65;
+}
+
+.sui {
+ background: @color-black;
+ color: @color-main-light;
+ font-family: @default-font;
+ font-size: @default-font-size;
+
+ * {
+ margin: 0;
+ padding: 0;
+ -webkit-tap-highlight-color: transparent;
+ }
+
+ > .content {
+ padding: @default-padding;
+ }
+
+ label {
+ color: @color-grey;
+ }
+
+ button {
+ background: @color-main;
+ color: @color-white;
+ font-size: 0.9em;
+ border: 0;
+ padding: .8em;
+ margin: 0 .4em;
+ }
+}
\ No newline at end of file
diff --git a/src/styles/container.less b/src/styles/container.less
new file mode 100644
index 0000000..9af4f50
--- /dev/null
+++ b/src/styles/container.less
@@ -0,0 +1,26 @@
+.container {
+ background: @color-container;
+ padding: @default-padding;
+ border-radius: @default-border-radius;
+ border: solid 1px @default-border-color;
+ margin-bottom: @default-margin-small;
+ &.collapsible {
+ > .heading {
+ margin-bottom: 0;
+ &:hover {
+ cursor: pointer;
+ }
+ }
+ > .content {
+ .hidden;
+ }
+ &.open {
+ > .heading {
+ margin-bottom: @default-margin;
+ }
+ > .content {
+ .shown;
+ }
+ }
+ }
+}
\ No newline at end of file
diff --git a/src/styles/form/color.less b/src/styles/form/color.less
new file mode 100644
index 0000000..43506c2
--- /dev/null
+++ b/src/styles/form/color.less
@@ -0,0 +1,7 @@
+.ColorPicker {
+ flex: none !important;
+ background-color: transparent;
+ border: 0;
+ height: 50px;
+ width: 75px;
+}
\ No newline at end of file
diff --git a/src/styles/form/input.less b/src/styles/form/input.less
new file mode 100644
index 0000000..80f1f5e
--- /dev/null
+++ b/src/styles/form/input.less
@@ -0,0 +1,24 @@
+.sui {
+
+ input {
+ padding: .5em;
+ }
+
+ input[type="text"], input[type="password"] {
+ height: @input-text-height;
+ background: transparent;
+ border: none;
+ color: @color-white;
+ &:focus, &:hover {
+ outline: none;
+ border-bottom: solid 1px @color-main;
+ box-shadow: 3px @color-main;
+ }
+ }
+ input[type="checkbox"] {
+ transform: scale(@input-checkbox-scale);
+ }
+ input[type="range"] {
+
+ }
+}
\ No newline at end of file
diff --git a/src/styles/form/layout.less b/src/styles/form/layout.less
new file mode 100644
index 0000000..8ad18d7
--- /dev/null
+++ b/src/styles/form/layout.less
@@ -0,0 +1,48 @@
+form {
+ .form-row {
+ display: flex;
+ justify-content: flex-end;
+ flex-wrap: wrap;
+ padding: .2em;
+
+ }
+ .form-row > label {
+ padding: .5em 1em .5em 0;
+ flex: 1;
+ }
+ .form-row > label + label {
+ flex: 0;
+ }
+ .form-row > label.switch + label {
+ flex: 1;
+ }
+ .form-row > input {
+ flex: 2;
+
+ }
+ .form-row > span {
+ flex: 2;
+ text-align: right;
+ }
+ .form-row input[type="checkbox"] {
+ margin-top: 12px;
+ }
+ .form-row input[type="range"] {
+
+ }
+ @media screen and (min-width: 768px) {
+ .form-row > input, .form-row > span {
+ flex: 3;
+ }
+ }
+ @media screen and (min-width: 992px) {
+ .form-row > input, .form-row > span {
+ flex: 4;
+ }
+ }
+ @media screen and (min-width: 1200px) {
+ .form-row > input, .form-row > span {
+ flex: 5;
+ }
+ }
+}
\ No newline at end of file
diff --git a/src/styles/form/slider.less b/src/styles/form/slider.less
new file mode 100644
index 0000000..487a4bc
--- /dev/null
+++ b/src/styles/form/slider.less
@@ -0,0 +1,87 @@
+input[type=range] {
+ -webkit-appearance: none;
+ width: 100%;
+ margin: 8.4px 0;
+ padding: 0 !important;
+ background-color: transparent;
+}
+input[type=range]:focus {
+ outline: none;
+}
+input[type=range]::-webkit-slider-runnable-track {
+ width: 100%;
+ height: 3.2px;
+ cursor: pointer;
+ box-shadow: 1px 1px 1px #000000, 0px 0px 1px #0d0d0d;
+ background: #097479;
+ border-radius: 1.3px;
+ border: 0.2px solid #010101;
+}
+input[type=range]::-webkit-slider-thumb {
+ box-shadow: 0.6px 0.6px 2.8px #000000, 0px 0px 0.6px #0d0d0d;
+ border: 0.4px solid #000000;
+ height: 20px;
+ width: 20px;
+ border-radius: 50px;
+ background: #0eb8c0;
+ cursor: pointer;
+ -webkit-appearance: none;
+ margin-top: -8.6px;
+}
+input[type=range]:focus::-webkit-slider-runnable-track {
+ background: #0eb4bb;
+}
+input[type=range]::-moz-range-track {
+ width: 100%;
+ height: 3.2px;
+ cursor: pointer;
+ box-shadow: 1px 1px 1px #000000, 0px 0px 1px #0d0d0d;
+ background: #097479;
+ border-radius: 1.3px;
+ border: 0.2px solid #010101;
+}
+input[type=range]::-moz-range-thumb {
+ box-shadow: 0.6px 0.6px 2.8px #000000, 0px 0px 0.6px #0d0d0d;
+ border: 0.4px solid #000000;
+ height: 20px;
+ width: 20px;
+ border-radius: 50px;
+ background: #0eb8c0;
+ cursor: pointer;
+}
+input[type=range]::-ms-track {
+ width: 100%;
+ height: 3.2px;
+ cursor: pointer;
+ background: transparent;
+ border-color: transparent;
+ color: transparent;
+}
+input[type=range]::-ms-fill-lower {
+ background: #043437;
+ border: 0.2px solid #010101;
+ border-radius: 2.6px;
+ box-shadow: 1px 1px 1px #000000, 0px 0px 1px #0d0d0d;
+}
+input[type=range]::-ms-fill-upper {
+ background: #097479;
+ border: 0.2px solid #010101;
+ border-radius: 2.6px;
+ box-shadow: 1px 1px 1px #000000, 0px 0px 1px #0d0d0d;
+}
+input[type=range]::-ms-thumb {
+ box-shadow: 0.6px 0.6px 2.8px #000000, 0px 0px 0.6px #0d0d0d;
+ border: 0.4px solid #000000;
+ height: 20px;
+ width: 20px;
+ border-radius: 50px;
+ background: #0eb8c0;
+ cursor: pointer;
+ height: 3.2px;
+}
+input[type=range]:focus::-ms-fill-lower {
+ background: #097479;
+}
+input[type=range]:focus::-ms-fill-upper {
+ background: #0eb4bb;
+}
diff --git a/src/styles/form/switch.less b/src/styles/form/switch.less
new file mode 100644
index 0000000..0fc106c
--- /dev/null
+++ b/src/styles/form/switch.less
@@ -0,0 +1,61 @@
+/* The switch - the box around the slider */
+.switch {
+ position: relative;
+ display: inline;
+
+ input {
+ display:none;
+ }
+
+ /* The slider */
+ .slider {
+ position: absolute;
+ cursor: pointer;
+ top: 0;
+ left: 0;
+ right: 0;
+ bottom: 0;
+ background-color: @color-grey2;
+ -webkit-transition: .4s;
+ transition: .4s;
+ margin-left: -50px;
+ margin-top: 4px;
+ }
+
+ .slider:before {
+ position: absolute;
+ content: "";
+ height: 26px;
+ width: 26px;
+ left: 4px;
+ bottom: 4px;
+ background-color: white;
+ -webkit-transition: .4s;
+ transition: .4s;
+ }
+
+ input:checked + .slider {
+ background-color: @color-main;
+ }
+
+ input:focus + .slider {
+ box-shadow: 0 0 1px @color-main-light;
+ }
+
+ input:checked + .slider:before {
+ -webkit-transform: translateX(26px);
+ -ms-transform: translateX(26px);
+ transform: translateX(26px);
+ }
+
+ /* Rounded sliders */
+ .slider.round {
+ border-radius: 34px;
+ height: 34px;
+ width: 60px;
+ }
+
+ .slider.round:before {
+ border-radius: 50%;
+ }
+}
\ No newline at end of file
diff --git a/src/styles/heading.less b/src/styles/heading.less
new file mode 100644
index 0000000..991dc7e
--- /dev/null
+++ b/src/styles/heading.less
@@ -0,0 +1,5 @@
+.heading {
+ font-size: 1.2em;
+ display: block;
+ margin-bottom: @default-margin;
+}
\ No newline at end of file
diff --git a/src/styles/main.less b/src/styles/main.less
new file mode 100644
index 0000000..9f81f1e
--- /dev/null
+++ b/src/styles/main.less
@@ -0,0 +1,11 @@
+@import "theme.less";
+
+@import "base.less";
+@import "heading.less";
+@import "container.less";
+
+@import "form/slider.less";
+@import "form/switch.less";
+@import "form/layout.less";
+@import "form/input.less";
+@import "form/color.less";
diff --git a/src/styles/theme.less b/src/styles/theme.less
new file mode 100644
index 0000000..dac0b4a
--- /dev/null
+++ b/src/styles/theme.less
@@ -0,0 +1,19 @@
+@default-font: "Open Sans";
+
+@color-black: #000000;
+@color-white: #eeeeee;
+@color-grey: #b3b2b2;
+@color-grey2: #7b7b7b;
+@color-main: #097479;
+@color-main-light: #0eb8c0;
+@color-container: #333333;
+
+@default-padding: 16px;
+@default-margin: 16px;
+@default-margin-small: 8px;
+@default-border-radius: 2px;
+@default-border-color: #555555;
+@default-font-size: 16px;
+
+@input-text-height: 16px;
+@input-checkbox-scale: 2;
diff --git a/views/error.jade b/views/error.jade
deleted file mode 100644
index 51ec12c..0000000
--- a/views/error.jade
+++ /dev/null
@@ -1,6 +0,0 @@
-extends layout
-
-block content
- h1= message
- h2= error.status
- pre #{error.stack}
diff --git a/views/index.jade b/views/index.jade
deleted file mode 100644
index 3d63b9a..0000000
--- a/views/index.jade
+++ /dev/null
@@ -1,5 +0,0 @@
-extends layout
-
-block content
- h1= title
- p Welcome to #{title}
diff --git a/views/layout.jade b/views/layout.jade
deleted file mode 100644
index 15af079..0000000
--- a/views/layout.jade
+++ /dev/null
@@ -1,7 +0,0 @@
-doctype html
-html
- head
- title= title
- link(rel='stylesheet', href='/stylesheets/style.css')
- body
- block content
diff --git a/webpack.config.js b/webpack.config.js
new file mode 100644
index 0000000..2d886ae
--- /dev/null
+++ b/webpack.config.js
@@ -0,0 +1,24 @@
+module.exports = {
+ entry: './src/app/main.js',
+ output: {
+ filename: './target/script.js'
+ },
+ module: {
+ loaders: [{
+ test: /\.js$/,
+ exclude: /(node_modules|bower_components)/,
+ loader: 'babel-loader',
+ query: {
+ presets: ['env'],
+ plugins: ['transform-runtime']
+ }
+ }],
+ rules: [{
+ test: /\.html$/,
+ use: 'raw-loader'
+ }]
+ },
+ resolve: {
+ extensions: ['.js', '.json']
+ }
+};
\ No newline at end of file