pedf
/
spolky
Archived
1
0
Fork 0

video stuff

master
Lukáš Hozda 4 years ago
parent bd1898c082
commit 1b93c13d26

5
package-lock.json generated

@ -1068,6 +1068,11 @@
"siema": "^1.5.1"
}
},
"@glidejs/glide": {
"version": "3.4.1",
"resolved": "https://registry.npmjs.org/@glidejs/glide/-/glide-3.4.1.tgz",
"integrity": "sha512-C34AEcK1HjSyxilRToUL54I6KAoodojUbeRlXoruobZuG0eGm8xfDL+3kgkWj7AJK4EZtunSOYfoqMp70eDtwg=="
},
"@polka/url": {
"version": "1.0.0-next.11",
"resolved": "https://registry.npmjs.org/@polka/url/-/url-1.0.0-next.11.tgz",

@ -12,6 +12,7 @@
"test": "run-p --race dev cy:run"
},
"dependencies": {
"@glidejs/glide": "^3.4.1",
"animejs": "^3.2.0",
"compression": "^1.7.1",
"polka": "next",

@ -1,14 +0,0 @@
<section class="row fullheight">
i
sa
da
d
da
sd
ads
sd
sad
sad
sa
</section>

@ -214,6 +214,10 @@
});
</script>
<svelte:head>
<title>PedF UK Spolky | </title>
</svelte:head>
<Logo/>
<main id="container">

@ -11,6 +11,10 @@
import ZjistiBtn from '../components/zjisti-vice.svelte';
</script>
<svelte:head>
<title>PedF UK Spolky | Přebírám spolek</title>
</svelte:head>
<MenuBtn/>
<main id="root">
@ -250,6 +254,10 @@
<p>
Aby toho všeho nebylo málo, tady máš rady od bývalých i současných předsedů:
</p>
<video class="smol-video" controls style="width: 100%; margin-top: 2vh">
<source src="/video/10_veru.mp4" type="video/webm">
Your browser does not support video.
</video>
</div>
</div>
</div>

@ -9,8 +9,17 @@
import UpArrow from '../components/up.svelte';
import MenuBtn from '../components/menu-btn.svelte';
import ZjistiBtn from '../components/zjisti-vice.svelte';
import { onMount } from 'svelte';
onMount(async () => {
window.currentSlide(1);
})
</script>
<svelte:head>
<title>PedF UK Spolky | Předseda spolku</title>
</svelte:head>
<MenuBtn/>
<main id="root">
@ -57,12 +66,12 @@
A jak na ní?
</h5>
<h5 style="padding-left: 4vw; margin-top:0" class="text-primary">
To ti řekne Verča
To ti řekne Nela
<h5>
</div>
<div class="col-5">
<video class="smol-video" controls>
<source src="/video/4_holka_pozvanka.mp4" type="video/webm">
<source src="/video/3_nela.mp4" type="video/webm">
Your browser does not support video.
</video>
</div>
@ -265,6 +274,7 @@ S tímhle ale přichází i nějaké povinnosti, které je potřeba dodržovat:
<a href="www.naucmese.cz">www.naucmese.cz</a> nebo na
<a href="https://www.acsa.cz">https://www.acsa.cz</a>
</p>
<h4>A jak to dělají další spolky na fakultě?</h4>
</div>
</section>
<section class="row" style="margin-top: 4vh" id="dalsi">
@ -276,31 +286,23 @@ S tímhle ale přichází i nějaké povinnosti, které je potřeba dodržovat:
<!-- Full-width images with number and caption text -->
<div class="mySlides fade">
<div class="numbertext">1 / 3</div>
<img src="img/trump.jpg" style="width:100%" alt="">
<div class="text">Caption Text</div>
<video class="smol-video" controls style="width: 100%">
<source src="/video/5_lenka.mp4" type="video/webm">
Your browser does not support video.
</video>
</div>
<div class="mySlides fade">
<div class="numbertext">2 / 3</div>
<img src="img/trump.jpg" style="width:100%" alt="">
<div class="text">Caption Two</div>
</div>
<div class="mySlides fade">
<div class="numbertext">3 / 3</div>
<img src="img/trump.jpg" style="width:100%" alt="">
<div class="text">Caption Three</div>
</div>
<div class="mySlides fade">
<div class="numbertext">3 / 3</div>
<img src="img/trump.jpg" style="width:100%" alt="">
<div class="text">Caption Three</div>
<video class="smol-video" controls style="width: 100%">
<source src="/video/4_holka_pozvanka.mp4" type="video/webm">
Your browser does not support video.
</video>
</div>
<!-- Next and previous buttons -->
<a class="prev" onclick="plusSlides(-1)" href="#0">&#10094;</a>
<a class="next" onclick="plusSlides(1)" href="#0">&#10095;</a>
<a class="prev" onclick="plusSlides(-1)" href="/predseda#0">&#10094;</a>
<a class="next" onclick="plusSlides(1)" href="/predseda#0">&#10095;</a>
</div>
<br>
@ -308,8 +310,6 @@ S tímhle ale přichází i nějaké povinnosti, které je potřeba dodržovat:
<div style="text-align:center">
<span class="dot" onclick="currentSlide(1)"></span>
<span class="dot" onclick="currentSlide(2)"></span>
<span class="dot" onclick="currentSlide(3)"></span>
<span class="dot" onclick="currentSlide(4)"></span>
</div>
</section>
<script src="js/carousel.js"></script>

@ -11,6 +11,10 @@
import ZjistiBtn from '../components/zjisti-vice.svelte';
</script>
<svelte:head>
<title>PedF UK Spolky | Založit spolek</title>
</svelte:head>
<MenuBtn/>
<main id="root">

@ -13,10 +13,19 @@
import MenuBtn from '../components/menu-btn.svelte';
import ZjistiBtn from '../components/zjisti-vice.svelte';
import Carousel from '@beyonk/svelte-carousel';
import { onMount } from 'svelte';
import Glide from '@glidejs/glide';
onMount(async () => {
new Glide('.glide').mount()
});
</script>
<MenuBtn/>
<svelte:head>
<title>PedF UK Spolky | Chci se zapojit</title>
</svelte:head>
<MenuBtn/>
<main id="root">
<section class="row fullheight">
<Logo/>
@ -147,12 +156,22 @@
</section>
<section class="row" style="margin-top: 4vh">
<section class="col">
<Carousel>
<img src="https://source.unsplash.com/random/600x300?a" alt="" style="width: 100%">
<img src="https://source.unsplash.com/random/600x300?s" alt="" style="width: 100%">
<img src="https://source.unsplash.com/random/600x300?c" alt="" style="width: 100%">
<img src="https://source.unsplash.com/random/600x300?v" alt="" style="width: 100%">
</Carousel>
<video class="smol-video" controls style="width: 100%">
<source src="/video/7_jana.mp4" type="video/webm">
Your browser does not support video.
</video>
</section>
<section class="col">
<video class="smol-video" controls style="width: 100%">
<source src="/video/8_stepan.mp4" type="video/webm">
Your browser does not support video.
</video>
</section>
<section class="col">
<video class="smol-video" controls style="width: 100%">
<source src="/video/1_verca_1.mp4" type="video/webm">
Your browser does not support video.
</video>
</section>
</section>
<section class="row" style="margin-top: 14vh">
@ -164,12 +183,28 @@
</section>
<section class="row" style="margin-top: 4vh">
<section class="col">
<Carousel>
<img src="https://source.unsplash.com/random/600x300?as" alt="" style="width: 100%">
<img src="https://source.unsplash.com/random/600x300?ss" alt="" style="width: 100%">
<img src="https://source.unsplash.com/random/600x300?cs" alt="" style="width: 100%">
<img src="https://source.unsplash.com/random/600x300?vs" alt="" style="width: 100%">
</Carousel>
<video class="smol-video" controls style="width: 100%">
<source src="/video/4_holka_pozvanka.mp4" type="video/webm">
Your browser does not support video.
</video>
</section>
<section class="col">
<video class="smol-video" controls style="width: 100%">
<source src="/video/6_petr.mp4" type="video/webm">
Your browser does not support video.
</video>
</section>
<section class="col">
<video class="smol-video" controls style="width: 100%">
<source src="/video/11_lenka_2.mp4" type="video/webm">
Your browser does not support video.
</video>
</section>
<section class="col">
<video class="smol-video" controls style="width: 100%">
<source src="/video/9_devce.mp4" type="video/webm">
Your browser does not support video.
</video>
</section>
</section>
<section class="row" style="margin-top: 5vh">

@ -13,6 +13,8 @@
<link href="/css/normalize.css" rel="stylesheet">
<link rel="stylesheet" href="https://unpkg.com/chota@latest">
<link href="/main.css" rel="stylesheet">
<link rel="stylesheet" href="/glide.core.min.css">
<link rel="stylesheet" href="/glide.theme.min.css">
%sapper.scripts%

@ -0,0 +1 @@
.glide{position:relative;width:100%;box-sizing:border-box}.glide *{box-sizing:inherit}.glide__track{overflow:hidden}.glide__slides{position:relative;width:100%;list-style:none;backface-visibility:hidden;transform-style:preserve-3d;touch-action:pan-Y;overflow:hidden;padding:0;white-space:nowrap;display:flex;flex-wrap:nowrap;will-change:transform}.glide__slides--dragging{user-select:none}.glide__slide{width:100%;height:100%;flex-shrink:0;white-space:normal;user-select:none;-webkit-touch-callout:none;-webkit-tap-highlight-color:transparent}.glide__slide a{user-select:none;-webkit-user-drag:none;-moz-user-select:none;-ms-user-select:none}.glide__arrows{-webkit-touch-callout:none;user-select:none}.glide__bullets{-webkit-touch-callout:none;user-select:none}.glide--rtl{direction:rtl}

@ -0,0 +1 @@
.glide__arrow{position:absolute;display:block;top:50%;z-index:2;color:white;text-transform:uppercase;padding:9px 12px;background-color:transparent;border:2px solid rgba(255,255,255,0.5);border-radius:4px;box-shadow:0 0.25em 0.5em 0 rgba(0,0,0,0.1);text-shadow:0 0.25em 0.5em rgba(0,0,0,0.1);opacity:1;cursor:pointer;transition:opacity 150ms ease, border 300ms ease-in-out;transform:translateY(-50%);line-height:1}.glide__arrow:focus{outline:none}.glide__arrow:hover{border-color:white}.glide__arrow--left{left:2em}.glide__arrow--right{right:2em}.glide__arrow--disabled{opacity:0.33}.glide__bullets{position:absolute;z-index:2;bottom:2em;left:50%;display:inline-flex;list-style:none;transform:translateX(-50%)}.glide__bullet{background-color:rgba(255,255,255,0.5);width:9px;height:9px;padding:0;border-radius:50%;border:2px solid transparent;transition:all 300ms ease-in-out;cursor:pointer;line-height:0;box-shadow:0 0.25em 0.5em 0 rgba(0,0,0,0.1);margin:0 0.25em}.glide__bullet:focus{outline:none}.glide__bullet:hover,.glide__bullet:focus{border:2px solid white;background-color:rgba(255,255,255,0.5)}.glide__bullet--active{background-color:white}.glide--swipeable{cursor:grab;cursor:-moz-grab;cursor:-webkit-grab}.glide--dragging{cursor:grabbing;cursor:-moz-grabbing;cursor:-webkit-grabbing}

@ -189,28 +189,35 @@ canvas {
margin-left: 2vw;
margin-top: 8vh;
}
.number-thing span {
.number-thing span,
.number-thing .down span {
color: var(--color-primary);
font-size: calc(var(--font-size) * 2.2);
}
.number-thing p {
font-size: calc(var(--font-size) / 2.3);
.number-thing p,
.number-thing .down p {
font-size: calc(var(--font-size) / 2);
margin-bottom: 0;
}
.number-thing li {
.number-thing li,
.number-thing .down li {
font-size: calc(var(--font-size) / 2);
text-align: justify;
}
.number-thing ol {
.number-thing ol,
.number-thing .down ol {
margin-top: 0;
margin-left: 2vw;
}
.number-thing ol li {
.number-thing ol li,
.number-thing .down ol li {
counter-increment: list;
list-style-type: none;
font-size: calc(var(--font-size) / 2);
position: relative;
}
.number-thing ol li:before {
.number-thing ol li:before,
.number-thing .down ol li:before {
font-size: 110%;
font-weight: 900;
color: var(--color-primary);

@ -185,21 +185,22 @@ body > canvas
margin-right: 2vw
margin-left: 2vw
margin-top: 8vh
& span
& span, & .down span
color var(--color-primary)
font-size calc(var(--font-size) * 2.2)
& p
font-size calc(var(--font-size) / 2.3)
& p, & .down p
font-size calc(var(--font-size) / 2)
margin-bottom 0
& li
& li, & .down li
font-size calc(var(--font-size) / 2)
text-align justify
& ol
& ol, & .down ol
margin-top 0
margin-left 2vw
& li
counter-increment: list
list-style-type: none;
font-size calc(var(--font-size) / 2)
position: relative;
&:before
font-size 110%