Spaces:
Runtime error
Runtime error
| <html lang="en"> | |
| <head> | |
| <meta charset="utf-8"> | |
| <meta name="viewport" content="width=device-width, initial-scale=1.0"> | |
| <title>Upload Resume</title> | |
| <style> | |
| body { | |
| background-color: #121212; /* Dark background color for a modern look */ | |
| font-family: 'Arial', sans-serif; | |
| color: #e0e0e0; /* Light gray text for better contrast */ | |
| margin: 0; | |
| padding: 0; | |
| display: flex; | |
| align-items: center; | |
| justify-content: center; | |
| height: 100vh; | |
| } | |
| .container { | |
| max-width: 600px; | |
| padding: 30px; | |
| background-color: #1e1e1e; /* Dark gray background */ | |
| border-radius: 15px; | |
| box-shadow: 0 4px 25px rgba(0, 0, 0, 0.7); /* Enhanced shadow effect */ | |
| text-align: center; | |
| transform: perspective(1200px) rotateY(5deg); /* Subtle 3D rotation */ | |
| transition: transform 0.4s ease-in-out; /* Smooth transform transition */ | |
| } | |
| .container:hover { | |
| transform: perspective(1200px) rotateY(0); /* Remove rotation on hover */ | |
| } | |
| h1 { | |
| color: #4CAF50; /* Green heading color */ | |
| text-shadow: 0 4px 8px rgba(0, 0, 0, 0.8); /* Enhanced text shadow */ | |
| margin-bottom: 20px; | |
| font-size: 24px; /* Slightly larger heading */ | |
| } | |
| @keyframes glow { | |
| 0%, 100% { text-shadow: 0 0 15px #4CAF50, 0 0 25px #4CAF50, 0 0 35px #4CAF50, 0 0 45px #4CAF50, 0 0 55px #4CAF50; } | |
| 50% { text-shadow: 0 0 25px #4CAF50, 0 0 35px #4CAF50, 0 0 45px #4CAF50, 0 0 55px #4CAF50, 0 0 65px #4CAF50; } | |
| } | |
| .upload-form { | |
| margin-top: 20px; | |
| } | |
| .upload-form label { | |
| display: block; | |
| margin-bottom: 10px; | |
| font-size: 18px; /* Larger font size for labels */ | |
| font-weight: bold; /* Bold label text */ | |
| color: #e0e0e0; /* Light gray text color */ | |
| } | |
| .upload-form input[type=file] { | |
| padding: 10px; | |
| margin-top: 10px; | |
| border: 2px solid #333; /* Dark gray border */ | |
| background-color: #222; /* Slightly darker background for the file input */ | |
| border-radius: 5px; | |
| color: #f0f0f0; /* Light gray text */ | |
| box-shadow: inset 0 0 5px rgba(255, 255, 255, 0.2); /* Inner shadow */ | |
| transition: background-color 0.3s, border-color 0.3s; /* Smooth transitions */ | |
| width: 100%; /* Full-width input */ | |
| } | |
| .upload-form input[type=file]:hover { | |
| background-color: #333; /* Darker gray on hover */ | |
| border-color: #4CAF50; /* Green border on hover */ | |
| } | |
| .upload-form input[type=submit] { | |
| padding: 12px 24px; | |
| margin-top: 20px; | |
| background-color: #4CAF50; /* Green button background color */ | |
| color: white; /* White button text color */ | |
| border: none; | |
| border-radius: 8px; /* Slightly larger rounded corners */ | |
| cursor: pointer; | |
| font-size: 16px; /* Larger font size */ | |
| transition: background-color 0.3s, transform 0.3s, box-shadow 0.3s; /* Smooth transitions */ | |
| } | |
| .upload-form input[type=submit]:hover { | |
| background-color: #45a049; /* Darker green on hover */ | |
| transform: scale(1.05); /* Slight scale effect on hover */ | |
| box-shadow: 0 8px 15px rgba(0, 0, 0, 0.4); /* Enhanced shadow on hover */ | |
| } | |
| .upload-form input[type=submit]:active { | |
| transform: scale(1); /* Scale down on click */ | |
| box-shadow: 0 4px 10px rgba(0, 0, 0, 0.3); /* Reduced shadow on click */ | |
| } | |
| .error-message { | |
| color: #f44336; /* Red color for error messages */ | |
| margin-top: 10px; | |
| font-size: 16px; /* Slightly larger font size for error messages */ | |
| font-weight: bold; /* Bold error messages */ | |
| } | |
| @media (max-width: 600px) { | |
| .container { | |
| margin: 20px; | |
| padding: 15px; | |
| box-shadow: none; /* Remove shadow on smaller screens */ | |
| } | |
| .upload-form input[type=file], .upload-form input[type=submit] { | |
| width: 100%; /* Full-width inputs on smaller screens */ | |
| } | |
| } | |
| </style> | |
| </head> | |
| <body> | |
| <div class="container"> | |
| <h1>Upload Your Resume</h1> | |
| <form class="upload-form" action="/v1/resumes/" method="post" enctype="multipart/form-data" onsubmit="return validateFile()"> | |
| <label for="file-upload">Select your resume file:</label> | |
| <input type="file" id="file-upload" name="file" required> | |
| <div class="error-message" id="error-message"></div> | |
| <input type="submit" value="Upload"> | |
| </form> | |
| </div> | |
| <script> | |
| function validateFile() { | |
| const fileInput = document.getElementById('file-upload'); | |
| const errorMessage = document.getElementById('error-message'); | |
| const file = fileInput.files[0]; | |
| if (file) { | |
| const fileType = file.type; | |
| if (fileType !== 'application/pdf') { | |
| errorMessage.textContent = 'Please upload a PDF file.'; | |
| return false; // Prevent form submission | |
| } | |
| errorMessage.textContent = ''; // Clear any previous error message | |
| } | |
| return true; // Allow form submission | |
| } | |
| </script> | |
| </body> | |
| </html> | |