Spaces:
Running
Running
File size: 21,729 Bytes
fa8078c | 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 100 101 102 103 104 105 106 107 108 109 110 111 112 113 114 115 116 117 118 119 120 121 122 123 124 125 126 127 128 129 130 131 132 133 134 135 136 137 138 139 140 141 142 143 144 145 146 147 148 149 150 151 152 153 154 155 156 157 158 159 160 161 162 163 164 165 166 167 168 169 170 171 172 173 174 175 176 177 178 179 180 181 182 183 184 185 186 187 188 189 190 191 192 193 194 195 196 197 198 199 200 201 202 203 204 205 206 207 208 209 210 211 212 213 214 215 216 217 218 219 220 221 222 223 224 225 226 227 228 229 230 231 232 233 234 235 236 237 238 239 240 241 242 243 244 245 246 247 248 249 250 251 252 253 254 255 256 257 258 259 260 261 262 263 264 265 266 267 268 269 270 271 272 273 274 275 276 277 278 279 280 281 282 283 284 285 286 287 288 289 290 291 292 293 294 295 296 297 298 299 300 301 302 303 304 305 306 307 308 309 310 311 312 313 314 315 316 317 318 319 320 321 322 323 324 325 326 327 | <!DOCTYPE html>
<html lang="ru">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Добавить практику | Практика для студентов</title>
<script src="https://cdn.tailwindcss.com"></script>
<script src="https://cdn.jsdelivr.net/npm/feather-icons/dist/feather.min.js"></script>
<script src="https://unpkg.com/feather-icons"></script>
<style>
.skill-tag {
transition: all 0.2s ease;
}
.skill-tag:hover {
background-color: #e0e7ff;
}
.skill-tag.selected {
background-color: #4f46e5;
color: white;
}
</style>
</head>
<body class="font-sans bg-gray-50">
<!-- Header -->
<header class="bg-white shadow-sm">
<div class="container mx-auto px-4 py-4 flex justify-between items-center">
<a href="index.html" class="flex items-center">
<i data-feather="briefcase" class="text-indigo-600 mr-2"></i>
<span class="text-xl font-bold text-indigo-600">Практика.ру</span>
</a>
<nav class="hidden md:flex space-x-6">
<a href="employer-dashboard.html" class="text-gray-700 hover:text-indigo-600">Мои практики</a>
<a href="add-practice.html" class="text-indigo-600 font-medium">Добавить практику</a>
<a href="candidates.html" class="text-gray-700 hover:text-indigo-600">Кандидаты</a>
</nav>
<div class="flex items-center space-x-4">
<div class="relative">
<button id="user-menu-button" class="flex items-center space-x-2">
<img src="http://static.photos/office/200x200/3" alt="Профиль" class="w-8 h-8 rounded-full">
<span class="hidden md:inline">Компания</span>
</button>
<div class="hidden absolute right-0 mt-2 w-48 bg-white rounded-md shadow-lg py-1 z-10" id="user-menu">
<a href="employer-profile.html" class="block px-4 py-2 text-sm text-gray-700 hover:bg-gray-100">Профиль</a>
<a href="settings.html" class="block px-4 py-2 text-sm text-gray-700 hover:bg-gray-100">Настройки</a>
<a href="index.html" class="block px-4 py-2 text-sm text-gray-700 hover:bg-gray-100">Выйти</a>
</div>
</div>
</div>
<button class="md:hidden" id="mobile-menu-button">
<i data-feather="menu"></i>
</button>
</div>
<!-- Mobile menu -->
<div class="md:hidden hidden bg-white py-2 px-4 shadow-md" id="mobile-menu">
<a href="employer-dashboard.html" class="block py-2 text-gray-700 hover:text-indigo-600">Мои практики</a>
<a href="add-practice.html" class="block py-2 text-indigo-600">Добавить практику</a>
<a href="candidates.html" class="block py-2 text-gray-700 hover:text-indigo-600">Кандидаты</a>
<div class="border-t my-2"></div>
<a href="employer-profile.html" class="block py-2 text-gray-700 hover:text-indigo-600">Профиль</a>
<a href="settings.html" class="block py-2 text-gray-700 hover:text-indigo-600">Настройки</a>
<a href="index.html" class="block py-2 text-gray-700 hover:text-indigo-600">Выйти</a>
</div>
</header>
<!-- Main Content -->
<main class="container mx-auto px-4 py-8">
<div class="max-w-4xl mx-auto">
<div class="mb-6">
<h1 class="text-2xl font-bold text-gray-800">Добавить новую практику</h1>
<p class="text-gray-600">Заполните форму, чтобы опубликовать вакансию для студентов</p>
</div>
<form id="practice-form" class="bg-white rounded-lg shadow-md p-6 md:p-8">
<!-- Practice Details -->
<div class="mb-8">
<h2 class="text-xl font-semibold mb-4 text-gray-800">Основная информация</h2>
<div class="grid md:grid-cols-2 gap-6">
<div>
<label for="practice-title" class="block text-sm font-medium text-gray-700 mb-1">Название практики*</label>
<input type="text" id="practice-title" name="practice-title" required class="w-full px-4 py-2 border rounded-md focus:ring-indigo-500 focus:border-indigo-500" placeholder="Например: Frontend разработчик">
</div>
<div>
<label for="practice-type" class="block text-sm font-medium text-gray-700 mb-1">Тип практики*</label>
<select id="practice-type" name="practice-type" required class="w-full px-4 py-2 border rounded-md focus:ring-indigo-500 focus:border-indigo-500">
<option value="">Выберите тип</option>
<option value="summer">Летняя</option>
<option value="winter">Зимняя</option>
<option value="year-round">Круглогодичная</option>
<option value="pre-diploma">Преддипломная</option>
<option value="production">Производственная</option>
</select>
</div>
<div>
<label for="practice-field" class="block text-sm font-medium text-gray-700 mb-1">Сфера деятельности*</label>
<select id="practice-field" name="practice-field" required class="w-full px-4 py-2 border rounded-md focus:ring-indigo-500 focus:border-indigo-500">
<option value="">Выберите сферу</option>
<option value="IT">IT и программирование</option>
<option value="marketing">Маркетинг и реклама</option>
<option value="finance">Финансы и банки</option>
<option value="consulting">Консалтинг</option>
<option value="engineering">Инженерия</option>
<option value="medicine">Медицина</option>
<option value="education">Образование</option>
<option value="other">Другое</option>
</select>
</div>
<div>
<label for="practice-salary" class="block text-sm font-medium text-gray-700 mb-1">Оклад (в месяц)</label>
<input type="number" id="practice-salary" name="practice-salary" class="w-full px-4 py-2 border rounded-md focus:ring-indigo-500 focus:border-indigo-500" placeholder="Укажите сумму в рублях">
</div>
</div>
</div>
<!-- Description -->
<div class="mb-8">
<h2 class="text-xl font-semibold mb-4 text-gray-800">Описание практики</h2>
<div>
<label for="practice-description" class="block text-sm font-medium text-gray-700 mb-1">Подробное описание*</label>
<textarea id="practice-description" name="practice-description" rows="5" required class="w-full px-4 py-2 border rounded-md focus:ring-indigo-500 focus:border-indigo-500" placeholder="Опишите задачи, которые будет выполнять студент, условия работы, требования и т.д."></textarea>
</div>
</div>
<!-- Location -->
<div class="mb-8">
<h2 class="text-xl font-semibold mb-4 text-gray-800">Местоположение</h2>
<div class="grid md:grid-cols-2 gap-6">
<div>
<label for="practice-city" class="block text-sm font-medium text-gray-700 mb-1">Город*</label>
<select id="practice-city" name="practice-city" required class="w-full px-4 py-2 border rounded-md focus:ring-indigo-500 focus:border-indigo-500">
<option value="">Выберите город</option>
<option value="Москва">Москва</option>
<option value="Санкт-Петербург">Санкт-Петербург</option>
<option value="Новосибирск">Новосибирск</option>
<option value="Екатеринбург">Екатеринбург</option>
<option value="Казань">Казань</option>
<option value="Нижний Новгород">Нижний Новгород</option>
<option value="Челябинск">Челябинск</option>
<option value="Самара">Самара</option>
<option value="remote">Удалённая работа</option>
</select>
</div>
<div>
<label for="practice-address" class="block text-sm font-medium text-gray-700 mb-1">Адрес</label>
<input type="text" id="practice-address" name="practice-address" class="w-full px-4 py-2 border rounded-md focus:ring-indigo-500 focus:border-indigo-500" placeholder="Улица, дом, офис">
</div>
</div>
</div>
<!-- Required Skills -->
<div class="mb-8">
<h2 class="text-xl font-semibold mb-4 text-gray-800">Требуемые навыки</h2>
<div>
<label class="block text-sm font-medium text-gray-700 mb-2">Выберите навыки*</label>
<div class="flex flex-wrap gap-2 mb-4" id="skills-container">
<span class="skill-tag cursor-pointer px-3 py-1 bg-gray-100 rounded-full text-sm">JavaScript</span>
<span class="skill-tag cursor-pointer px-3 py-1 bg-gray-100 rounded-full text-sm">Python</span>
<span class="skill-tag cursor-pointer px-3 py-1 bg-gray-100 rounded-full text-sm">Java</span>
<span class="skill-tag cursor-pointer px-3 py-1 bg-gray-100 rounded-full text-sm">SQL</span>
<span class="skill-tag cursor-pointer px-3 py-1 bg-gray-100 rounded-full text-sm">HTML/CSS</span>
<span class="skill-tag cursor-pointer px-3 py-1 bg-gray-100 rounded-full text-sm">React</span>
<span class="skill-tag cursor-pointer px-3 py-1 bg-gray-100 rounded-full text-sm">Анализ данных</span>
<span class="skill-tag cursor-pointer px-3 py-1 bg-gray-100 rounded-full text-sm">Дизайн</span>
<span class="skill-tag cursor-pointer px-3 py-1 bg-gray-100 rounded-full text-sm">Маркетинг</span>
<span class="skill-tag cursor-pointer px-3 py-1 bg-gray-100 rounded-full text-sm">Управление проектами</span>
</div>
<input type="hidden" id="selected-skills" name="selected-skills">
</div>
</div>
<!-- Required Specialties -->
<div class="mb-8">
<h2 class="text-xl font-semibold mb-4 text-gray-800">Подходящие направления обучения</h2>
<div>
<label class="block text-sm font-medium text-gray-700 mb-2">Выберите направления*</label>
<div class="grid md:grid-cols-2 gap-4">
<div class="flex items-center">
<input type="checkbox" id="specialty-it" name="specialty" value="Информатика" class="mr-2">
<label for="specialty-it">Информатика и вычислительная техника</label>
</div>
<div class="flex items-center">
<input type="checkbox" id="specialty-math" name="specialty" value="Математика" class="mr-2">
<label for="specialty-math">Математика</label>
</div>
<div class="flex items-center">
<input type="checkbox" id="specialty-physics" name="specialty" value="Физика" class="mr-2">
<label for="specialty-physics">Физика</label>
</div>
<div class="flex items-center">
<input type="checkbox" id="specialty-economics" name="specialty" value="Экономика" class="mr-2">
<label for="specialty-economics">Экономика</label>
</div>
<div class="flex items-center">
<input type="checkbox" id="specialty-management" name="specialty" value="Менеджмент" class="mr-2">
<label for="specialty-management">Менеджмент</label>
</div>
<div class="flex items-center">
<input type="checkbox" id="specialty-law" name="specialty" value="Юриспруденция" class="mr-2">
<label for="specialty-law">Юриспруденция</label>
</div>
<div class="flex items-center">
<input type="checkbox" id="specialty-linguistics" name="specialty" value="Лингвистика" class="mr-2">
<label for="specialty-linguistics">Лингвистика</label>
</div>
<div class="flex items-center">
<input type="checkbox" id="specialty-psychology" name="specialty" value="Психология" class="mr-2">
<label for="specialty-psychology">Психология</label>
</div>
</div>
</div>
</div>
<!-- Duration and Dates -->
<div class="mb-8">
<h2 class="text-xl font-semibold mb-4 text-gray-800">Сроки практики</h2>
<div class="grid md:grid-cols-2 gap-6">
<div>
<label for="practice-start" class="block text-sm font-medium text-gray-700 mb-1">Дата начала*</label>
<input type="date" id="practice-start" name="practice-start" required class="w-full px-4 py-2 border rounded-md focus:ring-indigo-500 focus:border-indigo-500">
</div>
<div>
<label for="practice-end" class="block text-sm font-medium text-gray-700 mb-1">Дата окончания*</label>
<input type="date" id="practice-end" name="practice-end" required class="w-full px-4 py-2 border rounded-md focus:ring-indigo-500 focus:border-indigo-500">
</div>
<div>
<label for="practice-duration" class="block text-sm font-medium text-gray-700 mb-1">Продолжительность (недель)*</label>
<input type="number" id="practice-duration" name="practice-duration" required class="w-full px-4 py-2 border rounded-md focus:ring-indigo-500 focus:border-indigo-500" placeholder="Например: 8">
</div>
<div>
<label for="practice-hours" class="block text-sm font-medium text-gray-700 mb-1">Часов в неделю*</label>
<select id="practice-hours" name="practice-hours" required class="w-full px-4 py-2 border rounded-md focus:ring-indigo-500 focus:border-indigo-500">
<option value="20">20 часов (неполный день)</option>
<option value="30">30 часов</option>
<option value="40" selected>40 часов (полный день)</option>
</select>
</div>
</div>
</div>
<!-- Additional Info -->
<div class="mb-8">
<h2 class="text-xl font-semibold mb-4 text-gray-800">Дополнительная информация</h2>
<div class="space-y-4">
<div class="flex items-center">
<input type="checkbox" id="practice-remote" name="practice-remote" class="mr-2">
<label for="practice-remote">Возможна удалённая работа</label>
</div>
<div class="flex items-center">
<input type="checkbox" id="practice-relocation" name="practice-relocation" class="mr-2">
<label for="practice-relocation">Возможен переезд (компенсация)</label>
</div>
<div class="flex items-center">
<input type="checkbox" id="practice-employment" name="practice-employment" class="mr-2">
<label for="practice-employment">Возможность трудоустройства после практики</label>
</div>
</div>
</div>
<!-- Submit -->
<div class="flex justify-end">
<button type="submit" class="bg-indigo-600 text-white px-6 py-3 rounded-md hover:bg-indigo-700 transition font-medium">
Опубликовать практику
</button>
</div>
</form>
</div>
</main>
<script>
feather.replace();
// Mobile menu toggle
document.getElementById('mobile-menu-button').addEventListener('click', function() {
const menu = document.getElementById('mobile-menu');
menu.classList.toggle('hidden');
});
// User menu toggle
document.getElementById('user-menu-button').addEventListener('click', function() {
const menu = document.getElementById('user-menu');
menu.classList.toggle('hidden');
});
// Skill selection
const skillTags = document.querySelectorAll('.skill-tag');
const selectedSkillsInput = document.getElementById('selected-skills');
let selectedSkills = [];
skillTags.forEach(tag => {
tag.addEventListener('click', function() {
const skill = this.textContent;
if (this.classList.contains('selected')) {
this.classList.remove('selected');
selectedSkills = selectedSkills.filter(s => s !== skill);
} else {
this.classList.add('selected');
selectedSkills.push(skill);
}
selectedSkillsInput.value = selectedSkills.join(', ');
});
});
// Form submission
document.getElementById('practice-form').addEventListener('submit', function(e) {
e.preventDefault();
// Validate required fields
if (selectedSkills.length === 0) {
alert('Пожалуйста, выберите хотя бы один навык');
return;
}
const specialties = Array.from(document.querySelectorAll('input[name="specialty"]:checked'));
if (specialties.length === 0) {
alert('Пожалуйста, выберите хотя бы одно направление обучения');
return;
}
// Here would be AJAX request to backend
alert('Практика успешно опубликована!');
window.location.href = 'employer-dashboard.html';
});
</script>
</body>
</html>
|