create home page php

2024-10-20 09:53:43 +02:00 · 2024-10-20 09:53:43 +02:00 · 69f561ff1a
commit 69f561ff1a
15 changed files with 729 additions and 0 deletions
--- a/assets/footer.php
+++ b/assets/footer.php
@ -0,0 +1,9 @@
+<footer>
+			Copyright &copy;
+			<a
+				href="https://git.archoslinux.cz/kankys"
+				target="_blank"
+				>Lukáš Kaňka</a
+			>
+			2024
+		</footer>
--- a/assets/fullStyle.css
+++ b/assets/fullStyle.css
@ -0,0 +1,152 @@
+* {
+    margin: 0;
+
+    padding: 0;
+
+    box-sizing: border-box;
+}
+
+body {
+    max-width: 1600px;
+    margin: 0 auto;
+    font-family: "Ubuntu", sans-serif;
+}
+
+/* EOS ( header) */
+
+header {
+    display: flex;
+    align-items: center;
+    background-color: #313131;
+    height: 70px;
+    flex-direction: row;
+    border-radius: 5px;
+    margin: 7px;
+}
+
+.logo {
+    flex-grow: 1;
+}
+
+.logo img {
+    width: 150px;
+    margin-left: 40px;
+}
+
+/* EOS - navigation */
+nav {
+    margin-right: 40px;
+}
+
+nav li {
+    display: inline-block;
+    list-style-type: none;
+    margin-right: 20px;
+}
+
+nav li a {
+    text-decoration: none;
+    color: #734f96;
+    /*border: 1px solid #734f96;*/
+}
+
+/* EOS - navigation icons */
+
+.menu-icon {
+    display: none;
+    margin-right: 30px;
+}
+
+.welcome {
+    /*background: url("image/background.webp");*/
+    min-height: calc(100vh - 70px);
+    background-size: cover;
+    /*background-position: center;*/
+    text-align: center;
+}
+
+h2 {
+    color: #734f96;
+    margin-top: 50px;
+    margin-bottom: 50px;
+}
+
+a {
+
+    color: #734f96;
+    margin-top: 50px;
+    margin-bottom: 50px;
+
+}
+
+h4 {
+    color: #734f96;
+    margin-top: 50px;
+    margin-bottom: 50px;
+}
+
+.text {
+    color: #734f96;
+    margin-top: 50px;
+    margin-bottom: 50px;
+}
+
+p {
+    margin: 10px;
+}
+
+.p {
+    text-align: center;
+}
+
+@media (max-width: 600px) {
+    header {
+        position: relative;
+    }
+
+    header nav {
+        position: absolute;
+        top: 70px;
+        background-color: #313131;
+        width: 100%;
+        display: none;
+    }
+
+    .menu-icon {
+        display: block;
+        color: var(--special-white);
+        font-size: 23px;
+    }
+
+    header nav li {
+        display: block !important;
+        text-align: center;
+        margin-top: 10px;
+        margin-bottom: 10px;
+    }
+}
+
+/*Code Box*/
+.code-box {
+    position: relative;
+    width: 500px;
+    height: auto;
+    border: 1px solid #734f96;
+    padding: 5px;
+    overflow: auto;
+    background-color: #734f96;
+    color: black;
+    margin: auto;
+    text-align: left;
+    border-radius: 7px;
+}
+
+#copy-button {
+    position: absolute;
+    top: 10px;
+    right: 10px;
+    cursor: pointer;
+    color: whitesmoke;
+    background-color: transparent;
+    border: 1px solid #734f96;
+}
--- a/assets/header.php
+++ b/assets/header.php
@ -0,0 +1,66 @@
+
+		<header>
+		<!-- EOS - logo () -->
+    <div class="logo">
+        <a href="../index.php">
+            <img alt="" src="img/EndeavourOS-logo.webp"/>
+        </a>
+    </div>
+			<!-- EOS - navigation -->
+			<nav>
+				<ul>
+								<li><a href="/index.php">Domů</a></li>
+					<li>
+						<a href="/wiki/index.php"
+							>Wiki</a
+						>
+					</li>
+					<li>
+						<a href="/novinky/index.php"
+							>Novinky</a
+						>
+					</li>
+					<li>
+						<a href="/clanky/index.php"
+							>Články</a
+						>
+					</li>
+					<li>
+						<a
+							href="https://forum.arch-linux.cz/"
+							target="_blank"
+							>Fórum</a
+						>
+					</li>
+					<li>
+						<a
+							href="https://t.me/eoscz"
+							target="_blank"
+							>Telegram</a
+						>
+					</li>
+					<li>
+						<a href="/o-nas/index.php"
+							>O nás</a
+						>
+					</li>
+					<li>
+						<a href="/rozcestnik/index.php"
+							>Rozcestník</a
+						>
+					</li>
+					<li>
+						<a href="/odkazy/index.php"
+							>Odkazy</a
+						>
+					</li>
+				</ul>
+			</nav>
+
+			<div class="menu-icon">
+				<!-- Ikona hamburger -->
+				<i class="fa-solid fa-bars"></i>
+				<!-- Ikona cross -->
+				<!-- <i class="fa-solid fa-xmark"></i> -->
+			</div>
+		</header>
--- a/assets/returnbutton.php
+++ b/assets/returnbutton.php
@ -0,0 +1,3 @@
+<button onclick="scrollToTop()" id="scrollToTopBtn" title="Go to top">
+            <i class="fas fa-arrow-up"></i>
+        </button>
--- a/assets/script.js
+++ b/assets/script.js
@ -0,0 +1,35 @@
+const menuIcon = document.querySelector(".menu-icon");
+const menuList = document.querySelector("nav");
+const hamburgerIcon = document.querySelector(".fa-solid");
+
+menuIcon.addEventListener("click", () => {
+    if (hamburgerIcon.classList[1] === "fa-bars") {
+        hamburgerIcon.classList.add("fa-xmark");
+        hamburgerIcon.classList.remove("fa-bars");
+        menuList.style.display = "block";
+    } else {
+        hamburgerIcon.classList.add("fa-bars");
+        hamburgerIcon.classList.remove("fa-xmark");
+        menuList.style.display = "none";
+    }
+});
+
+// Tlačítko go to top
+// Zobrazení tlačítka od rolovaní části stránky (víc logické než až na konci)
+window.onscroll = function () {
+    scrollFunction();
+};
+
+function scrollFunction() {
+    if (document.body.scrollTop > 20 || document.documentElement.scrollTop > 20) {
+        document.getElementById("scrollToTopBtn").style.display = "block";
+    } else {
+        document.getElementById("scrollToTopBtn").style.display = "none";
+    }
+}
+
+// Posunout nahoru, když uživatel klikne na tlačítko
+function scrollToTop() {
+    document.body.scrollTop = 0; // Pro Safari
+    document.documentElement.scrollTop = 0; // Pro ostatní prohlížeče
+}
--- a/assets/style.css
+++ b/assets/style.css
@ -0,0 +1,70 @@
+/* EOS - Welcome*/
+
+
+/* About sekce */
+
+.about-section {
+    margin: 45px 0;
+}
+
+.about-section-wrapper {
+    width: 65%;
+    margin: 0 auto;
+    display: flex;
+    gap: 20px;
+}
+
+.about-text {
+    flex: 1;
+}
+
+.about-img {
+    flex: 1;
+}
+
+img {
+    width: 100%;
+    height: 100%;
+    object-fit: cover;
+}
+
+@media (max-width: 768px) {
+    .about-section-wrapper {
+        flex-direction: column;
+        width: 90%;
+        margin: 0 auto;
+    }
+
+    .about-text {
+        text-align: left;
+    }
+
+    .about-img {
+        text-align: center;
+    }
+
+    .about-text-p {
+        padding-top: 15px;
+    }
+}
+
+footer {
+    text-align: center;
+    margin-top: 20px;
+    margin-bottom: 20px;
+}
+
+/* Go to go */
+#scrollToTopBtn {
+    display: none;
+    position: fixed;
+    bottom: 20px;
+    right: 20px;
+    /*butoon přes obsah*/
+    z-index: 99;
+    outline: none;
+    cursor: pointer;
+    padding: 15px;
+    border-radius: 50%;
+    background-color: transparent;
+}
--- a/img/EndeavourOS-logo.webp
+++ b/img/EndeavourOS-logo.webp
--- a/img/icons.png
+++ b/img/icons.png
--- a/img/slide-community-DEs.webp
+++ b/img/slide-community-DEs.webp
--- a/img/slide-discover.webp
+++ b/img/slide-discover.webp
--- a/img/slide-welcome-DEs.webp
+++ b/img/slide-welcome-DEs.webp
--- a/img/slide-welcome-app-1.webp
+++ b/img/slide-welcome-app-1.webp
--- a/img/slide-welcome-easy-install.webp
+++ b/img/slide-welcome-easy-install.webp
--- a/img/stars.webp
+++ b/img/stars.webp
--- a/index.php
+++ b/index.php
@ -0,0 +1,394 @@
+<!doctype html>
+<html lang="cs">
+	<head>
+		<meta charset="UTF-8" />
+		<meta
+			content="EndeavourOS svobodný operační systém...."
+			name="description"
+		/>
+		<meta content="EndeavourOS" name="keywords" />
+		<meta content="Kankys" name="author" />
+
+		<meta
+			content="width=device-width, initial-scale=1.0"
+			name="viewport"
+		/>
+		<link href="assets/style.css" rel="stylesheet" />
+		<link href="assets/fullStyle.css" rel="stylesheet" />
+		<link href="img/icons.png" rel="shortcut icon" />
+		<script
+			crossorigin="anonymous"
+			src="https://kit.fontawesome.com/0a43c6cd1f.js"
+		></script>
+		<!--icons dark, go to up-->
+		<link
+			href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.4/css/all.min.css"
+			rel="stylesheet"
+		/>
+
+		<!--ubuntu fonts-->
+		<style>
+			@import url("https://fonts.googleapis.com/css2?family=Ubuntu:ital,wght@0,300;0,400;0,500;0,700;1,300;1,400;1,500;1,700&display=swap");
+		</style>
+
+		<title>EndeavourOS</title>
+	</head>
+	<body>
+		<?php require "assets/header.php" ?>					
+		<main>
+			<section class="welcome">
+				<h2>
+					🇨🇿 Vítám Tě na webu České komunity
+					EndeavourOS! 🇨🇿
+				</h2>
+				<h4>
+					<a
+						class="text"
+						href="/clanky/5-let-endeavouros.php"
+						>Konec projektu Antergos,
+						začátek EndeavourOS a kde jsme
+						nyní, o 5 let později -
+						21.8.2024</a
+					>
+				</h4>
+
+				<p>
+					EndeavourOS je distribuce založená na
+					Arch Linuxu, ( Českou komunitu Arch
+					Linux najdeš na
+					<a
+						href="https://arch-linux.cz/"
+						target="_blank"
+						>Arch-LinuxCZ</a
+					>
+					) která poskytuje prostředí Arch Linuxu
+					bez potíží s jeho ruční instalací pro
+					systémy x86_64. Po instalaci máte k
+					dispozici lehké prostředí připravené k
+					prozkoumání s Vaším terminálem, spolu s
+					naší domácí aplikací Welcome App jako
+					výkonným průvodcem, který vám pomůže.
+					Brzy i v češtině.
+				</p>
+				<p>
+					Jsem Linuxový nadšenec Arch Linuxu a
+					EndeavourOS, za tímto účel vznikl tento
+					projekt s dovolením vývojářů
+					EndeavourOS. Pravidelně Vám jsem budu
+					přinášet novinky ze světa EndeavourOS, v
+					sekci Wiki najdete spousty tipů a návodů
+					pro EndeavourOS. Na sociálních sítí
+					<a
+						href="https://t.me/eoscz"
+						target="_blank"
+						>Telegram</a
+					>
+					najdete novinky z EndeavourOS CZ a na
+					<a
+						href="https://forum.arch-linux.cz/"
+						target="_blank"
+						>Fórum Arch-linux CZ</a
+					>
+					diskuzní fóra v češtině. Aktivně jsem v
+					kontaktu s vývojáři EndeavourOS a
+					pracujeme na překladu aplikace Welcome
+					do českého jazyka.
+				</p>
+				<p>
+					Web je stále ve vývoji tak se omlouvám
+					za chybějící obsah a jiné nedodělky, ale
+					pilně na projektu pracuji ve svém volném
+					čase.
+				</p>
+				<p>
+					Tento projekt by nikdy nevznikl bez
+					<a
+						href="https://arch-linux.cz/"
+						target="_blank"
+						>Arch-LinuxCZ</a
+					>
+					a jeho správci
+					<a
+						href="https://mastodon.arch-linux.cz/@archos"
+						target="_blank"
+						>Archosovi</a
+					>. Tím mu děkuji za trpělivost, rady a
+					také za technickou podporu tohoto webu.
+				</p>
+				<p>
+					Diskutovat v češtině o Endeavouros
+					můžete diskutovat na fóru
+					<a
+						href="https://forum.arch-linux.cz/"
+						target="_blank"
+						>Arch-linux</a
+					>. Najdeš tam sekci Endeavouros, můžeš
+					diskutovat nad články s tohoto webu nebo
+					tématy Endeavouros, Arch-linuxu a mnoho
+					dalšího.
+				</p>
+				<h2>
+					Minimální systémové požadavky pro
+					EndeavourOS
+				</h2>
+				<p>
+					🚀 2,5 GB RAM (offline instalace) a 4 GB
+					RAM (online instalace)
+				</p>
+				<p>
+					🚀 Dvoujádrový procesor (64 bitů,
+					x86-64, amd64)
+				</p>
+				<p>🚀 15 GB místa na pevném disku</p>
+				<p>
+					🚀 Instalační program stále podporuje
+					starší systémy Bios, ale doporučuje se
+					spouštět moderní systémy EFI (UEFI),
+					které nejsou ve starším ( CSM ) režimu
+				</p>
+				<h2>Stažení EndeavourOS</h2>
+				<p>
+					EndeavourOS doporučujeme stahovat z
+					oficiálních stránek projektu. Máte
+					možnost stahování z několika zrcadel,
+					stahovat EndeavourOS můžete pod tímto
+					<a
+						href="https://endeavouros.com/#Download"
+						target="_blank"
+						>odkazem</a
+					>.
+				</p>
+				<h2>Co můžete očekávat od EndeavourOS</h2>
+
+				<section class="about-section" id="about">
+					<div class="about-section-wrapper">
+						<div class="about-text">
+							<h2 class="h2-about">
+								Snadno
+								použitelný
+								instalační
+								program
+							</h2>
+							<p class="about-text-p">
+								Instalační
+								program
+								Calamares Vás
+								provede prvními
+								kroky instalace
+								systému s
+								možností offline
+								instalace KDE
+								Plasma nebo
+								online instalace
+								se spoustou
+								možností…
+							</p>
+						</div>
+						<div class="about-img">
+							<img
+								alt="#"
+								class="about-img content-container"
+								src="img/slide-welcome-easy-install.webp"
+							/>
+						</div>
+					</div>
+				</section>
+
+				<section class="about-section" id="about">
+					<div class="about-section-wrapper">
+						<div class="about-text">
+							<h2 class="h2-about">
+								Osm desktopových
+								prostředí a
+								jeden správce
+								oken
+							</h2>
+							<p class="about-text-p">
+								Online instalace
+								Vám umožňuje
+								vybrat si Xfce,
+								Plasma, Gnome,
+								Mate, Cinnamon,
+								Budgie, LxQt,
+								LxDe a i3-wm,
+								ale je toho víc…
+							</p>
+						</div>
+						<div class="about-img">
+							<img
+								alt="#"
+								class="about-img content-container"
+								src="img/slide-welcome-DEs.webp"
+							/>
+						</div>
+					</div>
+				</section>
+				<section class="about-section" id="about">
+					<div class="about-section-wrapper">
+						<div class="about-text">
+							<h2 class="h2-about">
+								Pět správců oken
+							</h2>
+							<p class="about-text-p">
+								Máme také
+								správce oken
+								Sway, Qtile,
+								BSPWM, Openbox a
+								Worm, všechny
+								připravené k
+								použití s
+								výběrem
+								přednastavení,
+								připravené pro
+								Váš skokový
+								start. Tyto WM
+								nejsou dostupné
+								prostřednictvím
+								ISO, ale lze je
+								nainstalovat
+								ručně. přejděte
+								na naši stránku
+								<a
+									href="https://github.com/EndeavourOS-Community-Editions"
+									target="_blank"
+									>GitHub</a
+								>
+								… Pro více
+								informací
+							</p>
+						</div>
+						<div class="about-img">
+							<img
+								alt="#"
+								class="about-img content-container"
+								src="img/slide-community-DEs.webp"
+							/>
+						</div>
+					</div>
+				</section>
+				<section class="about-section" id="about">
+					<div class="about-section-wrapper">
+						<div class="about-text">
+							<h2 class="h2-about">
+								Základní
+								instalace
+								připravená k
+								doladění
+							</h2>
+							<p class="about-text-p">
+								Bez ohledu na
+								to, jakou metodu
+								si vyberete, DE
+								nebo WM, všechny
+								mají jednu věc
+								společnou,
+								základní a téměř
+								prostou
+								instalaci se
+								skromným, ale
+								výkonným výběrem
+								(terminálově
+								ovládaných)
+								aplikací a
+								balíčků, abyste
+								mohli začít svůj
+								hluboký ponor do
+								Arch Linuxu.
+							</p>
+						</div>
+						<div class="about-img">
+							<img
+								alt="#"
+								class="about-img content-container"
+								src="img/stars.webp"
+							/>
+						</div>
+					</div>
+				</section>
+				<section class="about-section" id="about">
+					<div class="about-section-wrapper">
+						<div class="about-text">
+							<h2 class="h2-about">
+								Aplikace
+								Vítejte, naše
+								brána na Vaši
+								cestu
+							</h2>
+							<p class="about-text-p">
+								Naše uvítací
+								aplikace Vás
+								provede
+								informacemi
+								potřebnými pro
+								Vaše první kroky
+								do systému a
+								také vám
+								poskytne několik
+								užitečných
+								nástrojů, které
+								budete moci
+								používat i po
+								počátečním
+								nastavení…
+							</p>
+						</div>
+						<div class="about-img">
+							<img
+								alt="#"
+								class="about-img content-container"
+								src="img/slide-welcome-app-1.webp"
+							/>
+						</div>
+					</div>
+				</section>
+				<section class="about-section" id="about">
+					<div class="about-section-wrapper">
+						<div class="about-text">
+							<h2 class="h2-about">
+								Naše hvězdná
+								komunita je tu,
+								aby Vás posunula
+								vpřed
+							</h2>
+							<p class="about-text-p">
+								Discovery je
+								naše znalostní
+								báze, která Vám
+								pomůže dále
+								nastavit systém
+								podle vašich
+								potřeb, ale máme
+								také vřelou a
+								velmi užitečnou
+								komunitu na
+								našem fóru
+								Discord a
+								skupině
+								Telegram, která
+								odpovídá na vaše
+								otázky.
+							</p>
+						</div>
+						<div class="about-img">
+							<img
+								alt="#"
+								class="about-img content-container"
+								src="img/slide-discover.webp"
+							/>
+						</div>
+					</div>
+				</section>
+				<p class="p">
+					Na našem webu nesbíráme o Vás žádné
+					informace ani tu nemáme žádné sledovací
+					zařízení.
+				</p>
+			</section>
+		</main>
+		
+		<?php require "assets/returnbutton.php" ?>
+		<?php require "assets/footer.php" ?>
+
+		<script src="assets/script.js"></script>
+	</body>
+</html>