zjpb.net/templates/detail.html

{% extends "base.html" %}

{% block title %}{{ site.name }} - ZJPB 焦提示词{% endblock %}
{% block description %}{{ site.short_desc or site.description[:150] }}{% endblock %}
{% block keywords %}{{ site.name }},{% for tag in site.tags %}{{ tag.name }},{% endfor %}ZJPB,焦提示词,AI工具{% endblock %}

{% block content %}
<main class="flex-grow w-full max-w-[1280px] mx-auto px-4 sm:px-6 lg:px-8 py-8">
    <!-- Back Button -->
    <div class="mb-8">
        <a href="{{ url_for('index') }}" class="group flex items-center gap-2 text-gray-400 hover:text-primary transition-colors text-sm font-bold">
            <span class="material-symbols-outlined text-[20px] group-hover:-translate-x-1 transition-transform">arrow_back</span>
            <span>返回首页</span>
        </a>
    </div>

    <div class="grid grid-cols-1 lg:grid-cols-12 gap-8 lg:gap-12">
        <!-- Left Column: Main Content -->
        <div class="lg:col-span-8 flex flex-col gap-8">
            <!-- Header Section -->
            <div class="flex flex-col sm:flex-row gap-6 items-start">
                <!-- Logo Container -->
                <div class="relative shrink-0">
                    <div class="absolute -inset-1 bg-gradient-to-br from-primary via-purple-500 to-secondary rounded-2xl opacity-30 blur-md"></div>
                    {% if site.logo %}
                    <div class="relative size-[120px] rounded-xl bg-surface-dark flex items-center justify-center overflow-hidden border border-border-dark" style="background-image: url('{{ site.logo }}'); background-size: cover; background-position: center;"></div>
                    {% else %}
                    <div class="relative size-[120px] rounded-xl bg-gradient-to-br from-primary to-secondary flex items-center justify-center border border-border-dark">
                        <span class="text-5xl font-bold text-black">{{ site.name[0] }}</span>
                    </div>
                    {% endif %}
                </div>

                <!-- Title & Meta -->
                <div class="flex flex-col gap-3 flex-1">
                    <div>
                        <h1 class="text-4xl font-bold text-white tracking-tight font-display mb-1">{{ site.name }}</h1>
                        <a class="text-primary hover:text-primary-dark hover:underline text-base font-medium flex items-center gap-1" href="{{ site.url }}" target="_blank">
                            {{ site.url }}
                            <span class="material-symbols-outlined text-[16px]">open_in_new</span>
                        </a>
                    </div>

                    <!-- Tags -->
                    <div class="flex flex-wrap gap-2">
                        {% for tag in site.tags %}
                        <span class="inline-flex items-center px-3 py-1 rounded-full text-xs font-medium bg-surface-dark text-gray-300 border border-border-dark hover:border-primary/30 transition-colors cursor-default">
                            {{ tag.name }}
                        </span>
                        {% endfor %}
                    </div>

                    <!-- Stats Row -->
                    <div class="flex items-center gap-6 mt-1 text-gray-400 text-sm">
                        <div class="flex items-center gap-2">
                            <span class="material-symbols-outlined text-[18px]">visibility</span>
                            <span>{{ site.view_count }} 次浏览</span>
                        </div>
                        <div class="flex items-center gap-2">
                            <span class="material-symbols-outlined text-[18px]">calendar_today</span>
                            <span>{{ site.created_at.strftime('%Y年%m月%d日') }}</span>
                        </div>
                    </div>
                </div>
            </div>

            <hr class="border-border-dark/60"/>

            <!-- Main Content Body -->
            <div class="space-y-8">
                <!-- Overview -->
                {% if site.short_desc %}
                <section>
                    <h3 class="text-xl font-bold text-white mb-4 flex items-center gap-2">
                        <span class="material-symbols-outlined text-primary">info</span>
                        产品简介
                    </h3>
                    <p class="text-gray-400 leading-relaxed text-lg">
                        {{ site.short_desc }}
                    </p>
                </section>
                {% endif %}

                <!-- Detailed Description -->
                {% if site.description %}
                <section>
                    <h3 class="text-xl font-bold text-white mb-4 flex items-center gap-2">
                        <span class="material-symbols-outlined text-primary">article</span>
                        详细介绍
                    </h3>
                    <div class="text-gray-400 space-y-4 leading-relaxed whitespace-pre-wrap">
                        {{ site.description|safe }}
                    </div>
                </section>
                {% endif %}

                <!-- Features -->
                {% if site.features %}
                <section>
                    <h3 class="text-xl font-bold text-white mb-4 flex items-center gap-2">
                        <span class="material-symbols-outlined text-primary">star</span>
                        主要功能
                    </h3>
                    <div class="text-gray-400 space-y-4 leading-relaxed whitespace-pre-wrap">
                        {{ site.features|safe }}
                    </div>
                </section>
                {% endif %}

                <!-- Related News -->
                {% if news_list %}
                <section>
                    <h3 class="text-xl font-bold text-white mb-4 flex items-center gap-2">
                        <span class="material-symbols-outlined text-secondary\">newspaper</span>
                        相关新闻
                    </h3>
                    <div class="grid gap-4">
                        {% for news in news_list %}
                        <a class="group block p-5 rounded-xl border border-border-dark bg-surface-dark/40 hover:bg-border-dark/60 hover:border-primary/30 transition-all" href="{{ news.url if news.url else '#' }}" {{ 'target=\"_blank\"' if news.url else '' }}>
                            <div class="flex justify-between items-start mb-2">
                                {% if news.news_type == 'Product Update' %}
                                <span class="inline-flex items-center px-2 py-0.5 rounded text-[10px] font-bold uppercase tracking-wider bg-primary/10 text-primary">{{ news.news_type }}</span>
                                {% elif news.news_type == 'Industry News' %}
                                <span class="inline-flex items-center px-2 py-0.5 rounded text-[10px] font-bold uppercase tracking-wider bg-purple-500/10 text-purple-400">{{ news.news_type }}</span>
                                {% else %}
                                <span class="inline-flex items-center px-2 py-0.5 rounded text-[10px] font-bold uppercase tracking-wider bg-gray-500/10 text-gray-400">{{ news.news_type }}</span>
                                {% endif %}
                                <span class="text-xs text-gray-400">
                                    {% set days_ago = (now() - news.published_at).days %}
                                    {% if days_ago == 0 %}
                                        今天
                                    {% elif days_ago == 1 %}
                                        1天前
                                    {% elif days_ago < 7 %}
                                        {{ days_ago }}天前
                                    {% else %}
                                        {{ news.published_at.strftime('%Y年%m月%d日') }}
                                    {% endif %}
                                </span>
                            </div>
                            <h4 class="text-white font-bold text-base group-hover:text-primary transition-colors mb-2">{{ news.title }}</h4>
                            <p class="text-sm text-gray-400 line-clamp-2">{{ news.content }}</p>
                        </a>
                        {% endfor %}
                    </div>
                </section>
                {% endif %}

                <!-- Similar Recommendations -->
                {% if recommended_sites %}
                <section>
                    <h3 class="text-xl font-bold text-white mb-4 flex items-center gap-2">
                        <span class="material-symbols-outlined text-primary">auto_awesome</span>
                        同类工具推荐
                    </h3>
                    <div class="grid grid-cols-1 sm:grid-cols-2 gap-4">
                        {% for rec_site in recommended_sites %}
                        <a class="flex flex-col p-4 rounded-xl border border-border-dark bg-surface-dark hover:border-primary/50 hover:shadow-[0_0_20px_-10px_rgba(37,192,244,0.3)] transition-all group h-full" href="{{ url_for('site_detail', slug=rec_site.slug) }}">
                            <div class="flex items-start justify-between mb-3">
                                {% if rec_site.logo %}
                                <div class="size-10 rounded-lg bg-cover bg-center shadow-lg" style="background-image: url('{{ rec_site.logo }}');"></div>
                                {% else %}
                                <div class="size-10 rounded-lg bg-gradient-to-br from-primary to-secondary flex items-center justify-center shadow-lg">
                                    <span class="text-white font-bold text-lg">{{ rec_site.name[0] }}</span>
                                </div>
                                {% endif %}
                                <div class="size-8 rounded-full bg-border-dark/50 flex items-center justify-center text-gray-400 group-hover:text-white group-hover:bg-primary group-hover:scale-110 transition-all">
                                    <span class="material-symbols-outlined text-[18px]">arrow_forward</span>
                                </div>
                            </div>
                            <div>
                                <h4 class="text-white font-bold mb-1">{{ rec_site.name }}</h4>
                                <p class="text-xs text-gray-400 line-clamp-2 mb-3">{{ rec_site.short_desc or '暂无描述' }}</p>
                                <div class="flex gap-2 flex-wrap">
                                    {% for tag in rec_site.tags[:2] %}
                                    <span class="px-2 py-1 rounded bg-border-dark text-[10px] text-gray-400 font-medium">{{ tag.name }}</span>
                                    {% endfor %}
                                </div>
                            </div>
                        </a>
                        {% endfor %}
                    </div>
                </section>
                {% endif %}
            </div>
        </div>

        <!-- Right Column: Sidebar -->
        <div class="lg:col-span-4 space-y-6">
            <!-- CTA Card -->
            <div class="rounded-2xl p-6 flex flex-col gap-4 shadow-xl shadow-black/20 sticky top-24 bg-surface-dark/60 backdrop-blur-xl border border-border-dark">
                <div class="flex items-center justify-between mb-2">
                    <span class="text-white font-bold text-lg">立即体验</span>
                </div>

                <a class="group relative flex items-center justify-center w-full overflow-hidden rounded-xl bg-primary hover:bg-primary/90 p-4 focus:outline-none transition-all hover:scale-[1.02] shadow-[0_0_20px_rgba(37,192,244,0.3)] hover:shadow-[0_0_30px_rgba(37,192,244,0.5)]" href="{{ site.url }}" target="_blank">
                    <span class="flex items-center gap-2 text-black font-bold text-base uppercase tracking-wide">
                        访问网站
                        <span class="material-symbols-outlined text-[20px] font-bold">arrow_outward</span>
                    </span>
                </a>

                <div class="pt-4 border-t border-border-dark">
                    <p class="text-gray-500 text-xs text-center">
                        {{ site.url }}
                    </p>
                </div>
            </div>
        </div>
    </div>
</main>
{% endblock %}