Archos/web_zkreml
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

Přidán nový navrh na web

Browse Source
This commit is contained in:
Zdenek Kreml
2025-06-19 19:38:06 +02:00
parent 8467d705a8
commit 9d44d5c513
1 changed files with 514 additions and 31 deletions
Download Patch File Download Diff File Expand all files Collapse all files

535
index.html
View File

@ -2,40 +2,523 @@
<html lang="cs"> <html lang="cs">
<head> <head>
<meta charset="UTF-8"> <meta charset="UTF-8">
<title>Zdenek Kreml</title> <title>Zdenek Kreml - Terminal</title>
<link rel="stylesheet" type="text/css" href="styly.css">
<script src="https://kit.fontawesome.com/88bcdf51c5.js" crossorigin="anonymous"></script>
<script defer src="https://analytics.oscloud.cz/script.js" data-website-id="4502ff41-0479-41c1-8b7a-5a108565137a"></script> <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> </head>
<body> <body>
<header> <canvas class="matrix-bg" id="matrix"></canvas>
<h1>Zdenek Kreml</h1>
<img src="profilovka/archos.jpg" alt="Můj obrázek">
<h2>O mně</h2>
</header>
<div class="centered-text"> <div class="terminal">
<p>Jsem členem komunity <a href="https://arch-linux.cz" target="_blank">Arch Linux CZ</a> a nadšeným podporovatelem open source. I když se zajímám o Arch Linux, servery, které spravuji, běží na Ubuntu a Debianu. Mám zkušenosti s hostováním a správou různých komunitních platforem a open source aplikací.</p> <div class="terminal-header">
<p>Moje záliba v technologiích sahá od operačních systémů jako Arch Linux až po bezpečnostně orientované mobilní platformy jako GrapheneOS.</p> <div class="terminal-buttons">
<p>Jako <strong>Open Source Nadšenec</strong>, věřím v sílu otevřeného softwaru a jsem aktivním přispěvatelem do jeho komunity.</p> <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
~ 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>
Zajímám se o bezpečnost, decentralizaci a GrapheneOS.
</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</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="/">&copy; 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> </div>
<main class="flex-container"> <script>
<a href="#" class="flex-item" onclick="showContent('social')">Sociální sítě</a> // Matrix rain effect
<a href="#" class="flex-item" onclick="showContent('opensource')">Open Source</a> const canvas = document.getElementById('matrix');
<a href="#" class="flex-item" onclick="showContent('contact')">Kontakt</a> const ctx = canvas.getContext('2d');
<a href="#" class="flex-item" onclick="showContent('projects')">Mé projekty</a>
</main>
<div id="dynamic-content"></div> canvas.width = window.innerWidth;
canvas.height = window.innerHeight;
<footer> const chars = '01アイウエオカキクケコサシスセソタチツテトナニヌネノハヒフヘホマミムメモヤユヨラリルレロワヲン';
<p> const charArray = chars.split('');
<a href="/" class="name-link" style="text-decoration: none; color: inherit;">&copy; 2024 Zdenek Kreml</a>
| <a href="https://git.arch-linux.cz/Archos/web_zkreml" target="_blank"><i class="fab fa-git-alt"></i> Gitea</a>
</p>
</footer>
<script src="skripty.js"></script> 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> </body>
</html> </html>