init commit

.history/public/js/calculator_20251019182338.js

@@ -0,0 +1,380 @@
+// Calculator Logic
+class ProjectCalculator {
+    constructor() {
+        this.selectedServices = [];
+        this.selectedComplexity = null;
+        this.selectedTimeline = null;
+        this.currentStep = 1;
+        this.totalSteps = 3;
+        
+        this.init();
+    }
+    
+    init() {
+        this.setupEventListeners();
+        this.updateProgressBar();
+    }
+    
+    setupEventListeners() {
+        // Service selection
+        document.querySelectorAll('.service-option').forEach(option => {
+            option.addEventListener('click', (e) => this.handleServiceSelection(e));
+        });
+        
+        // Complexity selection
+        document.querySelectorAll('.complexity-option').forEach(option => {
+            option.addEventListener('click', (e) => this.handleComplexitySelection(e));
+        });
+        
+        // Timeline selection
+        document.querySelectorAll('.timeline-option').forEach(option => {
+            option.addEventListener('click', (e) => this.handleTimelineSelection(e));
+        });
+        
+        // Navigation buttons
+        document.querySelectorAll('.next-step').forEach(btn => {
+            btn.addEventListener('click', () => this.nextStep());
+        });
+        
+        document.querySelectorAll('.prev-step').forEach(btn => {
+            btn.addEventListener('click', () => this.prevStep());
+        });
+        
+        // Restart button
+        const restartBtn = document.querySelector('.restart-calculator');
+        if (restartBtn) {
+            restartBtn.addEventListener('click', () => this.restart());
+        }
+    }
+    
+    handleServiceSelection(e) {
+        const option = e.currentTarget;
+        const service = option.dataset.service;
+        const price = parseInt(option.dataset.basePrice);
+        
+        option.classList.toggle('selected');
+        
+        if (option.classList.contains('selected')) {
+            this.selectedServices.push({ service, price });
+            this.animateSelection(option, true);
+        } else {
+            this.selectedServices = this.selectedServices.filter(s => s.service !== service);
+            this.animateSelection(option, false);
+        }
+        
+        this.updateStepButton();
+    }
+    
+    handleComplexitySelection(e) {
+        const option = e.currentTarget;
+        
+        // Clear previous selections
+        document.querySelectorAll('.complexity-option').forEach(opt => {
+            opt.classList.remove('selected');
+            this.animateSelection(opt, false);
+        });
+        
+        // Select current option
+        option.classList.add('selected');
+        this.animateSelection(option, true);
+        
+        this.selectedComplexity = {
+            value: option.dataset.value,
+            multiplier: parseFloat(option.dataset.multiplier)
+        };
+        
+        this.updateStepButton();
+    }
+    
+    handleTimelineSelection(e) {
+        const option = e.currentTarget;
+        
+        // Clear previous selections
+        document.querySelectorAll('.timeline-option').forEach(opt => {
+            opt.classList.remove('selected');
+            this.animateSelection(opt, false);
+        });
+        
+        // Select current option
+        option.classList.add('selected');
+        this.animateSelection(option, true);
+        
+        this.selectedTimeline = {
+            value: option.dataset.value,
+            multiplier: parseFloat(option.dataset.multiplier)
+        };
+        
+        this.updateStepButton();
+    }
+    
+    animateSelection(element, selected) {
+        if (selected) {
+            element.style.borderColor = '#3B82F6';
+            element.style.backgroundColor = '#EBF8FF';
+            element.style.transform = 'translateY(-2px)';
+            element.style.boxShadow = '0 8px 25px rgba(59, 130, 246, 0.15)';
+        } else {
+            element.style.borderColor = '';
+            element.style.backgroundColor = '';
+            element.style.transform = '';
+            element.style.boxShadow = '';
+        }
+    }
+    
+    updateStepButton() {
+        const step1Button = document.querySelector('#step-1 .next-step');
+        const step2Button = document.querySelector('#step-2 .next-step');
+        
+        if (step1Button) {
+            step1Button.disabled = this.selectedServices.length === 0;
+            step1Button.style.opacity = this.selectedServices.length > 0 ? '1' : '0.6';
+        }
+        
+        if (step2Button) {
+            const isValid = this.selectedComplexity && this.selectedTimeline;
+            step2Button.disabled = !isValid;
+            step2Button.style.opacity = isValid ? '1' : '0.6';
+        }
+    }
+    
+    updateProgressBar() {
+        const progressBar = document.querySelector('.calculator-progress-bar');
+        if (progressBar) {
+            const progress = (this.currentStep / this.totalSteps) * 100;
+            progressBar.style.width = `${progress}%`;
+            progressBar.className = `calculator-progress-bar step-${this.currentStep}`;
+        }
+    }
+    
+    nextStep() {
+        if (this.currentStep >= this.totalSteps) return;
+        
+        const currentStepElement = document.querySelector('.calculator-step.active');
+        const nextStepElement = currentStepElement.nextElementSibling;
+        
+        if (nextStepElement && nextStepElement.classList.contains('calculator-step')) {
+            // Animate out current step
+            currentStepElement.style.opacity = '0';
+            currentStepElement.style.transform = 'translateX(-20px)';
+            
+            setTimeout(() => {
+                currentStepElement.classList.remove('active');
+                currentStepElement.style.display = 'none';
+                
+                // Animate in next step
+                nextStepElement.classList.add('active');
+                nextStepElement.style.display = 'block';
+                nextStepElement.style.opacity = '0';
+                nextStepElement.style.transform = 'translateX(20px)';
+                
+                setTimeout(() => {
+                    nextStepElement.style.opacity = '1';
+                    nextStepElement.style.transform = 'translateX(0)';
+                }, 50);
+                
+                this.currentStep++;
+                this.updateProgressBar();
+                
+                if (this.currentStep === 3) {
+                    setTimeout(() => this.calculateFinalPrice(), 300);
+                }
+            }, 200);
+        }
+    }
+    
+    prevStep() {
+        if (this.currentStep <= 1) return;
+        
+        const currentStepElement = document.querySelector('.calculator-step.active');
+        const prevStepElement = currentStepElement.previousElementSibling;
+        
+        if (prevStepElement && prevStepElement.classList.contains('calculator-step')) {
+            // Animate out current step
+            currentStepElement.style.opacity = '0';
+            currentStepElement.style.transform = 'translateX(20px)';
+            
+            setTimeout(() => {
+                currentStepElement.classList.remove('active');
+                currentStepElement.style.display = 'none';
+                
+                // Animate in previous step
+                prevStepElement.classList.add('active');
+                prevStepElement.style.display = 'block';
+                prevStepElement.style.opacity = '0';
+                prevStepElement.style.transform = 'translateX(-20px)';
+                
+                setTimeout(() => {
+                    prevStepElement.style.opacity = '1';
+                    prevStepElement.style.transform = 'translateX(0)';
+                }, 50);
+                
+                this.currentStep--;
+                this.updateProgressBar();
+            }, 200);
+        }
+    }
+    
+    calculateFinalPrice() {
+        let total = 0;
+        
+        // Calculate base price from services
+        this.selectedServices.forEach(service => {
+            total += service.price;
+        });
+        
+        // Apply complexity multiplier
+        if (this.selectedComplexity) {
+            total *= this.selectedComplexity.multiplier;
+        }
+        
+        // Apply timeline multiplier
+        if (this.selectedTimeline) {
+            total *= this.selectedTimeline.multiplier;
+        }
+        
+        // Animate price reveal
+        const priceElement = document.getElementById('final-price');
+        if (priceElement) {
+            priceElement.style.opacity = '0';
+            priceElement.style.transform = 'scale(0.8)';
+            
+            setTimeout(() => {
+                priceElement.textContent = '₩' + total.toLocaleString();
+                priceElement.style.opacity = '1';
+                priceElement.style.transform = 'scale(1)';
+            }, 300);
+        }
+        
+        // Generate summary
+        setTimeout(() => this.generateSummary(total), 600);
+    }
+    
+    generateSummary(total) {
+        const summary = document.getElementById('project-summary');
+        if (!summary) return;
+        
+        let summaryHTML = '';
+        
+        // Services
+        summaryHTML += '<div class="mb-4"><strong>Selected Services:</strong></div>';
+        this.selectedServices.forEach(service => {
+            summaryHTML += `<div class="ml-4 mb-2 flex items-center">
+                <i class="fas fa-check-circle text-green-500 mr-2"></i>
+                ${this.getServiceName(service.service)} 
+                <span class="ml-auto font-semibold">₩${service.price.toLocaleString()}</span>
+            </div>`;
+        });
+        
+        // Complexity
+        if (this.selectedComplexity) {
+            summaryHTML += `<div class="mt-4 mb-2 flex items-center">
+                <i class="fas fa-layer-group text-blue-500 mr-2"></i>
+                <strong>Complexity:</strong> 
+                <span class="ml-2">${this.getComplexityName(this.selectedComplexity.value)}</span>
+                <span class="ml-auto text-sm text-gray-500">×${this.selectedComplexity.multiplier}</span>
+            </div>`;
+        }
+        
+        // Timeline
+        if (this.selectedTimeline) {
+            summaryHTML += `<div class="mb-2 flex items-center">
+                <i class="fas fa-clock text-purple-500 mr-2"></i>
+                <strong>Timeline:</strong> 
+                <span class="ml-2">${this.getTimelineName(this.selectedTimeline.value)}</span>
+                <span class="ml-auto text-sm text-gray-500">×${this.selectedTimeline.multiplier}</span>
+            </div>`;
+        }
+        
+        // Animate summary appearance
+        summary.style.opacity = '0';
+        summary.innerHTML = summaryHTML;
+        
+        setTimeout(() => {
+            summary.style.opacity = '1';
+        }, 200);
+    }
+    
+    getServiceName(service) {
+        if (window.calculatorTranslations && window.calculatorTranslations.services) {
+            return window.calculatorTranslations.services[service] || service;
+        }
+        
+        const names = {
+            web: 'Web Development',
+            mobile: 'Mobile App',
+            design: 'UI/UX Design',
+            marketing: 'Digital Marketing'
+        };
+        return names[service] || service;
+    }
+    
+    getComplexityName(complexity) {
+        if (window.calculatorTranslations && window.calculatorTranslations.complexity) {
+            return window.calculatorTranslations.complexity[complexity] || complexity;
+        }
+        
+        const names = {
+            simple: 'Simple',
+            medium: 'Medium',
+            complex: 'Complex'
+        };
+        return names[complexity] || complexity;
+    }
+    
+    getTimelineName(timeline) {
+        if (window.calculatorTranslations && window.calculatorTranslations.timeline) {
+            return window.calculatorTranslations.timeline[timeline] || timeline;
+        }
+        
+        const names = {
+            standard: 'Standard',
+            rush: 'Rush',
+            extended: 'Extended'
+        };
+        return names[timeline] || timeline;
+    }
+    
+    restart() {
+        // Reset all selections
+        this.selectedServices = [];
+        this.selectedComplexity = null;
+        this.selectedTimeline = null;
+        this.currentStep = 1;
+        
+        // Reset UI
+        document.querySelectorAll('.service-option, .complexity-option, .timeline-option').forEach(opt => {
+            opt.classList.remove('selected');
+            this.animateSelection(opt, false);
+        });
+        
+        // Reset steps
+        document.querySelectorAll('.calculator-step').forEach(step => {
+            step.classList.remove('active');
+            step.style.display = 'none';
+            step.style.opacity = '1';
+            step.style.transform = 'translateX(0)';
+        });
+        
+        // Show first step
+        const firstStep = document.getElementById('step-1');
+        if (firstStep) {
+            firstStep.classList.add('active');
+            firstStep.style.display = 'block';
+        }
+        
+        this.updateProgressBar();
+        this.updateStepButton();
+    }
+}
+
+// Initialize calculator when DOM is loaded
+document.addEventListener('DOMContentLoaded', function() {
+    // Theme initialization
+    const theme = localStorage.getItem('theme') || 'light';
+    document.documentElement.className = theme === 'dark' ? 'dark' : '';
+    
+    // Initialize calculator
+    if (document.querySelector('.calculator-step')) {
+        new ProjectCalculator();
+    }
+});