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

Update OpenAI API key and enhance app functionality: Replace the OpenAI API key in the .env file for improved access. Refactor app.py to include error handling for missing API keys and implement dark mode functionality with session management. Update README.md to reflect the use of Tailwind CSS via CDN and document the Content Security Policy (CSP) adjustments. Enhance mindmap data loading with a new API endpoint for refreshing data, ensuring better user experience during database connection issues. Update styles and templates for improved UI consistency and responsiveness.

Browse Source
This commit is contained in:
Till Tomczak
2025-04-27 16:56:16 +02:00
parent 2d8cdc052f
commit 4a3092a4d2
42 changed files with 2458 additions and 878 deletions
Download Patch File Download Diff File Expand all files Collapse all files

62
templates/base.html
View File

@@ -14,9 +14,9 @@
<meta name="keywords" content="systades, wissen, visualisierung, lernen, gedanken, theorie">
<meta name="author" content="Systades-Team">
<!-- Tailwind CSS über CDN -->
<script src="https://cdn.tailwindcss.com"></script>
<script>
<!-- Tailwind CSS - CDN Version -->
<script src="https://cdn.tailwindcss.com" nonce="{{ csp_nonce }}"></script>
<script nonce="{{ csp_nonce }}">
tailwind.config = {
darkMode: 'class',
theme: {
@@ -63,13 +63,12 @@
}
</script>
<!-- Fonts -->
<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700&family=JetBrains+Mono:wght@400;500;700&display=swap" rel="stylesheet">
<!-- Local Font Files -->
<link href="{{ url_for('static', filename='fonts/inter.css') }}" rel="stylesheet">
<link href="{{ url_for('static', filename='fonts/jetbrains-mono.css') }}" rel="stylesheet">
<!-- Icons -->
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css">
<!-- Icons - Self-hosted Font Awesome -->
<link href="{{ url_for('static', filename='css/all.min.css') }}" rel="stylesheet">
<!-- Assistent CSS -->
<link href="{{ url_for('static', filename='css/assistant.css') }}" rel="stylesheet">
@@ -80,23 +79,23 @@
<!-- Base-Styles ausgelagert in eigene Datei -->
<link href="{{ url_for('static', filename='css/base-styles.css') }}" rel="stylesheet">
<!-- Alpine.js -->
<script defer src="https://cdn.jsdelivr.net/npm/alpinejs@3.12.3/dist/cdn.min.js"></script>
<!-- Alpine.js - Self-hosted -->
<script src="{{ url_for('static', filename='js/alpine.min.js') }}" defer nonce="{{ csp_nonce }}"></script>
<!-- Neural Network Background CSS -->
<link href="{{ url_for('static', filename='css/neural-network-background.css') }}" rel="stylesheet">
<!-- Neural Network Background Script -->
<script src="{{ url_for('static', filename='neural-network-background.js') }}"></script>
<script src="{{ url_for('static', filename='neural-network-background.js') }}" nonce="{{ csp_nonce }}"></script>
<!-- Hauptmodul laden (als ES6 Modul) -->
<script type="module">
<script type="module" nonce="{{ csp_nonce }}">
import MindMap from "{{ url_for('static', filename='js/main.js') }}";
// Alpine.js-Integration
document.addEventListener('alpine:init', () => {
Alpine.data('layout', () => ({
darkMode: true, // Default to dark mode
mobileMenuOpen: false,
mobileMenuOpen: false, // Mobile Menü standardmäßig geschlossen
userMenuOpen: false,
showSettingsModal: false,
@@ -151,6 +150,14 @@
}));
});
// Setze einen globalen Alpine-Initialisierer
window.addEventListener('DOMContentLoaded', () => {
// Fallback für Alpine-Initialisierung
if (typeof Alpine !== 'undefined' && !document.body.hasAttribute('x-data')) {
document.body.setAttribute('x-data', 'layout()');
}
});
// MindMap global verfügbar machen (für Alpine.js und andere nicht-Module Skripte)
window.MindMap = MindMap;
</script>
@@ -214,11 +221,31 @@
background-color: rgba(255, 255, 255, 0.8);
box-shadow: 0 4px 30px rgba(0, 0, 0, 0.1);
}
/* Alpine.js x-cloak für ausgeblendete Elemente */
[x-cloak] { display: none !important; }
/* Grundlegende Klassen, um sicherzustellen, dass Tailwind geladen wird */
.nav-link {
@apply text-gray-300 hover:text-white transition-colors duration-200;
}
.nav-link-active {
@apply text-white font-medium;
}
.nav-link-light {
@apply text-gray-600 hover:text-gray-900 transition-colors duration-200;
}
.nav-link-light-active {
@apply text-gray-900 font-medium;
}
</style>
</head>
<body data-page="{{ request.endpoint }}" class="relative overflow-x-hidden dark">
<body data-page="{{ request.endpoint }}" class="relative overflow-x-hidden dark bg-gray-900 text-white" x-data="layout()">
<!-- App-Container -->
<div id="app-container" class="flex flex-col min-h-screen" x-data="layout">
<div id="app-container" class="flex flex-col min-h-screen">
<!-- Hauptnavigation -->
<nav class="sticky top-0 left-0 right-0 z-50 transition-all duration-300 py-4 px-5 border-b glass-morphism"
x-bind:class="darkMode ? 'glass-navbar-dark border-white/10' : 'glass-navbar-light border-gray-200/50'">
@@ -389,6 +416,7 @@
<!-- Mobile Menü -->
<div x-show="mobileMenuOpen"
x-cloak
x-transition:enter="transition ease-out duration-200"
x-transition:enter-start="opacity-0 -translate-y-4"
x-transition:enter-end="opacity-100 translate-y-0"
@@ -569,7 +597,7 @@
{% block scripts %}{% endblock %}
<!-- KI-Chat Initialisierung -->
<script type="module">
<script type="module" nonce="{{ csp_nonce }}">
// Importiere und initialisiere den ChatGPT-Assistenten direkt, um sicherzustellen,
// dass er auf jeder Seite verfügbar ist, selbst wenn MindMap nicht geladen ist
import ChatGPTAssistant from "{{ url_for('static', filename='js/modules/chatgpt-assistant.js') }}";