Spaces:

privateuserh
/

cfp2035

Running

App Files Files Community

privateuserh commited on Jun 10

Commit

d132547

verified ·

1 Parent(s): cea0011

Update index.html

Browse files

Files changed (1) hide show

index.html +113 -192

index.html CHANGED Viewed

@@ -11,228 +11,149 @@
             background-color: #f8f9fa;
             font-family: 'Inter', -apple-system, BlinkMacSystemFont, sans-serif;
         }
         .floating-panel {
             box-shadow: 0 10px 25px -5px rgba(0, 0, 0, 0.1), 0 10px 10px -5px rgba(0, 0, 0, 0.04);
             transition: all 0.3s ease;
-            transform: translateY(0);
         }
-        .floating-panel:hover {
-            transform: translateY(-5px);
-        }
-        .floating-panel.hidden {
-            transform: translateY(100px);
-        }
         .gradient-text {
             background: linear-gradient(90deg, #3b82f6, #10b981);
             -webkit-background-clip: text;
             background-clip: text;
             color: transparent;
         }
     </style>
 </head>
 <body class="min-h-screen bg-gray-50 flex flex-col">
-    <!-- Main Content -->
     <main class="flex-grow flex flex-col items-center justify-center p-4 text-center">
-        <h1 class="text-1xl md:text-7xl font-bold mb-4 gradient-text">California Films Project</h1>
-      <p class="text-x0.30 md:text-2xl text-gray-600">Film Tax Incentives / Benefits/ Blockchain Token Project</p>
-           <p class="text-x0.10 md:text-2xl text-gray-600"> 1901 Avenue of the Stars / Silicon Beach</p>
-        </main>
-    <!-- Floating Button -->
     <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>
-    <!-- Floating Panel -->
-    <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 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">Please complete this form to participate in the California Films Project. 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>
-                <label class="block text-sm font-medium text-gray-700 mb-1">You are a:</label>
-                <div class="mt-1 space-y-2">
-                    <div class="flex items-center">
-                        <input id="investor" name="role" type="radio" value="Investor" class="h-4 w-4 text-blue-600 focus:ring-blue-500" checked>
-                        <label for="investor" class="ml-2 block text-sm text-gray-700">Investor</label>
-                    </div>
-                    <div class="flex items-center">
-                        <input id="filmmaker" name="role" type="radio" value="Filmmaker" class="h-4 w-4 text-blue-600 focus:ring-blue-500">
-                        <label for="filmmaker" class="ml-2 block text-sm text-gray-700">Filmmaker</label>
-                    </div>
-                </div>
-            </div>
-            <div>
-                <button type="submit" 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">
-                    Generate Unique ID
-                    <i class="fas fa-arrow-right ml-2"></i>
                 </button>
             </div>
-        </form>
-        <div id="successMessage" class="hidden mt-4 p-4 bg-green-50 rounded-md text-green-700">
-            <div class="flex items-center">
-                <i class="fas fa-check-circle mr-2"></i>
-                <span>Your unique ID is: <span id="uniqueID" class="font-bold"></span></span>
             </div>
-            <p class="mt-2 text-sm">We'll be in touch soon!</p>
         </div>
     </div>
-    <meta charset="UTF-8">
-    <h2>Submit Your Information</h2>
-    <form id="dataForm">
-        <label for="name">Name:</label><br>
-        <input type="text" id="name" name="name" required><br><br>
-        <label for="email">Email:</label><br>
-        <input type="email" id="email" name="email" required><br><br>
-        <input type="hidden" id="uniqueId" name="uniqueId">
-        <button type="submit">Submit</button>
-    </form>
-    <p id="responseMessage"></p>
     <script>
-        // PASTE YOUR WORKER URL HERE
-        const WORKER_URL = 'https://contact-form-api.your-name.workers.dev';
-        // Function to generate a simple unique ID
-        function generateUniqueId() {
-            return 'uid-' + Date.now() + '-' + Math.random().toString(36).substring(2, 9);
-        }
-        // Set the unique ID when the page loads
-        document.getElementById('uniqueId').value = generateUniqueId();
-        // Listen for the form submission
-        document.getElementById('dataForm').addEventListener('submit', async (event) => {
-            event.preventDefault(); // Stop the page from reloading
-            const form = event.target;
-            const name = form.elements.name.value;
-            const email = form.elements.email.value;
-            const uniqueId = form.elements.uniqueId.value;
-            const messageElement = document.getElementById('responseMessage');
-            messageElement.textContent = 'Submitting...'; // Provide feedback
-            try {
-                const response = await fetch(WORKER_URL, {
-                    method: 'POST',
-                    headers: {
-                        'Content-Type': 'application/json',
-                    },
-                    body: JSON.stringify({ name, email, uniqueId }),
-                });
-                const responseText = await response.text();
-                messageElement.textContent = responseText;
-                if (response.ok) {
-                    form.reset(); // Clear the form on success
-                    document.getElementById('uniqueId').value = generateUniqueId(); // Set a new ID
                 }
-            } catch (error) {
-                messageElement.textContent = `A network error occurred. Please try again.`;
-            }
         });
     </script>
-    <script>
-        // Panel toggle logic
-        const togglePanel = document.getElementById('togglePanel');
-        const floatingPanel = document.getElementById('floatingPanel');
-        const closePanel = document.getElementById('closePanel');
-        togglePanel.addEventListener('click', () => {
-            floatingPanel.classList.toggle('hidden');
-            floatingPanel.classList.toggle('opacity-0');
-            floatingPanel.classList.toggle('translate-y-4');
-        });
-        closePanel.addEventListener('click', () => {
-            floatingPanel.classList.add('hidden');
-            floatingPanel.classList.add('opacity-0');
-            floatingPanel.classList.add('translate-y-4');
-        });
-        // Form submission to Cloudflare D1
-        const interestForm = document.getElementById('interestForm');
-        const successMessage = document.getElementById('successMessage');
-        interestForm.addEventListener('submit', async (e) => {
-            e.preventDefault();
-            const formData = {
-                name: document.getElementById('name').value,
-                email: document.getElementById('email').value,
-                role: document.querySelector('input[name="role"]:checked').value,
-                timestamp: new Date().toISOString()
-            };
-            // Generate a unique ID (for demo, in production this would come from D1)
-            const uniqueId = 'CFP-' + Math.random().toString(36).substr(2, 8).toUpperCase();
-            try {
-                // In a real implementation, you would:
-                // 1. Make a fetch request to your Cloudflare Worker
-                // 2. The Worker would insert into D1 SQL database
-                // 3. Return the unique ID from D1
-                // Example fetch (commented out - replace with your actual endpoint)
-                /*
-                const response = await fetch('https://your-worker.your-subdomain.workers.dev/api/register', {
-                    method: 'POST',
-                    headers: {
-                        'Content-Type': 'application/json',
-                    },
-                    body: JSON.stringify(formData),
-                });
-                if (!response.ok) throw new Error('Network response was not ok');
-                const data = await response.json();
-                const uniqueId = data.uniqueId;
-                */
-                // For this demo, we'll use the locally generated ID
-                document.getElementById('uniqueID').textContent = uniqueId;
-                interestForm.classList.add('hidden');
-                successMessage.classList.remove('hidden');
-                // You would also want to store the ID in localStorage or send it to the backend
-            } catch (error) {
-                console.error('Error:', error);
-                alert('There was an error submitting your information. Please try again.');
-            }
-        });
-    </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/cfp2035" style="color: #fff;text-decoration: underline;" target="_blank" >Remix</a></p></body>
 </html>

             background-color: #f8f9fa;
             font-family: 'Inter', -apple-system, BlinkMacSystemFont, sans-serif;
         }
         .floating-panel {
             box-shadow: 0 10px 25px -5px rgba(0, 0, 0, 0.1), 0 10px 10px -5px rgba(0, 0, 0, 0.04);
             transition: all 0.3s ease;
         }
         .gradient-text {
             background: linear-gradient(90deg, #3b82f6, #10b981);
             -webkit-background-clip: text;
             background-clip: text;
             color: transparent;
         }
+        /* Style to handle the hidden state gracefully */
+        #floatingPanel.hidden {
+            opacity: 0;
+            transform: translateY(1rem);
+            pointer-events: none;
+        }
     </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 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. 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/';
+            // --- 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();
+                // Reset form for next time
+                setTimeout(() => {
+                    formContainer.classList.remove('hidden');
+                    successMessage.classList.add('hidden');
+                    interestForm.reset();
+                }, 300); // Wait for fade out
+            });
+            interestForm.addEventListener('submit', async (e) => {
+                e.preventDefault();
+                buttonText.textContent = 'Submitting...';
+                submitButton.disabled = true;
+                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 errorText = await response.text();
+                        throw new Error(errorText || 'Submission failed');
+                    }
+                    // Show success message
+                    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}. Please try again.`);
+                } finally {
+                    // Reset button
+                    buttonText.textContent = 'Generate Unique ID';
+                    submitButton.disabled = false;
                 }
+            });
         });
     </script>
+</body>
 </html>