Hugging Face's logo

Spaces:
privateuserh
/
privfin-vbeta1-02
Running

App Files Community
privfin-vbeta1-02 / index.html
privateuserh's picture
privateuserh
Update index.html
b2339b7 verified
raw
history blame contribute delete
54.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);
}
</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>
<!-- 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 id="tokenBalance" class="font-medium">0 FFFUND</p>
</div>
</div>
<div class="mb-2">
<p class="text-xs text-gray-500">Tokens Minted</p>
<div class="token-progress mt-1">
<div id="tokenProgressBar" class="token-progress-bar" style="width: 0.01%"></div>
</div>
<p class="text-right text-xs mt-1"><span id="mintedPercentage">0.01</span>% of total supply</p>
</div>
</div>
<div class="mb-4">
<label class="block text-gray-700 font-medium mb-2">Amount to Mint (Min 10,000 FFFUND)</label>
<input type="number" id="mintAmount" 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">
</div>
<div class="bg-purple-50 p-4 rounded-lg mb-4">
<div class="flex justify-between mb-2">
<span class="text-purple-700 font-medium">Current Price:</span>
<span class="font-bold">$0.0025 per FFFUND</span>
</div>
<div class="flex justify-between">
<span class="text-purple-700 font-medium">Total Cost:</span>
<span id="mintCost" class="font-bold">$0</span>
</div>
</div>
<div class="bg-blue-50 p-4 rounded-lg mb-4">
<h4 class="font-medium text-blue-700 mb-2">Yield Farming Information</h4>
<p class="text-sm text-blue-600">Your minted tokens are automatically staked in our yield farming pool earning 11.0% APY. Rewards are compounded quarterly and can be used to reduce your loan balance.</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 flex items-center justify-center">
<i class="fas fa-coins mr-2"></i> Mint FFFUND Tokens
</button>
<div class="mt-4 text-xs text-gray-500">
<p>Transaction Hash: 05fe51dc570f24741689b074a3f10b1296fdd2c96f04d00225e3c9cf792a9990</p>
<p>Inscription #1,545,104,328 | Size: 346 bytes | Content: 78b</p>
<p>Deployed: 03/19/2025, 11:39:13</p>
</div>
</div>
</div>
<script>
// Updated with real-world tariff rates by country and product
const tariffRates = {
US: {
steel: { name: "Steel & Aluminum", rate: 25, desc: "Section 232 tariffs on steel (25%) and aluminum (10%) imports" },
agriculture: { name: "Agricultural Products", rate: 15, desc: "Tariffs affecting soybeans, dairy, pork and other farm goods" },
automotive: { name: "Automotive & Parts", rate: 27.5, desc: "Section 232 tariffs on imported autos and parts" },
electronics: { name: "Consumer Electronics", rate: 10, desc: "Section 301 tariffs on Chinese electronics" },
textiles: { name: "Textiles & Apparel", rate: 16, desc: "Import duties on clothing and fabric products" },
chemicals: { name: "Chemicals", rate: 7.5, desc: "Tariffs on industrial chemicals and fertilizers" },
machinery: { name: "Industrial Machinery", rate: 12, desc: "Section 301 tariffs on Chinese machinery" },
pharmaceuticals: { name: "Pharmaceuticals", rate: 0, desc: "No tariffs on medicines and medical supplies" },
custom: { name: "Custom Tariff", rate: 0, desc: "Set your own tariff percentage" }
},
EU: {
steel: { name: "Steel & Aluminum", rate: 15, desc: "EU safeguard measures on steel imports" },
agriculture: { name: "Agricultural Products", rate: 12, desc: "Common Agricultural Policy tariffs" },
automotive: { name: "Automotive & Parts", rate: 10, desc: "Standard EU auto tariffs" },
electronics: { name: "Consumer Electronics", rate: 5, desc: "Standard EU electronics tariffs" },
textiles: { name: "Textiles & Apparel", rate: 12, desc: "Standard EU textile tariffs" },
chemicals: { name: "Chemicals", rate: 6.5, desc: "Standard EU chemical tariffs" },
machinery: { name: "Industrial Machinery", rate: 4.5, desc: "Standard EU machinery tariffs" },
pharmaceuticals: { name: "Pharmaceuticals", rate: 0, desc: "No tariffs on medicines" },
custom: { name: "Custom Tariff", rate: 0, desc: "Set your own tariff percentage" }
},
CN: {
steel: { name: "Steel & Aluminum", rate: 8, desc: "Chinese steel import tariffs" },
agriculture: { name: "Agricultural Products", rate: 15, desc: "Chinese agricultural tariffs" },
automotive: { name: "Automotive & Parts", rate: 15, desc: "Chinese auto tariffs" },
electronics: { name: "Consumer Electronics", rate: 0, desc: "No tariffs on electronics" },
textiles: { name: "Textiles & Apparel", rate: 10, desc: "Chinese textile tariffs" },
chemicals: { name: "Chemicals", rate: 6.5, desc: "Chinese chemical tariffs" },
machinery: { name: "Industrial Machinery", rate: 8, desc: "Chinese machinery tariffs" },
pharmaceuticals: { name: "Pharmaceuticals", rate: 3, desc: "Chinese medicine tariffs" },
custom: { name: "Custom Tariff", rate: 0, desc: "Set your own tariff percentage" }
},
JP: {
steel: { name: "Steel & Aluminum", rate: 5, desc: "Japanese steel tariffs" },
agriculture: { name: "Agricultural Products", rate: 18, desc: "Japanese agricultural protection tariffs" },
automotive: { name: "Automotive & Parts", rate: 0, desc: "No tariffs on autos" },
electronics: { name: "Consumer Electronics", rate: 0, desc: "No tariffs on electronics" },
textiles: { name: "Textiles & Apparel", rate: 8, desc: "Japanese textile tariffs" },
chemicals: { name: "Chemicals", rate: 3.5, desc: "Japanese chemical tariffs" },
machinery: { name: "Industrial Machinery", rate: 0, desc: "No tariffs on machinery" },
pharmaceuticals: { name: "Pharmaceuticals", rate: 0, desc: "No tariffs on medicines" },
custom: { name: "Custom Tariff", rate: 0, desc: "Set your own tariff percentage" }
},
CA: {
steel: { name: "Steel & Aluminum", rate: 7, desc: "Canadian steel tariffs" },
agriculture: { name: "Agricultural Products", rate: 10, desc: "Canadian agricultural tariffs" },
automotive: { name: "Automotive & Parts", rate: 6, desc: "Canadian auto tariffs" },
electronics: { name: "Consumer Electronics", rate: 0, desc: "No tariffs on electronics" },
textiles: { name: "Textiles & Apparel", rate: 12, desc: "Canadian textile tariffs" },
chemicals: { name: "Chemicals", rate: 5.5, desc: "Canadian chemical tariffs" },
machinery: { name: "Industrial Machinery", rate: 3, desc: "Canadian machinery tariffs" },
pharmaceuticals: { name: "Pharmaceuticals", rate: 0, desc: "No tariffs on medicines" },
custom: { name: "Custom Tariff", rate: 0, desc: "Set your own tariff percentage" }
},
MX: {
steel: { name: "Steel & Aluminum", rate: 15, desc: "Mexican steel tariffs" },
agriculture: { name: "Agricultural Products", rate: 20, desc: "Mexican agricultural tariffs" },
automotive: { name: "Automotive & Parts", rate: 10, desc: "Mexican auto tariffs" },
electronics: { name: "Consumer Electronics", rate: 15, desc: "Mexican electronics tariffs" },
textiles: { name: "Textiles & Apparel", rate: 20, desc: "Mexican textile tariffs" },
chemicals: { name: "Chemicals", rate: 10, desc: "Mexican chemical tariffs" },
machinery: { name: "Industrial Machinery", rate: 5, desc: "Mexican machinery tariffs" },
pharmaceuticals: { name: "Pharmaceuticals", rate: 5, desc: "Mexican medicine tariffs" },
custom: { name: "Custom Tariff", rate: 0, desc: "Set your own tariff percentage" }
},
IN: {
steel: { name: "Steel & Aluminum", rate: 15, desc: "Indian steel tariffs" },
agriculture: { name: "Agricultural Products", rate: 30, desc: "Indian agricultural tariffs" },
automotive: { name: "Automotive & Parts", rate: 25, desc: "Indian auto tariffs" },
electronics: { name: "Consumer Electronics", rate: 20, desc: "Indian electronics tariffs" },
textiles: { name: "Textiles & Apparel", rate: 15, desc: "Indian textile tariffs" },
chemicals: { name: "Chemicals", rate: 10, desc: "Indian chemical tariffs" },
machinery: { name: "Industrial Machinery", rate: 15, desc: "Indian machinery tariffs" },
pharmaceuticals: { name: "Pharmaceuticals", rate: 10, desc: "Indian medicine tariffs" },
custom: { name: "Custom Tariff", rate: 0, desc: "Set your own tariff percentage" }
},
BR: {
steel: { name: "Steel & Aluminum", rate: 12, desc: "Brazilian steel tariffs" },
agriculture: { name: "Agricultural Products", rate: 18, desc: "Brazilian agricultural tariffs" },
automotive: { name: "Automotive & Parts", rate: 35, desc: "Brazilian auto tariffs" },
electronics: { name: "Consumer Electronics", rate: 20, desc: "Brazilian electronics tariffs" },
textiles: { name: "Textiles & Apparel", rate: 25, desc: "Brazilian textile tariffs" },
chemicals: { name: "Chemicals", rate: 12, desc: "Brazilian chemical tariffs" },
machinery: { name: "Industrial Machinery", rate: 14, desc: "Brazilian machinery tariffs" },
pharmaceuticals: { name: "Pharmaceuticals", rate: 8, desc: "Brazilian medicine tariffs" },
custom: { name: "Custom Tariff", rate: 0, desc: "Set your own tariff percentage" }
}
};
// Token data
const tokenData = {
ticker: "FFFD",
name: "Fabric Flow Fund",
price: 0.0025,
totalSupply: 50000000000,
minted: 6000000000, // 12% minted
minMint: 10000,
apy: 18.5,
userBalance: 0,
transactionHash: "05fe51dc570f24741689b074a3f10b1296fdd2c96f04d00225e3c9cf792a9990",
inscription: "1,545,104,328",
size: "346 bytes",
content: "78b",
deployed: "03/19/2025, 11:39:13"
};
// DOM Elements
const loanAmountInput = document.getElementById('loanAmount');
const primeRateInput = document.getElementById('primeRate');
const importCountry = 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 totalLoanDisplay = document.getElementById('totalLoan');
const effectiveRateDisplay = document.getElementById('effectiveRate');
const monthlyPaymentDisplay = document.getElementById('monthlyPayment');
const totalTariffCost = document.getElementById('totalTariffCost');
const totalInterestCost = document.getElementById('totalInterestCost');
const amortizationTable = document.getElementById('amortizationTable');
const buyDownBtn = document.getElementById('buyDownBtn');
const buyDownModal = document.getElementById('buyDownModal');
const closeModal = document.getElementById('closeModal');
const buyDownSlider = document.getElementById('buyDownSlider');
const buyDownValue = document.getElementById('buyDownValue');
const newRateDisplay = document.getElementById('newRate');
const buyDownCostDisplay = document.getElementById('buyDownCost');
const applyBuyDown = document.getElementById('applyBuyDown');
const marketShareBtn = document.getElementById('marketShareBtn');
const marketShareModal = document.getElementById('marketShareModal');
const closeMarketShareModal = document.getElementById('closeMarketShareModal');
const closeMarketShareBtn = document.getElementById('closeMarketShareBtn');
const marketShareLoss = document.getElementById('marketShareLoss');
const costSavings = document.getElementById('costSavings');
const marketShareAnalysis = document.getElementById('marketShareAnalysis');
const gaugePointer = document.getElementById('gaugePointer');
const tokenMintBtn = document.getElementById('tokenMintBtn');
const tokenMintModal = document.getElementById('tokenMintModal');
const closeTokenModal = document.getElementById('closeTokenModal');
const mintAmount = document.getElementById('mintAmount');
const mintCost = document.getElementById('mintCost');
const mintTokensBtn = document.getElementById('mintTokensBtn');
const tokenBalance = document.getElementById('tokenBalance');
const tokenProgressBar = document.getElementById('tokenProgressBar');
const mintedPercentage = document.getElementById('mintedPercentage');
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');
// Variables
let currentLoanData = null;
let currentRate = parseFloat(primeRateInput.value);
let currentTariff = 0;
let currentIndustry = null;
let currentCountry = 'US';
// Event Listeners
importCountry.addEventListener('change', updateCountryTariffs);
industrySelect.addEventListener('change', updateIndustryTariff);
tariffSlider.addEventListener('input', updateTariffValue);
calculateBtn.addEventListener('click', calculateLoan);
buyDownBtn.addEventListener('click', openBuyDownModal);
closeModal.addEventListener('click', closeBuyDownModal);
buyDownSlider.addEventListener('input', updateBuyDownValue);
applyBuyDown.addEventListener('click', applyBuyDownPoints);
marketShareBtn.addEventListener('click', openMarketShareModal);
closeMarketShareModal.addEventListener('click', closeMarketShareModalFunc);
closeMarketShareBtn.addEventListener('click', closeMarketShareModalFunc);
tokenMintBtn.addEventListener('click', openTokenMintModal);
closeTokenModal.addEventListener('click', closeTokenMintModal);
mintAmount.addEventListener('input', updateMintCost);
mintTokensBtn.addEventListener('click', mintTokens);
bitcoinAddress.addEventListener('input', updateMiningEstimates);
// Initialize
updateCountryTariffs();
updateTariffValue();
updateBuyDownValue();
updateTokenInfo();
// Functions
function updateCountryTariffs() {
currentCountry = importCountry.value;
// Update industry tariffs based on selected country
updateIndustryTariff();
}
function updateIndustryTariff() {
const selectedValue = industrySelect.value;
if (selectedValue === '') {
currentIndustry = null;
currentTariff = 0;
customTariffSection.classList.add('hidden');
updateTariffDisplay();
return;
}
if (selectedValue === 'custom') {
currentIndustry = tariffRates[currentCountry].custom;
customTariffSection.classList.remove('hidden');
currentTariff = parseInt(tariffSlider.value);
} else {
currentIndustry = tariffRates[currentCountry][selectedValue];
customTariffSection.classList.add('hidden');
currentTariff = currentIndustry.rate;
tariffSlider.value = currentTariff;
tariffValue.textContent = `${currentTariff}%`;
}
updateTariffDisplay();
}
function updateTariffValue() {
currentTariff = parseInt(tariffSlider.value);
tariffValue.textContent = `${currentTariff}%`;
if (currentIndustry && currentIndustry.name === "Custom Tariff") {
currentIndustry.rate = currentTariff;
updateTariffDisplay();
}
}
function updateTariffDisplay() {
const loanAmount = parseFloat(loanAmountInput.value) || 0;
const tariffAmount = loanAmount * (currentTariff / 100);
totalTariffDisplay.textContent = `$${tariffAmount.toLocaleString('en-US', {maximumFractionDigits: 2})} (${currentTariff}%)`;
if (currentIndustry) {
let badgeColor = 'bg-blue-100 text-blue-800';
if (currentTariff >= 20) badgeColor = 'bg-red-100 text-red-800';
else if (currentTariff >= 10) badgeColor = 'bg-yellow-100 text-yellow-800';
else if (currentTariff > 0) badgeColor = 'bg-green-100 text-green-800';
tariffBreakdown.innerHTML = `
<div class="flex items-center justify-between">
<span>${currentIndustry.name} (${importCountry.options[importCountry.selectedIndex].text})</span>
<span class="${badgeColor} tariff-badge">${currentTariff}% tariff</span>
</div>
<p class="mt-1 text-xs">${currentIndustry.desc}</p>
`;
// Show impact meter for non-zero tariffs
if (currentTariff > 0) {
tariffImpactMeter.classList.remove('hidden');
const impactPercentage = Math.min(100, currentTariff * 3); // Scale for visualization
tariffImpactBar.style.width = `${impactPercentage}%`;
} else {
tariffImpactMeter.classList.add('hidden');
}
} else {
tariffBreakdown.innerHTML = '<p class="text-sm">No product category selected</p>';
tariffImpactMeter.classList.add('hidden');
}
}
function updateBuyDownValue() {
const points = parseFloat(buyDownSlider.value);
buyDownValue.textContent = `${points} point${points !== 1 ? 's' : ''}`;
// Calculate new rate and cost
const loanAmount = parseFloat(loanAmountInput.value) || 0;
const rateReduction = points * 0.25;
const newRate = currentRate - rateReduction;
const buyDownCost = loanAmount * (points * 0.01);
newRateDisplay.textContent = `${newRate.toFixed(2)}%`;
buyDownCostDisplay.textContent = `$${buyDownCost.toLocaleString('en-US', {maximumFractionDigits: 2})}`;
}
function updateMiningEstimates() {
const address = bitcoinAddress.value;
if (!address || address.length < 10) return;
// Simulate mining estimates (in a real app, this would call an API)
const loanAmount = parseFloat(loanAmountInput.value) || 0;
const btcMined = 0.0025; // Example BTC mined per quarter
const btcPrice = 40000; // Example BTC price in USD
const btcValue = btcMined * btcPrice;
// Each point costs 1% of loan amount
const pointsPerQuarter = btcValue / (loanAmount * 0.01);
const rateReduction = pointsPerQuarter * 0.25;
const loanImpact = btcValue * -1;
estimatedBTC.textContent = `${btcMined.toFixed(4)} BTC`;
miningPoints.textContent = `${pointsPerQuarter.toFixed(1)} points`;
miningRateReduction.textContent = `${rateReduction.toFixed(3)}%`;
miningLoanImpact.textContent = `-$${Math.abs(loanImpact).toLocaleString('en-US', {maximumFractionDigits: 0})}`;
}
function openBuyDownModal() {
if (!currentLoanData) {
alert("Please calculate financing terms first");
return;
}
buyDownModal.classList.add('active');
// Update values in case they changed
buyDownSlider.value = 0;
updateBuyDownValue();
bitcoinAddress.value = '';
updateMiningEstimates();
}
function closeBuyDownModal() {
buyDownModal.classList.remove('active');
}
function openMarketShareModal() {
if (!currentLoanData) {
alert("Please calculate financing terms first");
return;
}
marketShareModal.classList.add('active');
updateMarketShareAnalysis();
}
function closeMarketShareModalFunc() {
marketShareModal.classList.remove('active');
}
function openTokenMintModal() {
tokenMintModal.classList.add('active');
updateTokenInfo();
}
function closeTokenMintModal() {
tokenMintModal.classList.remove('active');
}
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);
marketShareLoss.textContent = `${shareLoss.toFixed(1)}%`;
costSavings.textContent = `${savings.toFixed(1)}%`;
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.`;
}
marketShareAnalysis.textContent = analysisText;
}
function updateMintCost() {
const amount = parseFloat(mintAmount.value) || 0;
const cost = amount * tokenData.price;
mintCost.textContent = `$${cost.toLocaleString('en-US', {maximumFractionDigits: 4})}`;
}
function updateTokenInfo() {
// Calculate minted percentage
const percentage = (tokenData.minted / tokenData.totalSupply * 100).toFixed(2);
tokenProgressBar.style.width = `${percentage}%`;
mintedPercentage.textContent = percentage;
// Update user balance
tokenBalance.textContent = `${tokenData.userBalance.toLocaleString()} ${tokenData.ticker}`;
// Reset mint amount
mintAmount.value = '';
mintCost.textContent = '$0';
}
function applyBuyDownPoints() {
const points = parseFloat(buyDownSlider.value);
const rateReduction = points * 0.25;
currentRate -= rateReduction;
primeRateInput.value = currentRate.toFixed(2);
// Recalculate loan with new rate
calculateLoan();
closeBuyDownModal();
// Show mining schedule if address was provided
if (bitcoinAddress.value) {
alert(`Your Bitcoin mining rewards will be automatically applied to your loan every quarter. Estimated reduction: ${miningRateReduction.textContent} per quarter.`);
}
}
function mintTokens() {
const amount = parseFloat(mintAmount.value);
if (!amount || amount < tokenData.minMint) {
alert(`Minimum mint amount is ${tokenData.minMint.toLocaleString()} ${tokenData.ticker}`);
return;
}
// Simulate minting process
const cost = amount * tokenData.price;
// Update token data
tokenData.minted += amount;
tokenData.userBalance += amount;
// Show success message
alert(`Successfully minted ${amount.toLocaleString()} ${tokenData.ticker} for $${cost.toLocaleString('en-US', {maximumFractionDigits: 2})}. Your tokens have been automatically staked in our yield farming pool earning ${tokenData.apy}% APY.`);
// Update UI
updateTokenInfo();
}
function calculateLoan() {
if (!currentIndustry) {
alert("Please select a product category");
return;
}
const loanAmount = parseFloat(loanAmountInput.value) || 0;
currentRate = parseFloat(primeRateInput.value) || 7.5;
const tariff = currentTariff;
// Calculate tariff-adjusted loan amount
const tariffAmount = loanAmount * (tariff / 100);
const totalLoanAmount = loanAmount + tariffAmount;
// Calculate effective interest rate (simple approximation)
const effectiveRate = currentRate * (1 + (tariff / 100));
// Calculate monthly payment (5 years = 60 months)
const monthlyRate = effectiveRate / 100 / 12;
const monthlyPayment = totalLoanAmount * monthlyRate * Math.pow(1 + monthlyRate, 60) / (Math.pow(1 + monthlyRate, 60) - 1);
// Generate amortization schedule
const amortizationData = generateAmortizationSchedule(totalLoanAmount, effectiveRate, 60);
// Calculate total interest paid
const totalInterest = amortizationData.totalInterest;
// Update UI
totalLoanDisplay.textContent = `$${totalLoanAmount.toLocaleString('en-US', {maximumFractionDigits: 2})}`;
effectiveRateDisplay.textContent = `${effectiveRate.toFixed(2)}%`;
monthlyPaymentDisplay.textContent = `$${monthlyPayment.toLocaleString('en-US', {maximumFractionDigits: 2})}`;
totalTariffCost.textContent = `$${tariffAmount.toLocaleString('en-US', {maximumFractionDigits: 2})}`;
totalInterestCost.textContent = `$${totalInterest.toLocaleString('en-US', {maximumFractionDigits: 2})}`;
// Populate amortization table
amortizationTable.innerHTML = '';
amortizationData.yearlyData.forEach(yearData => {
const row = document.createElement('tr');
row.innerHTML = `
<td class="py-3 px-4">${yearData.year}</td>
<td class="py-3 px-4 text-right">$${yearData.principalPaid.toLocaleString('en-US', {maximumFractionDigits: 2})}</td>
<td class="py-3 px-4 text-right">$${yearData.interestPaid.toLocaleString('en-US', {maximumFractionDigits: 2})}</td>
<td class="py-3 px-4 text-right">$${yearData.remainingBalance.toLocaleString('en-US', {maximumFractionDigits: 2})}</td>
`;
amortizationTable.appendChild(row);
});
// Show results
resultsSection.classList.remove('hidden');
// Store current loan data
currentLoanData = {
loanAmount,
tariff,
effectiveRate,
monthlyPayment,
totalLoanAmount,
amortizationData,
industry: currentIndustry.name,
country: importCountry.options[importCountry.selectedIndex].text
};
}
function generateAmortizationSchedule(principal, annualRate, months) {
const monthlyRate = annualRate / 100 / 12;
const monthlyPayment = principal * monthlyRate * Math.pow(1 + monthlyRate, months) / (Math.pow(1 + monthlyRate, months) - 1);
let balance = principal;
let totalInterest = 0;
const schedule = [];
const yearlyData = [];
for (let month = 1; month <= months; month++) {
const interestPayment = balance * monthlyRate;
const principalPayment = monthlyPayment - interestPayment;
totalInterest += interestPayment;
balance -= principalPayment;
// Avoid negative balance due to rounding
if (balance < 0) balance = 0;
// Add to monthly schedule (not shown in UI but could be expanded)
schedule.push({
month,
payment: monthlyPayment,
principal: principalPayment,
interest: interestPayment,
balance
});
// Aggregate yearly data
if (month % 12 === 0 || month === months) {
const year = Math.ceil(month / 12);
const yearStartMonth = (year - 1) * 12 + 1;
// Calculate yearly totals
const yearPayments = schedule.slice(yearStartMonth - 1, month);
const principalPaid = yearPayments.reduce((sum, pmt) => sum + pmt.principal, 0);
const interestPaid = yearPayments.reduce((sum, pmt) => sum + pmt.interest, 0);
yearlyData.push({
year,
principalPaid,
interestPaid,
remainingBalance: balance
});
}
}
return {
monthlyPayment,
totalInterest,
schedule,
yearlyData
};
}
// Initialize tariff display
loanAmountInput.addEventListener('input', updateTariffDisplay);
</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-02" style="color: #fff;text-decoration: underline;" target="_blank" >Remix</a></p></body>
</html>