🐳 12/03 - 06:48 - add new slide layout: comparison table

editor.html

@@ -145,6 +145,10 @@
                         <i data-lucide="layout-grid" class="w-4 h-4"></i>
                         Grid
                     </button>
+                    <button onclick="editor.setLayout('comparison')" class="tool-btn px-3 py-1.5 rounded-md text-sm font-medium text-gray-700 flex items-center gap-1" data-layout="comparison">
+                        <i data-lucide="table" class="w-4 h-4"></i>
+                        Compare
+                    </button>
                 </div>
                 
                 <!-- View Toggle -->
@@ -359,6 +363,14 @@
                     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' }
+                    ];
+                }
                 
                 this.renderEditor();
                 this.updatePreview();
@@ -584,6 +596,51 @@
                             </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>
+                    `;
                 }
 
                 html += `</div>`;
@@ -596,6 +653,40 @@
                 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();
+            }
+
             validateJSON(jsonString) {
                 // Skip validation if paused (but still track for manual validation)
                 if (this.validationPaused) {
@@ -742,6 +833,36 @@
                             </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>
+                    `;
                 }
                 
                 preview.innerHTML = content;
@@ -826,6 +947,38 @@
                             </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>
+                    `;
                 }
                 
                 container.innerHTML = content;