Add files via upload

Author: MatejLanPythonProgramming

Css/login.css

@@ -0,0 +1,29 @@
+:root{
+    --main-dark:#2e3136;
+    --main-darker:#24272b;
+    --main-lighter: #36393e;
+    --font: #ffffff;
+    --accent: #1976D2;
+}
+.zoom{
+zoom: 110%;
+}
+.mainBG{
+	position:relative;
+	color: var(--font);
+	background-color: var(--main-dark);
+-webkit-touch-callout: none; /* iOS Safari */
+  -webkit-user-select: none; /* Safari */
+   -khtml-user-select: none; /* Konqueror HTML */
+     -moz-user-select: none; /* Firefox */
+      -ms-user-select: none; /* Internet Explorer/Edge */
+          user-select: none; /* Non-prefixed version, currently
+                                supported by Chrome and Opera */
+}
+
+.ui.card{
+	position:absolute;
+	left:50%;
+	top:20%;
+	margin:-100px 0 0 -150px;
+}

Css/settings.css

@@ -0,0 +1,27 @@
+:root{
+    --main-dark:#2e3136;
+    --main-darker:#24272b;
+    --main-lighter: #36393e;
+    --font: #ffffff;
+    --accent: #1976D2;
+}
+
+.mainBG{
+	position:relative;
+	color: var(--font);
+	background-color: var(--main-dark);
+-webkit-touch-callout: none; /* iOS Safari */
+  -webkit-user-select: none; /* Safari */
+   -khtml-user-select: none; /* Konqueror HTML */
+     -moz-user-select: none; /* Firefox */
+      -ms-user-select: none; /* Internet Explorer/Edge */
+          user-select: none; /* Non-prefixed version, currently
+                                supported by Chrome and Opera */
+}
+
+.ui.card{
+	position:absolute;
+	left:50%;
+	top:20%;
+	margin:-100px 0 0 -150px;
+}

Css/style.css

@@ -5,7 +5,9 @@
     --font: #ffffff;
     --accent: #1976D2;
 }
-
+.zoom{
+zoom: 160%;
+}
 .mainBG{
 	position:relative;
 	color: var(--font);
@@ -47,9 +49,9 @@
 
 .projection{
 	width: 100%;
-    height: calc(100% - 44px);
+    height: calc(100% - 43px);
     position: absolute;
-    top: 44px;
+    top: 43px;
     bottom: 0;
 	background-color: var(--accent) ;
 

Js/controller.js

@@ -1,7 +1,7 @@
 var joystick = false;
 var circle = document.getElementById("controller");
 
-function test(event){
+function moveJoystick(event){
     if (joystick && !followMode){
         var x = event.clientX;
         var y = event.clientY;

Js/navbar.js

@@ -7,9 +7,15 @@ function followPlanet(planet){
     }else{
         button.innerHTML = "OFF"
     }
-
 }
+
 function toggleFollowMode(){
     followMode = !followMode;
     followPlanet("ON")
 }
+
+function followCheck(){
+    if (followMode){
+        $('.ui.sidebar').sidebar('toggle');
+    }
+}

index.html

@@ -48,7 +48,7 @@
 
 	<div class="dimmed pusher">
 		<div class="myNavbar">
-				<a class="ui huge label" onclick="$('.ui.sidebar').sidebar('toggle');">
+				<a class="ui huge label" onclick="followCheck()">
 		  			<i class="star icon"></i> Top
 			    </a>
 
@@ -67,7 +67,7 @@
 		            <div id="followMode" class="detail">OFF</div>
 			    </a>
 			   <!-- Thats right-->
-		    	<a class="ui huge label right">
+		    	<a class="ui huge label right" onclick="$('.ui.basic.modal').modal('show');">
 		  			<i class="user icon"></i>
 		  			Admin
 				</a>
@@ -77,11 +77,31 @@
 		  			Settings
 				</a>
 		</div>
-        <div class="projection" onmouseup="toggleJoystick(event)" onmousemove="test(event)" onmousedown="toggleJoystick(event)">
+        <div class="projection" onmouseup="toggleJoystick(event)" onmousemove="moveJoystick(event)" onmousedown="toggleJoystick(event)">
 		    <div class="controller" id="controller"><i class="ui icon Circle Thin center"></i></div>
         </div>
 	</div>
 
+	<div class="ui basic modal">
+	  	<div class="ui icon header">
+		    <i class="Sign out icon"></i>
+		    Signing out?
+	  	</div>
+	  	<div class="content">
+	    	<p>You are signing out from administrator account and leaving the Kepler Controll unit. Have a nice time, Bye</p>
+	  	</div>
+	  	<div class="actions">
+		    <div class="ui red basic cancel inverted button">
+			     <i class="remove icon"></i>
+			     No
+		    </div>
+		    <a class="ui green ok inverted button" href="login.html">
+			     <i class="checkmark icon"></i>
+			     Yes
+		    </a>
+	  	</div>
+	</div>
+
 </body>
 <script src="Js/controller.js"></script>
 <script src="Js/navbar.js"></script>