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

🎨 style: update base styles and background for improved UI consistency

Browse Source
This commit is contained in:
Till Tomczak
2025-05-02 18:02:00 +02:00
parent eff3fda1ca
commit 81170fbd3d
3 changed files with 71 additions and 19 deletions
Download Patch File Download Diff File Expand all files Collapse all files

20
static/css/base-styles.css
View File

@@ -545,27 +545,35 @@ body:not(.dark) .card:hover {
transform: translateY(-2px);
}
/* Light Mode Buttons */
/* Light Mode Buttons mit verbesserter Lesbarkeit */
body:not(.dark) .btn-primary {
background-color: var(--light-primary);
background: linear-gradient(135deg, var(--light-primary), var(--light-primary-hover));
color: white;
border: none;
transition: all 0.2s ease;
text-shadow: 0 1px 2px rgba(0, 0, 0, 0.2);
font-weight: 500;
letter-spacing: 0.01em;
}
body:not(.dark) .btn-primary:hover {
background-color: var(--light-primary-hover);
box-shadow: 0 4px 12px rgba(124, 58, 237, 0.2);
background: linear-gradient(135deg, var(--light-primary-hover), var(--light-primary));
box-shadow: 0 4px 12px rgba(124, 58, 237, 0.2), 0 2px 4px rgba(0, 0, 0, 0.1);
text-shadow: 0 1px 3px rgba(0, 0, 0, 0.3);
}
body:not(.dark) .btn-secondary {
background-color: #f3f4f6;
background: linear-gradient(135deg, #f8fafc, #f1f5f9);
color: var(--light-text);
border: 1px solid #e5e7eb;
font-weight: 500;
text-shadow: 0 1px 0 rgba(255, 255, 255, 0.5);
}
body:not(.dark) .btn-secondary:hover {
background-color: #e5e7eb;
background: linear-gradient(135deg, #f1f5f9, #e2e8f0);
border-color: #d1d5db;
box-shadow: 0 2px 8px rgba(0, 0, 0, 0.05);
}
body:not(.dark) .btn-outline {

43
static/neural-network-background.js
View File

@@ -41,15 +41,29 @@ class NeuralNetworkBackground {
this.animationFrameId = null;
this.isDestroying = false;
// Farben - Lila Farbpalette
// Farben für Dark/Light Mode
this.colors = {
background: '#040215',
nodeColor: '#6a5498',
nodePulse: '#9c7fe0',
connectionColor: '#4a3870',
flowColor: '#b47fea'
dark: {
background: '#040215',
nodeColor: '#6a5498',
nodePulse: '#9c7fe0',
connectionColor: '#4a3870',
flowColor: '#b47fea'
},
light: {
background: '#f8f9fc',
nodeColor: '#8c6db5',
nodePulse: '#b094dd',
connectionColor: '#9882bd',
flowColor: '#7d5bb5'
}
};
// Aktuelle Farbpalette basierend auf Theme
this.currentColors = document.documentElement.classList.contains('dark')
? this.colors.dark
: this.colors.light;
// Konfiguration
this.config = {
nodeCount: 80, // Anzahl der Knoten
@@ -266,7 +280,11 @@ class NeuralNetworkBackground {
}
render(now) {
const colors = this.colors;
// Aktualisiere Farben basierend auf aktuellem Theme
this.currentColors = document.documentElement.classList.contains('dark')
? this.colors.dark
: this.colors.light;
const colors = this.currentColors;
const width = this.canvas.width / (window.devicePixelRatio || 1);
const height = this.canvas.height / (window.devicePixelRatio || 1);
@@ -386,7 +404,12 @@ class NeuralNetworkBackground {
document.addEventListener('DOMContentLoaded', () => {
window.neuralBackground = new NeuralNetworkBackground();
// Sicherstellen, dass die Seite immer im Dark Mode ist
document.documentElement.classList.add('dark');
document.body.classList.add('dark');
// Theme-Wechsel-Event-Listener
document.addEventListener('theme-changed', () => {
if (window.neuralBackground) {
window.neuralBackground.currentColors = document.documentElement.classList.contains('dark')
? window.neuralBackground.colors.dark
: window.neuralBackground.colors.light;
}
});
});

27
templates/base.html
View File

@@ -129,13 +129,15 @@
<style>
/* Light‑Mode */
:root {
--bg-primary:#f4f6fa;
--bg-secondary:#e9ecf3;
--bg-primary:#f8fafc;
--bg-secondary:#f1f5f9;
--text-primary:#232837;
--text-secondary:#475569;
--accent-primary:#7c3aed;
--accent-secondary:#8b5cf6;
--glow-effect:0 0 8px rgba(139,92,246,.08);
background-image: linear-gradient(to bottom right, rgba(248, 250, 252, 0.8), rgba(241, 245, 249, 0.8));
background-attachment: fixed;
}
/* Dark‑Mode */
.dark {
@@ -149,7 +151,8 @@
}
body {
@apply min-h-screen bg-[color:var(--bg-primary)] text-[color:var(--text-primary)] transition-colors duration-300;
@apply min-h-screen bg-[color:var(--bg-primary)] text-[color:var(--text-primary)];
transition: background-color 0.5s ease-in-out, color 0.3s ease-in-out, background-image 0.5s ease-in-out;
}
/* Utilities */
@@ -320,6 +323,24 @@
<!-- Rechte Seite -->
<div class="flex items-center space-x-4">
<!-- Dark/Light Mode Schalter -->
<button
@click="toggleDarkMode()"
class="relative inline-flex h-6 w-11 items-center rounded-full transition-colors duration-300 focus:outline-none"
:class="darkMode ? 'bg-purple-600' : 'bg-gray-200'"
>
<span class="sr-only">Dark Mode umschalten</span>
<!-- Schieberegler -->
<span
class="inline-block h-4 w-4 transform rounded-full bg-white transition-transform duration-300"
:class="darkMode ? 'translate-x-6' : 'translate-x-1'"
></span>
<!-- Icons -->
<i class="fas fa-sun absolute left-1 text-yellow-400 transition-opacity duration-300"
:class="darkMode ? 'opacity-0' : 'opacity-100'"></i>
<i class="fas fa-moon absolute right-1 text-gray-100 transition-opacity duration-300"
:class="darkMode ? 'opacity-100' : 'opacity-0'"></i>
</button>
<!-- Profil-Link oder Login -->
{% if current_user.is_authenticated %}
<div class="relative" x-data="{ open: false }">