Spaces:

privateuserh
/

privfin-vbeta1-03

Running

App Files Files Community

privateuserh commited on Apr 14

Commit

1ea9ada

verified ·

1 Parent(s): b550558

Add 2 files

Browse files

Files changed (2) hide show

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

README.md CHANGED Viewed

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

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