Spaces:

srivatsavdamaraju
/

svg_viewer

Running

App Files Files Community

srivatsavdamaraju commited on 27 days ago

Commit

4099235

verified ·

1 Parent(s): a48c305

Update index.html

Browse files

Files changed (1) hide show

index.html +295 -2

index.html CHANGED Viewed

@@ -2,7 +2,7 @@
 <html lang="en">
 <head>
   <meta charset="UTF-8">
-  <title>ACCUSAGA AI BASED HTML AI EDITOR</title>
   <style>
     * {
       box-sizing: border-box;
@@ -600,11 +600,89 @@
       position: relative;
       display: inline-block;
     }
   </style>
 </head>
 <body>
   <div class="container" id="mainContainer">
-    <h1>🎨  HTML Editor</h1>
     <div class="toolbar">
       <button class="btn live-preview" onclick="toggleLivePreview()">
@@ -614,6 +692,7 @@
       <button class="btn secondary" onclick="clearEditor()">🗑️ Clear</button>
       <button class="btn secondary" onclick="copyRenderedHTML()">📋 Copy HTML</button>
       <button class="btn secondary" onclick="exportHTML()">💾 Export</button>
       <div class="history-dropdown">
         <button class="btn undo-btn" id="undoBtn" onclick="undoChange()" disabled>
@@ -698,6 +777,52 @@
     <button class="btn danger" onclick="deleteSelected()">Delete Selected</button>
   </div>
   <script>
     let livePreviewEnabled = false;
     let editingElement = null;
@@ -706,12 +831,14 @@
     let isEditorCollapsed = false;
     let history = [];
     let historyIndex = -1;
     // Initialize with default content
     window.onload = function() {
       loadHTML();
       updateWordCount();
       saveToHistory();
     };
     function makeElementsEditable(container) {
@@ -859,6 +986,7 @@
       makeElementsEditable(renderedArea);
       showSaveIndicator();
     }
     function toggleLivePreview() {
@@ -893,6 +1021,7 @@
         updateElementCount(0);
         clearSelection();
         saveToHistory();
       }
     }
@@ -989,6 +1118,7 @@ ${htmlContent}
       loadHTML();
       updateWordCount();
       saveToHistory();
     }
     function updateWordCount() {
@@ -1217,10 +1347,170 @@ What specific aspect would you like to focus on?`;
       }
     }
     // Update word count as user types
     document.getElementById('htmlInput').addEventListener('input', updateWordCount);
     document.getElementById('htmlInput').addEventListener('input', () => {
       saveToHistory();
     });
     // Handle clicks outside of editable elements
@@ -1270,6 +1560,9 @@ What specific aspect would you like to focus on?`;
         e.stopPropagation();
       }
     });
   </script>
 </body>
 </html>

 <html lang="en">
 <head>
   <meta charset="UTF-8">
+  <title>Enhanced Magic Text HTML Editor</title>
   <style>
     * {
       box-sizing: border-box;
       position: relative;
       display: inline-block;
     }
+    /* PDF Export Styles */
+    .pdf-export-btn {
+      background: linear-gradient(135deg, #e53e3e, #c53030);
+    }
+    .pdf-export-btn:hover {
+      box-shadow: 0 5px 15px rgba(229, 62, 62, 0.4);
+    }
+    .pdf-modal {
+      display: none;
+      position: fixed;
+      top: 0;
+      left: 0;
+      width: 100%;
+      height: 100%;
+      background: rgba(0, 0, 0, 0.5);
+      z-index: 2000;
+      justify-content: center;
+      align-items: center;
+    }
+    .pdf-modal.active {
+      display: flex;
+      animation: fadeIn 0.3s ease;
+    }
+    .pdf-modal-content {
+      background: white;
+      padding: 30px;
+      border-radius: 15px;
+      max-width: 500px;
+      width: 90%;
+      box-shadow: 0 20px 40px rgba(0, 0, 0, 0.2);
+    }
+    .pdf-options {
+      display: flex;
+      flex-direction: column;
+      gap: 15px;
+      margin: 20px 0;
+    }
+    .pdf-option {
+      display: flex;
+      align-items: center;
+      gap: 10px;
+      padding: 10px;
+      border: 2px solid #e2e8f0;
+      border-radius: 10px;
+      cursor: pointer;
+      transition: all 0.3s ease;
+    }
+    .pdf-option:hover {
+      border-color: #667eea;
+      background: #f7fafc;
+    }
+    .pdf-option.selected {
+      border-color: #667eea;
+      background: rgba(102, 126, 234, 0.05);
+    }
+    .pdf-option input {
+      display: none;
+    }
+    .pdf-preview {
+      max-height: 200px;
+      overflow-y: auto;
+      border: 1px solid #e2e8f0;
+      border-radius: 8px;
+      padding: 15px;
+      margin: 15px 0;
+      background: #f8f9fa;
+    }
   </style>
 </head>
 <body>
   <div class="container" id="mainContainer">
+    <h1>🎨 Enhanced Magic HTML Editor</h1>
     <div class="toolbar">
       <button class="btn live-preview" onclick="toggleLivePreview()">
       <button class="btn secondary" onclick="clearEditor()">🗑️ Clear</button>
       <button class="btn secondary" onclick="copyRenderedHTML()">📋 Copy HTML</button>
       <button class="btn secondary" onclick="exportHTML()">💾 Export</button>
+      <button class="btn pdf-export-btn" onclick="showPDFOptions()">📄 Save as PDF</button>
       <div class="history-dropdown">
         <button class="btn undo-btn" id="undoBtn" onclick="undoChange()" disabled>
     <button class="btn danger" onclick="deleteSelected()">Delete Selected</button>
   </div>
+  <!-- PDF Export Modal -->
+  <div class="pdf-modal" id="pdfModal">
+    <div class="pdf-modal-content">
+      <h2 style="margin-top: 0; color: #4a5568;">Export as PDF</h2>
+      <p>Choose your preferred export format:</p>
+      <div class="pdf-options">
+        <div class="pdf-option" onclick="selectPDFOption('text')">
+          <input type="radio" name="pdf-option" id="text-option" value="text" checked>
+          <div style="flex: 1;">
+            <strong>Text Format</strong>
+            <p style="margin: 5px 0 0; font-size: 14px; color: #718096;">
+              Best for text content, smaller file size
+            </p>
+          </div>
+        </div>
+        <div class="pdf-option" onclick="selectPDFOption('visual')">
+          <input type="radio" name="pdf-option" id="visual-option" value="visual">
+          <div style="flex: 1;">
+            <strong>Visual Format</strong>
+            <p style="margin: 5px 0 0; font-size: 14px; color: #718096;">
+              Exact visual representation, larger file size
+            </p>
+          </div>
+        </div>
+      </div>
+      <div class="pdf-preview" id="pdfPreview">
+        <strong>Preview:</strong>
+        <div id="pdfPreviewContent" style="margin-top: 10px; font-size: 14px;">
+          <!-- Preview content will be added here -->
+        </div>
+      </div>
+      <div style="display: flex; gap: 10px; justify-content: flex-end; margin-top: 20px;">
+        <button class="btn secondary" onclick="closePDFModal()">Cancel</button>
+        <button class="btn pdf-export-btn" onclick="generatePDF()">Generate PDF</button>
+      </div>
+    </div>
+  </div>
+  <!-- External Libraries -->
+  <script src="https://cdnjs.cloudflare.com/ajax/libs/jspdf/2.5.1/jspdf.umd.min.js"></script>
+  <script src="https://cdnjs.cloudflare.com/ajax/libs/html2canvas/1.4.1/html2canvas.min.js"></script>
   <script>
     let livePreviewEnabled = false;
     let editingElement = null;
     let isEditorCollapsed = false;
     let history = [];
     let historyIndex = -1;
+    let selectedPDFOption = 'text';
     // Initialize with default content
     window.onload = function() {
       loadHTML();
       updateWordCount();
       saveToHistory();
+      updatePDFPreview();
     };
     function makeElementsEditable(container) {
       makeElementsEditable(renderedArea);
       showSaveIndicator();
+      updatePDFPreview();
     }
     function toggleLivePreview() {
         updateElementCount(0);
         clearSelection();
         saveToHistory();
+        updatePDFPreview();
       }
     }
       loadHTML();
       updateWordCount();
       saveToHistory();
+      updatePDFPreview();
     }
     function updateWordCount() {
       }
     }
+    // PDF Export Functions
+    function showPDFOptions() {
+      document.getElementById('pdfModal').classList.add('active');
+      updatePDFPreview();
+    }
+    function closePDFModal() {
+      document.getElementById('pdfModal').classList.remove('active');
+    }
+    function selectPDFOption(option) {
+      selectedPDFOption = option;
+      // Update UI
+      document.querySelectorAll('.pdf-option').forEach(el => {
+        el.classList.remove('selected');
+      });
+      if (option === 'text') {
+        document.getElementById('text-option').parentElement.classList.add('selected');
+      } else {
+        document.getElementById('visual-option').parentElement.classList.add('selected');
+      }
+      updatePDFPreview();
+    }
+    function updatePDFPreview() {
+      const previewContent = document.getElementById('pdfPreviewContent');
+      const renderedArea = document.getElementById('renderedArea');
+      if (selectedPDFOption === 'text') {
+        const textContent = renderedArea.textContent || renderedArea.innerText || '';
+        const preview = textContent.substring(0, 150) + (textContent.length > 150 ? '...' : '');
+        previewContent.innerHTML = `<div style="white-space: pre-wrap; font-family: monospace;">${preview}</div>`;
+      } else {
+        previewContent.innerHTML = '<div style="color: #718096; font-style: italic;">Visual preview not available. PDF will contain exact visual representation of your content.</div>';
+      }
+    }
+    function generatePDF() {
+      closePDFModal();
+      if (selectedPDFOption === 'text') {
+        saveAsPDF();
+      } else {
+        saveAsPDFWithScreenshot();
+      }
+    }
+    function saveAsPDF() {
+      const { jsPDF } = window.jspdf;
+      const renderedArea = document.getElementById('renderedArea');
+      // Create a new PDF instance
+      const doc = new jsPDF();
+      // Get the HTML content
+      const content = renderedArea.innerHTML;
+      // Add title
+      doc.setFontSize(20);
+      doc.text('HTML Export', 105, 15, { align: 'center' });
+      // Add current date
+      const now = new Date();
+      doc.setFontSize(10);
+      doc.text(`Generated on: ${now.toLocaleDateString()} ${now.toLocaleTimeString()}`, 105, 22, { align: 'center' });
+      // Add separator line
+      doc.setDrawColor(200, 200, 200);
+      doc.line(10, 25, 200, 25);
+      // Convert HTML to PDF
+      doc.setFontSize(12);
+      // Create a temporary div to parse HTML content
+      const tempDiv = document.createElement('div');
+      tempDiv.innerHTML = content;
+      // Extract text content (simplified version)
+      let textContent = tempDiv.textContent || tempDiv.innerText || '';
+      // Clean and format text
+      textContent = textContent.replace(/\s+/g, ' ').trim();
+      // Split text into lines that fit PDF width
+      const lines = doc.splitTextToSize(textContent, 180);
+      // Add content to PDF
+      let yPosition = 35;
+      const lineHeight = 7;
+      const pageHeight = doc.internal.pageSize.height;
+      lines.forEach(line => {
+        // Check if we need a new page
+        if (yPosition > pageHeight - 20) {
+          doc.addPage();
+          yPosition = 20;
+        }
+        doc.text(line, 15, yPosition);
+        yPosition += lineHeight;
+      });
+      // Add page numbers
+      const pageCount = doc.internal.getNumberOfPages();
+      for (let i = 1; i <= pageCount; i++) {
+        doc.setPage(i);
+        doc.setFontSize(8);
+        doc.text(`Page ${i} of ${pageCount}`, 105, pageHeight - 10, { align: 'center' });
+      }
+      // Save the PDF
+      doc.save('html-export.pdf');
+      showTemporaryMessage('PDF saved successfully!');
+    }
+    function saveAsPDFWithScreenshot() {
+      const { jsPDF } = window.jspdf;
+      const renderedArea = document.getElementById('renderedArea');
+      // Use html2canvas to capture the visual representation
+      html2canvas(renderedArea, {
+        scale: 2,
+        useCORS: true,
+        logging: false,
+        width: renderedArea.scrollWidth,
+        height: renderedArea.scrollHeight
+      }).then(canvas => {
+        const imgData = canvas.toDataURL('image/png');
+        const pdf = new jsPDF('p', 'mm', 'a4');
+        const imgWidth = 190;
+        const pageHeight = 280;
+        const imgHeight = (canvas.height * imgWidth) / canvas.width;
+        let heightLeft = imgHeight;
+        let position = 10;
+        pdf.addImage(imgData, 'PNG', 10, position, imgWidth, imgHeight);
+        heightLeft -= pageHeight;
+        // Add multiple pages if content is too long
+        while (heightLeft >= 0) {
+          position = heightLeft - imgHeight + 10;
+          pdf.addPage();
+          pdf.addImage(imgData, 'PNG', 10, position, imgWidth, imgHeight);
+          heightLeft -= pageHeight;
+        }
+        pdf.save('html-screenshot.pdf');
+        showTemporaryMessage('PDF saved successfully!');
+      }).catch(error => {
+        console.error('Error generating PDF:', error);
+        showTemporaryMessage('Error generating PDF. Using text fallback.');
+        saveAsPDF(); // Fallback to text version
+      });
+    }
     // Update word count as user types
     document.getElementById('htmlInput').addEventListener('input', updateWordCount);
     document.getElementById('htmlInput').addEventListener('input', () => {
       saveToHistory();
+      updatePDFPreview();
     });
     // Handle clicks outside of editable elements
         e.stopPropagation();
       }
     });
+    // Initialize PDF options
+    selectPDFOption('text');
   </script>
 </body>
 </html>