arti/22
1
0
Fork 0
Code Pull Requests Releases Activity

TWEAK THE PAGE AND CUSTOM INVITES!

Browse Source
This commit is contained in:
Arti Zirk 2017-07-21 13:32:52 +03:00
parent 12186a0d08
commit 8f32672d6e
4 changed files with 97 additions and 8 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

38
invite/gen.html Normal file
View File

@ -0,0 +1,38 @@
<!DOCTYPE html>
<html>
<meta charset="UTF-8">
<meta name=viewport content="width=device-width, initial-scale=1">
<input type="text" placeholder="Nice Name" id="nicename">
<input type="text" placeholder="name_invite.txt" id="filename">
<p>
<textarea rows="1" cols="100" readonly onclick="this.focus();this.select()" id="out">https://zirk.arti.ee/22/invite</textarea>
</p>
<script>
var nicename = document.getElementById("nicename");
var filename = document.getElementById("filename");
var out = document.getElementById("out");
nicename.addEventListener("input", newLink);
filename.addEventListener("input", newLink);
function newLink(e) {
var base = "https://zirk.arti.ee/22/invite/";
n = nicename.value;
f = filename.value;
if (f === "") {
//f = n.toLowerCase() + "_invite.txt";
f= "invite_from_arti_to_"+n.toLowerCase()+".txt";
filename.setAttribute("placeholder", f);
}
jsonObj = n;
jsonStr = JSON.stringify(jsonObj);
out.innerText = base + "?" + window.btoa(jsonStr);
}
</script>
</html>

34
invite/index.html
View File

@ -1,15 +1,24 @@
<!DOCTYPE html>
<html>
<meta charset="UTF-8">
<meta name=viewport content="width=device-width, initial-scale=1">
<meta name=viewport content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no"">
<meta property="og:title" content="Sünnipäeva kutse" />
<meta property="og:url" content="https://zirk.arti.ee/22/invite/" />
<meta property="og:image" content="https://zirk.arti.ee/22/og.png" />
<meta property="og:image:width" content="1200" />
<meta property="og:image:height" content="630" />
<link rel="stylesheet" type="text/css" href="style.css">
<div class="container">
<div class="slide">
<h1>18. august</h1>
<h1 id="t1">Tere!</h1>
</div>
<div class="slide">
<h1>Oled oodatud</h1>
<h1>18. augustil <br> kell 19:00 <br> oled oodatud</h1>
</div>
<div class="slide">
@ -27,8 +36,23 @@
</div>
<div class="slide">
<h1>Näeme 18. august</h1>
<small>:wq!</small>
<h1>Näeme</h1>
<h2>18. augustil kell 19:00</h2>
<small id="t2">:wq!</small>
</div>
<div class="slide">
<span>Rohkem infot Facebooki evendil.</span>
</div>
</div>
<script>
var jsonStr = window.atob(window.location.search.slice(1));
var jsonObj = JSON.parse(jsonStr);
var t1 = document.getElementById("t1");
t1.innerText = "Tere "+jsonObj+"!";
var t3 = document.getElementById("t3");
t2.innerText = ":wq! invite_from_arti_to_"+jsonObj.toLowerCase()+".txt";
</script>
</html>

33
invite/style.scss
View File

@ -1,8 +1,8 @@
$foreground: #FFFFFF;
$background: #000000;
$animation-length: 4s;
$animation-delay: $animation-length - 1.5;
$animation-length: 5s;
$animation-delay: $animation-length - 1.7;
$slide-count: 6;
* {
@ -51,6 +51,17 @@ h1 {
animation-name: slide-in;
animation-fill-mode: both;
h2 {
margin-bottom: 120px;
}
}
>:nth-child(#{$slide-count + 1}) {
animation-delay: $animation-delay* ($slide-count + 1);
animation-duration: $animation-length;
animation-name: slide-in-last;
animation-fill-mode: both;
h1 {
margin: 120px;
}
@ -65,6 +76,11 @@ h1 {
align-items: center;
justify-content: center;
flex-direction: column;
text-align: center;
img {
max-height: 80vh;
}
}
@keyframes slide-in-out {
@ -105,7 +121,18 @@ h1 {
opacity: 0;
}
30%, 100% {
transform: translateY(-30px);
transform: translateY(0);
opacity: 1;
}
}
@keyframes slide-in-last {
0% {
transform: translateY(300px);
opacity: 0;
}
30%, 100% {
transform: translateY(200px);
opacity: 1;
}
}

BIN
og.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 16 KiB