diff --git a/bilingual.js b/bilingual.js
index d08cb04..6977aa0 100644
--- a/bilingual.js
+++ b/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);
}
/**
diff --git a/eets-wiai.css b/eets-wiai.css
index 08b6424..b64b5ba 100644
--- a/eets-wiai.css
+++ b/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;
+}
diff --git a/eets-wiai.js b/eets-wiai.js
index 1cc98d7..37e1eb8 100644
--- a/eets-wiai.js
+++ b/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);
diff --git a/howto.js b/howto.js
new file mode 100644
index 0000000..1bdbd5c
--- /dev/null
+++ b/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 += '
'
+
+ 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 += `
`
+ })
+
+ 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 += `
`
+ })
+
+ wrapper.innerHTML += 'Los geht\'s!Let\'s go!'
+
+ 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 += `
+`
+}
+
+})()
diff --git a/img/1-Grußworte-en.jpg b/img/1-Grußworte-en.jpg
new file mode 100755
index 0000000..904d8ce
Binary files /dev/null and b/img/1-Grußworte-en.jpg differ
diff --git a/img/1-Grußworte.jpg b/img/1-Grußworte.jpg
new file mode 100755
index 0000000..07b97f1
Binary files /dev/null and b/img/1-Grußworte.jpg differ
diff --git a/img/2-Facheinführungen-en.jpg b/img/2-Facheinführungen-en.jpg
new file mode 100755
index 0000000..a1b155f
Binary files /dev/null and b/img/2-Facheinführungen-en.jpg differ
diff --git a/img/2-Facheinführungen.jpg b/img/2-Facheinführungen.jpg
new file mode 100755
index 0000000..26b8dc2
Binary files /dev/null and b/img/2-Facheinführungen.jpg differ
diff --git a/img/3-Technik-en.jpg b/img/3-Technik-en.jpg
new file mode 100755
index 0000000..fa06bc0
Binary files /dev/null and b/img/3-Technik-en.jpg differ
diff --git a/img/3-Technik.jpg b/img/3-Technik.jpg
new file mode 100755
index 0000000..9f5dc9f
Binary files /dev/null and b/img/3-Technik.jpg differ
diff --git a/img/4-Stundenplan-en.jpg b/img/4-Stundenplan-en.jpg
new file mode 100755
index 0000000..7de4287
Binary files /dev/null and b/img/4-Stundenplan-en.jpg differ
diff --git a/img/4-Stundenplan.jpg b/img/4-Stundenplan.jpg
new file mode 100755
index 0000000..b50e85b
Binary files /dev/null and b/img/4-Stundenplan.jpg differ
diff --git a/img/5-Freunde-en.jpg b/img/5-Freunde-en.jpg
new file mode 100755
index 0000000..7bb77fd
Binary files /dev/null and b/img/5-Freunde-en.jpg differ
diff --git a/img/5-Freunde.jpg b/img/5-Freunde.jpg
new file mode 100755
index 0000000..67afbda
Binary files /dev/null and b/img/5-Freunde.jpg differ
diff --git a/img/6-Universität-en.jpg b/img/6-Universität-en.jpg
new file mode 100755
index 0000000..c2cb4c9
Binary files /dev/null and b/img/6-Universität-en.jpg differ
diff --git a/img/6-Universität.jpg b/img/6-Universität.jpg
new file mode 100755
index 0000000..a8213af
Binary files /dev/null and b/img/6-Universität.jpg differ