Hugging Face's logo

Spaces:
privateuserh
/
privspot
Running

App Files Community
privateuserh commited on
Commit
3dabd6f
·
verified ·
1 Parent(s): fa36d1a

Add 2 files

Browse files
Files changed (2) hide show
  1. index.html +209 -6
  2. prompts.txt +2 -1
index.html CHANGED
@@ -7,7 +7,7 @@
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
- /* Custom CSS for floating window */
11
  .floating-window {
12
  position: fixed;
13
  bottom: 30px;
@@ -29,8 +29,6 @@
29
 
30
  .floating-btn {
31
  position: fixed;
32
- bottom: 30px;
33
- right: 30px;
34
  width: 60px;
35
  height: 60px;
36
  background: linear-gradient(135deg, #3b82f6, #1d4ed8);
@@ -44,6 +42,17 @@
44
  z-index: 1001;
45
  }
46
 
 
 
 
 
 
 
 
 
 
 
 
47
  .tab-content {
48
  display: none;
49
  }
@@ -84,6 +93,19 @@
84
  filter: blur(5px);
85
  user-select: none;
86
  }
 
 
 
 
 
 
 
 
 
 
 
 
 
87
  </style>
88
  </head>
89
  <body class="bg-gray-50">
@@ -241,12 +263,16 @@
241
  </div>
242
  </div>
243
 
244
- <!-- Floating Button -->
245
  <div class="floating-btn" id="trade-btn">
246
  <i class="fas fa-shopping-cart text-xl"></i>
247
  </div>
248
 
249
- <!-- Floating Window -->
 
 
 
 
250
  <div class="floating-window" id="trade-window">
251
  <div class="bg-gray-800 text-white px-4 py-3 rounded-t-lg flex justify-between items-center">
252
  <h3 class="font-medium">Trade Cotton</h3>
@@ -360,21 +386,142 @@
360
  </div>
361
  </div>
362
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
363
  <script src="https://cdn.jsdelivr.net/npm/chart.js"></script>
364
  <script>
365
- // Initialize the floating window
366
  const tradeBtn = document.getElementById('trade-btn');
367
  const tradeWindow = document.getElementById('trade-window');
368
  const closeWindow = document.getElementById('close-window');
369
 
 
 
 
 
370
  tradeBtn.addEventListener('click', () => {
371
  tradeWindow.classList.toggle('active');
 
 
 
 
 
 
 
372
  });
373
 
374
  closeWindow.addEventListener('click', () => {
375
  tradeWindow.classList.remove('active');
376
  });
377
 
 
 
 
 
378
  // Tab functionality
379
  const tabBtns = document.querySelectorAll('.tab-btn');
380
  tabBtns.forEach(btn => {
@@ -427,6 +574,57 @@
427
  updateCryptoPrices(activeCrypto);
428
  });
429
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
430
  // Time period buttons
431
  const timeBtns = document.querySelectorAll('.time-btn');
432
  timeBtns.forEach(btn => {
@@ -547,6 +745,11 @@
547
  changeEl.innerHTML = `<i class="fas fa-caret-down mr-1"></i><span>${change.toFixed(2)} (${(change/price*100).toFixed(1)}%)</span>`;
548
  changeEl.className = 'px-3 py-1 rounded-full bg-red-100 text-red-800 flex items-center';
549
  }
 
 
 
 
 
550
  }, 1500);
551
  });
552
  </script>
 
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
+ /* Custom CSS for floating windows */
11
  .floating-window {
12
  position: fixed;
13
  bottom: 30px;
 
29
 
30
  .floating-btn {
31
  position: fixed;
 
 
32
  width: 60px;
33
  height: 60px;
34
  background: linear-gradient(135deg, #3b82f6, #1d4ed8);
 
42
  z-index: 1001;
43
  }
44
 
45
+ #trade-btn {
46
+ bottom: 30px;
47
+ right: 30px;
48
+ }
49
+
50
+ #supplier-btn {
51
+ bottom: 110px;
52
+ right: 30px;
53
+ background: linear-gradient(135deg, #10b981, #059669);
54
+ }
55
+
56
  .tab-content {
57
  display: none;
58
  }
 
93
  filter: blur(5px);
94
  user-select: none;
95
  }
96
+
97
+ .fee-tier {
98
+ border-left: 3px solid #3b82f6;
99
+ padding-left: 10px;
100
+ margin-bottom: 15px;
101
+ }
102
+
103
+ .profit-calc {
104
+ background-color: #f0fdf4;
105
+ border-radius: 8px;
106
+ padding: 15px;
107
+ margin-top: 15px;
108
+ }
109
  </style>
110
  </head>
111
  <body class="bg-gray-50">
 
263
  </div>
264
  </div>
265
 
266
+ <!-- Floating Buttons -->
267
  <div class="floating-btn" id="trade-btn">
268
  <i class="fas fa-shopping-cart text-xl"></i>
269
  </div>
270
 
271
+ <div class="floating-btn" id="supplier-btn">
272
+ <i class="fas fa-truck text-xl"></i>
273
+ </div>
274
+
275
+ <!-- Trade Floating Window -->
276
  <div class="floating-window" id="trade-window">
277
  <div class="bg-gray-800 text-white px-4 py-3 rounded-t-lg flex justify-between items-center">
278
  <h3 class="font-medium">Trade Cotton</h3>
 
386
  </div>
387
  </div>
388
 
389
+ <!-- Supplier Floating Window -->
390
+ <div class="floating-window" id="supplier-window">
391
+ <div class="bg-green-700 text-white px-4 py-3 rounded-t-lg flex justify-between items-center">
392
+ <h3 class="font-medium">Supplier Agreement</h3>
393
+ <button id="close-supplier-window" class="text-gray-300 hover:text-white">
394
+ <i class="fas fa-times"></i>
395
+ </button>
396
+ </div>
397
+
398
+ <div class="p-4">
399
+ <div class="mb-4">
400
+ <label class="block text-sm font-medium text-gray-700 mb-1">Current Spot Price</label>
401
+ <div class="bg-gray-100 p-3 rounded-lg">
402
+ <div class="flex justify-between items-center">
403
+ <span class="font-medium">0.85 USD/lb</span>
404
+ <span class="text-sm text-gray-600">Updated: Just now</span>
405
+ </div>
406
+ </div>
407
+ </div>
408
+
409
+ <div class="mb-4">
410
+ <label class="block text-sm font-medium text-gray-700 mb-1">Amount to Sell (lbs)</label>
411
+ <div class="relative">
412
+ <input type="number" id="supply-amount" class="w-full px-4 py-2 border border-gray-300 rounded-lg focus:ring-green-500 focus:border-green-500" value="1000" min="100" step="100">
413
+ <div class="absolute inset-y-0 right-0 flex items-center pr-3 pointer-events-none">
414
+ <span class="text-gray-500">lbs</span>
415
+ </div>
416
+ </div>
417
+ </div>
418
+
419
+ <div class="mb-4">
420
+ <label class="block text-sm font-medium text-gray-700 mb-2">Fee Structure</label>
421
+ <div class="space-y-3">
422
+ <div class="fee-tier">
423
+ <div class="flex justify-between">
424
+ <span class="text-sm font-medium">First 1,000 lbs</span>
425
+ <span class="text-sm font-medium">$0.015/lb</span>
426
+ </div>
427
+ <p class="text-xs text-gray-500">Base fee for small suppliers</p>
428
+ </div>
429
+ <div class="fee-tier">
430
+ <div class="flex justify-between">
431
+ <span class="text-sm font-medium">1,001 - 10,000 lbs</span>
432
+ <span class="text-sm font-medium">$0.012/lb</span>
433
+ </div>
434
+ <p class="text-xs text-gray-500">Mid-tier volume discount</p>
435
+ </div>
436
+ <div class="fee-tier">
437
+ <div class="flex justify-between">
438
+ <span class="text-sm font-medium">10,001+ lbs</span>
439
+ <span class="text-sm font-medium">$0.009/lb</span>
440
+ </div>
441
+ <p class="text-xs text-gray-500">High volume discount</p>
442
+ </div>
443
+ </div>
444
+ </div>
445
+
446
+ <div class="profit-calc">
447
+ <h4 class="text-sm font-medium text-gray-700 mb-2">Estimated Earnings</h4>
448
+ <div class="space-y-2">
449
+ <div class="flex justify-between">
450
+ <span class="text-sm">Gross Revenue</span>
451
+ <span class="text-sm font-medium" id="gross-revenue">$850.00</span>
452
+ </div>
453
+ <div class="flex justify-between">
454
+ <span class="text-sm">Total Fees</span>
455
+ <span class="text-sm font-medium" id="total-fees">$12.00</span>
456
+ </div>
457
+ <div class="flex justify-between border-t border-gray-200 pt-2">
458
+ <span class="text-sm font-medium">Net Earnings</span>
459
+ <span class="text-sm font-medium text-green-600" id="net-earnings">$838.00</span>
460
+ </div>
461
+ </div>
462
+
463
+ <div class="mt-4">
464
+ <h4 class="text-sm font-medium text-gray-700 mb-2">Break-Even Analysis</h4>
465
+ <div class="space-y-2">
466
+ <div class="flex justify-between">
467
+ <span class="text-sm">Your Production Cost</span>
468
+ <span class="text-sm font-medium" id="production-cost">$0.00/lb</span>
469
+ </div>
470
+ <div class="flex justify-between">
471
+ <span class="text-sm">Break-Even Price</span>
472
+ <span class="text-sm font-medium" id="break-even-price">$0.00/lb</span>
473
+ </div>
474
+ <div class="flex justify-between">
475
+ <span class="text-sm">Profit Margin</span>
476
+ <span class="text-sm font-medium text-green-600" id="profit-margin">0%</span>
477
+ </div>
478
+ </div>
479
+ </div>
480
+ </div>
481
+
482
+ <div class="mt-4">
483
+ <div class="flex items-start">
484
+ <input type="checkbox" id="agree-terms" class="mt-1">
485
+ <label for="agree-terms" class="ml-2 text-sm text-gray-700">I agree to sell my cotton at the current spot price, minus applicable fees, and understand this is a binding contract.</label>
486
+ </div>
487
+ </div>
488
+
489
+ <button id="confirm-supply" class="w-full bg-green-600 hover:bg-green-700 text-white py-3 rounded-lg font-medium flex items-center justify-center mt-4">
490
+ <i class="fas fa-file-contract mr-2"></i> Confirm Supply Agreement
491
+ </button>
492
+ </div>
493
+ </div>
494
+
495
  <script src="https://cdn.jsdelivr.net/npm/chart.js"></script>
496
  <script>
497
+ // Initialize the floating windows
498
  const tradeBtn = document.getElementById('trade-btn');
499
  const tradeWindow = document.getElementById('trade-window');
500
  const closeWindow = document.getElementById('close-window');
501
 
502
+ const supplierBtn = document.getElementById('supplier-btn');
503
+ const supplierWindow = document.getElementById('supplier-window');
504
+ const closeSupplierWindow = document.getElementById('close-supplier-window');
505
+
506
  tradeBtn.addEventListener('click', () => {
507
  tradeWindow.classList.toggle('active');
508
+ supplierWindow.classList.remove('active');
509
+ });
510
+
511
+ supplierBtn.addEventListener('click', () => {
512
+ supplierWindow.classList.toggle('active');
513
+ tradeWindow.classList.remove('active');
514
+ calculateSupplierEarnings(); // Calculate when window opens
515
  });
516
 
517
  closeWindow.addEventListener('click', () => {
518
  tradeWindow.classList.remove('active');
519
  });
520
 
521
+ closeSupplierWindow.addEventListener('click', () => {
522
+ supplierWindow.classList.remove('active');
523
+ });
524
+
525
  // Tab functionality
526
  const tabBtns = document.querySelectorAll('.tab-btn');
527
  tabBtns.forEach(btn => {
 
574
  updateCryptoPrices(activeCrypto);
575
  });
576
 
577
+ // Supplier calculations
578
+ function calculateSupplierEarnings() {
579
+ const amount = parseFloat(document.getElementById('supply-amount').value);
580
+ const spotPrice = 0.85; // Current spot price
581
+
582
+ // Calculate fees based on tiered structure
583
+ let fees = 0;
584
+ if (amount <= 1000) {
585
+ fees = amount * 0.015;
586
+ } else if (amount <= 10000) {
587
+ fees = (1000 * 0.015) + ((amount - 1000) * 0.012);
588
+ } else {
589
+ fees = (1000 * 0.015) + (9000 * 0.012) + ((amount - 10000) * 0.009);
590
+ }
591
+
592
+ const grossRevenue = amount * spotPrice;
593
+ const netEarnings = grossRevenue - fees;
594
+
595
+ // Update display
596
+ document.getElementById('gross-revenue').textContent = `$${(grossRevenue).toFixed(2)}`;
597
+ document.getElementById('total-fees').textContent = `$${fees.toFixed(2)}`;
598
+ document.getElementById('net-earnings').textContent = `$${netEarnings.toFixed(2)}`;
599
+
600
+ // Calculate break-even (assuming production cost is 70% of spot price for demo)
601
+ const productionCostPerLb = spotPrice * 0.7;
602
+ const totalProductionCost = amount * productionCostPerLb;
603
+ const breakEvenPrice = (totalProductionCost + fees) / amount;
604
+ const profitMargin = ((netEarnings - totalProductionCost) / totalProductionCost) * 100;
605
+
606
+ document.getElementById('production-cost').textContent = `$${productionCostPerLb.toFixed(2)}/lb`;
607
+ document.getElementById('break-even-price').textContent = `$${breakEvenPrice.toFixed(2)}/lb`;
608
+ document.getElementById('profit-margin').textContent = `${profitMargin.toFixed(1)}%`;
609
+ }
610
+
611
+ // Update supplier calculations when amount changes
612
+ document.getElementById('supply-amount').addEventListener('input', calculateSupplierEarnings);
613
+
614
+ // Confirm supply agreement
615
+ document.getElementById('confirm-supply').addEventListener('click', function() {
616
+ if (!document.getElementById('agree-terms').checked) {
617
+ alert('Please agree to the terms before confirming.');
618
+ return;
619
+ }
620
+
621
+ const amount = document.getElementById('supply-amount').value;
622
+ const netEarnings = document.getElementById('net-earnings').textContent;
623
+
624
+ alert(`Supply agreement confirmed for ${amount} lbs of cotton. Estimated net earnings: ${netEarnings}`);
625
+ supplierWindow.classList.remove('active');
626
+ });
627
+
628
  // Time period buttons
629
  const timeBtns = document.querySelectorAll('.time-btn');
630
  timeBtns.forEach(btn => {
 
745
  changeEl.innerHTML = `<i class="fas fa-caret-down mr-1"></i><span>${change.toFixed(2)} (${(change/price*100).toFixed(1)}%)</span>`;
746
  changeEl.className = 'px-3 py-1 rounded-full bg-red-100 text-red-800 flex items-center';
747
  }
748
+
749
+ // Update supplier window if open
750
+ if (supplierWindow.classList.contains('active')) {
751
+ calculateSupplierEarnings();
752
+ }
753
  }, 1500);
754
  });
755
  </script>
prompts.txt CHANGED
@@ -1 +1,2 @@
1
- Create an app and display summary at https://tradingeconomics.com/commodity/cotton display stats, forecast at using Trading economics API ebc6d2b48db541a:im201to74ucouji mask the API but display a user friendly module make a floating window to purchase in Fractal Bitcoin and BCH at prices per lb. Also show a conversion window in the floating button
 
 
1
+ Create an app and display summary at https://tradingeconomics.com/commodity/cotton display stats, forecast at using Trading economics API ebc6d2b48db541a:im201to74ucouji mask the API but display a user friendly module make a floating window to purchase in Fractal Bitcoin and BCH at prices per lb. Also show a conversion window in the floating button
2
+ Now add a floating button for suppliers to accept agreements to sell to the site at current spot prices and add a dropdown window with fees per pound like $0.01 and scale up into dollars compute the scale based on amount selling per pound Also add a break ever analysis displaying how much needs to be made for the contract to break even and become profitable.