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> | |
| .progress-bar { | |
| transition: width 0.3s ease; | |
| } | |
| .question-card { | |
| transition: all 0.3s ease; | |
| } | |
| .option:hover { | |
| background-color: #e0e7ff; | |
| } | |
| .option.selected { | |
| background-color: #4f46e5; | |
| color: white; | |
| border-color: #4f46e5; | |
| } | |
| .option.correct { | |
| background-color: #10b981; | |
| color: white; | |
| border-color: #10b981; | |
| } | |
| .option.incorrect { | |
| background-color: #ef4444; | |
| color: white; | |
| border-color: #ef4444; | |
| } | |
| </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="student-dashboard.html" class="text-gray-700 hover:text-indigo-600">Мой профиль</a> | |
| <a href="student-offers.html" class="text-gray-700 hover:text-indigo-600">Предложения</a> | |
| <a href="skill-test.html" class="text-indigo-600 font-medium">Проверка навыков</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/people/200x200/4" 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="student-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="student-dashboard.html" class="block py-2 text-gray-700 hover:text-indigo-600">Мой профиль</a> | |
| <a href="student-offers.html" class="block py-2 text-gray-700 hover:text-indigo-600">Предложения</a> | |
| <a href="skill-test.html" class="block py-2 text-indigo-600">Проверка навыков</a> | |
| <div class="border-t my-2"></div> | |
| <a href="student-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-3xl mx-auto"> | |
| <div class="mb-8"> | |
| <h1 class="text-2xl font-bold text-gray-800">Проверка навыков</h1> | |
| <p class="text-gray-600">Пройдите тесты, чтобы подтвердить свои навыки и повысить шансы на получение практики</p> | |
| </div> | |
| <!-- Skill Selection --> | |
| <div class="bg-white rounded-lg shadow-md p-6 mb-8"> | |
| <h2 class="text-xl font-semibold mb-4 text-gray-800">Выберите навык для проверки</h2> | |
| <div class="grid md:grid-cols-3 gap-4"> | |
| <div class="skill-card p-4 border rounded-lg cursor-pointer hover:shadow-md transition" data-skill="javascript"> | |
| <div class="flex items-center"> | |
| <div class="w-10 h-10 bg-indigo-100 rounded-full flex items-center justify-center mr-3"> | |
| <i data-feather="code" class="text-indigo-600"></i> | |
| </div> | |
| <div> | |
| <h3 class="font-medium">JavaScript</h3> | |
| <p class="text-sm text-gray-500">Программирование</p> | |
| </div> | |
| </div> | |
| <div class="mt-3"> | |
| <div class="flex justify-between text-sm mb-1"> | |
| <span>Уровень: Средний</span> | |
| <span>65%</span> | |
| </div> | |
| <div class="w-full bg-gray-200 rounded-full h-2"> | |
| <div class="progress-bar bg-indigo-600 h-2 rounded-full" style="width: 65%"></div> | |
| </div> | |
| </div> | |
| </div> | |
| <div class="skill-card p-4 border rounded-lg cursor-pointer hover:shadow-md transition" data-skill="python"> | |
| <div class="flex items-center"> | |
| <div class="w-10 h-10 bg-green-100 rounded-full flex items-center justify-center mr-3"> | |
| <i data-feather="code" class="text-green-600"></i> | |
| </div> | |
| <div> | |
| <h3 class="font-medium">Python</h3> | |
| <p class="text-sm text-gray-500">Программирование</p> | |
| </div> | |
| </div> | |
| <div class="mt-3"> | |
| <div class="flex justify-between text-sm mb-1"> | |
| <span>Уровень: Начальный</span> | |
| <span>40%</span> | |
| </div> | |
| <div class="w-full bg-gray-200 rounded-full h-2"> | |
| <div class="progress-bar bg-green-500 h-2 rounded-full" style="width: 40%"></div> | |
| </div> | |
| </div> | |
| </div> | |
| <div class="skill-card p-4 border rounded-lg cursor-pointer hover:shadow-md transition" data-skill="html-css"> | |
| <div class="flex items-center"> | |
| <div class="w-10 h-10 bg-blue-100 rounded-full flex items-center justify-center mr-3"> | |
| <i data-feather="layout" class="text-blue-600"></i> | |
| </div> | |
| <div> | |
| <h3 class="font-medium">HTML/CSS</h3> | |
| <p class="text-sm text-gray-500">Веб-разработка</p> | |
| </div> | |
| </div> | |
| <div class="mt-3"> | |
| <div class="flex justify-between text-sm mb-1"> | |
| <span>Уровень: Продвинутый</span> | |
| <span>85%</span> | |
| </div> | |
| <div class="w-full bg-gray-200 rounded-full h-2"> | |
| <div class="progress-bar bg-blue-500 h-2 rounded-full" style="width: 85%"></div> | |
| </div> | |
| </div> | |
| </div> | |
| <div class="skill-card p-4 border rounded-lg cursor-pointer hover:shadow-md transition" data-skill="react"> | |
| <div class="flex items-center"> | |
| <div class="w-10 h-10 bg-purple-100 rounded-full flex items-center justify-center mr-3"> | |
| <i data-feather="code" class="text-purple-600"></i> | |
| </div> | |
| <div> | |
| <h3 class="font-medium">React</h3> | |
| <p class="text-sm text-gray-500">Фронтенд</p> | |
| </div> | |
| </div> | |
| <div class="mt-3"> | |
| <div class="flex justify-between text-sm mb-1"> | |
| <span>Уровень: Начальный</span> | |
| <span>30%</span> | |
| </div> | |
| <div class="w-full bg-gray-200 rounded-full h-2"> | |
| <div class="progress-bar bg-purple-500 h-2 rounded-full" style="width: 30%"></div> | |
| </div> | |
| </div> | |
| </div> | |
| <div class="skill-card p-4 border rounded-lg cursor-pointer hover:shadow-md transition" data-skill="sql"> | |
| <div class="flex items-center"> | |
| <div class="w-10 h-10 bg-yellow-100 rounded-full flex items-center justify-center mr-3"> | |
| <i data-feather="database" class="text-yellow-600"></i> | |
| </div> | |
| <div> | |
| <h3 class="font-medium">SQL</h3> | |
| <p class="text-sm text-gray-500">Базы данных</p> | |
| </div> | |
| </div> | |
| <div class="mt-3"> | |
| <div class="flex justify-between text-sm mb-1"> | |
| <span>Уровень: Средний</span> | |
| <span>55%</span> | |
| </div> | |
| <div class="w-full bg-gray-200 rounded-full h-2"> | |
| <div class="progress-bar bg-yellow-500 h-2 rounded-full" style="width: 55%"></div> | |
| </div> | |
| </div> | |
| </div> | |
| <div class="skill-card p-4 border rounded-lg cursor-pointer hover:shadow-md transition" data-skill="data-analysis"> | |
| <div class="flex items-center"> | |
| <div class="w-10 h-10 bg-pink-100 rounded-full flex items-center justify-center mr-3"> | |
| <i data-feather="bar-chart-2" class="text-pink-600"></i> | |
| </div> | |
| <div> | |
| <h3 class="font-medium">Анализ данных</h3> | |
| <p class="text-sm text-gray-500">Аналитика</p> | |
| </div> | |
| </div> | |
| <div class="mt-3"> | |
| <div class="flex justify-between text-sm mb-1"> | |
| <span>Уровень: Средний</span> | |
| <span>60%</span> | |
| </div> | |
| <div class="w-full bg-gray-200 rounded-full h-2"> | |
| <div class="progress-bar bg-pink-500 h-2 rounded-full" style="width: 60%"></div> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| <!-- Test Area (Hidden by default) --> | |
| <div id="test-area" class="hidden"> | |
| <div class="bg-white rounded-lg shadow-md p-6 mb-4"> | |
| <div class="flex justify-between items-center mb-6"> | |
| <h2 id="test-skill-name" class="text-xl font-semibold text-gray-800">JavaScript</h2> | |
| <div class="flex items-center"> | |
| <span id="question-counter" class="mr-2 font-medium">1/10</span> | |
| <div class="w-24 bg-gray-200 rounded-full h-2"> | |
| <div id="test-progress" class="progress-bar bg-indigo-600 h-2 rounded-full" style="width: 10%"></div> | |
| </div> | |
| </div> | |
| </div> | |
| <!-- Question Card --> | |
| <div id="question-card" class="question-card mb-6 p-6 border rounded-lg"> | |
| <h3 id="question-text" class="text-lg font-medium mb-4">Что такое замыкание (closure) в JavaScript?</h3> | |
| <div id="options-container" class="space-y-3"> | |
| <div class="option p-3 border rounded-md cursor-pointer" data-correct="true">Функция, которая запоминает своё лексическое окружение даже после выполнения вне своей области видимости</div> | |
| <div class="option p-3 border rounded-md cursor-pointer">Способ скрытия реализации в ООП</div> | |
| <div class="option p-3 border rounded-md cursor-pointer">Метод закрытия модального окна</div> | |
| <div class="option p-3 border rounded-md cursor-pointer">Синтаксис для завершения работы функции</div> | |
| </div> | |
| </div> | |
| <!-- Navigation --> | |
| <div class="flex justify-between"> | |
| <button id="prev-question" class="px-4 py-2 border rounded-md text-gray-700 hover:bg-gray-50 transition" disabled> | |
| Назад | |
| </button> | |
| <button id="next-question" class="px-4 py-2 bg-indigo-600 text-white rounded-md hover:bg-indigo-700 transition"> | |
| Следующий вопрос | |
| </button> | |
| <button id="finish-test" class="px-4 py-2 bg-green-600 text-white rounded-md hover:bg-green-700 transition hidden"> | |
| Завершить тест | |
| </button> | |
| </div> | |
| </div> | |
| <!-- Results (Hidden by default) --> | |
| < | |
| </body> | |
| </html> |