Spaces:

srivatsavdamaraju
/

htmls

Running

App Files Files Community

htmls / index.html

srivatsavdamaraju

Create index.html

d26356b verified 5 months ago

raw

history blame contribute delete

13.6 kB

	<!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>