| | <!DOCTYPE html> |
| | <html lang="en"> |
| | <head> |
| | <meta charset="UTF-8"> |
| | <meta name="viewport" content="width=device-width, initial-scale=1.0"> |
| | <title>Slide Deck Editor</title> |
| | <script src="https://cdn.tailwindcss.com"></script> |
| | <script src="https://unpkg.com/lucide@latest"></script> |
| | <link href="https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700&display=swap" rel="stylesheet"> |
| | <style> |
| | * { |
| | font-family: 'Inter', sans-serif; |
| | } |
| | |
| | .slide-thumb { |
| | transition: all 0.2s ease; |
| | cursor: pointer; |
| | } |
| | |
| | .slide-thumb:hover { |
| | transform: translateY(-2px); |
| | box-shadow: 0 4px 12px rgba(0,0,0,0.1); |
| | } |
| | |
| | .slide-thumb.active { |
| | ring: 2px solid #6366f1; |
| | transform: scale(1.02); |
| | } |
| | |
| | .editor-input { |
| | transition: all 0.2s ease; |
| | } |
| | |
| | .editor-input:focus { |
| | transform: translateY(-1px); |
| | box-shadow: 0 4px 12px rgba(99, 102, 241, 0.1); |
| | } |
| | |
| | .preview-container { |
| | aspect-ratio: 16/9; |
| | transition: transform 0.3s ease; |
| | } |
| | |
| | .tool-btn { |
| | transition: all 0.2s ease; |
| | } |
| | |
| | .tool-btn:hover { |
| | transform: translateY(-1px); |
| | } |
| | |
| | .tool-btn.active { |
| | background: #e0e7ff; |
| | color: #4338ca; |
| | } |
| | |
| | |
| | ::-webkit-scrollbar { |
| | width: 6px; |
| | height: 6px; |
| | } |
| | |
| | ::-webkit-scrollbar-track { |
| | background: transparent; |
| | } |
| | |
| | ::-webkit-scrollbar-thumb { |
| | background: #cbd5e1; |
| | border-radius: 3px; |
| | } |
| | |
| | ::-webkit-scrollbar-thumb:hover { |
| | background: #94a3b8; |
| | } |
| | |
| | .gradient-text { |
| | background: linear-gradient(135deg, #667eea 0%, #764ba2 100%); |
| | -webkit-background-clip: text; |
| | -webkit-text-fill-color: transparent; |
| | background-clip: text; |
| | } |
| | </style> |
| | </head> |
| | <body class="bg-gray-50 h-screen w-screen overflow-hidden flex text-gray-900"> |
| |
|
| | |
| | <aside class="w-72 bg-white border-r border-gray-200 flex flex-col h-full shrink-0"> |
| | |
| | <div class="p-4 border-b border-gray-200 flex items-center justify-between bg-gray-50/50"> |
| | <div class="flex items-center gap-2"> |
| | <div class="w-8 h-8 rounded-lg bg-indigo-600 flex items-center justify-center text-white"> |
| | <i data-lucide="layers" class="w-4 h-4"></i> |
| | </div> |
| | <span class="font-semibold text-gray-900">Deck Editor</span> |
| | </div> |
| | <button onclick="editor.addSlide()" class="w-8 h-8 rounded-lg bg-indigo-50 text-indigo-600 flex items-center justify-center hover:bg-indigo-100 transition-colors" title="Add Slide"> |
| | <i data-lucide="plus" class="w-4 h-4"></i> |
| | </button> |
| | </div> |
| |
|
| | |
| | <div id="slides-list" class="flex-1 overflow-y-auto p-4 space-y-3"> |
| | |
| | </div> |
| |
|
| | |
| | <div class="p-4 border-t border-gray-200 space-y-2 bg-gray-50/50"> |
| | <button onclick="editor.preview()" class="w-full py-2.5 px-4 bg-indigo-600 text-white rounded-lg font-medium hover:bg-indigo-700 transition-colors flex items-center justify-center gap-2"> |
| | <i data-lucide="play" class="w-4 h-4"></i> |
| | Preview Deck |
| | </button> |
| | <div class="flex gap-2"> |
| | <button onclick="editor.exportJSON()" class="flex-1 py-2 px-3 border border-gray-300 rounded-lg text-sm font-medium hover:bg-gray-50 transition-colors flex items-center justify-center gap-1"> |
| | <i data-lucide="download" class="w-4 h-4"></i> |
| | Export |
| | </button> |
| | <label class="flex-1 py-2 px-3 border border-gray-300 rounded-lg text-sm font-medium hover:bg-gray-50 transition-colors flex items-center justify-center gap-1 cursor-pointer"> |
| | <i data-lucide="upload" class="w-4 h-4"></i> |
| | Import |
| | <input type="file" id="import-file" accept=".json" class="hidden" onchange="editor.importJSON(this)"> |
| | </label> |
| | </div> |
| | </div> |
| | </aside> |
| |
|
| | |
| | <main class="flex-1 flex flex-col h-full overflow-hidden"> |
| | |
| | <div class="h-16 bg-white border-b border-gray-200 flex items-center justify-between px-6 shrink-0"> |
| | <div class="flex items-center gap-4"> |
| | <div class="relative"> |
| | <button onclick="editor.toggleLayoutMenu()" id="layout-dropdown-btn" class="tool-btn px-4 py-1.5 rounded-lg text-sm font-medium text-gray-700 flex items-center gap-2 bg-white border border-gray-300 shadow-sm hover:bg-gray-50"> |
| | <i data-lucide="layout" class="w-4 h-4"></i> |
| | <span id="current-layout-label">Title</span> |
| | <i data-lucide="chevron-down" class="w-4 h-4 ml-1"></i> |
| | </button> |
| | <div id="layout-menu" class="hidden absolute top-full left-0 mt-2 w-56 bg-white rounded-xl shadow-xl border border-gray-200 py-2 z-50"> |
| | <div class="px-3 py-1.5 text-xs font-semibold text-gray-500 uppercase tracking-wider">Content</div> |
| | <button onclick="editor.setLayout('title')" class="w-full px-4 py-2 text-sm text-gray-700 hover:bg-indigo-50 hover:text-indigo-600 flex items-center gap-3 transition-colors" data-layout="title"> |
| | <i data-lucide="type" class="w-4 h-4"></i> |
| | Title |
| | </button> |
| | <button onclick="editor.setLayout('split')" class="w-full px-4 py-2 text-sm text-gray-700 hover:bg-indigo-50 hover:text-indigo-600 flex items-center gap-3 transition-colors" data-layout="split"> |
| | <i data-lucide="columns" class="w-4 h-4"></i> |
| | Split |
| | </button> |
| | <button onclick="editor.setLayout('image')" class="w-full px-4 py-2 text-sm text-gray-700 hover:bg-indigo-50 hover:text-indigo-600 flex items-center gap-3 transition-colors" data-layout="image"> |
| | <i data-lucide="image" class="w-4 h-4"></i> |
| | Image |
| | </button> |
| | <div class="border-t border-gray-100 my-1"> |
| | <div class="px-3 py-1.5 text-xs font-semibold text-gray-500 uppercase tracking-wider mt-1">Grid</div> |
| | </div> |
| | <button onclick="editor.setLayout('grid')" class="w-full px-4 py-2 text-sm text-gray-700 hover:bg-indigo-50 hover:text-indigo-600 flex items-center gap-3 transition-colors" data-layout="grid"> |
| | <i data-lucide="layout-grid" class="w-4 h-4"></i> |
| | Grid Cards |
| | </button> |
| | <div class="border-t border-gray-100 my-1"> |
| | <div class="px-3 py-1.5 text-xs font-semibold text-gray-500 uppercase tracking-wider mt-1">Compare</div> |
| | </div> |
| | <button onclick="editor.setLayout('comparison')" class="w-full px-4 py-2 text-sm text-gray-700 hover:bg-indigo-50 hover:text-indigo-600 flex items-center gap-3 transition-colors" data-layout="comparison"> |
| | <i data-lucide="table" class="w-4 h-4"></i> |
| | 2-Column Table |
| | </button> |
| | <button onclick="editor.setLayout('compare3')" class="w-full px-4 py-2 text-sm text-gray-700 hover:bg-indigo-50 hover:text-indigo-600 flex items-center gap-3 transition-colors" data-layout="compare3"> |
| | <i data-lucide="columns-3" class="w-4 h-4"></i> |
| | 3-Column Table |
| | </button> |
| | <div class="border-t border-gray-100 my-1"> |
| | <div class="px-3 py-1.5 text-xs font-semibold text-gray-500 uppercase tracking-wider mt-1">Advanced</div> |
| | </div> |
| | <button onclick="editor.setLayout('custom-html')" class="w-full px-4 py-2 text-sm text-gray-700 hover:bg-indigo-50 hover:text-indigo-600 flex items-center gap-3 transition-colors" data-layout="custom-html"> |
| | <i data-lucide="code-2" class="w-4 h-4"></i> |
| | Custom HTML |
| | </button> |
| | </div> |
| | </div> |
| | |
| | |
| | <div class="flex items-center gap-1 bg-indigo-50 rounded-lg p-1 ml-4"> |
| | <button onclick="editor.setViewMode('visual')" id="view-visual" class="view-btn active px-3 py-1.5 rounded-md text-sm font-medium text-indigo-700 flex items-center gap-1"> |
| | <i data-lucide="eye" class="w-4 h-4"></i> |
| | Visual |
| | </button> |
| | <button onclick="editor.setViewMode('json')" id="view-json" class="view-btn px-3 py-1.5 rounded-md text-sm font-medium text-gray-600 flex items-center gap-1"> |
| | <i data-lucide="code" class="w-4 h-4"></i> |
| | JSON |
| | </button> |
| | </div> |
| | </div> |
| |
|
| | <div class="flex items-center gap-2"> |
| | <button onclick="editor.deleteSlide()" class="w-9 h-9 rounded-lg text-red-600 hover:bg-red-50 transition-colors flex items-center justify-center" title="Delete Slide"> |
| | <i data-lucide="trash-2" class="w-4 h-4"></i> |
| | </button> |
| | <button onclick="editor.duplicateSlide()" class="w-9 h-9 rounded-lg text-gray-600 hover:bg-gray-100 transition-colors flex items-center justify-center" title="Duplicate Slide"> |
| | <i data-lucide="copy" class="w-4 h-4"></i> |
| | </button> |
| | <button onclick="editor.moveSlide(-1)" class="w-9 h-9 rounded-lg text-gray-600 hover:bg-gray-100 transition-colors flex items-center justify-center" title="Move Up"> |
| | <i data-lucide="arrow-up" class="w-4 h-4"></i> |
| | </button> |
| | <button onclick="editor.moveSlide(1)" class="w-9 h-9 rounded-lg text-gray-600 hover:bg-gray-100 transition-colors flex items-center justify-center" title="Move Down"> |
| | <i data-lucide="arrow-down" class="w-4 h-4"></i> |
| | </button> |
| | </div> |
| | </div> |
| |
|
| | |
| | <div class="flex-1 overflow-y-auto p-8"> |
| | <div class="max-w-4xl mx-auto space-y-6"> |
| | |
| | |
| | <div class="bg-white rounded-xl shadow-sm border border-gray-200 overflow-hidden"> |
| | <div class="bg-gray-100 px-4 py-2 border-b border-gray-200 flex items-center justify-between"> |
| | <span class="text-xs font-medium text-gray-500 uppercase tracking-wider">Preview</span> |
| | <span class="text-xs text-gray-400" id="resolution-display">1920 × 1080</span> |
| | </div> |
| | <div class="p-6 bg-gray-50 flex items-center justify-center"> |
| | <div id="slide-preview" class="preview-container w-full max-w-2xl bg-white rounded-lg shadow-lg overflow-hidden relative"> |
| | |
| | </div> |
| | </div> |
| | </div> |
| |
|
| | |
| | <div id="edit-form" class="bg-white rounded-xl shadow-sm border border-gray-200 p-6 space-y-6"> |
| | |
| | </div> |
| |
|
| | </div> |
| | </div> |
| | </main> |
| |
|
| | |
| | <div id="preview-modal" class="fixed inset-0 bg-black/90 z-50 hidden items-center justify-center"> |
| | <div class="w-full h-full max-w-6xl max-h-screen p-4 flex flex-col"> |
| | <div class="flex items-center justify-between mb-4"> |
| | <h3 class="text-white font-semibold">Presentation Preview</h3> |
| | <button onclick="editor.closePreview()" class="text-white/70 hover:text-white transition-colors"> |
| | <i data-lucide="x" class="w-6 h-6"></i> |
| | </button> |
| | </div> |
| | <div class="flex-1 flex items-center justify-center"> |
| | <div id="preview-container" class="w-full aspect-video bg-white rounded-lg overflow-hidden shadow-2xl"> |
| | |
| | </div> |
| | </div> |
| | <div class="mt-4 flex items-center justify-center gap-4"> |
| | <button onclick="editor.previewPrev()" class="px-4 py-2 bg-white/10 text-white rounded-lg hover:bg-white/20 transition-colors"> |
| | <i data-lucide="chevron-left" class="w-5 h-5"></i> |
| | </button> |
| | <span id="preview-counter" class="text-white font-medium">1 / 1</span> |
| | <button onclick="editor.previewNext()" class="px-4 py-2 bg-white/10 text-white rounded-lg hover:bg-white/20 transition-colors"> |
| | <i data-lucide="chevron-right" class="w-5 h-5"></i> |
| | </button> |
| | </div> |
| | </div> |
| | </div> |
| |
|
| | <script> |
| | // Initialize Lucide icons |
| | lucide.createIcons(); |
| | |
| | class SlideEditor { |
| | constructor() { |
| | this.validationPaused = false; |
| | this.pendingJSON = null; |
| | this.slides = [ |
| | { |
| | id: 1, |
| | layout: 'title', |
| | title: 'Digital Innovation', |
| | subtitle: 'Transforming ideas into reality through modern design and cutting-edge technology', |
| | theme: 'gradient', |
| | badge: 'Presentation Deck', |
| | metadata: ['2024', '5 min read'] |
| | }, |
| | { |
| | id: 2, |
| | layout: 'split', |
| | title: 'Strategic Vision', |
| | content: 'Our approach combines data-driven insights with creative excellence. We believe in building sustainable solutions that stand the test of time.', |
| | points: [ |
| | 'User-centered design methodology', |
| | 'Agile development processes', |
| | 'Continuous integration & delivery' |
| | ], |
| | image: 'office' |
| | }, |
| | { |
| | id: 3, |
| | layout: 'grid', |
| | title: 'Core Features', |
| | subtitle: 'Everything you need to succeed', |
| | items: [ |
| | { icon: 'zap', title: 'Lightning Fast', desc: 'Optimized performance', color: 'blue' }, |
| | { icon: 'shield', title: 'Secure by Design', desc: 'Enterprise-grade security', color: 'purple' }, |
| | { icon: 'heart', title: 'User Friendly', desc: 'Intuitive interfaces', color: 'pink' } |
| | ] |
| | } |
| | ]; |
| | this.currentSlide = 0; |
| | this.previewIndex = 0; |
| | this.viewMode = 'visual'; |
| | this.jsonError = null; |
| | |
| | this.init(); |
| | } |
| | |
| | init() { |
| | this.renderSlidesList(); |
| | this.renderEditor(); |
| | this.updatePreview(); |
| | |
| | // Close layout dropdown when clicking outside |
| | document.addEventListener('click', (e) => { |
| | const menu = document.getElementById('layout-menu'); |
| | const btn = document.getElementById('layout-dropdown-btn'); |
| | if (menu && btn && !menu.contains(e.target) && !btn.contains(e.target)) { |
| | menu.classList.add('hidden'); |
| | } |
| | }); |
| | } |
| | |
| | toggleLayoutMenu() { |
| | document.getElementById('layout-menu').classList.toggle('hidden'); |
| | } |
| | |
| | generateId() { |
| | return Date.now(); |
| | } |
| | |
| | addSlide() { |
| | const newSlide = { |
| | id: this.generateId(), |
| | layout: 'title', |
| | title: 'New Slide', |
| | subtitle: 'Add your subtitle here', |
| | theme: 'default', |
| | badge: '', |
| | metadata: [] |
| | }; |
| | this.slides.push(newSlide); |
| | this.currentSlide = this.slides.length - 1; |
| | this.renderSlidesList(); |
| | this.renderEditor(); |
| | this.updatePreview(); |
| | } |
| | |
| | duplicateSlide() { |
| | const slide = this.slides[this.currentSlide]; |
| | const newSlide = { ...slide, id: this.generateId() }; |
| | this.slides.splice(this.currentSlide + 1, 0, newSlide); |
| | this.currentSlide++; |
| | this.renderSlidesList(); |
| | this.renderEditor(); |
| | this.updatePreview(); |
| | } |
| | |
| | deleteSlide() { |
| | if (this.slides.length <= 1) { |
| | alert('You must have at least one slide'); |
| | return; |
| | } |
| | if (confirm('Delete this slide?')) { |
| | this.slides.splice(this.currentSlide, 1); |
| | this.currentSlide = Math.max(0, this.currentSlide - 1); |
| | this.renderSlidesList(); |
| | this.renderEditor(); |
| | this.updatePreview(); |
| | } |
| | } |
| | |
| | moveSlide(direction) { |
| | const newIndex = this.currentSlide + direction; |
| | if (newIndex >= 0 && newIndex < this.slides.length) { |
| | [this.slides[this.currentSlide], this.slides[newIndex]] = |
| | [this.slides[newIndex], this.slides[this.currentSlide]]; |
| | this.currentSlide = newIndex; |
| | this.renderSlidesList(); |
| | } |
| | } |
| | |
| | selectSlide(index) { |
| | this.currentSlide = index; |
| | this.renderSlidesList(); |
| | this.renderEditor(); |
| | this.updatePreview(); |
| | } |
| | |
| | setLayout(layout) { |
| | this.slides[this.currentSlide].layout = layout; |
| | |
| | // Add default data for new layouts |
| | if (layout === 'grid' && !this.slides[this.currentSlide].items) { |
| | this.slides[this.currentSlide].items = [ |
| | { icon: 'zap', title: 'Feature 1', desc: 'Description here', color: 'blue' } |
| | ]; |
| | } |
| | if (layout === 'image' && !this.slides[this.currentSlide].imageTitle) { |
| | this.slides[this.currentSlide].imageTitle = 'Image Slide'; |
| | this.slides[this.currentSlide].image = 'technology'; |
| | } |
| | if (layout === 'comparison' && !this.slides[this.currentSlide].columns) { |
| | this.slides[this.currentSlide].columns = ['Feature', 'Our Solution', 'Competitors']; |
| | this.slides[this.currentSlide].rows = [ |
| | { feature: 'Performance', col1: '✓ Superior', col2: '✗ Limited' }, |
| | { feature: 'Pricing', col1: '✓ Affordable', col2: '✗ Expensive' }, |
| | { feature: 'Support', col1: '✓ 24/7', col2: '✗ Business hours' } |
| | ]; |
| | } |
| | if (layout === 'compare3' && !this.slides[this.currentSlide].headers) { |
| | this.slides[this.currentSlide].headers = ['Option A', 'Option B', 'Option C']; |
| | this.slides[this.currentSlide].rows = [ |
| | { feature: 'Speed', col1: 'Fast', col2: 'Medium', col3: 'Slow' }, |
| | { feature: 'Price', col1: '$99/mo', col2: '$149/mo', col3: '$199/mo' }, |
| | { feature: 'Support', col1: '24/7', col2: 'Business', col3: 'Email' } |
| | ]; |
| | } |
| | if (layout === 'custom-html' && !this.slides[this.currentSlide].htmlContent) { |
| | this.slides[this.currentSlide].htmlContent = '<div class="flex items-center justify-center h-full bg-gradient-to-br from-indigo-50 to-purple-50">\n <div class="text-center p-8">\n <h2 class="text-4xl font-bold text-indigo-600 mb-4">Custom HTML Slide</h2>\n <p class="text-lg text-gray-600">Edit this content in the HTML editor below</p>\n </div>\n</div>'; |
| | } |
| | |
| | this.renderEditor(); |
| | this.updatePreview(); |
| | |
| | // Update layout button label |
| | const layoutLabels = { |
| | 'title': 'Title', |
| | 'split': 'Split', |
| | 'image': 'Image', |
| | 'grid': 'Grid Cards', |
| | 'comparison': '2-Column Table', |
| | 'compare3': '3-Column Table', |
| | 'custom-html': 'Custom HTML' |
| | }; |
| | document.getElementById('current-layout-label').textContent = layoutLabels[layout] || layout; |
| | |
| | // Close menu if open |
| | document.getElementById('layout-menu').classList.add('hidden'); |
| | } |
| | |
| | updateField(field, value) { |
| | this.slides[this.currentSlide][field] = value; |
| | this.updatePreview(); |
| | } |
| | |
| | updatePoint(index, value) { |
| | if (!this.slides[this.currentSlide].points) { |
| | this.slides[this.currentSlide].points = []; |
| | } |
| | this.slides[this.currentSlide].points[index] = value; |
| | this.updatePreview(); |
| | } |
| | |
| | addPoint() { |
| | if (!this.slides[this.currentSlide].points) { |
| | this.slides[this.currentSlide].points = []; |
| | } |
| | this.slides[this.currentSlide].points.push('New point'); |
| | this.renderEditor(); |
| | this.updatePreview(); |
| | } |
| | |
| | removePoint(index) { |
| | this.slides[this.currentSlide].points.splice(index, 1); |
| | this.renderEditor(); |
| | this.updatePreview(); |
| | } |
| | |
| | renderSlidesList() { |
| | const container = document.getElementById('slides-list'); |
| | container.innerHTML = this.slides.map((slide, index) => ` |
| | <div onclick="editor.selectSlide(${index})" |
| | class="slide-thumb ${index === this.currentSlide ? 'active' : ''} bg-white rounded-lg border border-gray-200 p-3 ${index === this.currentSlide ? 'ring-2 ring-indigo-600' : ''}"> |
| | <div class="flex items-center gap-3 mb-2"> |
| | <span class="text-xs font-medium text-gray-400 w-5">${index + 1}</span> |
| | <span class="font-medium text-sm text-gray-900 truncate flex-1">${slide.title || 'Untitled'}</span> |
| | </div> |
| | <div class="h-16 bg-gray-100 rounded border border-gray-200 overflow-hidden flex items-center justify-center text-xs text-gray-400"> |
| | ${slide.layout} |
| | </div> |
| | </div> |
| | `).join(''); |
| | } |
| | |
| | setViewMode(mode) { |
| | this.viewMode = mode; |
| | document.querySelectorAll('.view-btn').forEach(btn => { |
| | btn.classList.remove('active', 'bg-white', 'shadow-sm', 'text-indigo-700'); |
| | btn.classList.add('text-gray-600'); |
| | }); |
| | document.getElementById(`view-${mode}`).classList.add('active', 'bg-white', 'shadow-sm', 'text-indigo-700'); |
| | document.getElementById(`view-${mode}`).classList.remove('text-gray-600'); |
| | this.renderEditor(); |
| | } |
| | |
| | renderEditor() { |
| | const slide = this.slides[this.currentSlide]; |
| | const form = document.getElementById('edit-form'); |
| | |
| | // JSON View Mode |
| | if (this.viewMode === 'json') { |
| | form.innerHTML = ` |
| | <div class="space-y-4"> |
| | <div class="flex items-center justify-between"> |
| | <div> |
| | <h3 class="text-sm font-semibold text-gray-900">JSON Editor</h3> |
| | <p class="text-xs text-gray-500 mt-1">Edit the raw JSON data for this slide</p> |
| | </div> |
| | <div class="flex items-center gap-2"> |
| | <button onclick="editor.toggleValidationPause()" class="px-3 py-1.5 text-xs font-medium ${this.validationPaused ? 'text-orange-600 bg-orange-50 hover:bg-orange-100' : 'text-gray-600 bg-gray-100 hover:bg-gray-200'} rounded-lg transition-colors flex items-center gap-1" title="${this.validationPaused ? 'Resume real-time validation' : 'Pause real-time validation'}"> |
| | <i data-lucide="${this.validationPaused ? 'play' : 'pause'}" class="w-3 h-3"></i> |
| | ${this.validationPaused ? 'Resume' : 'Pause'} |
| | </button> |
| | <button onclick="editor.formatJSON()" class="px-3 py-1.5 text-xs font-medium text-indigo-600 bg-indigo-50 rounded-lg hover:bg-indigo-100 transition-colors flex items-center gap-1"> |
| | <i data-lucide="sparkles" class="w-3 h-3"></i> |
| | Format |
| | </button> |
| | </div> |
| | </div> |
| | <div class="relative"> |
| | <textarea id="json-editor" |
| | oninput="editor.validateJSON(this.value)" |
| | class="w-full h-96 px-4 py-3 font-mono text-xs leading-relaxed border ${this.jsonError ? 'border-red-300 focus:ring-red-500 focus:border-red-500' : 'border-gray-300 focus:ring-indigo-500 focus:border-indigo-500'} rounded-lg outline-none resize-none" |
| | spellcheck="false">${JSON.stringify(slide, null, 2)}</textarea> |
| | ${this.jsonError ? `<div class="absolute bottom-3 left-3 right-3 px-3 py-2 bg-red-50 border border-red-200 rounded-lg text-xs text-red-600 flex items-center gap-2"><i data-lucide="alert-circle" class="w-4 h-4"></i>${this.jsonError}</div>` : ''} |
| | </div> |
| | <button onclick="editor.applyJSON()" class="w-full py-3 px-4 bg-indigo-600 text-white rounded-lg font-medium hover:bg-indigo-700 transition-colors flex items-center justify-center gap-2"> |
| | <i data-lucide="save" class="w-4 h-4"></i> |
| | Apply Changes |
| | </button> |
| | </div> |
| | `; |
| | lucide.createIcons(); |
| | return; |
| | } |
| | |
| | // Visual View Mode |
| | let html = ` |
| | <div class="grid grid-cols-2 gap-4"> |
| | <div class="col-span-2"> |
| | <label class="block text-sm font-medium text-gray-700 mb-1">Slide Title</label> |
| | <input type="text" value="${slide.title || ''}" |
| | oninput="editor.updateField('title', this.value)" |
| | class="editor-input w-full px-4 py-2 border border-gray-300 rounded-lg focus:ring-2 focus:ring-indigo-500 focus:border-indigo-500 outline-none"> |
| | </div> |
| | `; |
| | |
| | if (slide.layout === 'title') { |
| | html += ` |
| | <div class="col-span-2"> |
| | <label class="block text-sm font-medium text-gray-700 mb-1">Subtitle</label> |
| | <textarea oninput="editor.updateField('subtitle', this.value)" rows="3" |
| | class="editor-input w-full px-4 py-2 border border-gray-300 rounded-lg focus:ring-2 focus:ring-indigo-500 focus:border-indigo-500 outline-none">${slide.subtitle || ''}</textarea> |
| | </div> |
| | <div> |
| | <label class="block text-sm font-medium text-gray-700 mb-1">Badge</label> |
| | <input type="text" value="${slide.badge || ''}" |
| | oninput="editor.updateField('badge', this.value)" |
| | class="editor-input w-full px-4 py-2 border border-gray-300 rounded-lg focus:ring-2 focus:ring-indigo-500 focus:border-indigo-500 outline-none"> |
| | </div> |
| | <div> |
| | <label class="block text-sm font-medium text-gray-700 mb-1">Theme</label> |
| | <select onchange="editor.updateField('theme', this.value)" |
| | class="editor-input w-full px-4 py-2 border border-gray-300 rounded-lg focus:ring-2 focus:ring-indigo-500 focus:border-indigo-500 outline-none"> |
| | <option value="default" ${slide.theme === 'default' ? 'selected' : ''}>Default</option> |
| | <option value="gradient" ${slide.theme === 'gradient' ? 'selected' : ''}>Gradient</option> |
| | <option value="dark" ${slide.theme === 'dark' ? 'selected' : ''}>Dark</option> |
| | </select> |
| | </div> |
| | `; |
| | } else if (slide.layout === 'split') { |
| | html += ` |
| | <div class="col-span-2"> |
| | <label class="block text-sm font-medium text-gray-700 mb-1">Content</label> |
| | <textarea oninput="editor.updateField('content', this.value)" rows="4" |
| | class="editor-input w-full px-4 py-2 border border-gray-300 rounded-lg focus:ring-2 focus:ring-indigo-500 focus:border-indigo-500 outline-none">${slide.content || ''}</textarea> |
| | </div> |
| | <div class="col-span-2"> |
| | <div class="flex items-center justify-between mb-2"> |
| | <label class="block text-sm font-medium text-gray-700">Bullet Points</label> |
| | <button onclick="editor.addPoint()" class="text-sm text-indigo-600 hover:text-indigo-700 font-medium">+ Add Point</button> |
| | </div> |
| | <div class="space-y-2"> |
| | ${(slide.points || []).map((point, i) => ` |
| | <div class="flex items-center gap-2"> |
| | <i data-lucide="check-circle-2" class="w-4 h-4 text-indigo-600 shrink-0"></i> |
| | <input type="text" value="${point}" |
| | oninput="editor.updatePoint(${i}, this.value)" |
| | class="editor-input flex-1 px-3 py-2 border border-gray-300 rounded-lg focus:ring-2 focus:ring-indigo-500 focus:border-indigo-500 outline-none text-sm"> |
| | <button onclick="editor.removePoint(${i})" class="text-red-500 hover:text-red-700"> |
| | <i data-lucide="x" class="w-4 h-4"></i> |
| | </button> |
| | </div> |
| | `).join('')} |
| | </div> |
| | </div> |
| | <div class="col-span-2"> |
| | <label class="block text-sm font-medium text-gray-700 mb-1">Image Category</label> |
| | <select onchange="editor.updateField('image', this.value)" |
| | class="editor-input w-full px-4 py-2 border border-gray-300 rounded-lg focus:ring-2 focus:ring-indigo-500 focus:border-indigo-500 outline-none"> |
| | <option value="office" ${slide.image === 'office' ? 'selected' : ''}>Office</option> |
| | <option value="technology" ${slide.image === 'technology' ? 'selected' : ''}>Technology</option> |
| | <option value="people" ${slide.image === 'people' ? 'selected' : ''}>People</option> |
| | <option value="nature" ${slide.image === 'nature' ? 'selected' : ''}>Nature</option> |
| | </select> |
| | </div> |
| | `; |
| | } else if (slide.layout === 'image') { |
| | html += ` |
| | <div class="col-span-2"> |
| | <label class="block text-sm font-medium text-gray-700 mb-1">Image Title</label> |
| | <input type="text" value="${slide.imageTitle || ''}" |
| | oninput="editor.updateField('imageTitle', this.value)" |
| | class="editor-input w-full px-4 py-2 border border-gray-300 rounded-lg focus:ring-2 focus:ring-indigo-500 focus:border-indigo-500 outline-none"> |
| | </div> |
| | <div class="col-span-2"> |
| | <label class="block text-sm font-medium text-gray-700 mb-1">Image Description</label> |
| | <textarea oninput="editor.updateField('imageDesc', this.value)" rows="3" |
| | class="editor-input w-full px-4 py-2 border border-gray-300 rounded-lg focus:ring-2 focus:ring-indigo-500 focus:border-indigo-500 outline-none">${slide.imageDesc || ''}</textarea> |
| | </div> |
| | <div class="col-span-2"> |
| | <label class="block text-sm font-medium text-gray-700 mb-1">Image Category</label> |
| | <select onchange="editor.updateField('image', this.value)" |
| | class="editor-input w-full px-4 py-2 border border-gray-300 rounded-lg focus:ring-2 focus:ring-indigo-500 focus:border-indigo-500 outline-none"> |
| | <option value="technology" ${slide.image === 'technology' ? 'selected' : ''}>Technology</option> |
| | <option value="office" ${slide.image === 'office' ? 'selected' : ''}>Office</option> |
| | <option value="cityscape" ${slide.image === 'cityscape' ? 'selected' : ''}>Cityscape</option> |
| | <option value="nature" ${slide.image === 'nature' ? 'selected' : ''}>Nature</option> |
| | </select> |
| | </div> |
| | `; |
| | } else if (slide.layout === 'grid') { |
| | html += ` |
| | <div> |
| | <label class="block text-sm font-medium text-gray-700 mb-1">Subtitle</label> |
| | <input type="text" value="${slide.subtitle || ''}" |
| | oninput="editor.updateField('subtitle', this.value)" |
| | class="editor-input w-full px-4 py-2 border border-gray-300 rounded-lg focus:ring-2 focus:ring-indigo-500 focus:border-indigo-500 outline-none"> |
| | </div> |
| | <div class="col-span-2"> |
| | <label class="block text-sm font-medium text-gray-700 mb-2">Grid Items (first 3 shown)</label> |
| | <div class="grid grid-cols-3 gap-4"> |
| | ${(slide.items || []).slice(0, 3).map((item, i) => ` |
| | <div class="space-y-2 p-3 bg-gray-50 rounded-lg border border-gray-200"> |
| | <input type="text" value="${item.title}" placeholder="Title" |
| | oninput="editor.updateItem(${i}, 'title', this.value)" |
| | class="editor-input w-full px-2 py-1 text-sm border border-gray-300 rounded focus:ring-2 focus:ring-indigo-500 outline-none"> |
| | <input type="text" value="${item.desc}" placeholder="Description" |
| | oninput="editor.updateItem(${i}, 'desc', this.value)" |
| | class="editor-input w-full px-2 py-1 text-sm border border-gray-300 rounded focus:ring-2 focus:ring-indigo-500 outline-none"> |
| | </div> |
| | `).join('')} |
| | </div> |
| | </div> |
| | `; |
| | } else if (slide.layout === 'comparison') { |
| | html += ` |
| | <div class="col-span-2"> |
| | <label class="block text-sm font-medium text-gray-700 mb-1">Subtitle</label> |
| | <input type="text" value="${slide.subtitle || ''}" |
| | oninput="editor.updateField('subtitle', this.value)" |
| | class="editor-input w-full px-4 py-2 border border-gray-300 rounded-lg focus:ring-2 focus:ring-indigo-500 focus:border-indigo-500 outline-none"> |
| | </div> |
| | <div class="col-span-2"> |
| | <label class="block text-sm font-medium text-gray-700 mb-2">Column Headers</label> |
| | <div class="grid grid-cols-3 gap-3"> |
| | ${(slide.columns || ['Feature', 'Our Solution', 'Competitors']).map((col, i) => ` |
| | <input type="text" value="${col}" |
| | oninput="editor.updateColumn(${i}, this.value)" |
| | class="editor-input w-full px-3 py-2 text-sm border border-gray-300 rounded-lg focus:ring-2 focus:ring-indigo-500 outline-none"> |
| | `).join('')} |
| | </div> |
| | </div> |
| | <div class="col-span-2"> |
| | <div class="flex items-center justify-between mb-2"> |
| | <label class="block text-sm font-medium text-gray-700">Comparison Rows</label> |
| | <button onclick="editor.addComparisonRow()" class="text-sm text-indigo-600 hover:text-indigo-700 font-medium">+ Add Row</button> |
| | </div> |
| | <div class="space-y-2"> |
| | ${(slide.rows || []).map((row, i) => ` |
| | <div class="grid grid-cols-3 gap-3 p-3 bg-gray-50 rounded-lg border border-gray-200"> |
| | <input type="text" value="${row.feature}" placeholder="Feature name" |
| | oninput="editor.updateComparisonRow(${i}, 'feature', this.value)" |
| | class="editor-input w-full px-3 py-2 text-sm border border-gray-300 rounded focus:ring-2 focus:ring-indigo-500 outline-none"> |
| | <input type="text" value="${row.col1}" placeholder="Option 1" |
| | oninput="editor.updateComparisonRow(${i}, 'col1', this.value)" |
| | class="editor-input w-full px-3 py-2 text-sm border border-gray-300 rounded focus:ring-2 focus:ring-indigo-500 outline-none"> |
| | <div class="flex items-center gap-2"> |
| | <input type="text" value="${row.col2}" placeholder="Option 2" |
| | oninput="editor.updateComparisonRow(${i}, 'col2', this.value)" |
| | class="editor-input flex-1 px-3 py-2 text-sm border border-gray-300 rounded focus:ring-2 focus:ring-indigo-500 outline-none"> |
| | <button onclick="editor.removeComparisonRow(${i})" class="text-red-500 hover:text-red-700 p-1"> |
| | <i data-lucide="x" class="w-4 h-4"></i> |
| | </button> |
| | </div> |
| | </div> |
| | `).join('')} |
| | </div> |
| | </div> |
| | `; |
| | } else if (slide.layout === 'compare3') { |
| | html += ` |
| | <div class="col-span-2"> |
| | <label class="block text-sm font-medium text-gray-700 mb-1">Subtitle</label> |
| | <input type="text" value="${slide.subtitle || ''}" |
| | oninput="editor.updateField('subtitle', this.value)" |
| | class="editor-input w-full px-4 py-2 border border-gray-300 rounded-lg focus:ring-2 focus:ring-indigo-500 focus:border-indigo-500 outline-none"> |
| | </div> |
| | <div class="col-span-2"> |
| | <label class="block text-sm font-medium text-gray-700 mb-2">Three Column Headers</label> |
| | <div class="grid grid-cols-3 gap-3"> |
| | ${(slide.headers || ['Option A', 'Option B', 'Option C']).map((header, i) => ` |
| | <input type="text" value="${header}" |
| | oninput="editor.updateHeader(${i}, this.value)" |
| | class="editor-input w-full px-3 py-2 text-sm border border-gray-300 rounded-lg focus:ring-2 focus:ring-indigo-500 outline-none"> |
| | `).join('')} |
| | </div> |
| | </div> |
| | <div class="col-span-2"> |
| | <div class="flex items-center justify-between mb-2"> |
| | <label class="block text-sm font-medium text-gray-700">Comparison Rows</label> |
| | <button onclick="editor.addCompare3Row()" class="text-sm text-indigo-600 hover:text-indigo-700 font-medium">+ Add Row</button> |
| | </div> |
| | <div class="space-y-2"> |
| | ${(slide.rows || []).map((row, i) => ` |
| | <div class="grid grid-cols-4 gap-3 p-3 bg-gray-50 rounded-lg border border-gray-200"> |
| | <input type="text" value="${row.feature}" placeholder="Feature name" |
| | oninput="editor.updateCompare3Row(${i}, 'feature', this.value)" |
| | class="editor-input w-full px-3 py-2 text-sm border border-gray-300 rounded focus:ring-2 focus:ring-indigo-500 outline-none"> |
| | <input type="text" value="${row.col1}" placeholder="Column 1" |
| | oninput="editor.updateCompare3Row(${i}, 'col1', this.value)" |
| | class="editor-input w-full px-3 py-2 text-sm border border-gray-300 rounded focus:ring-2 focus:ring-indigo-500 outline-none"> |
| | <input type="text" value="${row.col2}" placeholder="Column 2" |
| | oninput="editor.updateCompare3Row(${i}, 'col2', this.value)" |
| | class="editor-input w-full px-3 py-2 text-sm border border-gray-300 rounded focus:ring-2 focus:ring-indigo-500 outline-none"> |
| | <div class="flex items-center gap-2"> |
| | <input type="text" value="${row.col3}" placeholder="Column 3" |
| | oninput="editor.updateCompare3Row(${i}, 'col3', this.value)" |
| | class="editor-input flex-1 px-3 py-2 text-sm border border-gray-300 rounded focus:ring-2 focus:ring-indigo-500 outline-none"> |
| | <button onclick="editor.removeCompare3Row(${i})" class="text-red-500 hover:text-red-700 p-1"> |
| | <i data-lucide="x" class="w-4 h-4"></i> |
| | </button> |
| | </div> |
| | </div> |
| | `).join('')} |
| | </div> |
| | </div> |
| | `; |
| | } else if (slide.layout === 'custom-html') { |
| | html += ` |
| | <div class="col-span-2"> |
| | <div class="flex items-center justify-between mb-2"> |
| | <label class="block text-sm font-medium text-gray-700">HTML Content</label> |
| | <span class="text-xs text-gray-500">Supports Tailwind CSS classes</span> |
| | </div> |
| | <textarea id="html-editor" oninput="editor.updateField('htmlContent', this.value)" |
| | class="editor-input w-full px-4 py-3 font-mono text-xs leading-relaxed border border-gray-300 rounded-lg focus:ring-2 focus:ring-indigo-500 focus:border-indigo-500 outline-none resize-none" |
| | rows="12" |
| | spellcheck="false">${slide.htmlContent || ''}</textarea> |
| | <p class="text-xs text-gray-500 mt-1">Write raw HTML. The content will be rendered inside a 16:9 slide container.</p> |
| | </div> |
| | `; |
| | } |
| | |
| | html += `</div>`; |
| | form.innerHTML = html; |
| | lucide.createIcons(); |
| | } |
| | |
| | updateItem(index, field, value) { |
| | this.slides[this.currentSlide].items[index][field] = value; |
| | this.updatePreview(); |
| | } |
| | |
| | updateColumn(index, value) { |
| | if (!this.slides[this.currentSlide].columns) { |
| | this.slides[this.currentSlide].columns = ['Feature', 'Our Solution', 'Competitors']; |
| | } |
| | this.slides[this.currentSlide].columns[index] = value; |
| | this.updatePreview(); |
| | } |
| | |
| | updateComparisonRow(index, field, value) { |
| | if (!this.slides[this.currentSlide].rows) { |
| | this.slides[this.currentSlide].rows = []; |
| | } |
| | if (!this.slides[this.currentSlide].rows[index]) { |
| | this.slides[this.currentSlide].rows[index] = { feature: '', col1: '', col2: '' }; |
| | } |
| | this.slides[this.currentSlide].rows[index][field] = value; |
| | this.updatePreview(); |
| | } |
| | |
| | addComparisonRow() { |
| | if (!this.slides[this.currentSlide].rows) { |
| | this.slides[this.currentSlide].rows = []; |
| | } |
| | this.slides[this.currentSlide].rows.push({ feature: 'New Feature', col1: '✓ Yes', col2: '✗ No' }); |
| | this.renderEditor(); |
| | this.updatePreview(); |
| | } |
| | |
| | removeComparisonRow(index) { |
| | this.slides[this.currentSlide].rows.splice(index, 1); |
| | this.renderEditor(); |
| | this.updatePreview(); |
| | } |
| | |
| | updateHeader(index, value) { |
| | if (!this.slides[this.currentSlide].headers) { |
| | this.slides[this.currentSlide].headers = ['Option A', 'Option B', 'Option C']; |
| | } |
| | this.slides[this.currentSlide].headers[index] = value; |
| | this.updatePreview(); |
| | } |
| | |
| | updateCompare3Row(index, field, value) { |
| | if (!this.slides[this.currentSlide].rows) { |
| | this.slides[this.currentSlide].rows = []; |
| | } |
| | if (!this.slides[this.currentSlide].rows[index]) { |
| | this.slides[this.currentSlide].rows[index] = { feature: '', col1: '', col2: '', col3: '' }; |
| | } |
| | this.slides[this.currentSlide].rows[index][field] = value; |
| | this.updatePreview(); |
| | } |
| | |
| | addCompare3Row() { |
| | if (!this.slides[this.currentSlide].rows) { |
| | this.slides[this.currentSlide].rows = []; |
| | } |
| | this.slides[this.currentSlide].rows.push({ feature: 'New Feature', col1: '-', col2: '-', col3: '-' }); |
| | this.renderEditor(); |
| | this.updatePreview(); |
| | } |
| | |
| | removeCompare3Row(index) { |
| | this.slides[this.currentSlide].rows.splice(index, 1); |
| | this.renderEditor(); |
| | this.updatePreview(); |
| | } |
| | |
| | validateJSON(jsonString) { |
| | // Skip validation if paused (but still track for manual validation) |
| | if (this.validationPaused) { |
| | this.pendingJSON = jsonString; |
| | return; |
| | } |
| | |
| | try { |
| | JSON.parse(jsonString); |
| | this.jsonError = null; |
| | document.getElementById('json-editor').classList.remove('border-red-300', 'focus:ring-red-500', 'focus:border-red-500'); |
| | document.getElementById('json-editor').classList.add('border-gray-300', 'focus:ring-indigo-500', 'focus:border-indigo-500'); |
| | } catch (err) { |
| | this.jsonError = err.message; |
| | document.getElementById('json-editor').classList.add('border-red-300', 'focus:ring-red-500', 'focus:border-red-500'); |
| | document.getElementById('json-editor').classList.remove('border-gray-300', 'focus:ring-indigo-500', 'focus:border-indigo-500'); |
| | } |
| | // Re-render to show/hide error message |
| | const textarea = document.getElementById('json-editor'); |
| | const cursorPosition = textarea.selectionStart; |
| | this.renderEditor(); |
| | // Restore cursor position |
| | const newTextarea = document.getElementById('json-editor'); |
| | if (newTextarea) { |
| | newTextarea.focus(); |
| | newTextarea.setSelectionRange(cursorPosition, cursorPosition); |
| | } |
| | } |
| | |
| | toggleValidationPause() { |
| | this.validationPaused = !this.validationPaused; |
| | // When unpausing, validate the pending content |
| | if (!this.validationPaused && this.pendingJSON) { |
| | this.validateJSON(this.pendingJSON); |
| | this.pendingJSON = null; |
| | } |
| | this.renderEditor(); |
| | } |
| | |
| | formatJSON() { |
| | const textarea = document.getElementById('json-editor'); |
| | try { |
| | const parsed = JSON.parse(textarea.value); |
| | textarea.value = JSON.stringify(parsed, null, 2); |
| | this.jsonError = null; |
| | this.renderEditor(); |
| | } catch (err) { |
| | this.jsonError = err.message; |
| | this.renderEditor(); |
| | } |
| | } |
| | |
| | applyJSON() { |
| | const textarea = document.getElementById('json-editor'); |
| | try { |
| | const parsed = JSON.parse(textarea.value); |
| | // Preserve the ID |
| | parsed.id = this.slides[this.currentSlide].id; |
| | this.slides[this.currentSlide] = parsed; |
| | this.jsonError = null; |
| | this.renderSlidesList(); |
| | this.updatePreview(); |
| | // Show success feedback |
| | const btn = document.querySelector('button[onclick="editor.applyJSON()"]'); |
| | const originalText = btn.innerHTML; |
| | btn.innerHTML = '<i data-lucide="check" class="w-4 h-4"></i> Saved!'; |
| | btn.classList.add('bg-green-600', 'hover:bg-green-700'); |
| | btn.classList.remove('bg-indigo-600', 'hover:bg-indigo-700'); |
| | lucide.createIcons(); |
| | setTimeout(() => { |
| | btn.innerHTML = originalText; |
| | btn.classList.remove('bg-green-600', 'hover:bg-green-700'); |
| | btn.classList.add('bg-indigo-600', 'hover:bg-indigo-700'); |
| | lucide.createIcons(); |
| | }, 2000); |
| | } catch (err) { |
| | this.jsonError = err.message; |
| | this.renderEditor(); |
| | } |
| | } |
| | |
| | updatePreview() { |
| | const slide = this.slides[this.currentSlide]; |
| | const preview = document.getElementById('slide-preview'); |
| | |
| | let content = ''; |
| | |
| | if (slide.layout === 'title') { |
| | const isGradient = slide.theme === 'gradient'; |
| | content = ` |
| | <div class="w-full h-full flex flex-col items-center justify-center p-8 ${isGradient ? 'bg-gradient-to-br from-white to-gray-50' : 'bg-white'}"> |
| | <div class="text-center space-y-4"> |
| | ${slide.badge ? `<div class="inline-flex items-center gap-1 px-3 py-1 rounded-full bg-indigo-50 text-indigo-600 text-xs font-medium"><i data-lucide="sparkles" class="w-3 h-3"></i><span>${slide.badge}</span></div>` : ''} |
| | <h1 class="text-3xl font-bold ${isGradient ? 'gradient-text' : 'text-gray-900'} leading-tight">${slide.title}</h1> |
| | <p class="text-sm text-gray-600 max-w-md mx-auto">${slide.subtitle}</p> |
| | </div> |
| | </div> |
| | `; |
| | } else if (slide.layout === 'split') { |
| | content = ` |
| | <div class="w-full h-full flex flex-col md:flex-row"> |
| | <div class="w-full md:w-1/2 p-6 flex flex-col justify-center bg-white"> |
| | <div class="space-y-4"> |
| | <h2 class="text-2xl font-bold text-gray-900">${slide.title}</h2> |
| | <p class="text-sm text-gray-600 leading-relaxed">${slide.content}</p> |
| | <ul class="space-y-2"> |
| | ${(slide.points || []).map(point => `<li class="flex items-start gap-2 text-xs text-gray-600"><i data-lucide="check-circle-2" class="w-4 h-4 text-indigo-600 mt-0.5 shrink-0"></i><span>${point}</span></li>`).join('')} |
| | </ul> |
| | </div> |
| | </div> |
| | <div class="w-full md:w-1/2 bg-gray-100 flex items-center justify-center text-gray-400"> |
| | <i data-lucide="image" class="w-12 h-12"></i> |
| | </div> |
| | </div> |
| | `; |
| | } else if (slide.layout === 'image') { |
| | content = ` |
| | <div class="w-full h-full relative bg-gray-900 flex items-center justify-center overflow-hidden"> |
| | <div class="absolute inset-0 bg-gradient-to-t from-black/80 via-black/40 to-transparent"></div> |
| | <div class="absolute bottom-0 left-0 right-0 p-6 text-white z-10"> |
| | <h2 class="text-2xl font-bold mb-2">${slide.title}</h2> |
| | <p class="text-sm text-gray-200">${slide.subtitle}</p> |
| | </div> |
| | <i data-lucide="image" class="w-16 h-16 text-white/20"></i> |
| | </div> |
| | `; |
| | } else if (slide.layout === 'grid') { |
| | content = ` |
| | <div class="w-full h-full p-6 bg-gray-50 flex flex-col justify-center"> |
| | <div class="text-center space-y-1 mb-4"> |
| | <h2 class="text-xl font-bold text-gray-900">${slide.title}</h2> |
| | <p class="text-xs text-gray-600">${slide.subtitle}</p> |
| | </div> |
| | <div class="grid grid-cols-3 gap-3"> |
| | ${(slide.items || []).slice(0, 3).map(item => ` |
| | <div class="bg-white p-3 rounded-lg shadow-sm border border-gray-100"> |
| | <div class="w-8 h-8 rounded-lg bg-${item.color}-100 text-${item.color}-600 flex items-center justify-center mb-2"> |
| | <i data-lucide="${item.icon}" class="w-4 h-4"></i> |
| | </div> |
| | <h3 class="font-semibold text-gray-900 text-xs mb-1">${item.title}</h3> |
| | <p class="text-xs text-gray-600 leading-tight">${item.desc}</p> |
| | </div> |
| | `).join('')} |
| | </div> |
| | </div> |
| | `; |
| | } else if (slide.layout === 'comparison') { |
| | const cols = slide.columns || ['Feature', 'Our Solution', 'Competitors']; |
| | content = ` |
| | <div class="w-full h-full p-6 bg-white flex flex-col justify-center"> |
| | <div class="text-center space-y-1 mb-4"> |
| | <h2 class="text-xl font-bold text-gray-900">${slide.title}</h2> |
| | ${slide.subtitle ? `<p class="text-xs text-gray-600">${slide.subtitle}</p>` : ''} |
| | </div> |
| | <div class="overflow-hidden rounded-lg border border-gray-200"> |
| | <table class="w-full text-xs"> |
| | <thead> |
| | <tr class="bg-indigo-50"> |
| | <th class="px-3 py-2 text-left font-semibold text-gray-900 border-b border-indigo-100">${cols[0]}</th> |
| | <th class="px-3 py-2 text-center font-semibold text-indigo-700 border-b border-indigo-100">${cols[1]}</th> |
| | <th class="px-3 py-2 text-center font-semibold text-gray-600 border-b border-indigo-100">${cols[2]}</th> |
| | </tr> |
| | </thead> |
| | <tbody> |
| | ${(slide.rows || []).map((row, i) => ` |
| | <tr class="${i % 2 === 0 ? 'bg-white' : 'bg-gray-50'}"> |
| | <td class="px-3 py-2 font-medium text-gray-900 border-b border-gray-100">${row.feature}</td> |
| | <td class="px-3 py-2 text-center text-indigo-600 border-b border-gray-100">${row.col1}</td> |
| | <td class="px-3 py-2 text-center text-gray-500 border-b border-gray-100">${row.col2}</td> |
| | </tr> |
| | `).join('')} |
| | </tbody> |
| | </table> |
| | </div> |
| | </div> |
| | `; |
| | } else if (slide.layout === 'compare3') { |
| | const headers = slide.headers || ['Option A', 'Option B', 'Option C']; |
| | content = ` |
| | <div class="w-full h-full p-6 bg-white flex flex-col justify-center"> |
| | <div class="text-center space-y-1 mb-4"> |
| | <h2 class="text-xl font-bold text-gray-900">${slide.title}</h2> |
| | ${slide.subtitle ? `<p class="text-xs text-gray-600">${slide.subtitle}</p>` : ''} |
| | </div> |
| | <div class="overflow-hidden rounded-lg border border-gray-200"> |
| | <table class="w-full text-xs"> |
| | <thead> |
| | <tr class="bg-gradient-to-r from-indigo-50 via-purple-50 to-pink-50"> |
| | <th class="px-2 py-3 text-left font-semibold text-gray-900 border-b border-gray-200 w-1/4"></th> |
| | <th class="px-2 py-3 text-center font-semibold text-indigo-700 border-b border-gray-200">${headers[0]}</th> |
| | <th class="px-2 py-3 text-center font-semibold text-purple-700 border-b border-gray-200">${headers[1]}</th> |
| | <th class="px-2 py-3 text-center font-semibold text-pink-700 border-b border-gray-200">${headers[2]}</th> |
| | </tr> |
| | </thead> |
| | <tbody> |
| | ${(slide.rows || []).map((row, i) => ` |
| | <tr class="${i % 2 === 0 ? 'bg-white' : 'bg-gray-50'}"> |
| | <td class="px-2 py-3 font-medium text-gray-900 border-b border-gray-100">${row.feature}</td> |
| | <td class="px-2 py-3 text-center text-sm text-gray-700 border-b border-gray-100">${row.col1}</td> |
| | <td class="px-2 py-3 text-center text-sm text-gray-700 border-b border-gray-100">${row.col2}</td> |
| | <td class="px-2 py-3 text-center text-sm text-gray-700 border-b border-gray-100">${row.col3}</td> |
| | </tr> |
| | `).join('')} |
| | </tbody> |
| | </table> |
| | </div> |
| | </div> |
| | `; |
| | } else if (slide.layout === 'custom-html') { |
| | content = slide.htmlContent || '<div class="flex items-center justify-center h-full text-gray-400">No HTML content</div>'; |
| | } |
| | |
| | preview.innerHTML = content; |
| | lucide.createIcons(); |
| | } |
| | |
| | preview() { |
| | this.previewIndex = 0; |
| | document.getElementById('preview-modal').classList.remove('hidden'); |
| | document.getElementById('preview-modal').classList.add('flex'); |
| | this.renderFullPreview(); |
| | } |
| | |
| | closePreview() { |
| | document.getElementById('preview-modal').classList.add('hidden'); |
| | document.getElementById('preview-modal').classList.remove('flex'); |
| | } |
| | |
| | renderFullPreview() { |
| | const slide = this.slides[this.previewIndex]; |
| | const container = document.getElementById('preview-container'); |
| | |
| | // Use same rendering logic but full size |
| | let content = ''; |
| | |
| | if (slide.layout === 'title') { |
| | const isGradient = slide.theme === 'gradient'; |
| | content = ` |
| | <div class="w-full h-full flex flex-col items-center justify-center p-12 ${isGradient ? 'bg-gradient-to-br from-white to-gray-50' : 'bg-white'}"> |
| | <div class="text-center space-y-6"> |
| | ${slide.badge ? `<div class="inline-flex items-center gap-2 px-4 py-2 rounded-full bg-indigo-50 text-indigo-600 text-sm font-medium mb-4"><i data-lucide="sparkles" class="w-4 h-4"></i><span>${slide.badge}</span></div>` : ''} |
| | <h1 class="text-5xl font-bold ${isGradient ? 'gradient-text' : 'text-gray-900'} leading-tight">${slide.title}</h1> |
| | <p class="text-xl text-gray-600 max-w-2xl mx-auto">${slide.subtitle}</p> |
| | </div> |
| | </div> |
| | `; |
| | } else if (slide.layout === 'split') { |
| | content = ` |
| | <div class="w-full h-full flex"> |
| | <div class="w-1/2 p-12 flex flex-col justify-center bg-white"> |
| | <div class="space-y-6"> |
| | <h2 class="text-4xl font-bold text-gray-900">${slide.title}</h2> |
| | <p class="text-lg text-gray-600 leading-relaxed">${slide.content}</p> |
| | <ul class="space-y-3"> |
| | ${(slide.points || []).map(point => `<li class="flex items-start gap-3 text-gray-600"><i data-lucide="check-circle-2" class="w-5 h-5 text-indigo-600 mt-0.5 shrink-0"></i><span>${point}</span></li>`).join('')} |
| | </ul> |
| | </div> |
| | </div> |
| | <div class="w-1/2 bg-gray-100 flex items-center justify-center"> |
| | <img src="http://static.photos/${slide.image || 'office'}/800x450/${slide.id}" class="w-full h-full object-cover" alt=""> |
| | </div> |
| | </div> |
| | `; |
| | } else if (slide.layout === 'image') { |
| | content = ` |
| | <div class="w-full h-full relative"> |
| | <img src="http://static.photos/${slide.image || 'technology'}/1200x630/${slide.id}" class="w-full h-full object-cover" alt=""> |
| | <div class="absolute inset-0 bg-gradient-to-t from-black/80 via-black/40 to-transparent"></div> |
| | <div class="absolute bottom-0 left-0 right-0 p-12 text-white"> |
| | <h2 class="text-4xl font-bold mb-4">${slide.title}</h2> |
| | <p class="text-xl text-gray-200">${slide.subtitle}</p> |
| | </div> |
| | </div> |
| | `; |
| | } else if (slide.layout === 'grid') { |
| | content = ` |
| | <div class="w-full h-full p-12 bg-gray-50 flex flex-col justify-center"> |
| | <div class="text-center space-y-2 mb-8"> |
| | <h2 class="text-3xl font-bold text-gray-900">${slide.title}</h2> |
| | <p class="text-gray-600">${slide.subtitle}</p> |
| | </div> |
| | <div class="grid grid-cols-3 gap-6 max-w-4xl mx-auto w-full"> |
| | ${(slide.items || []).slice(0, 3).map(item => ` |
| | <div class="bg-white p-6 rounded-2xl shadow-sm border border-gray-100"> |
| | <div class="w-12 h-12 rounded-xl bg-${item.color}-100 text-${item.color}-600 flex items-center justify-center mb-4"> |
| | <i data-lucide="${item.icon}" class="w-6 h-6"></i> |
| | </div> |
| | <h3 class="font-semibold text-gray-900 mb-2">${item.title}</h3> |
| | <p class="text-sm text-gray-600">${item.desc}</p> |
| | </div> |
| | `).join('')} |
| | </div> |
| | </div> |
| | `; |
| | } else if (slide.layout === 'comparison') { |
| | const cols = slide.columns || ['Feature', 'Our Solution', 'Competitors']; |
| | content = ` |
| | <div class="w-full h-full p-12 bg-white flex flex-col justify-center"> |
| | <div class="text-center space-y-2 mb-8"> |
| | <h2 class="text-4xl font-bold text-gray-900">${slide.title}</h2> |
| | ${slide.subtitle ? `<p class="text-xl text-gray-600">${slide.subtitle}</p>` : ''} |
| | </div> |
| | <div class="max-w-4xl mx-auto w-full"> |
| | <div class="overflow-hidden rounded-2xl border border-gray-200 shadow-sm"> |
| | <table class="w-full"> |
| | <thead> |
| | <tr class="bg-indigo-50"> |
| | <th class="px-6 py-4 text-left text-sm font-semibold text-gray-900 border-b border-indigo-100 w-1/3">${cols[0]}</th> |
| | <th class="px-6 py-4 text-center text-sm font-bold text-indigo-700 border-b border-indigo-100 w-1/3">${cols[1]}</th> |
| | <th class="px-6 py-4 text-center text-sm font-semibold text-gray-600 border-b border-indigo-100 w-1/3">${cols[2]}</th> |
| | </tr> |
| | </thead> |
| | <tbody> |
| | ${(slide.rows || []).map((row, i) => ` |
| | <tr class="${i % 2 === 0 ? 'bg-white' : 'bg-gray-50'} hover:bg-indigo-50/30 transition-colors"> |
| | <td class="px-6 py-4 text-sm font-medium text-gray-900 border-b border-gray-100">${row.feature}</td> |
| | <td class="px-6 py-4 text-center text-sm font-semibold text-indigo-600 border-b border-gray-100">${row.col1}</td> |
| | <td class="px-6 py-4 text-center text-sm text-gray-500 border-b border-gray-100">${row.col2}</td> |
| | </tr> |
| | `).join('')} |
| | </tbody> |
| | </table> |
| | </div> |
| | </div> |
| | </div> |
| | `; |
| | } else if (slide.layout === 'compare3') { |
| | const headers = slide.headers || ['Option A', 'Option B', 'Option C']; |
| | content = ` |
| | <div class="w-full h-full p-12 bg-white flex flex-col justify-center"> |
| | <div class="text-center space-y-2 mb-8"> |
| | <h2 class="text-4xl font-bold text-gray-900">${slide.title}</h2> |
| | ${slide.subtitle ? `<p class="text-xl text-gray-600">${slide.subtitle}</p>` : ''} |
| | </div> |
| | <div class="max-w-5xl mx-auto w-full"> |
| | <div class="overflow-hidden rounded-2xl border border-gray-200 shadow-sm"> |
| | <table class="w-full"> |
| | <thead> |
| | <tr class="bg-gradient-to-r from-indigo-50 via-purple-50 to-pink-50"> |
| | <th class="px-4 py-4 text-left text-sm font-semibold text-gray-900 border-b border-gray-200 w-1/4"></th> |
| | <th class="px-4 py-4 text-center text-sm font-bold text-indigo-700 border-b border-gray-200">${headers[0]}</th> |
| | <th class="px-4 py-4 text-center text-sm font-bold text-purple-700 border-b border-gray-200">${headers[1]}</th> |
| | <th class="px-4 py-4 text-center text-sm font-bold text-pink-700 border-b border-gray-200">${headers[2]}</th> |
| | </tr> |
| | </thead> |
| | <tbody> |
| | ${(slide.rows || []).map((row, i) => ` |
| | <tr class="${i % 2 === 0 ? 'bg-white' : 'bg-gray-50'} hover:bg-gray-50/50 transition-colors"> |
| | <td class="px-4 py-4 text-sm font-medium text-gray-900 border-b border-gray-100">${row.feature}</td> |
| | <td class="px-4 py-4 text-center text-sm text-gray-700 border-b border-gray-100">${row.col1}</td> |
| | <td class="px-4 py-4 text-center text-sm text-gray-700 border-b border-gray-100">${row.col2}</td> |
| | <td class="px-4 py-4 text-center text-sm text-gray-700 border-b border-gray-100">${row.col3}</td> |
| | </tr> |
| | `).join('')} |
| | </tbody> |
| | </table> |
| | </div> |
| | </div> |
| | </div> |
| | `; |
| | } else if (slide.layout === 'custom-html') { |
| | content = slide.htmlContent || '<div class="flex items-center justify-center h-full text-gray-400 text-xl">No HTML content defined</div>'; |
| | } |
| | |
| | container.innerHTML = content; |
| | document.getElementById('preview-counter').textContent = `${this.previewIndex + 1} / ${this.slides.length}`; |
| | lucide.createIcons(); |
| | } |
| | |
| | previewNext() { |
| | if (this.previewIndex < this.slides.length - 1) { |
| | this.previewIndex++; |
| | this.renderFullPreview(); |
| | } |
| | } |
| | |
| | previewPrev() { |
| | if (this.previewIndex > 0) { |
| | this.previewIndex--; |
| | this.renderFullPreview(); |
| | } |
| | } |
| | |
| | exportJSON() { |
| | const data = JSON.stringify(this.slides, null, 2); |
| | const blob = new Blob([data], { type: 'application/json' }); |
| | const url = URL.createObjectURL(blob); |
| | const a = document.createElement('a'); |
| | a.href = url; |
| | a.download = 'presentation.json'; |
| | a.click(); |
| | URL.revokeObjectURL(url); |
| | } |
| | |
| | importJSON(input) { |
| | const file = input.files[0]; |
| | if (!file) return; |
| | |
| | const reader = new FileReader(); |
| | reader.onload = (e) => { |
| | try { |
| | this.slides = JSON.parse(e.target.result); |
| | this.currentSlide = 0; |
| | this.renderSlidesList(); |
| | this.renderEditor(); |
| | this.updatePreview(); |
| | } catch (err) { |
| | alert('Invalid JSON file'); |
| | } |
| | }; |
| | reader.readAsText(file); |
| | input.value = ''; |
| | } |
| | } |
| | |
| | // Initialize editor |
| | const editor = new SlideEditor(); |
| | |
| | // Keyboard shortcuts |
| | document.addEventListener('keydown', (e) => { |
| | if (e.key === 'ArrowDown' || e.key === 'ArrowRight') { |
| | if (editor.currentSlide < editor.slides.length - 1) { |
| | editor.selectSlide(editor.currentSlide + 1); |
| | } |
| | } |
| | if (e.key === 'ArrowUp' || e.key === 'ArrowLeft') { |
| | if (editor.currentSlide > 0) { |
| | editor.selectSlide(editor.currentSlide - 1); |
| | } |
| | } |
| | }); |
| | </script> |
| | </body> |
| | </html> |
