Interactive Guide to Cam Ranh Airport (CXR) Arrival https://cdn.tailwindcss.com https://cdn.jsdelivr.net/npm/chart.js Goal: Personalize -> Method: Interactive buttons -> Interaction: onClick updates a state variable, triggering a full-page content refresh tailored to the user’s type. Justification: Puts the user in control and makes the complex information immediately relevant. – Arrival Process Flow -> Goal: Organize/Compare -> Method: A responsive flexbox-based visual diagram using styled HTML divs and Unicode icons. -> Interaction: Highlights the path for the selected traveler type. Each step is clickable to show details. Justification: Visually simplifies a multi-step process, making it easier to understand than a text list. – Visa Fee Comparison -> Goal: Compare/Inform -> Method: Chart.js Bar Chart -> Interaction: Static but visually represents quantitative data from the report. Justification: Breaks up text and provides a quick visual reference for costs. – Service Comparison -> Goal: Persuade -> Method: Side-by-side card layout -> Interaction: Static display. Justification: Clearly contrasts the standard and expedited processes to highlight the service’s value proposition. – Trust & General Info -> Goal: Inform/Build Trust -> Method: Grid layout for trust points and an accordion for general info. -> Interaction: Accordion tabs are clickable to show/hide content. Justification: Organizes secondary information effectively without cluttering the main view. –> body { font-family: ‘Inter’, sans-serif; } .chart-container { position: relative; width: 100%; max-width: 600px; margin-left: auto; margin-right: auto; height: 300px; max-height: 350px; } .step-item { transition: all 0.3s ease-in-out; } .step-item.active { background-color: #0d9488; /* Teal-600 */ color: white; transform: translateY(-4px); box-shadow: 0 10px 15px -3px rgb(0 0 0 / 0.1), 0 4px 6px -4px rgb(0 0 0 / 0.1); } .step-item.inactive { background-color: #f3f4f6; /* Gray-100 */ color: #6b7280; /* Gray-500 */ opacity: 0.6; } .info-panel { transition: opacity 0.5s ease-in-out, max-height 0.5s ease-in-out; max-height: 0; opacity: 0; overflow: hidden; } .info-panel.visible { max-height: 1000px; /* Large enough for content */ opacity: 1; } .type-selector.active { background-color: #14b8a6; /* Teal-500 */ color: white; box-shadow: 0 4px 6px -1px rgb(0 0 0 / 0.1), 0 2px 4px -2px rgb(0 0 0 / 0.1); } .type-selector { transition: all 0.2s ease-in-out; } const data = { evisa: { intro: “As an E-visa holder, your process is relatively straightforward. Follow these steps upon arrival.”, steps: [ { id: ‘step-immigration’, title: ‘Immigration’, icon: ‘🛂’ }, { id: ‘step-baggage’, title: ‘Baggage Claim’, icon: ‘🛄’ }, { id: ‘step-customs’, title: ‘Customs Check’, icon: ‘🛃’ }, { id: ‘step-exit’, title: ‘Airport Exit’, icon: ‘✈️’ } ], details: { ‘step-immigration’: { title: “Immigration Checkpoint”, content: `

Proceed directly to the Immigration checkpoint. Present your valid passport and a printed copy of your e-visa to the officer. They may ask about your length of stay and purpose of visit. Long queues can be common during peak hours.

` }, ‘step-baggage’: { title: “Baggage Claim”, content: `

After clearing immigration, find your flight number on the screens to locate the correct baggage carousel. Collect your luggage and keep your claim tag handy.

` }, ‘step-customs’: { title: “Customs Check”, content: `

Proceed through the customs area. Use the Green Channel if you have nothing to declare, or the Red Channel if you have items that exceed duty-free limits.

` }, ‘step-exit’: { title: “Airport Exit & Onward Travel”, content: `

Once you’ve cleared customs, you can exit into the arrivals hall. From here you can find taxis, shuttle buses, or meet your pre-booked transfer to begin your journey in Vietnam.

` }, } }, ‘visa-free’: { intro: “As a Visa-Free visitor, your process is similar to an E-visa holder. Ensure you know the maximum duration of your visa-free stay.”, steps: [ { id: ‘step-immigration’, title: ‘Immigration’, icon: ‘🛂’ }, { id: ‘step-baggage’, title: ‘Baggage Claim’, icon: ‘🛄’ }, { id: ‘step-customs’, title: ‘Customs Check’, icon: ‘🛃’ }, { id: ‘step-exit’, title: ‘Airport Exit’, icon: ‘✈️’ } ], details: { ‘step-immigration’: { title: “Immigration Checkpoint”, content: `

Proceed to the Immigration checkpoint. Present your passport, which must be from a country on Vietnam’s visa-exemption list. You may be asked to show proof of onward travel. Be prepared for potential queues.

` }, ‘step-baggage’: { title: “Baggage Claim”, content: `

After clearing immigration, find your flight number on the screens to locate the correct baggage carousel. Collect your luggage.

` }, ‘step-customs’: { title: “Customs Check”, content: `

With your luggage, proceed through the customs area. Use the Green Channel if you have nothing to declare.

` }, ‘step-exit’: { title: “Airport Exit & Onward Travel”, content: `

After customs, you are free to exit the airport and find transportation to your destination.

` }, } }, voa: { intro: “For Visa on Arrival, you have a critical first step before immigration. Follow this process carefully.”, steps: [ { id: ‘step-visa-counter’, title: ‘Visa Counter’, icon: ‘📝’ }, { id: ‘step-immigration’, title: ‘Immigration’, icon: ‘🛂’ }, { id: ‘step-baggage’, title: ‘Baggage Claim’, icon: ‘🛄’ }, { id: ‘step-customs’, title: ‘Customs Check’, icon: ‘🛃’ }, { id: ‘step-exit’, title: ‘Airport Exit’, icon: ‘✈️’ } ], details: { ‘step-visa-counter’: { title: “Landing Visa Counter”, content: `

This is your first and most important stop. Do NOT go to the main immigration line. At the Visa on Arrival counter, you must submit:

• Your original passport.
• Your printed Visa Approval Letter.
• A completed NA1 application form with an attached 4x6cm photo.
• Cash (USD or VND) for the stamping fee. There are no ATMs in this area.

This counter can have very long queues.

` }, ‘step-immigration’: { title: “Immigration Checkpoint”, content: `

Once your visa has been processed and stamped into your passport, you can then proceed to the main Immigration checkpoint for the final entry stamp.

` }, ‘step-baggage’: { title: “Baggage Claim”, content: `

After clearing immigration, find and collect your luggage from the designated carousel.

` }, ‘step-customs’: { title: “Customs Check”, content: `

Proceed through the customs area with your luggage, using the appropriate channel.

` }, ‘step-exit’: { title: “Airport Exit & Onward Travel”, content: `

You have now completed the arrival process and can exit the airport.

` }, } } }; let selectedTravelerType = null; let selectedStepId = null; const btnEvisa = document.getElementById(‘btn-evisa’); const btnVisaFree = document.getElementById(‘btn-visa-free’); const btnVoa = document.getElementById(‘btn-voa’); const stepsContainer = document.getElementById(‘steps-container’); const processIntro = document.getElementById(‘process-intro’); const infoPanel = document.getElementById(‘info-panel’); const infoTitle = document.getElementById(‘info-title’); const infoContent = document.getElementById(‘info-content’); function updateView() { if (!selectedTravelerType) return; const travelerData = data[selectedTravelerType]; processIntro.textContent = travelerData.intro; // Update steps stepsContainer.innerHTML = ”; travelerData.steps.forEach((step, index) => { const stepElement = document.createElement(‘div’); stepElement.id = step.id; stepElement.className = ‘step-item text-center p-4 rounded-lg cursor-pointer w-full md:w-48’; stepElement.innerHTML = ``; stepElement.addEventListener(‘click’, () => handleStepClick(step.id)); stepsContainer.appendChild(stepElement); if (index { if(item.id === selectedStepId){ item.classList.add(‘active’); item.classList.remove(‘inactive’); } else { item.classList.add(‘inactive’); item.classList.remove(‘active’); } }); // Update info panel if (selectedStepId && travelerData.details[selectedStepId]) { const detail = travelerData.details[selectedStepId]; infoTitle.textContent = detail.title; infoContent.innerHTML = detail.content; infoPanel.classList.add(‘visible’); } else { infoPanel.classList.remove(‘visible’); } // Update type selector buttons [btnEvisa, btnVisaFree, btnVoa].forEach(btn => btn.classList.remove(‘active’)); if(selectedTravelerType === ‘evisa’) btnEvisa.classList.add(‘active’); if(selectedTravelerType === ‘visa-free’) btnVisaFree.classList.add(‘active’); if(selectedTravelerType === ‘voa’) btnVoa.classList.add(‘active’); } function handleTypeSelect(type) { selectedTravelerType = type; selectedStepId = data[type].steps[0].id; // auto-select first step updateView(); } function handleStepClick(stepId) { if (selectedStepId === stepId) { selectedStepId = null; // Toggle off if clicking the same step } else { selectedStepId = stepId; } updateView(); } btnEvisa.addEventListener(‘click’, () => handleTypeSelect(‘evisa’)); btnVisaFree.addEventListener(‘click’, () => handleTypeSelect(‘visa-free’)); btnVoa.addEventListener(‘click’, () => handleTypeSelect(‘voa’)); // Accordion logic document.querySelectorAll(‘.accordion-toggle’).forEach(button => { button.addEventListener(‘click’, () => { const content = button.nextElementSibling; const icon = button.querySelector(‘span’); if (content.style.maxHeight) { content.style.maxHeight = null; icon.style.transform = ‘rotate(0deg)’; } else { content.style.maxHeight = content.scrollHeight + ‘px’; icon.style.transform = ‘rotate(180deg)’; } }); }); // Chart.js implementation const ctx = document.getElementById(‘visaFeeChart’).getContext(‘2d’); const visaFeeChart = new Chart(ctx, { type: ‘bar’, data: { labels: [‘Single-Entry (1 month)’, ‘Multi-Entry (1 month)’], datasets: [{ label: ‘Visa Stamping Fee (USD)’, data: [25, 50], backgroundColor: [ ‘rgba(20, 184, 166, 0.6)’, // Teal-500 ‘rgba(13, 148, 136, 0.6)’ // Teal-600 ], borderColor: [ ‘rgba(20, 184, 166, 1)’, ‘rgba(13, 148, 136, 1)’ ], borderWidth: 1 }] }, options: { responsive: true, maintainAspectRatio: false, plugins: { legend: { display: false }, title: { display: true, text: ‘Visa on Arrival Stamping Fees’ } }, scales: { y: { beginAtZero: true, title: { display: true, text: ‘Cost in USD ($)’ } } } } }); // Initialize with a default view handleTypeSelect(‘evisa’);