Spaces:
Running
Running
| <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; } | |
| .fffund-panel { | |
| position: fixed; | |
| top: 50%; | |
| left: 50%; | |
| transform: translate(-50%, -50%); | |
| width: 90%; | |
| max-width: 600px; | |
| background: white; | |
| border-radius: 12px; | |
| box-shadow: 0 10px 25px rgba(0, 0, 0, 0.2); | |
| z-index: 2000; | |
| padding: 20px; | |
| opacity: 0; | |
| visibility: hidden; | |
| transition: all 0.3s ease; | |
| } | |
| .fffund-panel.active { | |
| opacity: 1; | |
| visibility: visible; | |
| } | |
| .fffund-overlay { | |
| position: fixed; | |
| top: 0; | |
| left: 0; | |
| right: 0; | |
| bottom: 0; | |
| background: rgba(0, 0, 0, 0.5); | |
| z-index: 1999; | |
| opacity: 0; | |
| visibility: hidden; | |
| transition: all 0.3s ease; | |
| } | |
| .fffund-overlay.active { | |
| opacity: 1; | |
| visibility: visible; | |
| } | |
| </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-3"> | |
| <p class="text-xs text-gray-500">Mint Progress</p> | |
| <div class="token-progress"> | |
| <div class="token-progress-bar" style="width: 45%"></div> | |
| </div> | |
| <p class="text-xs text-right mt-1">45% of current epoch minted</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="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" step="1000"> | |
| </div> | |
| <div class="mb-4"> | |
| <label class="block text-gray-700 font-medium mb-2">BTC Address for Payment</label> | |
| <input type="text" id="paymentAddress" class="w-full px-4 py-3 border border-gray-300 rounded-lg focus:ring-2 focus:ring-purple-500 focus:border-purple-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">Current rate: 1,000 FFFUND = 0.0001 BTC</p> | |
| </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">Total Cost</span> | |
| <span id="mintCost" class="font-bold text-purple-800">0.001 BTC</span> | |
| </div> | |
| <div class="flex justify-between"> | |
| <span class="text-purple-700 font-medium">Estimated APY</span> | |
| <span id="estimatedAPY" class="font-bold text-purple-800">11.0%</span> | |
| </div> | |
| </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 FFFUND 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="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="mb-4"> | |
| <div class="flex justify-between items-center mb-2"> | |
| <span class="font-medium text-gray-700">Credit Rating</span> | |
| <span id="creditRating" class="credit-rating-badge credit-rating-AAA">AAA</span> | |
| </div> | |
| <div class="flex justify-between items-center mb-4"> | |
| <span class="font-medium text-gray-700">Risk Premium</span> | |
| <span id="riskPremium" class="font-bold">+0.50%</span> | |
| </div> | |
| <div class="bg-amber-50 p-4 rounded-lg"> | |
| <h4 class="font-medium text-amber-800 mb-2">Economic Indicators</h4> | |
| <div class="economic-indicator"> | |
| <span>GDP Growth</span> | |
| <span id="gdpGrowth" class="font-medium">2.3%</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.1%</span> | |
| </div> | |
| <div class="economic-indicator"> | |
| <span>Debt-to-GDP</span> | |
| <span id="debtToGDP" class="font-medium">110%</span> | |
| </div> | |
| </div> | |
| </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"> | |
| Close | |
| </button> | |
| </div> | |
| </div> | |
| <!-- FFFUND Panel --> | |
| <div id="fffundPanel" class="fffund-panel"> | |
| <div class="flex justify-between items-center mb-4"> | |
| <h3 class="text-xl font-bold text-purple-800">Mint FFFUND Tokens</h3> | |
| <button id="closeFFFundPanel" 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-3"> | |
| <p class="text-xs text-gray-500">Mint Progress</p> | |
| <div class="token-progress"> | |
| <div class="token-progress-bar" style="width: 45%"></div> | |
| </div> | |
| <p class="text-xs text-right mt-1">45% of current epoch minted</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="fffundMintAmount" 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="mb-4"> | |
| <label class="block text-gray-700 font-medium mb-2">BTC Address for Payment</label> | |
| <input type="text" id="fffundPaymentAddress" class="w-full px-4 py-3 border border-gray-300 rounded-lg focus:ring-2 focus:ring-purple-500 focus:border-purple-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">Current rate: 1,000 FFFUND = 0.0001 BTC</p> | |
| </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">Total Cost</span> | |
| <span id="fffundMintCost" class="font-bold text-purple-800">0.001 BTC</span> | |
| </div> | |
| <div class="flex justify-between"> | |
| <span class="text-purple-700 font-medium">Estimated APY</span> | |
| <span id="fffundEstimatedAPY" class="font-bold text-purple-800">11.0%</span> | |
| </div> | |
| </div> | |
| <button id="fffundMintBtn" class="w-full bg-purple-600 hover:bg-purple-700 text-white font-bold py-3 px-4 rounded-lg transition duration-300"> | |
| Mint FFFUND Tokens | |
| </button> | |
| </div> | |
| <div id="fffundOverlay" class="fffund-overlay"></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 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'); | |
| // Modal elements | |
| 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'); | |
| // Market Share Modal elements | |
| const marketShareLoss = document.getElementById('marketShareLoss'); | |
| const costSavings = document.getElementById('costSavings'); | |
| const gaugePointer = document.getElementById('gaugePointer'); | |
| const marketShareAnalysis = document.getElementById('marketShareAnalysis'); | |
| // Token Minting Modal elements | |
| const mintAmount = document.getElementById('mintAmount'); | |
| const paymentAddress = document.getElementById('paymentAddress'); | |
| const mintCost = document.getElementById('mintCost'); | |
| const estimatedAPY = document.getElementById('estimatedAPY'); | |
| const mintTokensBtn = document.getElementById('mintTokensBtn'); | |
| // Credit Rating Modal elements | |
| const countrySelect = document.getElementById('countrySelect'); | |
| const creditRating = document.getElementById('creditRating'); | |
| const riskPremium = document.getElementById('riskPremium'); | |
| const gdpGrowth = document.getElementById('gdpGrowth'); | |
| const inflationRate = document.getElementById('inflationRate'); | |
| const unemploymentRate = document.getElementById('unemploymentRate'); | |
| const debtToGDP = document.getElementById('debtToGDP'); | |
| // FFFUND Panel elements | |
| const fffundPanel = document.getElementById('fffundPanel'); | |
| const fffundOverlay = document.getElementById('fffundOverlay'); | |
| const closeFFFundPanel = document.getElementById('closeFFFundPanel'); | |
| const fffundMintAmount = document.getElementById('fffundMintAmount'); | |
| const fffundPaymentAddress = document.getElementById('fffundPaymentAddress'); | |
| const fffundMintCost = document.getElementById('fffundMintCost'); | |
| const fffundEstimatedAPY = document.getElementById('fffundEstimatedAPY'); | |
| const fffundMintBtn = document.getElementById('fffundMintBtn'); | |
| // Tariff data | |
| const tariffRates = { | |
| US: { | |
| steel: 25, | |
| agriculture: 10, | |
| automotive: 2.5, | |
| electronics: 0, | |
| textiles: 16, | |
| chemicals: 3.5, | |
| machinery: 2, | |
| pharmaceuticals: 0 | |
| }, | |
| EU: { | |
| steel: 10, | |
| agriculture: 15, | |
| automotive: 10, | |
| electronics: 0, | |
| textiles: 12, | |
| chemicals: 5, | |
| machinery: 1.7, | |
| pharmaceuticals: 0 | |
| }, | |
| CN: { | |
| steel: 15, | |
| agriculture: 20, | |
| automotive: 15, | |
| electronics: 0, | |
| textiles: 10, | |
| chemicals: 6.5, | |
| machinery: 8, | |
| pharmaceuticals: 0 | |
| }, | |
| JP: { | |
| steel: 5, | |
| agriculture: 20, | |
| automotive: 0, | |
| electronics: 0, | |
| textiles: 10, | |
| chemicals: 3, | |
| machinery: 0, | |
| pharmaceuticals: 0 | |
| }, | |
| CA: { | |
| steel: 10, | |
| agriculture: 5, | |
| automotive: 0, | |
| electronics: 0, | |
| textiles: 8, | |
| chemicals: 2, | |
| machinery: 0, | |
| pharmaceuticals: 0 | |
| }, | |
| MX: { | |
| steel: 15, | |
| agriculture: 10, | |
| automotive: 5, | |
| electronics: 0, | |
| textiles: 10, | |
| chemicals: 3, | |
| machinery: 5, | |
| pharmaceuticals: 0 | |
| }, | |
| IN: { | |
| steel: 20, | |
| agriculture: 30, | |
| automotive: 15, | |
| electronics: 0, | |
| textiles: 15, | |
| chemicals: 7.5, | |
| machinery: 10, | |
| pharmaceuticals: 0 | |
| }, | |
| BR: { | |
| steel: 12, | |
| agriculture: 25, | |
| automotive: 10, | |
| electronics: 0, | |
| textiles: 20, | |
| chemicals: 8, | |
| machinery: 12, | |
| pharmaceuticals: 0 | |
| } | |
| }; | |
| // Credit rating data | |
| const creditRatings = { | |
| US: { rating: 'AA', premium: 0.5, gdp: 2.3, inflation: 3.2, unemployment: 4.1, debt: 110 }, | |
| EU: { rating: 'AA', premium: 0.6, gdp: 1.8, inflation: 2.8, unemployment: 6.5, debt: 85 }, | |
| CN: { rating: 'A', premium: 0.8, gdp: 5.2, inflation: 2.1, unemployment: 5.0, debt: 60 }, | |
| JP: { rating: 'A', premium: 0.7, gdp: 1.1, inflation: 0.5, unemployment: 2.5, debt: 240 }, | |
| CA: { rating: 'AAA', premium: 0.4, gdp: 2.0, inflation: 2.5, unemployment: 5.5, debt: 90 }, | |
| MX: { rating: 'BBB', premium: 1.2, gdp: 3.0, inflation: 4.2, unemployment: 3.8, debt: 55 }, | |
| IN: { rating: 'BBB-', premium: 1.5, gdp: 6.5, inflation: 5.8, unemployment: 7.2, debt: 75 }, | |
| BR: { rating: 'BB-', premium: 2.0, gdp: 2.8, inflation: 8.5, unemployment: 9.0, debt: 85 } | |
| }; | |
| // Market share impact data | |
| const marketShareData = { | |
| steel: { loss: 5, savings: 15 }, | |
| agriculture: { loss: 8, savings: 10 }, | |
| automotive: { loss: 15, savings: 20 }, | |
| electronics: { loss: 2, savings: 5 }, | |
| textiles: { loss: 10, savings: 18 }, | |
| chemicals: { loss: 7, savings: 12 }, | |
| machinery: { loss: 5, savings: 10 }, | |
| pharmaceuticals: { loss: 1, savings: 3 } | |
| }; | |
| // Initialize the app | |
| function init() { | |
| // Event listeners for main calculator | |
| industrySelect.addEventListener('change', handleIndustryChange); | |
| tariffSlider.addEventListener('input', updateTariffValue); | |
| calculateBtn.addEventListener('click', calculateFinancing); | |
| // Event listeners for modal toggles | |
| buyDownBtn.addEventListener('click', () => toggleModal(buyDownModal)); | |
| marketShareBtn.addEventListener('click', () => toggleModal(marketShareModal)); | |
| tokenMintBtn.addEventListener('click', () => toggleModal(tokenMintModal)); | |
| creditRatingBtn.addEventListener('click', () => toggleModal(creditRatingModal)); | |
| // Event listeners for modal closes | |
| 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)); | |
| // Event listeners for buy down modal | |
| buyDownSlider.addEventListener('input', updateBuyDownValue); | |
| bitcoinAddress.addEventListener('input', updateMiningEstimate); | |
| applyBuyDown.addEventListener('click', applyBuyDownPoints); | |
| // Event listeners for market share modal | |
| industrySelect.addEventListener('change', updateMarketShareImpact); | |
| // Event listeners for credit rating modal | |
| countrySelect.addEventListener('change', updateCreditRating); | |
| // Event listeners for token minting modal | |
| mintAmount.addEventListener('input', updateMintCost); | |
| // Event listeners for FFFUND panel | |
| tokenMintBtn.addEventListener('click', toggleFFFundPanel); | |
| closeFFFundPanel.addEventListener('click', toggleFFFundPanel); | |
| fffundMintAmount.addEventListener('input', updateFFFundMintCost); | |
| fffundMintBtn.addEventListener('click', mintFFFundTokens); | |
| // Initialize values | |
| updateTariffValue(); | |
| updateBuyDownValue(); | |
| updateCreditRating(); | |
| updateMintCost(); | |
| updateFFFundMintCost(); | |
| } | |
| // Toggle modal visibility | |
| function toggleModal(modal) { | |
| modal.classList.toggle('active'); | |
| } | |
| // Toggle FFFUND panel visibility | |
| function toggleFFFundPanel() { | |
| fffundPanel.classList.toggle('active'); | |
| fffundOverlay.classList.toggle('active'); | |
| } | |
| // Handle industry selection change | |
| function handleIndustryChange() { | |
| const selectedIndustry = industrySelect.value; | |
| if (selectedIndustry === 'custom') { | |
| customTariffSection.classList.remove('hidden'); | |
| updateTariffValue(); | |
| } else { | |
| customTariffSection.classList.add('hidden'); | |
| if (selectedIndustry) { | |
| const country = importCountrySelect.value; | |
| const tariffRate = tariffRates[country][selectedIndustry]; | |
| const loanAmount = parseFloat(loanAmountInput.value) || 0; | |
| const tariffAmount = loanAmount * (tariffRate / 100); | |
| totalTariffDisplay.textContent = `$${tariffAmount.toLocaleString()} (${tariffRate}%)`; | |
| // Update tariff breakdown | |
| tariffBreakdown.innerHTML = ` | |
| <div class="flex justify-between"> | |
| <span>${selectedIndustry.replace(/^\w/, c => c.toUpperCase())} tariff (${country}):</span> | |
| <span>${tariffRate}%</span> | |
| </div> | |
| `; | |
| // Show tariff impact meter | |
| tariffImpactMeter.classList.remove('hidden'); | |
| tariffImpactBar.style.width = `${Math.min(tariffRate, 100)}%`; | |
| // Update market share impact if modal is open | |
| if (marketShareModal.classList.contains('active')) { | |
| updateMarketShareImpact(); | |
| } | |
| } else { | |
| totalTariffDisplay.textContent = '$0 (0%)'; | |
| tariffBreakdown.innerHTML = ''; | |
| tariffImpactMeter.classList.add('hidden'); | |
| } | |
| } | |
| } | |
| // Update custom tariff value display | |
| function updateTariffValue() { | |
| const tariffRate = tariffSlider.value; | |
| tariffValue.textContent = `${tariffRate}%`; | |
| if (industrySelect.value === 'custom') { | |
| const loanAmount = parseFloat(loanAmountInput.value) || 0; | |
| const tariffAmount = loanAmount * (tariffRate / 100); | |
| totalTariffDisplay.textContent = `$${tariffAmount.toLocaleString()} (${tariffRate}%)`; | |
| // Update tariff breakdown | |
| tariffBreakdown.innerHTML = ` | |
| <div class="flex justify-between"> | |
| <span>Custom tariff:</span> | |
| <span>${tariffRate}%</span> | |
| </div> | |
| `; | |
| // Show tariff impact meter | |
| tariffImpactMeter.classList.remove('hidden'); | |
| tariffImpactBar.style.width = `${Math.min(tariffRate, 100)}%`; | |
| } | |
| } | |
| // Calculate financing details | |
| function calculateFinancing() { | |
| const loanAmount = parseFloat(loanAmountInput.value) || 0; | |
| const primeRate = parseFloat(primeRateInput.value) || 0; | |
| const selectedIndustry = industrySelect.value; | |
| if (!selectedIndustry) { | |
| alert('Please select a product category'); | |
| return; | |
| } | |
| // Get tariff rate | |
| let tariffRate = 0; | |
| if (selectedIndustry === 'custom') { | |
| tariffRate = parseFloat(tariffSlider.value) || 0; | |
| } else { | |
| const country = importCountrySelect.value; | |
| tariffRate = tariffRates[country][selectedIndustry]; | |
| } | |
| // Calculate tariff amount | |
| const tariffAmount = loanAmount * (tariffRate / 100); | |
| const totalLoan = loanAmount + tariffAmount; | |
| // Calculate effective interest rate (prime rate + risk premium) | |
| const country = importCountrySelect.value; | |
| const riskPremium = creditRatings[country].premium; | |
| const effectiveRate = primeRate + riskPremium; | |
| // Calculate monthly payment (simple amortization) | |
| const monthlyRate = effectiveRate / 100 / 12; | |
| const termYears = 5; | |
| const termMonths = termYears * 12; | |
| const monthlyPayment = totalLoan * monthlyRate * Math.pow(1 + monthlyRate, termMonths) / (Math.pow(1 + monthlyRate, termMonths) - 1); | |
| // Calculate total interest cost | |
| const totalInterest = monthlyPayment * termMonths - totalLoan; | |
| // Update results display | |
| totalLoanDisplay.textContent = `$${totalLoan.toLocaleString(undefined, {maximumFractionDigits: 2})}`; | |
| effectiveRateDisplay.textContent = `${effectiveRate.toFixed(2)}%`; | |
| monthlyPaymentDisplay.textContent = `$${monthlyPayment.toLocaleString(undefined, {maximumFractionDigits: 2})}`; | |
| totalTariffCost.textContent = `$${tariffAmount.toLocaleString(undefined, {maximumFractionDigits: 2})}`; | |
| totalInterestCost.textContent = `$${totalInterest.toLocaleString(undefined, {maximumFractionDigits: 2})}`; | |
| // Generate amortization schedule | |
| generateAmortizationSchedule(totalLoan, effectiveRate, termYears); | |
| // Show results | |
| resultsSection.classList.remove('hidden'); | |
| // Scroll to results | |
| resultsSection.scrollIntoView({ behavior: 'smooth' }); | |
| } | |
| // Generate amortization schedule | |
| function generateAmortizationSchedule(principal, annualRate, years) { | |
| const monthlyRate = annualRate / 100 / 12; | |
| const months = years * 12; | |
| const monthlyPayment = principal * monthlyRate * Math.pow(1 + monthlyRate, months) / (Math.pow(1 + monthlyRate, months) - 1); | |
| let balance = principal; | |
| let html = ''; | |
| for (let year = 1; year <= years; year++) { | |
| let yearInterest = 0; | |
| let yearPrincipal = 0; | |
| for (let month = 1; month <= 12; month++) { | |
| const interest = balance * monthlyRate; | |
| const principalPayment = monthlyPayment - interest; | |
| yearInterest += interest; | |
| yearPrincipal += principalPayment; | |
| balance -= principalPayment; | |
| } | |
| html += ` | |
| <tr> | |
| <td class="py-2 px-4">${year}</td> | |
| <td class="py-2 px-4 text-right">$${yearPrincipal.toLocaleString(undefined, {maximumFractionDigits: 2})}</td> | |
| <td class="py-2 px-4 text-right">$${yearInterest.toLocaleString(undefined, {maximumFractionDigits: 2})}</td> | |
| <td class="py-2 px-4 text-right">$${balance > 0 ? balance.toLocaleString(undefined, {maximumFractionDigits: 2}) : '0'}</td> | |
| </tr> | |
| `; | |
| } | |
| amortizationTable.innerHTML = html; | |
| } | |
| // Update buy down value display | |
| function updateBuyDownValue() { | |
| const points = buyDownSlider.value; | |
| buyDownValue.textContent = `${points} points`; | |
| // Calculate new rate | |
| const primeRate = parseFloat(primeRateInput.value) || 0; | |
| const country = importCountrySelect.value; | |
| const riskPremium = creditRatings[country].premium; | |
| const rateReduction = points * 0.25; | |
| const newRateValue = primeRate + riskPremium - rateReduction; | |
| // Calculate buy down cost | |
| const loanAmount = parseFloat(loanAmountInput.value) || 0; | |
| const cost = loanAmount * (points / 100); | |
| // Update display | |
| newRate.textContent = `${newRateValue.toFixed(2)}%`; | |
| buyDownCost.textContent = `$${cost.toLocaleString(undefined, {maximumFractionDigits: 2})}`; | |
| } | |
| // Update mining estimate based on BTC address | |
| function updateMiningEstimate() { | |
| const address = bitcoinAddress.value; | |
| if (address && address.match(/^(bc1|[13])[a-zA-HJ-NP-Z0-9]{25,39}$/)) { | |
| // Simulate mining estimate | |
| estimatedBTC.textContent = '0.0025 BTC'; | |
| miningPoints.textContent = '0.5 points'; | |
| miningRateReduction.textContent = '0.125%'; | |
| miningLoanImpact.textContent = '-$1,250'; | |
| } else { | |
| estimatedBTC.textContent = '0 BTC'; | |
| miningPoints.textContent = '0 points'; | |
| miningRateReduction.textContent = '0%'; | |
| miningLoanImpact.textContent = '$0'; | |
| } | |
| } | |
| // Apply buy down points to loan | |
| function applyBuyDownPoints() { | |
| const points = parseFloat(buyDownSlider.value) || 0; | |
| if (points > 0) { | |
| alert(`Successfully applied ${points} buy down points to your loan.`); | |
| toggleModal(buyDownModal); | |
| } else { | |
| alert('Please select at least 0.25 points to apply.'); | |
| } | |
| } | |
| // Update market share impact based on selected industry | |
| function updateMarketShareImpact() { | |
| const selectedIndustry = industrySelect.value; | |
| if (selectedIndustry && selectedIndustry !== 'custom') { | |
| const impact = marketShareData[selectedIndustry]; | |
| marketShareLoss.textContent = `${impact.loss}%`; | |
| costSavings.textContent = `${impact.savings}%`; | |
| // Position gauge pointer (simple linear scale) | |
| const position = (impact.savings - impact.loss + 30) / 60 * 100; | |
| gaugePointer.style.left = `${Math.min(Math.max(position, 5), 95)}%`; | |
| // Update analysis text | |
| if (impact.loss > 10) { | |
| marketShareAnalysis.textContent = 'This product category has significant market share risk with tariff financing.'; | |
| } else if (impact.savings > 15) { | |
| marketShareAnalysis.textContent = 'Tariff financing offers excellent cost savings with moderate market share impact.'; | |
| } else { | |
| marketShareAnalysis.textContent = 'Using tariff financing results in balanced market share impact and cost savings.'; | |
| } | |
| } | |
| } | |
| // Update credit rating based on selected country | |
| function updateCreditRating() { | |
| const country = countrySelect.value; | |
| const ratingData = creditRatings[country]; | |
| // Update rating display | |
| creditRating.textContent = ratingData.rating; | |
| creditRating.className = `credit-rating-badge credit-rating-${ratingData.rating.replace(/[^A-Z]/g, '')}`; | |
| // Update other fields | |
| riskPremium.textContent = `+${ratingData.premium}%`; | |
| gdpGrowth.textContent = `${ratingData.gdp}%`; | |
| inflationRate.textContent = `${ratingData.inflation}%`; | |
| unemploymentRate.textContent = `${ratingData.unemployment}%`; | |
| debtToGDP.textContent = `${ratingData.debt}%`; | |
| } | |
| // Update mint cost based on amount | |
| function updateMintCost() { | |
| const amount = parseFloat(mintAmount.value) || 0; | |
| const cost = amount * 0.0000001; // 1,000 FFFUND = 0.0001 BTC | |
| mintCost.textContent = `${cost.toFixed(6)} BTC`; | |
| } | |
| // Update FFFUND mint cost based on amount | |
| function updateFFFundMintCost() { | |
| const amount = parseFloat(fffundMintAmount.value) || 0; | |
| const cost = amount * 0.0000001; // 1,000 FFFUND = 0.0001 BTC | |
| fffundMintCost.textContent = `${cost.toFixed(6)} BTC`; | |
| } | |
| // Mint FFFUND tokens | |
| function mintFFFundTokens() { | |
| const amount = parseFloat(fffundMintAmount.value) || 0; | |
| const address = fffundPaymentAddress.value; | |
| if (amount < 10000) { | |
| alert('Minimum mint amount is 10,000 FFFUND'); | |
| return; | |
| } | |
| if (!address || !address.match(/^(bc1|[13])[a-zA-HJ-NP-Z0-9]{25,39}$/)) { | |
| alert('Please enter a valid Bitcoin address'); | |
| return; | |
| } | |
| alert(`Successfully minted ${amount.toLocaleString()} FFFUND tokens to address ${address}`); | |
| toggleFFFundPanel(); | |
| } | |
| // Initialize the app | |
| 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-06" style="color: #fff;text-decoration: underline;" target="_blank" >Remix</a></p></body> | |
| </html> |