File size: 4,925 Bytes
d8b6a55 e4224e2 d8b6a55 e4224e2 d8b6a55 e4224e2 |
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 100 101 102 103 104 105 106 107 108 109 |
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);
}
}); |