494 lines
29 KiB
Plaintext
494 lines
29 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>
|
|
// Theme initialization
|
|
document.addEventListener('DOMContentLoaded', function() {
|
|
const theme = localStorage.getItem('theme') || 'light';
|
|
document.documentElement.className = theme === 'dark' ? 'dark' : '';
|
|
});
|
|
|
|
// Calculator Logic
|
|
let selectedServices = [];
|
|
let selectedComplexity = null;
|
|
let selectedTimeline = null;
|
|
|
|
// Service selection
|
|
document.querySelectorAll('.service-option').forEach(option => {
|
|
option.addEventListener('click', function() {
|
|
this.classList.toggle('selected');
|
|
const service = this.dataset.service;
|
|
const price = parseInt(this.dataset.basePrice);
|
|
|
|
if (this.classList.contains('selected')) {
|
|
this.style.borderColor = '#3B82F6';
|
|
this.style.backgroundColor = '#EBF8FF';
|
|
selectedServices.push({ service, price });
|
|
} else {
|
|
this.style.borderColor = '';
|
|
this.style.backgroundColor = '';
|
|
selectedServices = selectedServices.filter(s => s.service !== service);
|
|
}
|
|
|
|
updateStepButton();
|
|
});
|
|
});
|
|
|
|
// Complexity selection
|
|
document.querySelectorAll('.complexity-option').forEach(option => {
|
|
option.addEventListener('click', function() {
|
|
document.querySelectorAll('.complexity-option').forEach(opt => {
|
|
opt.style.borderColor = '';
|
|
opt.style.backgroundColor = '';
|
|
});
|
|
|
|
this.style.borderColor = '#3B82F6';
|
|
this.style.backgroundColor = '#EBF8FF';
|
|
selectedComplexity = {
|
|
value: this.dataset.value,
|
|
multiplier: parseFloat(this.dataset.multiplier)
|
|
};
|
|
|
|
updateStepButton();
|
|
});
|
|
});
|
|
|
|
// Timeline selection
|
|
document.querySelectorAll('.timeline-option').forEach(option => {
|
|
option.addEventListener('click', function() {
|
|
document.querySelectorAll('.timeline-option').forEach(opt => {
|
|
opt.style.borderColor = '';
|
|
opt.style.backgroundColor = '';
|
|
});
|
|
|
|
this.style.borderColor = '#3B82F6';
|
|
this.style.backgroundColor = '#EBF8FF';
|
|
selectedTimeline = {
|
|
value: this.dataset.value,
|
|
multiplier: parseFloat(this.dataset.multiplier)
|
|
};
|
|
|
|
updateStepButton();
|
|
});
|
|
});
|
|
|
|
// Step navigation
|
|
document.querySelectorAll('.next-step').forEach(btn => {
|
|
btn.addEventListener('click', function() {
|
|
const currentStep = document.querySelector('.calculator-step.active');
|
|
const nextStep = currentStep.nextElementSibling;
|
|
|
|
if (nextStep && nextStep.classList.contains('calculator-step')) {
|
|
currentStep.classList.remove('active');
|
|
currentStep.style.display = 'none';
|
|
nextStep.classList.add('active');
|
|
nextStep.style.display = 'block';
|
|
|
|
if (nextStep.id === 'step-3') {
|
|
calculateFinalPrice();
|
|
}
|
|
}
|
|
});
|
|
});
|
|
|
|
document.querySelectorAll('.prev-step').forEach(btn => {
|
|
btn.addEventListener('click', function() {
|
|
const currentStep = document.querySelector('.calculator-step.active');
|
|
const prevStep = currentStep.previousElementSibling;
|
|
|
|
if (prevStep && prevStep.classList.contains('calculator-step')) {
|
|
currentStep.classList.remove('active');
|
|
currentStep.style.display = 'none';
|
|
prevStep.classList.add('active');
|
|
prevStep.style.display = 'block';
|
|
}
|
|
});
|
|
});
|
|
|
|
// Restart calculator
|
|
document.querySelector('.restart-calculator').addEventListener('click', function() {
|
|
// Reset selections
|
|
selectedServices = [];
|
|
selectedComplexity = null;
|
|
selectedTimeline = null;
|
|
|
|
// Reset UI
|
|
document.querySelectorAll('.service-option, .complexity-option, .timeline-option').forEach(opt => {
|
|
opt.classList.remove('selected');
|
|
opt.style.borderColor = '';
|
|
opt.style.backgroundColor = '';
|
|
});
|
|
|
|
// Go back to step 1
|
|
document.querySelectorAll('.calculator-step').forEach(step => {
|
|
step.classList.remove('active');
|
|
step.style.display = 'none';
|
|
});
|
|
|
|
document.getElementById('step-1').classList.add('active');
|
|
document.getElementById('step-1').style.display = 'block';
|
|
|
|
updateStepButton();
|
|
});
|
|
|
|
function updateStepButton() {
|
|
const step1Button = document.querySelector('#step-1 .next-step');
|
|
const step2Button = document.querySelector('#step-2 .next-step');
|
|
|
|
if (step1Button) {
|
|
step1Button.disabled = selectedServices.length === 0;
|
|
}
|
|
|
|
if (step2Button) {
|
|
step2Button.disabled = !selectedComplexity || !selectedTimeline;
|
|
}
|
|
}
|
|
|
|
function calculateFinalPrice() {
|
|
let total = 0;
|
|
|
|
// Calculate base price from services
|
|
selectedServices.forEach(service => {
|
|
total += service.price;
|
|
});
|
|
|
|
// Apply complexity multiplier
|
|
if (selectedComplexity) {
|
|
total *= selectedComplexity.multiplier;
|
|
}
|
|
|
|
// Apply timeline multiplier
|
|
if (selectedTimeline) {
|
|
total *= selectedTimeline.multiplier;
|
|
}
|
|
|
|
// Update price display
|
|
document.getElementById('final-price').textContent = '₩' + total.toLocaleString();
|
|
|
|
// Generate summary
|
|
generateSummary(total);
|
|
}
|
|
|
|
function generateSummary(total) {
|
|
const summary = document.getElementById('project-summary');
|
|
let summaryHTML = '';
|
|
|
|
// Services
|
|
summaryHTML += '<div><strong><%- __("calculator.result.selected_services") %>:</strong></div>';
|
|
selectedServices.forEach(service => {
|
|
summaryHTML += `<div class="ml-4">• ${getServiceName(service.service)} (₩${service.price.toLocaleString()})</div>`;
|
|
});
|
|
|
|
// Complexity
|
|
if (selectedComplexity) {
|
|
summaryHTML += `<div class="mt-2"><strong><%- __("calculator.result.complexity") %>:</strong> ${getComplexityName(selectedComplexity.value)}</div>`;
|
|
}
|
|
|
|
// Timeline
|
|
if (selectedTimeline) {
|
|
summaryHTML += `<div><strong><%- __("calculator.result.timeline") %>:</strong> ${getTimelineName(selectedTimeline.value)}</div>`;
|
|
}
|
|
|
|
summary.innerHTML = summaryHTML;
|
|
}
|
|
|
|
function getServiceName(service) {
|
|
const names = {
|
|
web: '<%- __("services.web.title") %>',
|
|
mobile: '<%- __("services.mobile.title") %>',
|
|
design: '<%- __("services.design.title") %>',
|
|
marketing: '<%- __("services.marketing.title") %>'
|
|
};
|
|
return names[service] || service;
|
|
}
|
|
|
|
function getComplexityName(complexity) {
|
|
const names = {
|
|
simple: '<%- __("calculator.complexity.simple") %>',
|
|
medium: '<%- __("calculator.complexity.medium") %>',
|
|
complex: '<%- __("calculator.complexity.complex") %>'
|
|
};
|
|
return names[complexity] || complexity;
|
|
}
|
|
|
|
function getTimelineName(timeline) {
|
|
const names = {
|
|
standard: '<%- __("calculator.timeline.standard") %>',
|
|
rush: '<%- __("calculator.timeline.rush") %>',
|
|
extended: '<%- __("calculator.timeline.extended") %>'
|
|
};
|
|
return names[timeline] || timeline;
|
|
}
|
|
</script>
|
|
</body>
|
|
</html> |