first
This commit is contained in:
6
.gitignore
vendored
Normal file
6
.gitignore
vendored
Normal file
@@ -0,0 +1,6 @@
|
|||||||
|
# created by virtualenv automatically
|
||||||
|
.idea
|
||||||
|
bin
|
||||||
|
lib
|
||||||
|
|
||||||
|
rabota_today.db
|
||||||
4
CACHEDIR.TAG
Normal file
4
CACHEDIR.TAG
Normal file
@@ -0,0 +1,4 @@
|
|||||||
|
Signature: 8a477f597d28d172789f06886806bc55
|
||||||
|
# This file is a cache directory tag created by Python virtualenv.
|
||||||
|
# For information about cache directory tags, see:
|
||||||
|
# https://bford.info/cachedir/
|
||||||
16
main.py
Normal file
16
main.py
Normal file
@@ -0,0 +1,16 @@
|
|||||||
|
# This is a sample Python script.
|
||||||
|
|
||||||
|
# Press Shift+F10 to execute it or replace it with your code.
|
||||||
|
# Press Double Shift to search everywhere for classes, files, tool windows, actions, and settings.
|
||||||
|
|
||||||
|
|
||||||
|
def print_hi(name):
|
||||||
|
# Use a breakpoint in the code line below to debug your script.
|
||||||
|
print(f'Hi, {name}') # Press Ctrl+F8 to toggle the breakpoint.
|
||||||
|
|
||||||
|
|
||||||
|
# Press the green button in the gutter to run the script.
|
||||||
|
if __name__ == '__main__':
|
||||||
|
print_hi('PyCharm')
|
||||||
|
|
||||||
|
# See PyCharm help at https://www.jetbrains.com/help/pycharm/
|
||||||
8
pyvenv.cfg
Normal file
8
pyvenv.cfg
Normal file
@@ -0,0 +1,8 @@
|
|||||||
|
home = /usr/bin
|
||||||
|
implementation = CPython
|
||||||
|
version_info = 3.10.12.final.0
|
||||||
|
virtualenv = 20.31.2
|
||||||
|
include-system-site-packages = false
|
||||||
|
base-prefix = /usr
|
||||||
|
base-exec-prefix = /usr
|
||||||
|
base-executable = /usr/bin/python3.10
|
||||||
685
templates/admin.html
Normal file
685
templates/admin.html
Normal file
@@ -0,0 +1,685 @@
|
|||||||
|
<!DOCTYPE html>
|
||||||
|
<html lang="ru">
|
||||||
|
<head>
|
||||||
|
<meta charset="UTF-8">
|
||||||
|
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||||
|
<title>Админ-панель | Rabota.Today</title>
|
||||||
|
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0-beta3/css/all.min.css">
|
||||||
|
<style>
|
||||||
|
* {
|
||||||
|
margin: 0;
|
||||||
|
padding: 0;
|
||||||
|
box-sizing: border-box;
|
||||||
|
font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
|
||||||
|
}
|
||||||
|
|
||||||
|
body {
|
||||||
|
background: linear-gradient(145deg, #eef5fa 0%, #e0eaf5 100%);
|
||||||
|
min-height: 100vh;
|
||||||
|
}
|
||||||
|
|
||||||
|
.container {
|
||||||
|
max-width: 1400px;
|
||||||
|
margin: 0 auto;
|
||||||
|
padding: 20px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.header {
|
||||||
|
background: #0b1c34;
|
||||||
|
color: white;
|
||||||
|
padding: 20px 40px;
|
||||||
|
border-radius: 40px;
|
||||||
|
margin-bottom: 40px;
|
||||||
|
display: flex;
|
||||||
|
justify-content: space-between;
|
||||||
|
align-items: center;
|
||||||
|
}
|
||||||
|
|
||||||
|
.logo {
|
||||||
|
font-size: 28px;
|
||||||
|
font-weight: 700;
|
||||||
|
display: flex;
|
||||||
|
align-items: center;
|
||||||
|
gap: 15px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.logo i {
|
||||||
|
color: #3b82f6;
|
||||||
|
background: rgba(255,255,255,0.1);
|
||||||
|
padding: 12px;
|
||||||
|
border-radius: 20px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.nav {
|
||||||
|
display: flex;
|
||||||
|
gap: 15px;
|
||||||
|
align-items: center;
|
||||||
|
}
|
||||||
|
|
||||||
|
.nav a {
|
||||||
|
color: white;
|
||||||
|
text-decoration: none;
|
||||||
|
padding: 10px 20px;
|
||||||
|
border-radius: 30px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.nav a:hover {
|
||||||
|
background: rgba(255,255,255,0.1);
|
||||||
|
}
|
||||||
|
|
||||||
|
.nav .active {
|
||||||
|
background: #3b82f6;
|
||||||
|
}
|
||||||
|
|
||||||
|
.stats-grid {
|
||||||
|
display: grid;
|
||||||
|
grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
|
||||||
|
gap: 20px;
|
||||||
|
margin-bottom: 40px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.stat-card {
|
||||||
|
background: white;
|
||||||
|
border-radius: 30px;
|
||||||
|
padding: 25px;
|
||||||
|
box-shadow: 0 10px 30px rgba(0,0,0,0.05);
|
||||||
|
}
|
||||||
|
|
||||||
|
.stat-card .label {
|
||||||
|
color: #4f7092;
|
||||||
|
font-size: 14px;
|
||||||
|
margin-bottom: 10px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.stat-card .value {
|
||||||
|
font-size: 36px;
|
||||||
|
font-weight: 700;
|
||||||
|
color: #0b1c34;
|
||||||
|
}
|
||||||
|
|
||||||
|
.tabs {
|
||||||
|
display: flex;
|
||||||
|
gap: 10px;
|
||||||
|
margin-bottom: 30px;
|
||||||
|
background: white;
|
||||||
|
padding: 10px;
|
||||||
|
border-radius: 50px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.tab {
|
||||||
|
padding: 12px 24px;
|
||||||
|
border-radius: 40px;
|
||||||
|
cursor: pointer;
|
||||||
|
font-weight: 600;
|
||||||
|
transition: 0.2s;
|
||||||
|
}
|
||||||
|
|
||||||
|
.tab.active {
|
||||||
|
background: #0b1c34;
|
||||||
|
color: white;
|
||||||
|
}
|
||||||
|
|
||||||
|
.content-card {
|
||||||
|
background: white;
|
||||||
|
border-radius: 40px;
|
||||||
|
padding: 30px;
|
||||||
|
box-shadow: 0 20px 40px rgba(0,20,40,0.1);
|
||||||
|
}
|
||||||
|
|
||||||
|
table {
|
||||||
|
width: 100%;
|
||||||
|
border-collapse: collapse;
|
||||||
|
}
|
||||||
|
|
||||||
|
th {
|
||||||
|
text-align: left;
|
||||||
|
padding: 15px;
|
||||||
|
background: #f0f7ff;
|
||||||
|
color: #1f3f60;
|
||||||
|
}
|
||||||
|
|
||||||
|
td {
|
||||||
|
padding: 15px;
|
||||||
|
border-bottom: 1px solid #dee9f5;
|
||||||
|
}
|
||||||
|
|
||||||
|
.badge {
|
||||||
|
padding: 4px 12px;
|
||||||
|
border-radius: 20px;
|
||||||
|
font-size: 12px;
|
||||||
|
font-weight: 600;
|
||||||
|
}
|
||||||
|
|
||||||
|
.badge.employee {
|
||||||
|
background: #e0f2e0;
|
||||||
|
color: #166534;
|
||||||
|
}
|
||||||
|
|
||||||
|
.badge.employer {
|
||||||
|
background: #dbeafe;
|
||||||
|
color: #1e40af;
|
||||||
|
}
|
||||||
|
|
||||||
|
.badge.admin {
|
||||||
|
background: #fef3c7;
|
||||||
|
color: #92400e;
|
||||||
|
}
|
||||||
|
|
||||||
|
.btn-icon {
|
||||||
|
padding: 8px 12px;
|
||||||
|
border: none;
|
||||||
|
border-radius: 20px;
|
||||||
|
cursor: pointer;
|
||||||
|
margin: 0 5px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.btn-icon.delete {
|
||||||
|
background: #fee2e2;
|
||||||
|
color: #b91c1c;
|
||||||
|
}
|
||||||
|
|
||||||
|
.btn-icon.edit {
|
||||||
|
background: #dbeafe;
|
||||||
|
color: #1e40af;
|
||||||
|
}
|
||||||
|
|
||||||
|
.tags-cloud {
|
||||||
|
display: flex;
|
||||||
|
flex-wrap: wrap;
|
||||||
|
gap: 10px;
|
||||||
|
margin: 20px 0;
|
||||||
|
}
|
||||||
|
|
||||||
|
.tag-item {
|
||||||
|
background: #eef4fa;
|
||||||
|
padding: 8px 16px;
|
||||||
|
border-radius: 30px;
|
||||||
|
display: flex;
|
||||||
|
align-items: center;
|
||||||
|
gap: 8px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.tag-item .count {
|
||||||
|
background: #3b82f6;
|
||||||
|
color: white;
|
||||||
|
padding: 2px 8px;
|
||||||
|
border-radius: 20px;
|
||||||
|
font-size: 12px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.loading {
|
||||||
|
text-align: center;
|
||||||
|
padding: 40px;
|
||||||
|
color: #4f7092;
|
||||||
|
}
|
||||||
|
|
||||||
|
.modal {
|
||||||
|
display: none;
|
||||||
|
position: fixed;
|
||||||
|
top: 0; left: 0; width: 100%; height: 100%;
|
||||||
|
background: rgba(0,0,0,0.5);
|
||||||
|
align-items: center;
|
||||||
|
justify-content: center;
|
||||||
|
z-index: 1000;
|
||||||
|
}
|
||||||
|
|
||||||
|
.modal.active {
|
||||||
|
display: flex;
|
||||||
|
}
|
||||||
|
|
||||||
|
.modal-content {
|
||||||
|
background: white;
|
||||||
|
max-width: 500px;
|
||||||
|
width: 90%;
|
||||||
|
border-radius: 40px;
|
||||||
|
padding: 40px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.form-group {
|
||||||
|
margin-bottom: 20px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.form-group label {
|
||||||
|
display: block;
|
||||||
|
margin-bottom: 8px;
|
||||||
|
font-weight: 600;
|
||||||
|
color: #1f3f60;
|
||||||
|
}
|
||||||
|
|
||||||
|
.form-group input,
|
||||||
|
.form-group select {
|
||||||
|
width: 100%;
|
||||||
|
padding: 12px 16px;
|
||||||
|
border: 2px solid #dee9f5;
|
||||||
|
border-radius: 30px;
|
||||||
|
font-size: 16px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.btn {
|
||||||
|
padding: 12px 24px;
|
||||||
|
border: none;
|
||||||
|
border-radius: 30px;
|
||||||
|
font-weight: 600;
|
||||||
|
cursor: pointer;
|
||||||
|
}
|
||||||
|
|
||||||
|
.btn-primary {
|
||||||
|
background: #0b1c34;
|
||||||
|
color: white;
|
||||||
|
}
|
||||||
|
|
||||||
|
.btn-secondary {
|
||||||
|
background: #eef4fa;
|
||||||
|
color: #1f3f60;
|
||||||
|
}
|
||||||
|
</style>
|
||||||
|
</head>
|
||||||
|
<body>
|
||||||
|
<div class="container">
|
||||||
|
<div class="header">
|
||||||
|
<div class="logo">
|
||||||
|
<i class="fas fa-briefcase"></i>
|
||||||
|
Rabota.Today Admin
|
||||||
|
</div>
|
||||||
|
<div class="nav">
|
||||||
|
<a href="/">Главная</a>
|
||||||
|
<a href="/profile">Профиль</a>
|
||||||
|
<a href="/admin" class="active">Админка</a>
|
||||||
|
<a href="#" onclick="logout()">Выйти</a>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<!-- Статистика -->
|
||||||
|
<div class="stats-grid" id="stats">
|
||||||
|
<div class="stat-card">
|
||||||
|
<div class="label">Пользователи</div>
|
||||||
|
<div class="value" id="totalUsers">0</div>
|
||||||
|
</div>
|
||||||
|
<div class="stat-card">
|
||||||
|
<div class="label">Соискатели</div>
|
||||||
|
<div class="value" id="totalEmployees">0</div>
|
||||||
|
</div>
|
||||||
|
<div class="stat-card">
|
||||||
|
<div class="label">Работодатели</div>
|
||||||
|
<div class="value" id="totalEmployers">0</div>
|
||||||
|
</div>
|
||||||
|
<div class="stat-card">
|
||||||
|
<div class="label">Вакансии</div>
|
||||||
|
<div class="value" id="activeVacancies">0</div>
|
||||||
|
</div>
|
||||||
|
<div class="stat-card">
|
||||||
|
<div class="label">Резюме</div>
|
||||||
|
<div class="value" id="totalResumes">0</div>
|
||||||
|
</div>
|
||||||
|
<div class="stat-card">
|
||||||
|
<div class="label">Отклики</div>
|
||||||
|
<div class="value" id="totalApplications">0</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<!-- Табы -->
|
||||||
|
<div class="tabs">
|
||||||
|
<div class="tab active" onclick="switchTab('users')">Пользователи</div>
|
||||||
|
<div class="tab" onclick="switchTab('vacancies')">Вакансии</div>
|
||||||
|
<div class="tab" onclick="switchTab('resumes')">Резюме</div>
|
||||||
|
<div class="tab" onclick="switchTab('tags')">Теги</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<!-- Контент -->
|
||||||
|
<div class="content-card">
|
||||||
|
<!-- Пользователи -->
|
||||||
|
<div id="usersTab" style="display: block;">
|
||||||
|
<h2 style="margin-bottom: 20px;">Управление пользователями</h2>
|
||||||
|
<table>
|
||||||
|
<thead>
|
||||||
|
<tr>
|
||||||
|
<th>ID</th>
|
||||||
|
<th>Имя</th>
|
||||||
|
<th>Email</th>
|
||||||
|
<th>Телефон</th>
|
||||||
|
<th>Роль</th>
|
||||||
|
<th>Дата регистрации</th>
|
||||||
|
<th>Действия</th>
|
||||||
|
</tr>
|
||||||
|
</thead>
|
||||||
|
<tbody id="usersTable"></tbody>
|
||||||
|
</table>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<!-- Вакансии -->
|
||||||
|
<div id="vacanciesTab" style="display: none;">
|
||||||
|
<h2 style="margin-bottom: 20px;">Управление вакансиями</h2>
|
||||||
|
<table>
|
||||||
|
<thead>
|
||||||
|
<tr>
|
||||||
|
<th>ID</th>
|
||||||
|
<th>Название</th>
|
||||||
|
<th>Компания</th>
|
||||||
|
<th>Зарплата</th>
|
||||||
|
<th>Теги</th>
|
||||||
|
<th>Просмотры</th>
|
||||||
|
<th>Дата</th>
|
||||||
|
<th>Действия</th>
|
||||||
|
</tr>
|
||||||
|
</thead>
|
||||||
|
<tbody id="vacanciesTable"></tbody>
|
||||||
|
</table>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<!-- Резюме -->
|
||||||
|
<div id="resumesTab" style="display: none;">
|
||||||
|
<h2 style="margin-bottom: 20px;">Управление резюме</h2>
|
||||||
|
<table>
|
||||||
|
<thead>
|
||||||
|
<tr>
|
||||||
|
<th>ID</th>
|
||||||
|
<th>Имя</th>
|
||||||
|
<th>Должность</th>
|
||||||
|
<th>Зарплата</th>
|
||||||
|
<th>Теги</th>
|
||||||
|
<th>Просмотры</th>
|
||||||
|
<th>Обновлено</th>
|
||||||
|
</tr>
|
||||||
|
</thead>
|
||||||
|
<tbody id="resumesTable"></tbody>
|
||||||
|
</table>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<!-- Теги -->
|
||||||
|
<div id="tagsTab" style="display: none;">
|
||||||
|
<div style="display: flex; justify-content: space-between; margin-bottom: 20px;">
|
||||||
|
<h2>Управление тегами</h2>
|
||||||
|
<button class="btn btn-primary" onclick="showAddTagModal()">
|
||||||
|
<i class="fas fa-plus"></i> Добавить тег
|
||||||
|
</button>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="tags-cloud" id="tagsCloud"></div>
|
||||||
|
|
||||||
|
<h3 style="margin: 30px 0 20px;">Популярные теги</h3>
|
||||||
|
<table>
|
||||||
|
<thead>
|
||||||
|
<tr>
|
||||||
|
<th>Тег</th>
|
||||||
|
<th>Категория</th>
|
||||||
|
<th>Вакансий</th>
|
||||||
|
<th>Резюме</th>
|
||||||
|
<th>Всего</th>
|
||||||
|
</tr>
|
||||||
|
</thead>
|
||||||
|
<tbody id="popularTagsTable"></tbody>
|
||||||
|
</table>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<!-- Модальное окно добавления тега -->
|
||||||
|
<div class="modal" id="tagModal">
|
||||||
|
<div class="modal-content">
|
||||||
|
<h3 style="margin-bottom: 20px;">Новый тег</h3>
|
||||||
|
|
||||||
|
<div class="form-group">
|
||||||
|
<label>Название тега</label>
|
||||||
|
<input type="text" id="tagName" placeholder="Например: Python">
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="form-group">
|
||||||
|
<label>Категория</label>
|
||||||
|
<select id="tagCategory">
|
||||||
|
<option value="skill">Навык</option>
|
||||||
|
<option value="industry">Отрасль</option>
|
||||||
|
<option value="position">Должность</option>
|
||||||
|
<option value="other">Другое</option>
|
||||||
|
</select>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div style="display: flex; gap: 10px;">
|
||||||
|
<button class="btn btn-primary" onclick="createTag()">Создать</button>
|
||||||
|
<button class="btn btn-secondary" onclick="closeTagModal()">Отмена</button>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<script>
|
||||||
|
const API_BASE_URL = 'http://localhost:8000/api';
|
||||||
|
const token = localStorage.getItem('accessToken');
|
||||||
|
|
||||||
|
// Проверка авторизации
|
||||||
|
if (!token) {
|
||||||
|
window.location.href = '/login';
|
||||||
|
}
|
||||||
|
|
||||||
|
// Загрузка статистики
|
||||||
|
async function loadStats() {
|
||||||
|
try {
|
||||||
|
const response = await fetch(`${API_BASE_URL}/admin/stats`, {
|
||||||
|
headers: { 'Authorization': `Bearer ${token}` }
|
||||||
|
});
|
||||||
|
const stats = await response.json();
|
||||||
|
|
||||||
|
document.getElementById('totalUsers').textContent = stats.total_users;
|
||||||
|
document.getElementById('totalEmployees').textContent = stats.total_employees;
|
||||||
|
document.getElementById('totalEmployers').textContent = stats.total_employers;
|
||||||
|
document.getElementById('activeVacancies').textContent = stats.active_vacancies;
|
||||||
|
document.getElementById('totalResumes').textContent = stats.total_resumes;
|
||||||
|
document.getElementById('totalApplications').textContent = stats.total_applications;
|
||||||
|
|
||||||
|
// Загружаем популярные теги
|
||||||
|
const tagsCloud = document.getElementById('tagsCloud');
|
||||||
|
tagsCloud.innerHTML = stats.popular_tags.map(t => `
|
||||||
|
<div class="tag-item">
|
||||||
|
${t.name}
|
||||||
|
<span class="count">${t.vacancy_count + t.resume_count}</span>
|
||||||
|
</div>
|
||||||
|
`).join('');
|
||||||
|
|
||||||
|
// Таблица популярных тегов
|
||||||
|
const popularTagsTable = document.getElementById('popularTagsTable');
|
||||||
|
popularTagsTable.innerHTML = stats.popular_tags.map(t => `
|
||||||
|
<tr>
|
||||||
|
<td>${t.name}</td>
|
||||||
|
<td>${t.category || '—'}</td>
|
||||||
|
<td>${t.vacancy_count}</td>
|
||||||
|
<td>${t.resume_count}</td>
|
||||||
|
<td>${t.vacancy_count + t.resume_count}</td>
|
||||||
|
</tr>
|
||||||
|
`).join('');
|
||||||
|
|
||||||
|
} catch (error) {
|
||||||
|
console.error('Error loading stats:', error);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
// Загрузка пользователей
|
||||||
|
async function loadUsers() {
|
||||||
|
try {
|
||||||
|
const response = await fetch(`${API_BASE_URL}/admin/users`, {
|
||||||
|
headers: { 'Authorization': `Bearer ${token}` }
|
||||||
|
});
|
||||||
|
const users = await response.json();
|
||||||
|
|
||||||
|
const table = document.getElementById('usersTable');
|
||||||
|
table.innerHTML = users.map(u => `
|
||||||
|
<tr>
|
||||||
|
<td>${u.id}</td>
|
||||||
|
<td>${escapeHtml(u.full_name)}</td>
|
||||||
|
<td>${escapeHtml(u.email)}</td>
|
||||||
|
<td>${escapeHtml(u.phone)}</td>
|
||||||
|
<td>
|
||||||
|
<span class="badge ${u.role}">
|
||||||
|
${u.role === 'employee' ? 'Соискатель' : u.role === 'employer' ? 'Работодатель' : 'Админ'}
|
||||||
|
</span>
|
||||||
|
</td>
|
||||||
|
<td>${new Date(u.created_at).toLocaleDateString()}</td>
|
||||||
|
<td>
|
||||||
|
${!u.is_admin ? `
|
||||||
|
<button class="btn-icon delete" onclick="deleteUser(${u.id})">
|
||||||
|
<i class="fas fa-trash"></i>
|
||||||
|
</button>
|
||||||
|
` : ''}
|
||||||
|
</td>
|
||||||
|
</tr>
|
||||||
|
`).join('');
|
||||||
|
|
||||||
|
} catch (error) {
|
||||||
|
console.error('Error loading users:', error);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
// Загрузка вакансий
|
||||||
|
async function loadVacancies() {
|
||||||
|
try {
|
||||||
|
const response = await fetch(`${API_BASE_URL}/admin/vacancies`, {
|
||||||
|
headers: { 'Authorization': `Bearer ${token}` }
|
||||||
|
});
|
||||||
|
const vacancies = await response.json();
|
||||||
|
|
||||||
|
const table = document.getElementById('vacanciesTable');
|
||||||
|
table.innerHTML = vacancies.map(v => `
|
||||||
|
<tr>
|
||||||
|
<td>${v.id}</td>
|
||||||
|
<td>${escapeHtml(v.title)}</td>
|
||||||
|
<td>${escapeHtml(v.company_name)}</td>
|
||||||
|
<td>${escapeHtml(v.salary || '—')}</td>
|
||||||
|
<td>
|
||||||
|
${(v.tags || []).map(t =>
|
||||||
|
`<span class="badge" style="background: #eef4fa; margin: 2px;">${t.name}</span>`
|
||||||
|
).join('')}
|
||||||
|
</td>
|
||||||
|
<td>${v.views}</td>
|
||||||
|
<td>${new Date(v.created_at).toLocaleDateString()}</td>
|
||||||
|
<td>
|
||||||
|
<button class="btn-icon delete" onclick="deleteVacancy(${v.id})">
|
||||||
|
<i class="fas fa-trash"></i>
|
||||||
|
</button>
|
||||||
|
</td>
|
||||||
|
</tr>
|
||||||
|
`).join('');
|
||||||
|
|
||||||
|
} catch (error) {
|
||||||
|
console.error('Error loading vacancies:', error);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
// Удаление пользователя
|
||||||
|
async function deleteUser(userId) {
|
||||||
|
if (!confirm('Удалить пользователя? Это действие нельзя отменить.')) return;
|
||||||
|
|
||||||
|
try {
|
||||||
|
await fetch(`${API_BASE_URL}/admin/users/${userId}`, {
|
||||||
|
method: 'DELETE',
|
||||||
|
headers: { 'Authorization': `Bearer ${token}` }
|
||||||
|
});
|
||||||
|
loadUsers();
|
||||||
|
loadStats();
|
||||||
|
} catch (error) {
|
||||||
|
alert('Ошибка при удалении');
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
// Удаление вакансии
|
||||||
|
async function deleteVacancy(vacancyId) {
|
||||||
|
if (!confirm('Удалить вакансию?')) return;
|
||||||
|
|
||||||
|
try {
|
||||||
|
await fetch(`${API_BASE_URL}/admin/vacancies/${vacancyId}`, {
|
||||||
|
method: 'DELETE',
|
||||||
|
headers: { 'Authorization': `Bearer ${token}` }
|
||||||
|
});
|
||||||
|
loadVacancies();
|
||||||
|
loadStats();
|
||||||
|
} catch (error) {
|
||||||
|
alert('Ошибка при удалении');
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
// Создание тега
|
||||||
|
async function createTag() {
|
||||||
|
const name = document.getElementById('tagName').value;
|
||||||
|
const category = document.getElementById('tagCategory').value;
|
||||||
|
|
||||||
|
if (!name) {
|
||||||
|
alert('Введите название тега');
|
||||||
|
return;
|
||||||
|
}
|
||||||
|
|
||||||
|
try {
|
||||||
|
await fetch(`${API_BASE_URL}/tags`, {
|
||||||
|
method: 'POST',
|
||||||
|
headers: {
|
||||||
|
'Content-Type': 'application/json',
|
||||||
|
'Authorization': `Bearer ${token}`
|
||||||
|
},
|
||||||
|
body: JSON.stringify({ name, category })
|
||||||
|
});
|
||||||
|
|
||||||
|
closeTagModal();
|
||||||
|
loadStats();
|
||||||
|
document.getElementById('tagName').value = '';
|
||||||
|
} catch (error) {
|
||||||
|
alert('Ошибка при создании тега');
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
// Переключение табов
|
||||||
|
function switchTab(tab) {
|
||||||
|
document.querySelectorAll('.tab').forEach(t => t.classList.remove('active'));
|
||||||
|
document.querySelectorAll('.content-card > div').forEach(d => d.style.display = 'none');
|
||||||
|
|
||||||
|
if (tab === 'users') {
|
||||||
|
document.querySelector('.tab').classList.add('active');
|
||||||
|
document.getElementById('usersTab').style.display = 'block';
|
||||||
|
loadUsers();
|
||||||
|
} else if (tab === 'vacancies') {
|
||||||
|
document.querySelectorAll('.tab')[1].classList.add('active');
|
||||||
|
document.getElementById('vacanciesTab').style.display = 'block';
|
||||||
|
loadVacancies();
|
||||||
|
} else if (tab === 'resumes') {
|
||||||
|
document.querySelectorAll('.tab')[2].classList.add('active');
|
||||||
|
document.getElementById('resumesTab').style.display = 'block';
|
||||||
|
} else if (tab === 'tags') {
|
||||||
|
document.querySelectorAll('.tab')[3].classList.add('active');
|
||||||
|
document.getElementById('tagsTab').style.display = 'block';
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
// Модальное окно
|
||||||
|
function showAddTagModal() {
|
||||||
|
document.getElementById('tagModal').classList.add('active');
|
||||||
|
}
|
||||||
|
|
||||||
|
function closeTagModal() {
|
||||||
|
document.getElementById('tagModal').classList.remove('active');
|
||||||
|
}
|
||||||
|
|
||||||
|
// Выход
|
||||||
|
function logout() {
|
||||||
|
localStorage.removeItem('accessToken');
|
||||||
|
window.location.href = '/';
|
||||||
|
}
|
||||||
|
|
||||||
|
// Экранирование HTML
|
||||||
|
function escapeHtml(unsafe) {
|
||||||
|
if (!unsafe) return '';
|
||||||
|
return unsafe.toString()
|
||||||
|
.replace(/&/g, "&")
|
||||||
|
.replace(/</g, "<")
|
||||||
|
.replace(/>/g, ">")
|
||||||
|
.replace(/"/g, """)
|
||||||
|
.replace(/'/g, "'");
|
||||||
|
}
|
||||||
|
|
||||||
|
// Загрузка данных
|
||||||
|
loadStats();
|
||||||
|
loadUsers();
|
||||||
|
|
||||||
|
// Закрытие модалки по клику вне окна
|
||||||
|
window.onclick = function(event) {
|
||||||
|
const modal = document.getElementById('tagModal');
|
||||||
|
if (event.target === modal) {
|
||||||
|
modal.classList.remove('active');
|
||||||
|
}
|
||||||
|
};
|
||||||
|
</script>
|
||||||
|
</body>
|
||||||
|
</html>
|
||||||
265
templates/index.html
Normal file
265
templates/index.html
Normal file
@@ -0,0 +1,265 @@
|
|||||||
|
<!DOCTYPE html>
|
||||||
|
<html lang="ru">
|
||||||
|
<head>
|
||||||
|
<meta charset="UTF-8">
|
||||||
|
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||||
|
<title>Rabota.Today - Ярмарка вакансий</title>
|
||||||
|
<link rel="stylesheet" href="/static/css/styles.css">
|
||||||
|
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0-beta3/css/all.min.css">
|
||||||
|
<style>
|
||||||
|
* {
|
||||||
|
margin: 0;
|
||||||
|
padding: 0;
|
||||||
|
box-sizing: border-box;
|
||||||
|
font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
|
||||||
|
}
|
||||||
|
|
||||||
|
body {
|
||||||
|
background: linear-gradient(145deg, #eef5fa 0%, #e0eaf5 100%);
|
||||||
|
min-height: 100vh;
|
||||||
|
}
|
||||||
|
|
||||||
|
.container {
|
||||||
|
max-width: 1200px;
|
||||||
|
margin: 0 auto;
|
||||||
|
padding: 20px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.header {
|
||||||
|
background: #0b1c34;
|
||||||
|
color: white;
|
||||||
|
padding: 20px 40px;
|
||||||
|
border-radius: 40px;
|
||||||
|
margin-bottom: 40px;
|
||||||
|
display: flex;
|
||||||
|
justify-content: space-between;
|
||||||
|
align-items: center;
|
||||||
|
box-shadow: 0 20px 40px rgba(0,20,40,0.2);
|
||||||
|
}
|
||||||
|
|
||||||
|
.logo {
|
||||||
|
font-size: 28px;
|
||||||
|
font-weight: 700;
|
||||||
|
display: flex;
|
||||||
|
align-items: center;
|
||||||
|
gap: 15px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.logo i {
|
||||||
|
color: #3b82f6;
|
||||||
|
background: rgba(255,255,255,0.1);
|
||||||
|
padding: 12px;
|
||||||
|
border-radius: 20px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.nav {
|
||||||
|
display: flex;
|
||||||
|
gap: 20px;
|
||||||
|
align-items: center;
|
||||||
|
}
|
||||||
|
|
||||||
|
.nav a {
|
||||||
|
color: white;
|
||||||
|
text-decoration: none;
|
||||||
|
padding: 10px 20px;
|
||||||
|
border-radius: 30px;
|
||||||
|
transition: 0.2s;
|
||||||
|
}
|
||||||
|
|
||||||
|
.nav a:hover {
|
||||||
|
background: rgba(255,255,255,0.1);
|
||||||
|
}
|
||||||
|
|
||||||
|
.nav .btn-login {
|
||||||
|
background: #3b82f6;
|
||||||
|
color: white;
|
||||||
|
}
|
||||||
|
|
||||||
|
.hero {
|
||||||
|
text-align: center;
|
||||||
|
padding: 60px 20px;
|
||||||
|
background: white;
|
||||||
|
border-radius: 60px;
|
||||||
|
margin-bottom: 40px;
|
||||||
|
box-shadow: 0 20px 40px rgba(0,20,40,0.1);
|
||||||
|
}
|
||||||
|
|
||||||
|
.hero h1 {
|
||||||
|
font-size: 48px;
|
||||||
|
color: #0b1c34;
|
||||||
|
margin-bottom: 20px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.hero p {
|
||||||
|
font-size: 20px;
|
||||||
|
color: #4f7092;
|
||||||
|
margin-bottom: 40px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.hero-buttons {
|
||||||
|
display: flex;
|
||||||
|
gap: 20px;
|
||||||
|
justify-content: center;
|
||||||
|
}
|
||||||
|
|
||||||
|
.btn {
|
||||||
|
padding: 16px 40px;
|
||||||
|
border-radius: 50px;
|
||||||
|
font-size: 18px;
|
||||||
|
font-weight: 600;
|
||||||
|
text-decoration: none;
|
||||||
|
transition: 0.2s;
|
||||||
|
}
|
||||||
|
|
||||||
|
.btn-primary {
|
||||||
|
background: #0b1c34;
|
||||||
|
color: white;
|
||||||
|
}
|
||||||
|
|
||||||
|
.btn-primary:hover {
|
||||||
|
background: #1b3f6b;
|
||||||
|
transform: scale(1.05);
|
||||||
|
}
|
||||||
|
|
||||||
|
.btn-secondary {
|
||||||
|
background: #e8f0fe;
|
||||||
|
color: #0b1c34;
|
||||||
|
border: 2px solid #3b82f6;
|
||||||
|
}
|
||||||
|
|
||||||
|
.btn-secondary:hover {
|
||||||
|
background: #d6e5ff;
|
||||||
|
}
|
||||||
|
|
||||||
|
.stats {
|
||||||
|
display: grid;
|
||||||
|
grid-template-columns: repeat(3, 1fr);
|
||||||
|
gap: 30px;
|
||||||
|
margin: 60px 0;
|
||||||
|
}
|
||||||
|
|
||||||
|
.stat-card {
|
||||||
|
background: white;
|
||||||
|
padding: 40px;
|
||||||
|
border-radius: 40px;
|
||||||
|
text-align: center;
|
||||||
|
box-shadow: 0 10px 30px rgba(0,0,0,0.05);
|
||||||
|
}
|
||||||
|
|
||||||
|
.stat-card i {
|
||||||
|
font-size: 48px;
|
||||||
|
color: #3b82f6;
|
||||||
|
margin-bottom: 20px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.stat-card .number {
|
||||||
|
font-size: 36px;
|
||||||
|
font-weight: 700;
|
||||||
|
color: #0b1c34;
|
||||||
|
}
|
||||||
|
|
||||||
|
.footer {
|
||||||
|
text-align: center;
|
||||||
|
padding: 40px;
|
||||||
|
color: #4f7092;
|
||||||
|
}
|
||||||
|
</style>
|
||||||
|
</head>
|
||||||
|
<body>
|
||||||
|
<div class="container">
|
||||||
|
<div class="header">
|
||||||
|
<div class="logo">
|
||||||
|
<i class="fas fa-briefcase"></i>
|
||||||
|
Rabota.Today
|
||||||
|
</div>
|
||||||
|
<div class="nav">
|
||||||
|
<a href="/">Главная</a>
|
||||||
|
<a href="/vacancies">Вакансии</a>
|
||||||
|
<a href="/resumes">Резюме</a>
|
||||||
|
<a href="/login" class="btn-login">Войти</a>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="hero">
|
||||||
|
<h1>Найди работу мечты</h1>
|
||||||
|
<p>Тысячи вакансий и резюме на одной платформе</p>
|
||||||
|
<div class="hero-buttons">
|
||||||
|
<a href="/register" class="btn btn-primary">Начать карьеру</a>
|
||||||
|
<a href="/vacancies" class="btn btn-secondary">Смотреть вакансии</a>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="stats">
|
||||||
|
<div class="stat-card">
|
||||||
|
<i class="fas fa-briefcase"></i>
|
||||||
|
<div class="number" id="vacanciesCount">1,234</div>
|
||||||
|
<div>активных вакансий</div>
|
||||||
|
</div>
|
||||||
|
<div class="stat-card">
|
||||||
|
<i class="fas fa-users"></i>
|
||||||
|
<div class="number" id="resumesCount">5,678</div>
|
||||||
|
<div>соискателей</div>
|
||||||
|
</div>
|
||||||
|
<div class="stat-card">
|
||||||
|
<i class="fas fa-building"></i>
|
||||||
|
<div class="number" id="companiesCount">456</div>
|
||||||
|
<div>компаний</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="footer">
|
||||||
|
© 2024 Rabota.Today - Ярмарка вакансий
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<script>
|
||||||
|
// Загрузка статистики
|
||||||
|
async function loadStats() {
|
||||||
|
try {
|
||||||
|
// Здесь можно будет загружать реальную статистику с API
|
||||||
|
// Пока оставляем статичные данные
|
||||||
|
} catch (error) {
|
||||||
|
console.error('Error loading stats:', error);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
loadStats();
|
||||||
|
// Проверка авторизации для главной страницы
|
||||||
|
async function checkAuthForIndex() {
|
||||||
|
const token = localStorage.getItem('accessToken');
|
||||||
|
const nav = document.querySelector('.nav');
|
||||||
|
|
||||||
|
if (token) {
|
||||||
|
try {
|
||||||
|
const response = await fetch('http://localhost:8000/api/user', {
|
||||||
|
headers: {
|
||||||
|
'Authorization': `Bearer ${token}`
|
||||||
|
}
|
||||||
|
});
|
||||||
|
|
||||||
|
if (response.ok) {
|
||||||
|
const user = await response.json();
|
||||||
|
// Обновляем навигацию
|
||||||
|
nav.innerHTML = `
|
||||||
|
<a href="/">Главная</a>
|
||||||
|
<a href="/vacancies">Вакансии</a>
|
||||||
|
<a href="/resumes">Резюме</a>
|
||||||
|
<a href="/profile" style="background: #3b82f6;">
|
||||||
|
<i class="fas fa-user-circle"></i> ${user.full_name.split(' ')[0]}
|
||||||
|
</a>
|
||||||
|
`;
|
||||||
|
}
|
||||||
|
} catch (error) {
|
||||||
|
console.error('Error checking auth:', error);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
// Запускаем проверку после загрузки страницы
|
||||||
|
document.addEventListener('DOMContentLoaded', checkAuthForIndex);
|
||||||
|
</script>
|
||||||
|
<!-- Добавьте этот скрипт в head или перед закрывающим body -->
|
||||||
|
<script>
|
||||||
|
|
||||||
|
</script>
|
||||||
|
</body>
|
||||||
|
</html>
|
||||||
407
templates/login.html
Normal file
407
templates/login.html
Normal file
@@ -0,0 +1,407 @@
|
|||||||
|
<!DOCTYPE html>
|
||||||
|
<html lang="ru">
|
||||||
|
<head>
|
||||||
|
<meta charset="UTF-8">
|
||||||
|
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||||
|
<title>Вход | Rabota.Today</title>
|
||||||
|
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0-beta3/css/all.min.css">
|
||||||
|
<style>
|
||||||
|
* {
|
||||||
|
margin: 0;
|
||||||
|
padding: 0;
|
||||||
|
box-sizing: border-box;
|
||||||
|
font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
|
||||||
|
}
|
||||||
|
|
||||||
|
body {
|
||||||
|
background: linear-gradient(145deg, #eef5fa 0%, #e0eaf5 100%);
|
||||||
|
min-height: 100vh;
|
||||||
|
display: flex;
|
||||||
|
align-items: center;
|
||||||
|
justify-content: center;
|
||||||
|
padding: 20px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.auth-card {
|
||||||
|
max-width: 500px;
|
||||||
|
width: 100%;
|
||||||
|
background: white;
|
||||||
|
border-radius: 48px;
|
||||||
|
box-shadow: 0 40px 80px -20px rgba(0, 40, 80, 0.4);
|
||||||
|
overflow: hidden;
|
||||||
|
}
|
||||||
|
|
||||||
|
.auth-header {
|
||||||
|
background: #0b1c34;
|
||||||
|
color: white;
|
||||||
|
padding: 40px;
|
||||||
|
text-align: center;
|
||||||
|
}
|
||||||
|
|
||||||
|
.auth-header h1 {
|
||||||
|
font-size: 32px;
|
||||||
|
display: flex;
|
||||||
|
align-items: center;
|
||||||
|
justify-content: center;
|
||||||
|
gap: 15px;
|
||||||
|
margin-bottom: 10px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.auth-header h1 i {
|
||||||
|
color: #3b82f6;
|
||||||
|
background: rgba(255,255,255,0.1);
|
||||||
|
padding: 12px;
|
||||||
|
border-radius: 20px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.auth-header p {
|
||||||
|
color: #9bb8da;
|
||||||
|
}
|
||||||
|
|
||||||
|
.auth-form {
|
||||||
|
padding: 40px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.tabs {
|
||||||
|
display: flex;
|
||||||
|
gap: 10px;
|
||||||
|
margin-bottom: 30px;
|
||||||
|
background: #f0f7ff;
|
||||||
|
padding: 8px;
|
||||||
|
border-radius: 60px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.tab {
|
||||||
|
flex: 1;
|
||||||
|
padding: 15px;
|
||||||
|
text-align: center;
|
||||||
|
border-radius: 50px;
|
||||||
|
cursor: pointer;
|
||||||
|
font-weight: 600;
|
||||||
|
transition: 0.2s;
|
||||||
|
}
|
||||||
|
|
||||||
|
.tab.active {
|
||||||
|
background: white;
|
||||||
|
color: #0b1c34;
|
||||||
|
box-shadow: 0 4px 10px rgba(0,0,0,0.05);
|
||||||
|
}
|
||||||
|
|
||||||
|
.form-group {
|
||||||
|
margin-bottom: 25px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.form-group label {
|
||||||
|
display: flex;
|
||||||
|
align-items: center;
|
||||||
|
gap: 10px;
|
||||||
|
color: #1f3f60;
|
||||||
|
font-weight: 600;
|
||||||
|
margin-bottom: 8px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.form-group label i {
|
||||||
|
color: #3b82f6;
|
||||||
|
width: 20px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.form-group input {
|
||||||
|
width: 100%;
|
||||||
|
padding: 16px 20px;
|
||||||
|
border: 2px solid #dee9f5;
|
||||||
|
border-radius: 30px;
|
||||||
|
font-size: 16px;
|
||||||
|
transition: 0.2s;
|
||||||
|
}
|
||||||
|
|
||||||
|
.form-group input:focus {
|
||||||
|
border-color: #3b82f6;
|
||||||
|
outline: none;
|
||||||
|
box-shadow: 0 0 0 4px rgba(59,130,246,0.15);
|
||||||
|
}
|
||||||
|
|
||||||
|
.btn-submit {
|
||||||
|
width: 100%;
|
||||||
|
background: #0f2b4f;
|
||||||
|
color: white;
|
||||||
|
border: none;
|
||||||
|
padding: 18px;
|
||||||
|
border-radius: 50px;
|
||||||
|
font-weight: 700;
|
||||||
|
font-size: 18px;
|
||||||
|
cursor: pointer;
|
||||||
|
display: flex;
|
||||||
|
align-items: center;
|
||||||
|
justify-content: center;
|
||||||
|
gap: 10px;
|
||||||
|
transition: 0.2s;
|
||||||
|
}
|
||||||
|
|
||||||
|
.btn-submit:hover {
|
||||||
|
background: #1b3f6b;
|
||||||
|
}
|
||||||
|
|
||||||
|
.auth-footer {
|
||||||
|
text-align: center;
|
||||||
|
margin-top: 25px;
|
||||||
|
color: #4f7092;
|
||||||
|
}
|
||||||
|
|
||||||
|
.auth-footer a {
|
||||||
|
color: #0b1c34;
|
||||||
|
font-weight: 600;
|
||||||
|
text-decoration: none;
|
||||||
|
}
|
||||||
|
|
||||||
|
.error-message {
|
||||||
|
background: #fee2e2;
|
||||||
|
color: #b91c1c;
|
||||||
|
padding: 12px 20px;
|
||||||
|
border-radius: 30px;
|
||||||
|
margin-bottom: 20px;
|
||||||
|
display: none;
|
||||||
|
}
|
||||||
|
|
||||||
|
.success-message {
|
||||||
|
background: #e0f2e0;
|
||||||
|
color: #166534;
|
||||||
|
padding: 12px 20px;
|
||||||
|
border-radius: 30px;
|
||||||
|
margin-bottom: 20px;
|
||||||
|
display: none;
|
||||||
|
}
|
||||||
|
|
||||||
|
.back-link {
|
||||||
|
display: inline-block;
|
||||||
|
margin-top: 20px;
|
||||||
|
color: #4f7092;
|
||||||
|
text-decoration: none;
|
||||||
|
}
|
||||||
|
|
||||||
|
.back-link i {
|
||||||
|
margin-right: 5px;
|
||||||
|
}
|
||||||
|
</style>
|
||||||
|
</head>
|
||||||
|
<body>
|
||||||
|
<div class="auth-card">
|
||||||
|
<div class="auth-header">
|
||||||
|
<h1>
|
||||||
|
<i class="fas fa-briefcase"></i>
|
||||||
|
Rabota.Today
|
||||||
|
</h1>
|
||||||
|
<p>Вход в личный кабинет</p>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="auth-form">
|
||||||
|
<div class="tabs">
|
||||||
|
<div class="tab active" onclick="switchTab('login')">Вход</div>
|
||||||
|
<div class="tab" onclick="switchTab('register')">Регистрация</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div id="errorMessage" class="error-message"></div>
|
||||||
|
<div id="successMessage" class="success-message"></div>
|
||||||
|
|
||||||
|
<!-- Форма входа -->
|
||||||
|
<form id="loginForm" onsubmit="handleLogin(event)">
|
||||||
|
<div class="form-group">
|
||||||
|
<label><i class="fas fa-envelope"></i> Email</label>
|
||||||
|
<input type="email" id="loginEmail" placeholder="ivan@example.com" required>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="form-group">
|
||||||
|
<label><i class="fas fa-lock"></i> Пароль</label>
|
||||||
|
<input type="password" id="loginPassword" placeholder="Введите пароль" required>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<button type="submit" class="btn-submit">
|
||||||
|
<i class="fas fa-sign-in-alt"></i> Войти
|
||||||
|
</button>
|
||||||
|
</form>
|
||||||
|
|
||||||
|
<!-- Форма регистрации (скрыта по умолчанию) -->
|
||||||
|
<form id="registerForm" style="display: none;" onsubmit="handleRegister(event)">
|
||||||
|
<div class="form-group">
|
||||||
|
<label><i class="fas fa-user"></i> ФИО</label>
|
||||||
|
<input type="text" id="regFullName" placeholder="Иванов Иван Иванович" required>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="form-group">
|
||||||
|
<label><i class="fas fa-envelope"></i> Email</label>
|
||||||
|
<input type="email" id="regEmail" placeholder="ivan@example.com" required>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="form-group">
|
||||||
|
<label><i class="fas fa-phone"></i> Телефон</label>
|
||||||
|
<input type="tel" id="regPhone" placeholder="+7 999 123 45 67" required>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="form-group">
|
||||||
|
<label><i class="fab fa-telegram"></i> Telegram (опционально)</label>
|
||||||
|
<input type="text" id="regTelegram" placeholder="@username">
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="form-group">
|
||||||
|
<label><i class="fas fa-lock"></i> Пароль</label>
|
||||||
|
<input type="password" id="regPassword" placeholder="Минимум 6 символов" required>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="form-group">
|
||||||
|
<label><i class="fas fa-user-tag"></i> Я</label>
|
||||||
|
<select id="regRole" style="width: 100%; padding: 16px 20px; border: 2px solid #dee9f5; border-radius: 30px;">
|
||||||
|
<option value="employee">Соискатель</option>
|
||||||
|
<option value="employer">Работодатель</option>
|
||||||
|
</select>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<button type="submit" class="btn-submit">
|
||||||
|
<i class="fas fa-check-circle"></i> Зарегистрироваться
|
||||||
|
</button>
|
||||||
|
</form>
|
||||||
|
|
||||||
|
<div class="auth-footer">
|
||||||
|
<a href="/" class="back-link"><i class="fas fa-arrow-left"></i> На главную</a>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<script>
|
||||||
|
const API_BASE_URL = 'http://localhost:8000/api';
|
||||||
|
|
||||||
|
function switchTab(tab) {
|
||||||
|
const tabs = document.querySelectorAll('.tab');
|
||||||
|
const loginForm = document.getElementById('loginForm');
|
||||||
|
const registerForm = document.getElementById('registerForm');
|
||||||
|
|
||||||
|
tabs.forEach(t => t.classList.remove('active'));
|
||||||
|
|
||||||
|
if (tab === 'login') {
|
||||||
|
tabs[0].classList.add('active');
|
||||||
|
loginForm.style.display = 'block';
|
||||||
|
registerForm.style.display = 'none';
|
||||||
|
} else {
|
||||||
|
tabs[1].classList.add('active');
|
||||||
|
loginForm.style.display = 'none';
|
||||||
|
registerForm.style.display = 'block';
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
function showError(message) {
|
||||||
|
const errorEl = document.getElementById('errorMessage');
|
||||||
|
errorEl.textContent = message;
|
||||||
|
errorEl.style.display = 'block';
|
||||||
|
setTimeout(() => {
|
||||||
|
errorEl.style.display = 'none';
|
||||||
|
}, 5000);
|
||||||
|
}
|
||||||
|
|
||||||
|
function showSuccess(message) {
|
||||||
|
const successEl = document.getElementById('successMessage');
|
||||||
|
successEl.textContent = message;
|
||||||
|
successEl.style.display = 'block';
|
||||||
|
setTimeout(() => {
|
||||||
|
successEl.style.display = 'none';
|
||||||
|
}, 3000);
|
||||||
|
}
|
||||||
|
|
||||||
|
async function handleLogin(event) {
|
||||||
|
event.preventDefault();
|
||||||
|
|
||||||
|
const email = document.getElementById('loginEmail').value;
|
||||||
|
const password = document.getElementById('loginPassword').value;
|
||||||
|
|
||||||
|
try {
|
||||||
|
const response = await fetch(`${API_BASE_URL}/login`, {
|
||||||
|
method: 'POST',
|
||||||
|
headers: {
|
||||||
|
'Content-Type': 'application/json',
|
||||||
|
},
|
||||||
|
body: JSON.stringify({ email, password })
|
||||||
|
});
|
||||||
|
|
||||||
|
const data = await response.json();
|
||||||
|
|
||||||
|
if (!response.ok) {
|
||||||
|
throw new Error(data.detail || 'Ошибка входа');
|
||||||
|
}
|
||||||
|
|
||||||
|
// Сохраняем токен
|
||||||
|
localStorage.setItem('accessToken', data.access_token);
|
||||||
|
localStorage.setItem('userId', data.user_id);
|
||||||
|
localStorage.setItem('userRole', data.role);
|
||||||
|
localStorage.setItem('userName', data.full_name);
|
||||||
|
|
||||||
|
showSuccess('Вход выполнен успешно!');
|
||||||
|
|
||||||
|
// Перенаправляем в зависимости от роли
|
||||||
|
setTimeout(() => {
|
||||||
|
if (data.role === 'employer') {
|
||||||
|
window.location.href = '/profile';
|
||||||
|
} else {
|
||||||
|
window.location.href = '/profile';
|
||||||
|
}
|
||||||
|
}, 1000);
|
||||||
|
|
||||||
|
} catch (error) {
|
||||||
|
showError(error.message);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
async function handleRegister(event) {
|
||||||
|
event.preventDefault();
|
||||||
|
|
||||||
|
const userData = {
|
||||||
|
full_name: document.getElementById('regFullName').value,
|
||||||
|
email: document.getElementById('regEmail').value,
|
||||||
|
phone: document.getElementById('regPhone').value,
|
||||||
|
telegram: document.getElementById('regTelegram').value || null,
|
||||||
|
password: document.getElementById('regPassword').value,
|
||||||
|
role: document.getElementById('regRole').value
|
||||||
|
};
|
||||||
|
|
||||||
|
// Валидация
|
||||||
|
if (userData.password.length < 6) {
|
||||||
|
showError('Пароль должен быть не менее 6 символов');
|
||||||
|
return;
|
||||||
|
}
|
||||||
|
|
||||||
|
try {
|
||||||
|
const response = await fetch(`${API_BASE_URL}/register`, {
|
||||||
|
method: 'POST',
|
||||||
|
headers: {
|
||||||
|
'Content-Type': 'application/json',
|
||||||
|
},
|
||||||
|
body: JSON.stringify(userData)
|
||||||
|
});
|
||||||
|
|
||||||
|
const data = await response.json();
|
||||||
|
|
||||||
|
if (!response.ok) {
|
||||||
|
throw new Error(data.detail || 'Ошибка регистрации');
|
||||||
|
}
|
||||||
|
|
||||||
|
// Сохраняем токен
|
||||||
|
localStorage.setItem('accessToken', data.access_token);
|
||||||
|
localStorage.setItem('userId', data.user_id);
|
||||||
|
localStorage.setItem('userRole', data.role);
|
||||||
|
localStorage.setItem('userName', data.full_name);
|
||||||
|
|
||||||
|
showSuccess('Регистрация успешна!');
|
||||||
|
|
||||||
|
// Перенаправляем в профиль
|
||||||
|
setTimeout(() => {
|
||||||
|
window.location.href = '/profile';
|
||||||
|
}, 1000);
|
||||||
|
|
||||||
|
} catch (error) {
|
||||||
|
showError(error.message);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
// Проверяем, может пользователь уже залогинен
|
||||||
|
if (localStorage.getItem('accessToken')) {
|
||||||
|
window.location.href = '/profile';
|
||||||
|
}
|
||||||
|
</script>
|
||||||
|
</body>
|
||||||
|
</html>
|
||||||
820
templates/profile.html
Normal file
820
templates/profile.html
Normal file
@@ -0,0 +1,820 @@
|
|||||||
|
<!DOCTYPE html>
|
||||||
|
<html lang="ru">
|
||||||
|
<head>
|
||||||
|
<meta charset="UTF-8">
|
||||||
|
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||||
|
<title>Профиль | Rabota.Today</title>
|
||||||
|
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0-beta3/css/all.min.css">
|
||||||
|
<style>
|
||||||
|
* {
|
||||||
|
margin: 0;
|
||||||
|
padding: 0;
|
||||||
|
box-sizing: border-box;
|
||||||
|
font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
|
||||||
|
}
|
||||||
|
|
||||||
|
body {
|
||||||
|
background: linear-gradient(145deg, #eef5fa 0%, #e0eaf5 100%);
|
||||||
|
min-height: 100vh;
|
||||||
|
}
|
||||||
|
|
||||||
|
.container {
|
||||||
|
max-width: 1200px;
|
||||||
|
margin: 0 auto;
|
||||||
|
padding: 20px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.header {
|
||||||
|
background: #0b1c34;
|
||||||
|
color: white;
|
||||||
|
padding: 20px 40px;
|
||||||
|
border-radius: 40px;
|
||||||
|
margin-bottom: 40px;
|
||||||
|
display: flex;
|
||||||
|
justify-content: space-between;
|
||||||
|
align-items: center;
|
||||||
|
}
|
||||||
|
|
||||||
|
.logo {
|
||||||
|
font-size: 28px;
|
||||||
|
font-weight: 700;
|
||||||
|
display: flex;
|
||||||
|
align-items: center;
|
||||||
|
gap: 15px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.logo i {
|
||||||
|
color: #3b82f6;
|
||||||
|
background: rgba(255,255,255,0.1);
|
||||||
|
padding: 12px;
|
||||||
|
border-radius: 20px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.nav {
|
||||||
|
display: flex;
|
||||||
|
gap: 15px;
|
||||||
|
align-items: center;
|
||||||
|
}
|
||||||
|
|
||||||
|
.nav a {
|
||||||
|
color: white;
|
||||||
|
text-decoration: none;
|
||||||
|
padding: 10px 20px;
|
||||||
|
border-radius: 30px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.nav a:hover {
|
||||||
|
background: rgba(255,255,255,0.1);
|
||||||
|
}
|
||||||
|
|
||||||
|
.nav .logout-btn {
|
||||||
|
background: rgba(255,255,255,0.1);
|
||||||
|
cursor: pointer;
|
||||||
|
}
|
||||||
|
|
||||||
|
.profile-grid {
|
||||||
|
display: grid;
|
||||||
|
grid-template-columns: 300px 1fr;
|
||||||
|
gap: 30px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.profile-sidebar {
|
||||||
|
background: white;
|
||||||
|
border-radius: 40px;
|
||||||
|
padding: 30px;
|
||||||
|
text-align: center;
|
||||||
|
box-shadow: 0 20px 40px rgba(0,20,40,0.1);
|
||||||
|
height: fit-content;
|
||||||
|
}
|
||||||
|
|
||||||
|
.avatar {
|
||||||
|
width: 120px;
|
||||||
|
height: 120px;
|
||||||
|
background: #eef4fa;
|
||||||
|
border-radius: 60px;
|
||||||
|
display: flex;
|
||||||
|
align-items: center;
|
||||||
|
justify-content: center;
|
||||||
|
margin: 0 auto 20px;
|
||||||
|
font-size: 48px;
|
||||||
|
color: #3b82f6;
|
||||||
|
}
|
||||||
|
|
||||||
|
.profile-name {
|
||||||
|
font-size: 24px;
|
||||||
|
font-weight: 700;
|
||||||
|
color: #0b1c34;
|
||||||
|
margin-bottom: 5px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.profile-role {
|
||||||
|
color: #3b82f6;
|
||||||
|
font-weight: 600;
|
||||||
|
margin-bottom: 20px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.profile-stats {
|
||||||
|
display: flex;
|
||||||
|
justify-content: center;
|
||||||
|
gap: 20px;
|
||||||
|
margin: 20px 0;
|
||||||
|
padding: 20px 0;
|
||||||
|
border-top: 1px solid #dee9f5;
|
||||||
|
border-bottom: 1px solid #dee9f5;
|
||||||
|
}
|
||||||
|
|
||||||
|
.stat {
|
||||||
|
text-align: center;
|
||||||
|
}
|
||||||
|
|
||||||
|
.stat-value {
|
||||||
|
font-size: 20px;
|
||||||
|
font-weight: 700;
|
||||||
|
color: #0b1c34;
|
||||||
|
}
|
||||||
|
|
||||||
|
.stat-label {
|
||||||
|
font-size: 12px;
|
||||||
|
color: #4f7092;
|
||||||
|
}
|
||||||
|
|
||||||
|
.contact-info {
|
||||||
|
text-align: left;
|
||||||
|
margin-top: 20px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.contact-item {
|
||||||
|
display: flex;
|
||||||
|
align-items: center;
|
||||||
|
gap: 10px;
|
||||||
|
padding: 10px 0;
|
||||||
|
color: #1f3f60;
|
||||||
|
}
|
||||||
|
|
||||||
|
.contact-item i {
|
||||||
|
color: #3b82f6;
|
||||||
|
width: 20px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.profile-content {
|
||||||
|
background: white;
|
||||||
|
border-radius: 40px;
|
||||||
|
padding: 30px;
|
||||||
|
box-shadow: 0 20px 40px rgba(0,20,40,0.1);
|
||||||
|
}
|
||||||
|
|
||||||
|
.content-tabs {
|
||||||
|
display: flex;
|
||||||
|
gap: 20px;
|
||||||
|
margin-bottom: 30px;
|
||||||
|
border-bottom: 2px solid #dee9f5;
|
||||||
|
padding-bottom: 15px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.content-tab {
|
||||||
|
padding: 10px 20px;
|
||||||
|
cursor: pointer;
|
||||||
|
font-weight: 600;
|
||||||
|
color: #4f7092;
|
||||||
|
border-radius: 30px;
|
||||||
|
transition: 0.2s;
|
||||||
|
}
|
||||||
|
|
||||||
|
.content-tab.active {
|
||||||
|
background: #eef4fa;
|
||||||
|
color: #0b1c34;
|
||||||
|
}
|
||||||
|
|
||||||
|
.content-pane {
|
||||||
|
display: none;
|
||||||
|
}
|
||||||
|
|
||||||
|
.content-pane.active {
|
||||||
|
display: block;
|
||||||
|
}
|
||||||
|
|
||||||
|
.btn {
|
||||||
|
padding: 12px 24px;
|
||||||
|
border-radius: 30px;
|
||||||
|
border: none;
|
||||||
|
font-weight: 600;
|
||||||
|
cursor: pointer;
|
||||||
|
display: inline-flex;
|
||||||
|
align-items: center;
|
||||||
|
gap: 8px;
|
||||||
|
transition: 0.2s;
|
||||||
|
}
|
||||||
|
|
||||||
|
.btn-primary {
|
||||||
|
background: #0b1c34;
|
||||||
|
color: white;
|
||||||
|
}
|
||||||
|
|
||||||
|
.btn-primary:hover {
|
||||||
|
background: #1b3f6b;
|
||||||
|
}
|
||||||
|
|
||||||
|
.btn-outline {
|
||||||
|
background: transparent;
|
||||||
|
border: 2px solid #3b82f6;
|
||||||
|
color: #0b1c34;
|
||||||
|
}
|
||||||
|
|
||||||
|
.btn-outline:hover {
|
||||||
|
background: #eef4fa;
|
||||||
|
}
|
||||||
|
|
||||||
|
.vacancies-grid {
|
||||||
|
display: grid;
|
||||||
|
grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
|
||||||
|
gap: 20px;
|
||||||
|
margin-top: 20px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.vacancy-card {
|
||||||
|
background: #f9fcff;
|
||||||
|
border: 1px solid #dee9f5;
|
||||||
|
border-radius: 30px;
|
||||||
|
padding: 25px;
|
||||||
|
transition: 0.2s;
|
||||||
|
}
|
||||||
|
|
||||||
|
.vacancy-card:hover {
|
||||||
|
background: white;
|
||||||
|
box-shadow: 0 10px 30px rgba(0,20,40,0.1);
|
||||||
|
}
|
||||||
|
|
||||||
|
.vacancy-card h3 {
|
||||||
|
color: #0b1c34;
|
||||||
|
margin-bottom: 10px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.vacancy-salary {
|
||||||
|
color: #3b82f6;
|
||||||
|
font-weight: 700;
|
||||||
|
font-size: 18px;
|
||||||
|
margin: 10px 0;
|
||||||
|
}
|
||||||
|
|
||||||
|
.resume-section {
|
||||||
|
background: #f9fcff;
|
||||||
|
border-radius: 30px;
|
||||||
|
padding: 30px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.resume-field {
|
||||||
|
margin-bottom: 20px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.resume-field label {
|
||||||
|
display: block;
|
||||||
|
font-weight: 600;
|
||||||
|
color: #1f3f60;
|
||||||
|
margin-bottom: 5px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.resume-field input,
|
||||||
|
.resume-field textarea {
|
||||||
|
width: 100%;
|
||||||
|
padding: 12px 16px;
|
||||||
|
border: 2px solid #dee9f5;
|
||||||
|
border-radius: 20px;
|
||||||
|
font-size: 16px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.resume-field input:focus,
|
||||||
|
.resume-field textarea:focus {
|
||||||
|
border-color: #3b82f6;
|
||||||
|
outline: none;
|
||||||
|
}
|
||||||
|
|
||||||
|
.exp-item, .edu-item {
|
||||||
|
background: white;
|
||||||
|
border-radius: 20px;
|
||||||
|
padding: 20px;
|
||||||
|
margin-bottom: 15px;
|
||||||
|
border: 1px solid #dee9f5;
|
||||||
|
}
|
||||||
|
|
||||||
|
.loading {
|
||||||
|
text-align: center;
|
||||||
|
padding: 40px;
|
||||||
|
color: #4f7092;
|
||||||
|
}
|
||||||
|
</style>
|
||||||
|
</head>
|
||||||
|
<body>
|
||||||
|
<div class="container">
|
||||||
|
<div class="header">
|
||||||
|
<div class="logo">
|
||||||
|
<i class="fas fa-briefcase"></i>
|
||||||
|
Rabota.Today
|
||||||
|
</div>
|
||||||
|
<div class="nav">
|
||||||
|
<a href="/">Главная</a>
|
||||||
|
<a href="/vacancies">Вакансии</a>
|
||||||
|
<a href="/resumes">Резюме</a>
|
||||||
|
<a href="/profile" style="background: #3b82f6;">Профиль</a>
|
||||||
|
<span class="logout-btn" onclick="logout()">
|
||||||
|
<i class="fas fa-sign-out-alt"></i> Выйти
|
||||||
|
</span>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="profile-grid">
|
||||||
|
<!-- Боковая панель -->
|
||||||
|
<div class="profile-sidebar">
|
||||||
|
<div class="avatar">
|
||||||
|
<i class="fas fa-user-circle"></i>
|
||||||
|
</div>
|
||||||
|
<div class="profile-name" id="profileName">Загрузка...</div>
|
||||||
|
<div class="profile-role" id="profileRole"></div>
|
||||||
|
|
||||||
|
<div class="profile-stats">
|
||||||
|
<div class="stat">
|
||||||
|
<div class="stat-value" id="profileViews">0</div>
|
||||||
|
<div class="stat-label">просмотров</div>
|
||||||
|
</div>
|
||||||
|
<div class="stat">
|
||||||
|
<div class="stat-value" id="profileFavorites">0</div>
|
||||||
|
<div class="stat-label">в избранном</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="contact-info">
|
||||||
|
<div class="contact-item">
|
||||||
|
<i class="fas fa-envelope"></i>
|
||||||
|
<span id="profileEmail"></span>
|
||||||
|
</div>
|
||||||
|
<div class="contact-item">
|
||||||
|
<i class="fas fa-phone"></i>
|
||||||
|
<span id="profilePhone"></span>
|
||||||
|
</div>
|
||||||
|
<div class="contact-item">
|
||||||
|
<i class="fab fa-telegram"></i>
|
||||||
|
<span id="profileTelegram"></span>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<!-- Основной контент -->
|
||||||
|
<div class="profile-content">
|
||||||
|
<div class="content-tabs">
|
||||||
|
<div class="content-tab active" onclick="switchContentTab('main')">Главное</div>
|
||||||
|
<div class="content-tab" id="employerTab" onclick="switchContentTab('vacancies')">Вакансии</div>
|
||||||
|
<div class="content-tab" id="employeeTab" onclick="switchContentTab('resume')">Резюме</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<!-- Главная вкладка -->
|
||||||
|
<div class="content-pane active" id="mainPane">
|
||||||
|
<h2 style="margin-bottom: 20px;">Добро пожаловать!</h2>
|
||||||
|
<p style="color: #4f7092; margin-bottom: 30px;">Здесь будет ваша активность и статистика</p>
|
||||||
|
|
||||||
|
<div style="background: #f9fcff; border-radius: 30px; padding: 30px;">
|
||||||
|
<h3>Быстрые действия</h3>
|
||||||
|
<div style="display: flex; gap: 15px; margin-top: 20px;">
|
||||||
|
<button class="btn btn-primary" onclick="window.location.href='/vacancies'">
|
||||||
|
<i class="fas fa-search"></i> Найти вакансии
|
||||||
|
</button>
|
||||||
|
<button class="btn btn-outline" onclick="window.location.href='/resumes'">
|
||||||
|
<i class="fas fa-users"></i> Найти сотрудников
|
||||||
|
</button>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<!-- Вкладка с вакансиями -->
|
||||||
|
<div class="content-pane" id="vacanciesPane">
|
||||||
|
<div style="display: flex; justify-content: space-between; align-items: center; margin-bottom: 20px;">
|
||||||
|
<h2>Мои вакансии</h2>
|
||||||
|
<button class="btn btn-primary" onclick="openVacancyModal()">
|
||||||
|
<i class="fas fa-plus"></i> Создать вакансию
|
||||||
|
</button>
|
||||||
|
</div>
|
||||||
|
<div id="vacanciesList" class="vacancies-grid">
|
||||||
|
<div class="loading">Загрузка вакансий...</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<!-- Вкладка с резюме -->
|
||||||
|
<div class="content-pane" id="resumePane">
|
||||||
|
<div style="display: flex; justify-content: space-between; align-items: center; margin-bottom: 20px;">
|
||||||
|
<h2>Мое резюме</h2>
|
||||||
|
<button class="btn btn-primary" onclick="saveResume()">
|
||||||
|
<i class="fas fa-save"></i> Сохранить
|
||||||
|
</button>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="resume-section">
|
||||||
|
<div class="resume-field">
|
||||||
|
<label>Желаемая должность</label>
|
||||||
|
<input type="text" id="desiredPosition" placeholder="Например: Frontend-разработчик">
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="resume-field">
|
||||||
|
<label>О себе</label>
|
||||||
|
<textarea id="aboutMe" rows="4" placeholder="Расскажите о своем опыте"></textarea>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="resume-field">
|
||||||
|
<label>Желаемая зарплата</label>
|
||||||
|
<input type="text" id="desiredSalary" placeholder="от 200 000 ₽">
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<!-- 👇 ДОБАВЬТЕ ЭТО ПОЛЕ ДЛЯ ТЕГОВ 👇 -->
|
||||||
|
<div class="resume-field">
|
||||||
|
<label>Навыки (теги через запятую)</label>
|
||||||
|
<input type="text" id="resumeTags" placeholder="Python, JavaScript, React, SQL">
|
||||||
|
</div>
|
||||||
|
<!-- 👆 КОНЕЦ ДОБАВЛЕНИЯ 👆 -->
|
||||||
|
|
||||||
|
<h3 style="margin: 30px 0 20px;">Опыт работы</h3>
|
||||||
|
<div id="experienceContainer"></div>
|
||||||
|
<button class="btn btn-outline" onclick="addExperience()" style="margin-bottom: 30px;">
|
||||||
|
<i class="fas fa-plus"></i> Добавить опыт
|
||||||
|
</button>
|
||||||
|
|
||||||
|
<h3 style="margin: 20px 0;">Образование</h3>
|
||||||
|
<div id="educationContainer"></div>
|
||||||
|
<button class="btn btn-outline" onclick="addEducation()">
|
||||||
|
<i class="fas fa-plus"></i> Добавить образование
|
||||||
|
</button>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<!-- Модальное окно создания вакансии -->
|
||||||
|
<div id="vacancyModal" style="display: none; position: fixed; top: 0; left: 0; width: 100%; height: 100%; background: rgba(0,0,0,0.5); align-items: center; justify-content: center; z-index: 1000;">
|
||||||
|
<div style="background: white; max-width: 500px; width: 90%; border-radius: 40px; padding: 40px;">
|
||||||
|
<h3 style="margin-bottom: 20px;">Новая вакансия</h3>
|
||||||
|
|
||||||
|
<div class="resume-field">
|
||||||
|
<label>Название</label>
|
||||||
|
<input type="text" id="vacancyTitle" placeholder="Менеджер по продажам">
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="resume-field">
|
||||||
|
<label>Зарплата</label>
|
||||||
|
<input type="text" id="vacancySalary" placeholder="от 100 000 ₽">
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<!-- 👇 ВОТ СЮДА ВСТАВЬТЕ КОД С ТЕГАМИ 👇 -->
|
||||||
|
<div class="resume-field">
|
||||||
|
<label>Теги (через запятую)</label>
|
||||||
|
<input type="text" id="vacancyTags" placeholder="Python, JavaScript, React">
|
||||||
|
</div>
|
||||||
|
<!-- 👆 КОНЕЦ ВСТАВКИ 👆 -->
|
||||||
|
|
||||||
|
<div class="resume-field">
|
||||||
|
<label>Описание</label>
|
||||||
|
<textarea id="vacancyDescription" rows="4" placeholder="Обязанности, требования..."></textarea>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="resume-field">
|
||||||
|
<label>Контакт</label>
|
||||||
|
<input type="text" id="vacancyContact" placeholder="@telegram">
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div style="display: flex; gap: 10px; margin-top: 30px;">
|
||||||
|
<button class="btn btn-primary" onclick="createVacancy()" style="flex: 1;">Создать</button>
|
||||||
|
<button class="btn btn-outline" onclick="closeVacancyModal()" style="flex: 1;">Отмена</button>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<script>
|
||||||
|
const API_BASE_URL = 'http://localhost:8000/api';
|
||||||
|
let currentUser = null;
|
||||||
|
|
||||||
|
// Проверка авторизации
|
||||||
|
const token = localStorage.getItem('accessToken');
|
||||||
|
if (!token) {
|
||||||
|
window.location.href = '/login';
|
||||||
|
}
|
||||||
|
|
||||||
|
// Загрузка данных профиля
|
||||||
|
async function loadProfile() {
|
||||||
|
try {
|
||||||
|
const response = await fetch(`${API_BASE_URL}/user`, {
|
||||||
|
headers: {
|
||||||
|
'Authorization': `Bearer ${token}`
|
||||||
|
}
|
||||||
|
});
|
||||||
|
|
||||||
|
if (!response.ok) throw new Error('Ошибка загрузки');
|
||||||
|
|
||||||
|
currentUser = await response.json();
|
||||||
|
|
||||||
|
document.getElementById('profileName').textContent = currentUser.full_name;
|
||||||
|
document.getElementById('profileEmail').textContent = currentUser.email;
|
||||||
|
document.getElementById('profilePhone').textContent = currentUser.phone;
|
||||||
|
document.getElementById('profileTelegram').textContent = currentUser.telegram || '—';
|
||||||
|
document.getElementById('profileRole').textContent = currentUser.role === 'employee' ? 'Соискатель' : 'Работодатель';
|
||||||
|
|
||||||
|
// Показываем нужные вкладки
|
||||||
|
if (currentUser.role === 'employer') {
|
||||||
|
document.getElementById('employerTab').style.display = 'block';
|
||||||
|
document.getElementById('employeeTab').style.display = 'none';
|
||||||
|
loadVacancies();
|
||||||
|
} else {
|
||||||
|
document.getElementById('employerTab').style.display = 'none';
|
||||||
|
document.getElementById('employeeTab').style.display = 'block';
|
||||||
|
loadResume();
|
||||||
|
}
|
||||||
|
|
||||||
|
} catch (error) {
|
||||||
|
console.error('Error loading profile:', error);
|
||||||
|
logout();
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
// Загрузка вакансий
|
||||||
|
async function loadVacancies() {
|
||||||
|
try {
|
||||||
|
const response = await fetch(`${API_BASE_URL}/vacancies`, {
|
||||||
|
headers: {
|
||||||
|
'Authorization': `Bearer ${token}`
|
||||||
|
}
|
||||||
|
});
|
||||||
|
|
||||||
|
const vacancies = await response.json();
|
||||||
|
const container = document.getElementById('vacanciesList');
|
||||||
|
|
||||||
|
if (vacancies.length === 0) {
|
||||||
|
container.innerHTML = '<div class="loading">У вас пока нет вакансий</div>';
|
||||||
|
return;
|
||||||
|
}
|
||||||
|
|
||||||
|
container.innerHTML = vacancies.map(v => `
|
||||||
|
<div class="vacancy-card">
|
||||||
|
<h3>${escapeHtml(v.title)}</h3>
|
||||||
|
<div class="vacancy-salary">${escapeHtml(v.salary || 'з/п не указана')}</div>
|
||||||
|
<p>${escapeHtml(v.description || '')}</p>
|
||||||
|
<div style="margin-top: 15px; color: #4f7092;">
|
||||||
|
<i class="fab fa-telegram"></i> ${escapeHtml(v.contact || '—')}
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
`).join('');
|
||||||
|
|
||||||
|
} catch (error) {
|
||||||
|
console.error('Error loading vacancies:', error);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
// Загрузка резюме
|
||||||
|
async function loadResume() {
|
||||||
|
try {
|
||||||
|
const response = await fetch(`${API_BASE_URL}/resume`, {
|
||||||
|
headers: { 'Authorization': `Bearer ${token}` }
|
||||||
|
});
|
||||||
|
|
||||||
|
if (response.status === 404) {
|
||||||
|
// Резюме не найдено - показываем пустую форму
|
||||||
|
addExperience();
|
||||||
|
addEducation();
|
||||||
|
return;
|
||||||
|
}
|
||||||
|
|
||||||
|
const resume = await response.json();
|
||||||
|
|
||||||
|
document.getElementById('desiredPosition').value = resume.desired_position || '';
|
||||||
|
document.getElementById('aboutMe').value = resume.about_me || '';
|
||||||
|
document.getElementById('desiredSalary').value = resume.desired_salary || '';
|
||||||
|
|
||||||
|
// 👇 ЗАГРУЖАЕМ ТЕГИ 👇
|
||||||
|
if (resume.tags && resume.tags.length > 0) {
|
||||||
|
document.getElementById('resumeTags').value = resume.tags.map(t => t.name).join(', ');
|
||||||
|
}
|
||||||
|
|
||||||
|
// Загрузка опыта
|
||||||
|
document.getElementById('experienceContainer').innerHTML = '';
|
||||||
|
resume.work_experience.forEach(exp => {
|
||||||
|
addExperience(exp.position, exp.company, exp.period);
|
||||||
|
});
|
||||||
|
|
||||||
|
// Загрузка образования
|
||||||
|
document.getElementById('educationContainer').innerHTML = '';
|
||||||
|
resume.education.forEach(edu => {
|
||||||
|
addEducation(edu.institution, edu.specialty, edu.graduation_year);
|
||||||
|
});
|
||||||
|
|
||||||
|
} catch (error) {
|
||||||
|
console.error('Error loading resume:', error);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
// Добавление опыта
|
||||||
|
function addExperience(position = '', company = '', period = '') {
|
||||||
|
const container = document.getElementById('experienceContainer');
|
||||||
|
const item = document.createElement('div');
|
||||||
|
item.className = 'exp-item';
|
||||||
|
item.innerHTML = `
|
||||||
|
<div class="resume-field">
|
||||||
|
<label>Должность</label>
|
||||||
|
<input type="text" class="exp-position" value="${escapeHtml(position)}">
|
||||||
|
</div>
|
||||||
|
<div class="resume-field">
|
||||||
|
<label>Компания</label>
|
||||||
|
<input type="text" class="exp-company" value="${escapeHtml(company)}">
|
||||||
|
</div>
|
||||||
|
<div class="resume-field">
|
||||||
|
<label>Период</label>
|
||||||
|
<input type="text" class="exp-period" value="${escapeHtml(period)}">
|
||||||
|
</div>
|
||||||
|
<button class="btn btn-outline" onclick="this.closest('.exp-item').remove()" style="margin-top: 10px;">
|
||||||
|
<i class="fas fa-trash"></i> Удалить
|
||||||
|
</button>
|
||||||
|
`;
|
||||||
|
container.appendChild(item);
|
||||||
|
}
|
||||||
|
|
||||||
|
// Добавление образования
|
||||||
|
function addEducation(institution = '', specialty = '', year = '') {
|
||||||
|
const container = document.getElementById('educationContainer');
|
||||||
|
const item = document.createElement('div');
|
||||||
|
item.className = 'edu-item';
|
||||||
|
item.innerHTML = `
|
||||||
|
<div class="resume-field">
|
||||||
|
<label>Учебное заведение</label>
|
||||||
|
<input type="text" class="edu-institution" value="${escapeHtml(institution)}">
|
||||||
|
</div>
|
||||||
|
<div class="resume-field">
|
||||||
|
<label>Специальность</label>
|
||||||
|
<input type="text" class="edu-specialty" value="${escapeHtml(specialty)}">
|
||||||
|
</div>
|
||||||
|
<div class="resume-field">
|
||||||
|
<label>Год окончания</label>
|
||||||
|
<input type="text" class="edu-year" value="${escapeHtml(year)}">
|
||||||
|
</div>
|
||||||
|
<button class="btn btn-outline" onclick="this.closest('.edu-item').remove()" style="margin-top: 10px;">
|
||||||
|
<i class="fas fa-trash"></i> Удалить
|
||||||
|
</button>
|
||||||
|
`;
|
||||||
|
container.appendChild(item);
|
||||||
|
}
|
||||||
|
|
||||||
|
// Сохранение резюме
|
||||||
|
async function saveResume() {
|
||||||
|
const workExperience = [];
|
||||||
|
document.querySelectorAll('.exp-item').forEach(item => {
|
||||||
|
workExperience.push({
|
||||||
|
position: item.querySelector('.exp-position')?.value || '',
|
||||||
|
company: item.querySelector('.exp-company')?.value || '',
|
||||||
|
period: item.querySelector('.exp-period')?.value || null
|
||||||
|
});
|
||||||
|
});
|
||||||
|
|
||||||
|
const education = [];
|
||||||
|
document.querySelectorAll('.edu-item').forEach(item => {
|
||||||
|
education.push({
|
||||||
|
institution: item.querySelector('.edu-institution')?.value || '',
|
||||||
|
specialty: item.querySelector('.edu-specialty')?.value || null,
|
||||||
|
graduation_year: item.querySelector('.edu-year')?.value || null
|
||||||
|
});
|
||||||
|
});
|
||||||
|
|
||||||
|
// Получаем теги
|
||||||
|
const tagsInput = document.getElementById('resumeTags')?.value || '';
|
||||||
|
const tags = tagsInput
|
||||||
|
.split(',')
|
||||||
|
.map(t => t.trim())
|
||||||
|
.filter(t => t.length > 0);
|
||||||
|
|
||||||
|
const resumeData = {
|
||||||
|
desired_position: document.getElementById('desiredPosition').value || null,
|
||||||
|
about_me: document.getElementById('aboutMe').value || null,
|
||||||
|
desired_salary: document.getElementById('desiredSalary').value || null,
|
||||||
|
work_experience: workExperience,
|
||||||
|
education: education,
|
||||||
|
tags: tags // добавляем теги
|
||||||
|
};
|
||||||
|
|
||||||
|
try {
|
||||||
|
const response = await fetch(`${API_BASE_URL}/resume`, {
|
||||||
|
method: 'POST',
|
||||||
|
headers: {
|
||||||
|
'Content-Type': 'application/json',
|
||||||
|
'Authorization': `Bearer ${token}`
|
||||||
|
},
|
||||||
|
body: JSON.stringify(resumeData)
|
||||||
|
});
|
||||||
|
|
||||||
|
if (!response.ok) throw new Error('Ошибка сохранения');
|
||||||
|
|
||||||
|
alert('Резюме сохранено!');
|
||||||
|
} catch (error) {
|
||||||
|
alert(error.message);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
// Создание вакансии
|
||||||
|
async function createVacancy() {
|
||||||
|
// Получаем теги из поля ввода
|
||||||
|
const tagsInput = document.getElementById('vacancyTags')?.value || '';
|
||||||
|
const tags = tagsInput
|
||||||
|
.split(',')
|
||||||
|
.map(t => t.trim())
|
||||||
|
.filter(t => t.length > 0);
|
||||||
|
|
||||||
|
const vacancyData = {
|
||||||
|
title: document.getElementById('vacancyTitle').value,
|
||||||
|
salary: document.getElementById('vacancySalary').value || null,
|
||||||
|
description: document.getElementById('vacancyDescription').value || null,
|
||||||
|
contact: document.getElementById('vacancyContact').value || null,
|
||||||
|
tags: tags // добавляем теги в данные
|
||||||
|
};
|
||||||
|
|
||||||
|
if (!vacancyData.title) {
|
||||||
|
alert('Введите название вакансии');
|
||||||
|
return;
|
||||||
|
}
|
||||||
|
|
||||||
|
try {
|
||||||
|
const response = await fetch(`${API_BASE_URL}/vacancies`, {
|
||||||
|
method: 'POST',
|
||||||
|
headers: {
|
||||||
|
'Content-Type': 'application/json',
|
||||||
|
'Authorization': `Bearer ${token}`
|
||||||
|
},
|
||||||
|
body: JSON.stringify(vacancyData)
|
||||||
|
});
|
||||||
|
|
||||||
|
if (!response.ok) throw new Error('Ошибка создания');
|
||||||
|
|
||||||
|
closeVacancyModal();
|
||||||
|
loadVacancies();
|
||||||
|
|
||||||
|
// Очищаем форму
|
||||||
|
document.getElementById('vacancyTitle').value = '';
|
||||||
|
document.getElementById('vacancySalary').value = '';
|
||||||
|
document.getElementById('vacancyTags').value = ''; // очищаем теги
|
||||||
|
document.getElementById('vacancyDescription').value = '';
|
||||||
|
document.getElementById('vacancyContact').value = '';
|
||||||
|
|
||||||
|
alert('Вакансия создана!');
|
||||||
|
} catch (error) {
|
||||||
|
alert(error.message);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
// Переключение вкладок
|
||||||
|
function switchContentTab(tab) {
|
||||||
|
document.querySelectorAll('.content-tab').forEach(t => t.classList.remove('active'));
|
||||||
|
document.querySelectorAll('.content-pane').forEach(p => p.classList.remove('active'));
|
||||||
|
|
||||||
|
if (tab === 'main') {
|
||||||
|
document.querySelectorAll('.content-tab')[0].classList.add('active');
|
||||||
|
document.getElementById('mainPane').classList.add('active');
|
||||||
|
} else if (tab === 'vacancies') {
|
||||||
|
document.querySelectorAll('.content-tab')[1].classList.add('active');
|
||||||
|
document.getElementById('vacanciesPane').classList.add('active');
|
||||||
|
} else if (tab === 'resume') {
|
||||||
|
document.querySelectorAll('.content-tab')[2].classList.add('active');
|
||||||
|
document.getElementById('resumePane').classList.add('active');
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
// Модальное окно вакансии
|
||||||
|
function openVacancyModal() {
|
||||||
|
document.getElementById('vacancyModal').style.display = 'flex';
|
||||||
|
}
|
||||||
|
|
||||||
|
function closeVacancyModal() {
|
||||||
|
document.getElementById('vacancyModal').style.display = 'none';
|
||||||
|
}
|
||||||
|
|
||||||
|
// Выход
|
||||||
|
function logout() {
|
||||||
|
localStorage.removeItem('accessToken');
|
||||||
|
localStorage.removeItem('userId');
|
||||||
|
localStorage.removeItem('userRole');
|
||||||
|
localStorage.removeItem('userName');
|
||||||
|
window.location.href = '/';
|
||||||
|
}
|
||||||
|
|
||||||
|
// Экранирование HTML
|
||||||
|
function escapeHtml(unsafe) {
|
||||||
|
if (!unsafe) return '';
|
||||||
|
return unsafe.toString()
|
||||||
|
.replace(/&/g, "&")
|
||||||
|
.replace(/</g, "<")
|
||||||
|
.replace(/>/g, ">")
|
||||||
|
.replace(/"/g, """)
|
||||||
|
.replace(/'/g, "'");
|
||||||
|
}
|
||||||
|
|
||||||
|
// Загрузка при старте
|
||||||
|
loadProfile();
|
||||||
|
|
||||||
|
// Закрытие модалки по клику вне окна
|
||||||
|
window.onclick = function(event) {
|
||||||
|
const modal = document.getElementById('vacancyModal');
|
||||||
|
if (event.target === modal) {
|
||||||
|
modal.style.display = 'none';
|
||||||
|
}
|
||||||
|
};
|
||||||
|
</script>
|
||||||
|
</body>
|
||||||
|
</html>
|
||||||
497
templates/resumes.html
Normal file
497
templates/resumes.html
Normal file
@@ -0,0 +1,497 @@
|
|||||||
|
<!DOCTYPE html>
|
||||||
|
<html lang="ru">
|
||||||
|
<head>
|
||||||
|
<meta charset="UTF-8">
|
||||||
|
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||||
|
<title>Резюме | Rabota.Today</title>
|
||||||
|
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0-beta3/css/all.min.css">
|
||||||
|
<style>
|
||||||
|
* {
|
||||||
|
margin: 0;
|
||||||
|
padding: 0;
|
||||||
|
box-sizing: border-box;
|
||||||
|
font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
|
||||||
|
}
|
||||||
|
|
||||||
|
body {
|
||||||
|
background: linear-gradient(145deg, #eef5fa 0%, #e0eaf5 100%);
|
||||||
|
min-height: 100vh;
|
||||||
|
}
|
||||||
|
|
||||||
|
.container {
|
||||||
|
max-width: 1200px;
|
||||||
|
margin: 0 auto;
|
||||||
|
padding: 20px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.header {
|
||||||
|
background: #0b1c34;
|
||||||
|
color: white;
|
||||||
|
padding: 20px 40px;
|
||||||
|
border-radius: 40px;
|
||||||
|
margin-bottom: 40px;
|
||||||
|
display: flex;
|
||||||
|
justify-content: space-between;
|
||||||
|
align-items: center;
|
||||||
|
flex-wrap: wrap;
|
||||||
|
gap: 20px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.logo {
|
||||||
|
font-size: 28px;
|
||||||
|
font-weight: 700;
|
||||||
|
display: flex;
|
||||||
|
align-items: center;
|
||||||
|
gap: 15px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.logo i {
|
||||||
|
color: #3b82f6;
|
||||||
|
background: rgba(255,255,255,0.1);
|
||||||
|
padding: 12px;
|
||||||
|
border-radius: 20px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.nav {
|
||||||
|
display: flex;
|
||||||
|
gap: 15px;
|
||||||
|
align-items: center;
|
||||||
|
flex-wrap: wrap;
|
||||||
|
}
|
||||||
|
|
||||||
|
.nav a {
|
||||||
|
color: white;
|
||||||
|
text-decoration: none;
|
||||||
|
padding: 10px 20px;
|
||||||
|
border-radius: 30px;
|
||||||
|
transition: 0.2s;
|
||||||
|
}
|
||||||
|
|
||||||
|
.nav a:hover {
|
||||||
|
background: rgba(255,255,255,0.1);
|
||||||
|
}
|
||||||
|
|
||||||
|
.nav .active {
|
||||||
|
background: #3b82f6;
|
||||||
|
}
|
||||||
|
|
||||||
|
.profile-link {
|
||||||
|
display: flex;
|
||||||
|
align-items: center;
|
||||||
|
gap: 8px;
|
||||||
|
background: #3b82f6;
|
||||||
|
padding: 8px 20px !important;
|
||||||
|
}
|
||||||
|
|
||||||
|
.profile-link i {
|
||||||
|
font-size: 18px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.user-avatar {
|
||||||
|
width: 35px;
|
||||||
|
height: 35px;
|
||||||
|
background: #3b82f6;
|
||||||
|
border-radius: 50%;
|
||||||
|
display: flex;
|
||||||
|
align-items: center;
|
||||||
|
justify-content: center;
|
||||||
|
}
|
||||||
|
|
||||||
|
.user-name {
|
||||||
|
font-weight: 500;
|
||||||
|
}
|
||||||
|
|
||||||
|
.admin-badge {
|
||||||
|
background: #f59e0b;
|
||||||
|
color: white;
|
||||||
|
padding: 2px 8px;
|
||||||
|
border-radius: 20px;
|
||||||
|
font-size: 12px;
|
||||||
|
margin-left: 5px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.filters {
|
||||||
|
background: white;
|
||||||
|
border-radius: 40px;
|
||||||
|
padding: 30px;
|
||||||
|
margin-bottom: 30px;
|
||||||
|
display: grid;
|
||||||
|
grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
|
||||||
|
gap: 20px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.filter-group input,
|
||||||
|
.filter-group select {
|
||||||
|
width: 100%;
|
||||||
|
padding: 12px 16px;
|
||||||
|
border: 2px solid #dee9f5;
|
||||||
|
border-radius: 30px;
|
||||||
|
font-size: 16px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.filter-group input:focus,
|
||||||
|
.filter-group select:focus {
|
||||||
|
border-color: #3b82f6;
|
||||||
|
outline: none;
|
||||||
|
}
|
||||||
|
|
||||||
|
.resumes-grid {
|
||||||
|
display: grid;
|
||||||
|
grid-template-columns: repeat(auto-fill, minmax(350px, 1fr));
|
||||||
|
gap: 30px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.resume-card {
|
||||||
|
background: white;
|
||||||
|
border-radius: 40px;
|
||||||
|
padding: 30px;
|
||||||
|
transition: 0.2s;
|
||||||
|
cursor: pointer;
|
||||||
|
}
|
||||||
|
|
||||||
|
.resume-card:hover {
|
||||||
|
transform: translateY(-5px);
|
||||||
|
box-shadow: 0 20px 40px rgba(0,20,40,0.15);
|
||||||
|
}
|
||||||
|
|
||||||
|
.resume-header {
|
||||||
|
display: flex;
|
||||||
|
align-items: center;
|
||||||
|
gap: 15px;
|
||||||
|
margin-bottom: 20px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.resume-avatar {
|
||||||
|
width: 60px;
|
||||||
|
height: 60px;
|
||||||
|
background: #eef4fa;
|
||||||
|
border-radius: 30px;
|
||||||
|
display: flex;
|
||||||
|
align-items: center;
|
||||||
|
justify-content: center;
|
||||||
|
font-size: 24px;
|
||||||
|
color: #3b82f6;
|
||||||
|
}
|
||||||
|
|
||||||
|
.resume-name {
|
||||||
|
font-size: 18px;
|
||||||
|
font-weight: 700;
|
||||||
|
color: #0b1c34;
|
||||||
|
}
|
||||||
|
|
||||||
|
.resume-position {
|
||||||
|
color: #3b82f6;
|
||||||
|
font-weight: 600;
|
||||||
|
margin: 10px 0;
|
||||||
|
font-size: 16px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.resume-salary {
|
||||||
|
font-size: 20px;
|
||||||
|
font-weight: 700;
|
||||||
|
color: #0f2b4f;
|
||||||
|
margin: 15px 0;
|
||||||
|
}
|
||||||
|
|
||||||
|
.resume-tags {
|
||||||
|
display: flex;
|
||||||
|
flex-wrap: wrap;
|
||||||
|
gap: 8px;
|
||||||
|
margin: 15px 0;
|
||||||
|
}
|
||||||
|
|
||||||
|
.tag {
|
||||||
|
background: #eef4fa;
|
||||||
|
padding: 4px 12px;
|
||||||
|
border-radius: 20px;
|
||||||
|
font-size: 12px;
|
||||||
|
color: #1f3f60;
|
||||||
|
}
|
||||||
|
|
||||||
|
.resume-footer {
|
||||||
|
display: flex;
|
||||||
|
justify-content: space-between;
|
||||||
|
align-items: center;
|
||||||
|
border-top: 1px solid #dee9f5;
|
||||||
|
padding-top: 20px;
|
||||||
|
margin-top: 10px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.resume-experience {
|
||||||
|
color: #4f7092;
|
||||||
|
font-size: 14px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.resume-views {
|
||||||
|
color: #8099b3;
|
||||||
|
font-size: 14px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.btn-contact {
|
||||||
|
background: #0b1c34;
|
||||||
|
color: white;
|
||||||
|
border: none;
|
||||||
|
padding: 8px 16px;
|
||||||
|
border-radius: 30px;
|
||||||
|
cursor: pointer;
|
||||||
|
transition: 0.2s;
|
||||||
|
}
|
||||||
|
|
||||||
|
.btn-contact:hover {
|
||||||
|
background: #1b3f6b;
|
||||||
|
}
|
||||||
|
|
||||||
|
.loading {
|
||||||
|
text-align: center;
|
||||||
|
padding: 60px;
|
||||||
|
color: #4f7092;
|
||||||
|
grid-column: 1/-1;
|
||||||
|
}
|
||||||
|
|
||||||
|
.pagination {
|
||||||
|
display: flex;
|
||||||
|
justify-content: center;
|
||||||
|
gap: 10px;
|
||||||
|
margin-top: 40px;
|
||||||
|
flex-wrap: wrap;
|
||||||
|
}
|
||||||
|
|
||||||
|
.page-btn {
|
||||||
|
padding: 10px 16px;
|
||||||
|
border: 2px solid #dee9f5;
|
||||||
|
background: white;
|
||||||
|
border-radius: 30px;
|
||||||
|
cursor: pointer;
|
||||||
|
transition: 0.2s;
|
||||||
|
}
|
||||||
|
|
||||||
|
.page-btn:hover {
|
||||||
|
background: #eef4fa;
|
||||||
|
}
|
||||||
|
|
||||||
|
.page-btn.active {
|
||||||
|
background: #0b1c34;
|
||||||
|
color: white;
|
||||||
|
border-color: #0b1c34;
|
||||||
|
}
|
||||||
|
|
||||||
|
.no-results {
|
||||||
|
text-align: center;
|
||||||
|
padding: 60px;
|
||||||
|
color: #4f7092;
|
||||||
|
font-size: 18px;
|
||||||
|
grid-column: 1/-1;
|
||||||
|
}
|
||||||
|
</style>
|
||||||
|
</head>
|
||||||
|
<body>
|
||||||
|
<div class="container">
|
||||||
|
<div class="header">
|
||||||
|
<div class="logo">
|
||||||
|
<i class="fas fa-briefcase"></i>
|
||||||
|
Rabota.Today
|
||||||
|
</div>
|
||||||
|
<div class="nav" id="nav">
|
||||||
|
<!-- Навигация будет заполнена динамически -->
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="filters">
|
||||||
|
<div class="filter-group">
|
||||||
|
<input type="text" id="searchInput" placeholder="Поиск резюме..." oninput="debounceSearch()">
|
||||||
|
</div>
|
||||||
|
<div class="filter-group">
|
||||||
|
<input type="text" id="tagInput" placeholder="Теги (через запятую)" oninput="debounceSearch()">
|
||||||
|
</div>
|
||||||
|
<div class="filter-group">
|
||||||
|
<select id="salaryFilter" onchange="applyFilters()">
|
||||||
|
<option value="">Любая зарплата</option>
|
||||||
|
<option value="50000">от 50 000 ₽</option>
|
||||||
|
<option value="100000">от 100 000 ₽</option>
|
||||||
|
<option value="150000">от 150 000 ₽</option>
|
||||||
|
<option value="200000">от 200 000 ₽</option>
|
||||||
|
</select>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div id="resumesContainer" class="resumes-grid">
|
||||||
|
<div class="loading">Загрузка резюме...</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="pagination" id="pagination"></div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<script>
|
||||||
|
const API_BASE_URL = 'http://localhost:8000/api';
|
||||||
|
let currentPage = 1;
|
||||||
|
let totalPages = 1;
|
||||||
|
let searchTimeout;
|
||||||
|
let currentUser = null;
|
||||||
|
|
||||||
|
// Проверка авторизации при загрузке
|
||||||
|
async function checkAuth() {
|
||||||
|
const token = localStorage.getItem('accessToken');
|
||||||
|
|
||||||
|
if (token) {
|
||||||
|
try {
|
||||||
|
const response = await fetch(`${API_BASE_URL}/user`, {
|
||||||
|
headers: {
|
||||||
|
'Authorization': `Bearer ${token}`
|
||||||
|
}
|
||||||
|
});
|
||||||
|
|
||||||
|
if (response.ok) {
|
||||||
|
currentUser = await response.json();
|
||||||
|
} else {
|
||||||
|
// Токен невалидный
|
||||||
|
localStorage.removeItem('accessToken');
|
||||||
|
}
|
||||||
|
} catch (error) {
|
||||||
|
console.error('Error checking auth:', error);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
updateNavigation();
|
||||||
|
}
|
||||||
|
|
||||||
|
// Обновление навигации в зависимости от авторизации
|
||||||
|
function updateNavigation() {
|
||||||
|
const nav = document.getElementById('nav');
|
||||||
|
|
||||||
|
if (currentUser) {
|
||||||
|
// Пользователь авторизован
|
||||||
|
nav.innerHTML = `
|
||||||
|
<a href="/">Главная</a>
|
||||||
|
<a href="/vacancies">Вакансии</a>
|
||||||
|
<a href="/resumes" class="active">Резюме</a>
|
||||||
|
<a href="/profile" class="profile-link">
|
||||||
|
<i class="fas fa-user-circle"></i>
|
||||||
|
<span class="user-name">${escapeHtml(currentUser.full_name.split(' ')[0])}</span>
|
||||||
|
${currentUser.is_admin ? '<span class="admin-badge">Admin</span>' : ''}
|
||||||
|
</a>
|
||||||
|
`;
|
||||||
|
} else {
|
||||||
|
// Пользователь не авторизован
|
||||||
|
nav.innerHTML = `
|
||||||
|
<a href="/">Главная</a>
|
||||||
|
<a href="/vacancies">Вакансии</a>
|
||||||
|
<a href="/resumes" class="active">Резюме</a>
|
||||||
|
<a href="/login">Войти</a>
|
||||||
|
<a href="/register">Регистрация</a>
|
||||||
|
`;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
// Загрузка всех резюме
|
||||||
|
async function loadResumes(page = 1, search = '', tags = '', salary = '') {
|
||||||
|
try {
|
||||||
|
let url = `${API_BASE_URL}/resumes/all?page=${page}`;
|
||||||
|
if (search) url += `&search=${encodeURIComponent(search)}`;
|
||||||
|
if (tags) url += `&tags=${encodeURIComponent(tags)}`;
|
||||||
|
if (salary) url += `&min_salary=${salary}`;
|
||||||
|
|
||||||
|
const response = await fetch(url);
|
||||||
|
const data = await response.json();
|
||||||
|
|
||||||
|
const container = document.getElementById('resumesContainer');
|
||||||
|
|
||||||
|
if (!data.resumes || data.resumes.length === 0) {
|
||||||
|
container.innerHTML = '<div class="no-results">Резюме не найдены</div>';
|
||||||
|
return;
|
||||||
|
}
|
||||||
|
|
||||||
|
container.innerHTML = data.resumes.map(r => `
|
||||||
|
<div class="resume-card" onclick="window.location.href='/resume/${r.id}'">
|
||||||
|
<div class="resume-header">
|
||||||
|
<div class="resume-avatar">
|
||||||
|
<i class="fas fa-user"></i>
|
||||||
|
</div>
|
||||||
|
<div>
|
||||||
|
<div class="resume-name">${escapeHtml(r.full_name)}</div>
|
||||||
|
<div class="resume-position">${escapeHtml(r.desired_position || 'Должность не указана')}</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div class="resume-salary">${escapeHtml(r.desired_salary || 'з/п не указана')}</div>
|
||||||
|
<div class="resume-tags">
|
||||||
|
${(r.tags || []).map(t =>
|
||||||
|
`<span class="tag">${escapeHtml(t.name)}</span>`
|
||||||
|
).join('')}
|
||||||
|
</div>
|
||||||
|
<div class="resume-footer">
|
||||||
|
<span class="resume-experience">
|
||||||
|
<i class="fas fa-briefcase"></i> ${r.experience_count || 0} мест
|
||||||
|
</span>
|
||||||
|
<span class="resume-views">
|
||||||
|
<i class="fas fa-eye"></i> ${r.views || 0}
|
||||||
|
</span>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
`).join('');
|
||||||
|
|
||||||
|
totalPages = data.total_pages || 1;
|
||||||
|
renderPagination();
|
||||||
|
|
||||||
|
} catch (error) {
|
||||||
|
console.error('Error loading resumes:', error);
|
||||||
|
document.getElementById('resumesContainer').innerHTML =
|
||||||
|
'<div class="loading">Ошибка загрузки резюме</div>';
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
// Применение фильтров
|
||||||
|
function applyFilters() {
|
||||||
|
const search = document.getElementById('searchInput').value;
|
||||||
|
const tags = document.getElementById('tagInput').value;
|
||||||
|
const salary = document.getElementById('salaryFilter').value;
|
||||||
|
|
||||||
|
loadResumes(1, search, tags, salary);
|
||||||
|
}
|
||||||
|
|
||||||
|
// Debounce для поиска
|
||||||
|
function debounceSearch() {
|
||||||
|
clearTimeout(searchTimeout);
|
||||||
|
searchTimeout = setTimeout(() => {
|
||||||
|
applyFilters();
|
||||||
|
}, 500);
|
||||||
|
}
|
||||||
|
|
||||||
|
// Рендер пагинации
|
||||||
|
function renderPagination() {
|
||||||
|
const pagination = document.getElementById('pagination');
|
||||||
|
let html = '';
|
||||||
|
|
||||||
|
for (let i = 1; i <= totalPages; i++) {
|
||||||
|
html += `<button class="page-btn ${i === currentPage ? 'active' : ''}" onclick="goToPage(${i})">${i}</button>`;
|
||||||
|
}
|
||||||
|
|
||||||
|
pagination.innerHTML = html;
|
||||||
|
}
|
||||||
|
|
||||||
|
// Переход на страницу
|
||||||
|
function goToPage(page) {
|
||||||
|
currentPage = page;
|
||||||
|
const search = document.getElementById('searchInput').value;
|
||||||
|
const tags = document.getElementById('tagInput').value;
|
||||||
|
const salary = document.getElementById('salaryFilter').value;
|
||||||
|
|
||||||
|
loadResumes(page, search, tags, salary);
|
||||||
|
}
|
||||||
|
|
||||||
|
// Экранирование HTML
|
||||||
|
function escapeHtml(unsafe) {
|
||||||
|
if (!unsafe) return '';
|
||||||
|
return unsafe.toString()
|
||||||
|
.replace(/&/g, "&")
|
||||||
|
.replace(/</g, "<")
|
||||||
|
.replace(/>/g, ">")
|
||||||
|
.replace(/"/g, """)
|
||||||
|
.replace(/'/g, "'");
|
||||||
|
}
|
||||||
|
|
||||||
|
// Загрузка при старте
|
||||||
|
checkAuth().then(() => {
|
||||||
|
loadResumes();
|
||||||
|
});
|
||||||
|
</script>
|
||||||
|
</body>
|
||||||
|
</html>
|
||||||
512
templates/vacancies.html
Normal file
512
templates/vacancies.html
Normal file
@@ -0,0 +1,512 @@
|
|||||||
|
<!DOCTYPE html>
|
||||||
|
<html lang="ru">
|
||||||
|
<head>
|
||||||
|
<meta charset="UTF-8">
|
||||||
|
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||||
|
<title>Вакансии | Rabota.Today</title>
|
||||||
|
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0-beta3/css/all.min.css">
|
||||||
|
<style>
|
||||||
|
* {
|
||||||
|
margin: 0;
|
||||||
|
padding: 0;
|
||||||
|
box-sizing: border-box;
|
||||||
|
font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
|
||||||
|
}
|
||||||
|
|
||||||
|
body {
|
||||||
|
background: linear-gradient(145deg, #eef5fa 0%, #e0eaf5 100%);
|
||||||
|
min-height: 100vh;
|
||||||
|
}
|
||||||
|
|
||||||
|
.container {
|
||||||
|
max-width: 1200px;
|
||||||
|
margin: 0 auto;
|
||||||
|
padding: 20px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.header {
|
||||||
|
background: #0b1c34;
|
||||||
|
color: white;
|
||||||
|
padding: 20px 40px;
|
||||||
|
border-radius: 40px;
|
||||||
|
margin-bottom: 40px;
|
||||||
|
display: flex;
|
||||||
|
justify-content: space-between;
|
||||||
|
align-items: center;
|
||||||
|
flex-wrap: wrap;
|
||||||
|
gap: 20px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.logo {
|
||||||
|
font-size: 28px;
|
||||||
|
font-weight: 700;
|
||||||
|
display: flex;
|
||||||
|
align-items: center;
|
||||||
|
gap: 15px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.logo i {
|
||||||
|
color: #3b82f6;
|
||||||
|
background: rgba(255,255,255,0.1);
|
||||||
|
padding: 12px;
|
||||||
|
border-radius: 20px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.nav {
|
||||||
|
display: flex;
|
||||||
|
gap: 15px;
|
||||||
|
align-items: center;
|
||||||
|
flex-wrap: wrap;
|
||||||
|
}
|
||||||
|
|
||||||
|
.nav a {
|
||||||
|
color: white;
|
||||||
|
text-decoration: none;
|
||||||
|
padding: 10px 20px;
|
||||||
|
border-radius: 30px;
|
||||||
|
transition: 0.2s;
|
||||||
|
}
|
||||||
|
|
||||||
|
.nav a:hover {
|
||||||
|
background: rgba(255,255,255,0.1);
|
||||||
|
}
|
||||||
|
|
||||||
|
.nav .active {
|
||||||
|
background: #3b82f6;
|
||||||
|
}
|
||||||
|
|
||||||
|
.profile-link {
|
||||||
|
display: flex;
|
||||||
|
align-items: center;
|
||||||
|
gap: 8px;
|
||||||
|
background: #3b82f6;
|
||||||
|
padding: 8px 20px !important;
|
||||||
|
}
|
||||||
|
|
||||||
|
.profile-link i {
|
||||||
|
font-size: 18px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.filters {
|
||||||
|
background: white;
|
||||||
|
border-radius: 40px;
|
||||||
|
padding: 30px;
|
||||||
|
margin-bottom: 30px;
|
||||||
|
display: grid;
|
||||||
|
grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
|
||||||
|
gap: 20px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.filter-group input,
|
||||||
|
.filter-group select {
|
||||||
|
width: 100%;
|
||||||
|
padding: 12px 16px;
|
||||||
|
border: 2px solid #dee9f5;
|
||||||
|
border-radius: 30px;
|
||||||
|
font-size: 16px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.filter-group input:focus,
|
||||||
|
.filter-group select:focus {
|
||||||
|
border-color: #3b82f6;
|
||||||
|
outline: none;
|
||||||
|
}
|
||||||
|
|
||||||
|
.vacancies-grid {
|
||||||
|
display: grid;
|
||||||
|
grid-template-columns: repeat(auto-fill, minmax(350px, 1fr));
|
||||||
|
gap: 30px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.vacancy-card {
|
||||||
|
background: white;
|
||||||
|
border-radius: 40px;
|
||||||
|
padding: 30px;
|
||||||
|
transition: 0.2s;
|
||||||
|
cursor: pointer;
|
||||||
|
position: relative;
|
||||||
|
}
|
||||||
|
|
||||||
|
.vacancy-card:hover {
|
||||||
|
transform: translateY(-5px);
|
||||||
|
box-shadow: 0 20px 40px rgba(0,20,40,0.15);
|
||||||
|
}
|
||||||
|
|
||||||
|
.vacancy-header {
|
||||||
|
display: flex;
|
||||||
|
justify-content: space-between;
|
||||||
|
align-items: start;
|
||||||
|
margin-bottom: 15px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.vacancy-title {
|
||||||
|
font-size: 20px;
|
||||||
|
font-weight: 700;
|
||||||
|
color: #0b1c34;
|
||||||
|
}
|
||||||
|
|
||||||
|
.vacancy-company {
|
||||||
|
color: #3b82f6;
|
||||||
|
font-weight: 600;
|
||||||
|
margin-bottom: 10px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.vacancy-salary {
|
||||||
|
font-size: 24px;
|
||||||
|
font-weight: 700;
|
||||||
|
color: #0f2b4f;
|
||||||
|
margin: 15px 0;
|
||||||
|
}
|
||||||
|
|
||||||
|
.vacancy-tags {
|
||||||
|
display: flex;
|
||||||
|
flex-wrap: wrap;
|
||||||
|
gap: 8px;
|
||||||
|
margin: 15px 0;
|
||||||
|
}
|
||||||
|
|
||||||
|
.tag {
|
||||||
|
background: #eef4fa;
|
||||||
|
padding: 4px 12px;
|
||||||
|
border-radius: 20px;
|
||||||
|
font-size: 12px;
|
||||||
|
color: #1f3f60;
|
||||||
|
}
|
||||||
|
|
||||||
|
.vacancy-description {
|
||||||
|
color: #4f7092;
|
||||||
|
line-height: 1.6;
|
||||||
|
margin-bottom: 20px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.vacancy-footer {
|
||||||
|
display: flex;
|
||||||
|
justify-content: space-between;
|
||||||
|
align-items: center;
|
||||||
|
border-top: 1px solid #dee9f5;
|
||||||
|
padding-top: 20px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.vacancy-contact {
|
||||||
|
color: #3b82f6;
|
||||||
|
}
|
||||||
|
|
||||||
|
.vacancy-views {
|
||||||
|
color: #8099b3;
|
||||||
|
font-size: 14px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.btn-apply {
|
||||||
|
background: #0b1c34;
|
||||||
|
color: white;
|
||||||
|
border: none;
|
||||||
|
padding: 10px 20px;
|
||||||
|
border-radius: 30px;
|
||||||
|
cursor: pointer;
|
||||||
|
transition: 0.2s;
|
||||||
|
}
|
||||||
|
|
||||||
|
.btn-apply:hover {
|
||||||
|
background: #1b3f6b;
|
||||||
|
}
|
||||||
|
|
||||||
|
.btn-apply.applied {
|
||||||
|
background: #10b981;
|
||||||
|
cursor: default;
|
||||||
|
}
|
||||||
|
|
||||||
|
.loading {
|
||||||
|
text-align: center;
|
||||||
|
padding: 60px;
|
||||||
|
color: #4f7092;
|
||||||
|
grid-column: 1/-1;
|
||||||
|
}
|
||||||
|
|
||||||
|
.pagination {
|
||||||
|
display: flex;
|
||||||
|
justify-content: center;
|
||||||
|
gap: 10px;
|
||||||
|
margin-top: 40px;
|
||||||
|
flex-wrap: wrap;
|
||||||
|
}
|
||||||
|
|
||||||
|
.page-btn {
|
||||||
|
padding: 10px 16px;
|
||||||
|
border: 2px solid #dee9f5;
|
||||||
|
background: white;
|
||||||
|
border-radius: 30px;
|
||||||
|
cursor: pointer;
|
||||||
|
transition: 0.2s;
|
||||||
|
}
|
||||||
|
|
||||||
|
.page-btn:hover {
|
||||||
|
background: #eef4fa;
|
||||||
|
}
|
||||||
|
|
||||||
|
.page-btn.active {
|
||||||
|
background: #0b1c34;
|
||||||
|
color: white;
|
||||||
|
border-color: #0b1c34;
|
||||||
|
}
|
||||||
|
|
||||||
|
.no-results {
|
||||||
|
text-align: center;
|
||||||
|
padding: 60px;
|
||||||
|
color: #4f7092;
|
||||||
|
font-size: 18px;
|
||||||
|
grid-column: 1/-1;
|
||||||
|
}
|
||||||
|
|
||||||
|
.user-badge {
|
||||||
|
display: flex;
|
||||||
|
align-items: center;
|
||||||
|
gap: 10px;
|
||||||
|
background: rgba(255,255,255,0.1);
|
||||||
|
padding: 5px 15px 5px 5px;
|
||||||
|
border-radius: 40px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.user-avatar {
|
||||||
|
width: 35px;
|
||||||
|
height: 35px;
|
||||||
|
background: #3b82f6;
|
||||||
|
border-radius: 50%;
|
||||||
|
display: flex;
|
||||||
|
align-items: center;
|
||||||
|
justify-content: center;
|
||||||
|
}
|
||||||
|
|
||||||
|
.user-name {
|
||||||
|
font-weight: 500;
|
||||||
|
}
|
||||||
|
|
||||||
|
.admin-badge {
|
||||||
|
background: #f59e0b;
|
||||||
|
color: white;
|
||||||
|
padding: 2px 8px;
|
||||||
|
border-radius: 20px;
|
||||||
|
font-size: 12px;
|
||||||
|
margin-left: 5px;
|
||||||
|
}
|
||||||
|
</style>
|
||||||
|
</head>
|
||||||
|
<body>
|
||||||
|
<div class="container">
|
||||||
|
<div class="header">
|
||||||
|
<div class="logo">
|
||||||
|
<i class="fas fa-briefcase"></i>
|
||||||
|
Rabota.Today
|
||||||
|
</div>
|
||||||
|
<div class="nav" id="nav">
|
||||||
|
<!-- Навигация будет заполнена динамически -->
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="filters">
|
||||||
|
<div class="filter-group">
|
||||||
|
<input type="text" id="searchInput" placeholder="Поиск вакансий..." oninput="debounceSearch()">
|
||||||
|
</div>
|
||||||
|
<div class="filter-group">
|
||||||
|
<input type="text" id="tagInput" placeholder="Теги (через запятую)" oninput="debounceSearch()">
|
||||||
|
</div>
|
||||||
|
<div class="filter-group">
|
||||||
|
<select id="salaryFilter" onchange="applyFilters()">
|
||||||
|
<option value="">Любая зарплата</option>
|
||||||
|
<option value="50000">от 50 000 ₽</option>
|
||||||
|
<option value="100000">от 100 000 ₽</option>
|
||||||
|
<option value="150000">от 150 000 ₽</option>
|
||||||
|
<option value="200000">от 200 000 ₽</option>
|
||||||
|
</select>
|
||||||
|
</div>
|
||||||
|
<div class="filter-group">
|
||||||
|
<select id="sortFilter" onchange="applyFilters()">
|
||||||
|
<option value="newest">Сначала новые</option>
|
||||||
|
<option value="salary_desc">По убыванию зарплаты</option>
|
||||||
|
<option value="salary_asc">По возрастанию зарплаты</option>
|
||||||
|
</select>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div id="vacanciesContainer" class="vacancies-grid">
|
||||||
|
<div class="loading">Загрузка вакансий...</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="pagination" id="pagination"></div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<script>
|
||||||
|
const API_BASE_URL = 'http://localhost:8000/api';
|
||||||
|
let currentPage = 1;
|
||||||
|
let totalPages = 1;
|
||||||
|
let searchTimeout;
|
||||||
|
let currentUser = null;
|
||||||
|
|
||||||
|
// Проверка авторизации при загрузке
|
||||||
|
async function checkAuth() {
|
||||||
|
const token = localStorage.getItem('accessToken');
|
||||||
|
|
||||||
|
if (token) {
|
||||||
|
try {
|
||||||
|
const response = await fetch(`${API_BASE_URL}/user`, {
|
||||||
|
headers: {
|
||||||
|
'Authorization': `Bearer ${token}`
|
||||||
|
}
|
||||||
|
});
|
||||||
|
|
||||||
|
if (response.ok) {
|
||||||
|
currentUser = await response.json();
|
||||||
|
} else {
|
||||||
|
// Токен невалидный
|
||||||
|
localStorage.removeItem('accessToken');
|
||||||
|
}
|
||||||
|
} catch (error) {
|
||||||
|
console.error('Error checking auth:', error);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
updateNavigation();
|
||||||
|
}
|
||||||
|
|
||||||
|
// Обновление навигации в зависимости от авторизации
|
||||||
|
function updateNavigation() {
|
||||||
|
const nav = document.getElementById('nav');
|
||||||
|
const token = localStorage.getItem('accessToken');
|
||||||
|
|
||||||
|
if (currentUser) {
|
||||||
|
// Пользователь авторизован
|
||||||
|
nav.innerHTML = `
|
||||||
|
<a href="/">Главная</a>
|
||||||
|
<a href="/vacancies" class="active">Вакансии</a>
|
||||||
|
<a href="/resumes">Резюме</a>
|
||||||
|
<a href="/profile" class="profile-link">
|
||||||
|
<i class="fas fa-user-circle"></i>
|
||||||
|
<span class="user-name">${escapeHtml(currentUser.full_name.split(' ')[0])}</span>
|
||||||
|
${currentUser.is_admin ? '<span class="admin-badge">Admin</span>' : ''}
|
||||||
|
</a>
|
||||||
|
`;
|
||||||
|
} else {
|
||||||
|
// Пользователь не авторизован
|
||||||
|
nav.innerHTML = `
|
||||||
|
<a href="/">Главная</a>
|
||||||
|
<a href="/vacancies" class="active">Вакансии</a>
|
||||||
|
<a href="/resumes">Резюме</a>
|
||||||
|
<a href="/login">Войти</a>
|
||||||
|
<a href="/register">Регистрация</a>
|
||||||
|
`;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
// Загрузка всех вакансий
|
||||||
|
async function loadVacancies(page = 1, search = '', tags = '', salary = '', sort = 'newest') {
|
||||||
|
try {
|
||||||
|
let url = `${API_BASE_URL}/vacancies/all?page=${page}`;
|
||||||
|
if (search) url += `&search=${encodeURIComponent(search)}`;
|
||||||
|
if (tags) url += `&tags=${encodeURIComponent(tags)}`;
|
||||||
|
if (salary) url += `&min_salary=${salary}`;
|
||||||
|
if (sort) url += `&sort=${sort}`;
|
||||||
|
|
||||||
|
const response = await fetch(url);
|
||||||
|
const data = await response.json();
|
||||||
|
|
||||||
|
const container = document.getElementById('vacanciesContainer');
|
||||||
|
|
||||||
|
if (!data.vacancies || data.vacancies.length === 0) {
|
||||||
|
container.innerHTML = '<div class="no-results">Вакансий не найдено</div>';
|
||||||
|
return;
|
||||||
|
}
|
||||||
|
|
||||||
|
container.innerHTML = data.vacancies.map(v => `
|
||||||
|
<div class="vacancy-card" onclick="window.location.href='/vacancy/${v.id}'">
|
||||||
|
<div class="vacancy-header">
|
||||||
|
<span class="vacancy-title">${escapeHtml(v.title)}</span>
|
||||||
|
</div>
|
||||||
|
<div class="vacancy-company">
|
||||||
|
<i class="fas fa-building"></i> ${escapeHtml(v.company_name || 'Компания')}
|
||||||
|
</div>
|
||||||
|
<div class="vacancy-salary">${escapeHtml(v.salary || 'з/п не указана')}</div>
|
||||||
|
<div class="vacancy-tags">
|
||||||
|
${(v.tags || []).map(t =>
|
||||||
|
`<span class="tag">${escapeHtml(t.name)}</span>`
|
||||||
|
).join('')}
|
||||||
|
</div>
|
||||||
|
<div class="vacancy-description">${escapeHtml((v.description || '').substring(0, 150))}...</div>
|
||||||
|
<div class="vacancy-footer">
|
||||||
|
<span class="vacancy-contact">
|
||||||
|
<i class="fab fa-telegram"></i> ${escapeHtml(v.contact || '—')}
|
||||||
|
</span>
|
||||||
|
<span class="vacancy-views">
|
||||||
|
<i class="fas fa-eye"></i> ${v.views || 0}
|
||||||
|
</span>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
`).join('');
|
||||||
|
|
||||||
|
totalPages = data.total_pages || 1;
|
||||||
|
renderPagination();
|
||||||
|
|
||||||
|
} catch (error) {
|
||||||
|
console.error('Error loading vacancies:', error);
|
||||||
|
document.getElementById('vacanciesContainer').innerHTML =
|
||||||
|
'<div class="loading">Ошибка загрузки вакансий</div>';
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
// Применение фильтров
|
||||||
|
function applyFilters() {
|
||||||
|
const search = document.getElementById('searchInput').value;
|
||||||
|
const tags = document.getElementById('tagInput').value;
|
||||||
|
const salary = document.getElementById('salaryFilter').value;
|
||||||
|
const sort = document.getElementById('sortFilter').value;
|
||||||
|
|
||||||
|
loadVacancies(1, search, tags, salary, sort);
|
||||||
|
}
|
||||||
|
|
||||||
|
// Debounce для поиска
|
||||||
|
function debounceSearch() {
|
||||||
|
clearTimeout(searchTimeout);
|
||||||
|
searchTimeout = setTimeout(() => {
|
||||||
|
applyFilters();
|
||||||
|
}, 500);
|
||||||
|
}
|
||||||
|
|
||||||
|
// Рендер пагинации
|
||||||
|
function renderPagination() {
|
||||||
|
const pagination = document.getElementById('pagination');
|
||||||
|
let html = '';
|
||||||
|
|
||||||
|
for (let i = 1; i <= totalPages; i++) {
|
||||||
|
html += `<button class="page-btn ${i === currentPage ? 'active' : ''}" onclick="goToPage(${i})">${i}</button>`;
|
||||||
|
}
|
||||||
|
|
||||||
|
pagination.innerHTML = html;
|
||||||
|
}
|
||||||
|
|
||||||
|
// Переход на страницу
|
||||||
|
function goToPage(page) {
|
||||||
|
currentPage = page;
|
||||||
|
const search = document.getElementById('searchInput').value;
|
||||||
|
const tags = document.getElementById('tagInput').value;
|
||||||
|
const salary = document.getElementById('salaryFilter').value;
|
||||||
|
const sort = document.getElementById('sortFilter').value;
|
||||||
|
|
||||||
|
loadVacancies(page, search, tags, salary, sort);
|
||||||
|
}
|
||||||
|
|
||||||
|
// Экранирование HTML
|
||||||
|
function escapeHtml(unsafe) {
|
||||||
|
if (!unsafe) return '';
|
||||||
|
return unsafe.toString()
|
||||||
|
.replace(/&/g, "&")
|
||||||
|
.replace(/</g, "<")
|
||||||
|
.replace(/>/g, ">")
|
||||||
|
.replace(/"/g, """)
|
||||||
|
.replace(/'/g, "'");
|
||||||
|
}
|
||||||
|
|
||||||
|
// Загрузка при старте
|
||||||
|
checkAuth().then(() => {
|
||||||
|
loadVacancies();
|
||||||
|
});
|
||||||
|
</script>
|
||||||
|
</body>
|
||||||
|
</html>
|
||||||
303
templates/vacancy_detail.html
Normal file
303
templates/vacancy_detail.html
Normal file
@@ -0,0 +1,303 @@
|
|||||||
|
<!DOCTYPE html>
|
||||||
|
<html lang="ru">
|
||||||
|
<head>
|
||||||
|
<meta charset="UTF-8">
|
||||||
|
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||||
|
<title>Вакансия | Rabota.Today</title>
|
||||||
|
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0-beta3/css/all.min.css">
|
||||||
|
<style>
|
||||||
|
* {
|
||||||
|
margin: 0;
|
||||||
|
padding: 0;
|
||||||
|
box-sizing: border-box;
|
||||||
|
font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
|
||||||
|
}
|
||||||
|
|
||||||
|
body {
|
||||||
|
background: linear-gradient(145deg, #eef5fa 0%, #e0eaf5 100%);
|
||||||
|
min-height: 100vh;
|
||||||
|
}
|
||||||
|
|
||||||
|
.container {
|
||||||
|
max-width: 900px;
|
||||||
|
margin: 0 auto;
|
||||||
|
padding: 20px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.header {
|
||||||
|
background: #0b1c34;
|
||||||
|
color: white;
|
||||||
|
padding: 20px 40px;
|
||||||
|
border-radius: 40px;
|
||||||
|
margin-bottom: 40px;
|
||||||
|
display: flex;
|
||||||
|
justify-content: space-between;
|
||||||
|
align-items: center;
|
||||||
|
}
|
||||||
|
|
||||||
|
.logo {
|
||||||
|
font-size: 28px;
|
||||||
|
font-weight: 700;
|
||||||
|
display: flex;
|
||||||
|
align-items: center;
|
||||||
|
gap: 15px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.logo i {
|
||||||
|
color: #3b82f6;
|
||||||
|
background: rgba(255,255,255,0.1);
|
||||||
|
padding: 12px;
|
||||||
|
border-radius: 20px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.nav {
|
||||||
|
display: flex;
|
||||||
|
gap: 15px;
|
||||||
|
align-items: center;
|
||||||
|
}
|
||||||
|
|
||||||
|
.nav a {
|
||||||
|
color: white;
|
||||||
|
text-decoration: none;
|
||||||
|
padding: 10px 20px;
|
||||||
|
border-radius: 30px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.nav a:hover {
|
||||||
|
background: rgba(255,255,255,0.1);
|
||||||
|
}
|
||||||
|
|
||||||
|
.back-link {
|
||||||
|
display: inline-block;
|
||||||
|
margin-bottom: 20px;
|
||||||
|
color: #4f7092;
|
||||||
|
text-decoration: none;
|
||||||
|
}
|
||||||
|
|
||||||
|
.vacancy-detail {
|
||||||
|
background: white;
|
||||||
|
border-radius: 40px;
|
||||||
|
padding: 40px;
|
||||||
|
box-shadow: 0 20px 40px rgba(0,20,40,0.1);
|
||||||
|
}
|
||||||
|
|
||||||
|
.vacancy-title {
|
||||||
|
font-size: 32px;
|
||||||
|
color: #0b1c34;
|
||||||
|
margin-bottom: 10px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.vacancy-company {
|
||||||
|
font-size: 18px;
|
||||||
|
color: #3b82f6;
|
||||||
|
margin-bottom: 20px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.vacancy-salary {
|
||||||
|
font-size: 28px;
|
||||||
|
font-weight: 700;
|
||||||
|
color: #0f2b4f;
|
||||||
|
margin: 20px 0;
|
||||||
|
padding: 20px 0;
|
||||||
|
border-top: 2px solid #dee9f5;
|
||||||
|
border-bottom: 2px solid #dee9f5;
|
||||||
|
}
|
||||||
|
|
||||||
|
.section-title {
|
||||||
|
font-size: 20px;
|
||||||
|
color: #0b1c34;
|
||||||
|
margin: 30px 0 15px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.vacancy-description {
|
||||||
|
color: #1f3f60;
|
||||||
|
line-height: 1.8;
|
||||||
|
white-space: pre-line;
|
||||||
|
}
|
||||||
|
|
||||||
|
.contact-info {
|
||||||
|
background: #f9fcff;
|
||||||
|
border-radius: 30px;
|
||||||
|
padding: 25px;
|
||||||
|
margin: 30px 0;
|
||||||
|
}
|
||||||
|
|
||||||
|
.contact-item {
|
||||||
|
display: flex;
|
||||||
|
align-items: center;
|
||||||
|
gap: 15px;
|
||||||
|
padding: 10px 0;
|
||||||
|
color: #1f3f60;
|
||||||
|
}
|
||||||
|
|
||||||
|
.contact-item i {
|
||||||
|
color: #3b82f6;
|
||||||
|
width: 20px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.action-buttons {
|
||||||
|
display: flex;
|
||||||
|
gap: 15px;
|
||||||
|
margin-top: 30px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.btn {
|
||||||
|
padding: 16px 32px;
|
||||||
|
border-radius: 40px;
|
||||||
|
border: none;
|
||||||
|
font-weight: 600;
|
||||||
|
cursor: pointer;
|
||||||
|
flex: 1;
|
||||||
|
}
|
||||||
|
|
||||||
|
.btn-primary {
|
||||||
|
background: #0b1c34;
|
||||||
|
color: white;
|
||||||
|
}
|
||||||
|
|
||||||
|
.btn-outline {
|
||||||
|
background: transparent;
|
||||||
|
border: 2px solid #3b82f6;
|
||||||
|
color: #0b1c34;
|
||||||
|
}
|
||||||
|
|
||||||
|
.loading {
|
||||||
|
text-align: center;
|
||||||
|
padding: 60px;
|
||||||
|
color: #4f7092;
|
||||||
|
}
|
||||||
|
</style>
|
||||||
|
</head>
|
||||||
|
<body>
|
||||||
|
<div class="container">
|
||||||
|
<div class="header">
|
||||||
|
<div class="logo">
|
||||||
|
<i class="fas fa-briefcase"></i>
|
||||||
|
Rabota.Today
|
||||||
|
</div>
|
||||||
|
<div class="nav">
|
||||||
|
<a href="/">Главная</a>
|
||||||
|
<a href="/vacancies">Вакансии</a>
|
||||||
|
<a href="/resumes">Резюме</a>
|
||||||
|
<a href="/login">Войти</a>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<a href="/vacancies" class="back-link"><i class="fas fa-arrow-left"></i> Назад к вакансиям</a>
|
||||||
|
|
||||||
|
<div id="vacancyDetail" class="vacancy-detail">
|
||||||
|
<div class="loading">Загрузка...</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<script>
|
||||||
|
const API_BASE_URL = 'http://localhost:8000/api';
|
||||||
|
|
||||||
|
// Получаем ID вакансии из URL
|
||||||
|
const pathParts = window.location.pathname.split('/');
|
||||||
|
const vacancyId = pathParts[pathParts.length - 1];
|
||||||
|
|
||||||
|
async function loadVacancy() {
|
||||||
|
try {
|
||||||
|
const response = await fetch(`${API_BASE_URL}/vacancies/${vacancyId}`);
|
||||||
|
const vacancy = await response.json();
|
||||||
|
|
||||||
|
const container = document.getElementById('vacancyDetail');
|
||||||
|
|
||||||
|
container.innerHTML = `
|
||||||
|
<h1 class="vacancy-title">${escapeHtml(vacancy.title)}</h1>
|
||||||
|
<div class="vacancy-company">
|
||||||
|
<i class="fas fa-building"></i> ${escapeHtml(vacancy.company_name || 'Компания не указана')}
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="vacancy-salary">${escapeHtml(vacancy.salary || 'Зарплата не указана')}</div>
|
||||||
|
|
||||||
|
<h2 class="section-title">Описание вакансии</h2>
|
||||||
|
<div class="vacancy-description">${escapeHtml(vacancy.description || 'Описание отсутствует')}</div>
|
||||||
|
|
||||||
|
<h2 class="section-title">Контактная информация</h2>
|
||||||
|
<div class="contact-info">
|
||||||
|
<div class="contact-item">
|
||||||
|
<i class="fab fa-telegram"></i>
|
||||||
|
<span>${escapeHtml(vacancy.contact || 'Контакт не указан')}</span>
|
||||||
|
</div>
|
||||||
|
<div class="contact-item">
|
||||||
|
<i class="fas fa-calendar"></i>
|
||||||
|
<span>Опубликовано: ${new Date(vacancy.created_at).toLocaleDateString()}</span>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="action-buttons">
|
||||||
|
<button class="btn btn-primary" onclick="applyForVacancy()">
|
||||||
|
<i class="fas fa-paper-plane"></i> Откликнуться
|
||||||
|
</button>
|
||||||
|
<button class="btn btn-outline" onclick="saveToFavorites()">
|
||||||
|
<i class="fas fa-heart"></i> В избранное
|
||||||
|
</button>
|
||||||
|
</div>
|
||||||
|
`;
|
||||||
|
|
||||||
|
} catch (error) {
|
||||||
|
console.error('Error loading vacancy:', error);
|
||||||
|
document.getElementById('vacancyDetail').innerHTML =
|
||||||
|
'<div class="loading">Ошибка загрузки вакансии</div>';
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
async function applyForVacancy() {
|
||||||
|
const token = localStorage.getItem('accessToken');
|
||||||
|
|
||||||
|
if (!token) {
|
||||||
|
if (confirm('Для отклика нужно войти в систему. Перейти на страницу входа?')) {
|
||||||
|
window.location.href = '/login';
|
||||||
|
}
|
||||||
|
return;
|
||||||
|
}
|
||||||
|
|
||||||
|
try {
|
||||||
|
const response = await fetch(`${API_BASE_URL}/vacancies/${vacancyId}/apply`, {
|
||||||
|
method: 'POST',
|
||||||
|
headers: {
|
||||||
|
'Authorization': `Bearer ${token}`
|
||||||
|
}
|
||||||
|
});
|
||||||
|
|
||||||
|
if (response.ok) {
|
||||||
|
alert('Отклик отправлен! Работодатель свяжется с вами.');
|
||||||
|
} else {
|
||||||
|
throw new Error('Ошибка отправки');
|
||||||
|
}
|
||||||
|
} catch (error) {
|
||||||
|
alert('Ошибка при отправке отклика');
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
function saveToFavorites() {
|
||||||
|
const token = localStorage.getItem('accessToken');
|
||||||
|
|
||||||
|
if (!token) {
|
||||||
|
if (confirm('Для добавления в избранное нужно войти в систему. Перейти на страницу входа?')) {
|
||||||
|
window.location.href = '/login';
|
||||||
|
}
|
||||||
|
return;
|
||||||
|
}
|
||||||
|
|
||||||
|
// Здесь будет логика добавления в избранное
|
||||||
|
alert('Вакансия добавлена в избранное');
|
||||||
|
}
|
||||||
|
|
||||||
|
function escapeHtml(unsafe) {
|
||||||
|
if (!unsafe) return '';
|
||||||
|
return unsafe.toString()
|
||||||
|
.replace(/&/g, "&")
|
||||||
|
.replace(/</g, "<")
|
||||||
|
.replace(/>/g, ">")
|
||||||
|
.replace(/"/g, """)
|
||||||
|
.replace(/'/g, "'");
|
||||||
|
}
|
||||||
|
|
||||||
|
// Загрузка вакансии
|
||||||
|
loadVacancy();
|
||||||
|
</script>
|
||||||
|
</body>
|
||||||
|
</html>
|
||||||
Reference in New Issue
Block a user