najdi ten svuj
parent
e6462d142b
commit
ba79317025
@ -0,0 +1,131 @@
|
|||||||
|
<style>
|
||||||
|
</style>
|
||||||
|
|
||||||
|
<script>
|
||||||
|
import { fade } from 'svelte/transition';
|
||||||
|
import Spolek from '../components/spolek.svelte';
|
||||||
|
export let selected = "hudba";
|
||||||
|
|
||||||
|
function click(n) {
|
||||||
|
console.log("click");
|
||||||
|
selected = n;
|
||||||
|
setTimeout(() => window.scrollTo({ left: 0, top: document.body.scrollHeight, behavior: 'smooth'}), 600);
|
||||||
|
setTimeout(() => console.log("timed lol"), 600);
|
||||||
|
}
|
||||||
|
</script>
|
||||||
|
|
||||||
|
<section class="row" style="margin-top: 5vh">
|
||||||
|
<div class="col flexy-boi">
|
||||||
|
<h5 style="color: var(--color-primary)"><b>Najdi ten svůj</b></h5>
|
||||||
|
</div>
|
||||||
|
</section>
|
||||||
|
<section class="row" style="margin-top: 5vh">
|
||||||
|
<div class="col-1"></div>
|
||||||
|
<div class="col flexy-boi">
|
||||||
|
<div class="horizontal-menu no-underline" style="position: relative; text-decoration: none !important; font-weight: 900;">
|
||||||
|
<span style="font-size: calc(var(--font-size) / 1.6)" on:click|preventDefault={() => click('hudba')}>Hudba</span>
|
||||||
|
<span style="font-size: calc(var(--font-size) / 1.6)" on:click|preventDefault={() => click('human')}>Humanitní</span>
|
||||||
|
<span style="font-size: calc(var(--font-size) / 1.6)" on:click|preventDefault={() => click('jazyky')}>Jazyky</span>
|
||||||
|
<span style="font-size: calc(var(--font-size) / 1.6)" on:click|preventDefault={() => click('pedag')}>Pedagogika</span>
|
||||||
|
<span style="font-size: calc(var(--font-size) / 1.6)" on:click|preventDefault={() => click('prirod')}>Přírodovědné</span>
|
||||||
|
<span style="font-size: calc(var(--font-size) / 1.6)" on:click|preventDefault={() => click('psych')}>Psychologie</span>
|
||||||
|
<span style="font-size: calc(var(--font-size) / 1.6)" on:click|preventDefault={() => click('sport')}>Sport</span>
|
||||||
|
<span style="font-size: calc(var(--font-size) / 1.6)" on:click|preventDefault={() => click('tech')}>Technika</span>
|
||||||
|
<span style="font-size: calc(var(--font-size) / 1.6)" on:click|preventDefault={() => click('umeni')}>Umění</span>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div class="col-1"></div>
|
||||||
|
</section>
|
||||||
|
<section class="row" style="margin-top: 3vh">
|
||||||
|
<div class="col-1"></div>
|
||||||
|
{#if selected == "hudba"}
|
||||||
|
<div class="col" transition:fade="{{delay: 250, duration: 300}}">
|
||||||
|
<Spolek href="https://pedf.cuni.cz/PEDF-386.html" name="SOR Hudební výchovy"/>
|
||||||
|
</div>
|
||||||
|
<div class="col" transition:fade="{{delay: 250, duration: 300}}">
|
||||||
|
</div>
|
||||||
|
<div class="col" transition:fade="{{delay: 250, duration: 300}}">
|
||||||
|
</div>
|
||||||
|
{:else if selected == "human"}
|
||||||
|
<div class="col" transition:fade="{{delay: 250, duration: 300}}">
|
||||||
|
<Spolek href="https://spolekagora.cz/" name="Agora"/>
|
||||||
|
</div>
|
||||||
|
<div class="col" transition:fade="{{delay: 250, duration: 300}}">
|
||||||
|
<Spolek href="http://kps.pedf.cuni.cz/" name="Na slovíčko"/>
|
||||||
|
</div>
|
||||||
|
<div class="col" transition:fade="{{delay: 250, duration: 300}}">
|
||||||
|
</div>
|
||||||
|
{:else if selected == "jazyky"}
|
||||||
|
<div class="col" transition:fade="{{delay: 250, duration: 300}}">
|
||||||
|
<Spolek href="https://pedf.cuni.cz/PEDF-386.html" name="SOR Anglického jazyka"/>
|
||||||
|
<Spolek href="https://pedf.cuni.cz/PEDF-386.html" name="SOR Německého jazyka"/>
|
||||||
|
</div>
|
||||||
|
<div class="col" transition:fade="{{delay: 250, duration: 300}}">
|
||||||
|
<Spolek href="https://pedf.cuni.cz/PEDF-386.html" name="SOR Českého jazyka"/>
|
||||||
|
</div>
|
||||||
|
<div class="col" transition:fade="{{delay: 250, duration: 300}}">
|
||||||
|
<Spolek href="https://pedf.cuni.cz/PEDF-386.html" name="SOR Francouzského jazyka"/>
|
||||||
|
</div>
|
||||||
|
{:else if selected == "pedag"}
|
||||||
|
<div class="col" transition:fade="{{delay: 250, duration: 300}}">
|
||||||
|
<Spolek href="https://pedf.cuni.cz/PEDF-386.html" name="SOR Učitelství pro 1. st. ZŠ"/>
|
||||||
|
<Spolek href="https://pedf.cuni.cz/PEDF-386.html" name="SOR PED"/>
|
||||||
|
</div>
|
||||||
|
<div class="col" transition:fade="{{delay: 250, duration: 300}}">
|
||||||
|
<Spolek href="https://pedf.cuni.cz/PEDF-386.html" name="SOR MŠ"/>
|
||||||
|
<Spolek href="http://pedagogickyspolekemil.cz/" name="Pedagogický spolek Emil"/>
|
||||||
|
</div>
|
||||||
|
<div class="col" transition:fade="{{delay: 250, duration: 300}}">
|
||||||
|
<Spolek href="https://pedf.cuni.cz/PEDF-386.html" name="SOR SPECPED"/>
|
||||||
|
<Spolek href="https://otevreno.org" name="SOR SPECPED"/>
|
||||||
|
</div>
|
||||||
|
{:else if selected == "prirod"}
|
||||||
|
<div class="col" transition:fade="{{delay: 250, duration: 300}}">
|
||||||
|
<Spolek href="https://pedf.cuni.cz/PEDF-386.html" name="SOR Biologie"/>
|
||||||
|
<Spolek href="https://pedf.cuni.cz/PEDF-386.html" name="SOR VZ"/>
|
||||||
|
</div>
|
||||||
|
<div class="col" transition:fade="{{delay: 250, duration: 300}}">
|
||||||
|
<Spolek href="https://pedf.cuni.cz/PEDF-386.html" name="SOR Chemie"/>
|
||||||
|
<Spolek href="http://drosophila.cz/" name="Drosophila"/>
|
||||||
|
</div>
|
||||||
|
<div class="col" transition:fade="{{delay: 250, duration: 300}}">
|
||||||
|
<Spolek href="https://pedf.cuni.cz/PEDF-386.html" name="SOR Matematiky"/>
|
||||||
|
</div>
|
||||||
|
{:else if selected == "psych"}
|
||||||
|
<div class="col" transition:fade="{{delay: 250, duration: 300}}">
|
||||||
|
<Spolek href="https://pedf.cuni.cz/PEDF-386.html" name="SOR Psychologie"/>
|
||||||
|
</div>
|
||||||
|
<div class="col" transition:fade="{{delay: 250, duration: 300}}">
|
||||||
|
</div>
|
||||||
|
<div class="col" transition:fade="{{delay: 250, duration: 300}}">
|
||||||
|
</div>
|
||||||
|
{:else if selected == "sport"}
|
||||||
|
<div class="col" transition:fade="{{delay: 250, duration: 300}}">
|
||||||
|
<Spolek href="https://pedf.cuni.cz/PEDF-386.html" name="SOR Tělocviku"/>
|
||||||
|
</div>
|
||||||
|
<div class="col" transition:fade="{{delay: 250, duration: 300}}">
|
||||||
|
</div>
|
||||||
|
<div class="col" transition:fade="{{delay: 250, duration: 300}}">
|
||||||
|
</div>
|
||||||
|
{:else if selected == "tech"}
|
||||||
|
<div class="col" transition:fade="{{delay: 250, duration: 300}}">
|
||||||
|
<Spolek href="https://pedf.cuni.cz/PEDF-386.html" name="SOR IT"/>
|
||||||
|
</div>
|
||||||
|
<div class="col" transition:fade="{{delay: 250, duration: 300}}">
|
||||||
|
<Spolek href="https://microlab.space" name="microlab"/>
|
||||||
|
</div>
|
||||||
|
<div class="col" transition:fade="{{delay: 250, duration: 300}}">
|
||||||
|
</div>
|
||||||
|
{:else if selected == "umeni"}
|
||||||
|
<div class="col" transition:fade="{{delay: 250, duration: 300}}">
|
||||||
|
<Spolek href="https://pedf.cuni.cz/PEDF-386.html" name="SOR VV"/>
|
||||||
|
</div>
|
||||||
|
<div class="col" transition:fade="{{delay: 250, duration: 300}}">
|
||||||
|
<Spolek href="https://www.facebook.com/spolekCult/" name="CULT"/>
|
||||||
|
</div>
|
||||||
|
<div class="col" transition:fade="{{delay: 250, duration: 300}}">
|
||||||
|
<Spolek href="https://www.facebook.com/LaVieBohemePedFUK/" name="La Vie Bohème"/>
|
||||||
|
</div>
|
||||||
|
{/if}
|
||||||
|
<div class="col-1"></div>
|
||||||
|
</section>
|
@ -0,0 +1,24 @@
|
|||||||
|
<style>
|
||||||
|
.container {
|
||||||
|
position: relative;
|
||||||
|
text-align: center;
|
||||||
|
color: white;
|
||||||
|
}
|
||||||
|
|
||||||
|
.bottom-left {
|
||||||
|
position: absolute;
|
||||||
|
bottom: 8px;
|
||||||
|
left: 16px;
|
||||||
|
}
|
||||||
|
</style>
|
||||||
|
|
||||||
|
<script>
|
||||||
|
export let href;
|
||||||
|
export let name;
|
||||||
|
export let img="/img/def-spolek.png"
|
||||||
|
</script>
|
||||||
|
|
||||||
|
<div class="container">
|
||||||
|
<a class="hover-man" href={href}><img src="{img}" alt="" style="width:100%; height: auto"></a>
|
||||||
|
<div class="bottom-left">{name}</div>
|
||||||
|
</div>
|
Reference in New Issue