You cannot select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
537 lines
14 KiB
Svelte
537 lines
14 KiB
Svelte
<style>
|
|
#plusko {
|
|
align-items: center;
|
|
justify-content: center;
|
|
display: flex;
|
|
cursor: pointer;
|
|
line-height: 1em;
|
|
z-index: 1011;
|
|
}
|
|
#plusko:hover {
|
|
}
|
|
#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: 20px !important;
|
|
transition: .2s ease;
|
|
}
|
|
.label2:hover {
|
|
}
|
|
.labels {
|
|
position: absolute;
|
|
left: auto;
|
|
right: auto;
|
|
top: auto;
|
|
bottom: auto;
|
|
width: 1200px;
|
|
height: 800px;
|
|
transform: scale(0.7);
|
|
}
|
|
/*.labels:hover > *:not(:hover) {
|
|
font-size: 0.45em;
|
|
}*/
|
|
.label a {
|
|
color: #000;
|
|
}
|
|
.label2 span {
|
|
transition: .1s;
|
|
}
|
|
.label2 span:hover {
|
|
border-bottom: solid 0.1em #d73648;
|
|
}
|
|
.label2 a:hover {
|
|
opacity: 1 !important;
|
|
}
|
|
.label span:hover ~ .cross {
|
|
display: none;
|
|
}
|
|
#cinnosti {
|
|
left: auto;
|
|
right: auto;
|
|
top: 70vh;
|
|
}
|
|
#predseda {
|
|
left: 200px;
|
|
top: 100px;
|
|
}
|
|
#prebiram {
|
|
right: 150px;
|
|
top: 150px;
|
|
}
|
|
#zapojit {
|
|
left: 150px;
|
|
top: 400px;
|
|
}
|
|
#zalozit {
|
|
top: 600px;
|
|
right: 170px;
|
|
}
|
|
#oborovky {
|
|
left: 300px;
|
|
top: 700px;
|
|
}
|
|
.active {
|
|
}
|
|
.cross {
|
|
width: 0.7em;
|
|
height: 0.7em;
|
|
position: relative;
|
|
}
|
|
.label.label2 span a {
|
|
padding: 0.5em;
|
|
}
|
|
|
|
.cross:before, .cross:after {
|
|
content: "";
|
|
position: absolute;
|
|
z-index: -1;
|
|
background: #d73648;
|
|
}
|
|
|
|
.cross:before {
|
|
left: 50%;
|
|
width: 20%;
|
|
margin-left: -5%;
|
|
height: 100%;
|
|
}
|
|
|
|
.cross:after {
|
|
top: 50%;
|
|
height: 20%;
|
|
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: calc(var(--font-size) / 1.7);
|
|
left: 5vw;
|
|
bottom: 5vh;
|
|
line-height: 1;
|
|
margin-bottom: 0;
|
|
}
|
|
.dotted {
|
|
border-top: dotted 1px;
|
|
}
|
|
@-webkit-keyframes rotating /* Safari and Chrome */ {
|
|
from {
|
|
-webkit-transform: rotate(0deg);
|
|
-o-transform: rotate(0deg);
|
|
transform: rotate(0deg);
|
|
}
|
|
to {
|
|
-webkit-transform: rotate(360deg);
|
|
-o-transform: rotate(360deg);
|
|
transform: rotate(360deg);
|
|
}
|
|
}
|
|
@keyframes rotating {
|
|
from {
|
|
-ms-transform: rotate(0deg);
|
|
-moz-transform: rotate(0deg);
|
|
-webkit-transform: rotate(0deg);
|
|
-o-transform: rotate(0deg);
|
|
transform: rotate(0deg);
|
|
}
|
|
to {
|
|
-ms-transform: rotate(360deg);
|
|
-moz-transform: rotate(360deg);
|
|
-webkit-transform: rotate(360deg);
|
|
-o-transform: rotate(360deg);
|
|
transform: rotate(360deg);
|
|
}
|
|
} .spinny {
|
|
opacity: 0;
|
|
}
|
|
|
|
#plusko:hover .spinny {
|
|
opacity: 1;
|
|
animation: rotating 2s linear infinite;
|
|
}
|
|
#plusko:hover .not-spinny {
|
|
opacity: 0;
|
|
}
|
|
@media screen and (max-width: 800px) {
|
|
#plusko {
|
|
display: none
|
|
}
|
|
#cinnosti {
|
|
left: auto;
|
|
right: auto;
|
|
top: 70vh;
|
|
}
|
|
#predseda {
|
|
top: 25vh;
|
|
width: calc(100% - 16em);
|
|
left: 0;
|
|
padding: 0;
|
|
padding-left: 20px;
|
|
}
|
|
#prebiram {
|
|
top: 37.5vh;
|
|
width: calc(100% - 16em);
|
|
left: 0;
|
|
padding: 0;
|
|
padding-left: 20px;
|
|
}
|
|
#zapojit {
|
|
top: 50vh;
|
|
width: calc(100% - 16em);
|
|
left: 0;
|
|
padding: 0;
|
|
padding-left: 20px;
|
|
}
|
|
#zalozit {
|
|
top: 62.5vh;
|
|
width: calc(100% - 16em);
|
|
left: 0;
|
|
padding: 0;
|
|
padding-left: 20px;
|
|
}
|
|
#oborovky {
|
|
top: 75vh;
|
|
width: calc(100% - 16em);
|
|
left: 0;
|
|
padding: 0;
|
|
padding-left: 20px;
|
|
}
|
|
.cross {
|
|
display: none;
|
|
width: 0 !important;
|
|
height: 0!important;
|
|
position: absolute;
|
|
}
|
|
.labels:hover > *:not(:hover) {
|
|
font-size: calc(var(--font-size) / 1.7);
|
|
}
|
|
#cinnosti,
|
|
#predseda,
|
|
#prebiram,
|
|
#zapojit,
|
|
#zalozit,
|
|
#oborovky {
|
|
border-radius: 4vw;
|
|
background-color: var(--color-primary);
|
|
color: #fff !important;
|
|
padding: 3rem 1rem;
|
|
margin-left: 8em;
|
|
margin-right: 8em;
|
|
text-align: center;
|
|
cursor: pointer;
|
|
}
|
|
.label.label2 span a {
|
|
font-size: calc(var(--font-size));
|
|
color: #fff;
|
|
}
|
|
svg {
|
|
display: none
|
|
}
|
|
.labels {
|
|
width: 100vw;
|
|
height: 100vh;
|
|
top: 0;
|
|
left: 0;
|
|
transform: scale(0.9);
|
|
}
|
|
}
|
|
</style>
|
|
|
|
<script>
|
|
import Logo from '../components/logo.svelte';
|
|
import anime from 'animejs/lib/anime.es.js';
|
|
import { onMount, afterUpdate } from 'svelte';
|
|
//import { watchResize } from 'svelte-watch-resize';
|
|
|
|
let clicked = false;
|
|
let what = {
|
|
"predseda" : [ 0, 0, 0, 0 ],
|
|
"prebiram" : [ 0, 0, 0, 0 ],
|
|
"zapojit" : [ 0, 0, 0, 0 ],
|
|
"zalozit" : [ 0, 0, 0, 0 ],
|
|
"oborovky" : [ 0, 0, 0, 0 ],
|
|
}
|
|
function clicked_fun() {
|
|
clicked = !clicked;
|
|
|
|
if (clicked) {
|
|
setTimeout(() => {
|
|
let predseda = document.getElementById("predseda");
|
|
let prebiram = document.getElementById("prebiram");
|
|
let zapojit = document.getElementById("zapojit");
|
|
let zalozit = document.getElementById("zalozit");
|
|
let oborovky = document.getElementById("oborovky");
|
|
let plusko = document.getElementById("plusko")
|
|
|
|
what["predseda"] = [ predseda.clientHeight, predseda.clientWidth, predseda.offsetLeft, predseda.offsetTop ];
|
|
what["prebiram"] = [ prebiram.clientHeight, prebiram.clientWidth, prebiram.offsetLeft, prebiram.offsetTop ];
|
|
what["zapojit"] = [ zapojit.clientHeight, zapojit.clientWidth, zapojit.offsetLeft, zapojit.offsetTop ];
|
|
what["zalozit"] = [ zalozit.clientHeight, zalozit.clientWidth, zalozit.offsetLeft, zalozit.offsetTop ];
|
|
what["oborovky"] = [ oborovky.clientHeight, oborovky.clientWidth, oborovky.offsetLeft, oborovky.offsetTop ];
|
|
what["plusko"] = [ plusko.clientHeight, plusko.clientWidth, plusko.offsetLeft, plusko.offsetTop ];
|
|
|
|
console.log(what);
|
|
}, 150);
|
|
}
|
|
}
|
|
|
|
function getOffset( el ) {
|
|
console.log(el);
|
|
var rect = el.getBoundingClientRect();
|
|
return {
|
|
left: rect.left + window.pageXOffset,
|
|
top: rect.top + window.pageYOffset,
|
|
width: rect.width || el.offsetWidth,
|
|
height: rect.height || el.offsetHeight
|
|
};
|
|
}
|
|
|
|
function connect(div1, div2, color, thickness) { // draw a line connecting elements
|
|
var off1 = getOffset(div1);
|
|
var off2 = getOffset(div2);
|
|
// bottom right
|
|
var x1 = off1.left + off1.width;
|
|
var y1 = off1.top + off1.height;
|
|
// top right
|
|
var x2 = off2.left + off2.width;
|
|
var y2 = off2.top;
|
|
// distance
|
|
var length = Math.sqrt(((x2-x1) * (x2-x1)) + ((y2-y1) * (y2-y1)));
|
|
// center
|
|
var cx = ((x1 + x2) / 2) - (length / 2);
|
|
var cy = ((y1 + y2) / 2) - (thickness / 2);
|
|
// angle
|
|
var angle = Math.atan2((y1-y2),(x1-x2))*(180 / Math.PI);
|
|
// make hr
|
|
var htmlLine = "<div style='padding:0px; margin:0px; height:" + thickness + "px; background-color:" + color + "; line-height:1px; position:absolute; left:" + cx + "px; top:" + cy + "px; width:" + length + "px; -moz-transform:rotate(" + angle + "deg); -webkit-transform:rotate(" + angle + "deg); -o-transform:rotate(" + angle + "deg); -ms-transform:rotate(" + angle + "deg); transform:rotate(" + angle + "deg);' />";// "
|
|
/**/
|
|
// alert(htmlLine);
|
|
document.body.innerHTML += htmlLine;
|
|
}
|
|
function vwTOpx(value) {
|
|
var w = window,
|
|
d = document,
|
|
e = d.documentElement,
|
|
g = d.getElementsByTagName('body')[0],
|
|
x = w.innerWidth || e.clientWidth || g.clientWidth,
|
|
y = w.innerHeight|| e.clientHeight|| g.clientHeight;
|
|
|
|
var result = (x*value) / 100;
|
|
document.getElementById("result_vw_px").innerHTML = result; // affichage du résultat (facultatif)
|
|
return result;
|
|
}
|
|
|
|
function vhTOpx(value) {
|
|
var w = window,
|
|
d = document,
|
|
e = d.documentElement,
|
|
g = d.getElementsByTagName('body')[0],
|
|
x = w.innerWidth || e.clientWidth || g.clientWidth,
|
|
y = w.innerHeight|| e.clientHeight|| g.clientHeight;
|
|
|
|
var result = (y*value) / 100;
|
|
return result;
|
|
}
|
|
|
|
function resize() {
|
|
if (document.querySelector("#predseda")) {
|
|
let predseda = document.getElementById("predseda");
|
|
let prebiram = document.getElementById("prebiram");
|
|
let zapojit = document.getElementById("zapojit");
|
|
let zalozit = document.getElementById("zalozit");
|
|
let oborovky = document.getElementById("oborovky");
|
|
let plusko = document.getElementById("plusko")
|
|
|
|
what["predseda"] = [ predseda.clientHeight, predseda.clientWidth, predseda.offsetLeft, predseda.offsetTop ];
|
|
what["prebiram"] = [ prebiram.clientHeight, prebiram.clientWidth, prebiram.offsetLeft, prebiram.offsetTop ];
|
|
what["zapojit"] = [ zapojit.clientHeight, zapojit.clientWidth, zapojit.offsetLeft, zapojit.offsetTop ];
|
|
what["zalozit"] = [ zalozit.clientHeight, zalozit.clientWidth, zalozit.offsetLeft, zalozit.offsetTop ];
|
|
what["oborovky"] = [ oborovky.clientHeight, oborovky.clientWidth, oborovky.offsetLeft, oborovky.offsetTop ];
|
|
what["plusko"] = [ plusko.clientHeight, plusko.clientWidth, plusko.offsetLeft, plusko.offsetTop ];
|
|
|
|
console.log(what);
|
|
}
|
|
}
|
|
|
|
onMount(() => {
|
|
if (window.innerWidth <= 800)
|
|
clicked = true;
|
|
})
|
|
</script>
|
|
|
|
<svelte:head>
|
|
<title>Spolky a SORky PedF UK | Chci se zapojit</title>
|
|
</svelte:head>
|
|
<!--<svelte:window use:watchResize={resize}/>-->
|
|
|
|
<Logo keep={true}/>
|
|
|
|
<main id="container">
|
|
<div id="plusko" class:active="{clicked}" on:click="{clicked_fun}">
|
|
{#if clicked}
|
|
<img src="/img/main-btn-active.png">
|
|
{:else}
|
|
<div style="position: relative">
|
|
<img src="/img/main-btn.png" class="not-spinny" style="height:60px; width: 60px">
|
|
<img src="/img/main-btn-spin.png" style="position:absolute; left:0; top: 0; height: 60px; width: 60px" class="spinny">
|
|
</div>
|
|
{/if}
|
|
</div>
|
|
|
|
{#if clicked }
|
|
<div class="labels">
|
|
<svg width="1200" height="800" style="position: absolute; left: 0; top: 0">
|
|
<line
|
|
x1="{what['predseda'][1] + what['predseda'][2]}"
|
|
y1="{what['predseda'][0] + what['predseda'][3]}"
|
|
x2="{what['zapojit'][2] + what['zapojit'][1]}"
|
|
y2="{what['zapojit'][3]}"
|
|
stroke="black"
|
|
stroke-dasharray="5,5"
|
|
/>
|
|
<line
|
|
x1="{what['zapojit'][2] + what['zapojit'][1]}"
|
|
y1="{what['zapojit'][3]}"
|
|
x2="{what['oborovky'][1] + what['oborovky'][2] - 7}"
|
|
y2="{what['oborovky'][3] + 10}"
|
|
stroke="black"
|
|
stroke-dasharray="5,5"
|
|
/>
|
|
<line
|
|
x1="{what['oborovky'][1] + what['oborovky'][2] - 7}"
|
|
y1="{what['oborovky'][3] + 10}"
|
|
x2="{what['zalozit'][2] + 10}"
|
|
y2="{what['zalozit'][3] + 5}"
|
|
stroke="black"
|
|
stroke-dasharray="5,5"
|
|
/>
|
|
<line
|
|
x1="{what['zalozit'][2] + 10}"
|
|
y1="{what['zalozit'][3] + 5}"
|
|
x2="{what['prebiram'][2] + 10}"
|
|
y2="{what['prebiram'][3] + what['prebiram'][0]}"
|
|
stroke="black"
|
|
stroke-dasharray="5,5"
|
|
/>
|
|
<line
|
|
x1="{what['prebiram'][2] + 10}"
|
|
y1="{what['prebiram'][3] + what['prebiram'][0]}"
|
|
x2="{what['predseda'][1] + what['predseda'][2]}"
|
|
y2="{what['predseda'][0] + what['predseda'][3]}"
|
|
stroke="black"
|
|
stroke-dasharray="5,5"
|
|
/>
|
|
|
|
<line
|
|
x1="{what['predseda'][1] + what['predseda'][2]}"
|
|
y1="{what['predseda'][0] + what['predseda'][3]}"
|
|
x2="{600}"
|
|
y2="{400}"
|
|
stroke="black"
|
|
stroke-dasharray="5,5"
|
|
/>
|
|
<line
|
|
x1="{what['zapojit'][2] + what['zapojit'][1]}"
|
|
y1="{what['zapojit'][3]}"
|
|
x2="{600}"
|
|
y2="{400}"
|
|
stroke="black"
|
|
stroke-dasharray="5,5"
|
|
/>
|
|
<line
|
|
x1="{what['oborovky'][1] + what['oborovky'][2] - 7}"
|
|
y1="{what['oborovky'][3] + 10}"
|
|
x2="{600}"
|
|
y2="{400}"
|
|
stroke="black"
|
|
stroke-dasharray="5,5"
|
|
/>
|
|
<line
|
|
x1="{what['zalozit'][2] + 10}"
|
|
y1="{what['zalozit'][3] + 5}"
|
|
x2="{600}"
|
|
y2="{400}"
|
|
stroke="black"
|
|
stroke-dasharray="5,5"
|
|
/>
|
|
<line
|
|
x1="{what['prebiram'][2] + 10}"
|
|
y1="{what['prebiram'][3] + what['prebiram'][0]}"
|
|
x2="{600}"
|
|
y2="{400}"
|
|
stroke="black"
|
|
stroke-dasharray="5,5"
|
|
/>
|
|
|
|
</svg>
|
|
<div class="label label2" id="predseda">
|
|
<span><a href="/predseda">Předseda spolku</a></span>
|
|
<div class="cross bottom-right"></div>
|
|
</div>
|
|
<div class="label label2" id="prebiram">
|
|
<span style="padding-right: 0.5em"><a href="/prebiram">Přebírám spolek</a></span>
|
|
<div class="cross bottom-left"></div>
|
|
</div>
|
|
<div class="label label2" id="zapojit">
|
|
<span><a href="/zapojit-se">Chci se zapojit</a></span>
|
|
<div class="cross top-right"></div>
|
|
</div>
|
|
<div class="label label2" id="zalozit">
|
|
<span style="padding-right: 0.5em"><a href="/zalozit-spolek">Chci založit spolek</a></span>
|
|
<div class="cross top-left"></div>
|
|
</div>
|
|
<div class="label label2" id="oborovky">
|
|
<span style="padding-right: 0.5em"><a href="/oborovky">Chci vědět víc o oborovkách</a></span>
|
|
<div class="cross top-right"></div>
|
|
</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>
|