Spaces:

privateuserh
/

privspot

Running

App Files Files Community

privateuserh commited on Apr 17, 2025

Commit

3dabd6f

verified ·

1 Parent(s): fa36d1a

Add 2 files

Browse files

Files changed (2) hide show

index.html +209 -6
prompts.txt +2 -1

index.html CHANGED Viewed

@@ -7,7 +7,7 @@
     <script src="https://cdn.tailwindcss.com"></script>
     <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css">
     <style>
-        /* Custom CSS for floating window */
         .floating-window {
             position: fixed;
             bottom: 30px;
@@ -29,8 +29,6 @@
         .floating-btn {
             position: fixed;
-            bottom: 30px;
-            right: 30px;
             width: 60px;
             height: 60px;
             background: linear-gradient(135deg, #3b82f6, #1d4ed8);
@@ -44,6 +42,17 @@
             z-index: 1001;
         }
         .tab-content {
             display: none;
         }
@@ -84,6 +93,19 @@
             filter: blur(5px);
             user-select: none;
         }
     </style>
 </head>
 <body class="bg-gray-50">
@@ -241,12 +263,16 @@
         </div>
     </div>
-    <!-- Floating Button -->
     <div class="floating-btn" id="trade-btn">
         <i class="fas fa-shopping-cart text-xl"></i>
     </div>
-    <!-- Floating Window -->
     <div class="floating-window" id="trade-window">
         <div class="bg-gray-800 text-white px-4 py-3 rounded-t-lg flex justify-between items-center">
             <h3 class="font-medium">Trade Cotton</h3>
@@ -360,21 +386,142 @@
         </div>
     </div>
     <script src="https://cdn.jsdelivr.net/npm/chart.js"></script>
     <script>
-        // Initialize the floating window
         const tradeBtn = document.getElementById('trade-btn');
         const tradeWindow = document.getElementById('trade-window');
         const closeWindow = document.getElementById('close-window');
         tradeBtn.addEventListener('click', () => {
             tradeWindow.classList.toggle('active');
         });
         closeWindow.addEventListener('click', () => {
             tradeWindow.classList.remove('active');
         });
         // Tab functionality
         const tabBtns = document.querySelectorAll('.tab-btn');
         tabBtns.forEach(btn => {
@@ -427,6 +574,57 @@
             updateCryptoPrices(activeCrypto);
         });
         // Time period buttons
         const timeBtns = document.querySelectorAll('.time-btn');
         timeBtns.forEach(btn => {
@@ -547,6 +745,11 @@
                     changeEl.innerHTML = `<i class="fas fa-caret-down mr-1"></i><span>${change.toFixed(2)} (${(change/price*100).toFixed(1)}%)</span>`;
                     changeEl.className = 'px-3 py-1 rounded-full bg-red-100 text-red-800 flex items-center';
                 }
             }, 1500);
         });
     </script>

     <script src="https://cdn.tailwindcss.com"></script>
     <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css">
     <style>
+        /* Custom CSS for floating windows */
         .floating-window {
             position: fixed;
             bottom: 30px;
         .floating-btn {
             position: fixed;
             width: 60px;
             height: 60px;
             background: linear-gradient(135deg, #3b82f6, #1d4ed8);
             z-index: 1001;
         }
+        #trade-btn {
+            bottom: 30px;
+            right: 30px;
+        }
+        #supplier-btn {
+            bottom: 110px;
+            right: 30px;
+            background: linear-gradient(135deg, #10b981, #059669);
+        }
         .tab-content {
             display: none;
         }
             filter: blur(5px);
             user-select: none;
         }
+        .fee-tier {
+            border-left: 3px solid #3b82f6;
+            padding-left: 10px;
+            margin-bottom: 15px;
+        }
+        .profit-calc {
+            background-color: #f0fdf4;
+            border-radius: 8px;
+            padding: 15px;
+            margin-top: 15px;
+        }
     </style>
 </head>
 <body class="bg-gray-50">
         </div>
     </div>
+    <!-- Floating Buttons -->
     <div class="floating-btn" id="trade-btn">
         <i class="fas fa-shopping-cart text-xl"></i>
     </div>
+    <div class="floating-btn" id="supplier-btn">
+        <i class="fas fa-truck text-xl"></i>
+    </div>
+    <!-- Trade Floating Window -->
     <div class="floating-window" id="trade-window">
         <div class="bg-gray-800 text-white px-4 py-3 rounded-t-lg flex justify-between items-center">
             <h3 class="font-medium">Trade Cotton</h3>
         </div>
     </div>
+    <!-- Supplier Floating Window -->
+    <div class="floating-window" id="supplier-window">
+        <div class="bg-green-700 text-white px-4 py-3 rounded-t-lg flex justify-between items-center">
+            <h3 class="font-medium">Supplier Agreement</h3>
+            <button id="close-supplier-window" class="text-gray-300 hover:text-white">
+                <i class="fas fa-times"></i>
+            </button>
+        </div>
+        <div class="p-4">
+            <div class="mb-4">
+                <label class="block text-sm font-medium text-gray-700 mb-1">Current Spot Price</label>
+                <div class="bg-gray-100 p-3 rounded-lg">
+                    <div class="flex justify-between items-center">
+                        <span class="font-medium">0.85 USD/lb</span>
+                        <span class="text-sm text-gray-600">Updated: Just now</span>
+                    </div>
+                </div>
+            </div>
+            <div class="mb-4">
+                <label class="block text-sm font-medium text-gray-700 mb-1">Amount to Sell (lbs)</label>
+                <div class="relative">
+                    <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">
+                    <div class="absolute inset-y-0 right-0 flex items-center pr-3 pointer-events-none">
+                        <span class="text-gray-500">lbs</span>
+                    </div>
+                </div>
+            </div>
+            <div class="mb-4">
+                <label class="block text-sm font-medium text-gray-700 mb-2">Fee Structure</label>
+                <div class="space-y-3">
+                    <div class="fee-tier">
+                        <div class="flex justify-between">
+                            <span class="text-sm font-medium">First 1,000 lbs</span>
+                            <span class="text-sm font-medium">$0.015/lb</span>
+                        </div>
+                        <p class="text-xs text-gray-500">Base fee for small suppliers</p>
+                    </div>
+                    <div class="fee-tier">
+                        <div class="flex justify-between">
+                            <span class="text-sm font-medium">1,001 - 10,000 lbs</span>
+                            <span class="text-sm font-medium">$0.012/lb</span>
+                        </div>
+                        <p class="text-xs text-gray-500">Mid-tier volume discount</p>
+                    </div>
+                    <div class="fee-tier">
+                        <div class="flex justify-between">
+                            <span class="text-sm font-medium">10,001+ lbs</span>
+                            <span class="text-sm font-medium">$0.009/lb</span>
+                        </div>
+                        <p class="text-xs text-gray-500">High volume discount</p>
+                    </div>
+                </div>
+            </div>
+            <div class="profit-calc">
+                <h4 class="text-sm font-medium text-gray-700 mb-2">Estimated Earnings</h4>
+                <div class="space-y-2">
+                    <div class="flex justify-between">
+                        <span class="text-sm">Gross Revenue</span>
+                        <span class="text-sm font-medium" id="gross-revenue">$850.00</span>
+                    </div>
+                    <div class="flex justify-between">
+                        <span class="text-sm">Total Fees</span>
+                        <span class="text-sm font-medium" id="total-fees">$12.00</span>
+                    </div>
+                    <div class="flex justify-between border-t border-gray-200 pt-2">
+                        <span class="text-sm font-medium">Net Earnings</span>
+                        <span class="text-sm font-medium text-green-600" id="net-earnings">$838.00</span>
+                    </div>
+                </div>
+                <div class="mt-4">
+                    <h4 class="text-sm font-medium text-gray-700 mb-2">Break-Even Analysis</h4>
+                    <div class="space-y-2">
+                        <div class="flex justify-between">
+                            <span class="text-sm">Your Production Cost</span>
+                            <span class="text-sm font-medium" id="production-cost">$0.00/lb</span>
+                        </div>
+                        <div class="flex justify-between">
+                            <span class="text-sm">Break-Even Price</span>
+                            <span class="text-sm font-medium" id="break-even-price">$0.00/lb</span>
+                        </div>
+                        <div class="flex justify-between">
+                            <span class="text-sm">Profit Margin</span>
+                            <span class="text-sm font-medium text-green-600" id="profit-margin">0%</span>
+                        </div>
+                    </div>
+                </div>
+            </div>
+            <div class="mt-4">
+                <div class="flex items-start">
+                    <input type="checkbox" id="agree-terms" class="mt-1">
+                    <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>
+                </div>
+            </div>
+            <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">
+                <i class="fas fa-file-contract mr-2"></i> Confirm Supply Agreement
+            </button>
+        </div>
+    </div>
     <script src="https://cdn.jsdelivr.net/npm/chart.js"></script>
     <script>
+        // Initialize the floating windows
         const tradeBtn = document.getElementById('trade-btn');
         const tradeWindow = document.getElementById('trade-window');
         const closeWindow = document.getElementById('close-window');
+        const supplierBtn = document.getElementById('supplier-btn');
+        const supplierWindow = document.getElementById('supplier-window');
+        const closeSupplierWindow = document.getElementById('close-supplier-window');
         tradeBtn.addEventListener('click', () => {
             tradeWindow.classList.toggle('active');
+            supplierWindow.classList.remove('active');
+        });
+        supplierBtn.addEventListener('click', () => {
+            supplierWindow.classList.toggle('active');
+            tradeWindow.classList.remove('active');
+            calculateSupplierEarnings(); // Calculate when window opens
         });
         closeWindow.addEventListener('click', () => {
             tradeWindow.classList.remove('active');
         });
+        closeSupplierWindow.addEventListener('click', () => {
+            supplierWindow.classList.remove('active');
+        });
         // Tab functionality
         const tabBtns = document.querySelectorAll('.tab-btn');
         tabBtns.forEach(btn => {
             updateCryptoPrices(activeCrypto);
         });
+        // Supplier calculations
+        function calculateSupplierEarnings() {
+            const amount = parseFloat(document.getElementById('supply-amount').value);
+            const spotPrice = 0.85; // Current spot price
+            // Calculate fees based on tiered structure
+            let fees = 0;
+            if (amount <= 1000) {
+                fees = amount * 0.015;
+            } else if (amount <= 10000) {
+                fees = (1000 * 0.015) + ((amount - 1000) * 0.012);
+            } else {
+                fees = (1000 * 0.015) + (9000 * 0.012) + ((amount - 10000) * 0.009);
+            }
+            const grossRevenue = amount * spotPrice;
+            const netEarnings = grossRevenue - fees;
+            // Update display
+            document.getElementById('gross-revenue').textContent = `$${(grossRevenue).toFixed(2)}`;
+            document.getElementById('total-fees').textContent = `$${fees.toFixed(2)}`;
+            document.getElementById('net-earnings').textContent = `$${netEarnings.toFixed(2)}`;
+            // Calculate break-even (assuming production cost is 70% of spot price for demo)
+            const productionCostPerLb = spotPrice * 0.7;
+            const totalProductionCost = amount * productionCostPerLb;
+            const breakEvenPrice = (totalProductionCost + fees) / amount;
+            const profitMargin = ((netEarnings - totalProductionCost) / totalProductionCost) * 100;
+            document.getElementById('production-cost').textContent = `$${productionCostPerLb.toFixed(2)}/lb`;
+            document.getElementById('break-even-price').textContent = `$${breakEvenPrice.toFixed(2)}/lb`;
+            document.getElementById('profit-margin').textContent = `${profitMargin.toFixed(1)}%`;
+        }
+        // Update supplier calculations when amount changes
+        document.getElementById('supply-amount').addEventListener('input', calculateSupplierEarnings);
+        // Confirm supply agreement
+        document.getElementById('confirm-supply').addEventListener('click', function() {
+            if (!document.getElementById('agree-terms').checked) {
+                alert('Please agree to the terms before confirming.');
+                return;
+            }
+            const amount = document.getElementById('supply-amount').value;
+            const netEarnings = document.getElementById('net-earnings').textContent;
+            alert(`Supply agreement confirmed for ${amount} lbs of cotton. Estimated net earnings: ${netEarnings}`);
+            supplierWindow.classList.remove('active');
+        });
         // Time period buttons
         const timeBtns = document.querySelectorAll('.time-btn');
         timeBtns.forEach(btn => {
                     changeEl.innerHTML = `<i class="fas fa-caret-down mr-1"></i><span>${change.toFixed(2)} (${(change/price*100).toFixed(1)}%)</span>`;
                     changeEl.className = 'px-3 py-1 rounded-full bg-red-100 text-red-800 flex items-center';
                 }
+                // Update supplier window if open
+                if (supplierWindow.classList.contains('active')) {
+                    calculateSupplierEarnings();
+                }
             }, 1500);
         });
     </script>

prompts.txt CHANGED Viewed

	@@ -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.