From 2de2e818f46d027fe8a1a403f1bc7d6a371a5235 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Luk=C3=A1=C5=A1=20Hozda?= <luk.hozda@gmail.com>
Date: Tue, 6 Oct 2020 13:50:05 +0200
Subject: [PATCH] =?UTF-8?q?yeet=20zapojit=20se=20spolku,=20p=C5=99idan?=
 =?UTF-8?q?=C3=A1=20dal=C5=A1=C3=AD=20videa,=20drobn=C3=A9=20opravy,=20zru?=
 =?UTF-8?q?=C5=A1en=20zapojit=20se=20galerie.?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/components/Carousel.svelte   | 79 +++++++++++++++++++++++++++++++
 src/components/Nav.svelte        |  2 +-
 src/routes/index.svelte          |  4 +-
 src/routes/oborovky.svelte       | 24 +++++++---
 src/routes/prebiram.svelte       | 42 +++++++----------
 src/routes/zalozit-spolek.svelte | 80 ++++++++++++++++++++++++++++++++
 src/routes/zapojit-se.svelte     | 18 -------
 static/main.css                  | 13 ++++++
 static/main.styl                 | 12 +++++
 9 files changed, 222 insertions(+), 52 deletions(-)
 create mode 100644 src/components/Carousel.svelte

diff --git a/src/components/Carousel.svelte b/src/components/Carousel.svelte
new file mode 100644
index 0000000..239027d
--- /dev/null
+++ b/src/components/Carousel.svelte
@@ -0,0 +1,79 @@
+<script>
+import { onMount } from 'svelte';
+
+let name = "mySlides";
+let slideIndex = 1;
+
+
+// Next/previous controls
+function plusSlides(n) {
+  console.log("changing slides");
+  showSlides(slideIndex += n, name);
+}
+
+// Thumbnail image controls
+function currentSlide(n) {
+  showSlides(slideIndex = n, className);
+}
+
+function showSlides(n) {
+  var i;
+  var slides = document.getElementsByClassName(name);
+  var dots = slides.children.filter((x) => x.classList.indexOf("dot") > -1);
+  if (n > slides.length) {slideIndex = 1}
+  if (n < 1) {slideIndex = slides.length}
+  for (i = 0; i < slides.length; i++) {
+      slides[i].style.display = "none";
+  }
+  for (i = 0; i < dots.length; i++) {
+      dots[i].className = dots[i].className.replace(" carousel-active", "");
+  }
+  slides[slideIndex-1].style.display = "block";
+  dots[slideIndex-1].className += " carousel-active";
+} 
+
+
+</script>
+
+
+
+<section class="row" style="margin-top: 4vh" id="dalsi">
+	<section class="col">
+		<link rel="stylesheet" href="/css/carousel.css">
+		 <!-- Slideshow container -->
+		<div class="slideshow-container">
+
+    		<slot></slot>
+
+		  <!-- Full-width images with number and caption text -->
+		  <div class="mySlides fade">
+		    <div class="numbertext">1 / 3</div>
+    		<video class="smol-video" controls style="width: 100%">
+    			<source src="/video/5_lenka.mp4" type="video/webm">
+    			Your browser does not support video.
+    		</video>
+		  </div>
+
+		  <div class="mySlides fade">
+		    <div class="numbertext">2 / 3</div>
+    		<video class="smol-video" controls style="width: 100%">
+    			<source src="/video/4_holka_pozvanka.mp4" type="video/webm">
+    			Your browser does not support video.
+    		</video>
+		  </div>
+
+		  <!-- Next and previous buttons -->
+		  <a class="prev" onclick="plusSlides(-1)" href="/predseda#0">&#10094;</a>
+		  <a class="next" onclick="plusSlides(1)" href="/predseda#0">&#10095;</a>
+		</div>
+		<br>
+
+		<!-- The dots/circles -->
+		<div style="text-align:center">
+		  <span class="dot" onclick="currentSlide(1)"></span>
+		  <span class="dot" onclick="currentSlide(2)"></span>
+		</div>
+	</section>
+	<script src="js/carousel.js"></script>
+</section>
+
diff --git a/src/components/Nav.svelte b/src/components/Nav.svelte
index 5bcdf39..c6c8731 100644
--- a/src/components/Nav.svelte
+++ b/src/components/Nav.svelte
@@ -42,7 +42,7 @@
 	}
 </style>
 
-<div class="navigation-overlay" id="particles-js">
+<div class="navigation-overlay" id="particles-js" style="position: fixed">
 	<div class="cross cross-og" on:click="{click_link}">
 		<img src="/svg/cross1.svg" class="idle" alt=" cross ">
 		<img src="/svg/cross2.svg" class="active" alt=" cross ">
diff --git a/src/routes/index.svelte b/src/routes/index.svelte
index 6102261..5994771 100644
--- a/src/routes/index.svelte
+++ b/src/routes/index.svelte
@@ -30,7 +30,7 @@
 	}
 	.label {
 		position: absolute;
-		font-size: 0.5em;
+		font-size: calc(var(--font-size) / 1.7);
 		transition: .2s ease;
 	}
 	.label2:hover {
@@ -135,7 +135,7 @@
 	}
 	.pedftext {
 		position: absolute;
-		font-size: 0.5em;
+		font-size: calc(var(--font-size) / 1.7);
 		left: 5vw;
 		bottom: 5vh;
 		line-height: 1;
diff --git a/src/routes/oborovky.svelte b/src/routes/oborovky.svelte
index 22dbb9c..6b8bbb5 100644
--- a/src/routes/oborovky.svelte
+++ b/src/routes/oborovky.svelte
@@ -114,13 +114,6 @@
 	</div>
 	<div class="col-1"></div>
 </section>
-<section class="row" style="margin-top: 5vh">
-	<div class="col-1"></div>
-	<div class="col">
-		<div class="spacer"></div>
-	</div>
-	<div class="col-1"></div>
-</section>
 <section class="row" id="main-content" style="margin-top: 5vh">
 	<div class="col-1"></div>
 	<div class="col-5" style="line-height: 1">
@@ -239,6 +232,23 @@
 	</div>
 	<div class="col-1"></div>
 </section>
+<section class="row" style="margin-top: 4vh">
+	<div class="col-1"></div>
+	<div class="col-5 flexy-boi">
+		<h5 style="margin-bottom: 0; margin-left: -14vw">
+			Chceš vědět jaké je to být oborovcem?
+		</h5>
+		<h5 style="padding-left: 4vw; margin-top:0" class="text-primary">
+			Tak koukni na video se Štěpánem.
+		<h5>
+	</div>
+	<div class="col-5">
+		<video class="smol-video" controls>
+			<source src="/video/8_stepan.mp4" type="video/webm">
+			Your browser does not support video.
+		</video>
+	</div>
+</section>
 <section class="row" style="margin-top: 5vh">
 	<div class="col-1"></div>
 	<div class="col">
diff --git a/src/routes/prebiram.svelte b/src/routes/prebiram.svelte
index 777f6cb..02f1352 100644
--- a/src/routes/prebiram.svelte
+++ b/src/routes/prebiram.svelte
@@ -239,22 +239,6 @@
 		<div class="number-thing">
 			<div class="down">
 			<span>12.</span>
-				<h6 style="font-size: calc(var(--font-size) / 1.5); color: var(--color-primary)"><b>Rady od starších</b></h6>
-				<p>
-					Aby toho všeho nebylo málo, tady máš rady od bývalých i současných předsedů:
-				</p>
-        		<video class="smol-video" controls style="width: 100%; margin-top: 2vh">
-        			<source src="/video/10_veru.mp4" type="video/webm">
-        			Your browser does not support video.
-        		</video>
-			</div>
-		</div>
-	</div>
-	<div class="col">
-		<div style="height: 12vh"></div>
-		<div class="number-thing">
-			<div class="down">
-			<span>13.</span>
 				<h6 style="font-size: calc(var(--font-size) / 1.5); color: var(--color-primary)"><b>Nezapomeň se koukat i k sobě</b></h6>
 				<p>
 					Zjisti si, jestli máte sami např. někde na disku vlastní návody, infografiky, seznamy toho, jak
@@ -263,14 +247,11 @@
 			</div>
 		</div>
 	</div>
-	<div class="col-1"></div>
-</section>
-<section class="row" style="margin-top: 5vh">
-	<div class="col-1"></div>
 	<div class="col">
+		<div style="height: 12vh"></div>
 		<div class="number-thing">
 			<div class="down">
-			<span>14.</span>
+			<span>13.</span>
 				<h6 style="font-size: calc(var(--font-size) / 1.5); color: var(--color-primary)"><b>Neboj se zeptat!</b></h6>
 				<p>
 					Nejvíc toho nakonec stejně vždycky zjistíš až za pochodu a třeba za týden, měsíc nebo půl roku zjistíš,
@@ -280,11 +261,24 @@
 			</div>
 		</div>
 	</div>
-	<div class="col">
+	<div class="col-1"></div>
+</section>
+<section class="row" style="margin-top: 4vh">
+	<div class="col-1"></div>
+	<div class="col-5 flexy-boi">
+		<h5 style="margin-bottom: 0; margin-left: -14vw">
+			Jaké to bylo být předsedou?
+		</h5>
+		<h5 style="padding-left: 4vw; margin-top:0" class="text-primary">
+			O tom ti poví Verča.
+		<h5>
 	</div>
-	<div class="col">
+	<div class="col-5">
+		<video class="smol-video" controls>
+			<source src="/video/10_veru.mp4" type="video/webm">
+			Your browser does not support video.
+		</video>
 	</div>
-	<div class="col-1"></div>
 </section>
 <section class="row" style="margin-top: 9rem">
 	<div class="col-1"></div>
diff --git a/src/routes/zalozit-spolek.svelte b/src/routes/zalozit-spolek.svelte
index 50ce4ad..5698217 100644
--- a/src/routes/zalozit-spolek.svelte
+++ b/src/routes/zalozit-spolek.svelte
@@ -198,6 +198,86 @@
 	</div>
 	<div class="col-1"></div>
 </section>
+<section class="row">
+    <div class="col-1"></div>
+	<div class="col-5" style="line-height: 1.4">
+		<div style="height: 8vh"></div>
+		<div class="down" style="margin-right: 3vw">
+			<div class="side-line" style="margin-bottom: 1vh" id="mluvci">
+			<h6 style="margin-bottom: 0"><b>Je potřeba sepsat stanovy</b></h6>
+			</div>
+			<ol style="list-style-type: alphanum; margin-top:2vh; margin-bottom: 2vh; margin-left: 1.14vw; line-height: 1.5; font-size: calc(var(--font-size) / 1.7)">
+    			<li>
+                Ve stanovách je nejdůležitější, kdo bude <b>statutární orgán</b> (bude vystupovat za spolek) -
+                jeden nebo dva lidi (předseda a místopředseda)?
+				</li>
+				<li>
+				Je potřeba určit, jak bude vypadat <b>výkonný orgán</b> - většinou označován jako “rada”,
+				který spolek řídí. Je možné také určit kontrolní komisi, která bude dohlížet na Radu,
+				jestli jedná podle stanov.
+				</li>
+				<li>
+				Stejně tak můžeš ukotvit ve stanovách volební komisi, která bude dohlížet na správný průběh
+				voleb. Je nezbytné určit sněm / valnou hromadu, čili sdružení všech členů, kteří tvoří <b>nejvyšší orgán</b>.
+				</li>
+				<li>
+				Důležité je vybalancovat pravomoci mezi těmito všemi orgány, aby se nestalo, že
+				jeden paralyzuje ten druhý, ale aby neměl ani jeden větší moc (můžeš si víc najít
+				pod pojmem “checks and balances”).
+				</li>
+				<li>
+				Neopomenutelnou záležitostí jsou již zmiňované volby. Je potřeba:
+				</li>
+				<ol>
+    				<li>Určit jak se volí (přímo na pozice nebo se zvolí celá rada a ta si pak zvolí předsedu a rozhodne o funkcích?)</li>
+    				<li>Jak dlouhé bude jejich funkční období</li>
+    				<li>Jak se volby svolávají (kolik dní předem, písemně/mailem, kdo je svolává).</li>
+				</ol>
+				<li>A nezapomeň na věci jako je název spolku, jeho účel a sídlo.</li>
+			</ol>
+		</div>
+	</div>
+	<div class="col-5" style="line-height: 1.4">
+		<div style="height: 8vh"></div>
+		<div class="down" style="margin-right: 3vw">
+			<div class="side-line" style="margin-bottom: 1vh" id="mluvci">
+			<h6 style="margin-bottom: 0"><b>Základní práva a povinnosti spolku</b></h6>
+			</div>
+			<ol style="list-style-type: alphanum; margin-top:2vh; margin-bottom: 2vh; margin-left: 1.14vw; line-height: 1.5; font-size: calc(var(--font-size) / 1.7)">
+    			<li>
+        		Musíš do 30. 4. odevzdat výroční zprávu.
+				</li>
+				<li>
+    			Po vyzvání vedením, se musíš aktivně účastnit vybraných fakultních akcí (DOD, předstudijní, …).
+				</li>
+				<li>
+    			Veškeré poskytnuté prostory musíš udržovat v pořádku a čistotě (to platí i o spolkovce).
+				</li>
+				<li>
+    			Je potřeba se řídit pravidly pořádání akcí.
+				</li>
+				<li>
+    			Můžeš si umístit své sídlo v budovách PedF UK.
+				</li>
+				<li>
+                Můžeš žádat o finanční podporu na svou činnost.
+				</li>
+				<li>
+    			Máš přístup do spolkovky.
+				</li>
+				<li>
+    			Můžeš si rezervovat učebny pro akce a jiné spolkové aktivity.
+				</li>
+				<li>
+    			Dostaneš prostor pro spolkový web na fakultním serveru.
+				</li>
+				<li>
+				Možnost propagace na oficiální webu PedF UK.
+				</li>
+			</ol>
+		</div>
+	</div>
+</section>
 <section class="row" style="margin-top: 5vh">
 	<section class="col-1"></section>
 	<section class="col bg-circle bg-center bg-auto" id="neformalni">
diff --git a/src/routes/zapojit-se.svelte b/src/routes/zapojit-se.svelte
index d32c979..620f798 100644
--- a/src/routes/zapojit-se.svelte
+++ b/src/routes/zapojit-se.svelte
@@ -231,24 +231,6 @@
 </section>
 <section class="row" style="margin-top: 3vh">
 	<div class="col-1"></div>
-	<div class="col">
-		<a class="hover-man"><img src="https://source.unsplash.com/random/400x300" alt=""></a>
-		<a class="hover-man"><img src="https://source.unsplash.com/random/400x300" alt=""></a>
-		<a class="hover-man"><img src="https://source.unsplash.com/random/400x300" alt=""></a>
-		<a class="hover-man"><img src="https://source.unsplash.com/random/400x300" alt=""></a>
-	</div>
-	<div class="col">
-		<a class="hover-man"><img src="https://source.unsplash.com/random/400x300" alt=""></a>
-		<a class="hover-man"><img src="https://source.unsplash.com/random/400x300" alt=""></a>
-		<a class="hover-man"><img src="https://source.unsplash.com/random/400x300" alt=""></a>
-		<a class="hover-man"><img src="https://source.unsplash.com/random/400x300" alt=""></a>
-	</div>
-	<div class="col">
-		<a class="hover-man"><img src="https://source.unsplash.com/random/400x300" alt=""></a>
-		<a class="hover-man"><img src="https://source.unsplash.com/random/400x300" alt=""></a>
-		<a class="hover-man"><img src="https://source.unsplash.com/random/400x300" alt=""></a>
-		<a class="hover-man"><img src="https://source.unsplash.com/random/400x300" alt=""></a>
-	</div>
 	<div class="col-1"></div>
 </section>
 </main>
diff --git a/static/main.css b/static/main.css
index 46df80c..f12d278 100644
--- a/static/main.css
+++ b/static/main.css
@@ -256,3 +256,16 @@ canvas {
 .particles-js-canvas-el {
   position: fixed;
 }
+.video-container {
+  position: relative;
+}
+.video-container video {
+  position: relative;
+  z-index: 0;
+}
+.video-container .overlay {
+  position: absolute;
+  top: 0;
+  left: 0;
+  z-index: 1;
+}
diff --git a/static/main.styl b/static/main.styl
index c2b9084..67fe74f 100644
--- a/static/main.styl
+++ b/static/main.styl
@@ -244,3 +244,15 @@ body > canvas
 .particles-js-canvas-el {
     position: fixed;
 }
+
+.video-container { position:relative; }
+.video-container video {
+    position:relative;
+    z-index:0;
+}
+.video-container .overlay {
+    position:absolute;
+    top:0;
+    left:0;
+    z-index:1;
+}