Entwicklung/xxx-sphere-web
2
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Weiter an der Oberfläche getüftelt
Some checks failed
Host-Based Deploy (Java 21 Fix) / build-and-run (push) Has been cancelled
Details

Browse Source
This commit is contained in:
Mario Störmer
2026-04-08 22:50:10 +02:00
parent 2b0ce62d33
commit ec1409820b
30 changed files with 8390 additions and 2066 deletions
Download Patch File Download Diff File Expand all files Collapse all files

71
bin/main/static/js/nav.js
View File

@@ -8,23 +8,48 @@
/* ── Burger-Button ── */
.nav-burger {
display: inline-flex; align-items: center; gap: 0.45rem;
padding: 0.35rem 0.8rem 0.35rem 0.6rem;
padding: 0.46rem 0.8rem 0.46rem 0.6rem;
background: none; border: 1px solid var(--color-secondary);
border-radius: 8px; cursor: pointer;
color: var(--color-text); font-size: 0.88rem; font-weight: 600;
flex-shrink: 0; transition: border-color 0.15s, color 0.15s;
margin-right: 0.5rem;
line-height: 1;
}
.nav-burger:hover { border-color: var(--color-primary); color: var(--color-primary); }
.nav-burger-icon { font-size: 1.05rem; line-height: 1; }
.nav-burger-icon {
font-size: 1.05rem; line-height: 1;
position: relative;
display: inline-flex; align-items: center; justify-content: center;
width: 1.2em; height: 1.2em;
}
.nav-burger-icon-menu,
.nav-burger-icon-close {
position: absolute;
inset: 0;
display: flex; align-items: center; justify-content: center;
transition: opacity 0.15s, transform 0.15s;
}
.nav-burger-icon-close { opacity: 0; transform: rotate(-45deg); }
#topbar.nav-menu-open .nav-burger .nav-burger-icon-menu { opacity: 0; transform: rotate(45deg); }
#topbar.nav-menu-open .nav-burger .nav-burger-icon-close { opacity: 1; transform: rotate(0deg); }
/* ── Backdrop ── */
.nav-backdrop {
display: none; position: fixed; inset: 0; z-index: 498;
position: fixed; inset: 0; z-index: 498;
background: rgba(0,0,0,0);
pointer-events: none;
transition: background 0.2s ease;
}
.nav-backdrop.open {
background: rgba(0,0,0,0.55);
pointer-events: auto;
}
.nav-backdrop.open { display: block; }
/* ── Topbar: untere Rundung entfernen wenn Menü offen ── */
#topbar {
transition: border-radius 0.22s ease, border-bottom-color 0.22s ease;
}
#topbar.nav-menu-open {
border-radius: 12px 12px 0 0;
border-bottom-color: transparent;
@@ -38,11 +63,21 @@
border-top: none;
border-radius: 0 0 12px 12px;
box-shadow: 0 12px 40px rgba(0,0,0,0.55);
display: none;
overflow-y: auto;
max-height: calc(100vh - 80px);
visibility: hidden;
opacity: 0;
transform: translateY(-12px);
pointer-events: none;
transition: opacity 0.22s ease, transform 0.22s ease, visibility 0s linear 0.22s;
}
.nav-dropdown.open {
visibility: visible;
opacity: 1;
transform: translateY(0);
pointer-events: auto;
transition: opacity 0.22s ease, transform 0.22s ease, visibility 0s linear 0s;
}
.nav-dropdown.open { display: block; }
/* ── 4-Spalten-Layout ── */
.nav-columns {
@@ -226,17 +261,17 @@
{ href: '/games/vanilla/neuvanilla.html', icon: 'PLAY_NEW', label: 'Neue Session', id: 'navVanillaNeu' },
{ href: '#', icon: 'WAITING', label: 'Aktive Session', id: 'navVanillaAktiv' },
{ href: '/games/vanilla/vanillaingame.html', icon: 'PLAY_ACTIVE', label: 'Im Spiel', id: 'navVanillaImSpiel' },
{ href: '/games/common/aufgaben.html', icon: 'CHECK', label: 'Aufgaben' },
{ href: '/games/common/toys.html', icon: 'TOYS', label: 'Toys' },
{ href: '/games/chastity/entdecken.html', icon: 'DISCOVER', label: 'Entdecken' },
{ href: '/games/vanilla/aufgaben.html', icon: 'CHECK', label: 'Aufgaben' },
{ href: '/games/vanilla/toys.html', icon: 'TOYS', label: 'Toys' },
{ href: '/games/vanilla/entdecken.html', icon: 'DISCOVER', label: 'Entdecken' },
])}
${gameGroup('BDSM', 'BDSM Game', [
{ href: '/games/bdsm/neubdsm.html', icon: 'PLAY_NEW', label: 'Neue Session', id: 'navBdsmNeu' },
{ href: '#', icon: 'WAITING', label: 'Aktive Session', id: 'navBdsmAktiv' },
{ href: '/games/bdsm/bdsmingame.html', icon: 'PLAY_ACTIVE', label: 'Im Spiel', id: 'navBdsmImSpiel' },
{ href: '/games/common/aufgaben.html?mode=bdsm', icon: 'CHECK', label: 'Aufgaben' },
{ href: '/games/common/toys.html', icon: 'TOYS', label: 'Toys' },
{ href: '/games/chastity/entdecken.html', icon: 'DISCOVER', label: 'Entdecken' },
{ href: '/games/bdsm/neubdsm.html', icon: 'PLAY_NEW', label: 'Neue Session', id: 'navBdsmNeu' },
{ href: '#', icon: 'WAITING', label: 'Aktive Session', id: 'navBdsmAktiv' },
{ href: '/games/bdsm/bdsmingame.html', icon: 'PLAY_ACTIVE', label: 'Im Spiel', id: 'navBdsmImSpiel' },
{ href: '/games/bdsm/aufgaben.html', icon: 'CHECK', label: 'Aufgaben' },
{ href: '/games/bdsm/toys.html', icon: 'TOYS', label: 'Toys' },
{ href: '/games/bdsm/entdecken.html', icon: 'DISCOVER', label: 'Entdecken' },
])}
${gameGroup('CHASTITY', 'Chastity Game', [
{ href: '/games/chastity/neulock.html', icon: 'NEW_LOCK', label: 'Neues Lock', id: 'navChastityNeu' },
@@ -330,8 +365,8 @@
btn.className = 'nav-burger';
btn.id = 'navBurgerBtn';
btn.setAttribute('aria-label', 'Menü öffnen');
btn.innerHTML = `<span class="nav-burger-icon">${I('MENU') || '☰'}</span><span class="nav-burger-text">Menü</span>`;
topbarLeft.prepend(btn);
btn.innerHTML = `<span class="nav-burger-icon"><span class="nav-burger-icon-menu">${I('MENU') || '≡'}</span><span class="nav-burger-icon-close">${I('CLOSE') || 'x'}</span></span><span class="nav-burger-text">Menü</span>`;
topbarLeft.append(btn);
btn.addEventListener('click', e => {
e.stopPropagation();
const dd = document.getElementById('navDropdown');
@@ -460,4 +495,6 @@
}
loadScript('/js/topbar.js');
loadScript('/js/social-sidebar.js');
loadScript('/js/section-nav.js');
loadScript('/js/mobile-nav.js');
})();