Add files
This commit is contained in:
parent
ee59e14c82
commit
9d063f3b04
|
@ -0,0 +1,5 @@
|
||||||
|
config = {
|
||||||
|
prompt: 'user@browser $ ',
|
||||||
|
wallpaper: './src/img/background.jpg'
|
||||||
|
}
|
||||||
|
|
|
@ -0,0 +1,23 @@
|
||||||
|
<!DOCTYPE html>
|
||||||
|
<html lang="en">
|
||||||
|
<head>
|
||||||
|
<meta charset="UTF-8">
|
||||||
|
<title>Startpage</title>
|
||||||
|
<link rel="stylesheet" href="./src/css/style.css">
|
||||||
|
</head>
|
||||||
|
<body>
|
||||||
|
<div id="main">
|
||||||
|
<div id="terminal">
|
||||||
|
<div id="command-line">
|
||||||
|
<span id="prompt"></span>
|
||||||
|
<input type="text" autocomplete="off" autocorrect="off" autocapitalize="off" spellcheck="false">
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<script src="./config.js"></script>
|
||||||
|
<script src="./src/js/utils.js"></script>
|
||||||
|
<script src="./src/js/commands.js"></script>
|
||||||
|
<script src="./src/js/terminal.js"></script>
|
||||||
|
</body>
|
||||||
|
</html>
|
|
@ -0,0 +1,50 @@
|
||||||
|
@import url('https://fonts.googleapis.com/css2?family=Source+Code+Pro&display=swap');
|
||||||
|
|
||||||
|
body {
|
||||||
|
margin: 0;
|
||||||
|
padding: 0;
|
||||||
|
font-family: 'Source Code Pro', monospace;
|
||||||
|
color: #e3e3e3;
|
||||||
|
}
|
||||||
|
|
||||||
|
#main {
|
||||||
|
width: 100%;
|
||||||
|
height: 100vh;
|
||||||
|
display: flex;
|
||||||
|
align-items: center;
|
||||||
|
justify-content: center;
|
||||||
|
background-size: cover;
|
||||||
|
}
|
||||||
|
|
||||||
|
#terminal {
|
||||||
|
width: 40%;
|
||||||
|
height: 60%;
|
||||||
|
overflow-y: scroll;
|
||||||
|
cursor: text;
|
||||||
|
padding: 1em;
|
||||||
|
border: #237e99 3px solid;
|
||||||
|
border-radius: 1em;
|
||||||
|
background-color: #252625d1;
|
||||||
|
backdrop-filter: blur(8px);
|
||||||
|
}
|
||||||
|
|
||||||
|
.line {
|
||||||
|
min-height: 1.5em;
|
||||||
|
}
|
||||||
|
|
||||||
|
.red {
|
||||||
|
color: #c22f2f;
|
||||||
|
}
|
||||||
|
|
||||||
|
#command-line input {
|
||||||
|
width: 70%;
|
||||||
|
background: none;
|
||||||
|
color: inherit;
|
||||||
|
font-family: inherit;
|
||||||
|
font-size: 1em;
|
||||||
|
border: none;
|
||||||
|
}
|
||||||
|
|
||||||
|
#command-line input:focus {
|
||||||
|
outline: none;
|
||||||
|
}
|
Binary file not shown.
After Width: | Height: | Size: 165 KiB |
|
@ -0,0 +1,49 @@
|
||||||
|
const commands = {
|
||||||
|
go: (target) => {
|
||||||
|
if (target == '') {
|
||||||
|
_print('No target given!', color = 'red');
|
||||||
|
} else {
|
||||||
|
if (!target.match(/^https?:\/\/.+/g)) {
|
||||||
|
target = 'http://' + target;
|
||||||
|
}
|
||||||
|
window.open(target, "_self");
|
||||||
|
}
|
||||||
|
},
|
||||||
|
google: (query) => {
|
||||||
|
if (query == '') {
|
||||||
|
window.open("https://google.com/", "_self");
|
||||||
|
} else {
|
||||||
|
window.open("https://google.com/search?q=" + query, "_self");
|
||||||
|
}
|
||||||
|
},
|
||||||
|
reddit: (subreddit) => {
|
||||||
|
if (subreddit == '') {
|
||||||
|
window.open("https://reddit.com/", "_self");
|
||||||
|
} else {
|
||||||
|
window.open("https://reddit.com/r/" + subreddit, "_self");
|
||||||
|
}
|
||||||
|
},
|
||||||
|
print: (string) => {
|
||||||
|
_print(string);
|
||||||
|
},
|
||||||
|
clear: () => {
|
||||||
|
_clear();
|
||||||
|
},
|
||||||
|
date: () => {
|
||||||
|
_print('26/04/2022')
|
||||||
|
},
|
||||||
|
clock: () => {
|
||||||
|
const date = new Date();
|
||||||
|
const hours = date.getHours();
|
||||||
|
const minutes = date.getMinutes();
|
||||||
|
_print(hours + ':' + minutes);
|
||||||
|
},
|
||||||
|
show_commands: () => {
|
||||||
|
let availableCommands = Object.keys(commands);
|
||||||
|
let output = '';
|
||||||
|
availableCommands.forEach((cmd) => {
|
||||||
|
output += cmd + ' ';
|
||||||
|
});
|
||||||
|
_print(output);
|
||||||
|
}
|
||||||
|
}
|
|
@ -0,0 +1,25 @@
|
||||||
|
const main = document.querySelector('#main');
|
||||||
|
const terminal = document.querySelector('#terminal');
|
||||||
|
const prompt = document.querySelector('#prompt');
|
||||||
|
const commandInput = document.querySelector('#command-line input');
|
||||||
|
|
||||||
|
commandInput.addEventListener('keypress', (event) => {
|
||||||
|
if (event.keyCode === 13) {
|
||||||
|
event.preventDefault();
|
||||||
|
rawEntry = commandInput.value;
|
||||||
|
_execute(rawEntry);
|
||||||
|
commandInput.value = '';
|
||||||
|
};
|
||||||
|
});
|
||||||
|
|
||||||
|
|
||||||
|
// Set prompt text
|
||||||
|
prompt.innerText = config.prompt;
|
||||||
|
|
||||||
|
// Set background
|
||||||
|
main.style.backgroundImage = `url('${config.wallpaper}')`;
|
||||||
|
|
||||||
|
// Set events
|
||||||
|
terminal.addEventListener('click', focusToPrompt);
|
||||||
|
window.addEventListener('load', focusToPrompt);
|
||||||
|
|
|
@ -0,0 +1,40 @@
|
||||||
|
const focusToPrompt = () => {
|
||||||
|
commandInput.focus();
|
||||||
|
}
|
||||||
|
|
||||||
|
const parseEntry = (entry) => {
|
||||||
|
entry = entry.trim().replace(/\s\s+/g, ' ');
|
||||||
|
command = entry.split(' ')[0];
|
||||||
|
arg = entry.replace(command, '').trim();
|
||||||
|
return {command, arg};
|
||||||
|
}
|
||||||
|
|
||||||
|
const _print = (arg, color = null) => {
|
||||||
|
let line = document.createElement('div');
|
||||||
|
line.classList.add('line');
|
||||||
|
if (color == 'red') {
|
||||||
|
line.classList.add('red');
|
||||||
|
}
|
||||||
|
line.innerText += arg;
|
||||||
|
let commandInput = document.querySelector('#command-line');
|
||||||
|
commandInput.parentNode.insertBefore(line, commandInput);
|
||||||
|
}
|
||||||
|
|
||||||
|
const _clear = () => {
|
||||||
|
document.querySelectorAll('.line').forEach((elm) => {
|
||||||
|
elm.parentNode.removeChild(elm);
|
||||||
|
});
|
||||||
|
}
|
||||||
|
|
||||||
|
const _execute = (rawEntry) => {
|
||||||
|
let returns = null
|
||||||
|
_print(prompt.innerText + rawEntry);
|
||||||
|
parsed = parseEntry(rawEntry);
|
||||||
|
if (!(parsed.command in commands) && (parsed.command != '')) {
|
||||||
|
_print('Unknown command!', color = 'red');
|
||||||
|
} else {
|
||||||
|
returns = commands[parsed.command](parsed.arg);
|
||||||
|
}
|
||||||
|
return returns;
|
||||||
|
}
|
||||||
|
|
Loading…
Reference in New Issue