Spaces:

privateuserh
/

cfp2035

Running

App Files Files Community

privateuserh commited on Jun 10

Commit

7499b47

verified ·

1 Parent(s): eba309b

Update index.html

Browse files

Files changed (1) hide show

index.html +76 -214

index.html CHANGED Viewed

@@ -29,251 +29,79 @@
         }
     </style>
 </head>
-<body class="min-h-screen bg-gray-50 flex flex-col">
     <main class="flex-grow flex flex-col items-center justify-center p-4 text-center">
-        <h1 class="text-4xl md:text-3xl font-bold mb-4 gradient-text">California Films Project/</h1>
-        <p class="text-0.10g md:text-0.10xl text-gray-600">Film Tax Incentives / Transferable Tax Credits {B/On Eligibility}</p>
-      <p class="text-md md:text-x0.10 text-gray-600 mt-2">Benefits: Annuitized • Blockchain Tokens • Yield% Farming</p>
-        <p class="text-md md:text-x0.10 text-gray-600 mt-2">1901 Avenue of the Stars / Silicon Beach /</p>
-      <p class="text-md md:text-x0.10 text-gray-600 mt-2">California Films Project is a private SaaS <b>Dev/. Inception date: 6.10.2025</b> 2025. Allrights reserved.</p>
-      <br>
-      <p class="text-md md:text-x0.05 text-gray-600 mt-1">§ 1.482-4 (b) (4)(5) §1.482-4(f)(3) § 6132 (h)(1) Section 798.3 Notice 2014-21</p>
     </main>
     <div class="fixed bottom-6 right-6 z-50">
         <button id="togglePanel" class="bg-blue-600 hover:bg-blue-700 text-white w-16 h-16 rounded-full flex items-center justify-center shadow-lg transition-all duration-300 transform hover:scale-110">
             <i class="fas fa-id-card text-2xl"></i>
         </button>
     </div>
-    <div id="floatingPanel" class="fixed bottom-24 right-6 w-80 bg-white rounded-xl shadow-xl p-6 transition-all duration-300 hidden z-40">
-        <div id="formContainer">
-            <div class="flex justify-between items-center mb-4">
-                <h3 class="text-xl font-semibold text-gray-800">Indicate Your Interest</h3>
-                <button id="closePanel" class="text-gray-500 hover:text-gray-700">
-                    <i class="fas fa-times"></i>
-                </button>
-            </div>
-            <p class="text-gray-600 mb-4 text-sm">Complete this form to participate. {Financier-or-Filmmaker} {Film-Stream-Television} {<> 1M Budgets} {New ROI Model} Your unique ID will serve as your placeholder.</p>
-            <form id="interestForm" class="space-y-4">
-                <div>
-                    <label for="name" class="block text-sm font-medium text-gray-700 mb-1">Full Name</label>
-                    <input type="text" id="name" name="name" required class="w-full px-3 py-2 border border-gray-300 rounded-md focus:outline-none focus:ring-2 focus:ring-blue-500 focus:border-blue-500">
-                </div>
-                <div>
-                    <label for="email" class="block text-sm font-medium text-gray-700 mb-1">Email</label>
-                    <input type="email" id="email" name="email" required class="w-full px-3 py-2 border border-gray-300 rounded-md focus:outline-none focus:ring-2 focus:ring-blue-500 focus:border-blue-500">
-                </div>
-                <div>
-                    <button type="submit" id="submitButton" class="w-full bg-blue-600 hover:bg-blue-700 text-white py-2 px-4 rounded-md transition duration-300 flex items-center justify-center">
-                        <span id="buttonText">Generate Unique ID</span>
-                        <i id="buttonIcon" class="fas fa-arrow-right ml-2"></i>
-                    </button>
-                </div>
-            </form>
-        </div>
-        <div id="successMessage" class="hidden text-center">
-            <div class="text-green-500">
-                <i class="fas fa-check-circle fa-3x"></i>
-            </div>
-            <h4 class="text-lg font-semibold text-gray-800 mt-3">Success!</h4>
-            <p class="text-gray-600 mt-1">Your unique ID is:</p>
-            <p id="uniqueIDDisplay" class="font-bold text-lg text-gray-800 bg-gray-100 rounded-md py-2 mt-2"></p>
-            <p class="mt-3 text-sm text-gray-500">We'll be in touch soon!</p>
-            <button id="closeSuccess" class="mt-4 w-full text-sm text-gray-600 hover:text-gray-800">Close</button>
-        </div>
     </div>
-    <script>
-        document.addEventListener('DOMContentLoaded', () => {
-            // --- 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 interestForm = document.getElementById('interestForm');
-            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');
-            // --- FUNCTIONS ---
-            const showPanel = () => floatingPanel.classList.remove('hidden');
-            const hidePanel = () => floatingPanel.classList.add('hidden');
-            const generateUniqueId = () => 'CFP-' + Date.now().toString(36) + Math.random().toString(36).substring(2, 8).toUpperCase();
-            // --- EVENT LISTENERS ---
-            togglePanelBtn.addEventListener('click', showPanel);
-            closePanelBtn.addEventListener('click', hidePanel);
-            closeSuccessBtn.addEventListener('click', () => {
-                hidePanel();
-                setTimeout(() => {
-                    formContainer.classList.remove('hidden');
-                    successMessage.classList.add('hidden');
-                    interestForm.reset();
-                }, 300);
-            });
-            interestForm.addEventListener('submit', async (e) => {
-                e.preventDefault();
-                // ** THE FIX IS HERE: If a submission is already happening, do nothing. **
-                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 {
-                    // Re-enable the form for a new submission later
-                    isSubmitting = false;
-                    submitButton.disabled = false;
-                    buttonText.textContent = 'Generate Unique ID';
-                }
-            });
-        });
-// Paste this code inside the existing document.addEventListener('DOMContentLoaded', () => { ... });
 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';
-            }
-        });
     }
     // #################################################################
-    // ## 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', () => {
@@ -283,17 +111,51 @@ document.addEventListener('DOMContentLoaded', () => {
             updatePointsDisplay();
         });
-        closeCalculatorBtn.addEventListener('click', () => {
-            pointsCalculatorPanel.classList.add('hidden', 'opacity-0', 'translate-y-4');
-        });
         roleInputs.forEach(input => {
             input.addEventListener('change', updatePointsDisplay);
         });
     }
-});
-</script>
 </body>
 </html>

         }
     </style>
 </head>
+  <body class="min-h-screen bg-gray-50 flex flex-col">
     <main class="flex-grow flex flex-col items-center justify-center p-4 text-center">
+        <h1 class="text-4xl md:text-7xl font-bold mb-4 gradient-text">California Films Project</h1>
+        <p class="text-lg md:text-2xl text-gray-600">Film Tax Incentives / Benefits / Blockchain Token Project</p>
+        <p class="text-md md:text-xl text-gray-600 mt-2">1901 Avenue of the Stars / Silicon Beach</p>
     </main>
+    <div class="fixed bottom-6 left-6 z-50">
+        <button id="togglePrivacy" class="bg-gray-700 hover:bg-gray-800 text-white w-16 h-16 rounded-full flex items-center justify-center shadow-lg transition-all duration-300 transform hover:scale-110">
+            <i class="fas fa-shield-alt text-2xl"></i>
+        </button>
+    </div>
     <div class="fixed bottom-6 right-6 z-50">
         <button id="togglePanel" class="bg-blue-600 hover:bg-blue-700 text-white w-16 h-16 rounded-full flex items-center justify-center shadow-lg transition-all duration-300 transform hover:scale-110">
             <i class="fas fa-id-card text-2xl"></i>
         </button>
     </div>
+    <div class="fixed bottom-6 right-24 z-50">
+        <button id="toggleCalculator" class="bg-green-600 hover:bg-green-700 text-white w-16 h-16 rounded-full flex items-center justify-center shadow-lg transition-all duration-300 transform hover:scale-110">
+            <i class="fas fa-percent text-2xl"></i>
+        </button>
     </div>
+    <div id="floatingPanel" class="fixed bottom-24 right-6 w-80 bg-white rounded-xl shadow-xl p-6 hidden opacity-0 transition-all duration-300 transform translate-y-4 z-40">
+        </div>
+    <div id="pointsCalculatorPanel" class="fixed bottom-24 right-6 w-80 md:w-96 bg-white rounded-xl shadow-xl p-6 hidden opacity-0 transition-all duration-300 transform translate-y-4 z-40">
+        </div>
+    <div id="privacyPanel" class="fixed inset-0 bg-black bg-opacity-50 flex items-center justify-center p-4 hidden opacity-0 z-50 transition-opacity duration-300">
+    </div>
+    <script>
 document.addEventListener('DOMContentLoaded', () => {
     // #################################################################
+    // ## PANEL 1: "INDICATE YOUR INTEREST"
     // #################################################################
+    const interestFormPanel = document.getElementById('floatingPanel');
+    if (interestFormPanel) {
+        // --- NOTE: This panel's content should be filled in from your previous working code ---
+        // This is just the placeholder logic to ensure it runs
+        const toggleInterestBtn = document.getElementById('togglePanel');
+        toggleInterestBtn.addEventListener('click', () => alert('Interest Panel Logic Here'));
     }
     // #################################################################
+    // ## PANEL 2: "POINTS CALCULATOR"
     // #################################################################
     const pointsCalculatorPanel = document.getElementById('pointsCalculatorPanel');
     if (pointsCalculatorPanel) {
         const toggleCalculatorBtn = document.getElementById('toggleCalculator');
         const closeCalculatorBtn = document.getElementById('closeCalculator');
         const pointsResultDiv = document.getElementById('pointsResult');
         const roleInputs = document.querySelectorAll('input[name="filmRole"]');
         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];
+            if (pointsResultDiv) {
+                 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', () => {
             updatePointsDisplay();
         });
+        if(closeCalculatorBtn) {
+            closeCalculatorBtn.addEventListener('click', () => {
+                pointsCalculatorPanel.classList.add('hidden', 'opacity-0', 'translate-y-4');
+            });
+        }
         roleInputs.forEach(input => {
             input.addEventListener('change', updatePointsDisplay);
         });
     }
+    // #################################################################
+    // ## PANEL 3: PRIVACY POLICY
+    // #################################################################
+    const privacyPanel = document.getElementById('privacyPanel');
+    if (privacyPanel) {
+        const togglePrivacyBtn = document.getElementById('togglePrivacy');
+        const closePrivacyBtn = document.getElementById('closePrivacy');
+        const acceptPrivacyBtn = document.getElementById('acceptPrivacy');
+        const openPrivacyPanel = () => {
+            privacyPanel.classList.remove('hidden');
+            setTimeout(() => { privacyPanel.classList.remove('opacity-0'); privacyPanel.classList.add('opacity-100'); }, 10);
+        };
+        const closePrivacyPanel = () => {
+            privacyPanel.classList.remove('opacity-100');
+            privacyPanel.classList.add('opacity-0');
+            setTimeout(() => privacyPanel.classList.add('hidden'), 300);
+        };
+        togglePrivacyBtn.addEventListener('click', openPrivacyPanel);
+        closePrivacyBtn.addEventListener('click', closePrivacyPanel);
+        acceptPrivacyBtn.addEventListener('click', closePrivacyPanel);
+        privacyPanel.addEventListener('click', (event) => {
+            if (event.target === privacyPanel) {
+                closePrivacyPanel();
+            }
+        });
+    }
+});
+    </script>
 </body>
 </html>