Make bilingual version, organise pages
This commit is contained in:
Christoph Hagen
parent
0fbd1e59f5
commit
dca9daf219
@ -1,3 +1,11 @@
|
||||
[lang] {
|
||||
display: none;
|
||||
}
|
||||
|
||||
[lang=en] {
|
||||
display: unset;
|
||||
}
|
||||
|
||||
html {
|
||||
font-family: -apple-system, BlinkMacSystemFont, "SF Hello", "Helvetica Neue", Helvetica, Arial, Verdana, sans-serif;
|
||||
font-weight: 200;
|
||||
|
||||
@ -1,5 +1,21 @@
|
||||
var isPlaying = false;
|
||||
|
||||
var currentLang = 'de';
|
||||
if (window.navigator.language != 'de') {
|
||||
currentLang = 'en';
|
||||
}
|
||||
function localize() {
|
||||
let lang = ':lang(' + currentLang + ')';
|
||||
let show = '[lang]' + lang;
|
||||
document.querySelectorAll(show).forEach(function (node) {
|
||||
node.style.display = 'unset';
|
||||
});
|
||||
let hide = '[lang]:not(' + lang + ')';
|
||||
document.querySelectorAll(hide).forEach(function (node) {
|
||||
node.style.display = 'none';
|
||||
});
|
||||
}
|
||||
|
||||
function showRegisterForm() {
|
||||
document.getElementById("text-container").style.top = '2%'
|
||||
document.getElementById("register-button").style.opacity = 0
|
||||
@ -7,6 +23,7 @@ function showRegisterForm() {
|
||||
document.getElementById("name-form").style.display = 'inherit'
|
||||
document.getElementById("add-calender-event").style.display = 'none'
|
||||
document.getElementById("guest-name").focus()
|
||||
document.getElementById("info-button").style.display = 'none';
|
||||
if (!isPlaying) {
|
||||
playPause();
|
||||
}
|
||||
@ -42,6 +59,7 @@ async function participate(isParticipating) {
|
||||
let name = value.trim()
|
||||
document.getElementById("participation-buttons").style.display = 'none'
|
||||
document.getElementById("name-form").style.display = 'none'
|
||||
document.getElementById("info-button").style.display = 'inherit'
|
||||
console.log("Registering: " + name);
|
||||
if (isParticipating) {
|
||||
let registered = await performRequest(name, "register")
|
||||
@ -84,6 +102,14 @@ async function performRequest(name, path) {
|
||||
return false;
|
||||
}
|
||||
|
||||
function downloadCalender() {
|
||||
if (currentLang == 'de') {
|
||||
download('/festival/event.ics')
|
||||
} else {
|
||||
download('/festival/event-en.ics')
|
||||
}
|
||||
}
|
||||
|
||||
function download(file) {
|
||||
window.location = file
|
||||
}
|
||||
|
||||
@ -1,72 +0,0 @@
|
||||
<html>
|
||||
<head>
|
||||
<meta charset="utf-8" />
|
||||
<meta name="viewport" content="width=device-width initial-scale=1" />
|
||||
<!-- Prevent search engine indexing -->
|
||||
<meta name="robots" content="noindex" />
|
||||
|
||||
<link rel="shortcut icon" sizes="16x16 24x24 32x32 48x48 64x64" type="image/vnd.microsoft.icon" href="/festival/icons/festival.ico" />
|
||||
<link rel="apple-touch-icon" href="/festival/icons/festival.png" />
|
||||
<link rel="icon" href="/festival/icons/festival.png">
|
||||
|
||||
<title>CC Festival</title>
|
||||
<meta name="author" content="Christoph Hagen & Charlotte Strohofer" />
|
||||
<meta property="og:title" content="CC Festival" />
|
||||
<meta property="og:description" content="Presented by Charlotte & Christoph">
|
||||
<link rel="canonical" href="https://christophhagen.de/festival-en.html" />
|
||||
|
||||
<meta http-equiv="content-type" content="text/html; charset=UTF-8" />
|
||||
<link rel="stylesheet" type="text/css" href="assets/festival.css?v=1">
|
||||
<script src="assets/festival.js?v=10"></script>
|
||||
</head>
|
||||
<body>
|
||||
<div class="wrapper">
|
||||
<div class="bokeh">
|
||||
<div></div> <div></div> <div></div> <div></div> <div></div>
|
||||
<div></div> <div></div> <div></div> <div></div> <div></div>
|
||||
<div></div> <div></div> <div></div> <div></div> <div></div>
|
||||
<div></div> <div></div> <div></div> <div></div> <div></div>
|
||||
<div></div> <div></div> <div></div> <div></div> <div></div>
|
||||
<div></div> <div></div> <div></div> <div></div> <div></div>
|
||||
<div></div> <div></div> <div></div> <div></div> <div></div>
|
||||
<div></div> <div></div> <div></div> <div></div> <div></div>
|
||||
<div></div> <div></div> <div></div> <div></div> <div></div>
|
||||
<div></div> <div></div> <div></div> <div></div> <div></div>
|
||||
<div></div> <div></div> <div></div> <div></div> <div></div>
|
||||
<div></div> <div></div> <div></div> <div></div> <div></div>
|
||||
<div></div> <div></div> <div></div> <div></div> <div></div>
|
||||
<div></div> <div></div> <div></div> <div></div> <div></div>
|
||||
<div></div> <div></div> <div></div> <div></div> <div></div>
|
||||
<div></div> <div></div> <div></div> <div></div> <div></div>
|
||||
</div>
|
||||
<div class="centering">
|
||||
<div class="texts" id="text-container">
|
||||
<div class="title-text">CC Festival</div>
|
||||
<div class="date-text normal-text">30 July 2022 | 2 pm</div>
|
||||
<div class="location-text normal-text">Geiselwind, Germany</div>
|
||||
<div class="register-button button normal-text" id="register-button" onclick="showRegisterForm()">Register</div>
|
||||
<form class="name-form" id="name-form">
|
||||
<input type="text" id="guest-name" name="fname" placeholder="Enter your name">
|
||||
</form>
|
||||
<div class="participation-buttons" id="participation-buttons">
|
||||
<span class="not-participate-button button half-button normal-text" id="not-participate-button" onclick="participate(false)">Decline</span>
|
||||
<span class="participate-button button half-button normal-text" id="participate-button" onclick="participate(true)">Register</span>
|
||||
</div>
|
||||
<div class="error-text normal-text final-text" id="error-text">Registration failed</div>
|
||||
<div class="registered-text normal-text final-text" id="registered-text">Registration successful</div>
|
||||
<div class="declined-text normal-text final-text" id="declined-text">Invitation declined</div>
|
||||
<div class="add-calender-event button normal-text" id="add-calender-event" onclick="download('/festival/festival-en.ics')">Add to calendar</div>
|
||||
</div>
|
||||
<audio loop autoplay id="audio">
|
||||
<source src="/festival/since77.mp3" type="audio/mp3">
|
||||
</audio>
|
||||
<div class="music-control" onclick="playPause()">
|
||||
<img src="assets/play.svg" class="player-icon" id="play-button"/>
|
||||
<img src="assets/pause.svg" class="player-icon" id="pause-button"/>
|
||||
<div class="player-text" id="playing-text">Paul Kalkbrenner - Since 77</div>
|
||||
<div class="player-text" id="paused-text">Play music</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</body>
|
||||
</html>
|
||||
@ -12,12 +12,12 @@
|
||||
<title>CC Festival</title>
|
||||
<meta name="author" content="Christoph Hagen & Charlotte Strohofer" />
|
||||
<meta property="og:title" content="CC Festival" />
|
||||
<meta property="og:description" content="Presented by Charlotte & Christoph">
|
||||
<link rel="canonical" href="https://christophhagen.de/festival.html" />
|
||||
<meta property="og:description" content="Presented by Charlotte & Christoph" />
|
||||
<link rel="canonical" href="https://christophhagen.de/festival/register.html" />
|
||||
|
||||
<meta http-equiv="content-type" content="text/html; charset=UTF-8" />
|
||||
<link rel="stylesheet" type="text/css" href="assets/festival.css?v=2">
|
||||
<script src="assets/festival.js?v=10"></script>
|
||||
<link rel="stylesheet" type="text/css" href="assets/festival.css?v=3">
|
||||
<script src="assets/festival.js?v=11"></script>
|
||||
</head>
|
||||
<body>
|
||||
<div class="wrapper">
|
||||
@ -42,21 +42,54 @@
|
||||
<div class="centering">
|
||||
<div class="texts" id="text-container">
|
||||
<div class="title-text">CC Festival</div>
|
||||
<div class="date-text normal-text">30.Juli 2022 | 14:00 Uhr</div>
|
||||
<div class="location-text normal-text">Geiselwind</div>
|
||||
<div class="register-button button normal-text" id="register-button" onclick="showRegisterForm()">Registrieren</div>
|
||||
<div class="date-text normal-text">
|
||||
<span lang="de">30. Juli 2022</span>
|
||||
<span lang="en">30 July 2022</span>
|
||||
|
|
||||
<span lang="de">14:00 Uhr</span>
|
||||
<span lang="en">2 pm</span>
|
||||
</div>
|
||||
<div class="location-text normal-text">
|
||||
<span lang="de">Geiselwind</span>
|
||||
<span lang="en">Geiselwind, Germany</span>
|
||||
</div>
|
||||
<div class="register-button button normal-text" id="register-button" onclick="showRegisterForm()">
|
||||
<span lang="de">Registrieren</span>
|
||||
<span lang="en">Register</span>
|
||||
</div>
|
||||
<form class="name-form" id="name-form">
|
||||
<input type="text" id="guest-name" name="fname" placeholder="Namen eingeben">
|
||||
<input type="text" id="guest-name" name="fname" placeholder="Name">
|
||||
</form>
|
||||
<div class="participation-buttons" id="participation-buttons">
|
||||
<span class="not-participate-button button half-button normal-text" id="not-participate-button" onclick="participate(false)">Ablehnen</span>
|
||||
<span class="participate-button button half-button normal-text" id="participate-button" onclick="participate(true)">Zusagen</span>
|
||||
<span class="not-participate-button button half-button normal-text" id="not-participate-button" onclick="participate(false)">
|
||||
<span lang="de">Ablehnen</span>
|
||||
<span lang="en">Decline</span>
|
||||
</span>
|
||||
<span class="participate-button button half-button normal-text" id="participate-button" onclick="participate(true)">
|
||||
<span lang="de">Zusagen</span>
|
||||
<span lang="en">Register</span>
|
||||
</span>
|
||||
</div>
|
||||
<div class="error-text normal-text final-text" id="error-text">Registrierung fehlgeschlagen</div>
|
||||
<div class="registered-text normal-text final-text" id="registered-text">Registrierung erfolgreich</div>
|
||||
<div class="declined-text normal-text final-text" id="declined-text">Einladung abgelehnt</div>
|
||||
<div class="add-calender-event button-text" id="add-calender-event" onclick="download('/festival/festival.ics')">Kalendereintrag</div>
|
||||
<a class="button-text info-button" href="/festival/info.html">Mehr Infos</a>
|
||||
<div class="error-text normal-text final-text" id="error-text">
|
||||
<span lang="de">Registrierung fehlgeschlagen</span>
|
||||
<span lang="en">Registration failed</span>
|
||||
</div>
|
||||
<div class="registered-text normal-text final-text" id="registered-text">
|
||||
<span lang="de">Registrierung erfolgreich</span>
|
||||
<span lang="en">Registration successful</span>
|
||||
</div>
|
||||
<div class="declined-text normal-text final-text" id="declined-text">
|
||||
<span lang="de">Einladung abgelehnt</span>
|
||||
<span lang="en">Invitation declined</span>
|
||||
</div>
|
||||
<div class="add-calender-event button-text" id="add-calender-event" onclick="downloadCalender()">
|
||||
<span lang="de">Kalendereintrag</span>
|
||||
<span lang="en">Add to calendar</span>
|
||||
</div>
|
||||
<a class="button-text info-button" id="info-button" href="/festival/info.html">
|
||||
<span lang="de">Mehr Infos</span>
|
||||
<span lang="en">More info</span>
|
||||
</a>
|
||||
</div>
|
||||
<audio loop autoplay id="audio">
|
||||
<source src="/festival/since77.mp3" type="audio/mp3">
|
||||
@ -65,9 +98,13 @@
|
||||
<img src="assets/play.svg" class="player-icon" id="play-button"/>
|
||||
<img src="assets/pause.svg" class="player-icon" id="pause-button"/>
|
||||
<div class="player-text" id="playing-text">Paul Kalkbrenner - Since 77</div>
|
||||
<div class="player-text" id="paused-text">Musik</div>
|
||||
<div class="player-text" id="paused-text">
|
||||
<span lang="de">Musik</span>
|
||||
<span lang="en">Music</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<script>localize()</script>
|
||||
</body>
|
||||
</html>
|
||||
Loading…
Reference in New Issue
Block a user