spolky/src/routes/index.svelte

<style>
	#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 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>

<Logo/>

<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 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="label" id="zapojit">
			<span><a href="/zapojit-se">Chci se zapojit</a></span>
			<div class="cross top-right"></div>
		</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>
		<img src="/svg/zobacek.svg" style="width:0.8em; height: 0.8em; position: absolute; left: 0; bottom: 0; margin-left: -0.5em; margin-bottom: -0.5em; fill: #d73648">
	</div>
</main>