|
|
<!DOCTYPE html> |
|
|
<html lang="en"> |
|
|
|
|
|
<head> |
|
|
<meta charset="UTF-8"> |
|
|
<meta name="viewport" content="width=device-width, initial-scale=1.0"> |
|
|
<title>StuDocu Downloader</title> |
|
|
<link href="https://fonts.googleapis.com/css2?family=Poppins:wght@400;600&display=swap" rel="stylesheet"> |
|
|
<style> |
|
|
body { |
|
|
font-family: 'Poppins', sans-serif; |
|
|
background-color: #f0f2f5; |
|
|
margin: 0; |
|
|
display: flex; |
|
|
justify-content: center; |
|
|
align-items: center; |
|
|
min-height: 100vh; |
|
|
padding: 20px; |
|
|
box-sizing: border-box; |
|
|
} |
|
|
|
|
|
.container { |
|
|
background-color: #ffffff; |
|
|
padding: 30px 40px; |
|
|
border-radius: 12px; |
|
|
box-shadow: 0 8px 30px rgba(0, 0, 0, 0.08); |
|
|
width: 100%; |
|
|
max-width: 650px; |
|
|
text-align: center; |
|
|
transition: all 0.3s ease; |
|
|
} |
|
|
|
|
|
.header .logo { |
|
|
width: 40px; |
|
|
height: 40px; |
|
|
color: #007bff; |
|
|
margin-bottom: 10px; |
|
|
} |
|
|
|
|
|
.header h1 { |
|
|
color: #2c3e50; |
|
|
margin: 0 0 10px; |
|
|
font-weight: 600; |
|
|
} |
|
|
|
|
|
.header p { |
|
|
color: #7f8c8d; |
|
|
margin-bottom: 30px; |
|
|
font-size: 1rem; |
|
|
} |
|
|
|
|
|
.form-container { |
|
|
display: flex; |
|
|
margin-bottom: 20px; |
|
|
} |
|
|
|
|
|
#studocu-url { |
|
|
flex-grow: 1; |
|
|
padding: 14px 18px; |
|
|
border: 1px solid #dfe4ea; |
|
|
border-radius: 8px 0 0 8px; |
|
|
font-size: 16px; |
|
|
outline: none; |
|
|
transition: border-color 0.3s ease, box-shadow 0.3s ease; |
|
|
} |
|
|
|
|
|
#studocu-url:focus { |
|
|
border-color: #007bff; |
|
|
box-shadow: 0 0 0 3px rgba(0, 123, 255, 0.15); |
|
|
} |
|
|
|
|
|
#download-btn { |
|
|
padding: 14px 25px; |
|
|
border: none; |
|
|
background-color: #007bff; |
|
|
color: white; |
|
|
font-size: 16px; |
|
|
font-weight: 600; |
|
|
border-radius: 0 8px 8px 0; |
|
|
cursor: pointer; |
|
|
outline: none; |
|
|
position: relative; |
|
|
transition: background-color 0.3s ease; |
|
|
display: flex; |
|
|
align-items: center; |
|
|
justify-content: center; |
|
|
min-width: 120px; |
|
|
} |
|
|
|
|
|
#download-btn:hover { |
|
|
background-color: #0056b3; |
|
|
} |
|
|
|
|
|
#download-btn:disabled { |
|
|
background-color: #5a9eeb; |
|
|
cursor: not-allowed; |
|
|
} |
|
|
|
|
|
.btn-loader { |
|
|
display: none; |
|
|
border: 3px solid #f3f3f3; |
|
|
border-top: 3px solid #0056b3; |
|
|
border-radius: 50%; |
|
|
width: 20px; |
|
|
height: 20px; |
|
|
animation: spin 1s linear infinite; |
|
|
} |
|
|
|
|
|
#download-btn.loading .btn-text { |
|
|
display: none; |
|
|
} |
|
|
|
|
|
#download-btn.loading .btn-loader { |
|
|
display: block; |
|
|
} |
|
|
|
|
|
@keyframes spin { |
|
|
0% { |
|
|
transform: rotate(0deg); |
|
|
} |
|
|
|
|
|
100% { |
|
|
transform: rotate(360deg); |
|
|
} |
|
|
} |
|
|
|
|
|
.progress-section { |
|
|
margin-top: 25px; |
|
|
text-align: left; |
|
|
} |
|
|
|
|
|
.progress-bar-container { |
|
|
width: 100%; |
|
|
background-color: #e9ecef; |
|
|
border-radius: 8px; |
|
|
overflow: hidden; |
|
|
height: 12px; |
|
|
} |
|
|
|
|
|
.progress-bar { |
|
|
width: 0%; |
|
|
height: 100%; |
|
|
background-color: #007bff; |
|
|
border-radius: 8px; |
|
|
transition: width 0.4s ease-in-out; |
|
|
} |
|
|
|
|
|
#status-text { |
|
|
margin-top: 8px; |
|
|
color: #495057; |
|
|
font-size: 0.9rem; |
|
|
text-align: center; |
|
|
} |
|
|
|
|
|
.status-indicator.error { |
|
|
background-color: #f8d7da; |
|
|
color: #721c24; |
|
|
border: 1px solid #f5c6cb; |
|
|
padding: 12px; |
|
|
border-radius: 8px; |
|
|
margin-top: 20px; |
|
|
font-size: 0.95rem; |
|
|
} |
|
|
|
|
|
|
|
|
.log-section { |
|
|
margin-top: 25px; |
|
|
text-align: left; |
|
|
border: 1px solid #dfe4ea; |
|
|
border-radius: 8px; |
|
|
padding: 15px; |
|
|
background-color: #fafafa; |
|
|
} |
|
|
|
|
|
.log-section h3 { |
|
|
margin-top: 0; |
|
|
margin-bottom: 10px; |
|
|
color: #2c3e50; |
|
|
font-size: 1rem; |
|
|
font-weight: 600; |
|
|
} |
|
|
|
|
|
.log-container { |
|
|
background-color: #2c3e50; |
|
|
color: #ecf0f1; |
|
|
font-family: 'Courier New', Courier, monospace; |
|
|
font-size: 0.85rem; |
|
|
height: 150px; |
|
|
overflow-y: auto; |
|
|
padding: 10px; |
|
|
border-radius: 6px; |
|
|
white-space: pre-wrap; |
|
|
word-wrap: break-word; |
|
|
} |
|
|
|
|
|
.log-entry { |
|
|
display: flex; |
|
|
margin-bottom: 5px; |
|
|
} |
|
|
|
|
|
.log-entry .timestamp { |
|
|
color: #95a5a6; |
|
|
margin-right: 10px; |
|
|
flex-shrink: 0; |
|
|
} |
|
|
|
|
|
.log-entry .message { |
|
|
flex-grow: 1; |
|
|
} |
|
|
|
|
|
.log-entry.error .message { |
|
|
color: #e74c3c; |
|
|
|
|
|
} |
|
|
|
|
|
.log-entry.success .message { |
|
|
color: #2ecc71; |
|
|
|
|
|
} |
|
|
|
|
|
|
|
|
|
|
|
.footer { |
|
|
margin-top: 30px; |
|
|
font-size: 0.8rem; |
|
|
color: #95a5a6; |
|
|
} |
|
|
</style> |
|
|
</head> |
|
|
|
|
|
<body> |
|
|
<div class="container"> |
|
|
<div class="header"> |
|
|
<svg class="logo" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="currentColor"> |
|
|
<path |
|
|
d="M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm1 14h-2v-2h2v2zm0-4h-2V7h2v5z" /> |
|
|
</svg> |
|
|
<h1>StuDocu Document Downloader</h1> |
|
|
<p>Paste a valid StuDocu document URL to generate and download a PDF.</p> |
|
|
</div> |
|
|
<div class="main-content"> |
|
|
<div class="form-container"> |
|
|
<input type="text" id="studocu-url" placeholder="https://www.studocu.com/en-us/document/..."> |
|
|
<button id="download-btn"> |
|
|
<span class="btn-text">Download</span> |
|
|
<span class="btn-loader"></span> |
|
|
</button> |
|
|
</div> |
|
|
|
|
|
<div class="progress-section" id="progress-section" style="display: none;"> |
|
|
<div class="progress-bar-container"> |
|
|
<div class="progress-bar" id="progress-bar"></div> |
|
|
</div> |
|
|
<p id="status-text">Starting...</p> |
|
|
</div> |
|
|
|
|
|
|
|
|
<div class="log-section" id="log-section" style="display: none;"> |
|
|
<h3>Live Logs</h3> |
|
|
<div class="log-container" id="log-container"></div> |
|
|
</div> |
|
|
|
|
|
<div class="status-indicator error" id="error-indicator" style="display: none;"></div> |
|
|
</div> |
|
|
<div class="footer"> |
|
|
<p>Powered by the Heart by Us</p> |
|
|
</div> |
|
|
</div> |
|
|
<script> |
|
|
document.addEventListener('DOMContentLoaded', () => { |
|
|
const downloadBtn = document.getElementById('download-btn'); |
|
|
const urlInput = document.getElementById('studocu-url'); |
|
|
const progressSection = document.getElementById('progress-section'); |
|
|
const progressBar = document.getElementById('progress-bar'); |
|
|
const statusText = document.getElementById('status-text'); |
|
|
const errorIndicator = document.getElementById('error-indicator'); |
|
|
|
|
|
const logSection = document.getElementById('log-section'); |
|
|
const logContainer = document.getElementById('log-container'); |
|
|
|
|
|
|
|
|
const API_BASE_URL = 'https://devusman-studocu-testing.hf.space'; |
|
|
let pollInterval; |
|
|
let lastLoggedMessage = ''; |
|
|
|
|
|
const resetUI = () => { |
|
|
setLoading(false); |
|
|
progressSection.style.display = 'none'; |
|
|
errorIndicator.style.display = 'none'; |
|
|
progressBar.style.width = '0%'; |
|
|
statusText.textContent = ''; |
|
|
|
|
|
logSection.style.display = 'none'; |
|
|
logContainer.innerHTML = ''; |
|
|
lastLoggedMessage = ''; |
|
|
}; |
|
|
|
|
|
|
|
|
const addLog = (message, type = 'info') => { |
|
|
if (!message || message === lastLoggedMessage) return; |
|
|
lastLoggedMessage = message; |
|
|
|
|
|
const logEntry = document.createElement('div'); |
|
|
logEntry.className = `log-entry ${type}`; |
|
|
const timestamp = new Date().toLocaleTimeString(); |
|
|
logEntry.innerHTML = `<span class="timestamp">${timestamp}</span><span class="message">${message}</span>`; |
|
|
|
|
|
logContainer.appendChild(logEntry); |
|
|
logContainer.scrollTop = logContainer.scrollHeight; |
|
|
}; |
|
|
|
|
|
const pollProgress = (sessionId) => { |
|
|
pollInterval = setInterval(async () => { |
|
|
try { |
|
|
const response = await fetch(`${API_BASE_URL}/api/progress/${sessionId}`); |
|
|
if (!response.ok) throw new Error('Failed to get progress update.'); |
|
|
|
|
|
const data = await response.json(); |
|
|
|
|
|
progressBar.style.width = `${data.progress}%`; |
|
|
statusText.textContent = `(${data.progress}%) ${data.message}`; |
|
|
addLog(`[${data.status}] ${data.message}`); |
|
|
|
|
|
if (data.progress >= 100) { |
|
|
clearInterval(pollInterval); |
|
|
statusText.textContent = '✅ Success! Your download will start now.'; |
|
|
addLog('✅ PDF generated successfully! Starting download...', 'success'); |
|
|
window.location.href = `${API_BASE_URL}/api/download/${sessionId}`; |
|
|
setTimeout(resetUI, 5000); |
|
|
} |
|
|
|
|
|
if (data.progress < 0) { |
|
|
clearInterval(pollInterval); |
|
|
showError(`Error: ${data.message || 'An unknown error occurred.'}`); |
|
|
setLoading(false); |
|
|
} |
|
|
|
|
|
} catch (error) { |
|
|
clearInterval(pollInterval); |
|
|
console.error('Polling failed:', error); |
|
|
showError('Failed to connect to the server for progress updates.'); |
|
|
setLoading(false); |
|
|
} |
|
|
}, 2000); |
|
|
}; |
|
|
|
|
|
downloadBtn.addEventListener('click', async () => { |
|
|
const url = urlInput.value.trim(); |
|
|
if (!url || !url.includes('studocu.com')) { |
|
|
showError('Please provide a valid StuDocu URL.'); |
|
|
return; |
|
|
} |
|
|
|
|
|
resetUI(); |
|
|
setLoading(true); |
|
|
progressSection.style.display = 'block'; |
|
|
logSection.style.display = 'block'; |
|
|
statusText.textContent = 'Requesting download...'; |
|
|
addLog('🚀 Requesting download...'); |
|
|
|
|
|
try { |
|
|
const response = await fetch(`${API_BASE_URL}/api/request-download`, { |
|
|
method: 'POST', |
|
|
headers: { 'Content-Type': 'application/json' }, |
|
|
body: JSON.stringify({ url }), |
|
|
}); |
|
|
|
|
|
if (!response.ok) { |
|
|
const errorData = await response.json(); |
|
|
throw new Error(errorData.error || 'Failed to start the download process.'); |
|
|
} |
|
|
|
|
|
const { sessionId } = await response.json(); |
|
|
pollProgress(sessionId); |
|
|
|
|
|
} catch (error) { |
|
|
console.error('Download failed:', error); |
|
|
showError(error.message); |
|
|
setLoading(false); |
|
|
} |
|
|
}); |
|
|
|
|
|
function setLoading(isLoading) { |
|
|
downloadBtn.disabled = isLoading; |
|
|
urlInput.disabled = isLoading; |
|
|
downloadBtn.classList.toggle('loading', isLoading); |
|
|
} |
|
|
|
|
|
function showError(message) { |
|
|
errorIndicator.style.display = 'block'; |
|
|
errorIndicator.textContent = message; |
|
|
progressSection.style.display = 'none'; |
|
|
logSection.style.display = 'block'; |
|
|
addLog(message, 'error'); |
|
|
} |
|
|
}); |
|
|
</script> |
|
|
</body> |
|
|
|
|
|
</html> |
