<!DOCTYPE html>
<html>
<head>
<title>PDF Upload</title>
<style>
:root {
--primary-color: #a0a0a0;
--background-color: #1a1a1a;
--card-background: #2d2d2d;
--text-color: #e0e0e0;
--border-radius: 12px;
--shadow: 0 4px 6px rgba(0, 0, 0, 0.3);
}
body {
font-family: 'Segoe UI', Arial, sans-serif;
max-width: 900px;
margin: 0 auto;
padding: 20px;
background-color: var(--background-color);
color: var(--text-color);
}
.card {
background: var(--card-background);
border-radius: var(--border-radius);
box-shadow: var(--shadow);
padding: 2rem;
margin: 2rem 0;
}
.upload-form {
border: 2px dashed #404040;
padding: 2rem;
text-align: center;
margin: 1.5rem 0;
border-radius: var(--border-radius);
background: #363636;
transition: all 0.3s ease;
}
.upload-form:hover {
border-color: var(--primary-color);
background: #404040;
}
.nav {
background: var(--card-background);
padding: 1rem;
border-radius: var(--border-radius);
box-shadow: var(--shadow);
margin-bottom: 2rem;
}
.nav a {
margin-right: 20px;
text-decoration: none;
color: var(--primary-color);
font-weight: 500;
padding: 0.5rem 1rem;
border-radius: 6px;
transition: all 0.3s ease;
}
.nav a:hover {
background: #363636;
}
h1 {
color: var(--primary-color);
text-align: center;
margin-bottom: 1.5rem;
}
input[type="file"] {
display: none;
}
.file-upload-label {
display: inline-block;
padding: 12px 24px;
background: var(--primary-color);
color: white;
border-radius: 6px;
cursor: pointer;
transition: all 0.3s ease;
}
.file-upload-label:hover {
background: #909090;
}
.selected-file {
margin-top: 1rem;
color: #b0b0b0;
}
button {
background: var(--primary-color);
color: white;
border: none;
padding: 12px 24px;
border-radius: 6px;
cursor: pointer;
font-size: 1rem;
transition: all 0.3s ease;
margin-top: 1rem;
}
button:hover {
background: #909090;
transform: translateY(-2px);
}
.status-message {
margin-top: 1rem;
padding: 1rem;
border-radius: 6px;
text-align: center;
}
.success {
background: #2e4a3d;
color: #7ee2b8;
}
.error {
background: #4a2e2e;
color: #e27e7e;
}
.loading-placeholder {
display: none;
margin-top: 1rem;
color: #b0b0b0;
animation: pulse 1.5s infinite;
}
@keyframes pulse {
0% {
opacity: 0.6;
}
50% {
opacity: 1;
}
100% {
opacity: 0.6;
}
}
</style>
</head>
<body>
<div class="nav">
<a href="/">Upload</a>
<a href="/chat">Chat</a>
</div>
<div class="card">
<h1>Upload Documents</h1>
<div class="upload-form">
<form action="/upload" method="post" enctype="multipart/form-data" id="uploadForm">
<label for="file-upload" class="file-upload-label">
Choose PDF Files
</label>
<input id="file-upload" type="file" name="file" accept=".pdf" multiple onchange="updateFileName(this)">
<div id="selectedFile" class="selected-file"></div>
<div id="loadingPlaceholder" class="loading-placeholder">Processing file...</div>
<button type="submit" onclick="showLoading()">Upload</button>
</form>
</div>
</div>
<script>
function updateFileName(input) {
const fileNames = Array.from(input.files)
.map(file => file.name)
.join(', ');
document.getElementById('selectedFile').textContent = fileNames || 'No file selected';
}
function showLoading() {
if (document.getElementById('file-upload').files.length > 0) {
document.getElementById('selectedFile').style.display = 'none';
document.getElementById('loadingPlaceholder').style.display = 'block';
}
}
</script>
</body>
</html>