Spaces:
Running
Running
Мне нужен сайт на русском языке по поиску практик для студентов и работодателей для них.
fa8078c verified | <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> | |
| .form-section { | |
| transition: all 0.3s ease; | |
| } | |
| .form-section.hidden { | |
| display: none; | |
| } | |
| .tab-active { | |
| border-bottom: 3px solid #4f46e5; | |
| color: #4f46e5; | |
| font-weight: 600; | |
| } | |
| </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> | |
| <a href="login.html" class="text-gray-700 hover:text-indigo-600">Уже есть аккаунт? Войти</a> | |
| </div> | |
| </header> | |
| <!-- Registration Form --> | |
| <main class="container mx-auto px-4 py-12 max-w-4xl"> | |
| <div class="bg-white rounded-lg shadow-md overflow-hidden"> | |
| <div class="flex border-b"> | |
| <button id="student-tab" class="flex-1 py-4 px-6 text-center tab-active">Студент</button> | |
| <button id="employer-tab" class="flex-1 py-4 px-6 text-center">Работодатель</button> | |
| </div> | |
| <!-- Student Registration Form --> | |
| <div id="student-form" class="form-section p-6 md:p-8"> | |
| <h2 class="text-2xl font-bold mb-6">Регистрация студента</h2> | |
| <form id="student-registration"> | |
| <div class="grid md:grid-cols-2 gap-6"> | |
| <!-- Personal Info --> | |
| <div class="md:col-span-2"> | |
| <h3 class="text-lg font-semibold mb-4 text-gray-700">Личные данные</h3> | |
| <div class="grid md:grid-cols-3 gap-4"> | |
| <div> | |
| <label for="surname" class="block text-sm font-medium text-gray-700 mb-1">Фамилия*</label> | |
| <input type="text" id="surname" name="surname" required class="w-full px-4 py-2 border rounded-md focus:ring-indigo-500 focus:border-indigo-500"> | |
| </div> | |
| <div> | |
| <label for="name" class="block text-sm font-medium text-gray-700 mb-1">Имя*</label> | |
| <input type="text" id="name" name="name" required class="w-full px-4 py-2 border rounded-md focus:ring-indigo-500 focus:border-indigo-500"> | |
| </div> | |
| <div> | |
| <label for="patronymic" class="block text-sm font-medium text-gray-700 mb-1">Отчество</label> | |
| <input type="text" id="patronymic" name="patronymic" class="w-full px-4 py-2 border rounded-md focus:ring-indigo-500 focus:border-indigo-500"> | |
| </div> | |
| </div> | |
| </div> | |
| <!-- Contact Info --> | |
| <div> | |
| <label for="phone" class="block text-sm font-medium text-gray-700 mb-1">Телефон*</label> | |
| <input type="tel" id="phone" name="phone" required class="w-full px-4 py-2 border rounded-md focus:ring-indigo-500 focus:border-indigo-500"> | |
| </div> | |
| <div> | |
| <label for="email" class="block text-sm font-medium text-gray-700 mb-1">Email*</label> | |
| <input type="email" id="email" name="email" required class="w-full px-4 py-2 border rounded-md focus:ring-indigo-500 focus:border-indigo-500"> | |
| </div> | |
| <!-- Education Info --> | |
| <div> | |
| <label for="university" class="block text-sm font-medium text-gray-700 mb-1">Учебное заведение*</label> | |
| <select id="university" name="university" 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="other">Другое</option> | |
| </select> | |
| </div> | |
| <div> | |
| <label for="specialty" class="block text-sm font-medium text-gray-700 mb-1">Направление*</label> | |
| <select id="specialty" name="specialty" 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="Медицина">Медицина</option> | |
| <option value="other">Другое</option> | |
| </select> | |
| </div> | |
| <div> | |
| <label for="course" class="block text-sm font-medium text-gray-700 mb-1">Курс*</label> | |
| <select id="course" name="course" required class="w-full px-4 py-2 border rounded-md focus:ring-indigo-500 focus:border-indigo-500"> | |
| <option value="">Выберите курс</option> | |
| <option value="1">1 курс</option> | |
| <option value="2">2 курс</option> | |
| <option value="3">3 курс</option> | |
| <option value="4">4 курс</option> | |
| <option value="5">5 курс</option> | |
| <option value="6">6 курс</option> | |
| </select> | |
| </div> | |
| <div> | |
| <label for="graduation-year" class="block text-sm font-medium text-gray-700 mb-1">Год окончания*</label> | |
| <select id="graduation-year" name="graduation-year" required class="w-full px-4 py-2 border rounded-md focus:ring-indigo-500 focus:border-indigo-500"> | |
| <option value="">Выберите год</option> | |
| <option value="2023">2023</option> | |
| <option value="2024">2024</option> | |
| <option value="2025">2025</option> | |
| <option value="2026">2026</option> | |
| <option value="2027">2027</option> | |
| </select> | |
| </div> | |
| <!-- Skills --> | |
| <div class="md:col-span-2"> | |
| <label class="block text-sm font-medium text-gray-700 mb-2">Навыки</label> | |
| <div class="flex flex-wrap gap-2"> | |
| <div class="flex items-center"> | |
| <input type="checkbox" id="skill-js" name="skills" value="JavaScript" class="mr-2"> | |
| <label for="skill-js">JavaScript</label> | |
| </div> | |
| <div class="flex items-center"> | |
| <input type="checkbox" id="skill-python" name="skills" value="Python" class="mr-2"> | |
| <label for="skill-python">Python</label> | |
| </div> | |
| <div class="flex items-center"> | |
| <input type="checkbox" id="skill-java" name="skills" value="Java" class="mr-2"> | |
| <label for="skill-java">Java</label> | |
| </div> | |
| <div class="flex items-center"> | |
| <input type="checkbox" id="skill-sql" name="skills" value="SQL" class="mr-2"> | |
| <label for="skill-sql">SQL</label> | |
| </div> | |
| <div class="flex items-center"> | |
| <input type="checkbox" id="skill-html" name="skills" value="HTML/CSS" class="mr-2"> | |
| <label for="skill-html">HTML/CSS</label> | |
| </div> | |
| <div class="flex items-center"> | |
| <input type="checkbox" id="skill-react" name="skills" value="React" class="mr-2"> | |
| <label for="skill-react">React</label> | |
| </div> | |
| <div class="flex items-center"> | |
| <input type="checkbox" id="skill-analysis" name="skills" value="Анализ данных" class="mr-2"> | |
| <label for="skill-analysis">Анализ данных</label> | |
| </div> | |
| <div class="flex items-center"> | |
| <input type="checkbox" id="skill-design" name="skills" value="Дизайн" class="mr-2"> | |
| <label for="skill-design">Дизайн</label> | |
| </div> | |
| </div> | |
| </div> | |
| <!-- Password --> | |
| <div> | |
| <label for="password" class="block text-sm font-medium text-gray-700 mb-1">Пароль*</label> | |
| <input type="password" id="password" name="password" required class="w-full px-4 py-2 border rounded-md focus:ring-indigo-500 focus:border-indigo-500"> | |
| <p class="text-xs text-gray-500 mt-1">Минимум 8 символов</p> | |
| </div> | |
| <div> | |
| <label for="confirm-password" class="block text-sm font-medium text-gray-700 mb-1">Подтвердите пароль*</label> | |
| <input type="password" id="confirm-password" name="confirm-password" required class="w-full px-4 py-2 border rounded-md focus:ring-indigo-500 focus:border-indigo-500"> | |
| </div> | |
| </div> | |
| <!-- Agreement --> | |
| <div class="mt-6"> | |
| <div class="flex items-start"> | |
| <input type="checkbox" id="agreement" name="agreement" required class="mt-1 mr-2"> | |
| <label for="agreement" class="text-sm text-gray-700"> | |
| Я согласен(а) на обработку персональных данных в соответствии с <a href="#" class="text-indigo-600 hover:underline">Политикой конфиденциальности</a> | |
| </label> | |
| </div> | |
| </div> | |
| <!-- Submit --> | |
| <div class="mt-8"> | |
| <button type="submit" class="w-full bg-indigo-600 text-white py-3 px-4 rounded-md hover:bg-indigo-700 transition font-medium"> | |
| Зарегистрироваться | |
| </button> | |
| </div> | |
| </form> | |
| </div> | |
| <!-- Employer Registration Form --> | |
| <div id="employer-form" class="form-section hidden p-6 md:p-8"> | |
| <h2 class="text-2xl font-bold mb-6">Регистрация работодателя</h2> | |
| <form id="employer-registration"> | |
| <div class="grid md:grid-cols-2 gap-6"> | |
| <!-- Company Info --> | |
| <div class="md:col-span-2"> | |
| <h3 class="text-lg font-semibold mb-4 text-gray-700">Информация о компании</h3> | |
| <div> | |
| <label for="company-name" class="block text-sm font-medium text-gray-700 mb-1">Название компании*</label> | |
| <input type="text" id="company-name" name="company-name" required class="w-full px-4 py-2 border rounded-md focus:ring-indigo-500 focus:border-indigo-500"> | |
| </div> | |
| </div> | |
| <div class="md:col-span-2"> | |
| <label for="company-description" class="block text-sm font-medium text-gray-700 mb-1">Описание компании*</label> | |
| <textarea id="company-description" name="company-description" rows="3" required class="w-full px-4 py-2 border rounded-md focus:ring-indigo-500 focus:border-indigo-500"></textarea> | |
| </div> | |
| <!-- Contact Info --> | |
| <div> | |
| <label for="contact-person" class="block text-sm font-medium text-gray-700 mb-1">Контактное лицо*</label> | |
| <input type="text" id="contact-person" name="contact-person" required class="w-full px-4 py-2 border rounded-md focus:ring-indigo-500 focus:border-indigo-500"> | |
| </div> | |
| <div> | |
| <label for="contact-position" class="block text-sm font-medium text-gray-700 mb-1">Должность*</label> | |
| <input type="text" id="contact-position" name="contact-position" required class="w-full px-4 py-2 border rounded-md focus:ring-indigo-500 focus:border-indigo-500"> | |
| </div> | |
| <div> | |
| <label for="employer-phone" class="block text-sm font-medium text-gray-700 mb-1">Телефон*</label> | |
| <input type="tel" id="employer-phone" name="employer-phone" required class="w-full px-4 py-2 border rounded-md focus:ring-indigo-500 focus:border-indigo-500"> | |
| </div> | |
| <div> | |
| <label for="employer-email" class="block text-sm font-medium text-gray-700 mb-1">Email*</label> | |
| <input type="email" id="employer-email" name="employer-email" required class="w-full px-4 py-2 border rounded-md focus:ring-indigo-500 focus:border-indigo-500"> | |
| </div> | |
| <!-- Password --> | |
| <div> | |
| <label for="employer-password" class="block text-sm font-medium text-gray-700 mb-1">Пароль*</label> | |
| <input type="password" id="employer-password" name="employer-password" required class="w-full px-4 py-2 border rounded-md focus:ring-indigo-500 focus:border-indigo-500"> | |
| <p class="text-xs text-gray-500 mt-1">Минимум 8 символов</p> | |
| </div> | |
| <div> | |
| <label for="employer-confirm-password" class="block text-sm font-medium text-gray-700 mb-1">Подтвердите пароль*</label> | |
| <input type="password" id="employer-confirm-password" name="employer-confirm-password" required class="w-full px-4 py-2 border rounded-md focus:ring-indigo-500 focus:border-indigo-500"> | |
| </div> | |
| </div> | |
| <!-- Agreement --> | |
| <div class="mt-6"> | |
| <div class="flex items-start"> | |
| <input type="checkbox" id="employer-agreement" name="employer-agreement" required class="mt-1 mr-2"> | |
| <label for="employer-agreement" class="text-sm text-gray-700"> | |
| Я согласен(а) на обработку персональных данных в соответствии с <a href="#" class="text-indigo-600 hover:underline">Политикой конфиденциальности</a> | |
| </label> | |
| </div> | |
| </div> | |
| <!-- Submit --> | |
| <div class="mt-8"> | |
| <button type="submit" class="w-full bg-indigo-600 text-white py-3 px-4 rounded-md hover:bg-indigo-700 transition font-medium"> | |
| Зарегистрироваться | |
| </button> | |
| </div> | |
| </form> | |
| </div> | |
| </div> | |
| </main> | |
| <script> | |
| feather.replace(); | |
| // Tab switching | |
| const studentTab = document.getElementById('student-tab'); | |
| const employerTab = document.getElementById('employer-tab'); | |
| const studentForm = document.getElementById('student-form'); | |
| const employerForm = document.getElementById('employer-form'); | |
| studentTab.addEventListener('click', function() { | |
| studentTab.classList.add('tab-active'); | |
| employerTab.classList.remove('tab-active'); | |
| studentForm.classList.remove('hidden'); | |
| employerForm.classList.add('hidden'); | |
| }); | |
| employerTab.addEventListener('click', function() { | |
| employerTab.classList.add('tab-active'); | |
| studentTab.classList.remove('tab-active'); | |
| employerForm.classList.remove('hidden'); | |
| studentForm.classList.add('hidden'); | |
| }); | |
| // Check URL for registration type | |
| const urlParams = new URLSearchParams(window.location.search); | |
| const type = urlParams.get('type'); | |
| if (type === 'employer') { | |
| employerTab.click(); | |
| } | |
| // Form validation | |
| document.getElementById('student-registration').addEventListener('submit', function(e) { | |
| e.preventDefault(); | |
| const password = document.getElementById('password').value; | |
| const confirmPassword = document.getElementById('confirm-password').value; | |
| if (password !== confirmPassword) { | |
| alert('Пароли не совпадают'); | |
| return; | |
| } | |
| // Here would be AJAX request to backend | |
| alert('Регистрация студента успешна! Проверьте email для подтверждения.'); | |
| window.location.href = 'email-verification.html'; | |
| }); | |
| document.getElementById('employer-registration').addEventListener('submit', function(e) { | |
| e.preventDefault(); | |
| const password = document.getElementById('employer-password').value; | |
| const confirmPassword = document.getElementById('employer-confirm-password').value; | |
| if (password !== confirmPassword) { | |
| alert('Пароли не совпадают'); | |
| return; | |
| } | |
| // Here would be AJAX request to backend | |
| alert('Регистрация работодателя успешна! Проверьте email для подтверждения.'); | |
| window.location.href = 'email-verification.html'; | |
| }); | |
| </script> | |
| </body> | |
| </html> | |