125 lines
5.2 KiB
HTML
125 lines
5.2 KiB
HTML
{% extends 'base.html' %}
|
|
|
|
{% block title %}Community Forum{% endblock %}
|
|
|
|
{% block extra_css %}
|
|
<style>
|
|
.forum-category {
|
|
transition: all 0.3s ease;
|
|
}
|
|
.forum-category:hover {
|
|
transform: translateY(-2px);
|
|
}
|
|
.category-icon {
|
|
font-size: 1.5rem;
|
|
width: 2.5rem;
|
|
height: 2.5rem;
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
border-radius: 0.75rem;
|
|
}
|
|
</style>
|
|
{% endblock %}
|
|
|
|
{% block content %}
|
|
<div class="container mx-auto px-4 py-8">
|
|
<!-- Seitenüberschrift -->
|
|
<div class="mb-8 text-center">
|
|
<h1 class="text-3xl font-bold mb-2 gradient-text">Community Forum</h1>
|
|
<p class="text-lg opacity-75">Diskutiere mit anderen Nutzern über die Hauptthemenbereiche der Mindmap</p>
|
|
</div>
|
|
|
|
<!-- Forumskategorien -->
|
|
<div class="grid grid-cols-1 md:grid-cols-2 gap-6 mb-8">
|
|
{% if categories_data %}
|
|
{% for cat_data in categories_data %}
|
|
<a href="{{ url_for('forum_category', category_id=cat_data.category.id) }}" class="forum-category block">
|
|
<div class="rounded-xl p-5 h-full"
|
|
x-bind:class="darkMode ? 'bg-gray-800/60 hover:bg-gray-800/80 border border-white/10' : 'bg-white hover:bg-gray-50 border border-gray-200 shadow-md'">
|
|
<div class="flex items-start">
|
|
<!-- Kategorie-Icon -->
|
|
<div class="category-icon mr-4 text-white"
|
|
style="background-color: {{ cat_data.category.node.color_code or '#6d28d9' }}">
|
|
<i class="fas {{ cat_data.category.node.icon or 'fa-folder' }}"></i>
|
|
</div>
|
|
|
|
<!-- Kategorie-Info -->
|
|
<div class="flex-grow">
|
|
<h3 class="text-xl font-semibold mb-2">{{ cat_data.category.title }}</h3>
|
|
<p class="opacity-75 text-sm mb-3">{{ cat_data.category.description }}</p>
|
|
|
|
<!-- Statistik -->
|
|
<div class="flex flex-wrap gap-4 text-sm opacity-80">
|
|
<div class="flex items-center">
|
|
<i class="fas fa-comment-alt mr-2"></i>
|
|
<span>{{ cat_data.total_posts }} Themen</span>
|
|
</div>
|
|
<div class="flex items-center">
|
|
<i class="fas fa-reply mr-2"></i>
|
|
<span>{{ cat_data.total_replies }} Antworten</span>
|
|
</div>
|
|
{% if cat_data.latest_post %}
|
|
<div class="flex items-center">
|
|
<i class="fas fa-clock mr-2"></i>
|
|
<span>Neuster Beitrag: {{ cat_data.latest_post.created_at.strftime('%d.%m.%Y, %H:%M') }}</span>
|
|
</div>
|
|
{% endif %}
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Pfeil-Icon -->
|
|
<div class="ml-2">
|
|
<i class="fas fa-chevron-right opacity-50"></i>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</a>
|
|
{% endfor %}
|
|
{% else %}
|
|
<div class="col-span-2 text-center py-8">
|
|
<div class="text-3xl mb-3 opacity-30"><i class="fas fa-exclamation-circle"></i></div>
|
|
<h3 class="text-xl font-semibold mb-2">Keine Forum-Kategorien gefunden</h3>
|
|
<p class="opacity-75">Es sind derzeit keine Kategorien für Diskussionen verfügbar.</p>
|
|
</div>
|
|
{% endif %}
|
|
</div>
|
|
|
|
<!-- Hinweis zur Nutzung -->
|
|
<div class="rounded-xl p-6 text-center mb-8"
|
|
x-bind:class="darkMode ? 'bg-indigo-900/30 border border-indigo-700/30' : 'bg-indigo-50 border border-indigo-100'">
|
|
<h3 class="text-xl font-semibold mb-3">
|
|
<i class="fas fa-lightbulb mr-2 text-yellow-500"></i>
|
|
So funktioniert das Forum
|
|
</h3>
|
|
<p class="mb-4">Das Community-Forum ist nach den Hauptknotenpunkten der Systades-Mindmap strukturiert.
|
|
In deinen Beiträgen kannst du Knotenpunkte mit <code>@Knotenname</code> verlinken.</p>
|
|
<div class="grid grid-cols-1 md:grid-cols-3 gap-4 mt-6">
|
|
<div class="p-4 rounded-lg"
|
|
x-bind:class="darkMode ? 'bg-indigo-800/40' : 'bg-white border border-indigo-100'">
|
|
<div class="text-2xl mb-2"><i class="fas fa-users text-indigo-400"></i></div>
|
|
<h4 class="font-medium mb-1">Fachliche Diskussionen</h4>
|
|
<p class="text-sm opacity-75">Tausche dich mit anderen zu spezifischen Themen aus</p>
|
|
</div>
|
|
<div class="p-4 rounded-lg"
|
|
x-bind:class="darkMode ? 'bg-indigo-800/40' : 'bg-white border border-indigo-100'">
|
|
<div class="text-2xl mb-2"><i class="fas fa-link text-indigo-400"></i></div>
|
|
<h4 class="font-medium mb-1">Wissensvernetzung</h4>
|
|
<p class="text-sm opacity-75">Verknüpfe Inhalte durch Knotenreferenzen</p>
|
|
</div>
|
|
<div class="p-4 rounded-lg"
|
|
x-bind:class="darkMode ? 'bg-indigo-800/40' : 'bg-white border border-indigo-100'">
|
|
<div class="text-2xl mb-2"><i class="fas fa-markdown text-indigo-400"></i></div>
|
|
<h4 class="font-medium mb-1">Markdown Support</h4>
|
|
<p class="text-sm opacity-75">Formatiere deine Beiträge mit Markdown</p>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
{% endblock %}
|
|
|
|
{% block scripts %}
|
|
<script>
|
|
// Hier können bei Bedarf forumspezifische Scripts eingefügt werden
|
|
</script>
|
|
{% endblock %} |