marwinm/website
3
2
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

🎨 style: update UI and database schema for improved user experience

Browse Source
This commit is contained in:
Till Tomczak
2025-05-02 18:49:02 +02:00
parent e8d356a27a
commit 699127f41f
5 changed files with 824 additions and 95 deletions
Download Patch File Download Diff File Expand all files Collapse all files

52
templates/base.html
View File

@@ -397,12 +397,52 @@
<!-- Rechte Seite -->
<div class="flex items-center space-x-4">
<!-- Dark/Light Mode Schalter -->
<button
@click="toggleDarkMode()"
class="theme-toggle"
:class="{ 'dark': darkMode }"
aria-label="Dark Mode umschalten"
>
<button
@click="darkMode = !darkMode; document.documentElement.classList.toggle('dark', darkMode); localStorage.setItem('darkMode', darkMode ? 'dark' : 'light');"
class="p-2 ml-3 rounded-full flex items-center justify-center transition-all duration-300 group focus:outline-none focus:ring-2 focus:ring-indigo-400/50"
:class="darkMode ? 'bg-gray-800 hover:bg-gray-700' : 'bg-white/90 hover:bg-white shadow-md'"
aria-label="Themen-Modus wechseln">
<!-- Verbesserte Icon-Container für Light/Dark Mode Toggle -->
<div class="relative w-10 h-6 flex items-center justify-center transition-all duration-500">
<!-- Sonne (Light Mode) -->
<svg
xmlns="http://www.w3.org/2000/svg"
class="h-5 w-5 absolute transform transition-all duration-500"
:class="darkMode ? 'opacity-0 rotate-90 scale-0' : 'opacity-100 rotate-0 scale-100'"
fill="none"
viewBox="0 0 24 24"
stroke="currentColor"
stroke-width="2"
:style="darkMode ? '' : 'color: #6d28d9;'">
<path
stroke-linecap="round"
stroke-linejoin="round"
d="M12 3v1m0 16v1m9-9h-1M4 12H3m15.364 6.364l-.707-.707M6.343 6.343l-.707-.707m12.728 0l-.707.707M6.343 17.657l-.707.707M16 12a4 4 0 11-8 0 4 4 0 018 0z" />
</svg>
<!-- Mond (Dark Mode) -->
<svg
xmlns="http://www.w3.org/2000/svg"
class="h-5 w-5 absolute transform transition-all duration-500"
:class="darkMode ? 'opacity-100 rotate-0 scale-100' : 'opacity-0 -rotate-90 scale-0'"
fill="none"
viewBox="0 0 24 24"
stroke="currentColor"
stroke-width="2"
style="color: #c4b5fd;">
<path
stroke-linecap="round"
stroke-linejoin="round"
d="M20.354 15.354A9 9 0 018.646 3.646 9.003 9.003 0 0012 21a9.003 9.003 0 008.354-5.646z" />
</svg>
<!-- Hintergrund-Glow-Effekt -->
<div
class="absolute inset-0 rounded-full transition-all duration-300"
:class="darkMode ? 'shadow-none' : 'shadow-[0_0_10px_rgba(124,58,237,0.3)]'">
</div>
</div>
</button>
<!-- Profil-Link oder Login -->
{% if current_user.is_authenticated %}