Hugging Face's logo

Spaces:
privateuserh
/
privspot-vbeta1-03
Running

App Files Community
privateuserh commited on
Commit
5563527
·
verified ·
1 Parent(s): f029af6

Add 3 files

Browse files
Files changed (3) hide show
  1. README.md +7 -5
  2. index.html +1234 -19
  3. prompts.txt +1 -0
README.md CHANGED
@@ -1,10 +1,12 @@
1
  ---
2
- title: Privspot Vbeta1 03
3
- emoji: 💻
4
- colorFrom: purple
5
- colorTo: blue
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: privspot-vbeta1-03
3
+ emoji: 🐳
4
+ colorFrom: red
5
+ colorTo: pink
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,1234 @@
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>ForwardX - Advanced Forward Contract Trading</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
+ <script>
10
+ tailwind.config = {
11
+ theme: {
12
+ extend: {
13
+ colors: {
14
+ primary: '#4f46e5',
15
+ secondary: '#10b981',
16
+ dark: '#1e293b',
17
+ light: '#f8fafc',
18
+ fractal: '#ED6B21',
19
+ bitcoin: '#F7931A',
20
+ bitcoinCash: '#0AC18E'
21
+ }
22
+ }
23
+ }
24
+ }
25
+ </script>
26
+ <style>
27
+ .gradient-bg {
28
+ background: linear-gradient(135deg, #4f46e5 0%, #10b981 100%);
29
+ }
30
+ .contract-card:hover {
31
+ transform: translateY(-5px);
32
+ box-shadow: 0 10px 25px rgba(0, 0, 0, 0.1);
33
+ }
34
+ .chart-container {
35
+ height: 400px;
36
+ background-color: #f8fafc;
37
+ border-radius: 0.5rem;
38
+ }
39
+ .tab-active {
40
+ border-bottom: 3px solid #4f46e5;
41
+ color: #4f46e5;
42
+ font-weight: 600;
43
+ }
44
+ .order-book {
45
+ max-height: 300px;
46
+ overflow-y: auto;
47
+ }
48
+ .order-book::-webkit-scrollbar {
49
+ width: 5px;
50
+ }
51
+ .order-book::-webkit-scrollbar-thumb {
52
+ background-color: #cbd5e1;
53
+ border-radius: 10px;
54
+ }
55
+ #consentModal {
56
+ backdrop-filter: blur(5px);
57
+ }
58
+ .tradingview-widget-container iframe {
59
+ border-radius: 0.5rem;
60
+ }
61
+ .floating-action-btn {
62
+ position: fixed;
63
+ width: 60px;
64
+ height: 60px;
65
+ bottom: 40px;
66
+ right: 40px;
67
+ background-color: #4f46e5;
68
+ color: white;
69
+ border-radius: 50px;
70
+ text-align: center;
71
+ box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
72
+ z-index: 100;
73
+ display: flex;
74
+ align-items: center;
75
+ justify-content: center;
76
+ cursor: pointer;
77
+ transition: all 0.3s;
78
+ }
79
+ .floating-action-btn:hover {
80
+ transform: scale(1.1);
81
+ box-shadow: 0 6px 12px rgba(0, 0, 0, 0.3);
82
+ }
83
+ .floating-action-menu {
84
+ position: fixed;
85
+ bottom: 110px;
86
+ right: 40px;
87
+ background: white;
88
+ border-radius: 8px;
89
+ box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
90
+ z-index: 99;
91
+ width: 250px;
92
+ overflow: hidden;
93
+ transform: translateY(20px);
94
+ opacity: 0;
95
+ visibility: hidden;
96
+ transition: all 0.3s;
97
+ }
98
+ .floating-action-menu.active {
99
+ transform: translateY(0);
100
+ opacity: 1;
101
+ visibility: visible;
102
+ }
103
+ .floating-action-item {
104
+ padding: 12px 16px;
105
+ display: flex;
106
+ align-items: center;
107
+ cursor: pointer;
108
+ transition: background 0.2s;
109
+ }
110
+ .floating-action-item:hover {
111
+ background: #f1f5f9;
112
+ }
113
+ .floating-action-item i {
114
+ margin-right: 10px;
115
+ font-size: 18px;
116
+ }
117
+ .floating-action-item.bitcoin i {
118
+ color: #F7931A;
119
+ }
120
+ .floating-action-item.fractal i {
121
+ color: #ED6B21;
122
+ }
123
+ .floating-action-item.bitcoin-cash i {
124
+ color: #0AC18E;
125
+ }
126
+ .price-movement-up {
127
+ animation: priceUp 1s ease-out;
128
+ }
129
+ .price-movement-down {
130
+ animation: priceDown 1s ease-out;
131
+ }
132
+ @keyframes priceUp {
133
+ 0% { background-color: rgba(16, 185, 129, 0); }
134
+ 50% { background-color: rgba(16, 185, 129, 0.3); }
135
+ 100% { background-color: rgba(16, 185, 129, 0); }
136
+ }
137
+ @keyframes priceDown {
138
+ 0% { background-color: rgba(239, 68, 68, 0); }
139
+ 50% { background-color: rgba(239, 68, 68, 0.3); }
140
+ 100% { background-color: rgba(239, 68, 68, 0); }
141
+ }
142
+ .crypto-badge {
143
+ display: inline-flex;
144
+ align-items: center;
145
+ padding: 2px 8px;
146
+ border-radius: 4px;
147
+ font-size: 12px;
148
+ font-weight: 600;
149
+ margin-left: 6px;
150
+ }
151
+ .badge-bitcoin {
152
+ background-color: #F7931A20;
153
+ color: #F7931A;
154
+ }
155
+ .badge-fractal {
156
+ background-color: #ED6B2120;
157
+ color: #ED6B21;
158
+ }
159
+ .badge-bitcoin-cash {
160
+ background-color: #0AC18E20;
161
+ color: #0AC18E;
162
+ }
163
+ </style>
164
+ </head>
165
+ <body class="bg-gray-50">
166
+ <!-- IP-based Account Notice -->
167
+ <div class="bg-blue-50 border-l-4 border-blue-500 p-4">
168
+ <div class="flex">
169
+ <div class="flex-shrink-0">
170
+ <i class="fas fa-info-circle text-blue-500 text-xl mt-1"></i>
171
+ </div>
172
+ <div class="ml-3">
173
+ <p class="text-sm text-blue-700">
174
+ Your session is automatically tracked via your IP address (<span id="userIP">detecting...</span>). No registration required.
175
+ </p>
176
+ </div>
177
+ </div>
178
+ </div>
179
+
180
+ <!-- Consent Modal -->
181
+ <div id="consentModal" class="fixed inset-0 bg-black bg-opacity-50 flex items-center justify-center z-50 hidden">
182
+ <div class="bg-white rounded-lg p-6 max-w-md w-full">
183
+ <div class="flex items-center mb-4">
184
+ <i class="fas fa-shield-alt text-primary text-2xl mr-3"></i>
185
+ <h3 class="text-xl font-bold">Data Access Permission</h3>
186
+ </div>
187
+ <p class="mb-4 text-gray-700">
188
+ ForwardX would like to access market data from Trading Economics API to provide real-time forward contract pricing. This data will be used to display accurate market information and calculate contract values.
189
+ </p>
190
+ <div class="flex space-x-4">
191
+ <button id="denyConsent" class="flex-1 bg-gray-200 text-gray-800 py-2 rounded-md font-medium hover:bg-gray-300">Deny</button>
192
+ <button id="grantConsent" class="flex-1 bg-primary text-white py-2 rounded-md font-medium hover:bg-opacity-90">Allow</button>
193
+ </div>
194
+ </div>
195
+ </div>
196
+
197
+ <!-- Payment Modal -->
198
+ <div id="paymentModal" class="fixed inset-0 bg-black bg-opacity-50 flex items-center justify-center z-50 hidden">
199
+ <div class="bg-white rounded-lg p-6 max-w-md w-full">
200
+ <div class="flex justify-between items-center mb-4">
201
+ <h3 class="text-xl font-bold" id="paymentTitle">Buy Forward Contract</h3>
202
+ <button id="closePaymentModal" class="text-gray-500 hover:text-gray-700">
203
+ <i class="fas fa-times"></i>
204
+ </button>
205
+ </div>
206
+ <div class="mb-4">
207
+ <label class="block text-gray-700 text-sm font-bold mb-2" for="cryptoAddress">
208
+ Your <span id="cryptoType">Bitcoin</span> Address
209
+ </label>
210
+ <input type="text" id="cryptoAddress" placeholder="Enter your cryptocurrency address" class="w-full px-3 py-2 border border-gray-300 rounded-md focus:outline-none focus:ring-2 focus:ring-primary">
211
+ </div>
212
+ <div class="mb-4">
213
+ <label class="block text-gray-700 text-sm font-bold mb-2" for="contractAmount">
214
+ Contract Amount (USD)
215
+ </label>
216
+ <input type="number" id="contractAmount" placeholder="1000" class="w-full px-3 py-2 border border-gray-300 rounded-md focus:outline-none focus:ring-2 focus:ring-primary">
217
+ </div>
218
+ <div class="mb-4">
219
+ <label class="block text-gray-700 text-sm font-bold mb-2" for="forwardPrice">
220
+ Forward Price (USD)
221
+ </label>
222
+ <input type="number" id="forwardPrice" placeholder="Enter forward price" class="w-full px-3 py-2 border border-gray-300 rounded-md focus:outline-none focus:ring-2 focus:ring-primary">
223
+ </div>
224
+ <div class="mb-4 p-3 bg-gray-50 rounded-md">
225
+ <div class="flex justify-between mb-1">
226
+ <span class="text-gray-600">Current Spot Price:</span>
227
+ <span class="font-bold" id="currentSpotPrice">$52,123.45</span>
228
+ </div>
229
+ <div class="flex justify-between mb-1">
230
+ <span class="text-gray-600">You will pay:</span>
231
+ <span class="font-bold" id="cryptoAmount">0.0192 BTC</span>
232
+ </div>
233
+ <div class="flex justify-between">
234
+ <span class="text-gray-600">Expiry Date:</span>
235
+ <span class="font-bold" id="expiryDate">30 days</span>
236
+ </div>
237
+ </div>
238
+ <button id="confirmPayment" class="w-full bg-primary text-white py-3 rounded-md font-bold hover:bg-opacity-90">
239
+ Confirm & Pay with <span id="confirmCryptoType">Bitcoin</span>
240
+ </button>
241
+ </div>
242
+ </div>
243
+
244
+ <!-- Seller Agreement Modal -->
245
+ <div id="sellerModal" class="fixed inset-0 bg-black bg-opacity-50 flex items-center justify-center z-50 hidden">
246
+ <div class="bg-white rounded-lg p-6 max-w-md w-full">
247
+ <div class="flex justify-between items-center mb-4">
248
+ <h3 class="text-xl font-bold">Sell Inventory Agreement</h3>
249
+ <button id="closeSellerModal" class="text-gray-500 hover:text-gray-700">
250
+ <i class="fas fa-times"></i>
251
+ </button>
252
+ </div>
253
+ <div class="mb-4">
254
+ <label class="block text-gray-700 text-sm font-bold mb-2" for="sellerAmount">
255
+ Amount to Sell (USD)
256
+ </label>
257
+ <input type="number" id="sellerAmount" placeholder="1000" class="w-full px-3 py-2 border border-gray-300 rounded-md focus:outline-none focus:ring-2 focus:ring-primary">
258
+ </div>
259
+ <div class="mb-4">
260
+ <label class="block text-gray-700 text-sm font-bold mb-2" for="sellerPrice">
261
+ Forward Price (USD)
262
+ </label>
263
+ <input type="number" id="sellerPrice" placeholder="Enter forward price" class="w-full px-3 py-2 border border-gray-300 rounded-md focus:outline-none focus:ring-2 focus:ring-primary">
264
+ </div>
265
+ <div class="mb-4">
266
+ <label class="block text-gray-700 text-sm font-bold mb-2" for="sellerExpiry">
267
+ Expiry Date
268
+ </label>
269
+ <input type="date" id="sellerExpiry" class="w-full px-3 py-2 border border-gray-300 rounded-md focus:outline-none focus:ring-2 focus:ring-primary">
270
+ </div>
271
+ <div class="mb-4 p-3 bg-gray-50 rounded-md">
272
+ <div class="flex justify-between mb-1">
273
+ <span class="text-gray-600">Current Spot Price:</span>
274
+ <span class="font-bold">$52,123.45</span>
275
+ </div>
276
+ <div class="flex justify-between">
277
+ <span class="text-gray-600">You will receive at expiry:</span>
278
+ <span class="font-bold" id="sellerReceive">$52,123.45</span>
279
+ </div>
280
+ </div>
281
+ <button id="confirmSellerAgreement" class="w-full bg-green-500 text-white py-3 rounded-md font-bold hover:bg-green-600">
282
+ Create Sell Agreement
283
+ </button>
284
+ </div>
285
+ </div>
286
+
287
+ <!-- Header -->
288
+ <header class="gradient-bg text-white">
289
+ <div class="container mx-auto px-4 py-4">
290
+ <div class="flex justify-between items-center">
291
+ <div class="flex items-center space-x-2">
292
+ <i class="fas fa-forward text-2xl"></i>
293
+ <h1 class="text-2xl font-bold">ForwardX</h1>
294
+ </div>
295
+ <nav class="hidden md:flex space-x-6">
296
+ <a href="#" class="hover:text-gray-200">Markets</a>
297
+ <a href="#" class="hover:text-gray-200">Trade</a>
298
+ <a href="#" class="hover:text-gray-200">Derivatives</a>
299
+ <a href="#" class="hover:text-gray-200">Portfolio</a>
300
+ <a href="#" class="hover:text-gray-200">Learn</a>
301
+ </nav>
302
+ <div class="flex items-center space-x-4">
303
+ <button class="hidden md:block bg-primary text-white px-4 py-2 rounded-md font-medium hover:bg-opacity-90">
304
+ <i class="fas fa-user mr-2"></i> <span id="accountStatus">IP Account</span>
305
+ </button>
306
+ <button class="md:hidden">
307
+ <i class="fas fa-bars text-xl"></i>
308
+ </button>
309
+ </div>
310
+ </div>
311
+ </div>
312
+ </header>
313
+
314
+ <!-- Main Content -->
315
+ <main class="container mx-auto px-4 py-8">
316
+ <!-- Market Overview -->
317
+ <section class="mb-8">
318
+ <div class="flex justify-between items-center mb-4">
319
+ <h2 class="text-2xl font-bold text-dark">Forward Contract Markets</h2>
320
+ <div class="flex items-center">
321
+ <span class="text-sm text-gray-600 mr-2">Base Currency:</span>
322
+ <select id="baseCurrency" class="px-3 py-1 border border-gray-300 rounded-md focus:outline-none focus:ring-2 focus:ring-primary">
323
+ <option value="USD">USD</option>
324
+ <option value="GBP">GBP</option>
325
+ <option value="EUR">EUR</option>
326
+ </select>
327
+ </div>
328
+ </div>
329
+ <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-4">
330
+ <!-- Mini Contracts -->
331
+ <div class="contract-card bg-white p-6 rounded-lg shadow-md transition-all duration-300">
332
+ <div class="flex justify-between items-start mb-4">
333
+ <div>
334
+ <h3 class="font-bold text-lg">Mini Contracts</h3>
335
+ <p class="text-gray-500 text-sm">1 pound increments</p>
336
+ </div>
337
+ <span class="bg-green-100 text-green-800 text-xs px-2 py-1 rounded">Active</span>
338
+ </div>
339
+ <div class="flex justify-between items-center mb-2">
340
+ <span class="text-gray-600">Current Price</span>
341
+ <span class="font-bold" id="miniPrice">$1,250.75</span>
342
+ </div>
343
+ <div class="flex justify-between items-center mb-4">
344
+ <span class="text-gray-600">24h Change</span>
345
+ <span class="text-green-500 font-bold" id="miniChange">+2.45%</span>
346
+ </div>
347
+ <button class="w-full bg-primary text-white py-2 rounded-md hover:bg-opacity-90">Trade Now</button>
348
+ </div>
349
+
350
+ <!-- Standard Contracts -->
351
+ <div class="contract-card bg-white p-6 rounded-lg shadow-md transition-all duration-300">
352
+ <div class="flex justify-between items-start mb-4">
353
+ <div>
354
+ <h3 class="font-bold text-lg">Standard Contracts</h3>
355
+ <p class="text-gray-500 text-sm">5 pound increments</p>
356
+ </div>
357
+ <span class="bg-green-100 text-green-800 text-xs px-2 py-1 rounded">Active</span>
358
+ </div>
359
+ <div class="flex justify-between items-center mb-2">
360
+ <span class="text-gray-600">Current Price</span>
361
+ <span class="font-bold" id="standardPrice">$5,420.30</span>
362
+ </div>
363
+ <div class="flex justify-between items-center mb-4">
364
+ <span class="text-gray-600">24h Change</span>
365
+ <span class="text-red-500 font-bold" id="standardChange">-1.23%</span>
366
+ </div>
367
+ <button class="w-full bg-primary text-white py-2 rounded-md hover:bg-opacity-90">Trade Now</button>
368
+ </div>
369
+
370
+ <!-- Large Contracts -->
371
+ <div class="contract-card bg-white p-6 rounded-lg shadow-md transition-all duration-300">
372
+ <div class="flex justify-between items-start mb-4">
373
+ <div>
374
+ <h3 class="font-bold text-lg">Large Contracts</h3>
375
+ <p class="text-gray-500 text-sm">10 pound increments</p>
376
+ </div>
377
+ <span class="bg-green-100 text-green-800 text-xs px-2 py-1 rounded">Active</span>
378
+ </div>
379
+ <div class="flex justify-between items-center mb-2">
380
+ <span class="text-gray-600">Current Price</span>
381
+ <span class="font-bold" id="largePrice">$12,780.45</span>
382
+ </div>
383
+ <div class="flex justify-between items-center mb-4">
384
+ <span class="text-gray-600">24h Change</span>
385
+ <span class="text-green-500 font-bold" id="largeChange">+3.67%</span>
386
+ </div>
387
+ <button class="w-full bg-primary text-white py-2 rounded-md hover:bg-opacity-90">Trade Now</button>
388
+ </div>
389
+
390
+ <!-- Custom Contracts -->
391
+ <div class="contract-card bg-white p-6 rounded-lg shadow-md transition-all duration-300">
392
+ <div class="flex justify-between items-start mb-4">
393
+ <div>
394
+ <h3 class="font-bold text-lg">Custom Contracts</h3>
395
+ <p class="text-gray-500 text-sm">Tailored to your needs</p>
396
+ </div>
397
+ <span class="bg-blue-100 text-blue-800 text-xs px-2 py-1 rounded">New</span>
398
+ </div>
399
+ <div class="flex justify-between items-center mb-2">
400
+ <span class="text-gray-600">Flexible Terms</span>
401
+ <span class="font-bold">Variable</span>
402
+ </div>
403
+ <div class="flex justify-between items-center mb-4">
404
+ <span class="text-gray-600">Customization</span>
405
+ <span class="text-primary font-bold">Available</span>
406
+ </div>
407
+ <button class="w-full bg-secondary text-white py-2 rounded-md hover:bg-opacity-90">Create Custom</button>
408
+ </div>
409
+ </div>
410
+ </section>
411
+
412
+ <!-- Trading Interface -->
413
+ <section class="mb-8">
414
+ <div class="grid grid-cols-1 lg:grid-cols-3 gap-6">
415
+ <!-- Chart and Order Form -->
416
+ <div class="lg:col-span-2">
417
+ <!-- Tabs -->
418
+ <div class="flex border-b mb-4">
419
+ <button class="px-4 py-2 mr-2 tab-active" data-market="BTC">BTC/USD</button>
420
+ <button class="px-4 py-2 mr-2" data-market="ETH">ETH/USD</button>
421
+ <button class="px-4 py-2 mr-2" data-market="GOLD">GOLD/USD</button>
422
+ <button class="px-4 py-2" data-market="OIL">OIL/USD</button>
423
+ </div>
424
+
425
+ <!-- Chart -->
426
+ <div class="chart-container p-4 shadow-sm mb-6">
427
+ <!-- TradingView Widget -->
428
+ <div class="tradingview-widget-container">
429
+ <div id="tradingview-chart" style="height: 100%;"></div>
430
+ <div class="tradingview-widget-copyright">
431
+ <a href="https://www.tradingview.com/" rel="noopener nofollow" target="_blank"></a>
432
+ </div>
433
+ </div>
434
+ </div>
435
+
436
+ <!-- Order Form -->
437
+ <div class="bg-white p-6 rounded-lg shadow-md">
438
+ <h3 class="font-bold text-lg mb-4">Create Forward Contract</h3>
439
+ <div class="grid grid-cols-1 md:grid-cols-2 gap-4 mb-4">
440
+ <div>
441
+ <label class="block text-gray-700 text-sm font-bold mb-2" for="contract-type">
442
+ Contract Type
443
+ </label>
444
+ <select id="contract-type" class="w-full px-3 py-2 border border-gray-300 rounded-md focus:outline-none focus:ring-2 focus:ring-primary">
445
+ <option>Mini (1x)</option>
446
+ <option>Standard (5x)</option>
447
+ <option>Large (10x)</option>
448
+ <option>Custom</option>
449
+ </select>
450
+ </div>
451
+ <div>
452
+ <label class="block text-gray-700 text-sm font-bold mb-2" for="expiry">
453
+ Expiry Date
454
+ </label>
455
+ <input type="date" id="expiry" class="w-full px-3 py-2 border border-gray-300 rounded-md focus:outline-none focus:ring-2 focus:ring-primary">
456
+ </div>
457
+ </div>
458
+ <div class="grid grid-cols-1 md:grid-cols-2 gap-4 mb-4">
459
+ <div>
460
+ <label class="block text-gray-700 text-sm font-bold mb-2" for="amount">
461
+ Amount (USD)
462
+ </label>
463
+ <input type="number" id="amount" placeholder="1000" class="w-full px-3 py-2 border border-gray-300 rounded-md focus:outline-none focus:ring-2 focus:ring-primary">
464
+ </div>
465
+ <div>
466
+ <label class="block text-gray-700 text-sm font-bold mb-2" for="leverage">
467
+ Leverage
468
+ </label>
469
+ <select id="leverage" class="w-full px-3 py-2 border border-gray-300 rounded-md focus:outline-none focus:ring-2 focus:ring-primary">
470
+ <option>1x</option>
471
+ <option>2x</option>
472
+ <option>5x</option>
473
+ <option>10x</option>
474
+ <option>20x</option>
475
+ </select>
476
+ </div>
477
+ </div>
478
+ <div class="mb-4">
479
+ <label class="block text-gray-700 text-sm font-bold mb-2" for="price">
480
+ Forward Price (USD)
481
+ </label>
482
+ <div class="relative">
483
+ <input type="number" id="price" placeholder="Enter forward price" class="w-full px-3 py-2 border border-gray-300 rounded-md focus:outline-none focus:ring-2 focus:ring-primary">
484
+ <div class="absolute inset-y-0 right-0 flex items-center pr-3 pointer-events-none">
485
+ <span class="text-gray-500 text-sm">USD</span>
486
+ </div>
487
+ </div>
488
+ </div>
489
+ <div class="flex space-x-4">
490
+ <button class="flex-1 bg-green-500 text-white py-3 rounded-md font-bold hover:bg-green-600">Buy Long</button>
491
+ <button class="flex-1 bg-red-500 text-white py-3 rounded-md font-bold hover:bg-red-600">Sell Short</button>
492
+ </div>
493
+ </div>
494
+ </div>
495
+
496
+ <!-- Order Book and Recent Trades -->
497
+ <div>
498
+ <!-- Order Book -->
499
+ <div class="bg-white p-4 rounded-lg shadow-md mb-6">
500
+ <div class="flex justify-between items-center mb-4">
501
+ <h3 class="font-bold text-lg">Order Book</h3>
502
+ <div class="text-xs text-gray-500">
503
+ <span>Spread: </span>
504
+ <span id="spreadValue">52.25</span>
505
+ <span> USD</span>
506
+ </div>
507
+ </div>
508
+ <div class="order-book">
509
+ <div class="text-right mb-2">
510
+ <span class="text-xs text-gray-500">Price (USD)</span>
511
+ <span class="text-xs text-gray-500 ml-8">Amount</span>
512
+ </div>
513
+ <!-- Sell Orders -->
514
+ <div class="mb-4">
515
+ <div class="text-red-500 font-medium text-sm mb-1">Sell Orders</div>
516
+ <div class="space-y-1" id="sellOrders">
517
+ <div class="flex justify-between text-red-500">
518
+ <span>52,450.25</span>
519
+ <span>1.25</span>
520
+ </div>
521
+ <div class="flex justify-between text-red-500">
522
+ <span>52,420.50</span>
523
+ <span>2.75</span>
524
+ </div>
525
+ <div class="flex justify-between text-red-500">
526
+ <span>52,400.00</span>
527
+ <span>0.85</span>
528
+ </div>
529
+ <div class="flex justify-between text-red-500">
530
+ <span>52,380.75</span>
531
+ <span>3.20</span>
532
+ </div>
533
+ <div class="flex justify-between text-red-500">
534
+ <span>52,350.00</span>
535
+ <span>1.50</span>
536
+ </div>
537
+ </div>
538
+ </div>
539
+ <!-- Current Price -->
540
+ <div class="text-center py-2 mb-4">
541
+ <div class="text-xl font-bold" id="currentPrice">52,123.45</div>
542
+ <div class="text-green-500 text-sm" id="priceChange">+1.25%</div>
543
+ </div>
544
+ <!-- Buy Orders -->
545
+ <div>
546
+ <div class="text-green-500 font-medium text-sm mb-1">Buy Orders</div>
547
+ <div class="space-y-1" id="buyOrders">
548
+ <div class="flex justify-between text-green-500">
549
+ <span>52,000.00</span>
550
+ <span>2.10</span>
551
+ </div>
552
+ <div class="flex justify-between text-green-500">
553
+ <span>51,980.50</span>
554
+ <span>1.75</span>
555
+ </div>
556
+ <div class="flex justify-between text-green-500">
557
+ <span>51,950.25</span>
558
+ <span>3.40</span>
559
+ </div>
560
+ <div class="flex justify-between text-green-500">
561
+ <span>51,920.00</span>
562
+ <span>0.90</span>
563
+ </div>
564
+ <div class="flex justify-between text-green-500">
565
+ <span>51,900.75</span>
566
+ <span>2.60</span>
567
+ </div>
568
+ </div>
569
+ </div>
570
+ </div>
571
+ </div>
572
+
573
+ <!-- Recent Trades -->
574
+ <div class="bg-white p-4 rounded-lg shadow-md">
575
+ <h3 class="font-bold text-lg mb-4">Recent Trades</h3>
576
+ <div class="space-y-2" id="recentTrades">
577
+ <div class="flex justify-between text-sm">
578
+ <span class="text-green-500">52,123.45</span>
579
+ <span>1.25 BTC</span>
580
+ <span class="text-gray-500">12:45:23</span>
581
+ </div>
582
+ <div class="flex justify-between text-sm">
583
+ <span class="text-red-500">52,125.80</span>
584
+ <span>0.75 BTC</span>
585
+ <span class="text-gray-500">12:44:56</span>
586
+ </div>
587
+ <div class="flex justify-between text-sm">
588
+ <span class="text-green-500">52,120.30</span>
589
+ <span>2.10 BTC</span>
590
+ <span class="text-gray-500">12:43:12</span>
591
+ </div>
592
+ <div class="flex justify-between text-sm">
593
+ <span class="text-green-500">52,115.75</span>
594
+ <span>1.50 BTC</span>
595
+ <span class="text-gray-500">12:42:45</span>
596
+ </div>
597
+ <div class="flex justify-between text-sm">
598
+ <span class="text-red-500">52,118.20</span>
599
+ <span>0.85 BTC</span>
600
+ <span class="text-gray-500">12:41:33</span>
601
+ </div>
602
+ </div>
603
+ </div>
604
+ </div>
605
+ </div>
606
+ </section>
607
+
608
+ <!-- Market Data Section -->
609
+ <section class="bg-white p-6 rounded-lg shadow-md mb-8">
610
+ <h2 class="text-2xl font-bold text-dark mb-4">Market Data Insights</h2>
611
+ <div class="grid grid-cols-1 md:grid-cols-3 gap-6">
612
+ <!-- Economic Calendar -->
613
+ <div class="border rounded-lg p-4">
614
+ <div class="flex items-center mb-3">
615
+ <i class="fas fa-calendar-alt text-primary mr-2"></i>
616
+ <h3 class="font-semibold">Economic Calendar</h3>
617
+ </div>
618
+ <div class="space-y-3" id="economicEvents">
619
+ <div class="text-sm">
620
+ <div class="flex justify-between">
621
+ <span class="font-medium">US Nonfarm Payrolls</span>
622
+ <span class="text-gray-500">Today</span>
623
+ </div>
624
+ <div class="text-gray-600">Expected: 180K</div>
625
+ </div>
626
+ <div class="text-sm">
627
+ <div class="flex justify-between">
628
+ <span class="font-medium">EU CPI</span>
629
+ <span class="text-gray-500">Tomorrow</span>
630
+ </div>
631
+ <div class="text-gray-600">Expected: 2.9%</div>
632
+ </div>
633
+ </div>
634
+ </div>
635
+
636
+ <!-- Commodity Prices -->
637
+ <div class="border rounded-lg p-4">
638
+ <div class="flex items-center mb-3">
639
+ <i class="fas fa-chart-line text-primary mr-2"></i>
640
+ <h3 class="font-semibold">Commodity Prices</h3>
641
+ </div>
642
+ <div class="space-y-3" id="commodityPrices">
643
+ <div class="text-sm">
644
+ <div class="flex justify-between">
645
+ <span class="font-medium">Gold</span>
646
+ <span class="font-bold">$1,950.40</span>
647
+ </div>
648
+ <div class="text-green-500">+0.45%</div>
649
+ </div>
650
+ <div class="text-sm">
651
+ <div class="flex justify-between">
652
+ <span class="font-medium">Oil</span>
653
+ <span class="font-bold">$78.25</span>
654
+ </div>
655
+ <div class="text-red-500">-1.20%</div>
656
+ </div>
657
+ </div>
658
+ </div>
659
+
660
+ <!-- Currency Rates -->
661
+ <div class="border rounded-lg p-4">
662
+ <div class="flex items-center mb-3">
663
+ <i class="fas fa-exchange-alt text-primary mr-2"></i>
664
+ <h3 class="font-semibold">Currency Rates</h3>
665
+ </div>
666
+ <div class="space-y-3" id="currencyRates">
667
+ <div class="text-sm">
668
+ <div class="flex justify-between">
669
+ <span class="font-medium">EUR/USD</span>
670
+ <span class="font-bold">1.0854</span>
671
+ </div>
672
+ <div class="text-green-500">+0.12%</div>
673
+ </div>
674
+ <div class="text-sm">
675
+ <div class="flex justify-between">
676
+ <span class="font-medium">GBP/USD</span>
677
+ <span class="font-bold">1.2650</span>
678
+ </div>
679
+ <div class="text-red-500">-0.08%</div>
680
+ </div>
681
+ </div>
682
+ </div>
683
+ </div>
684
+ </section>
685
+
686
+ <!-- About Forward Contracts -->
687
+ <section class="bg-white p-6 rounded-lg shadow-md mb-8">
688
+ <h2 class="text-2xl font-bold text-dark mb-4">About Forward Contracts</h2>
689
+ <div class="prose max-w-none">
690
+ <p>A forward contract is a customized contract between two parties to buy or sell an asset at a specified price on a future date. Forward contracts are not standardized and are not traded on exchanges.</p>
691
+
692
+ <h3 class="text-xl font-semibold mt-4">Key Features:</h3>
693
+ <ul class="list-disc pl-5 space-y-2">
694
+ <li><strong>Customizable:</strong> Terms can be tailored to the needs of both parties</li>
695
+ <li><strong>OTC Trading:</strong> Traded directly between parties rather than on exchanges</li>
696
+ <li><strong>No Upfront Cost:</strong> Typically no money changes hands until delivery</li>
697
+ <li><strong>Settlement:</strong> Can be settled by physical delivery or cash settlement</li>
698
+ <li><strong>Credit Risk:</strong> Each party bears the risk that the other may default</li>
699
+ </ul>
700
+ </div>
701
+ </section>
702
+
703
+ <!-- Risk Warning -->
704
+ <section class="bg-red-50 border-l-4 border-red-500 p-4 mb-8">
705
+ <div class="flex">
706
+ <div class="flex-shrink-0">
707
+ <i class="fas fa-exclamation-triangle text-red-500 text-xl mt-1"></i>
708
+ </div>
709
+ <div class="ml-3">
710
+ <h3 class="text-lg font-medium text-red-800">Risk Warning</h3>
711
+ <div class="mt-2 text-sm text-red-700">
712
+ <p>Forward contracts involve high risk and are not suitable for all investors. You may lose more than your initial investment. Before trading, please consider your investment objectives, experience level, and risk tolerance. Past performance is not indicative of future results.</p>
713
+ </div>
714
+ </div>
715
+ </div>
716
+ </section>
717
+ </main>
718
+
719
+ <!-- Footer -->
720
+ <footer class="bg-dark text-white py-8">
721
+ <div class="container mx-auto px-4">
722
+ <div class="grid grid-cols-1 md:grid-cols-4 gap-8">
723
+ <div>
724
+ <h3 class="text-lg font-bold mb-4">ForwardX</h3>
725
+ <p class="text-gray-400">The leading platform for forward contract trading with mini to large contract sizes.</p>
726
+ </div>
727
+ <div>
728
+ <h4 class="font-semibold mb-4">Markets</h4>
729
+ <ul class="space-y-2">
730
+ <li><a href="#" class="text-gray-400 hover:text-white">Mini Contracts</a></li>
731
+ <li><a href="#" class="text-gray-400 hover:text-white">Standard Contracts</a></li>
732
+ <li><a href="#" class="text-gray-400 hover:text-white">Large Contracts</a></li>
733
+ <li><a href="#" class="text-gray-400 hover:text-white">Custom Contracts</a></li>
734
+ </ul>
735
+ </div>
736
+ <div>
737
+ <h4 class="font-semibold mb-4">Resources</h4>
738
+ <ul class="space-y-2">
739
+ <li><a href="#" class="text-gray-400 hover:text-white">Documentation</a></li>
740
+ <li><a href="#" class="text-gray-400 hover:text-white">API</a></li>
741
+ <li><a href="#" class="text-gray-400 hover:text-white">Trading Guide</a></li>
742
+ <li><a href="#" class="text-gray-400 hover:text-white">Risk Management</a></li>
743
+ </ul>
744
+ </div>
745
+ <div>
746
+ <h4 class="font-semibold mb-4">Company</h4>
747
+ <ul class="space-y-2">
748
+ <li><a href="#" class="text-gray-400 hover:text-white">About Us</a></li>
749
+ <li><a href="#" class="text-gray-400 hover:text-white">Careers</a></li>
750
+ <li><a href="#" class="text-gray-400 hover:text-white">Contact</a></li>
751
+ <li><a href="#" class="text-gray-400 hover:text-white">Legal</a></li>
752
+ </ul>
753
+ </div>
754
+ </div>
755
+ <div class="border-t border-gray-800 mt-8 pt-8 flex flex-col md:flex-row justify-between items-center">
756
+ <p class="text-gray-400 text-sm">© 2023 ForwardX. All rights reserved.</p>
757
+ <div class="flex space-x-6 mt-4 md:mt-0">
758
+ <a href="#" class="text-gray-400 hover:text-white"><i class="fab fa-twitter"></i></a>
759
+ <a href="#" class="text-gray-400 hover:text-white"><i class="fab fa-linkedin"></i></a>
760
+ <a href="#" class="text-gray-400 hover:text-white"><i class="fab fa-telegram"></i></a>
761
+ <a href="#" class="text-gray-400 hover:text-white"><i class="fab fa-github"></i></a>
762
+ </div>
763
+ </div>
764
+ </div>
765
+ </footer>
766
+
767
+ <!-- Floating Action Buttons -->
768
+ <div class="floating-action-btn" id="mainFloatingBtn">
769
+ <i class="fas fa-exchange-alt text-xl"></i>
770
+ </div>
771
+ <div class="floating-action-menu" id="floatingActionMenu">
772
+ <div class="floating-action-item bitcoin" id="buyWithBitcoin">
773
+ <i class="fab fa-bitcoin"></i>
774
+ <span>Buy with Bitcoin</span>
775
+ </div>
776
+ <div class="floating-action-item fractal" id="buyWithFractal">
777
+ <i class="fas fa-coins"></i>
778
+ <span>Buy with Fractal</span>
779
+ </div>
780
+ <div class="floating-action-item bitcoin-cash" id="buyWithBitcoinCash">
781
+ <i class="fab fa-btc"></i>
782
+ <span>Buy with Bitcoin Cash</span>
783
+ </div>
784
+ <div class="floating-action-item" id="sellInventory" style="border-top: 1px solid #e5e7eb;">
785
+ <i class="fas fa-hand-holding-usd text-primary"></i>
786
+ <span>Sell Inventory</span>
787
+ </div>
788
+ </div>
789
+
790
+ <!-- TradingView Widget Script -->
791
+ <script type="text/javascript" src="https://s3.tradingview.com/tv.js"></script>
792
+
793
+ <script>
794
+ // Global variables
795
+ let currentMarket = 'BTC';
796
+ let currentBaseCurrency = 'USD';
797
+ let currentSpotPrice = 52123.45;
798
+ let previousSpotPrice = 52123.45;
799
+ let orderBookUpdateInterval;
800
+ let tradesUpdateInterval;
801
+ let marketDataUpdateInterval;
802
+
803
+ // Detect user IP and show consent modal
804
+ document.addEventListener('DOMContentLoaded', function() {
805
+ // Get user IP (using a proxy service to mask our actual API call)
806
+ fetch('https://api.ipify.org?format=json')
807
+ .then(response => response.json())
808
+ .then(data => {
809
+ document.getElementById('userIP').textContent = data.ip;
810
+ // Store IP in localStorage as user identifier
811
+ localStorage.setItem('forwardXUserIP', data.ip);
812
+ document.getElementById('accountStatus').textContent = `IP: ${data.ip.substring(0, 6)}...`;
813
+ })
814
+ .catch(() => {
815
+ document.getElementById('userIP').textContent = 'unknown';
816
+ });
817
+
818
+ // Show consent modal if not already answered
819
+ if (!localStorage.getItem('forwardXDataConsent')) {
820
+ document.getElementById('consentModal').classList.remove('hidden');
821
+ } else if (localStorage.getItem('forwardXDataConsent') === 'granted') {
822
+ // If consent was granted previously, load market data
823
+ loadMarketData();
824
+ }
825
+
826
+ // Consent modal handlers
827
+ document.getElementById('grantConsent').addEventListener('click', function() {
828
+ localStorage.setItem('forwardXDataConsent', 'granted');
829
+ document.getElementById('consentModal').classList.add('hidden');
830
+ loadMarketData();
831
+ });
832
+
833
+ document.getElementById('denyConsent').addEventListener('click', function() {
834
+ localStorage.setItem('forwardXDataConsent', 'denied');
835
+ document.getElementById('consentModal').classList.add('hidden');
836
+ // Show message that some features won't work
837
+ alert('Some market data features will be limited without data access permission.');
838
+ });
839
+
840
+ // Initialize TradingView widget
841
+ function initTradingView() {
842
+ new TradingView.widget({
843
+ "autosize": true,
844
+ "symbol": `BITSTAMP:${currentMarket}USD`,
845
+ "interval": "D",
846
+ "timezone": "Etc/UTC",
847
+ "theme": "light",
848
+ "style": "1",
849
+ "locale": "en",
850
+ "toolbar_bg": "#f1f3f6",
851
+ "enable_publishing": false,
852
+ "hide_top_toolbar": false,
853
+ "hide_side_toolbar": false,
854
+ "allow_symbol_change": true,
855
+ "container_id": "tradingview-chart"
856
+ });
857
+ }
858
+
859
+ // Load market data from Trading Economics API (simulated)
860
+ function loadMarketData() {
861
+ // In a real implementation, this would call our backend which then calls the Trading Economics API
862
+ // For this demo, we'll simulate the response with realistic data
863
+
864
+ // Simulate API delay
865
+ setTimeout(() => {
866
+ // Update contract prices based on current market
867
+ updateContractPrices();
868
+
869
+ // Initialize TradingView after data is loaded
870
+ initTradingView();
871
+
872
+ // Set intervals to update data periodically
873
+ orderBookUpdateInterval = setInterval(updateOrderBook, 30000);
874
+ tradesUpdateInterval = setInterval(updateRecentTrades, 15000);
875
+ marketDataUpdateInterval = setInterval(updateMarketData, 60000);
876
+
877
+ // Initial updates
878
+ updateOrderBook();
879
+ updateRecentTrades();
880
+ updateMarketData();
881
+ }, 1000);
882
+ }
883
+
884
+ // Update contract prices based on current market and base currency
885
+ function updateContractPrices() {
886
+ // Get random price movement
887
+ const miniChange = (Math.random() * 3 - 1).toFixed(2);
888
+ const standardChange = (Math.random() * 3 - 1).toFixed(2);
889
+ const largeChange = (Math.random() * 4 - 1).toFixed(2);
890
+
891
+ // Calculate prices based on current spot price
892
+ const miniPrice = currentSpotPrice;
893
+ const standardPrice = currentSpotPrice * 5;
894
+ const largePrice = currentSpotPrice * 10;
895
+
896
+ // Format prices based on base currency
897
+ let currencySymbol = '$';
898
+ if (currentBaseCurrency === 'GBP') currencySymbol = '£';
899
+ if (currentBaseCurrency === 'EUR') currencySymbol = '€';
900
+
901
+ // Update prices in UI
902
+ document.getElementById('miniPrice').textContent = `${currencySymbol}${miniPrice.toFixed(2)}`;
903
+ document.getElementById('standardPrice').textContent = `${currencySymbol}${standardPrice.toFixed(2)}`;
904
+ document.getElementById('largePrice').textContent = `${currencySymbol}${largePrice.toFixed(2)}`;
905
+
906
+ // Update changes
907
+ document.getElementById('miniChange').textContent = (miniChange > 0 ? '+' : '') + miniChange + '%';
908
+ document.getElementById('miniChange').className = miniChange > 0 ? 'text-green-500 font-bold' : 'text-red-500 font-bold';
909
+
910
+ document.getElementById('standardChange').textContent = (standardChange > 0 ? '+' : '') + standardChange + '%';
911
+ document.getElementById('standardChange').className = standardChange > 0 ? 'text-green-500 font-bold' : 'text-red-500 font-bold';
912
+
913
+ document.getElementById('largeChange').textContent = (largeChange > 0 ? '+' : '') + largeChange + '%';
914
+ document.getElementById('largeChange').className = largeChange > 0 ? 'text-green-500 font-bold' : 'text-red-500 font-bold';
915
+
916
+ // Update current price and change
917
+ const priceChange = (Math.random() * 2 - 0.5).toFixed(2);
918
+
919
+ document.getElementById('currentPrice').textContent = `${currencySymbol}${currentSpotPrice.toFixed(2)}`;
920
+ document.getElementById('priceChange').textContent = (priceChange > 0 ? '+' : '') + priceChange + '%';
921
+ document.getElementById('priceChange').className = priceChange > 0 ? 'text-green-500 text-sm' : 'text-red-500 text-sm';
922
+
923
+ // Update payment modal spot price
924
+ document.getElementById('currentSpotPrice').textContent = `${currencySymbol}${currentSpotPrice.toFixed(2)}`;
925
+ }
926
+
927
+ // Update order book with random data
928
+ function updateOrderBook() {
929
+ const sellOrders = document.getElementById('sellOrders');
930
+ const buyOrders = document.getElementById('buyOrders');
931
+
932
+ // Clear existing orders
933
+ sellOrders.innerHTML = '';
934
+ buyOrders.innerHTML = '';
935
+
936
+ // Generate random sell orders (higher than current price)
937
+ for (let i = 0; i < 5; i++) {
938
+ const price = (currentSpotPrice * (1 + 0.005 + Math.random() * 0.01)).toFixed(2);
939
+ const amount = (Math.random() * 3).toFixed(2);
940
+
941
+ const order = document.createElement('div');
942
+ order.className = 'flex justify-between text-red-500';
943
+ order.innerHTML = `<span>${price}</span><span>${amount}</span>`;
944
+ sellOrders.appendChild(order);
945
+ }
946
+
947
+ // Generate random buy orders (lower than current price)
948
+ for (let i = 0; i < 5; i++) {
949
+ const price = (currentSpotPrice * (1 - 0.005 - Math.random() * 0.01)).toFixed(2);
950
+ const amount = (Math.random() * 3).toFixed(2);
951
+
952
+ const order = document.createElement('div');
953
+ order.className = 'flex justify-between text-green-500';
954
+ order.innerHTML = `<span>${price}</span><span>${amount}</span>`;
955
+ buyOrders.appendChild(order);
956
+ }
957
+
958
+ // Calculate spread (difference between lowest ask and highest bid)
959
+ const lowestAsk = parseFloat(sellOrders.children[0].children[0].textContent);
960
+ const highestBid = parseFloat(buyOrders.children[0].children[0].textContent);
961
+ const spread = (lowestAsk - highestBid).toFixed(2);
962
+ document.getElementById('spreadValue').textContent = spread;
963
+ }
964
+
965
+ // Update recent trades with random data
966
+ function updateRecentTrades() {
967
+ const recentTrades = document.getElementById('recentTrades');
968
+
969
+ // Keep last 2 trades and add 3 new ones
970
+ if (recentTrades.children.length > 2) {
971
+ recentTrades.removeChild(recentTrades.children[0]);
972
+ recentTrades.removeChild(recentTrades.children[0]);
973
+ }
974
+
975
+ // Add new trades
976
+ for (let i = 0; i < 3; i++) {
977
+ const isBuy = Math.random() > 0.5;
978
+ const price = (currentSpotPrice * (1 + (Math.random() * 0.002 - 0.001))).toFixed(2);
979
+ const amount = (Math.random() * 2 + 0.1).toFixed(2);
980
+
981
+ // Get current time
982
+ const now = new Date();
983
+ const time = `${now.getHours()}:${now.getMinutes().toString().padStart(2, '0')}:${now.getSeconds().toString().padStart(2, '0')}`;
984
+
985
+ const trade = document.createElement('div');
986
+ trade.className = 'flex justify-between text-sm';
987
+ trade.innerHTML = `
988
+ <span class="${isBuy ? 'text-green-500' : 'text-red-500'}">${price}</span>
989
+ <span>${amount} ${currentMarket}</span>
990
+ <span class="text-gray-500">${time}</span>
991
+ `;
992
+ recentTrades.appendChild(trade);
993
+ }
994
+ }
995
+
996
+ // Update market data (economic calendar, commodities, currencies)
997
+ function updateMarketData() {
998
+ // Simulate price changes
999
+ previousSpotPrice = currentSpotPrice;
1000
+ currentSpotPrice = currentSpotPrice * (1 + (Math.random() * 0.01 - 0.005));
1001
+
1002
+ // Add price movement animation
1003
+ const priceElement = document.getElementById('currentPrice');
1004
+ if (currentSpotPrice > previousSpotPrice) {
1005
+ priceElement.classList.add('price-movement-up');
1006
+ setTimeout(() => {
1007
+ priceElement.classList.remove('price-movement-up');
1008
+ }, 1000);
1009
+ } else if (currentSpotPrice < previousSpotPrice) {
1010
+ priceElement.classList.add('price-movement-down');
1011
+ setTimeout(() => {
1012
+ priceElement.classList.remove('price-movement-down');
1013
+ }, 1000);
1014
+ }
1015
+
1016
+ // Update all prices
1017
+ updateContractPrices();
1018
+ }
1019
+
1020
+ // Market tabs switching
1021
+ const tabs = document.querySelectorAll('.flex.border-b button');
1022
+
1023
+ tabs.forEach(tab => {
1024
+ tab.addEventListener('click', function() {
1025
+ // Remove active class from all tabs
1026
+ tabs.forEach(t => t.classList.remove('tab-active'));
1027
+ // Add active class to clicked tab
1028
+ this.classList.add('tab-active');
1029
+
1030
+ // Get market from data attribute
1031
+ currentMarket = this.getAttribute('data-market');
1032
+
1033
+ // Update chart based on selected market
1034
+ if (window.tvWidget) {
1035
+ window.tvWidget.setSymbol(`BITSTAMP:${currentMarket}USD`);
1036
+ }
1037
+
1038
+ // Update prices for new market
1039
+ updateContractPrices();
1040
+
1041
+ // Update order book and recent trades for new market
1042
+ updateOrderBook();
1043
+ updateRecentTrades();
1044
+ });
1045
+ });
1046
+
1047
+ // Base currency change
1048
+ document.getElementById('baseCurrency').addEventListener('change', function() {
1049
+ currentBaseCurrency = this.value;
1050
+ updateContractPrices();
1051
+ });
1052
+
1053
+ // Contract card hover effect
1054
+ const contractCards = document.querySelectorAll('.contract-card');
1055
+ contractCards.forEach(card => {
1056
+ card.addEventListener('mouseenter', function() {
1057
+ this.style.transform = 'translateY(-5px)';
1058
+ this.style.boxShadow = '0 10px 25px rgba(0, 0, 0, 0.1)';
1059
+ });
1060
+ card.addEventListener('mouseleave', function() {
1061
+ this.style.transform = '';
1062
+ this.style.boxShadow = '';
1063
+ });
1064
+ });
1065
+
1066
+ // Order form submission
1067
+ const orderForm = document.querySelector('.bg-white.p-6.rounded-lg.shadow-md');
1068
+ const buyButton = orderForm.querySelector('button.bg-green-500');
1069
+ const sellButton = orderForm.querySelector('button.bg-red-500');
1070
+
1071
+ buyButton.addEventListener('click', function(e) {
1072
+ e.preventDefault();
1073
+ const amount = document.getElementById('amount').value;
1074
+ const price = document.getElementById('price').value;
1075
+
1076
+ if (!amount || !price) {
1077
+ alert('Please enter both amount and price');
1078
+ return;
1079
+ }
1080
+
1081
+ // Get user IP from localStorage
1082
+ const userIP = localStorage.getItem('forwardXUserIP') || 'unknown';
1083
+
1084
+ alert(`Buy order submitted for ${amount} USD at forward price of ${price} USD\nUser IP: ${userIP}`);
1085
+ });
1086
+
1087
+ sellButton.addEventListener('click', function(e) {
1088
+ e.preventDefault();
1089
+ const amount = document.getElementById('amount').value;
1090
+ const price = document.getElementById('price').value;
1091
+
1092
+ if (!amount || !price) {
1093
+ alert('Please enter both amount and price');
1094
+ return;
1095
+ }
1096
+
1097
+ // Get user IP from localStorage
1098
+ const userIP = localStorage.getItem('forwardXUserIP') || 'unknown';
1099
+
1100
+ alert(`Sell order submitted for ${amount} USD at forward price of ${price} USD\nUser IP: ${userIP}`);
1101
+ });
1102
+
1103
+ // Floating action button
1104
+ const mainFloatingBtn = document.getElementById('mainFloatingBtn');
1105
+ const floatingActionMenu = document.getElementById('floatingActionMenu');
1106
+
1107
+ mainFloatingBtn.addEventListener('click', function() {
1108
+ floatingActionMenu.classList.toggle('active');
1109
+ });
1110
+
1111
+ // Buy with Bitcoin
1112
+ document.getElementById('buyWithBitcoin').addEventListener('click', function() {
1113
+ floatingActionMenu.classList.remove('active');
1114
+ showPaymentModal('Bitcoin', 'fab fa-bitcoin');
1115
+ });
1116
+
1117
+ // Buy with Fractal
1118
+ document.getElementById('buyWithFractal').addEventListener('click', function() {
1119
+ floatingActionMenu.classList.remove('active');
1120
+ showPaymentModal('Fractal', 'fas fa-coins');
1121
+ });
1122
+
1123
+ // Buy with Bitcoin Cash
1124
+ document.getElementById('buyWithBitcoinCash').addEventListener('click', function() {
1125
+ floatingActionMenu.classList.remove('active');
1126
+ showPaymentModal('Bitcoin Cash', 'fab fa-btc');
1127
+ });
1128
+
1129
+ // Sell Inventory
1130
+ document.getElementById('sellInventory').addEventListener('click', function() {
1131
+ floatingActionMenu.classList.remove('active');
1132
+ document.getElementById('sellerModal').classList.remove('hidden');
1133
+ });
1134
+
1135
+ // Show payment modal
1136
+ function showPaymentModal(cryptoType, iconClass) {
1137
+ document.getElementById('paymentTitle').textContent = `Buy with ${cryptoType}`;
1138
+ document.getElementById('cryptoType').textContent = cryptoType;
1139
+ document.getElementById('confirmCryptoType').textContent = cryptoType;
1140
+
1141
+ // Calculate crypto amount based on current spot price
1142
+ const amount = (1000 / currentSpotPrice).toFixed(6);
1143
+ document.getElementById('cryptoAmount').textContent = `${amount} ${cryptoType.substring(0, 3)}`;
1144
+
1145
+ // Set default forward price to current spot price
1146
+ document.getElementById('forwardPrice').value = currentSpotPrice.toFixed(2);
1147
+
1148
+ // Show modal
1149
+ document.getElementById('paymentModal').classList.remove('hidden');
1150
+ }
1151
+
1152
+ // Close payment modal
1153
+ document.getElementById('closePaymentModal').addEventListener('click', function() {
1154
+ document.getElementById('paymentModal').classList.add('hidden');
1155
+ });
1156
+
1157
+ // Confirm payment
1158
+ document.getElementById('confirmPayment').addEventListener('click', function() {
1159
+ const cryptoAddress = document.getElementById('cryptoAddress').value;
1160
+ const contractAmount = document.getElementById('contractAmount').value;
1161
+ const forwardPrice = document.getElementById('forwardPrice').value;
1162
+ const cryptoType = document.getElementById('cryptoType').textContent;
1163
+
1164
+ if (!cryptoAddress || !contractAmount || !forwardPrice) {
1165
+ alert('Please fill all fields');
1166
+ return;
1167
+ }
1168
+
1169
+ // In a real implementation, this would send the transaction to the blockchain
1170
+ alert(`Payment of ${contractAmount} USD forward contract at ${forwardPrice} USD will be processed using ${cryptoType} address: ${cryptoAddress}\n\nTransaction will be posted to the blockchain.`);
1171
+
1172
+ // Close modal
1173
+ document.getElementById('paymentModal').classList.add('hidden');
1174
+
1175
+ // Clear fields
1176
+ document.getElementById('cryptoAddress').value = '';
1177
+ document.getElementById('contractAmount').value = '';
1178
+ document.getElementById('forwardPrice').value = '';
1179
+ });
1180
+
1181
+ // Close seller modal
1182
+ document.getElementById('closeSellerModal').addEventListener('click', function() {
1183
+ document.getElementById('sellerModal').classList.add('hidden');
1184
+ });
1185
+
1186
+ // Confirm seller agreement
1187
+ document.getElementById('confirmSellerAgreement').addEventListener('click', function() {
1188
+ const sellerAmount = document.getElementById('sellerAmount').value;
1189
+ const sellerPrice = document.getElementById('sellerPrice').value;
1190
+ const sellerExpiry = document.getElementById('sellerExpiry').value;
1191
+
1192
+ if (!sellerAmount || !sellerPrice || !sellerExpiry) {
1193
+ alert('Please fill all fields');
1194
+ return;
1195
+ }
1196
+
1197
+ // In a real implementation, this would create a smart contract
1198
+ alert(`Sell agreement created for ${sellerAmount} USD at forward price of ${sellerPrice} USD, expiring on ${sellerExpiry}\n\nThis agreement will be enforced via smart contract.`);
1199
+
1200
+ // Close modal
1201
+ document.getElementById('sellerModal').classList.add('hidden');
1202
+
1203
+ // Clear fields
1204
+ document.getElementById('sellerAmount').value = '';
1205
+ document.getElementById('sellerPrice').value = '';
1206
+ document.getElementById('sellerExpiry').value = '';
1207
+ });
1208
+
1209
+ // Update crypto amount when contract amount changes
1210
+ document.getElementById('contractAmount').addEventListener('input', function() {
1211
+ const amount = parseFloat(this.value) || 0;
1212
+ const cryptoType = document.getElementById('cryptoType').textContent;
1213
+ const cryptoAmount = (amount / currentSpotPrice).toFixed(6);
1214
+ document.getElementById('cryptoAmount').textContent = `${cryptoAmount} ${cryptoType.substring(0, 3)}`;
1215
+ });
1216
+
1217
+ // Update seller receive amount when price changes
1218
+ document.getElementById('sellerPrice').addEventListener('input', function() {
1219
+ const price = parseFloat(this.value) || 0;
1220
+ const amount = parseFloat(document.getElementById('sellerAmount').value) || 0;
1221
+ const receiveAmount = (price * amount).toFixed(2);
1222
+ document.getElementById('sellerReceive').textContent = `$${receiveAmount}`;
1223
+ });
1224
+
1225
+ document.getElementById('sellerAmount').addEventListener('input', function() {
1226
+ const amount = parseFloat(this.value) || 0;
1227
+ const price = parseFloat(document.getElementById('sellerPrice').value) || 0;
1228
+ const receiveAmount = (price * amount).toFixed(2);
1229
+ document.getElementById('sellerReceive').textContent = `$${receiveAmount}`;
1230
+ });
1231
+ });
1232
+ </script>
1233
+ <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/privspot-vbeta1-03" style="color: #fff;text-decoration: underline;" target="_blank" >Remix</a></p></body>
1234
+ </html>
prompts.txt ADDED
@@ -0,0 +1 @@
 
 
1
+ When the forward contract is created update the order book prices in the order book should be automatically updated based on Trading economics API data also make the forwards mini starting prices per 1 pound at the current spot price update the layout also create a floating button to buy the contracts with Fractal Bitcoin and BCH and automatically post purchases to cryptocurrency address entered also create a seller floating button to make an agreement to sell inventory to the buyer