sadorowo/personal-website
1
0
Fork 0
Code Pull Requests Projects Releases Activity

update: website look

Browse Source
This commit is contained in:
Franek 2024-05-08 20:51:47 +02:00
parent 01c8eb3b27
commit ae81d8467c
No known key found for this signature in database
GPG Key ID: 0329F871B2079351
3 changed files with 64 additions and 40 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

20
css/style.css
View File

@ -22,11 +22,18 @@ body {
} }
#container { #container {
display: flex;
flex-direction: row;
align-items: center;
justify-content: center;
text-align: center; text-align: center;
height: 100%; height: 100%;
width: 100%; width: 100%;
}
align-content: center; #container > * {
width: 50%;
} }
[data-tooltip] { [data-tooltip] {
@ -71,10 +78,11 @@ input {
white-space: preserve; white-space: preserve;
color: var(--color); color: var(--color);
padding: 2em; max-height: 100%;
overflow-y: auto;
} }
#switch_theme { #switch_theme, #help {
text-decoration: underline; text-decoration: underline;
cursor: pointer; cursor: pointer;
} }
@ -91,3 +99,9 @@ input {
max-width: 50%; max-width: 50%;
max-height: 50%; max-height: 50%;
} }
@media screen and (max-width: 798px) {
#container {
flex-direction: column !important;
}
}

15
index.html
View File

@ -14,14 +14,15 @@
</head> </head>
<body> <body>
<div id="container"> <div id="container">
<h1>welcome to my website</h1> <div>
<h2 id="switch_theme">switch theme</h2> <h1>welcome to my website</h1>
<h2 id="switch_theme">switch theme</h2>
<p>press <kbd>Enter</kbd> to run command</p> <p>press <kbd>Enter</kbd> to run command</p>
<p>use 'help' to list all commands</p> <p>use <span id="help">'help'</span> to list all commands</p>
<span>[guest@website ~]$ </span>
<span>[guest@website ~]$ </span> <input type="text" id="command">
<input type="text" id="command"> </div>
<div id="result"> <div id="result">
</div> </div>

65
js/script.js
View File

@ -4,6 +4,36 @@ function updateAge() {
age.textContent = difference.toFixed(4); age.textContent = difference.toFixed(4);
} }
// process command function
function processCommand() {
const [commandName, ...args] = command.value.split(' ') || [command.value]
const suppliedCommand = COMMANDS.find(c => c.name === commandName)
if (!suppliedCommand) {
result.textContent = 'invalid command';
return
}
const { arguments, output } = suppliedCommand;
for (const i in arguments) {
const argument = arguments[i]
if (argument.required && !args[i]) {
result.textContent = `argument ${argument.name} is missing`;
return
}
const errorMessage = argument.check(argument.multiword ? args.join(' ') : args[i])
if (typeof errorMessage === 'string') {
result.textContent = `error while executing ${suppliedCommand.name}: ${errorMessage}`;
return
}
}
result.innerHTML = output(...args).replaceAll(TAB, '')
}
// wrapper for setInterval // wrapper for setInterval
const runEvery = (task, ms) => { const runEvery = (task, ms) => {
task() task()
@ -37,34 +67,7 @@ command?.addEventListener('focusout', () => {
}) })
command?.addEventListener('keydown', e => { command?.addEventListener('keydown', e => {
if (e.key === 'Enter') { if (e.key === 'Enter') processCommand()
const [commandName, ...args] = e.target.value.split(' ') || [e.target.value]
const command = COMMANDS.find(c => c.name === commandName)
if (!command) {
result.textContent = 'invalid command';
return
}
const { arguments, output } = command;
for (const i in arguments) {
const argument = arguments[i]
if (argument.required && !args[i]) {
result.textContent = `argument ${argument.name} is missing`;
return
}
const errorMessage = argument.check(argument.multiword ? args.join(' ') : args[i])
if (typeof errorMessage === 'string') {
result.textContent = `error while executing ${command.name}: ${errorMessage}`;
return
}
}
result.innerHTML = output(...args).replaceAll(TAB, '')
}
}) })
// run all tasks // run all tasks
@ -75,3 +78,9 @@ command?.focus()
const theme = localStorage.getItem('theme'); const theme = localStorage.getItem('theme');
if (theme === 'dark') if (theme === 'dark')
document.body.classList.add('dark') document.body.classList.add('dark')
// listen to help tooltip
help.addEventListener('click', () => {
command.value = 'help';
processCommand();
})