zumepro/libre-liberec-web
3
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Initial commit

Browse Source
This commit is contained in:
Michal Procházka
2025-04-08 12:06:32 +02:00
commit 66df99954e
18 changed files with 853 additions and 0 deletions
Download Patch File Download Diff File Expand all files Collapse all files

15
.htaccess Normal file
View File

@@ -0,0 +1,15 @@
RewriteEngine On
RewriteCond %{REQUEST_FILENAME} !-f
RewriteRule ^([^\.]+)$ $1.html [NC,L]
AddDefaultCharset utf-8
AddCharset utf-8 .html .css .js
DefaultLanguage cs-CZ
ErrorDocument 404 /~michal.prochazka/sp/404.html
Options +Includes
AddType text/html .html
AddOutputFilter INCLUDES .html

18
404.html Normal file
View File

@@ -0,0 +1,18 @@
<!DOCTYPE html>
<html lang="cs">
<head>
<!--#include virtual="components/head.html" -->
<title>Stránka nenalezena - Svobodný software Liberec</title>
</head>
<body>
<!--#include virtual="components/header.html" -->
<!--#include virtual="components/nav.html" -->
<main style="text-align: center">
<h1>Stránka nenalezena.</h1>
<p>Pokusili jste se načíst stránku, která na tomto serveru neexistuje.</p>
<p>Klikněte prosím na jeden z odkazů uvedených výše.</p>
</main>
<!--#include virtual="components/footer.html" -->
</body>
</html>

5
components/footer.html Normal file
View File

@@ -0,0 +1,5 @@
<footer>
<!--#set var="URL" value="https://${HTTP_HOST}${DOCUMENT_URI}"-->
<p>Tato webová stránka podléhá licenci GNU Free Documentation License v1.3.</p>
</footer>

8
components/head.html Normal file
View File

@@ -0,0 +1,8 @@
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<meta name="theme-color" content="darkred">
<link rel="icon" type="image/png" href="favicon.png">
<link href="icons.css" rel="stylesheet">
<link href="styles.css" rel="stylesheet">
<script src="js/theme.js"></script>

7
components/header.html Normal file
View File

@@ -0,0 +1,7 @@
<header>
<div class="header-title">Svobodný software Liberec</div>
<div class="header-subtitle">Richard Stallman na Technické univerzitě v Liberci</div>
<img src="data:," alt="Přepínač světlého a tmavého režimu" class="light-dark-switch" onclick="switch_theme();">
<img src="data:," alt="Přepínač širokého a úzkého rozvržení" class="layout-switch" onclick="switch_layout();">
</header>

9
components/nav.html Normal file
View File

@@ -0,0 +1,9 @@
<nav>
<ul>
<li><a href=".">Domovská stránka</a></li>
<li><a href="stallman">Richard Stallman</a></li>
<li><a href="free">Svobodný software</a></li>
<li><a href="javascript">JavaScript</a></li>
</ul>
</nav>

BIN
favicon.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 185 B

132
free.html Normal file
View File

@@ -0,0 +1,132 @@
<!DOCTYPE html>
<html lang="cs">
<head>
<!--#include virtual="components/head.html" -->
<title>Svobodný software - Svobodný software Liberec</title>
<meta name="description" content="Vysvětlení pojmu svobodný software.">
</head>
<body>
<!--#include virtual="components/header.html" -->
<!--#include virtual="components/nav.html" -->
<main>
<a id="contents"></a>
<h1>Obsah</h1>
<ul>
<li><a href="#contents">Obsah</a></li>
<li>
<a href="#freesoftware">Svobodný software</a>
<ul>
<li><a href="#definition">Co je to?</a></li>
<li><a href="#inception">Jak vznikl?</a></li>
<li>
<a href="#othermovements">Jak se liší od ostatních hnutí?</a>
<ul>
<li><a href="#freeware">Freeware</a></li>
<li><a href="#opensource">Open Source</a></li>
</ul>
</li>
</ul>
</li>
</ul>
<a id="freesoftware"></a>
<h1>Svobodný software</h1>
<p>
Tato stránka slouží pro jedince, kteří buď o svobodném softwaru
(anglicky "free software") slyší poprvé, nebo o něm již někdy slyšeli,
ale nejsou si úplně jisti, co tento pojem opravdu znamená.
</p>
<p>
Většina informací na této stránce pochází webových stránek
<a href="https://www.gnu.org/">operačního systému GNU</a>.
</p>
<a id="definition"></a>
<h2>Co je to?</h2>
<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aliquam in laoreet lectus.
Vestibulum hendrerit, arcu vel ullamcorper lacinia, nisi nibh mollis lacus,
a dapibus neque odio id risus. Quisque ultricies congue mi.
Proin eget nisl nec nisi aliquet interdum vitae quis metus.
Nunc id eros volutpat, hendrerit magna ut, vulputate dolor.
Duis ut ex et justo interdum aliquam. Phasellus ultrices, orci et facilisis sagittis,
ligula nulla gravida augue, nec maximus tortor tortor sit amet purus.
Quisque rhoncus commodo arcu, in condimentum lectus mollis ut.
Aenean pellentesque orci ac ex ullamcorper, at pharetra eros vestibulum.
</p>
<p>
Nullam eget ligula ac ante dapibus rhoncus. Aenean interdum, erat vel auctor congue,
metus elit gravida metus, et gravida dolor metus at nunc.
Aliquam auctor dolor at erat mollis, sit amet placerat massa commodo.
Fusce ultricies odio sed tortor interdum hendrerit.
Ut posuere lobortis dui, commodo placerat lacus pharetra eu.
Curabitur eu dolor eget nibh sagittis semper eu eget dolor.
Sed laoreet mi in viverra vulputate. Etiam posuere sem est, at malesuada enim auctor quis.
</p>
<a id="inception"></a>
<h2>Jak vznikl?</h2>
<p>
In tempor lacus nec odio ornare, vitae pretium ante faucibus.
Donec mattis justo quis condimentum accumsan. Phasellus lacinia elementum ultricies.
Morbi facilisis suscipit quam, eu porta sem consectetur in.
Vestibulum pretium pretium eros non blandit.
Nunc varius metus in felis facilisis pellentesque.
Cras placerat dolor nulla, sit amet venenatis lectus sagittis eu.
Duis tellus sem, porta eget faucibus at, efficitur eleifend libero.
Nunc eu felis urna. In dignissim lectus eget dui consequat fringilla.
Etiam sodales tincidunt finibus. Sed facilisis ex sed tellus posuere, a consequat magna malesuada.
</p>
<a id="othermovements"></a>
<h2>Jak se liší od ostatních hnutí?</h2>
<p>
Maecenas ut congue massa. Nullam finibus lorem ligula, ut faucibus diam hendrerit a.
Proin quis massa in ligula vulputate ultrices et ac neque. Donec mollis massa turpis.
Suspendisse potenti. In vel venenatis mi. Sed egestas nulla tortor, eu ornare nibh accumsan nec.
Donec egestas a justo eu ullamcorper. Vivamus feugiat lectus non justo vehicula viverra.
Phasellus eleifend ante sed felis sollicitudin scelerisque.
Proin sit amet leo in enim varius auctor. Mauris blandit rhoncus mauris.
</p>
<a id="freeware"></a>
<h3>Freeware</h3>
<p>
Sed ac lorem viverra, tempor libero id, ullamcorper turpis.
Donec dapibus diam risus, non rutrum mauris pharetra ut.
Vivamus lobortis in massa faucibus congue.
Orci varius natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus.
Aenean sed tempor justo. Phasellus volutpat massa quis eleifend interdum.
Donec non lobortis leo. Maecenas vel lacus ut risus pretium fringilla.
Aliquam fermentum ex elit, non sagittis dui vestibulum ut.
Sed ipsum tellus, dictum eu molestie quis, tempor vitae ipsum.
Pellentesque laoreet porttitor felis, sit amet fermentum ante aliquet sed.
</p>
<a id="opensource"></a>
<h3>Open Source</h3>
<p>
Nunc sodales dolor ut auctor porta. Proin rhoncus ultricies felis vel posuere.
In posuere velit vulputate, lobortis turpis pretium, porta nisi.
Vivamus elementum lobortis lacus nec lobortis.
Praesent lobortis dictum tortor, eget egestas nunc tempus at.
Curabitur rhoncus in dolor ut consectetur. Suspendisse aliquam aliquet magna ut ultrices.
Sed non magna sodales, rhoncus sapien vel, aliquam urna.
Quisque gravida est non diam mollis, et posuere sapien congue.
Quisque id nunc sed tortor hendrerit laoreet.
Sed tortor neque, porta ut laoreet in, mollis quis velit.
</p>
</main>
<!--#include virtual="components/footer.html" -->
</body>
</html>

13
icons.css Normal file
View File

@@ -0,0 +1,13 @@
:root {
--light-theme-switch-icon: url("data:image/svg+xml;utf8,<svg width='20' height='20' viewBox='0 0 20 20' version='1.1' id='svg1' xmlns='http://www.w3.org/2000/svg' xmlns:svg='http://www.w3.org/2000/svg'> <defs id='defs1' /> <g id='layer1'> <path id='path1' style='fill:%23ffff00;fill-opacity:1;stroke:%23808000;stroke-width:1.93183;stroke-linecap:round;stroke-linejoin:round;stroke-dasharray:none;stroke-opacity:1' d='M 13.23697,0.96583465 A 9.3801207,9.39062 0 0 1 13.913872,4.465394 9.3801207,9.39062 0 0 1 4.5342249,13.855541 9.3801207,9.39062 0 0 1 0.96583659,13.131355 9.3801207,9.39062 0 0 0 9.652417,19.034079 9.3801207,9.39062 0 0 0 19.034085,9.6439329 9.3801207,9.39062 0 0 0 13.23697,0.96583465 Z' /> </g> </svg>");
--dark-theme-switch-icon: url("data:image/svg+xml;utf8,<svg width='20' height='20' viewBox='0 0 20 20' version='1.1' id='svg1' xmlns='http://www.w3.org/2000/svg' xmlns:svg='http://www.w3.org/2000/svg'> <defs id='defs1' /> <g id='layer1'> <circle style='fill:%23ffff00;fill-opacity:1;stroke:%23808000;stroke-width:1.86627;stroke-dasharray:none;stroke-opacity:1' id='path1' cx='9.9999981' cy='9.9999981' r='9.0668631' /> </g> </svg>");
--light-narrow-layout-switch-icon: url("data:image/svg+xml;utf8,<svg width='20' height='20' viewBox='0 0 20 20' version='1.1' id='svg1' xmlns='http://www.w3.org/2000/svg' xmlns:svg='http://www.w3.org/2000/svg'> <defs id='defs1' /> <g id='layer1'> <path style='fill:%23ffff00;fill-opacity:1;stroke:%23000000;stroke-width:2;stroke-linecap:round;stroke-linejoin:round;stroke-dasharray:none;stroke-opacity:1' d='M 1,1 H 7' id='path8' /> <path style='fill:%23ffff00;fill-opacity:1;stroke:%23000000;stroke-width:2;stroke-linecap:round;stroke-linejoin:round;stroke-dasharray:none;stroke-opacity:1' d='m 13,1 h 6' id='path8-3' /> <path style='fill:%23ffff00;fill-opacity:1;stroke:%23000000;stroke-width:2;stroke-linecap:round;stroke-linejoin:round;stroke-dasharray:none;stroke-opacity:1' d='m 13,19 h 6' id='path8-3-2' /> <path style='fill:%23ffff00;fill-opacity:1;stroke:%23000000;stroke-width:2;stroke-linecap:round;stroke-linejoin:round;stroke-dasharray:none;stroke-opacity:1' d='M 1,19 H 7' id='path8-3-2-7' /> <path style='fill:%23ffff00;fill-opacity:1;stroke:%23000000;stroke-width:2;stroke-linecap:round;stroke-linejoin:round;stroke-dasharray:none;stroke-opacity:1' d='M 1,1 V 7' id='path9' /> <path style='fill:%23ffff00;fill-opacity:1;stroke:%23000000;stroke-width:2;stroke-linecap:round;stroke-linejoin:round;stroke-dasharray:none;stroke-opacity:1' d='M 19,1 V 7' id='path9-9' /> <path style='fill:%23ffff00;fill-opacity:1;stroke:%23000000;stroke-width:2;stroke-linecap:round;stroke-linejoin:round;stroke-dasharray:none;stroke-opacity:1' d='m 19,13 v 6' id='path9-9-4' /> <path style='fill:%23ffff00;fill-opacity:1;stroke:%23000000;stroke-width:2;stroke-linecap:round;stroke-linejoin:round;stroke-dasharray:none;stroke-opacity:1' d='m 1,13 v 6' id='path9-9-4-6' /> <path style='fill:%23ffff00;fill-opacity:1;stroke:%23000000;stroke-width:2;stroke-linecap:round;stroke-linejoin:round;stroke-dasharray:none;stroke-opacity:1' d='M 1,19 7,13' id='path6-2' /> <path style='fill:%23ffff00;fill-opacity:1;stroke:%23000000;stroke-width:2;stroke-linecap:round;stroke-linejoin:round;stroke-dasharray:none;stroke-opacity:1' d='M 13,7 19,1' id='path6-2-3' /> <path style='fill:%23ffff00;fill-opacity:1;stroke:%23000000;stroke-width:2;stroke-linecap:round;stroke-linejoin:round;stroke-dasharray:none;stroke-opacity:1' d='M 1,1 7,7' id='path7' /> <path style='fill:%23ffff00;fill-opacity:1;stroke:%23000000;stroke-width:2;stroke-linecap:round;stroke-linejoin:round;stroke-dasharray:none;stroke-opacity:1' d='m 13,13 6,6' id='path10' /> </g> </svg>");
--light-wide-layout-switch-icon: url("data:image/svg+xml;utf8,<svg width='20' height='20' viewBox='0 0 20 20' version='1.1' id='svg1' xmlns='http://www.w3.org/2000/svg' xmlns:svg='http://www.w3.org/2000/svg'> <defs id='defs1' /> <g id='layer1'> <path style='fill:%23ffff00;fill-opacity:1;stroke:%23000000;stroke-width:2;stroke-linecap:round;stroke-linejoin:round;stroke-dasharray:none;stroke-opacity:1' d='M 1,19 7,13' id='path6-2' /> <path style='fill:%23ffff00;fill-opacity:1;stroke:%23000000;stroke-width:2;stroke-linecap:round;stroke-linejoin:round;stroke-dasharray:none;stroke-opacity:1' d='M 13,7 19,1' id='path6-2-3' /> <path style='fill:%23ffff00;fill-opacity:1;stroke:%23000000;stroke-width:2;stroke-linecap:round;stroke-linejoin:round;stroke-dasharray:none;stroke-opacity:1' d='M 1,1 7,7' id='path7' /> <path style='fill:%23ffff00;fill-opacity:1;stroke:%23000000;stroke-width:2;stroke-linecap:round;stroke-linejoin:round;stroke-dasharray:none;stroke-opacity:1' d='m 13,13 6,6' id='path7-1' /> <path style='fill:%23ffff00;fill-opacity:1;stroke:%23000000;stroke-width:2;stroke-linecap:round;stroke-linejoin:round;stroke-dasharray:none;stroke-opacity:1' d='M 1,7 H 7' id='path8' /> <path style='fill:%23ffff00;fill-opacity:1;stroke:%23000000;stroke-width:2;stroke-linecap:round;stroke-linejoin:round;stroke-dasharray:none;stroke-opacity:1' d='m 13,7 h 6' id='path8-3' /> <path style='fill:%23ffff00;fill-opacity:1;stroke:%23000000;stroke-width:2;stroke-linecap:round;stroke-linejoin:round;stroke-dasharray:none;stroke-opacity:1' d='m 13,13 h 6' id='path8-3-2' /> <path style='fill:%23ffff00;fill-opacity:1;stroke:%23000000;stroke-width:2;stroke-linecap:round;stroke-linejoin:round;stroke-dasharray:none;stroke-opacity:1' d='M 1,13 H 7' id='path8-3-2-7' /> <path style='fill:%23ffff00;fill-opacity:1;stroke:%23000000;stroke-width:2;stroke-linecap:round;stroke-linejoin:round;stroke-dasharray:none;stroke-opacity:1' d='M 7,1 V 7' id='path9' /> <path style='fill:%23ffff00;fill-opacity:1;stroke:%23000000;stroke-width:2;stroke-linecap:round;stroke-linejoin:round;stroke-dasharray:none;stroke-opacity:1' d='M 13,1 V 7' id='path9-9' /> <path style='fill:%23ffff00;fill-opacity:1;stroke:%23000000;stroke-width:2;stroke-linecap:round;stroke-linejoin:round;stroke-dasharray:none;stroke-opacity:1' d='m 13,13 v 6' id='path9-9-4' /> <path style='fill:%23ffff00;fill-opacity:1;stroke:%23000000;stroke-width:2;stroke-linecap:round;stroke-linejoin:round;stroke-dasharray:none;stroke-opacity:1' d='m 7,13 v 6' id='path9-9-4-6' /> <path style='fill:%23ffff00;fill-opacity:1;stroke:%23000000;stroke-width:2;stroke-linecap:round;stroke-linejoin:round;stroke-dasharray:none;stroke-opacity:1' d='m 13,13 6,6' id='path10' /> </g> </svg>");
--dark-narrow-layout-switch-icon: url("data:image/svg+xml;utf8,<svg width='20' height='20' viewBox='0 0 20 20' version='1.1' id='svg1' xmlns='http://www.w3.org/2000/svg' xmlns:svg='http://www.w3.org/2000/svg'> <defs id='defs1' /> <g id='layer1'> <path style='fill:%23ffff00;fill-opacity:1;stroke:%23ffffff;stroke-width:2;stroke-linecap:round;stroke-linejoin:round;stroke-dasharray:none;stroke-opacity:1' d='M 1,1 H 7' id='path8' /> <path style='fill:%23ffff00;fill-opacity:1;stroke:%23ffffff;stroke-width:2;stroke-linecap:round;stroke-linejoin:round;stroke-dasharray:none;stroke-opacity:1' d='m 13,1 h 6' id='path8-3' /> <path style='fill:%23ffff00;fill-opacity:1;stroke:%23ffffff;stroke-width:2;stroke-linecap:round;stroke-linejoin:round;stroke-dasharray:none;stroke-opacity:1' d='m 13,19 h 6' id='path8-3-2' /> <path style='fill:%23ffff00;fill-opacity:1;stroke:%23ffffff;stroke-width:2;stroke-linecap:round;stroke-linejoin:round;stroke-dasharray:none;stroke-opacity:1' d='M 1,19 H 7' id='path8-3-2-7' /> <path style='fill:%23ffff00;fill-opacity:1;stroke:%23ffffff;stroke-width:2;stroke-linecap:round;stroke-linejoin:round;stroke-dasharray:none;stroke-opacity:1' d='M 1,1 V 7' id='path9' /> <path style='fill:%23ffff00;fill-opacity:1;stroke:%23ffffff;stroke-width:2;stroke-linecap:round;stroke-linejoin:round;stroke-dasharray:none;stroke-opacity:1' d='M 19,1 V 7' id='path9-9' /> <path style='fill:%23ffff00;fill-opacity:1;stroke:%23ffffff;stroke-width:2;stroke-linecap:round;stroke-linejoin:round;stroke-dasharray:none;stroke-opacity:1' d='m 19,13 v 6' id='path9-9-4' /> <path style='fill:%23ffff00;fill-opacity:1;stroke:%23ffffff;stroke-width:2;stroke-linecap:round;stroke-linejoin:round;stroke-dasharray:none;stroke-opacity:1' d='m 1,13 v 6' id='path9-9-4-6' /> <path style='fill:%23ffff00;fill-opacity:1;stroke:%23ffffff;stroke-width:2;stroke-linecap:round;stroke-linejoin:round;stroke-dasharray:none;stroke-opacity:1' d='M 1,19 7,13' id='path6-2' /> <path style='fill:%23ffff00;fill-opacity:1;stroke:%23ffffff;stroke-width:2;stroke-linecap:round;stroke-linejoin:round;stroke-dasharray:none;stroke-opacity:1' d='M 13,7 19,1' id='path6-2-3' /> <path style='fill:%23ffff00;fill-opacity:1;stroke:%23ffffff;stroke-width:2;stroke-linecap:round;stroke-linejoin:round;stroke-dasharray:none;stroke-opacity:1' d='M 1,1 7,7' id='path7' /> <path style='fill:%23ffff00;fill-opacity:1;stroke:%23ffffff;stroke-width:2;stroke-linecap:round;stroke-linejoin:round;stroke-dasharray:none;stroke-opacity:1' d='m 13,13 6,6' id='path10' /> </g> </svg>");
--dark-wide-layout-switch-icon: url("data:image/svg+xml;utf8,<svg width='20' height='20' viewBox='0 0 20 20' version='1.1' id='svg1' xmlns='http://www.w3.org/2000/svg' xmlns:svg='http://www.w3.org/2000/svg'> <defs id='defs1' /> <g id='layer1'> <path style='fill:%23ffff00;fill-opacity:1;stroke:%23ffffff;stroke-width:2;stroke-linecap:round;stroke-linejoin:round;stroke-dasharray:none;stroke-opacity:1' d='M 1,19 7,13' id='path6-2' /> <path style='fill:%23ffff00;fill-opacity:1;stroke:%23ffffff;stroke-width:2;stroke-linecap:round;stroke-linejoin:round;stroke-dasharray:none;stroke-opacity:1' d='M 13,7 19,1' id='path6-2-3' /> <path style='fill:%23ffff00;fill-opacity:1;stroke:%23ffffff;stroke-width:2;stroke-linecap:round;stroke-linejoin:round;stroke-dasharray:none;stroke-opacity:1' d='M 1,1 7,7' id='path7' /> <path style='fill:%23ffff00;fill-opacity:1;stroke:%23ffffff;stroke-width:2;stroke-linecap:round;stroke-linejoin:round;stroke-dasharray:none;stroke-opacity:1' d='m 13,13 6,6' id='path7-1' /> <path style='fill:%23ffff00;fill-opacity:1;stroke:%23ffffff;stroke-width:2;stroke-linecap:round;stroke-linejoin:round;stroke-dasharray:none;stroke-opacity:1' d='M 1,7 H 7' id='path8' /> <path style='fill:%23ffff00;fill-opacity:1;stroke:%23ffffff;stroke-width:2;stroke-linecap:round;stroke-linejoin:round;stroke-dasharray:none;stroke-opacity:1' d='m 13,7 h 6' id='path8-3' /> <path style='fill:%23ffff00;fill-opacity:1;stroke:%23ffffff;stroke-width:2;stroke-linecap:round;stroke-linejoin:round;stroke-dasharray:none;stroke-opacity:1' d='m 13,13 h 6' id='path8-3-2' /> <path style='fill:%23ffff00;fill-opacity:1;stroke:%23ffffff;stroke-width:2;stroke-linecap:round;stroke-linejoin:round;stroke-dasharray:none;stroke-opacity:1' d='M 1,13 H 7' id='path8-3-2-7' /> <path style='fill:%23ffff00;fill-opacity:1;stroke:%23ffffff;stroke-width:2;stroke-linecap:round;stroke-linejoin:round;stroke-dasharray:none;stroke-opacity:1' d='M 7,1 V 7' id='path9' /> <path style='fill:%23ffff00;fill-opacity:1;stroke:%23ffffff;stroke-width:2;stroke-linecap:round;stroke-linejoin:round;stroke-dasharray:none;stroke-opacity:1' d='M 13,1 V 7' id='path9-9' /> <path style='fill:%23ffff00;fill-opacity:1;stroke:%23ffffff;stroke-width:2;stroke-linecap:round;stroke-linejoin:round;stroke-dasharray:none;stroke-opacity:1' d='m 13,13 v 6' id='path9-9-4' /> <path style='fill:%23ffff00;fill-opacity:1;stroke:%23ffffff;stroke-width:2;stroke-linecap:round;stroke-linejoin:round;stroke-dasharray:none;stroke-opacity:1' d='m 7,13 v 6' id='path9-9-4-6' /> <path style='fill:%23ffff00;fill-opacity:1;stroke:%23ffffff;stroke-width:2;stroke-linecap:round;stroke-linejoin:round;stroke-dasharray:none;stroke-opacity:1' d='m 13,13 6,6' id='path10' /> </g> </svg>");
}

BIN
images/stallman.jpg Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 46 KiB

BIN
images/stallman_2024.jpg Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 87 KiB

49
index.html Normal file
View File

@@ -0,0 +1,49 @@
<!DOCTYPE html>
<html lang="cs">
<head>
<!--#include virtual="components/head.html" -->
<title>Svobodný software Liberec</title>
<meta name="description" content="Richard Stallman na Technické univerzitě v Liberci.">
</head>
<body>
<!--#include virtual="components/header.html" -->
<!--#include virtual="components/nav.html" -->
<main>
<h1>Richard Stallman o svobodném softwaru</h1>
<div class="img-text-container">
<div class="img-text">
<div class="countdown">--:--:--:--</div>
</div>
<a href="https://commons.wikimedia.org/wiki/File:Richard_Stallman_Bologna_2024_abc23.jpg">
<figure>
<img class="countdown-bg" src="images/stallman_2024.jpg" alt="Pan Stallman v Itálii">
<figcaption>Snímek z přednášky pana Stallmana z roku 2024</figcaption>
</figure>
</a>
</div>
<p>
Akce se bude konat <b>7. května od 16:30 do 19:30</b> v aule budovy G na Technické univerzitě v Liberci.
</p>
<p>
Hlavní částí akce bude přednáška pana Richarda Stallmana týkající se svobodného softwaru &ndash;
hnutí, které sám pan Stallman v roce 1983 založil.
Zaměří se na nebezpečí neustálé rozšiřování nesvobodného softwaru v naší digitální společnosti,
jak nás jako uživatele takový software omezuje a jak proti němu můžeme pomocí svobodného softwaru bojovat.
</p>
<p>
Tato akce je organizována Fakultou mechatroniky, informatiky a mezioborových studií
Technické univerzity v Liberci. Jako většina přednášek pana Stallmana je i tato akce
určená pro širokou veřejnost. Bude se vybírat pouze dobrovolné vstupné,
po přednášce bude rovněž možné zakoupit předměty s tematikou operačního systému GNU
a Free Software Foundation.
</p>
</main>
<script src="js/countdown.js"></script>
<!--#include virtual="components/footer.html" -->
</body>
</html>

57
javascript.html Normal file
View File

@@ -0,0 +1,57 @@
<!DOCTYPE html>
<html lang="cs">
<head>
<!--#include virtual="components/head.html" -->
<title>JavaScript - Svobodný software Liberec</title>
<meta name="description" content="Vysvětlení využití JavaScriptu na této stránce.">
</head>
<body>
<!--#include virtual="components/header.html" -->
<!--#include virtual="components/nav.html" -->
<main>
<h1>Použitý JavaScript na tomto webu</h1>
<p>
Pro tvorbu tohoto webu jsme použili stopové množství JavaScriptu.
</p>
<p>
Tato stránka Vám zajišťuje, že návštěva tohoto webu nenačítá žádný nesvobodný software
(tzn. tento web načtete i s rozšířením LibreJS).
</p>
<p>Zkontrolujte si prosím níže uvedené skripty a jejich licence.</p>
<table>
<caption>Seznam klientských skriptů</caption>
<thead>
<tr>
<th rowspan=2>Skript</th>
<th colspan=2>Popis skriptu</th>
</tr>
<tr>
<th>Funkce</th>
<th>Licence</th>
</tr>
</thead>
<tbody>
<tr>
<td><a href="js/countdown.js">countdown.js</a></td>
<td>Odpočet do začátku akce.</td>
<td><a href="https://www.gnu.org/licenses/gpl-3.0.en.html">GNU GPL v3</a></td>
</tr>
<tr>
<td><a href="js/lang.js">lang.js</a></td>
<td>Přepínání jazyka vybraných prvků stránky.</td>
<td><a href="https://www.gnu.org/licenses/gpl-3.0.en.html">GNU GPL v3</a></td>
</tr>
<tr>
<td><a href="js/theme.js">theme.js</a></td>
<td>Přepínání mezi světlým a tmavým režimem.</td>
<td><a href="https://www.gnu.org/licenses/gpl-3.0.en.html">GNU GPL v3</a></td>
</tr>
</tbody>
</table>
</main>
<!--#include virtual="components/footer.html" -->
</body>
</html>

33
js/countdown.js Normal file
View File

@@ -0,0 +1,33 @@
// @license magnet:?xt=urn:btih:1f739d935676111cfff4b4693e3816e664797050&dn=gpl-3.0.txt GPL-v3-or-Later
const target = new Date("May 7, 2025 16:30:00 GMT+0100");
function update_time() {
let countdown = document.querySelector(".countdown");
const now = new Date();
if(now >= target) {
countdown.innerHTML = "Akce již proběhla.<br>Děkujeme všem za návštěvu.";
return;
}
const dur = Math.floor((target - now) / 1000);
const day = Math.floor(dur / 86400).toFixed(0).padStart(2, "0");
const hour = Math.floor((dur / 3600) % 24).toFixed(0).padStart(2, "0");
const min = Math.floor((dur / 60) % 60).toFixed(0).padStart(2, "0");
const sec = Math.floor(dur % 60).toFixed(0).padStart(2, "0");
//const targetdate = `${target.getDate()}. ${target.getMonth()+1}. ${target.getFullYear()}`
//const targettime = `${target.getHours()}:${target.getMinutes()}`
//countdown.innerHTML = `${targetdate} v ${targettime}<br><br>${day}:${hour}:${min}:${sec}`;
countdown.innerHTML = `${day}:${hour}:${min}:${sec}`;
}
update_time();
setInterval(update_time, 1000);
// @license-end

17
js/lang.js Normal file
View File

@@ -0,0 +1,17 @@
// @license magnet:?xt=urn:btih:1f739d935676111cfff4b4693e3816e664797050&dn=gpl-3.0.txt GPL-v3-or-Later
function change_lang(base) {
let cz = document.querySelector(base + "_cz");
let en = document.querySelector(base + "_en");
if(cz.style.display == "none") {
cz.style.display = "";
en.style.display = "none";
} else {
cz.style.display = "none";
en.style.display = "";
}
}
// @license-end

34
js/theme.js Normal file
View File

@@ -0,0 +1,34 @@
// @license magnet:?xt=urn:btih:1f739d935676111cfff4b4693e3816e664797050&dn=gpl-3.0.txt GPL-v3-or-Later
function switch_theme() {
let el = document.documentElement;
if(el.getAttribute("data-color-scheme") === "invert") {
el.setAttribute("data-color-scheme", "normal");
localStorage.setItem("color-scheme", "normal");
} else {
el.setAttribute("data-color-scheme", "invert");
localStorage.setItem("color-scheme", "invert");
}
}
function switch_layout() {
let el = document.documentElement;
if(el.getAttribute("data-layout") === "wide") {
el.setAttribute("data-layout", "normal");
localStorage.setItem("layout", "normal");
} else {
el.setAttribute("data-layout", "wide");
localStorage.setItem("layout", "wide");
}
}
if(localStorage.getItem("color-scheme") === "invert") {
switch_theme();
}
if(localStorage.getItem("layout") === "wide") {
switch_layout();
}
// @license-end

89
stallman.html Normal file
View File

@@ -0,0 +1,89 @@
<!DOCTYPE html>
<html lang="cs">
<head>
<!--#include virtual="components/head.html" -->
<title>Richard Stallman - Svobodný software Liberec</title>
<meta name="description" content="Krátký životopis pana Stallmana.">
<script src="js/lang.js"></script>
</head>
<body>
<!--#include virtual="components/header.html" -->
<!--#include virtual="components/nav.html" -->
<main>
<p>
Tato stránka obsahuje překlad textu v angličtině,
který nám poskytl sám pan Stallman.
</p>
<p>
<a href="javascript:change_lang('#stallman_bio');">Kliknutím zde</a>
si zobrazíte původní znění textu (či znovu překlad po opakovaném kliknutí).
</p>
<h1>Kdo je Richard Stallman?</h1>
<a href="https://commons.wikimedia.org/wiki/File:Richard_Stallman_Bologna_2024_abc1.jpg">
<figure class="aside">
<img src="images/stallman.jpg" alt="Richard Stallman">
<figcaption>Richard Stallman, 2024</figcaption>
</figure>
</a>
<div id="stallman_bio_cz">
<p>
Dr. Richard Stallman v roce 1983 založil hnutí svobodného softwaru
a následující rok započal vývoj operačního systému GNU
(vizte <a href="https://www.gnu.org">www.gnu.org</a>).
GNU je svobodný software, každý má možnost ho množit
a šířit dál, bez změn nebo i se změnami.
GNU/Linux (operační systém GNU s jádrem <a href="https://kernel.org/">Linux</a>)
se dnes využívá na desítkách milionů osobních počítačů.
</p>
<p>
Stallmanovi byla udělena <i>Cena Grace Hopperové</i> a <i>Cena Softwarových Systémů</i>
neziskovou organizací Association for Computing Machinery,
<i>Cena za sociální/ekonomické zlepšení</i> organizací Takeda Foundation a
<i>Cena Electronic Frontier Foundation</i> a mnoho čestných doktorátů.
Stallman je členem programu <i>MacArthur Fellowship</i>
a je členem <i><a href="https://www.internethalloffame.org/">Síně slávy Internetu</a></i>.
</p>
<p>
Dr. Richard Stallman<br>
Zakladatel <a href="https://www.fsf.org/">Free Software Foundation</a><br>
Zakladatel a vedoucí vývoje <a href="https://www.gnu.org/">operačního systému GNU</a>
</p>
</div>
<div id="stallman_bio_en" style="display: none">
<p>
Dr. Richard Stallman launched the free software movement in 1983 and
started the development of the GNU operating system
(see <a href="https://www.gnu.org">www.gnu.org</a>) in 1984.
GNU is free software: everyone has the freedom to copy it
and redistribute it, with or without changes. The GNU/Linux system,
basically the GNU operating system with <a href="https://kernel.org/">Linux</a>
as the kernel, is used on tens of millions of computers today.
</p>
<p>
Stallman has received the ACM Grace
Hopper Award and the ACM Software and Systems Award, a MacArthur
Foundation fellowship, the Electronic Frontier Foundation's Pioneer
Award, and the the Takeda Award for Social/Economic Betterment, as
well as many doctorates honoris causa, and has been inducted into the
<a href="https://www.internethalloffame.org/">Internet Hall of Fame</a>.
</p>
<p>
Dr Richard Stallman<br>
Founder of the <a href="https://www.fsf.org/">Free Software Foundation</a><br>
Founder and development leader of the <a href="https://www.gnu.org/">GNU operating system</a>
</p>
</div>
</main>
<!--#include virtual="components/footer.html" -->
</body>
</html>

367
styles.css Normal file
View File

@@ -0,0 +1,367 @@
:root {
--light-fg-color: black;
--light-bg-color: white;
--light-outer-shadow-color: #BBBBBB;
--light-outer-bg-color: #E4E4E4;
--light-alt-bg-color: #FFFFD0;
--light-field-hover-bg-color: #F0F0F0;
--light-field-active-bg-color: #E0E0E0;
--light-link-idle-color: blue;
--dark-fg-color: white;
--dark-bg-color: #202020;
--dark-outer-shadow-color: #000000;
--dark-outer-bg-color: black;
--dark-alt-bg-color: #101010;
--dark-field-hover-bg-color: #000000;
--dark-field-active-bg-color: #404040;
--dark-link-idle-color: lightblue;
}
:root {
color-scheme: light dark;
--nav-fg-color: white;
--nav-bg-color: darkred;
--nav-bg-color-selected: #C00000;
--sep-color: gray;
}
/* Vím, že by se dalo použít light-dark(...). Ale to funguje jen v nejnovějších prohlížečích. */
@media (prefers-color-scheme: light) {
:root {
--fg-color: var(--light-fg-color);
--bg-color: var(--light-bg-color);
--outer-shadow-color: var(--light-outer-shadow-color);
--outer-bg-color: var(--light-outer-bg-color);
--alt-bg-color: var(--light-alt-bg-color);
--field-hover-bg-color: var(--light-field-hover-bg-color);
--field-active-bg-color: var(--light-field-active-bg-color);
--link-idle-color: var(--light-link-idle-color);
--theme-switch-icon: var(--light-theme-switch-icon);
--narrow-layout-switch-icon: var(--light-narrow-layout-switch-icon);
--wide-layout-switch-icon: var(--light-wide-layout-switch-icon);
--fg-gnu-head: var(--dark-gnu-head);
--bg-gnu-head: var(--light-gnu-head);
}
[data-color-scheme="invert"] {
--fg-color: var(--dark-fg-color);
--bg-color: var(--dark-bg-color);
--outer-shadow-color: var(--dark-outer-shadow-color);
--outer-bg-color: var(--dark-outer-bg-color);
--alt-bg-color: var(--dark-alt-bg-color);
--field-hover-bg-color: var(--dark-field-hover-bg-color);
--field-active-bg-color: var(--dark-field-active-bg-color);
--link-idle-color: var(--dark-link-idle-color);
--theme-switch-icon: var(--dark-theme-switch-icon);
--narrow-layout-switch-icon: var(--dark-narrow-layout-switch-icon);
--wide-layout-switch-icon: var(--dark-wide-layout-switch-icon);
--fg-gnu-head: var(--light-gnu-head);
--bg-gnu-head: var(--dark-gnu-head);
}
}
@media (prefers-color-scheme: dark) {
:root {
--fg-color: var(--dark-fg-color);
--bg-color: var(--dark-bg-color);
--outer-shadow-color: var(--dark-outer-shadow-color);
--outer-bg-color: var(--dark-outer-bg-color);
--alt-bg-color: var(--dark-alt-bg-color);
--field-hover-bg-color: var(--dark-field-hover-bg-color);
--field-active-bg-color: var(--dark-field-active-bg-color);
--link-idle-color: var(--dark-link-idle-color);
--theme-switch-icon: var(--dark-theme-switch-icon);
--narrow-layout-switch-icon: var(--dark-narrow-layout-switch-icon);
--wide-layout-switch-icon: var(--dark-wide-layout-switch-icon);
--fg-gnu-head: var(--light-gnu-head);
--bg-gnu-head: var(--dark-gnu-head);
}
[data-color-scheme="invert"] {
--fg-color: var(--light-fg-color);
--bg-color: var(--light-bg-color);
--outer-shadow-color: var(--light-outer-shadow-color);
--outer-bg-color: var(--light-outer-bg-color);
--alt-bg-color: var(--light-alt-bg-color);
--field-hover-bg-color: var(--light-field-hover-bg-color);
--field-active-bg-color: var(--light-field-active-bg-color);
--link-idle-color: var(--light-link-idle-color);
--theme-switch-icon: var(--light-theme-switch-icon);
--narrow-layout-switch-icon: var(--light-narrow-layout-switch-icon);
--wide-layout-switch-icon: var(--light-wide-layout-switch-icon);
--fg-gnu-head: var(--dark-gnu-head);
--bg-gnu-head: var(--light-gnu-head);
}
}
:root {
--layout-switch-icon: var(--narrow-layout-switch-icon);
}
[data-layout="wide"] {
--layout-switch-icon: var(--wide-layout-switch-icon)
}
html {
margin: 0;
background-color: var(--outer-bg-color);
min-height: calc(100% - 32px);
}
body {
font-family: "Noto Sans", sans-serif; /* Svobodný font. */
font-size: 16px;
display: flex;
flex-direction: column;
color: var(--fg-color);
background-color: var(--bg-color);
}
header {
padding: calc(16px - 8px) 16px;
position: relative;
background-color: var(--bg-color);
}
.light-dark-switch {
position: absolute;
top: 16px;
right: 16px;
cursor: pointer;
content: var(--theme-switch-icon);
width: 20px;
}
.layout-switch {
position: absolute;
top: 48px;
right: 16px;
cursor: pointer;
content: var(--layout-switch-icon);
width: 20px;
}
a {
color: var(--link-idle-color);
}
header * {
margin: 8px 0;
}
.header-title {
font-size: 32px;
}
.header-subtitle {
font-size: 24px;
}
.full-width {
width: 100%;
}
.img-text-container {
position: relative;
}
.img-text {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
display: flex;
justify-content: center;
align-items: center;
opacity: 100%;
color: var(--fg-color);
z-index: 1;
pointer-events: none;
}
.countdown {
font-family: monospace;
font-weight: bold;
font-size: 48px;
text-align: center;
}
.countdown-bg {
opacity: 40%;
z-index: 0;
}
nav {
background-color: var(--nav-bg-color);
color: var(--nav-fg-color);
user-select: none;
}
main {
flex-grow: 1;
padding: 16px;
}
.gnu-head {
content: var(--fg-gnu-head);
}
footer {
border-top: 2px solid var(--sep-color);
padding: calc(16px - 8px) 16px;
text-align: center;
}
footer>* {
margin: 8px 0;
}
h1 {
font-size: 32px;
}
h2 {
font-size: 26px;
}
h3 {
font-size: 20px;
}
table {
border-spacing: 0;
border: 1px solid var(--sep-color);
}
th, td {
background-color: var(--alt-bg-color);
border: 1px solid var(--sep-color);
padding: 4px;
}
ul li {
margin: 8px 0;
}
ol li {
margin: 8px 0;
}
@media (width >= 500px) {
figure.aside {
width: 200px;
margin: 0 0 16px 16px;
float: right;
}
/* Jinak to neudělá nic. */
}
figure img,svg,inserted-svg {
width: 100%;
height: auto;
}
figcaption {
font-style: italic;
}
nav ul {
width: 100%;
height: 100%;
display: flex;
flex-direction: row;
margin: 0;
padding: 0;
list-style-type: none;
}
@media (width < 750px) {
nav ul {
flex-direction: column;
}
}
nav ul li {
flex-grow: 1;
flex-basis: 0;
display: flex;
margin: 0;
}
nav ul li a {
display: flex;
flex-direction: column;
justify-content: center;
flex-grow: 1;
padding: 8px 16px;
text-align: center;
text-decoration: none;
color: var(--nav-fg-color);
transition: background-color .3s;
}
nav ul li a:hover {
background-color: var(--nav-bg-color-selected);
color: var(--nav-fg-color);
}
nav ul li a:active {
color: var(--nav-fg-color);
}
nav ul li a:visited {
color: var(--nav-fg-color);
}
@media (width >= 900px) {
html:not([data-layout="wide"]) {
padding: 16px 0;
}
:not([data-layout="wide"]) body {
margin: 0 auto;
max-width: 800px;
box-shadow: 0 0 5px 5px var(--outer-shadow-color);
}
[data-layout="wide"] body {
margin: 0;
}
}
@media (width < 900px) {
body {
margin: 0;
}
.img-text {
position: relative;
margin-bottom: 32px;
}
.layout-switch {
display: none;
}
}
@media print {
.light-dark-switch {
display: none;
}
.layout-switch {
display: none;
}
nav {
display: none;
}
}