Spaces:

dantheguy
/

trigger-free-flicks-database

Running

trigger-free-flicks-database / script.js

create functioning pages for the 'contribute' button or the 'browse' button

d8b6a55 verified 11 months ago

4.93 kB

document.addEventListener('DOMContentLoaded', function() {
    // Initialize form validation for contribute page
    const contributionForm = document.querySelector('form');
    if (contributionForm) {
        contributionForm.addEventListener('submit', function(e) {
            e.preventDefault();
            // In a real app, this would submit to a backend
            alert('Thank you for your contribution! Our team will review it shortly.');
            this.reset();
        });
    }

    // Search functionality
const searchBtn = document.getElementById('searchBtn');
    const searchInput = document.getElementById('searchInput');
    const resultsSection = document.getElementById('resultsSection');
    const resultsContainer = document.getElementById('resultsContainer');
    const popularSection = document.getElementById('popularSection');

    searchBtn.addEventListener('click', performSearch);
    searchInput.addEventListener('keypress', function(e) {
        if (e.key === 'Enter') {
            performSearch();
        }
    });

    function performSearch() {
        const query = searchInput.value.trim();
        if (query) {
            // In a real app, this would fetch from an API
            simulateSearch(query);
        }
    }

    function simulateSearch(query) {
        // Show loading state
        resultsContainer.innerHTML = '<div class="col-span-full py-8 text-center text-gray-400">Searching...</div>';
        resultsSection.classList.remove('hidden');
        popularSection.classList.add('hidden');

        // Simulate API delay
        setTimeout(() => {
            if (query.toLowerCase() === 'no results') {
                resultsContainer.innerHTML = `
                    <div class="col-span-full py-12 text-center">
                        <i data-feather="alert-circle" class="w-12 h-12 mx-auto text-gray-500 mb-4"></i>
                        <h3 class="text-xl font-medium text-gray-300">No movies found</h3>
                        <p class="text-gray-500 mt-2">Try a different search term</p>
                    </div>
                `;
            } else {
                // Mock results
                resultsContainer.innerHTML = '';
                
                const mockResults = [
                    {
                        title: 'Pulp Fiction',
                        status: 'warning',
                        description: 'Brief v*mit scene (non-graphic)',
                        image: 'http://static.photos/movie/640x360/5'
                    },
                    {
                        title: 'The Matrix',
                        status: 'safe',
                        description: 'No reported triggers',
                        image: 'http://static.photos/movie/640x360/6'
                    },
                    {
                        title: 'Forrest Gump',
                        status: 'caution',
                        description: 'Multiple v*mit references',
                        image: 'http://static.photos/movie/640x360/7'
                    }
                ];

                mockResults.forEach((movie, index) => {
                    const statusColor = movie.status === 'safe' ? 'green' : 
                                      movie.status === 'warning' ? 'red' : 'yellow';
                    const statusText = movie.status === 'safe' ? 'Safe' : 
                                     movie.status === 'warning' ? 'Warning' : 'Caution';

                    const card = document.createElement('div');
                    card.className = 'movie-card bg-gray-800 rounded-lg overflow-hidden shadow-lg';
                    card.style.animationDelay = `${index * 0.1}s`;
                    card.innerHTML = `
                        <div class="h-48 bg-gray-700 relative">
                            <img src="${movie.image}" alt="${movie.title}" class="w-full h-full object-cover">
                            <div class="absolute top-2 right-2 bg-black bg-opacity-70 rounded-full px-2 py-1 text-xs">
                                <span class="text-${statusColor}-400">${statusText}</span>
                            </div>
                        </div>
                        <div class="p-4">
                            <h3 class="font-bold text-lg">${movie.title}</h3>
                            <p class="text-gray-400 text-sm mt-1">${movie.description}</p>
                            <button class="mt-3 text-primary-500 text-sm font-medium hover:underline flex items-center gap-1">
                                <span>View Details</span>
                                <i data-feather="chevron-right" class="w-4 h-4"></i>
                            </button>
                        </div>
                    `;
                    resultsContainer.appendChild(card);
                });
            }
            
            feather.replace();
        }, 800);
    }
});


	document.addEventListener('DOMContentLoaded', function() {
	// Initialize form validation for contribute page
	const contributionForm = document.querySelector('form');
	if (contributionForm) {
	contributionForm.addEventListener('submit', function(e) {
	e.preventDefault();
	// In a real app, this would submit to a backend
	alert('Thank you for your contribution! Our team will review it shortly.');
	this.reset();
	});
	}

	// Search functionality
	const searchBtn = document.getElementById('searchBtn');
	const searchInput = document.getElementById('searchInput');
	const resultsSection = document.getElementById('resultsSection');
	const resultsContainer = document.getElementById('resultsContainer');
	const popularSection = document.getElementById('popularSection');

	searchBtn.addEventListener('click', performSearch);
	searchInput.addEventListener('keypress', function(e) {
	if (e.key === 'Enter') {
	performSearch();
	}
	});

	function performSearch() {
	const query = searchInput.value.trim();
	if (query) {
	// In a real app, this would fetch from an API
	simulateSearch(query);
	}
	}

	function simulateSearch(query) {
	// Show loading state
	resultsContainer.innerHTML = '<div class="col-span-full py-8 text-center text-gray-400">Searching...</div>';
	resultsSection.classList.remove('hidden');
	popularSection.classList.add('hidden');

	// Simulate API delay
	setTimeout(() => {
	if (query.toLowerCase() === 'no results') {
	resultsContainer.innerHTML = `
	<div class="col-span-full py-12 text-center">
	<i data-feather="alert-circle" class="w-12 h-12 mx-auto text-gray-500 mb-4"></i>
	<h3 class="text-xl font-medium text-gray-300">No movies found</h3>
	<p class="text-gray-500 mt-2">Try a different search term</p>
	</div>
	`;
	} else {
	// Mock results
	resultsContainer.innerHTML = '';

	const mockResults = [
	{
	title: 'Pulp Fiction',
	status: 'warning',
	description: 'Brief v*mit scene (non-graphic)',
	image: 'http://static.photos/movie/640x360/5'
	},
	{
	title: 'The Matrix',
	status: 'safe',
	description: 'No reported triggers',
	image: 'http://static.photos/movie/640x360/6'
	},
	{
	title: 'Forrest Gump',
	status: 'caution',
	description: 'Multiple v*mit references',
	image: 'http://static.photos/movie/640x360/7'
	}
	];

	mockResults.forEach((movie, index) => {
	const statusColor = movie.status === 'safe' ? 'green' :
	movie.status === 'warning' ? 'red' : 'yellow';
	const statusText = movie.status === 'safe' ? 'Safe' :
	movie.status === 'warning' ? 'Warning' : 'Caution';

	const card = document.createElement('div');
	card.className = 'movie-card bg-gray-800 rounded-lg overflow-hidden shadow-lg';
	card.style.animationDelay = `${index * 0.1}s`;
	card.innerHTML = `
	<div class="h-48 bg-gray-700 relative">
	<img src="${movie.image}" alt="${movie.title}" class="w-full h-full object-cover">
	<div class="absolute top-2 right-2 bg-black bg-opacity-70 rounded-full px-2 py-1 text-xs">
	<span class="text-${statusColor}-400">${statusText}</span>
	</div>
	</div>
	<div class="p-4">
	<h3 class="font-bold text-lg">${movie.title}</h3>
	<p class="text-gray-400 text-sm mt-1">${movie.description}</p>
	<button class="mt-3 text-primary-500 text-sm font-medium hover:underline flex items-center gap-1">
	<span>View Details</span>
	<i data-feather="chevron-right" class="w-4 h-4"></i>
	</button>
	</div>
	`;
	resultsContainer.appendChild(card);
	});
	}

	feather.replace();
	}, 800);
	}
	});