Add HowTo opening screen

bilingual.js

@@ -65,7 +65,7 @@ function initializeElements() {
 /**
  * Add the language chooser element to the top of the `contentArea`.
  */
-function addLanguageChooser() {
+function addLanguageChooser(targetElement = contentArea) {
 	let languageChooser = document.createElement('div');
 	languageChooser.classList.add('wiai-language-chooser');
 	
@@ -90,7 +90,7 @@ function addLanguageChooser() {
     languageChooserOptions.push(languageLink);
 	});
 
-	contentArea.prepend(languageChooser);
+	targetElement.prepend(languageChooser);
 }
 
 /**

eets-wiai.css

@@ -95,3 +95,73 @@ div.wiai-language-chooser .wiai-language-option.active {
 	background-color: rgb(0,69,125);
 	color: white;
 }
+
+/**
+ * HowTo Splash Page
+ * =================
+ */
+.wiai-eet-howto {
+	width: 100vw;
+	background: white;
+	padding: 4rem 2rem;
+	background-color: #efefef;
+	box-sizing: border-box;
+}
+
+.wiai-eet-howto-images {
+	width: 1500px;
+	max-width: 90vw;
+	display: grid;
+        grid-template-columns: repeat(3, 1fr);
+        grid-gap: 2rem;
+	margin: 0 auto;
+}
+
+@media screen and (max-width: 1000px) {
+	.wiai-eet-howto {
+		padding: 2rem 0;
+		width: 100%;
+	}
+
+	.wiai-eet-howto-images {
+		grid-template-columns: repeat(2, 1fr);
+		grid-gap: 1rem;
+	}
+}
+
+@media screen and (max-width: 600px) {
+        .wiai-eet-howto-images {
+                grid-template-columns: 1fr;
+        }
+}
+
+
+
+.wiai-eet-howto-header {
+	width: 1500px;
+	max-width: 90vw;
+	margin: 0 auto;
+	text-align: center;
+	margin-bottom: 2rem;
+}
+
+.wiai-eet-howto .wiai-eet-howto-image {
+	background: white;
+	width: 100%;
+}
+
+.wiai-eet-howto-cta {
+	display: block;
+	padding: 1rem;
+	background-color: #00457D !important;
+	color: white !important;
+	border: none;
+	border-radius: 0;
+	margin: 3rem auto 0 auto;
+	width: 13rem;
+	text-align: center;
+}
+
+.wiai-eet-howto-language-chooser {
+	text-align: center;
+}

eets-wiai.js

@@ -25,6 +25,13 @@ const quickLinks = [
                 url_english: "#",
                 icon: "calendar-alt"
         },
+	{
+		name_german: "Checkliste",
+		name_english: "Checklist",
+		url_german: "javascript:localStorage.removeItem('wiai-eet-howto-seen');window.location.reload()",
+		url_english: "javascript:localStorage.removeItem('wiai-eet-howto-seen');window.location.reload()",
+		icon: "list-ol"
+	},
 	{
                 name_german: "Hilfe & FAQ",
                 name_english: "Help & FAQ",
@@ -69,7 +76,10 @@ function addStylesheetTags() {
  * Add a link to all scripts.
  */
 function addScriptTags() {
-	['lib/fontawesome/attribution.js'].forEach(function (link) {
+	[
+		'lib/fontawesome/attribution.js',
+		'howto.js'
+	].forEach(function (link) {
 		let tag = document.createElement('script');
 		tag.src = URL + link;
 		document.body.appendChild(tag);

howto.js

@@ -0,0 +1,71 @@
+(function () {
+	const URL = "https://wiai.stuve-bamberg.de/vc-customization/"
+
+	if (!localStorage.getItem('wiai-eet-howto-seen')) {
+	window.addEventListener('load', function () {
+		const wrapper = document.createElement('div')
+		wrapper.classList.add('wiai-eet-howto')
+		document.getElementById('page').replaceWith(wrapper)
+		addLanguageChooser(wrapper)
+
+		wrapper.innerHTML += '<div class="wiai-eet-howto-header"><h1><span class="wiai-german">Unser Plan für die Einführungstage</span><span class="wiai-english">Our Plan for the Introductory Days</span></h1></div>'
+
+		const imageWrapper = document.createElement('div')
+		imageWrapper.classList.add('wiai-eet-howto-images')
+		wrapper.appendChild(imageWrapper)
+
+		const images = [
+			['/img/1-Grußworte.jpg', 'Grußworte ansehen: Verschiedene Gesichter der Fakultät brennen darauf, sich euch vorzustellen. Sie geben außerdem wichtige Infos für den erfolgreichen Start ins Studium.'],
+			['/img/2-Facheinführungen.jpg', 'Fächer kennenlernen: Damit die Selbstorganisation gut klappt, wird es Zeit, dass ihr euren Studiengang näher kennen lernt – gemeinsam mit euren Fachstudienberater:innen.'],
+			['/img/3-Technik.jpg', 'Technik einrichten: Viele IT-Dienste sollen euch das Studium hier einfach machen. Da das nicht immer gelingt, gibt es gleich zu Anfang eine ausführliche Einführung.'],
+			['/img/4-Stundenplan.jpg', 'Stundenplan erstellen: Jetzt seid ihr bereit, euren eigenen Stundenplan zu erstellen. Im Stundenplantutorium stehen euch hierfür Kommiliton:innen höherer Semester zur Seite.'],
+			['/img/5-Freunde.jpg', 'Freunde treffen: Die Hochschulgruppen der Universität, die Games Night, ein Buddyprogramm und vieles mehr laden zum Kennenlernen und Austauschen ein.'],
+			['/img/6-Universität.jpg', 'Universität erkunden: Die Fachschaft, die Studierendenvertretung und viele weitere Einrichtungen der Universität könnt ihr im VC und auf einer virtuellen Karte entdecken.']
+		]
+
+		images.forEach(function (image) {
+			imageWrapper.innerHTML += `<img class="wiai-eet-howto-image wiai-german" src="${URL}${image[0]}" alt="${image[1]}"/>`	
+		})
+
+		const englishImages = [
+                        ['/img/1-Grußworte-en.jpg', 'Welcome Adresses: The entire faculty is keen to meet you! A handfull of representatives will introduce themselves and give important information for starting your studies successfully.'],
+                        ['/img/2-Facheinführungen-en.jpg', 'Degree Programs: In order for you to have a good start, it is time to have a detailed look at your degree program. Your advisor will cover all relevant documents and regulations.'],
+                        ['/img/3-Technik-en.jpg', 'IT Services: There is a multitude of IT services to make your life easier. Sometimes, however, they don\'t, which is why we provide in-depth tutorials for you to get you going.'],
+                        ['/img/4-Stundenplan-en.jpg', 'Schedules: Now you are ready to create your own schedule. Our tutors will assist you and answer your questions in the live scheduling tutorials.'],
+                        ['/img/5-Freunde-en.jpg', 'Friendships: The university\'s student associations, the Games Night, and a buddy program will help you get in touch with fellow freshmen and other students.'],
+                        ['/img/6-Universität-en.jpg', 'University: Meet your “Fachschaft” (Student Council), and explore many university facilities (e.g., the university library) in the VC course or on our virtual map.']
+                ]
+
+		englishImages.forEach(function (image) {
+                        imageWrapper.innerHTML += `<img class="wiai-eet-howto-image wiai-english" src="${URL}${image[0]}" alt="${image[1]}"/>`
+                })
+
+		wrapper.innerHTML += '<a href="#" class="wiai-eet-howto-cta"><span class="wiai-german">Los geht\'s!</span><span class="wiai-english">Let\'s go!</span></a>'
+
+		document.querySelector('.wiai-eet-howto-cta').addEventListener('click', function (event) {
+			event.preventDefault()
+			localStorage.setItem('wiai-eet-howto-seen', true)
+			window.location.reload()
+		})
+	})
+	}
+
+const LANGUAGES = ['german', 'english'];
+const LANGUAGE_NAMES = {'german': 'Deutsch', 'english': 'English'};
+const LANGUAGE_PREFIXES = {'img[alt="German"]': 'german', 'img[alt="English"]': 'english'};
+
+
+/**
+ * Add a language chooser element to the top of the targetElement.
+ */
+function addLanguageChooser(targetElement) {
+	targetElement.innerHTML += `
+<div class="wiai-eet-howto-language-chooser">
+	<a href="javascript:document.body.classList.remove('wiai-language-german');document.body.classList.add('wiai-language-english')"
+		class="wiai-eet-howto-language-opion wiai-german">English version</a>
+	<a href="javascript:document.body.classList.remove('wiai-language-english');document.body.classList.add('wiai-language-german')"
+                class="wiai-eet-howto-language-opion wiai-english">Deutsche Variante</a>
+</div>`
+}
+
+})()