|
|
<!DOCTYPE html> |
|
|
<html lang="en"> |
|
|
<head> |
|
|
<meta charset="UTF-8"> |
|
|
<meta name="viewport" content="width=device-width, initial-scale=1.0"> |
|
|
<title>PDF Master | Scan, Edit & Modify PDF Documents</title> |
|
|
<script src="https://cdn.tailwindcss.com"></script> |
|
|
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css"> |
|
|
<style> |
|
|
.gradient-bg { |
|
|
background: linear-gradient(135deg, #667eea 0%, #764ba2 100%); |
|
|
} |
|
|
.pdf-preview { |
|
|
border: 2px dashed #cbd5e0; |
|
|
transition: all 0.3s ease; |
|
|
} |
|
|
.pdf-preview:hover { |
|
|
border-color: #667eea; |
|
|
} |
|
|
.tool-btn { |
|
|
transition: all 0.2s ease; |
|
|
} |
|
|
.tool-btn:hover { |
|
|
transform: translateY(-2px); |
|
|
box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1); |
|
|
} |
|
|
.page-thumbnail { |
|
|
border: 1px solid #e2e8f0; |
|
|
} |
|
|
.page-thumbnail.active { |
|
|
border-color: #667eea; |
|
|
box-shadow: 0 0 0 2px rgba(102, 126, 234, 0.5); |
|
|
} |
|
|
@keyframes pulse { |
|
|
0%, 100% { |
|
|
opacity: 1; |
|
|
} |
|
|
50% { |
|
|
opacity: 0.5; |
|
|
} |
|
|
} |
|
|
.animate-pulse { |
|
|
animation: pulse 2s cubic-bezier(0.4, 0, 0.6, 1) infinite; |
|
|
} |
|
|
</style> |
|
|
</head> |
|
|
<body class="font-sans bg-gray-50"> |
|
|
|
|
|
<header class="gradient-bg text-white shadow-lg"> |
|
|
<div class="container mx-auto px-4 py-6"> |
|
|
<div class="flex justify-between items-center"> |
|
|
<div class="flex items-center space-x-2"> |
|
|
<i class="fas fa-file-pdf text-3xl"></i> |
|
|
<h1 class="text-2xl font-bold">PDF Master</h1> |
|
|
</div> |
|
|
<nav class="hidden md:flex space-x-6"> |
|
|
<a href="#features" class="hover:text-gray-200 transition">Features</a> |
|
|
<a href="#editor" class="hover:text-gray-200 transition">Editor</a> |
|
|
<a href="#tools" class="hover:text-gray-200 transition">Tools</a> |
|
|
<a href="#faq" class="hover:text-gray-200 transition">FAQ</a> |
|
|
</nav> |
|
|
<button class="md:hidden text-2xl" id="menu-toggle"> |
|
|
<i class="fas fa-bars"></i> |
|
|
</button> |
|
|
</div> |
|
|
</div> |
|
|
|
|
|
|
|
|
<div class="md:hidden hidden bg-indigo-800 py-4" id="mobile-menu"> |
|
|
<div class="container mx-auto px-4 flex flex-col space-y-3"> |
|
|
<a href="#features" class="hover:text-gray-200 transition">Features</a> |
|
|
<a href="#editor" class="hover:text-gray-200 transition">Editor</a> |
|
|
<a href="#tools" class="hover:text-gray-200 transition">Tools</a> |
|
|
<a href="#faq" class="hover:text-gray-200 transition">FAQ</a> |
|
|
</div> |
|
|
</div> |
|
|
</header> |
|
|
|
|
|
|
|
|
<section class="gradient-bg text-white py-16"> |
|
|
<div class="container mx-auto px-4 flex flex-col md:flex-row items-center"> |
|
|
<div class="md:w-1/2 mb-10 md:mb-0"> |
|
|
<h2 class="text-4xl font-bold mb-4">Your Complete PDF Solution</h2> |
|
|
<p class="text-xl mb-6">Scan, edit, modify and manage your PDF documents with our powerful online tools. No installation required.</p> |
|
|
<div class="flex flex-col sm:flex-row space-y-3 sm:space-y-0 sm:space-x-4"> |
|
|
<button class="bg-white text-indigo-700 font-semibold py-3 px-6 rounded-lg hover:bg-gray-100 transition flex items-center justify-center"> |
|
|
<i class="fas fa-upload mr-2"></i> Upload PDF |
|
|
</button> |
|
|
<button class="bg-indigo-800 text-white font-semibold py-3 px-6 rounded-lg hover:bg-indigo-900 transition flex items-center justify-center"> |
|
|
<i class="fas fa-camera mr-2"></i> Scan Document |
|
|
</button> |
|
|
</div> |
|
|
</div> |
|
|
<div class="md:w-1/2 flex justify-center"> |
|
|
<img src="https://cdn-icons-png.flaticon.com/512/337/337946.png" alt="PDF Document" class="w-64 h-64 object-contain"> |
|
|
</div> |
|
|
</div> |
|
|
</section> |
|
|
|
|
|
|
|
|
<section id="features" class="py-16 bg-white"> |
|
|
<div class="container mx-auto px-4"> |
|
|
<h2 class="text-3xl font-bold text-center mb-12">Powerful PDF Features</h2> |
|
|
<div class="grid md:grid-cols-3 gap-8"> |
|
|
|
|
|
<div class="bg-gray-50 p-6 rounded-lg shadow-md hover:shadow-lg transition"> |
|
|
<div class="text-indigo-600 text-4xl mb-4"> |
|
|
<i class="fas fa-camera-retro"></i> |
|
|
</div> |
|
|
<h3 class="text-xl font-semibold mb-2">Scan Documents</h3> |
|
|
<p class="text-gray-600">Turn your physical documents into digital PDFs using your device's camera or scanner.</p> |
|
|
</div> |
|
|
|
|
|
|
|
|
<div class="bg-gray-50 p-6 rounded-lg shadow-md hover:shadow-lg transition"> |
|
|
<div class="text-indigo-600 text-4xl mb-4"> |
|
|
<i class="fas fa-edit"></i> |
|
|
</div> |
|
|
<h3 class="text-xl font-semibold mb-2">Edit Text & Images</h3> |
|
|
<p class="text-gray-600">Modify text, add images, draw shapes, and annotate your PDF documents with ease.</p> |
|
|
</div> |
|
|
|
|
|
|
|
|
<div class="bg-gray-50 p-6 rounded-lg shadow-md hover:shadow-lg transition"> |
|
|
<div class="text-indigo-600 text-4xl mb-4"> |
|
|
<i class="fas fa-lock"></i> |
|
|
</div> |
|
|
<h3 class="text-xl font-semibold mb-2">Secure & Protect</h3> |
|
|
<p class="text-gray-600">Add passwords, watermarks, and redact sensitive information from your PDFs.</p> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
</section> |
|
|
|
|
|
|
|
|
<section id="editor" class="py-16 bg-gray-50"> |
|
|
<div class="container mx-auto px-4"> |
|
|
<h2 class="text-3xl font-bold text-center mb-12">PDF Editor</h2> |
|
|
|
|
|
<div class="bg-white rounded-lg shadow-xl overflow-hidden"> |
|
|
|
|
|
<div class="bg-gray-100 p-4 border-b flex flex-wrap items-center gap-2"> |
|
|
<button class="tool-btn bg-white px-4 py-2 rounded-md border flex items-center"> |
|
|
<i class="fas fa-file-import mr-2"></i> Open |
|
|
</button> |
|
|
<button class="tool-btn bg-white px-4 py-2 rounded-md border flex items-center"> |
|
|
<i class="fas fa-save mr-2"></i> Save |
|
|
</button> |
|
|
<div class="h-8 border-l border-gray-300 mx-2"></div> |
|
|
<button class="tool-btn bg-white px-4 py-2 rounded-md border flex items-center"> |
|
|
<i class="fas fa-font mr-2"></i> Text |
|
|
</button> |
|
|
<button class="tool-btn bg-white px-4 py-2 rounded-md border flex items-center"> |
|
|
<i class="fas fa-image mr-2"></i> Image |
|
|
</button> |
|
|
<button class="tool-btn bg-white px-4 py-2 rounded-md border flex items-center"> |
|
|
<i class="fas fa-highlighter mr-2"></i> Highlight |
|
|
</button> |
|
|
<button class="tool-btn bg-white px-4 py-2 rounded-md border flex items-center"> |
|
|
<i class="fas fa-pen mr-2"></i> Draw |
|
|
</button> |
|
|
<div class="h-8 border-l border-gray-300 mx-2"></div> |
|
|
<button class="tool-btn bg-white px-4 py-2 rounded-md border flex items-center"> |
|
|
<i class="fas fa-lock mr-2"></i> Protect |
|
|
</button> |
|
|
<button class="tool-btn bg-white px-4 py-2 rounded-md border flex items-center"> |
|
|
<i class="fas fa-print mr-2"></i> Print |
|
|
</button> |
|
|
</div> |
|
|
|
|
|
|
|
|
<div class="flex flex-col md:flex-row"> |
|
|
|
|
|
<div class="w-full md:w-1/6 bg-gray-50 p-4 border-r"> |
|
|
<h3 class="font-semibold mb-3">Pages</h3> |
|
|
<div class="space-y-2" id="page-thumbnails"> |
|
|
<div class="page-thumbnail active p-2 bg-white rounded cursor-pointer"> |
|
|
<img src="https://via.placeholder.com/100x140?text=Page+1" alt="Page 1" class="w-full"> |
|
|
<p class="text-xs text-center mt-1">Page 1</p> |
|
|
</div> |
|
|
<div class="page-thumbnail p-2 bg-white rounded cursor-pointer"> |
|
|
<img src="https://via.placeholder.com/100x140?text=Page+2" alt="Page 2" class="w-full"> |
|
|
<p class="text-xs text-center mt-1">Page 2</p> |
|
|
</div> |
|
|
<div class="page-thumbnail p-2 bg-white rounded cursor-pointer"> |
|
|
<img src="https://via.placeholder.com/100x140?text=Page+3" alt="Page 3" class="w-full"> |
|
|
<p class="text-xs text-center mt-1">Page 3</p> |
|
|
</div> |
|
|
</div> |
|
|
<button class="mt-4 w-full bg-indigo-600 text-white py-2 rounded hover:bg-indigo-700 transition flex items-center justify-center"> |
|
|
<i class="fas fa-plus mr-2"></i> Add Page |
|
|
</button> |
|
|
</div> |
|
|
|
|
|
|
|
|
<div class="w-full md:w-5/6 p-6"> |
|
|
<div class="pdf-preview h-96 bg-white rounded-lg flex items-center justify-center relative"> |
|
|
<div class="text-center"> |
|
|
<i class="fas fa-file-pdf text-5xl text-gray-400 mb-4"></i> |
|
|
<p class="text-gray-500">Upload or scan a PDF document to start editing</p> |
|
|
<button class="mt-4 bg-indigo-600 text-white py-2 px-6 rounded hover:bg-indigo-700 transition"> |
|
|
Select File |
|
|
</button> |
|
|
</div> |
|
|
</div> |
|
|
|
|
|
<div class="mt-6 grid grid-cols-2 md:grid-cols-4 gap-4"> |
|
|
<div class="bg-white p-4 rounded-lg shadow-sm border text-center"> |
|
|
<i class="fas fa-file-upload text-3xl text-indigo-600 mb-2"></i> |
|
|
<h3 class="font-medium">Upload PDF</h3> |
|
|
<p class="text-sm text-gray-500 mt-1">From your device</p> |
|
|
</div> |
|
|
<div class="bg-white p-4 rounded-lg shadow-sm border text-center"> |
|
|
<i class="fas fa-camera text-3xl text-indigo-600 mb-2"></i> |
|
|
<h3 class="font-medium">Scan PDF</h3> |
|
|
<p class="text-sm text-gray-500 mt-1">Using your camera</p> |
|
|
</div> |
|
|
<div class="bg-white p-4 rounded-lg shadow-sm border text-center"> |
|
|
<i class="fas fa-cloud-upload-alt text-3xl text-indigo-600 mb-2"></i> |
|
|
<h3 class="font-medium">Cloud Storage</h3> |
|
|
<p class="text-sm text-gray-500 mt-1">Google Drive, Dropbox</p> |
|
|
</div> |
|
|
<div class="bg-white p-4 rounded-lg shadow-sm border text-center"> |
|
|
<i class="fas fa-link text-3xl text-indigo-600 mb-2"></i> |
|
|
<h3 class="font-medium">From URL</h3> |
|
|
<p class="text-sm text-gray-500 mt-1">Enter a web address</p> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
</section> |
|
|
|
|
|
|
|
|
<section id="tools" class="py-16 bg-white"> |
|
|
<div class="container mx-auto px-4"> |
|
|
<h2 class="text-3xl font-bold text-center mb-12">More PDF Tools</h2> |
|
|
|
|
|
<div class="grid md:grid-cols-2 lg:grid-cols-3 gap-6"> |
|
|
|
|
|
<div class="bg-gray-50 rounded-lg overflow-hidden shadow-md hover:shadow-lg transition group"> |
|
|
<div class="bg-indigo-100 p-6 flex justify-center"> |
|
|
<i class="fas fa-file-pdf text-6xl text-indigo-600 group-hover:text-indigo-700 transition"></i> |
|
|
</div> |
|
|
<div class="p-6"> |
|
|
<h3 class="text-xl font-semibold mb-2">Merge PDFs</h3> |
|
|
<p class="text-gray-600 mb-4">Combine multiple PDF files into a single document in seconds.</p> |
|
|
<button class="text-indigo-600 font-medium flex items-center"> |
|
|
Try it now <i class="fas fa-arrow-right ml-2"></i> |
|
|
</button> |
|
|
</div> |
|
|
</div> |
|
|
|
|
|
|
|
|
<div class="bg-gray-50 rounded-lg overflow-hidden shadow-md hover:shadow-lg transition group"> |
|
|
<div class="bg-indigo-100 p-6 flex justify-center"> |
|
|
<i class="fas fa-cut text-6xl text-indigo-600 group-hover:text-indigo-700 transition"></i> |
|
|
</div> |
|
|
<div class="p-6"> |
|
|
<h3 class="text-xl font-semibold mb-2">Split PDF</h3> |
|
|
<p class="text-gray-600 mb-4">Extract pages or split your PDF into multiple files.</p> |
|
|
<button class="text-indigo-600 font-medium flex items-center"> |
|
|
Try it now <i class="fas fa-arrow-right ml-2"></i> |
|
|
</button> |
|
|
</div> |
|
|
</div> |
|
|
|
|
|
|
|
|
<div class="bg-gray-50 rounded-lg overflow-hidden shadow-md hover:shadow-lg transition group"> |
|
|
<div class="bg-indigo-100 p-6 flex justify-center"> |
|
|
<i class="fas fa-file-word text-6xl text-indigo-600 group-hover:text-indigo-700 transition"></i> |
|
|
</div> |
|
|
<div class="p-6"> |
|
|
<h3 class="text-xl font-semibold mb-2">PDF to Word</h3> |
|
|
<p class="text-gray-600 mb-4">Convert your PDF documents to editable Word files.</p> |
|
|
<button class="text-indigo-600 font-medium flex items-center"> |
|
|
Try it now <i class="fas fa-arrow-right ml-2"></i> |
|
|
</button> |
|
|
</div> |
|
|
</div> |
|
|
|
|
|
|
|
|
<div class="bg-gray-50 rounded-lg overflow-hidden shadow-md hover:shadow-lg transition group"> |
|
|
<div class="bg-indigo-100 p-6 flex justify-center"> |
|
|
<i class="fas fa-file-excel text-6xl text-indigo-600 group-hover:text-indigo-700 transition"></i> |
|
|
</div> |
|
|
<div class="p-6"> |
|
|
<h3 class="text-xl font-semibold mb-2">PDF to Excel</h3> |
|
|
<p class="text-gray-600 mb-4">Convert PDF tables to editable Excel spreadsheets.</p> |
|
|
<button class="text-indigo-600 font-medium flex items-center"> |
|
|
Try it now <i class="fas fa-arrow-right ml-2"></i> |
|
|
</button> |
|
|
</div> |
|
|
</div> |
|
|
|
|
|
|
|
|
<div class="bg-gray-50 rounded-lg overflow-hidden shadow-md hover:shadow-lg transition group"> |
|
|
<div class="bg-indigo-100 p-6 flex justify-center"> |
|
|
<i class="fas fa-file-image text-6xl text-indigo-600 group-hover:text-indigo-700 transition"></i> |
|
|
</div> |
|
|
<div class="p-6"> |
|
|
<h3 class="text-xl font-semibold mb-2">PDF to JPG</h3> |
|
|
<p class="text-gray-600 mb-4">Convert each PDF page to a JPG image.</p> |
|
|
<button class="text-indigo-600 font-medium flex items-center"> |
|
|
Try it now <i class="fas fa-arrow-right ml-2"></i> |
|
|
</button> |
|
|
</div> |
|
|
</div> |
|
|
|
|
|
|
|
|
<div class="bg-gray-50 rounded-lg overflow-hidden shadow-md hover:shadow-lg transition group"> |
|
|
<div class="bg-indigo-100 p-6 flex justify-center"> |
|
|
<i class="fas fa-file-signature text-6xl text-indigo-600 group-hover:text-indigo-700 transition"></i> |
|
|
</div> |
|
|
<div class="p-6"> |
|
|
<h3 class="text-xl font-semibold mb-2">Sign PDF</h3> |
|
|
<p class="text-gray-600 mb-4">Add your digital signature to PDF documents.</p> |
|
|
<button class="text-indigo-600 font-medium flex items-center"> |
|
|
Try it now <i class="fas fa-arrow-right ml-2"></i> |
|
|
</button> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
</section> |
|
|
|
|
|
|
|
|
<section id="faq" class="py-16 bg-gray-50"> |
|
|
<div class="container mx-auto px-4"> |
|
|
<h2 class="text-3xl font-bold text-center mb-12">Frequently Asked Questions</h2> |
|
|
|
|
|
<div class="max-w-3xl mx-auto space-y-4"> |
|
|
|
|
|
<div class="bg-white rounded-lg shadow-md overflow-hidden"> |
|
|
<button class="faq-toggle w-full p-4 text-left flex justify-between items-center"> |
|
|
<span class="font-medium">How do I scan a document to PDF?</span> |
|
|
<i class="fas fa-chevron-down transition-transform duration-300"></i> |
|
|
</button> |
|
|
<div class="faq-content px-4 pb-0 max-h-0 overflow-hidden transition-all duration-300"> |
|
|
<div class="pb-4 text-gray-600"> |
|
|
<p>To scan a document to PDF:</p> |
|
|
<ol class="list-decimal pl-5 mt-2 space-y-1"> |
|
|
<li>Click on the "Scan Document" button</li> |
|
|
<li>Allow camera access when prompted</li> |
|
|
<li>Position your document within the frame</li> |
|
|
<li>Capture the image</li> |
|
|
<li>Adjust the edges if needed</li> |
|
|
<li>Click "Create PDF" to generate your document</li> |
|
|
</ol> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
|
|
|
|
|
|
<div class="bg-white rounded-lg shadow-md overflow-hidden"> |
|
|
<button class="faq-toggle w-full p-4 text-left flex justify-between items-center"> |
|
|
<span class="font-medium">Is my PDF document secure?</span> |
|
|
<i class="fas fa-chevron-down transition-transform duration-300"></i> |
|
|
</button> |
|
|
<div class="faq-content px-4 pb-0 max-h-0 overflow-hidden transition-all duration-300"> |
|
|
<div class="pb-4 text-gray-600"> |
|
|
<p>Yes, your documents are completely secure. We use industry-standard encryption for all file transfers and processing. Your files are never stored permanently on our servers unless you explicitly choose to save them.</p> |
|
|
<p class="mt-2">For additional security, you can add passwords and permissions to your PDF documents using our protection tools.</p> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
|
|
|
|
|
|
<div class="bg-white rounded-lg shadow-md overflow-hidden"> |
|
|
<button class="faq-toggle w-full p-4 text-left flex justify-between items-center"> |
|
|
<span class="font-medium">Can I edit text in a scanned PDF?</span> |
|
|
<i class="fas fa-chevron-down transition-transform duration-300"></i> |
|
|
</button> |
|
|
<div class="faq-content px-4 pb-0 max-h-0 overflow-hidden transition-all duration-300"> |
|
|
<div class="pb-4 text-gray-600"> |
|
|
<p>Scanned PDFs are initially image-based. To edit text in a scanned PDF:</p> |
|
|
<ol class="list-decimal pl-5 mt-2 space-y-1"> |
|
|
<li>Use our OCR (Optical Character Recognition) tool to convert the scanned image to editable text</li> |
|
|
<li>Once processed, you can edit the text directly in the PDF editor</li> |
|
|
<li>Save your changes to the document</li> |
|
|
</ol> |
|
|
<p class="mt-2">Note: OCR accuracy depends on the quality of the original scan.</p> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
|
|
|
|
|
|
<div class="bg-white rounded-lg shadow-md overflow-hidden"> |
|
|
<button class="faq-toggle w-full p-4 text-left flex justify-between items-center"> |
|
|
<span class="font-medium">What file formats can I convert to PDF?</span> |
|
|
<i class="fas fa-chevron-down transition-transform duration-300"></i> |
|
|
</button> |
|
|
<div class="faq-content px-4 pb-0 max-h-0 overflow-hidden transition-all duration-300"> |
|
|
<div class="pb-4 text-gray-600"> |
|
|
<p>You can convert the following file formats to PDF:</p> |
|
|
<div class="grid grid-cols-2 md:grid-cols-3 gap-2 mt-2"> |
|
|
<div class="flex items-center"> |
|
|
<i class="fas fa-file-word text-indigo-600 mr-2"></i> |
|
|
<span>Word (.doc, .docx)</span> |
|
|
</div> |
|
|
<div class="flex items-center"> |
|
|
<i class="fas fa-file-excel text-indigo-600 mr-2"></i> |
|
|
<span>Excel (.xls, .xlsx)</span> |
|
|
</div> |
|
|
<div class="flex items-center"> |
|
|
<i class="fas fa-file-powerpoint text-indigo-600 mr-2"></i> |
|
|
<span>PowerPoint (.ppt, .pptx)</span> |
|
|
</div> |
|
|
<div class="flex items-center"> |
|
|
<i class="fas fa-file-image text-indigo-600 mr-2"></i> |
|
|
<span>Images (.jpg, .png)</span> |
|
|
</div> |
|
|
<div class="flex items-center"> |
|
|
<i class="fas fa-file-alt text-indigo-600 mr-2"></i> |
|
|
<span>Text (.txt)</span> |
|
|
</div> |
|
|
<div class="flex items-center"> |
|
|
<i class="fas fa-file-code text-indigo-600 mr-2"></i> |
|
|
<span>HTML (.html)</span> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
</section> |
|
|
|
|
|
|
|
|
<section class="gradient-bg text-white py-16"> |
|
|
<div class="container mx-auto px-4 text-center"> |
|
|
<h2 class="text-3xl font-bold mb-6">Ready to Master Your PDFs?</h2> |
|
|
<p class="text-xl mb-8 max-w-2xl mx-auto">Join thousands of users who trust PDF Master for all their document needs. No registration required.</p> |
|
|
<button class="bg-white text-indigo-700 font-semibold py-3 px-8 rounded-lg hover:bg-gray-100 transition text-lg"> |
|
|
Start Editing Now <i class="fas fa-arrow-right ml-2"></i> |
|
|
</button> |
|
|
</div> |
|
|
</section> |
|
|
|
|
|
|
|
|
<footer class="bg-gray-900 text-white py-12"> |
|
|
<div class="container mx-auto px-4"> |
|
|
<div class="grid md:grid-cols-4 gap-8"> |
|
|
<div> |
|
|
<div class="flex items-center space-x-2 mb-4"> |
|
|
<i class="fas fa-file-pdf text-2xl text-indigo-400"></i> |
|
|
<h3 class="text-xl font-bold">PDF Master</h3> |
|
|
</div> |
|
|
<p class="text-gray-400">Your complete solution for scanning, editing and managing PDF documents online.</p> |
|
|
</div> |
|
|
|
|
|
<div> |
|
|
<h4 class="text-lg font-semibold mb-4">Quick Links</h4> |
|
|
<ul class="space-y-2 text-gray-400"> |
|
|
<li><a href="#" class="hover:text-white transition">Home</a></li> |
|
|
<li><a href="#features" class="hover:text-white transition">Features</a></li> |
|
|
<li><a href="#editor" class="hover:text-white transition">Editor</a></li> |
|
|
<li><a href="#tools" class="hover:text-white transition">Tools</a></li> |
|
|
<li><a href="#faq" class="hover:text-white transition">FAQ</a></li> |
|
|
</ul> |
|
|
</div> |
|
|
|
|
|
<div> |
|
|
<h4 class="text-lg font-semibold mb-4">PDF Tools</h4> |
|
|
<ul class="space-y-2 text-gray-400"> |
|
|
<li><a href="#" class="hover:text-white transition">Merge PDF</a></li> |
|
|
<li><a href="#" class="hover:text-white transition">Split PDF</a></li> |
|
|
<li><a href="#" class="hover:text-white transition">Compress PDF</a></li> |
|
|
<li><a href="#" class="hover:text-white transition">PDF to Word</a></li> |
|
|
<li><a href="#" class="hover:text-white transition">PDF to Excel</a></li> |
|
|
</ul> |
|
|
</div> |
|
|
|
|
|
<div> |
|
|
<h4 class="text-lg font-semibold mb-4">Connect With Us</h4> |
|
|
<div class="flex space-x-4 mb-4"> |
|
|
<a href="#" class="text-gray-400 hover:text-white transition text-xl"><i class="fab fa-facebook"></i></a> |
|
|
<a href="#" class="text-gray-400 hover:text-white transition text-xl"><i class="fab fa-twitter"></i></a> |
|
|
<a href="#" class="text-gray-400 hover:text-white transition text-xl"><i class="fab fa-instagram"></i></a> |
|
|
<a href="#" class="text-gray-400 hover:text-white transition text-xl"><i class="fab fa-linkedin"></i></a> |
|
|
</div> |
|
|
<p class="text-gray-400">[email protected]</p> |
|
|
</div> |
|
|
</div> |
|
|
|
|
|
<div class="border-t border-gray-800 mt-12 pt-8 text-center text-gray-400"> |
|
|
<p>© 2023 PDF Master. All rights reserved.</p> |
|
|
</div> |
|
|
</div> |
|
|
</footer> |
|
|
|
|
|
<script> |
|
|
|
|
|
document.getElementById('menu-toggle').addEventListener('click', function() { |
|
|
const menu = document.getElementById('mobile-menu'); |
|
|
menu.classList.toggle('hidden'); |
|
|
}); |
|
|
|
|
|
|
|
|
document.querySelectorAll('.faq-toggle').forEach(button => { |
|
|
button.addEventListener('click', () => { |
|
|
const content = button.nextElementSibling; |
|
|
const icon = button.querySelector('i'); |
|
|
|
|
|
|
|
|
if (content.style.maxHeight) { |
|
|
content.style.maxHeight = null; |
|
|
icon.style.transform = 'rotate(0deg)'; |
|
|
} else { |
|
|
content.style.maxHeight = content.scrollHeight + 'px'; |
|
|
icon.style.transform = 'rotate(180deg)'; |
|
|
} |
|
|
}); |
|
|
}); |
|
|
|
|
|
|
|
|
document.querySelectorAll('.page-thumbnail').forEach(thumbnail => { |
|
|
thumbnail.addEventListener('click', () => { |
|
|
document.querySelectorAll('.page-thumbnail').forEach(t => t.classList.remove('active')); |
|
|
thumbnail.classList.add('active'); |
|
|
}); |
|
|
}); |
|
|
|
|
|
|
|
|
document.querySelector('.pdf-preview button').addEventListener('click', function() { |
|
|
const preview = document.querySelector('.pdf-preview'); |
|
|
preview.innerHTML = ` |
|
|
<div class="w-full h-full flex flex-col items-center justify-center p-8"> |
|
|
<div class="animate-pulse mb-4"> |
|
|
<i class="fas fa-file-pdf text-5xl text-indigo-600"></i> |
|
|
</div> |
|
|
<p class="text-gray-600 mb-4">Processing your document...</p> |
|
|
<div class="w-full bg-gray-200 rounded-full h-2.5"> |
|
|
<div class="bg-indigo-600 h-2.5 rounded-full" style="width: 45%"></div> |
|
|
</div> |
|
|
</div> |
|
|
`; |
|
|
|
|
|
|
|
|
setTimeout(() => { |
|
|
preview.innerHTML = ` |
|
|
<div class="w-full h-full relative"> |
|
|
<iframe src="https://mozilla.github.io/pdf.js/web/viewer.html" class="w-full h-full border-0"></iframe> |
|
|
<div class="absolute bottom-4 right-4 flex space-x-2"> |
|
|
<button class="bg-indigo-600 text-white p-2 rounded-full hover:bg-indigo-700 transition"> |
|
|
<i class="fas fa-plus"></i> |
|
|
</button> |
|
|
<button class="bg-indigo-600 text-white p-2 rounded-full hover:bg-indigo-700 transition"> |
|
|
<i class="fas fa-download"></i> |
|
|
</button> |
|
|
</div> |
|
|
</div> |
|
|
`; |
|
|
}, 3000); |
|
|
}); |
|
|
</script> |
|
|
<p style="border-radius: 8px; text-align: center; font-size: 12px; color: #fff; margin-top: 16px;position: fixed; left: 8px; bottom: 8px; z-index: 10; background: rgba(0, 0, 0, 0.8); padding: 4px 8px;">Made with <img src="https://enzostvs-deepsite.hf.space/logo.svg" alt="DeepSite Logo" style="width: 16px; height: 16px; vertical-align: middle;display:inline-block;margin-right:3px;filter:brightness(0) invert(1);"><a href="https://enzostvs-deepsite.hf.space" style="color: #fff;text-decoration: underline;" target="_blank" >DeepSite</a> - 🧬 <a href="https://enzostvs-deepsite.hf.space?remix=Whoaa57/meow" style="color: #fff;text-decoration: underline;" target="_blank" >Remix</a></p></body> |
|
|
</html> |
