Hugging Face's logo

Spaces:
privateuserh
/
privfin-vbeta1-04
Running

App Files Community
privfin-vbeta1-04 / index.html
privateuserh's picture
privateuserh
Add 2 files
6302863 verified
raw
history blame contribute delete
48.1 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);
}
.floating-btn-quaternary {
position: fixed;
bottom: 240px;
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-quaternary: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);
}
.credit-rating-badge {
display: inline-flex;
align-items: center;
padding: 0.25rem 0.5rem;
border-radius: 9999px;
font-size: 0.75rem;
font-weight: 600;
}
.economic-indicator {
display: flex;
justify-content: space-between;
padding: 0.5rem 0;
border-bottom: 1px solid #e5e7eb;
}
.economic-indicator:last-child {
border-bottom: none;
}
.credit-rating-AAA { background-color: #10b981; color: white; }
.credit-rating-AA { background-color: #34d399; color: white; }
.credit-rating-A { background-color: #60a5fa; color: white; }
.credit-rating-BBB { background-color: #f59e0b; color: white; }
.credit-rating-BB { background-color: #f97316; color: white; }
.credit-rating-B { background-color: #ef4444; color: white; }
.credit-rating-CCC { background-color: #dc2626; color: white; }
.credit-rating-CC { background-color: #991b1b; color: white; }
.credit-rating-C { background-color: #7c3aed; color: white; }
.credit-rating-D { background-color: #000000; color: white; }
</style>
</head>
<body class="bg-gray-50 min-h-screen">
<div class="container mx-auto px-4 py-12 max-w-4xl">
<div class="text-center mb-12">
<h1 class="text-4xl font-bold text-blue-800 mb-2">Global Trade Finance Calculator</h1>
<p class="text-lg text-gray-600">Calculate trade financing costs with real-world tariff rates</p>
</div>
<div class="bg-white rounded-xl shadow-lg p-6 mb-8">
<div class="grid grid-cols-1 md:grid-cols-2 gap-6">
<div>
<label class="block text-gray-700 font-medium mb-2">Trade Amount ($)</label>
<input type="number" id="loanAmount" class="w-full px-4 py-3 border border-gray-300 rounded-lg focus:ring-2 focus:ring-blue-500 focus:border-blue-500" placeholder="e.g. 100000" value="100000">
</div>
<div>
<label class="block text-gray-700 font-medium mb-2">Base Interest Rate (%)</label>
<input type="number" id="primeRate" class="w-full px-4 py-3 border border-gray-300 rounded-lg focus:ring-2 focus:ring-blue-500 focus:border-blue-500" placeholder="e.g. 7.5" value="7.5" step="0.01">
</div>
</div>
<div class="mt-6">
<label class="block text-gray-700 font-medium mb-2">Importing Country</label>
<select id="importCountry" class="w-full px-4 py-3 border border-gray-300 rounded-lg focus:ring-2 focus:ring-blue-500 focus:border-blue-500 mb-4">
<option value="US">United States</option>
<option value="EU">European Union</option>
<option value="CN">China</option>
<option value="JP">Japan</option>
<option value="CA">Canada</option>
<option value="MX">Mexico</option>
<option value="IN">India</option>
<option value="BR">Brazil</option>
</select>
</div>
<div class="mt-2">
<label class="block text-gray-700 font-medium mb-2">Product Category</label>
<select id="industrySelect" class="w-full px-4 py-3 border border-gray-300 rounded-lg focus:ring-2 focus:ring-blue-500 focus:border-blue-500">
<option value="">Select a product category</option>
<option value="steel">Steel & Aluminum</option>
<option value="agriculture">Agricultural Products</option>
<option value="automotive">Automotive & Parts</option>
<option value="electronics">Consumer Electronics</option>
<option value="textiles">Textiles & Apparel</option>
<option value="chemicals">Chemicals</option>
<option value="machinery">Industrial Machinery</option>
<option value="pharmaceuticals">Pharmaceuticals</option>
<option value="custom">Custom Tariff</option>
</select>
</div>
<div class="mt-6 hidden" id="customTariffSection">
<label class="block text-gray-700 font-medium mb-2">Custom Tariff Percentage (0-100%)</label>
<input type="range" id="tariffSlider" min="0" max="100" value="5" class="w-full tariff-slider h-2 bg-gray-200 rounded-lg appearance-none cursor-pointer">
<div class="flex justify-between mt-2">
<span class="text-sm text-gray-500">0%</span>
<span id="tariffValue" class="font-medium text-blue-600">5%</span>
<span class="text-sm text-gray-500">100%</span>
</div>
</div>
<div class="mt-6 bg-blue-50 p-4 rounded-lg">
<div class="flex justify-between items-center">
<span class="text-blue-700 font-medium">Total Tariff Impact:</span>
<span id="totalTariffDisplay" class="text-xl font-bold text-blue-800">$0 (0%)</span>
</div>
<div id="tariffBreakdown" class="mt-2 text-sm text-blue-600">
<!-- Tariff breakdown will appear here -->
</div>
<div id="tariffImpactMeter" class="tariff-impact-meter hidden">
<div id="tariffImpactBar" class="tariff-impact-bar" style="width: 0%"></div>
</div>
</div>
<div class="mt-8">
<button id="calculateBtn" class="w-full bg-blue-600 hover:bg-blue-700 text-white font-bold py-3 px-4 rounded-lg transition duration-300 transform hover:scale-105 animate-pulse">
Calculate Trade Financing
</button>
</div>
</div>
<div id="results" class="bg-white rounded-xl shadow-lg p-6 hidden">
<h2 class="text-2xl font-bold text-gray-800 mb-4">Trade Finance Summary</h2>
<div class="grid grid-cols-1 md:grid-cols-3 gap-4 mb-6">
<div class="bg-blue-50 p-4 rounded-lg">
<p class="text-sm text-blue-600 font-medium">Total Financing Needed</p>
<p id="totalLoan" class="text-2xl font-bold text-blue-800">$105,000</p>
</div>
<div class="bg-green-50 p-4 rounded-lg">
<p class="text-sm text-green-600 font-medium">Effective Interest Rate</p>
<p id="effectiveRate" class="text-2xl font-bold text-green-800">7.88%</p>
</div>
<div class="bg-purple-50 p-4 rounded-lg">
<p class="text-sm text-purple-600 font-medium">Monthly Payment</p>
<p id="monthlyPayment" class="text-2xl font-bold text-purple-800">$2,123</p>
</div>
</div>
<div class="grid grid-cols-1 md:grid-cols-2 gap-4 mb-6">
<div class="bg-yellow-50 p-4 rounded-lg">
<p class="text-sm text-yellow-600 font-medium">Total Tariff Cost</p>
<p id="totalTariffCost" class="text-xl font-bold text-yellow-800">$5,000</p>
</div>
<div class="bg-red-50 p-4 rounded-lg">
<p class="text-sm text-red-600 font-medium">Total Interest Cost</p>
<p id="totalInterestCost" class="text-xl font-bold text-red-800">$12,345</p>
</div>
</div>
<h3 class="text-lg font-semibold text-gray-700 mb-3">5-Year Amortization Schedule</h3>
<div class="overflow-x-auto">
<table class="min-w-full bg-white rounded-lg overflow-hidden">
<thead class="bg-gray-100">
<tr>
<th class="py-3 px-4 text-left text-gray-600">Year</th>
<th class="py-3 px-4 text-right text-gray-600">Principal</th>
<th class="py-3 px-4 text-right text-gray-600">Interest</th>
<th class="py-3 px-4 text-right text-gray-600">Balance</th>
</tr>
</thead>
<tbody id="amortizationTable" class="divide-y divide-gray-200">
<!-- Amortization data will be inserted here -->
</tbody>
</table>
</div>
</div>
</div>
<!-- Floating Buttons -->
<button id="buyDownBtn" class="floating-btn bg-blue-600 text-white flex items-center justify-center hover:bg-blue-700">
<i class="fas fa-percentage text-2xl"></i>
</button>
<button id="marketShareBtn" class="floating-btn-secondary bg-green-600 text-white flex items-center justify-center hover:bg-green-700">
<i class="fas fa-chart-pie text-2xl"></i>
</button>
<button id="tokenMintBtn" class="floating-btn-tertiary bg-purple-600 text-white flex items-center justify-center hover:bg-purple-700">
<i class="fas fa-coins text-2xl"></i>
</button>
<button id="creditRatingBtn" class="floating-btn-quaternary bg-amber-600 text-white flex items-center justify-center hover:bg-amber-700">
<i class="fas fa-star text-2xl"></i>
</button>
<!-- Buy Down Modal -->
<div id="buyDownModal" 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">Interest Rate Buy Down</h3>
<button id="closeModal" class="text-gray-500 hover:text-gray-700">
<i class="fas fa-times"></i>
</button>
</div>
<div class="mb-4">
<label class="block text-gray-700 font-medium mb-2">Buy Down Points (0-5)</label>
<input type="range" id="buyDownSlider" min="0" max="5" value="0" step="0.25" class="w-full tariff-slider h-2 bg-gray-200 rounded-lg appearance-none cursor-pointer">
<div class="flex justify-between mt-2">
<span class="text-sm text-gray-500">0 points</span>
<span id="buyDownValue" class="font-medium text-blue-600">0 points</span>
<span class="text-sm text-gray-500">5 points</span>
</div>
<p class="text-sm text-gray-500 mt-2">Each point reduces rate by 0.25% (costs 1% of loan amount)</p>
</div>
<div class="mb-4">
<label class="block text-gray-700 font-medium mb-2">Fractal Bitcoin Mining Address</label>
<input type="text" id="bitcoinAddress" class="w-full px-4 py-3 border border-gray-300 rounded-lg focus:ring-2 focus:ring-blue-500 focus:border-blue-500 bitcoin-address" placeholder="bc1qxy2kgdygjrsqtzq2n0yrf249nw3q2k6x..." pattern="^(bc1|[13])[a-zA-HJ-NP-Z0-9]{25,39}$">
<p class="text-xs text-gray-500 mt-1">Enter your Bitcoin address to apply mining rewards to loan</p>
</div>
<div class="mining-estimate p-4 rounded-lg mb-4">
<h4 class="font-medium text-yellow-800 mb-2">Quarterly Mining Estimate</h4>
<div class="grid grid-cols-2 gap-2">
<div>
<p class="text-xs text-yellow-700">Estimated BTC Mined:</p>
<p id="estimatedBTC" class="font-bold">0.0025 BTC</p>
</div>
<div>
<p class="text-xs text-yellow-700">Buydown Points:</p>
<p id="miningPoints" class="font-bold">0.5 points</p>
</div>
<div>
<p class="text-xs text-yellow-700">Rate Reduction:</p>
<p id="miningRateReduction" class="font-bold">0.125%</p>
</div>
<div>
<p class="text-xs text-yellow-700">Loan Impact:</p>
<p id="miningLoanImpact" class="font-bold">-$1,250</p>
</div>
</div>
<p class="text-xs text-yellow-700 mt-2">* Estimates based on current mining difficulty and BTC price</p>
</div>
<div class="bg-blue-50 p-4 rounded-lg mb-4">
<p class="text-sm text-blue-600 font-medium">New Interest Rate</p>
<p id="newRate" class="text-xl font-bold text-blue-800">7.50%</p>
<p class="text-sm text-blue-600 font-medium mt-2">Buy Down Cost</p>
<p id="buyDownCost" class="text-xl font-bold text-blue-800">$0</p>
</div>
<button id="applyBuyDown" class="w-full bg-blue-600 hover:bg-blue-700 text-white font-bold py-3 px-4 rounded-lg transition duration-300">
Apply Buy Down
</button>
</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 mb-2">
<span class="font-medium text-red-600">Market Share Loss</span>
<span id="marketShareLoss" class="font-bold">5%</span>
</div>
<div class="flex justify-between mb-4">
<span class="font-medium text-green-600">Cost Savings</span>
<span id="costSavings" class="font-bold">15%</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>
</div>
<button id="closeMarketShareBtn" class="w-full bg-green-600 hover:bg-green-700 text-white font-bold py-3 px-4 rounded-lg transition duration-300">
Close
</button>
</div>
</div>
<!-- Token Minting 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="closeTokenModal" class="text-gray-500 hover:text-gray-700">
<i class="fas fa-times"></i>
</button>
</div>
<div class="yield-farming-card mb-6">
<div class="flex justify-between items-center mb-2">
<span class="font-bold text-purple-700">Fabric Flow Fund™ (FFFUND)</span>
<span class="bg-purple-100 text-purple-800 text-xs font-medium px-2.5 py-0.5 rounded">BRC-20</span>
</div>
<p class="text-sm text-gray-600 mb-3">Yield farming token to fund your business loan with competitive APY</p>
<div class="grid grid-cols-2 gap-4 mb-3">
<div>
<p class="text-xs text-gray-500">Total Supply</p>
<p class="font-medium">50,000,000,000</p>
</div>
<div>
<p class="text-xs text-gray-500">Min Mint</p>
<p class="font-medium">10,000</p>
</div>
<div>
<p class="text-xs text-gray-500">Current APY</p>
<p class="font-medium text-green-600">11.0%</p>
</div>
<div>
<p class="text-xs text-gray-500">Your Balance</p>
<p class="font-medium">0</p>
</div>
</div>
<div class="mb-2">
<p class="text-xs text-gray-500">Mint Progress</p>
<div class="token-progress">
<div id="tokenProgressBar" class="token-progress-bar" style="width: 0%"></div>
</div>
<p class="text-right text-xs mt-1"><span id="tokensMinted">0</span>/10,000</p>
</div>
</div>
<div class="mb-4">
<label class="block text-gray-700 font-medium mb-2">Amount to Mint</label>
<input type="number" id="tokenAmount" class="w-full px-4 py-3 border border-gray-300 rounded-lg focus:ring-2 focus:ring-purple-500 focus:border-purple-500" placeholder="e.g. 10000" min="10000" step="1000">
</div>
<div class="bg-purple-50 p-4 rounded-lg mb-4">
<p class="text-sm text-purple-600 font-medium">Estimated Annual Yield</p>
<p id="estimatedYield" class="text-xl font-bold text-purple-800">0 FFFUND</p>
<p class="text-sm text-purple-600 font-medium mt-2">Loan Impact</p>
<p id="tokenLoanImpact" class="text-xl font-bold text-purple-800">-$0</p>
</div>
<button id="mintTokensBtn" class="w-full bg-purple-600 hover:bg-purple-700 text-white font-bold py-3 px-4 rounded-lg transition duration-300">
Mint Tokens
</button>
</div>
</div>
<!-- Credit Rating Modal -->
<div id="creditRatingModal" 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">Country Credit Rating</h3>
<button id="closeCreditRatingModal" class="text-gray-500 hover:text-gray-700">
<i class="fas fa-times"></i>
</button>
</div>
<div class="mb-4">
<label class="block text-gray-700 font-medium mb-2">Select Country</label>
<select id="countrySelect" class="w-full px-4 py-3 border border-gray-300 rounded-lg focus:ring-2 focus:ring-amber-500 focus:border-amber-500">
<option value="US">United States</option>
<option value="DE">Germany</option>
<option value="GB">United Kingdom</option>
<option value="FR">France</option>
<option value="JP">Japan</option>
<option value="CN">China</option>
<option value="IN">India</option>
<option value="BR">Brazil</option>
<option value="RU">Russia</option>
<option value="ZA">South Africa</option>
</select>
</div>
<div class="bg-amber-50 p-4 rounded-lg mb-4">
<div class="flex justify-between items-center mb-2">
<span class="font-medium text-gray-700">Current Rating:</span>
<span id="creditRating" class="credit-rating-badge credit-rating-AAA">AAA</span>
</div>
<div class="flex justify-between items-center">
<span class="font-medium text-gray-700">Outlook:</span>
<span id="creditOutlook" class="text-green-600 font-medium">Stable</span>
</div>
</div>
<div id="economicIndicators" class="mb-4">
<h4 class="font-medium text-gray-700 mb-2">Key Economic Indicators</h4>
<div class="economic-indicator">
<span>GDP Growth</span>
<span id="gdpGrowth" class="font-medium">2.1%</span>
</div>
<div class="economic-indicator">
<span>Inflation Rate</span>
<span id="inflationRate" class="font-medium">3.2%</span>
</div>
<div class="economic-indicator">
<span>Unemployment</span>
<span id="unemploymentRate" class="font-medium">4.5%</span>
</div>
<div class="economic-indicator">
<span>Debt to GDP</span>
<span id="debtToGDP" class="font-medium">110%</span>
</div>
</div>
<div class="bg-gray-50 p-4 rounded-lg">
<p class="text-sm text-gray-700">
<span class="font-medium">Analysis:</span>
<span id="creditAnalysis">The country maintains a strong credit profile with stable economic growth and manageable debt levels.</span>
</p>
</div>
<button id="closeCreditRatingBtn" class="w-full bg-amber-600 hover:bg-amber-700 text-white font-bold py-3 px-4 rounded-lg transition duration-300 mt-4">
Close
</button>
</div>
</div>
<script>
// DOM Elements
const loanAmountInput = document.getElementById('loanAmount');
const primeRateInput = document.getElementById('primeRate');
const importCountrySelect = document.getElementById('importCountry');
const industrySelect = document.getElementById('industrySelect');
const customTariffSection = document.getElementById('customTariffSection');
const tariffSlider = document.getElementById('tariffSlider');
const tariffValue = document.getElementById('tariffValue');
const totalTariffDisplay = document.getElementById('totalTariffDisplay');
const tariffBreakdown = document.getElementById('tariffBreakdown');
const tariffImpactMeter = document.getElementById('tariffImpactMeter');
const tariffImpactBar = document.getElementById('tariffImpactBar');
const calculateBtn = document.getElementById('calculateBtn');
const resultsSection = document.getElementById('results');
const totalLoan = document.getElementById('totalLoan');
const effectiveRate = document.getElementById('effectiveRate');
const monthlyPayment = document.getElementById('monthlyPayment');
const totalTariffCost = document.getElementById('totalTariffCost');
const totalInterestCost = document.getElementById('totalInterestCost');
const amortizationTable = document.getElementById('amortizationTable');
// Floating buttons and modals
const buyDownBtn = document.getElementById('buyDownBtn');
const marketShareBtn = document.getElementById('marketShareBtn');
const tokenMintBtn = document.getElementById('tokenMintBtn');
const creditRatingBtn = document.getElementById('creditRatingBtn');
const buyDownModal = document.getElementById('buyDownModal');
const marketShareModal = document.getElementById('marketShareModal');
const tokenMintModal = document.getElementById('tokenMintModal');
const creditRatingModal = document.getElementById('creditRatingModal');
const closeModal = document.getElementById('closeModal');
const closeMarketShareModal = document.getElementById('closeMarketShareModal');
const closeTokenModal = document.getElementById('closeTokenModal');
const closeCreditRatingModal = document.getElementById('closeCreditRatingModal');
const closeMarketShareBtn = document.getElementById('closeMarketShareBtn');
const closeCreditRatingBtn = document.getElementById('closeCreditRatingBtn');
// Buy Down Modal Elements
const buyDownSlider = document.getElementById('buyDownSlider');
const buyDownValue = document.getElementById('buyDownValue');
const bitcoinAddress = document.getElementById('bitcoinAddress');
const estimatedBTC = document.getElementById('estimatedBTC');
const miningPoints = document.getElementById('miningPoints');
const miningRateReduction = document.getElementById('miningRateReduction');
const miningLoanImpact = document.getElementById('miningLoanImpact');
const newRate = document.getElementById('newRate');
const buyDownCost = document.getElementById('buyDownCost');
const applyBuyDown = document.getElementById('applyBuyDown');
// Token Minting Modal Elements
const tokenAmount = document.getElementById('tokenAmount');
const tokenProgressBar = document.getElementById('tokenProgressBar');
const tokensMinted = document.getElementById('tokensMinted');
const estimatedYield = document.getElementById('estimatedYield');
const tokenLoanImpact = document.getElementById('tokenLoanImpact');
const mintTokensBtn = document.getElementById('mintTokensBtn');
// Credit Rating Modal Elements
const countrySelect = document.getElementById('countrySelect');
const creditRating = document.getElementById('creditRating');
const creditOutlook = document.getElementById('creditOutlook');
const gdpGrowth = document.getElementById('gdpGrowth');
const inflationRate = document.getElementById('inflationRate');
const unemploymentRate = document.getElementById('unemploymentRate');
const debtToGDP = document.getElementById('debtToGDP');
const creditAnalysis = document.getElementById('creditAnalysis');
// Tariff data
const tariffRates = {
steel: { US: 25, EU: 10, CN: 15, JP: 5, CA: 7, MX: 15, IN: 20, BR: 12 },
agriculture: { US: 5, EU: 12, CN: 8, JP: 15, CA: 3, MX: 10, IN: 25, BR: 8 },
automotive: { US: 2.5, EU: 10, CN: 15, JP: 0, CA: 0, MX: 0, IN: 30, BR: 20 },
electronics: { US: 0, EU: 2, CN: 0, JP: 0, CA: 0, MX: 0, IN: 10, BR: 5 },
textiles: { US: 12, EU: 8, CN: 5, JP: 7, CA: 10, MX: 15, IN: 18, BR: 12 },
chemicals: { US: 3, EU: 5, CN: 4, JP: 2, CA: 2, MX: 5, IN: 8, BR: 6 },
machinery: { US: 1.5, EU: 3, CN: 2, JP: 1, CA: 0, MX: 2, IN: 7, BR: 4 },
pharmaceuticals: { US: 0, EU: 0, CN: 3, JP: 0, CA: 0, MX: 0, IN: 5, BR: 2 }
};
// Credit rating data
const creditRatings = {
US: { rating: 'AA+', outlook: 'Stable', gdp: 2.1, inflation: 3.2, unemployment: 3.8, debt: 123 },
DE: { rating: 'AAA', outlook: 'Stable', gdp: 1.5, inflation: 2.8, unemployment: 3.0, debt: 65 },
GB: { rating: 'AA-', outlook: 'Negative', gdp: 0.8, inflation: 4.5, unemployment: 4.2, debt: 98 },
FR: { rating: 'AA', outlook: 'Stable', gdp: 1.2, inflation: 3.1, unemployment: 7.5, debt: 112 },
JP: { rating: 'A+', outlook: 'Stable', gdp: 1.0, inflation: 2.5, unemployment: 2.6, debt: 260 },
CN: { rating: 'A-', outlook: 'Negative', gdp: 5.2, inflation: 1.8, unemployment: 5.3, debt: 77 },
IN: { rating: 'BBB-', outlook: 'Stable', gdp: 6.5, inflation: 5.8, unemployment: 7.8, debt: 84 },
BR: { rating: 'BB-', outlook: 'Positive', gdp: 3.0, inflation: 4.2, unemployment: 9.1, debt: 88 },
RU: { rating: 'B', outlook: 'Negative', gdp: -2.5, inflation: 7.8, unemployment: 4.8, debt: 18 },
ZA: { rating: 'BB', outlook: 'Stable', gdp: 1.8, inflation: 5.5, unemployment: 32.7, debt: 72 }
};
// Event Listeners
industrySelect.addEventListener('change', updateTariffDisplay);
tariffSlider.addEventListener('input', updateCustomTariff);
calculateBtn.addEventListener('click', calculateLoan);
buyDownBtn.addEventListener('click', () => toggleModal(buyDownModal));
marketShareBtn.addEventListener('click', () => toggleModal(marketShareModal));
tokenMintBtn.addEventListener('click', () => toggleModal(tokenMintModal));
creditRatingBtn.addEventListener('click', () => {
toggleModal(creditRatingModal);
updateCreditRating();
});
closeModal.addEventListener('click', () => toggleModal(buyDownModal));
closeMarketShareModal.addEventListener('click', () => toggleModal(marketShareModal));
closeTokenModal.addEventListener('click', () => toggleModal(tokenMintModal));
closeCreditRatingModal.addEventListener('click', () => toggleModal(creditRatingModal));
closeMarketShareBtn.addEventListener('click', () => toggleModal(marketShareModal));
closeCreditRatingBtn.addEventListener('click', () => toggleModal(creditRatingModal));
buyDownSlider.addEventListener('input', updateBuyDown);
bitcoinAddress.addEventListener('input', updateMiningEstimate);
tokenAmount.addEventListener('input', updateTokenEstimate);
countrySelect.addEventListener('change', updateCreditRating);
applyBuyDown.addEventListener('click', applyBuyDownPoints);
mintTokensBtn.addEventListener('click', mintTokens);
// Initialize
updateTariffDisplay();
// Functions
function toggleModal(modal) {
modal.classList.toggle('active');
}
function updateTariffDisplay() {
const selectedIndustry = industrySelect.value;
const selectedCountry = importCountrySelect.value;
if (selectedIndustry === 'custom') {
customTariffSection.classList.remove('hidden');
updateCustomTariff();
} else if (selectedIndustry) {
customTariffSection.classList.add('hidden');
const tariffRate = tariffRates[selectedIndustry][selectedCountry];
const loanAmount = parseFloat(loanAmountInput.value);
const tariffAmount = (loanAmount * tariffRate) / 100;
totalTariffDisplay.textContent = `$${tariffAmount.toLocaleString()} (${tariffRate}%)`;
tariffBreakdown.innerHTML = `
<span class="tariff-badge bg-blue-100 text-blue-800">${selectedCountry}</span>
<span class="tariff-badge bg-green-100 text-green-800">${selectedIndustry.replace(/\b\w/g, l => l.toUpperCase())}</span>
`;
tariffImpactMeter.classList.remove('hidden');
tariffImpactBar.style.width = `${Math.min(tariffRate, 100)}%`;
} else {
totalTariffDisplay.textContent = '$0 (0%)';
tariffBreakdown.innerHTML = '';
tariffImpactMeter.classList.add('hidden');
}
}
function updateCustomTariff() {
const tariffRate = parseFloat(tariffSlider.value);
tariffValue.textContent = `${tariffRate}%`;
const loanAmount = parseFloat(loanAmountInput.value);
const tariffAmount = (loanAmount * tariffRate) / 100;
totalTariffDisplay.textContent = `$${tariffAmount.toLocaleString()} (${tariffRate}%)`;
tariffBreakdown.innerHTML = `
<span class="tariff-badge bg-blue-100 text-blue-800">Custom</span>
`;
tariffImpactMeter.classList.remove('hidden');
tariffImpactBar.style.width = `${tariffRate}%`;
}
function calculateLoan() {
const loanAmount = parseFloat(loanAmountInput.value);
const baseRate = parseFloat(primeRateInput.value);
const selectedIndustry = industrySelect.value;
const selectedCountry = importCountrySelect.value;
let tariffRate;
if (selectedIndustry === 'custom') {
tariffRate = parseFloat(tariffSlider.value);
} else if (selectedIndustry) {
tariffRate = tariffRates[selectedIndustry][selectedCountry];
} else {
tariffRate = 0;
}
const tariffAmount = (loanAmount * tariffRate) / 100;
const totalLoanAmount = loanAmount + tariffAmount;
// Calculate effective rate (base rate + 0.5% for tariff financing)
const effectiveInterestRate = baseRate + 0.5;
// Calculate monthly payment (5-year term)
const monthlyRate = effectiveInterestRate / 100 / 12;
const numPayments = 5 * 12;
const monthlyPaymentAmount = totalLoanAmount * monthlyRate * Math.pow(1 + monthlyRate, numPayments) / (Math.pow(1 + monthlyRate, numPayments) - 1);
// Calculate total interest
const totalInterest = (monthlyPaymentAmount * numPayments) - totalLoanAmount;
// Update UI
totalLoan.textContent = `$${totalLoanAmount.toLocaleString()}`;
effectiveRate.textContent = `${effectiveInterestRate.toFixed(2)}%`;
monthlyPayment.textContent = `$${monthlyPaymentAmount.toFixed(0)}`;
totalTariffCost.textContent = `$${tariffAmount.toLocaleString()}`;
totalInterestCost.textContent = `$${totalInterest.toLocaleString()}`;
// Generate amortization table
generateAmortizationTable(totalLoanAmount, effectiveInterestRate, numPayments);
// Show results
resultsSection.classList.remove('hidden');
}
function generateAmortizationTable(loanAmount, annualRate, numPayments) {
const monthlyRate = annualRate / 100 / 12;
let balance = loanAmount;
let html = '';
for (let year = 1; year <= 5; year++) {
let yearInterest = 0;
let yearPrincipal = 0;
for (let month = 1; month <= 12; month++) {
const interestPayment = balance * monthlyRate;
const principalPayment = (loanAmount * monthlyRate * Math.pow(1 + monthlyRate, numPayments)) / (Math.pow(1 + monthlyRate, numPayments) - 1) - interestPayment;
yearInterest += interestPayment;
yearPrincipal += principalPayment;
balance -= principalPayment;
}
html += `
<tr>
<td class="py-3 px-4">Year ${year}</td>
<td class="py-3 px-4 text-right">$${yearPrincipal.toFixed(0).toLocaleString()}</td>
<td class="py-3 px-4 text-right">$${yearInterest.toFixed(0).toLocaleString()}</td>
<td class="py-3 px-4 text-right">$${balance.toFixed(0).toLocaleString()}</td>
</tr>
`;
}
amortizationTable.innerHTML = html;
}
function updateBuyDown() {
const points = parseFloat(buyDownSlider.value);
buyDownValue.textContent = `${points} point${points !== 1 ? 's' : ''}`;
const loanAmount = parseFloat(loanAmountInput.value);
const baseRate = parseFloat(primeRateInput.value);
const cost = (loanAmount * points) / 100;
const newInterestRate = baseRate - (points * 0.25);
buyDownCost.textContent = `$${cost.toLocaleString()}`;
newRate.textContent = `${newInterestRate.toFixed(2)}%`;
}
function updateMiningEstimate() {
// Simulate mining estimate
estimatedBTC.textContent = "0.0025 BTC";
miningPoints.textContent = "0.5 points";
miningRateReduction.textContent = "0.125%";
miningLoanImpact.textContent = "-$1,250";
}
function applyBuyDownPoints() {
const points = parseFloat(buyDownSlider.value);
const baseRate = parseFloat(primeRateInput.value);
const newRateValue = baseRate - (points * 0.25);
primeRateInput.value = newRateValue.toFixed(2);
toggleModal(buyDownModal);
// Show success message
alert(`Successfully applied ${points} buy down points. New rate: ${newRateValue.toFixed(2)}%`);
}
function updateTokenEstimate() {
const amount = parseInt(tokenAmount.value) || 0;
const progress = Math.min((amount / 10000) * 100, 100);
tokenProgressBar.style.width = `${progress}%`;
tokensMinted.textContent = amount.toLocaleString();
// Calculate yield (11% APY)
const annualYield = amount * 0.11;
estimatedYield.textContent = `${annualYield.toLocaleString()} FFFUND`;
// Calculate loan impact ($0.10 per token)
const loanImpact = amount * 0.10;
tokenLoanImpact.textContent = `-$${loanImpact.toLocaleString()}`;
}
function mintTokens() {
const amount = parseInt(tokenAmount.value) || 0;
if (amount < 10000) {
alert("Minimum mint amount is 10,000 FFFUND tokens");
return;
}
// Show success message
alert(`Successfully minted ${amount.toLocaleString()} FFFUND tokens. Your annual yield will be approximately ${(amount * 0.11).toLocaleString()} FFFUND.`);
// Reset form
tokenAmount.value = '';
updateTokenEstimate();
toggleModal(tokenMintModal);
}
function updateCreditRating() {
const countryCode = countrySelect.value;
const ratingData = creditRatings[countryCode];
// Update rating
creditRating.textContent = ratingData.rating;
creditRating.className = 'credit-rating-badge';
creditRating.classList.add(`credit-rating-${ratingData.rating.replace(/[+-]/g, '')}`);
// Update outlook
creditOutlook.textContent = ratingData.outlook;
if (ratingData.outlook === 'Positive') {
creditOutlook.className = 'text-green-600 font-medium';
} else if (ratingData.outlook === 'Negative') {
creditOutlook.className = 'text-red-600 font-medium';
} else {
creditOutlook.className = 'text-gray-600 font-medium';
}
// Update economic indicators
gdpGrowth.textContent = `${ratingData.gdp}%`;
inflationRate.textContent = `${ratingData.inflation}%`;
unemploymentRate.textContent = `${ratingData.unemployment}%`;
debtToGDP.textContent = `${ratingData.debt}%`;
// Update analysis
let analysis = '';
if (ratingData.rating.startsWith('AAA')) {
analysis = 'The country maintains an exceptional credit profile with strong economic fundamentals and very low risk.';
} else if (ratingData.rating.startsWith('AA')) {
analysis = 'The country has a very strong credit profile with robust economic indicators and low risk.';
} else if (ratingData.rating.startsWith('A')) {
analysis = 'The country has a strong credit profile but may be more susceptible to adverse economic conditions.';
} else if (ratingData.rating.startsWith('BBB')) {
analysis = 'The country has adequate creditworthiness but adverse economic conditions could weaken its capacity to meet commitments.';
} else if (ratingData.rating.startsWith('BB')) {
analysis = 'The country faces major ongoing uncertainties and exposure to adverse business, financial, or economic conditions.';
} else if (ratingData.rating.startsWith('B')) {
analysis = 'The country has significant credit risk with adverse business, financial, or economic conditions likely to impair capacity to meet commitments.';
} else {
analysis = 'The country is highly vulnerable to default and currently faces extreme credit risk.';
}
creditAnalysis.textContent = analysis;
}
</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-04" style="color: #fff;text-decoration: underline;" target="_blank" >Remix</a></p></body>
</html>