Spaces:
Running
Running
- 1.52 kB initial commit
- 212 Bytes make drastic improvements on every element of this application. make it a 10/10 enterprise application: "<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Slide Builder Plus</title> <style> * { margin: 0; padding: 0; box-sizing: border-box; } body { font-family: Arial, sans-serif; background: #f0f0f0; padding: 20px; } .container { max-width: 1200px; margin: 0 auto; background: white; padding: 20px; border-radius: 10px; box-shadow: 0 2px 10px rgba(0,0,0,0.1); } h1 { color: #333; margin-bottom: 20px; text-align: center; } .controls { display: flex; gap: 10px; margin-bottom: 20px; flex-wrap: wrap; } button { padding: 10px 20px; background: #007bff; color: white; border: none; border-radius: 5px; cursor: pointer; font-size: 14px; } button:hover { background: #0056b3; } button.danger { background: #dc3545; } button.danger:hover { background: #c82333; } button.success { background: #28a745; } button.success:hover { background: #218838; } button.secondary { background: #6c757d; } button.secondary:hover { background: #5a6268; } .preview { border: 2px solid #ddd; border-radius: 10px; padding: 40px; min-height: 400px; background: #fff; margin-bottom: 20px; } .preview.dark { background: #2d2d2d; color: white; } .preview.blue { background: #e3f2fd; } .slide-element { margin-bottom: 20px; padding: 10px; border: 1px dashed transparent; cursor: pointer; position: relative; } .slide-element:hover { border-color: #007bff; background: #f8f9fa; } .slide-element.selected { border: 2px solid #007bff; background: #e7f3ff; } .element-controls { position: absolute; top: 5px; right: 5px; display: none; gap: 5px; } .slide-element.selected .element-controls { display: flex; } .element-title { font-size: 48px; text-align: center; font-weight: bold; color: #333; } .preview.dark .element-title { color: white; } .element-heading { font-size: 32px; color: #444; margin-bottom: 10px; } .preview.dark .element-heading { color: #f0f0f0; } .element-text { font-size: 18px; line-height: 1.6; color: #666; } .preview.dark .element-text { color: #ccc; } .element-list { font-size: 18px; line-height: 1.8; color: #666; padding-left: 30px; } .preview.dark .element-list { color: #ccc; } .element-quote { font-size: 24px; font-style: italic; text-align: center; padding: 20px; border-left: 4px solid #007bff; background: rgba(0,123,255,0.05); } .element-divider { height: 2px; background: #ddd; margin: 20px 0; } .edit-panel { display: none; background: #f8f9fa; padding: 20px; border-radius: 10px; margin-bottom: 20px; } .edit-panel.active { display: block; } .edit-panel h3 { margin-bottom: 15px; color: #333; } textarea { width: 100%; padding: 10px; border: 1px solid #ddd; border-radius: 5px; font-size: 14px; resize: vertical; } .export-panel { display: none; position: fixed; top: 50%; left: 50%; transform: translate(-50%, -50%); background: white; padding: 30px; border-radius: 10px; box-shadow: 0 5px 30px rgba(0,0,0,0.3); z-index: 1000; max-width: 90%; width: 800px; } .export-panel.active { display: block; } .overlay { display: none; position: fixed; top: 0; left: 0; right: 0; bottom: 0; background: rgba(0,0,0,0.5); z-index: 999; } .overlay.active { display: block; } .close-btn { float: right; background: #dc3545; padding: 5px 15px; } .close-btn:hover { background: #c82333; } #exportCode { width: 100%; height: 300px; margin: 20px 0; font-family: monospace; font-size: 12px; } .button-group { display: flex; gap: 10px; } .button-group button { flex: 1; } .info-box { background: #d1ecf1; border: 1px solid #bee5eb; padding: 15px; border-radius: 5px; margin-bottom: 20px; color: #0c5460; } .theme-buttons { display: flex; gap: 10px; margin-bottom: 20px; } .align-left { text-align: left; } .align-center { text-align: center; } .align-right { text-align: right; } .control-btn { padding: 5px 10px; font-size: 12px; background: white; color: #333; border: 1px solid #ddd; } .control-btn:hover { background: #f8f9fa; } select { padding: 5px; margin: 0 10px; border: 1px solid #ddd; border-radius: 3px; } </style> </head> <body> <div class="container"> <h1>📝 Slide Builder Plus</h1> <div class="info-box"> <strong>Quick Start:</strong> Click buttons to add elements, click elements to edit, apply themes, then export! </div> <div class="controls"> <button onclick="addTitle()">Add Title</button> <button onclick="addHeading()">Add Heading</button> <button onclick="addText()">Add Text</button> <button onclick="addList()">Add List</button> <button onclick="addQuote()">Add Quote</button> <button onclick="addDivider()">Add Divider</button> <button onclick="clearAll()" class="danger">Clear All</button> <button onclick="showExport()" class="success">Export HTML</button> </div> <div class="theme-buttons"> <strong>Theme:</strong> <button onclick="setTheme('default')" class="secondary">Default</button> <button onclick="setTheme('dark')" class="secondary">Dark</button> <button onclick="setTheme('blue')" class="secondary">Blue</button> </div> <div class="edit-panel" id="editPanel"> <button class="close-btn" onclick="closeEdit()">×</button> <h3>Edit Element</h3> <textarea id="editInput" rows="4" placeholder="Edit your content here..."></textarea> <div style="margin-top: 10px;"> <strong>Alignment:</strong> <button onclick="setAlign('left')">Left</button> <button onclick="setAlign('center')">Center</button> <button onclick="setAlign('right')">Right</button> </div> <button onclick="saveEdit()" style="margin-top: 10px;" class="success">Save Changes</button> </div> <div class="preview" id="preview"> <p style="text-align: center; color: #999;">Click buttons above to add content to your slide</p> </div> </div> <div class="overlay" id="overlay" onclick="closeExport()"></div> <div class="export-panel" id="exportPanel"> <button class="close-btn" onclick="closeExport()">×</button> <h3>Export Your Slide</h3> <p>Copy the HTML code below or download as a file:</p> <textarea id="exportCode" readonly></textarea> <div class="button-group"> <button onclick="copyCode()" class="success">Copy to Clipboard</button> <button onclick="downloadHTML()">Download HTML File</button> </div> </div> <script> // Global variables let elements = []; let selectedElement = null; let elementIdCounter = 0; let currentTheme = 'default'; // Add Title function addTitle() { const element = { id: elementIdCounter++, type: 'title', content: 'Your Awesome Title', align: 'center' }; elements.push(element); renderPreview(); } // Add Heading function addHeading() { const element = { id: elementIdCounter++, type: 'heading', content: 'Section Heading', align: 'left' }; elements.push(element); renderPreview(); } // Add Text function addText() { const element = { id: elementIdCounter++, type: 'text', content: 'Your paragraph text goes here. Click to edit and add your own content.', align: 'left' }; elements.push(element); renderPreview(); } // Add List function addList() { const element = { id: elementIdCounter++, type: 'list', content: 'First item\nSecond item\nThird item', align: 'left' }; elements.push(element); renderPreview(); } // Add Quote function addQuote() { const element = { id: elementIdCounter++, type: 'quote', content: 'The only way to do great work is to love what you do. - Steve Jobs', align: 'center' }; elements.push(element); renderPreview(); } // Add Divider function addDivider() { const element = { id: elementIdCounter++, type: 'divider', align: 'center' }; elements.push(element); renderPreview(); } // Clear All function clearAll() { if (confirm('Are you sure you want to clear all elements?')) { elements = []; renderPreview(); } } // Set Theme function setTheme(theme) { currentTheme = theme; const preview = document.getElementById('preview'); preview.className = 'preview ' + (theme !== 'default' ? theme : ''); } // Render Preview function renderPreview() { const preview = document.getElementById('preview'); if (elements.length === 0) { preview.innerHTML = '<p style="text-align: center; color: #999;">Click buttons above to add content to your slide</p>'; return; } preview.innerHTML = ''; elements.forEach(element => { const div = document.createElement('div'); div.className = 'slide-element'; div.onclick = () => selectElement(element.id); // Add controls const controls = document.createElement('div'); controls.className = 'element-controls'; controls.innerHTML = ` <button class="control-btn" onclick="event.stopPropagation(); moveUp(${element.id})">↑</button> <button class="control-btn" onclick="event.stopPropagation(); moveDown(${element.id})">↓</button> <button class="control-btn" onclick="event.stopPropagation(); deleteElement(${element.id})">×</button> `; div.appendChild(controls); // Add content wrapper with alignment const contentWrapper = document.createElement('div'); contentWrapper.className = 'align-' + element.align; switch(element.type) { case 'title': contentWrapper.innerHTML = `<h1 class="element-title">${element.content}</h1>`; break; case 'heading': contentWrapper.innerHTML = `<h2 class="element-heading">${element.content}</h2>`; break; case 'text': contentWrapper.innerHTML = `<p class="element-text">${element.content.replace(/\n/g, '<br>')}</p>`; break; case 'list': const items = element.content.split('\n').map(item => `<li>${item}</li>`).join(''); contentWrapper.innerHTML = `<ul class="element-list">${items}</ul>`; break; case 'quote': contentWrapper.innerHTML = `<blockquote class="element-quote">${element.content}</blockquote>`; break; case 'divider': contentWrapper.innerHTML = `<hr class="element-divider">`; break; } div.appendChild(contentWrapper); preview.appendChild(div); }); } // Select Element function selectElement(id) { selectedElement = elements.find(el => el.id === id); // Remove previous selection document.querySelectorAll('.slide-element').forEach(el => { el.classList.remove('selected'); }); // Add selection to clicked element event.currentTarget.classList.add('selected'); // Show edit panel for editable types if (selectedElement.type !== 'divider') { document.getElementById('editPanel').classList.add('active'); document.getElementById('editInput').value = selectedElement.content; } } // Close Edit function closeEdit() { document.getElementById('editPanel').classList.remove('active'); document.querySelectorAll('.slide-element').forEach(el => { el.classList.remove('selected'); }); selectedElement = null; } // Save Edit function saveEdit() { if (selectedElement) { selectedElement.content = document.getElementById('editInput').value; renderPreview(); closeEdit(); } } // Set Alignment function setAlign(alignment) { if (selectedElement) { selectedElement.align = alignment; renderPreview(); selectElement(selectedElement.id); } } // Delete Element function deleteElement(id) { elements = elements.filter(el => el.id !== id); renderPreview(); } // Move Up function moveUp(id) { const index = elements.findIndex(el => el.id === id); if (index > 0) { [elements[index], elements[index - 1]] = [elements[index - 1], elements[index]]; renderPreview(); } } // Move Down function moveDown(id) { const index = elements.findIndex(el => el.id === id); if (index < elements.length - 1) { [elements[index], elements[index + 1]] = [elements[index + 1], elements[index]]; renderPreview(); } } // Show Export function showExport() { const html = generateHTML(); document.getElementById('exportCode').value = html; document.getElementById('exportPanel').classList.add('active'); document.getElementById('overlay').classList.add('active'); } // Close Export function closeExport() { document.getElementById('exportPanel').classList.remove('active'); document.getElementById('overlay').classList.remove('active'); } // Generate HTML function generateHTML() { let content = ''; elements.forEach(element => { const alignClass = element.align !== 'left' ? ` style="text-align: ${element.align};"` : ''; switch(element.type) { case 'title': content += `<h1 style="font-size: 48px; text-align: ${element.align}; margin: 40px 0; color: ${currentTheme === 'dark' ? 'white' : '#333'};">${element.content}</h1>\n`; break; case 'heading': content += `<h2 style="font-size: 32px; text-align: ${element.align}; margin: 30px 0; color: ${currentTheme === 'dark' ? '#f0f0f0' : '#444'};">${element.content}</h2>\n`; break; case 'text': content += `<p style="font-size: 18px; line-height: 1.6; text-align: ${element.align}; margin: 20px 0; color: ${currentTheme === 'dark' ? '#ccc' : '#666'};">${element.content.replace(/\n/g, '<br>')}</p>\n`; break; case 'list': const items = element.content.split('\n').map(item => `<li>${item}</li>`).join('\n'); content += `<ul style="font-size: 18px; line-height: 1.8; text-align: ${element.align}; margin: 20px 0; padding-left: 30px; color: ${currentTheme === 'dark' ? '#ccc' : '#666'};">\n${items}\n</ul>\n`; break; case 'quote': content += `<blockquote style="font-size: 24px; font-style: italic; text-align: center; padding: 20px 40px; border-left: 4px solid #007bff; background: rgba(0,123,255,0.05); margin: 30px 0;">${element.content}</blockquote>\n`; break; case 'divider': content += `<hr style="border: none; height: 2px; background: #ddd; margin: 30px 0;">\n`; break; } }); const bgColor = currentTheme === 'dark' ? '#2d2d2d' : currentTheme === 'blue' ? '#e3f2fd' : '#f5f5f5'; const textColor = currentTheme === 'dark' ? 'white' : '#333'; return `<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>My Presentation Slide</title> <style> body { font-family: Arial, sans-serif; max-width: 1000px; margin: 0 auto; padding: 60px 40px; background: ${bgColor}; color: ${textColor}; } .slide { background: ${currentTheme === 'dark' ? '#1a1a1a' : 'white'}; padding: 60px; border-radius: 10px; box-shadow: 0 5px 30px rgba(0,0,0,0.1); min-height: 600px; display: flex; flex-direction: column; justify-content: center; } </style> </head> <body> <div class="slide"> ${content} </div> </body> </html>`; } // Copy Code function copyCode() { const textarea = document.getElementById('exportCode'); textarea.select(); document.execCommand('copy'); // Show feedback const button = event.target; const originalText = button.textContent; button.textContent = 'Copied!'; setTimeout(() => { button.textContent = originalText; }, 2000); } // Download HTML function downloadHTML() { const html = document.getElementById('exportCode').value; const blob = new Blob([html], { type: 'text/html' }); const url = window.URL.createObjectURL(blob); const a = document.createElement('a'); a.href = url; a.download = 'my-slide.html'; a.click(); window.URL.revokeObjectURL(url); } // Test on load window.onload = function() { console.log('Slide Builder Plus: Ready'); }; </script> </body> </html>" - Initial Deployment
- 70.2 kB make drastic improvements on every element of this application. make it a 10/10 enterprise application: "<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Slide Builder Plus</title> <style> * { margin: 0; padding: 0; box-sizing: border-box; } body { font-family: Arial, sans-serif; background: #f0f0f0; padding: 20px; } .container { max-width: 1200px; margin: 0 auto; background: white; padding: 20px; border-radius: 10px; box-shadow: 0 2px 10px rgba(0,0,0,0.1); } h1 { color: #333; margin-bottom: 20px; text-align: center; } .controls { display: flex; gap: 10px; margin-bottom: 20px; flex-wrap: wrap; } button { padding: 10px 20px; background: #007bff; color: white; border: none; border-radius: 5px; cursor: pointer; font-size: 14px; } button:hover { background: #0056b3; } button.danger { background: #dc3545; } button.danger:hover { background: #c82333; } button.success { background: #28a745; } button.success:hover { background: #218838; } button.secondary { background: #6c757d; } button.secondary:hover { background: #5a6268; } .preview { border: 2px solid #ddd; border-radius: 10px; padding: 40px; min-height: 400px; background: #fff; margin-bottom: 20px; } .preview.dark { background: #2d2d2d; color: white; } .preview.blue { background: #e3f2fd; } .slide-element { margin-bottom: 20px; padding: 10px; border: 1px dashed transparent; cursor: pointer; position: relative; } .slide-element:hover { border-color: #007bff; background: #f8f9fa; } .slide-element.selected { border: 2px solid #007bff; background: #e7f3ff; } .element-controls { position: absolute; top: 5px; right: 5px; display: none; gap: 5px; } .slide-element.selected .element-controls { display: flex; } .element-title { font-size: 48px; text-align: center; font-weight: bold; color: #333; } .preview.dark .element-title { color: white; } .element-heading { font-size: 32px; color: #444; margin-bottom: 10px; } .preview.dark .element-heading { color: #f0f0f0; } .element-text { font-size: 18px; line-height: 1.6; color: #666; } .preview.dark .element-text { color: #ccc; } .element-list { font-size: 18px; line-height: 1.8; color: #666; padding-left: 30px; } .preview.dark .element-list { color: #ccc; } .element-quote { font-size: 24px; font-style: italic; text-align: center; padding: 20px; border-left: 4px solid #007bff; background: rgba(0,123,255,0.05); } .element-divider { height: 2px; background: #ddd; margin: 20px 0; } .edit-panel { display: none; background: #f8f9fa; padding: 20px; border-radius: 10px; margin-bottom: 20px; } .edit-panel.active { display: block; } .edit-panel h3 { margin-bottom: 15px; color: #333; } textarea { width: 100%; padding: 10px; border: 1px solid #ddd; border-radius: 5px; font-size: 14px; resize: vertical; } .export-panel { display: none; position: fixed; top: 50%; left: 50%; transform: translate(-50%, -50%); background: white; padding: 30px; border-radius: 10px; box-shadow: 0 5px 30px rgba(0,0,0,0.3); z-index: 1000; max-width: 90%; width: 800px; } .export-panel.active { display: block; } .overlay { display: none; position: fixed; top: 0; left: 0; right: 0; bottom: 0; background: rgba(0,0,0,0.5); z-index: 999; } .overlay.active { display: block; } .close-btn { float: right; background: #dc3545; padding: 5px 15px; } .close-btn:hover { background: #c82333; } #exportCode { width: 100%; height: 300px; margin: 20px 0; font-family: monospace; font-size: 12px; } .button-group { display: flex; gap: 10px; } .button-group button { flex: 1; } .info-box { background: #d1ecf1; border: 1px solid #bee5eb; padding: 15px; border-radius: 5px; margin-bottom: 20px; color: #0c5460; } .theme-buttons { display: flex; gap: 10px; margin-bottom: 20px; } .align-left { text-align: left; } .align-center { text-align: center; } .align-right { text-align: right; } .control-btn { padding: 5px 10px; font-size: 12px; background: white; color: #333; border: 1px solid #ddd; } .control-btn:hover { background: #f8f9fa; } select { padding: 5px; margin: 0 10px; border: 1px solid #ddd; border-radius: 3px; } </style> </head> <body> <div class="container"> <h1>📝 Slide Builder Plus</h1> <div class="info-box"> <strong>Quick Start:</strong> Click buttons to add elements, click elements to edit, apply themes, then export! </div> <div class="controls"> <button onclick="addTitle()">Add Title</button> <button onclick="addHeading()">Add Heading</button> <button onclick="addText()">Add Text</button> <button onclick="addList()">Add List</button> <button onclick="addQuote()">Add Quote</button> <button onclick="addDivider()">Add Divider</button> <button onclick="clearAll()" class="danger">Clear All</button> <button onclick="showExport()" class="success">Export HTML</button> </div> <div class="theme-buttons"> <strong>Theme:</strong> <button onclick="setTheme('default')" class="secondary">Default</button> <button onclick="setTheme('dark')" class="secondary">Dark</button> <button onclick="setTheme('blue')" class="secondary">Blue</button> </div> <div class="edit-panel" id="editPanel"> <button class="close-btn" onclick="closeEdit()">×</button> <h3>Edit Element</h3> <textarea id="editInput" rows="4" placeholder="Edit your content here..."></textarea> <div style="margin-top: 10px;"> <strong>Alignment:</strong> <button onclick="setAlign('left')">Left</button> <button onclick="setAlign('center')">Center</button> <button onclick="setAlign('right')">Right</button> </div> <button onclick="saveEdit()" style="margin-top: 10px;" class="success">Save Changes</button> </div> <div class="preview" id="preview"> <p style="text-align: center; color: #999;">Click buttons above to add content to your slide</p> </div> </div> <div class="overlay" id="overlay" onclick="closeExport()"></div> <div class="export-panel" id="exportPanel"> <button class="close-btn" onclick="closeExport()">×</button> <h3>Export Your Slide</h3> <p>Copy the HTML code below or download as a file:</p> <textarea id="exportCode" readonly></textarea> <div class="button-group"> <button onclick="copyCode()" class="success">Copy to Clipboard</button> <button onclick="downloadHTML()">Download HTML File</button> </div> </div> <script> // Global variables let elements = []; let selectedElement = null; let elementIdCounter = 0; let currentTheme = 'default'; // Add Title function addTitle() { const element = { id: elementIdCounter++, type: 'title', content: 'Your Awesome Title', align: 'center' }; elements.push(element); renderPreview(); } // Add Heading function addHeading() { const element = { id: elementIdCounter++, type: 'heading', content: 'Section Heading', align: 'left' }; elements.push(element); renderPreview(); } // Add Text function addText() { const element = { id: elementIdCounter++, type: 'text', content: 'Your paragraph text goes here. Click to edit and add your own content.', align: 'left' }; elements.push(element); renderPreview(); } // Add List function addList() { const element = { id: elementIdCounter++, type: 'list', content: 'First item\nSecond item\nThird item', align: 'left' }; elements.push(element); renderPreview(); } // Add Quote function addQuote() { const element = { id: elementIdCounter++, type: 'quote', content: 'The only way to do great work is to love what you do. - Steve Jobs', align: 'center' }; elements.push(element); renderPreview(); } // Add Divider function addDivider() { const element = { id: elementIdCounter++, type: 'divider', align: 'center' }; elements.push(element); renderPreview(); } // Clear All function clearAll() { if (confirm('Are you sure you want to clear all elements?')) { elements = []; renderPreview(); } } // Set Theme function setTheme(theme) { currentTheme = theme; const preview = document.getElementById('preview'); preview.className = 'preview ' + (theme !== 'default' ? theme : ''); } // Render Preview function renderPreview() { const preview = document.getElementById('preview'); if (elements.length === 0) { preview.innerHTML = '<p style="text-align: center; color: #999;">Click buttons above to add content to your slide</p>'; return; } preview.innerHTML = ''; elements.forEach(element => { const div = document.createElement('div'); div.className = 'slide-element'; div.onclick = () => selectElement(element.id); // Add controls const controls = document.createElement('div'); controls.className = 'element-controls'; controls.innerHTML = ` <button class="control-btn" onclick="event.stopPropagation(); moveUp(${element.id})">↑</button> <button class="control-btn" onclick="event.stopPropagation(); moveDown(${element.id})">↓</button> <button class="control-btn" onclick="event.stopPropagation(); deleteElement(${element.id})">×</button> `; div.appendChild(controls); // Add content wrapper with alignment const contentWrapper = document.createElement('div'); contentWrapper.className = 'align-' + element.align; switch(element.type) { case 'title': contentWrapper.innerHTML = `<h1 class="element-title">${element.content}</h1>`; break; case 'heading': contentWrapper.innerHTML = `<h2 class="element-heading">${element.content}</h2>`; break; case 'text': contentWrapper.innerHTML = `<p class="element-text">${element.content.replace(/\n/g, '<br>')}</p>`; break; case 'list': const items = element.content.split('\n').map(item => `<li>${item}</li>`).join(''); contentWrapper.innerHTML = `<ul class="element-list">${items}</ul>`; break; case 'quote': contentWrapper.innerHTML = `<blockquote class="element-quote">${element.content}</blockquote>`; break; case 'divider': contentWrapper.innerHTML = `<hr class="element-divider">`; break; } div.appendChild(contentWrapper); preview.appendChild(div); }); } // Select Element function selectElement(id) { selectedElement = elements.find(el => el.id === id); // Remove previous selection document.querySelectorAll('.slide-element').forEach(el => { el.classList.remove('selected'); }); // Add selection to clicked element event.currentTarget.classList.add('selected'); // Show edit panel for editable types if (selectedElement.type !== 'divider') { document.getElementById('editPanel').classList.add('active'); document.getElementById('editInput').value = selectedElement.content; } } // Close Edit function closeEdit() { document.getElementById('editPanel').classList.remove('active'); document.querySelectorAll('.slide-element').forEach(el => { el.classList.remove('selected'); }); selectedElement = null; } // Save Edit function saveEdit() { if (selectedElement) { selectedElement.content = document.getElementById('editInput').value; renderPreview(); closeEdit(); } } // Set Alignment function setAlign(alignment) { if (selectedElement) { selectedElement.align = alignment; renderPreview(); selectElement(selectedElement.id); } } // Delete Element function deleteElement(id) { elements = elements.filter(el => el.id !== id); renderPreview(); } // Move Up function moveUp(id) { const index = elements.findIndex(el => el.id === id); if (index > 0) { [elements[index], elements[index - 1]] = [elements[index - 1], elements[index]]; renderPreview(); } } // Move Down function moveDown(id) { const index = elements.findIndex(el => el.id === id); if (index < elements.length - 1) { [elements[index], elements[index + 1]] = [elements[index + 1], elements[index]]; renderPreview(); } } // Show Export function showExport() { const html = generateHTML(); document.getElementById('exportCode').value = html; document.getElementById('exportPanel').classList.add('active'); document.getElementById('overlay').classList.add('active'); } // Close Export function closeExport() { document.getElementById('exportPanel').classList.remove('active'); document.getElementById('overlay').classList.remove('active'); } // Generate HTML function generateHTML() { let content = ''; elements.forEach(element => { const alignClass = element.align !== 'left' ? ` style="text-align: ${element.align};"` : ''; switch(element.type) { case 'title': content += `<h1 style="font-size: 48px; text-align: ${element.align}; margin: 40px 0; color: ${currentTheme === 'dark' ? 'white' : '#333'};">${element.content}</h1>\n`; break; case 'heading': content += `<h2 style="font-size: 32px; text-align: ${element.align}; margin: 30px 0; color: ${currentTheme === 'dark' ? '#f0f0f0' : '#444'};">${element.content}</h2>\n`; break; case 'text': content += `<p style="font-size: 18px; line-height: 1.6; text-align: ${element.align}; margin: 20px 0; color: ${currentTheme === 'dark' ? '#ccc' : '#666'};">${element.content.replace(/\n/g, '<br>')}</p>\n`; break; case 'list': const items = element.content.split('\n').map(item => `<li>${item}</li>`).join('\n'); content += `<ul style="font-size: 18px; line-height: 1.8; text-align: ${element.align}; margin: 20px 0; padding-left: 30px; color: ${currentTheme === 'dark' ? '#ccc' : '#666'};">\n${items}\n</ul>\n`; break; case 'quote': content += `<blockquote style="font-size: 24px; font-style: italic; text-align: center; padding: 20px 40px; border-left: 4px solid #007bff; background: rgba(0,123,255,0.05); margin: 30px 0;">${element.content}</blockquote>\n`; break; case 'divider': content += `<hr style="border: none; height: 2px; background: #ddd; margin: 30px 0;">\n`; break; } }); const bgColor = currentTheme === 'dark' ? '#2d2d2d' : currentTheme === 'blue' ? '#e3f2fd' : '#f5f5f5'; const textColor = currentTheme === 'dark' ? 'white' : '#333'; return `<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>My Presentation Slide</title> <style> body { font-family: Arial, sans-serif; max-width: 1000px; margin: 0 auto; padding: 60px 40px; background: ${bgColor}; color: ${textColor}; } .slide { background: ${currentTheme === 'dark' ? '#1a1a1a' : 'white'}; padding: 60px; border-radius: 10px; box-shadow: 0 5px 30px rgba(0,0,0,0.1); min-height: 600px; display: flex; flex-direction: column; justify-content: center; } </style> </head> <body> <div class="slide"> ${content} </div> </body> </html>`; } // Copy Code function copyCode() { const textarea = document.getElementById('exportCode'); textarea.select(); document.execCommand('copy'); // Show feedback const button = event.target; const originalText = button.textContent; button.textContent = 'Copied!'; setTimeout(() => { button.textContent = originalText; }, 2000); } // Download HTML function downloadHTML() { const html = document.getElementById('exportCode').value; const blob = new Blob([html], { type: 'text/html' }); const url = window.URL.createObjectURL(blob); const a = document.createElement('a'); a.href = url; a.download = 'my-slide.html'; a.click(); window.URL.revokeObjectURL(url); } // Test on load window.onload = function() { console.log('Slide Builder Plus: Ready'); }; </script> </body> </html>" - Initial Deployment
- 388 Bytes initial commit