pdf1 / local_client.html
kalhdrawi's picture
Upload 8 files
f703972 verified
<!DOCTYPE html>
<html lang="ar" dir="rtl">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>محول PDF السريع</title>
<style>
body {
font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
display: flex;
justify-content: center;
align-items: center;
height: 100vh;
margin: 0;
background-color: #fce4ec;
/* Light pink background */
color: #333;
}
.container {
background-color: white;
padding: 2rem;
border-radius: 15px;
box-shadow: 0 10px 25px rgba(0, 0, 0, 0.1);
text-align: center;
width: 90%;
max-width: 500px;
}
h1 {
color: #d81b60;
/* Dark pink */
margin-bottom: 2rem;
}
.upload-area {
border: 2px dashed #d81b60;
padding: 2rem;
border-radius: 10px;
cursor: pointer;
transition: background 0.3s;
margin-bottom: 1rem;
}
.upload-area:hover {
background-color: #fff0f5;
}
button {
background-color: #d81b60;
color: white;
border: none;
padding: 12px 30px;
font-size: 1.1rem;
border-radius: 25px;
cursor: pointer;
transition: transform 0.2s, background 0.2s;
width: 100%;
}
button:hover {
background-color: #ad1457;
transform: scale(1.02);
}
button:disabled {
background-color: #ccc;
cursor: not-allowed;
}
#status {
margin-top: 1rem;
font-weight: bold;
}
</style>
</head>
<body>
<div class="container">
<h1>📄 تحويل Word إلى PDF</h1>
<div class="upload-area" id="dropArea" onclick="document.getElementById('fileInput').click()">
<p>انقر لاختيار ملف (Word, RTF, ODT)</p>
<input type="file" id="fileInput" accept=".doc,.docx,.odt,.rtf" style="display: none"
onchange="handleFileSelect(event)">
<p id="fileName" style="color: #666; font-size: 0.9em;"></p>
</div>
<button id="convertBtn" onclick="convertFile()" disabled>🚀 تحويل سريع</button>
<p id="status"></p>
</div>
<script>
const API_URL = "https://kalhdrawi-pdf1.hf.space/api/convert";
function handleFileSelect(event) {
const file = event.target.files[0];
if (file) {
document.getElementById('fileName').textContent = `تم اختيار: ${file.name}`;
document.getElementById('convertBtn').disabled = false;
}
}
async function convertFile() {
const fileInput = document.getElementById('fileInput');
const file = fileInput.files[0];
if (!file) return;
const btn = document.getElementById('convertBtn');
const status = document.getElementById('status');
btn.disabled = true;
btn.textContent = "⏳ جاري المعالجة...";
status.textContent = "جاري الرفع والتحويل...";
status.style.color = "blue";
const formData = new FormData();
formData.append("file", file);
try {
const response = await fetch(API_URL, {
method: "POST",
body: formData
});
if (!response.ok) {
const errorText = await response.text();
throw new Error(`فشل التحويل: ${response.status} - ${errorText}`);
}
// Expecting JSON { "url": "..." }
const data = await response.json();
if (data.status === "success" && data.url) {
status.textContent = "✅ تم التحويل! جاري الفتح...";
status.style.color = "green";
// Open the remote URL directly in the browser (View Mode)
window.location.href = data.url;
} else {
throw new Error("استجابة غير صالحة من السيرفر");
}
} catch (error) {
console.error(error);
status.textContent = "❌ حدث خطأ: " + error.message;
status.style.color = "red";
} finally {
btn.disabled = false;
btn.textContent = "🚀 تحويل سريع";
}
}
</script>
</body>
</html>