TWEAK THE PAGE AND CUSTOM INVITES!
This commit is contained in:
parent
12186a0d08
commit
8f32672d6e
|
|
@ -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>
|
||||
|
|
@ -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>
|
||||
|
|
|
|||
|
|
@ -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;
|
||||
}
|
||||
}
|
||||
|
|
|
|||
Loading…
Reference in New Issue