Archos/web_zkreml
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
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

47
index.html
View File

@ -2,45 +2,36 @@
<html lang="cs"> <html lang="cs">
<head> <head>
<meta charset="UTF-8"> <meta charset="UTF-8">
<title>Zdenek Kreml</title>
<link rel="stylesheet" type="text/css" href="styly.css"> <link rel="stylesheet" type="text/css" href="styly.css">
<title>Zdenek Kreml</title> <title>Zdenek Kreml</title>
</head> </head>
<body> <body>
<header> <header>
<h1>Vítejte na mé osobní stránce!</h1> <h1>Zdenek Kreml</h1>
</header> </header>
<section>
<img src="profilovka/archos.jpg" alt="Můj obrázek"> <img src="profilovka/archos.jpg" alt="Můj obrázek">
<h2>O mně</h2> <h2>O mně</h2>
<section> </head>
<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> <body>
<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> </header>
</section> <div class="centered-text">
<p>Jsem členem komunity Arch Linux CZ a nadšeným podporovatelem open source.</p>
<section> <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>
<h2>Projekty a Správa</h2> <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>
<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> </div>
<ul> <main class="flex-container">
<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> <a href="#" class="flex-item" onclick="showContent('social')">Sociální sítě</a>
<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> <a href="#" class="flex-item" onclick="showContent('opensource')">Open Source</a>
<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> <a href="#" class="flex-item" onclick="showContent('contact')">Kontakt</a>
<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> </main>
<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> <div id="dynamic-content"></div>
<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>
<footer> <footer>
<p>Kontaktujte mě na email@example.com</p> <p>Kontaktujte mě na email@example.com</p>
</footer> </footer>
<script src="skripty.js"></script>
</body> </body>
</html> </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>';
}
}

101
styly.css
View File

@ -1,88 +1,43 @@
/* Základní nastavení písma a pozadí pro celou stránku */ body, html {
body { font-family: Arial, sans-serif;
font-family: Arial, sans-serif; /* Nastavení písma */ margin: 0;
line-height: 1.6; /* řádkování */ padding: 0;
color: #333; /* Barva textu */ text-align: center;
background-color: #f9f9f9; /* Barva pozadí */
padding: 20px; /* Vnitřní okraj pro celé tělo stránky */
} }
/* 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 */ /* Nastavení stylu pro všechny obrázky na stránce */
img { img {
display: block; /* Zobrazení jako blok pro možnost centrování */ display: block; /* Zobrazení jako blok pro možnost centrování */
margin-left: auto; /* Automatický levý okraj pro centrování */ margin-left: auto; /* Automatický levý okraj pro centrování */
margin-right: auto; /* Automatický pravý okraj pro centrování */ margin-right: auto; /* Automatický pravý okraj pro centrování */
width: 200px; /* Pevná šířka obrázku */ width: 150px; /* Pevná šířka obrázku */
border-radius: 80px; /* Velké zaoblení rohů */ 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 */ 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 */ .flex-container {
p { display: flex;
margin-top: 20px; /* Horní okraj pro odstavce */ justify-content: center;
margin-bottom: 20px; /* Dolní okraj pro odstavce */ gap: 10px;
}
section {
margin: 20px;
padding: 20px; 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 { .flex-item {
color: #333; width: 150px;
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; padding: 10px;
line-height: 1.4; background-color: #f4f4f4;
font-size: 14px;
background-color: #f9f9f9;
border: 1px solid #ccc;
border-radius: 5px; border-radius: 5px;
box-shadow: 2px 2px 5px rgba(0, 0, 0, 0.1); text-align: center;
text-align: center; /* Centrování textu */ 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;
} }