More for Convert.ist
<!<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Universal PDF Converter | Premium Solution</title>
<style>
:root {
--gold: #C6A961; /* Warmer, richer gold */
--black: #0A0A0A; /* Deeper black */
--silver: #E5E4E2; /* Brighter, more metallic silver */
--titanium: #8A8D8F; /* Cooler titanium shade */
--light-bg: #1A1A1A; /* Slightly lighter than black */
--cream: #F5F3EE; /* Luxurious cream for text contrast */
--dark-gold: #B38B2D; /* Dark gold for accents */
--bronze: #CD7F32; /* Bronze for secondary accents */
}
body {
font-family: 'Montserrat', 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
background-color: var(--black);
color: var(--cream);
margin: 0;
padding: 0;
line-height: 1.6;
}
.container {
max-width: 1200px;
margin: 0 auto;
padding: 20px;
}
header {
background: linear-gradient(135deg, var(--black), #121212);
padding: 40px 0;
border-bottom: 2px solid var(--gold);
text-align: center;
box-shadow: 0 4px 30px rgba(198, 169, 97, 0.1);
}
h1 {
color: var(--gold);
font-size: 2.8rem;
margin-bottom: 15px;
letter-spacing: 1px;
text-shadow: 0 2px 4px rgba(0, 0, 0, 0.3);
}
.subtitle {
color: var(--titanium);
font-size: 1.3rem;
margin-bottom: 30px;
font-weight: 300;
}
.converter-container {
display: flex;
flex-wrap: wrap;
gap: 30px;
margin-top: 50px;
}
.converter-card {
background: linear-gradient(145deg, #1E1E1E, #171717);
border: 1px solid rgba(198, 169, 97, 0.2);
border-radius: 10px;
padding: 30px;
flex: 1;
min-width: 300px;
box-shadow: 0 8px 30px rgba(0, 0, 0, 0.4);
transition: all 0.4s cubic-bezier(0.25, 0.8, 0.25, 1);
position: relative;
overflow: hidden;
}
.converter-card::before {
content: '';
position: absolute;
top: 0;
left: 0;
right: 0;
height: 4px;
background: linear-gradient(90deg, var(--gold), var(--bronze));
}
.converter-card:hover {
transform: translateY(-8px);
box-shadow: 0 15px 35px rgba(0, 0, 0, 0.5);
border-color: rgba(198, 169, 97, 0.4);
}
.card-header {
color: var(--gold);
font-size: 1.6rem;
margin-bottom: 25px;
padding-bottom: 15px;
border-bottom: 1px solid rgba(198, 169, 97, 0.3);
font-weight: 500;
}
.btn {
background: linear-gradient(to right, var(--gold), var(--dark-gold));
color: var(--black);
border: none;
padding: 14px 30px;
border-radius: 6px;
cursor: pointer;
font-weight: 600;
transition: all 0.3s;
display: inline-block;
margin: 15px 0;
letter-spacing: 0.5px;
text-transform: uppercase;
font-size: 0.9rem;
box-shadow: 0 4px 15px rgba(198, 169, 97, 0.3);
position: relative;
overflow: hidden;
}
.btn::after {
content: '';
position: absolute;
top: 0;
left: -100%;
width: 100%;
height: 100%;
background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.2), transparent);
transition: 0.5s;
}
.btn:hover {
background: linear-gradient(to right, var(--dark-gold), var(--gold));
box-shadow: 0 6px 20px rgba(198, 169, 97, 0.5);
transform: translateY(-2px);
}
.btn:hover::after {
left: 100%;
}
.file-info {
margin: 20px 0;
color: var(--titanium);
font-size: 0.95rem;
padding: 10px;
background: rgba(138, 141, 143, 0.1);
border-radius: 4px;
border-left: 3px solid var(--gold);
}
select, input[type="range"] {
width: 100%;
padding: 12px;
margin: 12px 0;
background: rgba(26, 26, 26, 0.8);
border: 1px solid var(--titanium);
color: var(--cream);
border-radius: 6px;
font-size: 0.95rem;
transition: all 0.3s;
}
select:focus, input[type="range"]:focus {
outline: none;
border-color: var(--gold);
box-shadow: 0 0 0 2px rgba(198, 169, 97, 0.3);
}
.options {
margin: 25px 0;
}
.option-group {
margin-bottom: 20px;
}
.option-label {
display: block;
margin-bottom: 8px;
color: var(--silver);
font-size: 0.95rem;
font-weight: 500;
}
.premium-badge {
background: linear-gradient(to right, var(--gold), var(--bronze));
color: var(--black);
padding: 4px 10px;
border-radius: 4px;
font-size: 0.75rem;
font-weight: bold;
margin-left: 10px;
vertical-align: middle;
text-transform: uppercase;
letter-spacing: 1px;
}
footer {
text-align: center;
margin-top: 70px;
padding: 30px;
color: var(--titanium);
border-top: 1px solid rgba(138, 141, 143, 0.2);
font-size: 0.9rem;
background: linear-gradient(180deg, rgba(10, 10, 10, 0), rgba(10, 10, 10, 1));
}
.features {
display: flex;
flex-wrap: wrap;
gap: 25px;
margin: 50px 0;
}
.feature {
flex: 1;
min-width: 200px;
background: linear-gradient(145deg, #1E1E1E, #171717);
padding: 25px;
border-radius: 10px;
border-left: 4px solid var(--gold);
transition: all 0.3s;
box-shadow: 0 5px 20px rgba(0, 0, 0, 0.3);
}
.feature:hover {
transform: translateY(-5px);
box-shadow: 0 10px 25px rgba(0, 0, 0, 0.4);
}
.feature-title {
color: var(--gold);
margin-bottom: 15px;
font-size: 1.2rem;
font-weight: 500;
}
@media (max-width: 768px) {
.converter-card {
min-width: 100%;
}
h1 {
font-size: 2.2rem;
}
}
</style>
<link href="https://fonts.googleapis.com/css2?family=Montserrat:wght@300;400;500;600;700&display=swap" rel="stylesheet">
</head>
<body>
<header>
<div class="container">
<h1>Universal PDF Converter</h1>
<p class="subtitle">The most comprehensive PDF solution - all in your browser with no uploads</p>
</div>
</header>
<div class="container">
<div class="features">
<div class="feature">
<h3 class="feature-title">100% Private</h3>
<p>Files never leave your computer. All processing happens in your browser.</p>
</div>
<div class="feature">
<h3 class="feature-title">Premium Quality</h3>
<p>Professional-grade conversions with customizable settings.</p>
</div>
<div class="feature">
<h3 class="feature-title">Multi-Format</h3>
<p>Convert to and from PDF with various file formats.</p>
</div>
</div>
<div class="converter-container">
<!-- PDF to Other Formats -->
<div class="converter-card">
<h2 class="card-header">PDF to Other Formats</h2>
<div class="options">
<div class="option-group">
<label class="option-label">Output Format:</label>
<select id="pdf-output-format">
<option value="jpg">JPG Images</option>
<option value="png">PNG Images</option>
<option value="txt">Text (OCR)</option>
<option value="word">Word Document</option>
<option value="html">HTML Web Page</option>
</select>
</div>
<div class="option-group" id="pdf-quality-group">
<label class="option-label">Quality: <span id="pdf-quality-value">85</span>%</label>
<input type="range" id="pdf-quality" min="1" max="100" value="85">
</div>
<div class="option-group" id="pdf-pages-group">
<label class="option-label">Pages to Convert:</label>
<select id="pdf-pages">
<option value="all">All Pages</option>
<option value="custom">Custom Range</option>
</select>
</div>
</div>
<input type="file" id="pdf-input" accept=".pdf" style="display: none;">
<button class="btn" onclick="document.getElementById('pdf-input').click()">Select PDF File</button>
<div class="file-info" id="pdf-file-info">No file selected</div>
<button class="btn" id="convert-pdf-btn" disabled>Convert PDF</button>
</div>
<!-- Other Formats to PDF -->
<div class="converter-card">
<h2 class="card-header">Other Formats to PDF</h2>
<div class="options">
<div class="option-group">
<label class="option-label">Input Format:</label>
<select id="input-format">
<option value="images">Images (JPG, PNG, etc.)</option>
<option value="word">Word Document</option>
<option value="excel">Excel Spreadsheet</option>
<option value="ppt">PowerPoint</option>
<option value="html">HTML Web Page</option>
<option value="text">Text Files</option>
</select>
</div>
<div class="option-group">
<label class="option-label">PDF Options:</label>
<select id="pdf-options">
<option value="standard">Standard Quality</option>
<option value="high">High Quality</option>
<option value="archive">Archive Quality</option>
<option value="web">Optimized for Web</option>
</select>
</div>
<div class="option-group">
<label class="option-label">Page Size:</label>
<select id="page-size">
<option value="a4">A4</option>
<option value="letter">Letter</option>
<option value="legal">Legal</option>
<option value="custom">Custom</option>
</select>
</div>
</div>
<input type="file" id="to-pdf-input" accept="image/*,.doc,.docx,.xls,.xlsx,.ppt,.pptx,.txt,.html" style="display: none;" multiple>
<button class="btn" onclick="document.getElementById('to-pdf-input').click()">Select File(s)</button>
<div class="file-info" id="to-pdf-file-info">No files selected</div>
<button class="btn" id="convert-to-pdf-btn" disabled>Create PDF</button>
</div>
<!-- PDF Tools -->
<div class="converter-card">
<h2 class="card-header">PDF Tools <span class="premium-badge">PREMIUM</span></h2>
<div class="options">
<div class="option-group">
<label class="option-label">Tool:</label>
<select id="pdf-tool">
<option value="merge">Merge PDFs</option>
<option value="split">Split PDF</option>
<option value="compress">Compress PDF</option>
<option value="protect">Password Protect</option>
<option value="unlock">Remove Password</option>
<option value="rotate">Rotate Pages</option>
<option value="extract">Extract Pages</option>
</select>
</div>
<div class="option-group" id="tool-options-group">
<!-- Dynamic options will appear here based on selected tool -->
<div id="merge-options" class="tool-option">
<label class="option-label">Select multiple PDFs to merge:</label>
</div>
<div id="split-options" class="tool-option" style="display:none;">
<label class="option-label">Split after page:</label>
<input type="number" id="split-page" min="1" value="1" style="width:100%;padding:10px;background:var(--light-bg);border:1px solid var(--titanium);color:var(--cream);border-radius:4px;">
</div>
<div id="compress-options" class="tool-option" style="display:none;">
<label class="option-label">Compression Level:</label>
<select id="compress-level">
<option value="low">Low (better quality)</option>
<option value="medium" selected>Medium (recommended)</option>
<option value="high">High (smaller file)</option>
</select>
</div>
</div>
</div>
<input type="file" id="pdf-tool-input" accept=".pdf" style="display: none;" multiple>
<button class="btn" onclick="document.getElementById('pdf-tool-input').click()">Select PDF(s)</button>
<div class="file-info" id="pdf-tool-file-info">No files selected</div>
<button class="btn " id="process-pdf-btn" disabled>Process PDF</button>
</div>
</div>
</div>
<footer>
<div class="container">
<p>Universal PDF Converter © 2023 | All processing happens locally in your browser - no files are uploaded to any server.</p>
</div>
</footer>
<script>
// File selection handlers
document.getElementById('pdf-input').addEventListener('change', function(e) {
const file = e.target.files[0];
if (file) {
document.getElementById('pdf-file-info').textContent = `${file.name} (${formatFileSize(file.size)})`;
document.getElementById('convert-pdf-btn').disabled = false;
}
});
document.getElementById('to-pdf-input').addEventListener('change', function(e) {
const files = e.target.files;
if (files.length > 0) {
let totalSize = 0;
for (let i = 0; i < files.length; i++) {
totalSize += files[i].size;
}
if (files.length === 1) {
document.getElementById('to-pdf-file-info').textContent = `${files[0].name} (${formatFileSize(files[0].size)})`;
} else {
document.getElementById('to-pdf-file-info').textContent = `${files.length} files selected (${formatFileSize(totalSize)})`;
}
document.getElementById('convert-to-pdf-btn').disabled = false;
}
});
document.getElementById('pdf-tool-input').addEventListener('change', function(e) {
const files = e.target.files;
if (files.length > 0) {
let totalSize = 0;
for (let i = 0; i < files.length; i++) {
totalSize += files[i].size;
}
if (files.length === 1) {
document.getElementById('pdf-tool-file-info').textContent = `${files[0].name} (${formatFileSize(files[0].size)})`;
} else {
document.getElementById('pdf-tool-file-info').textContent = `${files.length} PDFs selected (${formatFileSize(totalSize)})`;
}
document.getElementById('process-pdf-btn').disabled = false;
}
});
// Tool options switcher
document.getElementById('pdf-tool').addEventListener('change', function(e) {
// Hide all tool options
document.querySelectorAll('.tool-option').forEach(option => {
option.style.display = 'none';
});
// Show selected tool options
const selectedTool = e.target.value;
document.getElementById(`${selectedTool}-options`).style.display = 'block';
// Update file input accept attribute if needed
if (selectedTool === 'merge') {
document.getElementById('pdf-tool-input').accept = '.pdf';
document.getElementById('pdf-tool-input').multiple = true;
} else {
document.getElementById('pdf-tool-input').accept = '.pdf';
document.getElementById('pdf-tool-input').multiple = false;
}
});
// Quality slider value display
document.getElementById('pdf-quality').addEventListener('input', function(e) {
document.getElementById('pdf-quality-value').textContent = e.target.value;
});
// Convert buttons - in a real app these would have actual conversion logic
document.getElementById('convert-pdf-btn').addEventListener('click', function() {
alert('In a complete implementation, this would convert the PDF to the selected format.\nAll processing would happen in your browser with no file uploads.');
});
document.getElementById('convert-to-pdf-btn').addEventListener('click', function() {
alert('In a complete implementation, this would convert the selected files to a PDF.\nAll processing would happen in your browser with no file uploads.');
});
document.getElementById('process-pdf-btn').addEventListener('click', function() {
const tool = document.getElementById('pdf-tool').value;
alert(`In a complete implementation, this would ${tool} the selected PDF(s).\nAll processing would happen in your browser with no file uploads.`);
});
// Helper function to format file size
function formatFileSize(bytes) {
if (bytes === 0) return '0 Bytes';
const k = 1024;
const sizes = ['Bytes', 'KB', 'MB', 'GB'];
const i = Math.floor(Math.log(bytes) / Math.log(k));
return parseFloat((bytes / Math.pow(k, i)).toFixed(2)) + ' ' + sizes[i];
}
</script>
</body>
</html>
Comments
Post a Comment