spolky/src/routes/predseda.svelte

<style>
	main {
		background: none !important;
	}

	
.ytvid2 {
  position: relative;
  width: 100%;
  padding-bottom: 56.25%;
}

.video_player {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  border: 0;
}

</style>

<script>
	import Logo from '../components/logo.svelte';
	import UpArrow from '../components/up.svelte';
	import MenuBtn from '../components/menu-btn.svelte';
	import LLink from '../components/llink.svelte';
	import ZjistiBtn from '../components/zjisti-vice.svelte';
	import { onMount } from 'svelte';

	onMount(async () => {
		window.currentSlide(1);
        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 | Předseda spolku</title>
	<!-- Google Tag Manager -->
	<script>(function(w,d,s,l,i){w[l]=w[l]||[];w[l].push({'gtm.start':
		new Date().getTime(),event:'gtm.js'});var f=d.getElementsByTagName(s)[0],
		j=d.createElement(s),dl=l!='dataLayer'?'&l='+l:'';j.async=true;j.src=
		'https://www.googletagmanager.com/gtm.js?id='+i+dl;f.parentNode.insertBefore(j,f);
		})(window,document,'script','dataLayer','GTM-MQM8H3M');</script>
		<!-- End Google Tag Manager -->
	</svelte:head>
	<!-- Google Tag Manager (noscript) -->
	<noscript><iframe src="https://www.googletagmanager.com/ns.html?id=GTM-MQM8H3M"
		height="0" width="0" style="display:none;visibility:hidden"></iframe></noscript>
		<!-- End Google Tag Manager (noscript) -->
	

<MenuBtn>
	<div class="horizontal-menu">
		<LLink href="vyrocni-zprava">Výroční zpráva</LLink>
		<LLink href="spolkova-mistnost">Spolková místnost</LLink>
		<LLink href="predpisy">Spolkovka</LLink>
		<LLink href="akce">Akce a nahlašování akcí</LLink>
		<LLink href="odkazy">Odkazy a inspirace</LLink>
		<LLink href="dalsi">Rady od předsedů</LLink>
	</div>
</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">Předseda spolku</h1>
				<hr class="thing-hr">
				<h6 style="line-height: 1.4; margin-top: 5vh; font-size: calc(var(--font-size) / 1.5)">
					Přebíráš právě teď spolek nebo si jen něco potřebuješ ujasnit? Provedeme
					tě všemi povinnostmi a možnostmi, které jako předseda máš.
				</h6>
				<ZjistiBtn/>
			</div>
		</section>
	</div>
</section>
<section class="row margin-5vh" id="main-content">
	<section class="col-1 hide-xs hide-sm"></section>
	<div class="col-4 bg-circle" id="vyrocni-zprava">
		<h3>Výroční zpráva</h3>
		<hr class="thing-hr">
		<p style="font-size: calc(var(--font-size) / 1.8); margin-top: 5vh; text-align: justify">
			Výroční zpráva se posílá na Oddělení vnějších vztahů (OVV) a Veronice Laufkové, jako ohlédnutí za působením spolku, a to do 30. dubna každého roku.
		</p>
	</div>
</section>
<section class="row margin-5vh">
	<section class="col-1 hide-xs hide-sm"></section>
	<div class="col-5 flexy-boi">
		<h5 style="margin-bottom: 0; margin-left: -14vw">
			A jak na ni?
		</h5>
		<h5 style="padding-left: 4vw; margin-top:0" class="text-primary">
			To ti řekne Nela.
		<h5>
	</div>
	<div class="col-5">
		<div class="ytvid2"><iframe class="video_player" height="100%" width="100%" src="https://www.youtube.com/embed/DqZSo2PCHrg" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe></div>
    	
		<h6 style="font-size: calc(var(--font-size) / 1.9)">Nela Pastrnková, bývalá místopředsedkyně Studentského spolku Agora</h6>
	</div>
</section>
<section class="row margin-5vh">
	<section class="col-1 hide-xs hide-sm"></section>
	<div class="col-3 side-line" style="line-height: 1">
		<div>
			<h6 style="margin-bottom: 0"><b>Hlavní body,</b></h6>
			<p style="margin-top: 2vh; margin-bottom: 2vh; font-size: calc(var(--font-size) / 1.8)">které nesmí chybět:</p>
		<div>
	</div>
</section>
<section class="row margin-5vh">
	<section class="col-1 hide-xs hide-sm"></section>
	<div class="col">
		<div class="number-thing">
			<div class="down">
			<span>1.</span>
			<h6 style="font-size: calc(var(--font-size) / 1.5); color: var(--color-primary)"><b>Statutární orgán a členové výkonného orgánu</b></h6>
			<p>
				Hlavní úlohou této části je představit radu spolku za dané období a zároveň
				volební,  kontrolní či jinou komisi (pokud ji spolek má), která celý rok
				fungovala s radou.
			</p>
			</div>
		</div>
	</div>
	<div class="col">
		<div class="number-thing">
			<div class="down">
        		<span>2.</span>
        		<h6 style="font-size: calc(var(--font-size) / 1.5); color: var(--color-primary)"><b>Celkový počet členů</b></h6>
    			<p>Kolik členů má spolek? Kolik z nich nově přišlo do spolku nebo kdo se stal čestným členem?</p>
			</div>
		</div>
	</div>
	<div class="col">
		<div class="number-thing">
			<div class="down">
				<span>3.</span>
				<h6 style="font-size: calc(var(--font-size) / 1.5); color: var(--color-primary)"><b>Procentuální zastoupení ročníků studia a studijních programů mezi členy</b></h6>
				<p>
					V téhle části se můžou vyžít milovníci grafů a udělat stručný přehled toho,
					kolik % členů je ve kterém ročníku studia nebo jaké je procentuální
					zastoupení aktivních absolventů. Zároveň je důležité udělat v dalším grafu
					přehled toho, jakou kombinaci studují.
				</p>
			</div>
		</div>
	</div>
	<section class="col-1 hide-xs hide-sm"></section>
</section>
<section class="row">
	<section class="col-1 hide-xs hide-sm"></section>
	<div class="col">
		<div class="number-thing">
			<div class="down">
			<span>4.</span>
			<h6 style="font-size: calc(var(--font-size) / 1.5); color: var(--color-primary)" ><b>Souhrn činností za minulý kalendářní rok</b></h6>
			<p>Jaké akce tvůj spolek za celý kalendářní rok uspořádal? O čem byly a kdo se na  nich podílel?</p>
			</div>
		</div>
	</div>
	<div class="col">
		<div class="number-thing">
			<div class="down">
				<span>5.</span>
				<h6 style="font-size: calc(var(--font-size) / 1.5); color: var(--color-primary)"><b>Reflexe &ndash; ohlédnutí za minulým rokem</b></h6>
				<p>Jak si tvůj spolek v minulém roce vedl?</p>
			</div>
		</div>
	</div>
	<div class="col">
		<div class="number-thing">
			<div class="down">
				<span>6.</span>
				<h6 style="font-size: calc(var(--font-size) / 1.5); color: var(--color-primary)"><b>Plány na další rok</b></h6>
				<p>
					Na čem pracuje rada spolku? Jaké akce chcete jako spolek pořádat?
					V čem chcete pokračovat a co chcete naopak dělat jinak/co chcete změnit?
				</p>
			</div>
		</div>
	</div>
	<section class="col-1 hide-xs hide-sm"></section>
</section>
<section class="row">
	<section class="col-1 hide-xs hide-sm"></section>
	<div class="col">
		<div class="number-thing">
			<div class="down">
			<span>7.</span>
			<h6 style="font-size: calc(var(--font-size) / 1.5); color: var(--color-primary)"><b>Hospodaření spolku</b></h6>
			<p>
				Odkud bere spolek peníze a za co je utrácí? Stačí rozepsat,
				do jakých odvětví je spolek investuje (např. akce, PR…).
			</p>
			</div>
		</div>
		</div>
	<div class="col"></div>
	<div class="col"></div>
	<section class="col-1 hide-xs hide-sm"></section>
</section>
<section class="row margin-5vh">
	<section class="col-1 hide-xs hide-sm"></section>
	<div class="col-5 bg-square" id="spolkova-mistnost" style="padding-right: 3vw">
		<h3>Spolková místnost</h3>
		<hr class="thing-hr">
		<p style="font-size: calc(var(--font-size) / 1.8); margin-top: 5vh; text-align: justify">
			Každý formální spolek má nárok na přístup do spolkové místnosti, která je označena S104 a nachází
			se v budově hned vedle hlavní budovy v Rettigově 4. Jinak se jí taky říká „spolkovka“ nebo „esko“.
			Je to příjemně zařízená místnost s velkým stolem, židlemi, pódiem na sezení a úložnými prostory.

			Využívat spolkovku můžou všichni členové spolku a má spoustu výhod. Mimo jiné:
		</p>
		<ul style="font-size: calc(var(--font-size) / 1.8)">
			<li>můžeš používat tiskárnu a spolkový počítač</li>
			<li>dají se zde pořádat spolkové schůzky nebo třeba přečkat čas mezi přednáškami (pokud je tu volno)</li>
			<li>máš zde k dispozici základní kancelářské potřeby</li>
			<li>máš úložné prostory vyhrazené pro spolkové věci, takže je nemusíš skladovat u nikoho doma</li>
			<li>na patře je kuchyňka, takže není problém si tu ohřát oběd. Nezapomeň si vlastní příbory a pokud si něco půjčíš, vrať to.</li>
		</ul>
	</div>
	<div class="col-5 bg-circle" style="padding-left: 3vw">
		<h3>Google kalendář</h3>
		<hr class="thing-hr">
		<p style="font-size: calc(var(--font-size) / 1.8); margin-top: 5vh; text-align: justify">
			Všechny spolky i SOR mají společný Google kalendář, kam se na příklad zapisují akce, jako jsou schůze spolku nebo rady,
			pro které potřebuje spolek místnost pro sebe. Funguje to jednoduše &ndash; v požadovaném čase vytvoříš událost a nazveš ji
			Spolek &ndash; akce (S104). Takže např. Emil &ndash; rada (S104).
		</p>
	</div>
</section>
<section class="row margin-5vh">
	<section class="col-1 hide-xs hide-sm"></section>
	<div class="col-5 bg-circle" style="background-position: 3em top; background-size: 4em" id="predpisy">
		<h4>Spolkovka</h4>
		<hr class="thing-hr">
		<div class="side-line" style="margin-top: 3vh">
    		<div class="down">
			<h6 style="margin-bottom: 0"><b>Základní pravidla</b></h6>
    		</div>
		</div>
		<ul style="font-size: calc(var(--font-size) / 1.8);">
			<li>do spolkovky mají přístup jen členové formálních spolků</li>
			<li>udržovat ve spolkovce pořádek</li>
			<li>nahlásit a opravit jakoukoliv škodu, která byla způsobena</li>
			<li>zamykat dveře</li>
			<li>zapisovat všechny větší akce do kalendáře (viz výše)</li>
			<li>zvolit jednoho zástupce, který bude komunikovat s ostatními zástupci, a tím se z něj stane správce spolkovky</li>
		</ul>
		<div class="side-line">
			<h6 style="margin-bottom: 0"><b>Povinnosti správce spolkovky</b></h6>
		</div>
		<ul style="font-size: calc(var(--font-size) / 1.8);">
			<li>předávat informace dál do spolku,</li>
			<li>mít přehled o majetku spolku v esku,</li>
			<li>vytvořit úklidové směny (střídání po 14 dnech) &ndash; jsou vyvěšené v esku,</li>
			<li>dodržovat měsíční směny – koncem měsíce se perou deky, polštáře a luxuje podium,</li>
			<li>při celofakultních akcích uklízí všichni správci, při velkých akcích jednoho spolku odpovídá za úklid správce spolku sám,</li>
			<li>vědět, kde jsou baterky a nabíječka k zámku, a hlavně jak funguje,</li>
		</ul>
		<p style="font-size: calc(var(--font-size) / 1.8); margin-top: 5vh; text-align: justify">
			Jelikož přístup do spolkovky nefunguje na klíč, ale přes mobilní
			aplikaci Danalock (stáhneš na Google Play nebo App Storu), je nutné ji mít
			nainstalovanou v telefonu. U nově vzniklých spolků musí předseda požádat o
			přihlašovací údaje tajemníka spolku Agora a ty pak předá dalším členům.
		</p>
		<div class="spacer"></div>
	</div>
</section>
<section class="row margin-5vh">
	<section class="col-1 hide-xs hide-sm"></section>
	<div class="col-5 bg-circle" style="font-size: calc(var(--font-size) / 1.8); padding-right: 4vw; background-position: 4em top; background-size: 9em">
		<h3 style="font-size: 2.5em" id="akce">Akce a nahlašování akcí</h3>
		<hr class="thing-hr">
		<p style="margin-top: 5vh">
			Pokud se rozhodneš uspořádat akci na fakultě, pamatuj, že musí být vždy nahlášena přes
			jednoduchý formulář <a href="https://akce.pedf.cuni.cz" target="_blank">akce.pedf.cuni.cz</a>.
			<br><br>
			Pokud je to akce malá, nebo jen na krátko a potřebuješ společný prostor,
			stačí vyplnit formulář týden předem. Ve formuláři můžeš požádat např. o stoly,
			židle, zapnutí techniky nebo třeba propagaci na sockách. Za pronájem prostor na fakultě
			formální spolek nezaplatí ani korunu.
			<br><br>
			Velké akce a akce přesahující otevírací dobu vrátnice je potřeba začít
			řešit už tři týdny předem s OVV, a to také přes zmíněný formulář.
			<br><br>
			Všechny spolky i SOR mají společný Google kalendář, kam se zapisují
			všechny akce, které spolek pořádá. Funguje to úplně stejně jako u rezervování spolkovky &ndash v požadovaném čase vytvoříš
			událost a nazveš ji „Název Spolku – akce“, zadáš, kde se akce koná (místnost na fakultě, kavárna…)
			a do popisu dáš odkaz na FB událost. Takže např. Drosophila &ndash BIOgraf: Pelíšky, 10.12. 19:00-22:30,
			Bistro Café Therapy, FB událost.
			<br><br>
			Nenašel jsi svoji odpověď? Podrobněji rozepsané informace najdeš <a href="http://wwwmod.pedf.cuni.cz/udeska/files/opatreni_dekana/opad_sor_spolky_final_31.8.2020.pdf" target="_blank">tady v článku VII.</a>
		</p>
	</div>
	<div class="col-5">
		<img src="/img/akce.jpg" style="height: auto; width: 100%;" alt="">
	</div>
</section>
<section class="row margin-5vh">
	<section class="col-1 hide-xs hide-sm"></section>
	<div class="col-5 bg-square" style="background-position: top center" id="odkazy">
		<h4>Odkazy a inspirace</h4>
		<hr class="thing-hr">
		<p style="font-size: calc(var(--font-size) / 1.8); margin-top: 5vh; text-align: justify">
			<a href="https://cuni.cz/UK-8518.html">Tady</a> najdeš spolky, které působí na UK.
			<br><br>
			Kurzy na různé dovednosti můžeš najít <a href="https://www.naucmese.cz" target="_blank">tady</a> a
			<a href="https://www.acsa.cz" target="_blank">tady.</a>
		</p>
		<h5 id="dalsi">A co ti radí předsedové našich formálních spolků?</h5>
		<hr class="thing-hr">
	</div>
</section>
<section class="row margin-5vh">
	<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="mySlides fade">
		    <div class="numbertext">1 / 3</div>
    		<div class="ytvid2"><iframe class="video_player" height="100%" width="85%" src="https://www.youtube.com/embed/spX8ZSjnXIo?enablejsapi=1" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe></div>
    		
    		<h6 style="font-size: calc(var(--font-size) / 1.9)">Lenka Nováková, předsedkyně spolku Agora</h6>
		  </div>

		  <div class="mySlides fade">
		    <div class="numbertext">2 / 3</div>
    		<div class="ytvid2"><iframe class="video_player" height="100%" width="85%" src="https://www.youtube.com/embed/YSlZibVjg7I?enablejsapi=1" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe></div>
    		
    		<h6 style="font-size: calc(var(--font-size) / 1.9)">Michala Chudobová, předsedkyně Pedagogického spolku Emil</h6>
		  </div>

		  <div class="mySlides fade">
		    <div class="numbertext">3 / 3</div>
    		<div class="ytvid2"><iframe class="video_player" height="100%" width="85%" src="https://www.youtube.com/embed/sQx3YF18t0Y?enablejsapi=1" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe></div>
    		
    		<h6 style="font-size: calc(var(--font-size) / 1.9)">Petr Holub, předseda spolku Drosophila</h6>
		  </div>

		  <!-- Next and previous buttons -->
		  <a class="prev" onclick="plusSlides(-1)">&#10094;</a>
		  <a class="next" onclick="plusSlides(1)">&#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>
		  <span class="dot" onclick="currentSlide(3)"></span>
		</div>
	</section>
	<script src="js/carousel.js"></script>
</section>
</main>

<UpArrow/>