Skip to content

Commit 3e20fb5

Browse files
MatejLanPythonProgrammingMatejLanPythonProgramming
authored
Add files via upload
1 parent 28b55eb commit 3e20fb5

File tree

4 files changed

+175
-0
lines changed

4 files changed

+175
-0
lines changed

‎Css/style.css‎

Lines changed: 69 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,69 @@
1+
:root{
2+
--main-dark:#2e3136;
3+
--main-darker:#24272b;
4+
--main-lighter: #36393e;
5+
--font: #ffffff;
6+
--accent: #1976D2;
7+
}
8+
9+
.mainBG{
10+
position:relative;
11+
color: var(--font);
12+
background-color: var(--main-dark);
13+
-webkit-touch-callout: none; /* iOS Safari */
14+
-webkit-user-select: none; /* Safari */
15+
-khtml-user-select: none; /* Konqueror HTML */
16+
-moz-user-select: none; /* Firefox */
17+
-ms-user-select: none; /* Internet Explorer/Edge */
18+
user-select: none; /* Non-prefixed version, currently
19+
supported by Chrome and Opera */
20+
}
21+
.myNavbar{
22+
color: var(--font);
23+
background-color: var(--main-darker);
24+
}
25+
.ui.label{
26+
color: var(--font);
27+
background-color: var(--main-lighter);
28+
}
29+
30+
.right{
31+
float: right;
32+
margin-right: 1%;
33+
}
34+
35+
.left{
36+
float: left;
37+
margin-left: 1%;
38+
}
39+
40+
.long{
41+
width: 100%;
42+
}
43+
44+
.ui.horizontal.divider{
45+
color: var(--font);
46+
}
47+
48+
.projection{
49+
width: 100%;
50+
height: calc(100% - 44px);
51+
position: absolute;
52+
top: 44px;
53+
bottom: 0;
54+
background-color: var(--accent) ;
55+
56+
}
57+
58+
.controller{
59+
visibility: hidden;
60+
position: absolute;
61+
font-size: 550%;
62+
bottom: 10vh;
63+
right: 10vw;
64+
}
65+
66+
.center{
67+
bottom: 0;
68+
right: 0;
69+
}

‎Js/controller.js‎

Lines changed: 20 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,20 @@
1+
var active = false;
2+
var circle = document.getElementById("controller");
3+
4+
function test(event){
5+
if (active){
6+
var x = event.clientX;
7+
var y = event.clientY;
8+
circle.style.left = x - 45;
9+
circle.style.top = y - 10;
10+
}
11+
}
12+
13+
function toggle(){
14+
active = !active
15+
if (active){
16+
circle.style.visibility = "visible";
17+
}else{
18+
circle.style.visibility = "hidden";
19+
}
20+
}

‎index.html‎

Lines changed: 86 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,86 @@
1+
<link rel="stylesheet" type="text/css" href="semantic/semantic.min.css">
2+
<link rel="stylesheet" type="text/css" href="Css/style.css">
3+
<script
4+
src="https://code.jquery.com/jquery-3.1.1.min.js"
5+
integrity="sha256-hVVnYaiADRTO2PzUGmuLJr8BLUSjGIZsDYGmIJLv2b8="
6+
crossorigin="anonymous"></script>
7+
<script src="semantic/semantic.min.js"></script>
8+
9+
<head>
10+
<title>KeplerControllV1</title>
11+
</head>
12+
13+
<body class="mainBG" onmouseup="toggle(event)" onmousemove="test(event)" onmousedown="toggle(event)">
14+
15+
<div class="ui sidebar inverted vertical menu">
16+
<div class="ui horizontal divider">
17+
Stars</div>
18+
19+
<a class="item">
20+
<i class="star icon"></i>
21+
Alpha Centauri A
22+
</a>
23+
24+
<a class="item">
25+
<i class="star icon"></i>
26+
Proxima Centauri
27+
</a>
28+
29+
<a class="item">
30+
<i class="star icon"></i>
31+
Barnard's Star
32+
</a>
33+
34+
35+
<div class="ui horizontal divider">
36+
Others</div>
37+
38+
<a class="item">
39+
<i class="star icon"></i>
40+
Moon
41+
</a>
42+
43+
<a class="item">
44+
<i class="star icon"></i>
45+
Venus
46+
</a>
47+
</div>
48+
49+
<div class="dimmed pusher">
50+
<div class="myNavbar">
51+
<a class="ui huge label" onclick="$('.ui.sidebar').sidebar('toggle');">
52+
<i class="star icon"></i> Top
53+
</a>
54+
55+
<div class="ui huge label">
56+
X axis:
57+
<div class="detail">276</div>
58+
</div>
59+
60+
<div class="ui huge label">
61+
Y axis:
62+
<div class="detail">186</div>
63+
</div>
64+
65+
<a class="ui huge label">
66+
Follow mode:
67+
<div class="detail">Alpha Centauri A</div>
68+
</a>
69+
<!-- Thats right-->
70+
<a class="ui huge label right">
71+
<i class="user icon"></i>
72+
Admin
73+
</a>
74+
75+
<a class="ui huge label right">
76+
<i class="options icon"></i>
77+
Settings
78+
</a>
79+
</div>
80+
81+
<div class="controller" id="controller"><i class="ui icon Circle Thin center"></i></div>
82+
83+
</div>
84+
85+
</body>
86+
<script src="Js/controller.js"></script>

‎semantic.rar‎

1.35 MB
Binary file not shown.

0 commit comments

Comments
 (0)