Spaces:

srivatsavdamaraju
/

htmls

Running

App Files Files Community

srivatsavdamaraju commited on Nov 19, 2025

Commit

d26356b

verified ·

1 Parent(s): 8f7a8ed

Create index.html

Browse files

Files changed (1) hide show

index.html +466 -0

index.html ADDED Viewed

	@@ -0,0 +1,466 @@

+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>HTML to PDF Converter</title>
+    <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>
+    <style>
+        * {
+            margin: 0;
+            padding: 0;
+            box-sizing: border-box;
+        }
+        body {
+            font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
+            background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
+            min-height: 100vh;
+            padding: 20px;
+        }
+        .container {
+            max-width: 1400px;
+            margin: 0 auto;
+        }
+        .header {
+            text-align: center;
+            color: white;
+            margin-bottom: 30px;
+        }
+        .header h1 {
+            font-size: 36px;
+            margin-bottom: 10px;
+        }
+        .header p {
+            font-size: 16px;
+            opacity: 0.9;
+        }
+        .main-content {
+            display: grid;
+            grid-template-columns: 1fr 1fr;
+            gap: 20px;
+            margin-bottom: 20px;
+        }
+        .panel {
+            background: white;
+            border-radius: 10px;
+            padding: 20px;
+            box-shadow: 0 4px 6px rgba(0,0,0,0.1);
+        }
+        .panel h2 {
+            color: #333;
+            margin-bottom: 15px;
+            font-size: 20px;
+            display: flex;
+            align-items: center;
+            gap: 10px;
+        }
+        textarea {
+            width: 100%;
+            height: 500px;
+            padding: 15px;
+            border: 2px solid #e2e8f0;
+            border-radius: 8px;
+            font-family: 'Courier New', monospace;
+            font-size: 14px;
+            resize: vertical;
+            transition: border-color 0.3s;
+        }
+        textarea:focus {
+            outline: none;
+            border-color: #667eea;
+        }
+        .preview-container {
+            width: 100%;
+            height: 500px;
+            border: 2px solid #e2e8f0;
+            border-radius: 8px;
+            overflow: auto;
+            background: white;
+        }
+        #preview {
+            padding: 20px;
+            background: white;
+        }
+        .controls {
+            background: white;
+            padding: 20px;
+            border-radius: 10px;
+            box-shadow: 0 4px 6px rgba(0,0,0,0.1);
+            display: flex;
+            gap: 15px;
+            flex-wrap: wrap;
+            justify-content: center;
+        }
+        button {
+            padding: 14px 28px;
+            border: none;
+            border-radius: 8px;
+            font-size: 16px;
+            cursor: pointer;
+            transition: all 0.3s;
+            font-weight: 600;
+            display: flex;
+            align-items: center;
+            gap: 8px;
+        }
+        button:disabled {
+            opacity: 0.5;
+            cursor: not-allowed;
+        }
+        .btn-preview {
+            background: #4299e1;
+            color: white;
+        }
+        .btn-preview:hover:not(:disabled) {
+            background: #3182ce;
+            transform: translateY(-2px);
+            box-shadow: 0 4px 12px rgba(66, 153, 225, 0.4);
+        }
+        .btn-download {
+            background: #48bb78;
+            color: white;
+        }
+        .btn-download:hover:not(:disabled) {
+            background: #38a169;
+            transform: translateY(-2px);
+            box-shadow: 0 4px 12px rgba(72, 187, 120, 0.4);
+        }
+        .btn-open {
+            background: #ed8936;
+            color: white;
+        }
+        .btn-open:hover:not(:disabled) {
+            background: #dd6b20;
+            transform: translateY(-2px);
+            box-shadow: 0 4px 12px rgba(237, 137, 54, 0.4);
+        }
+        .btn-clear {
+            background: #f56565;
+            color: white;
+        }
+        .btn-clear:hover:not(:disabled) {
+            background: #e53e3e;
+            transform: translateY(-2px);
+            box-shadow: 0 4px 12px rgba(245, 101, 101, 0.4);
+        }
+        .example-btn {
+            background: #9f7aea;
+            color: white;
+        }
+        .example-btn:hover:not(:disabled) {
+            background: #805ad5;
+            transform: translateY(-2px);
+            box-shadow: 0 4px 12px rgba(159, 122, 234, 0.4);
+        }
+        @media (max-width: 1024px) {
+            .main-content {
+                grid-template-columns: 1fr;
+            }
+        }
+        .placeholder-text {
+            color: #a0aec0;
+            font-style: italic;
+            padding: 20px;
+        }
+        .loading {
+            position: fixed;
+            top: 0;
+            left: 0;
+            right: 0;
+            bottom: 0;
+            background: rgba(0,0,0,0.7);
+            display: none;
+            justify-content: center;
+            align-items: center;
+            z-index: 1000;
+        }
+        .loading.active {
+            display: flex;
+        }
+        .loading-content {
+            background: white;
+            padding: 30px;
+            border-radius: 10px;
+            text-align: center;
+        }
+        .spinner {
+            border: 4px solid #f3f3f3;
+            border-top: 4px solid #667eea;
+            border-radius: 50%;
+            width: 40px;
+            height: 40px;
+            animation: spin 1s linear infinite;
+            margin: 0 auto 15px;
+        }
+        @keyframes spin {
+            0% { transform: rotate(0deg); }
+            100% { transform: rotate(360deg); }
+        }
+    </style>
+</head>
+<body>
+    <div class="loading" id="loading">
+        <div class="loading-content">
+            <div class="spinner"></div>
+            <p>Generating PDF...</p>
+        </div>
+    </div>
+    <div class="container">
+        <div class="header">
+            <h1>📄 HTML to PDF Converter</h1>
+            <p>Paste your HTML code, preview it, and save as high-quality PDF</p>
+        </div>
+        <div class="main-content">
+            <div class="panel">
+                <h2>📝 HTML Code</h2>
+                <textarea id="htmlInput" placeholder="Paste your HTML code here..."></textarea>
+            </div>
+            <div class="panel">
+                <h2>👁️ Live Preview</h2>
+                <div class="preview-container">
+                    <div id="preview">
+                        <div class="placeholder-text">
+                            Preview will appear here...
+                        </div>
+                    </div>
+                </div>
+            </div>
+        </div>
+        <div class="controls">
+            <button class="btn-preview" onclick="updatePreview()">
+                🔄 Update Preview
+            </button>
+            <button class="btn-download" onclick="downloadPDF()">
+                ⬇️ Download as PDF
+            </button>
+            <button class="btn-open" onclick="openPDFNewTab()">
+                🔗 Open PDF in New Tab
+            </button>
+            <button class="example-btn" onclick="loadExample()">
+                📋 Load Example
+            </button>
+            <button class="btn-clear" onclick="clearAll()">
+                🗑️ Clear All
+            </button>
+        </div>
+    </div>
+    <script>
+        const htmlInput = document.getElementById('htmlInput');
+        const preview = document.getElementById('preview');
+        const loading = document.getElementById('loading');
+        // Auto-update preview as user types (with debouncing)
+        let typingTimer;
+        htmlInput.addEventListener('input', function() {
+            clearTimeout(typingTimer);
+            typingTimer = setTimeout(updatePreview, 500);
+        });
+        // Update preview function
+        function updatePreview() {
+            const htmlCode = htmlInput.value;
+            if (htmlCode.trim() === '') {
+                preview.innerHTML = '<div class="placeholder-text">Preview will appear here...</div>';
+            } else {
+                preview.innerHTML = htmlCode;
+            }
+        }
+        // Show/hide loading
+        function showLoading() {
+            loading.classList.add('active');
+        }
+        function hideLoading() {
+            loading.classList.remove('active');
+        }
+        // Generate PDF using html2canvas and jsPDF
+        async function generatePDF(mode = 'download') {
+            if (htmlInput.value.trim() === '') {
+                alert('Please enter some HTML code first!');
+                return;
+            }
+            showLoading();
+            try {
+                // Use html2canvas to capture the preview
+                const canvas = await html2canvas(preview, {
+                    scale: 3, // Higher quality
+                    useCORS: true,
+                    allowTaint: true,
+                    backgroundColor: '#ffffff',
+                    logging: false,
+                    windowWidth: preview.scrollWidth,
+                    windowHeight: preview.scrollHeight
+                });
+                const imgData = canvas.toDataURL('image/png');
+                // Calculate PDF dimensions
+                const imgWidth = 210; // A4 width in mm
+                const pageHeight = 297; // A4 height in mm
+                const imgHeight = (canvas.height * imgWidth) / canvas.width;
+                let heightLeft = imgHeight;
+                const { jsPDF } = window.jspdf;
+                const pdf = new jsPDF('p', 'mm', 'a4');
+                let position = 0;
+                // Add first page
+                pdf.addImage(imgData, 'PNG', 0, position, imgWidth, imgHeight);
+                heightLeft -= pageHeight;
+                // Add additional pages if content is longer
+                while (heightLeft > 0) {
+                    position = heightLeft - imgHeight;
+                    pdf.addPage();
+                    pdf.addImage(imgData, 'PNG', 0, position, imgWidth, imgHeight);
+                    heightLeft -= pageHeight;
+                }
+                if (mode === 'download') {
+                    pdf.save('document.pdf');
+                } else if (mode === 'open') {
+                    const pdfBlob = pdf.output('blob');
+                    const pdfUrl = URL.createObjectURL(pdfBlob);
+                    window.open(pdfUrl, '_blank');
+                }
+            } catch (error) {
+                console.error('Error generating PDF:', error);
+                alert('Error generating PDF. Please try again.');
+            } finally {
+                hideLoading();
+            }
+        }
+        // Download PDF
+        function downloadPDF() {
+            generatePDF('download');
+        }
+        // Open PDF in new tab
+        function openPDFNewTab() {
+            generatePDF('open');
+        }
+        // Clear all
+        function clearAll() {
+            htmlInput.value = '';
+            preview.innerHTML = '<div class="placeholder-text">Preview will appear here...</div>';
+        }
+        // Load example HTML
+        function loadExample() {
+            const exampleHTML = `<style>
+    body {
+        font-family: Arial, sans-serif;
+        max-width: 800px;
+        margin: 0 auto;
+        padding: 20px;
+        line-height: 1.6;
+    }
+    h1 {
+        color: #2c3e50;
+        border-bottom: 3px solid #3498db;
+        padding-bottom: 10px;
+    }
+    h2 {
+        color: #34495e;
+        margin-top: 25px;
+    }
+    .highlight {
+        background: #ffffcc;
+        padding: 15px;
+        border-left: 4px solid #f39c12;
+        margin: 20px 0;
+    }
+    table {
+        width: 100%;
+        border-collapse: collapse;
+        margin: 20px 0;
+    }
+    th {
+        background: #3498db;
+        color: white;
+        padding: 12px;
+        text-align: left;
+    }
+    td {
+        padding: 10px;
+        border-bottom: 1px solid #ddd;
+    }
+    tr:hover {
+        background: #f5f5f5;
+    }
+    .footer {
+        margin-top: 40px;
+        padding-top: 20px;
+        border-top: 2px solid #eee;
+        color: #7f8c8d;
+        font-size: 14px;
+    }
+</style>
+<h1>Sample Business Report</h1>
+<div class="highlight">
+    <strong>Important:</strong> This is a sample document showing how all styles are preserved in the PDF output.
+</div>
+<h2>Company Overview</h2>
+<p>This document demonstrates how HTML content with complete styling can be converted to PDF format without losing any design elements. All colors, fonts, spacing, and layouts are preserved exactly as designed.</p>
+<h2>Quarterly Results</h2>
+<table>
+    <thead>
+        <tr>
+            <th>Quarter</th>
+            <th>Revenue</th>
+            <th>Growth</th>
+        </tr>
+    </thead>
+    <tbody>
+        <tr>
+            <td>Q1 2024</td>
+            <td>$250,000</td>
+            <td>+15%</td>
+        </tr>
+        <tr>
+            <td>Q2 2024</td>
+            <td>$280,000</td>
+            <td>+12%</td>
+        </tr>
+        <tr>
+            <td>Q3 2024</td>
+            <td>$320,000</td>
+            <td>+14%</td>
+        </tr>
+    </tbody>
+</table>
+<h2>Key Achievements</h2>
+<ul>
+    <li>Expanded to 5 new markets</li>
+    <li>Increased customer satisfaction by 25%</li>
+    <li>Launched 3 new product lines</li>
+    <li>Achieved record quarterly revenue</li>
+</ul>
+<div class="footer">
+    <p>Generated on ${new Date().toLocaleDateString()} | Confidential Document</p>
+</div>`;
+            htmlInput.value = exampleHTML;
+            updatePreview();
+        }
+    </script>
+</body>
+</html>