🇵🇱 Integracja Panelu Logowania

Ten folder zawiera gotowy, nowoczesny panel logowania i rejestracji z obsługą wielu języków (PL/EN) i trybu ciemnego. Poniżej znajdziesz instrukcję, jak połączyć go ze swoją stroną.

📂 Struktura Plików

Upewnij się, że skopiowałeś następujące pliki do folderu swojego projektu:

• index.html (Logowanie)
• register.html (Rejestracja)
• style.css (Wygląd)
• app.js (Logika)
• config.js (Konfiguracja)
• lang.js (Tłumaczenia)

🔧 Krok 1: Konfiguracja API

Otwórz plik config.js. To tutaj ustawiasz adres swojego backendu (serwera), do którego będą wysyłane dane logowania.

const CONFIG = {
    // Zmień ten adres na adres swojego API
    API_BASE_URL: 'https://twoja-strona.pl/api', 
    
    // Inne ustawienia
    TIMEOUT: 5000,
    ENABLE_LOGS: true
};

🔗 Krok 2: Podłączenie do Twojej Logiki

Domyślnie panel działa w trybie "Demo" – udaje, że loguje użytkownika. Aby podłączyć go do prawdziwego systemu, edytuj plik app.js.

Znajdź fragment odpowiedzialny za logowanie (szukaj loginForm.addEventListener):

// W pliku app.js
try {
    // Tutaj następuje "udawane" zapytanie. 
    // ZAMIEN TO na prawdziwe zapytanie, np. używając fetch():
    
    /* PRZYKŁAD PRAWDZIWEGO KODU:
    const response = await fetch(`${CONFIG.API_BASE_URL}/login`, {
        method: 'POST',
        headers: { 'Content-Type': 'application/json' },
        body: JSON.stringify({ email: emailInput.value, password: passwordInput.value })
    });
    
    if (!response.ok) throw new Error('Błąd logowania');
    const data = await response.json();
    
    // Zapisz token i przekieruj
    localStorage.setItem('token', data.token);
    window.location.href = '/dashboard.html'; // Przekierowanie po sukcesie
    */

    // ... reszta kodu obsługi błędów ...
}

Zrób to samo dla rejestracji (registerForm.addEventListener).

🎨 Krok 3: Dostosowanie Wyglądu

Możesz łatwo zmienić kolory, edytując zmienne na początku pliku style.css:

:root {
    --primary-color: #4f46e5; /* Główny kolor przycisków */
    --primary-hover: #4338ca; /* Kolor po najechaniu myszką */
    /* ... inne zmienne */
}

🌍 Krok 4: Dodawanie Języków

Aby dodać nowy język lub zmienić teksty, edytuj plik lang.js. Wystarczy dodać nowy klucz (np. de dla niemieckiego) i przetłumaczyć frazy.

---

🇬🇧 Login Panel Integration

This folder contains a ready-to-use, modern login and registration panel with multi-language support (PL/EN) and dark mode. Below you will find instructions on how to integrate it with your website.

📂 File Structure

Make sure you have copied the following files to your project folder:

• index.html (Login)
• register.html (Registration)
• style.css (Appearance)
• app.js (Logic)
• config.js (Configuration)
• lang.js (Translations)

🔧 Step 1: API Configuration

Open the config.js file. This is where you set the address of your backend (server) to which login data will be sent.

const CONFIG = {
    // Change this address to your API address
    API_BASE_URL: 'https://your-website.com/api', 
    
    // Other settings
    TIMEOUT: 5000,
    ENABLE_LOGS: true
};

🔗 Step 2: Connecting Your Logic

By default, the panel works in "Demo" mode – it pretends to log the user in. To connect it to a real system, edit the app.js file.

Find the section responsible for login (search for loginForm.addEventListener):

// In app.js
try {
    // Here happens the "fake" request. 
    // REPLACE THIS with a real request, e.g., using fetch():
    
    /* REAL CODE EXAMPLE:
    const response = await fetch(`${CONFIG.API_BASE_URL}/login`, {
        method: 'POST',
        headers: { 'Content-Type': 'application/json' },
        body: JSON.stringify({ email: emailInput.value, password: passwordInput.value })
    });
    
    if (!response.ok) throw new Error('Login failed');
    const data = await response.json();
    
    // Save token and redirect
    localStorage.setItem('token', data.token);
    window.location.href = '/dashboard.html'; // Redirect on success
    */

    // ... rest of error handling code ...
}

Do the same for registration (registerForm.addEventListener).

🎨 Step 3: Customizing Appearance

You can easily change colors by editing the variables at the beginning of the style.css file:

:root {
    --primary-color: #4f46e5; /* Main button color */
    --primary-hover: #4338ca; /* Hover color */
    /* ... other variables */
}

🌍 Step 4: Adding Languages

To add a new language or change texts, edit the lang.js file. Simply add a new key (e.g., de for German) and translate the phrases.

Good luck! 🚀