nordabiz/templates/release_notes.html

{% extends "base.html" %}

{% block title %}Historia zmian - Norda Biznes Hub{% endblock %}

{% block extra_css %}
<style>
    .page-header {
        margin-bottom: var(--spacing-xl);
        text-align: center;
    }

    .page-header h1 {
        font-size: var(--font-size-3xl);
        color: var(--text-primary);
        margin-bottom: var(--spacing-sm);
    }

    .page-header p {
        color: var(--text-secondary);
        font-size: var(--font-size-lg);
    }

    .releases-container {
        max-width: 800px;
        margin: 0 auto;
    }

    .release-card {
        background: var(--surface);
        border: 1px solid var(--border);
        border-radius: var(--radius-lg);
        padding: var(--spacing-xl);
        margin-bottom: var(--spacing-lg);
        position: relative;
    }

    .release-card::before {
        content: '';
        position: absolute;
        left: -20px;
        top: 30px;
        width: 12px;
        height: 12px;
        background: var(--primary);
        border-radius: 50%;
        border: 3px solid var(--surface);
        box-shadow: 0 0 0 2px var(--primary);
    }

    .releases-timeline {
        border-left: 2px solid var(--border);
        padding-left: var(--spacing-xl);
        margin-left: var(--spacing-sm);
    }

    .release-header {
        display: flex;
        justify-content: space-between;
        align-items: flex-start;
        margin-bottom: var(--spacing-md);
        flex-wrap: wrap;
        gap: var(--spacing-sm);
    }

    .release-version {
        font-size: var(--font-size-xl);
        font-weight: 600;
        color: var(--text-primary);
    }

    .release-date {
        font-size: var(--font-size-sm);
        color: var(--text-secondary);
        background: var(--background);
        padding: var(--spacing-xs) var(--spacing-sm);
        border-radius: var(--radius);
    }

    .release-badges {
        display: flex;
        gap: var(--spacing-xs);
        flex-wrap: wrap;
    }

    .release-badge {
        font-size: var(--font-size-xs);
        padding: 2px 8px;
        border-radius: var(--radius);
        font-weight: 500;
        text-transform: uppercase;
    }

    .badge-new {
        background: #dcfce7;
        color: #166534;
    }

    .badge-fix {
        background: #fee2e2;
        color: #991b1b;
    }

    .badge-improve {
        background: #dbeafe;
        color: #1e40af;
    }

    .badge-beta {
        background: #fef3c7;
        color: #92400e;
    }

    .release-changes {
        margin-top: var(--spacing-md);
    }

    .change-category {
        margin-bottom: var(--spacing-md);
    }

    .change-category h4 {
        font-size: var(--font-size-sm);
        color: var(--text-secondary);
        text-transform: uppercase;
        margin-bottom: var(--spacing-sm);
        display: flex;
        align-items: center;
        gap: var(--spacing-xs);
    }

    .change-category h4::before {
        font-size: var(--font-size-base);
    }

    .change-category.new h4::before { content: '✨'; }
    .change-category.fix h4::before { content: '🔧'; }
    .change-category.improve h4::before { content: '⚡'; }
    .change-category.beta h4::before { content: '🧪'; }

    .change-list {
        list-style: none;
        padding: 0;
        margin: 0;
    }

    .change-list li {
        padding: var(--spacing-xs) 0;
        padding-left: var(--spacing-md);
        position: relative;
        color: var(--text-primary);
        font-size: var(--font-size-sm);
    }

    .change-list li::before {
        content: '•';
        position: absolute;
        left: 0;
        color: var(--text-secondary);
    }

    .stats-banner {
        background: linear-gradient(135deg, var(--primary), var(--primary-dark, #1a56db));
        color: white;
        border-radius: var(--radius-lg);
        padding: var(--spacing-xl);
        margin-bottom: var(--spacing-xl);
        display: grid;
        grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
        gap: var(--spacing-lg);
        text-align: center;
    }

    .stat-item h3 {
        font-size: var(--font-size-3xl);
        font-weight: 700;
        margin-bottom: var(--spacing-xs);
    }

    .stat-item p {
        font-size: var(--font-size-sm);
        opacity: 0.9;
    }

    @media (max-width: 768px) {
        .releases-timeline {
            padding-left: var(--spacing-md);
            margin-left: 0;
        }

        .release-card::before {
            left: -15px;
        }
    }
</style>
{% endblock %}

{% block content %}
<div class="container">
    <div class="page-header">
        <h1>📋 Historia zmian</h1>
        <p>Dziennik rozwoju platformy Norda Biznes Hub</p>
    </div>

    <div class="stats-banner">
        <div class="stat-item">
            <h3>111</h3>
            <p>Firm w katalogu</p>
        </div>
        <div class="stat-item">
            <h3>19</h3>
            <p>Kategorii branżowych</p>
        </div>
        <div class="stat-item">
            <h3>{{ releases|length }}</h3>
            <p>Aktualizacji</p>
        </div>
        <div class="stat-item">
            <h3>2025</h3>
            <p>Rok startu</p>
        </div>
    </div>

    <div class="releases-container">
        <div class="releases-timeline">
            {% for release in releases %}
            <div class="release-card">
                <div class="release-header">
                    <div>
                        <div class="release-version">{{ release.version }}</div>
                        <div class="release-badges">
                            {% for badge in release.badges %}
                            <span class="release-badge badge-{{ badge }}">{{ badge }}</span>
                            {% endfor %}
                        </div>
                    </div>
                    <div class="release-date">{{ release.date }}</div>
                </div>

                <div class="release-changes">
                    {% if release.new %}
                    <div class="change-category new">
                        <h4>Nowości</h4>
                        <ul class="change-list">
                            {% for item in release.new %}
                            <li>{{ item }}</li>
                            {% endfor %}
                        </ul>
                    </div>
                    {% endif %}

                    {% if release.improve %}
                    <div class="change-category improve">
                        <h4>Ulepszenia</h4>
                        <ul class="change-list">
                            {% for item in release.improve %}
                            <li>{{ item }}</li>
                            {% endfor %}
                        </ul>
                    </div>
                    {% endif %}

                    {% if release.fix %}
                    <div class="change-category fix">
                        <h4>Naprawione</h4>
                        <ul class="change-list">
                            {% for item in release.fix %}
                            <li>{{ item }}</li>
                            {% endfor %}
                        </ul>
                    </div>
                    {% endif %}

                    {% if release.beta %}
                    <div class="change-category beta">
                        <h4>W fazie testów (BETA)</h4>
                        <ul class="change-list">
                            {% for item in release.beta %}
                            <li>{{ item }}</li>
                            {% endfor %}
                        </ul>
                    </div>
                    {% endif %}
                </div>
            </div>
            {% endfor %}
        </div>
    </div>
</div>
{% endblock %}