Update index.html

index.html

@@ -169,55 +169,127 @@
     
 // Paste this code inside the existing document.addEventListener('DOMContentLoaded', () => { ... });
 
-// --- Points Calculator Elements ---
-const toggleCalculatorBtn = document.getElementById('toggleCalculator');
-const pointsCalculatorPanel = document.getElementById('pointsCalculatorPanel');
-const closeCalculatorBtn = document.getElementById('closeCalculator');
-const pointsResultDiv = document.getElementById('pointsResult');
-const roleInputs = document.querySelectorAll('input[name="filmRole"]');
-
-// --- Points Data ---
-const pointsData = {
-    Financier: {
-        points: "50 Points",
-        description: "Financing 100% of the budget typically equals 50% of the net profits, representing the foundational 50/50 split between capital and production."
-    },
-    Producer: {
-        points: "10 Points",
-        description: "A lead producer typically receives points from the 'Producer's Pool,' rewarding their effort in developing and managing the entire project."
-    },
-    Director: {
-        points: "5 Points",
-        description: "An established director's creative leadership is often rewarded with points from the 'Talent Pool' in addition to their fee."
+<script>
+document.addEventListener('DOMContentLoaded', () => {
+
+    // #################################################################
+    // ## LOGIC FOR THE "INDICATE YOUR INTEREST" PANEL (FORM)
+    // #################################################################
+    const interestForm = document.getElementById('interestForm');
+    if (interestForm) {
+        // --- CONFIGURATION ---
+        const WORKER_URL = 'https://contact-form-api.aiagents.workers.dev/';
+        // --- STATE ---
+        let isSubmitting = false;
+        // --- ELEMENTS ---
+        const togglePanelBtn = document.getElementById('togglePanel');
+        const floatingPanel = document.getElementById('floatingPanel');
+        const closePanelBtn = document.getElementById('closePanel');
+        const formContainer = document.getElementById('formContainer');
+        const successMessage = document.getElementById('successMessage');
+        const uniqueIDDisplay = document.getElementById('uniqueIDDisplay');
+        const closeSuccessBtn = document.getElementById('closeSuccess');
+        const submitButton = document.getElementById('submitButton');
+        const buttonText = document.getElementById('buttonText');
+
+        const showInterestPanel = () => floatingPanel.classList.remove('hidden');
+        const hideInterestPanel = () => floatingPanel.classList.add('hidden');
+        const generateUniqueId = () => 'CFP-' + Date.now().toString(36) + Math.random().toString(36).substring(2, 8).toUpperCase();
+
+        togglePanelBtn.addEventListener('click', showInterestPanel);
+        closePanelBtn.addEventListener('click', hideInterestPanel);
+        closeSuccessBtn.addEventListener('click', () => {
+            hideInterestPanel();
+            setTimeout(() => {
+                formContainer.classList.remove('hidden');
+                successMessage.classList.add('hidden');
+                interestForm.reset();
+            }, 300);
+        });
+
+        interestForm.addEventListener('submit', async (e) => {
+            e.preventDefault();
+            if (isSubmitting) return;
+
+            isSubmitting = true;
+            submitButton.disabled = true;
+            buttonText.textContent = 'Submitting...';
+            const uniqueId = generateUniqueId();
+            const name = document.getElementById('name').value;
+            const email = document.getElementById('email').value;
+
+            try {
+                const response = await fetch(WORKER_URL, {
+                    method: 'POST',
+                    headers: { 'Content-Type': 'application/json' },
+                    body: JSON.stringify({ name, email, uniqueId }),
+                });
+                if (!response.ok) {
+                    const errorData = await response.json();
+                    throw new Error(errorData.error || 'Submission failed');
+                }
+                uniqueIDDisplay.textContent = uniqueId;
+                formContainer.classList.add('hidden');
+                successMessage.classList.remove('hidden');
+            } catch (error) {
+                console.error('Error submitting form:', error);
+                alert(`There was an error: ${error.message}`);
+            } finally {
+                isSubmitting = false;
+                submitButton.disabled = false;
+                buttonText.textContent = 'Generate Unique ID';
+            }
+        });
     }
-};
-
-// --- Function to update the display ---
-const updatePointsDisplay = () => {
-    const selectedRole = document.querySelector('input[name="filmRole"]:checked').value;
-    const data = pointsData[selectedRole];
-
-    pointsResultDiv.innerHTML = `
-        <h4 class="text-2xl font-bold text-blue-600">${data.points}</h4>
-        <p class="text-xs text-gray-600 mt-1">${data.description}</p>
-    `;
-};
-
-// --- Event Listeners ---
-toggleCalculatorBtn.addEventListener('click', () => {
-    pointsCalculatorPanel.classList.toggle('hidden');
-    pointsCalculatorPanel.classList.toggle('opacity-0');
-    pointsCalculatorPanel.classList.toggle('translate-y-4');
-    // Update display when panel opens
-    updatePointsDisplay();
-});
 
-closeCalculatorBtn.addEventListener('click', () => {
-    pointsCalculatorPanel.classList.add('hidden', 'opacity-0', 'translate-y-4');
-});
+    // #################################################################
+    // ## LOGIC FOR THE "POINTS CALCULATOR" PANEL
+    // #################################################################
+    const pointsCalculatorPanel = document.getElementById('pointsCalculatorPanel');
+    if (pointsCalculatorPanel) {
+        // --- ELEMENTS ---
+        const toggleCalculatorBtn = document.getElementById('toggleCalculator');
+        const closeCalculatorBtn = document.getElementById('closeCalculator');
+        const pointsResultDiv = document.getElementById('pointsResult');
+        const roleInputs = document.querySelectorAll('input[name="filmRole"]');
+
+        // --- POINTS DATA ---
+        const pointsData = {
+            Financier: {
+                points: "50 Points",
+                description: "Financing 100% of the budget typically equals 50% of the net profits, representing the foundational 50/50 split between capital and production."
+            },
+            Producer: {
+                points: "10 Points",
+                description: "A lead producer typically receives points from the 'Producer's Pool,' rewarding their effort in developing and managing the entire project."
+            },
+            Director: {
+                points: "5 Points",
+                description: "An established director's creative leadership is often rewarded with points from the 'Talent Pool' in addition to their fee."
+            }
+        };
+
+        const updatePointsDisplay = () => {
+            const selectedRole = document.querySelector('input[name="filmRole"]:checked').value;
+            const data = pointsData[selectedRole];
+            pointsResultDiv.innerHTML = `<h4 class="text-2xl font-bold text-blue-600">${data.points}</h4><p class="text-xs text-gray-600 mt-1">${data.description}</p>`;
+        };
+
+        toggleCalculatorBtn.addEventListener('click', () => {
+            pointsCalculatorPanel.classList.toggle('hidden');
+            pointsCalculatorPanel.classList.toggle('opacity-0');
+            pointsCalculatorPanel.classList.toggle('translate-y-4');
+            updatePointsDisplay();
+        });
 
-roleInputs.forEach(input => {
-    input.addEventListener('change', updatePointsDisplay);
+        closeCalculatorBtn.addEventListener('click', () => {
+            pointsCalculatorPanel.classList.add('hidden', 'opacity-0', 'translate-y-4');
+        });
+
+        roleInputs.forEach(input => {
+            input.addEventListener('change', updatePointsDisplay);
+        });
+    }
 });
 
 </script>