|
|
<!DOCTYPE html> |
|
|
<html lang="en"> |
|
|
<head> |
|
|
<meta charset="UTF-8"> |
|
|
<meta name="viewport" content="width=device-width, initial-scale=1.0"> |
|
|
<title>Trade Tariff Window Calculator</title> |
|
|
<script src="https://cdn.tailwindcss.com"></script> |
|
|
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css"> |
|
|
<style> |
|
|
.info-icon { |
|
|
cursor: pointer; |
|
|
transition: all 0.3s; |
|
|
} |
|
|
.info-icon:hover { |
|
|
transform: scale(1.1); |
|
|
color: #3b82f6; |
|
|
} |
|
|
.dropdown-content { |
|
|
opacity: 0; |
|
|
transform: translateY(-10px); |
|
|
transition: all 0.3s; |
|
|
pointer-events: none; |
|
|
} |
|
|
.dropdown-open .dropdown-content { |
|
|
opacity: 1; |
|
|
transform: translateY(0); |
|
|
pointer-events: auto; |
|
|
} |
|
|
#progress-tracker { |
|
|
transition: all 0.5s ease; |
|
|
} |
|
|
</style> |
|
|
</head> |
|
|
<body class="bg-gray-100 min-h-screen"> |
|
|
<div class="container mx-auto px-4 py-8 max-w-4xl"> |
|
|
<div class="bg-white rounded-xl shadow-lg overflow-hidden"> |
|
|
|
|
|
<div class="bg-blue-600 p-6 text-white"> |
|
|
<h1 class="text-2xl md:text-3xl font-bold">Trade Tariff Window Calculator</h1> |
|
|
<p class="mt-2 opacity-90">Manage your tariff periods under Section 122 of the Trade Act</p> |
|
|
</div> |
|
|
|
|
|
|
|
|
<div class="p-6"> |
|
|
|
|
|
<div class="mb-8"> |
|
|
<h2 class="text-xl font-semibold mb-4 flex items-center"> |
|
|
Tariff Window Selection |
|
|
<span class="info-icon ml-2 relative group"> |
|
|
<i class="fas fa-info-circle"></i> |
|
|
<div class="absolute hidden group-hover:block bg-gray-800 text-white text-sm rounded p-2 w-72 z-10 left-full ml-2"> |
|
|
<p>Select between the standard 37.5-day tariff window or the extended 150-day option under Section 122 of the Trade Act of 1974.</p> |
|
|
</div> |
|
|
</span> |
|
|
</h2> |
|
|
|
|
|
<div class="grid grid-cols-1 md:grid-cols-2 gap-4"> |
|
|
|
|
|
<div |
|
|
class="border-2 rounded-lg p-4 cursor-pointer transition-all duration-200 hover:border-blue-400 tariff-option" |
|
|
data-days="37.5" |
|
|
onclick="selectTariffOption(this, 37.5)" |
|
|
> |
|
|
<div class="flex items-center"> |
|
|
<div class="h-6 w-6 rounded-full border-2 border-gray-300 mr-3 flex items-center justify-center"> |
|
|
<div class="h-3 w-3 rounded-full bg-blue-600 hidden"></div> |
|
|
</div> |
|
|
<h3 class="font-medium">Standard Window</h3> |
|
|
<span class="ml-auto bg-blue-100 text-blue-800 text-xs px-2 py-1 rounded">Default</span> |
|
|
</div> |
|
|
<p class="mt-2 text-gray-600 text-sm ml-9">37.5 days with 3 renewal periods</p> |
|
|
</div> |
|
|
|
|
|
|
|
|
<div |
|
|
class="border-2 rounded-lg p-4 cursor-pointer transition-all duration-200 hover:border-blue-400 tariff-option" |
|
|
data-days="150" |
|
|
onclick="selectTariffOption(this, 150)" |
|
|
> |
|
|
<div class="flex items-center"> |
|
|
<div class="h-6 w-6 rounded-full border-2 border-gray-300 mr-3 flex items-center justify-center"> |
|
|
<div class="h-3 w-3 rounded-full bg-blue-600 hidden"></div> |
|
|
</div> |
|
|
<h3 class="font-medium">Extended Section 122 Window</h3> |
|
|
</div> |
|
|
<p class="mt-2 text-gray-600 text-sm ml-9">150 days limit - temporary measure for balance of payments</p> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
|
|
|
|
|
|
<div class="mb-8"> |
|
|
<div class="flex items-center justify-between mb-4"> |
|
|
<h2 class="text-xl font-semibold">Renewal Periods</h2> |
|
|
<div class="relative"> |
|
|
<button |
|
|
id="renewal-dropdown-btn" |
|
|
class="bg-gray-100 hover:bg-gray-200 px-4 py-2 rounded-lg flex items-center" |
|
|
onclick="toggleDropdown('renewal-dropdown')" |
|
|
> |
|
|
<span id="renewal-display">3 renewals (standard)</span> |
|
|
<i class="fas fa-chevron-down ml-2 text-sm"></i> |
|
|
</button> |
|
|
<div id="renewal-dropdown" class="dropdown-content absolute bg-white shadow-lg rounded-lg mt-1 w-full z-10 overflow-hidden"> |
|
|
<div |
|
|
class="px-4 py-2 hover:bg-blue-50 cursor-pointer" |
|
|
onclick="setRenewals(1, '1 renewal')" |
|
|
>1 renewal</div> |
|
|
<div |
|
|
class="px-4 py-2 hover:bg-blue-50 cursor-pointer" |
|
|
onclick="setRenewals(2, '2 renewals')" |
|
|
>2 renewals</div> |
|
|
<div |
|
|
class="px-4 py-2 hover:bg-blue-50 cursor-pointer bg-blue-100" |
|
|
onclick="setRenewals(3, '3 renewals (standard)')" |
|
|
>3 renewals (standard)</div> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
|
|
|
<div class="bg-blue-50 p-4 rounded-lg"> |
|
|
<p class="text-sm text-gray-700 mb-2" id="renewal-details"> |
|
|
Standard configuration allows for up to 3 renewal periods of 37.5 days each. |
|
|
Total possible duration: 112.5 days. |
|
|
</p> |
|
|
<p class="text-sm text-gray-700 hidden" id="extended-details"> |
|
|
Section 122 allows for a maximum continuous period of 150 days (approximately 5 months). |
|
|
After this period, a new quote is required which may be subject to changed tariff rates. |
|
|
</p> |
|
|
</div> |
|
|
</div> |
|
|
|
|
|
|
|
|
<div class="mb-8"> |
|
|
<h2 class="text-xl font-semibold mb-4">Activation Date</h2> |
|
|
<div class="flex flex-col md:flex-row gap-4"> |
|
|
<div class="flex-1"> |
|
|
<label class="block text-sm font-medium text-gray-700 mb-1">Start Date</label> |
|
|
<input |
|
|
type="date" |
|
|
id="start-date" |
|
|
class="w-full p-2 border rounded-lg focus:ring-2 focus:ring-blue-500 focus:border-blue-500" |
|
|
> |
|
|
</div> |
|
|
<div class="flex-1 opacity-0 h-0 md:h-auto md:opacity-100 transition-opacity duration-300" id="end-date-container"> |
|
|
<label class="block text-sm font-medium text-gray-700 mb-1">Estimated End Date</label> |
|
|
<input |
|
|
type="date" |
|
|
id="end-date" |
|
|
class="w-full p-2 border rounded-lg bg-gray-100" |
|
|
disabled |
|
|
> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
|
|
|
|
|
|
<div class="flex flex-col md:flex-row gap-4 items-stretch"> |
|
|
<button |
|
|
id="save-btn" |
|
|
class="bg-blue-600 hover:bg-blue-700 text-white py-3 px-6 rounded-lg flex-1 flex items-center justify-center transition-all" |
|
|
onclick="saveConfiguration()" |
|
|
> |
|
|
<i class="fas fa-save mr-2"></i> |
|
|
Save Configuration |
|
|
</button> |
|
|
|
|
|
<div |
|
|
id="progress-tracker" |
|
|
class="bg-white border rounded-lg p-4 flex-1 opacity-0 h-0 md:h-auto overflow-hidden transition-all duration-300" |
|
|
> |
|
|
<h3 class="font-medium mb-2">Current Progress</h3> |
|
|
<div class="h-2 bg-gray-200 rounded-full overflow-hidden"> |
|
|
<div id="progress-bar" class="h-full bg-green-500 w-0"></div> |
|
|
</div> |
|
|
<p id="progress-text" class="text-sm mt-2 text-gray-600">No active tariff window configured.</p> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
|
|
|
|
|
|
<div class="bg-gray-50 p-6 border-t"> |
|
|
<h2 class="text-lg font-semibold mb-3">About Section 122 Tariff Windows</h2> |
|
|
<div class="space-y-3 text-sm text-gray-600"> |
|
|
<p>The <strong>150-day period</strong> in tariffs regulations refers to a time limit on using certain trade laws. Specifically, Section 122 of the Trade Act of 1974 allows for the imposition of tariffs of up to 15% for a period of 150 days in response to a balance of payments deficit.</p> |
|
|
<p>This is a temporary measure to address trade imbalances before a longer-term process can be initiated.</p> |
|
|
<p><strong>Key Features:</strong></p> |
|
|
<ul class="list-disc pl-5 space-y-1"> |
|
|
<li><strong>15% Tariff Limit:</strong> The tariffs imposed under Section 122 cannot exceed 15%.</li> |
|
|
<li><strong>150-Day Time Limit:</strong> Provides a limited window for addressing trade imbalances.</li> |
|
|
<li><strong>Temporary Measure:</strong> Allows time to consider other options like longer-term negotiations.</li> |
|
|
</ul> |
|
|
<p><strong>Why 150 days?</strong> This limit encourages swift response to trade issues while allowing for thorough investigation and negotiation.</p> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
|
|
|
<script> |
|
|
|
|
|
let selectedDays = 37.5; |
|
|
let renewalPeriods = 3; |
|
|
let savedConfigurations = []; |
|
|
|
|
|
|
|
|
document.addEventListener('DOMContentLoaded', function() { |
|
|
const today = new Date(); |
|
|
const formattedDate = today.toISOString().split('T')[0]; |
|
|
document.getElementById('start-date').value = formattedDate; |
|
|
document.getElementById('start-date').min = formattedDate; |
|
|
|
|
|
|
|
|
selectTariffOption(document.querySelector('.tariff-option[data-days="37.5"]'), 37.5); |
|
|
|
|
|
|
|
|
document.addEventListener('click', function(e) { |
|
|
if (!e.target.closest('.relative') && !e.target.closest('#renewal-dropdown-btn')) { |
|
|
closeAllDropdowns(); |
|
|
} |
|
|
}); |
|
|
}); |
|
|
|
|
|
|
|
|
function selectTariffOption(element, days) { |
|
|
|
|
|
document.querySelectorAll('.tariff-option').forEach(opt => { |
|
|
opt.classList.remove('border-blue-600', 'bg-blue-50'); |
|
|
const radio = opt.querySelector('div > div > div'); |
|
|
radio.classList.add('hidden'); |
|
|
}); |
|
|
|
|
|
element.classList.add('border-blue-600', 'bg-blue-50'); |
|
|
element.querySelector('div > div > div').classList.remove('hidden'); |
|
|
|
|
|
|
|
|
selectedDays = days; |
|
|
|
|
|
|
|
|
document.getElementById('renewal-details').classList.toggle('hidden', days === 150); |
|
|
document.getElementById('extended-details').classList.toggle('hidden', days !== 150); |
|
|
|
|
|
|
|
|
document.getElementById('end-date-container').classList.toggle('opacity-0', days !== 150); |
|
|
document.getElementById('end-date-container').classList.toggle('h-0', days !== 150); |
|
|
|
|
|
|
|
|
updateEndDate(); |
|
|
} |
|
|
|
|
|
|
|
|
function toggleDropdown(id) { |
|
|
const dropdown = document.getElementById(id); |
|
|
dropdown.classList.toggle('dropdown-open'); |
|
|
|
|
|
|
|
|
const allDropdowns = document.querySelectorAll('.dropdown-content'); |
|
|
allDropdowns.forEach(dd => { |
|
|
if (dd.id !== id) { |
|
|
dd.classList.remove('dropdown-open'); |
|
|
} |
|
|
}); |
|
|
} |
|
|
|
|
|
|
|
|
function closeAllDropdowns() { |
|
|
document.querySelectorAll('.dropdown-content').forEach(dd => { |
|
|
dd.classList.remove('dropdown-open'); |
|
|
}); |
|
|
} |
|
|
|
|
|
|
|
|
function setRenewals(num, displayText) { |
|
|
renewalPeriods = num; |
|
|
document.getElementById('renewal-display').textContent = displayText; |
|
|
closeAllDropdowns(); |
|
|
updateEndDate(); |
|
|
} |
|
|
|
|
|
|
|
|
function updateEndDate() { |
|
|
const startDateInput = document.getElementById('start-date'); |
|
|
if (!startDateInput.value) return; |
|
|
|
|
|
const startDate = new Date(startDateInput.value); |
|
|
const daysToAdd = selectedDays; |
|
|
|
|
|
const endDate = new Date(startDate); |
|
|
endDate.setDate(endDate.getDate() + daysToAdd); |
|
|
|
|
|
const formattedEndDate = endDate.toISOString().split('T')[0]; |
|
|
document.getElementById('end-date').value = formattedEndDate; |
|
|
} |
|
|
|
|
|
|
|
|
function saveConfiguration() { |
|
|
const startDate = document.getElementById('start-date').value; |
|
|
if (!startDate) { |
|
|
alert('Please select a start date.'); |
|
|
return; |
|
|
} |
|
|
|
|
|
const config = { |
|
|
days: selectedDays, |
|
|
renewals: renewalPeriods, |
|
|
startDate: startDate, |
|
|
endDate: document.getElementById('end-date').value || 'N/A', |
|
|
timestamp: new Date().toLocaleString() |
|
|
}; |
|
|
|
|
|
savedConfigurations.push(config); |
|
|
|
|
|
|
|
|
const progressTracker = document.getElementById('progress-tracker'); |
|
|
const progressBar = document.getElementById('progress-bar'); |
|
|
const progressText = document.getElementById('progress-text'); |
|
|
|
|
|
progressTracker.classList.remove('opacity-0', 'h-0'); |
|
|
|
|
|
if (selectedDays === 150) { |
|
|
progressBar.classList.remove('bg-green-500', 'bg-yellow-500'); |
|
|
progressBar.classList.add('bg-blue-500'); |
|
|
progressBar.style.width = '100%'; |
|
|
|
|
|
const endDate = new Date(config.endDate); |
|
|
const options = { year: 'numeric', month: 'long', day: 'numeric' }; |
|
|
|
|
|
progressText.innerHTML = `Active <strong>150-day Section 122 tariff window</strong> until ${endDate.toLocaleDateString(undefined, options)}.`; |
|
|
} else { |
|
|
const totalDays = 37.5 * renewalPeriods; |
|
|
const progressPercentage = Math.min(100, (1 / renewalPeriods) * 100); |
|
|
|
|
|
progressBar.classList.remove('bg-blue-500', 'bg-green-500'); |
|
|
progressBar.classList.add('bg-yellow-500'); |
|
|
progressBar.style.width = `${progressPercentage}%`; |
|
|
|
|
|
progressText.innerHTML = `Active standard tariff window (${renewalPeriods} renewals). Using first of ${renewalPeriods} periods (${37.5} days each).`; |
|
|
} |
|
|
|
|
|
|
|
|
alert('Configuration saved successfully!'); |
|
|
|
|
|
|
|
|
console.log('Saved Configurations:', savedConfigurations); |
|
|
} |
|
|
|
|
|
|
|
|
document.getElementById('start-date').addEventListener('change', function() { |
|
|
updateEndDate(); |
|
|
}); |
|
|
</script> |
|
|
<p style="border-radius: 8px; text-align: center; font-size: 12px; color: #fff; margin-top: 16px;position: fixed; left: 8px; bottom: 8px; z-index: 10; background: rgba(0, 0, 0, 0.8); padding: 4px 8px;">Made with <img src="https://enzostvs-deepsite.hf.space/logo.svg" alt="DeepSite Logo" style="width: 16px; height: 16px; vertical-align: middle;display:inline-block;margin-right:3px;filter:brightness(0) invert(1);"><a href="https://enzostvs-deepsite.hf.space" style="color: #fff;text-decoration: underline;" target="_blank" >DeepSite</a> - 🧬 <a href="https://enzostvs-deepsite.hf.space?remix=privateuserh/fffund-containerarbitrage-db1mod" style="color: #fff;text-decoration: underline;" target="_blank" >Remix</a></p></body> |
|
|
</html> |
