Spaces:

privateuserh
/

cfp2035

Running

App Files Files Community

privateuserh commited on Jun 10

Commit

4662280

verified ·

1 Parent(s): 4dfa58e

Make a minimalist site for California Films Project (CFP), no description on the main page, just the title of the project and subtext saying film tax incentives. Make a floating button panel to issue a unique id to visitors. Add code to connect the floating button to a D1 SQL Database on cloudflare. Add a description in the floating button window that asks the user to Indicate their Interest (IOI) to participate and add a selector for Investor or Filmmaker. The unique id will serve as their placeholder in the project. May the theme very clean sleek and highly efficient. - Initial Deployment

Browse files

Files changed (3) hide show

README.md +7 -5
index.html +175 -19
prompts.txt +1 -0

README.md CHANGED Viewed

@@ -1,10 +1,12 @@
 ---
-title: Cfp2035
-emoji: 💻
-colorFrom: green
-colorTo: yellow
 sdk: static
 pinned: false
 ---
-Check out the configuration reference at https://huggingface.co/docs/hub/spaces-config-reference

 ---
+title: cfp2035
+emoji: 🐳
+colorFrom: red
+colorTo: blue
 sdk: static
 pinned: false
+tags:
+  - deepsite
 ---
+Check out the configuration reference at https://huggingface.co/docs/hub/spaces-config-reference

index.html CHANGED Viewed

@@ -1,19 +1,175 @@
-<!doctype html>
-<html>
-	<head>
-		<meta charset="utf-8" />
-		<meta name="viewport" content="width=device-width" />
-		<title>My static Space</title>
-		<link rel="stylesheet" href="style.css" />
-	</head>
-	<body>
-		<div class="card">
-			<h1>Welcome to your static Space!</h1>
-			<p>You can modify this app directly by editing <i>index.html</i> in the Files and versions tab.</p>
-			<p>
-				Also don't forget to check the
-				<a href="https://huggingface.co/docs/hub/spaces" target="_blank">Spaces documentation</a>.
-			</p>
-		</div>
-	</body>
-</html>

+<!DOCTYPE html>
+<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-5xl md:text-7xl font-bold mb-4 gradient-text">California Films Project</h1>
+        <p class="text-xl md:text-2xl text-gray-600">film tax incentives</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>

prompts.txt ADDED Viewed

	@@ -0,0 +1 @@

+ Make a minimalist site for California Films Project (CFP), no description on the main page, just the title of the project and subtext saying film tax incentives. Make a floating button panel to issue a unique id to visitors. Add code to connect the floating button to a D1 SQL Database on cloudflare. Add a description in the floating button window that asks the user to Indicate their Interest (IOI) to participate and add a selector for Investor or Filmmaker. The unique id will serve as their placeholder in the project. May the theme very clean sleek and highly efficient.