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

469
templates/profile.html
View File

@@ -32,7 +32,7 @@
position: relative;
}
.profile-avatar {
.avatar-container {
width: 180px;
height: 180px;
border-radius: 50%;
@@ -50,40 +50,48 @@
flex-shrink: 0;
}
.profile-avatar:hover {
.avatar-container:hover {
transform: scale(1.05);
border: 3px solid rgba(179, 143, 255, 0.5);
box-shadow: 0 12px 45px rgba(0, 0, 0, 0.3), 0 0 25px rgba(179, 143, 255, 0.35);
}
.profile-avatar img {
.avatar-container img {
width: 100%;
height: 100%;
object-fit: cover;
transition: filter 0.3s ease;
}
.profile-avatar:hover img {
.avatar-container:hover img {
filter: brightness(1.1);
}
.profile-avatar-placeholder {
font-size: 5rem;
color: rgba(255, 255, 255, 0.6);
.avatar-edit {
position: absolute;
bottom: 0;
right: 0;
background: rgba(255, 255, 255, 0.2);
border-radius: 50%;
width: 30px;
height: 30px;
display: flex;
align-items: center;
justify-content: center;
cursor: pointer;
transition: all 0.3s ease;
}
.profile-avatar:hover .profile-avatar-placeholder {
color: rgba(255, 255, 255, 0.9);
transform: scale(1.1);
.avatar-edit:hover {
background: rgba(255, 255, 255, 0.3);
}
.profile-info {
.user-info {
flex: 1;
padding-top: 0.5rem;
}
.profile-name {
.user-info h1 {
font-size: 2.75rem;
font-weight: 800;
margin-bottom: 0.75rem;
@@ -96,33 +104,7 @@
line-height: 1.2;
}
.profile-username {
font-size: 1.35rem;
color: rgba(255, 255, 255, 0.85);
margin-bottom: 1.25rem;
display: flex;
align-items: center;
gap: 0.75rem;
}
.username-badge {
background: rgba(179, 143, 255, 0.2);
border: 1px solid rgba(179, 143, 255, 0.3);
color: #b38fff;
padding: 0.3rem 1rem;
border-radius: 20px;
font-size: 0.9rem;
font-weight: 600;
transition: all 0.3s ease;
}
.username-badge:hover {
background: rgba(179, 143, 255, 0.3);
transform: translateY(-2px);
box-shadow: 0 5px 15px rgba(0, 0, 0, 0.2), 0 0 8px rgba(179, 143, 255, 0.3);
}
.profile-bio {
.user-bio {
font-size: 1.15rem;
line-height: 1.7;
color: rgba(255, 255, 255, 0.9);
@@ -131,7 +113,7 @@
text-shadow: 0 1px 2px rgba(0, 0, 0, 0.1);
}
.profile-meta {
.user-meta {
display: flex;
flex-wrap: wrap;
gap: 1.5rem;
@@ -140,118 +122,22 @@
align-items: center;
}
.profile-meta-item {
.user-meta span {
display: flex;
align-items: center;
gap: 0.5rem;
transition: all 0.25s ease;
}
.profile-meta-item:hover {
.user-meta span:hover {
color: rgba(255, 255, 255, 1);
transform: translateY(-2px);
}
.profile-meta-icon {
.user-meta i {
opacity: 0.8;
}
/* Verbesserte Statistik-Karten mit interaktiven Effekten */
.profile-stats {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
gap: 1.5rem;
margin-top: 2rem;
}
.stat-item {
display: flex;
flex-direction: column;
align-items: center;
padding: 1.75rem 1.25rem;
background: rgba(32, 36, 55, 0.7);
backdrop-filter: blur(15px);
-webkit-backdrop-filter: blur(15px);
border-radius: 20px;
border: 1px solid rgba(255, 255, 255, 0.1);
transition: all 0.3s ease;
text-align: center;
position: relative;
overflow: hidden;
}
.stat-item::before {
content: '';
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
background: radial-gradient(circle at center, rgba(179, 143, 255, 0.15) 0%, transparent 70%);
opacity: 0;
transition: opacity 0.5s ease;
z-index: 0;
}
.stat-item:hover::before {
opacity: 1;
}
.stat-item:hover {
transform: translateY(-5px);
background: rgba(32, 36, 55, 0.8);
border: 1px solid rgba(255, 255, 255, 0.15);
box-shadow: 0 15px 35px rgba(0, 0, 0, 0.25), 0 0 20px rgba(179, 143, 255, 0.2);
}
.stat-value {
font-size: 2.25rem;
font-weight: 800;
margin-bottom: 0.75rem;
background: linear-gradient(135deg, #b38fff, #58a9ff);
-webkit-background-clip: text;
background-clip: text;
color: transparent;
position: relative;
z-index: 1;
transition: all 0.3s ease;
}
.stat-item:hover .stat-value {
transform: scale(1.1);
text-shadow: 0 0 15px rgba(179, 143, 255, 0.5);
}
.stat-label {
font-size: 0.95rem;
color: rgba(255, 255, 255, 0.75);
text-transform: uppercase;
letter-spacing: 1px;
font-weight: 600;
position: relative;
z-index: 1;
transition: all 0.3s ease;
}
.stat-item:hover .stat-label {
color: rgba(255, 255, 255, 0.95);
}
/* Stat-Icon für visuelle Verstärkung */
.stat-icon {
font-size: 1.5rem;
margin-bottom: 1rem;
color: rgba(179, 143, 255, 0.7);
position: relative;
z-index: 1;
transition: all 0.3s ease;
}
.stat-item:hover .stat-icon {
transform: scale(1.2) translateY(-3px);
color: rgba(179, 143, 255, 1);
}
/* Benutzer-Aktionsbereich */
.profile-actions {
display: flex;
@@ -504,31 +390,24 @@
box-shadow: 0 8px 30px rgba(0, 0, 0, 0.1);
}
html.light .profile-avatar {
html.light .avatar-container {
background: rgba(255, 255, 255, 0.9);
border: 3px solid rgba(126, 63, 242, 0.3);
box-shadow: 0 8px 25px rgba(0, 0, 0, 0.1), 0 0 15px rgba(126, 63, 242, 0.15);
}
html.light .profile-name {
html.light .user-info h1 {
background: linear-gradient(135deg, #7e3ff2, #3282f6);
text-shadow: none;
}
html.light .profile-username,
html.light .profile-bio,
html.light .user-bio,
html.light .activity-content {
color: #1a202c;
text-shadow: none;
}
html.light .username-badge {
background: rgba(126, 63, 242, 0.15);
border: 1px solid rgba(126, 63, 242, 0.3);
color: #7e3ff2;
}
html.light .profile-meta {
html.light .user-meta span {
color: #4a5568;
}
@@ -606,63 +485,22 @@
<div class="container mx-auto px-4 py-10">
<!-- Profil-Container -->
<div class="profile-container">
<!-- Profil-Header mit Benutzerinformationen -->
<!-- User Info Section -->
<div class="profile-header">
<!-- Profilbild -->
<div class="profile-avatar">
{% if user.profile_image %}
<img src="{{ user.profile_image }}" alt="{{ user.name }}" />
{% else %}
<div class="profile-avatar-placeholder">
<i class="fas fa-user"></i>
</div>
{% endif %}
<div class="avatar-container">
<img src="{{ user.avatar if user.avatar else url_for('static', filename='img/default-avatar.png') }}" alt="Profilbild" class="avatar">
<div class="avatar-edit">
<i class="fas fa-camera"></i>
</div>
</div>
<!-- Profilinformationen -->
<div class="profile-info">
<h1 class="profile-name">{{ user.name|default('Max Mustermann') }}</h1>
<div class="profile-username">
@{{ user.username|default('maxmustermann') }}
{% if user.verified %}
<span class="username-badge">
<i class="fas fa-check-circle mr-1"></i> Verifiziert
</span>
{% endif %}
</div>
<p class="profile-bio">
{{ user.bio|default('Willkommen auf meinem Profil! Ich bin daran interessiert, Wissen zu vernetzen und neue Verbindungen zwischen verschiedenen Themengebieten zu entdecken. Mein Ziel ist es, ein tieferes Verständnis für komplexe Zusammenhänge zu entwickeln.') }}
</p>
<!-- Meta-Informationen -->
<div class="profile-meta">
<div class="profile-meta-item">
<i class="fas fa-map-marker-alt profile-meta-icon"></i>
<span>{{ user.location|default('Berlin, Deutschland') }}</span>
</div>
<div class="profile-meta-item">
<i class="fas fa-calendar-alt profile-meta-icon"></i>
<span>Mitglied seit {{ user.joined_date|default('Januar 2023') }}</span>
</div>
<div class="profile-meta-item">
<i class="fas fa-globe profile-meta-icon"></i>
<span>{{ user.website|default('www.beispiel.de') }}</span>
</div>
</div>
<!-- Profil-Aktionen -->
<div class="profile-actions">
<button class="profile-action-btn primary">
<i class="fas fa-user-plus mr-1"></i> Folgen
</button>
<button class="profile-action-btn">
<i class="fas fa-comment mr-1"></i> Nachricht
</button>
<button class="profile-action-btn">
<i class="fas fa-share-alt mr-1"></i> Teilen
</button>
<div class="user-info">
<h1>{{ user.username }}</h1>
<p class="user-bio">{{ user.bio if user.bio else 'Keine Bio vorhanden. Klicke auf bearbeiten, um eine hinzuzufügen.' }}</p>
<div class="user-meta">
<span><i class="fas fa-map-marker-alt"></i> {{ user.location if user.location else 'Kein Standort angegeben' }}</span>
<span><i class="fas fa-calendar-alt"></i> Mitglied seit {{ user.created_at.strftime('%d.%m.%Y') }}</span>
</div>
<button class="edit-profile-btn">Profil bearbeiten</button>
</div>
</div>
@@ -673,7 +511,7 @@
<div class="stat-icon">
<i class="fas fa-lightbulb"></i>
</div>
<div class="stat-value">{{ user.thoughts_count|default('42') }}</div>
<div class="stat-value">{{ stats.thought_count if stats and stats.thought_count else 0 }}</div>
<div class="stat-label">Gedanken</div>
</div>
@@ -682,7 +520,7 @@
<div class="stat-icon">
<i class="fas fa-project-diagram"></i>
</div>
<div class="stat-value">{{ user.connections_count|default('128') }}</div>
<div class="stat-value">{{ stats.connections_count if stats and stats.connections_count else 0 }}</div>
<div class="stat-label">Verbindungen</div>
</div>
@@ -691,7 +529,7 @@
<div class="stat-icon">
<i class="fas fa-users"></i>
</div>
<div class="stat-value">{{ user.followers_count|default('567') }}</div>
<div class="stat-value">{{ stats.followers_count if stats and stats.followers_count else 0 }}</div>
<div class="stat-label">Follower</div>
</div>
@@ -700,7 +538,7 @@
<div class="stat-icon">
<i class="fas fa-comment-dots"></i>
</div>
<div class="stat-value">{{ user.contributions_count|default('89') }}</div>
<div class="stat-value">{{ stats.contributions_count if stats and stats.contributions_count else 0 }}</div>
<div class="stat-label">Beiträge</div>
</div>
@@ -709,7 +547,7 @@
<div class="stat-icon">
<i class="fas fa-star"></i>
</div>
<div class="stat-value">{{ user.rating|default('4.8') }}</div>
<div class="stat-value">{{ stats.rating if stats and stats.rating else '0.0' }}</div>
<div class="stat-label">Bewertung</div>
</div>
</div>
@@ -731,115 +569,124 @@
<!-- Aktivitäts-Tab (Standardmäßig angezeigt) -->
<div class="tab-content" id="activity-tab">
<div class="activity-feed">
<!-- Aktivität 1 -->
<div class="activity-card">
<div class="activity-header">
<div class="activity-title">Neuer Gedanke hinzugefügt</div>
<div class="activity-date">vor 2 Stunden</div>
</div>
<div class="activity-content">
<p>Ich habe einen neuen Gedanken zum Thema "Künstliche Intelligenz und Kreativität" hinzugefügt. Wie können KI-Tools uns dabei helfen, kreativer zu denken?</p>
</div>
<div class="activity-footer">
<div class="activity-reactions">
<button class="reaction-button">
<i class="fas fa-thumbs-up"></i> <span>24</span>
</button>
<button class="reaction-button">
<i class="fas fa-comment"></i> <span>8</span>
</button>
<button class="reaction-button">
<i class="fas fa-share"></i> <span>3</span>
</button>
</div>
<div class="activity-actions">
<button class="action-button">
Ansehen
</button>
{% if activities %}
{% for activity in activities %}
<div class="activity-card">
<div class="activity-header">
<div class="activity-title">{{ activity.title }}</div>
<div class="activity-date">{{ activity.date }}</div>
</div>
<div class="activity-content">
<p>{{ activity.content }}</p>
</div>
<div class="activity-footer">
<div class="activity-reactions">
<button class="reaction-button {% if activity.user_liked %}active{% endif %}">
<i class="fas fa-thumbs-up"></i> <span>{{ activity.likes }}</span>
</button>
<button class="reaction-button">
<i class="fas fa-comment"></i> <span>{{ activity.comments }}</span>
</button>
<button class="reaction-button">
<i class="fas fa-share"></i> <span>{{ activity.shares }}</span>
</button>
</div>
<div class="activity-actions">
<button class="action-button">
Ansehen
</button>
</div>
</div>
</div>
{% endfor %}
{% else %}
<div class="text-center py-12">
<i class="fas fa-history text-5xl text-gray-400 mb-4"></i>
<p class="text-gray-500">Noch keine Aktivitäten vorhanden</p>
</div>
</div>
<!-- Aktivität 2 -->
<div class="activity-card">
<div class="activity-header">
<div class="activity-title">Verbindung erstellt</div>
<div class="activity-date">vor 1 Tag</div>
</div>
<div class="activity-content">
<p>Ich habe eine neue Verbindung zwischen "Nachhaltige Entwicklung" und "Digitale Transformation" hergestellt. Es gibt interessante Überschneidungen in diesen Bereichen.</p>
</div>
<div class="activity-footer">
<div class="activity-reactions">
<button class="reaction-button active">
<i class="fas fa-thumbs-up"></i> <span>42</span>
</button>
<button class="reaction-button">
<i class="fas fa-comment"></i> <span>12</span>
</button>
<button class="reaction-button">
<i class="fas fa-share"></i> <span>7</span>
</button>
</div>
<div class="activity-actions">
<button class="action-button">
Ansehen
</button>
</div>
</div>
</div>
<!-- Aktivität 3 -->
<div class="activity-card">
<div class="activity-header">
<div class="activity-title">Sammlung erstellt</div>
<div class="activity-date">vor 3 Tagen</div>
</div>
<div class="activity-content">
<p>Ich habe eine neue Sammlung zum Thema "Zukunftstechnologien" erstellt. Diese Sammlung enthält Gedanken zu KI, Quantencomputing, Biotechnologie und mehr.</p>
</div>
<div class="activity-footer">
<div class="activity-reactions">
<button class="reaction-button">
<i class="fas fa-thumbs-up"></i> <span>17</span>
</button>
<button class="reaction-button">
<i class="fas fa-comment"></i> <span>4</span>
</button>
<button class="reaction-button">
<i class="fas fa-share"></i> <span>2</span>
</button>
</div>
<div class="activity-actions">
<button class="action-button">
Ansehen
</button>
</div>
</div>
</div>
{% endif %}
</div>
</div>
<!-- Weitere Tab-Inhalte (werden per JavaScript angezeigt) -->
<div class="tab-content hidden" id="thoughts-tab">
<p class="text-center text-gray-400 py-12">
<i class="fas fa-spinner fa-spin text-3xl mb-4 block"></i>
Gedanken werden geladen...
</p>
<div id="thoughts-container">
{% if thoughts %}
{% for thought in thoughts %}
<div class="thought-item">
<h3>{{ thought.title }}</h3>
<p>{{ thought.content }}</p>
<div class="thought-meta">
<span>{{ thought.date }}</span>
<span>{{ thought.category }}</span>
</div>
</div>
{% endfor %}
{% else %}
<div class="text-center py-12">
<i class="fas fa-lightbulb text-5xl text-gray-400 mb-4"></i>
<p class="text-gray-500">Noch keine Gedanken erstellt</p>
<a href="{{ url_for('create_thought') }}" class="mt-4 inline-block px-4 py-2 bg-purple-600 text-white rounded-lg">Ersten Gedanken erstellen</a>
</div>
{% endif %}
</div>
</div>
<div class="tab-content hidden" id="collections-tab">
<p class="text-center text-gray-400 py-12">
<i class="fas fa-spinner fa-spin text-3xl mb-4 block"></i>
Sammlungen werden geladen...
</p>
<div id="collections-container">
{% if collections %}
{% for collection in collections %}
<div class="collection-item">
<h3>{{ collection.title }}</h3>
<p>{{ collection.description }}</p>
<div class="collection-meta">
<span>{{ collection.thoughts_count }} Gedanken</span>
<span>{{ collection.date }}</span>
</div>
</div>
{% endfor %}
{% else %}
<div class="text-center py-12">
<i class="fas fa-folder-open text-5xl text-gray-400 mb-4"></i>
<p class="text-gray-500">Noch keine Sammlungen erstellt</p>
<a href="{{ url_for('create_collection') }}" class="mt-4 inline-block px-4 py-2 bg-purple-600 text-white rounded-lg">Erste Sammlung erstellen</a>
</div>
{% endif %}
</div>
</div>
<div class="tab-content hidden" id="connections-tab">
<p class="text-center text-gray-400 py-12">
<i class="fas fa-spinner fa-spin text-3xl mb-4 block"></i>
Verbindungen werden geladen...
</p>
<div id="connections-container">
{% if connections %}
{% for connection in connections %}
<div class="connection-item">
<div class="connection-nodes">
<div class="connection-node">
<h4>{{ connection.source.title }}</h4>
<p>{{ connection.source.excerpt }}</p>
</div>
<div class="connection-type">
<i class="fas fa-arrow-right"></i>
<span>{{ connection.relation_type }}</span>
</div>
<div class="connection-node">
<h4>{{ connection.target.title }}</h4>
<p>{{ connection.target.excerpt }}</p>
</div>
</div>
<div class="connection-meta">
<span>{{ connection.date }}</span>
</div>
</div>
{% endfor %}
{% else %}
<div class="text-center py-12">
<i class="fas fa-project-diagram text-5xl text-gray-400 mb-4"></i>
<p class="text-gray-500">Noch keine Verbindungen erstellt</p>
<a href="{{ url_for('mindmap') }}" class="mt-4 inline-block px-4 py-2 bg-purple-600 text-white rounded-lg">Verbindungen in der Mindmap erstellen</a>
</div>
{% endif %}
</div>
</div>
<div class="tab-content hidden" id="settings-tab">
@@ -849,22 +696,22 @@
<div class="settings-card-body">
<div class="settings-group">
<label class="settings-label" for="name">Name</label>
<input type="text" id="name" class="settings-input" value="{{ user.name|default('Max Mustermann') }}" />
<input type="text" id="name" class="settings-input" value="{{ user.name }}" />
</div>
<div class="settings-group">
<label class="settings-label" for="bio">Über mich</label>
<textarea id="bio" class="settings-input" rows="4">{{ user.bio|default('Willkommen auf meinem Profil! Ich bin daran interessiert, Wissen zu vernetzen und neue Verbindungen zwischen verschiedenen Themengebieten zu entdecken.') }}</textarea>
<textarea id="bio" class="settings-input" rows="4">{{ user.bio }}</textarea>
</div>
<div class="settings-group">
<label class="settings-label" for="location">Standort</label>
<input type="text" id="location" class="settings-input" value="{{ user.location|default('Berlin, Deutschland') }}" />
<input type="text" id="location" class="settings-input" value="{{ user.location }}" />
</div>
<div class="settings-group">
<label class="settings-label" for="website">Website</label>
<input type="url" id="website" class="settings-input" value="{{ user.website|default('https://www.beispiel.de') }}" />
<input type="url" id="website" class="settings-input" value="{{ user.website }}" />
</div>
<button class="profile-action-btn primary mt-4">
@@ -878,7 +725,7 @@
<div class="settings-card-body">
<div class="settings-group">
<label class="settings-label" for="email">E-Mail-Adresse</label>
<input type="email" id="email" class="settings-input" value="{{ user.email|default('beispiel@email.com') }}" />
<input type="email" id="email" class="settings-input" value="{{ user.email }}" />
</div>
<div class="settings-group">
@@ -903,7 +750,7 @@
{% endblock %}
{% block extra_js %}
<script>
<script nonce="{{ csp_nonce }}">
document.addEventListener('DOMContentLoaded', function() {
// Profil-Tab-Funktionalität
const tabs = document.querySelectorAll('.profile-tab');