Add warning for Safari users

safari-warning.js

@@ -0,0 +1,32 @@
+const DISMISS_STORAGE_KEY = 'wiai-safari-warning-dismissed';
+const DISMISS_NOTIFICATION_ID = 'wiai-safari-warning';
+
+function dismissNotification(notification) {
+        window.localStorage.setItem(DISMISS_STORAGE_KEY, 1);
+        document.getElementById(DISMISS_NOTIFICATION_ID).style.display = 'none';
+}
+
+window.addEventListener('load', function () {
+	const isSafari = /^((?!chrome|android).)*safari/i.test(navigator.userAgent);
+	const dismissed = window.localStorage && window.localStorage.getItem(DISMISS_STORAGE_KEY) == 1;
+	if (isSafari && !dismissed) {
+		const notification = document.createElement('div');
+		notification.style.padding = '2rem 2rem 1rem 2rem';
+		notification.style.backgroundColor = 'white';
+		notification.style.textAlign = 'center';
+		notification.style.boxShadow = '0px 5px 10px rgba(0, 0, 0, .15)';
+		notification.style.border = '1px solid #efefef';
+		notification.id = DISMISS_NOTIFICATION_ID;
+
+		notification.innerHTML = '<p class="wiai-german">Du nutzt Safari und stellst Probleme beim Abspielen von Videos fest? '
+			+ 'Schau in unsere <a href="https://vc.uni-bamberg.de/mod/page/view.php?id=1122808">FAQs</a>. ' 
+			+ '<a href="javascript:dismissNotification();">(Verbergen)</a></p>'
+			+ '<p class="wiai-english">You are using Safari and encounter problems when playing videos? '
+			+ 'Have a look at our <a href="https://vc.uni-bamberg.de/course/view.php?id=45687#">FAQ</a>. '
+			+ '<a href="javascript:dismissNotification();">(Dismiss)</a></p>';
+
+		
+
+		document.querySelector('#section-0').appendChild(notification);
+	}
+});