|
|
<!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> |
