diff --git a/assets/css/home.css b/assets/css/home.css
index ef67dd8..f9fc1f0 100644
--- a/assets/css/home.css
+++ b/assets/css/home.css
@@ -66,17 +66,6 @@ section {
/* margin: 1em; */
}
-
-/* grid styles
-.grid {
- display: grid;
- grid-template-columns: repeat(auto-fill, minmax(18em, 1fr));
- gap: 1.5em;
- justify-items: center;
- align-items: center;
- width: 56em;
-} */
-
.row {
/* margin: 0 16em 0 16em; */
margin: 0 auto 0 auto;
@@ -86,7 +75,7 @@ section {
display: flex;
flex-direction: column;
text-align: center;
- background-color: lightgray;
+ background-color: var(--bg-secondary-color);
border-radius: 1em;
padding: 0.8em;
transition: all ease-in-out 0.2s;
diff --git a/assets/css/main.css b/assets/css/main.css
index e5e9fac..46febbc 100644
--- a/assets/css/main.css
+++ b/assets/css/main.css
@@ -14,6 +14,64 @@ body {
padding: 0.5em 1em 0.5em 1em;
} */
+nav {
+ display: flex;
+ gap: 1em;
+ position: fixed;
+ padding: 0.5em;
+ width: 100%;
+ transition: all 0.2s ease;
+ z-index: 99;
+}
+
+nav .button#navButton {
+ margin: 0;
+}
+
+/* nav .button.primary {
+ margin-left: auto;
+} */
+
+nav > .language-switcher {
+ display: flex;
+ justify-content: flex-end;
+ gap: 1em;
+ margin-left: auto;
+ width: 100%;
+}
+
+nav > .language-switcher > select {
+ width: 8em;
+}
+
+nav.scrolled {
+ background: var(--bg-color); /* Change as needed */
+ box-shadow: 0 2px 4px rgba(0,0,0,0.1); /* Example shadow, adjust as needed */
+}
+
+nav a.nav-logo {
+ display: flex;
+ justify-content: center;
+ align-items: center;
+ padding: 0.1em;
+ width: 2.5em;
+}
+
+nav a.nav-logo > img {
+ width: 100%;
+}
+
+nav .nav-container {
+ display: flex;
+ flex-direction: row;
+ gap: 1em;
+}
+
+.button.light {
+ border-color: white !important;
+ color: white;
+}
+
.content {
display: flex;
flex-direction: column;
@@ -34,4 +92,4 @@ div.notice {
div.notice p {
margin: 0;
-}
\ No newline at end of file
+}
diff --git a/assets/css/signup.css b/assets/css/signup.css
index d5a7090..7498749 100644
--- a/assets/css/signup.css
+++ b/assets/css/signup.css
@@ -40,10 +40,12 @@ button.nopadding {
}
.optional {
+ margin-left: 0.2em;
opacity: 0.75;
}
.required {
+ margin-left: 0.2em;
color: red;
}
diff --git a/assets/i18n/de.json b/assets/i18n/de.json
new file mode 100644
index 0000000..1498882
--- /dev/null
+++ b/assets/i18n/de.json
@@ -0,0 +1,75 @@
+{
+ "nav": {
+ "links": {
+ "git": "Git",
+ "forum": "Forum",
+ "signup": "Registrieren"
+ }
+ },
+ "home": {
+ "header": {
+ "welcome": "Willkommen an der TBZ Community!",
+ "description": "Eine von Lernenden geleitete Community für die Lernenden der Technischen Berufsschule Zürich zur Zusammenarbeit und Innovation."
+ },
+ "services": {
+ "title": "Dienstleistungen",
+ "subtitle": "Von Lernenden - für Lernenden gehosteten Dienste an der TBZ.",
+ "forum": {
+ "title": "Forum",
+ "description": "Trete den Unterhaltungen bei! Unser Forum ist deine go-to Destination für alles betreffend der TBZ."
+ },
+ "git": {
+ "title": "Git Forge",
+ "description": "Arbeite an deinen Projekten oder Modulen mit unserem Git Forge. Powered by Forgejo."
+ },
+ "sso": {
+ "title": "SSO",
+ "description": "Ein Konto für alle Sachen TBZ Community! Logge dich mit einem einheitlichem Konto ein, und vergiss es, überall einzeln Passwörter zu ändern."
+ }
+ },
+ "join": {
+ "title": "Worauf wartest du noch?",
+ "subtitle": "Bereit einzutauchen? Trete jetzt bei und beginne, zur TBZ Community Hub beizutragen."
+ },
+ "notice": {
+ "content": "Dies ist eine inoffizielle Community-Plattform, betrieben von Lerndenden für Lerndende der TBZ. Für Anfragen und Unterstützung, bitte kontaktiere uns hier."
+ },
+ "footer": {
+ "source": "Diese Webseite wurde mit dem chota CSS Framework erstellt. Den Quellcode dieser Seite findest du hier."
+ },
+ "buttons": {
+ "visit": "Besuchen",
+ "join": "Beitreten",
+ "explore": "Projekte erkunden"
+ }
+ },
+ "signup": {
+ "header": {
+ "title": "TBZ Community Registrierungsformular",
+ "back": "← Zurück"
+ },
+ "form": {
+ "labels": {
+ "fullname": "Vollständiger Name:",
+ "fullnamePlaceholder": "Vollständiger Name",
+ "username": "Benutzername:",
+ "usernamePlaceholder": "Benutzername",
+ "email": "E-Mail:",
+ "emailPlaceholder": "vollstaendiger.name@edu.tbz.ch",
+ "ssh": "SSH-Schlüssel:",
+ "sshPlaceholder": "ssh-ed25519 AAAAXXXXXXXYYYYYYYZZZZZZZ+00a"
+ },
+ "legends": {
+ "required": "*",
+ "requiredText": " = erforderlich",
+ "optional": "(optional)",
+ "optionalText": " = optional"
+ },
+ "legal": {
+ "codeofconduct": "Mit der Anmeldung erklärst du dich damit einverstanden, unseren Verhaltenskodex zu befolgen.
Kein Drama. Sei respektvoll. Hab Spass. Wir alle versuchen es, und wir sitzen alle im selben Boot :)",
+ "apprenticeVerify": "Ich besuche die TBZ und habe eine Lehre.",
+ "termsVerify": "Ich stimme zu, dass ich die Dienstbedingungen und die Datenschutzrichtlinie gelesen und verstanden habe."
+ }
+ }
+ }
+}
diff --git a/assets/i18n/en.json b/assets/i18n/en.json
new file mode 100644
index 0000000..63f8de3
--- /dev/null
+++ b/assets/i18n/en.json
@@ -0,0 +1,75 @@
+{
+ "nav": {
+ "links": {
+ "git": "Git",
+ "forum": "Forum",
+ "signup": "Sign Up"
+ }
+ },
+ "home": {
+ "header": {
+ "welcome": "Welcome to the TBZ Community!",
+ "description": "A student-driven hub for the students of the Technische Berufsschule Zürich to collaborate and innovate."
+ },
+ "services": {
+ "title": "Services",
+ "subtitle": "Services hosted by students, for students, at the TBZ.",
+ "forum": {
+ "title": "Forum",
+ "description": "Join the conversation! Our forum is your go-to destination for all things TBZ."
+ },
+ "git": {
+ "title": "Git Forge",
+ "description": "Collaborate on projects with our Git repository. Powered by Forgejo."
+ },
+ "sso": {
+ "title": "SSO",
+ "description": "One Account for all things TBZ Community! Log in with a singular account, and forget to re-set passwords individually (because you don't have to, anymore)."
+ }
+ },
+ "join": {
+ "title": "What're you waiting for?",
+ "subtitle": "Ready to dive in? Join us now and start contributing to the TBZ Community Hub."
+ },
+ "notice": {
+ "content": "This is an unofficial community platform run by students, for students of the TBZ. For inquiries and support, please contact us here."
+ },
+ "footer": {
+ "source": "This website's been made using the chota CSS framework. You can find this site's source code here."
+ },
+ "buttons": {
+ "visit": "Visit",
+ "join": "Join us",
+ "explore": "Explore Projects"
+ }
+ },
+ "signup": {
+ "header": {
+ "title": "TBZ Community Signup Form",
+ "back": "← Back"
+ },
+ "form": {
+ "labels": {
+ "fullname": "Full Name:",
+ "fullnamePlaceholder": "Full Name",
+ "username": "Username:",
+ "usernamePlaceholder": "Username",
+ "email": "Email:",
+ "emailPlaceholder": "full.name@edu.tbz.ch",
+ "ssh": "SSH-Key:",
+ "sshPlaceholder": "ssh-ed25519 AAAAXXXXXXXYYYYYYYZZZZZZZ+00a"
+ },
+ "legends": {
+ "required": "*",
+ "requiredText": " = required",
+ "optional": "(optional)",
+ "optionalText": " = optional"
+ },
+ "legal": {
+ "codeofconduct": "Signing up implies that you agree to abide by our code of conduct.
No drama. Be respectful. Have fun. We're all trying, and we're all in this together :)",
+ "apprenticeVerify": "I visit the TBZ and have an apprenticeship.",
+ "termsVerify": "I agree that I have read and understood the terms of service and privacy policy."
+ }
+ }
+ }
+}
\ No newline at end of file
diff --git a/assets/img/nav-logo.svg b/assets/img/nav-logo.svg
new file mode 100644
index 0000000..45c5a6b
--- /dev/null
+++ b/assets/img/nav-logo.svg
@@ -0,0 +1,17 @@
+
diff --git a/assets/js/dark-mode.js b/assets/js/dark-mode.js
new file mode 100644
index 0000000..dc1c80b
--- /dev/null
+++ b/assets/js/dark-mode.js
@@ -0,0 +1,4 @@
+if (window.matchMedia &&
+ window.matchMedia('(prefers-color-scheme: dark)').matches) {
+ document.body.classList.add('dark');
+}
\ No newline at end of file
diff --git a/assets/js/i18n.js b/assets/js/i18n.js
new file mode 100644
index 0000000..bcf8950
--- /dev/null
+++ b/assets/js/i18n.js
@@ -0,0 +1,57 @@
+function getTranslation(obj, path) {
+ return path.reduce((xs, x) => (xs && xs[x] !== undefined) ? xs[x] : undefined, obj);
+}
+
+function changeLanguage(lang) {
+ document.cookie = `lang=${lang};path=/;max-age=31536000;SameSite=None${window.location.protocol === 'https:' ? '; Secure' : ''}`;
+
+ fetch(`/assets/i18n/${lang}.json`)
+ .then(response => response.json())
+ .then(translations => {
+ document.querySelectorAll('[data-i18n]').forEach(elem => {
+ const keys = elem.getAttribute('data-i18n').split('.');
+ const translation = getTranslation(translations, keys);
+ if (translation !== undefined) {
+ elem.innerHTML = translation;
+ }
+ });
+
+ document.querySelectorAll('[data-i18n-placeholder]').forEach(elem => {
+ const keys = elem.getAttribute('data-i18n-placeholder').split('.');
+ const translation = getTranslation(translations, keys);
+ if (translation !== undefined) {
+ elem.placeholder = translation;
+ }
+ });
+ });
+
+ document.getElementById('languageSelect').value = lang;
+}
+
+
+function getCookie(name) {
+ let cookieArray = document.cookie.split(';');
+ for(let i = 0; i < cookieArray.length; i++) {
+ let cookiePair = cookieArray[i].split('=');
+ if(name == cookiePair[0].trim()) {
+ return decodeURIComponent(cookiePair[1]);
+ }
+ }
+ return null;
+}
+
+function initializeLanguage() {
+ const availableLanguages = ['en', 'de']; // Extend as necessary
+
+ let userLang = getCookie('lang');
+
+ if (!userLang) {
+ let systemLang = navigator.language.split('-')[0];
+ userLang = availableLanguages.includes(systemLang) ? systemLang : 'en';
+ }
+
+ changeLanguage(userLang);
+}
+
+// Run the initialization function when the page loads
+initializeLanguage();
diff --git a/assets/js/nav-scroll.js b/assets/js/nav-scroll.js
new file mode 100644
index 0000000..4dc39f4
--- /dev/null
+++ b/assets/js/nav-scroll.js
@@ -0,0 +1,17 @@
+window.addEventListener('scroll', function() {
+ const navbar = document.getElementById('navbar');
+ const buttons = document.querySelectorAll('#navButton'); // Select all nav buttons
+ if (window.scrollY > 0) {
+ navbar.classList.add('scrolled');
+ buttons.forEach(button => {
+ button.classList.remove('light');
+ button.classList.add('dark');
+ });
+ } else {
+ navbar.classList.remove('scrolled');
+ buttons.forEach(button => {
+ button.classList.remove('dark');
+ button.classList.add('light');
+ });
+ }
+});
diff --git a/index.html b/index.html
index f8d9fe9..406d5c5 100644
--- a/index.html
+++ b/index.html
@@ -3,7 +3,7 @@
A student-driven hub for the students of the Technische Berufsschule Zürich to collaborate and innovate.
+A student-driven hub for the students of the Technische Berufsschule Zürich to collaborate and innovate.
Services hosted by students, for students, at the TBZ.
+Services hosted by students, for students, at the TBZ.
Join the conversation! Our forum is your go-to destination for all things TBZ.
+Join the conversation! Our forum is your go-to destination for all things TBZ.
Collaborate on projects with our Git repository. Powered by Forgejo.
+Collaborate on projects with our Git repository. Powered by Forgejo.
Lorem Ipsum Dolor Sit Amet This Is Random Bullshit To Fill This Card.
+One Account for all things TBZ Community! Log in with a singular account, and forget to re-set passwords individually (because you don't have to, anymore).
Ready to dive in? Join us now and start contributing to the TBZ Community Hub.
+Ready to dive in? Join us now and start contributing to the TBZ Community Hub.