Compare commits

...
2 Commits
Author SHA1 Message Date
stefan.tollkuehn 67d7702f40 - make navbar look nicer
- use formal german
2026-09-30 23:18:09 +02:00
stefan.tollkuehn f4c4103c3d make background of .card opaque 2026-09-30 23:08:31 +02:00
+40 -24
View File
@@ -34,18 +34,24 @@
.navbar { .navbar {
position: fixed; position: fixed;
top: 16px; top: 16px;
right: 16px; left: 2%;
width: 96%;
box-sizing: border-box;
z-index: 100; z-index: 100;
display: flex; display: flex;
align-items: flex-start; align-items: center;
gap: 8px; gap: 8px;
padding: 15px;
background: rgba(255, 255, 255, 0.2);
-webkit-backdrop-filter: blur(7px);
backdrop-filter: blur(7px);
border-radius: 14px;
box-shadow: 0 2px 8px rgba(0, 0, 0, 0.30), 0 12px 40px rgba(0, 0, 0, 0.45);
} }
.logo-bar { .logo-bar {
position: fixed; display: flex;
top: 16px; align-items: center;
left: 16px;
z-index: 100;
} }
.logo-bar img { .logo-bar img {
@@ -54,6 +60,13 @@
width: auto; width: auto;
} }
.nav-actions {
display: flex;
align-items: center;
gap: 8px;
margin-left: auto;
}
.lang-menu { .lang-menu {
position: relative; position: relative;
} }
@@ -110,7 +123,9 @@
box-sizing: border-box; box-sizing: border-box;
width: min(600px, calc(100% - 32px)); width: min(600px, calc(100% - 32px));
padding: 32px; padding: 32px;
background: white; background: rgba(255, 255, 255, 0.2);
-webkit-backdrop-filter: blur(7px);
backdrop-filter: blur(7px);
border-radius: 14px; border-radius: 14px;
box-shadow: 0 2px 8px rgba(0, 0, 0, 0.30), 0 12px 40px rgba(0, 0, 0, 0.45); box-shadow: 0 2px 8px rgba(0, 0, 0, 0.30), 0 12px 40px rgba(0, 0, 0, 0.45);
text-align: center; text-align: center;
@@ -248,7 +263,7 @@
} }
:root.dark .card { :root.dark .card {
background: #242424; background: rgba(36, 36, 36, 0.72);
} }
:root.dark .lang-dropdown { :root.dark .lang-dropdown {
@@ -301,11 +316,11 @@
</head> </head>
<body> <body>
<nav id="logoBar" class="logo-bar hidden">
<img id="logoImage" src="" alt="Logo">
</nav>
<nav class="navbar"> <nav class="navbar">
<div id="logoBar" class="logo-bar hidden">
<img id="logoImage" src="" alt="Logo">
</div>
<div class="nav-actions">
<a class="button secondary" href="https://www.bnvb-ingenieure.de/impressum" target="_blank" rel="noopener noreferrer" data-i18n="impressum"> <a class="button secondary" href="https://www.bnvb-ingenieure.de/impressum" target="_blank" rel="noopener noreferrer" data-i18n="impressum">
Impressum Impressum
</a> </a>
@@ -330,6 +345,7 @@
<path d="M12 2v2m0 16v2M4.9 4.9l1.4 1.4m11.4 11.4 1.4 1.4M2 12h2m16 0h2M4.9 19.1l1.4-1.4M17.7 6.3l1.4-1.4"/> <path d="M12 2v2m0 16v2M4.9 4.9l1.4 1.4m11.4 11.4 1.4 1.4M2 12h2m16 0h2M4.9 19.1l1.4-1.4M17.7 6.3l1.4-1.4"/>
</svg> </svg>
</button> </button>
</div>
</nav> </nav>
<div class="container"> <div class="container">
@@ -703,42 +719,42 @@
windows: { windows: {
title: "Jitsi Meet für Windows", title: "Jitsi Meet für Windows",
description: description:
"Installiere den Jitsi Meet Desktop-Client und versuche anschließend erneut, das Meeting zu öffnen.", "Installieren Sie den Jitsi Meet Desktop-Client und versuchen Sie anschließend erneut, das Meeting zu öffnen.",
button: "Jitsi für Windows herunterladen" button: "Jitsi für Windows herunterladen"
}, },
macos: { macos: {
title: "Jitsi Meet für macOS", title: "Jitsi Meet für macOS",
description: description:
"Installiere den Jitsi Meet Desktop-Client und versuche anschließend erneut, das Meeting zu öffnen.", "Installieren Sie den Jitsi Meet Desktop-Client und versuchen Sie anschließend erneut, das Meeting zu öffnen.",
button: "Jitsi für macOS herunterladen" button: "Jitsi für macOS herunterladen"
}, },
linux: { linux: {
title: "Jitsi Meet für Linux", title: "Jitsi Meet für Linux",
description: description:
"Installiere den Jitsi Meet Desktop-Client und versuche anschließend erneut, das Meeting zu öffnen.", "Installieren Sie den Jitsi Meet Desktop-Client und versuchen Sie anschließend erneut, das Meeting zu öffnen.",
button: "Jitsi für Linux herunterladen" button: "Jitsi für Linux herunterladen"
}, },
other: { other: {
title: "Jitsi Meet Desktop", title: "Jitsi Meet Desktop",
description: description:
"Für dein Betriebssystem ist kein Desktop-Download hinterlegt." "Für Ihr Betriebssystem ist kein Desktop-Download hinterlegt."
} }
}, },
browser: { browser: {
title: "Im Browser teilnehmen", title: "Im Browser teilnehmen",
description: description:
"Du kannst dem Meeting auch direkt über deinen Browser beitreten.", "Sie können dem Meeting auch direkt über Ihren Browser beitreten.",
button: "Im Browser beitreten" button: "Im Browser beitreten"
}, },
error: { error: {
title: "Kein Meeting angegeben", title: "Kein Meeting angegeben",
description: description:
"Bitte gib ein Meeting über den Parameter", "Bitte geben Sie ein Meeting über den Parameter",
descriptionSuffix: "an.", descriptionSuffix: "an.",
invalidTitle: "Ungültiger Meeting-Name", invalidTitle: "Ungültiger Meeting-Name",
invalidDescription: "Erlaubt sind nur Buchstaben, Zahlen und Bindestriche:" invalidDescription: "Erlaubt sind nur Buchstaben, Zahlen und Bindestriche:"
@@ -753,16 +769,16 @@
meetingOrganizerLabel: "Organisator E-Mail", meetingOrganizerLabel: "Organisator E-Mail",
createButton: "Meeting erstellen", createButton: "Meeting erstellen",
cancelButton: "Abbrechen", cancelButton: "Abbrechen",
successMessage: "Meeting erstellt! Lade deine Kalenderdatei herunter.", successMessage: "Meeting erstellt! Laden Sie Ihre Kalenderdatei herunter.",
downloadButton: "ICS-Datei herunterladen", downloadButton: "ICS-Datei herunterladen",
createNewButton: "Neues Meeting erstellen", createNewButton: "Neues Meeting erstellen",
meetingNameRequired: "Bitte gib einen Meeting-Namen ein", meetingNameRequired: "Bitte geben Sie einen Meeting-Namen ein",
meetingNameInvalid: "Der Meeting-Name darf nur Buchstaben, Zahlen und Bindestriche enthalten", meetingNameInvalid: "Der Meeting-Name darf nur Buchstaben, Zahlen und Bindestriche enthalten",
startTimeRequired: "Bitte wähle eine Startzeit", startTimeRequired: "Bitte wählen Sie eine Startzeit",
endTimeRequired: "Bitte wähle eine Endzeit", endTimeRequired: "Bitte wählen Sie eine Endzeit",
endAfterStart: "Die Endzeit muss nach der Startzeit liegen", endAfterStart: "Die Endzeit muss nach der Startzeit liegen",
organizerRequired: "Bitte gib eine Organisator-E-Mail ein", organizerRequired: "Bitte geben Sie eine Organisator-E-Mail ein",
organizerInvalid: "Bitte gib eine gültige Organisator-E-Mail-Adresse ein" organizerInvalid: "Bitte geben Sie eine gültige Organisator-E-Mail-Adresse ein"
} }
}, },