add first mockup

2025-12-26 23:13:35 +01:00
parent 0be01758e3
commit 0357cf2eb7
19 changed files with 3599 additions and 0 deletions
--- a/main.js
+++ b/main.js
@@ -0,0 +1,97 @@
+// Global Application Interactions
+
+document.addEventListener('DOMContentLoaded', () => {
+    // Initialize Lucide Icons
+    if (window.lucide) {
+        window.lucide.createIcons();
+    }
+
+    // Modal Handling
+    const modalOverlays = document.querySelectorAll('.modal-overlay');
+    
+    // Function to open modal
+    window.openModal = (modalId) => {
+        const modal = document.getElementById(modalId);
+        if (modal) {
+            modal.classList.add('active');
+            document.body.style.overflow = 'hidden';
+        }
+    };
+
+    // Function to close modal
+    window.closeModal = (modalId) => {
+        const modal = document.getElementById(modalId);
+        if (modal) {
+            modal.classList.remove('active');
+            document.body.style.overflow = '';
+        }
+    };
+
+    // Close modal on overlay click
+    modalOverlays.forEach(overlay => {
+        overlay.addEventListener('click', (e) => {
+            if (e.target === overlay) {
+                closeModal(overlay.id);
+            }
+        });
+    });
+
+    // Close modal on Escape key
+    document.addEventListener('keydown', (e) => {
+        if (e.key === 'Escape') {
+            const activeModal = document.querySelector('.modal-overlay.active');
+            if (activeModal) {
+                closeModal(activeModal.id);
+            }
+        }
+    });
+
+    // Simple Form Submission Simulation
+    const forms = document.querySelectorAll('form');
+    forms.forEach(form => {
+        // Skip login/register forms which already have actions
+        if (form.action.includes('.html')) return;
+
+        form.addEventListener('submit', (e) => {
+            e.preventDefault();
+            const submitBtn = form.querySelector('button[type="submit"]');
+            const originalContent = submitBtn.innerHTML;
+            
+            // Show loading state
+            submitBtn.disabled = true;
+            submitBtn.innerHTML = `
+                <div class="flex items-center gap-2">
+                    <svg class="animate-spin h-5 w-5 text-current" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24">
+                        <circle class="opacity-25" cx="12" cy="12" r="10" stroke="currentColor" stroke-width="4"></circle>
+                        <path class="opacity-75" fill="currentColor" d="M4 12a8 8 0 018-8V0C5.373 0 0 5.373 0 12h4zm2 5.291A7.962 7.962 0 014 12H0c0 3.042 1.135 5.824 3 7.938l3-2.647z"></path>
+                    </svg>
+                    Przetwarzanie...
+                </div>
+            `;
+
+            setTimeout(() => {
+                // Success state
+                submitBtn.innerHTML = `
+                    <div class="flex items-center gap-2">
+                        <i data-lucide="check-circle" class="w-5 h-5"></i>
+                        Gotowe!
+                    </div>
+                `;
+                if (window.lucide) window.lucide.createIcons();
+                
+                setTimeout(() => {
+                    const activeModal = document.querySelector('.modal-overlay.active');
+                    if (activeModal) closeModal(activeModal.id);
+                    
+                    // Reset button
+                    submitBtn.disabled = false;
+                    submitBtn.innerHTML = originalContent;
+                    form.reset();
+                    if (window.lucide) window.lucide.createIcons();
+                    
+                    // Custom notification could be added here
+                }, 1000);
+            }, 1000);
+        });
+    });
+});