diff --git a/html/styles.min.css b/html/styles.min.css
deleted file mode 100644
index aa26703..0000000
--- a/html/styles.min.css
+++ /dev/null
@@ -1 +0,0 @@
-@font-face{font-family:'Open sans';src:url("https://console-hub.danbulant.eu/open-sans/OpenSans-Regular.ttf")}@font-face{font-family:'Gilroy-bold';src:url("https://console-hub.danbulant.eu/Gilroy-ExtraBold.otf")}body{background:#5d75ad;background:linear-gradient(216deg, #6b89cf, #3a3766);background-size:400% 400%;-webkit-animation:BackgroundGradient 33s ease infinite;-moz-animation:BackgroundGradient 33s ease infinite;-o-animation:BackgroundGradient 33s ease infinite;animation:BackgroundGradient 33s ease infinite}@-webkit-keyframes BackgroundGradient{0%{background-position:0% 22%}50%{background-position:100% 79%}100%{background-position:0% 22%}}@-moz-keyframes BackgroundGradient{0%{background-position:0% 22%}50%{background-position:100% 79%}100%{background-position:0% 22%}}@-o-keyframes BackgroundGradient{0%{background-position:0% 22%}50%{background-position:100% 79%}100%{background-position:0% 22%}}@keyframes BackgroundGradient{0%{background-position:0% 22%}50%{background-position:100% 79%}100%{background-position:0% 22%}}.main{display:block;position:fixed;bottom:40px;left:10px}.main .button-main-container{display:inline-block;height:120px}.main .button-main-container .button-main{transition:0.5s margin-top;margin-top:20px;color:#b6b6b6}.main .button-main-container .button-main span{padding-left:10px}.main .button-main-container .button-main .button-menu{margin-left:5px;margin-right:5px;padding-left:45px;padding-right:45px;border-radius:5px;height:100px;width:100px;color:white;background:#414E92}.main .button-main-container .button-main .button-menu .material-icons{font-size:100px}.button-main-container .button-main.selected{color:white;margin-top:0px}.button-main-container .button-main.selected .button-menu{background:#3D7BFF;box-shadow:0px 0px 5px rgba(61,123,255,0.8)}html{width:100%;height:100%;padding:0;margin:0;font-family:'Open Sans', sans-serif}html body{padding:0;margin:0;width:100%;height:95%}.hidden{display:none !important}.title-font{font-family:'Gilroy-bold', 'Open Sans', sans-serif}#selection{position:absolute;top:50px;left:15px;width:calc(100% - 15px)}#selection .menu-item{color:white}#selection .menu-item h1{font-family:'Gilroy-bold', 'Open Sans', sans-serif;padding:10px;font-size:50px;margin:0}#selection #games-view .previews{height:150px}#selection #games-view .previews .game{height:auto;text-align:justify;height:150px;font-size:20px;display:inline-block;color:#b6b6b6;opacity:1}#selection #games-view .previews .game .game-preview{height:130px;border-radius:5px}#selection #games-view .previews .game.selected{height:190px;color:#fff}#selection #games-view .previews .game.selected .game-preview{height:170px;-webkit-box-shadow:0px 27px 72px -32px rgba(0,0,0,0.51);-moz-box-shadow:0px 27px 72px -32px rgba(0,0,0,0.51);box-shadow:0px 27px 72px -32px rgba(0,0,0,0.51)}#selection #files-view{overflow-y:hidden;overflow-x:hidden;height:500px}#selection #files-view #files-list-container{width:100%;height:95%;overflow-y:auto;overflow-x:hidden;margin:0}#selection #files-view #files-list-container ::-webkit-scrollbar{width:7px}#selection #files-view #files-list-container ::-webkit-scrollbar-button{height:0px}#selection #files-view #files-list-container ::-webkit-scrollbar-thumb{background:rgba(255,255,255,0.2);border-radius:50px}#selection #files-view #files-list-container ::-webkit-scrollbar-thumb:hover{background:rgba(255,255,255,0.4)}#selection #files-view #files-list-container ::-webkit-scrollbar-thumb:active{background:rgba(255,255,255,0.5)}#selection #files-view #files-list-container ul{border-top:1px solid rgba(255,255,255,0.2);border-bottom:1px solid rgba(255,255,255,0.2);height:80%;width:100%;overflow-x:hidden;list-style-type:none;padding-left:0}#selection #files-view #files-list-container ul li{vertical-align:middle;padding-top:11px;padding-left:15px;height:36px}#selection #files-view #files-list-container ul li:not(:first-child){border-top:1px solid rgba(255,255,255,0.2)}#selection #files-view #files-list-container ul .selected{background:rgba(255,255,255,0.4)}nav{z-index:999;display:flex;justify-content:space-between;padding:10px;position:fixed;top:0;left:0;height:30px;width:calc(100% - 20px)}nav .profile{left:0}nav .info{right:0}nav div{display:inline;color:white}#dialog{display:block;position:fixed;z-index:998}#account-view button{color:white;background-color:transparent;border:1px solid white;border-radius:40px;font-size:20px}#settings-view .option{color:#b6b6b6}#settings-view .option.selected{color:#fff}#settings-view .option.switchable .switch .slider{width:52px;height:25px}#settings-view .option.switchable .switch .slider:before{width:18px;height:18px}.welcome-main{color:white;width:500px;margin-left:auto;margin-right:auto;position:relative;top:50%;transform:translateY(-50%);-webkit-transition:opacity 1s ease-in-out;-moz-transition:opacity 1s ease-in-out;-ms-transition:opacity 1s ease-in-out;-o-transition:opacity 1s ease-in-out;transition:opacity 1s ease-in-out}.welcome-main h1{font-size:100px;margin:0}.welcome-main h5{margin-top:0}.welcome-main.hide{opacity:0}.glow{color:#fff;text-align:center;-webkit-animation:glow 1s ease-in-out infinite alternate;-moz-animation:glow 1s ease-in-out infinite alternate;animation:glow 1s ease-in-out infinite alternate}@-webkit-keyframes glow{from{text-shadow:0 0 1px #fff,0 0 2px #fff,0 0 3px #fff,0 0 4px #fff,0 0 5px #fff,0 0 6px #fff,0 0 7px #fff}to{text-shadow:0 0 2px #fff,0 0 3px #969696,0 0 4px #969696,0 0 5px #969696,0 0 6px #969696,0 0 7px #969696,0 0 8px #969696}}.back-arrow{position:fixed;bottom:20px;left:20px;color:#c4d501;vertical-align:middle;font-weight:normal;font-style:normal;font-size:24px;line-height:1;letter-spacing:normal;text-transform:none;display:inline-block;white-space:nowrap;word-wrap:normal;direction:ltr;-webkit-font-feature-settings:'liga';-webkit-font-smoothing:antialiased}.back-arrow .circle{border-radius:50%;border:1px solid #c4d501}#snackbar{visibility:hidden;min-width:250px;margin-left:-125px;color:#fff;text-align:center;border-radius:2px;padding:16px;position:fixed;z-index:100;left:50%;bottom:15px}#snackbar.show{visibility:visible;-webkit-animation:snackbarFadein 0.5s, snackbarFadeout 0.5s 2.5s;animation:snackbarFadein 0.5s, snackbarFadeout 0.5s 2.5s}@-webkit-keyframes snackbarFadein{from{bottom:0;opacity:0}to{bottom:30px;opacity:1}}@keyframes snackbarFadein{from{bottom:0;opacity:0}to{bottom:30px;opacity:1}}@-webkit-keyframes snackbarFadeout{from{bottom:30px;opacity:1}to{bottom:0;opacity:0}}@keyframes snackbarFadeout{from{bottom:30px;opacity:1}to{bottom:0;opacity:0}}.switch{position:relative;display:inline-block;width:60px;height:34px}.switch input{opacity:0;width:0;height:0}.slider{position:absolute;cursor:pointer;top:0;left:0;right:0;bottom:0;background-color:#ccc;-webkit-transition:.4s;transition:.4s}.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:#2196F3}input:focus+.slider{box-shadow:0 0 1px #2196F3}input:checked+.slider:before{-webkit-transform:translateX(26px);-ms-transform:translateX(26px);transform:translateX(26px)}.slider.round{border-radius:34px}.slider.round:before{border-radius:50%}
diff --git a/html/styles.scss b/html/styles.scss
deleted file mode 100644
index 6c5a1bd..0000000
--- a/html/styles.scss
+++ /dev/null
@@ -1,479 +0,0 @@
-/*
-* VARS
-*/
-$unselected: rgb(182,182,182);
-$selected: white;
-/*
-* FONTS
-*/
-@font-face {
- font-family: 'Open sans';
- src: url('https://console-hub.danbulant.eu/open-sans/OpenSans-Regular.ttf');//online version
-}
-@font-face {
- font-family: 'Gilroy-bold';
- src: url('https://console-hub.danbulant.eu/Gilroy-ExtraBold.otf');//online version, if you want offline, put fonts in this folder and change the link here
-}
-body {
- background: #5d75ad;
- background: linear-gradient(216deg, #6b89cf, #3a3766);
- background-size: 400% 400%;
-
- -webkit-animation: BackgroundGradient 33s ease infinite;
- -moz-animation: BackgroundGradient 33s ease infinite;
- -o-animation: BackgroundGradient 33s ease infinite;
- animation: BackgroundGradient 33s ease infinite;
-}
-/*
-* Background
-*/
-@-webkit-keyframes BackgroundGradient {
- 0%{background-position:0% 22%}
- 50%{background-position:100% 79%}
- 100%{background-position:0% 22%}
-}
-@-moz-keyframes BackgroundGradient {
- 0%{background-position:0% 22%}
- 50%{background-position:100% 79%}
- 100%{background-position:0% 22%}
-}
-@-o-keyframes BackgroundGradient {
- 0%{background-position:0% 22%}
- 50%{background-position:100% 79%}
- 100%{background-position:0% 22%}
-}
-@keyframes BackgroundGradient {
- 0%{background-position:0% 22%}
- 50%{background-position:100% 79%}
- 100%{background-position:0% 22%}
-}
-/*
-* Main menu
-*/
-
-.main {
- display: block;
- position: fixed;
- bottom: 40px;
- left: 10px;
- .button-main-container {
- display: inline-block;
- height: 120px;
- .button-main {
- transition: 0.5s margin-top;
- margin-top: 20px;
- color: $unselected;
- span {
- padding-left: 10px;
- }
- .button-menu {
- margin-left: 5px;
- margin-right: 5px;
- padding-left: 45px;
- padding-right: 45px;
- border-radius: 5px;
- height: 100px;
- width: 100px;
- color: white;
- background: #414E92;
- .material-icons {
- font-size: 100px;
- }
- }
- }
- }
-}
-.button-main-container .button-main.selected{
- color: white;
- margin-top: 0px;
- .button-menu{
- background: #3D7BFF;
- box-shadow: 0px 0px 5px rgba(61, 123, 255, 0.8);
- }
-}
-
-html {
- width: 100%;
- height: 100%;
- padding: 0;
- margin: 0;
- body {
- padding: 0;
- margin: 0;
- width: 100%;
- height: 95%;
- }
- font-family: 'Open Sans', sans-serif;
-}
-.hidden {
- display: none !important;
-}
-.title-font {
- font-family: 'Gilroy-bold', 'Open Sans', sans-serif;
-}
-/*
-* Tab views
-*/
-#selection {
- position: absolute;
- top: 50px;
- left: 15px;
- width: calc(100% - 15px);
- .menu-item {
- color: white;
-
- h1 {
- font-family: 'Gilroy-bold', 'Open Sans', sans-serif;
- padding: 10px;
- font-size: 50px;
- margin: 0;
- }
- }
- #games-view {
- .previews {
- height: 150px;
-
- .game {
-
- height: auto;
- text-align: justify;
- height: 150px;
- .game-preview {
- height: 130px;
- border-radius: 5px;
- // Now in JS
- // -webkit-transition: 0.5s width, 0.5s height, 0.5s max-height, 0.3s top, 0.3s left, 0.5s opacity;
- // -moz-transition: 0.5s width, 0.5s height, 0.5s max-height, 0.3s top, 0.3s left, 0.5s opacity;
- // transition: 0.5s width, 0.5s height, 0.5s max-height, 0.3s top, 0.3s left, 0.5s opacity;
- }
- font-size: 20px;
- display: inline-block;
- color: $unselected;
- opacity: 1;
- // -webkit-transition: 0.5s width, 0.5s height, 0.5s max-height, 0.3s top, 0.3s left, 0.5s opacity;
- // -moz-transition: 0.5s width, 0.5s height, 0.5s max-height, 0.3s top, 0.3s left, 0.5s opacity;
- // transition: 0.5s width, 0.5s height, 0.5s max-height, 0.3s top, 0.3s left, 0.5s opacity;
- }
- .game.selected {
- height: 190px;
- color: $selected;
- .game-preview {
- height: 170px;
- -webkit-box-shadow: 0px 27px 72px -32px rgba(0,0,0,0.51);
- -moz-box-shadow: 0px 27px 72px -32px rgba(0,0,0,0.51);
- box-shadow: 0px 27px 72px -32px rgba(0,0,0,0.51);
- }
- }
- }
- }
- #files-view {
- overflow-y: hidden;
- overflow-x: hidden;
- height: 500px;
- #files-list-container {
- ::-webkit-scrollbar {
- width: 7px;
- }
- ::-webkit-scrollbar-button {
- height: 0px;
- }
- ::-webkit-scrollbar-thumb {
- background: rgba(255,255,255,0.2);
- border-radius: 50px;
- }
- ::-webkit-scrollbar-thumb:hover {
- background: rgba(255,255,255,0.4);
- }
- ::-webkit-scrollbar-thumb:active {
- background: rgba(255,255,255,0.5);
- }
- width: 100%;
- height: 95%;
- overflow-y: auto;
- overflow-x: hidden;
- margin: 0;
- ul {
- border-top: 1px solid rgba(255,255,255,0.2);
- border-bottom: 1px solid rgba(255,255,255,0.2);
- height: 80%;
- width: 100%;
- overflow-x: hidden;
- list-style-type: none;
- padding-left: 0;
- li {
- vertical-align: middle;
- padding-top: 11px;
- padding-left: 15px;
- height: 36px;
- }
- li:not(:first-child){
- border-top: 1px solid rgba(255,255,255,0.2);
- }
- .selected {
- background: rgba(255,255,255,0.4);
- }
- }
- }
- }
-}
-/*
-* Information panel, marked as 'nav'
-*/
-nav {
- z-index:999;
- display: flex;
- justify-content: space-between;
- padding: 10px;
-
- position: fixed;
- top: 0;
- left: 0;
- height: 30px;
- width: calc(100% - 20px);
- .profile {
- left: 0;
- }
- .info {
- right: 0;
- }
- div {
- display: inline;
- color: white;
- }
-
-}
-/*
-* Dialog
-*/
-#dialog {
- display: block;
- position: fixed;
- z-index: 998;
-
-}
-/*
-* Account
-*/
-#account-view {
- button {
- color: white;
- background-color: transparent;
- border: 1px solid white;
- border-radius: 40px;
- font-size: 20px;
- }
-}
-/*
-* Settings page
-*/
-#settings-view {
- .option {
- color: $unselected;
- }
- .option.selected {
- color: $selected;
- }
- .option.switchable {
- .switch .slider{
- width: 52px;
- height: 25px;
- }
- .switch .slider:before {
- width: 18px;
- height: 18px;
- }
- }
-}
-/*
-* Startup
-*/
-.welcome-main {
- color: white;
- width: 500px;
- margin-left: auto;
- margin-right: auto;
- position: relative;
- top: 50%;
- transform: translateY(-50%);
- //fade out transition
- -webkit-transition: opacity 1s ease-in-out;
- -moz-transition: opacity 1s ease-in-out;
- -ms-transition: opacity 1s ease-in-out;
- -o-transition: opacity 1s ease-in-out;
- transition: opacity 1s ease-in-out;
- h1 {
- font-size: 100px;
- margin: 0;
- }
- h5 {
- margin-top: 0;
- b {
-
- }
- }
-}
-.welcome-main.hide {
- opacity: 0;
-}
-.glow {
- color: #fff;
- text-align: center;
- -webkit-animation: glow 1s ease-in-out infinite alternate;
- -moz-animation: glow 1s ease-in-out infinite alternate;
- animation: glow 1s ease-in-out infinite alternate;
-}
-$innerGlowColor: #fff;
-$outerGlowColorLight: #fff;//#e60073
-$outerGlowColorDark: #969696;//#ff4da6
-$GlowSize: 1px;
-@-webkit-keyframes glow {
- from {
- text-shadow: 0 0 $GlowSize*1 $innerGlowColor, 0 0 $GlowSize*2 $innerGlowColor, 0 0 $GlowSize*3 $outerGlowColorLight, 0 0 $GlowSize*4 $outerGlowColorLight, 0 0 $GlowSize*5 $outerGlowColorLight, 0 0 $GlowSize*6 $outerGlowColorLight, 0 0 $GlowSize*7 $outerGlowColorLight;
- }
- to {
- text-shadow: 0 0 $GlowSize*2 $innerGlowColor, 0 0 $GlowSize*3 $outerGlowColorDark, 0 0 $GlowSize*4 $outerGlowColorDark, 0 0 $GlowSize*5 $outerGlowColorDark, 0 0 $GlowSize*6 $outerGlowColorDark, 0 0 $GlowSize*7 $outerGlowColorDark, 0 0 $GlowSize*8 $outerGlowColorDark;
- }
-}
-
-/*
-* UI
-*/
-$MainColor: #fff;
-$SecondaryColor: #fff;
-$OutlineColor: rgb(196, 213, 1);
-.back-arrow {
- position: fixed;
- bottom: 20px;
- left: 20px;
- color: $OutlineColor;
- .circle {
- border-radius: 50%;
- border: 1px solid $OutlineColor;
- }
- vertical-align: middle;
- font-weight: normal;
- font-style: normal;
- font-size: 24px;
- line-height: 1;
- letter-spacing: normal;
- text-transform: none;
- display: inline-block;
- white-space: nowrap;
- word-wrap: normal;
- direction: ltr;
- -webkit-font-feature-settings: 'liga';
- -webkit-font-smoothing: antialiased;
-}
-/*
-* Snackbar / toast messages
-*/
-/* The snackbar - position it at the bottom and in the middle of the screen */
-#snackbar {
- visibility: hidden; /* Hidden by default. Visible on click */
- min-width: 250px; /* Set a default minimum width */
- margin-left: -125px; /* Divide value of min-width by 2 */
- //background-color: #333; /* Black background color */
- color: #fff; /* White text color */
- text-align: center; /* Centered text */
- border-radius: 2px; /* Rounded borders */
- padding: 16px; /* Padding */
- position: fixed; /* Sit on top of the screen */
- z-index: 100; /* Add a z-index if needed */
- left: 50%; /* Center the snackbar */
- bottom: 15px; /* 30px from the bottom */
-}
-
-/* Show the snackbar when clicking on a button (class added with JavaScript) */
-#snackbar.show {
- visibility: visible; /* Show the snackbar */
- /* Add animation: Take 0.5 seconds to fade in and out the snackbar.
- However, delay the fade out process for 2.5 seconds */
- -webkit-animation: snackbarFadein 0.5s, snackbarFadeout 0.5s 2.5s;
- animation: snackbarFadein 0.5s, snackbarFadeout 0.5s 2.5s;
-}
-
-/* Animations to fade the snackbar in and out */
-@-webkit-keyframes snackbarFadein {
- from {bottom: 0; opacity: 0;}
- to {bottom: 30px; opacity: 1;}
-}
-
-@keyframes snackbarFadein {
- from {bottom: 0; opacity: 0;}
- to {bottom: 30px; opacity: 1;}
-}
-
-@-webkit-keyframes snackbarFadeout {
- from {bottom: 30px; opacity: 1;}
- to {bottom: 0; opacity: 0;}
-}
-
-@keyframes snackbarFadeout {
- from {bottom: 30px; opacity: 1;}
- to {bottom: 0; opacity: 0;}
-}
-/*
-* Switches / sliders
-*/
-/* The switch - the box around the slider */
-.switch {
- position: relative;
- display: inline-block;
- width: 60px;
- height: 34px;
-}
-
-/* Hide default HTML checkbox */
-.switch input {
- opacity: 0;
- width: 0;
- height: 0;
-}
-
-/* The slider */
-.slider {
- position: absolute;
- cursor: pointer;
- top: 0;
- left: 0;
- right: 0;
- bottom: 0;
- background-color: #ccc;
- -webkit-transition: .4s;
- transition: .4s;
-}
-
-.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: #2196F3;
-}
-
-input:focus + .slider {
- box-shadow: 0 0 1px #2196F3;
-}
-
-input:checked + .slider:before {
- -webkit-transform: translateX(26px);
- -ms-transform: translateX(26px);
- transform: translateX(26px);
-}
-
-/* Rounded sliders */
-.slider.round {
- border-radius: 34px;
-}
-
-.slider.round:before {
- border-radius: 50%;
-}
diff --git a/html/views/styles.scss b/html/views/styles.scss
new file mode 100644
index 0000000..fb1f5fc
--- /dev/null
+++ b/html/views/styles.scss
@@ -0,0 +1,97 @@
+/*
+* VARS
+*/
+$unselected: rgb(182,182,182);
+$selected: white;
+/*
+* FONTS
+*/
+@import url('https://fonts.googleapis.com/css?family=Open+Sans&display=swap');
+@font-face {
+ font-family: 'Gilroy-bold';
+ src: url('../../dist/fonts/Gilroy-ExtraBold.otf');//online version, if you want offline, put fonts in this folder and change the link here
+}
+
+body {
+ margin: 0;
+ padding: 0;
+ background-color: #0e6cc4;
+ overflow-x:hidden;
+ overflow-y:hidden;
+}
+
+.title--main {
+ margin: 0;
+ padding: 0;
+ position: fixed;
+ left: 45px;
+ top: 100px;
+ font-size: 4rem;
+ color: white;
+ font-family: 'Gilroy-bold';
+}
+
+.title--description {
+ margin: 0;
+ padding: 0;
+ position: fixed;
+ left: 80px;
+ top: 175px;
+ font-size: 1.3rem;
+ color: white;
+ font-family: 'Open Sans', sans-serif;
+}
+
+.box {
+ position: fixed;
+ top: 0;
+ transform: rotate(80deg);
+ left: 0;
+}
+
+.wave {
+ position: fixed;
+ top: 0;
+ left: 0;
+ opacity: .4;
+ position: absolute;
+ top: 3%;
+ left: 10%;
+ background: #0af;
+ width: 3000px;
+ height: 2600px;
+ margin-left: -150px;
+ margin-top: -250px;
+ transform-origin: 50% 48%;
+ border-radius: 43%;
+ animation: drift 9000ms infinite linear;
+}
+
+.wave.-three {
+ animation: drift 8500ms infinite linear;
+ position: fixed;
+ background-color: #77daff;
+}
+
+.wave.-two {
+ animation: drift 8000ms infinite linear;
+ opacity: .1;
+ background: black;
+ position: fixed;
+}
+
+.box:after {
+ content: '';
+ display: block;
+ left: 0;
+ top: 0;
+ width: 100%;
+ height: 100%;
+ z-index: 11;
+ transform: translate3d(0, 0, 0);
+}
+
+@keyframes drift {
+ from { transform: rotate(0deg); }
+ from { transform: rotate(360deg); }
+}