---
layout: default
title: PCHUB by devlabstudy | Wyszukiwarka Zestawów
url: /
---

<style>
    :root {
        --ph-orange: #ff9900;
        --ph-dark-bg: #0e0e0e;
        --ph-card-bg: #1b1b1b;
        --ph-border: #2a2a2a;
        --ph-blue: #00d2ff;
        --ph-purple: #a855f7;
    }

    .hero-section {
        text-align: center;
        max-width: 900px;
        margin: 30px auto 40px auto;
    }

    .hub-logo-container {
        display: inline-flex;
        align-items: center;
        font-family: 'JetBrains Mono', monospace;
        font-size: 3.5rem;
        font-weight: 900;
        letter-spacing: -1.5px;
        user-select: none;
        margin-bottom: 5px;
    }

    .hub-text-left { color: #ffffff; padding-right: 6px; }
    .hub-badge-right {
        background: var(--ph-orange);
        color: #000000;
        padding: 2px 14px;
        border-radius: 8px;
        font-weight: 900;
    }

    .hero-author {
        font-family: 'JetBrains Mono', monospace;
        font-size: 0.95rem;
        color: #888888;
        margin-bottom: 15px;
        font-weight: 600;
    }

    .hero-tag {
        font-family: 'JetBrains Mono', monospace;
        font-size: 0.75rem;
        background: rgba(255, 153, 0, 0.12);
        color: var(--ph-orange);
        padding: 6px 14px;
        border-radius: 6px;
        border: 1px solid rgba(255, 153, 0, 0.3);
        font-weight: 800;
        text-transform: uppercase;
        letter-spacing: 2px;
        display: inline-block;
        margin-bottom: 20px;
    }

    .hero-desc {
        color: #999999;
        font-size: 1.02rem;
        line-height: 1.6;
        font-family: 'Inter', sans-serif;
    }

    /* KONTENER FILTRÓW I TAGÓW */
    .filter-panel {
        background: var(--ph-card-bg);
        border: 1px solid var(--ph-border);
        border-radius: 12px;
        padding: 20px;
        margin-bottom: 30px;
        display: flex;
        flex-direction: column;
        gap: 15px;
    }

    .filter-row {
        display: flex;
        align-items: center;
        gap: 12px;
        flex-wrap: wrap;
    }

    .filter-label {
        font-family: 'JetBrains Mono', monospace;
        font-size: 0.75rem;
        color: var(--ph-orange);
        text-transform: uppercase;
        font-weight: 800;
        min-width: 140px;
    }

    .filter-chip {
        background: #121212;
        border: 1px solid var(--ph-border);
        color: #aaa;
        padding: 6px 14px;
        border-radius: 20px;
        font-family: 'JetBrains Mono', monospace;
        font-size: 0.75rem;
        cursor: pointer;
        transition: all 0.2s ease;
        user-select: none;
    }

    .filter-chip:hover { border-color: var(--ph-orange); color: #fff; }
    
    .filter-chip.active {
        background: var(--ph-orange);
        color: #000;
        border-color: var(--ph-orange);
        font-weight: 800;
    }

    .filter-chip.active-blue {
        background: var(--ph-blue);
        color: #000;
        border-color: var(--ph-blue);
        font-weight: 800;
    }

    /* TAGI NA KARTACH */
    .tag-badge {
        font-family: 'JetBrains Mono', monospace;
        font-size: 0.65rem;
        font-weight: 800;
        padding: 3px 8px;
        border-radius: 4px;
        text-transform: uppercase;
    }
    .tag-gaming { background: rgba(0, 210, 255, 0.15); color: #00d2ff; border: 1px solid rgba(0, 210, 255, 0.3); }
    .tag-office { background: rgba(16, 185, 129, 0.15); color: #10b981; border: 1px solid rgba(16, 185, 129, 0.3); }
    .tag-retro { background: rgba(168, 85, 247, 0.15); color: #a855f7; border: 1px solid rgba(168, 85, 247, 0.3); }
    .tag-homelab { background: rgba(255, 153, 0, 0.15); color: #ff9900; border: 1px solid rgba(255, 153, 0, 0.3); }

    /* KARTY KOMPUTERÓW */
    .pc-grid { display: flex; flex-direction: column; gap: 25px; }

    .pc-card {
        background: var(--ph-card-bg);
        border: 1px solid var(--ph-border);
        border-radius: 12px;
        padding: 25px;
        position: relative;
        overflow: hidden;
        transition: border-color 0.25s;
    }

    .pc-card::before {
        content: ''; position: absolute; top: 0; left: 0; width: 4px; height: 100%;
        background: var(--ph-border); transition: background 0.2s;
    }

    .pc-card:hover { border-color: var(--ph-orange); }
    .pc-card:hover::before { background: var(--ph-orange); }

    .pc-header {
        display: flex;
        justify-content: space-between;
        align-items: center;
        flex-wrap: wrap;
        gap: 10px;
        margin-bottom: 12px;
    }

    .pc-title-area { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
    .pc-title { font-family: 'JetBrains Mono', monospace; font-size: 1.3rem; font-weight: 900; color: #fff; }

    .pc-price-tag {
        font-family: 'JetBrains Mono', monospace;
        font-size: 1.1rem;
        font-weight: 900;
        background: rgba(255, 153, 0, 0.15);
        color: var(--ph-orange);
        border: 1px solid rgba(255, 153, 0, 0.3);
        padding: 4px 12px;
        border-radius: 6px;
    }

    /* TABELA CZĘŚCI */
    .parts-table-wrapper { margin: 15px 0; overflow-x: auto; }

    .parts-table {
        width: 100%;
        border-collapse: collapse;
        font-family: 'JetBrains Mono', monospace;
        font-size: 0.78rem;
        background: #121212;
        border-radius: 8px;
        overflow: hidden;
        border: 1px solid var(--ph-border);
    }

    .parts-table th {
        background: #181818;
        color: var(--ph-orange);
        padding: 10px 14px;
        text-align: left;
        border-bottom: 1px solid var(--ph-border);
        text-transform: uppercase;
    }

    .parts-table td {
        padding: 10px 14px;
        border-bottom: 1px solid rgba(255, 255, 255, 0.05);
        color: #ccc;
    }

    .btn-details {
        display: inline-flex;
        align-items: center;
        gap: 8px;
        background: var(--ph-orange);
        color: #000;
        padding: 10px 20px;
        border-radius: 6px;
        font-family: 'JetBrains Mono', monospace;
        font-weight: 900;
        font-size: 0.78rem;
        text-transform: uppercase;
        text-decoration: none;
        margin-top: 10px;
        transition: 0.2s;
    }
    .btn-details:hover { background: #ffa826; }

    @media (max-width: 768px) {
        .hub-logo-container { font-size: 2.3rem; }
        .filter-label { min-width: 100%; margin-bottom: 4px; }
    }
</style>

<!-- HERO SECTION -->
<section class="hero-section">
    <div class="hero-tag">// HARDWARE REPOSITORY &amp; FILTER</div>
    <br>
    <div class="hub-logo-container">
        <span class="hub-text-left">PC</span><span class="hub-badge-right">HUB</span>
    </div>
    <div class="hero-author">by devlabstudy</div>
    <p class="hero-desc">
        Baza autorskich projektów komputerowych. Filtruj jednostki według ich przeznaczenia (Retro, Gaming, Office) oraz budżetu.
    </p>
</section>

<!-- PANEL FILTRÓW -->
<div class="filter-panel">
    <!-- FILTR PRZEZNACZENIA (TAGI) -->
    <div class="filter-row">
        <span class="filter-label">Kategoria / Typ:</span>
        <div class="filter-chip active-blue" onclick="setCategoryFilter('all', this)">Wszystkie</div>
        <div class="filter-chip" onclick="setCategoryFilter('gaming', this)">🎮 Gaming 1080p</div>
        <div class="filter-chip" onclick="setCategoryFilter('office', this)">💼 Biuro / Nauka</div>
        <div class="filter-chip" onclick="setCategoryFilter('retro', this)">🕹️ Retro / Vintage</div>
        <div class="filter-chip" onclick="setCategoryFilter('homelab', this)">🗄️ Homelab / Serwer</div>
    </div>

    <!-- FILTR BUDŻETU -->
    <div class="filter-row">
        <span class="filter-label">Maks. Budżet:</span>
        <div class="filter-chip active" onclick="setBudgetFilter('all', this)">Bez limitu</div>
        <div class="filter-chip" onclick="setBudgetFilter(500, this)">do 500 zł</div>
        <div class="filter-chip" onclick="setBudgetFilter(1000, this)">do 1000 zł</div>
        <div class="filter-chip" onclick="setBudgetFilter(1500, this)">do 1500 zł</div>
    </div>
</div>

<!-- KONTENER NA KOMPUTERY GENEROWANY Z DANYCH JEKYLLA -->
<div class="pc-grid" id="pcGridContainer">
    {% for pc in site.data.komputery %}
    <div class="pc-card" data-category="{{ pc.category }}" data-cost="{{ pc.totalCost }}">
        <div class="pc-header">
            <div class="pc-title-area">
                <span class="pc-title">{{ pc.title }}</span>
                {% if pc.category == 'gaming' %}
                    <span class="tag-badge tag-gaming">Gaming 1080p</span>
                {% elsif pc.category == 'office' %}
                    <span class="tag-badge tag-office">Biuro / Nauka</span>
                {% elsif pc.category == 'retro' %}
                    <span class="tag-badge tag-retro">Retro / Vintage</span>
                {% elsif pc.category == 'homelab' %}
                    <span class="tag-badge tag-homelab">Homelab / Serwer</span>
                {% endif %}
            </div>
            <div class="pc-price-tag">KOSZT: {{ pc.totalCost }} PLN</div>
        </div>

        <div class="parts-table-wrapper">
            <table class="parts-table">
                <thead>
                    <tr>
                        <th>Podzespół</th>
                        <th>Model / Specyfikacja</th>
                        <th>Koszt</th>
                        <th>Źródło</th>
                    </tr>
                </thead>
                <tbody>
                    {% for part in pc.parts %}
                    <tr>
                        <td><strong>{{ part.type }}</strong></td>
                        <td>{{ part.name }}</td>
                        <td style="color: var(--ph-orange);">{{ part.price }}</td>
                        <td style="color: #00d2ff;">{{ part.proof }}</td>
                    </tr>
                    {% endfor %}
                </tbody>
            </table>
        </div>

        <a href="{{ pc.url }}" class="btn-details">
            Zobacz Raport i Testy →
        </a>
    </div>
    {% endfor %}
</div>

<!-- SKRYPT DO SCHOWANIA/POKAZYWANIA KART PRZY FILTROWANIU -->
<script>
    let currentCategory = 'all';
    let currentMaxBudget = 'all';

    function filterCards() {
        const cards = document.querySelectorAll('.pc-card');
        let visibleCount = 0;

        cards.forEach(card => {
            const cat = card.getAttribute('data-category');
            const cost = parseInt(card.getAttribute('data-cost'));

            const matchCategory = (currentCategory === 'all' || cat === currentCategory);
            const matchBudget = (currentMaxBudget === 'all' || cost <= currentMaxBudget);

            if (matchCategory && matchBudget) {
                card.style.display = 'block';
                visibleCount++;
            } else {
                card.style.display = 'none';
            }
        });
    }

    function setCategoryFilter(cat, el) {
        document.querySelectorAll('.filter-row:first-child .filter-chip').forEach(c => c.classList.remove('active-blue'));
        el.classList.add('active-blue');
        currentCategory = cat;
        filterCards();
    }

    function setBudgetFilter(budget, el) {
        document.querySelectorAll('.filter-row:last-child .filter-chip').forEach(c => c.classList.remove('active'));
        el.classList.add('active');
        currentMaxBudget = budget;
        filterCards();
    }
</script>