302 lines
21 KiB
Plaintext
302 lines
21 KiB
Plaintext
<!DOCTYPE html>
|
|
<html lang="<%= locale %>" class="<%= theme === 'dark' ? 'dark' : '' %>">
|
|
<head>
|
|
<meta charset="UTF-8">
|
|
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
|
<title><%- __('calculator.meta.title') %> - SmartSolTech</title>
|
|
|
|
<!-- SEO Meta Tags -->
|
|
<meta name="description" content="<%- __('calculator.meta.description') %>">
|
|
|
|
<!-- Styles -->
|
|
<link href="https://cdn.jsdelivr.net/npm/tailwindcss@2.2.19/dist/tailwind.min.css" rel="stylesheet">
|
|
<link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css" rel="stylesheet">
|
|
<link href="/css/main.css" rel="stylesheet">
|
|
<link href="/css/fixes.css" rel="stylesheet">
|
|
<link href="/css/dark-theme.css" rel="stylesheet">
|
|
</head>
|
|
<body class="font-sans dark:bg-gray-900 dark:text-gray-100">
|
|
<%- include('partials/navigation') %>
|
|
|
|
<!-- Calculator Header -->
|
|
<section class="relative bg-gradient-to-r from-blue-600 to-purple-600 dark:from-blue-800 dark:to-purple-800 py-20 mt-16 hero-section">
|
|
<div class="absolute inset-0 bg-black opacity-20"></div>
|
|
<div class="relative max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 text-center">
|
|
<h1 class="text-4xl md:text-5xl font-bold text-white mb-4">
|
|
<%- __('calculator.title') %>
|
|
</h1>
|
|
<p class="text-xl text-blue-100 max-w-3xl mx-auto">
|
|
<%- __('calculator.subtitle') %>
|
|
</p>
|
|
</div>
|
|
</section>
|
|
|
|
<!-- Calculator Form -->
|
|
<section class="py-16 bg-gray-50 dark:bg-gray-800">
|
|
<div class="max-w-5xl mx-auto px-4 sm:px-6 lg:px-8">
|
|
<div class="bg-white dark:bg-gray-900 rounded-3xl shadow-2xl overflow-hidden">
|
|
<div class="p-8 md:p-12">
|
|
<!-- Progress Bar -->
|
|
<div class="calculator-progress mb-8">
|
|
<div class="calculator-progress-bar step-1"></div>
|
|
</div>
|
|
|
|
<form id="calculator-form">
|
|
<!-- Step 1: Service Selection -->
|
|
<div class="calculator-step active" id="step-1">
|
|
<div class="text-center mb-8">
|
|
<h2 class="text-3xl font-bold text-gray-900 dark:text-white mb-4">
|
|
<%- __('calculator.step1.title') %>
|
|
</h2>
|
|
<p class="text-gray-600 dark:text-gray-300">
|
|
<%- __('calculator.step1.subtitle') %>
|
|
</p>
|
|
</div>
|
|
|
|
<div class="grid grid-cols-1 md:grid-cols-2 gap-6" id="services-grid">
|
|
<!-- Web Development -->
|
|
<div class="service-option p-6 border-2 border-gray-200 dark:border-gray-600 rounded-xl cursor-pointer hover:border-blue-500 dark:hover:border-blue-400 transition-all bg-gray-50 dark:bg-gray-800" data-service="web" data-base-price="500000">
|
|
<div class="flex items-center mb-4">
|
|
<div class="w-12 h-12 bg-blue-100 dark:bg-blue-900 rounded-lg flex items-center justify-center mr-4">
|
|
<i class="fas fa-code text-blue-600 dark:text-blue-400 text-xl"></i>
|
|
</div>
|
|
<div>
|
|
<h3 class="text-lg font-semibold text-gray-900 dark:text-white">
|
|
<%- __('services.web.title') %>
|
|
</h3>
|
|
<div class="text-blue-600 dark:text-blue-400 font-bold"><%- __('services.web.price') %></div>
|
|
</div>
|
|
</div>
|
|
<p class="text-gray-600 dark:text-gray-300 text-sm">
|
|
<%- __('services.web.description') %>
|
|
</p>
|
|
</div>
|
|
|
|
<!-- Mobile App -->
|
|
<div class="service-option p-6 border-2 border-gray-200 dark:border-gray-600 rounded-xl cursor-pointer hover:border-blue-500 dark:hover:border-blue-400 transition-all bg-gray-50 dark:bg-gray-800" data-service="mobile" data-base-price="800000">
|
|
<div class="flex items-center mb-4">
|
|
<div class="w-12 h-12 bg-green-100 dark:bg-green-900 rounded-lg flex items-center justify-center mr-4">
|
|
<i class="fas fa-mobile-alt text-green-600 dark:text-green-400 text-xl"></i>
|
|
</div>
|
|
<div>
|
|
<h3 class="text-lg font-semibold text-gray-900 dark:text-white">
|
|
<%- __('services.mobile.title') %>
|
|
</h3>
|
|
<div class="text-green-600 dark:text-green-400 font-bold"><%- __('services.mobile.price') %></div>
|
|
</div>
|
|
</div>
|
|
<p class="text-gray-600 dark:text-gray-300 text-sm">
|
|
<%- __('services.mobile.description') %>
|
|
</p>
|
|
</div>
|
|
|
|
<!-- UI/UX Design -->
|
|
<div class="service-option p-6 border-2 border-gray-200 dark:border-gray-600 rounded-xl cursor-pointer hover:border-blue-500 dark:hover:border-blue-400 transition-all bg-gray-50 dark:bg-gray-800" data-service="design" data-base-price="300000">
|
|
<div class="flex items-center mb-4">
|
|
<div class="w-12 h-12 bg-purple-100 dark:bg-purple-900 rounded-lg flex items-center justify-center mr-4">
|
|
<i class="fas fa-palette text-purple-600 dark:text-purple-400 text-xl"></i>
|
|
</div>
|
|
<div>
|
|
<h3 class="text-lg font-semibold text-gray-900 dark:text-white">
|
|
<%- __('services.design.title') %>
|
|
</h3>
|
|
<div class="text-purple-600 dark:text-purple-400 font-bold"><%- __('services.design.price') %></div>
|
|
</div>
|
|
</div>
|
|
<p class="text-gray-600 dark:text-gray-300 text-sm">
|
|
<%- __('services.design.description') %>
|
|
</p>
|
|
</div>
|
|
|
|
<!-- Digital Marketing -->
|
|
<div class="service-option p-6 border-2 border-gray-200 dark:border-gray-600 rounded-xl cursor-pointer hover:border-blue-500 dark:hover:border-blue-400 transition-all bg-gray-50 dark:bg-gray-800" data-service="marketing" data-base-price="200000">
|
|
<div class="flex items-center mb-4">
|
|
<div class="w-12 h-12 bg-yellow-100 dark:bg-yellow-900 rounded-lg flex items-center justify-center mr-4">
|
|
<i class="fas fa-chart-line text-yellow-600 dark:text-yellow-400 text-xl"></i>
|
|
</div>
|
|
<div>
|
|
<h3 class="text-lg font-semibold text-gray-900 dark:text-white">
|
|
<%- __('services.marketing.title') %>
|
|
</h3>
|
|
<div class="text-yellow-600 dark:text-yellow-400 font-bold"><%- __('services.marketing.price') %></div>
|
|
</div>
|
|
</div>
|
|
<p class="text-gray-600 dark:text-gray-300 text-sm">
|
|
<%- __('services.marketing.description') %>
|
|
</p>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="text-center mt-8">
|
|
<button type="button" class="next-step bg-blue-600 dark:bg-blue-500 text-white px-8 py-3 rounded-lg font-semibold hover:bg-blue-700 dark:hover:bg-blue-400 transition-colors disabled:bg-gray-300 disabled:cursor-not-allowed" disabled>
|
|
<%- __('calculator.next_step') %>
|
|
</button>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Step 2: Project Details -->
|
|
<div class="calculator-step" id="step-2" style="display: none;">
|
|
<div class="text-center mb-8">
|
|
<h2 class="text-3xl font-bold text-gray-900 dark:text-white mb-4">
|
|
<%- __('calculator.step2.title') %>
|
|
</h2>
|
|
<p class="text-gray-600 dark:text-gray-300">
|
|
<%- __('calculator.step2.subtitle') %>
|
|
</p>
|
|
</div>
|
|
|
|
<div class="space-y-8">
|
|
<!-- Project Complexity -->
|
|
<div>
|
|
<label class="block text-lg font-semibold text-gray-900 dark:text-white mb-4">
|
|
<%- __('calculator.complexity.title') %>
|
|
</label>
|
|
<div class="grid grid-cols-1 md:grid-cols-3 gap-4">
|
|
<div class="complexity-option p-4 border-2 border-gray-200 dark:border-gray-600 rounded-lg cursor-pointer hover:border-blue-500 dark:hover:border-blue-400 transition-colors bg-gray-50 dark:bg-gray-800" data-value="simple" data-multiplier="1">
|
|
<div class="text-center">
|
|
<div class="text-2xl mb-2">🟢</div>
|
|
<h4 class="font-semibold text-gray-900 dark:text-white"><%- __('calculator.complexity.simple') %></h4>
|
|
<p class="text-sm text-gray-600 dark:text-gray-300 mt-2"><%- __('calculator.complexity.simple_desc') %></p>
|
|
</div>
|
|
</div>
|
|
<div class="complexity-option p-4 border-2 border-gray-200 dark:border-gray-600 rounded-lg cursor-pointer hover:border-blue-500 dark:hover:border-blue-400 transition-colors bg-gray-50 dark:bg-gray-800" data-value="medium" data-multiplier="1.5">
|
|
<div class="text-center">
|
|
<div class="text-2xl mb-2">🟡</div>
|
|
<h4 class="font-semibold text-gray-900 dark:text-white"><%- __('calculator.complexity.medium') %></h4>
|
|
<p class="text-sm text-gray-600 dark:text-gray-300 mt-2"><%- __('calculator.complexity.medium_desc') %></p>
|
|
</div>
|
|
</div>
|
|
<div class="complexity-option p-4 border-2 border-gray-200 dark:border-gray-600 rounded-lg cursor-pointer hover:border-blue-500 dark:hover:border-blue-400 transition-colors bg-gray-50 dark:bg-gray-800" data-value="complex" data-multiplier="2.5">
|
|
<div class="text-center">
|
|
<div class="text-2xl mb-2">🔴</div>
|
|
<h4 class="font-semibold text-gray-900 dark:text-white"><%- __('calculator.complexity.complex') %></h4>
|
|
<p class="text-sm text-gray-600 dark:text-gray-300 mt-2"><%- __('calculator.complexity.complex_desc') %></p>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Timeline -->
|
|
<div>
|
|
<label class="block text-lg font-semibold text-gray-900 dark:text-white mb-4">
|
|
<%- __('calculator.timeline.title') %>
|
|
</label>
|
|
<div class="grid grid-cols-1 md:grid-cols-3 gap-4">
|
|
<div class="timeline-option p-4 border-2 border-gray-200 dark:border-gray-600 rounded-lg cursor-pointer hover:border-blue-500 dark:hover:border-blue-400 transition-colors bg-gray-50 dark:bg-gray-800" data-value="standard" data-multiplier="1">
|
|
<div class="text-center">
|
|
<div class="text-2xl mb-2">📅</div>
|
|
<h4 class="font-semibold text-gray-900 dark:text-white"><%- __('calculator.timeline.standard') %></h4>
|
|
<p class="text-sm text-gray-600 dark:text-gray-300 mt-2"><%- __('calculator.timeline.standard_desc') %></p>
|
|
</div>
|
|
</div>
|
|
<div class="timeline-option p-4 border-2 border-gray-200 dark:border-gray-600 rounded-lg cursor-pointer hover:border-blue-500 dark:hover:border-blue-400 transition-colors bg-gray-50 dark:bg-gray-800" data-value="rush" data-multiplier="1.5">
|
|
<div class="text-center">
|
|
<div class="text-2xl mb-2">⚡</div>
|
|
<h4 class="font-semibold text-gray-900 dark:text-white"><%- __('calculator.timeline.rush') %></h4>
|
|
<p class="text-sm text-gray-600 dark:text-gray-300 mt-2"><%- __('calculator.timeline.rush_desc') %></p>
|
|
</div>
|
|
</div>
|
|
<div class="timeline-option p-4 border-2 border-gray-200 dark:border-gray-600 rounded-lg cursor-pointer hover:border-blue-500 dark:hover:border-blue-400 transition-colors bg-gray-50 dark:bg-gray-800" data-value="extended" data-multiplier="0.8">
|
|
<div class="text-center">
|
|
<div class="text-2xl mb-2">🗓️</div>
|
|
<h4 class="font-semibold text-gray-900 dark:text-white"><%- __('calculator.timeline.extended') %></h4>
|
|
<p class="text-sm text-gray-600 dark:text-gray-300 mt-2"><%- __('calculator.timeline.extended_desc') %></p>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="flex justify-between mt-8">
|
|
<button type="button" class="prev-step bg-gray-600 text-white px-8 py-3 rounded-lg font-semibold hover:bg-gray-700 transition-colors">
|
|
<%- __('calculator.prev_step') %>
|
|
</button>
|
|
<button type="button" class="next-step bg-blue-600 dark:bg-blue-500 text-white px-8 py-3 rounded-lg font-semibold hover:bg-blue-700 dark:hover:bg-blue-400 transition-colors disabled:bg-gray-300 disabled:cursor-not-allowed" disabled>
|
|
<%- __('calculator.calculate') %>
|
|
</button>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Step 3: Results -->
|
|
<div class="calculator-step" id="step-3" style="display: none;">
|
|
<div class="text-center mb-8">
|
|
<h2 class="text-3xl font-bold text-gray-900 dark:text-white mb-4">
|
|
<%- __('calculator.result.title') %>
|
|
</h2>
|
|
<p class="text-gray-600 dark:text-gray-300">
|
|
<%- __('calculator.result.subtitle') %>
|
|
</p>
|
|
</div>
|
|
|
|
<div class="max-w-2xl mx-auto">
|
|
<!-- Price Display -->
|
|
<div class="bg-gradient-to-r from-blue-600 to-purple-600 rounded-2xl p-8 text-white text-center mb-8">
|
|
<h3 class="text-2xl font-bold mb-4"><%- __('calculator.result.estimated_price') %></h3>
|
|
<div class="text-5xl font-bold" id="final-price">₩0</div>
|
|
<p class="mt-4 text-blue-100"><%- __('calculator.result.price_note') %></p>
|
|
</div>
|
|
|
|
<!-- Project Summary -->
|
|
<div class="bg-white dark:bg-gray-800 rounded-xl p-6 shadow-lg mb-8">
|
|
<h4 class="text-xl font-bold text-gray-900 dark:text-white mb-4"><%- __('calculator.result.summary') %></h4>
|
|
<div id="project-summary" class="space-y-2 text-gray-600 dark:text-gray-300">
|
|
<!-- Summary will be populated by JavaScript -->
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Action Buttons -->
|
|
<div class="text-center space-y-4">
|
|
<div class="flex flex-col sm:flex-row gap-4 justify-center">
|
|
<a href="/contact" class="inline-flex items-center px-8 py-3 bg-blue-600 dark:bg-blue-500 text-white font-semibold rounded-lg hover:bg-blue-700 dark:hover:bg-blue-400 transition-colors">
|
|
<i class="fas fa-paper-plane mr-2"></i>
|
|
<%- __('calculator.result.get_quote') %>
|
|
</a>
|
|
<button type="button" class="restart-calculator inline-flex items-center px-8 py-3 border-2 border-blue-600 dark:border-blue-400 text-blue-600 dark:text-blue-400 font-semibold rounded-lg hover:bg-blue-600 hover:text-white dark:hover:bg-blue-400 dark:hover:text-gray-900 transition-colors">
|
|
<i class="fas fa-redo mr-2"></i>
|
|
<%- __('calculator.result.recalculate') %>
|
|
</button>
|
|
</div>
|
|
<p class="text-sm text-gray-500 dark:text-gray-400">
|
|
<%- __('calculator.result.contact_note') %>
|
|
</p>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</form>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</section>
|
|
|
|
<%- include('partials/footer') %>
|
|
|
|
<!-- Scripts -->
|
|
<script src="/js/calculator.js"></script>
|
|
<script>
|
|
// Localized service names for calculator
|
|
window.calculatorTranslations = {
|
|
services: {
|
|
web: '<%- __("services.web.title") %>',
|
|
mobile: '<%- __("services.mobile.title") %>',
|
|
design: '<%- __("services.design.title") %>',
|
|
marketing: '<%- __("services.marketing.title") %>'
|
|
},
|
|
complexity: {
|
|
simple: '<%- __("calculator.complexity.simple") %>',
|
|
medium: '<%- __("calculator.complexity.medium") %>',
|
|
complex: '<%- __("calculator.complexity.complex") %>'
|
|
},
|
|
timeline: {
|
|
standard: '<%- __("calculator.timeline.standard") %>',
|
|
rush: '<%- __("calculator.timeline.rush") %>',
|
|
extended: '<%- __("calculator.timeline.extended") %>'
|
|
},
|
|
labels: {
|
|
selected_services: '<%- __("calculator.result.selected_services") %>',
|
|
complexity: '<%- __("calculator.result.complexity") %>',
|
|
timeline: '<%- __("calculator.result.timeline") %>'
|
|
}
|
|
};
|
|
</script>
|
|
</body>
|
|
</html> |