kilabor/layouts/mac-nerds/single.html

{{ define "main" }}
<div class="mac-nerds-wrapper" style="max-width: 900px; margin: 0 auto; padding: 20px;">

    <!-- HEADER -->
    <header style="text-align: center; margin-bottom: 40px;">
        <p style="color: rgba(212,175,55,0.5); font-family: 'Courier New', monospace; letter-spacing: 4px; font-size: 0.75rem; margin-bottom: 8px;">// GEHEIMES TERMINAL-ARCHIV</p>
        <h1 style="color: #ff4500; letter-spacing: 10px; font-size: 2.2rem; text-shadow: 0 0 20px rgba(255,69,0,0.3); font-family: 'Courier New', monospace; margin: 0;">{{ .Title | upper }}</h1>
        <p style="color: rgba(212,175,55,0.4); font-family: 'Courier New', monospace; font-size: 0.8rem; margin-top: 10px;">{{ .Description }}</p>
    </header>

    <!-- FILTER TABS -->
    <div id="cat-filter" style="display: flex; gap: 10px; flex-wrap: wrap; justify-content: center; margin-bottom: 30px;">
        <button class="cat-btn active" data-cat="all" onclick="filterCat('all', this)">ALLE</button>
        {{ range site.Data.mac_nerds_cats }}
        <button class="cat-btn" data-cat="{{ . }}" onclick="filterCat('{{ . }}', this)">{{ . | upper }}</button>
        {{ end }}
    </div>

    <!-- COMMAND CARDS -->
    <div id="cmd-grid">
        {{ range site.Data.mac_nerds }}
        <div class="cmd-card" data-cat="{{ .cat }}">
            <div class="cmd-card-header">
                <span class="cmd-cat-badge">{{ .cat | upper }}</span>
                <span class="cmd-risk risk-{{ .risk }}">{{ .risk | upper }}</span>
            </div>
            <h3 class="cmd-title">{{ .title }}</h3>
            <div class="cmd-block" onclick="copyCmd(this, '{{ .cmd | htmlEscape }}')">
                <code>{{ .cmd }}</code>
                <span class="copy-hint">[KOPIEREN]</span>
            </div>
            <p class="cmd-desc">{{ .desc }}</p>
        </div>
        {{ end }}
    </div>

</div>

<style>
    .mac-nerds-wrapper { font-family: 'Courier New', monospace; }

    .cat-btn {
        background: transparent;
        border: 1px solid rgba(212,175,55,0.3);
        color: rgba(212,175,55,0.5);
        padding: 6px 16px;
        font-family: 'Courier New', monospace;
        font-size: 0.75rem;
        letter-spacing: 2px;
        cursor: pointer;
        transition: all 0.2s;
    }
    .cat-btn:hover, .cat-btn.active {
        border-color: #d4af37;
        color: #d4af37;
        background: rgba(212,175,55,0.08);
    }

    #cmd-grid {
        display: grid;
        grid-template-columns: repeat(auto-fill, minmax(380px, 1fr));
        gap: 20px;
    }

    .cmd-card {
        background: linear-gradient(135deg, #1a1008 0%, #0d0d0d 100%);
        border: 1px solid rgba(184,115,51,0.3);
        padding: 20px;
        transition: border-color 0.2s, box-shadow 0.2s;
    }
    .cmd-card:hover {
        border-color: rgba(212,175,55,0.6);
        box-shadow: 0 0 20px rgba(212,175,55,0.05);
    }
    .cmd-card.hidden { display: none; }

    .cmd-card-header {
        display: flex;
        justify-content: space-between;
        align-items: center;
        margin-bottom: 10px;
    }
    .cmd-cat-badge {
        font-size: 0.6rem;
        letter-spacing: 3px;
        color: rgba(184,115,51,0.7);
    }
    .cmd-risk {
        font-size: 0.6rem;
        letter-spacing: 2px;
        padding: 2px 8px;
        border: 1px solid;
    }
    .risk-safe { color: #4caf50; border-color: rgba(76,175,80,0.4); }
    .risk-warning { color: #ff9800; border-color: rgba(255,152,0,0.4); }
    .risk-danger { color: #ff4500; border-color: rgba(255,69,0,0.4); }

    .cmd-title {
        color: #d4af37;
        font-size: 1rem;
        letter-spacing: 2px;
        margin: 0 0 12px;
    }

    .cmd-block {
        background: #000;
        border: 1px solid rgba(184,115,51,0.2);
        padding: 10px 14px;
        cursor: pointer;
        display: flex;
        justify-content: space-between;
        align-items: center;
        gap: 10px;
        margin-bottom: 12px;
        transition: border-color 0.2s;
    }
    .cmd-block:hover { border-color: rgba(212,175,55,0.5); }
    .cmd-block code {
        color: #7ec8a4;
        font-size: 0.8rem;
        word-break: break-all;
        flex: 1;
    }
    .copy-hint {
        color: rgba(212,175,55,0.3);
        font-size: 0.6rem;
        letter-spacing: 1px;
        white-space: nowrap;
        transition: color 0.2s;
    }
    .cmd-block:hover .copy-hint { color: rgba(212,175,55,0.8); }
    .cmd-block.copied { border-color: #4caf50; }
    .cmd-block.copied .copy-hint { color: #4caf50; }

    .cmd-desc {
        color: rgba(212,175,55,0.45);
        font-size: 0.78rem;
        line-height: 1.5;
        margin: 0;
    }

    @media (max-width: 600px) {
        #cmd-grid { grid-template-columns: 1fr; }
    }
</style>

<script>
function filterCat(cat, btn) {
    document.querySelectorAll('.cat-btn').forEach(b => b.classList.remove('active'));
    btn.classList.add('active');
    document.querySelectorAll('.cmd-card').forEach(card => {
        card.classList.toggle('hidden', cat !== 'all' && card.dataset.cat !== cat);
    });
}

function copyCmd(el, cmd) {
    navigator.clipboard.writeText(cmd).then(() => {
        const hint = el.querySelector('.copy-hint');
        const orig = hint.textContent;
        hint.textContent = '[KOPIERT ✓]';
        el.classList.add('copied');
        setTimeout(() => { hint.textContent = orig; el.classList.remove('copied'); }, 1500);
    });
}
</script>
{{ end }}