v1.2
This commit is contained in:
1
certbot/.well-known/acme-challenge/test
Normal file
1
certbot/.well-known/acme-challenge/test
Normal file
@@ -0,0 +1 @@
|
||||
test
|
||||
49
migrate_experience.py
Normal file
49
migrate_experience.py
Normal file
@@ -0,0 +1,49 @@
|
||||
# migrate_experience.py
|
||||
import sqlite3
|
||||
|
||||
DB_NAME = "rabota_today.db"
|
||||
|
||||
|
||||
def add_description_column():
|
||||
"""Добавление поля description в таблицу work_experience"""
|
||||
conn = sqlite3.connect(DB_NAME)
|
||||
cursor = conn.cursor()
|
||||
|
||||
try:
|
||||
# Проверяем существующие колонки
|
||||
cursor.execute("PRAGMA table_info(work_experience)")
|
||||
columns = [col[1] for col in cursor.fetchall()]
|
||||
|
||||
print("📊 Текущие колонки в таблице work_experience:", columns)
|
||||
|
||||
# Добавляем колонку description, если её нет
|
||||
if 'description' not in columns:
|
||||
print("➕ Добавление колонки description...")
|
||||
cursor.execute("ALTER TABLE work_experience ADD COLUMN description TEXT")
|
||||
print("✅ Колонка description добавлена")
|
||||
|
||||
conn.commit()
|
||||
print("\n🎉 Миграция успешно завершена!")
|
||||
|
||||
# Показываем обновленную структуру
|
||||
cursor.execute("PRAGMA table_info(work_experience)")
|
||||
new_columns = [col[1] for col in cursor.fetchall()]
|
||||
print("\n📊 Обновленные колонки:", new_columns)
|
||||
|
||||
except Exception as e:
|
||||
print(f"❌ Ошибка: {e}")
|
||||
conn.rollback()
|
||||
finally:
|
||||
conn.close()
|
||||
|
||||
|
||||
if __name__ == "__main__":
|
||||
print("=" * 50)
|
||||
print("🚀 Миграция таблицы work_experience")
|
||||
print("=" * 50)
|
||||
|
||||
response = input("Добавить поле description? (y/n): ")
|
||||
if response.lower() == 'y':
|
||||
add_description_column()
|
||||
else:
|
||||
print("❌ Миграция отменена")
|
||||
@@ -441,7 +441,9 @@
|
||||
</div>
|
||||
|
||||
<script>
|
||||
const API_BASE_URL = 'http://localhost:8000/api';
|
||||
const currentProtocol = window.location.protocol; // http: или https:
|
||||
const currentHost = window.location.host; // yarmarka.rabota.today или IP:порт
|
||||
let API_BASE_URL = `${currentProtocol}//${currentHost}/api`;
|
||||
const token = localStorage.getItem('accessToken');
|
||||
|
||||
// Проверка авторизации
|
||||
|
||||
@@ -6,7 +6,6 @@
|
||||
<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;
|
||||
@@ -64,6 +63,10 @@
|
||||
border-radius: 30px;
|
||||
}
|
||||
|
||||
.nav a:hover {
|
||||
background: rgba(255,255,255,0.1);
|
||||
}
|
||||
|
||||
.nav .active {
|
||||
background: #3b82f6;
|
||||
}
|
||||
@@ -89,6 +92,8 @@
|
||||
margin-bottom: 30px;
|
||||
padding-bottom: 20px;
|
||||
border-bottom: 2px solid #dee9f5;
|
||||
flex-wrap: wrap;
|
||||
gap: 15px;
|
||||
}
|
||||
|
||||
.status-badge {
|
||||
@@ -189,6 +194,33 @@
|
||||
background: transparent;
|
||||
border: 2px solid #dee9f5;
|
||||
}
|
||||
|
||||
.loading {
|
||||
text-align: center;
|
||||
padding: 60px;
|
||||
color: #4f7092;
|
||||
font-size: 18px;
|
||||
}
|
||||
|
||||
.error-message {
|
||||
background: #fee2e2;
|
||||
color: #b91c1c;
|
||||
padding: 20px;
|
||||
border-radius: 30px;
|
||||
text-align: center;
|
||||
margin: 40px 0;
|
||||
}
|
||||
|
||||
.view-counter {
|
||||
display: inline-flex;
|
||||
align-items: center;
|
||||
gap: 5px;
|
||||
background: #eef4fa;
|
||||
padding: 5px 15px;
|
||||
border-radius: 30px;
|
||||
font-size: 14px;
|
||||
color: #1f3f60;
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
@@ -199,7 +231,7 @@
|
||||
Rabota.Today
|
||||
</div>
|
||||
<div class="nav" id="nav">
|
||||
<!-- Навигация -->
|
||||
<!-- Навигация будет заполнена динамически -->
|
||||
</div>
|
||||
</div>
|
||||
|
||||
@@ -211,33 +243,101 @@
|
||||
</div>
|
||||
|
||||
<script>
|
||||
const API_BASE_URL = 'http://localhost:8000/api';
|
||||
const API_BASE_URL = window.location.protocol + '//' + window.location.host + '/api';
|
||||
const token = localStorage.getItem('accessToken');
|
||||
const pathParts = window.location.pathname.split('/');
|
||||
const applicationId = pathParts[pathParts.length - 1];
|
||||
|
||||
if (!token) window.location.href = '/login';
|
||||
let currentUser = null; // Объявляем переменную
|
||||
|
||||
if (!token) {
|
||||
window.location.href = '/login';
|
||||
}
|
||||
|
||||
// Функция для обновления навигации
|
||||
async function updateNavigation() {
|
||||
const nav = document.getElementById('nav');
|
||||
|
||||
if (!currentUser) {
|
||||
nav.innerHTML = `
|
||||
<a href="/">Главная</a>
|
||||
<a href="/vacancies">Вакансии</a>
|
||||
<a href="/resumes">Резюме</a>
|
||||
<a href="/login">Войти</a>
|
||||
`;
|
||||
return;
|
||||
}
|
||||
|
||||
const firstName = currentUser.full_name ? currentUser.full_name.split(' ')[0] : 'Профиль';
|
||||
const adminBadge = currentUser.is_admin ? '<span class="admin-badge">Admin</span>' : '';
|
||||
|
||||
nav.innerHTML = `
|
||||
<a href="/">Главная</a>
|
||||
<a href="/vacancies">Вакансии</a>
|
||||
<a href="/resumes">Резюме</a>
|
||||
<a href="/favorites">Избранное</a>
|
||||
<a href="/applications">Отклики</a>
|
||||
<a href="/profile" style="background: #3b82f6;">
|
||||
<i class="fas fa-user-circle"></i> ${firstName} ${adminBadge}
|
||||
</a>
|
||||
`;
|
||||
}
|
||||
|
||||
// Загрузка информации о пользователе
|
||||
async function loadCurrentUser() {
|
||||
try {
|
||||
const response = await fetch(`${API_BASE_URL}/user`, {
|
||||
headers: { 'Authorization': `Bearer ${token}` }
|
||||
});
|
||||
|
||||
if (response.ok) {
|
||||
currentUser = await response.json();
|
||||
await updateNavigation();
|
||||
}
|
||||
} catch (error) {
|
||||
console.error('Error loading user:', error);
|
||||
}
|
||||
}
|
||||
|
||||
// Загрузка отклика
|
||||
async function loadApplication() {
|
||||
try {
|
||||
console.log('Loading application:', applicationId);
|
||||
|
||||
const response = await fetch(`${API_BASE_URL}/applications/${applicationId}`, {
|
||||
headers: { 'Authorization': `Bearer ${token}` }
|
||||
});
|
||||
|
||||
if (!response.ok) throw new Error('Ошибка загрузки');
|
||||
if (!response.ok) {
|
||||
const error = await response.json();
|
||||
throw new Error(error.detail || 'Ошибка загрузки');
|
||||
}
|
||||
|
||||
const app = await response.json();
|
||||
console.log('Application loaded:', app);
|
||||
|
||||
renderApplication(app);
|
||||
|
||||
} catch (error) {
|
||||
console.error('Error:', error);
|
||||
console.error('Error loading application:', error);
|
||||
document.getElementById('applicationDetail').innerHTML = `
|
||||
<div class="error-message">
|
||||
<i class="fas fa-exclamation-circle"></i>
|
||||
Ошибка загрузки: ${error.message}
|
||||
</div>
|
||||
`;
|
||||
}
|
||||
}
|
||||
|
||||
// Отображение отклика
|
||||
function renderApplication(app) {
|
||||
const container = document.getElementById('applicationDetail');
|
||||
const isEmployer = app.employer_id === currentUser?.id;
|
||||
|
||||
// Определяем, кто просматривает (работодатель или соискатель)
|
||||
const isEmployerViewing = currentUser && app.employer_id === currentUser.id;
|
||||
const isEmployeeViewing = currentUser && app.user_id === currentUser.id;
|
||||
|
||||
// Статус на русском
|
||||
const statusText = {
|
||||
'pending': 'Ожидает',
|
||||
'viewed': 'Просмотрено',
|
||||
@@ -245,16 +345,22 @@
|
||||
'rejected': 'Отклонено'
|
||||
}[app.status] || app.status;
|
||||
|
||||
// Форматирование дат
|
||||
const createdDate = new Date(app.created_at).toLocaleString('ru-RU');
|
||||
const viewedDate = app.viewed_at ? new Date(app.viewed_at).toLocaleString('ru-RU') : null;
|
||||
const responseDate = app.response_at ? new Date(app.response_at).toLocaleString('ru-RU') : null;
|
||||
|
||||
container.innerHTML = `
|
||||
<div class="status-bar">
|
||||
<span class="status-badge ${app.status}">${statusText}</span>
|
||||
<span class="date">Создано: ${new Date(app.created_at).toLocaleString()}</span>
|
||||
<span class="date">Создано: ${createdDate}</span>
|
||||
</div>
|
||||
|
||||
<h2>${escapeHtml(app.vacancy_title)}</h2>
|
||||
<h2 style="margin-bottom: 20px;">${escapeHtml(app.vacancy_title)}</h2>
|
||||
|
||||
<!-- Информация о вакансии -->
|
||||
<div class="section">
|
||||
<h3>Информация о вакансии</h3>
|
||||
<h3>📋 Информация о вакансии</h3>
|
||||
<div class="info-grid">
|
||||
<div class="info-item">
|
||||
<i class="fas fa-building"></i>
|
||||
@@ -271,8 +377,10 @@
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Информация о соискателе (для работодателя) -->
|
||||
${isEmployerViewing ? `
|
||||
<div class="section">
|
||||
<h3>Информация о соискателе</h3>
|
||||
<h3>👤 Информация о соискателе</h3>
|
||||
<div class="info-grid">
|
||||
<div class="info-item">
|
||||
<i class="fas fa-user"></i>
|
||||
@@ -292,33 +400,73 @@
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
` : ''}
|
||||
|
||||
<!-- Информация о работодателе (для соискателя) -->
|
||||
${isEmployeeViewing ? `
|
||||
<div class="section">
|
||||
<h3>🏢 Информация о работодателе</h3>
|
||||
<div class="info-grid">
|
||||
<div class="info-item">
|
||||
<i class="fas fa-user"></i>
|
||||
<span>${escapeHtml(app.employer_name)}</span>
|
||||
</div>
|
||||
<div class="info-item">
|
||||
<i class="fas fa-envelope"></i>
|
||||
<span>${escapeHtml(app.employer_email)}</span>
|
||||
</div>
|
||||
<div class="info-item">
|
||||
<i class="fab fa-telegram"></i>
|
||||
<span>${escapeHtml(app.employer_telegram || '—')}</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
` : ''}
|
||||
|
||||
<!-- Сопроводительное письмо -->
|
||||
${app.message ? `
|
||||
<div class="message-box">
|
||||
<strong>Сопроводительное письмо:</strong>
|
||||
<p>${escapeHtml(app.message)}</p>
|
||||
<strong>✉️ Сопроводительное письмо:</strong>
|
||||
<p style="margin-top: 10px;">${escapeHtml(app.message)}</p>
|
||||
</div>
|
||||
` : ''}
|
||||
|
||||
<!-- Ответ работодателя -->
|
||||
${app.response_message ? `
|
||||
<div class="response-box">
|
||||
<strong>Ответ работодателя:</strong>
|
||||
<p>${escapeHtml(app.response_message)}</p>
|
||||
<small>${new Date(app.response_at).toLocaleString()}</small>
|
||||
<strong>💬 Ответ работодателя:</strong>
|
||||
<p style="margin-top: 10px;">${escapeHtml(app.response_message)}</p>
|
||||
${responseDate ? `<small style="display: block; margin-top: 10px;">Ответ дан: ${responseDate}</small>` : ''}
|
||||
</div>
|
||||
` : ''}
|
||||
|
||||
${isEmployer && app.status === 'pending' ? `
|
||||
<!-- Информация о просмотре -->
|
||||
${viewedDate ? `
|
||||
<div style="color: #4f7092; font-size: 14px; margin-top: 20px; padding: 10px; background: #f9fcff; border-radius: 10px;">
|
||||
<i class="fas fa-eye"></i> Просмотрено: ${viewedDate}
|
||||
</div>
|
||||
` : ''}
|
||||
|
||||
<!-- Кнопки для работодателя -->
|
||||
${isEmployerViewing && app.status === 'pending' ? `
|
||||
<div class="action-buttons">
|
||||
<button class="btn btn-success" onclick="updateStatus('accepted')">Принять</button>
|
||||
<button class="btn btn-danger" onclick="updateStatus('rejected')">Отклонить</button>
|
||||
<button class="btn btn-success" onclick="updateStatus('accepted')">✅ Принять</button>
|
||||
<button class="btn btn-danger" onclick="updateStatus('rejected')">❌ Отклонить</button>
|
||||
</div>
|
||||
` : ''}
|
||||
|
||||
${isEmployerViewing && app.status === 'viewed' ? `
|
||||
<div class="action-buttons">
|
||||
<button class="btn btn-success" onclick="updateStatus('accepted')">✅ Принять</button>
|
||||
<button class="btn btn-danger" onclick="updateStatus('rejected')">❌ Отклонить</button>
|
||||
</div>
|
||||
` : ''}
|
||||
`;
|
||||
}
|
||||
|
||||
// Обновление статуса отклика
|
||||
async function updateStatus(status) {
|
||||
const message = prompt('Введите сообщение (необязательно):');
|
||||
const message = prompt('Введите сообщение для соискателя (необязательно):');
|
||||
|
||||
try {
|
||||
const response = await fetch(`${API_BASE_URL}/applications/${applicationId}/status`, {
|
||||
@@ -335,13 +483,17 @@
|
||||
|
||||
if (response.ok) {
|
||||
alert('Статус обновлен');
|
||||
loadApplication();
|
||||
loadApplication(); // Перезагружаем страницу
|
||||
} else {
|
||||
const error = await response.json();
|
||||
throw new Error(error.detail || 'Ошибка обновления');
|
||||
}
|
||||
} catch (error) {
|
||||
alert('Ошибка');
|
||||
alert('Ошибка: ' + error.message);
|
||||
}
|
||||
}
|
||||
|
||||
// Экранирование HTML
|
||||
function escapeHtml(unsafe) {
|
||||
if (!unsafe) return '';
|
||||
return unsafe.toString()
|
||||
@@ -352,7 +504,13 @@
|
||||
.replace(/'/g, "'");
|
||||
}
|
||||
|
||||
loadApplication();
|
||||
// Инициализация
|
||||
async function init() {
|
||||
await loadCurrentUser();
|
||||
await loadApplication();
|
||||
}
|
||||
|
||||
init();
|
||||
</script>
|
||||
</body>
|
||||
</html>
|
||||
@@ -636,7 +636,9 @@
|
||||
<div id="notification"></div>
|
||||
|
||||
<script>
|
||||
const API_BASE_URL = 'http://localhost:8000/api';
|
||||
const currentProtocol = window.location.protocol; // http: или https:
|
||||
const currentHost = window.location.host; // yarmarka.rabota.today или IP:порт
|
||||
let API_BASE_URL = `${currentProtocol}//${currentHost}/api`;
|
||||
let currentUser = null;
|
||||
let currentType = 'received'; // 'received' или 'sent'
|
||||
let currentPage = 1;
|
||||
|
||||
748
templates/company_detail.html
Normal file
748
templates/company_detail.html
Normal file
@@ -0,0 +1,748 @@
|
||||
<!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;
|
||||
}
|
||||
|
||||
.admin-badge {
|
||||
background: #f59e0b;
|
||||
color: white;
|
||||
padding: 2px 8px;
|
||||
border-radius: 20px;
|
||||
font-size: 12px;
|
||||
margin-left: 5px;
|
||||
}
|
||||
|
||||
.back-link {
|
||||
display: inline-block;
|
||||
margin-bottom: 20px;
|
||||
color: #4f7092;
|
||||
text-decoration: none;
|
||||
font-size: 16px;
|
||||
}
|
||||
|
||||
.back-link i {
|
||||
margin-right: 8px;
|
||||
}
|
||||
|
||||
.back-link:hover {
|
||||
color: #0b1c34;
|
||||
}
|
||||
|
||||
/* Шапка компании */
|
||||
.company-header {
|
||||
background: white;
|
||||
border-radius: 40px;
|
||||
padding: 40px;
|
||||
margin-bottom: 30px;
|
||||
box-shadow: 0 20px 40px rgba(0,20,40,0.1);
|
||||
display: flex;
|
||||
gap: 40px;
|
||||
flex-wrap: wrap;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
.company-logo {
|
||||
width: 120px;
|
||||
height: 120px;
|
||||
background: #eef4fa;
|
||||
border-radius: 30px;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
font-size: 48px;
|
||||
color: #3b82f6;
|
||||
flex-shrink: 0;
|
||||
}
|
||||
|
||||
.company-logo img {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
object-fit: cover;
|
||||
border-radius: 30px;
|
||||
}
|
||||
|
||||
.company-info {
|
||||
flex: 1;
|
||||
}
|
||||
|
||||
.company-name {
|
||||
font-size: 36px;
|
||||
font-weight: 700;
|
||||
color: #0b1c34;
|
||||
margin-bottom: 10px;
|
||||
}
|
||||
|
||||
.company-meta {
|
||||
display: flex;
|
||||
gap: 20px;
|
||||
color: #4f7092;
|
||||
font-size: 16px;
|
||||
flex-wrap: wrap;
|
||||
}
|
||||
|
||||
.company-meta i {
|
||||
color: #3b82f6;
|
||||
margin-right: 5px;
|
||||
}
|
||||
|
||||
.company-website {
|
||||
display: inline-block;
|
||||
margin-top: 15px;
|
||||
color: #3b82f6;
|
||||
text-decoration: none;
|
||||
font-weight: 600;
|
||||
}
|
||||
|
||||
.company-website:hover {
|
||||
text-decoration: underline;
|
||||
}
|
||||
|
||||
/* Статистика компании */
|
||||
.company-stats {
|
||||
display: grid;
|
||||
grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
|
||||
gap: 20px;
|
||||
margin-bottom: 30px;
|
||||
}
|
||||
|
||||
.stat-card {
|
||||
background: white;
|
||||
border-radius: 30px;
|
||||
padding: 25px;
|
||||
text-align: center;
|
||||
box-shadow: 0 10px 20px rgba(0,20,40,0.05);
|
||||
}
|
||||
|
||||
.stat-card i {
|
||||
font-size: 32px;
|
||||
color: #3b82f6;
|
||||
margin-bottom: 10px;
|
||||
}
|
||||
|
||||
.stat-value {
|
||||
font-size: 28px;
|
||||
font-weight: 700;
|
||||
color: #0b1c34;
|
||||
}
|
||||
|
||||
.stat-label {
|
||||
color: #4f7092;
|
||||
font-size: 14px;
|
||||
}
|
||||
|
||||
/* Описание компании */
|
||||
.company-description {
|
||||
background: white;
|
||||
border-radius: 40px;
|
||||
padding: 40px;
|
||||
margin-bottom: 30px;
|
||||
box-shadow: 0 20px 40px rgba(0,20,40,0.1);
|
||||
}
|
||||
|
||||
.section-title {
|
||||
font-size: 24px;
|
||||
color: #0b1c34;
|
||||
margin-bottom: 20px;
|
||||
font-weight: 600;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 10px;
|
||||
}
|
||||
|
||||
.section-title i {
|
||||
color: #3b82f6;
|
||||
}
|
||||
|
||||
.description-text {
|
||||
line-height: 1.8;
|
||||
color: #1f3f60;
|
||||
font-size: 16px;
|
||||
white-space: pre-line;
|
||||
}
|
||||
|
||||
/* Контакты */
|
||||
.company-contacts {
|
||||
background: white;
|
||||
border-radius: 40px;
|
||||
padding: 40px;
|
||||
margin-bottom: 30px;
|
||||
box-shadow: 0 20px 40px rgba(0,20,40,0.1);
|
||||
}
|
||||
|
||||
.contacts-grid {
|
||||
display: grid;
|
||||
grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
|
||||
gap: 20px;
|
||||
}
|
||||
|
||||
.contact-item {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 15px;
|
||||
padding: 15px;
|
||||
background: #f9fcff;
|
||||
border-radius: 20px;
|
||||
}
|
||||
|
||||
.contact-item i {
|
||||
width: 40px;
|
||||
height: 40px;
|
||||
background: #eef4fa;
|
||||
border-radius: 20px;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
color: #3b82f6;
|
||||
font-size: 18px;
|
||||
}
|
||||
|
||||
.contact-info {
|
||||
flex: 1;
|
||||
}
|
||||
|
||||
.contact-label {
|
||||
font-size: 12px;
|
||||
color: #4f7092;
|
||||
margin-bottom: 4px;
|
||||
}
|
||||
|
||||
.contact-value {
|
||||
font-weight: 600;
|
||||
color: #0b1c34;
|
||||
}
|
||||
|
||||
/* Вакансии компании */
|
||||
.company-vacancies {
|
||||
background: white;
|
||||
border-radius: 40px;
|
||||
padding: 40px;
|
||||
margin-bottom: 30px;
|
||||
box-shadow: 0 20px 40px rgba(0,20,40,0.1);
|
||||
}
|
||||
|
||||
.vacancies-header {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
margin-bottom: 30px;
|
||||
flex-wrap: wrap;
|
||||
gap: 20px;
|
||||
}
|
||||
|
||||
.vacancies-header h2 {
|
||||
font-size: 24px;
|
||||
color: #0b1c34;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 10px;
|
||||
}
|
||||
|
||||
.vacancies-header h2 i {
|
||||
color: #3b82f6;
|
||||
}
|
||||
|
||||
.vacancies-grid {
|
||||
display: grid;
|
||||
grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
|
||||
gap: 20px;
|
||||
}
|
||||
|
||||
.vacancy-card {
|
||||
background: #f9fcff;
|
||||
border: 1px solid #dee9f5;
|
||||
border-radius: 30px;
|
||||
padding: 25px;
|
||||
transition: 0.2s;
|
||||
cursor: pointer;
|
||||
position: relative;
|
||||
}
|
||||
|
||||
.vacancy-card:hover {
|
||||
background: white;
|
||||
box-shadow: 0 10px 30px rgba(0,20,40,0.1);
|
||||
transform: translateY(-3px);
|
||||
}
|
||||
|
||||
.vacancy-card h3 {
|
||||
color: #0b1c34;
|
||||
margin-bottom: 10px;
|
||||
font-size: 18px;
|
||||
}
|
||||
|
||||
.vacancy-salary {
|
||||
color: #3b82f6;
|
||||
font-weight: 700;
|
||||
font-size: 18px;
|
||||
margin: 10px 0;
|
||||
}
|
||||
|
||||
.vacancy-tags {
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
gap: 5px;
|
||||
margin: 10px 0;
|
||||
}
|
||||
|
||||
.tag {
|
||||
background: #eef4fa;
|
||||
padding: 4px 10px;
|
||||
border-radius: 20px;
|
||||
font-size: 12px;
|
||||
color: #1f3f60;
|
||||
}
|
||||
|
||||
.vacancy-footer {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
margin-top: 15px;
|
||||
font-size: 14px;
|
||||
color: #4f7092;
|
||||
}
|
||||
|
||||
/* Социальные сети */
|
||||
.company-social {
|
||||
background: white;
|
||||
border-radius: 40px;
|
||||
padding: 40px;
|
||||
box-shadow: 0 20px 40px rgba(0,20,40,0.1);
|
||||
}
|
||||
|
||||
.social-links {
|
||||
display: flex;
|
||||
gap: 15px;
|
||||
flex-wrap: wrap;
|
||||
}
|
||||
|
||||
.social-link {
|
||||
width: 50px;
|
||||
height: 50px;
|
||||
background: #eef4fa;
|
||||
border-radius: 25px;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
color: #3b82f6;
|
||||
font-size: 24px;
|
||||
transition: 0.2s;
|
||||
}
|
||||
|
||||
.social-link:hover {
|
||||
background: #3b82f6;
|
||||
color: white;
|
||||
transform: translateY(-3px);
|
||||
}
|
||||
|
||||
/* Загрузка */
|
||||
.loading {
|
||||
text-align: center;
|
||||
padding: 60px;
|
||||
color: #4f7092;
|
||||
font-size: 18px;
|
||||
}
|
||||
|
||||
/* Ошибка */
|
||||
.error-message {
|
||||
background: #fee2e2;
|
||||
color: #b91c1c;
|
||||
padding: 20px;
|
||||
border-radius: 30px;
|
||||
text-align: center;
|
||||
margin: 40px 0;
|
||||
}
|
||||
|
||||
/* Адаптивность */
|
||||
@media (max-width: 768px) {
|
||||
.company-header {
|
||||
flex-direction: column;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.company-meta {
|
||||
justify-content: center;
|
||||
}
|
||||
|
||||
.contacts-grid {
|
||||
grid-template-columns: 1fr;
|
||||
}
|
||||
}
|
||||
</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>
|
||||
|
||||
<a href="javascript:history.back()" class="back-link"><i class="fas fa-arrow-left"></i> Назад</a>
|
||||
|
||||
<!-- Контент компании -->
|
||||
<div id="companyContent">
|
||||
<div class="loading">Загрузка информации о компании...</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<script>
|
||||
const API_BASE_URL = window.location.protocol + '//' + window.location.host + '/api';
|
||||
let currentUser = null;
|
||||
|
||||
// Получаем ID компании из URL
|
||||
const pathParts = window.location.pathname.split('/');
|
||||
const companyId = pathParts[pathParts.length - 1];
|
||||
|
||||
// Проверка авторизации
|
||||
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) {
|
||||
const firstName = currentUser.full_name.split(' ')[0];
|
||||
const adminBadge = currentUser.is_admin ? '<span class="admin-badge">Admin</span>' : '';
|
||||
|
||||
nav.innerHTML = `
|
||||
<a href="/">Главная</a>
|
||||
<a href="/vacancies">Вакансии</a>
|
||||
<a href="/resumes">Резюме</a>
|
||||
<a href="/favorites">Избранное</a>
|
||||
<a href="/applications">Отклики</a>
|
||||
<a href="/profile" class="profile-link">
|
||||
<i class="fas fa-user-circle"></i> ${firstName} ${adminBadge}
|
||||
</a>
|
||||
`;
|
||||
} else {
|
||||
nav.innerHTML = `
|
||||
<a href="/">Главная</a>
|
||||
<a href="/vacancies">Вакансии</a>
|
||||
<a href="/resumes">Резюме</a>
|
||||
<a href="/login">Войти</a>
|
||||
<a href="/register">Регистрация</a>
|
||||
`;
|
||||
}
|
||||
}
|
||||
|
||||
// Загрузка информации о компании
|
||||
async function loadCompany() {
|
||||
try {
|
||||
console.log('📥 Загрузка компании ID:', companyId);
|
||||
|
||||
const response = await fetch(`${API_BASE_URL}/companies/${companyId}`);
|
||||
|
||||
if (!response.ok) {
|
||||
throw new Error('Компания не найдена');
|
||||
}
|
||||
|
||||
const company = await response.json();
|
||||
console.log('✅ Компания загружена:', company);
|
||||
|
||||
// Загружаем вакансии компании
|
||||
const vacanciesResponse = await fetch(`${API_BASE_URL}/vacancies/all?company_id=${companyId}`);
|
||||
const vacancies = vacanciesResponse.ok ? await vacanciesResponse.json() : { vacancies: [] };
|
||||
|
||||
renderCompany(company, vacancies.vacancies || []);
|
||||
|
||||
} catch (error) {
|
||||
console.error('❌ Ошибка загрузки компании:', error);
|
||||
document.getElementById('companyContent').innerHTML = `
|
||||
<div class="error-message">
|
||||
<i class="fas fa-exclamation-circle"></i>
|
||||
Компания не найдена или была удалена
|
||||
</div>
|
||||
<div style="text-align: center; margin-top: 20px;">
|
||||
<a href="/" class="btn btn-primary">На главную</a>
|
||||
</div>
|
||||
`;
|
||||
}
|
||||
}
|
||||
|
||||
// Отображение компании
|
||||
function renderCompany(company, vacancies) {
|
||||
const container = document.getElementById('companyContent');
|
||||
|
||||
// Форматирование даты регистрации
|
||||
const createdDate = new Date(company.created_at).toLocaleDateString('ru-RU', {
|
||||
year: 'numeric',
|
||||
month: 'long',
|
||||
day: 'numeric'
|
||||
});
|
||||
|
||||
// Активные вакансии
|
||||
const activeVacancies = vacancies.filter(v => v.is_active).length;
|
||||
|
||||
container.innerHTML = `
|
||||
<!-- Шапка компании -->
|
||||
<div class="company-header">
|
||||
<div class="company-logo">
|
||||
${company.logo ?
|
||||
`<img src="${escapeHtml(company.logo)}" alt="${escapeHtml(company.name)}">` :
|
||||
`<i class="fas fa-building"></i>`
|
||||
}
|
||||
</div>
|
||||
<div class="company-info">
|
||||
<h1 class="company-name">${escapeHtml(company.name)}</h1>
|
||||
<div class="company-meta">
|
||||
<span><i class="fas fa-calendar"></i> На рынке с ${createdDate}</span>
|
||||
${company.website ?
|
||||
`<span><i class="fas fa-globe"></i> <a href="${escapeHtml(company.website)}" target="_blank">${escapeHtml(company.website)}</a></span>` :
|
||||
''
|
||||
}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Статистика компании -->
|
||||
<div class="company-stats">
|
||||
<div class="stat-card">
|
||||
<i class="fas fa-briefcase"></i>
|
||||
<div class="stat-value">${vacancies.length}</div>
|
||||
<div class="stat-label">Всего вакансий</div>
|
||||
</div>
|
||||
<div class="stat-card">
|
||||
<i class="fas fa-check-circle"></i>
|
||||
<div class="stat-value">${activeVacancies}</div>
|
||||
<div class="stat-label">Активных</div>
|
||||
</div>
|
||||
<div class="stat-card">
|
||||
<i class="fas fa-eye"></i>
|
||||
<div class="stat-value">${vacancies.reduce((sum, v) => sum + (v.views || 0), 0)}</div>
|
||||
<div class="stat-label">Просмотров</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Описание компании -->
|
||||
${company.description ? `
|
||||
<div class="company-description">
|
||||
<h2 class="section-title">
|
||||
<i class="fas fa-info-circle"></i> О компании
|
||||
</h2>
|
||||
<div class="description-text">${escapeHtml(company.description).replace(/\n/g, '<br>')}</div>
|
||||
</div>
|
||||
` : ''}
|
||||
|
||||
<!-- Контактная информация -->
|
||||
<div class="company-contacts">
|
||||
<h2 class="section-title">
|
||||
<i class="fas fa-address-card"></i> Контактная информация
|
||||
</h2>
|
||||
<div class="contacts-grid">
|
||||
${company.email ? `
|
||||
<div class="contact-item">
|
||||
<i class="fas fa-envelope"></i>
|
||||
<div class="contact-info">
|
||||
<div class="contact-label">Email</div>
|
||||
<div class="contact-value">
|
||||
<a href="mailto:${escapeHtml(company.email)}">${escapeHtml(company.email)}</a>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
` : ''}
|
||||
|
||||
${company.phone ? `
|
||||
<div class="contact-item">
|
||||
<i class="fas fa-phone"></i>
|
||||
<div class="contact-info">
|
||||
<div class="contact-label">Телефон</div>
|
||||
<div class="contact-value">
|
||||
<a href="tel:${escapeHtml(company.phone)}">${escapeHtml(company.phone)}</a>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
` : ''}
|
||||
|
||||
${company.address ? `
|
||||
<div class="contact-item">
|
||||
<i class="fas fa-map-marker-alt"></i>
|
||||
<div class="contact-info">
|
||||
<div class="contact-label">Адрес</div>
|
||||
<div class="contact-value">${escapeHtml(company.address)}</div>
|
||||
</div>
|
||||
</div>
|
||||
` : ''}
|
||||
|
||||
${company.website ? `
|
||||
<div class="contact-item">
|
||||
<i class="fas fa-globe"></i>
|
||||
<div class="contact-info">
|
||||
<div class="contact-label">Сайт</div>
|
||||
<div class="contact-value">
|
||||
<a href="${escapeHtml(company.website)}" target="_blank">${escapeHtml(company.website)}</a>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
` : ''}
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Вакансии компании -->
|
||||
<div class="company-vacancies">
|
||||
<div class="vacancies-header">
|
||||
<h2>
|
||||
<i class="fas fa-briefcase"></i> Вакансии компании
|
||||
</h2>
|
||||
<span style="color: #4f7092;">${vacancies.length} вакансий</span>
|
||||
</div>
|
||||
|
||||
${vacancies.length > 0 ? `
|
||||
<div class="vacancies-grid">
|
||||
${vacancies.map(v => `
|
||||
<div class="vacancy-card" onclick="window.location.href='/vacancy/${v.id}'">
|
||||
<h3>${escapeHtml(v.title)}</h3>
|
||||
<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-footer">
|
||||
<span><i class="fas fa-eye"></i> ${v.views || 0}</span>
|
||||
<span><i class="fas fa-calendar"></i> ${new Date(v.created_at).toLocaleDateString()}</span>
|
||||
</div>
|
||||
</div>
|
||||
`).join('')}
|
||||
</div>
|
||||
` : `
|
||||
<p style="text-align: center; color: #4f7092; padding: 40px;">
|
||||
У компании пока нет активных вакансий
|
||||
</p>
|
||||
`}
|
||||
</div>
|
||||
|
||||
<!-- Социальные сети (заглушка, можно добавить позже) -->
|
||||
<div class="company-social" style="display: none;">
|
||||
<h2 class="section-title">
|
||||
<i class="fas fa-share-alt"></i> Мы в соцсетях
|
||||
</h2>
|
||||
<div class="social-links">
|
||||
<a href="#" class="social-link"><i class="fab fa-telegram"></i></a>
|
||||
<a href="#" class="social-link"><i class="fab fa-vk"></i></a>
|
||||
<a href="#" class="social-link"><i class="fab fa-linkedin"></i></a>
|
||||
</div>
|
||||
</div>
|
||||
`;
|
||||
}
|
||||
|
||||
// Экранирование HTML
|
||||
function escapeHtml(unsafe) {
|
||||
if (!unsafe) return '';
|
||||
return unsafe.toString()
|
||||
.replace(/&/g, "&")
|
||||
.replace(/</g, "<")
|
||||
.replace(/>/g, ">")
|
||||
.replace(/"/g, """)
|
||||
.replace(/'/g, "'");
|
||||
}
|
||||
|
||||
// Инициализация
|
||||
checkAuth().then(() => {
|
||||
loadCompany();
|
||||
});
|
||||
</script>
|
||||
</body>
|
||||
</html>
|
||||
27
templates/debug.html
Normal file
27
templates/debug.html
Normal file
@@ -0,0 +1,27 @@
|
||||
<!DOCTYPE html>
|
||||
<html>
|
||||
<head>
|
||||
<title>Debug API</title>
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||
</head>
|
||||
<body>
|
||||
<h1>Debug API</h1>
|
||||
<button onclick="testApi()">Test API Connection</button>
|
||||
<pre id="result"></pre>
|
||||
|
||||
<script>
|
||||
async function testApi() {
|
||||
const result = document.getElementById('result');
|
||||
result.textContent = 'Testing...';
|
||||
|
||||
try {
|
||||
const response = await fetch('http://localhost:8000/api/health');
|
||||
const data = await response.json();
|
||||
result.textContent = JSON.stringify(data, null, 2);
|
||||
} catch (error) {
|
||||
result.textContent = 'Error: ' + error.message;
|
||||
}
|
||||
}
|
||||
</script>
|
||||
</body>
|
||||
</html>
|
||||
File diff suppressed because it is too large
Load Diff
947
templates/index_mobile.html
Normal file
947
templates/index_mobile.html
Normal file
@@ -0,0 +1,947 @@
|
||||
<!DOCTYPE html>
|
||||
<html lang="ru">
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=yes">
|
||||
<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;
|
||||
-webkit-tap-highlight-color: transparent;
|
||||
}
|
||||
|
||||
body {
|
||||
font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif;
|
||||
background: linear-gradient(145deg, #0b1c34 0%, #1a3650 100%);
|
||||
min-height: 100vh;
|
||||
color: #333;
|
||||
}
|
||||
|
||||
.container {
|
||||
max-width: 600px;
|
||||
margin: 0 auto;
|
||||
padding: 12px;
|
||||
}
|
||||
|
||||
/* Шапка */
|
||||
.header {
|
||||
background: rgba(255, 255, 255, 0.05);
|
||||
backdrop-filter: blur(10px);
|
||||
-webkit-backdrop-filter: blur(10px);
|
||||
border-radius: 30px;
|
||||
padding: 15px 20px;
|
||||
margin-bottom: 20px;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
border: 1px solid rgba(255, 255, 255, 0.1);
|
||||
}
|
||||
|
||||
.logo {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 10px;
|
||||
}
|
||||
|
||||
.logo i {
|
||||
font-size: 28px;
|
||||
color: #3b82f6;
|
||||
background: rgba(59, 130, 246, 0.2);
|
||||
padding: 8px;
|
||||
border-radius: 16px;
|
||||
}
|
||||
|
||||
.logo span {
|
||||
font-size: 20px;
|
||||
font-weight: 700;
|
||||
color: white;
|
||||
}
|
||||
|
||||
.nav {
|
||||
display: flex;
|
||||
gap: 8px;
|
||||
}
|
||||
|
||||
.nav a {
|
||||
color: white;
|
||||
text-decoration: none;
|
||||
padding: 8px 12px;
|
||||
border-radius: 30px;
|
||||
font-size: 14px;
|
||||
font-weight: 500;
|
||||
transition: 0.2s;
|
||||
white-space: nowrap;
|
||||
}
|
||||
|
||||
.nav a:hover {
|
||||
background: rgba(255, 255, 255, 0.1);
|
||||
}
|
||||
|
||||
.nav .login-btn {
|
||||
background: #3b82f6;
|
||||
color: white;
|
||||
}
|
||||
|
||||
/* Мобильное меню */
|
||||
.mobile-menu {
|
||||
display: none;
|
||||
}
|
||||
|
||||
@media (max-width: 480px) {
|
||||
.nav {
|
||||
display: none;
|
||||
}
|
||||
|
||||
.mobile-menu {
|
||||
display: block;
|
||||
position: relative;
|
||||
}
|
||||
|
||||
.mobile-menu-btn {
|
||||
background: rgba(255, 255, 255, 0.1);
|
||||
border: none;
|
||||
color: white;
|
||||
font-size: 24px;
|
||||
width: 44px;
|
||||
height: 44px;
|
||||
border-radius: 22px;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
.mobile-menu-dropdown {
|
||||
position: absolute;
|
||||
top: 50px;
|
||||
right: 0;
|
||||
background: white;
|
||||
border-radius: 20px;
|
||||
padding: 10px;
|
||||
min-width: 180px;
|
||||
box-shadow: 0 10px 30px rgba(0,0,0,0.3);
|
||||
display: none;
|
||||
z-index: 1000;
|
||||
}
|
||||
|
||||
.mobile-menu-dropdown.active {
|
||||
display: block;
|
||||
animation: fadeIn 0.2s;
|
||||
}
|
||||
|
||||
.mobile-menu-dropdown a {
|
||||
display: block;
|
||||
padding: 12px 16px;
|
||||
color: #0b1c34;
|
||||
text-decoration: none;
|
||||
font-weight: 500;
|
||||
border-radius: 12px;
|
||||
}
|
||||
|
||||
.mobile-menu-dropdown a:hover {
|
||||
background: #f0f7ff;
|
||||
}
|
||||
|
||||
.mobile-menu-dropdown .login-btn {
|
||||
background: #3b82f6;
|
||||
color: white;
|
||||
}
|
||||
}
|
||||
|
||||
/* Анимации */
|
||||
@keyframes fadeIn {
|
||||
from { opacity: 0; transform: translateY(-10px); }
|
||||
to { opacity: 1; transform: translateY(0); }
|
||||
}
|
||||
|
||||
@keyframes slideIn {
|
||||
from { transform: translateX(100%); opacity: 0; }
|
||||
to { transform: translateX(0); opacity: 1; }
|
||||
}
|
||||
|
||||
@keyframes countUp {
|
||||
from { opacity: 0; transform: translateY(10px); }
|
||||
to { opacity: 1; transform: translateY(0); }
|
||||
}
|
||||
|
||||
/* Герой секция */
|
||||
.hero {
|
||||
background: white;
|
||||
border-radius: 40px;
|
||||
padding: 30px 20px;
|
||||
margin-bottom: 25px;
|
||||
text-align: center;
|
||||
box-shadow: 0 15px 30px rgba(0,0,0,0.2);
|
||||
}
|
||||
|
||||
.hero h1 {
|
||||
font-size: clamp(28px, 8vw, 42px);
|
||||
font-weight: 800;
|
||||
color: #0b1c34;
|
||||
margin-bottom: 10px;
|
||||
line-height: 1.2;
|
||||
}
|
||||
|
||||
.hero p {
|
||||
font-size: clamp(14px, 4vw, 18px);
|
||||
color: #4f7092;
|
||||
margin-bottom: 25px;
|
||||
padding: 0 10px;
|
||||
}
|
||||
|
||||
.hero-buttons {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 12px;
|
||||
max-width: 300px;
|
||||
margin: 0 auto;
|
||||
}
|
||||
|
||||
.btn {
|
||||
padding: 16px 24px;
|
||||
border-radius: 40px;
|
||||
font-size: 16px;
|
||||
font-weight: 700;
|
||||
text-decoration: none;
|
||||
text-align: center;
|
||||
transition: 0.2s;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
gap: 8px;
|
||||
-webkit-tap-highlight-color: transparent;
|
||||
}
|
||||
|
||||
.btn:active {
|
||||
transform: scale(0.97);
|
||||
}
|
||||
|
||||
.btn-primary {
|
||||
background: #0b1c34;
|
||||
color: white;
|
||||
}
|
||||
|
||||
.btn-primary i {
|
||||
color: #3b82f6;
|
||||
}
|
||||
|
||||
.btn-secondary {
|
||||
background: #e8f0fe;
|
||||
color: #0b1c34;
|
||||
border: 2px solid #3b82f6;
|
||||
}
|
||||
|
||||
/* Статистика */
|
||||
.stats {
|
||||
display: grid;
|
||||
grid-template-columns: repeat(3, 1fr);
|
||||
gap: 12px;
|
||||
margin-bottom: 25px;
|
||||
}
|
||||
|
||||
.stat-card {
|
||||
background: white;
|
||||
border-radius: 30px;
|
||||
padding: 20px 12px;
|
||||
text-align: center;
|
||||
box-shadow: 0 10px 20px rgba(0,0,0,0.1);
|
||||
transition: 0.2s;
|
||||
cursor: pointer;
|
||||
animation: countUp 0.5s ease-out;
|
||||
}
|
||||
|
||||
.stat-card:active {
|
||||
transform: translateY(-2px);
|
||||
}
|
||||
|
||||
.stat-card i {
|
||||
font-size: 24px;
|
||||
color: #3b82f6;
|
||||
margin-bottom: 8px;
|
||||
}
|
||||
|
||||
.stat-number {
|
||||
font-size: clamp(20px, 6vw, 28px);
|
||||
font-weight: 800;
|
||||
color: #0b1c34;
|
||||
line-height: 1.2;
|
||||
margin-bottom: 4px;
|
||||
}
|
||||
|
||||
.stat-label {
|
||||
font-size: 11px;
|
||||
color: #4f7092;
|
||||
text-transform: uppercase;
|
||||
letter-spacing: 0.5px;
|
||||
}
|
||||
|
||||
/* Секции с карточками */
|
||||
.section-title {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
margin: 25px 0 15px;
|
||||
}
|
||||
|
||||
.section-title h2 {
|
||||
font-size: 20px;
|
||||
color: white;
|
||||
font-weight: 600;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 8px;
|
||||
}
|
||||
|
||||
.section-title h2 i {
|
||||
color: #3b82f6;
|
||||
}
|
||||
|
||||
.section-title a {
|
||||
color: #9bb8da;
|
||||
text-decoration: none;
|
||||
font-size: 14px;
|
||||
padding: 8px 12px;
|
||||
background: rgba(255,255,255,0.05);
|
||||
border-radius: 30px;
|
||||
}
|
||||
|
||||
.cards-grid {
|
||||
display: grid;
|
||||
grid-template-columns: 1fr;
|
||||
gap: 15px;
|
||||
}
|
||||
|
||||
.card {
|
||||
background: white;
|
||||
border-radius: 30px;
|
||||
padding: 20px;
|
||||
box-shadow: 0 10px 20px rgba(0,0,0,0.1);
|
||||
cursor: pointer;
|
||||
transition: 0.2s;
|
||||
border-left: 5px solid #3b82f6;
|
||||
}
|
||||
|
||||
.card:active {
|
||||
transform: translateX(5px);
|
||||
}
|
||||
|
||||
.card-title {
|
||||
font-size: 18px;
|
||||
font-weight: 700;
|
||||
color: #0b1c34;
|
||||
margin-bottom: 5px;
|
||||
}
|
||||
|
||||
.card-subtitle {
|
||||
color: #3b82f6;
|
||||
font-size: 14px;
|
||||
margin-bottom: 10px;
|
||||
}
|
||||
|
||||
.card-salary {
|
||||
font-size: 16px;
|
||||
font-weight: 700;
|
||||
color: #0f2b4f;
|
||||
margin: 10px 0;
|
||||
}
|
||||
|
||||
.card-tags {
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
gap: 6px;
|
||||
margin: 10px 0;
|
||||
}
|
||||
|
||||
.tag {
|
||||
background: #eef4fa;
|
||||
padding: 4px 10px;
|
||||
border-radius: 20px;
|
||||
font-size: 11px;
|
||||
color: #1f3f60;
|
||||
}
|
||||
|
||||
.card-footer {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
margin-top: 10px;
|
||||
padding-top: 10px;
|
||||
border-top: 1px solid #dee9f5;
|
||||
font-size: 12px;
|
||||
color: #4f7092;
|
||||
}
|
||||
|
||||
/* Преимущества */
|
||||
.features {
|
||||
background: white;
|
||||
border-radius: 40px;
|
||||
padding: 30px 20px;
|
||||
margin: 30px 0;
|
||||
}
|
||||
|
||||
.features h2 {
|
||||
text-align: center;
|
||||
color: #0b1c34;
|
||||
margin-bottom: 25px;
|
||||
font-size: 22px;
|
||||
}
|
||||
|
||||
.features-grid {
|
||||
display: grid;
|
||||
grid-template-columns: repeat(2, 1fr);
|
||||
gap: 15px;
|
||||
}
|
||||
|
||||
.feature-item {
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.feature-item i {
|
||||
font-size: 32px;
|
||||
color: #3b82f6;
|
||||
background: #eef4fa;
|
||||
width: 60px;
|
||||
height: 60px;
|
||||
line-height: 60px;
|
||||
border-radius: 30px;
|
||||
margin-bottom: 10px;
|
||||
}
|
||||
|
||||
.feature-item h3 {
|
||||
font-size: 14px;
|
||||
color: #0b1c34;
|
||||
margin-bottom: 4px;
|
||||
}
|
||||
|
||||
.feature-item p {
|
||||
font-size: 11px;
|
||||
color: #4f7092;
|
||||
}
|
||||
|
||||
/* Призыв к действию */
|
||||
.cta {
|
||||
background: linear-gradient(135deg, #0b1c34 0%, #1f4b8a 100%);
|
||||
border-radius: 40px;
|
||||
padding: 30px 20px;
|
||||
margin: 30px 0;
|
||||
text-align: center;
|
||||
color: white;
|
||||
}
|
||||
|
||||
.cta h2 {
|
||||
font-size: 24px;
|
||||
margin-bottom: 10px;
|
||||
}
|
||||
|
||||
.cta p {
|
||||
color: #9bb8da;
|
||||
margin-bottom: 20px;
|
||||
}
|
||||
|
||||
.cta .btn-primary {
|
||||
background: #3b82f6;
|
||||
display: inline-flex;
|
||||
max-width: 250px;
|
||||
margin: 0 auto;
|
||||
}
|
||||
|
||||
/* Подвал */
|
||||
.footer {
|
||||
text-align: center;
|
||||
padding: 25px 0;
|
||||
color: #9bb8da;
|
||||
font-size: 13px;
|
||||
border-top: 1px solid rgba(255,255,255,0.1);
|
||||
}
|
||||
|
||||
.footer a {
|
||||
color: white;
|
||||
text-decoration: none;
|
||||
}
|
||||
|
||||
/* Лоадер */
|
||||
.loader {
|
||||
text-align: center;
|
||||
padding: 30px;
|
||||
color: white;
|
||||
}
|
||||
|
||||
.spinner {
|
||||
animation: spin 1s linear infinite;
|
||||
display: inline-block;
|
||||
margin-right: 8px;
|
||||
}
|
||||
|
||||
@keyframes spin {
|
||||
from { transform: rotate(0deg); }
|
||||
to { transform: rotate(360deg); }
|
||||
}
|
||||
|
||||
/* Уведомления */
|
||||
.notification {
|
||||
position: fixed;
|
||||
top: 20px;
|
||||
right: 20px;
|
||||
left: 20px;
|
||||
background: white;
|
||||
border-radius: 30px;
|
||||
padding: 15px 20px;
|
||||
box-shadow: 0 10px 30px rgba(0,0,0,0.3);
|
||||
display: none;
|
||||
z-index: 2000;
|
||||
animation: slideDown 0.3s;
|
||||
}
|
||||
|
||||
@keyframes slideDown {
|
||||
from { transform: translateY(-100%); opacity: 0; }
|
||||
to { transform: translateY(0); opacity: 1; }
|
||||
}
|
||||
|
||||
.notification.success {
|
||||
background: #10b981;
|
||||
color: white;
|
||||
}
|
||||
|
||||
.notification.error {
|
||||
background: #ef4444;
|
||||
color: white;
|
||||
}
|
||||
|
||||
.notification.info {
|
||||
background: #3b82f6;
|
||||
color: white;
|
||||
}
|
||||
|
||||
/* Стили для авторизованных */
|
||||
.admin-badge {
|
||||
background: #f59e0b;
|
||||
color: white;
|
||||
padding: 2px 6px;
|
||||
border-radius: 12px;
|
||||
font-size: 10px;
|
||||
margin-left: 4px;
|
||||
}
|
||||
|
||||
.profile-link {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 5px;
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
<div class="container">
|
||||
<!-- Шапка -->
|
||||
<div class="header">
|
||||
<div class="logo">
|
||||
<i class="fas fa-briefcase"></i>
|
||||
<span>Rabota.Today</span>
|
||||
</div>
|
||||
|
||||
<!-- Десктоп навигация -->
|
||||
<div class="nav" id="nav">
|
||||
<a href="/">Главная</a>
|
||||
<a href="/vacancies">Вакансии</a>
|
||||
<a href="/resumes">Резюме</a>
|
||||
<a href="/login" class="login-btn">Войти</a>
|
||||
</div>
|
||||
|
||||
<!-- Мобильное меню -->
|
||||
<div class="mobile-menu">
|
||||
<button class="mobile-menu-btn" onclick="toggleMobileMenu()">
|
||||
<i class="fas fa-bars"></i>
|
||||
</button>
|
||||
<div class="mobile-menu-dropdown" id="mobileMenu">
|
||||
<a href="/">Главная</a>
|
||||
<a href="/vacancies">Вакансии</a>
|
||||
<a href="/resumes">Резюме</a>
|
||||
<a href="/login" class="login-btn">Войти</a>
|
||||
<a href="/register">Регистрация</a>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Герой секция -->
|
||||
<div class="hero">
|
||||
<h1>Найди работу мечты</h1>
|
||||
<p>Тысячи вакансий и резюме на одной платформе</p>
|
||||
<div class="hero-buttons">
|
||||
<a href="/register" class="btn btn-primary">
|
||||
<i class="fas fa-rocket"></i> Начать карьеру
|
||||
</a>
|
||||
<a href="/vacancies" class="btn btn-secondary">
|
||||
<i class="fas fa-search"></i> Смотреть вакансии
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Статистика -->
|
||||
<div class="stats">
|
||||
<div class="stat-card" onclick="window.location.href='/vacancies'">
|
||||
<i class="fas fa-briefcase"></i>
|
||||
<div class="stat-number" id="vacanciesCount">0</div>
|
||||
<div class="stat-label">вакансий</div>
|
||||
</div>
|
||||
<div class="stat-card" onclick="window.location.href='/resumes'">
|
||||
<i class="fas fa-users"></i>
|
||||
<div class="stat-number" id="resumesCount">0</div>
|
||||
<div class="stat-label">резюме</div>
|
||||
</div>
|
||||
<div class="stat-card" onclick="window.location.href='/companies'">
|
||||
<i class="fas fa-building"></i>
|
||||
<div class="stat-number" id="companiesCount">0</div>
|
||||
<div class="stat-label">компаний</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Последние вакансии -->
|
||||
<div class="section-title">
|
||||
<h2><i class="fas fa-fire"></i> Горячие вакансии</h2>
|
||||
<a href="/vacancies">Все →</a>
|
||||
</div>
|
||||
<div class="cards-grid" id="recentVacancies">
|
||||
<div class="loader"><i class="fas fa-spinner fa-spin"></i> Загрузка...</div>
|
||||
</div>
|
||||
|
||||
<!-- Последние резюме -->
|
||||
<div class="section-title">
|
||||
<h2><i class="fas fa-file-alt"></i> Новые резюме</h2>
|
||||
<a href="/resumes">Все →</a>
|
||||
</div>
|
||||
<div class="cards-grid" id="recentResumes">
|
||||
<div class="loader"><i class="fas fa-spinner fa-spin"></i> Загрузка...</div>
|
||||
</div>
|
||||
|
||||
<!-- Преимущества -->
|
||||
<div class="features">
|
||||
<h2>Почему выбирают нас</h2>
|
||||
<div class="features-grid">
|
||||
<div class="feature-item">
|
||||
<i class="fas fa-bolt"></i>
|
||||
<h3>Быстро</h3>
|
||||
<p>Мгновенный отклик</p>
|
||||
</div>
|
||||
<div class="feature-item">
|
||||
<i class="fas fa-shield-alt"></i>
|
||||
<h3>Безопасно</h3>
|
||||
<p>Ваши данные под защитой</p>
|
||||
</div>
|
||||
<div class="feature-item">
|
||||
<i class="fas fa-mobile-alt"></i>
|
||||
<h3>Удобно</h3>
|
||||
<p>Работает на всех устройствах</p>
|
||||
</div>
|
||||
<div class="feature-item">
|
||||
<i class="fas fa-heart"></i>
|
||||
<h3>Бесплатно</h3>
|
||||
<p>Для соискателей</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Призыв к действию -->
|
||||
<div class="cta">
|
||||
<h2>Готовы начать?</h2>
|
||||
<p>Присоединяйтесь к <span id="totalUsers">тысячам</span> пользователей</p>
|
||||
<a href="/register" class="btn btn-primary">
|
||||
<i class="fas fa-user-plus"></i> Создать аккаунт
|
||||
</a>
|
||||
</div>
|
||||
|
||||
<!-- Подвал -->
|
||||
<div class="footer">
|
||||
© 2024 Rabota.Today - Ярмарка вакансий
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Уведомления -->
|
||||
<div class="notification" id="notification"></div>
|
||||
|
||||
<script>
|
||||
const API_BASE_URL = window.location.protocol + '//' + window.location.host + '/api';
|
||||
let currentUser = null;
|
||||
|
||||
// ========== ФУНКЦИИ ДЛЯ РАБОТЫ С ЧИСЛАМИ ==========
|
||||
function formatNumber(num) {
|
||||
if (num >= 1000000) {
|
||||
return (num / 1000000).toFixed(1) + 'M';
|
||||
}
|
||||
if (num >= 1000) {
|
||||
return (num / 1000).toFixed(1) + 'K';
|
||||
}
|
||||
return num.toString();
|
||||
}
|
||||
|
||||
function animateNumber(element, finalNumber, duration = 1000) {
|
||||
const startNumber = parseInt(element.textContent) || 0;
|
||||
const startTime = performance.now();
|
||||
|
||||
const updateNumber = (currentTime) => {
|
||||
const elapsed = currentTime - startTime;
|
||||
const progress = Math.min(elapsed / duration, 1);
|
||||
const easeOutQuart = 1 - Math.pow(1 - progress, 3);
|
||||
const currentNumber = Math.floor(startNumber + (finalNumber - startNumber) * easeOutQuart);
|
||||
|
||||
element.textContent = formatNumber(currentNumber);
|
||||
|
||||
if (progress < 1) {
|
||||
requestAnimationFrame(updateNumber);
|
||||
} else {
|
||||
element.textContent = formatNumber(finalNumber);
|
||||
}
|
||||
};
|
||||
|
||||
requestAnimationFrame(updateNumber);
|
||||
}
|
||||
|
||||
// ========== ФУНКЦИИ ДЛЯ МОБИЛЬНОГО МЕНЮ ==========
|
||||
function toggleMobileMenu() {
|
||||
const menu = document.getElementById('mobileMenu');
|
||||
menu.classList.toggle('active');
|
||||
}
|
||||
|
||||
document.addEventListener('click', function(event) {
|
||||
const menu = document.getElementById('mobileMenu');
|
||||
const btn = document.querySelector('.mobile-menu-btn');
|
||||
|
||||
if (btn && !btn.contains(event.target) && !menu.contains(event.target)) {
|
||||
menu.classList.remove('active');
|
||||
}
|
||||
});
|
||||
|
||||
// ========== ФУНКЦИИ ДЛЯ УВЕДОМЛЕНИЙ ==========
|
||||
function showNotification(message, type = 'info') {
|
||||
const notification = document.getElementById('notification');
|
||||
notification.className = `notification ${type}`;
|
||||
notification.innerHTML = message;
|
||||
notification.style.display = 'block';
|
||||
|
||||
setTimeout(() => {
|
||||
notification.style.display = 'none';
|
||||
}, 3000);
|
||||
}
|
||||
|
||||
// ========== ФУНКЦИИ ДЛЯ АВТОРИЗАЦИИ ==========
|
||||
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();
|
||||
updateNavForAuth();
|
||||
} else {
|
||||
localStorage.removeItem('accessToken');
|
||||
}
|
||||
} catch (error) {
|
||||
console.error('Auth check error:', error);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
function updateNavForAuth() {
|
||||
if (!currentUser) return;
|
||||
|
||||
const nav = document.querySelector('.nav');
|
||||
const mobileMenu = document.getElementById('mobileMenu');
|
||||
|
||||
const firstName = currentUser.full_name.split(' ')[0];
|
||||
const adminBadge = currentUser.is_admin ? '<span class="admin-badge">Admin</span>' : '';
|
||||
|
||||
// Обновляем десктоп навигацию
|
||||
nav.innerHTML = `
|
||||
<a href="/">Главная</a>
|
||||
<a href="/vacancies">Вакансии</a>
|
||||
<a href="/resumes">Резюме</a>
|
||||
<a href="/profile" class="login-btn profile-link">
|
||||
<i class="fas fa-user-circle"></i> ${firstName} ${adminBadge}
|
||||
</a>
|
||||
`;
|
||||
|
||||
// Обновляем мобильное меню
|
||||
mobileMenu.innerHTML = `
|
||||
<a href="/">Главная</a>
|
||||
<a href="/vacancies">Вакансии</a>
|
||||
<a href="/resumes">Резюме</a>
|
||||
<a href="/favorites">Избранное</a>
|
||||
<a href="/applications">Отклики</a>
|
||||
<a href="/profile" class="login-btn profile-link">
|
||||
<i class="fas fa-user-circle"></i> ${firstName} ${adminBadge}
|
||||
</a>
|
||||
<a href="#" onclick="logout()">Выйти</a>
|
||||
`;
|
||||
}
|
||||
|
||||
function logout() {
|
||||
localStorage.removeItem('accessToken');
|
||||
window.location.reload();
|
||||
}
|
||||
|
||||
// ========== ЗАГРУЗКА СТАТИСТИКИ ==========
|
||||
async function loadStats() {
|
||||
try {
|
||||
// Пробуем загрузить через публичную статистику
|
||||
const statsResponse = await fetch(`${API_BASE_URL}/public/stats`);
|
||||
|
||||
if (statsResponse.ok) {
|
||||
const stats = await statsResponse.json();
|
||||
|
||||
// Анимируем цифры
|
||||
animateNumber(document.getElementById('vacanciesCount'), stats.active_vacancies || 1234);
|
||||
animateNumber(document.getElementById('resumesCount'), stats.total_resumes || 5678);
|
||||
animateNumber(document.getElementById('companiesCount'), stats.total_employers || 500);
|
||||
|
||||
// Обновляем текст в CTA секции
|
||||
if (stats.total_users) {
|
||||
const totalUsersEl = document.getElementById('totalUsers');
|
||||
if (totalUsersEl) {
|
||||
totalUsersEl.textContent = formatNumber(stats.total_users) + ' ' +
|
||||
(stats.total_users > 1000 ? 'тысяч' : '');
|
||||
}
|
||||
}
|
||||
|
||||
console.log('✅ Статистика загружена:', stats);
|
||||
|
||||
} else {
|
||||
// Если публичная статистика не работает, используем отдельные запросы
|
||||
console.log('📊 Используем отдельные запросы для статистики');
|
||||
|
||||
const [vacResponse, resResponse] = await Promise.all([
|
||||
fetch(`${API_BASE_URL}/vacancies/all?page=1&limit=1`),
|
||||
fetch(`${API_BASE_URL}/resumes/all?page=1&limit=1`)
|
||||
]);
|
||||
|
||||
const vacData = await vacResponse.json();
|
||||
const resData = await resResponse.json();
|
||||
|
||||
animateNumber(document.getElementById('vacanciesCount'), vacData.total || 1234);
|
||||
animateNumber(document.getElementById('resumesCount'), resData.total || 5678);
|
||||
document.getElementById('companiesCount').textContent = '500+';
|
||||
}
|
||||
|
||||
} catch (error) {
|
||||
console.error('❌ Ошибка загрузки статистики:', error);
|
||||
// Заглушки на случай ошибки
|
||||
document.getElementById('vacanciesCount').textContent = '1,234';
|
||||
document.getElementById('resumesCount').textContent = '5,678';
|
||||
document.getElementById('companiesCount').textContent = '500+';
|
||||
}
|
||||
}
|
||||
|
||||
// ========== ЗАГРУЗКА ПОСЛЕДНИХ ВАКАНСИЙ ==========
|
||||
async function loadRecentVacancies() {
|
||||
try {
|
||||
const response = await fetch(`${API_BASE_URL}/vacancies/all?page=1&limit=3`);
|
||||
const data = await response.json();
|
||||
|
||||
const container = document.getElementById('recentVacancies');
|
||||
|
||||
if (!data.vacancies || data.vacancies.length === 0) {
|
||||
container.innerHTML = '<div class="loader">Нет вакансий</div>';
|
||||
return;
|
||||
}
|
||||
|
||||
container.innerHTML = data.vacancies.map(v => `
|
||||
<div class="card" onclick="window.location.href='/vacancy/${v.id}'">
|
||||
<div class="card-title">${escapeHtml(v.title)}</div>
|
||||
<div class="card-subtitle">${escapeHtml(v.company_name || 'Компания')}</div>
|
||||
<div class="card-salary">${escapeHtml(v.salary || 'з/п не указана')}</div>
|
||||
<div class="card-tags">
|
||||
${(v.tags || []).map(t => `<span class="tag">${escapeHtml(t.name)}</span>`).join('')}
|
||||
</div>
|
||||
<div class="card-footer">
|
||||
<span><i class="fas fa-eye"></i> ${v.views || 0}</span>
|
||||
<span><i class="fas fa-calendar"></i> ${new Date(v.created_at).toLocaleDateString()}</span>
|
||||
</div>
|
||||
</div>
|
||||
`).join('');
|
||||
|
||||
} catch (error) {
|
||||
console.error('Error loading vacancies:', error);
|
||||
document.getElementById('recentVacancies').innerHTML = '<div class="loader">Ошибка загрузки</div>';
|
||||
}
|
||||
}
|
||||
|
||||
// ========== ЗАГРУЗКА ПОСЛЕДНИХ РЕЗЮМЕ ==========
|
||||
async function loadRecentResumes() {
|
||||
try {
|
||||
const response = await fetch(`${API_BASE_URL}/resumes/all?page=1&limit=3`);
|
||||
const data = await response.json();
|
||||
|
||||
const container = document.getElementById('recentResumes');
|
||||
|
||||
if (!data.resumes || data.resumes.length === 0) {
|
||||
container.innerHTML = '<div class="loader">Нет резюме</div>';
|
||||
return;
|
||||
}
|
||||
|
||||
container.innerHTML = data.resumes.map(r => `
|
||||
<div class="card" onclick="window.location.href='/resume/${r.id}'">
|
||||
<div class="card-title">${escapeHtml(r.full_name)}</div>
|
||||
<div class="card-subtitle">${escapeHtml(r.desired_position || 'Должность не указана')}</div>
|
||||
<div class="card-salary">${escapeHtml(r.desired_salary || 'з/п не указана')}</div>
|
||||
<div class="card-tags">
|
||||
${(r.tags || []).map(t => `<span class="tag">${escapeHtml(t.name)}</span>`).join('')}
|
||||
</div>
|
||||
<div class="card-footer">
|
||||
<span><i class="fas fa-briefcase"></i> ${r.experience_count || 0} мест</span>
|
||||
<span><i class="fas fa-eye"></i> ${r.views || 0}</span>
|
||||
</div>
|
||||
</div>
|
||||
`).join('');
|
||||
|
||||
} catch (error) {
|
||||
console.error('Error loading resumes:', error);
|
||||
document.getElementById('recentResumes').innerHTML = '<div class="loader">Ошибка загрузки</div>';
|
||||
}
|
||||
}
|
||||
|
||||
// ========== ЭКРАНИРОВАНИЕ HTML ==========
|
||||
function escapeHtml(unsafe) {
|
||||
if (!unsafe) return '';
|
||||
return unsafe.toString()
|
||||
.replace(/&/g, "&")
|
||||
.replace(/</g, "<")
|
||||
.replace(/>/g, ">")
|
||||
.replace(/"/g, """)
|
||||
.replace(/'/g, "'");
|
||||
}
|
||||
|
||||
// ========== АВТООБНОВЛЕНИЕ ==========
|
||||
function startAutoRefresh() {
|
||||
// Обновляем статистику каждые 30 секунд
|
||||
setInterval(() => {
|
||||
loadStats();
|
||||
loadRecentVacancies();
|
||||
loadRecentResumes();
|
||||
}, 30000);
|
||||
}
|
||||
|
||||
// ========== ИНИЦИАЛИЗАЦИЯ ==========
|
||||
window.addEventListener('load', async () => {
|
||||
console.log('🚀 Мобильная главная страница загружена');
|
||||
|
||||
// Проверяем авторизацию
|
||||
await checkAuth();
|
||||
|
||||
// Загружаем данные
|
||||
await Promise.all([
|
||||
loadStats(),
|
||||
loadRecentVacancies(),
|
||||
loadRecentResumes()
|
||||
]);
|
||||
|
||||
// Запускаем автообновление
|
||||
startAutoRefresh();
|
||||
});
|
||||
</script>
|
||||
</body>
|
||||
</html>
|
||||
@@ -2,321 +2,288 @@
|
||||
<html lang="ru">
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=yes">
|
||||
<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>
|
||||
/* Аналогичные мобильные стили как в register.html */
|
||||
* {
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
box-sizing: border-box;
|
||||
font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
|
||||
font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif;
|
||||
}
|
||||
|
||||
body {
|
||||
background: linear-gradient(145deg, #eef5fa 0%, #e0eaf5 100%);
|
||||
background: linear-gradient(145deg, #0b1c34 0%, #1a3650 100%);
|
||||
min-height: 100vh;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
padding: 20px;
|
||||
padding: 10px;
|
||||
}
|
||||
|
||||
.auth-card {
|
||||
max-width: 500px;
|
||||
.login-container {
|
||||
max-width: 400px;
|
||||
width: 100%;
|
||||
background: white;
|
||||
border-radius: 48px;
|
||||
box-shadow: 0 40px 80px -20px rgba(0, 40, 80, 0.4);
|
||||
border-radius: 32px;
|
||||
box-shadow: 0 20px 40px rgba(0, 0, 0, 0.2);
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
.auth-header {
|
||||
.login-header {
|
||||
background: #0b1c34;
|
||||
color: white;
|
||||
padding: 40px;
|
||||
padding: 30px 20px;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.auth-header h1 {
|
||||
font-size: 32px;
|
||||
.login-header h1 {
|
||||
font-size: 28px;
|
||||
font-weight: 700;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
gap: 15px;
|
||||
margin-bottom: 10px;
|
||||
gap: 10px;
|
||||
margin-bottom: 5px;
|
||||
}
|
||||
|
||||
.auth-header h1 i {
|
||||
.login-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;
|
||||
border-radius: 16px;
|
||||
font-size: 24px;
|
||||
}
|
||||
|
||||
.tab {
|
||||
flex: 1;
|
||||
padding: 15px;
|
||||
text-align: center;
|
||||
border-radius: 50px;
|
||||
cursor: pointer;
|
||||
font-weight: 600;
|
||||
transition: 0.2s;
|
||||
.login-header p {
|
||||
color: #9bb8da;
|
||||
font-size: 14px;
|
||||
}
|
||||
|
||||
.tab.active {
|
||||
background: white;
|
||||
color: #0b1c34;
|
||||
box-shadow: 0 4px 10px rgba(0,0,0,0.05);
|
||||
.login-form {
|
||||
padding: 30px 20px;
|
||||
}
|
||||
|
||||
.form-group {
|
||||
margin-bottom: 25px;
|
||||
.input-group {
|
||||
margin-bottom: 20px;
|
||||
}
|
||||
|
||||
.form-group label {
|
||||
.input-group label {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 10px;
|
||||
color: #1f3f60;
|
||||
gap: 5px;
|
||||
font-weight: 600;
|
||||
margin-bottom: 8px;
|
||||
color: #1f3f60;
|
||||
margin-bottom: 5px;
|
||||
font-size: 13px;
|
||||
}
|
||||
|
||||
.form-group label i {
|
||||
.input-group label i {
|
||||
color: #3b82f6;
|
||||
width: 20px;
|
||||
width: 16px;
|
||||
}
|
||||
|
||||
.form-group input {
|
||||
.input-group input {
|
||||
width: 100%;
|
||||
padding: 16px 20px;
|
||||
padding: 14px 16px;
|
||||
background: #f9fcff;
|
||||
border: 2px solid #dee9f5;
|
||||
border-radius: 30px;
|
||||
font-size: 16px;
|
||||
transition: 0.2s;
|
||||
font-size: 15px;
|
||||
-webkit-appearance: none;
|
||||
}
|
||||
|
||||
.form-group input:focus {
|
||||
.input-group input:focus {
|
||||
border-color: #3b82f6;
|
||||
outline: none;
|
||||
box-shadow: 0 0 0 4px rgba(59,130,246,0.15);
|
||||
box-shadow: 0 0 0 3px rgba(59,130,246,0.1);
|
||||
}
|
||||
|
||||
.btn-submit {
|
||||
.btn-login {
|
||||
width: 100%;
|
||||
background: #0f2b4f;
|
||||
color: white;
|
||||
border: none;
|
||||
padding: 18px;
|
||||
border-radius: 50px;
|
||||
padding: 16px;
|
||||
border-radius: 40px;
|
||||
font-weight: 700;
|
||||
font-size: 18px;
|
||||
font-size: 16px;
|
||||
cursor: pointer;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
gap: 10px;
|
||||
transition: 0.2s;
|
||||
gap: 8px;
|
||||
margin: 20px 0 15px;
|
||||
-webkit-tap-highlight-color: transparent;
|
||||
}
|
||||
|
||||
.btn-submit:hover {
|
||||
.btn-login:active {
|
||||
transform: scale(0.98);
|
||||
background: #1b3f6b;
|
||||
}
|
||||
|
||||
.auth-footer {
|
||||
.register-link {
|
||||
text-align: center;
|
||||
margin-top: 25px;
|
||||
color: #4f7092;
|
||||
font-size: 14px;
|
||||
}
|
||||
|
||||
.auth-footer a {
|
||||
color: #0b1c34;
|
||||
font-weight: 600;
|
||||
.register-link a {
|
||||
color: #3b82f6;
|
||||
text-decoration: none;
|
||||
font-weight: 600;
|
||||
padding: 5px;
|
||||
}
|
||||
|
||||
.error-message {
|
||||
background: #fee2e2;
|
||||
color: #b91c1c;
|
||||
padding: 12px 20px;
|
||||
padding: 12px 16px;
|
||||
border-radius: 30px;
|
||||
margin-bottom: 20px;
|
||||
margin-bottom: 15px;
|
||||
display: none;
|
||||
align-items: center;
|
||||
gap: 8px;
|
||||
font-size: 13px;
|
||||
}
|
||||
|
||||
.success-message {
|
||||
background: #e0f2e0;
|
||||
color: #166534;
|
||||
padding: 12px 20px;
|
||||
background: #d1fae5;
|
||||
color: #065f46;
|
||||
padding: 12px 16px;
|
||||
border-radius: 30px;
|
||||
margin-bottom: 20px;
|
||||
margin-bottom: 15px;
|
||||
display: none;
|
||||
align-items: center;
|
||||
gap: 8px;
|
||||
font-size: 13px;
|
||||
}
|
||||
|
||||
.back-link {
|
||||
display: inline-block;
|
||||
margin-top: 20px;
|
||||
.forgot-password {
|
||||
text-align: right;
|
||||
margin: 10px 0;
|
||||
font-size: 13px;
|
||||
}
|
||||
|
||||
.forgot-password a {
|
||||
color: #4f7092;
|
||||
text-decoration: none;
|
||||
}
|
||||
|
||||
.back-link i {
|
||||
margin-right: 5px;
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
<div class="auth-card">
|
||||
<div class="auth-header">
|
||||
<div class="login-container">
|
||||
<div class="login-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 class="login-form">
|
||||
<div id="errorMessage" class="error-message">
|
||||
<i class="fas fa-exclamation-circle"></i>
|
||||
<span id="errorText"></span>
|
||||
</div>
|
||||
|
||||
<div id="errorMessage" class="error-message"></div>
|
||||
<div id="successMessage" class="success-message"></div>
|
||||
<div id="successMessage" class="success-message">
|
||||
<i class="fas fa-check-circle"></i>
|
||||
<span id="successText"></span>
|
||||
</div>
|
||||
|
||||
<!-- Форма входа -->
|
||||
<form id="loginForm" onsubmit="handleLogin(event)">
|
||||
<div class="form-group">
|
||||
<div class="input-group">
|
||||
<label><i class="fas fa-envelope"></i> Email</label>
|
||||
<input type="email" id="loginEmail" placeholder="ivan@example.com" required>
|
||||
<input type="email" id="email" placeholder="ivan@example.com" required>
|
||||
</div>
|
||||
|
||||
<div class="form-group">
|
||||
<div class="input-group">
|
||||
<label><i class="fas fa-lock"></i> Пароль</label>
|
||||
<input type="password" id="loginPassword" placeholder="Введите пароль" required>
|
||||
<input type="password" id="password" placeholder="Введите пароль" required>
|
||||
</div>
|
||||
|
||||
<button type="submit" class="btn-submit">
|
||||
<i class="fas fa-sign-in-alt"></i> Войти
|
||||
<div class="forgot-password">
|
||||
<a href="#">Забыли пароль?</a>
|
||||
</div>
|
||||
|
||||
<button type="submit" class="btn-login" id="loginBtn">
|
||||
<span>Войти</span>
|
||||
<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 class="register-link">
|
||||
Нет аккаунта?
|
||||
<a href="/register">Зарегистрироваться</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';
|
||||
}
|
||||
}
|
||||
const currentProtocol = window.location.protocol; // http: или https:
|
||||
const currentHost = window.location.host; // yarmarka.rabota.today или IP:порт
|
||||
let API_BASE_URL = `${currentProtocol}//${currentHost}/api`;
|
||||
let isSubmitting = false;
|
||||
|
||||
function showError(message) {
|
||||
const errorEl = document.getElementById('errorMessage');
|
||||
errorEl.textContent = message;
|
||||
errorEl.style.display = 'block';
|
||||
const errorDiv = document.getElementById('errorMessage');
|
||||
const errorText = document.getElementById('errorText');
|
||||
errorText.textContent = message;
|
||||
errorDiv.style.display = 'flex';
|
||||
|
||||
setTimeout(() => {
|
||||
errorEl.style.display = 'none';
|
||||
}, 5000);
|
||||
errorDiv.style.display = 'none';
|
||||
}, 4000);
|
||||
}
|
||||
|
||||
function showSuccess(message) {
|
||||
const successEl = document.getElementById('successMessage');
|
||||
successEl.textContent = message;
|
||||
successEl.style.display = 'block';
|
||||
setTimeout(() => {
|
||||
successEl.style.display = 'none';
|
||||
}, 3000);
|
||||
const successDiv = document.getElementById('successMessage');
|
||||
const successText = document.getElementById('successText');
|
||||
successText.textContent = message;
|
||||
successDiv.style.display = 'flex';
|
||||
}
|
||||
|
||||
function setLoading(isLoading) {
|
||||
const btn = document.getElementById('loginBtn');
|
||||
if (isLoading) {
|
||||
btn.innerHTML = '<i class="fas fa-spinner fa-spin"></i> Вход...';
|
||||
btn.disabled = true;
|
||||
isSubmitting = true;
|
||||
} else {
|
||||
btn.innerHTML = '<span>Войти</span><i class="fas fa-sign-in-alt"></i>';
|
||||
btn.disabled = false;
|
||||
isSubmitting = false;
|
||||
}
|
||||
}
|
||||
|
||||
async function handleLogin(event) {
|
||||
event.preventDefault();
|
||||
|
||||
const email = document.getElementById('loginEmail').value;
|
||||
const password = document.getElementById('loginPassword').value;
|
||||
if (isSubmitting) return;
|
||||
|
||||
const email = document.getElementById('email').value.trim();
|
||||
const password = document.getElementById('password').value;
|
||||
|
||||
if (!email || !password) {
|
||||
showError('Введите email и пароль');
|
||||
return;
|
||||
}
|
||||
|
||||
setLoading(true);
|
||||
|
||||
try {
|
||||
const response = await fetch(`${API_BASE_URL}/login`, {
|
||||
method: 'POST',
|
||||
headers: {
|
||||
'Content-Type': 'application/json',
|
||||
'Accept': 'application/json',
|
||||
'X-Requested-With': 'XMLHttpRequest'
|
||||
},
|
||||
body: JSON.stringify({ email, password })
|
||||
body: JSON.stringify({ email, password }),
|
||||
credentials: 'include'
|
||||
});
|
||||
|
||||
const data = await response.json();
|
||||
@@ -325,80 +292,26 @@
|
||||
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('Вход выполнен успешно!');
|
||||
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);
|
||||
}, 1500);
|
||||
|
||||
} catch (error) {
|
||||
console.error('Login error:', error);
|
||||
showError(error.message);
|
||||
setLoading(false);
|
||||
}
|
||||
}
|
||||
|
||||
// Проверяем, может пользователь уже залогинен
|
||||
// Проверка существующей сессии
|
||||
if (localStorage.getItem('accessToken')) {
|
||||
window.location.href = '/profile';
|
||||
}
|
||||
|
||||
556
templates/mobile_debug.html
Normal file
556
templates/mobile_debug.html
Normal file
@@ -0,0 +1,556 @@
|
||||
<!DOCTYPE html>
|
||||
<html lang="ru">
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no">
|
||||
<title>Mobile Debug - Rabota.Today</title>
|
||||
<style>
|
||||
* {
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
box-sizing: border-box;
|
||||
font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif;
|
||||
}
|
||||
|
||||
body {
|
||||
background: #0b1c34;
|
||||
padding: 20px;
|
||||
color: #333;
|
||||
}
|
||||
|
||||
.container {
|
||||
max-width: 500px;
|
||||
margin: 0 auto;
|
||||
}
|
||||
|
||||
.card {
|
||||
background: white;
|
||||
border-radius: 24px;
|
||||
padding: 25px;
|
||||
margin-bottom: 20px;
|
||||
box-shadow: 0 10px 30px rgba(0,0,0,0.2);
|
||||
}
|
||||
|
||||
h1 {
|
||||
font-size: 24px;
|
||||
margin-bottom: 20px;
|
||||
color: #0b1c34;
|
||||
}
|
||||
|
||||
h2 {
|
||||
font-size: 18px;
|
||||
margin-bottom: 15px;
|
||||
color: #1f3f60;
|
||||
}
|
||||
|
||||
.info-row {
|
||||
background: #f5f9ff;
|
||||
padding: 12px;
|
||||
border-radius: 12px;
|
||||
margin-bottom: 10px;
|
||||
font-size: 14px;
|
||||
word-break: break-all;
|
||||
}
|
||||
|
||||
.info-label {
|
||||
font-weight: 600;
|
||||
color: #1f3f60;
|
||||
margin-bottom: 4px;
|
||||
}
|
||||
|
||||
.info-value {
|
||||
color: #333;
|
||||
font-family: monospace;
|
||||
}
|
||||
|
||||
.success {
|
||||
color: #10b981;
|
||||
font-weight: 600;
|
||||
}
|
||||
|
||||
.error {
|
||||
color: #ef4444;
|
||||
font-weight: 600;
|
||||
}
|
||||
|
||||
.warning {
|
||||
color: #f59e0b;
|
||||
font-weight: 600;
|
||||
}
|
||||
|
||||
button {
|
||||
background: #0b1c34;
|
||||
color: white;
|
||||
border: none;
|
||||
padding: 14px 20px;
|
||||
border-radius: 40px;
|
||||
font-weight: 600;
|
||||
font-size: 16px;
|
||||
width: 100%;
|
||||
margin: 10px 0;
|
||||
cursor: pointer;
|
||||
transition: 0.2s;
|
||||
}
|
||||
|
||||
button:active {
|
||||
transform: scale(0.98);
|
||||
background: #1b3f6b;
|
||||
}
|
||||
|
||||
button.secondary {
|
||||
background: #e5e7eb;
|
||||
color: #1f3f60;
|
||||
}
|
||||
|
||||
.test-result {
|
||||
margin-top: 15px;
|
||||
padding: 15px;
|
||||
background: #f5f5f5;
|
||||
border-radius: 16px;
|
||||
font-size: 14px;
|
||||
max-height: 300px;
|
||||
overflow-y: auto;
|
||||
display: none;
|
||||
}
|
||||
|
||||
.test-result pre {
|
||||
white-space: pre-wrap;
|
||||
word-wrap: break-word;
|
||||
font-family: monospace;
|
||||
font-size: 12px;
|
||||
}
|
||||
|
||||
.loader {
|
||||
display: inline-block;
|
||||
width: 20px;
|
||||
height: 20px;
|
||||
border: 3px solid #f3f3f3;
|
||||
border-top: 3px solid #0b1c34;
|
||||
border-radius: 50%;
|
||||
animation: spin 1s linear infinite;
|
||||
margin-right: 10px;
|
||||
}
|
||||
|
||||
@keyframes spin {
|
||||
0% { transform: rotate(0deg); }
|
||||
100% { transform: rotate(360deg); }
|
||||
}
|
||||
|
||||
.flex {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
gap: 10px;
|
||||
}
|
||||
|
||||
.ip-input {
|
||||
width: 100%;
|
||||
padding: 12px;
|
||||
border: 2px solid #dee9f5;
|
||||
border-radius: 30px;
|
||||
font-size: 16px;
|
||||
margin-bottom: 10px;
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
<div class="container">
|
||||
<!-- Информация об устройстве -->
|
||||
<div class="card">
|
||||
<h1>📱 Mobile Debug Tool</h1>
|
||||
|
||||
<div class="info-row">
|
||||
<div class="info-label">User Agent:</div>
|
||||
<div class="info-value" id="userAgent"></div>
|
||||
</div>
|
||||
|
||||
<div class="info-row">
|
||||
<div class="info-label">Платформа:</div>
|
||||
<div class="info-value" id="platform"></div>
|
||||
</div>
|
||||
|
||||
<div class="info-row">
|
||||
<div class="info-label">Язык:</div>
|
||||
<div class="info-value" id="language"></div>
|
||||
</div>
|
||||
|
||||
<div class="info-row">
|
||||
<div class="info-label">Размер экрана:</div>
|
||||
<div class="info-value" id="screenSize"></div>
|
||||
</div>
|
||||
|
||||
<div class="info-row">
|
||||
<div class="info-label">Онлайн:</div>
|
||||
<div class="info-value" id="online"></div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Настройки подключения -->
|
||||
<div class="card">
|
||||
<h2>🔧 Настройки подключения</h2>
|
||||
|
||||
<input type="text" class="ip-input" id="serverIp" placeholder="IP сервера (например, 192.168.1.100)">
|
||||
<div class="info-row">
|
||||
<div class="info-label">Текущий URL:</div>
|
||||
<div class="info-value" id="currentUrl"></div>
|
||||
</div>
|
||||
|
||||
<div class="flex">
|
||||
<button onclick="testConnection()" id="testBtn">🔍 Проверить соединение</button>
|
||||
<button class="secondary" onclick="copyInfo()">📋 Копировать</button>
|
||||
</div>
|
||||
|
||||
<div id="connectionResult" class="test-result"></div>
|
||||
</div>
|
||||
|
||||
<!-- Тесты API -->
|
||||
<div class="card">
|
||||
<h2>🧪 Тесты API</h2>
|
||||
|
||||
<button onclick="testHealth()">🏥 Проверить Health</button>
|
||||
<div id="healthResult" class="test-result"></div>
|
||||
|
||||
<button onclick="testRegister()">📝 Тест регистрации</button>
|
||||
<div id="registerResult" class="test-result"></div>
|
||||
|
||||
<button onclick="testLogin()">🔑 Тест входа</button>
|
||||
<div id="loginResult" class="test-result"></div>
|
||||
|
||||
<button onclick="testCORS()">🌐 Проверить CORS</button>
|
||||
<div id="corsResult" class="test-result"></div>
|
||||
</div>
|
||||
|
||||
<!-- Логи ошибок -->
|
||||
<div class="card">
|
||||
<h2>⚠️ Логи ошибок</h2>
|
||||
<div id="errorLogs" class="info-row" style="min-height: 100px; max-height: 200px; overflow-y: auto;">
|
||||
Ошибок нет
|
||||
</div>
|
||||
<button class="secondary" onclick="clearLogs()">Очистить логи</button>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<script>
|
||||
// Конфигурация
|
||||
let serverIp = localStorage.getItem('serverIp') || window.location.hostname;
|
||||
document.getElementById('serverIp').value = serverIp;
|
||||
|
||||
// Логирование ошибок
|
||||
let errorLogs = [];
|
||||
|
||||
function logError(message, data = null) {
|
||||
const timestamp = new Date().toLocaleTimeString();
|
||||
const logEntry = `[${timestamp}] ${message} ${data ? JSON.stringify(data) : ''}`;
|
||||
errorLogs.push(logEntry);
|
||||
|
||||
const logsDiv = document.getElementById('errorLogs');
|
||||
logsDiv.innerHTML = errorLogs.map(log => `<div>${log}</div>`).join('');
|
||||
console.error(logEntry);
|
||||
}
|
||||
|
||||
function clearLogs() {
|
||||
errorLogs = [];
|
||||
document.getElementById('errorLogs').innerHTML = 'Ошибок нет';
|
||||
}
|
||||
|
||||
// Информация об устройстве
|
||||
function updateDeviceInfo() {
|
||||
document.getElementById('userAgent').textContent = navigator.userAgent;
|
||||
document.getElementById('platform').textContent = navigator.platform;
|
||||
document.getElementById('language').textContent = navigator.language;
|
||||
document.getElementById('screenSize').textContent = `${window.screen.width}x${window.screen.height}`;
|
||||
document.getElementById('online').textContent = navigator.onLine ? '✅ Да' : '❌ Нет';
|
||||
document.getElementById('currentUrl').textContent = window.location.href;
|
||||
}
|
||||
|
||||
updateDeviceInfo();
|
||||
|
||||
// Сохранение IP
|
||||
document.getElementById('serverIp').addEventListener('change', function(e) {
|
||||
serverIp = e.target.value;
|
||||
localStorage.setItem('serverIp', serverIp);
|
||||
});
|
||||
|
||||
// Копирование информации
|
||||
function copyInfo() {
|
||||
const info = {
|
||||
userAgent: navigator.userAgent,
|
||||
platform: navigator.platform,
|
||||
language: navigator.language,
|
||||
screenSize: `${window.screen.width}x${window.screen.height}`,
|
||||
online: navigator.onLine,
|
||||
url: window.location.href,
|
||||
serverIp: serverIp
|
||||
};
|
||||
|
||||
navigator.clipboard.writeText(JSON.stringify(info, null, 2))
|
||||
.then(() => alert('Информация скопирована!'))
|
||||
.catch(() => alert('Ошибка копирования'));
|
||||
}
|
||||
|
||||
// Проверка соединения
|
||||
async function testConnection() {
|
||||
const btn = document.getElementById('testBtn');
|
||||
const resultDiv = document.getElementById('connectionResult');
|
||||
|
||||
btn.disabled = true;
|
||||
btn.innerHTML = '<div class="loader"></div> Проверка...';
|
||||
resultDiv.style.display = 'block';
|
||||
resultDiv.innerHTML = '<div class="flex"><div class="loader"></div> Проверка соединения...</div>';
|
||||
|
||||
try {
|
||||
// Пробуем разные варианты подключения
|
||||
const urls = [
|
||||
`http://${serverIp}:8000/api/health`,
|
||||
`http://${serverIp}:8000/health`,
|
||||
`http://${window.location.hostname}:8000/api/health`,
|
||||
`http://127.0.0.1:8000/api/health`,
|
||||
`http://localhost:8000/api/health`
|
||||
];
|
||||
|
||||
let success = false;
|
||||
let results = [];
|
||||
|
||||
for (const url of urls) {
|
||||
try {
|
||||
const start = Date.now();
|
||||
const response = await fetch(url, {
|
||||
mode: 'no-cors',
|
||||
headers: { 'Accept': 'application/json' }
|
||||
});
|
||||
const time = Date.now() - start;
|
||||
|
||||
results.push({
|
||||
url,
|
||||
status: response.status,
|
||||
time: `${time}ms`,
|
||||
ok: response.ok
|
||||
});
|
||||
|
||||
if (response.ok) {
|
||||
success = true;
|
||||
}
|
||||
} catch (e) {
|
||||
results.push({
|
||||
url,
|
||||
error: e.message,
|
||||
time: 'failed'
|
||||
});
|
||||
}
|
||||
}
|
||||
|
||||
let html = '<h3>Результаты проверки:</h3>';
|
||||
results.forEach(r => {
|
||||
html += `<div style="margin: 10px 0; padding: 8px; background: ${r.ok ? '#d1fae5' : '#fee2e2'}; border-radius: 8px;">`;
|
||||
html += `<div><strong>URL:</strong> ${r.url}</div>`;
|
||||
if (r.status) html += `<div><strong>Статус:</strong> ${r.status}</div>`;
|
||||
if (r.time) html += `<div><strong>Время:</strong> ${r.time}</div>`;
|
||||
if (r.error) html += `<div><strong>Ошибка:</strong> ${r.error}</div>`;
|
||||
if (r.ok) html += `<div class="success">✅ Доступно</div>`;
|
||||
else html += `<div class="error">❌ Недоступно</div>`;
|
||||
html += '</div>';
|
||||
});
|
||||
|
||||
html += `<div style="margin-top: 15px; font-weight: 600;">
|
||||
Общий статус: ${success ? '✅ Сервер доступен' : '❌ Сервер недоступен'}
|
||||
</div>`;
|
||||
|
||||
resultDiv.innerHTML = html;
|
||||
|
||||
} catch (error) {
|
||||
logError('Connection test error', error);
|
||||
resultDiv.innerHTML = `<div class="error">❌ Ошибка: ${error.message}</div>`;
|
||||
}
|
||||
|
||||
btn.disabled = false;
|
||||
btn.innerHTML = '🔍 Проверить соединение';
|
||||
}
|
||||
|
||||
// Тест Health
|
||||
async function testHealth() {
|
||||
const resultDiv = document.getElementById('healthResult');
|
||||
resultDiv.style.display = 'block';
|
||||
resultDiv.innerHTML = '<div class="flex"><div class="loader"></div> Проверка...</div>';
|
||||
|
||||
try {
|
||||
const url = `http://${serverIp}:8000/api/health`;
|
||||
const response = await fetch(url, {
|
||||
headers: { 'Accept': 'application/json' }
|
||||
});
|
||||
|
||||
const data = await response.json();
|
||||
|
||||
resultDiv.innerHTML = `
|
||||
<div class="success">✅ Успешно!</div>
|
||||
<pre>${JSON.stringify(data, null, 2)}</pre>
|
||||
`;
|
||||
|
||||
} catch (error) {
|
||||
logError('Health test error', error);
|
||||
resultDiv.innerHTML = `
|
||||
<div class="error">❌ Ошибка: ${error.message}</div>
|
||||
<div style="margin-top: 10px;">
|
||||
<strong>Проверьте:</strong>
|
||||
<ul>
|
||||
<li>Правильный ли IP сервера? (${serverIp})</li>
|
||||
<li>Сервер запущен? (python main.py)</li>
|
||||
<li>Оба устройства в одной WiFi сети?</li>
|
||||
<li>Firewall не блокирует порт 8000?</li>
|
||||
</ul>
|
||||
</div>
|
||||
`;
|
||||
}
|
||||
}
|
||||
|
||||
// Тест CORS
|
||||
async function testCORS() {
|
||||
const resultDiv = document.getElementById('corsResult');
|
||||
resultDiv.style.display = 'block';
|
||||
resultDiv.innerHTML = '<div class="flex"><div class="loader"></div> Проверка CORS...</div>';
|
||||
|
||||
try {
|
||||
const url = `http://${serverIp}:8000/api/health`;
|
||||
|
||||
// Пробуем разные режимы
|
||||
const tests = [
|
||||
{ mode: 'cors', credentials: 'omit' },
|
||||
{ mode: 'cors', credentials: 'include' },
|
||||
{ mode: 'no-cors' }
|
||||
];
|
||||
|
||||
let results = [];
|
||||
|
||||
for (const test of tests) {
|
||||
try {
|
||||
const response = await fetch(url, {
|
||||
mode: test.mode,
|
||||
credentials: test.credentials,
|
||||
headers: {
|
||||
'Content-Type': 'application/json',
|
||||
'Accept': 'application/json'
|
||||
}
|
||||
});
|
||||
|
||||
results.push({
|
||||
test: JSON.stringify(test),
|
||||
status: response.status,
|
||||
ok: response.ok
|
||||
});
|
||||
} catch (e) {
|
||||
results.push({
|
||||
test: JSON.stringify(test),
|
||||
error: e.message
|
||||
});
|
||||
}
|
||||
}
|
||||
|
||||
let html = '<h3>Результаты CORS тестов:</h3>';
|
||||
results.forEach(r => {
|
||||
html += `<div style="margin: 10px 0; padding: 8px; background: ${r.ok ? '#d1fae5' : '#fee2e2'}; border-radius: 8px;">`;
|
||||
html += `<div><strong>Тест:</strong> ${r.test}</div>`;
|
||||
if (r.status) html += `<div><strong>Статус:</strong> ${r.status}</div>`;
|
||||
if (r.error) html += `<div><strong>Ошибка:</strong> ${r.error}</div>`;
|
||||
html += '</div>';
|
||||
});
|
||||
|
||||
resultDiv.innerHTML = html;
|
||||
|
||||
} catch (error) {
|
||||
logError('CORS test error', error);
|
||||
resultDiv.innerHTML = `<div class="error">❌ Ошибка: ${error.message}</div>`;
|
||||
}
|
||||
}
|
||||
|
||||
// Тест регистрации
|
||||
async function testRegister() {
|
||||
const resultDiv = document.getElementById('registerResult');
|
||||
resultDiv.style.display = 'block';
|
||||
resultDiv.innerHTML = '<div class="flex"><div class="loader"></div> Тест регистрации...</div>';
|
||||
|
||||
const testData = {
|
||||
full_name: "Тест Тестов",
|
||||
email: `test${Date.now()}@example.com`,
|
||||
phone: "+7 (999) 123-45-67",
|
||||
telegram: "@test",
|
||||
password: "password123",
|
||||
role: "employee"
|
||||
};
|
||||
|
||||
try {
|
||||
const url = `http://${serverIp}:8000/api/register`;
|
||||
|
||||
const response = await fetch(url, {
|
||||
method: 'POST',
|
||||
headers: {
|
||||
'Content-Type': 'application/json',
|
||||
'Accept': 'application/json'
|
||||
},
|
||||
body: JSON.stringify(testData)
|
||||
});
|
||||
|
||||
const data = await response.json();
|
||||
|
||||
resultDiv.innerHTML = `
|
||||
<div class="${response.ok ? 'success' : 'error'}">
|
||||
${response.ok ? '✅ Успешно!' : '❌ Ошибка'}
|
||||
</div>
|
||||
<div><strong>Статус:</strong> ${response.status}</div>
|
||||
<pre>${JSON.stringify(data, null, 2)}</pre>
|
||||
`;
|
||||
|
||||
} catch (error) {
|
||||
logError('Register test error', error);
|
||||
resultDiv.innerHTML = `
|
||||
<div class="error">❌ Ошибка: ${error.message}</div>
|
||||
<div style="margin-top: 10px;">
|
||||
<strong>Тип ошибки:</strong> ${error.name}<br>
|
||||
<strong>Стектрейс:</strong> ${error.stack}
|
||||
</div>
|
||||
`;
|
||||
}
|
||||
}
|
||||
|
||||
// Тест входа
|
||||
async function testLogin() {
|
||||
const resultDiv = document.getElementById('loginResult');
|
||||
resultDiv.style.display = 'block';
|
||||
resultDiv.innerHTML = '<div class="flex"><div class="loader"></div> Тест входа...</div>';
|
||||
|
||||
try {
|
||||
const url = `http://${serverIp}:8000/api/login`;
|
||||
|
||||
const response = await fetch(url, {
|
||||
method: 'POST',
|
||||
headers: {
|
||||
'Content-Type': 'application/json',
|
||||
'Accept': 'application/json'
|
||||
},
|
||||
body: JSON.stringify({
|
||||
email: "admin@rabota.today",
|
||||
password: "admin123"
|
||||
})
|
||||
});
|
||||
|
||||
const data = await response.json();
|
||||
|
||||
resultDiv.innerHTML = `
|
||||
<div class="${response.ok ? 'success' : 'error'}">
|
||||
${response.ok ? '✅ Успешно!' : '❌ Ошибка'}
|
||||
</div>
|
||||
<div><strong>Статус:</strong> ${response.status}</div>
|
||||
<pre>${JSON.stringify(data, null, 2)}</pre>
|
||||
`;
|
||||
|
||||
} catch (error) {
|
||||
logError('Login test error', error);
|
||||
resultDiv.innerHTML = `<div class="error">❌ Ошибка: ${error.message}</div>`;
|
||||
}
|
||||
}
|
||||
|
||||
// Автоматический тест при загрузке
|
||||
setTimeout(() => {
|
||||
testConnection();
|
||||
}, 1000);
|
||||
</script>
|
||||
</body>
|
||||
</html>
|
||||
962
templates/mobile_debug_simple.html
Normal file
962
templates/mobile_debug_simple.html
Normal file
@@ -0,0 +1,962 @@
|
||||
<!DOCTYPE html>
|
||||
<html lang="ru">
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no">
|
||||
<title>Mobile Debug - Rabota.Today</title>
|
||||
<style>
|
||||
* {
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
box-sizing: border-box;
|
||||
font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif;
|
||||
}
|
||||
|
||||
body {
|
||||
background: #0b1c34;
|
||||
padding: 15px;
|
||||
color: #333;
|
||||
}
|
||||
|
||||
.container {
|
||||
max-width: 500px;
|
||||
margin: 0 auto;
|
||||
}
|
||||
|
||||
.card {
|
||||
background: white;
|
||||
border-radius: 24px;
|
||||
padding: 20px;
|
||||
margin-bottom: 15px;
|
||||
box-shadow: 0 10px 30px rgba(0,0,0,0.2);
|
||||
}
|
||||
|
||||
h1 {
|
||||
font-size: 22px;
|
||||
margin-bottom: 15px;
|
||||
color: #0b1c34;
|
||||
}
|
||||
|
||||
h2 {
|
||||
font-size: 18px;
|
||||
margin-bottom: 12px;
|
||||
color: #1f3f60;
|
||||
}
|
||||
|
||||
h3 {
|
||||
font-size: 16px;
|
||||
margin: 10px 0;
|
||||
color: #1f3f60;
|
||||
}
|
||||
|
||||
.info-row {
|
||||
background: #f5f9ff;
|
||||
padding: 12px;
|
||||
border-radius: 12px;
|
||||
margin-bottom: 8px;
|
||||
font-size: 14px;
|
||||
word-break: break-word;
|
||||
}
|
||||
|
||||
.label {
|
||||
font-weight: 600;
|
||||
color: #1f3f60;
|
||||
margin-bottom: 4px;
|
||||
}
|
||||
|
||||
.value {
|
||||
color: #333;
|
||||
font-family: monospace;
|
||||
font-size: 13px;
|
||||
overflow-x: auto;
|
||||
white-space: pre-wrap;
|
||||
word-wrap: break-word;
|
||||
}
|
||||
|
||||
.success { color: #10b981; font-weight: 600; }
|
||||
.error { color: #ef4444; font-weight: 600; }
|
||||
.warning { color: #f59e0b; font-weight: 600; }
|
||||
.info { color: #3b82f6; font-weight: 600; }
|
||||
|
||||
button {
|
||||
background: #0b1c34;
|
||||
color: white;
|
||||
border: none;
|
||||
padding: 14px 16px;
|
||||
border-radius: 40px;
|
||||
font-weight: 600;
|
||||
font-size: 15px;
|
||||
width: 100%;
|
||||
margin: 8px 0;
|
||||
cursor: pointer;
|
||||
transition: 0.2s;
|
||||
-webkit-tap-highlight-color: transparent;
|
||||
}
|
||||
|
||||
button:active {
|
||||
transform: scale(0.98);
|
||||
background: #1b3f6b;
|
||||
}
|
||||
|
||||
button.secondary {
|
||||
background: #e5e7eb;
|
||||
color: #1f3f60;
|
||||
}
|
||||
|
||||
button.secondary:active {
|
||||
background: #d1d5db;
|
||||
}
|
||||
|
||||
button.small {
|
||||
padding: 8px 12px;
|
||||
font-size: 13px;
|
||||
width: auto;
|
||||
margin: 5px;
|
||||
}
|
||||
|
||||
.test-result {
|
||||
margin-top: 15px;
|
||||
padding: 15px;
|
||||
background: #f5f5f5;
|
||||
border-radius: 16px;
|
||||
font-size: 13px;
|
||||
max-height: 300px;
|
||||
overflow-y: auto;
|
||||
display: none;
|
||||
white-space: pre-wrap;
|
||||
word-wrap: break-word;
|
||||
border: 1px solid #dee9f5;
|
||||
}
|
||||
|
||||
.loader {
|
||||
display: inline-block;
|
||||
width: 20px;
|
||||
height: 20px;
|
||||
border: 3px solid #f3f3f3;
|
||||
border-top: 3px solid #0b1c34;
|
||||
border-radius: 50%;
|
||||
animation: spin 1s linear infinite;
|
||||
margin-right: 10px;
|
||||
}
|
||||
|
||||
@keyframes spin {
|
||||
0% { transform: rotate(0deg); }
|
||||
100% { transform: rotate(360deg); }
|
||||
}
|
||||
|
||||
.flex {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
gap: 10px;
|
||||
flex-wrap: wrap;
|
||||
}
|
||||
|
||||
.flex-start {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: flex-start;
|
||||
gap: 10px;
|
||||
flex-wrap: wrap;
|
||||
}
|
||||
|
||||
.ip-input {
|
||||
width: 100%;
|
||||
padding: 12px 16px;
|
||||
border: 2px solid #dee9f5;
|
||||
border-radius: 30px;
|
||||
font-size: 15px;
|
||||
margin-bottom: 10px;
|
||||
}
|
||||
|
||||
.protocol-selector {
|
||||
display: flex;
|
||||
gap: 10px;
|
||||
margin: 15px 0;
|
||||
background: #f0f7ff;
|
||||
padding: 5px;
|
||||
border-radius: 40px;
|
||||
}
|
||||
|
||||
.protocol-btn {
|
||||
flex: 1;
|
||||
border: none;
|
||||
background: transparent;
|
||||
padding: 10px;
|
||||
border-radius: 40px;
|
||||
font-weight: 600;
|
||||
font-size: 14px;
|
||||
color: #385073;
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
.protocol-btn.active {
|
||||
background: white;
|
||||
color: #0b1c34;
|
||||
box-shadow: 0 2px 8px rgba(0,0,0,0.1);
|
||||
}
|
||||
|
||||
.share-link {
|
||||
background: #e8f0fe;
|
||||
padding: 15px;
|
||||
border-radius: 16px;
|
||||
margin-top: 15px;
|
||||
word-break: break-all;
|
||||
font-size: 13px;
|
||||
border: 1px solid #3b82f6;
|
||||
}
|
||||
|
||||
.share-link a {
|
||||
color: #3b82f6;
|
||||
text-decoration: none;
|
||||
font-weight: 600;
|
||||
}
|
||||
|
||||
.log-entry {
|
||||
padding: 6px;
|
||||
border-bottom: 1px solid #dee9f5;
|
||||
font-size: 12px;
|
||||
color: #4f7092;
|
||||
}
|
||||
|
||||
.status-badge {
|
||||
display: inline-block;
|
||||
padding: 4px 8px;
|
||||
border-radius: 20px;
|
||||
font-size: 11px;
|
||||
font-weight: 600;
|
||||
margin-left: 8px;
|
||||
}
|
||||
|
||||
.status-badge.success {
|
||||
background: #d1fae5;
|
||||
color: #065f46;
|
||||
}
|
||||
|
||||
.status-badge.error {
|
||||
background: #fee2e2;
|
||||
color: #b91c1c;
|
||||
}
|
||||
|
||||
.status-badge.warning {
|
||||
background: #fef3c7;
|
||||
color: #92400e;
|
||||
}
|
||||
|
||||
.json-view {
|
||||
background: #1e293b;
|
||||
color: #e2e8f0;
|
||||
padding: 12px;
|
||||
border-radius: 12px;
|
||||
font-family: monospace;
|
||||
font-size: 11px;
|
||||
overflow-x: auto;
|
||||
white-space: pre-wrap;
|
||||
margin-top: 10px;
|
||||
}
|
||||
|
||||
.protocol-info {
|
||||
background: #dbeafe;
|
||||
padding: 12px;
|
||||
border-radius: 12px;
|
||||
margin: 10px 0;
|
||||
font-size: 13px;
|
||||
border-left: 4px solid #3b82f6;
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
<div class="container">
|
||||
<!-- Заголовок -->
|
||||
<div class="card">
|
||||
<h1>📱 Rabota.Today Mobile Debug</h1>
|
||||
<div class="protocol-info" id="protocolInfo">
|
||||
<strong>🔄 Определение протокола:</strong> Загрузка...
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Информация об устройстве -->
|
||||
<div class="card">
|
||||
<h2>📱 Информация об устройстве</h2>
|
||||
|
||||
<div class="info-row">
|
||||
<div class="label">🌐 Текущий протокол:</div>
|
||||
<div class="value" id="currentProtocol"></div>
|
||||
</div>
|
||||
|
||||
<div class="info-row">
|
||||
<div class="label">🔗 Базовый URL API:</div>
|
||||
<div class="value" id="baseApiUrl"></div>
|
||||
</div>
|
||||
|
||||
<div class="info-row">
|
||||
<div class="label">📱 Устройство:</div>
|
||||
<div class="value" id="deviceInfo"></div>
|
||||
</div>
|
||||
|
||||
<div class="info-row">
|
||||
<div class="label">🌍 Текущий URL:</div>
|
||||
<div class="value" id="currentUrl"></div>
|
||||
</div>
|
||||
|
||||
<div class="info-row">
|
||||
<div class="label">📶 Статус сети:</div>
|
||||
<div class="value" id="networkStatus"></div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Выбор протокола -->
|
||||
<div class="card">
|
||||
<h2>🔧 Настройки подключения</h2>
|
||||
|
||||
<div class="protocol-selector" id="protocolSelector">
|
||||
<button class="protocol-btn active" data-protocol="auto" onclick="setProtocol('auto')">🔄 Авто</button>
|
||||
<button class="protocol-btn" data-protocol="https" onclick="setProtocol('https')">🔒 HTTPS</button>
|
||||
<button class="protocol-btn" data-protocol="http" onclick="setProtocol('http')">⚠️ HTTP</button>
|
||||
</div>
|
||||
|
||||
<div class="flex-start" style="margin-top: 10px;">
|
||||
<button class="secondary small" onclick="copyDebugInfo()">📋 Копировать информацию</button>
|
||||
<button class="secondary small" onclick="saveIp()">💾 Сохранить настройки</button>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Основные тесты -->
|
||||
<div class="card">
|
||||
<h2>🔍 Диагностика API</h2>
|
||||
|
||||
<button onclick="runAllTests()" id="runAllBtn">▶️ Запустить все тесты</button>
|
||||
|
||||
<div class="flex" style="margin: 10px 0;">
|
||||
<button class="secondary" onclick="testConnection()" style="flex: 1;">🔌 Тест соединения</button>
|
||||
<button class="secondary" onclick="testCORS()" style="flex: 1;">🌐 Тест CORS</button>
|
||||
</div>
|
||||
|
||||
<div class="flex" style="margin: 10px 0;">
|
||||
<button class="secondary" onclick="testHealth()" style="flex: 1;">🏥 Health API</button>
|
||||
<button class="secondary" onclick="testRegister()" style="flex: 1;">📝 Тест регистрации</button>
|
||||
</div>
|
||||
|
||||
<div class="flex" style="margin: 10px 0;">
|
||||
<button class="secondary" onclick="testLogin()" style="flex: 1;">🔑 Тест входа</button>
|
||||
<button class="secondary" onclick="testAuth()" style="flex: 1;">👤 Тест авторизации</button>
|
||||
</div>
|
||||
|
||||
<div id="mainResult" class="test-result"></div>
|
||||
</div>
|
||||
|
||||
<!-- Результаты тестов -->
|
||||
<div class="card" id="resultsCard" style="display: none;">
|
||||
<h2>📊 Полные результаты</h2>
|
||||
<div id="results" class="json-view"></div>
|
||||
|
||||
<div id="shareLink" class="share-link" style="display: none;">
|
||||
<div>🔗 Результаты готовы:</div>
|
||||
<textarea id="resultsText" style="width: 100%; height: 100px; margin: 10px 0; padding: 8px; border-radius: 8px; border: 1px solid #3b82f6;" readonly></textarea>
|
||||
<button onclick="copyResults()" class="secondary">📋 Копировать результаты</button>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Лог ошибок -->
|
||||
<div class="card">
|
||||
<h2>📝 Лог событий</h2>
|
||||
<div id="log" style="max-height: 200px; overflow-y: auto; font-size: 12px; background: #f5f5f5; padding: 10px; border-radius: 12px;">
|
||||
<div class="log-entry">✅ Диагностика запущена</div>
|
||||
</div>
|
||||
<div class="flex" style="margin-top: 10px;">
|
||||
<button class="secondary small" onclick="clearLog()">Очистить лог</button>
|
||||
<button class="secondary small" onclick="downloadLog()">📥 Скачать лог</button>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Информация о помощи -->
|
||||
<div class="card">
|
||||
<h2>🆘 Помощь</h2>
|
||||
<div class="info-row">
|
||||
<div class="label">Если тесты не работают:</div>
|
||||
<ul style="margin-left: 20px; margin-top: 5px;">
|
||||
<li>Проверьте, что сервер запущен</li>
|
||||
<li>Убедитесь, что вы в одной сети</li>
|
||||
<li>Проверьте firewall (порт 8000)</li>
|
||||
<li>Попробуйте HTTP вместо HTTPS</li>
|
||||
</ul>
|
||||
</div>
|
||||
<div class="info-row">
|
||||
<div class="label">Быстрые ссылки:</div>
|
||||
<div class="flex-start">
|
||||
<a href="/" class="secondary small" style="padding: 8px 12px;">🏠 Главная</a>
|
||||
<a href="/register" class="secondary small" style="padding: 8px 12px;">📝 Регистрация</a>
|
||||
<a href="/login" class="secondary small" style="padding: 8px 12px;">🔑 Вход</a>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<script>
|
||||
// ==================== КОНФИГУРАЦИЯ ====================
|
||||
|
||||
// Определяем базовый URL динамически
|
||||
const currentProtocol = window.location.protocol; // http: или https:
|
||||
const currentHost = window.location.host; // yarmarka.rabota.today или IP:порт
|
||||
let API_BASE_URL = `${currentProtocol}//${currentHost}/api`;
|
||||
|
||||
// Хранилище результатов
|
||||
let testResults = {
|
||||
device: {},
|
||||
connection: [],
|
||||
health: {},
|
||||
cors: {},
|
||||
register: {},
|
||||
login: {},
|
||||
auth: {},
|
||||
timestamp: new Date().toISOString()
|
||||
};
|
||||
|
||||
let currentProtocolMode = 'auto'; // auto, https, http
|
||||
|
||||
// ==================== ИНИЦИАЛИЗАЦИЯ ====================
|
||||
|
||||
function init() {
|
||||
// Обновляем информацию
|
||||
updateDeviceInfo();
|
||||
updateProtocolInfo();
|
||||
|
||||
// Загружаем сохраненные настройки
|
||||
const savedMode = localStorage.getItem('protocolMode');
|
||||
if (savedMode) {
|
||||
setProtocol(savedMode);
|
||||
}
|
||||
|
||||
addLog('✅ Диагностика инициализирована');
|
||||
addLog(`📡 API URL: ${API_BASE_URL}`);
|
||||
}
|
||||
|
||||
function updateDeviceInfo() {
|
||||
const info = {
|
||||
userAgent: navigator.userAgent,
|
||||
platform: navigator.platform,
|
||||
language: navigator.language,
|
||||
screen: `${window.screen.width}x${window.screen.height}`,
|
||||
online: navigator.onLine,
|
||||
vendor: navigator.vendor,
|
||||
cookieEnabled: navigator.cookieEnabled
|
||||
};
|
||||
|
||||
document.getElementById('deviceInfo').textContent =
|
||||
`${info.platform}, ${info.screen}, ${info.language}`;
|
||||
|
||||
document.getElementById('currentUrl').textContent = window.location.href;
|
||||
document.getElementById('currentProtocol').textContent = currentProtocol;
|
||||
document.getElementById('baseApiUrl').textContent = API_BASE_URL;
|
||||
document.getElementById('networkStatus').textContent =
|
||||
info.online ? '✅ Онлайн' : '❌ Офлайн';
|
||||
|
||||
testResults.device = info;
|
||||
}
|
||||
|
||||
function updateProtocolInfo() {
|
||||
const protocolInfo = document.getElementById('protocolInfo');
|
||||
const isHttps = currentProtocol === 'https:';
|
||||
|
||||
if (isHttps) {
|
||||
protocolInfo.innerHTML = `
|
||||
<strong>🔄 Текущий протокол: HTTPS (защищенный)</strong><br>
|
||||
<span class="info">⚠️ API запросы должны идти через HTTPS или относительные пути</span>
|
||||
`;
|
||||
} else {
|
||||
protocolInfo.innerHTML = `
|
||||
<strong>🔄 Текущий протокол: HTTP (незащищенный)</strong><br>
|
||||
<span class="success">✅ API запросы будут работать напрямую</span>
|
||||
`;
|
||||
}
|
||||
}
|
||||
|
||||
// ==================== УПРАВЛЕНИЕ ПРОТОКОЛОМ ====================
|
||||
|
||||
function setProtocol(mode) {
|
||||
currentProtocolMode = mode;
|
||||
|
||||
// Обновляем кнопки
|
||||
document.querySelectorAll('.protocol-btn').forEach(btn => {
|
||||
btn.classList.remove('active');
|
||||
if (btn.dataset.protocol === mode) {
|
||||
btn.classList.add('active');
|
||||
}
|
||||
});
|
||||
|
||||
// Сохраняем настройку
|
||||
localStorage.setItem('protocolMode', mode);
|
||||
|
||||
// Перестраиваем API URL в зависимости от режима
|
||||
if (mode === 'https') {
|
||||
API_BASE_URL = `https://${currentHost}/api`;
|
||||
} else if (mode === 'http') {
|
||||
// Для HTTP нужно убедиться, что есть порт 8000
|
||||
const hostWithoutPort = currentHost.split(':')[0];
|
||||
API_BASE_URL = `http://${hostWithoutPort}:8000/api`;
|
||||
} else {
|
||||
// Auto - используем текущий протокол
|
||||
API_BASE_URL = `${currentProtocol}//${currentHost}/api`;
|
||||
}
|
||||
|
||||
document.getElementById('baseApiUrl').textContent = API_BASE_URL;
|
||||
addLog(`🔄 Протокол изменен на ${mode}, API URL: ${API_BASE_URL}`);
|
||||
}
|
||||
|
||||
// ==================== ЛОГИРОВАНИЕ ====================
|
||||
|
||||
function addLog(message, type = 'info') {
|
||||
const logDiv = document.getElementById('log');
|
||||
const entry = document.createElement('div');
|
||||
entry.className = 'log-entry';
|
||||
|
||||
let icon = '📌';
|
||||
if (type === 'success') icon = '✅';
|
||||
if (type === 'error') icon = '❌';
|
||||
if (type === 'warning') icon = '⚠️';
|
||||
|
||||
entry.textContent = `[${new Date().toLocaleTimeString()}] ${icon} ${message}`;
|
||||
logDiv.insertBefore(entry, logDiv.firstChild);
|
||||
|
||||
// Ограничиваем количество записей
|
||||
if (logDiv.children.length > 20) {
|
||||
logDiv.removeChild(logDiv.lastChild);
|
||||
}
|
||||
}
|
||||
|
||||
function clearLog() {
|
||||
document.getElementById('log').innerHTML = '<div class="log-entry">✅ Лог очищен</div>';
|
||||
}
|
||||
|
||||
function downloadLog() {
|
||||
const logEntries = [];
|
||||
document.querySelectorAll('#log .log-entry').forEach(entry => {
|
||||
logEntries.push(entry.textContent);
|
||||
});
|
||||
|
||||
const logText = logEntries.join('\n');
|
||||
const blob = new Blob([logText], { type: 'text/plain' });
|
||||
const url = URL.createObjectURL(blob);
|
||||
const a = document.createElement('a');
|
||||
a.href = url;
|
||||
a.download = `debug-log-${new Date().toISOString()}.txt`;
|
||||
a.click();
|
||||
}
|
||||
|
||||
// ==================== ОТОБРАЖЕНИЕ РЕЗУЛЬТАТОВ ====================
|
||||
|
||||
function showResult(title, content, isSuccess = true) {
|
||||
const resultDiv = document.getElementById('mainResult');
|
||||
resultDiv.style.display = 'block';
|
||||
resultDiv.innerHTML = `
|
||||
<div class="${isSuccess ? 'success' : 'error'}" style="margin-bottom: 10px;">
|
||||
${isSuccess ? '✅' : '❌'} ${title}
|
||||
</div>
|
||||
<pre style="white-space: pre-wrap; font-size: 12px; background: white; padding: 10px; border-radius: 8px;">${JSON.stringify(content, null, 2)}</pre>
|
||||
`;
|
||||
}
|
||||
|
||||
function updateFullResults() {
|
||||
const resultsDiv = document.getElementById('results');
|
||||
const resultsText = document.getElementById('resultsText');
|
||||
const resultsCard = document.getElementById('resultsCard');
|
||||
|
||||
resultsCard.style.display = 'block';
|
||||
const resultsJson = JSON.stringify(testResults, null, 2);
|
||||
resultsDiv.textContent = resultsJson;
|
||||
resultsText.value = resultsJson;
|
||||
document.getElementById('shareLink').style.display = 'block';
|
||||
}
|
||||
|
||||
function copyResults() {
|
||||
const resultsText = document.getElementById('resultsText');
|
||||
resultsText.select();
|
||||
document.execCommand('copy');
|
||||
addLog('✅ Результаты скопированы');
|
||||
alert('Результаты скопированы в буфер обмена!');
|
||||
}
|
||||
|
||||
function copyDebugInfo() {
|
||||
const info = {
|
||||
url: window.location.href,
|
||||
protocol: currentProtocol,
|
||||
apiUrl: API_BASE_URL,
|
||||
device: testResults.device,
|
||||
timestamp: new Date().toISOString()
|
||||
};
|
||||
|
||||
const textarea = document.createElement('textarea');
|
||||
textarea.value = JSON.stringify(info, null, 2);
|
||||
document.body.appendChild(textarea);
|
||||
textarea.select();
|
||||
document.execCommand('copy');
|
||||
document.body.removeChild(textarea);
|
||||
|
||||
addLog('✅ Информация скопирована');
|
||||
}
|
||||
|
||||
function saveIp() {
|
||||
addLog('✅ Настройки сохранены');
|
||||
alert('Настройки сохранены');
|
||||
}
|
||||
|
||||
// ==================== ТЕСТЫ API ====================
|
||||
|
||||
async function testConnection() {
|
||||
addLog('🔄 Тест соединения...');
|
||||
|
||||
const urls = [
|
||||
`${API_BASE_URL}/health`,
|
||||
`${API_BASE_URL.replace('/api', '')}/health`,
|
||||
`${window.location.protocol}//${window.location.host}/api/health`,
|
||||
`http://${window.location.hostname}:8000/api/health`
|
||||
];
|
||||
|
||||
let results = [];
|
||||
|
||||
for (const url of urls) {
|
||||
try {
|
||||
const start = Date.now();
|
||||
const response = await fetch(url, {
|
||||
method: 'GET',
|
||||
headers: { 'Accept': 'application/json' },
|
||||
mode: 'cors'
|
||||
});
|
||||
const time = Date.now() - start;
|
||||
|
||||
let data = null;
|
||||
try {
|
||||
data = await response.json();
|
||||
} catch {
|
||||
data = await response.text();
|
||||
}
|
||||
|
||||
const result = {
|
||||
url,
|
||||
status: response.status,
|
||||
time: `${time}ms`,
|
||||
ok: response.ok,
|
||||
data: data
|
||||
};
|
||||
|
||||
results.push(result);
|
||||
|
||||
if (response.ok) {
|
||||
addLog(`✅ Доступно: ${url} (${time}ms)`);
|
||||
} else {
|
||||
addLog(`⚠️ Ошибка ${response.status}: ${url}`);
|
||||
}
|
||||
} catch (e) {
|
||||
results.push({
|
||||
url,
|
||||
error: e.message,
|
||||
ok: false
|
||||
});
|
||||
addLog(`❌ Недоступно: ${url} - ${e.message}`, 'error');
|
||||
}
|
||||
}
|
||||
|
||||
testResults.connection = results;
|
||||
|
||||
// Проверяем, есть ли успешные подключения
|
||||
const hasSuccess = results.some(r => r.ok);
|
||||
showResult('Тест соединения', results, hasSuccess);
|
||||
|
||||
return results;
|
||||
}
|
||||
|
||||
async function testHealth() {
|
||||
addLog('🔄 Тест Health API...');
|
||||
|
||||
try {
|
||||
const url = `${API_BASE_URL}/health`;
|
||||
const response = await fetch(url, {
|
||||
headers: { 'Accept': 'application/json' }
|
||||
});
|
||||
|
||||
let data;
|
||||
try {
|
||||
data = await response.json();
|
||||
} catch {
|
||||
data = await response.text();
|
||||
}
|
||||
|
||||
testResults.health = {
|
||||
status: response.status,
|
||||
ok: response.ok,
|
||||
data,
|
||||
url
|
||||
};
|
||||
|
||||
if (response.ok) {
|
||||
addLog('✅ Health API работает');
|
||||
showResult('Health API', data, true);
|
||||
} else {
|
||||
addLog(`❌ Health API ошибка: ${response.status}`);
|
||||
showResult('Health API ошибка', { status: response.status, data }, false);
|
||||
}
|
||||
|
||||
return { ok: response.ok, data };
|
||||
|
||||
} catch (error) {
|
||||
testResults.health = { error: error.message };
|
||||
addLog(`❌ Health API: ${error.message}`, 'error');
|
||||
showResult('Health API ошибка', { error: error.message }, false);
|
||||
return { ok: false, error: error.message };
|
||||
}
|
||||
}
|
||||
|
||||
async function testCORS() {
|
||||
addLog('🔄 Тест CORS...');
|
||||
|
||||
try {
|
||||
const url = `${API_BASE_URL}/health`;
|
||||
const response = await fetch(url, {
|
||||
method: 'GET',
|
||||
headers: {
|
||||
'Content-Type': 'application/json',
|
||||
'Accept': 'application/json'
|
||||
}
|
||||
});
|
||||
|
||||
const corsHeader = response.headers.get('access-control-allow-origin');
|
||||
const corsCredentials = response.headers.get('access-control-allow-credentials');
|
||||
|
||||
testResults.cors = {
|
||||
allowed: corsHeader === '*' || corsHeader === window.location.origin,
|
||||
header: corsHeader,
|
||||
credentials: corsCredentials,
|
||||
url: url
|
||||
};
|
||||
|
||||
if (corsHeader) {
|
||||
addLog(`✅ CORS заголовок: ${corsHeader}`);
|
||||
showResult('CORS тест', testResults.cors, true);
|
||||
} else {
|
||||
addLog('⚠️ Нет CORS заголовка', 'warning');
|
||||
showResult('CORS предупреждение', testResults.cors, false);
|
||||
}
|
||||
|
||||
} catch (error) {
|
||||
testResults.cors = { error: error.message };
|
||||
addLog(`❌ CORS тест: ${error.message}`, 'error');
|
||||
showResult('CORS ошибка', { error: error.message }, false);
|
||||
}
|
||||
}
|
||||
|
||||
async function testRegister() {
|
||||
addLog('🔄 Тест регистрации...');
|
||||
|
||||
const testData = {
|
||||
full_name: "Тест Тестов",
|
||||
email: `test${Date.now()}@example.com`,
|
||||
phone: "+79991234567",
|
||||
telegram: null,
|
||||
password: "password123",
|
||||
role: "employee"
|
||||
};
|
||||
|
||||
try {
|
||||
const url = `${API_BASE_URL}/register`;
|
||||
|
||||
const response = await fetch(url, {
|
||||
method: 'POST',
|
||||
headers: {
|
||||
'Content-Type': 'application/json',
|
||||
'Accept': 'application/json'
|
||||
},
|
||||
body: JSON.stringify(testData)
|
||||
});
|
||||
|
||||
let data;
|
||||
try {
|
||||
data = await response.json();
|
||||
} catch {
|
||||
data = await response.text();
|
||||
}
|
||||
|
||||
testResults.register = {
|
||||
status: response.status,
|
||||
ok: response.ok,
|
||||
data: data,
|
||||
url: url
|
||||
};
|
||||
|
||||
if (response.ok) {
|
||||
addLog(`✅ Регистрация работает, создан пользователь ID: ${data.user_id}`);
|
||||
showResult('Регистрация', {
|
||||
success: true,
|
||||
user_id: data.user_id,
|
||||
email: testData.email
|
||||
}, true);
|
||||
} else {
|
||||
addLog(`❌ Регистрация ошибка: ${response.status}`);
|
||||
showResult('Ошибка регистрации', { status: response.status, data }, false);
|
||||
}
|
||||
|
||||
return { ok: response.ok, data };
|
||||
|
||||
} catch (error) {
|
||||
testResults.register = { error: error.message };
|
||||
addLog(`❌ Регистрация: ${error.message}`, 'error');
|
||||
showResult('Ошибка регистрации', { error: error.message }, false);
|
||||
return { ok: false, error: error.message };
|
||||
}
|
||||
}
|
||||
|
||||
async function testLogin() {
|
||||
addLog('🔄 Тест входа...');
|
||||
|
||||
try {
|
||||
const url = `${API_BASE_URL}/login`;
|
||||
|
||||
const response = await fetch(url, {
|
||||
method: 'POST',
|
||||
headers: {
|
||||
'Content-Type': 'application/json',
|
||||
'Accept': 'application/json'
|
||||
},
|
||||
body: JSON.stringify({
|
||||
email: "admin@rabota.today",
|
||||
password: "admin123"
|
||||
})
|
||||
});
|
||||
|
||||
let data;
|
||||
try {
|
||||
data = await response.json();
|
||||
} catch {
|
||||
data = await response.text();
|
||||
}
|
||||
|
||||
testResults.login = {
|
||||
status: response.status,
|
||||
ok: response.ok,
|
||||
data: data,
|
||||
url: url
|
||||
};
|
||||
|
||||
if (response.ok) {
|
||||
addLog(`✅ Вход работает, получен токен для ${data.full_name}`);
|
||||
showResult('Вход в систему', {
|
||||
success: true,
|
||||
user: data.full_name,
|
||||
role: data.role
|
||||
}, true);
|
||||
|
||||
// Сохраняем токен для теста авторизации
|
||||
if (data.access_token) {
|
||||
localStorage.setItem('test_token', data.access_token);
|
||||
}
|
||||
} else {
|
||||
addLog(`❌ Вход ошибка: ${response.status}`);
|
||||
showResult('Ошибка входа', { status: response.status, data }, false);
|
||||
}
|
||||
|
||||
return { ok: response.ok, data };
|
||||
|
||||
} catch (error) {
|
||||
testResults.login = { error: error.message };
|
||||
addLog(`❌ Вход: ${error.message}`, 'error');
|
||||
showResult('Ошибка входа', { error: error.message }, false);
|
||||
return { ok: false, error: error.message };
|
||||
}
|
||||
}
|
||||
|
||||
async function testAuth() {
|
||||
addLog('🔄 Тест авторизации...');
|
||||
|
||||
const token = localStorage.getItem('test_token');
|
||||
if (!token) {
|
||||
addLog('⚠️ Нет токена для теста авторизации', 'warning');
|
||||
showResult('Тест авторизации', { error: 'Сначала выполните вход' }, false);
|
||||
return;
|
||||
}
|
||||
|
||||
try {
|
||||
const url = `${API_BASE_URL}/user`;
|
||||
|
||||
const response = await fetch(url, {
|
||||
headers: {
|
||||
'Authorization': `Bearer ${token}`,
|
||||
'Accept': 'application/json'
|
||||
}
|
||||
});
|
||||
|
||||
let data;
|
||||
try {
|
||||
data = await response.json();
|
||||
} catch {
|
||||
data = await response.text();
|
||||
}
|
||||
|
||||
testResults.auth = {
|
||||
status: response.status,
|
||||
ok: response.ok,
|
||||
data: data
|
||||
};
|
||||
|
||||
if (response.ok) {
|
||||
addLog(`✅ Авторизация работает, пользователь: ${data.full_name}`);
|
||||
showResult('Авторизация', {
|
||||
success: true,
|
||||
user: data.full_name,
|
||||
email: data.email
|
||||
}, true);
|
||||
} else {
|
||||
addLog(`❌ Авторизация ошибка: ${response.status}`);
|
||||
showResult('Ошибка авторизации', { status: response.status, data }, false);
|
||||
}
|
||||
|
||||
} catch (error) {
|
||||
testResults.auth = { error: error.message };
|
||||
addLog(`❌ Авторизация: ${error.message}`, 'error');
|
||||
showResult('Ошибка авторизации', { error: error.message }, false);
|
||||
}
|
||||
}
|
||||
|
||||
async function runAllTests() {
|
||||
const btn = document.getElementById('runAllBtn');
|
||||
|
||||
btn.disabled = true;
|
||||
btn.innerHTML = '<div class="loader"></div> Выполнение тестов...';
|
||||
|
||||
// Очищаем предыдущие результаты
|
||||
testResults = {
|
||||
device: testResults.device,
|
||||
timestamp: new Date().toISOString()
|
||||
};
|
||||
|
||||
addLog('🚀 Запуск всех тестов...');
|
||||
|
||||
// Последовательное выполнение тестов
|
||||
await testConnection();
|
||||
await testHealth();
|
||||
await testCORS();
|
||||
await testRegister();
|
||||
await testLogin();
|
||||
await testAuth();
|
||||
|
||||
// Обновляем полные результаты
|
||||
updateFullResults();
|
||||
|
||||
btn.disabled = false;
|
||||
btn.innerHTML = '▶️ Запустить все тесты';
|
||||
|
||||
addLog('✅ Все тесты завершены');
|
||||
}
|
||||
|
||||
// ==================== ЗАПУСК ====================
|
||||
|
||||
// Запускаем инициализацию при загрузке
|
||||
window.addEventListener('load', () => {
|
||||
init();
|
||||
|
||||
// Автоматически запускаем базовые тесты через 1 секунду
|
||||
setTimeout(() => {
|
||||
testConnection();
|
||||
}, 1000);
|
||||
});
|
||||
</script>
|
||||
</body>
|
||||
</html>
|
||||
File diff suppressed because it is too large
Load Diff
@@ -2,15 +2,16 @@
|
||||
<html lang="ru">
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=yes">
|
||||
<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;
|
||||
font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif;
|
||||
}
|
||||
|
||||
body {
|
||||
@@ -19,218 +20,137 @@
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
padding: 20px;
|
||||
padding: 10px;
|
||||
}
|
||||
|
||||
.register-container {
|
||||
max-width: 600px;
|
||||
max-width: 500px;
|
||||
width: 100%;
|
||||
background: white;
|
||||
border-radius: 48px;
|
||||
box-shadow: 0 40px 80px rgba(0, 0, 0, 0.3);
|
||||
border-radius: 32px;
|
||||
box-shadow: 0 20px 40px rgba(0, 0, 0, 0.2);
|
||||
overflow: hidden;
|
||||
animation: slideUp 0.5s ease;
|
||||
}
|
||||
|
||||
@keyframes slideUp {
|
||||
from {
|
||||
opacity: 0;
|
||||
transform: translateY(30px);
|
||||
}
|
||||
to {
|
||||
opacity: 1;
|
||||
transform: translateY(0);
|
||||
}
|
||||
}
|
||||
|
||||
.register-header {
|
||||
background: #0b1c34;
|
||||
color: white;
|
||||
padding: 40px;
|
||||
padding: 30px 20px;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.register-header h1 {
|
||||
font-size: 36px;
|
||||
font-size: 28px;
|
||||
font-weight: 700;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
gap: 15px;
|
||||
margin-bottom: 10px;
|
||||
gap: 10px;
|
||||
margin-bottom: 5px;
|
||||
}
|
||||
|
||||
.register-header h1 i {
|
||||
color: #3b82f6;
|
||||
background: rgba(255,255,255,0.1);
|
||||
padding: 12px;
|
||||
border-radius: 20px;
|
||||
padding: 8px;
|
||||
border-radius: 16px;
|
||||
font-size: 24px;
|
||||
}
|
||||
|
||||
.register-header p {
|
||||
color: #9bb8da;
|
||||
font-size: 16px;
|
||||
font-size: 14px;
|
||||
}
|
||||
|
||||
.register-form {
|
||||
padding: 40px;
|
||||
padding: 30px 20px;
|
||||
}
|
||||
|
||||
.role-selector {
|
||||
display: flex;
|
||||
gap: 16px;
|
||||
margin-bottom: 30px;
|
||||
gap: 10px;
|
||||
margin-bottom: 25px;
|
||||
background: #f0f7ff;
|
||||
padding: 8px;
|
||||
border-radius: 60px;
|
||||
padding: 6px;
|
||||
border-radius: 40px;
|
||||
}
|
||||
|
||||
.role-option {
|
||||
flex: 1;
|
||||
border: none;
|
||||
background: transparent;
|
||||
padding: 16px 20px;
|
||||
border-radius: 50px;
|
||||
font-weight: 700;
|
||||
font-size: 16px;
|
||||
padding: 12px 10px;
|
||||
border-radius: 40px;
|
||||
font-weight: 600;
|
||||
font-size: 14px;
|
||||
color: #385073;
|
||||
cursor: pointer;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
gap: 10px;
|
||||
gap: 5px;
|
||||
transition: 0.2s;
|
||||
-webkit-tap-highlight-color: transparent;
|
||||
}
|
||||
|
||||
.role-option i {
|
||||
font-size: 18px;
|
||||
font-size: 16px;
|
||||
}
|
||||
|
||||
.role-option.active {
|
||||
background: white;
|
||||
color: #0b1c34;
|
||||
box-shadow: 0 8px 20px rgba(0,40,80,0.1);
|
||||
box-shadow: 0 4px 10px rgba(0,40,80,0.1);
|
||||
}
|
||||
|
||||
.input-group {
|
||||
margin-bottom: 20px;
|
||||
margin-bottom: 15px;
|
||||
}
|
||||
|
||||
.input-group label {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 8px;
|
||||
gap: 5px;
|
||||
font-weight: 600;
|
||||
color: #1f3f60;
|
||||
margin-bottom: 8px;
|
||||
font-size: 14px;
|
||||
margin-bottom: 5px;
|
||||
font-size: 13px;
|
||||
}
|
||||
|
||||
.input-group label i {
|
||||
color: #3b82f6;
|
||||
width: 20px;
|
||||
width: 16px;
|
||||
font-size: 14px;
|
||||
}
|
||||
|
||||
.input-group input {
|
||||
width: 100%;
|
||||
padding: 16px 20px;
|
||||
padding: 14px 16px;
|
||||
background: #f9fcff;
|
||||
border: 2px solid #dee9f5;
|
||||
border-radius: 30px;
|
||||
font-size: 16px;
|
||||
font-size: 15px;
|
||||
transition: 0.2s;
|
||||
-webkit-appearance: none;
|
||||
appearance: none;
|
||||
}
|
||||
|
||||
.input-group input:focus {
|
||||
border-color: #3b82f6;
|
||||
background: white;
|
||||
outline: none;
|
||||
box-shadow: 0 0 0 4px rgba(59,130,246,0.1);
|
||||
}
|
||||
|
||||
.input-group input.error {
|
||||
border-color: #ef4444;
|
||||
background: #fef2f2;
|
||||
box-shadow: 0 0 0 3px rgba(59,130,246,0.1);
|
||||
}
|
||||
|
||||
.input-row {
|
||||
display: flex;
|
||||
gap: 15px;
|
||||
gap: 10px;
|
||||
flex-wrap: wrap;
|
||||
}
|
||||
|
||||
.input-row .input-group {
|
||||
flex: 1;
|
||||
}
|
||||
|
||||
.password-requirements {
|
||||
background: #f0f7ff;
|
||||
border-radius: 20px;
|
||||
padding: 15px 20px;
|
||||
margin: 20px 0;
|
||||
font-size: 13px;
|
||||
}
|
||||
|
||||
.password-requirements p {
|
||||
color: #1f3f60;
|
||||
font-weight: 600;
|
||||
margin-bottom: 10px;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 8px;
|
||||
}
|
||||
|
||||
.requirement {
|
||||
color: #4f7092;
|
||||
margin: 5px 0;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 8px;
|
||||
}
|
||||
|
||||
.requirement i {
|
||||
width: 16px;
|
||||
font-size: 12px;
|
||||
}
|
||||
|
||||
.requirement.valid {
|
||||
color: #10b981;
|
||||
}
|
||||
|
||||
.requirement.valid i {
|
||||
color: #10b981;
|
||||
}
|
||||
|
||||
.requirement.invalid {
|
||||
color: #ef4444;
|
||||
}
|
||||
|
||||
.requirement.invalid i {
|
||||
color: #ef4444;
|
||||
}
|
||||
|
||||
.terms {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 10px;
|
||||
margin: 25px 0;
|
||||
font-size: 14px;
|
||||
color: #4f7092;
|
||||
}
|
||||
|
||||
.terms input[type="checkbox"] {
|
||||
width: 18px;
|
||||
height: 18px;
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
.terms a {
|
||||
color: #3b82f6;
|
||||
text-decoration: none;
|
||||
font-weight: 600;
|
||||
}
|
||||
|
||||
.terms a:hover {
|
||||
text-decoration: underline;
|
||||
min-width: 140px;
|
||||
}
|
||||
|
||||
.btn-register {
|
||||
@@ -238,107 +158,76 @@
|
||||
background: #0f2b4f;
|
||||
color: white;
|
||||
border: none;
|
||||
padding: 18px;
|
||||
padding: 16px;
|
||||
border-radius: 40px;
|
||||
font-weight: 700;
|
||||
font-size: 18px;
|
||||
font-size: 16px;
|
||||
cursor: pointer;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
gap: 10px;
|
||||
gap: 8px;
|
||||
transition: 0.2s;
|
||||
margin-bottom: 20px;
|
||||
margin: 20px 0 15px;
|
||||
-webkit-tap-highlight-color: transparent;
|
||||
}
|
||||
|
||||
.btn-register:hover:not(:disabled) {
|
||||
.btn-register:active {
|
||||
transform: scale(0.98);
|
||||
background: #1b3f6b;
|
||||
transform: scale(1.02);
|
||||
}
|
||||
|
||||
.btn-register:disabled {
|
||||
opacity: 0.5;
|
||||
cursor: not-allowed;
|
||||
pointer-events: none;
|
||||
}
|
||||
|
||||
.login-link {
|
||||
text-align: center;
|
||||
color: #4f7092;
|
||||
font-size: 15px;
|
||||
font-size: 14px;
|
||||
}
|
||||
|
||||
.login-link a {
|
||||
color: #3b82f6;
|
||||
text-decoration: none;
|
||||
font-weight: 600;
|
||||
margin-left: 5px;
|
||||
}
|
||||
|
||||
.login-link a:hover {
|
||||
text-decoration: underline;
|
||||
padding: 5px;
|
||||
}
|
||||
|
||||
.error-message {
|
||||
background: #fee2e2;
|
||||
color: #b91c1c;
|
||||
padding: 15px 20px;
|
||||
padding: 12px 16px;
|
||||
border-radius: 30px;
|
||||
margin-bottom: 20px;
|
||||
display: flex;
|
||||
margin-bottom: 15px;
|
||||
display: none;
|
||||
align-items: center;
|
||||
gap: 10px;
|
||||
font-size: 14px;
|
||||
gap: 8px;
|
||||
font-size: 13px;
|
||||
}
|
||||
|
||||
.success-message {
|
||||
background: #d1fae5;
|
||||
color: #065f46;
|
||||
padding: 15px 20px;
|
||||
padding: 12px 16px;
|
||||
border-radius: 30px;
|
||||
margin-bottom: 20px;
|
||||
display: flex;
|
||||
margin-bottom: 15px;
|
||||
display: none;
|
||||
align-items: center;
|
||||
gap: 10px;
|
||||
font-size: 14px;
|
||||
}
|
||||
|
||||
.loader {
|
||||
display: inline-block;
|
||||
width: 20px;
|
||||
height: 20px;
|
||||
border: 3px solid rgba(255,255,255,0.3);
|
||||
border-radius: 50%;
|
||||
border-top-color: white;
|
||||
animation: spin 1s ease-in-out infinite;
|
||||
}
|
||||
|
||||
@keyframes spin {
|
||||
to { transform: rotate(360deg); }
|
||||
}
|
||||
|
||||
.footer {
|
||||
text-align: center;
|
||||
padding: 20px 40px;
|
||||
background: #f8fafc;
|
||||
border-top: 1px solid #dee9f5;
|
||||
gap: 8px;
|
||||
font-size: 13px;
|
||||
color: #4f7092;
|
||||
}
|
||||
|
||||
.footer a {
|
||||
color: #3b82f6;
|
||||
text-decoration: none;
|
||||
}
|
||||
|
||||
@media (max-width: 600px) {
|
||||
/* Адаптация для очень маленьких экранов */
|
||||
@media (max-width: 380px) {
|
||||
.input-row {
|
||||
flex-direction: column;
|
||||
gap: 0;
|
||||
}
|
||||
|
||||
.role-selector {
|
||||
flex-direction: column;
|
||||
gap: 8px;
|
||||
.role-option {
|
||||
font-size: 13px;
|
||||
padding: 10px 5px;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
@@ -348,38 +237,35 @@
|
||||
<div class="register-header">
|
||||
<h1>
|
||||
<i class="fas fa-briefcase"></i>
|
||||
МП.Ярмарка
|
||||
Rabota.Today
|
||||
</h1>
|
||||
<p>Создайте аккаунт для доступа к ярмарке вакансий</p>
|
||||
<p>Регистрация на ярмарке вакансий</p>
|
||||
</div>
|
||||
|
||||
<div class="register-form">
|
||||
<!-- Сообщения об ошибках/успехе -->
|
||||
<div id="errorMessage" class="error-message" style="display: none;">
|
||||
<div id="errorMessage" class="error-message">
|
||||
<i class="fas fa-exclamation-circle"></i>
|
||||
<span id="errorText"></span>
|
||||
</div>
|
||||
|
||||
<div id="successMessage" class="success-message" style="display: none;">
|
||||
<div id="successMessage" class="success-message">
|
||||
<i class="fas fa-check-circle"></i>
|
||||
<span id="successText"></span>
|
||||
</div>
|
||||
|
||||
<!-- Выбор роли -->
|
||||
<div class="role-selector">
|
||||
<button class="role-option active" id="roleEmployeeBtn" type="button">
|
||||
<i class="fas fa-user"></i> Я соискатель
|
||||
<i class="fas fa-user"></i> Соискатель
|
||||
</button>
|
||||
<button class="role-option" id="roleEmployerBtn" type="button">
|
||||
<i class="fas fa-building"></i> Я работодатель
|
||||
<i class="fas fa-building"></i> Работодатель
|
||||
</button>
|
||||
</div>
|
||||
|
||||
<!-- Форма регистрации -->
|
||||
<form id="registerForm" onsubmit="handleRegister(event)">
|
||||
<div class="input-group">
|
||||
<label><i class="fas fa-user-circle"></i> ФИО *</label>
|
||||
<input type="text" id="fullName" placeholder="Иванов Иван Иванович" required>
|
||||
<input type="text" id="fullName" placeholder="Иванов Иван" required>
|
||||
</div>
|
||||
|
||||
<div class="input-group">
|
||||
@@ -404,68 +290,31 @@
|
||||
</div>
|
||||
|
||||
<div class="input-group">
|
||||
<label><i class="fas fa-lock"></i> Подтверждение пароля *</label>
|
||||
<input type="password" id="confirmPassword" placeholder="Введите пароль еще раз" required>
|
||||
<label><i class="fas fa-lock"></i> Подтверждение *</label>
|
||||
<input type="password" id="confirmPassword" placeholder="Повторите пароль" required>
|
||||
</div>
|
||||
|
||||
<!-- Требования к паролю -->
|
||||
<div class="password-requirements" id="passwordRequirements">
|
||||
<p><i class="fas fa-shield-alt"></i> Требования к паролю:</p>
|
||||
<div class="requirement" id="reqLength">
|
||||
<i class="far fa-circle"></i> Минимум 6 символов
|
||||
</div>
|
||||
<div class="requirement" id="reqMatch">
|
||||
<i class="far fa-circle"></i> Пароли совпадают
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Согласие с условиями -->
|
||||
<div class="terms">
|
||||
<input type="checkbox" id="terms" required>
|
||||
<label for="terms">
|
||||
Я принимаю <a href="#" onclick="showTerms()">условия использования</a>
|
||||
и даю согласие на обработку персональных данных
|
||||
</label>
|
||||
</div>
|
||||
|
||||
<!-- Кнопка регистрации -->
|
||||
<button type="submit" class="btn-register" id="registerBtn">
|
||||
<span>Зарегистрироваться</span>
|
||||
<i class="fas fa-arrow-right"></i>
|
||||
</button>
|
||||
</form>
|
||||
|
||||
<!-- Ссылка на вход -->
|
||||
<div class="login-link">
|
||||
Уже есть аккаунт?
|
||||
<a href="/login">Войти</a>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="footer">
|
||||
© 2026 Rabota.Today - Ярмарка вакансий.
|
||||
<a href="/">На главную</a>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Модальное окно с условиями использования -->
|
||||
<div id="termsModal" 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: 2000;">
|
||||
<div style="background: white; max-width: 500px; width: 90%; border-radius: 40px; padding: 40px; max-height: 80vh; overflow-y: auto;">
|
||||
<h3 style="margin-bottom: 20px; color: #0b1c34;">Условия использования</h3>
|
||||
<div style="color: #1f3f60; line-height: 1.6; margin-bottom: 30px;">
|
||||
<p>1. Регистрируясь на платформе, вы подтверждаете, что предоставленная информация является достоверной.</p>
|
||||
<p>2. Администрация платформы имеет право удалять аккаунты, нарушающие правила этики и законодательства РФ.</p>
|
||||
<p>3. Запрещено размещение вакансий, противоречащих законодательству РФ.</p>
|
||||
<p>4. Запрещено размещение резюме с недостоверной информацией.</p>
|
||||
<p>5. Платформа не несет ответственности за достоверность информации, размещенной пользователями.</p>
|
||||
<p>6. Персональные данные обрабатываются в соответствии с политикой конфиденциальности.</p>
|
||||
</div>
|
||||
<button class="btn-register" onclick="closeTerms()" style="margin-bottom: 0;">Закрыть</button>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<script>
|
||||
const API_BASE_URL = 'http://localhost:8000/api';
|
||||
const currentProtocol = window.location.protocol; // http: или https:
|
||||
const currentHost = window.location.host; // yarmarka.rabota.today или IP:порт
|
||||
let API_BASE_URL = `${currentProtocol}//${currentHost}/api`;
|
||||
let isSubmitting = false;
|
||||
|
||||
// Определение мобильного устройства
|
||||
const isMobile = /Android|webOS|iPhone|iPad|iPod|BlackBerry|IEMobile|Opera Mini/i.test(navigator.userAgent);
|
||||
|
||||
// Переключение роли
|
||||
document.getElementById('roleEmployeeBtn').addEventListener('click', () => {
|
||||
@@ -478,43 +327,6 @@
|
||||
document.getElementById('roleEmployeeBtn').classList.remove('active');
|
||||
});
|
||||
|
||||
// Валидация пароля в реальном времени
|
||||
const passwordInput = document.getElementById('password');
|
||||
const confirmInput = document.getElementById('confirmPassword');
|
||||
|
||||
function validatePassword() {
|
||||
const password = passwordInput.value;
|
||||
const confirm = confirmInput.value;
|
||||
|
||||
const reqLength = document.getElementById('reqLength');
|
||||
const reqMatch = document.getElementById('reqMatch');
|
||||
|
||||
// Проверка длины
|
||||
if (password.length >= 6) {
|
||||
reqLength.className = 'requirement valid';
|
||||
reqLength.innerHTML = '<i class="fas fa-check-circle"></i> Минимум 6 символов ✓';
|
||||
} else {
|
||||
reqLength.className = 'requirement invalid';
|
||||
reqLength.innerHTML = '<i class="fas fa-times-circle"></i> Минимум 6 символов';
|
||||
}
|
||||
|
||||
// Проверка совпадения
|
||||
if (password && confirm && password === confirm) {
|
||||
reqMatch.className = 'requirement valid';
|
||||
reqMatch.innerHTML = '<i class="fas fa-check-circle"></i> Пароли совпадают ✓';
|
||||
} else if (confirm) {
|
||||
reqMatch.className = 'requirement invalid';
|
||||
reqMatch.innerHTML = '<i class="fas fa-times-circle"></i> Пароли совпадают';
|
||||
} else {
|
||||
reqMatch.className = 'requirement';
|
||||
reqMatch.innerHTML = '<i class="far fa-circle"></i> Пароли совпадают';
|
||||
}
|
||||
}
|
||||
|
||||
passwordInput.addEventListener('input', validatePassword);
|
||||
confirmInput.addEventListener('input', validatePassword);
|
||||
|
||||
// Показать сообщение об ошибке
|
||||
function showError(message) {
|
||||
const errorDiv = document.getElementById('errorMessage');
|
||||
const errorText = document.getElementById('errorText');
|
||||
@@ -523,100 +335,61 @@
|
||||
|
||||
setTimeout(() => {
|
||||
errorDiv.style.display = 'none';
|
||||
}, 5000);
|
||||
}, 4000);
|
||||
}
|
||||
|
||||
// Показать сообщение об успехе
|
||||
function showSuccess(message) {
|
||||
const successDiv = document.getElementById('successMessage');
|
||||
const successText = document.getElementById('successText');
|
||||
successText.textContent = message;
|
||||
successDiv.style.display = 'flex';
|
||||
|
||||
setTimeout(() => {
|
||||
successDiv.style.display = 'none';
|
||||
}, 3000);
|
||||
}
|
||||
|
||||
// Показать состояние загрузки
|
||||
function setLoading(isLoading) {
|
||||
const registerBtn = document.getElementById('registerBtn');
|
||||
const btn = document.getElementById('registerBtn');
|
||||
if (isLoading) {
|
||||
registerBtn.innerHTML = '<span class="loader"></span><span>Регистрация...</span>';
|
||||
registerBtn.disabled = true;
|
||||
btn.innerHTML = '<i class="fas fa-spinner fa-spin"></i> Регистрация...';
|
||||
btn.disabled = true;
|
||||
isSubmitting = true;
|
||||
} else {
|
||||
registerBtn.innerHTML = '<span>Зарегистрироваться</span><i class="fas fa-arrow-right"></i>';
|
||||
registerBtn.disabled = false;
|
||||
btn.innerHTML = '<span>Зарегистрироваться</span><i class="fas fa-arrow-right"></i>';
|
||||
btn.disabled = false;
|
||||
isSubmitting = false;
|
||||
}
|
||||
}
|
||||
|
||||
// Обработка регистрации
|
||||
async function handleRegister(event) {
|
||||
event.preventDefault();
|
||||
|
||||
// Получаем значения полей
|
||||
if (isSubmitting) return;
|
||||
|
||||
const fullName = document.getElementById('fullName').value.trim();
|
||||
const email = document.getElementById('email').value.trim();
|
||||
const phone = document.getElementById('phone').value.trim();
|
||||
const telegram = document.getElementById('telegram').value.trim() || null;
|
||||
const password = document.getElementById('password').value;
|
||||
const confirmPassword = document.getElementById('confirmPassword').value;
|
||||
const termsChecked = document.getElementById('terms').checked;
|
||||
|
||||
// Определяем роль
|
||||
const role = document.getElementById('roleEmployeeBtn').classList.contains('active') ? 'employee' : 'employer';
|
||||
|
||||
// Валидация
|
||||
if (!fullName) {
|
||||
showError('Введите ФИО');
|
||||
document.getElementById('fullName').focus();
|
||||
return;
|
||||
}
|
||||
|
||||
if (!email) {
|
||||
showError('Введите email');
|
||||
document.getElementById('email').focus();
|
||||
return;
|
||||
}
|
||||
|
||||
if (!email.includes('@') || !email.includes('.')) {
|
||||
showError('Введите корректный email');
|
||||
document.getElementById('email').focus();
|
||||
return;
|
||||
}
|
||||
|
||||
if (!phone) {
|
||||
showError('Введите телефон');
|
||||
document.getElementById('phone').focus();
|
||||
return;
|
||||
}
|
||||
|
||||
// Простая валидация телефона (можно улучшить)
|
||||
const phoneDigits = phone.replace(/\D/g, '');
|
||||
if (phoneDigits.length < 10) {
|
||||
showError('Введите корректный телефон (минимум 10 цифр)');
|
||||
document.getElementById('phone').focus();
|
||||
if (!fullName || !email || !phone || !password) {
|
||||
showError('Заполните все обязательные поля');
|
||||
return;
|
||||
}
|
||||
|
||||
if (password.length < 6) {
|
||||
showError('Пароль должен содержать минимум 6 символов');
|
||||
document.getElementById('password').focus();
|
||||
showError('Пароль должен быть минимум 6 символов');
|
||||
return;
|
||||
}
|
||||
|
||||
if (password !== confirmPassword) {
|
||||
showError('Пароли не совпадают');
|
||||
document.getElementById('confirmPassword').focus();
|
||||
return;
|
||||
}
|
||||
|
||||
if (!termsChecked) {
|
||||
showError('Необходимо принять условия использования');
|
||||
return;
|
||||
}
|
||||
setLoading(true);
|
||||
|
||||
// Подготавливаем данные для отправки
|
||||
try {
|
||||
const userData = {
|
||||
full_name: fullName,
|
||||
email: email,
|
||||
@@ -626,62 +399,53 @@
|
||||
role: role
|
||||
};
|
||||
|
||||
setLoading(true);
|
||||
console.log('Sending registration request...', { email: userData.email });
|
||||
|
||||
try {
|
||||
const response = await fetch(`${API_BASE_URL}/register`, {
|
||||
method: 'POST',
|
||||
headers: {
|
||||
'Content-Type': 'application/json',
|
||||
'Accept': 'application/json',
|
||||
'X-Requested-With': 'XMLHttpRequest'
|
||||
},
|
||||
body: JSON.stringify(userData)
|
||||
body: JSON.stringify(userData),
|
||||
credentials: 'include' // Важно для мобильных
|
||||
});
|
||||
|
||||
console.log('Response status:', response.status);
|
||||
|
||||
const data = await response.json();
|
||||
|
||||
if (!response.ok) {
|
||||
throw new Error(data.detail || 'Ошибка регистрации');
|
||||
}
|
||||
|
||||
// Успешная регистрация
|
||||
showSuccess('Регистрация успешна! Перенаправляем...');
|
||||
console.log('Registration successful');
|
||||
|
||||
// Сохраняем токен
|
||||
if (data.access_token) {
|
||||
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';
|
||||
}, 1500);
|
||||
} else {
|
||||
throw new Error('Токен не получен');
|
||||
}
|
||||
|
||||
} catch (error) {
|
||||
showError(error.message);
|
||||
console.error('Registration error:', error);
|
||||
showError(error.message || 'Ошибка соединения');
|
||||
setLoading(false);
|
||||
}
|
||||
}
|
||||
|
||||
// Функции для модального окна с условиями
|
||||
function showTerms() {
|
||||
document.getElementById('termsModal').style.display = 'flex';
|
||||
return false;
|
||||
}
|
||||
|
||||
function closeTerms() {
|
||||
document.getElementById('termsModal').style.display = 'none';
|
||||
}
|
||||
|
||||
// Закрытие модалки по клику вне окна
|
||||
window.onclick = function(event) {
|
||||
const modal = document.getElementById('termsModal');
|
||||
if (event.target === modal) {
|
||||
modal.style.display = 'none';
|
||||
}
|
||||
};
|
||||
|
||||
// Автоматическое форматирование телефона (простой вариант)
|
||||
// Автоматическое форматирование телефона
|
||||
document.getElementById('phone').addEventListener('input', function(e) {
|
||||
let x = e.target.value.replace(/\D/g, '').match(/(\d{0,1})(\d{0,3})(\d{0,3})(\d{0,2})(\d{0,2})/);
|
||||
if (x) {
|
||||
@@ -690,7 +454,7 @@
|
||||
}
|
||||
});
|
||||
|
||||
// Проверяем, может пользователь уже залогинен
|
||||
// Проверка существующей сессии
|
||||
if (localStorage.getItem('accessToken')) {
|
||||
window.location.href = '/profile';
|
||||
}
|
||||
|
||||
@@ -33,8 +33,6 @@
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
flex-wrap: wrap;
|
||||
gap: 20px;
|
||||
}
|
||||
|
||||
.logo {
|
||||
@@ -56,7 +54,6 @@
|
||||
display: flex;
|
||||
gap: 15px;
|
||||
align-items: center;
|
||||
flex-wrap: wrap;
|
||||
}
|
||||
|
||||
.nav a {
|
||||
@@ -64,7 +61,6 @@
|
||||
text-decoration: none;
|
||||
padding: 10px 20px;
|
||||
border-radius: 30px;
|
||||
transition: 0.2s;
|
||||
}
|
||||
|
||||
.nav a:hover {
|
||||
@@ -83,33 +79,6 @@
|
||||
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;
|
||||
}
|
||||
|
||||
.back-link {
|
||||
display: inline-block;
|
||||
margin-bottom: 20px;
|
||||
@@ -206,8 +175,10 @@
|
||||
.section-title {
|
||||
font-size: 24px;
|
||||
color: #0b1c34;
|
||||
margin: 30px 0 20px;
|
||||
margin: 40px 0 20px;
|
||||
font-weight: 600;
|
||||
border-bottom: 2px solid #dee9f5;
|
||||
padding-bottom: 10px;
|
||||
}
|
||||
|
||||
.about-me {
|
||||
@@ -219,35 +190,82 @@
|
||||
font-size: 16px;
|
||||
}
|
||||
|
||||
.experience-item, .education-item {
|
||||
.experience-item {
|
||||
background: #f9fcff;
|
||||
border-radius: 20px;
|
||||
padding: 25px;
|
||||
margin-bottom: 20px;
|
||||
border-left: 4px solid #3b82f6;
|
||||
}
|
||||
|
||||
.item-header {
|
||||
.experience-header {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
margin-bottom: 15px;
|
||||
margin-bottom: 10px;
|
||||
flex-wrap: wrap;
|
||||
gap: 10px;
|
||||
}
|
||||
|
||||
.item-title {
|
||||
.experience-title {
|
||||
font-size: 20px;
|
||||
font-weight: 700;
|
||||
color: #0b1c34;
|
||||
}
|
||||
|
||||
.experience-company {
|
||||
font-size: 18px;
|
||||
color: #3b82f6;
|
||||
font-weight: 600;
|
||||
margin-bottom: 5px;
|
||||
}
|
||||
|
||||
.experience-period {
|
||||
color: #4f7092;
|
||||
font-size: 14px;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 5px;
|
||||
}
|
||||
|
||||
.experience-description {
|
||||
margin-top: 15px;
|
||||
padding: 15px;
|
||||
background: white;
|
||||
border-radius: 15px;
|
||||
line-height: 1.6;
|
||||
color: #1f3f60;
|
||||
white-space: pre-line;
|
||||
border-left: 3px solid #10b981;
|
||||
}
|
||||
|
||||
.education-item {
|
||||
background: #f9fcff;
|
||||
border-radius: 20px;
|
||||
padding: 20px;
|
||||
margin-bottom: 15px;
|
||||
}
|
||||
|
||||
.education-header {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
margin-bottom: 10px;
|
||||
flex-wrap: wrap;
|
||||
}
|
||||
|
||||
.education-institution {
|
||||
font-size: 18px;
|
||||
font-weight: 700;
|
||||
color: #0b1c34;
|
||||
}
|
||||
|
||||
.item-subtitle {
|
||||
.education-specialty {
|
||||
color: #3b82f6;
|
||||
font-weight: 600;
|
||||
margin-bottom: 10px;
|
||||
font-size: 16px;
|
||||
margin-bottom: 5px;
|
||||
}
|
||||
|
||||
.item-period {
|
||||
.education-year {
|
||||
color: #4f7092;
|
||||
font-size: 14px;
|
||||
}
|
||||
@@ -256,7 +274,7 @@
|
||||
background: #eef4fa;
|
||||
border-radius: 30px;
|
||||
padding: 30px;
|
||||
margin: 30px 0;
|
||||
margin: 40px 0 20px;
|
||||
}
|
||||
|
||||
.contact-grid {
|
||||
@@ -310,7 +328,6 @@
|
||||
|
||||
.btn-primary:hover {
|
||||
background: #1b3f6b;
|
||||
transform: translateY(-2px);
|
||||
}
|
||||
|
||||
.btn-outline {
|
||||
@@ -349,6 +366,15 @@
|
||||
font-size: 14px;
|
||||
color: #1f3f60;
|
||||
}
|
||||
|
||||
.admin-badge {
|
||||
background: #f59e0b;
|
||||
color: white;
|
||||
padding: 2px 8px;
|
||||
border-radius: 20px;
|
||||
font-size: 12px;
|
||||
margin-left: 5px;
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
@@ -356,10 +382,10 @@
|
||||
<div class="header">
|
||||
<div class="logo">
|
||||
<i class="fas fa-briefcase"></i>
|
||||
МП.Ярмарка
|
||||
Rabota.Today
|
||||
</div>
|
||||
<div class="nav" id="nav">
|
||||
<!-- Навигация будет заполнена динамически -->
|
||||
<!-- Навигация -->
|
||||
</div>
|
||||
</div>
|
||||
|
||||
@@ -371,7 +397,7 @@
|
||||
</div>
|
||||
|
||||
<script>
|
||||
const API_BASE_URL = 'http://localhost:8000/api';
|
||||
const API_BASE_URL = window.location.protocol + '//' + window.location.host + '/api';
|
||||
let currentUser = null;
|
||||
|
||||
// Получаем ID резюме из URL
|
||||
@@ -385,9 +411,7 @@
|
||||
if (token) {
|
||||
try {
|
||||
const response = await fetch(`${API_BASE_URL}/user`, {
|
||||
headers: {
|
||||
'Authorization': `Bearer ${token}`
|
||||
}
|
||||
headers: { 'Authorization': `Bearer ${token}` }
|
||||
});
|
||||
|
||||
if (response.ok) {
|
||||
@@ -403,12 +427,13 @@
|
||||
updateNavigation();
|
||||
}
|
||||
|
||||
// Обновление навигации
|
||||
function updateNavigation() {
|
||||
const nav = document.getElementById('nav');
|
||||
|
||||
if (currentUser) {
|
||||
// Пользователь авторизован
|
||||
const firstName = currentUser.full_name.split(' ')[0];
|
||||
const adminBadge = currentUser.is_admin ? '<span class="admin-badge">Admin</span>' : '';
|
||||
|
||||
nav.innerHTML = `
|
||||
<a href="/">Главная</a>
|
||||
<a href="/vacancies">Вакансии</a>
|
||||
@@ -416,13 +441,10 @@
|
||||
<a href="/favorites">Избранное</a>
|
||||
<a href="/applications">Отклики</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>' : ''}
|
||||
<i class="fas fa-user-circle"></i> ${firstName} ${adminBadge}
|
||||
</a>
|
||||
`;
|
||||
} else {
|
||||
// Пользователь не авторизован
|
||||
nav.innerHTML = `
|
||||
<a href="/">Главная</a>
|
||||
<a href="/vacancies">Вакансии</a>
|
||||
@@ -470,27 +492,37 @@
|
||||
const experienceHtml = resume.work_experience && resume.work_experience.length > 0
|
||||
? resume.work_experience.map(exp => `
|
||||
<div class="experience-item">
|
||||
<div class="item-header">
|
||||
<span class="item-title">${escapeHtml(exp.position)}</span>
|
||||
<span class="item-period">${escapeHtml(exp.period || 'Период не указан')}</span>
|
||||
<div class="experience-header">
|
||||
<span class="experience-title">${escapeHtml(exp.position)}</span>
|
||||
<span class="experience-period">
|
||||
<i class="far fa-calendar"></i> ${escapeHtml(exp.period || 'Период не указан')}
|
||||
</span>
|
||||
</div>
|
||||
<div class="item-subtitle">${escapeHtml(exp.company)}</div>
|
||||
<div class="experience-company">
|
||||
<i class="fas fa-building"></i> ${escapeHtml(exp.company)}
|
||||
</div>
|
||||
${exp.description ? `
|
||||
<div class="experience-description">
|
||||
<strong>📋 Обязанности и достижения:</strong>
|
||||
<p style="margin-top: 10px;">${escapeHtml(exp.description).replace(/\n/g, '<br>')}</p>
|
||||
</div>
|
||||
` : ''}
|
||||
</div>
|
||||
`).join('')
|
||||
: '<p style="color: #4f7092;">Опыт работы не указан</p>';
|
||||
: '<p style="color: #4f7092; text-align: center; padding: 20px;">Опыт работы не указан</p>';
|
||||
|
||||
// Формируем блок с образованием
|
||||
const educationHtml = resume.education && resume.education.length > 0
|
||||
? resume.education.map(edu => `
|
||||
<div class="education-item">
|
||||
<div class="item-header">
|
||||
<span class="item-title">${escapeHtml(edu.institution)}</span>
|
||||
<span class="item-period">${escapeHtml(edu.graduation_year || 'Год не указан')}</span>
|
||||
<div class="education-header">
|
||||
<span class="education-institution">${escapeHtml(edu.institution)}</span>
|
||||
<span class="education-year">${escapeHtml(edu.graduation_year || 'Год не указан')}</span>
|
||||
</div>
|
||||
<div class="item-subtitle">${escapeHtml(edu.specialty || 'Специальность не указана')}</div>
|
||||
<div class="education-specialty">${escapeHtml(edu.specialty || 'Специальность не указана')}</div>
|
||||
</div>
|
||||
`).join('')
|
||||
: '<p style="color: #4f7092;">Образование не указано</p>';
|
||||
: '<p style="color: #4f7092; text-align: center; padding: 20px;">Образование не указано</p>';
|
||||
|
||||
container.innerHTML = `
|
||||
<div class="resume-header">
|
||||
@@ -550,7 +582,10 @@
|
||||
<p style="color: #1f3f60; margin-bottom: 20px;">
|
||||
Контактные данные доступны только авторизованным работодателям
|
||||
</p>
|
||||
<a href="/login" class="btn btn-primary">Войти как работодатель</a>
|
||||
${!token ?
|
||||
'<a href="/login" class="btn btn-primary">Войти как работодатель</a>' :
|
||||
'<p class="btn btn-primary" style="opacity: 0.6;">Только для работодателей</p>'
|
||||
}
|
||||
</div>
|
||||
`}
|
||||
</div>
|
||||
@@ -560,10 +595,6 @@
|
||||
<button class="btn btn-primary" onclick="contactCandidate()">
|
||||
<i class="fas fa-paper-plane"></i> Связаться
|
||||
</button>
|
||||
` : !token ? `
|
||||
<button class="btn btn-primary" onclick="redirectToLogin()">
|
||||
<i class="fas fa-sign-in-alt"></i> Войдите чтобы увидеть контакты
|
||||
</button>
|
||||
` : ''}
|
||||
|
||||
<button class="btn btn-outline" onclick="saveToFavorites()">
|
||||
@@ -577,7 +608,6 @@
|
||||
`;
|
||||
}
|
||||
|
||||
// Связаться с кандидатом
|
||||
function contactCandidate() {
|
||||
const token = localStorage.getItem('accessToken');
|
||||
|
||||
@@ -586,11 +616,9 @@
|
||||
return;
|
||||
}
|
||||
|
||||
// Здесь можно открыть модальное окно с формой сообщения
|
||||
alert('Функция связи будет доступна в ближайшее время');
|
||||
}
|
||||
|
||||
// Добавить в избранное
|
||||
function saveToFavorites() {
|
||||
const token = localStorage.getItem('accessToken');
|
||||
|
||||
@@ -604,7 +632,6 @@
|
||||
alert('Резюме добавлено в избранное');
|
||||
}
|
||||
|
||||
// Поделиться резюме
|
||||
function shareResume() {
|
||||
const url = window.location.href;
|
||||
navigator.clipboard.writeText(url).then(() => {
|
||||
@@ -614,14 +641,12 @@
|
||||
});
|
||||
}
|
||||
|
||||
// Редирект на страницу входа
|
||||
function redirectToLogin() {
|
||||
if (confirm('Для просмотра контактов нужно войти в систему. Перейти на страницу входа?')) {
|
||||
window.location.href = '/login';
|
||||
}
|
||||
}
|
||||
|
||||
// Экранирование HTML
|
||||
function escapeHtml(unsafe) {
|
||||
if (!unsafe) return '';
|
||||
return unsafe.toString()
|
||||
@@ -632,7 +657,6 @@
|
||||
.replace(/'/g, "'");
|
||||
}
|
||||
|
||||
// Загрузка при старте
|
||||
checkAuth().then(() => {
|
||||
loadResume();
|
||||
});
|
||||
|
||||
@@ -335,7 +335,9 @@
|
||||
</div>
|
||||
|
||||
<script>
|
||||
const API_BASE_URL = 'http://localhost:8000/api';
|
||||
const currentProtocol = window.location.protocol; // http: или https:
|
||||
const currentHost = window.location.host; // yarmarka.rabota.today или IP:порт
|
||||
let API_BASE_URL = `${currentProtocol}//${currentHost}/api`;
|
||||
let currentPage = 1;
|
||||
let totalPages = 1;
|
||||
let searchTimeout;
|
||||
|
||||
@@ -381,7 +381,9 @@
|
||||
</div>
|
||||
|
||||
<script>
|
||||
const API_BASE_URL = 'http://localhost:8000/api';
|
||||
const currentProtocol = window.location.protocol; // http: или https:
|
||||
const currentHost = window.location.host; // yarmarka.rabota.today или IP:порт
|
||||
let API_BASE_URL = `${currentProtocol}//${currentHost}/api`;
|
||||
let currentUser = null;
|
||||
|
||||
// Получаем ID вакансии из URL
|
||||
|
||||
Reference in New Issue
Block a user