|
|
<!DOCTYPE html> |
|
|
<html lang="tr"> |
|
|
<head> |
|
|
<meta charset="UTF-8"> |
|
|
<meta name="viewport" content="width=device-width, initial-scale=1.0"> |
|
|
<title>Öğretmen Paneli - MiniMatik</title> |
|
|
<link rel="icon" type="image/x-icon" href="/static/favicon.ico"> |
|
|
<script src="https://cdn.tailwindcss.com"></script> |
|
|
<script src="https://unpkg.com/feather-icons"></script> |
|
|
<script src="https://cdn.jsdelivr.net/npm/feather-icons/dist/feather.min.js"></script> |
|
|
<style> |
|
|
@import url('https://fonts.googleapis.com/css2?family=Helvetica+Now+Display:wght@400;500;700&display=swap'); |
|
|
body { |
|
|
font-family: 'Helvetica Now Display', sans-serif; |
|
|
} |
|
|
.sidebar { |
|
|
transition: all 0.3s ease; |
|
|
} |
|
|
.sidebar-item { |
|
|
transition: all 0.2s ease; |
|
|
} |
|
|
.sidebar-item:hover { |
|
|
transform: translateX(5px); |
|
|
} |
|
|
</style> |
|
|
</head> |
|
|
<body class="bg-gray-100"> |
|
|
<div class="flex h-screen overflow-hidden"> |
|
|
|
|
|
<div class="sidebar bg-indigo-800 text-white w-64 flex-shrink-0"> |
|
|
<div class="p-4 border-b border-indigo-700 flex items-center space-x-2"> |
|
|
<div class="bg-amber-400 p-2 rounded-full"> |
|
|
<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="text-white"> |
|
|
<path d="M17 21v-2a4 4 0 0 0-4-4H5a4 4 0 0 0-4 4v2"></path> |
|
|
<circle cx="9" cy="7" r="4"></circle> |
|
|
<path d="M23 21v-2a4 4 0 0 0-3-3.87"></path> |
|
|
<path d="M16 3.13a4 4 0 0 1 0 7.75"></path> |
|
|
<circle cx="12" cy="12" r="3"></circle> |
|
|
</svg> |
|
|
</div> |
|
|
<h1 class="text-xl font-bold">Öğretmen Paneli</h1> |
|
|
</div> |
|
|
<div class="p-4"> |
|
|
<div class="mb-8"> |
|
|
<div class="flex items-center space-x-3 mb-4 p-2 bg-indigo-700 rounded-lg"> |
|
|
<div class="bg-indigo-500 p-2 rounded-full"> |
|
|
<i data-feather="user" class="w-5 h-5"></i> |
|
|
</div> |
|
|
<div> |
|
|
<h3 class="font-medium">Ayşe Öğretmen</h3> |
|
|
<p class="text-xs text-indigo-300">2-A Sınıf Öğretmeni</p> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
<nav class="space-y-1"> |
|
|
<a href="#" class="sidebar-item flex items-center space-x-3 p-3 bg-indigo-700 rounded-lg"> |
|
|
<i data-feather="home" class="w-5 h-5"></i> |
|
|
<span>Genel Bakış</span> |
|
|
</a> |
|
|
<a href="#" class="sidebar-item flex items-center space-x-3 p-3 text-indigo-200 hover:bg-indigo-700 rounded-lg"> |
|
|
<i data-feather="book" class="w-5 h-5"></i> |
|
|
<span>Ders Planlarım</span> |
|
|
</a> |
|
|
<a href="#" class="sidebar-item flex items-center space-x-3 p-3 text-indigo-200 hover:bg-indigo-700 rounded-lg"> |
|
|
<i data-feather="users" class="w-5 h-5"></i> |
|
|
<span>Öğrencilerim</span> |
|
|
</a> |
|
|
<a href="#" class="sidebar-item flex items-center space-x-3 p-3 text-indigo-200 hover:bg-indigo-700 rounded-lg"> |
|
|
<i data-feather="activity" class="w-5 h-5"></i> |
|
|
<span>İlerleme Takibi</span> |
|
|
</a> |
|
|
<a href="#" class="sidebar-item flex items-center space-x-3 p-3 text-indigo-200 hover:bg-indigo-700 rounded-lg"> |
|
|
<i data-feather="edit" class="w-5 h-5"></i> |
|
|
<span>İçerik Oluştur</span> |
|
|
</a> |
|
|
<a href="#" class="sidebar-item flex items-center space-x-3 p-3 text-indigo-200 hover:bg-indigo-700 rounded-lg"> |
|
|
<i data-feather="settings" class="w-5 h-5"></i> |
|
|
<span>Ayarlar</span> |
|
|
</a> |
|
|
</nav> |
|
|
</div> |
|
|
</div> |
|
|
|
|
|
|
|
|
<div class="flex-1 overflow-auto"> |
|
|
|
|
|
<header class="bg-white shadow-sm"> |
|
|
<div class="flex justify-between items-center p-4"> |
|
|
<div class="flex items-center space-x-4"> |
|
|
<button class="md:hidden text-gray-600"> |
|
|
<i data-feather="menu" class="w-5 h-5"></i> |
|
|
</button> |
|
|
<h2 class="text-xl font-bold text-gray-800">Genel Bakış</h2> |
|
|
</div> |
|
|
<div class="flex items-center space-x-4"> |
|
|
<button class="bg-indigo-100 text-indigo-600 p-2 rounded-full"> |
|
|
<i data-feather="bell" class="w-5 h-5"></i> |
|
|
</button> |
|
|
<button class="bg-indigo-100 text-indigo-600 p-2 rounded-full"> |
|
|
<i data-feather="message-square" class="w-5 h-5"></i> |
|
|
</button> |
|
|
<div class="w-8 h-8 bg-indigo-600 rounded-full"></div> |
|
|
</div> |
|
|
</div> |
|
|
</header> |
|
|
|
|
|
|
|
|
<main class="p-6"> |
|
|
|
|
|
<div class="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-4 gap-6 mb-8"> |
|
|
<div class="bg-white rounded-xl shadow-sm p-6"> |
|
|
<div class="flex justify-between items-start"> |
|
|
<div> |
|
|
<p class="text-gray-500 text-sm">Toplam Öğrenci</p> |
|
|
<h3 class="text-2xl font-bold text-gray-800 mt-1">24</h3> |
|
|
</div> |
|
|
<div class="bg-blue-100 p-3 rounded-lg"> |
|
|
<i data-feather="users" class="text-blue-600 w-5 h-5"></i> |
|
|
</div> |
|
|
</div> |
|
|
<div class="mt-4 pt-4 border-t border-gray-100"> |
|
|
<p class="text-green-500 text-sm flex items-center"> |
|
|
<i data-feather="arrow-up" class="w-4 h-4 mr-1"></i> |
|
|
<span>2 yeni kayıt</span> |
|
|
</p> |
|
|
</div> |
|
|
</div> |
|
|
<div class="bg-white rounded-xl shadow-sm p-6"> |
|
|
<div class="flex justify-between items-start"> |
|
|
<div> |
|
|
<p class="text-gray-500 text-sm">Tamamlanan Etkinlik</p> |
|
|
<h3 class="text-2xl font-bold text-gray-800 mt-1">48</h3> |
|
|
</div> |
|
|
<div class="bg-green-100 p-3 rounded-lg"> |
|
|
<i data-feather="check-circle" class="text-green-600 w-5 h-5"></i> |
|
|
</div> |
|
|
</div> |
|
|
<div class="mt-4 pt-4 border-t border-gray-100"> |
|
|
<p class="text-green-500 text-sm flex items-center"> |
|
|
<i data-feather="arrow-up" class="w-4 h-4 mr-1"></i> |
|
|
<span>Bu hafta 5 yeni</span> |
|
|
</p> |
|
|
</div> |
|
|
</div> |
|
|
<div class="bg-white rounded-xl shadow-sm p-6"> |
|
|
<div class="flex justify-between items-start"> |
|
|
<div> |
|
|
<p class="text-gray-500 text-sm">Ortalama Başarı</p> |
|
|
<h3 class="text-2xl font-bold text-gray-800 mt-1">%82</h3> |
|
|
</div> |
|
|
<div class="bg-amber-100 p-3 rounded-lg"> |
|
|
<i data-feather="award" class="text-amber-600 w-5 h-5"></i> |
|
|
</div> |
|
|
</div> |
|
|
<div class="mt-4 pt-4 border-t border-gray-100"> |
|
|
<p class="text-green-500 text-sm flex items-center"> |
|
|
<i data-feather="arrow-up" class="w-4 h-4 mr-1"></i> |
|
|
<span>%3 artış</span> |
|
|
</p> |
|
|
</div> |
|
|
</div> |
|
|
<div class="bg-white rounded-xl shadow-sm p-6"> |
|
|
<div class="flex justify-between items-start"> |
|
|
<div> |
|
|
<p class="text-gray-500 text-sm">Yeni Mesaj</p> |
|
|
<h3 class="text-2xl font-bold text-gray-800 mt-1">3</h3> |
|
|
</div> |
|
|
<div class="bg-red-100 p-3 rounded-lg"> |
|
|
<i data-feather="mail" class="text-red-600 w-5 h-5"></i> |
|
|
</div> |
|
|
</div> |
|
|
<div class="mt-4 pt-4 border-t border-gray-100"> |
|
|
<button class="text-blue-500 text-sm font-medium"> |
|
|
Cevapla |
|
|
</button> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
|
|
|
|
|
|
<div class="grid grid-cols-1 lg:grid-cols-3 gap-6"> |
|
|
<div class="lg:col-span-2"> |
|
|
<div class="bg-white rounded-xl shadow-sm p-6"> |
|
|
<div class="flex justify-between items-center mb-6"> |
|
|
<h3 class="text-lg font-bold text-gray-800">Son Etkinlikler</h3> |
|
|
<button class="text-indigo-600 text-sm font-medium">Tümünü Gör</button> |
|
|
</div> |
|
|
<div class="space-y-4"> |
|
|
<div class="flex items-start p-3 rounded-lg hover:bg-gray-50"> |
|
|
<div class="bg-indigo-100 p-2 rounded-lg mr-4"> |
|
|
<i data-feather="plus" class="text-indigo-600 w-4 h-4"></i> |
|
|
</div> |
|
|
<div> |
|
|
<h4 class="font-medium text-gray-800">Toplama Alıştırması</h4> |
|
|
<p class="text-sm text-gray-500">2-A sınıfı • 15 dakika önce</p> |
|
|
<div class="mt-2 flex items-center text-sm"> |
|
|
<span class="text-green-500 font-medium">%92 başarı</span> |
|
|
<span class="mx-2 text-gray-300">|</span> |
|
|
<span>24 katılım</span> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
<div class="flex items-start p-3 rounded-lg hover:bg-gray-50"> |
|
|
<div class="bg-amber-100 p-2 rounded-lg mr-4"> |
|
|
<i data-feather="minus" class="text-amber-600 w-4 h-4"></i> |
|
|
</div> |
|
|
<div> |
|
|
<h4 class="font-medium text-gray-800">Çıkarma Problemleri</h4> |
|
|
<p class="text-sm text-gray-500">2-A sınıfı • 3 saat önce</p> |
|
|
<div class="mt-2 flex items-center text-sm"> |
|
|
<span class="text-green-500 font-medium">%85 başarı</span> |
|
|
<span class="mx-2 text-gray-300">|</span> |
|
|
<span>24 katılım</span> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
<div class="flex items-start p-3 rounded-lg hover:bg-gray-50"> |
|
|
<div class="bg-green-100 p-2 rounded-lg mr-4"> |
|
|
<i data-feather="x" class="text-green-600 w-4 h-4"></i> |
|
|
</div> |
|
|
<div> |
|
|
<h4 class="font-medium text-gray-800">Çarpma Oyunu</h4> |
|
|
<p class="text-sm text-gray-500">2-A sınıfı • Dün</p> |
|
|
<div class="mt-2 flex items-center text-sm"> |
|
|
<span class="text-green-500 font-medium">%78 başarı</span> |
|
|
<span class="mx-2 text-gray-300">|</span> |
|
|
<span>24 katılım</span> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
<div> |
|
|
<div class="bg-white rounded-xl shadow-sm p-6"> |
|
|
<div class="flex justify-between items-center mb-6"> |
|
|
<h3 class="text-lg font-bold text-gray-800">Hızlı Erişim</h3> |
|
|
</div> |
|
|
<div class="grid grid-cols-2 gap-4"> |
|
|
<button class="flex flex-col items-center justify-center p-4 bg-indigo-50 rounded-lg hover:bg-indigo-100 transition"> |
|
|
<div class="bg-indigo-100 p-3 rounded-full mb-2"> |
|
|
<i data-feather="plus" class="text-indigo-600 w-5 h-5"></i> |
|
|
</div> |
|
|
<span class="text-sm font-medium text-gray-800">Toplama</span> |
|
|
</button> |
|
|
<button class="flex flex-col items-center justify-center p-4 bg-amber-50 rounded-lg hover:bg-amber-100 transition"> |
|
|
<div class="bg-amber-100 p-3 rounded-full mb-2"> |
|
|
<i data-feather="minus" class="text-amber-600 w-5 h-5"></i> |
|
|
</div> |
|
|
<span class="text-sm font-medium text-gray-800">Çıkarma</span> |
|
|
</button> |
|
|
<button class="flex flex-col items-center justify-center p-4 bg-green-50 rounded-lg hover:bg-green-100 transition"> |
|
|
<div class="bg-green-100 p-3 rounded-full mb-2"> |
|
|
<i data-feather="x" class="text-green-600 w-5 h-5"></i> |
|
|
</div> |
|
|
<span class="text-sm font-medium text-gray-800">Çarpma</span> |
|
|
</button> |
|
|
<button class="flex flex-col items-center justify-center p-4 bg-red-50 rounded-lg hover:bg-red-100 transition"> |
|
|
<div class="bg-red-100 p-3 rounded-full mb-2"> |
|
|
<i data-feather="divide" class="text-red-600 w-5 h-5"></i> |
|
|
</div> |
|
|
<span class="text-sm font-medium text-gray-800">Bölme</span> |
|
|
</button> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
</main> |
|
|
</div> |
|
|
</div> |
|
|
|
|
|
<script> |
|
|
feather.replace(); |
|
|
|
|
|
|
|
|
document.querySelector('.md\\:hidden').addEventListener('click', function() { |
|
|
document.querySelector('.sidebar').classList.toggle('-translate-x-full'); |
|
|
}); |
|
|
</script> |
|
|
</body> |
|
|
</html> |
|
|
|
