pedf
/
spolky
Archived
1
0
Fork 0
Code Pull Requests Releases Activity

pavucina tlacidla

Browse Source
master
Lukáš Hozda 4 years ago
parent cb3f2684b4
commit c4d19ed6e7
1 changed files with 152 additions and 93 deletions
Show Stats Download Patch File Download Diff File

245
src/routes/index.svelte
Unescape Escape View File

@ -5,6 +5,7 @@
display: flex; display: flex;
cursor: pointer; cursor: pointer;
line-height: 1em; line-height: 1em;
z-index: 1011;
} }
#plusko:hover { #plusko:hover {
} }
@ -28,9 +29,18 @@
.label2:hover { .label2:hover {
border: solid 0.1em #d73648; border: solid 0.1em #d73648;
} }
.labels:hover > *:not(:hover) { .labels {
font-size: 0.45em; position: absolute;
left: auto;
right: auto;
top: auto;
bottom: auto;
width: 1200px;
height: 800px;
} }
/*.labels:hover > *:not(:hover) {
font-size: 0.45em;
}*/
.label a { .label a {
color: #000; color: #000;
} }
@ -47,24 +57,24 @@
top: 70vh; top: 70vh;
} }
#predseda { #predseda {
left: 23vw; left: 200px;
top: 15vh; top: 100px;
} }
#prebiram { #prebiram {
left: 65vw; right: 150px;
top: 19vh; top: 150px;
} }
#zapojit { #zapojit {
left: 25vw; left: 150px;
top: 50vh; top: 400px;
} }
#zalozit { #zalozit {
top: 60vh; top: 600px;
left: 71vw; right: 170px;
} }
#oborovky { #oborovky {
left: 32vw; left: 300px;
top: 75vh; top: 700px;
} }
.active { .active {
} }
@ -73,6 +83,9 @@
height: 0.7em; height: 0.7em;
position: relative; position: relative;
} }
.label.label2 span a {
padding: 0.5em;
}
.cross:before, .cross:after { .cross:before, .cross:after {
content: ""; content: "";
@ -83,14 +96,14 @@
.cross:before { .cross:before {
left: 50%; left: 50%;
width: 10%; width: 20%;
margin-left: -5%; margin-left: -5%;
height: 100%; height: 100%;
} }
.cross:after { .cross:after {
top: 50%; top: 50%;
height: 10%; height: 20%;
margin-top: -5%; margin-top: -5%;
width: 100%; width: 100%;
} }
@ -130,6 +143,9 @@
line-height: 1; line-height: 1;
margin-bottom: 0; margin-bottom: 0;
} }
.dotted {
border-top: dotted 1px;
}
@-webkit-keyframes rotating /* Safari and Chrome */ { @-webkit-keyframes rotating /* Safari and Chrome */ {
from { from {
-webkit-transform: rotate(0deg); -webkit-transform: rotate(0deg);
@ -178,14 +194,14 @@
top: 70vh; top: 70vh;
} }
#predseda { #predseda {
top: 30vh; top: 25vh;
width: calc(100% - 16em); width: calc(100% - 16em);
left: 0; left: 0;
padding: 0; padding: 0;
padding-left: 20px; padding-left: 20px;
} }
#prebiram { #prebiram {
top: 40vh; top: 37.5vh;
width: calc(100% - 16em); width: calc(100% - 16em);
left: 0; left: 0;
padding: 0; padding: 0;
@ -199,14 +215,14 @@
padding-left: 20px; padding-left: 20px;
} }
#zalozit { #zalozit {
top: 60vh; top: 62.5vh;
width: calc(100% - 16em); width: calc(100% - 16em);
left: 0; left: 0;
padding: 0; padding: 0;
padding-left: 20px; padding-left: 20px;
} }
#oborovky { #oborovky {
top: 70vh; top: 75vh;
width: calc(100% - 16em); width: calc(100% - 16em);
left: 0; left: 0;
padding: 0; padding: 0;
@ -230,7 +246,7 @@
border-radius: 4vw; border-radius: 4vw;
background-color: var(--color-primary); background-color: var(--color-primary);
color: #fff !important; color: #fff !important;
padding: 3rem 9rem; padding: 3rem 1rem;
margin-left: 8em; margin-left: 8em;
margin-right: 8em; margin-right: 8em;
text-align: center; text-align: center;
@ -240,6 +256,15 @@
font-size: calc(var(--font-size)); font-size: calc(var(--font-size));
color: #fff; color: #fff;
} }
svg {
display: none
}
.labels {
width: 100vw;
height: 100vh;
top: 0;
left: 0;
}
} }
</style> </style>
@ -249,68 +274,34 @@
import { onMount, afterUpdate } from 'svelte'; import { onMount, afterUpdate } from 'svelte';
let clicked = false; let clicked = false;
//function drawLineXY(fromXY, toXY) { let what = {
// if(!lineElem) { "predseda" : [ 0, 0, 0, 0 ],
// lineElem = document.createElement('canvas'); "prebiram" : [ 0, 0, 0, 0 ],
// lineElem.style.position = "absolute"; "zapojit" : [ 0, 0, 0, 0 ],
// lineElem.style.zIndex = -100; "zalozit" : [ 0, 0, 0, 0 ],
// document.body.appendChild(lineElem); "oborovky" : [ 0, 0, 0, 0 ],
// }
// 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 img",
// rotate: {
// value: "+=180",
// duration: 300,
// direction: "alternate",
// },
//})
}
function unspin() {
//anime({
// targets: "#plusko img",
// rotate: {
// value: 0
// }
//});
} }
function clicked_fun() { function clicked_fun() {
clicked = !clicked; clicked = !clicked;
if (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);
} }
} }
@ -347,22 +338,6 @@
// alert(htmlLine); // alert(htmlLine);
document.body.innerHTML += htmlLine; document.body.innerHTML += htmlLine;
} }
//afterUpdate(() => {
// if (document.getElementById("predseda") !== null && document.getElementById("predseda") !== undefined) {
// 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")
// connect(predseda, plusko, "#000", "1");
// connect(prebiram, plusko, "#000", "1");
// connect(zapojit, plusko, "#000", "1");
// connect(zalozit, plusko, "#000", "1");
// connect(oborovky, plusko, "#000", "1");
// }
//});
function vwTOpx(value) { function vwTOpx(value) {
var w = window, var w = window,
d = document, d = document,
@ -401,7 +376,7 @@
<Logo keep={true}/> <Logo keep={true}/>
<main id="container"> <main id="container">
<div id="plusko" on:mouseover="{spin}" on:mouseout="{unspin}" class:active="{clicked}" on:click="{clicked_fun}"> <div id="plusko" class:active="{clicked}" on:click="{clicked_fun}">
{#if clicked} {#if clicked}
<img src="/img/main-btn-active.png"> <img src="/img/main-btn-active.png">
{:else} {:else}
@ -414,6 +389,90 @@
{#if clicked } {#if clicked }
<div class="labels"> <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"> <div class="label label2" id="predseda">
<span><a href="/predseda">Předseda spolku</a></span> <span><a href="/predseda">Předseda spolku</a></span>
<div class="cross bottom-right"></div> <div class="cross bottom-right"></div>