import { createClient } from '@supabase/supabase-js'; // Initialize Supabase const supabase = createClient( 'https://YOUR_SUPABASE_URL.supabase.co', 'YOUR_SUPABASE_ANON_KEY' ); // Function to submit user input async function submitQuestion() { const input = document.getElementById('questionInput').value; if (!input) return; // Prevent empty submission const { data, error } = await supabase.from('questions').insert([{ content: input }]); if (error) { console.error('Error submitting:', error); return; } document.getElementById('questionInput').value = ''; // Clear input loadResponses(); // Refresh responses } // Function to load floating responses async function loadResponses() { const { data, error } = await supabase.from('questions').select('*').order('created_at', { ascending: false }); if (error) { console.error('Error fetching responses:', error); return; } const container = document.getElementById('responseContainer'); container.innerHTML = ''; // Clear previous data.forEach(({ content }) => { const bubble = document.createElement('div'); bubble.className = 'floating-response'; bubble.innerText = content; container.appendChild(bubble); // Random positioning for floating effect bubble.style.position = 'absolute'; bubble.style.left = `${Math.random() * 80 + 10}%`; bubble.style.top = `${Math.random() * 80 + 10}%`; }); } // Load responses on page load window.onload = loadResponses;