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 += '

Unser Plan für die EinführungstageOur Plan for the Introductory Days

' + + 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 += `${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 += `${image[1]}` + }) + + 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 += ` +
+ English version + Deutsche Variante +
` +} + +})() 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