Baipyrus/TerminalHomepage
1
0
Fork 0
Code Issues 4 Pull Requests Projects Releases Wiki Activity

added ascii art

Browse Source
This commit is contained in:
Baipyrus 2023-01-12 15:10:13 +01:00
parent fead90a29e
commit 1d88bfa1d3
3 changed files with 17 additions and 4 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

5
css/main.css
View File

@ -23,3 +23,8 @@ body {
#current { #current {
color: lightgrey; color: lightgrey;
} }
#asciiArt {
text-align: center;
color: red;
}

8
index.html
View File

@ -10,6 +10,14 @@
<body> <body>
<div id="cursor">&nbsp;</div> <div id="cursor">&nbsp;</div>
<div id="textbox"> <div id="textbox">
<pre id="asciiArt">
██████╗ █████╗ ██╗██████╗ ██╗ ██╗██████╗ ██╗ ██╗███████╗
██╔══██╗██╔══██╗██║██╔══██╗╚██╗ ██╔╝██╔══██╗ ██║ ██║██╔════╝
██████╔╝███████║██║██████╔╝ ╚████╔╝ ██████╔╝ ██║ ██║███████╗
██╔══██╗██╔══██║██║██╔═══╝ ╚██╔╝ ██╔══██╗ ██║ ██║╚════██║
██████╔╝██║ ██║██║██║ ██║ ██║ ██║██╗╚██████╔╝███████║
╚═════╝ ╚═╝ ╚═╝╚═╝╚═╝ ╚═╝ ╚═╝ ╚═╝╚═╝ ╚═════╝ ╚══════╝
</pre>
root@baipyr.us:~# root@baipyr.us:~#
<a id="current"></a> <a id="current"></a>
<input type="text" id="input"> <input type="text" id="input">

8
js/main.js
View File

@ -1,16 +1,16 @@
const pretext = "root@baipyr.us:~# "; const pretext = "root@baipyr.us:~# ";
let startPosition = 0; let startPosition = 0;
let cursorPosition = 0; let cursorPosition = 0;
let cursorYOffset = 0; let cursorYOffset = 7;
const tbDiv = document.getElementById("textbox"); const tbDiv = document.getElementById("textbox");
const length = tbDiv.innerText.length+1; const length = pretext.length+1;
startPosition = length; startPosition = length;
cursorPosition = length; cursorPosition = length;
const textIn = document.getElementById("input"); const textIn = document.getElementById("input");
const textCur = document.getElementById("current"); const textCur = document.getElementById("current");
const cursor = document.getElementById("cursor"); const cursor = document.getElementById("cursor");
cursor.style.transform = `translate(${length-1}ch)`; cursor.style.transform = `translate(${length-1}ch,${2.222*7-0.4}ch)`;
textIn.oninput = () => { textIn.oninput = () => {
textCur.textContent += textIn.value; textCur.textContent += textIn.value;
@ -131,7 +131,7 @@ function runCommand(input) {
function updateCursor() { function updateCursor() {
let cursor = document.getElementById("cursor"); let cursor = document.getElementById("cursor");
cursor.style.transform = `translate(${cursorPosition-1}ch, ${2.222*cursorYOffset}ch)`; cursor.style.transform = `translate(${cursorPosition-1}ch, ${2.222*cursorYOffset-0.4}ch)`;
} }
setInterval(()=>{ setInterval(()=>{