TWEAK THE PAGE AND CUSTOM INVITES!
This commit is contained in:
parent
12186a0d08
commit
8f32672d6e
38
invite/gen.html
Normal file
38
invite/gen.html
Normal 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>
|
||||||
@ -1,15 +1,24 @@
|
|||||||
<!DOCTYPE html>
|
<!DOCTYPE html>
|
||||||
<html>
|
<html>
|
||||||
<meta charset="UTF-8">
|
<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">
|
<link rel="stylesheet" type="text/css" href="style.css">
|
||||||
<div class="container">
|
<div class="container">
|
||||||
<div class="slide">
|
<div class="slide">
|
||||||
<h1>18. august</h1>
|
<h1 id="t1">Tere!</h1>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<div class="slide">
|
<div class="slide">
|
||||||
<h1>Oled oodatud</h1>
|
<h1>18. augustil <br> kell 19:00 <br> oled oodatud</h1>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<div class="slide">
|
<div class="slide">
|
||||||
@ -27,8 +36,23 @@
|
|||||||
</div>
|
</div>
|
||||||
|
|
||||||
<div class="slide">
|
<div class="slide">
|
||||||
<h1>Näeme 18. august</h1>
|
<h1>Näeme</h1>
|
||||||
<small>:wq!</small>
|
<h2>18. augustil kell 19:00</h2>
|
||||||
|
<small id="t2">:wq!</small>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="slide">
|
||||||
|
<span>Rohkem infot Facebooki evendil.</span>
|
||||||
</div>
|
</div>
|
||||||
</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>
|
</html>
|
||||||
|
|||||||
@ -1,8 +1,8 @@
|
|||||||
$foreground: #FFFFFF;
|
$foreground: #FFFFFF;
|
||||||
$background: #000000;
|
$background: #000000;
|
||||||
|
|
||||||
$animation-length: 4s;
|
$animation-length: 5s;
|
||||||
$animation-delay: $animation-length - 1.5;
|
$animation-delay: $animation-length - 1.7;
|
||||||
$slide-count: 6;
|
$slide-count: 6;
|
||||||
|
|
||||||
* {
|
* {
|
||||||
@ -51,6 +51,17 @@ h1 {
|
|||||||
animation-name: slide-in;
|
animation-name: slide-in;
|
||||||
animation-fill-mode: both;
|
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 {
|
h1 {
|
||||||
margin: 120px;
|
margin: 120px;
|
||||||
}
|
}
|
||||||
@ -65,6 +76,11 @@ h1 {
|
|||||||
align-items: center;
|
align-items: center;
|
||||||
justify-content: center;
|
justify-content: center;
|
||||||
flex-direction: column;
|
flex-direction: column;
|
||||||
|
text-align: center;
|
||||||
|
|
||||||
|
img {
|
||||||
|
max-height: 80vh;
|
||||||
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
@keyframes slide-in-out {
|
@keyframes slide-in-out {
|
||||||
@ -105,7 +121,18 @@ h1 {
|
|||||||
opacity: 0;
|
opacity: 0;
|
||||||
}
|
}
|
||||||
30%, 100% {
|
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;
|
opacity: 1;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|||||||
Loading…
Reference in New Issue
Block a user