150 lines
7.1 KiB
HTML
150 lines
7.1 KiB
HTML
<!DOCTYPE html>
|
||
<html lang="ru">
|
||
<head>
|
||
<meta charset="utf-8">
|
||
<meta name="viewport" content="width=device-width,initial-scale=1">
|
||
<title>ИИ-Анализатор Резюме</title>
|
||
<style>
|
||
:root{--ink:#0F1218;--cyan:#00E5FF;--cyan-50:#E8FCFF;--white:#fff;--gray-500:#5B6573;--gray-100:#F2F4F7}
|
||
*{box-sizing:border-box;margin:0;padding:0}
|
||
body{font:17px/1.6 -apple-system,BlinkMacSystemFont,"Segoe UI",Inter,system-ui,sans-serif;color:var(--ink);background:var(--white)}
|
||
.container{max-width:1140px;margin:0 auto;padding:80px 24px}
|
||
.hero{background:var(--ink);color:var(--white)}
|
||
.hero h1{font-size:56px;font-weight:800;line-height:1.05;margin-bottom:24px}
|
||
.hero p{font-size:20px;color:#9aa3b2;max-width:600px;margin-bottom:32px}
|
||
.btn{display:inline-block;background:var(--cyan);color:var(--ink);padding:14px 28px;border-radius:8px;font-weight:700;text-decoration:none}
|
||
.btn:hover{background:#1be5ff}
|
||
.section h2{font-size:36px;font-weight:700;margin-bottom:24px}
|
||
.card{background:var(--gray-100);border-radius:16px;padding:32px;margin-bottom:16px}
|
||
.upload-form{max-width:600px;margin:0 auto}
|
||
textarea{width:100%;height:200px;padding:16px;border:2px solid var(--gray-100);border-radius:8px;font-family:inherit;font-size:16px;resize:vertical}
|
||
textarea:focus{outline:none;border-color:var(--cyan)}
|
||
.file-input{margin:16px 0}
|
||
.results{display:none;margin-top:40px}
|
||
.results h3{font-size:22px;font-weight:700;margin-bottom:16px}
|
||
.results .score{font-size:24px;font-weight:800;color:var(--cyan);margin-bottom:8px}
|
||
.results .section{margin-bottom:24px}
|
||
.results .section h4{font-size:18px;font-weight:700;margin-bottom:8px}
|
||
.results .section p{margin-bottom:8px}
|
||
@media (max-width:640px){.hero h1{font-size:36px}.section h2{font-size:28px}.container{padding:48px 20px}}
|
||
</style>
|
||
</head>
|
||
<body>
|
||
<section class="hero">
|
||
<div class="container">
|
||
<h1>ИИ-Анализатор Резюме</h1>
|
||
<p>Загрузите ваше резюме, и наш ИИ-агент проанализирует его, выделит ключевые компетенции и предложит подходящие должности.</p>
|
||
<a class="btn" href="#upload">Загрузить резюме</a>
|
||
</div>
|
||
</section>
|
||
<section id="upload" class="section">
|
||
<div class="container">
|
||
<h2>Загрузите ваше резюме</h2>
|
||
<div class="card upload-form">
|
||
<form id="resumeForm">
|
||
<textarea id="resumeText" placeholder="Вставьте текст вашего резюме сюда..."></textarea>
|
||
<div class="file-input">
|
||
<label for="resumeFile">Или загрузите файл (TXT, PDF, DOC):</label><br>
|
||
<input type="file" id="resumeFile" accept=".txt,.pdf,.doc,.docx">
|
||
</div>
|
||
<button type="submit" class="btn">Анализировать</button>
|
||
</form>
|
||
</div>
|
||
</div>
|
||
</section>
|
||
<section id="results" class="section results">
|
||
<div class="container">
|
||
<h2>Результаты анализа</h2>
|
||
<div class="card" id="resultsContent">
|
||
<!-- Результаты будут вставлены здесь -->
|
||
</div>
|
||
</div>
|
||
</section>
|
||
|
||
<script>
|
||
document.getElementById('resumeForm').addEventListener('submit', function(e) {
|
||
e.preventDefault();
|
||
|
||
const resumeText = document.getElementById('resumeText').value;
|
||
const fileInput = document.getElementById('resumeFile');
|
||
|
||
if (!resumeText && !fileInput.files.length) {
|
||
alert('Пожалуйста, вставьте текст резюме или загрузите файл');
|
||
return;
|
||
}
|
||
|
||
// Показываем индикатор загрузки
|
||
const resultsSection = document.getElementById('results');
|
||
const resultsContent = document.getElementById('resultsContent');
|
||
resultsSection.style.display = 'block';
|
||
resultsContent.innerHTML = '<div class="score">Анализируем ваше резюме...</div>';
|
||
|
||
// Имитация задержки анализа
|
||
setTimeout(function() {
|
||
analyzeResume(resumeText || 'Текст из файла');
|
||
}, 2000);
|
||
});
|
||
|
||
function analyzeResume(text) {
|
||
// Демо-анализ: определяем уровень на основе ключевых слов
|
||
let level = 'Middle';
|
||
let specialization = 'Специалист';
|
||
let score = 75;
|
||
|
||
const textLower = text.toLowerCase();
|
||
|
||
if (textLower.includes('senior') || textLower.includes('старший') || textLower.includes('lead') || textLower.includes('руководитель')) {
|
||
level = 'Senior';
|
||
score = 85;
|
||
} else if (textLower.includes('junior') || textLower.includes('младший') || textLower.includes('стажер')) {
|
||
level = 'Junior';
|
||
score = 60;
|
||
}
|
||
|
||
if (textLower.includes('разработчик') || textLower.includes('developer') || textLower.includes('программист')) {
|
||
specialization = 'Разработчик';
|
||
} else if (textLower.includes('менеджер') || textLower.includes('manager') || textLower.includes('руководитель')) {
|
||
specialization = 'Менеджер';
|
||
} else if (textLower.includes('аналитик') || textLower.includes('analyst')) {
|
||
specialization = 'Аналитик';
|
||
} else if (textLower.includes('дизайнер') || textLower.includes('designer')) {
|
||
specialization = 'Дизайнер';
|
||
} else if (textLower.includes('маркетолог') || textLower.includes('marketing')) {
|
||
specialization = 'Маркетолог';
|
||
}
|
||
|
||
// Формируем результаты
|
||
const resultsHTML = `
|
||
<div class="score">Общий балл: ${score}/100</div>
|
||
<div class="section">
|
||
<h4>Общая оценка</h4>
|
||
<p><strong>Уровень:</strong> ${level}</p>
|
||
<p><strong>Специализация:</strong> ${specialization}</p>
|
||
<p><strong>Предполагаемый стаж:</strong> ${level === 'Senior' ? '5+ лет' : level === 'Middle' ? '3-5 лет' : '1-3 года'}</p>
|
||
</div>
|
||
<div class="section">
|
||
<h4>Рекомендуемые должности</h4>
|
||
<p>• ${specialization} (${level})</p>
|
||
<p>• ${specialization}-${level === 'Senior' ? 'лидер' : 'специалист'}</p>
|
||
<p>• Тимлид ${specialization.toLowerCase()}</p>
|
||
</div>
|
||
<div class="section">
|
||
<h4>Ключевые компетенции</h4>
|
||
<p>• Профессиональная экспертиза: ${Math.min(10, Math.floor(score/10) + 1)}/10</p>
|
||
<p>• Практический опыт: ${Math.min(10, Math.floor(score/12) + 1)}/10</p>
|
||
<p>• Технические навыки: ${Math.min(10, Math.floor(score/11) + 1)}/10</p>
|
||
<p>• Коммуникационные навыки: ${Math.min(10, Math.floor(score/13) + 1)}/10</p>
|
||
<p>• Потенциал развития: ${Math.min(10, Math.floor(score/14) + 1)}/10</p>
|
||
</div>
|
||
<div class="section">
|
||
<h4>Рекомендация</h4>
|
||
<p>${score >= 80 ? 'Рекомендовать к интервью' : score >= 65 ? 'Рекомендовать с оговорками' : 'Рассмотреть альтернативно'}</p>
|
||
</div>
|
||
`;
|
||
|
||
document.getElementById('resultsContent').innerHTML = resultsHTML;
|
||
}
|
||
</script>
|
||
</body>
|
||
</html>
|