Zjednodušen index html, odstrabńěny projekty, přepracovány styly css a přidán JavaScript
This commit is contained in:
archos
parent
b224dc5add
commit
172bf31a50
49
index.html
49
index.html
@ -2,45 +2,36 @@
|
|||||||
<html lang="cs">
|
<html lang="cs">
|
||||||
<head>
|
<head>
|
||||||
<meta charset="UTF-8">
|
<meta charset="UTF-8">
|
||||||
<link rel="stylesheet" type="text/css" href="styly.css">
|
|
||||||
<title>Zdenek Kreml</title>
|
<title>Zdenek Kreml</title>
|
||||||
|
<link rel="stylesheet" type="text/css" href="styly.css">
|
||||||
|
<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
18
skripty.js
Normal 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
103
styly.css
@ -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;
|
padding: 10px;
|
||||||
}
|
background-color: #f4f4f4;
|
||||||
|
|
||||||
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;
|
|
||||||
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;
|
||||||
}
|
}
|
||||||
|
|||||||
Loading…
Reference in New Issue
Block a user