Hugging Face's logo

Spaces:
privateuserh
/
privfin-vbeta1-03
Running

App Files Community
privfin-vbeta1-03 / index.html
privateuserh's picture
privateuserh
Add 2 files
1ea9ada verified
raw
history blame contribute delete
50.2 kB
 <!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Global Trade Fin. 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>
.floating-btn {
position: fixed;
bottom: 30px;
right: 30px;
width: 60px;
height: 60px;
border-radius: 50%;
box-shadow: 0 10px 25px rgba(0, 0, 0, 0.2);
transition: all 0.3s ease;
z-index: 1000;
}
.floating-btn:hover {
transform: translateY(-5px) scale(1.05);
box-shadow: 0 15px 30px rgba(0, 0, 0, 0.3);
}
.floating-btn-secondary {
position: fixed;
bottom: 100px;
right: 30px;
width: 60px;
height: 60px;
border-radius: 50%;
box-shadow: 0 10px 25px rgba(0, 0, 0, 0.2);
transition: all 0.3s ease;
z-index: 1000;
}
.floating-btn-secondary:hover {
transform: translateY(-5px) scale(1.05);
box-shadow: 0 15px 30px rgba(0, 0, 0, 0.3);
}
.floating-btn-tertiary {
position: fixed;
bottom: 170px;
right: 30px;
width: 60px;
height: 60px;
border-radius: 50%;
box-shadow: 0 10px 25px rgba(0, 0, 0, 0.2);
transition: all 0.3s ease;
z-index: 1000;
}
.floating-btn-tertiary:hover {
transform: translateY(-5px) scale(1.05);
box-shadow: 0 15px 30px rgba(0, 0, 0, 0.3);
}
.modal {
transition: all 0.3s ease;
opacity: 0;
visibility: hidden;
}
.modal.active {
opacity: 1;
visibility: visible;
}
.tariff-slider::-webkit-slider-thumb {
-webkit-appearance: none;
width: 20px;
height: 20px;
border-radius: 50%;
background: #3B82F6;
cursor: pointer;
}
.animate-pulse {
animation: pulse 2s infinite;
}
@keyframes pulse {
0% { transform: scale(1); }
50% { transform: scale(1.05); }
100% { transform: scale(1); }
}
.market-share-gauge {
width: 100%;
height: 20px;
background: linear-gradient(90deg, #ef4444 0%, #f59e0b 50%, #10b981 100%);
border-radius: 10px;
margin-top: 10px;
position: relative;
}
.gauge-pointer {
position: absolute;
top: -5px;
width: 2px;
height: 30px;
background: black;
transform: translateX(-50%);
}
.tariff-badge {
display: inline-block;
padding: 0.25rem 0.5rem;
border-radius: 9999px;
font-size: 0.75rem;
font-weight: 600;
}
.token-progress {
height: 10px;
border-radius: 5px;
background-color: #e5e7eb;
overflow: hidden;
}
.token-progress-bar {
height: 100%;
background: linear-gradient(90deg, #8b5cf6, #6366f1);
transition: width 0.3s ease;
}
.yield-farming-card {
background: linear-gradient(135deg, #f5f7fa 0%, #e4e7eb 100%);
border-radius: 12px;
padding: 1.5rem;
position: relative;
overflow: hidden;
}
.yield-farming-card::before {
content: "";
position: absolute;
top: -50%;
left: -50%;
width: 200%;
height: 200%;
background: linear-gradient(45deg, transparent 0%, rgba(255,255,255,0.1) 50%, transparent 100%);
transform: rotate(45deg);
animation: shine 3s infinite;
}
@keyframes shine {
0% { transform: translateX(-100%) rotate(45deg); }
100% { transform: translateX(100%) rotate(45deg); }
}
.bitcoin-address {
font-family: monospace;
letter-spacing: 1px;
}
.mining-estimate {
background: linear-gradient(135deg, #fef3c7 0%, #fde68a 100%);
border-left: 4px solid #f59e0b;
}
.country-flag {
width: 24px;
height: 16px;
display: inline-block;
margin-right: 8px;
border: 1px solid #e5e7eb;
vertical-align: middle;
}
.tariff-impact-meter {
height: 8px;
border-radius: 4px;
background-color: #e5e7eb;
margin-top: 8px;
overflow: hidden;
}
.tariff-impact-bar {
height: 100%;
background: linear-gradient(90deg, #10b981, #3B82F6);
}
.countdown-timer {
font-family: monospace;
font-size: 1.2rem;
color: #ef4444;
font-weight: bold;
}
.market-share-loss-meter {
height: 12px;
border-radius: 6px;
background-color: #f3f4f6;
margin-top: 8px;
overflow: hidden;
position: relative;
}
.market-share-loss-bar {
height: 100%;
background: linear-gradient(90deg, #10b981, #3B82F6);
transition: width 0.5s ease;
}
.market-share-regain-bar {
height: 100%;
background: linear-gradient(90deg, #3B82F6, #8b5cf6);
transition: width 0.5s ease;
}
.market-share-total-loss {
font-size: 1.5rem;
font-weight: bold;
color: #ef4444;
}
</style>
</head>
<body class="bg-gray-50 min-h-screen">
<!-- Main Calculator -->
<div class="container mx-auto px-4 py-8 max-w-4xl">
<div class="bg-white rounded-xl shadow-md overflow-hidden mb-8">
<div class="p-6 bg-gradient-to-r from-blue-600 to-indigo-700 text-white">
<h1 class="text-2xl font-bold">Global Trade Finance Calculator</h1>
<p class="opacity-90">Calculate your tariff financing options and market share impact</p>
</div>
<div class="p-6">
<div class="grid grid-cols-1 md:grid-cols-2 gap-6 mb-6">
<div>
<label class="block text-sm font-medium text-gray-700 mb-1">Import Value (USD)</label>
<input type="number" id="importValue" class="w-full px-4 py-2 border border-gray-300 rounded-lg focus:ring-2 focus:ring-blue-500 focus:border-blue-500" placeholder="100,000" value="100000">
</div>
<div>
<label class="block text-sm font-medium text-gray-700 mb-1">Tariff Rate (%)</label>
<div class="flex items-center">
<input type="range" id="tariffSlider" min="0" max="30" step="0.5" value="10" class="w-full tariff-slider">
<span id="tariffValue" class="ml-3 font-medium">10%</span>
</div>
</div>
</div>
<div class="grid grid-cols-1 md:grid-cols-3 gap-4 mb-6">
<div>
<label class="block text-sm font-medium text-gray-700 mb-1">Product Category</label>
<select id="productCategory" class="w-full px-4 py-2 border border-gray-300 rounded-lg focus:ring-2 focus:ring-blue-500 focus:border-blue-500">
<option value="">Select category</option>
<option value="electronics">Electronics</option>
<option value="textiles">Textiles</option>
<option value="automotive">Automotive</option>
<option value="agriculture">Agriculture</option>
<option value="chemicals">Chemicals</option>
</select>
</div>
<div>
<label class="block text-sm font-medium text-gray-700 mb-1">Import Country</label>
<select id="importCountry" class="w-full px-4 py-2 border border-gray-300 rounded-lg focus:ring-2 focus:ring-blue-500 focus:border-blue-500">
<option value="us">United States</option>
<option value="eu">European Union</option>
<option value="china">China</option>
<option value="japan">Japan</option>
<option value="canada">Canada</option>
</select>
</div>
<div>
<label class="block text-sm font-medium text-gray-700 mb-1">Export Country</label>
<select id="exportCountry" class="w-full px-4 py-2 border border-gray-300 rounded-lg focus:ring-2 focus:ring-blue-500 focus:border-blue-500">
<option value="china">China</option>
<option value="vietnam">Vietnam</option>
<option value="india">India</option>
<option value="mexico">Mexico</option>
<option value="germany">Germany</option>
</select>
</div>
</div>
<div class="flex justify-center">
<button id="calculateBtn" class="bg-blue-600 hover:bg-blue-700 text-white font-bold py-3 px-8 rounded-lg transition duration-300 flex items-center">
<i class="fas fa-calculator mr-2"></i> Calculate Financing
</button>
</div>
</div>
</div>
<!-- Results Section (Initially Hidden) -->
<div id="resultsSection" class="bg-white rounded-xl shadow-md overflow-hidden mb-8 hidden">
<div class="p-6 bg-gradient-to-r from-green-600 to-emerald-700 text-white">
<h2 class="text-xl font-bold">Financing Results</h2>
<p>Your optimized trade finance solution</p>
</div>
<div class="p-6">
<div class="grid grid-cols-1 md:grid-cols-3 gap-6 mb-6">
<div class="border border-gray-200 rounded-lg p-4">
<div class="text-sm text-gray-500 mb-1">Tariff Amount</div>
<div class="text-2xl font-bold" id="tariffAmount">$10,000</div>
</div>
<div class="border border-gray-200 rounded-lg p-4">
<div class="text-sm text-gray-500 mb-1">Financing Cost</div>
<div class="text-2xl font-bold" id="financingCost">$8,500</div>
</div>
<div class="border border-gray-200 rounded-lg p-4 bg-blue-50">
<div class="text-sm text-blue-600 mb-1">Total Savings</div>
<div class="text-2xl font-bold text-blue-700" id="totalSavings">$1,500</div>
</div>
</div>
<div class="grid grid-cols-1 md:grid-cols-2 gap-6">
<div class="border border-gray-200 rounded-lg p-4">
<div class="flex justify-between items-center mb-2">
<h3 class="font-medium">Tokenized Financing</h3>
<span class="text-xs bg-purple-100 text-purple-800 px-2 py-1 rounded">Recommended</span>
</div>
<p class="text-sm text-gray-600 mb-3">Mint FFFUND tokens to finance your tariffs with crypto liquidity</p>
<div class="flex justify-between text-sm mb-2">
<span>Token Amount:</span>
<span class="font-medium" id="tokenAmount">850 FFFUND</span>
</div>
<div class="flex justify-between text-sm mb-2">
<span>APY:</span>
<span class="font-medium">12.5%</span>
</div>
<button id="tokenizeBtn" class="w-full mt-3 bg-purple-600 hover:bg-purple-700 text-white font-medium py-2 px-4 rounded-lg transition duration-300">
Tokenize Now
</button>
</div>
<div class="border border-gray-200 rounded-lg p-4">
<h3 class="font-medium mb-2">Traditional Financing</h3>
<p class="text-sm text-gray-600 mb-3">Standard bank financing options for comparison</p>
<div class="flex justify-between text-sm mb-2">
<span>Interest Rate:</span>
<span class="font-medium">8.75%</span>
</div>
<div class="flex justify-between text-sm mb-2">
<span>Processing Fee:</span>
<span class="font-medium">1.5%</span>
</div>
<button id="traditionalBtn" class="w-full mt-3 bg-gray-600 hover:bg-gray-700 text-white font-medium py-2 px-4 rounded-lg transition duration-300">
View Details
</button>
</div>
</div>
<div class="mt-6">
<button id="marketShareBtn" class="w-full bg-indigo-600 hover:bg-indigo-700 text-white font-bold py-3 px-4 rounded-lg transition duration-300 flex items-center justify-center">
<i class="fas fa-chart-line mr-2"></i> Analyze Market Share Impact
</button>
</div>
</div>
</div>
</div>
<!-- Floating Action Buttons -->
<button id="tokenMintBtn" class="floating-btn bg-purple-600 text-white flex items-center justify-center">
<i class="fas fa-coins text-xl"></i>
</button>
<button id="walletBtn" class="floating-btn-secondary bg-blue-600 text-white flex items-center justify-center">
<i class="fas fa-wallet text-xl"></i>
</button>
<button id="helpBtn" class="floating-btn-tertiary bg-gray-600 text-white flex items-center justify-center">
<i class="fas fa-question text-xl"></i>
</button>
<!-- Token Mint Modal -->
<div id="tokenMintModal" class="modal fixed inset-0 bg-black bg-opacity-50 flex items-center justify-center p-4">
<div class="bg-white rounded-xl shadow-xl p-6 max-w-md w-full">
<div class="flex justify-between items-center mb-4">
<h3 class="text-xl font-bold text-gray-800">Mint FFFUND Tokens</h3>
<button id="closeTokenMintModal" class="text-gray-500 hover:text-gray-700">
<i class="fas fa-times"></i>
</button>
</div>
<div class="mb-4">
<label class="block text-sm font-medium text-gray-700 mb-1">Amount to Mint</label>
<div class="relative">
<input type="number" id="mintAmount" class="w-full px-4 py-2 border border-gray-300 rounded-lg focus:ring-2 focus:ring-purple-500 focus:border-purple-500" placeholder="1000">
<div class="absolute inset-y-0 right-0 flex items-center pr-3 pointer-events-none">
<span class="text-gray-500">FFFUND</span>
</div>
</div>
</div>
<div class="mb-4">
<label class="block text-sm font-medium text-gray-700 mb-1">Equivalent USD</label>
<div class="relative">
<input type="number" id="mintUsdValue" class="w-full px-4 py-2 border border-gray-300 rounded-lg focus:ring-2 focus:ring-purple-500 focus:border-purple-500" placeholder="1000" readonly>
<div class="absolute inset-y-0 right-0 flex items-center pr-3 pointer-events-none">
<span class="text-gray-500">USD</span>
</div>
</div>
</div>
<div class="mb-4">
<div class="flex justify-between text-sm mb-1">
<span class="text-gray-600">Exchange Rate</span>
<span class="font-medium">1 FFFUND = $1.00</span>
</div>
<div class="flex justify-between text-sm mb-1">
<span class="text-gray-600">Minting Fee</span>
<span class="font-medium">0.5%</span>
</div>
<div class="flex justify-between text-sm">
<span class="text-gray-600">APY</span>
<span class="font-medium text-green-600">12.5%</span>
</div>
</div>
<div class="bg-blue-50 p-3 rounded-lg mb-4">
<div class="flex items-center">
<div class="flex-shrink-0">
<i class="fas fa-info-circle text-blue-500"></i>
</div>
<div class="ml-3">
<p class="text-sm text-blue-700">
Minting tokens now will lock in your financing rate and protect against future tariff increases.
</p>
</div>
</div>
</div>
<button id="confirmMintBtn" class="w-full bg-purple-600 hover:bg-purple-700 text-white font-bold py-3 px-4 rounded-lg transition duration-300">
Confirm Mint
</button>
</div>
</div>
<!-- Wallet Modal -->
<div id="walletModal" class="modal fixed inset-0 bg-black bg-opacity-50 flex items-center justify-center p-4">
<div class="bg-white rounded-xl shadow-xl p-6 max-w-md w-full">
<div class="flex justify-between items-center mb-4">
<h3 class="text-xl font-bold text-gray-800">Your Digital Wallet</h3>
<button id="closeWalletModal" class="text-gray-500 hover:text-gray-700">
<i class="fas fa-times"></i>
</button>
</div>
<div class="border border-gray-200 rounded-lg p-4 mb-4">
<div class="flex justify-between items-center mb-2">
<span class="text-sm font-medium text-gray-600">FFFUND Balance</span>
<span class="text-xs bg-purple-100 text-purple-800 px-2 py-1 rounded">ERC-20</span>
</div>
<div class="flex justify-between items-baseline">
<span class="text-2xl font-bold" id="walletBalance">0</span>
<span class="text-gray-500">FFFUND</span>
</div>
<div class="text-sm text-gray-500 mt-1" id="walletUsdValue">≈ $0.00</span>
</div>
<div class="grid grid-cols-2 gap-3 mb-4">
<button id="receiveBtn" class="bg-blue-50 hover:bg-blue-100 text-blue-700 font-medium py-2 px-4 rounded-lg transition duration-300 flex items-center justify-center">
<i class="fas fa-qrcode mr-2"></i> Receive
</button>
<button id="sendBtn" class="bg-blue-50 hover:bg-blue-100 text-blue-700 font-medium py-2 px-4 rounded-lg transition duration-300 flex items-center justify-center">
<i class="fas fa-paper-plane mr-2"></i> Send
</button>
</div>
<div class="border-t border-gray-200 pt-4">
<h4 class="font-medium text-gray-700 mb-2">Transaction History</h4>
<div class="space-y-3">
<div class="flex items-center justify-between p-2 bg-gray-50 rounded-lg">
<div class="flex items-center">
<div class="p-2 rounded-full bg-purple-100 text-purple-600 mr-3">
<i class="fas fa-coins"></i>
</div>
<div>
<p class="text-sm font-medium">Token Mint</p>
<p class="text-xs text-gray-500">2 days ago</p>
</div>
</div>
<div class="text-right">
<p class="text-sm font-medium text-green-600">+1,000 FFFUND</p>
<p class="text-xs text-gray-500">$1,000.00</p>
</div>
</div>
</div>
</div>
</div>
</div>
<!-- Help Modal -->
<div id="helpModal" class="modal fixed inset-0 bg-black bg-opacity-50 flex items-center justify-center p-4">
<div class="bg-white rounded-xl shadow-xl p-6 max-w-md w-full">
<div class="flex justify-between items-center mb-4">
<h3 class="text-xl font-bold text-gray-800">Help Center</h3>
<button id="closeHelpModal" class="text-gray-500 hover:text-gray-700">
<i class="fas fa-times"></i>
</button>
</div>
<div class="mb-4">
<h4 class="font-medium text-gray-700 mb-2">How it works</h4>
<p class="text-sm text-gray-600 mb-3">
This calculator helps you determine the optimal way to finance import tariffs by comparing traditional financing with tokenized options.
</p>
<div class="space-y-3">
<div class="flex items-start">
<div class="flex-shrink-0 mt-1">
<div class="w-6 h-6 rounded-full bg-blue-100 text-blue-600 flex items-center justify-center">
<span class="text-xs font-bold">1</span>
</div>
</div>
<div class="ml-3">
<p class="text-sm font-medium text-gray-700">Enter your import details</p>
<p class="text-sm text-gray-500">Value, tariff rate, product category, and countries</p>
</div>
</div>
<div class="flex items-start">
<div class="flex-shrink-0 mt-1">
<div class="w-6 h-6 rounded-full bg-blue-100 text-blue-600 flex items-center justify-center">
<span class="text-xs font-bold">2</span>
</div>
</div>
<div class="ml-3">
<p class="text-sm font-medium text-gray-700">Calculate financing options</p>
<p class="text-sm text-gray-500">Compare costs between traditional and tokenized financing</p>
</div>
</div>
<div class="flex items-start">
<div class="flex-shrink-0 mt-1">
<div class="w-6 h-6 rounded-full bg-blue-100 text-blue-600 flex items-center justify-center">
<span class="text-xs font-bold">3</span>
</div>
</div>
<div class="ml-3">
<p class="text-sm font-medium text-gray-700">Analyze market impact</p>
<p class="text-sm text-gray-500">See how tariffs affect your market share over time</p>
</div>
</div>
<div class="flex items-start">
<div class="flex-shrink-0 mt-1">
<div class="w-6 h-6 rounded-full bg-blue-100 text-blue-600 flex items-center justify-center">
<span class="text-xs font-bold">4</span>
</div>
</div>
<div class="ml-3">
<p class="text-sm font-medium text-gray-700">Mint tokens to finance</p>
<p class="text-sm text-gray-500">Lock in rates and potentially recover lost market share</p>
</div>
</div>
</div>
</div>
<div class="border-t border-gray-200 pt-4">
<h4 class="font-medium text-gray-700 mb-2">Need more help?</h4>
<button class="w-full bg-blue-600 hover:bg-blue-700 text-white font-medium py-2 px-4 rounded-lg transition duration-300">
Contact Support
</button>
</div>
</div>
</div>
<!-- Market Share Modal -->
<div id="marketShareModal" class="modal fixed inset-0 bg-black bg-opacity-50 flex items-center justify-center p-4">
<div class="bg-white rounded-xl shadow-xl p-6 max-w-md w-full">
<div class="flex justify-between items-center mb-4">
<h3 class="text-xl font-bold text-gray-800">Market Share Impact</h3>
<button id="closeMarketShareModal" class="text-gray-500 hover:text-gray-700">
<i class="fas fa-times"></i>
</button>
</div>
<div class="mb-4">
<div class="flex justify-between items-center mb-2">
<span class="font-medium">Live Market Share Loss</span>
<span class="countdown-timer" id="marketShareTimer">00:00:00</span>
</div>
<div class="market-share-loss-meter">
<div id="marketShareLossBar" class="market-share-loss-bar" style="width: 0%"></div>
<div id="marketShareRegainBar" class="market-share-regain-bar" style="width: 0%"></div>
</div>
<div class="flex justify-between mt-1 text-xs">
<span>0%</span>
<span id="currentLossDisplay">0% lost</span>
<span id="currentRegainDisplay">0% regained</span>
<span>100%</span>
</div>
</div>
<div class="grid grid-cols-2 gap-4 mb-4">
<div class="bg-red-50 p-3 rounded-lg">
<div class="text-sm text-red-600 font-medium mb-1">5-Year Projection</div>
<div class="market-share-total-loss" id="fiveYearLoss">0%</div>
<div class="text-xs text-red-500">Total market share lost</div>
</div>
<div class="bg-green-50 p-3 rounded-lg">
<div class="text-sm text-green-600 font-medium mb-1">Minting Impact</div>
<div class="text-xl font-bold text-green-800" id="mintingImpact">0%</div>
<div class="text-xs text-green-600">Market share regained</div>
</div>
</div>
<div class="mb-4">
<div class="flex justify-between mb-2">
<span class="font-medium text-red-600">Market Share Loss Rate</span>
<span id="marketShareLossRate" class="font-bold">0.5%/month</span>
</div>
<div class="flex justify-between mb-4">
<span class="font-medium text-green-600">Minting Recovery Rate</span>
<span id="mintingRecoveryRate" class="font-bold">0.25%/month</span>
</div>
<div class="market-share-gauge">
<div id="gaugePointer" class="gauge-pointer" style="left: 25%;"></div>
</div>
<div class="flex justify-between mt-2 text-xs">
<span>High Loss</span>
<span>Balanced</span>
<span>High Savings</span>
</div>
</div>
<div class="bg-gray-50 p-4 rounded-lg mb-4">
<p class="text-sm text-gray-700">
<span class="font-medium">Analysis:</span>
<span id="marketShareAnalysis">Using tariff financing results in moderate market share impact but significant cost savings.</span>
</p>
<p class="text-xs text-gray-500 mt-2" id="marketShareCountdownNote">Market share is being lost at a rate of <span class="font-medium">0.5% per month</span>. Minting FFFUND tokens can help recover lost market share.</p>
</div>
<div class="flex space-x-2">
<button id="closeMarketShareBtn" class="flex-1 bg-green-600 hover:bg-green-700 text-white font-bold py-3 px-4 rounded-lg transition duration-300">
Close
</button>
<button id="mintFromMarketBtn" class="flex-1 bg-purple-600 hover:bg-purple-700 text-white font-bold py-3 px-4 rounded-lg transition duration-300 flex items-center justify-center">
<i class="fas fa-coins mr-2"></i> Mint Now
</button>
</div>
</div>
</div>
<!-- Success Toast -->
<div id="successToast" class="fixed bottom-4 left-4 bg-green-500 text-white px-4 py-2 rounded-lg shadow-lg transform translate-y-16 transition-transform duration-300 z-50 hidden">
<div class="flex items-center">
<i class="fas fa-check-circle mr-2"></i>
<span id="successMessage">Operation completed successfully!</span>
</div>
</div>
<script>
// DOM Elements
const importValueInput = document.getElementById('importValue');
const tariffSlider = document.getElementById('tariffSlider');
const tariffValueDisplay = document.getElementById('tariffValue');
const productCategorySelect = document.getElementById('productCategory');
const importCountrySelect = document.getElementById('importCountry');
const exportCountrySelect = document.getElementById('exportCountry');
const calculateBtn = document.getElementById('calculateBtn');
const resultsSection = document.getElementById('resultsSection');
const tariffAmountDisplay = document.getElementById('tariffAmount');
const financingCostDisplay = document.getElementById('financingCost');
const totalSavingsDisplay = document.getElementById('totalSavings');
const tokenAmountDisplay = document.getElementById('tokenAmount');
const tokenizeBtn = document.getElementById('tokenizeBtn');
const traditionalBtn = document.getElementById('traditionalBtn');
const marketShareBtn = document.getElementById('marketShareBtn');
// Modal Elements
const tokenMintModal = document.getElementById('tokenMintModal');
const closeTokenMintModal = document.getElementById('closeTokenMintModal');
const tokenMintBtn = document.getElementById('tokenMintBtn');
const mintAmountInput = document.getElementById('mintAmount');
const mintUsdValueInput = document.getElementById('mintUsdValue');
const confirmMintBtn = document.getElementById('confirmMintBtn');
const walletModal = document.getElementById('walletModal');
const closeWalletModal = document.getElementById('closeWalletModal');
const walletBtn = document.getElementById('walletBtn');
const walletBalanceDisplay = document.getElementById('walletBalance');
const walletUsdValueDisplay = document.getElementById('walletUsdValue');
const receiveBtn = document.getElementById('receiveBtn');
const sendBtn = document.getElementById('sendBtn');
const helpModal = document.getElementById('helpModal');
const closeHelpModal = document.getElementById('closeHelpModal');
const helpBtn = document.getElementById('helpBtn');
const marketShareModal = document.getElementById('marketShareModal');
const closeMarketShareModal = document.getElementById('closeMarketShareModal');
const closeMarketShareBtn = document.getElementById('closeMarketShareBtn');
const mintFromMarketBtn = document.getElementById('mintFromMarketBtn');
const successToast = document.getElementById('successToast');
const successMessage = document.getElementById('successMessage');
// Data
let currentLoanData = null;
let tokenData = {
userBalance: 0,
exchangeRate: 1.0
};
let currentIndustry = null;
// Industries data
const industries = {
electronics: { name: "Electronics", tariffMultiplier: 1.2 },
textiles: { name: "Textiles", tariffMultiplier: 1.5 },
automotive: { name: "Automotive", tariffMultiplier: 1.8 },
agriculture: { name: "Agriculture", tariffMultiplier: 1.1 },
chemicals: { name: "Chemicals", tariffMultiplier: 1.3 }
};
// Initialize event listeners
function initEventListeners() {
// Input changes
tariffSlider.addEventListener('input', updateTariffValue);
importValueInput.addEventListener('input', formatCurrencyInput);
mintAmountInput.addEventListener('input', updateMintUsdValue);
// Button clicks
calculateBtn.addEventListener('click', calculateFinancing);
tokenizeBtn.addEventListener('click', openTokenMintModal);
traditionalBtn.addEventListener('click', showTraditionalDetails);
marketShareBtn.addEventListener('click', openMarketShareModal);
// Modal controls
tokenMintBtn.addEventListener('click', openTokenMintModal);
closeTokenMintModal.addEventListener('click', closeTokenMintModalFunc);
confirmMintBtn.addEventListener('click', confirmMint);
walletBtn.addEventListener('click', openWalletModal);
closeWalletModal.addEventListener('click', closeWalletModalFunc);
receiveBtn.addEventListener('click', showReceiveAddress);
sendBtn.addEventListener('click', showSendForm);
helpBtn.addEventListener('click', openHelpModal);
closeHelpModal.addEventListener('click', closeHelpModalFunc);
closeMarketShareModal.addEventListener('click', closeMarketShareModalFunc);
closeMarketShareBtn.addEventListener('click', closeMarketShareModalFunc);
mintFromMarketBtn.addEventListener('click', openTokenMintModal);
}
// Format currency input
function formatCurrencyInput(e) {
let value = e.target.value.replace(/\D/g, '');
e.target.value = Number(value).toLocaleString();
}
// Update tariff value display
function updateTariffValue() {
const value = tariffSlider.value;
tariffValueDisplay.textContent = `${value}%`;
}
// Calculate financing options
function calculateFinancing() {
const importValue = Number(importValueInput.value.replace(/\D/g, ''));
const tariffRate = Number(tariffSlider.value) / 100;
if (!importValue || isNaN(importValue)) {
showToast("Please enter a valid import value");
return;
}
// Get product category
const productCategory = productCategorySelect.value;
currentIndustry = productCategory ? industries[productCategory] : null;
// Calculate tariff amount (with industry multiplier if selected)
let tariffMultiplier = 1.0;
if (currentIndustry) {
tariffMultiplier = currentIndustry.tariffMultiplier;
}
const tariffAmount = importValue * tariffRate * tariffMultiplier;
// Calculate financing costs
const traditionalCost = tariffAmount * 0.85; // 15% savings
const tokenizedCost = tariffAmount * 0.80; // 20% savings
// Calculate savings
const savings = tariffAmount - tokenizedCost;
// Update UI
tariffAmountDisplay.textContent = `$${tariffAmount.toLocaleString(undefined, {maximumFractionDigits: 2})}`;
financingCostDisplay.textContent = `$${tokenizedCost.toLocaleString(undefined, {maximumFractionDigits: 2})}`;
totalSavingsDisplay.textContent = `$${savings.toLocaleString(undefined, {maximumFractionDigits: 2})}`;
tokenAmountDisplay.textContent = `${Math.round(tokenizedCost)}`;
// Store current loan data
currentLoanData = {
importValue,
tariff: tariffRate * 100,
tariffAmount,
traditionalCost,
tokenizedCost,
savings
};
// Show results
resultsSection.classList.remove('hidden');
// Scroll to results
resultsSection.scrollIntoView({ behavior: 'smooth' });
showToast("Financing options calculated successfully");
}
// Show traditional financing details
function showTraditionalDetails() {
if (!currentLoanData) return;
// Update the displays to show traditional financing numbers
financingCostDisplay.textContent = `$${currentLoanData.traditionalCost.toLocaleString(undefined, {maximumFractionDigits: 2})}`;
totalSavingsDisplay.textContent = `$${(currentLoanData.tariffAmount - currentLoanData.traditionalCost).toLocaleString(undefined, {maximumFractionDigits: 2})}`;
showToast("Showing traditional financing details");
}
// Token Mint Modal Functions
function openTokenMintModal() {
if (!currentLoanData) {
showToast("Please calculate financing terms first");
return;
}
// Set default mint amount to the tokenized cost
mintAmountInput.value = Math.round(currentLoanData.tokenizedCost);
updateMintUsdValue();
tokenMintModal.classList.add('active');
}
function closeTokenMintModalFunc() {
tokenMintModal.classList.remove('active');
}
function updateMintUsdValue() {
const amount = Number(mintAmountInput.value) || 0;
mintUsdValueInput.value = (amount * tokenData.exchangeRate).toFixed(2);
}
function confirmMint() {
const amount = Number(mintAmountInput.value) || 0;
if (amount <= 0) {
showToast("Please enter a valid amount to mint");
return;
}
// Add to user balance
tokenData.userBalance += amount;
// Update wallet display
walletBalanceDisplay.textContent = tokenData.userBalance.toLocaleString();
walletUsdValueDisplay.textContent = `≈ $${(tokenData.userBalance * tokenData.exchangeRate).toLocaleString(undefined, {maximumFractionDigits: 2})}`;
// Close modal
closeTokenMintModalFunc();
showToast(`${amount.toLocaleString()} FFFUND tokens minted successfully!`);
}
// Wallet Modal Functions
function openWalletModal() {
// Update balance display
walletBalanceDisplay.textContent = tokenData.userBalance.toLocaleString();
walletUsdValueDisplay.textContent = `≈ $${(tokenData.userBalance * tokenData.exchangeRate).toLocaleString(undefined, {maximumFractionDigits: 2})}`;
walletModal.classList.add('active');
}
function closeWalletModalFunc() {
walletModal.classList.remove('active');
}
function showReceiveAddress() {
showToast("Receive address copied to clipboard");
// In a real app, this would show a QR code and address
}
function showSendForm() {
showToast("Send form would open here");
// In a real app, this would show a form to send tokens
}
// Help Modal Functions
function openHelpModal() {
helpModal.classList.add('active');
}
function closeHelpModalFunc() {
helpModal.classList.remove('active');
}
// Market Share Timer Variables
let marketShareTimer;
let marketShareLossInterval;
let totalSeconds = 0;
let currentLossPercentage = 0;
let currentRegainPercentage = 0;
let lossRate = 0.5; // % per month
let recoveryRate = 0.25; // % per month from minting
let isMarketShareModalOpen = false;
// Market Share Modal Functions
function openMarketShareModal() {
if (!currentLoanData) {
showToast("Please calculate financing terms first");
return;
}
marketShareModal.classList.add('active');
isMarketShareModalOpen = true;
updateMarketShareAnalysis();
// Start the timer if not already running
if (!marketShareTimer) {
startMarketShareTimer();
}
}
function closeMarketShareModalFunc() {
marketShareModal.classList.remove('active');
isMarketShareModalOpen = false;
}
function startMarketShareTimer() {
// Clear any existing interval
if (marketShareLossInterval) {
clearInterval(marketShareLossInterval);
}
// Calculate loss rate based on tariff percentage (higher tariff = faster loss)
lossRate = Math.min(2, Math.max(0.1, currentLoanData.tariff * 0.05));
// Calculate recovery rate based on minted tokens
recoveryRate = Math.min(1.5, tokenData.userBalance / 1000000 * 0.25);
// Update rates display
document.getElementById('marketShareLossRate').textContent = `${lossRate.toFixed(2)}%/month`;
document.getElementById('mintingRecoveryRate').textContent = `${recoveryRate.toFixed(2)}%/month`;
// Start counting
marketShareLossInterval = setInterval(updateMarketShareLoss, 1000);
}
function updateMarketShareLoss() {
// Increment timer
totalSeconds++;
// Update timer display
const hours = Math.floor(totalSeconds / 3600);
const minutes = Math.floor((totalSeconds % 3600) / 60);
const seconds = totalSeconds % 60;
document.getElementById('marketShareTimer').textContent =
`${hours.toString().padStart(2, '0')}:${minutes.toString().padStart(2, '0')}:${seconds.toString().padStart(2, '0')}`;
// Calculate loss (simulating real-time loss)
// Each second represents 1 day in our simulation (30 days = 1 month)
const daysPassed = totalSeconds / (24 * 60 * 60) * 30; // Convert seconds to simulated months
const newLoss = Math.min(100, daysPassed * lossRate);
const newRegain = Math.min(newLoss, daysPassed * recoveryRate);
currentLossPercentage = newLoss;
currentRegainPercentage = newRegain;
// Update displays
document.getElementById('marketShareLossBar').style.width = `${newLoss}%`;
document.getElementById('marketShareRegainBar').style.width = `${newRegain}%`;
document.getElementById('currentLossDisplay').textContent = `${newLoss.toFixed(2)}% lost`;
document.getElementById('currentRegainDisplay').textContent = `${newRegain.toFixed(2)}% regained`;
// Update 5-year projection (60 months)
const fiveYearLoss = Math.min(100, 60 * lossRate);
const fiveYearRegain = Math.min(fiveYearLoss, 60 * recoveryRate);
document.getElementById('fiveYearLoss').textContent = `${(fiveYearLoss - fiveYearRegain).toFixed(1)}%`;
document.getElementById('mintingImpact').textContent = `${fiveYearRegain.toFixed(1)}%`;
// Update analysis note
document.getElementById('marketShareCountdownNote').innerHTML =
`Market share is being lost at a rate of <span class="font-medium">${lossRate.toFixed(2)}% per month</span>.
Minting FFFUND tokens can help recover lost market share at <span class="font-medium">${recoveryRate.toFixed(2)}% per month</span>.`;
// Update gauge position
const gaugePosition = 100 - (newLoss / (newLoss + (100 - newLoss)) * 100);
document.getElementById('gaugePointer').style.left = `${gaugePosition}%`;
}
function updateMarketShareAnalysis() {
// Calculate market share impact based on tariff percentage
const tariff = currentLoanData.tariff;
// Market share loss increases with higher tariffs (0-20% range)
const shareLoss = Math.min(20, tariff * 0.4);
// Cost savings increase with higher tariffs (0-30% range)
const savings = Math.min(30, tariff * 0.6);
// Calculate position on gauge (0-100% where 0 is all loss, 100 is all savings)
const gaugePosition = 100 - (shareLoss / (shareLoss + savings) * 100);
document.getElementById('gaugePointer').style.left = `${gaugePosition}%`;
// Update analysis text with industry-specific context
let analysisText = "";
if (!currentIndustry) {
analysisText = "No product category selected for tariff analysis.";
} else if (tariff < 10) {
analysisText = `Low ${currentIndustry.name} tariff (${tariff}%) results in minimal market share impact but limited cost savings.`;
} else if (tariff < 20) {
analysisText = `Moderate ${currentIndustry.name} tariff (${tariff}%) provides good balance between market share impact and cost savings.`;
} else {
analysisText = `High ${currentIndustry.name} tariff (${tariff}%) provides significant cost savings but may substantially impact market share.`;
}
document.getElementById('marketShareAnalysis').textContent = analysisText;
// Update rates based on current tariff
lossRate = Math.min(2, Math.max(0.1, tariff * 0.05));
document.getElementById('marketShareLossRate').textContent = `${lossRate.toFixed(2)}%/month`;
// Update recovery rate based on minted tokens
recoveryRate = Math.min(1.5, tokenData.userBalance / 1000000 * 0.25);
document.getElementById('mintingRecoveryRate').textContent = `${recoveryRate.toFixed(2)}%/month`;
document.getElementById('mintingImpact').textContent = `${(60 * recoveryRate).toFixed(1)}%`;
}
// Show toast notification
function showToast(message) {
successMessage.textContent = message;
successToast.classList.remove('hidden');
successToast.classList.remove('translate-y-16');
successToast.classList.add('translate-y-0');
setTimeout(() => {
successToast.classList.remove('translate-y-0');
successToast.classList.add('translate-y-16');
setTimeout(() => {
successToast.classList.add('hidden');
}, 300);
}, 3000);
}
// Initialize the app
function init() {
initEventListeners();
updateTariffValue();
}
// Start the app when DOM is loaded
document.addEventListener('DOMContentLoaded', init);
</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/privfin-vbeta1-03" style="color: #fff;text-decoration: underline;" target="_blank" >Remix</a></p></body>
</html>