Skip to content
This repository was archived by the owner on Oct 22, 2021. It is now read-only.

Commit 3183f5a

Browse files
GitSquaredGitSquared
committed
First module: mod_clock
1 parent 72bb576 commit 3183f5a

File tree

8 files changed

+201
-3
lines changed

8 files changed

+201
-3
lines changed

‎src/_renderer.js‎

Lines changed: 21 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -1,7 +1,7 @@
11
// Load config
2-
let settings = JSON.parse(require('fs').readFileSync(require('path').join(__dirname, "settings.json"), {encoding:"utf-8"}));
2+
let settings = require("./settings.json");
33

4-
let resumeInit, initUI;
4+
let resumeInit, initUI, initMods;
55
let bootScreen = document.getElementById("boot_screen");
66
let log = require('fs').readFileSync(require('path').join(__dirname, 'assets/misc/boot_log.txt')).toString().split('\n');
77
let i = 0;
@@ -68,9 +68,18 @@ resumeInit = () => {
6868
};
6969

7070
initUI = () => {
71-
document.body.innerHTML += `<section id="main_shell" style="height:0%;width:0%;opacity:0;">
71+
document.body.innerHTML += `<section class="mod_column" id="mod_column_left">
72+
<h3 class="title"><p>PANEL</p><p>SYSTEM</p></h3>
73+
<h3 class="title" style="top:27px;width:14.5%;left:8px;"><p></p><p></p></h3>
74+
</section>
75+
<section id="main_shell" style="height:0%;width:0%;opacity:0;">
76+
<h3 class="title" style="opacity:0;"><p>TERMINAL</p><p>MAIN SHELL</p></h3>
7277
<pre id="terminal"></pre>
7378
</section>
79+
<section class="mod_column" id="mod_column_right">
80+
<h3 class="title"><p>PANEL</p><p>NETWORK</p></h3>
81+
<h3 class="title" style="top:27px;width:14.5%;right:8px;"><p></p><p></p></h3>
82+
</section>
7483
<section id="keyboard" style="opacity:0;">
7584
</section>`;
7685

@@ -80,6 +89,7 @@ initUI = () => {
8089
});
8190
setTimeout(() => {
8291
document.getElementById("main_shell").setAttribute("style", "");
92+
document.querySelector("#main_shell > h3.title").setAttribute("style", "");
8393
setTimeout(() => {
8494
document.getElementById("main_shell").setAttribute("style", "opacity: 0;");
8595
setTimeout(() => {
@@ -97,6 +107,7 @@ initUI = () => {
97107
setTimeout(() => {
98108
document.getElementById("keyboard").setAttribute("class", "");
99109
}, 1100);
110+
initMods();
100111
}, 100);
101112
}, 50);
102113
}, 260);
@@ -105,6 +116,13 @@ initUI = () => {
105116
}, 10);
106117
};
107118

119+
initMods = () => {
120+
document.querySelectorAll(".mod_column").forEach((e) => {
121+
e.setAttribute("class", "mod_column activated");
122+
});
123+
124+
let clock = new Clock("mod_column_left");
125+
};
108126

109127
// Prevent showing menu, exiting fullscreen or app with keyboard shortcuts
110128
window.onkeydown = (e) => {

‎src/assets/css/keyboard.css‎

Lines changed: 2 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -3,6 +3,8 @@ section#keyboard {
33
flex-direction: column;
44
align-items: center;
55
width: 100vw;
6+
position: relative;
7+
top: -10px;
68
}
79

810
div.keyboard_row {

‎src/assets/css/main.css‎

Lines changed: 33 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -8,6 +8,7 @@ html, body {
88
body {
99
/*cursor: none !important;*/
1010
user-select: none !important;
11+
padding-top: 20px;
1112
color: #bee6c1;
1213
display: flex;
1314
flex-direction: row;
@@ -17,3 +18,35 @@ body {
1718
background: linear-gradient(90deg, #090B0A 20px, transparent 1%) center, linear-gradient(#090B0A 20px, transparent 1%) center, #262827;
1819
background-size: 22px 22px;
1920
}
21+
22+
h3.title {
23+
position: fixed;
24+
margin: 0px;
25+
padding: 0px 10px;
26+
font-size: 11px;
27+
border-bottom: 1px solid rgba(190, 230, 193, 0.3);
28+
}
29+
h3.title > p {
30+
display: inline-block;
31+
margin: 0px;
32+
width: 49.6%;
33+
}
34+
h3.title > p:last-child {
35+
text-align: right;
36+
}
37+
h3.title::before {
38+
content: "";
39+
border-left: 1px solid rgba(190, 230, 193, 0.3);
40+
position: relative;
41+
left: -10px;
42+
bottom: -6px;
43+
height: 5px;
44+
}
45+
h3.title::after {
46+
content: "";
47+
border-right: 1px solid rgba(190, 230, 193, 0.3);
48+
position: relative;
49+
right: -10px;
50+
bottom: -6px;
51+
height: 5px;
52+
}

‎src/assets/css/main_shell.css‎

Lines changed: 11 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -7,6 +7,17 @@ section#main_shell {
77
transition: width .5s cubic-bezier(0.4, 0, 1, 1), height .5s cubic-bezier(0.4, 0, 1, 1);
88
}
99

10+
section#main_shell > h3.title {
11+
top: 8px;
12+
left: 16.5%;
13+
width: 66%;
14+
transition: opacity .5s cubic-bezier(0.4, 0, 1, 1) .5s;
15+
}
16+
17+
section#main_shell > h3.title > p {
18+
width: 49.92%;
19+
}
20+
1021
section#main_shell pre {
1122
height: 100%;
1223
width: 100%;

‎src/assets/css/mod_clock.css‎

Lines changed: 44 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,44 @@
1+
div#mod_clock {
2+
display: flex;
3+
height: 80px;
4+
border-bottom: 1px solid rgba(190, 230, 193, 0.3);
5+
}
6+
7+
div#mod_clock::before {
8+
content: "";
9+
border-left: 1px solid rgba(190, 230, 193, 0.3);
10+
position: relative;
11+
left: -1px;
12+
bottom: -76px;
13+
height: 9px;
14+
}
15+
16+
div#mod_clock::after {
17+
content: "";
18+
border-right: 1px solid rgba(190, 230, 193, 0.3);
19+
position: relative;
20+
right: -1px;
21+
bottom: -76px;
22+
height: 9px;
23+
}
24+
25+
div#mod_clock h1 {
26+
margin: auto;
27+
font-size: 52px;
28+
}
29+
30+
div#mod_clock span, div#mod_clock em {
31+
display: inline-block;
32+
text-align: center;
33+
}
34+
35+
div#mod_clock span {
36+
margin: 0px 2.5px;
37+
width: .6em;
38+
}
39+
40+
div#mod_clock em {
41+
font-style: normal;
42+
margin: 0px 5px;
43+
width: .3em;
44+
}

‎src/assets/css/mod_column.css‎

Lines changed: 48 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,48 @@
1+
section.mod_column {
2+
width: 17%;
3+
top: 27px;
4+
min-height: 10%;
5+
max-height: 96%;
6+
padding: 15px;
7+
padding-bottom: 0px;
8+
box-sizing: border-box;
9+
position: absolute;
10+
display: flex;
11+
flex-direction: column;
12+
justify-content: space-between;
13+
overflow: hidden;
14+
15+
opacity: 0;
16+
transition: opacity .5s cubic-bezier(0.4, 0, 1, 1);
17+
}
18+
19+
section.mod_column.activated {
20+
opacity: 1;
21+
}
22+
23+
section.mod_column > h3.title {
24+
top: 8px;
25+
width: 14.8%;
26+
}
27+
28+
section.mod_column > div {
29+
width: 100%;
30+
}
31+
32+
section#mod_column_left {
33+
left: -6px;
34+
align-items: flex-end;
35+
}
36+
37+
section#mod_column_left > h3.title {
38+
left: 6px;
39+
}
40+
41+
section#mod_column_right {
42+
right: -6px;
43+
align-items: flex-start;
44+
}
45+
46+
section#mod_column_right > h3.title {
47+
right: 6px;
48+
}

‎src/classes/clock.class.js‎

Lines changed: 38 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,38 @@
1+
class Clock {
2+
constructor(parentId) {
3+
if (!parentId) throw "Missing parameters";
4+
5+
// Create DOM
6+
this.parent = document.getElementById(parentId);
7+
this.parent.innerHTML += `<div id="mod_clock">
8+
<h1><span>?</span><span>?</span><span>:</span><span>?</span><span>?</span><span>:</span><span>?</span><span>?</span></h1>
9+
</div>`;
10+
11+
this.clockText = document.querySelector("#mod_clock > h1");
12+
this.updateClock();
13+
this.updater = setInterval(() => {
14+
this.updateClock();
15+
}, 1000);
16+
}
17+
updateClock() {
18+
let time = new Date();
19+
let array = [time.getHours(), time.getMinutes(), time.getSeconds()];
20+
array.forEach((e, i) => {
21+
if (e.toString().length !== 2) {
22+
array[i] = "0"+e;
23+
}
24+
});
25+
let clockString = `${array[0]}:${array[1]}:${array[2]}`;
26+
array = clockString.match(/.{1}/g);
27+
clockString = "";
28+
array.forEach((e) => {
29+
if (e === ":") clockString += "<em>"+e+"</em>";
30+
else clockString += "<span>"+e+"</span>";
31+
});
32+
this.clockText.innerHTML = clockString;
33+
}
34+
}
35+
36+
module.exports = {
37+
Clock
38+
};

‎src/ui.html‎

Lines changed: 4 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -10,8 +10,12 @@
1010
<link rel="stylesheet" href="assets/css/main_shell.css" />
1111
<link rel="stylesheet" href="assets/css/keyboard.css" />
1212

13+
<link rel="stylesheet" href="assets/css/mod_column.css" />
14+
<link rel="stylesheet" href="assets/css/mod_clock.css" />
15+
1316
<script src="classes/terminal.class.js"></script>
1417
<script src="classes/keyboard.class.js"></script>
18+
<script src="classes/clock.class.js"></script>
1519
</head>
1620
<body style="background: #090b0a;">
1721
<section id="boot_screen">

0 commit comments

Comments
 (0)