111 lines
5.3 KiB
HTML
111 lines
5.3 KiB
HTML
{% extends "base.html" %}
|
|
|
|
{% block title %}Forum{% endblock %}
|
|
|
|
{% block content %}
|
|
<!-- Hero Section -->
|
|
<section class="bg-gradient-to-br from-gray-800 to-gray-900 text-white py-16">
|
|
<div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
|
|
<div class="text-center">
|
|
<h1 class="text-4xl md:text-5xl font-bold mb-4">Community Forum</h1>
|
|
<p class="text-xl text-gray-300 max-w-2xl mx-auto">
|
|
Connect with other developers, ask questions, share knowledge, and grow together.
|
|
</p>
|
|
</div>
|
|
</div>
|
|
</section>
|
|
|
|
<!-- Forum Categories -->
|
|
<section class="py-16">
|
|
<div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
|
|
<div class="flex justify-between items-center mb-8">
|
|
<h2 class="text-2xl font-bold text-gray-900">Categories</h2>
|
|
<div class="relative">
|
|
<input type="text"
|
|
placeholder="Search topics..."
|
|
class="input pl-10"
|
|
hx-get="{{ url_for('forum_search') }}"
|
|
hx-trigger="keyup changed delay:500ms"
|
|
hx-target="#search-results"
|
|
name="q">
|
|
<svg class="w-5 h-5 text-gray-400 absolute left-3 top-1/2 transform -translate-y-1/2" fill="none" stroke="currentColor" viewBox="0 0 24 24">
|
|
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M21 21l-6-6m2-5a7 7 0 11-14 0 7 7 0 0114 0z" />
|
|
</svg>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Search Results Container -->
|
|
<div id="search-results" class="mb-8"></div>
|
|
|
|
<!-- Categories List -->
|
|
{% if categories %}
|
|
<div class="space-y-4">
|
|
{% for category in categories %}
|
|
<a href="{{ url_for('forum_category', slug=category.slug) }}" class="card block hover:shadow-lg transition-shadow group">
|
|
<div class="flex items-start">
|
|
<div class="w-12 h-12 bg-primary-100 rounded-lg flex items-center justify-center flex-shrink-0 group-hover:bg-primary-200 transition-colors">
|
|
<svg class="w-6 h-6 text-primary-600" fill="none" stroke="currentColor" viewBox="0 0 24 24">
|
|
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M7 7h.01M7 3h5c.512 0 1.024.195 1.414.586l7 7a2 2 0 010 2.828l-7 7a2 2 0 01-2.828 0l-7-7A1.994 1.994 0 013 12V7a4 4 0 014-4z" />
|
|
</svg>
|
|
</div>
|
|
<div class="ml-4 flex-grow">
|
|
<h3 class="text-xl font-semibold text-gray-900 group-hover:text-primary-600 transition-colors">
|
|
{{ category.name }}
|
|
</h3>
|
|
<p class="text-gray-600 mt-1">{{ category.description }}</p>
|
|
</div>
|
|
<div class="text-right text-sm text-gray-500">
|
|
<div>{{ category.topics.count() }} topics</div>
|
|
</div>
|
|
</div>
|
|
</a>
|
|
{% endfor %}
|
|
</div>
|
|
{% else %}
|
|
<div class="text-center py-16">
|
|
<div class="w-16 h-16 bg-gray-100 rounded-full flex items-center justify-center mx-auto mb-4">
|
|
<svg class="w-8 h-8 text-gray-400" fill="none" stroke="currentColor" viewBox="0 0 24 24">
|
|
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M17 8h2a2 2 0 012 2v6a2 2 0 01-2 2h-2v4l-4-4H9a1.994 1.994 0 01-1.414-.586m0 0L11 14h4a2 2 0 002-2V6a2 2 0 00-2-2H5a2 2 0 00-2 2v6a2 2 0 002 2h2v4l.586-.586z" />
|
|
</svg>
|
|
</div>
|
|
<h3 class="text-xl font-semibold text-gray-900 mb-2">No categories yet</h3>
|
|
<p class="text-gray-600">The forum is being set up. Check back soon!</p>
|
|
</div>
|
|
{% endif %}
|
|
</div>
|
|
</section>
|
|
|
|
<!-- Recent Activity -->
|
|
<section class="bg-gray-100 py-16">
|
|
<div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
|
|
<h2 class="text-2xl font-bold text-gray-900 mb-8">Recent Activity</h2>
|
|
|
|
{% if recent_topics %}
|
|
<div class="space-y-4">
|
|
{% for topic in recent_topics %}
|
|
<div class="card flex items-center">
|
|
<div class="w-10 h-10 bg-primary-100 rounded-full flex items-center justify-center text-primary-600 font-semibold mr-4">
|
|
{{ topic.author.username[0].upper() }}
|
|
</div>
|
|
<div class="flex-grow">
|
|
<a href="{{ url_for('forum_topic', category_slug=topic.category.slug, topic_id=topic.id) }}" class="font-medium text-gray-900 hover:text-primary-600">
|
|
{{ topic.title }}
|
|
</a>
|
|
<div class="text-sm text-gray-500">
|
|
by {{ topic.author.username }} in
|
|
<a href="{{ url_for('forum_category', slug=topic.category.slug) }}" class="text-primary-600 hover:underline">{{ topic.category.name }}</a>
|
|
</div>
|
|
</div>
|
|
<div class="text-sm text-gray-500">
|
|
{{ topic.reply_count }} replies
|
|
</div>
|
|
</div>
|
|
{% endfor %}
|
|
</div>
|
|
{% else %}
|
|
<p class="text-gray-600 text-center py-8">No recent activity yet.</p>
|
|
{% endif %}
|
|
</div>
|
|
</section>
|
|
{% endblock %}
|