Expédition de charbon de bois pour shisha – Livraison mondiale de briquettes de charbon de bois de coco de première qualité en provenance directe de l’usine

/* — Base Styles (All CSS is self-contained) — */ :root { –tt-color-primary: #0a5fcf; /* Blue */ –tt-color-primary-dark: #084ca8; –tt-color-light-gray: #f4f7f6; –tt-color-medium-gray: #e0e4e2; –tt-color-dark-gray: #5c6a65; –tt-color-text: #2c3e50; –tt-color-white: #ffffff; –tt-color-red: #e74c3c; –tt-color-red-light: #fdeded; –tt-shadow: 0 10px 25px -5px rgba(0, 0, 0, 0.1), 0 5px 10px -6px rgba(0, 0, 0, 0.1); –tt-border-radius: 12px; } /* Scope all styles to this container to prevent conflicts with WordPress themes */ .transit-time-container * { box-sizing: border-box; } .transit-time-container { color: var(–tt-color-text); line-height: 1.6; padding: 20px; } /* — Main Layout — */ .transit-time-container .container { max-width: 800px; /* Wider container for the table */ width: 100%; margin: auto; } .transit-time-container .calculator-card { background-color: var(–tt-color-light-gray); border-radius: var(–tt-border-radius); box-shadow: var(–tt-shadow); padding: 24px; width: 100%; } /* — Typography — */ .transit-time-container h1 { font-size: 28px; font-weight: 700; text-align: center; margin-bottom: 32px; color: var(–tt-color-text); } .transit-time-container h2 { font-size: 18px; font-weight: 600; color: var(–tt-color-text); margin-bottom: 12px; display: flex; align-items: center; } /* — Form Elements — */ .transit-time-container .form-step { margin-bottom: 28px; } .transit-time-container .search-form-row { display: grid; grid-template-columns: 2fr 2fr 1fr; /* country | port | button */ gap: 16px; align-items: end; } /* — Select Dropdown Styles — */ .transit-time-container .select-wrapper { position: relative; } .transit-time-container .select-wrapper.loading .spinner-inline { display: block; } .transit-time-container select { width: 100%; padding: 16px 40px 16px 16px; font-size: 16px; background-color: var(–tt-color-white); border: 1px solid var(–tt-color-medium-gray); border-radius: var(–tt-border-radius); color: var(–tt-color-text); -webkit-appearance: none; -moz-appearance: none; appearance: none; cursor: pointer; transition: border-color 0.2s ease, box-shadow 0.2s ease; } .transit-time-container select:hover { border-color: var(–tt-color-dark-gray); } .transit-time-container select:focus { outline: none; border-color: var(–tt-color-primary); box-shadow: 0 0 0 3px rgba(10, 95, 207, 0.2); } .transit-time-container select:disabled { background-color: var(–tt-color-light-gray); color: var(–tt-color-dark-gray); cursor: not-allowed; opacity: 0.7; } /* Custom dropdown arrow */ .transit-time-container .select-wrapper::after { content: ‘▼’; font-size: 12px; color: var(–tt-color-dark-gray); position: absolute; right: 16px; top: 50%; transform: translateY(-50%); pointer-events: none; } /* — End Select Dropdown Styles — */ /* — Search Button — */ .transit-time-container #search-port-button { width: 100%; background-color: var(–tt-color-primary); color: var(–tt-color-white); font-size: 16px; font-weight: 700; padding: 16px; border: none; border-radius: var(–tt-border-radius); cursor: pointer; transition: background-color 0.2s ease, box-shadow 0.2s ease; display: flex; justify-content: center; align-items: center; } .transit-time-container #search-port-button:hover:not(:disabled) { background-color: var(–tt-color-primary-dark); box-shadow: 0 4px 12px -2px rgba(10, 95, 207, 0.3); } .transit-time-container #search-port-button:disabled { background-color: var(–tt-color-medium-gray); cursor: not-allowed; opacity: 0.8; } /* — Loader / Spinner — */ .transit-time-container .spinner-inline { width: 20px; height: 20px; border: 3px solid var(–tt-color-medium-gray); border-top-color: var(–tt-color-primary); position: absolute; right: 16px; /* Inside the input */ top: 50%; transform: translateY(-50%); display: none; /* JS will show this */ animation: tt-spin 0.8s linear infinite; } .transit-time-container #search-port-button .spinner { display: none; /* Hidden by default */ width: 20px; height: 20px; border: 3px solid rgba(255, 255, 255, 0.3); border-top-color: var(–tt-color-white); border-radius: 50%; animation: tt-spin 0.8s linear infinite; } .transit-time-container #search-port-button.loading .spinner { display: block; } .transit-time-container #search-port-button.loading #search-port-button-text { display: none; } @keyframes tt-spin { to { transform: rotate(360deg); } } /* — Results Area — */ .transit-time-container #results-container { margin-top: 28px; } .transit-time-container #results-table { width: 100%; border-collapse: collapse; background-color: var(–tt-color-white); border-radius: var(–tt-border-radius); overflow: hidden; /* For border-radius */ box-shadow: var(–tt-shadow); } .transit-time-container #results-table th, .transit-time-container #results-table td { padding: 14px 16px; text-align: left; border-bottom: 1px solid var(–tt-color-medium-gray); } .transit-time-container #results-table th { background-color: var(–tt-color-light-gray); font-size: 14px; font-weight: 600; color: var(–tt-color-dark-gray); text-transform: uppercase; } .transit-time-container #results-table td { font-size: 15px; color: var(–tt-color-text); } .transit-time-container #results-table tbody tr:last-child td { border-bottom: none; } .transit-time-container #results-table tbody tr:hover { background-color: #f0f6ff; } .transit-time-container #results-table .col-port { font-weight: 600; color: var(–tt-color-primary); } .transit-time-container #results-table .col-transit { font-weight: 600; } .transit-time-container #results-table .col-eta { font-weight: 600; } /* Error state */ .transit-time-container #error-message { display: none; /* Hidden by default */ padding: 20px; border-radius: var(–tt-border-radius); background-color: var(–tt-color-red-light); border: 1px solid var(–tt-color-red); color: #c0392b; font-weight: 500; margin-top: 20px; } .transit-time-container #error-message.visible { display: block; } /* Footer Note */ .transit-time-container .results-footer-note { font-size: 14px; color: var(–tt-color-dark-gray); margin-top: 16px; text-align: center; min-height: 1.5em; /* Reserve space */ transition: color 0.3s ease; } .transit-time-container .results-footer-note.loading { font-weight: 600; color: var(–tt-color-primary); } /* — Mobile Responsiveness — */ @media (max-width: 768px) { .transit-time-container .search-form-row { grid-template-columns: 1fr; /* Stack on mobile */ } .transit-time-container #search-port-button { padding-top: 16px; padding-bottom: 16px; font-size: 16px; } /* Responsive Table */ .transit-time-container #results-table thead { display: none; /* Hide table headers */ } .transit-time-container #results-table tr { display: block; margin-bottom: 16px; border-radius: var(–tt-border-radius); border: 1px solid var(–tt-color-medium-gray); box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.05); } .transit-time-container #results-table td { display: flex; justify-content: space-between; align-items: center; border-bottom: 1px dashed var(–tt-color-medium-gray); padding: 12px 16px; font-size: 14px; } .transit-time-container #results-table td:last-child { border-bottom: none; } .transit-time-container #results-table td::before { content: attr(data-label); /* Use data-label for header */ font-weight: 600; color: var(–tt-color-dark-gray); margin-right: 10px; text-transform: uppercase; font-size: 13px; } .transit-time-container #results-table .col-port { font-size: 16px; /* Emphasize port name */ } } @media (max-width: 640px) { .transit-time-container { padding: 10px; } .transit-time-container .calculator-card { padding: 20px; } .transit-time-container h1 { font-size: 24px; margin-bottom: 24px; } .transit-time-container h2 { font-size: 16px; } } // We wrap the entire script in a function to avoid conflicts // with other scripts on your WordPress site. (function() { // — !!! IMPORTANT !!! — // You MUST update this URL to the full, absolute path // where your new api3.php file is hosted. const API_URL = ‘https://id.charcoal.pro/admin/shipping/api3.php’; // — /IMPORTANT — // Get references to all our interactive elements const calculatorInstance = document.querySelector(‘.transit-time-container’); if (!calculatorInstance) { console.error(« Transit Time Calculator container not found! »); return; } const countryWrapper = calculatorInstance.querySelector(‘#country-wrapper’); const countrySelect = calculatorInstance.querySelector(‘#country-select’); const portWrapper = calculatorInstance.querySelector(‘#port-wrapper’); const portSelect = calculatorInstance.querySelector(‘#port-select’); const searchPortButton = calculatorInstance.querySelector(‘#search-port-button’); const searchPortButtonText = calculatorInstance.querySelector(‘#search-port-button-text’); const resultsTableBody = calculatorInstance.querySelector(‘#results-table-body’); const resultsFooter = calculatorInstance.querySelector(‘#results-footer’); const errorMessage = calculatorInstance.querySelector(‘#error-message’); // — State Variables — let hasEstimatedPorts = false; // To track if we need the footer note let defaultFooterMessage = « Please search for a port to see the schedule. »; let loadingFooterMessage = « Please wait…we are checking fastest shipping schedule for shisha charcoal »; /** * Fetches the list of all countries. */ async function loadCountries() { countryWrapper.classList.add(‘loading’); countrySelect.disabled = true; try { const response = await fetch(`${API_URL}?mode=countries`); if (!response.ok) throw new Error(‘Failed to fetch country list’); const countries = await response.json(); countrySelect.innerHTML = ‘– Select a Country –‘; countries.forEach(country => { const option = document.createElement(‘option’); option.value = country; option.textContent = country; countrySelect.appendChild(option); }); countrySelect.disabled = false; } catch (error) { console.error(‘Failed to load countries:’, error); showError(‘Could not load country list. Please check API_URL or server.’); countrySelect.innerHTML = ‘Error loading countries’; } finally { countryWrapper.classList.remove(‘loading’); } } /** * Fetches the list of ports for a specific country. */ async function loadPorts(country) { portWrapper.classList.add(‘loading’); portSelect.disabled = true; portSelect.innerHTML = ‘Loading ports…’; try { const response = await fetch(`${API_URL}?country=${encodeURIComponent(country)}`); if (!response.ok) throw new Error(‘Failed to fetch port list’); const ports = await response.json(); portSelect.innerHTML = ‘– Select a Port –‘; ports.forEach(port => { const option = document.createElement(‘option’); option.value = port; option.textContent = port; portSelect.appendChild(option); }); portSelect.disabled = false; } catch (error) { console.error(‘Failed to load ports:’, error); showError(`Could not load ports for ${country}.`); portSelect.innerHTML = ‘Error loading ports’; } finally { portWrapper.classList.remove(‘loading’); } } /** * Fetches the transit time details for a specific port. * Returns true on success, false on failure. */ async function getTransitTime(port, options = 1) { // Determine if this is a multi-option search const isMultiOptionSearch = options === 5; if (isMultiOptionSearch) { setButtonLoading(true); } hideError(); // Build the API URL let url = `${API_URL}?transitport=${encodeURIComponent(port)}`; if (isMultiOptionSearch) { url += `&options=5`; } try { const response = await fetch(url); const data = await response.json(); if (!response.ok) { throw new Error(data.message || ‘Failed to fetch transit time’); } if (data && data.length > 0) { // This is the key change: Loop through ALL results data.forEach(option => { addResultToTable(option); }); return true; // Success } else { throw new Error(`No transit data found for ${port}.`); } } catch (error) { console.error(‘Failed to get transit time:’, error.stack); // Only show error toast for user searches, not default load if (isMultiOptionSearch) { showError(error.message); } else { console.error(`Failed to load default port ${port}: ${error.message}`); } return false; // Failure } finally { if (isMultiOptionSearch) { setButtonLoading(false); } } } /** * Adds a single result row to the table. * This function now appends, it does not clear. */ function addResultToTable(data) { const row = document.createElement(‘tr’); row.dataset.port = data.port; let transitTime = data.transitDays; if (data.isEstimate) { transitTime = `${data.transitDays}*`; hasEstimatedPorts = true; // Mark that this result is an estimate } // Create table cells with data-label for mobile view row.innerHTML = ` ${data.country} ${data.port} ${data.departureDate} ${transitTime} ${data.etaDate} `; resultsTableBody.appendChild(row); } /** * Fetches the default list of ports on page load. */ async function fetchDefaultPorts() { const defaultPorts = [‘Beirut’, ‘Dammam’, ‘Hamburg’, ‘New York’]; // Show loading message updateFooterNote(loadingFooterMessage, true); // We fetch the ports one by one for (const port of defaultPorts) { // We call getTransitTime with default options (1) // This will fetch and add one row per port await getTransitTime(port, 1); } // Update the footer note based on the loaded data updateFooterNote(); } /** * Updates the footer note based on table content or a specific message. */ function updateFooterNote(message = null, isLoading = false) { if (message) { // If a specific message is provided, use it resultsFooter.textContent = message; } else { // Otherwise, determine the message if (resultsTableBody.children.length === 0) { resultsFooter.textContent = defaultFooterMessage; } else if (hasEstimatedPorts) { resultsFooter.textContent = « *Shisha charcoal transit time. Contact Mr Greg (+628118797070) for details. »; } else { resultsFooter.textContent = « All dates subjected to change based on shipping lines schedule »; } } // Handle loading class if (isLoading) { resultsFooter.classList.add(‘loading’); } else { resultsFooter.classList.remove(‘loading’); } } /** * Shows an error message. */ function showError(message) { errorMessage.textContent = message; errorMessage.classList.add(‘visible’); // Hide error after 3 seconds setTimeout(() => { hideError(); }, 3000); } /** * Hides the error message. */ function hideError() { errorMessage.textContent =  »; errorMessage.classList.remove(‘visible’); } /** * Toggles the loading state of the search button. */ function setButtonLoading(isLoading) { if (isLoading) { searchPortButton.disabled = true; searchPortButton.classList.add(‘loading’); } else { searchPortButton.disabled = false; searchPortButton.classList.remove(‘loading’); // Re-check if button should be enabled if (!portSelect.value) { searchPortButton.disabled = true; } } } // — Event Listeners — // When a country is selected countrySelect.addEventListener(‘change’, () => { const selectedCountry = countrySelect.value; searchPortButton.disabled = true; // Disable button if (selectedCountry) { loadPorts(selectedCountry); } else { portSelect.innerHTML = ‘Select a country first’; portSelect.disabled = true; } }); // When a port is selected portSelect.addEventListener(‘change’, () => { if (portSelect.value) { searchPortButton.disabled = false; // Enable « Search » button } else { searchPortButton.disabled = true; } }); // Search for port searchPortButton.addEventListener(‘click’, async () => { if (portSelect.value) { // Clear the table before showing the new results resultsTableBody.innerHTML = «  »; hasEstimatedPorts = false; // Reset estimator updateFooterNote(loadingFooterMessage, true); // Show loading // Request 5 options const success = await getTransitTime(portSelect.value, 5); if (success) { // Update footer based on the new 5-row results updateFooterNote(); } else { // On error, clear loading and show default message updateFooterNote(defaultFooterMessage, false); } } }); // — Initial Load — function initializeCalculator() { loadCountries(); fetchDefaultPorts(); // Load the default ports on startup } initializeCalculator(); })(); // Immediately run the script