Spaces:

privateuserh
/

privfin-vbeta1-04

Running

App Files Files Community

privateuserh commited on Apr 15

Commit

6302863

verified ·

1 Parent(s): ff3d24d

Add 2 files

Browse files

Files changed (2) hide show

README.md +7 -5
index.html +950 -19

README.md CHANGED Viewed

@@ -1,10 +1,12 @@
 ---
-title: Privfin Vbeta1 04
-emoji: 🔥
-colorFrom: yellow
-colorTo: blue
 sdk: static
 pinned: false
 ---
-Check out the configuration reference at https://huggingface.co/docs/hub/spaces-config-reference

 ---
+title: privfin-vbeta1-04
+emoji: 🐳
+colorFrom: green
+colorTo: green
 sdk: static
 pinned: false
+tags:
+  - deepsite
 ---
+Check out the configuration reference at https://huggingface.co/docs/hub/spaces-config-reference

index.html CHANGED Viewed

@@ -1,19 +1,950 @@
-<!doctype html>
-<html>
-	<head>
-		<meta charset="utf-8" />
-		<meta name="viewport" content="width=device-width" />
-		<title>My static Space</title>
-		<link rel="stylesheet" href="style.css" />
-	</head>
-	<body>
-		<div class="card">
-			<h1>Welcome to your static Space!</h1>
-			<p>You can modify this app directly by editing <i>index.html</i> in the Files and versions tab.</p>
-			<p>
-				Also don't forget to check the
-				<a href="https://huggingface.co/docs/hub/spaces" target="_blank">Spaces documentation</a>.
-			</p>
-		</div>
-	</body>
-</html>

+<!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>