| <!DOCTYPE html> |
| <html lang="ru"> |
| <head> |
| <meta charset="UTF-8"> |
| <meta name="viewport" content="width=device-width, initial-scale=1.0"> |
| <title>EduSphere - Комфортное обучение</title> |
| <script src="https://cdn.tailwindcss.com"></script> |
| <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css"> |
| <script> |
| tailwind.config = { |
| theme: { |
| extend: { |
| colors: { |
| primary: '#4F46E5', |
| secondary: '#7C3AED', |
| accent: '#A78BFA', |
| dark: '#1E1B4B', |
| light: '#F5F3FF', |
| teal: '#2DD4BF', |
| rose: '#F43F5E', |
| amber: '#F59E0B', |
| emerald: '#10B981', |
| sky: '#0EA5E9', |
| indigo: '#6366F1', |
| purple: '#8B5CF6', |
| pink: '#EC4899', |
| orange: '#F97316', |
| cyan: '#06B6D4', |
| lime: '#84CC16' |
| }, |
| animation: { |
| 'bounce-slow': 'bounce 3s infinite', |
| 'pulse-slow': 'pulse 4s infinite', |
| 'float': 'float 6s ease-in-out infinite', |
| 'wave': 'wave 8s ease-in-out infinite', |
| }, |
| keyframes: { |
| float: { |
| '0%, 100%': { transform: 'translateY(0)' }, |
| '50%': { transform: 'translateY(-20px)' }, |
| }, |
| wave: { |
| '0%, 100%': { transform: 'rotate(-3deg)' }, |
| '50%': { transform: 'rotate(3deg)' }, |
| } |
| } |
| } |
| } |
| } |
| </script> |
| <style> |
| @import url('https://fonts.googleapis.com/css2?family=Poppins:wght@300;400;500;600;700&display=swap'); |
| |
| body { |
| font-family: 'Poppins', sans-serif; |
| background-color: #F5F3FF; |
| overflow-x: hidden; |
| } |
| |
| .btn-hover { |
| transition: all 0.3s ease; |
| transform: translateY(0); |
| } |
| |
| .btn-hover:hover { |
| transform: translateY(-3px); |
| box-shadow: 0 10px 20px -5px rgba(79, 70, 229, 0.4); |
| } |
| |
| .card-hover { |
| transition: all 0.3s ease; |
| } |
| |
| .card-hover:hover { |
| transform: translateY(-5px); |
| box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 10px 10px -5px rgba(0, 0, 0, 0.04); |
| } |
| |
| .subject-icon { |
| transition: all 0.5s ease; |
| } |
| |
| .subject-icon:hover { |
| transform: scale(1.1) rotate(10deg); |
| } |
| |
| .modal { |
| transition: all 0.3s ease; |
| opacity: 0; |
| visibility: hidden; |
| } |
| |
| .modal.active { |
| opacity: 1; |
| visibility: visible; |
| } |
| |
| .post-card { |
| transition: all 0.3s ease; |
| } |
| |
| .post-card:hover { |
| transform: scale(1.02); |
| } |
| |
| .blob { |
| position: absolute; |
| z-index: -1; |
| filter: blur(60px); |
| opacity: 0.3; |
| border-radius: 50%; |
| } |
| |
| .blob-1 { |
| width: 400px; |
| height: 400px; |
| background: #4F46E5; |
| top: 10%; |
| left: 5%; |
| animation: float 8s ease-in-out infinite; |
| } |
| |
| .blob-2 { |
| width: 500px; |
| height: 500px; |
| background: #7C3AED; |
| bottom: 5%; |
| right: 5%; |
| animation: float 10s ease-in-out infinite reverse; |
| } |
| |
| .blob-3 { |
| width: 300px; |
| height: 300px; |
| background: #2DD4BF; |
| top: 60%; |
| left: 40%; |
| animation: float 12s ease-in-out infinite; |
| } |
| |
| .nav-link { |
| position: relative; |
| } |
| |
| .nav-link::after { |
| content: ''; |
| position: absolute; |
| width: 0; |
| height: 3px; |
| bottom: -5px; |
| left: 0; |
| background-color: #4F46E5; |
| transition: width 0.3s ease; |
| border-radius: 3px; |
| } |
| |
| .nav-link:hover::after { |
| width: 100%; |
| } |
| |
| .input-field { |
| transition: all 0.3s ease; |
| } |
| |
| .input-field:focus { |
| box-shadow: 0 0 0 3px rgba(79, 70, 229, 0.3); |
| } |
| |
| .file-upload:hover { |
| background-color: #6D28D9; |
| } |
| |
| .file-upload input[type="file"] { |
| display: none; |
| } |
| |
| .logo { |
| display: flex; |
| align-items: center; |
| animation: wave 8s ease-in-out infinite; |
| } |
| |
| .logo-icon { |
| font-size: 2rem; |
| background: linear-gradient(135deg, #4F46E5 0%, #7C3AED 100%); |
| -webkit-background-clip: text; |
| -webkit-text-fill-color: transparent; |
| } |
| |
| .logo-text { |
| font-weight: 700; |
| background: linear-gradient(135deg, #1E1B4B 0%, #4F46E5 100%); |
| -webkit-background-clip: text; |
| -webkit-text-fill-color: transparent; |
| } |
| |
| .gradient-text { |
| background: linear-gradient(135deg, #4F46E5 0%, #7C3AED 100%); |
| -webkit-background-clip: text; |
| -webkit-text-fill-color: transparent; |
| } |
| |
| .scrollbar-hide::-webkit-scrollbar { |
| display: none; |
| } |
| |
| .scrollbar-hide { |
| -ms-overflow-style: none; |
| scrollbar-width: none; |
| } |
| |
| .footer-link { |
| @apply text-gray-300 hover:text-white transition-colors duration-200; |
| } |
| |
| .class-tab { |
| @apply px-4 py-2 rounded-lg font-medium transition-all duration-200 whitespace-nowrap; |
| } |
| |
| .active-tab { |
| @apply bg-primary text-white shadow-md; |
| } |
| |
| .inactive-tab { |
| @apply bg-gray-100 text-gray-700 hover:bg-gray-200; |
| } |
| |
| .glass-effect { |
| background: rgba(255, 255, 255, 0.8); |
| backdrop-filter: blur(10px); |
| -webkit-backdrop-filter: blur(10px); |
| } |
| |
| .floating-btn { |
| box-shadow: 0 10px 25px -5px rgba(79, 70, 229, 0.4); |
| animation: pulse-slow 2.5s infinite; |
| } |
| |
| .progress-bar { |
| height: 6px; |
| border-radius: 3px; |
| background-color: #E5E7EB; |
| } |
| |
| .progress-fill { |
| height: 100%; |
| border-radius: 3px; |
| background: linear-gradient(90deg, #4F46E5, #7C3AED); |
| transition: width 0.5s ease; |
| } |
| </style> |
| </head> |
| <body> |
| |
| <div class="blob blob-1"></div> |
| <div class="blob blob-2"></div> |
| <div class="blob blob-3"></div> |
| |
| |
| <nav class="glass-effect shadow-sm sticky top-0 z-50"> |
| <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8"> |
| <div class="flex justify-between h-16"> |
| <div class="flex items-center"> |
| <a href="#" class="logo"> |
| <i class="fas fa-graduation-cap logo-icon mr-2"></i> |
| <span class="logo-text text-xl">EduSphere</span> |
| </a> |
| </div> |
| <div class="hidden md:flex items-center space-x-8"> |
| <a href="#" class="nav-link text-gray-700 hover:text-primary px-1 text-sm font-medium">Главная</a> |
| <a href="#" class="nav-link text-gray-700 hover:text-primary px-1 text-sm font-medium">Предметы</a> |
| <a href="#" class="nav-link text-gray-700 hover:text-primary px-1 text-sm font-medium">Расписание</a> |
| <a href="#" class="nav-link text-gray-700 hover:text-primary px-1 text-sm font-medium">Задания</a> |
| <a href="#" class="nav-link text-gray-700 hover:text-primary px-1 text-sm font-medium">Оценки</a> |
| </div> |
| <div class="flex items-center"> |
| <div class="relative"> |
| <button class="p-1 rounded-full text-gray-400 hover:text-primary focus:outline-none"> |
| <i class="fas fa-bell text-lg"></i> |
| <span class="absolute top-0 right-0 h-2 w-2 rounded-full bg-red-500"></span> |
| </button> |
| </div> |
| <div class="ml-4 relative"> |
| <button class="flex items-center text-sm rounded-full focus:outline-none"> |
| <img class="h-8 w-8 rounded-full" src="https://images.unsplash.com/photo-1472099645785-5658abf4ff4e?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=facearea&facepad=2&w=256&h=256&q=80" alt=""> |
| </button> |
| </div> |
| </div> |
| </div> |
| </div> |
| </nav> |
|
|
| |
| <main class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 py-8"> |
| |
| <div class="flex space-x-2 overflow-x-auto pb-4 scrollbar-hide"> |
| <button class="class-tab active-tab">1 класс</button> |
| <button class="class-tab inactive-tab">2 класс</button> |
| <button class="class-tab inactive-tab">3 класс</button> |
| <button class="class-tab inactive-tab">4 класс</button> |
| <button class="class-tab inactive-tab">5 класс</button> |
| <button class="class-tab inactive-tab">6 класс</button> |
| <button class="class-tab inactive-tab">7 класс</button> |
| <button class="class-tab inactive-tab">8 класс</button> |
| <button class="class-tab inactive-tab">9 класс</button> |
| <button class="class-tab inactive-tab">10 класс</button> |
| <button class="class-tab inactive-tab">11 класс</button> |
| </div> |
|
|
| |
| <section class="mt-8 glass-effect rounded-xl shadow-sm p-8"> |
| <div class="flex flex-col md:flex-row items-center"> |
| <div class="md:w-1/2 mb-6 md:mb-0"> |
| <h1 class="text-4xl font-bold text-gray-900 mb-4">Добро пожаловать в <span class="gradient-text">EduSphere</span></h1> |
| <p class="text-gray-600 mb-6 text-lg">Инновационная образовательная платформа для всех классов школы с 1 по 11.</p> |
| <div class="flex space-x-4"> |
| <button class="btn-hover bg-primary text-white px-6 py-3 rounded-lg font-medium flex items-center"> |
| <i class="fas fa-rocket mr-2"></i> Начать обучение |
| </button> |
| <button class="btn-hover border border-primary text-primary px-6 py-3 rounded-lg font-medium flex items-center"> |
| <i class="fas fa-info-circle mr-2"></i> Узнать больше |
| </button> |
| </div> |
| </div> |
| <div class="md:w-1/2 flex justify-center"> |
| <img src="https://cdn-icons-png.flaticon.com/512/3132/3132693.png" alt="Learning illustration" class="w-72 h-72 object-contain"> |
| </div> |
| </div> |
| </section> |
|
|
| |
| <section class="mt-12 grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-4 gap-6"> |
| <div class="glass-effect rounded-xl p-6 shadow-sm"> |
| <div class="flex items-center"> |
| <div class="p-3 rounded-full bg-indigo-100 text-indigo-600 mr-4"> |
| <i class="fas fa-book-open text-xl"></i> |
| </div> |
| <div> |
| <p class="text-gray-500 text-sm">Предметов</p> |
| <p class="text-2xl font-bold text-gray-900">12</p> |
| </div> |
| </div> |
| </div> |
| |
| <div class="glass-effect rounded-xl p-6 shadow-sm"> |
| <div class="flex items-center"> |
| <div class="p-3 rounded-full bg-emerald-100 text-emerald-600 mr-4"> |
| <i class="fas fa-tasks text-xl"></i> |
| </div> |
| <div> |
| <p class="text-gray-500 text-sm">Заданий</p> |
| <p class="text-2xl font-bold text-gray-900">47</p> |
| </div> |
| </div> |
| </div> |
| |
| <div class="glass-effect rounded-xl p-6 shadow-sm"> |
| <div class="flex items-center"> |
| <div class="p-3 rounded-full bg-amber-100 text-amber-600 mr-4"> |
| <i class="fas fa-star text-xl"></i> |
| </div> |
| <div> |
| <p class="text-gray-500 text-sm">Средний балл</p> |
| <p class="text-2xl font-bold text-gray-900">4.6</p> |
| </div> |
| </div> |
| </div> |
| |
| <div class="glass-effect rounded-xl p-6 shadow-sm"> |
| <div class="flex items-center"> |
| <div class="p-3 rounded-full bg-sky-100 text-sky-600 mr-4"> |
| <i class="fas fa-calendar-alt text-xl"></i> |
| </div> |
| <div> |
| <p class="text-gray-500 text-sm">Дней до ЕГЭ</p> |
| <p class="text-2xl font-bold text-gray-900">254</p> |
| </div> |
| </div> |
| </div> |
| </section> |
|
|
| |
| <section class="mt-12"> |
| <div class="flex justify-between items-center mb-6"> |
| <h2 class="text-2xl font-bold text-gray-900">Предметы</h2> |
| <button class="text-primary font-medium flex items-center"> |
| Смотреть все <i class="fas fa-chevron-right ml-1 text-sm"></i> |
| </button> |
| </div> |
| |
| <div class="grid grid-cols-2 sm:grid-cols-3 md:grid-cols-4 lg:grid-cols-6 gap-4"> |
| |
| <div class="card-hover glass-effect rounded-xl shadow-sm p-4 flex flex-col items-center"> |
| <div class="subject-icon w-16 h-16 rounded-full bg-indigo-100 flex items-center justify-center mb-3"> |
| <i class="fas fa-square-root-alt text-indigo-600 text-2xl"></i> |
| </div> |
| <h3 class="font-medium text-gray-900 mb-1">Математика</h3> |
| <p class="text-xs text-gray-500">12 заданий</p> |
| <div class="w-full mt-3 progress-bar"> |
| <div class="progress-fill" style="width: 85%"></div> |
| </div> |
| </div> |
| |
| |
| <div class="card-hover glass-effect rounded-xl shadow-sm p-4 flex flex-col items-center"> |
| <div class="subject-icon w-16 h-16 rounded-full bg-rose-100 flex items-center justify-center mb-3"> |
| <i class="fas fa-language text-rose-600 text-2xl"></i> |
| </div> |
| <h3 class="font-medium text-gray-900 mb-1">Русский язык</h3> |
| <p class="text-xs text-gray-500">8 заданий</p> |
| <div class="w-full mt-3 progress-bar"> |
| <div class="progress-fill" style="width: 70%"></div> |
| </div> |
| </div> |
| |
| |
| <div class="card-hover glass-effect rounded-xl shadow-sm p-4 flex flex-col items-center"> |
| <div class="subject-icon w-16 h-16 rounded-full bg-emerald-100 flex items-center justify-center mb-3"> |
| <i class="fas fa-book text-emerald-600 text-2xl"></i> |
| </div> |
| <h3 class="font-medium text-gray-900 mb-1">Литература</h3> |
| <p class="text-xs text-gray-500">5 заданий</p> |
| <div class="w-full mt-3 progress-bar"> |
| <div class="progress-fill" style="width: 60%"></div> |
| </div> |
| </div> |
| |
| |
| <div class="card-hover glass-effect rounded-xl shadow-sm p-4 flex flex-col items-center"> |
| <div class="subject-icon w-16 h-16 rounded-full bg-sky-100 flex items-center justify-center mb-3"> |
| <i class="fas fa-globe-europe text-sky-600 text-2xl"></i> |
| </div> |
| <h3 class="font-medium text-gray-900 mb-1">География</h3> |
| <p class="text-xs text-gray-500">3 задания</p> |
| <div class="w-full mt-3 progress-bar"> |
| <div class="progress-fill" style="width: 40%"></div> |
| </div> |
| </div> |
| |
| |
| <div class="card-hover glass-effect rounded-xl shadow-sm p-4 flex flex-col items-center"> |
| <div class="subject-icon w-16 h-16 rounded-full bg-amber-100 flex items-center justify-center mb-3"> |
| <i class="fas fa-atom text-amber-600 text-2xl"></i> |
| </div> |
| <h3 class="font-medium text-gray-900 mb-1">Физика</h3> |
| <p class="text-xs text-gray-500">6 заданий</p> |
| <div class="w-full mt-3 progress-bar"> |
| <div class="progress-fill" style="width: 75%"></div> |
| </div> |
| </div> |
| |
| |
| <div class="card-hover glass-effect rounded-xl shadow-sm p-4 flex flex-col items-center"> |
| <div class="subject-icon w-16 h-16 rounded-full bg-purple-100 flex items-center justify-center mb-3"> |
| <i class="fas fa-dna text-purple-600 text-2xl"></i> |
| </div> |
| <h3 class="font-medium text-gray-900 mb-1">Биология</h3> |
| <p class="text-xs text-gray-500">4 задания</p> |
| <div class="w-full mt-3 progress-bar"> |
| <div class="progress-fill" style="width: 50%"></div> |
| </div> |
| </div> |
| </div> |
| </section> |
|
|
| |
| <section class="mt-12"> |
| <div class="flex justify-between items-center mb-6"> |
| <h2 class="text-2xl font-bold text-gray-900">Последние задания</h2> |
| <button class="text-primary font-medium flex items-center"> |
| Смотреть все <i class="fas fa-chevron-right ml-1 text-sm"></i> |
| </button> |
| </div> |
| |
| <div class="glass-effect rounded-xl shadow-sm overflow-hidden"> |
| |
| <div class="post-card p-6 border-b border-gray-100 hover:bg-gray-50/50"> |
| <div class="flex items-start"> |
| <div class="flex-shrink-0 bg-indigo-100 rounded-lg p-3 mr-4"> |
| <i class="fas fa-square-root-alt text-indigo-600 text-xl"></i> |
| </div> |
| <div class="flex-1 min-w-0"> |
| <div class="flex justify-between items-start"> |
| <h3 class="text-lg font-medium text-gray-900 mb-1">Домашнее задание по математике</h3> |
| <span class="inline-flex items-center px-2.5 py-0.5 rounded-full text-xs font-medium bg-red-100 text-red-800"> |
| Срочно |
| </span> |
| </div> |
| <p class="text-sm text-gray-500 mb-2">Решить задачи №15-25 из учебника, страница 45</p> |
| <div class="flex items-center text-xs text-gray-500"> |
| <span class="mr-4 flex items-center"><i class="fas fa-calendar-day mr-1"></i> Срок сдачи: завтра</span> |
| <span class="flex items-center"><i class="fas fa-clock mr-1"></i> Осталось: 1 день</span> |
| </div> |
| </div> |
| </div> |
| </div> |
| |
| |
| <div class="post-card p-6 border-b border-gray-100 hover:bg-gray-50/50"> |
| <div class="flex items-start"> |
| <div class="flex-shrink-0 bg-rose-100 rounded-lg p-3 mr-4"> |
| <i class="fas fa-language text-rose-600 text-xl"></i> |
| </div> |
| <div class="flex-1 min-w-0"> |
| <div class="flex justify-between items-start"> |
| <h3 class="text-lg font-medium text-gray-900 mb-1">Сочинение по русскому языку</h3> |
| <span class="inline-flex items-center px-2.5 py-0.5 rounded-full text-xs font-medium bg-yellow-100 text-yellow-800"> |
| Средний приоритет |
| </span> |
| </div> |
| <p class="text-sm text-gray-500 mb-2">Тема: "Как я провел лето", объем 2 страницы</p> |
| <div class="flex items-center text-xs text-gray-500"> |
| <span class="mr-4 flex items-center"><i class="fas fa-calendar-day mr-1"></i> Срок сдачи: 15.09.2023</span> |
| <span class="flex items-center"><i class="fas fa-clock mr-1"></i> Осталось: 3 дня</span> |
| </div> |
| </div> |
| </div> |
| </div> |
| |
| |
| <div class="post-card p-6 hover:bg-gray-50/50"> |
| <div class="flex items-start"> |
| <div class="flex-shrink-0 bg-sky-100 rounded-lg p-3 mr-4"> |
| <i class="fas fa-globe-europe text-sky-600 text-xl"></i> |
| </div> |
| <div class="flex-1 min-w-0"> |
| <div class="flex justify-between items-start"> |
| <h3 class="text-lg font-medium text-gray-900 mb-1">Проект по географии</h3> |
| <span class="inline-flex items-center px-2.5 py-0.5 rounded-full text-xs font-medium bg-green-100 text-green-800"> |
| Низкий приоритет |
| </span> |
| </div> |
| <p class="text-sm text-gray-500 mb-2">Подготовить презентацию о климатических поясах Земли</p> |
| <div class="flex items-center text-xs text-gray-500"> |
| <span class="mr-4 flex items-center"><i class="fas fa-calendar-day mr-1"></i> Срок сдачи: 20.09.2023</span> |
| <span class="flex items-center"><i class="fas fa-clock mr-1"></i> Осталось: 8 дней</span> |
| </div> |
| </div> |
| </div> |
| </div> |
| </div> |
| </section> |
|
|
| |
| <section class="mt-12"> |
| <div class="flex justify-between items-center mb-6"> |
| <h2 class="text-2xl font-bold text-gray-900">Последние оценки</h2> |
| <button class="text-primary font-medium flex items-center"> |
| Смотреть все <i class="fas fa-chevron-right ml-1 text-sm"></i> |
| </button> |
| </div> |
| |
| <div class="glass-effect rounded-xl shadow-sm overflow-hidden"> |
| <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6 p-6"> |
| |
| <div class="card-hover bg-white border border-gray-100 rounded-lg p-5 shadow-xs"> |
| <div class="flex items-center mb-4"> |
| <div class="flex-shrink-0 bg-indigo-100 rounded-lg p-3 mr-3"> |
| <i class="fas fa-square-root-alt text-indigo-600 text-lg"></i> |
| </div> |
| <div> |
| <h3 class="text-lg font-medium text-gray-900">Математика</h3> |
| <p class="text-sm text-gray-500">Алгебра и геометрия</p> |
| </div> |
| </div> |
| <div class="flex justify-between items-center"> |
| <div> |
| <p class="text-sm text-gray-500">Последняя оценка</p> |
| <p class="text-2xl font-bold text-primary">5</p> |
| </div> |
| <div class="text-right"> |
| <p class="text-sm text-gray-500">Средний балл</p> |
| <p class="text-xl font-bold text-gray-900">4.7</p> |
| </div> |
| </div> |
| <div class="mt-4"> |
| <div class="flex justify-between text-xs text-gray-500 mb-1"> |
| <span>Прогресс</span> |
| <span>85%</span> |
| </div> |
| <div class="w-full progress-bar"> |
| <div class="progress-fill" style="width: 85%"></div> |
| </div> |
| </div> |
| </div> |
| |
| |
| <div class="card-hover bg-white border border-gray-100 rounded-lg p-5 shadow-xs"> |
| <div class="flex items-center mb-4"> |
| <div class="flex-shrink-0 bg-rose-100 rounded-lg p-3 mr-3"> |
| <i class="fas fa-language text-rose-600 text-lg"></i> |
| </div> |
| <div> |
| <h3 class="text-lg font-medium text-gray-900">Русский язык</h3> |
| <p class="text-sm text-gray-500">Грамматика и орфография</p> |
| </div> |
| </div> |
| <div class="flex justify-between items-center"> |
| <div> |
| <p class="text-sm text-gray-500">Последняя оценка</p> |
| <p class="text-2xl font-bold text-primary">4</p> |
| </div> |
| <div class="text-right"> |
| <p class="text-sm text-gray-500">Средний балл</p> |
| <p class="text-xl font-bold text-gray-900">4.3</p> |
| </div> |
| </div> |
| <div class="mt-4"> |
| <div class="flex justify-between text-xs text-gray-500 mb-1"> |
| <span>Прогресс</span> |
| <span>70%</span> |
| </div> |
| <div class="w-full progress-bar"> |
| <div class="progress-fill" style="width: 70%"></div> |
| </div> |
| </div> |
| </div> |
| |
| |
| <div class="card-hover bg-white border border-gray-100 rounded-lg p-5 shadow-xs"> |
| <div class="flex items-center mb-4"> |
| <div class="flex-shrink-0 bg-emerald-100 rounded-lg p-3 mr-3"> |
| <i class="fas fa-book text-emerald-600 text-lg"></i> |
| </div> |
| <div> |
| <h3 class="text-lg font-medium text-gray-900">Литература</h3> |
| <p class="text-sm text-gray-500">Русская классика</p> |
| </div> |
| </div> |
| <div class="flex justify-between items-center"> |
| <div> |
| <p class="text-sm text-gray-500">Последняя оценка</p> |
| <p class="text-2xl font-bold text-primary">5</p> |
| </div> |
| <div class="text-right"> |
| <p class="text-sm text-gray-500">Средний балл</p> |
| <p class="text-xl font-bold text-gray-900">4.8</p> |
| </div> |
| </div> |
| <div class="mt-4"> |
| <div class="flex justify-between text-xs text-gray-500 mb-1"> |
| <span>Прогресс</span> |
| <span>60%</span> |
| </div> |
| <div class="w-full progress-bar"> |
| <div class="progress-fill" style="width: 60%"></div> |
| </div> |
| </div> |
| </div> |
| </div> |
| </div> |
| </section> |
| </main> |
|
|
| |
| <button class="fixed bottom-8 right-8 bg-primary text-white rounded-full p-4 shadow-lg floating-btn"> |
| <i class="fas fa-plus text-xl"></i> |
| </button> |
|
|
| |
| <footer class="bg-gradient-to-r from-primary to-secondary mt-16 py-12"> |
| <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8"> |
| <div class="grid grid-cols-1 md:grid-cols-4 gap-8"> |
| <div> |
| <a href="#" class="logo"> |
| <i class="fas fa-graduation-cap logo-icon mr-2"></i> |
| <span class="logo-text text-xl text-white">EduSphere</span> |
| </a> |
| <p class="mt-4 text-gray-300 text-sm">Инновационная образовательная платформа для всех классов школы с 1 по 11.</p> |
| </div> |
| <div> |
| <h3 class="text-white font-medium mb-4">Навигация</h3> |
| <ul class="space-y-2"> |
| <li><a href="#" class="footer-link">Главная</a></li> |
| <li><a href="#" class="footer-link">Предметы</a></li> |
| <li><a href="#" class="footer-link">Расписание</a></li> |
| <li><a href="#" class="footer-link">Задания</a></li> |
| <li><a href="#" class="footer-link">Оценки</a></li> |
| </ul> |
| </div> |
| <div> |
| <h3 class="text-white font-medium mb-4">Контакты</h3> |
| <ul class="space-y-2"> |
| <li class="flex items-center"> |
| <i class="fas fa-envelope text-gray-300 mr-2"></i> |
| <a href="mailto:info@edusphere.com" class="footer-link">info@edusphere.com</a> |
| </li> |
| <li class="flex items-center"> |
| <i class="fas fa-phone-alt text-gray-300 mr-2"></i> |
| <a href="tel:+78005553535" class="footer-link">+7 (800) 555-35-35</a> |
| </li> |
| <li class="flex items-center"> |
| <i class="fas fa-map-marker-alt text-gray-300 mr-2"></i> |
| <span class="text-gray-300">Москва, ул. Образования, 1</span> |
| </li> |
| </ul> |
| </div> |
| <div> |
| <h3 class="text-white font-medium mb-4">Социальные сети</h3> |
| <div class="flex space-x-4"> |
| <a href="#" class="footer-link text-xl"><i class="fab fa-vk"></i></a> |
| <a href="#" class="footer-link text-xl"><i class="fab fa-telegram"></i></a> |
| <a href="#" class="footer-link text-xl"><i class="fab fa-youtube"></i></a> |
| <a href="#" class="footer-link text-xl"><i class="fab fa-instagram"></i></a> |
| </div> |
| <div class="mt-6"> |
| <button class="bg-white text-primary px-4 py-2 rounded-lg font-medium flex items-center"> |
| <i class="fas fa-paper-plane mr-2"></i> Связаться с нами |
| </button> |
| </div> |
| </div> |
| </div> |
| <div class="border-t border-gray-700 mt-8 pt-8 flex flex-col md:flex-row justify-between items-center"> |
| <p class="text-gray-300 text-sm">© 2023 EduSphere. Все права защищены.</p> |
| <div class="flex space-x-6 mt-4 md:mt-0"> |
| <a href="#" class="footer-link text-sm">Политика конфиденциальности</a> |
| <a href="#" class="footer-link text-sm">Условия использования</a> |
| <a href="#" class="footer-link text-sm">Помощь</a> |
| </div> |
| </div> |
| </div> |
| </footer> |
|
|
| <script> |
| |
| document.querySelectorAll('.class-tab').forEach(tab => { |
| tab.addEventListener('click', function() { |
| document.querySelectorAll('.class-tab').forEach(t => { |
| t.classList.remove('active-tab'); |
| t.classList.add('inactive-tab'); |
| }); |
| this.classList.remove('inactive-tab'); |
| this.classList.add('active-tab'); |
| }); |
| }); |
| |
| |
| const floatingBtn = document.querySelector('.floating-btn'); |
| setInterval(() => { |
| floatingBtn.style.transform = 'translateY(-5px)'; |
| setTimeout(() => { |
| floatingBtn.style.transform = 'translateY(0)'; |
| }, 500); |
| }, 2500); |
| </script> |
| <p style="border-radius: 8px; text-align: center; font-size: 12px; color: #fff; margin-top: 16px;position: fixed; left: 8px; bottom: 8px; z-index: 10; background: rgba(0, 0, 0, 0.8); padding: 4px 8px;">Made with <img src="https://enzostvs-deepsite.hf.space/logo.svg" alt="DeepSite Logo" style="width: 16px; height: 16px; vertical-align: middle;display:inline-block;margin-right:3px;filter:brightness(0) invert(1);"><a href="https://enzostvs-deepsite.hf.space" style="color: #fff;text-decoration: underline;" target="_blank" >DeepSite</a> - 🧬 <a href="https://enzostvs-deepsite.hf.space?remix=CLASHWEEK/clwtre" style="color: #fff;text-decoration: underline;" target="_blank" >Remix</a></p></body> |
| </html> |
