kobold-ai/schmankerl
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

feat: add responsive mobile navigation, fix horizontal scroll overflow, and add toggleable real corporate login view with demo autofill

Browse Source
This commit is contained in:
kobold-ai
2026-09-21 21:35:17 +02:00
parent 2001ffb831
commit 1ff5b3a31e
3 changed files with 477 additions and 25 deletions
Download Patch File Download Diff File Expand all files Collapse all files
app/templates/base.html
+27 -2
View File
@@ -14,9 +14,14 @@
<a href="/" class="brand">
🥨 <span>Schmankerl</span> <small class="tenant-badge">{{ tenant.name if tenant else 'Portal' }}</small>
</a>
<nav class="nav-links">
<button class="mobile-toggle" aria-label="Menü öffnen" id="mobileNavToggle" aria-expanded="false">
<span class="bar"></span>
<span class="bar"></span>
<span class="bar"></span>
</button>
<nav class="nav-links" id="navLinks">
{% if current_user %}
<a href="/">Brotzeit bestellen</a>
<a href="/">🥨 Brotzeit bestellen</a>
{% if current_user.role == 'admin' %}
<a href="/admin" class="nav-admin">👨‍🍳 Einkäufer-Cockpit</a>
{% endif %}
@@ -43,5 +48,25 @@
</div>
</footer>
<script>
const navToggle = document.getElementById('mobileNavToggle');
const navLinks = document.getElementById('navLinks');
if (navToggle && navLinks) {
navToggle.addEventListener('click', () => {
const isOpen = navLinks.classList.toggle('open');
navToggle.classList.toggle('open', isOpen);
navToggle.setAttribute('aria-expanded', isOpen);
document.body.style.overflow = isOpen ? 'hidden' : '';
});
navLinks.querySelectorAll('a').forEach(link => {
link.addEventListener('click', () => {
navLinks.classList.remove('open');
navToggle.classList.remove('open');
navToggle.setAttribute('aria-expanded', 'false');
document.body.style.overflow = '';
});
});
}
</script>
</body>
</html>
app/templates/login.html
+85 -23
View File
@@ -27,37 +27,53 @@
</div>
{% endif %}
<!-- 1-Click Demo Login Box -->
<div class="demo-login-card">
<h3>🚀 1-Klick Demo-Zugang</h3>
<p class="card-hint">Wähle eine Rolle zum sofortigen Ausprobieren:</p>
<div class="demo-btn-grid">
<form action="/login/quick" method="POST">
<input type="hidden" name="role" value="user">
<button type="submit" class="btn-demo">
👤 <strong>Mitarbeiter</strong><br>
<small>Brotzeit bestellen & Übersicht</small>
</button>
</form>
<form action="/login/quick" method="POST">
<input type="hidden" name="role" value="admin">
<button type="submit" class="btn-demo admin">
👨‍🍳 <strong>Einkäufer / Admin</strong><br>
<small>Sammelliste & Kasse verwalten</small>
</button>
</form>
</div>
{% if tenant and tenant.slug == 'demo' %}
<!-- Demo Switch & Credentials Box -->
<div class="demo-toggle-wrapper">
<button type="button" class="btn-demo-toggle" id="btnToggleDemo" onclick="toggleDemoBox()">
<span id="demoToggleIcon">🧪</span> <span id="demoToggleText">Demo-Zugangsdaten einblenden</span>
</button>
</div>
<div id="demoCredentialsBox" class="demo-credentials-card" style="display: none;">
<div class="demo-card-header">
<strong>🧪 Demo-Zugangsdaten (Klick auf „Ausfüllen“):</strong>
</div>
<div class="demo-creds-list">
<div class="demo-cred-item">
<div>
<span class="badge-role admin">👨‍🍳 Admin</span>
<code>admin@waiswuaschd.de</code>
<span class="text-muted" style="font-size: 0.8rem;">(PW: <code>admin123</code>)</span>
</div>
<button type="button" class="btn-fill-small" onclick="fillCredentials('admin@waiswuaschd.de', 'admin123')">
✍️ Ausfüllen
</button>
</div>
<div class="demo-cred-item">
<div>
<span class="badge-role">👤 Mitarbeiter</span>
<code>maxi@waiswuaschd.de</code>
<span class="text-muted" style="font-size: 0.8rem;">(PW: <code>demo123</code>)</span>
</div>
<button type="button" class="btn-fill-small" onclick="fillCredentials('maxi@waiswuaschd.de', 'demo123')">
✍️ Ausfüllen
</button>
</div>
</div>
</div>
{% endif %}
<!-- Login Form -->
<form action="/login" method="POST" id="formLogin" class="auth-form" style="margin-top: 1.5rem;">
<form action="/login" method="POST" id="formLogin" class="auth-form">
<div class="input-group">
<label for="login_email">E-Mail-Adresse</label>
<input type="email" id="login_email" name="email" required placeholder="name@firma.de">
<input type="email" id="login_email" name="email" required placeholder="name@firma.de" autocomplete="username">
</div>
<div class="input-group">
<label for="login_password">Passwort</label>
<input type="password" id="login_password" name="password" required placeholder="••••••••">
<input type="password" id="login_password" name="password" required placeholder="••••••••" autocomplete="current-password">
</div>
<button type="submit" class="btn-submit">Anmelden</button>
</form>
@@ -84,4 +100,50 @@
</div>
</div>
<script>
function fillCredentials(email, pw) {
const emailInput = document.getElementById('login_email');
const pwInput = document.getElementById('login_password');
emailInput.value = email;
pwInput.value = pw;
emailInput.focus();
emailInput.style.boxShadow = '0 0 0 2px var(--accent)';
pwInput.style.boxShadow = '0 0 0 2px var(--accent)';
setTimeout(() => {
emailInput.style.boxShadow = '';
pwInput.style.boxShadow = '';
}, 1000);
}
function toggleDemoBox() {
const box = document.getElementById('demoCredentialsBox');
const text = document.getElementById('demoToggleText');
const icon = document.getElementById('demoToggleIcon');
if (box.style.display === 'none' || !box.style.display) {
box.style.display = 'block';
text.innerText = 'Demo-Hilfe ausblenden (Reale Firmenansicht)';
icon.innerText = '🏢';
localStorage.setItem('schmankerl_show_demo', '1');
} else {
box.style.display = 'none';
text.innerText = 'Demo-Zugangsdaten einblenden';
icon.innerText = '🧪';
localStorage.setItem('schmankerl_show_demo', '0');
}
}
document.addEventListener('DOMContentLoaded', () => {
if (localStorage.getItem('schmankerl_show_demo') === '1') {
const box = document.getElementById('demoCredentialsBox');
const text = document.getElementById('demoToggleText');
const icon = document.getElementById('demoToggleIcon');
if (box && text && icon) {
box.style.display = 'block';
text.innerText = 'Demo-Hilfe ausblenden (Reale Firmenansicht)';
icon.innerText = '🏢';
}
}
});
</script>
{% endblock %}