From 312b536944f035ea24deb0ec37ce8625ff132441 Mon Sep 17 00:00:00 2001 From: Stelian Tsekov Date: Wed, 6 Mar 2024 15:19:33 +0100 Subject: [PATCH] i18n + Navbar --- assets/css/home.css | 13 +------ assets/css/main.css | 60 ++++++++++++++++++++++++++++++++- assets/css/signup.css | 2 ++ assets/i18n/de.json | 75 +++++++++++++++++++++++++++++++++++++++++ assets/i18n/en.json | 75 +++++++++++++++++++++++++++++++++++++++++ assets/img/nav-logo.svg | 17 ++++++++++ assets/js/dark-mode.js | 4 +++ assets/js/i18n.js | 57 +++++++++++++++++++++++++++++++ assets/js/nav-scroll.js | 17 ++++++++++ index.html | 69 ++++++++++++++++++++++++------------- signup/index.html | 41 +++++++++++++--------- 11 files changed, 377 insertions(+), 53 deletions(-) create mode 100644 assets/i18n/de.json create mode 100644 assets/i18n/en.json create mode 100644 assets/img/nav-logo.svg create mode 100644 assets/js/dark-mode.js create mode 100644 assets/js/i18n.js create mode 100644 assets/js/nav-scroll.js 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 @@ - TBZ Community + TBZ Community @@ -11,52 +11,73 @@ +
-

Welcome to the TBZ Community!

-

A student-driven hub for the students of the Technische Berufsschule Zürich to collaborate and innovate.

+

Welcome to the TBZ Community!

+

A student-driven hub for the students of the Technische Berufsschule Zürich to collaborate and innovate.

-
-

Services

-

Services hosted by students, for students, at the TBZ.

+

Services

+

Services hosted by students, for students, at the TBZ.

-

Forum

-

Join the conversation! Our forum is your go-to destination for all things TBZ.

+

Forum

+

Join the conversation! Our forum is your go-to destination for all things TBZ.

- Visit + Visit
-

Git Forge

-

Collaborate on projects with our Git repository. Powered by Forgejo.

+

Git Forge

+

Collaborate on projects with our Git repository. Powered by Forgejo.

- Visit + Visit
-

Test

-

Lorem Ipsum Dolor Sit Amet This Is Random Bullshit To Fill This Card.

+

SSO

+

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).

- Visit + Visit
-

What're you waiting for?

-

Ready to dive in? Join us now and start contributing to the TBZ Community Hub.

+

What're you waiting for?

+

Ready to dive in? Join us now and start contributing to the TBZ Community Hub.

- Join us - Explore Projects + Join us + Explore Projects
-
-

This is an unofficial community platform run by students, for students of the TBZ. For inquiries and support, please contact us here.

-

This website's been made using the chota CSS framework. You can find this site's source code here.

-
- \ No newline at end of file + + + + + + diff --git a/signup/index.html b/signup/index.html index d63c189..e7fca85 100644 --- a/signup/index.html +++ b/signup/index.html @@ -21,42 +21,50 @@ - +