Update index.html

index.html

@@ -167,6 +167,61 @@
             });
         });
     </script>
+  <script>
+// 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."
+    }
+};
+
+// --- 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');
+});
+
+roleInputs.forEach(input => {
+    input.addEventListener('change', updatePointsDisplay);
+});
+
+</script>
 
 </body>
 </html>