Hugging Face's logo

Spaces:
privateuserh
/
privfin-vbeta1-06
Running

App Files Community
privateuserh commited on
Commit
455a7fc
·
verified ·
1 Parent(s): fac29dc

Add 2 files

Browse files
Files changed (2) hide show
  1. README.md +7 -5
  2. index.html +1237 -19
README.md CHANGED
@@ -1,10 +1,12 @@
1
  ---
2
- title: Privfin Vbeta1 06
3
- emoji: 📊
4
- colorFrom: indigo
5
- colorTo: green
6
  sdk: static
7
  pinned: false
 
 
8
  ---
9
 
10
- Check out the configuration reference at https://huggingface.co/docs/hub/spaces-config-reference
 
1
  ---
2
+ title: privfin-vbeta1-06
3
+ emoji: 🐳
4
+ colorFrom: red
5
+ colorTo: gray
6
  sdk: static
7
  pinned: false
8
+ tags:
9
+ - deepsite
10
  ---
11
 
12
+ Check out the configuration reference at https://huggingface.co/docs/hub/spaces-config-reference
index.html CHANGED
@@ -1,19 +1,1237 @@
1
- <!doctype html>
2
- <html>
3
- <head>
4
- <meta charset="utf-8" />
5
- <meta name="viewport" content="width=device-width" />
6
- <title>My static Space</title>
7
- <link rel="stylesheet" href="style.css" />
8
- </head>
9
- <body>
10
- <div class="card">
11
- <h1>Welcome to your static Space!</h1>
12
- <p>You can modify this app directly by editing <i>index.html</i> in the Files and versions tab.</p>
13
- <p>
14
- Also don't forget to check the
15
- <a href="https://huggingface.co/docs/hub/spaces" target="_blank">Spaces documentation</a>.
16
- </p>
17
- </div>
18
- </body>
19
- </html>
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
1
+ <!DOCTYPE html>
2
+ <html lang="en">
3
+ <head>
4
+ <meta charset="UTF-8">
5
+ <meta name="viewport" content="width=device-width, initial-scale=1.0">
6
+ <title>Global Trade Fin. Calculator</title>
7
+ <script src="https://cdn.tailwindcss.com"></script>
8
+ <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css">
9
+ <style>
10
+ .floating-btn {
11
+ position: fixed;
12
+ bottom: 30px;
13
+ right: 30px;
14
+ width: 60px;
15
+ height: 60px;
16
+ border-radius: 50%;
17
+ box-shadow: 0 10px 25px rgba(0, 0, 0, 0.2);
18
+ transition: all 0.3s ease;
19
+ z-index: 1000;
20
+ }
21
+ .floating-btn:hover {
22
+ transform: translateY(-5px) scale(1.05);
23
+ box-shadow: 0 15px 30px rgba(0, 0, 0, 0.3);
24
+ }
25
+ .floating-btn-secondary {
26
+ position: fixed;
27
+ bottom: 100px;
28
+ right: 30px;
29
+ width: 60px;
30
+ height: 60px;
31
+ border-radius: 50%;
32
+ box-shadow: 0 10px 25px rgba(0, 0, 0, 0.2);
33
+ transition: all 0.3s ease;
34
+ z-index: 1000;
35
+ }
36
+ .floating-btn-secondary:hover {
37
+ transform: translateY(-5px) scale(1.05);
38
+ box-shadow: 0 15px 30px rgba(0, 0, 0, 0.3);
39
+ }
40
+ .floating-btn-tertiary {
41
+ position: fixed;
42
+ bottom: 170px;
43
+ right: 30px;
44
+ width: 60px;
45
+ height: 60px;
46
+ border-radius: 50%;
47
+ box-shadow: 0 10px 25px rgba(0, 0, 0, 0.2);
48
+ transition: all 0.3s ease;
49
+ z-index: 1000;
50
+ }
51
+ .floating-btn-tertiary:hover {
52
+ transform: translateY(-5px) scale(1.05);
53
+ box-shadow: 0 15px 30px rgba(0, 0, 0, 0.3);
54
+ }
55
+ .floating-btn-quaternary {
56
+ position: fixed;
57
+ bottom: 240px;
58
+ right: 30px;
59
+ width: 60px;
60
+ height: 60px;
61
+ border-radius: 50%;
62
+ box-shadow: 0 10px 25px rgba(0, 0, 0, 0.2);
63
+ transition: all 0.3s ease;
64
+ z-index: 1000;
65
+ }
66
+ .floating-btn-quaternary:hover {
67
+ transform: translateY(-5px) scale(1.05);
68
+ box-shadow: 0 15px 30px rgba(0, 0, 0, 0.3);
69
+ }
70
+ .modal {
71
+ transition: all 0.3s ease;
72
+ opacity: 0;
73
+ visibility: hidden;
74
+ }
75
+ .modal.active {
76
+ opacity: 1;
77
+ visibility: visible;
78
+ }
79
+ .tariff-slider::-webkit-slider-thumb {
80
+ -webkit-appearance: none;
81
+ width: 20px;
82
+ height: 20px;
83
+ border-radius: 50%;
84
+ background: #3B82F6;
85
+ cursor: pointer;
86
+ }
87
+ .animate-pulse {
88
+ animation: pulse 2s infinite;
89
+ }
90
+ @keyframes pulse {
91
+ 0% { transform: scale(1); }
92
+ 50% { transform: scale(1.05); }
93
+ 100% { transform: scale(1); }
94
+ }
95
+ .market-share-gauge {
96
+ width: 100%;
97
+ height: 20px;
98
+ background: linear-gradient(90deg, #ef4444 0%, #f59e0b 50%, #10b981 100%);
99
+ border-radius: 10px;
100
+ margin-top: 10px;
101
+ position: relative;
102
+ }
103
+ .gauge-pointer {
104
+ position: absolute;
105
+ top: -5px;
106
+ width: 2px;
107
+ height: 30px;
108
+ background: black;
109
+ transform: translateX(-50%);
110
+ }
111
+ .tariff-badge {
112
+ display: inline-block;
113
+ padding: 0.25rem 0.5rem;
114
+ border-radius: 9999px;
115
+ font-size: 0.75rem;
116
+ font-weight: 600;
117
+ }
118
+ .token-progress {
119
+ height: 10px;
120
+ border-radius: 5px;
121
+ background-color: #e5e7eb;
122
+ overflow: hidden;
123
+ }
124
+ .token-progress-bar {
125
+ height: 100%;
126
+ background: linear-gradient(90deg, #8b5cf6, #6366f1);
127
+ transition: width 0.3s ease;
128
+ }
129
+ .yield-farming-card {
130
+ background: linear-gradient(135deg, #f5f7fa 0%, #e4e7eb 100%);
131
+ border-radius: 12px;
132
+ padding: 1.5rem;
133
+ position: relative;
134
+ overflow: hidden;
135
+ }
136
+ .yield-farming-card::before {
137
+ content: "";
138
+ position: absolute;
139
+ top: -50%;
140
+ left: -50%;
141
+ width: 200%;
142
+ height: 200%;
143
+ background: linear-gradient(45deg, transparent 0%, rgba(255,255,255,0.1) 50%, transparent 100%);
144
+ transform: rotate(45deg);
145
+ animation: shine 3s infinite;
146
+ }
147
+ @keyframes shine {
148
+ 0% { transform: translateX(-100%) rotate(45deg); }
149
+ 100% { transform: translateX(100%) rotate(45deg); }
150
+ }
151
+ .bitcoin-address {
152
+ font-family: monospace;
153
+ letter-spacing: 1px;
154
+ }
155
+ .mining-estimate {
156
+ background: linear-gradient(135deg, #fef3c7 0%, #fde68a 100%);
157
+ border-left: 4px solid #f59e0b;
158
+ }
159
+ .country-flag {
160
+ width: 24px;
161
+ height: 16px;
162
+ display: inline-block;
163
+ margin-right: 8px;
164
+ border: 1px solid #e5e7eb;
165
+ vertical-align: middle;
166
+ }
167
+ .tariff-impact-meter {
168
+ height: 8px;
169
+ border-radius: 4px;
170
+ background-color: #e5e7eb;
171
+ margin-top: 8px;
172
+ overflow: hidden;
173
+ }
174
+ .tariff-impact-bar {
175
+ height: 100%;
176
+ background: linear-gradient(90deg, #10b981, #3B82F6);
177
+ }
178
+ .credit-rating-badge {
179
+ display: inline-flex;
180
+ align-items: center;
181
+ padding: 0.25rem 0.5rem;
182
+ border-radius: 9999px;
183
+ font-size: 0.75rem;
184
+ font-weight: 600;
185
+ }
186
+ .economic-indicator {
187
+ display: flex;
188
+ justify-content: space-between;
189
+ padding: 0.5rem 0;
190
+ border-bottom: 1px solid #e5e7eb;
191
+ }
192
+ .economic-indicator:last-child {
193
+ border-bottom: none;
194
+ }
195
+ .credit-rating-AAA { background-color: #10b981; color: white; }
196
+ .credit-rating-AA { background-color: #34d399; color: white; }
197
+ .credit-rating-A { background-color: #60a5fa; color: white; }
198
+ .credit-rating-BBB { background-color: #f59e0b; color: white; }
199
+ .credit-rating-BB { background-color: #f97316; color: white; }
200
+ .credit-rating-B { background-color: #ef4444; color: white; }
201
+ .credit-rating-CCC { background-color: #dc2626; color: white; }
202
+ .credit-rating-CC { background-color: #991b1b; color: white; }
203
+ .credit-rating-C { background-color: #7c3aed; color: white; }
204
+ .credit-rating-D { background-color: #000000; color: white; }
205
+ .fffund-panel {
206
+ position: fixed;
207
+ top: 50%;
208
+ left: 50%;
209
+ transform: translate(-50%, -50%);
210
+ width: 90%;
211
+ max-width: 600px;
212
+ background: white;
213
+ border-radius: 12px;
214
+ box-shadow: 0 10px 25px rgba(0, 0, 0, 0.2);
215
+ z-index: 2000;
216
+ padding: 20px;
217
+ opacity: 0;
218
+ visibility: hidden;
219
+ transition: all 0.3s ease;
220
+ }
221
+ .fffund-panel.active {
222
+ opacity: 1;
223
+ visibility: visible;
224
+ }
225
+ .fffund-overlay {
226
+ position: fixed;
227
+ top: 0;
228
+ left: 0;
229
+ right: 0;
230
+ bottom: 0;
231
+ background: rgba(0, 0, 0, 0.5);
232
+ z-index: 1999;
233
+ opacity: 0;
234
+ visibility: hidden;
235
+ transition: all 0.3s ease;
236
+ }
237
+ .fffund-overlay.active {
238
+ opacity: 1;
239
+ visibility: visible;
240
+ }
241
+ </style>
242
+ </head>
243
+ <body class="bg-gray-50 min-h-screen">
244
+ <div class="container mx-auto px-4 py-12 max-w-4xl">
245
+ <div class="text-center mb-12">
246
+ <h1 class="text-4xl font-bold text-blue-800 mb-2">Global Trade Finance Calculator</h1>
247
+ <p class="text-lg text-gray-600">Calculate trade financing costs with real-world tariff rates</p>
248
+ </div>
249
+
250
+ <div class="bg-white rounded-xl shadow-lg p-6 mb-8">
251
+ <div class="grid grid-cols-1 md:grid-cols-2 gap-6">
252
+ <div>
253
+ <label class="block text-gray-700 font-medium mb-2">Trade Amount ($)</label>
254
+ <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">
255
+ </div>
256
+
257
+ <div>
258
+ <label class="block text-gray-700 font-medium mb-2">Base Interest Rate (%)</label>
259
+ <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">
260
+ </div>
261
+ </div>
262
+
263
+ <div class="mt-6">
264
+ <label class="block text-gray-700 font-medium mb-2">Importing Country</label>
265
+ <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">
266
+ <option value="US">United States</option>
267
+ <option value="EU">European Union</option>
268
+ <option value="CN">China</option>
269
+ <option value="JP">Japan</option>
270
+ <option value="CA">Canada</option>
271
+ <option value="MX">Mexico</option>
272
+ <option value="IN">India</option>
273
+ <option value="BR">Brazil</option>
274
+ </select>
275
+ </div>
276
+
277
+ <div class="mt-2">
278
+ <label class="block text-gray-700 font-medium mb-2">Product Category</label>
279
+ <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">
280
+ <option value="">Select a product category</option>
281
+ <option value="steel">Steel & Aluminum</option>
282
+ <option value="agriculture">Agricultural Products</option>
283
+ <option value="automotive">Automotive & Parts</option>
284
+ <option value="electronics">Consumer Electronics</option>
285
+ <option value="textiles">Textiles & Apparel</option>
286
+ <option value="chemicals">Chemicals</option>
287
+ <option value="machinery">Industrial Machinery</option>
288
+ <option value="pharmaceuticals">Pharmaceuticals</option>
289
+ <option value="custom">Custom Tariff</option>
290
+ </select>
291
+ </div>
292
+
293
+ <div class="mt-6 hidden" id="customTariffSection">
294
+ <label class="block text-gray-700 font-medium mb-2">Custom Tariff Percentage (0-100%)</label>
295
+ <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">
296
+ <div class="flex justify-between mt-2">
297
+ <span class="text-sm text-gray-500">0%</span>
298
+ <span id="tariffValue" class="font-medium text-blue-600">5%</span>
299
+ <span class="text-sm text-gray-500">100%</span>
300
+ </div>
301
+ </div>
302
+
303
+ <div class="mt-6 bg-blue-50 p-4 rounded-lg">
304
+ <div class="flex justify-between items-center">
305
+ <span class="text-blue-700 font-medium">Total Tariff Impact:</span>
306
+ <span id="totalTariffDisplay" class="text-xl font-bold text-blue-800">$0 (0%)</span>
307
+ </div>
308
+ <div id="tariffBreakdown" class="mt-2 text-sm text-blue-600">
309
+ <!-- Tariff breakdown will appear here -->
310
+ </div>
311
+ <div id="tariffImpactMeter" class="tariff-impact-meter hidden">
312
+ <div id="tariffImpactBar" class="tariff-impact-bar" style="width: 0%"></div>
313
+ </div>
314
+ </div>
315
+
316
+ <div class="mt-8">
317
+ <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">
318
+ Calculate Trade Financing
319
+ </button>
320
+ </div>
321
+ </div>
322
+
323
+ <div id="results" class="bg-white rounded-xl shadow-lg p-6 hidden">
324
+ <h2 class="text-2xl font-bold text-gray-800 mb-4">Trade Finance Summary</h2>
325
+
326
+ <div class="grid grid-cols-1 md:grid-cols-3 gap-4 mb-6">
327
+ <div class="bg-blue-50 p-4 rounded-lg">
328
+ <p class="text-sm text-blue-600 font-medium">Total Financing Needed</p>
329
+ <p id="totalLoan" class="text-2xl font-bold text-blue-800">$105,000</p>
330
+ </div>
331
+ <div class="bg-green-50 p-4 rounded-lg">
332
+ <p class="text-sm text-green-600 font-medium">Effective Interest Rate</p>
333
+ <p id="effectiveRate" class="text-2xl font-bold text-green-800">7.88%</p>
334
+ </div>
335
+ <div class="bg-purple-50 p-4 rounded-lg">
336
+ <p class="text-sm text-purple-600 font-medium">Monthly Payment</p>
337
+ <p id="monthlyPayment" class="text-2xl font-bold text-purple-800">$2,123</p>
338
+ </div>
339
+ </div>
340
+
341
+ <div class="grid grid-cols-1 md:grid-cols-2 gap-4 mb-6">
342
+ <div class="bg-yellow-50 p-4 rounded-lg">
343
+ <p class="text-sm text-yellow-600 font-medium">Total Tariff Cost</p>
344
+ <p id="totalTariffCost" class="text-xl font-bold text-yellow-800">$5,000</p>
345
+ </div>
346
+ <div class="bg-red-50 p-4 rounded-lg">
347
+ <p class="text-sm text-red-600 font-medium">Total Interest Cost</p>
348
+ <p id="totalInterestCost" class="text-xl font-bold text-red-800">$12,345</p>
349
+ </div>
350
+ </div>
351
+
352
+ <h3 class="text-lg font-semibold text-gray-700 mb-3">5-Year Amortization Schedule</h3>
353
+ <div class="overflow-x-auto">
354
+ <table class="min-w-full bg-white rounded-lg overflow-hidden">
355
+ <thead class="bg-gray-100">
356
+ <tr>
357
+ <th class="py-3 px-4 text-left text-gray-600">Year</th>
358
+ <th class="py-3 px-4 text-right text-gray-600">Principal</th>
359
+ <th class="py-3 px-4 text-right text-gray-600">Interest</th>
360
+ <th class="py-3 px-4 text-right text-gray-600">Balance</th>
361
+ </tr>
362
+ </thead>
363
+ <tbody id="amortizationTable" class="divide-y divide-gray-200">
364
+ <!-- Amortization data will be inserted here -->
365
+ </tbody>
366
+ </table>
367
+ </div>
368
+ </div>
369
+ </div>
370
+
371
+ <!-- Floating Buttons -->
372
+ <button id="buyDownBtn" class="floating-btn bg-blue-600 text-white flex items-center justify-center hover:bg-blue-700">
373
+ <i class="fas fa-percentage text-2xl"></i>
374
+ </button>
375
+
376
+ <button id="marketShareBtn" class="floating-btn-secondary bg-green-600 text-white flex items-center justify-center hover:bg-green-700">
377
+ <i class="fas fa-chart-pie text-2xl"></i>
378
+ </button>
379
+
380
+ <button id="tokenMintBtn" class="floating-btn-tertiary bg-purple-600 text-white flex items-center justify-center hover:bg-purple-700">
381
+ <i class="fas fa-coins text-2xl"></i>
382
+ </button>
383
+
384
+ <button id="creditRatingBtn" class="floating-btn-quaternary bg-amber-600 text-white flex items-center justify-center hover:bg-amber-700">
385
+ <i class="fas fa-star text-2xl"></i>
386
+ </button>
387
+
388
+ <!-- Buy Down Modal -->
389
+ <div id="buyDownModal" class="modal fixed inset-0 bg-black bg-opacity-50 flex items-center justify-center p-4">
390
+ <div class="bg-white rounded-xl shadow-xl p-6 max-w-md w-full">
391
+ <div class="flex justify-between items-center mb-4">
392
+ <h3 class="text-xl font-bold text-gray-800">Interest Rate Buy Down</h3>
393
+ <button id="closeModal" class="text-gray-500 hover:text-gray-700">
394
+ <i class="fas fa-times"></i>
395
+ </button>
396
+ </div>
397
+
398
+ <div class="mb-4">
399
+ <label class="block text-gray-700 font-medium mb-2">Buy Down Points (0-5)</label>
400
+ <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">
401
+ <div class="flex justify-between mt-2">
402
+ <span class="text-sm text-gray-500">0 points</span>
403
+ <span id="buyDownValue" class="font-medium text-blue-600">0 points</span>
404
+ <span class="text-sm text-gray-500">5 points</span>
405
+ </div>
406
+ <p class="text-sm text-gray-500 mt-2">Each point reduces rate by 0.25% (costs 1% of loan amount)</p>
407
+ </div>
408
+
409
+ <div class="mb-4">
410
+ <label class="block text-gray-700 font-medium mb-2">Fractal Bitcoin Mining Address</label>
411
+ <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}$">
412
+ <p class="text-xs text-gray-500 mt-1">Enter your Bitcoin address to apply mining rewards to loan</p>
413
+ </div>
414
+
415
+ <div class="mining-estimate p-4 rounded-lg mb-4">
416
+ <h4 class="font-medium text-yellow-800 mb-2">Quarterly Mining Estimate</h4>
417
+ <div class="grid grid-cols-2 gap-2">
418
+ <div>
419
+ <p class="text-xs text-yellow-700">Estimated BTC Mined:</p>
420
+ <p id="estimatedBTC" class="font-bold">0.0025 BTC</p>
421
+ </div>
422
+ <div>
423
+ <p class="text-xs text-yellow-700">Buydown Points:</p>
424
+ <p id="miningPoints" class="font-bold">0.5 points</p>
425
+ </div>
426
+ <div>
427
+ <p class="text-xs text-yellow-700">Rate Reduction:</p>
428
+ <p id="miningRateReduction" class="font-bold">0.125%</p>
429
+ </div>
430
+ <div>
431
+ <p class="text-xs text-yellow-700">Loan Impact:</p>
432
+ <p id="miningLoanImpact" class="font-bold">-$1,250</p>
433
+ </div>
434
+ </div>
435
+ <p class="text-xs text-yellow-700 mt-2">* Estimates based on current mining difficulty and BTC price</p>
436
+ </div>
437
+
438
+ <div class="bg-blue-50 p-4 rounded-lg mb-4">
439
+ <p class="text-sm text-blue-600 font-medium">New Interest Rate</p>
440
+ <p id="newRate" class="text-xl font-bold text-blue-800">7.50%</p>
441
+ <p class="text-sm text-blue-600 font-medium mt-2">Buy Down Cost</p>
442
+ <p id="buyDownCost" class="text-xl font-bold text-blue-800">$0</p>
443
+ </div>
444
+
445
+ <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">
446
+ Apply Buy Down
447
+ </button>
448
+ </div>
449
+ </div>
450
+
451
+ <!-- Market Share Modal -->
452
+ <div id="marketShareModal" class="modal fixed inset-0 bg-black bg-opacity-50 flex items-center justify-center p-4">
453
+ <div class="bg-white rounded-xl shadow-xl p-6 max-w-md w-full">
454
+ <div class="flex justify-between items-center mb-4">
455
+ <h3 class="text-xl font-bold text-gray-800">Market Share Impact</h3>
456
+ <button id="closeMarketShareModal" class="text-gray-500 hover:text-gray-700">
457
+ <i class="fas fa-times"></i>
458
+ </button>
459
+ </div>
460
+
461
+ <div class="mb-4">
462
+ <div class="flex justify-between mb-2">
463
+ <span class="font-medium text-red-600">Market Share Loss</span>
464
+ <span id="marketShareLoss" class="font-bold">5%</span>
465
+ </div>
466
+ <div class="flex justify-between mb-4">
467
+ <span class="font-medium text-green-600">Cost Savings</span>
468
+ <span id="costSavings" class="font-bold">15%</span>
469
+ </div>
470
+
471
+ <div class="market-share-gauge">
472
+ <div id="gaugePointer" class="gauge-pointer" style="left: 25%;"></div>
473
+ </div>
474
+ <div class="flex justify-between mt-2 text-xs">
475
+ <span>High Loss</span>
476
+ <span>Balanced</span>
477
+ <span>High Savings</span>
478
+ </div>
479
+ </div>
480
+
481
+ <div class="bg-gray-50 p-4 rounded-lg mb-4">
482
+ <p class="text-sm text-gray-700">
483
+ <span class="font-medium">Analysis:</span>
484
+ <span id="marketShareAnalysis">Using tariff financing results in moderate market share impact but significant cost savings.</span>
485
+ </p>
486
+ </div>
487
+
488
+ <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">
489
+ Close
490
+ </button>
491
+ </div>
492
+ </div>
493
+
494
+ <!-- Token Minting Modal -->
495
+ <div id="tokenMintModal" class="modal fixed inset-0 bg-black bg-opacity-50 flex items-center justify-center p-4">
496
+ <div class="bg-white rounded-xl shadow-xl p-6 max-w-md w-full">
497
+ <div class="flex justify-between items-center mb-4">
498
+ <h3 class="text-xl font-bold text-gray-800">Mint FFFUND Tokens</h3>
499
+ <button id="closeTokenModal" class="text-gray-500 hover:text-gray-700">
500
+ <i class="fas fa-times"></i>
501
+ </button>
502
+ </div>
503
+
504
+ <div class="yield-farming-card mb-6">
505
+ <div class="flex justify-between items-center mb-2">
506
+ <span class="font-bold text-purple-700">Fabric Flow Fund™ (FFFUND)</span>
507
+ <span class="bg-purple-100 text-purple-800 text-xs font-medium px-2.5 py-0.5 rounded">BRC-20</span>
508
+ </div>
509
+ <p class="text-sm text-gray-600 mb-3">Yield farming token to fund your business loan with competitive APY</p>
510
+
511
+ <div class="grid grid-cols-2 gap-4 mb-3">
512
+ <div>
513
+ <p class="text-xs text-gray-500">Total Supply</p>
514
+ <p class="font-medium">50,000,000,000</p>
515
+ </div>
516
+ <div>
517
+ <p class="text-xs text-gray-500">Min Mint</p>
518
+ <p class="font-medium">10,000</p>
519
+ </div>
520
+ <div>
521
+ <p class="text-xs text-gray-500">Current APY</p>
522
+ <p class="font-medium text-green-600">11.0%</p>
523
+ </div>
524
+ <div>
525
+ <p class="text-xs text-gray-500">Your Balance</p>
526
+ <p class="font-medium">0</p>
527
+ </div>
528
+ </div>
529
+
530
+ <div class="mb-3">
531
+ <p class="text-xs text-gray-500">Mint Progress</p>
532
+ <div class="token-progress">
533
+ <div class="token-progress-bar" style="width: 45%"></div>
534
+ </div>
535
+ <p class="text-xs text-right mt-1">45% of current epoch minted</p>
536
+ </div>
537
+ </div>
538
+
539
+ <div class="mb-4">
540
+ <label class="block text-gray-700 font-medium mb-2">Amount to Mint</label>
541
+ <input type="number" id="mintAmount" class="w-full px-4 py-3 border border-gray-300 rounded-lg focus:ring-2 focus:ring-purple-500 focus:border-purple-500" placeholder="e.g. 10000" min="10000" step="1000">
542
+ </div>
543
+
544
+ <div class="mb-4">
545
+ <label class="block text-gray-700 font-medium mb-2">BTC Address for Payment</label>
546
+ <input type="text" id="paymentAddress" class="w-full px-4 py-3 border border-gray-300 rounded-lg focus:ring-2 focus:ring-purple-500 focus:border-purple-500 bitcoin-address" placeholder="bc1qxy2kgdygjrsqtzq2n0yrf249nw3q2k6x..." pattern="^(bc1|[13])[a-zA-HJ-NP-Z0-9]{25,39}$">
547
+ <p class="text-xs text-gray-500 mt-1">Current rate: 1,000 FFFUND = 0.0001 BTC</p>
548
+ </div>
549
+
550
+ <div class="bg-purple-50 p-4 rounded-lg mb-4">
551
+ <div class="flex justify-between mb-2">
552
+ <span class="text-purple-700 font-medium">Total Cost</span>
553
+ <span id="mintCost" class="font-bold text-purple-800">0.001 BTC</span>
554
+ </div>
555
+ <div class="flex justify-between">
556
+ <span class="text-purple-700 font-medium">Estimated APY</span>
557
+ <span id="estimatedAPY" class="font-bold text-purple-800">11.0%</span>
558
+ </div>
559
+ </div>
560
+
561
+ <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">
562
+ Mint FFFUND Tokens
563
+ </button>
564
+ </div>
565
+ </div>
566
+
567
+ <!-- Credit Rating Modal -->
568
+ <div id="creditRatingModal" class="modal fixed inset-0 bg-black bg-opacity-50 flex items-center justify-center p-4">
569
+ <div class="bg-white rounded-xl shadow-xl p-6 max-w-md w-full">
570
+ <div class="flex justify-between items-center mb-4">
571
+ <h3 class="text-xl font-bold text-gray-800">Country Credit Rating</h3>
572
+ <button id="closeCreditRatingModal" class="text-gray-500 hover:text-gray-700">
573
+ <i class="fas fa-times"></i>
574
+ </button>
575
+ </div>
576
+
577
+ <div class="mb-4">
578
+ <label class="block text-gray-700 font-medium mb-2">Select Country</label>
579
+ <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">
580
+ <option value="US">United States</option>
581
+ <option value="EU">European Union</option>
582
+ <option value="CN">China</option>
583
+ <option value="JP">Japan</option>
584
+ <option value="CA">Canada</option>
585
+ <option value="MX">Mexico</option>
586
+ <option value="IN">India</option>
587
+ <option value="BR">Brazil</option>
588
+ </select>
589
+ </div>
590
+
591
+ <div class="mb-4">
592
+ <div class="flex justify-between items-center mb-2">
593
+ <span class="font-medium text-gray-700">Credit Rating</span>
594
+ <span id="creditRating" class="credit-rating-badge credit-rating-AAA">AAA</span>
595
+ </div>
596
+ <div class="flex justify-between items-center mb-4">
597
+ <span class="font-medium text-gray-700">Risk Premium</span>
598
+ <span id="riskPremium" class="font-bold">+0.50%</span>
599
+ </div>
600
+
601
+ <div class="bg-amber-50 p-4 rounded-lg">
602
+ <h4 class="font-medium text-amber-800 mb-2">Economic Indicators</h4>
603
+ <div class="economic-indicator">
604
+ <span>GDP Growth</span>
605
+ <span id="gdpGrowth" class="font-medium">2.3%</span>
606
+ </div>
607
+ <div class="economic-indicator">
608
+ <span>Inflation Rate</span>
609
+ <span id="inflationRate" class="font-medium">3.2%</span>
610
+ </div>
611
+ <div class="economic-indicator">
612
+ <span>Unemployment</span>
613
+ <span id="unemploymentRate" class="font-medium">4.1%</span>
614
+ </div>
615
+ <div class="economic-indicator">
616
+ <span>Debt-to-GDP</span>
617
+ <span id="debtToGDP" class="font-medium">110%</span>
618
+ </div>
619
+ </div>
620
+ </div>
621
+
622
+ <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">
623
+ Close
624
+ </button>
625
+ </div>
626
+ </div>
627
+
628
+ <!-- FFFUND Panel -->
629
+ <div id="fffundPanel" class="fffund-panel">
630
+ <div class="flex justify-between items-center mb-4">
631
+ <h3 class="text-xl font-bold text-purple-800">Mint FFFUND Tokens</h3>
632
+ <button id="closeFFFundPanel" class="text-gray-500 hover:text-gray-700">
633
+ <i class="fas fa-times"></i>
634
+ </button>
635
+ </div>
636
+
637
+ <div class="yield-farming-card mb-6">
638
+ <div class="flex justify-between items-center mb-2">
639
+ <span class="font-bold text-purple-700">Fabric Flow Fund™ (FFFUND)</span>
640
+ <span class="bg-purple-100 text-purple-800 text-xs font-medium px-2.5 py-0.5 rounded">BRC-20</span>
641
+ </div>
642
+ <p class="text-sm text-gray-600 mb-3">Yield farming token to fund your business loan with competitive APY</p>
643
+
644
+ <div class="grid grid-cols-2 gap-4 mb-3">
645
+ <div>
646
+ <p class="text-xs text-gray-500">Total Supply</p>
647
+ <p class="font-medium">50,000,000,000</p>
648
+ </div>
649
+ <div>
650
+ <p class="text-xs text-gray-500">Min Mint</p>
651
+ <p class="font-medium">10,000</p>
652
+ </div>
653
+ <div>
654
+ <p class="text-xs text-gray-500">Current APY</p>
655
+ <p class="font-medium text-green-600">11.0%</p>
656
+ </div>
657
+ <div>
658
+ <p class="text-xs text-gray-500">Your Balance</p>
659
+ <p class="font-medium">0</p>
660
+ </div>
661
+ </div>
662
+
663
+ <div class="mb-3">
664
+ <p class="text-xs text-gray-500">Mint Progress</p>
665
+ <div class="token-progress">
666
+ <div class="token-progress-bar" style="width: 45%"></div>
667
+ </div>
668
+ <p class="text-xs text-right mt-1">45% of current epoch minted</p>
669
+ </div>
670
+ </div>
671
+
672
+ <div class="mb-4">
673
+ <label class="block text-gray-700 font-medium mb-2">Amount to Mint</label>
674
+ <input type="number" id="fffundMintAmount" class="w-full px-4 py-3 border border-gray-300 rounded-lg focus:ring-2 focus:ring-purple-500 focus:border-purple-500" placeholder="e.g. 10000" min="10000" step="1000">
675
+ </div>
676
+
677
+ <div class="mb-4">
678
+ <label class="block text-gray-700 font-medium mb-2">BTC Address for Payment</label>
679
+ <input type="text" id="fffundPaymentAddress" class="w-full px-4 py-3 border border-gray-300 rounded-lg focus:ring-2 focus:ring-purple-500 focus:border-purple-500 bitcoin-address" placeholder="bc1qxy2kgdygjrsqtzq2n0yrf249nw3q2k6x..." pattern="^(bc1|[13])[a-zA-HJ-NP-Z0-9]{25,39}$">
680
+ <p class="text-xs text-gray-500 mt-1">Current rate: 1,000 FFFUND = 0.0001 BTC</p>
681
+ </div>
682
+
683
+ <div class="bg-purple-50 p-4 rounded-lg mb-4">
684
+ <div class="flex justify-between mb-2">
685
+ <span class="text-purple-700 font-medium">Total Cost</span>
686
+ <span id="fffundMintCost" class="font-bold text-purple-800">0.001 BTC</span>
687
+ </div>
688
+ <div class="flex justify-between">
689
+ <span class="text-purple-700 font-medium">Estimated APY</span>
690
+ <span id="fffundEstimatedAPY" class="font-bold text-purple-800">11.0%</span>
691
+ </div>
692
+ </div>
693
+
694
+ <button id="fffundMintBtn" class="w-full bg-purple-600 hover:bg-purple-700 text-white font-bold py-3 px-4 rounded-lg transition duration-300">
695
+ Mint FFFUND Tokens
696
+ </button>
697
+ </div>
698
+
699
+ <div id="fffundOverlay" class="fffund-overlay"></div>
700
+
701
+ <script>
702
+ // DOM Elements
703
+ const loanAmountInput = document.getElementById('loanAmount');
704
+ const primeRateInput = document.getElementById('primeRate');
705
+ const importCountrySelect = document.getElementById('importCountry');
706
+ const industrySelect = document.getElementById('industrySelect');
707
+ const customTariffSection = document.getElementById('customTariffSection');
708
+ const tariffSlider = document.getElementById('tariffSlider');
709
+ const tariffValue = document.getElementById('tariffValue');
710
+ const totalTariffDisplay = document.getElementById('totalTariffDisplay');
711
+ const tariffBreakdown = document.getElementById('tariffBreakdown');
712
+ const tariffImpactMeter = document.getElementById('tariffImpactMeter');
713
+ const tariffImpactBar = document.getElementById('tariffImpactBar');
714
+ const calculateBtn = document.getElementById('calculateBtn');
715
+ const resultsSection = document.getElementById('results');
716
+ const totalLoanDisplay = document.getElementById('totalLoan');
717
+ const effectiveRateDisplay = document.getElementById('effectiveRate');
718
+ const monthlyPaymentDisplay = document.getElementById('monthlyPayment');
719
+ const totalTariffCost = document.getElementById('totalTariffCost');
720
+ const totalInterestCost = document.getElementById('totalInterestCost');
721
+ const amortizationTable = document.getElementById('amortizationTable');
722
+
723
+ // Modal elements
724
+ const buyDownBtn = document.getElementById('buyDownBtn');
725
+ const marketShareBtn = document.getElementById('marketShareBtn');
726
+ const tokenMintBtn = document.getElementById('tokenMintBtn');
727
+ const creditRatingBtn = document.getElementById('creditRatingBtn');
728
+ const buyDownModal = document.getElementById('buyDownModal');
729
+ const marketShareModal = document.getElementById('marketShareModal');
730
+ const tokenMintModal = document.getElementById('tokenMintModal');
731
+ const creditRatingModal = document.getElementById('creditRatingModal');
732
+ const closeModal = document.getElementById('closeModal');
733
+ const closeMarketShareModal = document.getElementById('closeMarketShareModal');
734
+ const closeTokenModal = document.getElementById('closeTokenModal');
735
+ const closeCreditRatingModal = document.getElementById('closeCreditRatingModal');
736
+ const closeMarketShareBtn = document.getElementById('closeMarketShareBtn');
737
+ const closeCreditRatingBtn = document.getElementById('closeCreditRatingBtn');
738
+
739
+ // Buy Down Modal elements
740
+ const buyDownSlider = document.getElementById('buyDownSlider');
741
+ const buyDownValue = document.getElementById('buyDownValue');
742
+ const bitcoinAddress = document.getElementById('bitcoinAddress');
743
+ const estimatedBTC = document.getElementById('estimatedBTC');
744
+ const miningPoints = document.getElementById('miningPoints');
745
+ const miningRateReduction = document.getElementById('miningRateReduction');
746
+ const miningLoanImpact = document.getElementById('miningLoanImpact');
747
+ const newRate = document.getElementById('newRate');
748
+ const buyDownCost = document.getElementById('buyDownCost');
749
+ const applyBuyDown = document.getElementById('applyBuyDown');
750
+
751
+ // Market Share Modal elements
752
+ const marketShareLoss = document.getElementById('marketShareLoss');
753
+ const costSavings = document.getElementById('costSavings');
754
+ const gaugePointer = document.getElementById('gaugePointer');
755
+ const marketShareAnalysis = document.getElementById('marketShareAnalysis');
756
+
757
+ // Token Minting Modal elements
758
+ const mintAmount = document.getElementById('mintAmount');
759
+ const paymentAddress = document.getElementById('paymentAddress');
760
+ const mintCost = document.getElementById('mintCost');
761
+ const estimatedAPY = document.getElementById('estimatedAPY');
762
+ const mintTokensBtn = document.getElementById('mintTokensBtn');
763
+
764
+ // Credit Rating Modal elements
765
+ const countrySelect = document.getElementById('countrySelect');
766
+ const creditRating = document.getElementById('creditRating');
767
+ const riskPremium = document.getElementById('riskPremium');
768
+ const gdpGrowth = document.getElementById('gdpGrowth');
769
+ const inflationRate = document.getElementById('inflationRate');
770
+ const unemploymentRate = document.getElementById('unemploymentRate');
771
+ const debtToGDP = document.getElementById('debtToGDP');
772
+
773
+ // FFFUND Panel elements
774
+ const fffundPanel = document.getElementById('fffundPanel');
775
+ const fffundOverlay = document.getElementById('fffundOverlay');
776
+ const closeFFFundPanel = document.getElementById('closeFFFundPanel');
777
+ const fffundMintAmount = document.getElementById('fffundMintAmount');
778
+ const fffundPaymentAddress = document.getElementById('fffundPaymentAddress');
779
+ const fffundMintCost = document.getElementById('fffundMintCost');
780
+ const fffundEstimatedAPY = document.getElementById('fffundEstimatedAPY');
781
+ const fffundMintBtn = document.getElementById('fffundMintBtn');
782
+
783
+ // Tariff data
784
+ const tariffRates = {
785
+ US: {
786
+ steel: 25,
787
+ agriculture: 10,
788
+ automotive: 2.5,
789
+ electronics: 0,
790
+ textiles: 16,
791
+ chemicals: 3.5,
792
+ machinery: 2,
793
+ pharmaceuticals: 0
794
+ },
795
+ EU: {
796
+ steel: 10,
797
+ agriculture: 15,
798
+ automotive: 10,
799
+ electronics: 0,
800
+ textiles: 12,
801
+ chemicals: 5,
802
+ machinery: 1.7,
803
+ pharmaceuticals: 0
804
+ },
805
+ CN: {
806
+ steel: 15,
807
+ agriculture: 20,
808
+ automotive: 15,
809
+ electronics: 0,
810
+ textiles: 10,
811
+ chemicals: 6.5,
812
+ machinery: 8,
813
+ pharmaceuticals: 0
814
+ },
815
+ JP: {
816
+ steel: 5,
817
+ agriculture: 20,
818
+ automotive: 0,
819
+ electronics: 0,
820
+ textiles: 10,
821
+ chemicals: 3,
822
+ machinery: 0,
823
+ pharmaceuticals: 0
824
+ },
825
+ CA: {
826
+ steel: 10,
827
+ agriculture: 5,
828
+ automotive: 0,
829
+ electronics: 0,
830
+ textiles: 8,
831
+ chemicals: 2,
832
+ machinery: 0,
833
+ pharmaceuticals: 0
834
+ },
835
+ MX: {
836
+ steel: 15,
837
+ agriculture: 10,
838
+ automotive: 5,
839
+ electronics: 0,
840
+ textiles: 10,
841
+ chemicals: 3,
842
+ machinery: 5,
843
+ pharmaceuticals: 0
844
+ },
845
+ IN: {
846
+ steel: 20,
847
+ agriculture: 30,
848
+ automotive: 15,
849
+ electronics: 0,
850
+ textiles: 15,
851
+ chemicals: 7.5,
852
+ machinery: 10,
853
+ pharmaceuticals: 0
854
+ },
855
+ BR: {
856
+ steel: 12,
857
+ agriculture: 25,
858
+ automotive: 10,
859
+ electronics: 0,
860
+ textiles: 20,
861
+ chemicals: 8,
862
+ machinery: 12,
863
+ pharmaceuticals: 0
864
+ }
865
+ };
866
+
867
+ // Credit rating data
868
+ const creditRatings = {
869
+ US: { rating: 'AA', premium: 0.5, gdp: 2.3, inflation: 3.2, unemployment: 4.1, debt: 110 },
870
+ EU: { rating: 'AA', premium: 0.6, gdp: 1.8, inflation: 2.8, unemployment: 6.5, debt: 85 },
871
+ CN: { rating: 'A', premium: 0.8, gdp: 5.2, inflation: 2.1, unemployment: 5.0, debt: 60 },
872
+ JP: { rating: 'A', premium: 0.7, gdp: 1.1, inflation: 0.5, unemployment: 2.5, debt: 240 },
873
+ CA: { rating: 'AAA', premium: 0.4, gdp: 2.0, inflation: 2.5, unemployment: 5.5, debt: 90 },
874
+ MX: { rating: 'BBB', premium: 1.2, gdp: 3.0, inflation: 4.2, unemployment: 3.8, debt: 55 },
875
+ IN: { rating: 'BBB-', premium: 1.5, gdp: 6.5, inflation: 5.8, unemployment: 7.2, debt: 75 },
876
+ BR: { rating: 'BB-', premium: 2.0, gdp: 2.8, inflation: 8.5, unemployment: 9.0, debt: 85 }
877
+ };
878
+
879
+ // Market share impact data
880
+ const marketShareData = {
881
+ steel: { loss: 5, savings: 15 },
882
+ agriculture: { loss: 8, savings: 10 },
883
+ automotive: { loss: 15, savings: 20 },
884
+ electronics: { loss: 2, savings: 5 },
885
+ textiles: { loss: 10, savings: 18 },
886
+ chemicals: { loss: 7, savings: 12 },
887
+ machinery: { loss: 5, savings: 10 },
888
+ pharmaceuticals: { loss: 1, savings: 3 }
889
+ };
890
+
891
+ // Initialize the app
892
+ function init() {
893
+ // Event listeners for main calculator
894
+ industrySelect.addEventListener('change', handleIndustryChange);
895
+ tariffSlider.addEventListener('input', updateTariffValue);
896
+ calculateBtn.addEventListener('click', calculateFinancing);
897
+
898
+ // Event listeners for modal toggles
899
+ buyDownBtn.addEventListener('click', () => toggleModal(buyDownModal));
900
+ marketShareBtn.addEventListener('click', () => toggleModal(marketShareModal));
901
+ tokenMintBtn.addEventListener('click', () => toggleModal(tokenMintModal));
902
+ creditRatingBtn.addEventListener('click', () => toggleModal(creditRatingModal));
903
+
904
+ // Event listeners for modal closes
905
+ closeModal.addEventListener('click', () => toggleModal(buyDownModal));
906
+ closeMarketShareModal.addEventListener('click', () => toggleModal(marketShareModal));
907
+ closeTokenModal.addEventListener('click', () => toggleModal(tokenMintModal));
908
+ closeCreditRatingModal.addEventListener('click', () => toggleModal(creditRatingModal));
909
+ closeMarketShareBtn.addEventListener('click', () => toggleModal(marketShareModal));
910
+ closeCreditRatingBtn.addEventListener('click', () => toggleModal(creditRatingModal));
911
+
912
+ // Event listeners for buy down modal
913
+ buyDownSlider.addEventListener('input', updateBuyDownValue);
914
+ bitcoinAddress.addEventListener('input', updateMiningEstimate);
915
+ applyBuyDown.addEventListener('click', applyBuyDownPoints);
916
+
917
+ // Event listeners for market share modal
918
+ industrySelect.addEventListener('change', updateMarketShareImpact);
919
+
920
+ // Event listeners for credit rating modal
921
+ countrySelect.addEventListener('change', updateCreditRating);
922
+
923
+ // Event listeners for token minting modal
924
+ mintAmount.addEventListener('input', updateMintCost);
925
+
926
+ // Event listeners for FFFUND panel
927
+ tokenMintBtn.addEventListener('click', toggleFFFundPanel);
928
+ closeFFFundPanel.addEventListener('click', toggleFFFundPanel);
929
+ fffundMintAmount.addEventListener('input', updateFFFundMintCost);
930
+ fffundMintBtn.addEventListener('click', mintFFFundTokens);
931
+
932
+ // Initialize values
933
+ updateTariffValue();
934
+ updateBuyDownValue();
935
+ updateCreditRating();
936
+ updateMintCost();
937
+ updateFFFundMintCost();
938
+ }
939
+
940
+ // Toggle modal visibility
941
+ function toggleModal(modal) {
942
+ modal.classList.toggle('active');
943
+ }
944
+
945
+ // Toggle FFFUND panel visibility
946
+ function toggleFFFundPanel() {
947
+ fffundPanel.classList.toggle('active');
948
+ fffundOverlay.classList.toggle('active');
949
+ }
950
+
951
+ // Handle industry selection change
952
+ function handleIndustryChange() {
953
+ const selectedIndustry = industrySelect.value;
954
+
955
+ if (selectedIndustry === 'custom') {
956
+ customTariffSection.classList.remove('hidden');
957
+ updateTariffValue();
958
+ } else {
959
+ customTariffSection.classList.add('hidden');
960
+
961
+ if (selectedIndustry) {
962
+ const country = importCountrySelect.value;
963
+ const tariffRate = tariffRates[country][selectedIndustry];
964
+ const loanAmount = parseFloat(loanAmountInput.value) || 0;
965
+ const tariffAmount = loanAmount * (tariffRate / 100);
966
+
967
+ totalTariffDisplay.textContent = `$${tariffAmount.toLocaleString()} (${tariffRate}%)`;
968
+
969
+ // Update tariff breakdown
970
+ tariffBreakdown.innerHTML = `
971
+ <div class="flex justify-between">
972
+ <span>${selectedIndustry.replace(/^\w/, c => c.toUpperCase())} tariff (${country}):</span>
973
+ <span>${tariffRate}%</span>
974
+ </div>
975
+ `;
976
+
977
+ // Show tariff impact meter
978
+ tariffImpactMeter.classList.remove('hidden');
979
+ tariffImpactBar.style.width = `${Math.min(tariffRate, 100)}%`;
980
+
981
+ // Update market share impact if modal is open
982
+ if (marketShareModal.classList.contains('active')) {
983
+ updateMarketShareImpact();
984
+ }
985
+ } else {
986
+ totalTariffDisplay.textContent = '$0 (0%)';
987
+ tariffBreakdown.innerHTML = '';
988
+ tariffImpactMeter.classList.add('hidden');
989
+ }
990
+ }
991
+ }
992
+
993
+ // Update custom tariff value display
994
+ function updateTariffValue() {
995
+ const tariffRate = tariffSlider.value;
996
+ tariffValue.textContent = `${tariffRate}%`;
997
+
998
+ if (industrySelect.value === 'custom') {
999
+ const loanAmount = parseFloat(loanAmountInput.value) || 0;
1000
+ const tariffAmount = loanAmount * (tariffRate / 100);
1001
+
1002
+ totalTariffDisplay.textContent = `$${tariffAmount.toLocaleString()} (${tariffRate}%)`;
1003
+
1004
+ // Update tariff breakdown
1005
+ tariffBreakdown.innerHTML = `
1006
+ <div class="flex justify-between">
1007
+ <span>Custom tariff:</span>
1008
+ <span>${tariffRate}%</span>
1009
+ </div>
1010
+ `;
1011
+
1012
+ // Show tariff impact meter
1013
+ tariffImpactMeter.classList.remove('hidden');
1014
+ tariffImpactBar.style.width = `${Math.min(tariffRate, 100)}%`;
1015
+ }
1016
+ }
1017
+
1018
+ // Calculate financing details
1019
+ function calculateFinancing() {
1020
+ const loanAmount = parseFloat(loanAmountInput.value) || 0;
1021
+ const primeRate = parseFloat(primeRateInput.value) || 0;
1022
+ const selectedIndustry = industrySelect.value;
1023
+
1024
+ if (!selectedIndustry) {
1025
+ alert('Please select a product category');
1026
+ return;
1027
+ }
1028
+
1029
+ // Get tariff rate
1030
+ let tariffRate = 0;
1031
+ if (selectedIndustry === 'custom') {
1032
+ tariffRate = parseFloat(tariffSlider.value) || 0;
1033
+ } else {
1034
+ const country = importCountrySelect.value;
1035
+ tariffRate = tariffRates[country][selectedIndustry];
1036
+ }
1037
+
1038
+ // Calculate tariff amount
1039
+ const tariffAmount = loanAmount * (tariffRate / 100);
1040
+ const totalLoan = loanAmount + tariffAmount;
1041
+
1042
+ // Calculate effective interest rate (prime rate + risk premium)
1043
+ const country = importCountrySelect.value;
1044
+ const riskPremium = creditRatings[country].premium;
1045
+ const effectiveRate = primeRate + riskPremium;
1046
+
1047
+ // Calculate monthly payment (simple amortization)
1048
+ const monthlyRate = effectiveRate / 100 / 12;
1049
+ const termYears = 5;
1050
+ const termMonths = termYears * 12;
1051
+ const monthlyPayment = totalLoan * monthlyRate * Math.pow(1 + monthlyRate, termMonths) / (Math.pow(1 + monthlyRate, termMonths) - 1);
1052
+
1053
+ // Calculate total interest cost
1054
+ const totalInterest = monthlyPayment * termMonths - totalLoan;
1055
+
1056
+ // Update results display
1057
+ totalLoanDisplay.textContent = `$${totalLoan.toLocaleString(undefined, {maximumFractionDigits: 2})}`;
1058
+ effectiveRateDisplay.textContent = `${effectiveRate.toFixed(2)}%`;
1059
+ monthlyPaymentDisplay.textContent = `$${monthlyPayment.toLocaleString(undefined, {maximumFractionDigits: 2})}`;
1060
+ totalTariffCost.textContent = `$${tariffAmount.toLocaleString(undefined, {maximumFractionDigits: 2})}`;
1061
+ totalInterestCost.textContent = `$${totalInterest.toLocaleString(undefined, {maximumFractionDigits: 2})}`;
1062
+
1063
+ // Generate amortization schedule
1064
+ generateAmortizationSchedule(totalLoan, effectiveRate, termYears);
1065
+
1066
+ // Show results
1067
+ resultsSection.classList.remove('hidden');
1068
+
1069
+ // Scroll to results
1070
+ resultsSection.scrollIntoView({ behavior: 'smooth' });
1071
+ }
1072
+
1073
+ // Generate amortization schedule
1074
+ function generateAmortizationSchedule(principal, annualRate, years) {
1075
+ const monthlyRate = annualRate / 100 / 12;
1076
+ const months = years * 12;
1077
+ const monthlyPayment = principal * monthlyRate * Math.pow(1 + monthlyRate, months) / (Math.pow(1 + monthlyRate, months) - 1);
1078
+
1079
+ let balance = principal;
1080
+ let html = '';
1081
+
1082
+ for (let year = 1; year <= years; year++) {
1083
+ let yearInterest = 0;
1084
+ let yearPrincipal = 0;
1085
+
1086
+ for (let month = 1; month <= 12; month++) {
1087
+ const interest = balance * monthlyRate;
1088
+ const principalPayment = monthlyPayment - interest;
1089
+
1090
+ yearInterest += interest;
1091
+ yearPrincipal += principalPayment;
1092
+ balance -= principalPayment;
1093
+ }
1094
+
1095
+ html += `
1096
+ <tr>
1097
+ <td class="py-2 px-4">${year}</td>
1098
+ <td class="py-2 px-4 text-right">$${yearPrincipal.toLocaleString(undefined, {maximumFractionDigits: 2})}</td>
1099
+ <td class="py-2 px-4 text-right">$${yearInterest.toLocaleString(undefined, {maximumFractionDigits: 2})}</td>
1100
+ <td class="py-2 px-4 text-right">$${balance > 0 ? balance.toLocaleString(undefined, {maximumFractionDigits: 2}) : '0'}</td>
1101
+ </tr>
1102
+ `;
1103
+ }
1104
+
1105
+ amortizationTable.innerHTML = html;
1106
+ }
1107
+
1108
+ // Update buy down value display
1109
+ function updateBuyDownValue() {
1110
+ const points = buyDownSlider.value;
1111
+ buyDownValue.textContent = `${points} points`;
1112
+
1113
+ // Calculate new rate
1114
+ const primeRate = parseFloat(primeRateInput.value) || 0;
1115
+ const country = importCountrySelect.value;
1116
+ const riskPremium = creditRatings[country].premium;
1117
+ const rateReduction = points * 0.25;
1118
+ const newRateValue = primeRate + riskPremium - rateReduction;
1119
+
1120
+ // Calculate buy down cost
1121
+ const loanAmount = parseFloat(loanAmountInput.value) || 0;
1122
+ const cost = loanAmount * (points / 100);
1123
+
1124
+ // Update display
1125
+ newRate.textContent = `${newRateValue.toFixed(2)}%`;
1126
+ buyDownCost.textContent = `$${cost.toLocaleString(undefined, {maximumFractionDigits: 2})}`;
1127
+ }
1128
+
1129
+ // Update mining estimate based on BTC address
1130
+ function updateMiningEstimate() {
1131
+ const address = bitcoinAddress.value;
1132
+
1133
+ if (address && address.match(/^(bc1|[13])[a-zA-HJ-NP-Z0-9]{25,39}$/)) {
1134
+ // Simulate mining estimate
1135
+ estimatedBTC.textContent = '0.0025 BTC';
1136
+ miningPoints.textContent = '0.5 points';
1137
+ miningRateReduction.textContent = '0.125%';
1138
+ miningLoanImpact.textContent = '-$1,250';
1139
+ } else {
1140
+ estimatedBTC.textContent = '0 BTC';
1141
+ miningPoints.textContent = '0 points';
1142
+ miningRateReduction.textContent = '0%';
1143
+ miningLoanImpact.textContent = '$0';
1144
+ }
1145
+ }
1146
+
1147
+ // Apply buy down points to loan
1148
+ function applyBuyDownPoints() {
1149
+ const points = parseFloat(buyDownSlider.value) || 0;
1150
+
1151
+ if (points > 0) {
1152
+ alert(`Successfully applied ${points} buy down points to your loan.`);
1153
+ toggleModal(buyDownModal);
1154
+ } else {
1155
+ alert('Please select at least 0.25 points to apply.');
1156
+ }
1157
+ }
1158
+
1159
+ // Update market share impact based on selected industry
1160
+ function updateMarketShareImpact() {
1161
+ const selectedIndustry = industrySelect.value;
1162
+
1163
+ if (selectedIndustry && selectedIndustry !== 'custom') {
1164
+ const impact = marketShareData[selectedIndustry];
1165
+ marketShareLoss.textContent = `${impact.loss}%`;
1166
+ costSavings.textContent = `${impact.savings}%`;
1167
+
1168
+ // Position gauge pointer (simple linear scale)
1169
+ const position = (impact.savings - impact.loss + 30) / 60 * 100;
1170
+ gaugePointer.style.left = `${Math.min(Math.max(position, 5), 95)}%`;
1171
+
1172
+ // Update analysis text
1173
+ if (impact.loss > 10) {
1174
+ marketShareAnalysis.textContent = 'This product category has significant market share risk with tariff financing.';
1175
+ } else if (impact.savings > 15) {
1176
+ marketShareAnalysis.textContent = 'Tariff financing offers excellent cost savings with moderate market share impact.';
1177
+ } else {
1178
+ marketShareAnalysis.textContent = 'Using tariff financing results in balanced market share impact and cost savings.';
1179
+ }
1180
+ }
1181
+ }
1182
+
1183
+ // Update credit rating based on selected country
1184
+ function updateCreditRating() {
1185
+ const country = countrySelect.value;
1186
+ const ratingData = creditRatings[country];
1187
+
1188
+ // Update rating display
1189
+ creditRating.textContent = ratingData.rating;
1190
+ creditRating.className = `credit-rating-badge credit-rating-${ratingData.rating.replace(/[^A-Z]/g, '')}`;
1191
+
1192
+ // Update other fields
1193
+ riskPremium.textContent = `+${ratingData.premium}%`;
1194
+ gdpGrowth.textContent = `${ratingData.gdp}%`;
1195
+ inflationRate.textContent = `${ratingData.inflation}%`;
1196
+ unemploymentRate.textContent = `${ratingData.unemployment}%`;
1197
+ debtToGDP.textContent = `${ratingData.debt}%`;
1198
+ }
1199
+
1200
+ // Update mint cost based on amount
1201
+ function updateMintCost() {
1202
+ const amount = parseFloat(mintAmount.value) || 0;
1203
+ const cost = amount * 0.0000001; // 1,000 FFFUND = 0.0001 BTC
1204
+ mintCost.textContent = `${cost.toFixed(6)} BTC`;
1205
+ }
1206
+
1207
+ // Update FFFUND mint cost based on amount
1208
+ function updateFFFundMintCost() {
1209
+ const amount = parseFloat(fffundMintAmount.value) || 0;
1210
+ const cost = amount * 0.0000001; // 1,000 FFFUND = 0.0001 BTC
1211
+ fffundMintCost.textContent = `${cost.toFixed(6)} BTC`;
1212
+ }
1213
+
1214
+ // Mint FFFUND tokens
1215
+ function mintFFFundTokens() {
1216
+ const amount = parseFloat(fffundMintAmount.value) || 0;
1217
+ const address = fffundPaymentAddress.value;
1218
+
1219
+ if (amount < 10000) {
1220
+ alert('Minimum mint amount is 10,000 FFFUND');
1221
+ return;
1222
+ }
1223
+
1224
+ if (!address || !address.match(/^(bc1|[13])[a-zA-HJ-NP-Z0-9]{25,39}$/)) {
1225
+ alert('Please enter a valid Bitcoin address');
1226
+ return;
1227
+ }
1228
+
1229
+ alert(`Successfully minted ${amount.toLocaleString()} FFFUND tokens to address ${address}`);
1230
+ toggleFFFundPanel();
1231
+ }
1232
+
1233
+ // Initialize the app
1234
+ init();
1235
+ </script>
1236
+ <p style="border-radius: 8px; text-align: center; font-size: 12px; color: #fff; margin-top: 16px;position: fixed; left: 8px; bottom: 8px; z-index: 10; background: rgba(0, 0, 0, 0.8); padding: 4px 8px;">Made with <img src="https://enzostvs-deepsite.hf.space/logo.svg" alt="DeepSite Logo" style="width: 16px; height: 16px; vertical-align: middle;display:inline-block;margin-right:3px;filter:brightness(0) invert(1);"><a href="https://enzostvs-deepsite.hf.space" style="color: #fff;text-decoration: underline;" target="_blank" >DeepSite</a> - 🧬 <a href="https://enzostvs-deepsite.hf.space?remix=privateuserh/privfin-vbeta1-06" style="color: #fff;text-decoration: underline;" target="_blank" >Remix</a></p></body>
1237
+ </html>