chore: automatic commit 2025-04-30 12:48
This commit is contained in:
27
static/css/all.min.css
vendored
Normal file
27
static/css/all.min.css
vendored
Normal file
@@ -0,0 +1,27 @@
|
||||
/*
|
||||
* Font Awesome 6.4.0
|
||||
*
|
||||
* This is a placeholder file. For production, you should:
|
||||
* 1. Download Font Awesome from https://fontawesome.com/download
|
||||
* 2. Extract the downloaded package
|
||||
* 3. Copy the 'css/all.min.css' file to this location
|
||||
* 4. Copy the 'webfonts' folder to '/static/webfonts/'
|
||||
*
|
||||
* Alternatively, you can install via npm and copy the files:
|
||||
* npm install @fortawesome/fontawesome-free
|
||||
* cp -r node_modules/@fortawesome/fontawesome-free/css/all.min.css static/css/
|
||||
* cp -r node_modules/@fortawesome/fontawesome-free/webfonts/ static/
|
||||
*/
|
||||
|
||||
/* Placeholder styles for common Font Awesome icons */
|
||||
.fa, .fas, .far, .fab {
|
||||
display: inline-block;
|
||||
width: 1em;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
/* Warning message */
|
||||
body::before {
|
||||
content: "Font Awesome CSS placeholder. Please replace with the actual file.";
|
||||
display: none;
|
||||
}
|
||||
203
static/css/assistant.css
Normal file
203
static/css/assistant.css
Normal file
@@ -0,0 +1,203 @@
|
||||
/* ChatGPT Assistent Styles - Verbesserte Version */
|
||||
#chatgpt-assistant {
|
||||
font-family: 'Inter', sans-serif;
|
||||
}
|
||||
|
||||
#assistant-chat {
|
||||
transition: max-height 0.4s cubic-bezier(0.25, 0.1, 0.25, 1),
|
||||
opacity 0.3s cubic-bezier(0.25, 0.1, 0.25, 1);
|
||||
box-shadow: 0 10px 25px -5px rgba(0, 0, 0, 0.25);
|
||||
border-radius: 0.75rem;
|
||||
overflow: hidden;
|
||||
max-width: calc(100vw - 2rem);
|
||||
}
|
||||
|
||||
#assistant-toggle {
|
||||
transition: transform 0.3s ease, background-color 0.2s ease;
|
||||
box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
|
||||
z-index: 60;
|
||||
}
|
||||
|
||||
#assistant-toggle:hover {
|
||||
transform: scale(1.1) rotate(10deg);
|
||||
}
|
||||
|
||||
#assistant-history {
|
||||
scrollbar-width: thin;
|
||||
scrollbar-color: rgba(156, 163, 175, 0.5) transparent;
|
||||
}
|
||||
|
||||
#assistant-history::-webkit-scrollbar {
|
||||
width: 6px;
|
||||
}
|
||||
|
||||
#assistant-history::-webkit-scrollbar-track {
|
||||
background: transparent;
|
||||
}
|
||||
|
||||
#assistant-history::-webkit-scrollbar-thumb {
|
||||
background-color: rgba(156, 163, 175, 0.5);
|
||||
border-radius: 3px;
|
||||
}
|
||||
|
||||
.dark #assistant-history::-webkit-scrollbar-thumb {
|
||||
background-color: rgba(156, 163, 175, 0.3);
|
||||
}
|
||||
|
||||
/* Verbesserte Message-Bubbles mit Schatten und Animation */
|
||||
#assistant-history .flex > div {
|
||||
box-shadow: 0 2px 5px rgba(0, 0, 0, 0.05);
|
||||
animation: messageAppear 0.3s ease-out forwards;
|
||||
opacity: 0;
|
||||
transform: translateY(10px);
|
||||
}
|
||||
|
||||
@keyframes messageAppear {
|
||||
to {
|
||||
opacity: 1;
|
||||
transform: translateY(0);
|
||||
}
|
||||
}
|
||||
|
||||
/* Verzögerte Animation für Messages */
|
||||
#assistant-history .flex:nth-child(1) > div { animation-delay: 0.05s; }
|
||||
#assistant-history .flex:nth-child(2) > div { animation-delay: 0.1s; }
|
||||
#assistant-history .flex:nth-child(3) > div { animation-delay: 0.15s; }
|
||||
#assistant-history .flex:nth-child(4) > div { animation-delay: 0.2s; }
|
||||
#assistant-history .flex:nth-child(5) > div { animation-delay: 0.25s; }
|
||||
|
||||
/* Vorschläge styling */
|
||||
#assistant-suggestions {
|
||||
padding: 0.5rem 0.75rem;
|
||||
transition: all 0.3s ease;
|
||||
}
|
||||
|
||||
.suggestion-pill {
|
||||
animation: pillAppear 0.4s ease forwards;
|
||||
opacity: 0;
|
||||
transform: scale(0.9);
|
||||
box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
|
||||
}
|
||||
|
||||
@keyframes pillAppear {
|
||||
to {
|
||||
opacity: 1;
|
||||
transform: scale(1);
|
||||
}
|
||||
}
|
||||
|
||||
/* Styling für verschiedene Verzögerungen bei Vorschlägen */
|
||||
#assistant-suggestions button:nth-child(1) { animation-delay: 0.1s; }
|
||||
#assistant-suggestions button:nth-child(2) { animation-delay: 0.2s; }
|
||||
#assistant-suggestions button:nth-child(3) { animation-delay: 0.3s; }
|
||||
|
||||
/* Mach Platz für Notifications, damit sie nicht mit dem Assistenten überlappen */
|
||||
.notification-area {
|
||||
bottom: 5rem;
|
||||
}
|
||||
|
||||
/* Verbesserte Glassmorphism-Effekt */
|
||||
.glass-morphism {
|
||||
background: rgba(255, 255, 255, 0.25);
|
||||
backdrop-filter: blur(12px);
|
||||
-webkit-backdrop-filter: blur(12px);
|
||||
box-shadow: 0 8px 32px 0 rgba(31, 38, 135, 0.15);
|
||||
border: 1px solid rgba(255, 255, 255, 0.2);
|
||||
}
|
||||
|
||||
.dark .glass-morphism {
|
||||
background: rgba(15, 23, 42, 0.35);
|
||||
border: 1px solid rgba(255, 255, 255, 0.06);
|
||||
box-shadow: 0 8px 32px 0 rgba(0, 0, 0, 0.4);
|
||||
}
|
||||
|
||||
/* Verbesserte Farbpalette für Dark Theme */
|
||||
.dark {
|
||||
--tw-bg-opacity: 1;
|
||||
background-color: rgba(10, 15, 25, var(--tw-bg-opacity)) !important;
|
||||
min-height: 100vh;
|
||||
}
|
||||
|
||||
.dark .bg-dark-900 {
|
||||
--tw-bg-opacity: 1;
|
||||
background-color: rgba(10, 15, 25, var(--tw-bg-opacity)) !important;
|
||||
}
|
||||
|
||||
.dark .bg-dark-800 {
|
||||
--tw-bg-opacity: 1;
|
||||
background-color: rgba(15, 23, 42, var(--tw-bg-opacity)) !important;
|
||||
}
|
||||
|
||||
.dark .bg-dark-700 {
|
||||
--tw-bg-opacity: 1;
|
||||
background-color: rgba(23, 33, 64, var(--tw-bg-opacity)) !important;
|
||||
}
|
||||
|
||||
/* Typing Indicator Animation Styles */
|
||||
.typing-indicator {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
.typing-indicator span {
|
||||
height: 8px;
|
||||
width: 8px;
|
||||
background-color: #888;
|
||||
border-radius: 50%;
|
||||
display: inline-block;
|
||||
margin: 0 2px;
|
||||
opacity: 0.4;
|
||||
animation: bounce 1.4s infinite ease-in-out;
|
||||
}
|
||||
|
||||
.typing-indicator span:nth-child(1) { animation-delay: 0s; }
|
||||
.typing-indicator span:nth-child(2) { animation-delay: 0.2s; }
|
||||
.typing-indicator span:nth-child(3) { animation-delay: 0.4s; }
|
||||
|
||||
@keyframes bounce {
|
||||
0%, 80%, 100% { transform: translateY(0); }
|
||||
40% { transform: translateY(-8px); }
|
||||
}
|
||||
|
||||
/* Chat Input Fokus-Effekt */
|
||||
#assistant-chat input:focus {
|
||||
border-color: var(--primary-500, #3B82F6);
|
||||
box-shadow: 0 0 0 2px rgba(59, 130, 246, 0.25);
|
||||
}
|
||||
|
||||
.dark #assistant-chat input:focus {
|
||||
box-shadow: 0 0 0 2px rgba(59, 130, 246, 0.4);
|
||||
}
|
||||
|
||||
/* Verbesserte Responsive Layouts */
|
||||
@media (max-width: 640px) {
|
||||
#assistant-chat {
|
||||
width: calc(100vw - 2rem) !important;
|
||||
}
|
||||
|
||||
#chatgpt-assistant {
|
||||
right: 1rem;
|
||||
bottom: 1rem;
|
||||
}
|
||||
}
|
||||
|
||||
/* Footer immer unten */
|
||||
html, body {
|
||||
height: 100%;
|
||||
margin: 0;
|
||||
min-height: 100vh;
|
||||
}
|
||||
|
||||
body {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
min-height: 100vh;
|
||||
}
|
||||
|
||||
main {
|
||||
flex: 1 0 auto;
|
||||
}
|
||||
|
||||
footer {
|
||||
flex-shrink: 0;
|
||||
}
|
||||
526
static/css/base-styles.css
Normal file
526
static/css/base-styles.css
Normal file
@@ -0,0 +1,526 @@
|
||||
/* Base Styles - Dark, Mystical Theme */
|
||||
|
||||
/* Global Variables */
|
||||
:root {
|
||||
--font-sans: 'Inter', system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
|
||||
--font-mono: 'JetBrains Mono', SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;
|
||||
|
||||
/* Light Theme */
|
||||
--bg-primary-light: #f8fafc;
|
||||
--bg-secondary-light: #f1f5f9;
|
||||
--bg-tertiary-light: #e2e8f0;
|
||||
--text-primary-light: #1e293b;
|
||||
--text-secondary-light: #475569;
|
||||
--accent-primary-light: #7c3aed;
|
||||
--accent-secondary-light: #8b5cf6;
|
||||
--accent-tertiary-light: #a78bfa;
|
||||
--border-light: #e2e8f0;
|
||||
--shadow-light: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06);
|
||||
--glow-light: 0 0 15px rgba(139, 92, 246, 0.3);
|
||||
|
||||
/* Dark Theme */
|
||||
--bg-primary-dark: #0a0e19;
|
||||
--bg-secondary-dark: #111827;
|
||||
--bg-tertiary-dark: #1f2937;
|
||||
--text-primary-dark: #f9fafb;
|
||||
--text-secondary-dark: #e5e7eb;
|
||||
--accent-primary-dark: #6d28d9;
|
||||
--accent-secondary-dark: #8b5cf6;
|
||||
--accent-tertiary-dark: #a78bfa;
|
||||
--border-dark: #1f2937;
|
||||
--shadow-dark: 0 4px 6px -1px rgba(0, 0, 0, 0.5), 0 2px 4px -1px rgba(0, 0, 0, 0.3);
|
||||
--glow-dark: 0 0 15px rgba(124, 58, 237, 0.5);
|
||||
|
||||
/* Transitions */
|
||||
--transition-fast: 150ms ease-in-out;
|
||||
--transition-normal: 300ms ease-in-out;
|
||||
--transition-slow: 500ms ease-in-out;
|
||||
|
||||
/* Light mode optimierte Farben */
|
||||
--light-bg: #f9fafb;
|
||||
--light-text: #1e293b;
|
||||
--light-heading: #0f172a;
|
||||
--light-primary: #3b82f6;
|
||||
--light-primary-hover: #4f46e5;
|
||||
--light-secondary: #6b7280;
|
||||
--light-border: #e5e7eb;
|
||||
--light-card-bg: rgba(255, 255, 255, 0.92);
|
||||
--light-navbar-bg: rgba(255, 255, 255, 0.92);
|
||||
--light-input-bg: #ffffff;
|
||||
--light-input-border: #d1d5db;
|
||||
--light-input-focus: #3b82f6;
|
||||
--light-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06);
|
||||
}
|
||||
|
||||
/* Base Styles */
|
||||
html {
|
||||
font-family: var(--font-sans);
|
||||
-webkit-font-smoothing: antialiased;
|
||||
-moz-osx-font-smoothing: grayscale;
|
||||
scroll-behavior: smooth;
|
||||
}
|
||||
|
||||
body {
|
||||
transition: background-color var(--transition-normal), color var(--transition-normal);
|
||||
overflow-x: hidden;
|
||||
min-height: 100vh;
|
||||
font-family: var(--font-sans);
|
||||
line-height: 1.5;
|
||||
}
|
||||
|
||||
/* Dark Mode */
|
||||
html.dark body {
|
||||
background-color: var(--bg-primary-dark);
|
||||
color: var(--text-primary-dark);
|
||||
}
|
||||
|
||||
/* Light Mode */
|
||||
body:not(.dark) {
|
||||
background-color: var(--light-bg);
|
||||
color: var(--light-text);
|
||||
}
|
||||
|
||||
/* Typography */
|
||||
h1, h2, h3, h4, h5, h6 {
|
||||
font-weight: 600;
|
||||
line-height: 1.2;
|
||||
}
|
||||
|
||||
.hero-heading {
|
||||
font-size: 2.75rem;
|
||||
font-weight: 700;
|
||||
letter-spacing: -0.02em;
|
||||
line-height: 1.1;
|
||||
}
|
||||
|
||||
.section-heading {
|
||||
font-size: 2rem;
|
||||
font-weight: 700;
|
||||
letter-spacing: -0.01em;
|
||||
}
|
||||
|
||||
.gradient-text {
|
||||
background-clip: text;
|
||||
-webkit-background-clip: text;
|
||||
color: transparent;
|
||||
display: inline-block;
|
||||
}
|
||||
|
||||
html.dark .gradient-text {
|
||||
background-image: linear-gradient(135deg, var(--accent-primary-dark), var(--accent-secondary-dark));
|
||||
text-shadow: var(--glow-dark);
|
||||
}
|
||||
|
||||
.gradient-text {
|
||||
background-image: linear-gradient(135deg, var(--accent-primary-light), var(--accent-secondary-light));
|
||||
text-shadow: var(--glow-light);
|
||||
}
|
||||
|
||||
/* Mystical elements */
|
||||
.mystical-border {
|
||||
position: relative;
|
||||
}
|
||||
|
||||
.mystical-border::before {
|
||||
content: '';
|
||||
position: absolute;
|
||||
top: 0;
|
||||
left: 0;
|
||||
right: 0;
|
||||
bottom: 0;
|
||||
border: 1px solid;
|
||||
border-radius: inherit;
|
||||
pointer-events: none;
|
||||
opacity: 0.3;
|
||||
}
|
||||
|
||||
html.dark .mystical-border::before {
|
||||
border-color: var(--accent-primary-dark);
|
||||
box-shadow: var(--glow-dark);
|
||||
}
|
||||
|
||||
.mystical-border::before {
|
||||
border-color: var(--accent-primary-light);
|
||||
box-shadow: var(--glow-light);
|
||||
}
|
||||
|
||||
/* Navigation Links */
|
||||
.nav-link {
|
||||
position: relative;
|
||||
padding: 0.5rem 0.75rem;
|
||||
border-radius: 0.5rem;
|
||||
transition: var(--transition-normal);
|
||||
}
|
||||
|
||||
html.dark .nav-link {
|
||||
color: var(--text-secondary-dark);
|
||||
}
|
||||
|
||||
.nav-link {
|
||||
color: var(--text-secondary-light);
|
||||
}
|
||||
|
||||
html.dark .nav-link:hover {
|
||||
color: var(--text-primary-dark);
|
||||
background-color: rgba(31, 41, 55, 0.5);
|
||||
}
|
||||
|
||||
.nav-link:hover {
|
||||
color: var(--text-primary-light);
|
||||
background-color: rgba(241, 245, 249, 0.5);
|
||||
}
|
||||
|
||||
html.dark .nav-link-active {
|
||||
color: var(--accent-tertiary-dark);
|
||||
background-color: rgba(109, 40, 217, 0.15);
|
||||
}
|
||||
|
||||
.nav-link-light-active {
|
||||
color: var(--accent-primary-light);
|
||||
background-color: rgba(139, 92, 246, 0.1);
|
||||
}
|
||||
|
||||
/* Glass Morphism Effects */
|
||||
.glass-navbar-dark {
|
||||
background-color: rgba(10, 14, 25, 0.8);
|
||||
backdrop-filter: blur(10px);
|
||||
-webkit-backdrop-filter: blur(10px);
|
||||
border-color: rgba(255, 255, 255, 0.1);
|
||||
box-shadow: 0 4px 30px rgba(0, 0, 0, 0.3);
|
||||
}
|
||||
|
||||
.glass-navbar-light {
|
||||
background-color: rgba(255, 255, 255, 0.8);
|
||||
backdrop-filter: blur(10px);
|
||||
-webkit-backdrop-filter: blur(10px);
|
||||
border-color: rgba(226, 232, 240, 0.5);
|
||||
box-shadow: 0 4px 30px rgba(0, 0, 0, 0.1);
|
||||
}
|
||||
|
||||
.glass-morphism {
|
||||
transition: background-color var(--transition-normal), backdrop-filter var(--transition-normal);
|
||||
}
|
||||
|
||||
/* Cards */
|
||||
.mystical-card {
|
||||
border-radius: 0.75rem;
|
||||
overflow: hidden;
|
||||
transition: var(--transition-normal);
|
||||
}
|
||||
|
||||
html.dark .mystical-card {
|
||||
background-color: var(--bg-secondary-dark);
|
||||
border: 1px solid var(--border-dark);
|
||||
box-shadow: var(--shadow-dark);
|
||||
}
|
||||
|
||||
.mystical-card {
|
||||
background-color: var(--bg-secondary-light);
|
||||
border: 1px solid var(--border-light);
|
||||
box-shadow: var(--shadow-light);
|
||||
}
|
||||
|
||||
html.dark .mystical-card:hover {
|
||||
box-shadow: var(--glow-dark), var(--shadow-dark);
|
||||
border-color: var(--accent-primary-dark);
|
||||
}
|
||||
|
||||
.mystical-card:hover {
|
||||
box-shadow: var(--glow-light), var(--shadow-light);
|
||||
border-color: var(--accent-primary-light);
|
||||
}
|
||||
|
||||
/* Buttons */
|
||||
.mystical-button {
|
||||
padding: 0.625rem 1.25rem;
|
||||
border-radius: 0.5rem;
|
||||
font-weight: 500;
|
||||
transition: var(--transition-normal);
|
||||
position: relative;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
.mystical-button::before {
|
||||
content: '';
|
||||
position: absolute;
|
||||
top: 0;
|
||||
left: 0;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
background: linear-gradient(135deg, transparent, rgba(255, 255, 255, 0.05), transparent);
|
||||
transform: translateX(-100%);
|
||||
transition: transform 0.8s ease-in-out;
|
||||
}
|
||||
|
||||
.mystical-button:hover::before {
|
||||
transform: translateX(100%);
|
||||
}
|
||||
|
||||
html.dark .mystical-button-primary {
|
||||
background-color: var(--accent-primary-dark);
|
||||
color: white;
|
||||
}
|
||||
|
||||
.mystical-button-primary {
|
||||
background-color: var(--accent-primary-light);
|
||||
color: white;
|
||||
}
|
||||
|
||||
html.dark .mystical-button-primary:hover {
|
||||
background-color: var(--accent-secondary-dark);
|
||||
box-shadow: var(--glow-dark);
|
||||
}
|
||||
|
||||
.mystical-button-primary:hover {
|
||||
background-color: var(--accent-secondary-light);
|
||||
box-shadow: var(--glow-light);
|
||||
}
|
||||
|
||||
html.dark .mystical-button-secondary {
|
||||
background-color: var(--bg-tertiary-dark);
|
||||
color: var(--text-primary-dark);
|
||||
border: 1px solid var(--border-dark);
|
||||
}
|
||||
|
||||
.mystical-button-secondary {
|
||||
background-color: var(--bg-tertiary-light);
|
||||
color: var(--text-primary-light);
|
||||
border: 1px solid var(--border-light);
|
||||
}
|
||||
|
||||
html.dark .mystical-button-secondary:hover {
|
||||
background-color: var(--bg-secondary-dark);
|
||||
border-color: var(--accent-tertiary-dark);
|
||||
}
|
||||
|
||||
.mystical-button-secondary:hover {
|
||||
background-color: var(--bg-secondary-light);
|
||||
border-color: var(--accent-tertiary-light);
|
||||
}
|
||||
|
||||
/* Inputs */
|
||||
.mystical-input {
|
||||
padding: 0.5rem 0.75rem;
|
||||
border-radius: 0.5rem;
|
||||
transition: var(--transition-normal);
|
||||
width: 100%;
|
||||
outline: none;
|
||||
}
|
||||
|
||||
html.dark .mystical-input {
|
||||
background-color: var(--bg-tertiary-dark);
|
||||
border: 1px solid var(--border-dark);
|
||||
color: var(--text-primary-dark);
|
||||
}
|
||||
|
||||
.mystical-input {
|
||||
background-color: var(--bg-tertiary-light);
|
||||
border: 1px solid var(--border-light);
|
||||
color: var(--text-primary-light);
|
||||
}
|
||||
|
||||
html.dark .mystical-input:focus {
|
||||
border-color: var(--accent-tertiary-dark);
|
||||
box-shadow: 0 0 0 3px rgba(139, 92, 246, 0.25);
|
||||
}
|
||||
|
||||
.mystical-input:focus {
|
||||
border-color: var(--accent-tertiary-light);
|
||||
box-shadow: 0 0 0 3px rgba(139, 92, 246, 0.15);
|
||||
}
|
||||
|
||||
/* Animations */
|
||||
@keyframes floatAnimation {
|
||||
0% { transform: translateY(0); }
|
||||
50% { transform: translateY(-5px); }
|
||||
100% { transform: translateY(0); }
|
||||
}
|
||||
|
||||
.animate-float {
|
||||
animation: floatAnimation 3s ease-in-out infinite;
|
||||
}
|
||||
|
||||
@keyframes fadeIn {
|
||||
from { opacity: 0; }
|
||||
to { opacity: 1; }
|
||||
}
|
||||
|
||||
.animate-fade-in {
|
||||
animation: fadeIn 0.5s ease-out forwards;
|
||||
}
|
||||
|
||||
/* Scroll Bars */
|
||||
::-webkit-scrollbar {
|
||||
width: 0.5rem;
|
||||
height: 0.5rem;
|
||||
}
|
||||
|
||||
html.dark ::-webkit-scrollbar-track {
|
||||
background: var(--bg-secondary-dark);
|
||||
}
|
||||
|
||||
::-webkit-scrollbar-track {
|
||||
background: var(--bg-secondary-light);
|
||||
}
|
||||
|
||||
html.dark ::-webkit-scrollbar-thumb {
|
||||
background: var(--accent-primary-dark);
|
||||
border-radius: 0.25rem;
|
||||
}
|
||||
|
||||
::-webkit-scrollbar-thumb {
|
||||
background: var(--accent-primary-light);
|
||||
border-radius: 0.25rem;
|
||||
}
|
||||
|
||||
html.dark ::-webkit-scrollbar-thumb:hover {
|
||||
background: var(--accent-secondary-dark);
|
||||
}
|
||||
|
||||
::-webkit-scrollbar-thumb:hover {
|
||||
background: var(--accent-secondary-light);
|
||||
}
|
||||
|
||||
/* Responsive Utilities */
|
||||
@media (max-width: 640px) {
|
||||
.hero-heading {
|
||||
font-size: 2rem;
|
||||
}
|
||||
|
||||
.section-heading {
|
||||
font-size: 1.5rem;
|
||||
}
|
||||
}
|
||||
|
||||
/* Additional background elements */
|
||||
.mystical-dot {
|
||||
position: absolute;
|
||||
border-radius: 50%;
|
||||
opacity: 0.15;
|
||||
filter: blur(3px);
|
||||
z-index: -1;
|
||||
transition: opacity var(--transition-normal);
|
||||
}
|
||||
|
||||
html.dark .mystical-dot {
|
||||
background-color: var(--accent-primary-dark);
|
||||
box-shadow: 0 0 15px var(--accent-primary-dark);
|
||||
}
|
||||
|
||||
.mystical-dot {
|
||||
background-color: var(--accent-primary-light);
|
||||
box-shadow: 0 0 15px var(--accent-primary-light);
|
||||
}
|
||||
|
||||
/* Accessibility */
|
||||
.sr-only {
|
||||
position: absolute;
|
||||
width: 1px;
|
||||
height: 1px;
|
||||
padding: 0;
|
||||
margin: -1px;
|
||||
overflow: hidden;
|
||||
clip: rect(0, 0, 0, 0);
|
||||
white-space: nowrap;
|
||||
border-width: 0;
|
||||
}
|
||||
|
||||
/* Focus styles for keyboard navigation */
|
||||
:focus-visible {
|
||||
outline: 2px solid var(--accent-primary-light);
|
||||
outline-offset: 2px;
|
||||
}
|
||||
|
||||
html.dark :focus-visible {
|
||||
outline-color: var(--accent-primary-dark);
|
||||
}
|
||||
|
||||
/* Light Mode Überschriften */
|
||||
body:not(.dark) h1,
|
||||
body:not(.dark) h2,
|
||||
body:not(.dark) h3,
|
||||
body:not(.dark) h4,
|
||||
body:not(.dark) h5,
|
||||
body:not(.dark) h6 {
|
||||
color: var(--light-heading);
|
||||
}
|
||||
|
||||
/* Light Mode Links */
|
||||
body:not(.dark) a {
|
||||
color: var(--light-primary);
|
||||
}
|
||||
|
||||
body:not(.dark) a:hover {
|
||||
color: var(--light-primary-hover);
|
||||
}
|
||||
|
||||
/* Light Mode Buttons */
|
||||
body:not(.dark) .btn,
|
||||
body:not(.dark) button:not(.toggle) {
|
||||
background-color: var(--light-primary);
|
||||
color: white;
|
||||
border: none;
|
||||
box-shadow: var(--light-shadow);
|
||||
border-radius: 0.375rem;
|
||||
padding: 0.5rem 1rem;
|
||||
transition: all 0.3s ease;
|
||||
}
|
||||
|
||||
body:not(.dark) .btn:hover,
|
||||
body:not(.dark) button:not(.toggle):hover {
|
||||
background-color: var(--light-primary-hover);
|
||||
transform: translateY(-2px);
|
||||
box-shadow: 0 6px 10px rgba(0, 0, 0, 0.1);
|
||||
}
|
||||
|
||||
/* Light Mode Cards und Panels */
|
||||
body:not(.dark) .card,
|
||||
body:not(.dark) .panel {
|
||||
background-color: var(--light-card-bg);
|
||||
border: 1px solid var(--light-border);
|
||||
border-radius: 0.5rem;
|
||||
box-shadow: var(--light-shadow);
|
||||
}
|
||||
|
||||
/* Light Mode Tabelle */
|
||||
body:not(.dark) table {
|
||||
background-color: var(--light-card-bg);
|
||||
border-collapse: collapse;
|
||||
}
|
||||
|
||||
body:not(.dark) th {
|
||||
background-color: var(--light-bg);
|
||||
color: var(--light-heading);
|
||||
border-bottom: 1px solid var(--light-border);
|
||||
}
|
||||
|
||||
body:not(.dark) td {
|
||||
border-bottom: 1px solid var(--light-border);
|
||||
}
|
||||
|
||||
/* Light Mode Inputs */
|
||||
body:not(.dark) input,
|
||||
body:not(.dark) textarea,
|
||||
body:not(.dark) select {
|
||||
background-color: var(--light-input-bg);
|
||||
border: 1px solid var(--light-input-border);
|
||||
color: var(--light-text);
|
||||
border-radius: 0.375rem;
|
||||
padding: 0.5rem;
|
||||
}
|
||||
|
||||
body:not(.dark) input:focus,
|
||||
body:not(.dark) textarea:focus,
|
||||
body:not(.dark) select:focus {
|
||||
border-color: var(--light-input-focus);
|
||||
box-shadow: 0 0 0 3px rgba(59, 130, 246, 0.1);
|
||||
outline: none;
|
||||
}
|
||||
|
||||
/* Navbar im Light Mode verbessern */
|
||||
body:not(.dark) nav,
|
||||
body:not(.dark) .navbar {
|
||||
background-color: var(--light-navbar-bg);
|
||||
box-shadow: var(--light-shadow);
|
||||
border-bottom: 1px solid var(--light-border);
|
||||
}
|
||||
3884
static/css/main.css
Normal file
3884
static/css/main.css
Normal file
File diff suppressed because it is too large
Load Diff
106
static/css/neural-network-background.css
Normal file
106
static/css/neural-network-background.css
Normal file
@@ -0,0 +1,106 @@
|
||||
/* Neural Network Background CSS */
|
||||
|
||||
/* Make sure the neural network background is always visible */
|
||||
#neural-network-background {
|
||||
position: fixed !important;
|
||||
top: 0 !important;
|
||||
left: 0 !important;
|
||||
width: 100% !important;
|
||||
height: 100% !important;
|
||||
z-index: -10 !important; /* Below content but above regular background */
|
||||
pointer-events: none !important;
|
||||
opacity: 1 !important;
|
||||
}
|
||||
|
||||
/* Override any solid background colors for the body */
|
||||
body, body.dark {
|
||||
background-color: transparent !important;
|
||||
}
|
||||
|
||||
/* Make sure any background color is removed */
|
||||
html.dark, html {
|
||||
background-color: transparent !important;
|
||||
}
|
||||
|
||||
/* Make sure any fixed backgrounds are removed */
|
||||
#app-container {
|
||||
background-color: transparent !important;
|
||||
}
|
||||
|
||||
/* Ensure content is properly visible over the background */
|
||||
.glass-morphism {
|
||||
background-color: rgba(17, 24, 39, 0.6) !important;
|
||||
backdrop-filter: blur(5px) !important;
|
||||
}
|
||||
|
||||
/* Dark Mode - Navbar */
|
||||
body.dark .glass-navbar-dark {
|
||||
background-color: rgba(10, 14, 25, 0.7) !important;
|
||||
}
|
||||
|
||||
/* Light Mode - Verbesserter Navbar */
|
||||
body .glass-navbar-light {
|
||||
background-color: rgba(255, 255, 255, 0.92) !important;
|
||||
backdrop-filter: blur(10px) !important;
|
||||
box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06) !important;
|
||||
border-bottom: 1px solid rgba(220, 220, 220, 0.5) !important;
|
||||
}
|
||||
|
||||
/* Light Mode - Verbesserte Lesbarkeit für Navbar-Elemente */
|
||||
body:not(.dark) .navbar-link,
|
||||
body:not(.dark) .navbar-item {
|
||||
color: #1e3a8a !important; /* Dunkles Blau für bessere Lesbarkeit */
|
||||
}
|
||||
|
||||
body:not(.dark) .navbar-link:hover,
|
||||
body:not(.dark) .navbar-item:hover {
|
||||
color: #4f46e5 !important; /* Helles Lila beim Hover */
|
||||
background-color: rgba(240, 245, 255, 0.9) !important;
|
||||
}
|
||||
|
||||
/* Light Mode - Buttons verbessert */
|
||||
body:not(.dark) .btn,
|
||||
body:not(.dark) button {
|
||||
background-color: #3b82f6 !important; /* Klares Blau statt Grau */
|
||||
color: white !important;
|
||||
border: none !important;
|
||||
box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1) !important;
|
||||
}
|
||||
|
||||
body:not(.dark) .btn:hover,
|
||||
body:not(.dark) button:hover {
|
||||
background-color: #4f46e5 !important; /* Lila beim Hover */
|
||||
box-shadow: 0 4px 6px rgba(0, 0, 0, 0.12) !important;
|
||||
}
|
||||
|
||||
/* Verbesserte Karten im Light Mode */
|
||||
body:not(.dark) .card,
|
||||
body:not(.dark) .panel {
|
||||
background-color: rgba(255, 255, 255, 0.92) !important;
|
||||
border: 1px solid rgba(220, 220, 220, 0.8) !important;
|
||||
box-shadow: 0 4px 6px rgba(0, 0, 0, 0.05) !important;
|
||||
}
|
||||
|
||||
/* Verbesserte Lesbarkeit für Text im Light Mode */
|
||||
body:not(.dark) {
|
||||
color: #1e293b !important; /* Dunkles Blau-Grau statt Schwarz */
|
||||
}
|
||||
|
||||
body:not(.dark) h1,
|
||||
body:not(.dark) h2,
|
||||
body:not(.dark) h3,
|
||||
body:not(.dark) h4,
|
||||
body:not(.dark) h5,
|
||||
body:not(.dark) h6 {
|
||||
color: #0f172a !important; /* Fast schwarz für Überschriften */
|
||||
}
|
||||
|
||||
/* Make sure footer has proper transparency and styling */
|
||||
body.dark footer {
|
||||
background-color: rgba(10, 14, 25, 0.7) !important;
|
||||
}
|
||||
|
||||
body:not(.dark) footer {
|
||||
background-color: rgba(249, 250, 251, 0.92) !important;
|
||||
border-top: 1px solid rgba(220, 220, 220, 0.8) !important;
|
||||
}
|
||||
207
static/css/src/input.css
Normal file
207
static/css/src/input.css
Normal file
@@ -0,0 +1,207 @@
|
||||
@tailwind base;
|
||||
@tailwind components;
|
||||
@tailwind utilities;
|
||||
|
||||
@layer base {
|
||||
html {
|
||||
@apply scroll-smooth;
|
||||
}
|
||||
|
||||
body {
|
||||
@apply bg-gray-50 text-gray-800 dark:bg-dark-800 dark:text-gray-100 font-sans;
|
||||
}
|
||||
|
||||
h1, h2, h3, h4, h5, h6 {
|
||||
@apply font-bold text-gray-900 dark:text-white;
|
||||
}
|
||||
|
||||
h1 {
|
||||
@apply text-4xl md:text-5xl lg:text-6xl;
|
||||
}
|
||||
|
||||
h2 {
|
||||
@apply text-3xl md:text-4xl;
|
||||
}
|
||||
|
||||
h3 {
|
||||
@apply text-2xl md:text-3xl;
|
||||
}
|
||||
|
||||
h4 {
|
||||
@apply text-xl md:text-2xl;
|
||||
}
|
||||
|
||||
a {
|
||||
@apply text-primary-600 hover:text-primary-700 dark:text-primary-400 dark:hover:text-primary-300 transition-colors;
|
||||
}
|
||||
|
||||
input, textarea, select {
|
||||
@apply bg-white border border-gray-300 rounded-md px-3 py-2 focus:outline-none focus:ring-2 focus:ring-primary-500 focus:border-primary-500 dark:bg-dark-700 dark:border-dark-500 dark:focus:ring-primary-400 dark:focus:border-primary-400;
|
||||
}
|
||||
|
||||
label {
|
||||
@apply block text-sm font-medium text-gray-700 dark:text-gray-300 mb-1;
|
||||
}
|
||||
|
||||
::placeholder {
|
||||
@apply text-gray-400 dark:text-gray-500;
|
||||
}
|
||||
}
|
||||
|
||||
@layer components {
|
||||
.btn {
|
||||
@apply inline-flex items-center justify-center px-4 py-2 font-medium rounded-md transition-all focus:outline-none focus:ring-2 focus:ring-offset-2 shadow-sm text-base;
|
||||
}
|
||||
|
||||
.btn-primary {
|
||||
@apply btn bg-primary-600 hover:bg-primary-700 text-white focus:ring-primary-500 hover:shadow-md active:translate-y-0.5 dark:bg-primary-700 dark:hover:bg-primary-600;
|
||||
}
|
||||
|
||||
.btn-secondary {
|
||||
@apply btn bg-secondary-600 hover:bg-secondary-700 text-white focus:ring-secondary-500 hover:shadow-md active:translate-y-0.5 dark:bg-secondary-700 dark:hover:bg-secondary-600;
|
||||
}
|
||||
|
||||
.btn-outline {
|
||||
@apply btn border-2 border-gray-300 dark:border-dark-500 bg-white dark:bg-transparent text-gray-700 dark:text-gray-200 hover:bg-gray-50 hover:border-primary-500 hover:text-primary-600 dark:hover:bg-dark-700 dark:hover:border-primary-400 dark:hover:text-primary-400 focus:ring-gray-500 active:translate-y-0.5;
|
||||
}
|
||||
|
||||
.card {
|
||||
@apply bg-white shadow-md dark:bg-dark-700 rounded-lg overflow-hidden border border-gray-200 dark:border-dark-600 hover:shadow-lg transition-shadow duration-300;
|
||||
}
|
||||
|
||||
.gradient-text {
|
||||
@apply text-transparent bg-clip-text bg-gradient-to-r from-primary-600 to-secondary-600 dark:from-primary-500 dark:to-secondary-500 font-bold;
|
||||
}
|
||||
|
||||
.node-tooltip {
|
||||
@apply max-w-xs p-3 bg-white text-gray-800 dark:bg-dark-800 dark:text-white rounded-lg shadow-lg text-sm z-50 border border-gray-200 dark:border-dark-600;
|
||||
}
|
||||
|
||||
.mindmap-node {
|
||||
@apply cursor-pointer transition-all duration-200 hover:shadow-lg border-2 border-gray-200 dark:border-dark-600;
|
||||
}
|
||||
|
||||
/* Mindmap-spezifische Stile */
|
||||
.mindmap-container {
|
||||
@apply bg-gray-50/80 dark:bg-dark-800/80 rounded-lg p-4 shadow-inner;
|
||||
}
|
||||
|
||||
.mindmap-node-root {
|
||||
@apply bg-primary-100 dark:bg-primary-900 text-primary-900 dark:text-primary-100 border-primary-300 dark:border-primary-700;
|
||||
}
|
||||
|
||||
.mindmap-node-branch {
|
||||
@apply bg-secondary-100 dark:bg-secondary-900 text-secondary-900 dark:text-secondary-100 border-secondary-300 dark:border-secondary-700;
|
||||
}
|
||||
|
||||
.mindmap-node-leaf {
|
||||
@apply bg-gray-100 dark:bg-dark-700 text-gray-800 dark:text-gray-200 border-gray-300 dark:border-dark-500;
|
||||
}
|
||||
|
||||
.mindmap-link {
|
||||
@apply stroke-gray-400 dark:stroke-gray-500 stroke-[2];
|
||||
}
|
||||
|
||||
.mindmap-link-active {
|
||||
@apply stroke-primary-500 dark:stroke-primary-400 stroke-[3];
|
||||
}
|
||||
|
||||
.form-group {
|
||||
@apply mb-4;
|
||||
}
|
||||
|
||||
.form-control {
|
||||
@apply w-full;
|
||||
}
|
||||
|
||||
.ascii-art {
|
||||
@apply font-mono text-xs leading-none whitespace-pre tracking-tight select-none text-primary-700 dark:text-primary-400 opacity-80 dark:opacity-60 font-bold;
|
||||
}
|
||||
|
||||
/* Verbesserte Formulareingabefelder */
|
||||
.form-input,
|
||||
.form-textarea,
|
||||
.form-select {
|
||||
@apply w-full rounded-md border border-gray-300 bg-white px-4 py-2 text-gray-800 shadow-sm
|
||||
focus:border-primary-500 focus:ring focus:ring-primary-500 focus:ring-opacity-50
|
||||
dark:border-dark-500 dark:bg-dark-700 dark:text-gray-100 dark:focus:border-primary-400 dark:focus:ring-primary-400;
|
||||
}
|
||||
|
||||
.form-input-lg {
|
||||
@apply py-3 text-lg;
|
||||
}
|
||||
|
||||
.form-input-sm {
|
||||
@apply py-1 text-sm;
|
||||
}
|
||||
|
||||
.form-checkbox,
|
||||
.form-radio {
|
||||
@apply h-5 w-5 rounded border-gray-300 text-primary-600 shadow-sm
|
||||
focus:border-primary-500 focus:ring focus:ring-primary-500 focus:ring-opacity-50
|
||||
dark:border-dark-500 dark:bg-dark-700 dark:focus:border-primary-400 dark:focus:ring-primary-400;
|
||||
}
|
||||
|
||||
.form-checkbox {
|
||||
@apply rounded;
|
||||
}
|
||||
|
||||
.form-radio {
|
||||
@apply rounded-full;
|
||||
}
|
||||
|
||||
.form-error {
|
||||
@apply mt-1 text-sm text-red-600 dark:text-red-400;
|
||||
}
|
||||
}
|
||||
|
||||
@layer utilities {
|
||||
.tech-gradient {
|
||||
@apply bg-gradient-to-r from-primary-600 to-secondary-500;
|
||||
}
|
||||
|
||||
.glass-effect {
|
||||
@apply bg-white/95 backdrop-blur-md border border-gray-200 shadow-md dark:bg-dark-800/90 dark:border-dark-700/50 dark:shadow-xl;
|
||||
}
|
||||
|
||||
.focus-ring {
|
||||
@apply focus:outline-none focus:ring-2 focus:ring-primary-500 focus:ring-offset-2 dark:focus:ring-primary-400 dark:focus:ring-offset-dark-800;
|
||||
}
|
||||
|
||||
.input-focus {
|
||||
@apply focus:outline-none focus:ring-2 focus:ring-primary-500 focus:border-primary-500 dark:focus:ring-primary-400 dark:focus:border-primary-400;
|
||||
}
|
||||
}
|
||||
|
||||
/* Form validation styles */
|
||||
.is-valid {
|
||||
@apply border-green-500 dark:border-green-400;
|
||||
}
|
||||
|
||||
.is-invalid {
|
||||
@apply border-red-500 dark:border-red-400;
|
||||
}
|
||||
|
||||
.is-valid:focus {
|
||||
@apply ring-green-500/30 border-green-500 dark:ring-green-400/30 dark:border-green-400;
|
||||
}
|
||||
|
||||
.is-invalid:focus {
|
||||
@apply ring-red-500/30 border-red-500 dark:ring-red-400/30 dark:border-red-400;
|
||||
}
|
||||
|
||||
.form-hint {
|
||||
@apply text-xs text-gray-500 dark:text-gray-400 mt-1;
|
||||
}
|
||||
|
||||
.form-label {
|
||||
@apply block text-sm font-medium text-gray-700 dark:text-gray-300 mb-1;
|
||||
}
|
||||
|
||||
.input-icon {
|
||||
@apply absolute inset-y-0 left-0 pl-3 flex items-center pointer-events-none text-gray-500 dark:text-gray-400;
|
||||
}
|
||||
|
||||
.input-with-icon {
|
||||
@apply pl-10;
|
||||
}
|
||||
1644
static/css/style.css
Normal file
1644
static/css/style.css
Normal file
File diff suppressed because it is too large
Load Diff
6
static/css/tailwind.min.css
vendored
Normal file
6
static/css/tailwind.min.css
vendored
Normal file
@@ -0,0 +1,6 @@
|
||||
/**
|
||||
* Failed to bundle using Rollup v2.79.2: the file imports a not supported node.js built-in module "fs".
|
||||
* If you believe this to be an issue with jsDelivr, and not with the package itself, please open an issue at https://github.com/jsdelivr/jsdelivr
|
||||
*/
|
||||
|
||||
throw new Error('Failed to bundle using Rollup v2.79.2: the file imports a not supported node.js built-in module "fs". If you believe this to be an issue with jsDelivr, and not with the package itself, please open an issue at https://github.com/jsdelivr/jsdelivr');
|
||||
Reference in New Issue
Block a user