vikash8523/video-explainer-pro

1 2// Admin login functionality3if (document.getElementById('loginForm')) {4    document.getElementById('loginForm').addEventListener('submit', function(e) {5        e.preventDefault();6        7        const username = document.getElementById('username').value;8        const password = document.getElementById('password').value;9        const errorMessage = document.getElementById('errorMessage');10        11        // Hardcoded admin credentials12        if (username === 'admin' && password === 'admin123') {13            // Store login status in localStorage14            localStorage.setItem('isAdminLoggedIn', 'true');15            window.location.href = 'admin.html';16        } else {17            errorMessage.textContent = 'Invalid username or password';18            errorMessage.classList.remove('hidden');19        }20    });21}22 23// Check if user is logged in for admin pages24if (window.location.pathname.includes('admin.html')) {25    if (localStorage.getItem('isAdminLoggedIn') !== 'true') {26        window.location.href = 'login.html';27    }28    29    // Logout functionality30    const logoutLinks = document.querySelectorAll('a[href="login.html"]');31    logoutLinks.forEach(link => {32        link.addEventListener('click', function(e) {33            e.preventDefault();34            localStorage.removeItem('isAdminLoggedIn');35            window.location.href = 'login.html';36        });37    });38    39    // Video management functionality40    document.getElementById('videoForm').addEventListener('submit', function(e) {41        e.preventDefault();42        43        const videoUrl = document.getElementById('newVideoUrl').value;44        const videoTitle = document.getElementById('newVideoTitle').value;45        const videoDescription = document.getElementById('newVideoDescription').value;46        47        // Handle different video platforms48        let embedUrl = '';49        50        if (videoUrl.includes('youtube.com/shorts/') || videoUrl.includes('youtube.com/watch') || videoUrl.includes('youtu.be/')) {51            // YouTube Shorts or regular YouTube video52            const videoId = extractYouTubeId(videoUrl);53            if (videoId) {54                embedUrl = `https://www.youtube.com/embed/${videoId}?autoplay=1`;55            }56        } else if (videoUrl.includes('instagram.com/reel/')) {57            // Instagram Reel (Note: Instagram doesn't allow direct embedding in most cases)58            alert('Instagram Reels embedding is not supported directly. Please use YouTube videos.');59            return;60        } else if (videoUrl.includes('facebook.com/') && (videoUrl.includes('/videos/') || videoUrl.includes('/reel/'))) {61            // Facebook Video or Reel62            embedUrl = `https://www.facebook.com/plugins/video.php?href=${encodeURIComponent(videoUrl)}&show_text=0&autoplay=true`;63        }64        65        if (embedUrl) {66            // Update video player67            document.getElementById('videoPlayer').src = embedUrl;68            document.getElementById('videoTitle').textContent = videoTitle;69            document.getElementById('videoDescription').textContent = videoDescription;70            71            // Reset form72            this.reset();73            74            // Show success message75            showNotification('Video updated and playing successfully!', 'success');76        } else {77            showNotification('Invalid video URL or unsupported platform', 'error');78        }79    });80    81    // AI explanation generation82    document.getElementById('generateBtn').addEventListener('click', function() {83        const loadingIndicator = document.getElementById('loadingIndicator');84        const explanationContent = document.getElementById('explanationContent');85        86        // Show loading indicator87        loadingIndicator.classList.remove('hidden');88        explanationContent.innerHTML = '';89        90        // Simulate AI explanation generation in Hinglish91        setTimeout(() => {92            // In a real app, this would call an AI API for video analysis93            explanationContent.innerHTML = `94                <div class="bg-blue-50 border-l-4 border-blue-500 p-4 mb-4">95                    <p class="font-bold text-blue-700 mb-2">AI-Generated Hinglish Explanation:</p>96                </div>97                98                <p class="mb-4">Hello bachho! Aaj hum samajhenge ki yeh video kya seekha raha hai.</p>99                100                <div class="bg-green-50 border-l-4 border-green-500 p-4 mb-4">101                    <p class="font-bold text-green-700 mb-2">Step-by-Step Samjhana:</p>102                </div>103                <ul class="list-disc pl-6 mb-4 space-y-2">104                    <li>Pehle toh ye bataya gaya ki photosynthesis kya hota hai - ye process hai jisme plants sunlight ka use karke apna khana banaate hain.</li>105                    <li>Fir samjhaya gaya ki isme kya-kya chizon ki zarurat hoti hai - sunlight, water, aur carbon dioxide.</li>106                    <li>Uske baad dikhaya gaya ki kaise leaves me chlorophyll hota hai jo green color deta hai aur sunlight ko pakadta hai.</li>107                    <li>Last me bataya gaya ki is process se kya benefit hota hai - oxygen nikalti hai plants jo hum breathe karte hain.</li>108                </ul>109                110                <p class="mb-4">Is video me bahut accha tareeke se explain kiya gaya hai ki kaise plants apna khana banate hain. Aapko agar kuch samajh na aaye toh humse pooch sakte ho!</p>111                112                <div class="bg-purple-50 border-l-4 border-purple-500 p-4">113                    <p class="font-bold text-purple-700">Video Analysis:</p>114                    <p>Yeh explanation humne video ko analyze karke banayi hai jisme humne dekha ki kya chiz dikh rahi thi, kya sound aa raha tha, aur kaise sab kuch explain kiya gaya tha.</p>115                </div>116            `;117            118            // Hide loading indicator119            loadingIndicator.classList.add('hidden');120        }, 2000);121    });122    123    // Question answering functionality124    document.getElementById('askQuestionBtn').addEventListener('click', function() {125        const question = document.getElementById('questionInput').value;126        const answerElement = document.getElementById('questionAnswer');127        128        if (!question) {129            answerElement.innerHTML = '<p class="text-red-500">Please ask a question first!</p>';130            return;131        }132        133        answerElement.innerHTML = '<p class="text-gray-500">Thinking...</p>';134        135        // Simulate AI question answering in Hinglish136        setTimeout(() => {137            // In a real app, this would call an AI API138            let answer = '';139            140            if (question.toLowerCase().includes('photosynthesis')) {141                answer = 'Photosynthesis ek natural process hai jisme plants sunlight, water, aur carbon dioxide ka use karke apna food banaate hain. Is process me oxygen bhi nikalti hai jo hum log breathe karte hain. Ye leaves me hota hai jahan chlorophyll hota hai.';142            } else if (question.toLowerCase().includes('chlorophyll')) {143                answer = 'Chlorophyll ek green pigment hai jo leaves me paya jata hai. Isi ki wajah se leaves green dikhthi hain. Ye sunlight ko absorb karta hai jo photosynthesis ke liye bahut zaruri hai.';144            } else if (question.toLowerCase().includes('oxygen')) {145                answer = 'Oxygen photosynthesis ka ek important byproduct hai. Jab plants apna food banate hain, toh wo oxygen bhi nikalte hain jo hum log breathe karte hain. Isi liye plants bahut important hain humare environment ke liye.';146            } else {147                answer = 'Yeh ek bahut ache sawal hai! Video me jo content dikhaya gaya hai uske hisab se, main samjha sakta hoon ki aapko kis chiz me confusion hai. Kya aap thoda aur detail me batayenge ki aapko kis part me samasya ho rahi hai?';148            }149            150            answerElement.innerHTML = `<div class="bg-indigo-50 border-l-4 border-indigo-500 p-4">151                <p class="font-bold text-indigo-700 mb-2">AI Answer:</p>152                <p class="text-gray-700">${answer}</p>153            </div>`;154        }, 1500);155    });156    157    // Helper function to extract YouTube ID158    function extractYouTubeId(url) {159        const regExp = /^.*(youtu.be\/|v\/|u\/\w\/|embed\/|watch\?v=|&v=)([^#&?]*).*/;160        const match = url.match(regExp);161        return (match && match[2].length === 11) ? match[2] : null;162    }163    164    // Notification function165    function showNotification(message, type) {166        // Remove existing notifications167        const existingNotification = document.getElementById('custom-notification');168        if (existingNotification) {169            existingNotification.remove();170        }171        172        // Create notification element173        const notification = document.createElement('div');174        notification.id = 'custom-notification';175        notification.className = `fixed top-4 right-4 px-6 py-4 rounded-lg shadow-lg text-white font-medium z-50 transform transition duration-300 ${176            type === 'success' ? 'bg-green-500' : 'bg-red-500'177        }`;178        notification.textContent = message;179        180        // Add to body181        document.body.appendChild(notification);182        183        // Remove after 3 seconds184        setTimeout(() => {185            notification.style.opacity = '0';186            setTimeout(() => {187                if (notification.parentNode) {188                    notification.parentNode.removeChild(notification);189                }190            }, 300);191        }, 3000);192    }193}194 195// Add fade-in animation class196const style = document.createElement('style');197style.innerHTML = `198    @keyframes fadeInUp {199        from {200            opacity: 0;201            transform: translateY(20px);202        }203        to {204            opacity: 1;205            transform: translateY(0);206        }207    }208    209    .animate-fade-in-up {210        animation: fadeInUp 0.6s ease-out forwards;211    }212`;213document.head.appendChild(style);214