modules.php

<?php
include 'config.php';
include 'functions.php';
include 'header.php';
require_once 'auth.php';
?>

    <style>
        .fade-in {
            opacity: 0;
            transform: translateY(10px);
            transition: opacity 0.5s ease, transform 0.5s ease;
        }

        .fade-in.show {
            opacity: 1;
            transform: translateY(0);
        }

        .skeleton-card {
            background-color: #e0e0e0;
            border-radius: 0.5rem;
            padding: 1rem;
            margin-bottom: 1rem;
            animation: pulse 1.5s infinite ease-in-out;
            min-height: 120px;
        }

        .skeleton-line {
            height: 16px;
            background-color: #d0d0d0;
            border-radius: 4px;
            margin-bottom: 10px;
        }

        .skeleton-line.short {
            width: 50%;
        }

        @keyframes pulse {
            0% { opacity: 1; }
            50% { opacity: 0.4; }
            100% { opacity: 1; }
        }
    </style>

    <div class="container mt-4">
        <h1 class="mb-4"><i class="fas fa-microchip"></i> Twoje moduły</h1>

        <div id="modules-loader" class="row">
            <?php for ($i = 0; $i < 4; $i++): ?>
                <div class="col-md-6">
                    <div class="skeleton-card">
                        <div class="skeleton-line" style="width: 60%;"></div>
                        <div class="skeleton-line short"></div>
                    </div>
                </div>
            <?php endfor; ?>
        </div>

        <div id="modules-container" class="row d-none"></div>
    </div>

    <script>
        document.addEventListener('DOMContentLoaded', () => {
            fetch('modules_data.php')
                .then(res => res.text())
                .then(html => {
                    const loader = document.getElementById('modules-loader');
                    const container = document.getElementById('modules-container');

                    container.innerHTML = html;

                    container.querySelectorAll('.card').forEach((card, i) => {
                        card.classList.add('fade-in');
                        setTimeout(() => card.classList.add('show'), i * 100);
                    });

                    loader.classList.add('d-none');
                    container.classList.remove('d-none');
                })
                .catch(() => {
                    document.getElementById('modules-loader').innerHTML =
                        '<div class="alert alert-danger">Błąd podczas ładowania modułów.</div>';
                });
        });
    </script>

<?php include 'footer.php'; ?>