257 lines
7.3 KiB
HTML
257 lines
7.3 KiB
HTML
<!DOCTYPE html>
|
|
<html lang="en">
|
|
<head>
|
|
<meta charset="UTF-8">
|
|
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
|
<title>Jefflix Upload</title>
|
|
<style>
|
|
* { box-sizing: border-box; margin: 0; padding: 0; }
|
|
body {
|
|
font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
|
|
background: #0a0a0a;
|
|
color: #e0e0e0;
|
|
min-height: 100vh;
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
}
|
|
.container { width: 100%; max-width: 600px; padding: 20px; }
|
|
h1 { text-align: center; margin-bottom: 24px; color: #00a4dc; font-size: 1.5rem; }
|
|
|
|
/* Auth */
|
|
#auth-screen { text-align: center; }
|
|
#auth-screen input {
|
|
padding: 12px 16px;
|
|
font-size: 1rem;
|
|
background: #1a1a1a;
|
|
border: 1px solid #333;
|
|
color: #e0e0e0;
|
|
border-radius: 8px;
|
|
width: 100%;
|
|
max-width: 300px;
|
|
margin-bottom: 12px;
|
|
}
|
|
#auth-screen button {
|
|
padding: 12px 32px;
|
|
font-size: 1rem;
|
|
background: #00a4dc;
|
|
border: none;
|
|
color: #fff;
|
|
border-radius: 8px;
|
|
cursor: pointer;
|
|
}
|
|
#auth-screen button:hover { background: #0090c0; }
|
|
.auth-error { color: #ff4444; margin-top: 8px; font-size: 0.9rem; }
|
|
|
|
/* Drop zone */
|
|
.dropzone {
|
|
border: 2px dashed #333;
|
|
border-radius: 16px;
|
|
padding: 60px 20px;
|
|
text-align: center;
|
|
cursor: pointer;
|
|
transition: all 0.2s;
|
|
}
|
|
.dropzone:hover, .dropzone.dragover {
|
|
border-color: #00a4dc;
|
|
background: rgba(0, 164, 220, 0.05);
|
|
}
|
|
.dropzone p { font-size: 1.1rem; color: #888; }
|
|
.dropzone .hint { font-size: 0.85rem; color: #555; margin-top: 8px; }
|
|
|
|
/* File list */
|
|
#file-list { margin-top: 20px; }
|
|
.file-item {
|
|
background: #1a1a1a;
|
|
border-radius: 8px;
|
|
padding: 12px 16px;
|
|
margin-bottom: 8px;
|
|
}
|
|
.file-item .name {
|
|
font-size: 0.9rem;
|
|
word-break: break-all;
|
|
}
|
|
.file-item .meta {
|
|
font-size: 0.8rem;
|
|
color: #888;
|
|
margin-top: 4px;
|
|
}
|
|
.file-item .progress-bar {
|
|
height: 4px;
|
|
background: #333;
|
|
border-radius: 2px;
|
|
margin-top: 8px;
|
|
overflow: hidden;
|
|
}
|
|
.file-item .progress-fill {
|
|
height: 100%;
|
|
background: #00a4dc;
|
|
width: 0%;
|
|
transition: width 0.2s;
|
|
}
|
|
.file-item.done .progress-fill { background: #4caf50; }
|
|
.file-item.error .progress-fill { background: #ff4444; width: 100%; }
|
|
.file-item .result {
|
|
font-size: 0.8rem;
|
|
margin-top: 6px;
|
|
color: #4caf50;
|
|
}
|
|
.file-item.error .result { color: #ff4444; }
|
|
|
|
.hidden { display: none; }
|
|
</style>
|
|
</head>
|
|
<body>
|
|
<div class="container">
|
|
<h1>Jefflix Upload</h1>
|
|
|
|
<div id="auth-screen">
|
|
<p style="color: #888; margin-bottom: 16px;">Enter the upload password</p>
|
|
<input type="password" id="password-input" placeholder="Password" autofocus>
|
|
<br>
|
|
<button onclick="authenticate()">Enter</button>
|
|
<div class="auth-error hidden" id="auth-error">Wrong password</div>
|
|
</div>
|
|
|
|
<div id="upload-screen" class="hidden">
|
|
<div class="dropzone" id="dropzone">
|
|
<p>Drop files here or click to browse</p>
|
|
<p class="hint">Movies, TV shows, and music are auto-sorted</p>
|
|
</div>
|
|
<input type="file" id="file-input" multiple class="hidden">
|
|
<div id="file-list"></div>
|
|
</div>
|
|
</div>
|
|
|
|
<script>
|
|
let password = localStorage.getItem('upload_pw') || '';
|
|
|
|
// Check if already authenticated
|
|
if (password) showUpload();
|
|
|
|
function authenticate() {
|
|
password = document.getElementById('password-input').value;
|
|
// Test auth with a dummy request
|
|
fetch('/upload', {
|
|
method: 'POST',
|
|
headers: { 'X-Upload-Password': password },
|
|
body: new FormData()
|
|
}).then(r => {
|
|
if (r.status === 401) {
|
|
document.getElementById('auth-error').classList.remove('hidden');
|
|
} else {
|
|
// 400 = "no files" which means auth passed
|
|
localStorage.setItem('upload_pw', password);
|
|
showUpload();
|
|
}
|
|
});
|
|
}
|
|
|
|
document.getElementById('password-input').addEventListener('keydown', e => {
|
|
if (e.key === 'Enter') authenticate();
|
|
});
|
|
|
|
function showUpload() {
|
|
document.getElementById('auth-screen').classList.add('hidden');
|
|
document.getElementById('upload-screen').classList.remove('hidden');
|
|
}
|
|
|
|
// Drop zone
|
|
const dropzone = document.getElementById('dropzone');
|
|
const fileInput = document.getElementById('file-input');
|
|
|
|
dropzone.addEventListener('click', () => fileInput.click());
|
|
|
|
dropzone.addEventListener('dragover', e => {
|
|
e.preventDefault();
|
|
dropzone.classList.add('dragover');
|
|
});
|
|
dropzone.addEventListener('dragleave', () => dropzone.classList.remove('dragover'));
|
|
dropzone.addEventListener('drop', e => {
|
|
e.preventDefault();
|
|
dropzone.classList.remove('dragover');
|
|
handleFiles(e.dataTransfer.files);
|
|
});
|
|
|
|
fileInput.addEventListener('change', () => {
|
|
handleFiles(fileInput.files);
|
|
fileInput.value = '';
|
|
});
|
|
|
|
function formatSize(bytes) {
|
|
if (bytes >= 1e9) return (bytes / 1e9).toFixed(1) + ' GB';
|
|
if (bytes >= 1e6) return (bytes / 1e6).toFixed(1) + ' MB';
|
|
return (bytes / 1e3).toFixed(0) + ' KB';
|
|
}
|
|
|
|
function handleFiles(files) {
|
|
for (const file of files) {
|
|
uploadFile(file);
|
|
}
|
|
}
|
|
|
|
function uploadFile(file) {
|
|
const list = document.getElementById('file-list');
|
|
const item = document.createElement('div');
|
|
item.className = 'file-item';
|
|
item.innerHTML = `
|
|
<div class="name">${file.name}</div>
|
|
<div class="meta">${formatSize(file.size)}</div>
|
|
<div class="progress-bar"><div class="progress-fill"></div></div>
|
|
<div class="result"></div>
|
|
`;
|
|
list.prepend(item);
|
|
|
|
const progressFill = item.querySelector('.progress-fill');
|
|
const resultDiv = item.querySelector('.result');
|
|
|
|
const formData = new FormData();
|
|
formData.append('files', file);
|
|
|
|
const xhr = new XMLHttpRequest();
|
|
xhr.open('POST', '/upload');
|
|
xhr.setRequestHeader('X-Upload-Password', password);
|
|
|
|
xhr.upload.onprogress = e => {
|
|
if (e.lengthComputable) {
|
|
const pct = (e.loaded / e.total) * 100;
|
|
progressFill.style.width = pct + '%';
|
|
}
|
|
};
|
|
|
|
xhr.onload = () => {
|
|
if (xhr.status === 200) {
|
|
const data = JSON.parse(xhr.responseText);
|
|
const r = data.results[0];
|
|
if (r.error) {
|
|
item.classList.add('error');
|
|
resultDiv.textContent = r.error;
|
|
} else {
|
|
item.classList.add('done');
|
|
resultDiv.textContent = `Sorted to ${r.category}: ${r.destination}`;
|
|
}
|
|
} else if (xhr.status === 401) {
|
|
item.classList.add('error');
|
|
resultDiv.textContent = 'Authentication failed';
|
|
localStorage.removeItem('upload_pw');
|
|
} else {
|
|
item.classList.add('error');
|
|
try {
|
|
resultDiv.textContent = JSON.parse(xhr.responseText).error;
|
|
} catch {
|
|
resultDiv.textContent = 'Upload failed';
|
|
}
|
|
}
|
|
};
|
|
|
|
xhr.onerror = () => {
|
|
item.classList.add('error');
|
|
resultDiv.textContent = 'Network error';
|
|
};
|
|
|
|
xhr.send(formData);
|
|
}
|
|
</script>
|
|
</body>
|
|
</html>
|