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

Zjednodušen index html, odstrabńěny projekty, přepracovány styly css a přidán JavaScript

Browse Source
This commit is contained in:
archos
2024-05-15 21:06:04 +02:00
parent b224dc5add
commit 172bf31a50
3 changed files with 67 additions and 103 deletions
Download Patch File Download Diff File Expand all files Collapse all files

49
index.html
View File

@@ -2,45 +2,36 @@
<html lang="cs">
<head>
<meta charset="UTF-8">
<link rel="stylesheet" type="text/css" href="styly.css">
<title>Zdenek Kreml</title>
<link rel="stylesheet" type="text/css" href="styly.css">
<title>Zdenek Kreml</title>
</head>
<body>
<header>
<h1>Vítejte na mé osobní stránce!</h1>
<h1>Zdenek Kreml</h1>
</header>
<section>
<img src="profilovka/archos.jpg" alt="Můj obrázek">
<h2>O mně</h2>
<section>
<p>Ahoj, jmenuji se Zdeněk Kreml. Jsem členem komunity Arch Linux CZ a nadšeným podporovatelem open source. 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. Své odborné dovednosti nejvíce uplatňuji při správě serverů, které běží na Ubuntu a Debianu, a při hostování a správě různých komunitních platforem a open source aplikací.</p>
<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. Považuji se za <strong>Uživatele Arch Linuxu a GrapheneOS</strong>, kde mi tyto systémy umožňují spojit moji vášeň pro bezpečnost a stabilitu s praktickým využitím v každodenním životě.</p>
</section>
<section>
<h2>Projekty a Správa</h2>
<p>Věnuji se správě a hostování různých aplikací, které přibližují lidem důležitost bezpečnosti a soukromí v digitálním světě. Zde jsou některé z hlavních projektů, které nabízím:</p>
<ul>
<li>🐘 <strong>Mastodon Instance</strong> - <a href="https://mastodon.arch-linux.cz">mastodon.arch-linux.cz</a><br>Sociální platforma pro uživatele Arch Linuxu.</li>
<li>🖼️ <strong>Pixelfed</strong> - <a href="https://pixelfed.cz">pixelfed.cz</a><br>Platforma pro sdílení obrázků, která respektuje soukromí uživatelů.</li>
<li>🔒 <strong>Cryptpad</strong> - <a href="https://cryptpad.arch-linux.cz">cryptpad.arch-linux.cz</a><br>Bezpečná a šifrovaná kolaborativní platforma pro sdílení dokumentů.</li>
<li>🐘 <strong>Další instance Mastodon</strong> - <a href="https://mamutovo.cz">mamutovo.cz</a><br>Podpora sociální sítě založené na otevřených standardech.</li>
<li>🔑 <strong>Bitwarden</strong> - <a href="https://bitwarden.archoslinux.cz">bitwarden.archoslinux.cz</a><br>Bezpečný správce hesel, který pomáhá uživatelům chránit jejich digitální identity.</li>
<li>📝 <strong> PrivateBin</strong> - <a href="https://privatebin.arch-linux.cz">privatebin.arch-linux.cz</a><br>Platforma pro bezpečné sdílení textů a údajů.</li>
<!-- Další projekty -->
</ul>
<h3>Další Webové Aplikace</h3>
<ul>
<li>📑 <strong>Linkding</strong>: Jednoduchý správce záložek.</li>
<li>📷 <strong>Immich</strong>: Serverová aplikace pro správu fotografií.</li>
<li>📖 <strong>Wallabag</strong>: Služba pro ukládání článků k pozdějšímu čtení.</li>
<!-- Další aplikace -->
</ul>
</section>
</head>
<body>
</header>
<div class="centered-text">
<p>Jsem členem komunity Arch Linux CZ a nadšeným podporovatelem open source.</p>
<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>
<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>
<main class="flex-container">
<a href="#" class="flex-item" onclick="showContent('social')">Sociální sítě</a>
<a href="#" class="flex-item" onclick="showContent('opensource')">Open Source</a>
<a href="#" class="flex-item" onclick="showContent('contact')">Kontakt</a>
</main>
<div id="dynamic-content"></div>
<footer>
<p>Kontaktujte mě na email@example.com</p>
</footer>
<script src="skripty.js"></script>
</body>
</html>

18
skripty.js Normal file
View File

@@ -0,0 +1,18 @@
function showContent(type) {
var content = document.getElementById('dynamic-content');
content.innerHTML = ''; // Clear previous content
if (type === 'social') {
content.innerHTML = '<a href="https://mastodon.arch-linux.cz" class="flex-item">Mastodon</a>'
+ '<a href="https://pixelfed.cz" class="flex-item">Pixelfed</a>'
+ '<a href="https://twitter.com" class="flex-item">Twitter</a>'
+ '<a href="https://facebook.com" class="flex-item">Facebook</a>';
} else if (type === 'opensource') {
content.innerHTML = '<a href="https://git.arch-linux.cz/Archos" class="flex-item">Gitea</a>'
+ '<a href="https://arch-linux.cz" class="flex-item">Web Arch Linux</a>';
} else if (type === 'contact') {
content.innerHTML = '<a href="https://matrix.org" class="flex-item">Matrix</a>'
+ '<a href="mailto:email@example.com" class="flex-item">Email</a>'
+ '<a href="https://xmpp.org" class="flex-item">XMPP</a>';
}
}

103
styly.css
View File

@@ -1,88 +1,43 @@
/* Základní nastavení písma a pozadí pro celou stránku */
body {
font-family: Arial, sans-serif; /* Nastavení písma */
line-height: 1.6; /* řádkování */
color: #333; /* Barva textu */
background-color: #f9f9f9; /* Barva pozadí */
padding: 20px; /* Vnitřní okraj pro celé tělo stránky */
body, html {
font-family: Arial, sans-serif;
margin: 0;
padding: 0;
text-align: center;
}
/* Centrování nadpisů h1 a h2 a specifické nastavení */
h1, h2 {
text-align: center; /* Zarovnání textu na střed */
color: #555; /* Světle šedá barva textu */
}
/* Nastavení stylu pro všechny obrázky na stránce */
img {
display: block; /* Zobrazení jako blok pro možnost centrování */
margin-left: auto; /* Automatický levý okraj pro centrování */
margin-right: auto; /* Automatický pravý okraj pro centrování */
width: 200px; /* Pevná šířka obrázku */
border-radius: 80px; /* Velké zaoblení rohů */
width: 150px; /* Pevná šířka obrázku */
border-radius: 85px; /* Velké zaoblení rohů */
box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1); /* Lehký stín pro lepší vizuální efekt */
}
/* Dodatečné styly, které můžete potřebovat pro odstavce a další elementy */
p {
margin-top: 20px; /* Horní okraj pro odstavce */
margin-bottom: 20px; /* Dolní okraj pro odstavce */
}
section {
margin: 20px;
.flex-container {
display: flex;
justify-content: center;
gap: 10px;
padding: 20px;
background-color: #fff; /* Bílé pozadí pro lepší čitelnost */
border-radius: 8px;
box-shadow: 0 2px 5px rgba(0,0,0,0.1);
}
section h2, section h3 {
color: #333;
text-align: center;
}
section p {
font-size: 16px;
line-height: 1.5;
color: #666;
text-align: justify;
}
section ul {
list-style-type: none; /* Odstranění teček u seznamu */
padding: 0;
}
section ul li {
margin-bottom: 10px;
line-height: 1.4;
font-size: 14px;
}
a {
color: #0077cc; /* Modrá barva odkazů */
text-decoration: none; /* Žádné podtržení */
}
a:hover {
text-decoration: underline; /* Podtržení při najetí myši */
}
section ul {
list-style-type: none; /* Odstranění teček u seznamu */
padding: 0;
display: flex; /* Nastavení flexboxu */
flex-wrap: wrap; /* Umožnění zalomení řádku */
gap: 10px; /* Mezera mezi položkami */
}
section ul li {
flex: 1 1 200px; /* Flex položka může růst a smršťovat, minimální základní šířka je 200px */
padding: 10px;
line-height: 1.4;
font-size: 14px;
background-color: #f9f9f9;
border: 1px solid #ccc;
.flex-item {
width: 150px;
padding: 10px;
background-color: #f4f4f4;
border-radius: 5px;
box-shadow: 2px 2px 5px rgba(0, 0, 0, 0.1);
text-align: center; /* Centrování textu */
text-align: center;
color: black;
text-decoration: none;
box-shadow: 0 4px 8px rgba(0,0,0,0.2);
}
.flex-item:hover {
background-color: #e0e0e0;
}
footer {
margin-top: 20px;
padding: 10px;
background-color: #f1f1f1;
}