mirror of
https://github.com/GitSquared/edex-ui.git
synced 2024-09-21 18:47:33 +00:00
Add greeter and fix keyboard animation
This commit is contained in:
parent
6609997bc3
commit
b75c83153a
@ -40,7 +40,7 @@ window.onerror = (msg, path, line, col, error) => {
|
|||||||
};
|
};
|
||||||
|
|
||||||
// Startup boot log
|
// Startup boot log
|
||||||
let resumeInit, initUI, initMods;
|
let resumeInit, initUI, initMods, initGreeter;
|
||||||
let bootScreen = document.getElementById("boot_screen");
|
let bootScreen = document.getElementById("boot_screen");
|
||||||
let log = fs.readFileSync(path.join(__dirname, 'assets/misc/boot_log.txt')).toString().split('\n');
|
let log = fs.readFileSync(path.join(__dirname, 'assets/misc/boot_log.txt')).toString().split('\n');
|
||||||
let i = 0;
|
let i = 0;
|
||||||
@ -120,9 +120,9 @@ initUI = () => {
|
|||||||
document.body.innerHTML += `<section class="mod_column" id="mod_column_left">
|
document.body.innerHTML += `<section class="mod_column" id="mod_column_left">
|
||||||
<h3 class="title"><p>PANEL</p><p>SYSTEM</p></h3>
|
<h3 class="title"><p>PANEL</p><p>SYSTEM</p></h3>
|
||||||
</section>
|
</section>
|
||||||
<section id="main_shell" style="height:0%;width:0%;opacity:0;">
|
<section id="main_shell" class="greeting" style="height:0%;width:0%;opacity:0;">
|
||||||
<h3 class="title" style="opacity:0;"><p>TERMINAL</p><p>MAIN SHELL</p></h3>
|
<h3 class="title" style="opacity:0;"><p>TERMINAL</p><p>MAIN SHELL</p></h3>
|
||||||
<pre id="terminal"></pre>
|
<h1 id="main_shell_greeting"></h1>
|
||||||
</section>
|
</section>
|
||||||
<section class="mod_column" id="mod_column_right">
|
<section class="mod_column" id="mod_column_right">
|
||||||
<h3 class="title"><p>PANEL</p><p>NETWORK</p></h3>
|
<h3 class="title"><p>PANEL</p><p>NETWORK</p></h3>
|
||||||
@ -142,27 +142,18 @@ initUI = () => {
|
|||||||
setTimeout(() => {
|
setTimeout(() => {
|
||||||
document.getElementById("main_shell").setAttribute("style", "");
|
document.getElementById("main_shell").setAttribute("style", "");
|
||||||
setTimeout(() => {
|
setTimeout(() => {
|
||||||
window.term = new Terminal({
|
initGreeter();
|
||||||
role: "client",
|
|
||||||
parentId: "terminal"
|
|
||||||
});
|
|
||||||
// Prevent losing hardware keyboard focus on the terminal when using touch keyboard
|
|
||||||
window.onmouseup = (e) => {
|
|
||||||
window.term.term.focus();
|
|
||||||
};
|
|
||||||
setTimeout(() => {
|
|
||||||
document.getElementById("keyboard").setAttribute("style", "");
|
document.getElementById("keyboard").setAttribute("style", "");
|
||||||
document.getElementById("keyboard").setAttribute("class", "animation_state_1");
|
document.getElementById("keyboard").setAttribute("class", "animation_state_1");
|
||||||
setTimeout(() => {
|
setTimeout(() => {
|
||||||
document.getElementById("keyboard").setAttribute("class", "animation_state_1 animation_state_2");
|
document.getElementById("keyboard").setAttribute("class", "animation_state_1 animation_state_2");
|
||||||
setTimeout(() => {
|
setTimeout(() => {
|
||||||
document.getElementById("keyboard").setAttribute("class", "");
|
document.getElementById("keyboard").setAttribute("class", "");
|
||||||
window.term.fit();
|
|
||||||
initMods();
|
initMods();
|
||||||
}, 1100);
|
}, 1100);
|
||||||
}, 100);
|
}, 100);
|
||||||
}, 50);
|
}, 270);
|
||||||
}, 260);
|
|
||||||
}, 10);
|
}, 10);
|
||||||
}, 200);
|
}, 200);
|
||||||
}, 10);
|
}, 10);
|
||||||
@ -186,6 +177,42 @@ initMods = () => {
|
|||||||
});
|
});
|
||||||
};
|
};
|
||||||
|
|
||||||
|
initGreeter = () => {
|
||||||
|
let shell_container = document.getElementById("main_shell");
|
||||||
|
let greeter = document.getElementById("main_shell_greeting");
|
||||||
|
|
||||||
|
require("systeminformation").users()
|
||||||
|
.then((userlist) => {
|
||||||
|
greeter.innerHTML += `Welcome back, <em>${userlist[0].user}</em>`;
|
||||||
|
})
|
||||||
|
.catch(() => {
|
||||||
|
greeter.innerHTML += `We||//c0m€ _b@-K;; <em>##ERr0r</em>`;
|
||||||
|
})
|
||||||
|
.then(() => {
|
||||||
|
greeter.setAttribute("style", "opacity: 1;");
|
||||||
|
setTimeout(() => {
|
||||||
|
greeter.setAttribute("style", "opacity: 0;");
|
||||||
|
setTimeout(() => {
|
||||||
|
greeter.remove();
|
||||||
|
setTimeout(() => {
|
||||||
|
shell_container.innerHTML += `<pre id="terminal"></pre>`;
|
||||||
|
window.term = new Terminal({
|
||||||
|
role: "client",
|
||||||
|
parentId: "terminal"
|
||||||
|
});
|
||||||
|
// Prevent losing hardware keyboard focus on the terminal when using touch keyboard
|
||||||
|
window.onmouseup = (e) => {
|
||||||
|
window.term.term.focus();
|
||||||
|
};
|
||||||
|
setTimeout(() => {
|
||||||
|
window.term.fit();
|
||||||
|
}, 50);
|
||||||
|
}, 100);
|
||||||
|
}, 500);
|
||||||
|
}, 1100);
|
||||||
|
});
|
||||||
|
}
|
||||||
|
|
||||||
// Prevent showing menu, exiting fullscreen or app with keyboard shortcuts
|
// Prevent showing menu, exiting fullscreen or app with keyboard shortcuts
|
||||||
window.onkeydown = (e) => {
|
window.onkeydown = (e) => {
|
||||||
if (e.key === "Alt" || e.key === "F11") {
|
if (e.key === "Alt" || e.key === "F11") {
|
||||||
|
@ -30,7 +30,7 @@ section#keyboard.animation_state_2 > div.keyboard_row:nth-child(4) {
|
|||||||
transition: width .7s cubic-bezier(0.4, 0, 1, 1) .3s, filter .1s linear .8s;
|
transition: width .7s cubic-bezier(0.4, 0, 1, 1) .3s, filter .1s linear .8s;
|
||||||
}
|
}
|
||||||
section#keyboard.animation_state_2 > div.keyboard_row:nth-child(5) {
|
section#keyboard.animation_state_2 > div.keyboard_row:nth-child(5) {
|
||||||
transition: width .6s cubic-bezier(0.4, 0, 1, 1) .4s, filter .1s linear .8s;
|
transition: width .6s cubic-bezier(0.4, 0, 1, 1) .2s, filter .1s linear .6s;
|
||||||
}
|
}
|
||||||
|
|
||||||
section#keyboard.animation_state_1 > * {
|
section#keyboard.animation_state_1 > * {
|
||||||
|
@ -7,6 +7,23 @@ section#main_shell {
|
|||||||
transition: width .5s cubic-bezier(0.4, 0, 1, 1), height .5s cubic-bezier(0.4, 0, 1, 1);
|
transition: width .5s cubic-bezier(0.4, 0, 1, 1), height .5s cubic-bezier(0.4, 0, 1, 1);
|
||||||
}
|
}
|
||||||
|
|
||||||
|
section#main_shell.greeting {
|
||||||
|
display: flex;
|
||||||
|
}
|
||||||
|
|
||||||
|
h1#main_shell_greeting {
|
||||||
|
font-size: 3.9vh;
|
||||||
|
font-weight: normal;
|
||||||
|
margin: auto;
|
||||||
|
opacity: 0;
|
||||||
|
transition: opacity .5s cubic-bezier(0.4, 0, 1, 1);
|
||||||
|
}
|
||||||
|
|
||||||
|
h1#main_shell_greeting > em {
|
||||||
|
font-style: normal;
|
||||||
|
font-weight: bold;
|
||||||
|
}
|
||||||
|
|
||||||
section#main_shell > h3.title {
|
section#main_shell > h3.title {
|
||||||
top: 0.74vh;
|
top: 0.74vh;
|
||||||
left: 16.5vw;
|
left: 16.5vw;
|
||||||
|
Loading…
Reference in New Issue
Block a user