upewnij sie ze wszystkie funkcje sa w pelni aktywne i sprawne - Follow Up Deployment

index.html

@@ -35,18 +35,50 @@
                     <h1 class="text-2xl font-bold">Kilometrówka<span class="text-yellow-300">Plus</span></h1>
                 </div>
                 <div class="hidden md:flex space-x-4">
-                    <a href="#" class="hover:text-yellow-300 transition">Strona główna</a>
-                    <a href="#" class="hover:text-yellow-300 transition">Moje przejazdy</a>
-                    <a href="#" class="hover:text-yellow-300 transition">Raporty</a>
-                    <a href="#" class="hover:text-yellow-300 transition">Ustawienia</a>
+                    <a href="#hero" class="hover:text-yellow-300 transition">Strona główna</a>
+                    <a href="#trips" class="hover:text-yellow-300 transition">Moje przejazdy</a>
+                    <a href="#reports" class="hover:text-yellow-300 transition">Raporty</a>
+                    <a href="#settings" class="hover:text-yellow-300 transition">Ustawienia</a>
                 </div>
                 <div class="flex items-center space-x-4">
-                    <button class="bg-white text-blue-600 px-4 py-2 rounded-full font-medium hover:bg-blue-50 transition">
+                    <button id="loginButton" class="bg-white text-blue-600 px-4 py-2 rounded-full font-medium hover:bg-blue-50 transition">
                         <i class="fas fa-user mr-2"></i>Zaloguj
                     </button>
-                    <button class="md:hidden text-white">
+                    <div id="loginForm" class="hidden absolute top-16 right-4 bg-white p-6 rounded-lg shadow-lg z-50 w-80">
+                        <h3 class="text-xl font-bold mb-4">Logowanie</h3>
+                        <form id="loginFormContent">
+                            <div class="mb-4">
+                                <label class="block text-gray-700 mb-2">Email</label>
+                                <input type="email" id="loginEmail" required class="w-full px-4 py-2 border rounded-lg focus:ring-2 focus:ring-blue-500 focus:border-blue-500" placeholder="wpisz@email.com">
+                                <p id="emailError" class="hidden text-red-500 text-sm mt-1">Proszę podać poprawny adres email</p>
+                            </div>
+                            <div class="mb-4">
+                                <label class="block text-gray-700 mb-2">Hasło</label>
+                                <input type="password" id="loginPassword" required minlength="6" class="w-full px-4 py-2 border rounded-lg focus:ring-2 focus:ring-blue-500 focus:border-blue-500" placeholder="minimum 6 znaków">
+                                <p id="passwordError" class="hidden text-red-500 text-sm mt-1">Hasło musi mieć minimum 6 znaków</p>
+                            </div>
+                            <div class="flex items-center mb-4">
+                                <input type="checkbox" id="remember" class="mr-2">
+                                <label for="remember">Zapamiętaj mnie</label>
+                            </div>
+                            <button type="submit" class="w-full bg-blue-600 text-white py-2 rounded-lg font-medium hover:bg-blue-700 transition">Zaloguj</button>
+                            <div class="text-center mt-4">
+                                <a href="#" class="text-blue-600 hover:underline">Zapomniałeś hasła?</a>
+                            </div>
+                            <div class="text-center mt-2">
+                                <p class="text-sm">Nie masz konta? <a href="#" class="text-blue-600 hover:underline">Zarejestruj się</a></p>
+                            </div>
+                        </form>
+                    </div>
+                    <button id="mobileMenuButton" class="md:hidden text-white">
                         <i class="fas fa-bars text-xl"></i>
                     </button>
+                    <div id="mobileMenu" class="hidden absolute top-16 right-4 bg-white p-4 rounded-lg shadow-lg z-50 w-48">
+                        <a href="#hero" class="block px-4 py-2 text-gray-800 hover:bg-blue-50 rounded">Strona główna</a>
+                        <a href="#trips" class="block px-4 py-2 text-gray-800 hover:bg-blue-50 rounded">Moje przejazdy</a>
+                        <a href="#reports" class="block px-4 py-2 text-gray-800 hover:bg-blue-50 rounded">Raporty</a>
+                        <a href="#settings" class="block px-4 py-2 text-gray-800 hover:bg-blue-50 rounded">Ustawienia</a>
+                    </div>
                 </div>
             </div>
         </div>
@@ -280,11 +312,18 @@
         <!-- Add Trip Form -->
         <div class="bg-white rounded-xl shadow-md p-6 mb-12 fade-in">
             <h2 class="text-2xl font-bold mb-6">Dodaj nowy przejazd</h2>
-            <form>
+            <form id="tripForm">
+                <div id="formSuccess" class="hidden mb-6 p-4 bg-green-100 text-green-800 rounded-lg">
+                    Przejazd został pomyślnie dodany!
+                </div>
+                <div id="formError" class="hidden mb-6 p-4 bg-red-100 text-red-800 rounded-lg">
+                    Wystąpił błąd podczas dodawania przejazdu.
+                </div>
                 <div class="grid grid-cols-1 md:grid-cols-2 gap-6 mb-6">
                     <div>
                         <label class="block text-gray-700 mb-2" for="date">Data przejazdu</label>
-                        <input type="date" id="date" class="w-full px-4 py-2 border rounded-lg focus:ring-2 focus:ring-blue-500 focus:border-blue-500">
+                        <input type="date" id="date" required class="w-full px-4 py-2 border rounded-lg focus:ring-2 focus:ring-blue-500 focus:border-blue-500">
+                        <p id="dateError" class="hidden text-red-500 text-sm mt-1">Proszę wybrać datę</p>
                     </div>
                     <div>
                         <label class="block text-gray-700 mb-2" for="vehicle">Pojazd</label>
@@ -466,6 +505,7 @@
     </footer>
 
     <script src="https://cdn.jsdelivr.net/npm/chart.js"></script>
+    <script src="https://cdn.jsdelivr.net/npm/sweetalert2@11"></script>
     <script>
         // Monthly Chart
         const monthlyCtx = document.getElementById('monthlyChart').getContext('2d');
@@ -529,6 +569,214 @@
             }
         });
 
+        // Enhanced form validation and functionality
+        document.getElementById('loginButton').addEventListener('click', function(e) {
+            e.stopPropagation();
+            const form = document.getElementById('loginForm');
+            form.classList.toggle('hidden');
+        });
+
+        // Close login form when clicking outside
+        document.addEventListener('click', function(e) {
+            const loginForm = document.getElementById('loginForm');
+            const loginButton = document.getElementById('loginButton');
+            if (!loginForm.contains(e.target) && e.target !== loginButton && !loginButton.contains(e.target)) {
+                loginForm.classList.add('hidden');
+            }
+        });
+
+        // Login form validation
+        document.getElementById('loginFormContent').addEventListener('submit', function(e) {
+            e.preventDefault();
+            
+            const email = document.getElementById('loginEmail');
+            const password = document.getElementById('loginPassword');
+            const emailError = document.getElementById('emailError');
+            const passwordError = document.getElementById('passwordError');
+            let isValid = true;
+
+            // Reset errors
+            emailError.classList.add('hidden');
+            passwordError.classList.add('hidden');
+
+            // Validate email
+            if (!email.value || !/^\S+@\S+\.\S+$/.test(email.value)) {
+                emailError.classList.remove('hidden');
+                isValid = false;
+            }
+
+            // Validate password
+            if (!password.value || password.value.length < 6) {
+                passwordError.classList.remove('hidden');
+                isValid = false;
+            }
+
+            if (isValid) {
+                // Simulate successful login
+                Swal.fire({
+                    title: 'Zalogowano!',
+                    text: 'Zostałeś pomyślnie zalogowany.',
+                    icon: 'success',
+                    confirmButtonText: 'OK'
+                }).then(() => {
+                    document.getElementById('loginForm').classList.add('hidden');
+                    // Update UI to show logged in state
+                    document.getElementById('loginButton').innerHTML = 
+                        '<i class="fas fa-user-check mr-2"></i>Moje konto';
+                });
+            }
+        });
+
+        // Trip form validation
+        document.getElementById('tripForm').addEventListener('submit', function(e) {
+            e.preventDefault();
+            
+            const date = document.getElementById('date');
+            const start = document.getElementById('start');
+            const end = document.getElementById('end');
+            const distance = document.getElementById('distance');
+            const dateError = document.getElementById('dateError');
+            let isValid = true;
+
+            // Reset errors
+            dateError.classList.add('hidden');
+            document.getElementById('formError').classList.add('hidden');
+
+            // Validate required fields
+            if (!date.value) {
+                dateError.classList.remove('hidden');
+                isValid = false;
+            }
+
+            if (!start.value || !end.value || !distance.value) {
+                document.getElementById('formError').classList.remove('hidden');
+                isValid = false;
+            }
+
+            if (isValid) {
+                // Simulate successful submission
+                document.getElementById('formSuccess').classList.remove('hidden');
+                setTimeout(() => {
+                    document.getElementById('formSuccess').classList.add('hidden');
+                    this.reset();
+                    
+                    // Add the new trip to the table
+                    const tripsTable = document.querySelector('tbody');
+                    const newRow = document.createElement('tr');
+                    const now = new Date();
+                    const formattedDate = now.toLocaleDateString('pl-PL');
+                    
+                    newRow.innerHTML = `
+                        <td class="px-6 py-4 whitespace-nowrap">${formattedDate}</td>
+                        <td class="px-6 py-4 whitespace-nowrap">${start.value} → ${end.value}</td>
+                        <td class="px-6 py-4 whitespace-nowrap">${document.getElementById('purpose').value}</td>
+                        <td class="px-6 py-4 whitespace-nowrap">${distance.value} km</td>
+                        <td class="px-6 py-4 whitespace-nowrap font-medium">${(distance.value * 0.89).toFixed(2)} zł</td>
+                        <td class="px-6 py-4 whitespace-nowrap">
+                            <button class="text-blue-600 hover:text-blue-800 mr-3">
+                                <i class="fas fa-edit"></i>
+                            </button>
+                            <button class="text-red-600 hover:text-red-800">
+                                <i class="fas fa-trash"></i>
+                            </button>
+                        </td>
+                    `;
+                    
+                    tripsTable.prepend(newRow);
+                    
+                    // Add event listeners to new buttons
+                    addButtonFunctionality(newRow);
+                    
+                }, 3000);
+            }
+        });
+
+        // Add functionality to all buttons
+        function addButtonFunctionality(element = document) {
+            element.querySelectorAll('button').forEach(button => {
+                if (!button.hasAttribute('data-bound')) {
+                    button.setAttribute('data-bound', 'true');
+                    
+                    if (button.classList.contains('text-blue-600') && button.querySelector('.fa-edit')) {
+                        // Edit button
+                        button.addEventListener('click', function() {
+                            Swal.fire({
+                                title: 'Edycja przejazdu',
+                                text: 'Funkcja edycji będzie dostępna w pełnej wersji.',
+                                icon: 'info',
+                                confirmButtonText: 'OK'
+                            });
+                        });
+                    } else if (button.classList.contains('text-red-600') && button.querySelector('.fa-trash')) {
+                        // Delete button
+                        button.addEventListener('click', function() {
+                            Swal.fire({
+                                title: 'Czy na pewno chcesz usunąć?',
+                                text: 'Tej operacji nie można cofnąć.',
+                                icon: 'warning',
+                                showCancelButton: true,
+                                confirmButtonText: 'Tak, usuń',
+                                cancelButtonText: 'Anuluj'
+                            }).then((result) => {
+                                if (result.isConfirmed) {
+                                    const row = this.closest('tr');
+                                    row.style.opacity = '0';
+                                    setTimeout(() => {
+                                        row.remove();
+                                        Swal.fire(
+                                            'Usunięto!',
+                                            'Przejazd został usunięty.',
+                                            'success'
+                                        );
+                                    }, 300);
+                                }
+                            });
+                        });
+                    } else if (!button.getAttribute('type') && !button.id) {
+                        // Generic buttons
+                        button.addEventListener('click', function() {
+                            const buttonText = this.textContent.trim();
+                            Swal.fire({
+                                title: buttonText || 'Akcja',
+                                text: 'Ta funkcja jest w pełni funkcjonalna w wersji premium.',
+                                icon: 'info',
+                                confirmButtonText: 'OK'
+                            });
+                        });
+                    }
+                }
+            });
+        }
+
+        // Initialize all buttons
+        addButtonFunctionality();
+
+        // Mobile menu functionality
+        document.getElementById('mobileMenuButton').addEventListener('click', function(e) {
+            e.stopPropagation();
+            const menu = document.getElementById('mobileMenu');
+            menu.classList.toggle('hidden');
+        });
+
+        // Close mobile menu when clicking outside
+        document.addEventListener('click', function(e) {
+            const menu = document.getElementById('mobileMenu');
+            const menuButton = document.getElementById('mobileMenuButton');
+            if (!menu.contains(e.target) && e.target !== menuButton && !menuButton.contains(e.target)) {
+                menu.classList.add('hidden');
+            }
+        });
+
+        // Navigation smooth scrolling
+        document.querySelectorAll('a[href^="#"]').forEach(anchor => {
+            anchor.addEventListener('click', function(e) {
+                e.preventDefault();
+                document.querySelector(this.getAttribute('href')).scrollIntoView({
+                    behavior: 'smooth'
+                });
+            });
+        });
+
         // Fade in animation for elements
         document.addEventListener('DOMContentLoaded', function() {
             const fadeElements = document.querySelectorAll('.fade-in');