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 {
display: flex;
flex-direction: row;
align-items: center;
justify-content: center;
text-align: center;
height: 100%;
width: 100%;
}
align-content: center;
#container > * {
width: 50%;
}
[data-tooltip] {
@ -71,10 +78,11 @@ input {
white-space: preserve;
color: var(--color);
padding: 2em;
max-height: 100%;
overflow-y: auto;
}
#switch_theme {
#switch_theme, #help {
text-decoration: underline;
cursor: pointer;
}
@ -90,4 +98,10 @@ input {
.image-grid > * {
max-width: 50%;
max-height: 50%;
}
@media screen and (max-width: 798px) {
#container {
flex-direction: column !important;
}
}

17
index.html
View File

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

67
js/script.js
View File

@ -4,6 +4,36 @@ function updateAge() {
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
const runEvery = (task, ms) => {
task()
@ -37,34 +67,7 @@ command?.addEventListener('focusout', () => {
})
command?.addEventListener('keydown', e => {
if (e.key === 'Enter') {
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, '')
}
if (e.key === 'Enter') processCommand()
})
// run all tasks
@ -74,4 +77,10 @@ command?.focus()
// initial theme configuration
const theme = localStorage.getItem('theme');
if (theme === 'dark')
document.body.classList.add('dark')
document.body.classList.add('dark')
// listen to help tooltip
help.addEventListener('click', () => {
command.value = 'help';
processCommand();
})