|
|
|
|
@ -1,181 +1,242 @@
|
|
|
|
|
<style>
|
|
|
|
|
main {
|
|
|
|
|
background: none !important;
|
|
|
|
|
#plusko {
|
|
|
|
|
color: #d73648;
|
|
|
|
|
border: solid 0.1em;
|
|
|
|
|
border-color: #d73648;
|
|
|
|
|
border-radius: 50%;
|
|
|
|
|
width: 1em;
|
|
|
|
|
height: 1em;
|
|
|
|
|
align-items: center;
|
|
|
|
|
justify-content: center;
|
|
|
|
|
display: flex;
|
|
|
|
|
cursor: pointer;
|
|
|
|
|
line-height: 1em;
|
|
|
|
|
}
|
|
|
|
|
#plusko:hover {
|
|
|
|
|
color: #fff;
|
|
|
|
|
background-color: #d73648;
|
|
|
|
|
}
|
|
|
|
|
#container {
|
|
|
|
|
display: flex;
|
|
|
|
|
align-items: center;
|
|
|
|
|
justify-content: center;
|
|
|
|
|
height: 100vh;
|
|
|
|
|
width: 100vw;
|
|
|
|
|
}
|
|
|
|
|
#dots {
|
|
|
|
|
position: absolute;
|
|
|
|
|
height: 100vh;
|
|
|
|
|
width: 100vw;
|
|
|
|
|
}
|
|
|
|
|
.label {
|
|
|
|
|
position: absolute;
|
|
|
|
|
font-size: 0.5em;
|
|
|
|
|
transition: .2s ease;
|
|
|
|
|
}
|
|
|
|
|
.label:hover {
|
|
|
|
|
border: solid 0.1em #d73648;
|
|
|
|
|
}
|
|
|
|
|
.label a {
|
|
|
|
|
color: #000;
|
|
|
|
|
}
|
|
|
|
|
.label a:hover {
|
|
|
|
|
color: #d73648;
|
|
|
|
|
opacity: 1 !important;
|
|
|
|
|
}
|
|
|
|
|
.label span:hover ~ .cross {
|
|
|
|
|
display: none;
|
|
|
|
|
}
|
|
|
|
|
#cinnosti {
|
|
|
|
|
left: auto;
|
|
|
|
|
right: auto;
|
|
|
|
|
top: 70vh;
|
|
|
|
|
}
|
|
|
|
|
#predseda {
|
|
|
|
|
left: 23vw;
|
|
|
|
|
top: 15vh;
|
|
|
|
|
}
|
|
|
|
|
#prebiram {
|
|
|
|
|
left: 70vw;
|
|
|
|
|
top: 19vh;
|
|
|
|
|
}
|
|
|
|
|
#zapojit {
|
|
|
|
|
left: 33vw;
|
|
|
|
|
top: 75vh;
|
|
|
|
|
}
|
|
|
|
|
#zalozit {
|
|
|
|
|
top: 60vh;
|
|
|
|
|
left: 71vw;
|
|
|
|
|
}
|
|
|
|
|
.active {
|
|
|
|
|
background-color: #888 !important;
|
|
|
|
|
color: #fff !important;
|
|
|
|
|
border-color: #888 !important;
|
|
|
|
|
}
|
|
|
|
|
.cross {
|
|
|
|
|
width: 0.7em;
|
|
|
|
|
height: 0.7em;
|
|
|
|
|
position: relative;
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
.cross:before, .cross:after {
|
|
|
|
|
content: "";
|
|
|
|
|
position: absolute;
|
|
|
|
|
z-index: -1;
|
|
|
|
|
background: #d73648;
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
.cross:before {
|
|
|
|
|
left: 50%;
|
|
|
|
|
width: 10%;
|
|
|
|
|
margin-left: -5%;
|
|
|
|
|
height: 100%;
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
.cross:after {
|
|
|
|
|
top: 50%;
|
|
|
|
|
height: 10%;
|
|
|
|
|
margin-top: -5%;
|
|
|
|
|
width: 100%;
|
|
|
|
|
}
|
|
|
|
|
.bottom-right {
|
|
|
|
|
position: absolute;
|
|
|
|
|
right: 0;
|
|
|
|
|
bottom: 0;
|
|
|
|
|
margin-left: 90%;
|
|
|
|
|
margin-top: 5%;
|
|
|
|
|
}
|
|
|
|
|
.top-right {
|
|
|
|
|
position: absolute;
|
|
|
|
|
right: 0;
|
|
|
|
|
top: 0;
|
|
|
|
|
margin-left: 90%;
|
|
|
|
|
margin-bottom: 5%;
|
|
|
|
|
}
|
|
|
|
|
.bottom-left {
|
|
|
|
|
position: absolute;
|
|
|
|
|
left: 0;
|
|
|
|
|
bottom: 0;
|
|
|
|
|
margin-right: 110%;
|
|
|
|
|
margin-top: 5%;
|
|
|
|
|
}
|
|
|
|
|
.top-left {
|
|
|
|
|
position: absolute;
|
|
|
|
|
left: 0;
|
|
|
|
|
top: 0;
|
|
|
|
|
margin-right: 110%;
|
|
|
|
|
margin-bottom: 5%;
|
|
|
|
|
}
|
|
|
|
|
.pedftext {
|
|
|
|
|
position: absolute;
|
|
|
|
|
font-size: 0.5em;
|
|
|
|
|
left: 5vw;
|
|
|
|
|
bottom: 5vh;
|
|
|
|
|
line-height: 1;
|
|
|
|
|
margin-bottom: 0;
|
|
|
|
|
}
|
|
|
|
|
</style>
|
|
|
|
|
|
|
|
|
|
<script>
|
|
|
|
|
import Logo from '../components/logo.svelte';
|
|
|
|
|
import UpArrow from '../components/up.svelte';
|
|
|
|
|
import MenuBtn from '../components/menu-btn.svelte';
|
|
|
|
|
import anime from 'animejs/lib/anime.es.js';
|
|
|
|
|
import { onMount } from 'svelte';
|
|
|
|
|
|
|
|
|
|
let clicked = false;
|
|
|
|
|
//function drawLineXY(fromXY, toXY) {
|
|
|
|
|
// if(!lineElem) {
|
|
|
|
|
// lineElem = document.createElement('canvas');
|
|
|
|
|
// lineElem.style.position = "absolute";
|
|
|
|
|
// lineElem.style.zIndex = -100;
|
|
|
|
|
// document.body.appendChild(lineElem);
|
|
|
|
|
// }
|
|
|
|
|
// var leftpoint, rightpoint;
|
|
|
|
|
// if(fromXY.x < toXY.x) {
|
|
|
|
|
// leftpoint = fromXY;
|
|
|
|
|
// rightpoint = toXY;
|
|
|
|
|
// } else {
|
|
|
|
|
// leftpoint = toXY;
|
|
|
|
|
// rightpoint = fromXY;
|
|
|
|
|
// }
|
|
|
|
|
|
|
|
|
|
// var lineWidthPix = 4;
|
|
|
|
|
// var gutterPix = 10;
|
|
|
|
|
// var origin = {x:leftpoint.x-gutterPix,
|
|
|
|
|
// y:Math.min(fromXY.y, toXY.y)-gutterPix};
|
|
|
|
|
// lineElem.width = Math.max(rightpoint.x - leftpoint.x, lineWidthPix) +
|
|
|
|
|
// 2.0*gutterPix;
|
|
|
|
|
// lineElem.height = Math.abs(fromXY.y - toXY.y) + 2.0*gutterPix;
|
|
|
|
|
// lineElem.style.left = origin.x;
|
|
|
|
|
// lineElem.style.top = origin.y;
|
|
|
|
|
// var ctx = lineElem.getContext('2d');
|
|
|
|
|
// // Use the identity matrix while clearing the canvas
|
|
|
|
|
// ctx.save();
|
|
|
|
|
// ctx.setTransform(1, 0, 0, 1, 0, 0);
|
|
|
|
|
// ctx.clearRect(0, 0, lineElem.width, lineElem.height);
|
|
|
|
|
// ctx.restore();
|
|
|
|
|
// ctx.lineWidth = 4;
|
|
|
|
|
// ctx.strokeStyle = '#09f';
|
|
|
|
|
// ctx.beginPath();
|
|
|
|
|
// ctx.moveTo(fromXY.x - origin.x, fromXY.y - origin.y);
|
|
|
|
|
// ctx.lineTo(toXY.x - origin.x, toXY.y - origin.y);
|
|
|
|
|
// ctx.stroke();
|
|
|
|
|
//}
|
|
|
|
|
function spin() {
|
|
|
|
|
anime({
|
|
|
|
|
targets: "#plusko span",
|
|
|
|
|
rotate: {
|
|
|
|
|
value: "+=180",
|
|
|
|
|
duration: 300,
|
|
|
|
|
direction: "alternate",
|
|
|
|
|
},
|
|
|
|
|
})
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
function unspin() {
|
|
|
|
|
anime({
|
|
|
|
|
targets: "#plusko span",
|
|
|
|
|
rotate: {
|
|
|
|
|
value: 0
|
|
|
|
|
}
|
|
|
|
|
});
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
function clicked_fun() {
|
|
|
|
|
clicked = !clicked;
|
|
|
|
|
}
|
|
|
|
|
onMount(() => {
|
|
|
|
|
});
|
|
|
|
|
</script>
|
|
|
|
|
|
|
|
|
|
<MenuBtn/>
|
|
|
|
|
<Logo/>
|
|
|
|
|
|
|
|
|
|
<main id="root">
|
|
|
|
|
<section class="row fullheight">
|
|
|
|
|
<Logo/>
|
|
|
|
|
<div class="row" style="width: 100%">
|
|
|
|
|
<section class="col-1"></section>
|
|
|
|
|
<section class="col-5">
|
|
|
|
|
<div style="margin-top: 23vh">
|
|
|
|
|
<h1 style="margin-bottom: 5vh">Chci založit spolek</h1>
|
|
|
|
|
<hr class="gay-hr">
|
|
|
|
|
<h6 style="line-height: 1.4; margin-top: 5vh; font-size: calc(var(--font-size) / 1.55)">
|
|
|
|
|
Snažíme se podporovat vznik nových studentských spolků jak nejvíc to jde. Pro začátek trochu terminologie.
|
|
|
|
|
</h6>
|
|
|
|
|
<button type="button" class="button primary cool-button" style="margin-top: 1vh; border-radius: 4vw">
|
|
|
|
|
↓ Zjisti více
|
|
|
|
|
</button>
|
|
|
|
|
</div>
|
|
|
|
|
</section>
|
|
|
|
|
</div>
|
|
|
|
|
</section>
|
|
|
|
|
<section class="row" style="margin-top: 5vh">
|
|
|
|
|
<section class="col-1"></section>
|
|
|
|
|
<section class="col-6 bg-square bg-center">
|
|
|
|
|
<h2 style="margin-bottom: 1vh"><b>Formální</b></h2>
|
|
|
|
|
<hr class="gay-hr" style="margin-bottom: 5vh; ">
|
|
|
|
|
<p style="font-size: calc(var(--font-size) / 1.8); margin-left: 16vw">
|
|
|
|
|
Hodí se pro větší (nebo zamýšlené jako větší) spolky.
|
|
|
|
|
Výhody jsou hlavně větší pořádek díky stanovám v tom, kdo co vede.
|
|
|
|
|
Spolky mají obvykle radu, kontrolní komisi a volby do nich. Zároveň
|
|
|
|
|
se musíš oficiálně přihlásit k soudu a vést účetnictví. Se vším ti však pomůžeme
|
|
|
|
|
</p>
|
|
|
|
|
</section>
|
|
|
|
|
</section>
|
|
|
|
|
<section class="row" style="margin-top: 5vh">
|
|
|
|
|
<section class="col-5"></section>
|
|
|
|
|
<section class="col bg-circle bg-center bg-auto">
|
|
|
|
|
<h2 style="margin-left: 17vw; margin-bottom: 1vh"><b>Neformální</b></h2>
|
|
|
|
|
<hr class="gay-hr" style="margin-left: 17vw;margin-bottom: 5vh; ">
|
|
|
|
|
<p style="font-size: calc(var(--font-size) / 1.8); margin-right: 15vw">
|
|
|
|
|
Hodí se pro partu lidí, které spojují společné zájmy a koníčky, jako například divadlo.
|
|
|
|
|
Nemusí mít žádné volby, orgány a nemusí odevzdávat výroční zprávy.
|
|
|
|
|
</p>
|
|
|
|
|
</section>
|
|
|
|
|
<section class="col-1"></section>
|
|
|
|
|
</section>
|
|
|
|
|
<section class="row" style="margin-top: 5vh">
|
|
|
|
|
<div class="col-1"></div>
|
|
|
|
|
<div class="col-10 side-line" style="line-height: 1">
|
|
|
|
|
<div>
|
|
|
|
|
<h6 style="margin-bottom: 0"><b>Informace k založení neformálního spolku</b></h6>
|
|
|
|
|
<div>
|
|
|
|
|
</div>
|
|
|
|
|
</section>
|
|
|
|
|
<section class="row" style="margin-top: 5vh">
|
|
|
|
|
<div class="col-1"></div>
|
|
|
|
|
<div class="col">
|
|
|
|
|
<div class="number-gay">
|
|
|
|
|
<span>1.</span>
|
|
|
|
|
<p>Je třeba sehnat tolik a tolik lidí a zaregistrovat se tady - <a href="/#">formulář</a></p>
|
|
|
|
|
</div>
|
|
|
|
|
</div>
|
|
|
|
|
<div class="col">
|
|
|
|
|
<div style="height: 6vh"></div>
|
|
|
|
|
<div class="number-gay">
|
|
|
|
|
<span>2.</span>
|
|
|
|
|
<p>O granty můžeš žádat tady, až bude venku výzva (dáme ti vědět na email)</p>
|
|
|
|
|
</div>
|
|
|
|
|
</div>
|
|
|
|
|
<div class="col">
|
|
|
|
|
<div style="height: 12vh"></div>
|
|
|
|
|
<div class="number-gay">
|
|
|
|
|
<span>3.</span>
|
|
|
|
|
<p>Pamatuj ale, že všechny akce musíš nahlašovat tady - <a href="/#">odkaz</a></p>
|
|
|
|
|
</div>
|
|
|
|
|
</div>
|
|
|
|
|
<div class="col-1"></div>
|
|
|
|
|
</section>
|
|
|
|
|
<section class="row" style="margin-top: 5vh">
|
|
|
|
|
<div class="col-1"></div>
|
|
|
|
|
<div class="col-10" style="line-height: 1">
|
|
|
|
|
<div class="side-line">
|
|
|
|
|
<h6 style="margin-bottom: 0"><b>Informace k založení formálního spolku</b></h6>
|
|
|
|
|
</div>
|
|
|
|
|
<p style="font-size: calc(var(--font-size) / 1.8); margin-left:1.15vw; margin-top: 0.5vw">
|
|
|
|
|
Tady je to už trochu složitější, ale neboj se, zas tak hrozné to není
|
|
|
|
|
</p>
|
|
|
|
|
</div>
|
|
|
|
|
</section>
|
|
|
|
|
<section class="row" style="margin-top: 5vh">
|
|
|
|
|
<div class="col-1"></div>
|
|
|
|
|
<div class="col">
|
|
|
|
|
<div class="number-gay">
|
|
|
|
|
<div class="down">
|
|
|
|
|
<span>1.</span>
|
|
|
|
|
<h6 style="font-size: calc(var(--font-size) / 1.8)"><b>Nejdříve potřebuješ přípravný výbor, ten se musí skládat z alespoň 3 osob</b></h6>
|
|
|
|
|
</div>
|
|
|
|
|
</div>
|
|
|
|
|
<div class="number-gay">
|
|
|
|
|
<div class="down">
|
|
|
|
|
<span>4.</span>
|
|
|
|
|
<h6 style="font-size: calc(var(--font-size) / 1.8)"><b>Po registraci může článek oficiálně začít fungovat.</b></h6>
|
|
|
|
|
</div>
|
|
|
|
|
</div>
|
|
|
|
|
<div class="number-gay">
|
|
|
|
|
<div class="down">
|
|
|
|
|
<span>7.</span>
|
|
|
|
|
<h6 style="font-size: calc(var(--font-size) / 1.8)"><b>Základní předpisy</b></h6>
|
|
|
|
|
</div>
|
|
|
|
|
</div>
|
|
|
|
|
</div>
|
|
|
|
|
<div class="col">
|
|
|
|
|
<div style="height: 6vh"></div>
|
|
|
|
|
<div class="number-gay">
|
|
|
|
|
<div class="down">
|
|
|
|
|
<span>2.</span>
|
|
|
|
|
<h6 style="font-size: calc(var(--font-size) / 1.8)"><b>Je třeba sepsat osnovy</b></h6>
|
|
|
|
|
<p>
|
|
|
|
|
Jak to má Agora se můžeš podívat tady, Drosophila tady a Emil tady. Otevřeno má pobočkovou strukturu,
|
|
|
|
|
takže je to složitější, ale co kdyby.
|
|
|
|
|
</p>
|
|
|
|
|
</div>
|
|
|
|
|
</div>
|
|
|
|
|
<div class="number-gay">
|
|
|
|
|
<div class="down">
|
|
|
|
|
<span>5.</span>
|
|
|
|
|
<h6 style="font-size: calc(var(--font-size) / 1.8)"><b>Zajít do banky založit transparentní účet</b></h6>
|
|
|
|
|
</div>
|
|
|
|
|
</div>
|
|
|
|
|
<div class="number-gay">
|
|
|
|
|
<div class="down">
|
|
|
|
|
<span>8.</span>
|
|
|
|
|
<h6 style="font-size: calc(var(--font-size) / 1.8)"><b>Povinnosti a práva spolku</b></h6>
|
|
|
|
|
</div>
|
|
|
|
|
<main id="container">
|
|
|
|
|
<div id="plusko" on:mouseover="{spin}" on:mouseout="{unspin}" class:active="{clicked}" on:click="{clicked_fun}"><span>+</span></div>
|
|
|
|
|
|
|
|
|
|
{#if clicked}
|
|
|
|
|
<div class="label" id="predseda">
|
|
|
|
|
<span><a href="/predseda">Předseda spolku</a></span>
|
|
|
|
|
<div class="cross bottom-right"></div>
|
|
|
|
|
</div>
|
|
|
|
|
</div>
|
|
|
|
|
<div class="col">
|
|
|
|
|
<div style="height: 12vh"></div>
|
|
|
|
|
<div class="number-gay">
|
|
|
|
|
<div class="down">
|
|
|
|
|
<span>3.</span>
|
|
|
|
|
<h6 style="font-size: calc(var(--font-size) / 1.8)"><b>Po tomhle všem musíš vyplnit</b></h6>
|
|
|
|
|
<p>
|
|
|
|
|
<a href="/#">tenhle formulář</a>
|
|
|
|
|
</p>
|
|
|
|
|
</div>
|
|
|
|
|
<div class="label" id="prebiram">
|
|
|
|
|
<span style="padding-left: 0.5em; padding-right: 0.5em"><a href="/prebiram">Přebírám spolek</a></span>
|
|
|
|
|
<div class="cross bottom-left"></div>
|
|
|
|
|
</div>
|
|
|
|
|
<div class="number-gay">
|
|
|
|
|
<div class="down">
|
|
|
|
|
<span>6.</span>
|
|
|
|
|
<h6 style="font-size: calc(var(--font-size) / 1.8)"><b>Registrace jako fakultní spolek - <a href="/#">zde</a></b></h6>
|
|
|
|
|
</div>
|
|
|
|
|
<div class="label" id="zapojit">
|
|
|
|
|
<span><a href="/zapojit-se">Chci se zapojit</a></span>
|
|
|
|
|
<div class="cross top-right"></div>
|
|
|
|
|
</div>
|
|
|
|
|
<div class="number-gay">
|
|
|
|
|
<div class="down">
|
|
|
|
|
<span>9.</span>
|
|
|
|
|
<h6 style="font-size: calc(var(--font-size) / 1.8)"><b>Nahlašování akcí</b></h6>
|
|
|
|
|
<p>
|
|
|
|
|
Povinnosti a práva spolkuspolkem dělat se dělá tady:
|
|
|
|
|
<a href="/#">formulář nahlašování akcí</a>
|
|
|
|
|
</p>
|
|
|
|
|
</div>
|
|
|
|
|
<div class="label" id="zalozit">
|
|
|
|
|
<span style="padding-left: 0.5em; padding-right: 0.5em"><a href="/zalozit">Chci založit spolek</a></span>
|
|
|
|
|
<div class="cross top-left"></div>
|
|
|
|
|
</div>
|
|
|
|
|
{:else }
|
|
|
|
|
<span class="label" id="cinnosti">Činnosti ve spolcích</span>
|
|
|
|
|
{/if}
|
|
|
|
|
<canvas id="dots">
|
|
|
|
|
</canvas>
|
|
|
|
|
|
|
|
|
|
<div class="pedftext">
|
|
|
|
|
<p>Pedagogická fakulta</p>
|
|
|
|
|
<b style="color: #d73648">Univerzita Karlova</b>
|
|
|
|
|
</div>
|
|
|
|
|
<div class="col-1"></div>
|
|
|
|
|
</section>
|
|
|
|
|
</main>
|
|
|
|
|
|
|
|
|
|
<UpArrow/>
|
|
|
|
|
|
