Spaces:
Sleeping
Sleeping
| <html lang="en"> | |
| <head> | |
| <meta charset="UTF-8"> | |
| <meta name="viewport" content="width=device-width, initial-scale=1.0"> | |
| <title>Company Login | Campus Recruitment Portal</title> | |
| <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha1/dist/css/bootstrap.min.css" rel="stylesheet"> | |
| <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap-icons@1.10.0/font/bootstrap-icons.css"> | |
| <style> | |
| /* Campus Recruitment Portal - Main Stylesheet | |
| This file contains styles for all pages in the application */ | |
| :root { | |
| --primary-color: #0d6efd; | |
| --primary-dark: #0b5ed7; | |
| --secondary-color: #6c757d; | |
| --success-color: #198754; | |
| --info-color: #0dcaf0; | |
| --warning-color: #ffc107; | |
| --danger-color: #dc3545; | |
| --light-color: #f8f9fa; | |
| --dark-color: #212529; | |
| --border-radius: 0.375rem; | |
| --box-shadow: 0 0.5rem 1rem rgba(0, 0, 0, 0.15); | |
| } | |
| body { | |
| font-family: 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif; | |
| background-color: #f5f5f5; | |
| color: #333; | |
| } | |
| /* ======= Typography ======= */ | |
| h1, h2, h3, h4, h5, h6 { | |
| font-weight: 600; | |
| margin-bottom: 1rem; | |
| } | |
| .text-primary { | |
| color: var(--primary-color) ; | |
| } | |
| /* ======= Layout Components ======= */ | |
| .main-container { | |
| padding-top: 1.5rem; | |
| padding-bottom: 2rem; | |
| } | |
| .card { | |
| border-radius: var(--border-radius); | |
| box-shadow: 0 0.125rem 0.25rem rgba(0, 0, 0, 0.075); | |
| margin-bottom: 1.5rem; | |
| border: none; | |
| } | |
| .card-header { | |
| background-color: rgba(0, 0, 0, 0.03); | |
| border-bottom: 1px solid rgba(0, 0, 0, 0.125); | |
| padding: 0.75rem 1.25rem; | |
| } | |
| .card-header.bg-primary { | |
| background-color: var(--primary-color) ; | |
| color: white; | |
| } | |
| .card-header.bg-secondary { | |
| background-color: var(--secondary-color) ; | |
| color: white; | |
| } | |
| .card-body { | |
| padding: 1.25rem; | |
| } | |
| .card-footer { | |
| padding: 0.75rem 1.25rem; | |
| background-color: rgba(0, 0, 0, 0.03); | |
| border-top: 1px solid rgba(0, 0, 0, 0.125); | |
| } | |
| /* ======= Navigation ======= */ | |
| .navbar { | |
| padding: 0.5rem 1rem; | |
| box-shadow: 0 0.125rem 0.25rem rgba(0, 0, 0, 0.075); | |
| } | |
| .navbar-brand { | |
| font-weight: 600; | |
| font-size: 1.25rem; | |
| } | |
| .nav-link { | |
| padding: 0.5rem 1rem; | |
| transition: all 0.2s ease-in-out; | |
| } | |
| .nav-link:hover { | |
| opacity: 0.85; | |
| } | |
| .nav-link.active { | |
| font-weight: 600; | |
| background-color: rgba(255, 255, 255, 0.1); | |
| } | |
| /* ======= Forms ======= */ | |
| .form-control, .form-select { | |
| border-radius: var(--border-radius); | |
| padding: 0.375rem 0.75rem; | |
| border: 1px solid #ced4da; | |
| transition: border-color 0.15s ease-in-out, box-shadow 0.15s ease-in-out; | |
| } | |
| .form-control:focus, .form-select:focus { | |
| border-color: rgba(13, 110, 253, 0.5); | |
| box-shadow: 0 0 0 0.25rem rgba(13, 110, 253, 0.25); | |
| } | |
| .form-label { | |
| margin-bottom: 0.5rem; | |
| font-weight: 500; | |
| } | |
| .form-text { | |
| color: #6c757d; | |
| margin-top: 0.25rem; | |
| } | |
| /* ======= Login Page ======= */ | |
| .login-container { | |
| min-height: 100vh; | |
| display: flex; | |
| align-items: center; | |
| justify-content: center; | |
| } | |
| .login-card { | |
| width: 100%; | |
| max-width: 450px; | |
| box-shadow: var(--box-shadow); | |
| } | |
| .demo-credentials { | |
| background-color: #f8f9fa; | |
| padding: 0.75rem; | |
| border-radius: var(--border-radius); | |
| margin-top: 1rem; | |
| } | |
| /* ======= Dashboard ======= */ | |
| .dashboard-stats { | |
| padding: 1.5rem; | |
| background-color: white; | |
| box-shadow: var(--box-shadow); | |
| border-radius: var(--border-radius); | |
| margin-bottom: 1.5rem; | |
| } | |
| .stats-card { | |
| text-align: center; | |
| padding: 1.25rem; | |
| border: 1px solid rgba(0, 0, 0, 0.125); | |
| border-radius: var(--border-radius); | |
| background-color: white; | |
| } | |
| .stats-icon { | |
| font-size: 2rem; | |
| margin-bottom: 0.75rem; | |
| } | |
| .stats-value { | |
| font-size: 2rem; | |
| font-weight: 600; | |
| margin-bottom: 0.25rem; | |
| } | |
| .stats-label { | |
| color: #6c757d; | |
| font-size: 0.875rem; | |
| } | |
| /* ======= Filter Section ======= */ | |
| .filter-section { | |
| background-color: white; | |
| border-radius: var(--border-radius); | |
| margin-bottom: 1.5rem; | |
| } | |
| .filter-heading { | |
| font-weight: 600; | |
| margin-bottom: 1rem; | |
| } | |
| .filter-group { | |
| margin-bottom: 1.25rem; | |
| } | |
| /* ======= Tables ======= */ | |
| .table { | |
| margin-bottom: 0; | |
| } | |
| .table-striped tbody tr:nth-of-type(odd) { | |
| background-color: rgba(0, 0, 0, 0.02); | |
| } | |
| .table th { | |
| font-weight: 600; | |
| border-top: none; | |
| } | |
| .table-hover tbody tr:hover { | |
| background-color: rgba(13, 110, 253, 0.05); | |
| } | |
| /* ======= Badges ======= */ | |
| .badge { | |
| padding: 0.35em 0.65em; | |
| font-weight: 500; | |
| border-radius: 0.25rem; | |
| margin-right: 0.25rem; | |
| } | |
| .skills-container { | |
| display: flex; | |
| flex-wrap: wrap; | |
| gap: 0.25rem; | |
| } | |
| /* ======= Visualization Section ======= */ | |
| .visualization-card { | |
| height: 100%; | |
| } | |
| .visualization-chart { | |
| width: 100%; | |
| height: auto; | |
| } | |
| /* ======= Job Listings ======= */ | |
| .job-card { | |
| transition: transform 0.2s ease-in-out; | |
| height: 100%; | |
| } | |
| .job-card:hover { | |
| transform: translateY(-5px); | |
| box-shadow: 0 0.5rem 1rem rgba(0, 0, 0, 0.15); | |
| } | |
| .job-title { | |
| font-weight: 600; | |
| margin-bottom: 0.5rem; | |
| } | |
| .job-location { | |
| color: #6c757d; | |
| font-size: 0.875rem; | |
| } | |
| .job-skills { | |
| margin-top: 0.5rem; | |
| margin-bottom: 1rem; | |
| } | |
| /* ======= Student Details ======= */ | |
| .student-profile { | |
| padding: 1.5rem; | |
| } | |
| .student-name { | |
| font-size: 1.5rem; | |
| font-weight: 600; | |
| margin-bottom: 0.5rem; | |
| } | |
| .student-info { | |
| margin-bottom: 0.5rem; | |
| } | |
| .section-heading { | |
| font-weight: 600; | |
| margin-bottom: 0.75rem; | |
| border-bottom: 1px solid #e9ecef; | |
| padding-bottom: 0.5rem; | |
| } | |
| /* ======= AI Insights ======= */ | |
| .insights-section { | |
| background-color: #f8f9fa; | |
| padding: 1.5rem; | |
| border-radius: var(--border-radius); | |
| margin-bottom: 1.5rem; | |
| } | |
| .insights-text { | |
| white-space: pre-wrap; | |
| max-height: 500px; | |
| overflow-y: auto; | |
| padding: 1rem; | |
| background-color: white; | |
| border: 1px solid #dee2e6; | |
| border-radius: var(--border-radius); | |
| } | |
| /* ======= Button Styles ======= */ | |
| .btn { | |
| padding: 0.375rem 0.75rem; | |
| border-radius: var(--border-radius); | |
| font-weight: 500; | |
| transition: all 0.2s ease-in-out; | |
| } | |
| .btn-primary { | |
| background-color: var(--primary-color); | |
| border-color: var(--primary-color); | |
| } | |
| .btn-primary:hover { | |
| background-color: var(--primary-dark); | |
| border-color: var(--primary-dark); | |
| } | |
| .btn-outline-primary { | |
| color: var(--primary-color); | |
| border-color: var(--primary-color); | |
| } | |
| .btn-outline-primary:hover { | |
| background-color: var(--primary-color); | |
| color: white; | |
| border-color: var(--primary-color); | |
| } | |
| .btn-sm { | |
| padding: 0.25rem 0.5rem; | |
| font-size: 0.875rem; | |
| } | |
| /* ======= Modals ======= */ | |
| .modal-header { | |
| padding: 1rem; | |
| border-bottom: 1px solid #dee2e6; | |
| } | |
| .modal-body { | |
| padding: 1.5rem; | |
| } | |
| .modal-footer { | |
| padding: 1rem; | |
| border-top: 1px solid #dee2e6; | |
| } | |
| /* ======= Alerts ======= */ | |
| .alert { | |
| padding: 1rem; | |
| margin-bottom: 1rem; | |
| border-radius: var(--border-radius); | |
| } | |
| /* ======= Spinner ======= */ | |
| .spinner-container { | |
| display: flex; | |
| justify-content: center; | |
| align-items: center; | |
| padding: 2rem; | |
| } | |
| .spinner-border { | |
| width: 3rem; | |
| height: 3rem; | |
| } | |
| /* ======= Responsive Adjustments ======= */ | |
| @media (max-width: 768px) { | |
| .card-body { | |
| padding: 1rem; | |
| } | |
| .navbar-brand { | |
| font-size: 1rem; | |
| } | |
| .stats-value { | |
| font-size: 1.5rem; | |
| } | |
| .stats-icon { | |
| font-size: 1.5rem; | |
| } | |
| .table-responsive { | |
| border: 0; | |
| } | |
| } | |
| /* ======= Print Styles ======= */ | |
| @media print { | |
| .navbar, .card-header, .btn, .filter-section { | |
| display: none ; | |
| } | |
| .card { | |
| box-shadow: none ; | |
| border: 1px solid #dee2e6 ; | |
| } | |
| .container-fluid { | |
| width: 100% ; | |
| max-width: none ; | |
| } | |
| } | |
| </style> | |
| </head> | |
| <body class="bg-light"> | |
| <div class="container"> | |
| <div class="row justify-content-center mt-5"> | |
| <div class="col-md-6"> | |
| <div class="card shadow-lg"> | |
| <div class="card-header bg-primary text-white text-center"> | |
| <h3>Campus Recruitment Portal</h3> | |
| <h4>Company Login</h4> | |
| </div> | |
| <div class="card-body p-4"> | |
| {% if error %} | |
| <div class="alert alert-danger" role="alert"> | |
| {{ error }} | |
| </div> | |
| {% endif %} | |
| <form method="POST" action="{{ url_for('login') }}"> | |
| <div class="mb-3"> | |
| <label for="email" class="form-label">Email address</label> | |
| <input type="email" class="form-control" id="email" name="email" required> | |
| </div> | |
| <div class="mb-3"> | |
| <label for="password" class="form-label">Password</label> | |
| <input type="password" class="form-control" id="password" name="password" required> | |
| </div> | |
| <div class="d-grid gap-2"> | |
| <button type="submit" class="btn btn-primary">Log In</button> | |
| </div> | |
| </form> | |
| </div> | |
| <div class="card-footer text-center"> | |
| <small class="text-muted">Demo Credentials:<br> | |
| Email: google@example.com | Password: google123<br> | |
| Email: microsoft@example.com | Password: microsoft123<br> | |
| Email: amazon@example.com | Password: amazon123 | |
| </small> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| </body> | |
| </html> |