78 lines
2.9 KiB
HTML
78 lines
2.9 KiB
HTML
{% extends "base.html" %}
|
|
|
|
{% block title %}{{ projectpost.title }}{% endblock %}
|
|
|
|
{% block content %}
|
|
|
|
<!-- Hero Title Section -->
|
|
<section class="py-20 bg-gradient-to-br from-red-800 to-orange-400 text-white text-center">
|
|
<h1 class="text-5xl font-extrabold mb-4">{{ projectpost.title }}</h1>
|
|
<p class="text-lg italic">Category: {{ projectpost.category }}</p>
|
|
<div class="mt-4 flex justify-center flex-wrap gap-2">
|
|
{% for tag in projectpost.tags.split(',') %}
|
|
<a href="{{ url_for('view_tag', tag=tag.strip()) }}"
|
|
class="bg-white text-gray-800 text-sm px-3 py-1 rounded-full shadow hover:bg-gray-100 transition">
|
|
#{{ tag.strip() }}
|
|
</a>
|
|
{% endfor %}
|
|
</div>
|
|
</section>
|
|
|
|
<!-- Content Section -->
|
|
<section class="py-16 bg-black text-white">
|
|
<div class="max-w-4xl mx-auto px-4 space-y-8">
|
|
|
|
{% if projectpost.images %}
|
|
<div class="mb-5">
|
|
<h3 class="fs-3 fw-semibold text-orange mb-4">Gallery</h3>
|
|
|
|
<div id="blogImageCarousel" class="carousel slide shadow rounded overflow-hidden" data-bs-ride="carousel">
|
|
<div class="carousel-inner">
|
|
{% for image in projectpost.images|from_json %}
|
|
<div class="carousel-item {% if loop.first %}active{% endif %}">
|
|
<img src="{{ url_for('static', filename='uploads/' + image) }}" class="d-block w-100" alt="Post Image"
|
|
style="max-height: 500px; object-fit: cover;">
|
|
</div>
|
|
{% endfor %}
|
|
</div>
|
|
|
|
<!-- Controls -->
|
|
<button class="carousel-control-prev" type="button" data-bs-target="#blogImageCarousel" data-bs-slide="prev">
|
|
<span class="carousel-control-prev-icon" aria-hidden="true"></span>
|
|
<span class="visually-hidden">Previous</span>
|
|
</button>
|
|
<button class="carousel-control-next" type="button" data-bs-target="#blogImageCarousel" data-bs-slide="next">
|
|
<span class="carousel-control-next-icon" aria-hidden="true"></span>
|
|
<span class="visually-hidden">Next</span>
|
|
</button>
|
|
|
|
<!-- Optional indicators -->
|
|
<div class="carousel-indicators">
|
|
{% for image in projectpost.images|from_json %}
|
|
<button type="button" data-bs-target="#blogImageCarousel" data-bs-slide-to="{{ loop.index0 }}"
|
|
{% if loop.first %}class="active" aria-current="true"{% endif %} aria-label="Slide {{ loop.index }}"></button>
|
|
{% endfor %}
|
|
</div>
|
|
</div>
|
|
</div>
|
|
{% endif %}
|
|
|
|
|
|
<!-- Blog Content -->
|
|
<div class="prose lg:prose-lg max-w-none">
|
|
{{ projectpost.content | safe }}
|
|
</div>
|
|
|
|
<!-- Back Button -->
|
|
<div class="pt-10 text-center">
|
|
<a href="{{ url_for('projects') }}"
|
|
class="inline-block bg-orange-600 text-white px-6 py-2 rounded hover:bg-orange-700 transition">
|
|
← Back to Projects
|
|
</a>
|
|
</div>
|
|
|
|
</div>
|
|
</section>
|
|
|
|
{% endblock %}
|