<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Word to PDF Converter for Blogger</title>
<style>
* {
box-sizing: border-box;
margin: 0;
padding: 0;
font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
}
body {
background: linear-gradient(135deg, #f5f7fa 0%, #c3cfe2 100%);
color: #333;
line-height: 1.6;
padding: 20px;
min-height: 100vh;
}
.container {
max-width: 1000px;
margin: 0 auto;
background: white;
border-radius: 12px;
box-shadow: 0 10px 30px rgba(0, 0, 0, 0.1);
overflow: hidden;
}
header {
background: #4285f4;
color: white;
padding: 25px;
text-align: center;
}
h1 {
font-size: 2.2rem;
margin-bottom: 10px;
}
.subtitle {
font-size: 1.1rem;
opacity: 0.9;
}
.content {
padding: 30px;
}
.instructions {
background: #f8f9fa;
border-left: 4px solid #4285f4;
padding: 20px;
margin-bottom: 30px;
border-radius: 0 8px 8px 0;
}
.instructions h2 {
color: #4285f4;
margin-bottom: 15px;
}
.steps {
list-style-type: none;
counter-reset: step-counter;
}
.steps li {
margin-bottom: 15px;
padding-left: 30px;
position: relative;
}
.steps li:before {
content: counter(step-counter);
counter-increment: step-counter;
position: absolute;
left: 0;
top: 0;
background: #4285f4;
color: white;
width: 22px;
height: 22px;
border-radius: 50%;
text-align: center;
line-height: 22px;
font-size: 0.8rem;
font-weight: bold;
}
.upload-container {
border: 2px dashed #ccc;
border-radius: 8px;
padding: 30px;
text-align: center;
margin-bottom: 30px;
transition: all 0.3s ease;
}
.upload-container:hover {
border-color: #4285f4;
}
.upload-container p {
margin-bottom: 20px;
color: #666;
}
.file-input {
display: none;
}
.file-label {
display: inline-block;
background: #4285f4;
color: white;
padding: 12px 24px;
border-radius: 6px;
cursor: pointer;
transition: background 0.3s ease;
font-weight: 500;
}
.file-label:hover {
background: #3367d6;
}
.convert-btn {
display: block;
width: 100%;
background: #0f9d58;
color: white;
border: none;
padding: 15px;
border-radius: 6px;
font-size: 1.1rem;
cursor: pointer;
transition: background 0.3s ease;
margin-top: 20px;
font-weight: 600;
}
.convert-btn:hover {
background: #0b8045;
}
.convert-btn:disabled {
background: #ccc;
cursor: not-allowed;
}
.file-info {
margin-top: 15px;
font-style: italic;
color: #666;
}
.result-container {
display: none;
margin-top: 30px;
}
.result-container h2 {
color: #4285f4;
margin-bottom: 15px;
}
.pdf-viewer {
width: 100%;
height: 500px;
border: 1px solid #ddd;
border-radius: 8px;
margin-bottom: 20px;
}
.download-link {
display: inline-block;
background: #4285f4;
color: white;
padding: 10px 20px;
border-radius: 6px;
text-decoration: none;
transition: background 0.3s ease;
}
.download-link:hover {
background: #3367d6;
}
.status {
margin-top: 20px;
padding: 15px;
border-radius: 6px;
text-align: center;
display: none;
}
.status.success {
background: #e6f4ea;
color: #0f9d58;
border: 1px solid #0f9d58;
}
.status.error {
background: #fce8e6;
color: #c5221f;
border: 1px solid #c5221f;
}
.status.info {
background: #e8f0fe;
color: #1a73e8;
border: 1px solid #1a73e8;
}
footer {
text-align: center;
padding: 20px;
color: #666;
font-size: 0.9rem;
border-top: 1px solid #eee;
}
@media (max-width: 768px) {
.container {
border-radius: 0;
}
header {
padding: 20px 15px;
}
h1 {
font-size: 1.8rem;
}
.content {
padding: 20px;
}
.pdf-viewer {
height: 400px;
}
}
</style>
</head>
<body>
<div class="container">
<header>
<h1>Word to PDF Converter</h1>
<p class="subtitle">Easily convert and embed Word documents in your Blogger posts</p>
</header>
<div class="content">
<div class="instructions">
<h2>How to Use This Converter</h2>
<ol class="steps">
<li>Select a Word document (.doc or .docx) using the button below</li>
<li>Click the "Convert to PDF" button to process your file</li>
<li>After conversion, the PDF will be displayed and ready to embed</li>
<li>Use the provided embed code in your Blogger post</li>
</ol>
</div>
<div class="upload-container">
<p>Select a Word document to convert</p>
<input type="file" id="file-input" accept=".doc,.docx,application/msword,application/vnd.openxmlformats-officedocument.wordprocessingml.document" class="file-input">
<label for="file-input" class="file-label">Choose File</label>
<div id="file-info" class="file-info"></div>
<button id="convert-button" class="convert-btn" disabled>Convert to PDF</button>
</div>
<div id="status" class="status"></div>
<div id="result-container" class="result-container">
<h2>Converted PDF</h2>
<div id="pdf-viewer" class="pdf-viewer"></div>
<p>Copy and paste this code into your Blogger post:</p>
<textarea id="embed-code" style="width: 100%; height: 80px; padding: 10px; border-radius: 6px; border: 1px solid #ddd; margin-bottom: 15px; font-family: monospace;" readonly></textarea>
<a href="#" id="download-link" class="download-link" target="_blank">Download PDF</a>
</div>
</div>
<footer>
<p>This tool uses Google Drive API for conversion. Your files are processed securely.</p>
</footer>
</div>
<script src="https://apis.google.com/js/api.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
<script>
// DOM elements
const fileInput = document.getElementById('file-input');
const convertButton = document.getElementById('convert-button');
const fileInfo = document.getElementById('file-info');
const resultContainer = document.getElementById('result-container');
const pdfViewer = document.getElementById('pdf-viewer');
const embedCode = document.getElementById('embed-code');
const downloadLink = document.getElementById('download-link');
const status = document.getElementById('status');
// Google Drive API configuration (replace with your actual values)
const API_KEY = 'YOUR_API_KEY';
const CLIENT_ID = 'YOUR_CLIENT_ID';
// Update file info when a file is selected
fileInput.addEventListener('change', function() {
if (this.files.length > 0) {
const file = this.files[0];
fileInfo.textContent = `Selected file: ${file.name} (${formatFileSize(file.size)})`;
convertButton.disabled = false;
} else {
fileInfo.textContent = '';
convertButton.disabled = true;
}
});
// Convert button click handler
convertButton.addEventListener('click', function() {
if (fileInput.files.length === 0) {
showStatus('Please select a file first', 'error');
return;
}
// Initialize and authenticate with Google Drive API
initDriveApi();
});
// Format file size to human-readable format
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];
}
// Show status message
function showStatus(message, type = 'info') {
status.textContent = message;
status.className = 'status ' + type;
status.style.display = 'block';
// Auto-hide success messages after 5 seconds
if (type === 'success') {
setTimeout(() => {
status.style.display = 'none';
}, 5000);
}
}
// Load the Google Drive API
function loadDriveApi() {
gapi.load('client', initDriveApi);
}
// Initialize the Google Drive API
function initDriveApi() {
showStatus('Initializing Google Drive API...', 'info');
gapi.client.init({
apiKey: API_KEY,
clientId: CLIENT_ID,
discoveryDocs: ['https://www.googleapis.com/discovery/v1/apis/drive/v3/rest'],
scope: 'https://www.googleapis.com/auth/drive.file'
}).then(function() {
showStatus('Google Drive API initialized. Uploading file...', 'info');
uploadAndConvert();
}).catch(function(error) {
showStatus('Error initializing Google Drive API: ' + error.details, 'error');
console.error('Error initializing Google Drive API:', error);
});
}
// Upload the file and convert to PDF
function uploadAndConvert() {
const file = fileInput.files[0];
const metadata = {
name: file.name,
mimeType: 'application/vnd.google-apps.document'
};
const reader = new FileReader();
reader.onload = function(e) {
const content = e.target.result;
const fileData = new Blob([content], { type: file.type });
const accessToken = gapi.auth.getToken().access_token;
const form = new FormData();
form.append('metadata', new Blob([JSON.stringify(metadata)], { type: 'application/json' }));
form.append('file', fileData);
// Upload file to Google Drive
$.ajax({
url: 'https://www.googleapis.com/upload/drive/v3/files?uploadType=multipart',
type: 'POST',
headers: {
'Authorization': 'Bearer ' + accessToken
},
data: form,
processData: false,
contentType: false,
success: function(data) {
showStatus('File uploaded. Converting to PDF...', 'info');
// Convert uploaded file to PDF
const fileId = data.id;
const convertedFileName = file.name.replace(/\.[^/.]+$/, "") + '.pdf';
gapi.client.drive.files.export({
fileId: fileId,
mimeType: 'application/pdf'
}).then(function(response) {
// For demonstration purposes, we'll use a placeholder
// In a real implementation, you would use the actual PDF URL
const pdfUrl = 'https://example.com/converted-file.pdf';
// Create embed element
const embedHtml = `<embed src="${pdfUrl}" width="100%" height="100%" type="application/pdf">`;
// Display the PDF
pdfViewer.innerHTML = embedHtml;
// Set embed code
embedCode.value = embedHtml;
// Set download link
downloadLink.href = pdfUrl;
downloadLink.download = convertedFileName;
// Show result container
resultContainer.style.display = 'block';
showStatus('Conversion successful!', 'success');
// Scroll to results
resultContainer.scrollIntoView({ behavior: 'smooth' });
}).catch(function(error) {
showStatus('Error converting file: ' + error.result.error.message, 'error');
console.error('Error converting file:', error);
});
},
error: function(error) {
showStatus('Error uploading file: ' + error.responseJSON.error.message, 'error');
console.error('Error uploading file:', error);
}
});
};
reader.readAsArrayBuffer(file);
}
// Initialize the Google Drive API on page load
function handleClientLoad() {
showStatus('Loading Google Drive API...', 'info');
gapi.load('client:auth2', loadDriveApi);
}
// Start the process when the page loads
window.onload = function() {
// For demonstration purposes, we're not automatically initializing the API
// In a real implementation, you would call handleClientLoad() here
showStatus('Please select a Word document to convert', 'info');
};
</script>
</body>
</html>