Spaces:
Running
Running
| <html lang="en"> | |
| <head> | |
| <meta charset="UTF-8"> | |
| <meta name="viewport" content="width=device-width, initial-scale=1.0"> | |
| <title>California Films Project</title> | |
| <script src="https://cdn.tailwindcss.com"></script> | |
| <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css"> | |
| <style> | |
| body { | |
| 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> | |
| <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> |