move assets to new location
This commit is contained in:
stefan.tollkuehn committed
1 parent
42464bc72e
commit
3dd0b8d496
12 files changed
+527
-528
No files matched your search
@@ -0,0 +1,512 @@
|
|||||||
|
:root {
|
||||||
|
color-scheme: light;
|
||||||
|
}
|
||||||
|
|
||||||
|
:root.dark {
|
||||||
|
color-scheme: dark;
|
||||||
|
}
|
||||||
|
|
||||||
|
body {
|
||||||
|
margin: 0;
|
||||||
|
min-height: 100vh;
|
||||||
|
display: flex;
|
||||||
|
align-items: center;
|
||||||
|
justify-content: center;
|
||||||
|
font-family: system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
|
||||||
|
background: #f5f5f5;
|
||||||
|
color: #222;
|
||||||
|
}
|
||||||
|
|
||||||
|
.container {
|
||||||
|
display: flex;
|
||||||
|
flex-direction: column;
|
||||||
|
align-items: center;
|
||||||
|
width: min(700px, calc(100% - 32px));
|
||||||
|
}
|
||||||
|
|
||||||
|
.navbar {
|
||||||
|
position: fixed;
|
||||||
|
top: 16px;
|
||||||
|
left: 2%;
|
||||||
|
width: 96%;
|
||||||
|
box-sizing: border-box;
|
||||||
|
z-index: 100;
|
||||||
|
display: flex;
|
||||||
|
align-items: center;
|
||||||
|
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 {
|
||||||
|
display: flex;
|
||||||
|
align-items: center;
|
||||||
|
flex: 0 1 auto;
|
||||||
|
min-width: 0;
|
||||||
|
}
|
||||||
|
|
||||||
|
.logo-bar img {
|
||||||
|
display: block;
|
||||||
|
height: 60px;
|
||||||
|
max-width: 100%;
|
||||||
|
width: auto;
|
||||||
|
}
|
||||||
|
|
||||||
|
.nav-actions {
|
||||||
|
display: flex;
|
||||||
|
align-items: center;
|
||||||
|
flex-wrap: wrap;
|
||||||
|
justify-content: flex-end;
|
||||||
|
gap: 8px;
|
||||||
|
margin-left: auto;
|
||||||
|
}
|
||||||
|
|
||||||
|
/* Hamburger: nur im Phone-Portrait sichtbar.
|
||||||
|
* "button.nav-toggle" ist spezifischer als ".button",
|
||||||
|
* sonst überschreibt display: inline-block diese Regel. */
|
||||||
|
button.nav-toggle {
|
||||||
|
display: none;
|
||||||
|
}
|
||||||
|
|
||||||
|
/* Enger als der globale 6px-Margin der Buttons */
|
||||||
|
.navbar .button {
|
||||||
|
margin: 0;
|
||||||
|
}
|
||||||
|
|
||||||
|
.lang-menu {
|
||||||
|
position: relative;
|
||||||
|
}
|
||||||
|
|
||||||
|
.lang-dropdown {
|
||||||
|
display: none;
|
||||||
|
position: absolute;
|
||||||
|
right: 0;
|
||||||
|
top: 100%;
|
||||||
|
min-width: 150px;
|
||||||
|
margin-top: 6px;
|
||||||
|
padding: 6px;
|
||||||
|
background: white;
|
||||||
|
border-radius: 10px;
|
||||||
|
box-shadow: 0 4px 20px rgba(0, 0, 0, 0.15);
|
||||||
|
}
|
||||||
|
|
||||||
|
.lang-dropdown.open {
|
||||||
|
display: block;
|
||||||
|
}
|
||||||
|
|
||||||
|
.lang-dropdown button {
|
||||||
|
display: block;
|
||||||
|
width: 100%;
|
||||||
|
margin: 0;
|
||||||
|
padding: 10px 14px;
|
||||||
|
border: 0;
|
||||||
|
border-radius: 6px;
|
||||||
|
background: none;
|
||||||
|
text-align: left;
|
||||||
|
font-size: 14px;
|
||||||
|
font-family: inherit;
|
||||||
|
cursor: pointer;
|
||||||
|
}
|
||||||
|
|
||||||
|
.lang-dropdown button:hover {
|
||||||
|
background: #f0f0f0;
|
||||||
|
}
|
||||||
|
|
||||||
|
.lang-dropdown button.active {
|
||||||
|
font-weight: 600;
|
||||||
|
background: #f0f8ff;
|
||||||
|
}
|
||||||
|
|
||||||
|
.lang-flag {
|
||||||
|
width: 20px;
|
||||||
|
height: 13px;
|
||||||
|
margin-right: 6px;
|
||||||
|
border-radius: 2px;
|
||||||
|
vertical-align: -2px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.card {
|
||||||
|
box-sizing: border-box;
|
||||||
|
width: min(600px, 100%);
|
||||||
|
padding: 32px;
|
||||||
|
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);
|
||||||
|
text-align: center;
|
||||||
|
}
|
||||||
|
|
||||||
|
h1 {
|
||||||
|
margin-top: 0;
|
||||||
|
}
|
||||||
|
|
||||||
|
p {
|
||||||
|
color: #555;
|
||||||
|
}
|
||||||
|
|
||||||
|
button, .button {
|
||||||
|
display: inline-block;
|
||||||
|
border: 0;
|
||||||
|
border-radius: 8px;
|
||||||
|
padding: 12px 20px;
|
||||||
|
margin: 6px;
|
||||||
|
font-size: 16px;
|
||||||
|
font-family: inherit;
|
||||||
|
cursor: pointer;
|
||||||
|
text-decoration: none;
|
||||||
|
}
|
||||||
|
|
||||||
|
.primary {
|
||||||
|
background: #1f73e8;
|
||||||
|
color: white;
|
||||||
|
}
|
||||||
|
|
||||||
|
.secondary {
|
||||||
|
background: #e9e9e9;
|
||||||
|
color: #222;
|
||||||
|
}
|
||||||
|
|
||||||
|
.hidden {
|
||||||
|
display: none !important;
|
||||||
|
}
|
||||||
|
|
||||||
|
.status {
|
||||||
|
margin-top: 24px;
|
||||||
|
padding: 16px;
|
||||||
|
border-radius: 8px;
|
||||||
|
background: #f0f0f0;
|
||||||
|
}
|
||||||
|
|
||||||
|
.spinner {
|
||||||
|
display: inline-block;
|
||||||
|
width: 16px;
|
||||||
|
height: 16px;
|
||||||
|
margin-right: 8px;
|
||||||
|
border: 2px solid #ccc;
|
||||||
|
border-top-color: #333;
|
||||||
|
border-radius: 50%;
|
||||||
|
animation: spin 0.7s linear infinite;
|
||||||
|
vertical-align: -3px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.download {
|
||||||
|
margin-top: 24px;
|
||||||
|
padding: 20px;
|
||||||
|
border-radius: 8px;
|
||||||
|
background: #f5f5f5;
|
||||||
|
}
|
||||||
|
|
||||||
|
.room {
|
||||||
|
font-family: monospace;
|
||||||
|
word-break: break-all;
|
||||||
|
}
|
||||||
|
|
||||||
|
.error {
|
||||||
|
padding: 16px;
|
||||||
|
border-radius: 8px;
|
||||||
|
background: #fff0f0;
|
||||||
|
color: #900;
|
||||||
|
}
|
||||||
|
|
||||||
|
.form-group {
|
||||||
|
margin-bottom: 16px;
|
||||||
|
text-align: left;
|
||||||
|
}
|
||||||
|
|
||||||
|
.form-group label {
|
||||||
|
display: block;
|
||||||
|
margin-bottom: 4px;
|
||||||
|
font-weight: 500;
|
||||||
|
color: #333;
|
||||||
|
}
|
||||||
|
|
||||||
|
.form-group input,
|
||||||
|
.form-group textarea {
|
||||||
|
width: 100%;
|
||||||
|
padding: 8px 12px;
|
||||||
|
border: 1px solid #ddd;
|
||||||
|
border-radius: 6px;
|
||||||
|
font-size: 14px;
|
||||||
|
box-sizing: border-box;
|
||||||
|
}
|
||||||
|
|
||||||
|
.form-group textarea {
|
||||||
|
min-height: 80px;
|
||||||
|
resize: vertical;
|
||||||
|
}
|
||||||
|
|
||||||
|
.form-actions {
|
||||||
|
margin-top: 24px;
|
||||||
|
display: flex;
|
||||||
|
gap: 12px;
|
||||||
|
justify-content: center;
|
||||||
|
flex-wrap: wrap;
|
||||||
|
}
|
||||||
|
|
||||||
|
.success-message {
|
||||||
|
margin-top: 24px;
|
||||||
|
padding: 16px;
|
||||||
|
border-radius: 8px;
|
||||||
|
background: #f0f8ff;
|
||||||
|
color: #0066cc;
|
||||||
|
}
|
||||||
|
|
||||||
|
.adhoc-result {
|
||||||
|
margin-top: 24px;
|
||||||
|
padding: 16px;
|
||||||
|
border-radius: 8px;
|
||||||
|
background: #f0fff4;
|
||||||
|
color: #1a7f37;
|
||||||
|
}
|
||||||
|
|
||||||
|
.adhoc-link {
|
||||||
|
margin-top: 12px;
|
||||||
|
display: flex;
|
||||||
|
align-items: center;
|
||||||
|
justify-content: center;
|
||||||
|
gap: 8px;
|
||||||
|
flex-wrap: wrap;
|
||||||
|
}
|
||||||
|
|
||||||
|
.adhoc-link a {
|
||||||
|
font-family: monospace;
|
||||||
|
word-break: break-all;
|
||||||
|
color: #0066cc;
|
||||||
|
}
|
||||||
|
|
||||||
|
/*
|
||||||
|
* Verhindert abgeschnittene Inhalte, wenn die Karte
|
||||||
|
* höher als der Viewport ist ("center" schneidet oben ab).
|
||||||
|
*/
|
||||||
|
@supports (align-items: safe center) {
|
||||||
|
body {
|
||||||
|
align-items: safe center;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
/*
|
||||||
|
* Schmale Bildschirme: Navbar umbrechen lassen,
|
||||||
|
* Abstände und Logo verkleinern.
|
||||||
|
*/
|
||||||
|
@media (max-width: 600px) {
|
||||||
|
body {
|
||||||
|
/* 130px räumen die fixe Navbar frei */
|
||||||
|
padding-top: 130px;
|
||||||
|
/* min-height gilt für die Content-Box: Navbar-Freiraum
|
||||||
|
* abziehen, sonst sitzt die Karte unter der Mitte */
|
||||||
|
min-height: calc(100vh - 130px);
|
||||||
|
}
|
||||||
|
|
||||||
|
.navbar {
|
||||||
|
top: 8px;
|
||||||
|
left: 4%;
|
||||||
|
width: 92%;
|
||||||
|
padding: 10px;
|
||||||
|
flex-wrap: wrap;
|
||||||
|
}
|
||||||
|
|
||||||
|
.logo-bar img {
|
||||||
|
height: 40px;
|
||||||
|
}
|
||||||
|
|
||||||
|
button, .button {
|
||||||
|
padding: 10px 14px;
|
||||||
|
font-size: 15px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.card {
|
||||||
|
padding: 20px;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
/* Sehr schmale Telefone: noch kompakter */
|
||||||
|
@media (max-width: 400px) {
|
||||||
|
.navbar {
|
||||||
|
left: 2%;
|
||||||
|
width: 96%;
|
||||||
|
padding: 8px;
|
||||||
|
gap: 6px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.logo-bar img {
|
||||||
|
height: 32px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.nav-actions {
|
||||||
|
gap: 6px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.nav-actions .button {
|
||||||
|
padding: 8px 12px;
|
||||||
|
font-size: 14px;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
/*
|
||||||
|
* Phone-Portrait: Navbar-Aktionen hinter dem
|
||||||
|
* Hamburger-Button als Dropdown anzeigen.
|
||||||
|
*/
|
||||||
|
@media (orientation: portrait) and (max-width: 600px) {
|
||||||
|
body {
|
||||||
|
/* Navbar ist hier einzeilig */
|
||||||
|
padding-top: 80px;
|
||||||
|
min-height: calc(100vh - 80px);
|
||||||
|
}
|
||||||
|
|
||||||
|
button.nav-toggle {
|
||||||
|
display: inline-flex;
|
||||||
|
}
|
||||||
|
|
||||||
|
/* ".navbar .button" setzt margin: 0 – deshalb
|
||||||
|
* höher spezifisch ans Ziel: Button nach rechts */
|
||||||
|
.navbar .nav-toggle {
|
||||||
|
margin-left: auto;
|
||||||
|
}
|
||||||
|
|
||||||
|
.nav-actions {
|
||||||
|
display: none;
|
||||||
|
position: absolute;
|
||||||
|
top: 100%;
|
||||||
|
right: 0;
|
||||||
|
margin: 8px 0 0;
|
||||||
|
padding: 8px;
|
||||||
|
min-width: 200px;
|
||||||
|
background: white;
|
||||||
|
border-radius: 10px;
|
||||||
|
box-shadow: 0 4px 20px rgba(0, 0, 0, 0.15);
|
||||||
|
flex-direction: column;
|
||||||
|
align-items: stretch;
|
||||||
|
}
|
||||||
|
|
||||||
|
.nav-actions.open {
|
||||||
|
display: flex;
|
||||||
|
}
|
||||||
|
|
||||||
|
/* Alle Panel-Buttons gleich breit, Text zentriert */
|
||||||
|
.nav-actions .button {
|
||||||
|
text-align: center;
|
||||||
|
}
|
||||||
|
|
||||||
|
/* Sprach-Button liegt im .lang-menu-Wrapper */
|
||||||
|
.nav-actions .lang-menu .button {
|
||||||
|
display: block;
|
||||||
|
width: 100%;
|
||||||
|
box-sizing: border-box;
|
||||||
|
}
|
||||||
|
|
||||||
|
:root.dark .nav-actions {
|
||||||
|
background: #242424;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
/*
|
||||||
|
* Sicherheit: Hamburger im Landscape grundsätzlich
|
||||||
|
* ausblenden, falls orientation falsch gemeldet wird.
|
||||||
|
*/
|
||||||
|
@media (orientation: landscape) {
|
||||||
|
button.nav-toggle {
|
||||||
|
display: none;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
/*
|
||||||
|
* Phone-Landscape: schmaler, hoher Karteninhalt –
|
||||||
|
* einzeilige Navbar (~106px) freihalten.
|
||||||
|
*/
|
||||||
|
@media (orientation: landscape) and (max-height: 500px) {
|
||||||
|
body {
|
||||||
|
padding-top: 120px;
|
||||||
|
/* min-height gilt für die Content-Box: Navbar-Freiraum
|
||||||
|
* abziehen, sonst sitzt die Karte unter der Mitte */
|
||||||
|
min-height: calc(100vh - 120px);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
@keyframes spin {
|
||||||
|
to {
|
||||||
|
transform: rotate(360deg);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
/*
|
||||||
|
* Dark-Theme über die Klasse "dark" am html-Element.
|
||||||
|
* JS setzt sie anhand der gespeicherten Wahl oder der
|
||||||
|
* System-Einstellung (siehe detectTheme).
|
||||||
|
*/
|
||||||
|
:root.dark body {
|
||||||
|
background: #181818;
|
||||||
|
color: #eee;
|
||||||
|
}
|
||||||
|
|
||||||
|
:root.dark .navbar {
|
||||||
|
background: rgba(36, 36, 36, 0.72);
|
||||||
|
}
|
||||||
|
|
||||||
|
:root.dark .card {
|
||||||
|
background: rgba(36, 36, 36, 0.72);
|
||||||
|
}
|
||||||
|
|
||||||
|
:root.dark .lang-dropdown {
|
||||||
|
background: #242424;
|
||||||
|
}
|
||||||
|
|
||||||
|
:root.dark .lang-dropdown button:hover {
|
||||||
|
background: #303030;
|
||||||
|
}
|
||||||
|
|
||||||
|
:root.dark .lang-dropdown button.active {
|
||||||
|
background: #1a3a5a;
|
||||||
|
}
|
||||||
|
|
||||||
|
:root.dark p {
|
||||||
|
color: #bbb;
|
||||||
|
}
|
||||||
|
|
||||||
|
:root.dark .secondary {
|
||||||
|
background: #444;
|
||||||
|
color: #eee;
|
||||||
|
}
|
||||||
|
|
||||||
|
:root.dark .status,
|
||||||
|
:root.dark .download {
|
||||||
|
background: #303030;
|
||||||
|
}
|
||||||
|
|
||||||
|
:root.dark .spinner {
|
||||||
|
border-color: #555;
|
||||||
|
border-top-color: #ddd;
|
||||||
|
}
|
||||||
|
|
||||||
|
:root.dark .form-group label {
|
||||||
|
color: #ddd;
|
||||||
|
}
|
||||||
|
|
||||||
|
:root.dark .form-group input,
|
||||||
|
:root.dark .form-group textarea {
|
||||||
|
background: #303030;
|
||||||
|
border-color: #555;
|
||||||
|
color: #eee;
|
||||||
|
}
|
||||||
|
|
||||||
|
:root.dark .success-message {
|
||||||
|
background: #1a3a5a;
|
||||||
|
color: #99ccff;
|
||||||
|
}
|
||||||
|
|
||||||
|
:root.dark .adhoc-result {
|
||||||
|
background: #1c3527;
|
||||||
|
color: #7ee2a8;
|
||||||
|
}
|
||||||
|
|
||||||
|
:root.dark .logo-bar img {
|
||||||
|
filter: url(#logo-dark-tint);
|
||||||
|
}
|
||||||
|
|
||||||
|
:root.dark .adhoc-link a {
|
||||||
|
color: #99ccff;
|
||||||
|
}
|
||||||
File renamed without changes.
File renamed without changes.
File renamed without changes.
File renamed without changes.
File renamed without changes.
File renamed without changes.
File renamed without changes.
File renamed without changes.
File renamed without changes.
+6
-6
@@ -21,11 +21,11 @@ const CONFIG = {
|
|||||||
/*
|
/*
|
||||||
* set wallpaper for webpage
|
* set wallpaper for webpage
|
||||||
*/
|
*/
|
||||||
backgroundImage: "assets/background.png",
|
backgroundImage: "assets/images/background.png",
|
||||||
/*
|
/*
|
||||||
* Set logo
|
* Set logo
|
||||||
*/
|
*/
|
||||||
logo: "assets/logo.svg",
|
logo: "assets/images/logo.svg",
|
||||||
/*
|
/*
|
||||||
* Download URLs for jitsi-meet clients
|
* Download URLs for jitsi-meet clients
|
||||||
*/
|
*/
|
||||||
@@ -162,10 +162,10 @@ const LANGUAGE_NAMES = {
|
|||||||
};
|
};
|
||||||
|
|
||||||
const LANGUAGE_FLAGS = {
|
const LANGUAGE_FLAGS = {
|
||||||
en: "assets/uk.svg",
|
en: "assets/images/uk.svg",
|
||||||
de: "assets/de.svg",
|
de: "assets/images/de.svg",
|
||||||
fr: "assets/fr.svg",
|
fr: "assets/images/fr.svg",
|
||||||
zh: "assets/cn.svg"
|
zh: "assets/images/cn.svg"
|
||||||
};
|
};
|
||||||
|
|
||||||
function updateLanguageMenu() {
|
function updateLanguageMenu() {
|
||||||
|
|||||||
+9
-522
@@ -5,523 +5,10 @@
|
|||||||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||||
<title>Jitsi Meeting</title>
|
<title>Jitsi Meeting</title>
|
||||||
<link rel='shortlink' href='https://meet.bnvb.eu/' />
|
<link rel='shortlink' href='https://meet.bnvb.eu/' />
|
||||||
<link href="https://meet.bnvb.eu/assets/favicon.ico" rel="alternate icon">
|
<link href="https://meet.bnvb.eu/assets/images/favicon.ico" rel="alternate icon">
|
||||||
<link href="https://meet.bnvb.eu/assets/apple-touch-icon.png" rel="apple-touch-icon" sizes="180x180">
|
<link href="https://meet.bnvb.eu/assets/images/apple-touch-icon.png" rel="apple-touch-icon" sizes="180x180">
|
||||||
<link href="https://meet.bnvb.eu/assets/favicon.svg" rel="icon" type="image/svg+xml">
|
<link href="https://meet.bnvb.eu/assets/images/favicon.svg" rel="icon" type="image/svg+xml">
|
||||||
<style>
|
<link rel="stylesheet" href="assets/css/launch.css">
|
||||||
:root {
|
|
||||||
color-scheme: light;
|
|
||||||
}
|
|
||||||
|
|
||||||
:root.dark {
|
|
||||||
color-scheme: dark;
|
|
||||||
}
|
|
||||||
|
|
||||||
body {
|
|
||||||
margin: 0;
|
|
||||||
min-height: 100vh;
|
|
||||||
display: flex;
|
|
||||||
align-items: center;
|
|
||||||
justify-content: center;
|
|
||||||
font-family: system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
|
|
||||||
background: #f5f5f5;
|
|
||||||
color: #222;
|
|
||||||
}
|
|
||||||
|
|
||||||
.container {
|
|
||||||
display: flex;
|
|
||||||
flex-direction: column;
|
|
||||||
align-items: center;
|
|
||||||
width: min(700px, calc(100% - 32px));
|
|
||||||
}
|
|
||||||
|
|
||||||
.navbar {
|
|
||||||
position: fixed;
|
|
||||||
top: 16px;
|
|
||||||
left: 2%;
|
|
||||||
width: 96%;
|
|
||||||
box-sizing: border-box;
|
|
||||||
z-index: 100;
|
|
||||||
display: flex;
|
|
||||||
align-items: center;
|
|
||||||
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 {
|
|
||||||
display: flex;
|
|
||||||
align-items: center;
|
|
||||||
flex: 0 1 auto;
|
|
||||||
min-width: 0;
|
|
||||||
}
|
|
||||||
|
|
||||||
.logo-bar img {
|
|
||||||
display: block;
|
|
||||||
height: 60px;
|
|
||||||
max-width: 100%;
|
|
||||||
width: auto;
|
|
||||||
}
|
|
||||||
|
|
||||||
.nav-actions {
|
|
||||||
display: flex;
|
|
||||||
align-items: center;
|
|
||||||
flex-wrap: wrap;
|
|
||||||
justify-content: flex-end;
|
|
||||||
gap: 8px;
|
|
||||||
margin-left: auto;
|
|
||||||
}
|
|
||||||
|
|
||||||
/* Hamburger: nur im Phone-Portrait sichtbar.
|
|
||||||
* "button.nav-toggle" ist spezifischer als ".button",
|
|
||||||
* sonst überschreibt display: inline-block diese Regel. */
|
|
||||||
button.nav-toggle {
|
|
||||||
display: none;
|
|
||||||
}
|
|
||||||
|
|
||||||
/* Enger als der globale 6px-Margin der Buttons */
|
|
||||||
.navbar .button {
|
|
||||||
margin: 0;
|
|
||||||
}
|
|
||||||
|
|
||||||
.lang-menu {
|
|
||||||
position: relative;
|
|
||||||
}
|
|
||||||
|
|
||||||
.lang-dropdown {
|
|
||||||
display: none;
|
|
||||||
position: absolute;
|
|
||||||
right: 0;
|
|
||||||
top: 100%;
|
|
||||||
min-width: 150px;
|
|
||||||
margin-top: 6px;
|
|
||||||
padding: 6px;
|
|
||||||
background: white;
|
|
||||||
border-radius: 10px;
|
|
||||||
box-shadow: 0 4px 20px rgba(0, 0, 0, 0.15);
|
|
||||||
}
|
|
||||||
|
|
||||||
.lang-dropdown.open {
|
|
||||||
display: block;
|
|
||||||
}
|
|
||||||
|
|
||||||
.lang-dropdown button {
|
|
||||||
display: block;
|
|
||||||
width: 100%;
|
|
||||||
margin: 0;
|
|
||||||
padding: 10px 14px;
|
|
||||||
border: 0;
|
|
||||||
border-radius: 6px;
|
|
||||||
background: none;
|
|
||||||
text-align: left;
|
|
||||||
font-size: 14px;
|
|
||||||
font-family: inherit;
|
|
||||||
cursor: pointer;
|
|
||||||
}
|
|
||||||
|
|
||||||
.lang-dropdown button:hover {
|
|
||||||
background: #f0f0f0;
|
|
||||||
}
|
|
||||||
|
|
||||||
.lang-dropdown button.active {
|
|
||||||
font-weight: 600;
|
|
||||||
background: #f0f8ff;
|
|
||||||
}
|
|
||||||
|
|
||||||
.lang-flag {
|
|
||||||
width: 20px;
|
|
||||||
height: 13px;
|
|
||||||
margin-right: 6px;
|
|
||||||
border-radius: 2px;
|
|
||||||
vertical-align: -2px;
|
|
||||||
}
|
|
||||||
|
|
||||||
.card {
|
|
||||||
box-sizing: border-box;
|
|
||||||
width: min(600px, 100%);
|
|
||||||
padding: 32px;
|
|
||||||
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);
|
|
||||||
text-align: center;
|
|
||||||
}
|
|
||||||
|
|
||||||
h1 {
|
|
||||||
margin-top: 0;
|
|
||||||
}
|
|
||||||
|
|
||||||
p {
|
|
||||||
color: #555;
|
|
||||||
}
|
|
||||||
|
|
||||||
button, .button {
|
|
||||||
display: inline-block;
|
|
||||||
border: 0;
|
|
||||||
border-radius: 8px;
|
|
||||||
padding: 12px 20px;
|
|
||||||
margin: 6px;
|
|
||||||
font-size: 16px;
|
|
||||||
font-family: inherit;
|
|
||||||
cursor: pointer;
|
|
||||||
text-decoration: none;
|
|
||||||
}
|
|
||||||
|
|
||||||
.primary {
|
|
||||||
background: #1f73e8;
|
|
||||||
color: white;
|
|
||||||
}
|
|
||||||
|
|
||||||
.secondary {
|
|
||||||
background: #e9e9e9;
|
|
||||||
color: #222;
|
|
||||||
}
|
|
||||||
|
|
||||||
.hidden {
|
|
||||||
display: none !important;
|
|
||||||
}
|
|
||||||
|
|
||||||
.status {
|
|
||||||
margin-top: 24px;
|
|
||||||
padding: 16px;
|
|
||||||
border-radius: 8px;
|
|
||||||
background: #f0f0f0;
|
|
||||||
}
|
|
||||||
|
|
||||||
.spinner {
|
|
||||||
display: inline-block;
|
|
||||||
width: 16px;
|
|
||||||
height: 16px;
|
|
||||||
margin-right: 8px;
|
|
||||||
border: 2px solid #ccc;
|
|
||||||
border-top-color: #333;
|
|
||||||
border-radius: 50%;
|
|
||||||
animation: spin 0.7s linear infinite;
|
|
||||||
vertical-align: -3px;
|
|
||||||
}
|
|
||||||
|
|
||||||
.download {
|
|
||||||
margin-top: 24px;
|
|
||||||
padding: 20px;
|
|
||||||
border-radius: 8px;
|
|
||||||
background: #f5f5f5;
|
|
||||||
}
|
|
||||||
|
|
||||||
.room {
|
|
||||||
font-family: monospace;
|
|
||||||
word-break: break-all;
|
|
||||||
}
|
|
||||||
|
|
||||||
.error {
|
|
||||||
padding: 16px;
|
|
||||||
border-radius: 8px;
|
|
||||||
background: #fff0f0;
|
|
||||||
color: #900;
|
|
||||||
}
|
|
||||||
|
|
||||||
.form-group {
|
|
||||||
margin-bottom: 16px;
|
|
||||||
text-align: left;
|
|
||||||
}
|
|
||||||
|
|
||||||
.form-group label {
|
|
||||||
display: block;
|
|
||||||
margin-bottom: 4px;
|
|
||||||
font-weight: 500;
|
|
||||||
color: #333;
|
|
||||||
}
|
|
||||||
|
|
||||||
.form-group input,
|
|
||||||
.form-group textarea {
|
|
||||||
width: 100%;
|
|
||||||
padding: 8px 12px;
|
|
||||||
border: 1px solid #ddd;
|
|
||||||
border-radius: 6px;
|
|
||||||
font-size: 14px;
|
|
||||||
box-sizing: border-box;
|
|
||||||
}
|
|
||||||
|
|
||||||
.form-group textarea {
|
|
||||||
min-height: 80px;
|
|
||||||
resize: vertical;
|
|
||||||
}
|
|
||||||
|
|
||||||
.form-actions {
|
|
||||||
margin-top: 24px;
|
|
||||||
display: flex;
|
|
||||||
gap: 12px;
|
|
||||||
justify-content: center;
|
|
||||||
flex-wrap: wrap;
|
|
||||||
}
|
|
||||||
|
|
||||||
.success-message {
|
|
||||||
margin-top: 24px;
|
|
||||||
padding: 16px;
|
|
||||||
border-radius: 8px;
|
|
||||||
background: #f0f8ff;
|
|
||||||
color: #0066cc;
|
|
||||||
}
|
|
||||||
|
|
||||||
.adhoc-result {
|
|
||||||
margin-top: 24px;
|
|
||||||
padding: 16px;
|
|
||||||
border-radius: 8px;
|
|
||||||
background: #f0fff4;
|
|
||||||
color: #1a7f37;
|
|
||||||
}
|
|
||||||
|
|
||||||
.adhoc-link {
|
|
||||||
margin-top: 12px;
|
|
||||||
display: flex;
|
|
||||||
align-items: center;
|
|
||||||
justify-content: center;
|
|
||||||
gap: 8px;
|
|
||||||
flex-wrap: wrap;
|
|
||||||
}
|
|
||||||
|
|
||||||
.adhoc-link a {
|
|
||||||
font-family: monospace;
|
|
||||||
word-break: break-all;
|
|
||||||
color: #0066cc;
|
|
||||||
}
|
|
||||||
|
|
||||||
/*
|
|
||||||
* Verhindert abgeschnittene Inhalte, wenn die Karte
|
|
||||||
* höher als der Viewport ist ("center" schneidet oben ab).
|
|
||||||
*/
|
|
||||||
@supports (align-items: safe center) {
|
|
||||||
body {
|
|
||||||
align-items: safe center;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
/*
|
|
||||||
* Schmale Bildschirme: Navbar umbrechen lassen,
|
|
||||||
* Abstände und Logo verkleinern.
|
|
||||||
*/
|
|
||||||
@media (max-width: 600px) {
|
|
||||||
body {
|
|
||||||
/* 130px räumen die fixe Navbar frei */
|
|
||||||
padding-top: 130px;
|
|
||||||
/* min-height gilt für die Content-Box: Navbar-Freiraum
|
|
||||||
* abziehen, sonst sitzt die Karte unter der Mitte */
|
|
||||||
min-height: calc(100vh - 130px);
|
|
||||||
}
|
|
||||||
|
|
||||||
.navbar {
|
|
||||||
top: 8px;
|
|
||||||
left: 4%;
|
|
||||||
width: 92%;
|
|
||||||
padding: 10px;
|
|
||||||
flex-wrap: wrap;
|
|
||||||
}
|
|
||||||
|
|
||||||
.logo-bar img {
|
|
||||||
height: 40px;
|
|
||||||
}
|
|
||||||
|
|
||||||
button, .button {
|
|
||||||
padding: 10px 14px;
|
|
||||||
font-size: 15px;
|
|
||||||
}
|
|
||||||
|
|
||||||
.card {
|
|
||||||
padding: 20px;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
/* Sehr schmale Telefone: noch kompakter */
|
|
||||||
@media (max-width: 400px) {
|
|
||||||
.navbar {
|
|
||||||
left: 2%;
|
|
||||||
width: 96%;
|
|
||||||
padding: 8px;
|
|
||||||
gap: 6px;
|
|
||||||
}
|
|
||||||
|
|
||||||
.logo-bar img {
|
|
||||||
height: 32px;
|
|
||||||
}
|
|
||||||
|
|
||||||
.nav-actions {
|
|
||||||
gap: 6px;
|
|
||||||
}
|
|
||||||
|
|
||||||
.nav-actions .button {
|
|
||||||
padding: 8px 12px;
|
|
||||||
font-size: 14px;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
/*
|
|
||||||
* Phone-Portrait: Navbar-Aktionen hinter dem
|
|
||||||
* Hamburger-Button als Dropdown anzeigen.
|
|
||||||
*/
|
|
||||||
@media (orientation: portrait) and (max-width: 600px) {
|
|
||||||
body {
|
|
||||||
/* Navbar ist hier einzeilig */
|
|
||||||
padding-top: 80px;
|
|
||||||
min-height: calc(100vh - 80px);
|
|
||||||
}
|
|
||||||
|
|
||||||
button.nav-toggle {
|
|
||||||
display: inline-flex;
|
|
||||||
}
|
|
||||||
|
|
||||||
/* ".navbar .button" setzt margin: 0 – deshalb
|
|
||||||
* höher spezifisch ans Ziel: Button nach rechts */
|
|
||||||
.navbar .nav-toggle {
|
|
||||||
margin-left: auto;
|
|
||||||
}
|
|
||||||
|
|
||||||
.nav-actions {
|
|
||||||
display: none;
|
|
||||||
position: absolute;
|
|
||||||
top: 100%;
|
|
||||||
right: 0;
|
|
||||||
margin: 8px 0 0;
|
|
||||||
padding: 8px;
|
|
||||||
min-width: 200px;
|
|
||||||
background: white;
|
|
||||||
border-radius: 10px;
|
|
||||||
box-shadow: 0 4px 20px rgba(0, 0, 0, 0.15);
|
|
||||||
flex-direction: column;
|
|
||||||
align-items: stretch;
|
|
||||||
}
|
|
||||||
|
|
||||||
.nav-actions.open {
|
|
||||||
display: flex;
|
|
||||||
}
|
|
||||||
|
|
||||||
/* Alle Panel-Buttons gleich breit, Text zentriert */
|
|
||||||
.nav-actions .button {
|
|
||||||
text-align: center;
|
|
||||||
}
|
|
||||||
|
|
||||||
/* Sprach-Button liegt im .lang-menu-Wrapper */
|
|
||||||
.nav-actions .lang-menu .button {
|
|
||||||
display: block;
|
|
||||||
width: 100%;
|
|
||||||
box-sizing: border-box;
|
|
||||||
}
|
|
||||||
|
|
||||||
:root.dark .nav-actions {
|
|
||||||
background: #242424;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
/*
|
|
||||||
* Sicherheit: Hamburger im Landscape grundsätzlich
|
|
||||||
* ausblenden, falls orientation falsch gemeldet wird.
|
|
||||||
*/
|
|
||||||
@media (orientation: landscape) {
|
|
||||||
button.nav-toggle {
|
|
||||||
display: none;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
/*
|
|
||||||
* Phone-Landscape: schmaler, hoher Karteninhalt –
|
|
||||||
* einzeilige Navbar (~106px) freihalten.
|
|
||||||
*/
|
|
||||||
@media (orientation: landscape) and (max-height: 500px) {
|
|
||||||
body {
|
|
||||||
padding-top: 120px;
|
|
||||||
/* min-height gilt für die Content-Box: Navbar-Freiraum
|
|
||||||
* abziehen, sonst sitzt die Karte unter der Mitte */
|
|
||||||
min-height: calc(100vh - 120px);
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
@keyframes spin {
|
|
||||||
to {
|
|
||||||
transform: rotate(360deg);
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
/*
|
|
||||||
* Dark-Theme über die Klasse "dark" am html-Element.
|
|
||||||
* JS setzt sie anhand der gespeicherten Wahl oder der
|
|
||||||
* System-Einstellung (siehe detectTheme).
|
|
||||||
*/
|
|
||||||
:root.dark body {
|
|
||||||
background: #181818;
|
|
||||||
color: #eee;
|
|
||||||
}
|
|
||||||
|
|
||||||
:root.dark .navbar {
|
|
||||||
background: rgba(36, 36, 36, 0.72);
|
|
||||||
}
|
|
||||||
|
|
||||||
:root.dark .card {
|
|
||||||
background: rgba(36, 36, 36, 0.72);
|
|
||||||
}
|
|
||||||
|
|
||||||
:root.dark .lang-dropdown {
|
|
||||||
background: #242424;
|
|
||||||
}
|
|
||||||
|
|
||||||
:root.dark .lang-dropdown button:hover {
|
|
||||||
background: #303030;
|
|
||||||
}
|
|
||||||
|
|
||||||
:root.dark .lang-dropdown button.active {
|
|
||||||
background: #1a3a5a;
|
|
||||||
}
|
|
||||||
|
|
||||||
:root.dark p {
|
|
||||||
color: #bbb;
|
|
||||||
}
|
|
||||||
|
|
||||||
:root.dark .secondary {
|
|
||||||
background: #444;
|
|
||||||
color: #eee;
|
|
||||||
}
|
|
||||||
|
|
||||||
:root.dark .status,
|
|
||||||
:root.dark .download {
|
|
||||||
background: #303030;
|
|
||||||
}
|
|
||||||
|
|
||||||
:root.dark .spinner {
|
|
||||||
border-color: #555;
|
|
||||||
border-top-color: #ddd;
|
|
||||||
}
|
|
||||||
|
|
||||||
:root.dark .form-group label {
|
|
||||||
color: #ddd;
|
|
||||||
}
|
|
||||||
|
|
||||||
:root.dark .form-group input,
|
|
||||||
:root.dark .form-group textarea {
|
|
||||||
background: #303030;
|
|
||||||
border-color: #555;
|
|
||||||
color: #eee;
|
|
||||||
}
|
|
||||||
|
|
||||||
:root.dark .success-message {
|
|
||||||
background: #1a3a5a;
|
|
||||||
color: #99ccff;
|
|
||||||
}
|
|
||||||
|
|
||||||
:root.dark .adhoc-result {
|
|
||||||
background: #1c3527;
|
|
||||||
color: #7ee2a8;
|
|
||||||
}
|
|
||||||
|
|
||||||
:root.dark .logo-bar img {
|
|
||||||
filter: url(#logo-dark-tint);
|
|
||||||
}
|
|
||||||
|
|
||||||
:root.dark .adhoc-link a {
|
|
||||||
color: #99ccff;
|
|
||||||
}
|
|
||||||
</style>
|
|
||||||
</head>
|
</head>
|
||||||
|
|
||||||
<body>
|
<body>
|
||||||
@@ -552,14 +39,14 @@
|
|||||||
</a>
|
</a>
|
||||||
<div id="langMenu" class="lang-menu">
|
<div id="langMenu" class="lang-menu">
|
||||||
<button id="langButton" class="button secondary" type="button" aria-haspopup="true" aria-expanded="false">
|
<button id="langButton" class="button secondary" type="button" aria-haspopup="true" aria-expanded="false">
|
||||||
<img id="langFlag" class="lang-flag" src="assets/uk.svg" alt="">
|
<img id="langFlag" class="lang-flag" src="assets/images/uk.svg" alt="">
|
||||||
<span id="langLabel">English</span>
|
<span id="langLabel">English</span>
|
||||||
</button>
|
</button>
|
||||||
<div id="langDropdown" class="lang-dropdown">
|
<div id="langDropdown" class="lang-dropdown">
|
||||||
<button type="button" data-lang="en"><img class="lang-flag" src="assets/uk.svg" alt="">English</button>
|
<button type="button" data-lang="en"><img class="lang-flag" src="assets/images/uk.svg" alt="">English</button>
|
||||||
<button type="button" data-lang="de"><img class="lang-flag" src="assets/de.svg" alt="">Deutsch</button>
|
<button type="button" data-lang="de"><img class="lang-flag" src="assets/images/de.svg" alt="">Deutsch</button>
|
||||||
<button type="button" data-lang="fr"><img class="lang-flag" src="assets/fr.svg" alt="">Français</button>
|
<button type="button" data-lang="fr"><img class="lang-flag" src="assets/images/fr.svg" alt="">Français</button>
|
||||||
<button type="button" data-lang="zh"><img class="lang-flag" src="assets/cn.svg" alt="">中文</button>
|
<button type="button" data-lang="zh"><img class="lang-flag" src="assets/images/cn.svg" alt="">中文</button>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
<button id="themeButton" class="button secondary" type="button" aria-label="Toggle dark mode">
|
<button id="themeButton" class="button secondary" type="button" aria-label="Toggle dark mode">
|
||||||
|
|||||||
Reference in new issue
Block a user