spolky/src/routes/zapojit-se.svelte

<style>
	main {
		background: none !important;
	}
	p {
		text-align: justify;
	}
</style>

<script>
	import Logo from '../components/logo.svelte';
	import UpArrow from '../components/up.svelte';
	import MenuBtn from '../components/menu-btn.svelte';
	import ZjistiBtn from '../components/zjisti-vice.svelte';
	import Carousel from '@beyonk/svelte-carousel';
	import Galerie from '../components/galerie.svelte';
	import { onMount } from 'svelte';

	onMount(async () => {
		window.showSlides(1, "mySlides2", "slideIndex2", 'dot2');
		window.showSlides(1, "mySlides3", "slideIndex3", 'dot3');
        const setup = ()  => {
          const pList = document.querySelectorAll('main p, main li, main span');
          pList.forEach(p => noMoreLonelyWords(p));
        };

        const clearWordBreaks = (target) => target.innerHTML = target.innerHTML.replace(/\u00a0/g, ' ');
        const noMoreLonelyWords = (target) => {
          let textArray = target.innerHTML.split(' ');
          let newTextArray = [];
          textArray.forEach((word, i, list) => {
            let textEntry = '';
            if(word.length === 1)
              textEntry = word + '\xa0';
            else
              textEntry = word + ' ';
            newTextArray.push(textEntry);
          });
          target.innerHTML = newTextArray.join('');
        };
        const updateWordBreaks = (target) => {
          clearWordBreaks(target);
          noMoreLonelyWords(target);
        };

        setup();
	});
</script>

<svelte:head>
	<title>Spolky a SORky PedF UK | Chci se zapojit</title>
</svelte:head>

<MenuBtn/>
<main id="root">
<section class="row fullheight">
	<Logo/>
	<div class="row" style="width: 100%">
		<section class="col-1 hide-sm hide-xs"></section>
		<section class="col-5">
			<div class="top-margin">
				<h1 style="margin-bottom: 5vh">Chci se zapojit</h1>
				<hr class="thing-hr">
				<h6 style="line-height: 1.4; margin-top: 5vh; font-size: calc(var(--font-size) / 1.5)">
                    Určitě ti neuniklo, že na fakultě máme nějaké spolky a SORky. Víš ale co je co, a jak to funguje?
                    Tady ti vysvětlíme, o co že to vlastně jde, proč je dobré toho být součástí, a jak a kam se můžeš zapojit.
				</h6>
				<ZjistiBtn/>
			</div>
		</section>
	</div>
</section>
<section class="row margin-5vh">
	<section class="col-1 hide-xs hide-sm"></section>
	<div class="col-5" id="main-content" style="line-height: 1">
		<div class="down" style="margin-right: 3vw">
			<div class="side-line" style="margin-bottom: 1vh">
			<h6 style="margin-bottom: 2vh"><b>Co jsou vlastně studentské organizace?</b></h6>
			</div>
			<p style="margin-top:1vh; margin-bottom: 2vh; margin-left: 1.14vw; line-height: 1.5; font-size: calc(var(--font-size) / 1.7)">
				Studentská organizace, jak již napovídá sám název, je uskupení studentů,
				které přispívá k lepšímu životu na fakultě. Na fakultě jsou studentské organizace
				podporované vedením a máme jich celou řadu, takže si na své přijde každý.
				A pokud by někomu náhodou nabídka nestačila, může si založit vlastní spolek.
				Jak na to najdeš v sekci <a href="/zalozit-spolek">Chci založit spolek</a>.
			</p>
		</div>
	</div>
	<div class="col-5" style="line-height: 1">
		<div class="down" style="margin-right: 3vw">
			<div class="side-line" style="margin-bottom: 1vh">
			<h6 style="margin-bottom: 2vh"><b>Proč bych se měl do toho pouštět?</b></h6>
			</div>
			<p style="margin-top:1vh; margin-bottom: 2vh; margin-left: 1.14vw; line-height: 1.5; font-size: calc(var(--font-size) / 1.7)">
				Studentské organizace nabízí mnoho benefitů, které nemusí být na první pohled vidět.
				Seznámíš s novými lidmi a ruku na srdce, když na fakultě potkáváš známé tváře, tak
				se tam najednou chodí o trochu líp. Být členem spolku je využití volného času, které
				ti něco dá. Je sice super sledovat doma v posteli Netflix, ale to tě nenaučí, jak uspořádat
				přednášku pro 300 lidí, pracovat v týmu nebo jak na sociální sítě. Tak se neboj a pojď si najít to svoje!
			</p>
		</div>
	</div>
</section>
<section class="row" style="margin-top: 5vh">
<div class="col flexy-boi">
	<h5 style="color: var(--color-primary); margin-bottom: 2vh"><b>Jak se v tom všem vyznat?</b></h5>
</div>
</section>
<section class="row margin-5vh">
	<section class="col-1 hide-xs hide-sm"></section>
	<div class="col-5" style="line-height: 1">
		<div class="down" style="margin-right: 3vw">
			<div class="side-line" style="margin-bottom: 1vh">
			<h6 style="margin-bottom: 0"><b>Formální spolek</b></h6>
			</div>
			<p style="margin-top:0; margin-bottom: 2vh; margin-left: 1.14vw; line-height: 1.5; font-size: calc(var(--font-size) / 1.7)">
				Formální spolek se hodí pro větší organizace. Výhodou je hlavně
				větší pořádek díky stanovám a tomu, kdo co vede. Spolky mají obvykle radu,
				komisi a volby do těchto orgánů. Zároveň se musí oficiálně přihlásit k soudu
				a vést si účetnictví. Na fakultě máme tři formální spolky: Agora,
				Drosophila a Pedagogický spolek Emil.
			</p>
		</div>
		<div class="down" style="margin-right: 3vw">
			<div class="side-line" style="margin-bottom: 1vh">
			<h6 style="margin-bottom: 0"><b>SOR</b></h6>
			</div>
			<p style="margin-top:0; margin-bottom: 2vh; margin-left: 1.14vw; line-height: 1.5; font-size: calc(var(--font-size) / 1.7)">
                Studentské oborové rady (SOR) vznikají za účelem zastupování zájmů studentů
                daného studijního oboru. SORky pravidelně komunikují s katedrou, řeší
                problémy a předávají zpětnou vazbu za účelem zkvalitňování výuky a
                atmosféry na katedře. SOR má svého mluvčího a nejlépe by její členové
                měli být z různých ročníků studia, aby si dokázali předávat informace z první ruky.
			</p>
		</div>
		<div class="down" style="margin-right: 3vw">
			<div class="side-line" style="margin-bottom: 1vh">
			<h6 style="margin-bottom: 0"><b>Univerzitní spolek</b></h6>
			</div>
			<p style="margin-top:0; margin-bottom: 2vh; margin-left: 1.14vw; line-height: 1.5; font-size: calc(var(--font-size) / 1.7)">
                Univerzitní spolek sdružuje studenty, absolventy i kantory se společnými zájmy
                a cíli z celé univerzity. Takovým spolkem je např. Charlie, který se definuje
                jako “Queer sdružení UK” nebo Univerzitní křesťanské hnutí,
                které můžeš často potkat i na akcích fakulty.
			</p>
		</div>
	</div>
	<div class="col-5" style="line-height: 1">
		<div class="down" style="margin-right: 3vw">
			<div class="side-line" style="margin-bottom: 1vh">
			<h6 style="margin-bottom: 0"><b>Neformální spolky</b></h6>
			</div>
			<p style="margin-top:0; margin-bottom: 2vh; margin-left: 1.14vw; line-height: 1.5; font-size: calc(var(--font-size) / 1.7)">
				Neformální spolek je menší a zpravidla se věnuje komornějším věcem,
				jako například divadelní spolek La Vie Bohème, který každý semestr ve spolupráci s microlabem natáčí
				vtipné spoty ke studentskému hodnocení nebo třeba spolek CULT při katedře výtvarky, který pořádá otevřené
				ateliéry, večerní promítání a spoustu dalších akcí.
			</p>
		</div>
		<div class="down" style="margin-right: 3vw">
			<div class="side-line" style="margin-bottom: 1vh">
			<h6 style="margin-bottom: 0"><b>Fakultní spolek</b></h6>
			</div>
			<p style="margin-top:0; margin-bottom: 2vh; margin-left: 1.14vw; line-height: 1.5; font-size: calc(var(--font-size) / 1.7)">
                Fakultní spolky fungují napříč celou fakultou a bývají větších rozměrů. Na ostatních
                fakultách je to běžnější způsob fungování spolků, protože jednotlivé katedry nejsou
                až tak rozdílné jako u nás. Na fakultě v současné době takový spolek nemáme.
			</p>
		</div>
	</div>
</section>
<section class="row margin-14vh">
	<section class="col-1 hide-xs hide-sm"></section>
	<div class="col-6" style="background-position: top center">
		<h5>Zkušenosti členů a bývalých členů</h5>
		<hr class="thing-hr">
	</div>
</section>
<section class="row margin-5vh" id="dalsi">
	<section class="col">
		<link rel="stylesheet" href="/css/carousel.css">
		 <!-- Slideshow container -->
		<div class="slideshow-container">

		  <!-- Full-width images with number and caption text -->
		  <div class="mySlides2 fade">
		    <div class="numbertext">1 / 3</div>
    		<video class="smol-video" controls style="width: 100%" playsinline>
    			<source src="/video/7_jana.mp4" type="video/mp4">
    			Your browser does not support video.
    		</video>
    		<h6 style="font-size: calc(var(--font-size) / 1.9)">Jana Gombík Ruszó, zakladatelka spolku Drosophila</h6>
		  </div>

		  <div class="mySlides2 fade">
		    <div class="numbertext">2 / 3</div>
    		<video class="smol-video" controls style="width: 100%" playsinline>
    			<source src="/video/8_stepan.mp4" type="video/mp4">
    			Your browser does not support video.
    		</video>
    		<h6 style="font-size: calc(var(--font-size) / 1.9)">Štěpán Gabriel, bývalý člen SOR biologie</h6>
		  </div>

		  <div class="mySlides2 fade">
		    <div class="numbertext">3 / 3</div>
    		<video class="smol-video" controls style="width: 100%" playsinline>
    			<source src="/video/1_verca_1.mp4" type="video/mp4">
    			Your browser does not support video.
    		</video>
    		<h6 style="font-size: calc(var(--font-size) / 1.9)">Veronika Valínová, bývalá místopředsedkyně spolku Agora</h6>
		  </div>

		  <!-- Next and previous buttons -->
		  <a class="prev" onclick="plusSlides(-1, 'mySlides2', 'slideIndex2', 'dot2')">&#10094;</a>
		  <a class="next" onclick="plusSlides(1, 'mySlides2', 'slideIndex2', 'dot2')">&#10095;</a>
		</div>
		<br>

		<!-- The dots/circles -->
		<div style="text-align:center">
		  <span class="dot dot2 carousel-active" onclick="currentSlide(1, 'mySlides2', 'slideIndex2', 'dot2')"></span>
		  <span class="dot dot2" onclick="currentSlide(2, 'mySlides2', 'slideIndex2', 'dot2')"></span>
		  <span class="dot dot2" onclick="currentSlide(3, 'mySlides2', 'slideIndex2', 'dot2')"></span>
		</div>
	</section>
	<script src="js/carousel.js"></script>
</section>
<section class="row margin-14vh">
	<section class="col-1 hide-xs hide-sm"></section>
	<div class="col-6" style="background-position: top center">
		<h5>Proč bys měl jít právě k nám?</h5>
		<hr class="thing-hr">
	</div>
</section>
<section class="row margin-5vh" id="dalsi">
	<section class="col">
		<link rel="stylesheet" href="/css/carousel.css">
		 <!-- Slideshow container -->
		<div class="slideshow-container">

		  <!-- Full-width images with number and caption text -->
		  <div class="mySlides3 fade">
		    <div class="numbertext">1 / 4</div>
    		<video class="smol-video" controls style="width: 100%" playsinline>
    			<source src="/video/4_holka_pozvanka.mp4" type="video/mp4">
    			Your browser does not support video.
    		</video>
    		<h6 style="font-size: calc(var(--font-size) / 1.9)">Michala Chudobová, předsedkyně Pedagogického spolku Emil</h6>
		  </div>

		  <div class="mySlides3 fade">
		    <div class="numbertext">2 / 4</div>
    		<video class="smol-video" controls style="width: 100%" playsinline>
    			<source src="/video/6_petr.mp4" type="video/mp4">
    			Your browser does not support video.
    		</video>
    		<h6 style="font-size: calc(var(--font-size) / 1.9)">Petr Holub, předseda spolku Drosophila</h6>
		  </div>

		  <div class="mySlides3 fade">
		    <div class="numbertext">3 / 4</div>
    		<video class="smol-video" controls style="width: 100%" playsinline>
    			<source src="/video/11_lenka_2.mp4" type="video/mp4">
    			Your browser does not support video.
    		</video>
    		<h6 style="font-size: calc(var(--font-size) / 1.9)">Lenka Nováková, předsedkyně spolku Agora</h6>
		  </div>
		  <div class="mySlides3 fade">
		    <div class="numbertext">4 / 4</div>
    		<video class="smol-video" controls style="width: 100%" playsinline>
    			<source src="/video/9_devce.mp4" type="video/mp4">
    			Your browser does not support video.
    		</video>
    		<h6 style="font-size: calc(var(--font-size) / 1.9)">Linda Pleskačová, radní pro PR spolku Otevřeno</h6>
		  </div>

		  <!-- Next and previous buttons -->
		  <a class="prev" onclick="plusSlides(-1, 'mySlides3', 'slideIndex3', 'dot3')">&#10094;</a>
		  <a class="next" onclick="plusSlides(1, 'mySlides3', 'slideIndex3', 'dot3')">&#10095;</a>
		</div>
		<br>

		<!-- The dots/circles -->
		<div style="text-align:center">
		  <span class="dot dot3 carousel-active" onclick="currentSlide(1, 'mySlides3', 'slideIndex3', 'dot3')"></span>
		  <span class="dot dot3" onclick="currentSlide(2, 'mySlides3', 'slideIndex3', 'dot3')"></span>
		  <span class="dot dot3" onclick="currentSlide(3, 'mySlides3', 'slideIndex3', 'dot3')"></span>
		  <span class="dot dot3" onclick="currentSlide(4, 'mySlides3', 'slideIndex3', 'dot3')"></span>
		</div>
	</section>
	<script src="js/carousel.js"></script>
</section>
<section class="row margin-5vh">
	<div class="col flexy-boi" style="background-position: top center">
		<h5>Seznam spolků a studentských oborových rad</h5>
		<hr class="thing-hr">
	</div>
</section>
<Galerie/>
</main>

<UpArrow/>