Online Course Presentation Slide Creator

Online Course Presentation Slide Creator

Presentation Details

Live Slide Preview

${index + 1}

`; container.appendChild(slideDiv); }); } // --- Event Handlers --- tabContainer.addEventListener('click', (e) => { if (e.target.matches('.tab-button')) { currentTabIndex = tabs.indexOf(e.target.dataset.tab); switchTab(); } }); nextBtn.addEventListener('click', () => { if (currentTabIndex < tabs.length - 1) currentTabIndex++; switchTab(); }); prevBtn.addEventListener('click', () => { if (currentTabIndex > 0) currentTabIndex--; switchTab(); }); addSlideBtn.addEventListener('click', () => { presentationData.slides.push({ title: '', content: '' }); renderSlideEditor(); renderSlidePreview(); }); downloadPdfBtn.addEventListener('click', downloadPDF); // --- Navigation --- function switchTab() { document.querySelectorAll('.tab-button').forEach(btn => btn.classList.remove('active')); document.querySelectorAll('.tab-content').forEach(content => content.classList.remove('active')); const newTabName = tabs[currentTabIndex]; document.querySelector(`.tab-button[data-tab="${newTabName}"]`).classList.add('active'); document.getElementById(`${newTabName}Content`).classList.add('active'); updateNavButtons(); } function updateNavButtons() { prevBtn.style.visibility = currentTabIndex === 0 ? 'hidden' : 'visible'; nextBtn.style.visibility = currentTabIndex === tabs.length - 1 ? 'hidden' : 'visible'; } // --- AI Generation --- async function handleAIGeneration(e) { const btn = e.currentTarget; const index = btn.dataset.index; const slideTitle = presentationData.slides[index].title; const presentationTitle = presentationData.title; if (!slideTitle) { alert("Please enter a title for the slide before generating points."); return; } const originalContent = btn.innerHTML; btn.innerHTML = ''; btn.disabled = true; const prompt = `For a presentation titled "${presentationTitle}", generate 3 to 5 key talking points for a slide titled "${slideTitle}". Format the response as a bulleted list, with each point starting with '•'.`; try { const response = await callGemini(prompt); presentationData.slides[index].content = response; renderSlideEditor(); renderSlidePreview(); } catch (error) { console.error("AI Generation Error:", error); alert("Failed to generate content. Please try again."); } finally { btn.innerHTML = originalContent; btn.disabled = false; } } async function callGemini(prompt) { const apiKey = ""; // Handled by environment const apiUrl = `https://generativelanguage.googleapis.com/v1beta/models/gemini-2.5-flash-preview-05-20:generateContent?key=${apiKey}`; const payload = { contents: [{ role: "user", parts: [{ text: prompt }] }] }; const response = await fetch(apiUrl, { method: 'POST', headers: { 'Content-Type': 'application/json' }, body: JSON.stringify(payload) }); if (!response.ok) throw new Error(`API Error: ${response.status}`); const data = await response.json(); return data.candidates[0].content.parts[0].text; } // --- PDF Generation --- function downloadPDF() { const { jsPDF } = window.jspdf; const doc = new jsPDF({ orientation: 'landscape' }); const { title, presenter, slides } = presentationData; const pageWidth = doc.internal.pageSize.getWidth(); const pageHeight = doc.internal.pageSize.getHeight(); const margin = 15; // Title Slide doc.setFillColor(23, 37, 84); // bg-blue-900 doc.rect(0, 0, pageWidth, pageHeight, 'F'); doc.setTextColor(255, 255, 255); doc.setFont('helvetica', 'bold'); doc.setFontSize(36); doc.text(title, pageWidth / 2, pageHeight / 2 - 10, { align: 'center' }); doc.setFontSize(20); doc.setFont('helvetica', 'normal'); doc.text(presenter, pageWidth / 2, pageHeight / 2 + 10, { align: 'center' }); // Content Slides slides.forEach((slide, index) => { doc.addPage(); // Slide Header doc.setFillColor(243, 244, 246); // bg-gray-100 doc.rect(0, 0, pageWidth, 25, 'F'); doc.setTextColor(30, 64, 175); // text-blue-800 doc.setFont('helvetica', 'bold'); doc.setFontSize(18); doc.text(slide.title, margin, 17); // Slide Footer doc.setTextColor(156, 163, 175); // text-gray-400 doc.setFontSize(10); doc.text(title, margin, pageHeight - 10); doc.text(`${index + 1}`, pageWidth - margin, pageHeight - 10, { align: 'right' }); // Slide Content doc.setTextColor(55, 65, 81); // text-gray-700 doc.setFontSize(14); const contentLines = doc.splitTextToSize(slide.content, pageWidth - margin * 2); doc.text(contentLines, margin, 40); }); doc.save(`${title.replace(/\s/g, '_')}_Presentation.pdf`); } // --- Run on Load --- initialize(); });
Scroll to Top