Update index.html

index.html

@@ -623,106 +623,7 @@
         </div>
     </div>
 
-    <script>
-        document.addEventListener('DOMContentLoaded', function() {
-            // Initialize tranche data
-            const trancheData = {
-                a: {
-                    assets: 1200000,
-                    tokens: 0.3,
-                    liquidity: 1.2,
-                    distribution: 0.3
-                },
-                b: {
-                    assets: 8500000,
-                    tokens: 20000000,
-                    liquidity: 8.5,
-                    distribution: 20
-                },
-                c: {
-                    assets: 3800000,
-                    tokens: 10000000,
-                    liquidity: 3.8,
-                    distribution: 10
-                }
-            };
-
-            // Calculator toggle functionality
-            const calculatorBtn = document.getElementById('token-calculator-btn');
-            const calculator = document.getElementById('token-calculator');
-            const closeCalculator = document.getElementById('close-calculator');
-            const successMessage = document.getElementById('success-message');
-            
-            calculatorBtn.addEventListener('click', function() {
-                calculator.classList.toggle('hidden');
-            });
-            
-            closeCalculator.addEventListener('click', function() {
-                calculator.classList.add('hidden');
-            });
-            
-            // Tab switching functionality
-            const tabs = document.querySelectorAll('.tranche-tab');
-            const contents = document.querySelectorAll('.tranche-content');
-            
-            tabs.forEach(tab => {
-                tab.addEventListener('click', function() {
-                    const tranche = this.dataset.tranche;
-                    
-                    // Update active tab
-                    tabs.forEach(t => t.classList.remove('active'));
-                    this.classList.add('active');
-                    
-                    // Update active content
-                    contents.forEach(c => c.classList.remove('active'));
-                    document.getElementById(`tranche-${tranche}-calc`).classList.add('active');
-                });
-            });
-            
-            // Calculator buttons from tranche cards
-            const trancheCalculatorBtns = document.querySelectorAll('.tranche-calculator-btn');
-            
-            trancheCalculatorBtns.forEach(btn => {
-                btn.addEventListener('click', function() {
-                    const tranche = this.dataset.tranche;
-                    
-                    // Show calculator if hidden
-                    if (calculator.classList.contains('hidden')) {
-                        calculator.classList.remove('hidden');
-                    }
-                    
-                    // Switch to the correct tab
-                    tabs.forEach(t => t.classList.remove('active'));
-                    document.querySelector(`.tranche-tab[data-tranche="${tranche}"]`).classList.add('active');
-                    
-                    contents.forEach(c => c.classList.remove('active'));
-                    document.getElementById(`tranche-${tranche}-calc`).classList.add('active');
-                });
-            });
-            
-            // Calculate functions for each tranche
-            function calculateTrancheOffer(tranche) {
-                const assets = parseFloat(document.getElementById(`assets-${tranche}`).value) || 0;
-                const liabilities = parseFloat(document.getElementById(`liabilities-${tranche}`).value) || 0;
-                const tokens = parseFloat(document.getElementById(`tokens-${tranche}`).value) || 1;
-                const contribution = parseFloat(document.getElementById(`contribution-${tranche}`).value) || 0;
-                
-                // Different calculation formulas based on tranche
-                let tokenPrice, tokenAllocation, poolPercentage, remicPercentage;
-                
-                switch(tranche) {
-                    case 'a':
-                        // Senior tranche - lower risk, higher price
-                        tokenPrice = (assets * 0.9 - liabilities * 0.5) / tokens;
-                        tokenAllocation = contribution / tokenPrice;
-                        poolPercentage = (tokenAllocation / tokens) * 100;
-                        remicPercentage = (contribution / (assets * 1.5)) * 100;
-                        break;
-                    case 'b':
-                        // Mezzanine tranche - balanced approach
-                        tokenPrice = (assets * 0.8 - liabilities * 0.7) / tokens;
-                        tokenAllocation = contribution / tokenPrice;
-                        poolPercentage = (tokenAllocation / tokens) * 100;
+    poolPercentage = (tokenAllocation / tokens) * 100;
                         remicPercentage = (contribution / (assets * 1.2)) * 100;
                         break;
                     case 'c':
@@ -910,60 +811,257 @@
                             successMessage.classList.remove('hidden');
                             setTimeout(() => {
                                 successMessage.classList.add('hidden');
-                            }, 3000);
-                            
-                            // Reset form
-                            document.getElementById(`liabilities-${tranche}`).value = '';
-                            document.getElementById(`contribution-${tranche}`).value = '';
-                            
-                            // Recalculate (this will use the updated trancheData for display)
-                            calculateTrancheOffer(tranche);
-
-                        } else {
-                            const errorData = await response.json();
-                            console.error('Backend submission failed:', errorData);
-                            alert(`Submission failed: ${errorData.message || 'Unknown error'}`);
-                        }
-                    } catch (error) {
-                        console.error('Network or unexpected error:', error);
-                        alert('An error occurred while submitting your offer. Please try again.');
-                    }
-                    // *** END OF ADDED LINES ***
+<script>
+    document.addEventListener('DOMContentLoaded', function() {
+        // Initialize tranche data
+        const trancheData = {
+            a: {
+                assets: 1200000,
+                tokens: 0.3,
+                liquidity: 1.2,
+                distribution: 0.3
+            },
+            b: {
+                assets: 8500000,
+                tokens: 20000000,
+                liquidity: 8.5,
+                distribution: 20
+            },
+            c: {
+                assets: 3800000,
+                tokens: 10000000,
+                liquidity: 3.8,
+                distribution: 10
+            }
+        };
 
-                });
-            });
-            
-            // Function to update tranche pool information
-            function updateTranchePoolInfo() {
-                // Update supply and liquidity displays
-                document.getElementById('tranche-a-supply').textContent = `${trancheData.a.tokens.toLocaleString()} Tokens`;
-                document.getElementById('tranche-a-liquidity').textContent = `$${(trancheData.a.liquidity / 1000000).toFixed(1)}M`;
+        // Calculator toggle functionality
+        const calculatorBtn = document.getElementById('token-calculator-btn');
+        const calculator = document.getElementById('token-calculator');
+        const closeCalculator = document.getElementById('close-calculator');
+        const successMessage = document.getElementById('success-message');
+        
+        calculatorBtn.addEventListener('click', function() {
+            calculator.classList.toggle('hidden');
+        });
+        
+        closeCalculator.addEventListener('click', function() {
+            calculator.classList.add('hidden');
+        });
+        
+        // Tab switching functionality
+        const tabs = document.querySelectorAll('.tranche-tab');
+        const contents = document.querySelectorAll('.tranche-content');
+        
+        tabs.forEach(tab => {
+            tab.addEventListener('click', function() {
+                const tranche = this.dataset.tranche;
                 
-                document.getElementById('tranche-b-supply').textContent = `${(trancheData.b.tokens / 1000000).toFixed(1)}M Tokens`;
-                document.getElementById('tranche-b-liquidity').textContent = `$${(trancheData.b.liquidity / 1000000).toFixed(1)}M`;
+                // Update active tab
+                tabs.forEach(t => t.classList.remove('active'));
+                this.classList.add('active');
                 
-                document.getElementById('tranche-c-supply').textContent = `${(trancheData.c.tokens / 1000000).toFixed(1)}M Tokens`;
-                document.getElementById('tranche-c-liquidity').textContent = `$${(trancheData.c.liquidity / 1000000).toFixed(1)}M`;
+                // Update active content
+                contents.forEach(c => c.classList.remove('active'));
+                document.getElementById(`tranche-${tranche}-calc`).classList.add('active');
+            });
+        });
+        
+        // Calculator buttons from tranche cards
+        const trancheCalculatorBtns = document.querySelectorAll('.tranche-calculator-btn');
+        
+        trancheCalculatorBtns.forEach(btn => {
+            btn.addEventListener('click', function() {
+                const tranche = this.dataset.tranche;
                 
-                // Update token distribution
-                const total = trancheData.a.distribution + trancheData.b.distribution + trancheData.c.distribution;
-                const aPercent = (trancheData.a.distribution / total * 100).toFixed(2);
-                const bPercent = (trancheData.b.distribution / total * 100).toFixed(2);
-                const cPercent = (trancheData.c.distribution / total * 100).toFixed(2);
+                // Show calculator if hidden
+                if (calculator.classList.contains('hidden')) {
+                    calculator.classList.remove('hidden');
+                }
                 
-                document.getElementById('dist-a').textContent = `${trancheData.a.distribution}M (${aPercent}%)`;
-                document.getElementById('dist-b').textContent = `${trancheData.b.distribution}M (${bPercent}%)`;
-                document.getElementById('dist-c').textContent = `${trancheData.c.distribution}M (${cPercent}%)`;
+                // Switch to the correct tab
+                tabs.forEach(t => t.classList.remove('active'));
+                document.querySelector(`.tranche-tab[data-tranche="${tranche}"]`).classList.add('active');
                 
-                // Update distribution bars
-                document.querySelector('#tranche-a-calc .bg-blue-600').style.width = `${aPercent}%`;
-                document.querySelector('#tranche-b-calc .bg-green-500').style.width = `${bPercent}%`;
-                document.querySelector('#tranche-c-calc .bg-red-500').style.width = `${cPercent}%`;
+                contents.forEach(c => c.classList.remove('active'));
+                document.getElementById(`tranche-${tranche}-calc`).classList.add('active');
+            });
+        });
+
+        // Calculate functions for each tranche
+        function calculateTrancheOffer(tranche) {
+            const assets = parseFloat(document.getElementById(`assets-${tranche}`).value) || 0;
+            const liabilities = parseFloat(document.getElementById(`liabilities-${tranche}`).value) || 0;
+            const tokens = parseFloat(document.getElementById(`tokens-${tranche}`).value) || 1;
+            const contribution = parseFloat(document.getElementById(`contribution-${tranche}`).value) || 0;
+            
+            // Different calculation formulas based on tranche
+            let tokenPrice, tokenAllocation, poolPercentage, remicPercentage;
+            
+            switch(tranche) {
+                case 'a':
+                    // Senior tranche - lower risk, higher price
+                    tokenPrice = (assets * 0.9 - liabilities * 0.5) / tokens;
+                    tokenAllocation = contribution / tokenPrice;
+                    poolPercentage = (tokenAllocation / tokens) * 100;
+                    remicPercentage = (contribution / (assets * 1.5)) * 100;
+                    break;
+                case 'b':
+                    // Mezzanine tranche - balanced approach
+                    tokenPrice = (assets * 0.8 - liabilities * 0.7) / tokens;
+                    tokenAllocation = contribution / tokenPrice;
+                    poolPercentage = (tokenAllocation / tokens) * 100;
+                    remicPercentage = (contribution / (assets * 1.2)) * 100;
+                    break;
+                case 'c':
+                    // B-Piece tranche - higher risk, lower price
+                    tokenPrice = (assets * 0.7 - liabilities * 0.9) / tokens;
+                    tokenAllocation = contribution / tokenPrice;
+                    poolPercentage = (tokenAllocation / tokens) * 100;
+                    remicPercentage = (contribution / assets) * 100;
+                    break;
             }
             
-            // Initial calculations
-            ['a', 'b', 'c'].forEach(tranche => calculateTrancheOffer(tranche));
+            // Update display
+            document.getElementById(`token-price-${tranche}`).textContent = `$${tokenPrice.toFixed(2)}`;
+            document.getElementById(`token-allocation-${tranche}`).textContent = Math.round(tokenAllocation).toLocaleString();
+            document.getElementById(`pool-percentage-${tranche}`).textContent = `${poolPercentage.toFixed(2)}%`;
+            document.getElementById(`remic-percentage-${tranche}`).textContent = `${remicPercentage.toFixed(2)}%`;
+        }
+        
+        // Set up calculate buttons
+        const calculateBtns = document.querySelectorAll('.calculate-btn');
+        
+        calculateBtns.forEach(btn => {
+            btn.addEventListener('click', function() {
+                const tranche = this.dataset.tranche;
+                calculateTrancheOffer(tranche);
+            });
+        });
+        
+        // Also calculate when seller inputs change
+        const sellerInputs = ['a', 'b', 'c'].map(t => [
+            `liabilities-${t}`,
+            `contribution-${t}`
+        ]).flat();
+        
+        sellerInputs.forEach(id => {
+            document.getElementById(id).addEventListener('input', function() {
+                const tranche = id.split('-')[1];
+                calculateTrancheOffer(tranche);
+            });
+        });
+        
+        // Submit offer buttons (this is the ONLY one you should have)
+        const submitOfferBtns = document.querySelectorAll('.submit-offer');
+        
+        submitOfferBtns.forEach(btn => {
+            btn.addEventListener('click', async function() { // Made async for fetch
+                const tranche = this.dataset.tranche;
+                const trancheName = {
+                    'a': 'Tranche A (Senior)',
+                    'b': 'Tranche B (Mezzanine)',
+                    'c': 'Tranche C (B-Piece)'
+                }[tranche];
+                
+                const liabilities = parseFloat(document.getElementById(`liabilities-${tranche}`).value) || 0;
+                const contribution = parseFloat(document.getElementById(`contribution-${tranche}`).value) || 0;
+                
+                if (liabilities <= 0 || contribution <= 0) {
+                    alert('Please enter valid values for liabilities and contribution');
+                    return;
+                }
+
+                // IMPORTANT: Replace this with YOUR ACTUAL Cloudflare Worker URL
+                // Example: 'https://your-worker-name.your-username.workers.dev/submit-offer'
+                const workerUrl = 'https://century-city-remic-api.aiagents.workers.dev/submit-offer'; // Ensure this is your final, correct URL
+                
+                const offerData = {
+                    tranche: tranche,
+                    trancheName: trancheName,
+                    liabilities: liabilities,
+                    contribution: contribution,
+                    // Include other calculated values if needed, for example:
+                    tokenPrice: parseFloat(document.getElementById(`token-price-${tranche}`).textContent.replace('$', '')),
+                    tokenAllocation: parseInt(document.getElementById(`token-allocation-${tranche}`).textContent.replace(/,/g, '')),
+                    poolPercentage: parseFloat(document.getElementById(`pool-percentage-${tranche}`).textContent.replace('%', '')),
+                    remicPercentage: parseFloat(document.getElementById(`remic-percentage-${tranche}`).textContent.replace('%', '')),
+                };
+
+                try {
+                    const response = await fetch(workerUrl, {
+                        method: 'POST',
+                        headers: {
+                            'Content-Type': 'application/json',
+                        },
+                        body: JSON.stringify(offerData),
+                    });
+
+                    if (response.ok) {
+                        const result = await response.json();
+                        console.log('Backend response:', result);
+
+                        // Update tranche data with new investment (if successful)
+                        trancheData[tranche].assets += contribution;
+                        trancheData[tranche].liquidity += contribution * 0.9; 
+                        updateTranchePoolInfo(); // Update frontend display
+
+                        // Show success message
+                        successMessage.classList.remove('hidden');
+                        setTimeout(() => {
+                            successMessage.classList.add('hidden');
+                        }, 3000);
+                        
+                        // Reset form
+                        document.getElementById(`liabilities-${tranche}`).value = '';
+                        document.getElementById(`contribution-${tranche}`).value = '';
+                        
+                        // Recalculate (this will use the updated trancheData for display)
+                        calculateTrancheOffer(tranche);
+
+                    } else {
+                        const errorData = await response.json();
+                        console.error('Backend submission failed:', errorData);
+                        alert(`Submission failed: ${errorData.message || 'Unknown error'}`);
+                    }
+                } catch (error) {
+                    console.error('Network or unexpected error:', error);
+                    alert('An error occurred while submitting your offer. Please try again.');
+                }
+            });
         });
-    </script>
+
+        // Function to update tranche pool information
+        function updateTranchePoolInfo() {
+            // Update supply and liquidity displays
+            document.getElementById('tranche-a-supply').textContent = `${trancheData.a.tokens.toLocaleString()} Tokens`;
+            document.getElementById('tranche-a-liquidity').textContent = `$${(trancheData.a.liquidity / 1000000).toFixed(1)}M`;
+            
+            document.getElementById('tranche-b-supply').textContent = `${(trancheData.b.tokens / 1000000).toFixed(1)}M Tokens`;
+            document.getElementById('tranche-b-liquidity').textContent = `$${(trancheData.b.liquidity / 1000000).toFixed(1)}M`;
+            
+            document.getElementById('tranche-c-supply').textContent = `${(trancheData.c.tokens / 1000000).toFixed(1)}M Tokens`;
+            document.getElementById('tranche-c-liquidity').textContent = `$${(trancheData.c.liquidity / 1000000).toFixed(1)}M`;
+            
+            // Update token distribution
+            const total = trancheData.a.distribution + trancheData.b.distribution + trancheData.c.distribution;
+            const aPercent = (trancheData.a.distribution / total * 100).toFixed(2);
+            const bPercent = (trancheData.b.distribution / total * 100).toFixed(2);
+            const cPercent = (trancheData.c.distribution / total * 100).toFixed(2);
+            
+            document.getElementById('dist-a').textContent = `${trancheData.a.distribution}M (${aPercent}%)`;
+            document.getElementById('dist-b').textContent = `${trancheData.b.distribution}M (${bPercent}%)`;
+            document.getElementById('dist-c').textContent = `${trancheData.c.distribution}M (${cPercent}%)`;
+            
+            // Update distribution bars
+            document.querySelector('#tranche-a-calc .bg-blue-600').style.width = `${aPercent}%`;
+            document.querySelector('#tranche-b-calc .bg-green-500').style.width = `${bPercent}%`;
+            document.querySelector('#tranche-c-calc .bg-red-500').style.width = `${cPercent}%`;
+        }
+        
+        // Initial calculations
+        ['a', 'b', 'c'].forEach(tranche => calculateTrancheOffer(tranche));
+    });
+</script>
 <p style="border-radius: 8px; text-align: center; font-size: 12px; color: #fff; margin-top: 16px;position: fixed; left: 8px; bottom: 8px; z-index: 10; background: rgba(0, 0, 0, 0.8); padding: 4px 8px;">Made with <img src="https://enzostvs-deepsite.hf.space/logo.svg" alt="DeepSite Logo" style="width: 16px; height: 16px; vertical-align: middle;display:inline-block;margin-right:3px;filter:brightness(0) invert(1);"><a href="https://enzostvs-deepsite.hf.space" style="color: #fff;text-decoration: underline;" target="_blank" >DeepSite</a> - 🧬 <a href="https://enzostvs-deepsite.hf.space?remix=privateuserh/ccremic-vbeta1-06" style="color: #fff;text-decoration: underline;" target="_blank" >Remix</a></p></body>
 </html>