69 lines
3.0 KiB
HTML
69 lines
3.0 KiB
HTML
{% extends "base.html" %}
|
|
|
|
{% block title %}Blog{% endblock %}
|
|
|
|
{% block content %}
|
|
|
|
<!-- Hero -->
|
|
<section class="relative py-24 overflow-hidden">
|
|
<div class="absolute inset-0 dot-grid opacity-30 pointer-events-none"></div>
|
|
<div class="absolute top-0 left-1/2 -translate-x-1/2 w-[600px] h-[350px] pointer-events-none"
|
|
style="background: radial-gradient(ellipse, rgba(92,184,44,0.1) 0%, transparent 70%); filter: blur(40px);"></div>
|
|
|
|
<div class="relative max-w-5xl mx-auto px-4 sm:px-6 lg:px-8 text-center">
|
|
<div class="badge badge-primary mb-6">Blog</div>
|
|
<h1 class="text-5xl md:text-6xl font-extrabold mb-5 leading-tight" style="font-family: 'Syne', sans-serif; color: #f1f0ff;">
|
|
Insights & <span class="gradient-text">Ideas</span>
|
|
</h1>
|
|
<p class="text-lg max-w-xl mx-auto mb-10" style="color: #8b8ca8;">
|
|
Tutorials, thoughts on software development, and industry perspectives.
|
|
</p>
|
|
|
|
<!-- Search -->
|
|
<div class="max-w-md mx-auto relative">
|
|
<input type="text"
|
|
name="search"
|
|
placeholder="Search posts…"
|
|
class="input pl-11 pr-4 py-3.5"
|
|
hx-get="{{ url_for('blog_search') }}"
|
|
hx-trigger="keyup changed delay:500ms"
|
|
hx-target="#blog-posts"
|
|
hx-swap="innerHTML">
|
|
<svg class="w-4 h-4 absolute left-4 top-1/2 -translate-y-1/2 pointer-events-none" style="color: #6b6b8a;"
|
|
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>
|
|
</section>
|
|
|
|
<!-- Blog Posts -->
|
|
<section class="py-16 pb-28" style="background: #0a0a14;">
|
|
<div class="max-w-5xl mx-auto px-4 sm:px-6 lg:px-8">
|
|
<div id="blog-posts">
|
|
{% include "blog/partials/post_list.html" %}
|
|
</div>
|
|
|
|
<!-- Load More -->
|
|
{% if posts and posts|length >= 10 %}
|
|
<div class="text-center mt-14">
|
|
<button hx-get="{{ url_for('blog_load_more', page=2) }}"
|
|
hx-target="#blog-posts"
|
|
hx-swap="beforeend"
|
|
hx-trigger="click"
|
|
class="btn btn-outline px-10 py-3.5">
|
|
<span class="htmx-indicator mr-2">
|
|
<svg class="animate-spin h-4 w-4 inline" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24">
|
|
<circle class="opacity-25" cx="12" cy="12" r="10" stroke="currentColor" stroke-width="4"></circle>
|
|
<path class="opacity-75" fill="currentColor" d="M4 12a8 8 0 018-8V0C5.373 0 0 5.373 0 12h4zm2 5.291A7.962 7.962 0 014 12H0c0 3.042 1.135 5.824 3 7.938l3-2.647z"></path>
|
|
</svg>
|
|
</span>
|
|
Load More Posts
|
|
</button>
|
|
</div>
|
|
{% endif %}
|
|
</div>
|
|
</section>
|
|
|
|
{% endblock %}
|