| <!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> |
