532 lines
18 KiB
HTML
532 lines
18 KiB
HTML
<!DOCTYPE html>
|
||
<html lang="cs">
|
||
<head>
|
||
<meta charset="UTF-8">
|
||
<title>Zdenek Kreml - Terminal</title>
|
||
<script defer src="https://analytics.oscloud.cz/script.js" data-website-id="4502ff41-0479-41c1-8b7a-5a108565137a"></script>
|
||
<style>
|
||
@import url('https://fonts.googleapis.com/css2?family=JetBrains+Mono:wght@400;700&display=swap');
|
||
|
||
* {
|
||
margin: 0;
|
||
padding: 0;
|
||
box-sizing: border-box;
|
||
}
|
||
|
||
body {
|
||
background: #0a0a0a;
|
||
color: #00ff41;
|
||
font-family: 'JetBrains Mono', monospace;
|
||
font-size: 14px;
|
||
line-height: 1.6;
|
||
overflow-x: hidden;
|
||
}
|
||
|
||
.terminal {
|
||
max-width: 1200px;
|
||
margin: 20px auto;
|
||
background: #000;
|
||
border: 2px solid #333;
|
||
border-radius: 8px;
|
||
box-shadow: 0 0 30px rgba(0, 255, 65, 0.3);
|
||
}
|
||
|
||
.terminal-header {
|
||
background: #1a1a1a;
|
||
padding: 10px 15px;
|
||
border-bottom: 1px solid #333;
|
||
display: flex;
|
||
align-items: center;
|
||
gap: 8px;
|
||
}
|
||
|
||
.terminal-buttons {
|
||
display: flex;
|
||
gap: 6px;
|
||
}
|
||
|
||
.btn {
|
||
width: 12px;
|
||
height: 12px;
|
||
border-radius: 50%;
|
||
}
|
||
|
||
.btn-close { background: #ff5f56; }
|
||
.btn-minimize { background: #ffbd2e; }
|
||
.btn-maximize { background: #27ca3f; }
|
||
|
||
.terminal-title {
|
||
color: #666;
|
||
font-size: 12px;
|
||
margin-left: 10px;
|
||
}
|
||
|
||
.terminal-body {
|
||
padding: 20px;
|
||
min-height: 70vh;
|
||
}
|
||
|
||
.prompt {
|
||
color: #00ff41;
|
||
margin-bottom: 10px;
|
||
}
|
||
|
||
.user {
|
||
color: #ff6b6b;
|
||
}
|
||
|
||
.host {
|
||
color: #4ecdc4;
|
||
}
|
||
|
||
.path {
|
||
color: #ffe66d;
|
||
}
|
||
|
||
.ascii-art {
|
||
color: #00ff41;
|
||
font-size: 14px;
|
||
margin: 20px auto;
|
||
white-space: pre;
|
||
text-align: center;
|
||
line-height: 1.4;
|
||
border: 3px double #00ff41;
|
||
padding: 25px;
|
||
background: rgba(0, 255, 65, 0.05);
|
||
max-width: 500px;
|
||
font-weight: bold;
|
||
}
|
||
|
||
.typewriter {
|
||
overflow: hidden;
|
||
border-right: 2px solid #00ff41;
|
||
white-space: nowrap;
|
||
animation: typing 3.5s steps(40, end), blink-caret 0.75s step-end infinite;
|
||
}
|
||
|
||
@keyframes typing {
|
||
from { width: 0 }
|
||
to { width: 100% }
|
||
}
|
||
|
||
@keyframes blink-caret {
|
||
from, to { border-color: transparent }
|
||
50% { border-color: #00ff41 }
|
||
}
|
||
|
||
.menu {
|
||
margin: 30px 0;
|
||
}
|
||
|
||
.menu-item {
|
||
display: block;
|
||
color: #00ff41;
|
||
text-decoration: none;
|
||
padding: 8px 0;
|
||
border-left: 3px solid transparent;
|
||
transition: all 0.3s ease;
|
||
margin: 5px 0;
|
||
}
|
||
|
||
.menu-item:hover {
|
||
color: #fff;
|
||
border-left-color: #00ff41;
|
||
background: rgba(0, 255, 65, 0.1);
|
||
padding-left: 10px;
|
||
}
|
||
|
||
.menu-item::before {
|
||
content: "$ ";
|
||
color: #666;
|
||
}
|
||
|
||
.content-section {
|
||
display: none;
|
||
margin: 20px 0;
|
||
border: 1px solid #333;
|
||
border-radius: 4px;
|
||
background: rgba(0, 255, 65, 0.05);
|
||
}
|
||
|
||
.content-section.active {
|
||
display: block;
|
||
animation: fadeIn 0.5s ease-in;
|
||
}
|
||
|
||
@keyframes fadeIn {
|
||
from { opacity: 0; transform: translateY(10px); }
|
||
to { opacity: 1; transform: translateY(0); }
|
||
}
|
||
|
||
.content-header {
|
||
background: #1a1a1a;
|
||
padding: 10px 15px;
|
||
border-bottom: 1px solid #333;
|
||
color: #4ecdc4;
|
||
font-weight: bold;
|
||
}
|
||
|
||
.content-body {
|
||
padding: 15px;
|
||
}
|
||
|
||
.link-grid {
|
||
display: grid;
|
||
grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
|
||
gap: 15px;
|
||
margin: 15px 0;
|
||
}
|
||
|
||
.link-item {
|
||
display: flex;
|
||
align-items: center;
|
||
gap: 10px;
|
||
padding: 12px;
|
||
background: rgba(0, 255, 65, 0.1);
|
||
border: 1px solid #333;
|
||
border-radius: 4px;
|
||
color: #00ff41;
|
||
text-decoration: none;
|
||
transition: all 0.3s ease;
|
||
}
|
||
|
||
.link-item:hover {
|
||
background: rgba(0, 255, 65, 0.2);
|
||
border-color: #00ff41;
|
||
transform: translateX(5px);
|
||
}
|
||
|
||
.icon {
|
||
font-size: 16px;
|
||
width: 20px;
|
||
text-align: center;
|
||
}
|
||
|
||
.status-bar {
|
||
background: #1a1a1a;
|
||
padding: 8px 15px;
|
||
border-top: 1px solid #333;
|
||
font-size: 12px;
|
||
color: #666;
|
||
display: flex;
|
||
justify-content: space-between;
|
||
}
|
||
|
||
.matrix-bg {
|
||
position: fixed;
|
||
top: 0;
|
||
left: 0;
|
||
width: 100%;
|
||
height: 100%;
|
||
z-index: -1;
|
||
opacity: 0.1;
|
||
}
|
||
|
||
.glitch {
|
||
animation: glitch 2s infinite;
|
||
}
|
||
|
||
@keyframes glitch {
|
||
0%, 100% { transform: translate(0); }
|
||
20% { transform: translate(-1px, 1px); }
|
||
40% { transform: translate(-1px, -1px); }
|
||
60% { transform: translate(1px, 1px); }
|
||
80% { transform: translate(1px, -1px); }
|
||
}
|
||
|
||
.footer {
|
||
text-align: center;
|
||
padding: 20px;
|
||
border-top: 1px solid #333;
|
||
color: #666;
|
||
font-size: 12px;
|
||
}
|
||
|
||
.footer a {
|
||
color: #00ff41;
|
||
text-decoration: none;
|
||
}
|
||
|
||
.footer a:hover {
|
||
text-decoration: underline;
|
||
}
|
||
|
||
@media (max-width: 768px) {
|
||
.terminal {
|
||
margin: 10px;
|
||
border-radius: 0;
|
||
}
|
||
|
||
.terminal-body {
|
||
padding: 15px;
|
||
}
|
||
|
||
.ascii-art {
|
||
font-size: 8px;
|
||
}
|
||
|
||
.link-grid {
|
||
grid-template-columns: 1fr;
|
||
}
|
||
}
|
||
</style>
|
||
</head>
|
||
<body>
|
||
<canvas class="matrix-bg" id="matrix"></canvas>
|
||
|
||
<div class="terminal">
|
||
<div class="terminal-header">
|
||
<div class="terminal-buttons">
|
||
<div class="btn btn-close"></div>
|
||
<div class="btn btn-minimize"></div>
|
||
<div class="btn btn-maximize"></div>
|
||
</div>
|
||
<div class="terminal-title">zkreml@arch:~</div>
|
||
</div>
|
||
|
||
<div class="terminal-body">
|
||
<div class="prompt">
|
||
<span class="user">zkreml</span>@<span class="host">arch</span>:<span class="path">~</span>$
|
||
</div>
|
||
|
||
<div class="ascii-art">
|
||
ZDENEK KREML
|
||
Archos
|
||
~ System Administrator ~
|
||
[***] Arch Linux Enthusiast
|
||
[***] Open Source Contributor
|
||
[***] Community Server Admin
|
||
</div>
|
||
|
||
<div class="typewriter glitch">
|
||
> Arch Linux enthusiast | Open Source contributor | System administrator
|
||
</div>
|
||
|
||
<div style="margin: 30px 0;">
|
||
<div class="prompt">
|
||
<span class="user">zkreml</span>@<span class="host">arch</span>:<span class="path">~</span>$ whoami
|
||
</div>
|
||
<p style="margin: 10px 0; color: #4ecdc4;">
|
||
Jsem členem komunity Arch Linux CZ a nadšeným podporovatelem open source.<br>
|
||
Spravuji servery na Ubuntu/Debianu a hostuju různé komunitní platformy.<br>
|
||
Jsem autorem projektu <a href="https://oscloud.cz" target="_blank" style="color:#00ff41; text-decoration:none;">OSCloud</a>
|
||
– otevřeného prostoru pro komunitní hosting a aplikace.<br>
|
||
Zajímám se o bezpečnost, decentralizaci a GrapheneOS.
|
||
</p>
|
||
|
||
<p style="margin: 15px 0; color: #00ff41; font-style: italic; font-size: 13px;">
|
||
<a href="https://oscloud.cz" target="_blank" style="color:#00ff41; text-decoration:none;">OSCloud</a>
|
||
je projekt zaměřený na svobodné online služby pro komunitu. Umožňuje snadné nasazení open source aplikací bez sledování a s důrazem na svobodu a soukromí.
|
||
</p>
|
||
|
||
</div>
|
||
<div class="prompt">
|
||
<span class="user">zkreml</span>@<span class="host">arch</span>:<span class="path">~</span>$ ls -la /home/zkreml/
|
||
</div>
|
||
|
||
<div class="menu">
|
||
<a href="#" class="menu-item" data-section="social">social_networks/</a>
|
||
<a href="#" class="menu-item" data-section="opensource">open_source/</a>
|
||
<a href="#" class="menu-item" data-section="projects">projects/</a>
|
||
<a href="#" class="menu-item" data-section="contact">contact/</a>
|
||
</div>
|
||
|
||
<div id="social" class="content-section">
|
||
<div class="content-header">
|
||
<span class="user">zkreml</span>@<span class="host">arch</span>:<span class="path">~/social_networks</span>$ cat social.txt
|
||
</div>
|
||
<div class="content-body">
|
||
<div class="link-grid">
|
||
<a href="https://mastodon.arch-linux.cz/@archos" class="link-item">
|
||
<span class="icon">🐘</span>
|
||
<span>Mastodon</span>
|
||
</a>
|
||
<a href="https://pixelfed.cz/i/web/profile/441194050239729665" class="link-item">
|
||
<span class="icon">📷</span>
|
||
<span>Pixelfed</span>
|
||
</a>
|
||
<a href="https://twitter.com/archos_linux" class="link-item">
|
||
<span class="icon">🐦</span>
|
||
<span>Twitter</span>
|
||
</a>
|
||
<a href="https://www.facebook.com/zdendys75/" class="link-item">
|
||
<span class="icon">📘</span>
|
||
<span>Facebook</span>
|
||
</a>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
<div id="opensource" class="content-section">
|
||
<div class="content-header">
|
||
<span class="user">zkreml</span>@<span class="host">arch</span>:<span class="path">~/open_source</span>$ cat README.md
|
||
</div>
|
||
<div class="content-body">
|
||
<div class="link-grid">
|
||
<a href="https://git.arch-linux.cz/Archos" class="link-item">
|
||
<span class="icon">🌿</span>
|
||
<span>Gitea Repository</span>
|
||
</a>
|
||
<a href="https://arch-linux.cz" class="link-item">
|
||
<span class="icon">🐧</span>
|
||
<span>Arch Linux CZ</span>
|
||
</a>
|
||
<a href="https://keyoxide.org/EBAB6510473A1F1C34AEC4C0FA7A7D45E7FC2AB1" class="link-item">
|
||
<span class="icon">🔐</span>
|
||
<span>Keyoxide Profile</span>
|
||
</a>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
<div id="projects" class="content-section">
|
||
<div class="content-header">
|
||
<span class="user">zkreml</span>@<span class="host">arch</span>:<span class="path">~/projects</span>$ ls -la
|
||
</div>
|
||
<div class="content-body">
|
||
<div class="link-grid">
|
||
<a href="https://finance.oscloud.cz/" class="link-item">
|
||
<span class="icon">📊</span>
|
||
<span>Finance OSCloud</span>
|
||
</a>
|
||
<a href="https://web.mxchat.cz" class="link-item">
|
||
<span class="icon">💬</span>
|
||
<span>MXChat Community</span>
|
||
</a>
|
||
<a href="https://mamutovo.cz" class="link-item">
|
||
<span class="icon">🐘</span>
|
||
<span>Mamutovo Instance</span>
|
||
</a>
|
||
<a href="https://vhsky.cz" class="link-item">
|
||
<span class="icon">📹</span>
|
||
<span>PeerTube Channel VHSKY</span>
|
||
</a>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
<div id="contact" class="content-section">
|
||
<div class="content-header">
|
||
<span class="user">zkreml</span>@<span class="host">arch</span>:<span class="path">~/contact</span>$ cat contact.txt
|
||
</div>
|
||
<div class="content-body">
|
||
<div class="link-grid">
|
||
<a href="https://matrix.to/#/@archos:mxchat.cz" class="link-item">
|
||
<span class="icon">💬</span>
|
||
<span>Matrix Chat</span>
|
||
</a>
|
||
<a href="mailto:email@zkreml.cz" class="link-item">
|
||
<span class="icon">✉️</span>
|
||
<span>Email</span>
|
||
</a>
|
||
<a href="xmpp:archos@arch-linux.cz" class="link-item" title="XMPP: archos@arch-linux.cz">
|
||
<span class="icon">💭</span>
|
||
<span>XMPP</span>
|
||
</a>
|
||
<a href="https://keys.openpgp.org/vks/v1/by-fingerprint/EBAB6510473A1F1C34AEC4C0FA7A7D45E7FC2AB1" class="link-item">
|
||
<span class="icon">🔑</span>
|
||
<span>GPG Key</span>
|
||
</a>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
<div class="status-bar">
|
||
<span>Connected to mxchat.cz</span>
|
||
<span id="status-time"></span>
|
||
</div>
|
||
|
||
<div class="footer">
|
||
<p>
|
||
<a href="/">© 2024 Zdenek Kreml</a>
|
||
| <a href="https://git.arch-linux.cz/Archos/web_zkreml">Source Code</a>
|
||
| Built with ❤️ and Terminal love
|
||
</p>
|
||
</div>
|
||
</div>
|
||
|
||
<script>
|
||
// Matrix rain effect
|
||
const canvas = document.getElementById('matrix');
|
||
const ctx = canvas.getContext('2d');
|
||
|
||
canvas.width = window.innerWidth;
|
||
canvas.height = window.innerHeight;
|
||
|
||
const chars = '01アイウエオカキクケコサシスセソタチツテトナニヌネノハヒフヘホマミムメモヤユヨラリルレロワヲン';
|
||
const charArray = chars.split('');
|
||
|
||
const fontSize = 14;
|
||
const columns = canvas.width / fontSize;
|
||
|
||
const drops = [];
|
||
for (let x = 0; x < columns; x++) {
|
||
drops[x] = 1;
|
||
}
|
||
|
||
function drawMatrix() {
|
||
ctx.fillStyle = 'rgba(0, 0, 0, 0.05)';
|
||
ctx.fillRect(0, 0, canvas.width, canvas.height);
|
||
|
||
ctx.fillStyle = '#00ff41';
|
||
ctx.font = fontSize + 'px monospace';
|
||
|
||
for (let i = 0; i < drops.length; i++) {
|
||
const text = charArray[Math.floor(Math.random() * charArray.length)];
|
||
ctx.fillText(text, i * fontSize, drops[i] * fontSize);
|
||
|
||
if (drops[i] * fontSize > canvas.height && Math.random() > 0.975) {
|
||
drops[i] = 0;
|
||
}
|
||
drops[i]++;
|
||
}
|
||
}
|
||
|
||
setInterval(drawMatrix, 50);
|
||
|
||
// Menu functionality
|
||
const menuItems = document.querySelectorAll('.menu-item');
|
||
const contentSections = document.querySelectorAll('.content-section');
|
||
|
||
menuItems.forEach(item => {
|
||
item.addEventListener('click', (e) => {
|
||
e.preventDefault();
|
||
|
||
// Hide all sections
|
||
contentSections.forEach(section => {
|
||
section.classList.remove('active');
|
||
});
|
||
|
||
// Show selected section
|
||
const targetSection = document.getElementById(item.dataset.section);
|
||
if (targetSection) {
|
||
targetSection.classList.add('active');
|
||
}
|
||
});
|
||
});
|
||
|
||
// Status bar clock
|
||
function updateTime() {
|
||
const now = new Date();
|
||
const timeString = now.toLocaleTimeString('cs-CZ');
|
||
document.getElementById('status-time').textContent = timeString;
|
||
}
|
||
|
||
updateTime();
|
||
setInterval(updateTime, 1000);
|
||
|
||
// Resize canvas on window resize
|
||
window.addEventListener('resize', () => {
|
||
canvas.width = window.innerWidth;
|
||
canvas.height = window.innerHeight;
|
||
});
|
||
|
||
// Typing sound effect (optional)
|
||
document.addEventListener('keydown', () => {
|
||
// Could add terminal typing sounds here
|
||
});
|
||
</script>
|
||
</body>
|
||
</html>
|