Cert Notes
Akademi Eğitim Platformu Cert Notes Dökümanı
<!DOCTYPE html>
<html lang="tr">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Sertifika ve Rozet Yönetimi | Akademi 360</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">
<link href="https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&display=swap" rel="stylesheet">
<style>
body { font-family: 'Inter', sans-serif; }
/* Sertifika kartı hover */
.cert-card {
transition: all 0.3s ease;
}
.cert-card:hover {
transform: translateY(-4px);
box-shadow: 0 20px 25px -5px rgba(0,0,0,0.1);
}
/* Rozet kartı */
.badge-card {
transition: all 0.3s ease;
}
.badge-card:hover {
transform: translateY(-4px);
box-shadow: 0 20px 25px -5px rgba(0,0,0,0.1);
}
/* Tab stilleri */
.tab-active {
border-bottom: 3px solid #4f46e5;
color: #4f46e5;
font-weight: 600;
}
/* Kullanıcı avatar stack */
.avatar-stack {
display: flex;
align-items: center;
}
.avatar-stack .avatar-item {
transition: all 0.2s ease;
border: 2px solid white;
margin-left: -8px;
}
.avatar-stack .avatar-item:first-child {
margin-left: 0;
}
.avatar-stack .avatar-item:hover {
transform: scale(1.1);
z-index: 10;
}
/* İstatistik kartları */
.stat-card {
transition: all 0.2s ease;
}
.stat-card:hover {
transform: translateY(-2px);
box-shadow: 0 10px 25px -5px rgba(0,0,0,0.1);
}
/* Modal animasyonu */
@keyframes slideIn {
from {
transform: translateY(20px);
opacity: 0;
}
to {
transform: translateY(0);
opacity: 1;
}
}
.modal-content {
animation: slideIn 0.3s ease-out;
}
/* QR kod stilleri */
.qr-code {
background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
}
/* Scrollbar */
.custom-scroll::-webkit-scrollbar {
width: 6px;
height: 6px;
}
.custom-scroll::-webkit-scrollbar-track {
background: #f1f1f1;
}
.custom-scroll::-webkit-scrollbar-thumb {
background: #cbd5e1;
border-radius: 4px;
}
</style>
</head>
<body class="bg-gray-50">
<!-- Ana Container -->
<div class="flex h-screen overflow-hidden">
<!-- Sidebar -->
<aside class="w-72 bg-gradient-to-b from-indigo-900 to-indigo-800 text-white flex flex-col shadow-2xl">
<div class="p-6 border-b border-indigo-700">
<div class="flex items-center space-x-3">
<div class="w-10 h-10 bg-white/20 rounded-xl flex items-center justify-center">
<i class="fas fa-certificate text-2xl"></i>
</div>
<div>
<h1 class="text-xl font-bold">Sertifika & Rozet</h1>
<p class="text-xs text-indigo-200">Yönetim Paneli</p>
</div>
</div>
</div>
<!-- Profil -->
<div class="p-6 border-b border-indigo-700">
<div class="flex items-center space-x-3">
<img src="https://ui-avatars.com/api/?name=Admin+User&background=6366f1&color=fff&size=40" class="rounded-lg">
<div class="flex-1">
<h3 class="font-medium">Ahmet Yılmaz</h3>
<p class="text-xs text-indigo-200">Sertifika Yöneticisi</p>
</div>
</div>
</div>
<!-- İstatistik Özeti -->
<div class="p-4 border-b border-indigo-700">
<p class="text-xs font-semibold text-indigo-300 uppercase mb-3">Özet İstatistikler</p>
<div class="grid grid-cols-2 gap-3">
<div class="bg-indigo-700/50 rounded-lg p-2 text-center">
<p class="text-2xl font-bold">156</p>
<p class="text-xs text-indigo-200">Sertifika</p>
</div>
<div class="bg-indigo-700/50 rounded-lg p-2 text-center">
<p class="text-2xl font-bold">12</p>
<p class="text-xs text-indigo-200">Rozet</p>
</div>
<div class="bg-indigo-700/50 rounded-lg p-2 text-center">
<p class="text-2xl font-bold">892</p>
<p class="text-xs text-indigo-200">Verilen</p>
</div>
<div class="bg-indigo-700/50 rounded-lg p-2 text-center">
<p class="text-2xl font-bold">24</p>
<p class="text-xs text-indigo-200">Aktif</p>
</div>
</div>
</div>
<!-- Hızlı Filtreler -->
<div class="p-4 border-b border-indigo-700">
<p class="text-xs font-semibold text-indigo-300 uppercase mb-2">TIP</p>
<div class="space-y-1">
<label class="flex items-center text-sm text-indigo-200 hover:text-white cursor-pointer">
<input type="checkbox" class="mr-2" checked> Tümü
<span class="ml-auto bg-indigo-800 text-xs px-2 py-0.5 rounded">168</span>
</label>
<label class="flex items-center text-sm text-indigo-200 hover:text-white cursor-pointer">
<input type="checkbox" class="mr-2" checked> Sertifikalar
<span class="ml-auto bg-indigo-800 text-xs px-2 py-0.5 rounded">156</span>
</label>
<label class="flex items-center text-sm text-indigo-200 hover:text-white cursor-pointer">
<input type="checkbox" class="mr-2" checked> Rozetler
<span class="ml-auto bg-indigo-800 text-xs px-2 py-0.5 rounded">12</span>
</label>
</div>
</div>
<!-- Durum Filtreleri -->
<div class="p-4 border-b border-indigo-700">
<p class="text-xs font-semibold text-indigo-300 uppercase mb-2">DURUM</p>
<div class="space-y-1">
<label class="flex items-center text-sm text-indigo-200 hover:text-white cursor-pointer">
<span class="w-2 h-2 bg-green-500 rounded-full mr-2"></span>
Aktif
<span class="ml-auto bg-indigo-800 text-xs px-2 py-0.5 rounded">124</span>
</label>
<label class="flex items-center text-sm text-indigo-200 hover:text-white cursor-pointer">
<span class="w-2 h-2 bg-yellow-500 rounded-full mr-2"></span>
Taslak
<span class="ml-auto bg-indigo-800 text-xs px-2 py-0.5 rounded">28</span>
</label>
<label class="flex items-center text-sm text-indigo-200 hover:text-white cursor-pointer">
<span class="w-2 h-2 bg-red-500 rounded-full mr-2"></span>
Pasif
<span class="ml-auto bg-indigo-800 text-xs px-2 py-0.5 rounded">16</span>
</label>
</div>
</div>
</aside>
<!-- Ana İçerik -->
<main class="flex-1 overflow-y-auto bg-gray-50">
<!-- Üst Bar -->
<header class="bg-white shadow-sm sticky top-0 z-10">
<div class="px-6 py-4 flex items-center justify-between">
<div class="flex items-center">
<h2 class="text-lg font-semibold text-gray-800">Sertifika ve Rozet Yönetimi</h2>
<span class="ml-3 bg-indigo-100 text-indigo-700 text-xs px-2 py-1 rounded-full">Başarı ve Yetkinlik</span>
</div>
<div class="flex items-center space-x-3">
<div class="relative w-64">
<i class="fas fa-search absolute left-3 top-1/2 -translate-y-1/2 text-gray-400"></i>
<input type="text" placeholder="Sertifika veya rozet ara..." class="w-full pl-10 pr-4 py-2 border border-gray-200 rounded-lg">
</div>
<button class="px-4 py-2 bg-indigo-600 text-white rounded-lg hover:bg-indigo-700 transition flex items-center">
<i class="fas fa-plus-circle mr-2"></i> Yeni Sertifika
</button>
</div>
</div>
<!-- Tab Header -->
<div class="px-6 border-b border-gray-200">
<div class="flex space-x-8">
<button onclick="switchTab('certificates')" id="tab-certificates" class="tab-active py-3 text-sm font-medium">Sertifikalar</button>
<button onclick="switchTab('badges')" id="tab-badges" class="py-3 text-sm font-medium text-gray-500 hover:text-gray-700">Rozetler</button>
<button onclick="switchTab('issued')" id="tab-issued" class="py-3 text-sm font-medium text-gray-500 hover:text-gray-700">Verilenler</button>
<button onclick="switchTab('templates')" id="tab-templates" class="py-3 text-sm font-medium text-gray-500 hover:text-gray-700">Şablonlar</button>
</div>
</div>
</header>
<!-- Tab Content -->
<div class="p-6">
<!-- TAB 1: SERTİFİKALAR -->
<div id="content-certificates">
<!-- İstatistik Kartları -->
<div class="grid grid-cols-1 md:grid-cols-4 gap-4 mb-6">
<div class="stat-card bg-white rounded-xl shadow-sm p-4 border border-gray-100">
<div class="flex items-center">
<div class="w-10 h-10 bg-indigo-100 rounded-lg flex items-center justify-center mr-3">
<i class="fas fa-certificate text-indigo-600"></i>
</div>
<div>
<p class="text-sm text-gray-500">Toplam Sertifika</p>
<p class="text-2xl font-bold text-gray-800">156</p>
</div>
</div>
<div class="mt-2 text-xs text-green-600">+12 bu ay</div>
</div>
<div class="stat-card bg-white rounded-xl shadow-sm p-4 border border-gray-100">
<div class="flex items-center">
<div class="w-10 h-10 bg-green-100 rounded-lg flex items-center justify-center mr-3">
<i class="fas fa-award text-green-600"></i>
</div>
<div>
<p class="text-sm text-gray-500">Verilen Sertifika</p>
<p class="text-2xl font-bold text-gray-800">892</p>
</div>
</div>
</div>
<div class="stat-card bg-white rounded-xl shadow-sm p-4 border border-gray-100">
<div class="flex items-center">
<div class="w-10 h-10 bg-yellow-100 rounded-lg flex items-center justify-center mr-3">
<i class="fas fa-clock text-yellow-600"></i>
</div>
<div>
<p class="text-sm text-gray-500">Aktif Sertifika</p>
<p class="text-2xl font-bold text-gray-800">124</p>
</div>
</div>
</div>
<div class="stat-card bg-white rounded-xl shadow-sm p-4 border border-gray-100">
<div class="flex items-center">
<div class="w-10 h-10 bg-purple-100 rounded-lg flex items-center justify-center mr-3">
<i class="fas fa-building text-purple-600"></i>
</div>
<div>
<p class="text-sm text-gray-500">Bağlı Kurs</p>
<p class="text-2xl font-bold text-gray-800">45</p>
</div>
</div>
</div>
</div>
<!-- Sertifika Grid -->
<div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-4">
<!-- Sertifika 1 - JavaScript -->
<div class="cert-card bg-white border border-gray-200 rounded-xl overflow-hidden cursor-pointer" onclick="openCertificateDetails('js')">
<div class="h-24 bg-gradient-to-r from-indigo-600 to-purple-600 relative">
<div class="absolute -bottom-8 left-4 w-16 h-16 bg-white rounded-lg shadow-lg flex items-center justify-center">
<i class="fas fa-certificate text-3xl text-indigo-600"></i>
</div>
<div class="absolute bottom-2 right-2 bg-white/20 text-white text-xs px-2 py-1 rounded-full">
<i class="fas fa-qrcode mr-1"></i> QR
</div>
</div>
<div class="pt-10 p-4">
<h3 class="font-semibold text-gray-800">İleri Seviye JavaScript</h3>
<p class="text-sm text-gray-500 mb-2">Sertifika Kodu: CERT-JS-001</p>
<div class="flex items-center justify-between mb-3">
<span class="bg-green-100 text-green-700 text-xs px-2 py-0.5 rounded-full">Aktif</span>
<span class="text-xs text-gray-400">Oluşturma: 15.03.2024</span>
</div>
<!-- İstatistikler -->
<div class="flex items-center justify-between text-sm border-t border-gray-100 pt-3">
<div>
<p class="text-xs text-gray-500">Verilen</p>
<p class="font-bold">156</p>
</div>
<div>
<p class="text-xs text-gray-500">Bağlı Kurs</p>
<p class="font-bold">3</p>
</div>
<div>
<p class="text-xs text-gray-500">Geçerlilik</p>
<p class="font-bold">2 yıl</p>
</div>
</div>
<!-- Son Verilenler (Avatar Stack) -->
<div class="mt-3">
<p class="text-xs text-gray-500 mb-1">Son Verilenler:</p>
<div class="avatar-stack">
<img src="https://ui-avatars.com/api/?name=Ali+Yilmaz&size=24" class="avatar-item w-6 h-6 rounded-full">
<img src="https://ui-avatars.com/api/?name=Ayse+Demir&size=24" class="avatar-item w-6 h-6 rounded-full">
<img src="https://ui-avatars.com/api/?name=Mehmet+Kaya&size=24" class="avatar-item w-6 h-6 rounded-full">
<img src="https://ui-avatars.com/api/?name=Zeynep+Celik&size=24" class="avatar-item w-6 h-6 rounded-full">
<span class="avatar-item w-6 h-6 bg-gray-200 rounded-full flex items-center justify-center text-xs">+152</span>
</div>
</div>
</div>
</div>
<!-- Sertifika 2 - Python -->
<div class="cert-card bg-white border border-gray-200 rounded-xl overflow-hidden cursor-pointer" onclick="openCertificateDetails('python')">
<div class="h-24 bg-gradient-to-r from-green-600 to-blue-600 relative">
<div class="absolute -bottom-8 left-4 w-16 h-16 bg-white rounded-lg shadow-lg flex items-center justify-center">
<i class="fas fa-certificate text-3xl text-green-600"></i>
</div>
</div>
<div class="pt-10 p-4">
<h3 class="font-semibold text-gray-800">Python ile Veri Analizi</h3>
<p class="text-sm text-gray-500 mb-2">Sertifika Kodu: CERT-PY-002</p>
<div class="flex items-center justify-between mb-3">
<span class="bg-green-100 text-green-700 text-xs px-2 py-0.5 rounded-full">Aktif</span>
<span class="text-xs text-gray-400">Oluşturma: 10.02.2024</span>
</div>
<div class="flex items-center justify-between text-sm border-t border-gray-100 pt-3">
<div>
<p class="text-xs text-gray-500">Verilen</p>
<p class="font-bold">89</p>
</div>
<div>
<p class="text-xs text-gray-500">Bağlı Kurs</p>
<p class="font-bold">2</p>
</div>
<div>
<p class="text-xs text-gray-500">Geçerlilik</p>
<p class="font-bold">3 yıl</p>
</div>
</div>
</div>
</div>
<!-- Sertifika 3 - React (Taslak) -->
<div class="cert-card bg-white border border-gray-200 rounded-xl overflow-hidden cursor-pointer opacity-75">
<div class="h-24 bg-gradient-to-r from-blue-600 to-purple-600 relative">
<div class="absolute -bottom-8 left-4 w-16 h-16 bg-white rounded-lg shadow-lg flex items-center justify-center">
<i class="fas fa-certificate text-3xl text-blue-600"></i>
</div>
</div>
<div class="pt-10 p-4">
<h3 class="font-semibold text-gray-800">React ile Frontend Geliştirme</h3>
<p class="text-sm text-gray-500 mb-2">Sertifika Kodu: CERT-REACT-003</p>
<div class="flex items-center justify-between mb-3">
<span class="bg-yellow-100 text-yellow-700 text-xs px-2 py-0.5 rounded-full">Taslak</span>
<span class="text-xs text-gray-400">Son güncelleme: 2 gün önce</span>
</div>
<div class="flex items-center justify-between text-sm border-t border-gray-100 pt-3">
<div>
<p class="text-xs text-gray-500">Verilen</p>
<p class="font-bold">0</p>
</div>
<div>
<p class="text-xs text-gray-500">Bağlı Kurs</p>
<p class="font-bold">1</p>
</div>
<div>
<p class="text-xs text-gray-500">Geçerlilik</p>
<p class="font-bold">2 yıl</p>
</div>
</div>
</div>
</div>
</div>
</div>
<!-- TAB 2: ROZETLER (gizli) -->
<div id="content-badges" class="hidden">
<div class="grid grid-cols-1 md:grid-cols-4 gap-4 mb-6">
<div class="stat-card bg-white rounded-xl shadow-sm p-4 border border-gray-100">
<div class="flex items-center">
<div class="w-10 h-10 bg-purple-100 rounded-lg flex items-center justify-center mr-3">
<i class="fas fa-medal text-purple-600"></i>
</div>
<div>
<p class="text-sm text-gray-500">Toplam Rozet</p>
<p class="text-2xl font-bold text-gray-800">12</p>
</div>
</div>
</div>
<div class="stat-card bg-white rounded-xl shadow-sm p-4 border border-gray-100">
<div class="flex items-center">
<div class="w-10 h-10 bg-yellow-100 rounded-lg flex items-center justify-center mr-3">
<i class="fas fa-star text-yellow-600"></i>
</div>
<div>
<p class="text-sm text-gray-500">Kazanılan</p>
<p class="text-2xl font-bold text-gray-800">234</p>
</div>
</div>
</div>
<div class="stat-card bg-white rounded-xl shadow-sm p-4 border border-gray-100">
<div class="flex items-center">
<div class="w-10 h-10 bg-green-100 rounded-lg flex items-center justify-center mr-3">
<i class="fas fa-trophy text-green-600"></i>
</div>
<div>
<p class="text-sm text-gray-500">Aktif</p>
<p class="text-2xl font-bold text-gray-800">8</p>
</div>
</div>
</div>
</div>
<!-- Rozet Grid -->
<div class="grid grid-cols-1 md:grid-cols-3 lg:grid-cols-4 gap-4">
<!-- Rozet 1 - Hızlı Öğrenen -->
<div class="badge-card bg-gradient-to-br from-yellow-400 to-orange-500 rounded-xl p-4 text-white cursor-pointer">
<div class="flex items-center justify-between mb-2">
<i class="fas fa-star text-3xl"></i>
<span class="bg-white/20 text-xs px-2 py-1 rounded-full">24 kazanım</span>
</div>
<h3 class="font-bold text-lg">Hızlı Öğrenen</h3>
<p class="text-xs opacity-90 mt-1">Kursu 30 günden kısa sürede tamamlayanlara</p>
<!-- Kazananlar -->
<div class="mt-3 flex items-center justify-between">
<div class="avatar-stack">
<img src="https://ui-avatars.com/api/?name=Ali+Yilmaz&size=20" class="avatar-item w-5 h-5 rounded-full">
<img src="https://ui-avatars.com/api/?name=Ayse+Demir&size=20" class="avatar-item w-5 h-5 rounded-full">
<span class="avatar-item w-5 h-5 bg-white/20 rounded-full flex items-center justify-center text-xs">+22</span>
</div>
<span class="text-xs bg-white/20 px-2 py-1 rounded-full">Aktif</span>
</div>
</div>
<!-- Rozet 2 - Mükemmeliyetçi -->
<div class="badge-card bg-gradient-to-br from-blue-600 to-purple-600 rounded-xl p-4 text-white cursor-pointer">
<div class="flex items-center justify-between mb-2">
<i class="fas fa-crown text-3xl"></i>
<span class="bg-white/20 text-xs px-2 py-1 rounded-full">12 kazanım</span>
</div>
<h3 class="font-bold text-lg">Mükemmeliyetçi</h3>
<p class="text-xs opacity-90 mt-1">Tüm quizlerden 100 alanlara</p>
<div class="mt-3 flex items-center justify-between">
<div class="avatar-stack">
<img src="https://ui-avatars.com/api/?name=Zeynep+Celik&size=20" class="avatar-item w-5 h-5 rounded-full">
<span class="avatar-item w-5 h-5 bg-white/20 rounded-full flex items-center justify-center text-xs">+11</span>
</div>
<span class="text-xs bg-white/20 px-2 py-1 rounded-full">Aktif</span>
</div>
</div>
<!-- Rozet 3 - Takım Oyuncusu -->
<div class="badge-card bg-gradient-to-br from-green-600 to-teal-600 rounded-xl p-4 text-white cursor-pointer">
<div class="flex items-center justify-between mb-2">
<i class="fas fa-users text-3xl"></i>
<span class="bg-white/20 text-xs px-2 py-1 rounded-full">8 kazanım</span>
</div>
<h3 class="font-bold text-lg">Takım Oyuncusu</h3>
<p class="text-xs opacity-90 mt-1">Grup projelerinde aktif rol alanlara</p>
</div>
</div>
</div>
</div>
</main>
</div>
<!-- Sertifika Detay Modalı -->
<div id="certificateDetailModal" class="fixed inset-0 bg-black/50 flex items-center justify-center z-50 hidden">
<div class="bg-white rounded-xl shadow-xl w-full max-w-4xl max-h-[90vh] overflow-hidden modal-content">
<!-- Modal Header -->
<div class="px-6 py-4 border-b border-gray-100 flex items-center justify-between">
<div class="flex items-center">
<div class="w-12 h-12 bg-indigo-100 rounded-lg flex items-center justify-center mr-3">
<i class="fas fa-certificate text-indigo-600 text-xl"></i>
</div>
<div>
<h3 class="text-xl font-bold text-gray-800">İleri Seviye JavaScript Sertifikası</h3>
<p class="text-sm text-gray-500">CERT-JS-001 • Oluşturma: 15.03.2024</p>
</div>
</div>
<button onclick="closeModal()" class="text-gray-400 hover:text-gray-600">
<i class="fas fa-times"></i>
</button>
</div>
<!-- Tab Yapısı -->
<div class="border-b border-gray-100 px-6">
<div class="flex space-x-6">
<button onclick="switchDetailTab('overview')" id="detail-tab-overview" class="tab-active py-3 text-sm font-medium">Genel Bakış</button>
<button onclick="switchDetailTab('recipients')" id="detail-tab-recipients" class="py-3 text-sm font-medium text-gray-500 hover:text-gray-700">Verilenler (156)</button>
<button onclick="switchDetailTab('courses')" id="detail-tab-courses" class="py-3 text-sm font-medium text-gray-500 hover:text-gray-700">Bağlı Kurslar</button>
<button onclick="switchDetailTab('settings')" id="detail-tab-settings" class="py-3 text-sm font-medium text-gray-500 hover:text-gray-700">Ayarlar</button>
</div>
</div>
<!-- Modal İçerik -->
<div class="p-6 overflow-y-auto custom-scroll" style="max-height: calc(90vh - 200px);">
<!-- Genel Bakış -->
<div id="detail-content-overview">
<div class="grid grid-cols-3 gap-6">
<!-- Sol - Sertifika Önizleme -->
<div class="col-span-2">
<div class="bg-gradient-to-r from-indigo-600 to-purple-600 rounded-xl p-6 text-white">
<div class="flex items-center justify-between mb-6">
<i class="fas fa-certificate text-3xl"></i>
<span class="bg-white/20 text-xs px-3 py-1 rounded-full">Sertifika No: CERT-JS-001</span>
</div>
<h2 class="text-2xl font-bold mb-2">Başarı Sertifikası</h2>
<p class="text-white/80 text-sm mb-4">İleri Seviye JavaScript kursunu başarıyla tamamlayanlara verilir.</p>
<div class="border-t border-white/20 pt-4">
<p class="text-xs text-white/60">Düzenleyen: Akademi 360</p>
<p class="text-xs text-white/60 mt-1">Geçerlilik: 2 yıl</p>
</div>
<div class="mt-4 flex space-x-2">
<span class="bg-white/20 px-3 py-1 rounded-full text-xs">QR Kod Aktif</span>
<span class="bg-white/20 px-3 py-1 rounded-full text-xs">PDF İndirilebilir</span>
</div>
</div>
</div>
<!-- Sağ - Bilgiler -->
<div class="space-y-4">
<div class="bg-gray-50 rounded-lg p-4">
<h4 class="font-medium text-gray-800 mb-2">Sertifika Bilgileri</h4>
<div class="space-y-2 text-sm">
<div class="flex justify-between">
<span class="text-gray-500">Durum:</span>
<span class="font-medium text-green-600">Aktif</span>
</div>
<div class="flex justify-between">
<span class="text-gray-500">Geçme Notu:</span>
<span class="font-medium">%70</span>
</div>
<div class="flex justify-between">
<span class="text-gray-500">Verilen:</span>
<span class="font-medium">156 kişi</span>
</div>
<div class="flex justify-between">
<span class="text-gray-500">Son Verilme:</span>
<span class="font-medium">2 saat önce</span>
</div>
</div>
</div>
<div class="bg-indigo-50 rounded-lg p-4">
<h4 class="font-medium text-indigo-800 mb-2">İstatistikler</h4>
<div class="space-y-2">
<div>
<div class="flex justify-between text-xs mb-1">
<span>Memnuniyet</span>
<span>%98</span>
</div>
<div class="w-full bg-white rounded-full h-1.5">
<div class="bg-indigo-600 h-1.5 rounded-full" style="width: 98%"></div>
</div>
</div>
<div>
<div class="flex justify-between text-xs mb-1">
<span>İstihdam Oranı</span>
<span>%85</span>
</div>
<div class="w-full bg-white rounded-full h-1.5">
<div class="bg-green-600 h-1.5 rounded-full" style="width: 85%"></div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
<!-- Verilenler Listesi -->
<div id="detail-content-recipients" class="hidden">
<div class="mb-4 flex items-center justify-between">
<h4 class="font-medium text-gray-800">Sertifika Sahipleri (156)</h4>
<div class="relative w-64">
<i class="fas fa-search absolute left-3 top-1/2 -translate-y-1/2 text-gray-400"></i>
<input type="text" placeholder="Kullanıcı ara..." class="w-full pl-9 pr-3 py-1.5 border border-gray-200 rounded-lg text-sm">
</div>
</div>
<div class="space-y-2">
<!-- Kullanıcı 1 -->
<div class="flex items-center justify-between p-3 hover:bg-gray-50 rounded-lg">
<div class="flex items-center">
<img src="https://ui-avatars.com/api/?name=Ali+Yilmaz&size=32" class="w-8 h-8 rounded-full mr-2">
<div>
<p class="font-medium">Ali Yılmaz</p>
<p class="text-xs text-gray-500">Verilme: 15.03.2024 • Sertifika No: CERT-JS-156</p>
</div>
</div>
<div class="flex items-center space-x-2">
<span class="bg-green-100 text-green-700 text-xs px-2 py-0.5 rounded-full">Aktif</span>
<button class="text-indigo-600 hover:text-indigo-800 text-sm">
<i class="fas fa-download"></i>
</button>
<button class="text-gray-400 hover:text-gray-600">
<i class="fas fa-ellipsis-v"></i>
</button>
</div>
</div>
<!-- Kullanıcı 2 -->
<div class="flex items-center justify-between p-3 hover:bg-gray-50 rounded-lg">
<div class="flex items-center">
<img src="https://ui-avatars.com/api/?name=Ayse+Demir&size=32" class="w-8 h-8 rounded-full mr-2">
<div>
<p class="font-medium">Ayşe Demir</p>
<p class="text-xs text-gray-500">Verilme: 10.03.2024 • Sertifika No: CERT-JS-155</p>
</div>
</div>
<div class="flex items-center space-x-2">
<span class="bg-green-100 text-green-700 text-xs px-2 py-0.5 rounded-full">Aktif</span>
<button class="text-indigo-600 hover:text-indigo-800 text-sm">
<i class="fas fa-download"></i>
</button>
</div>
</div>
</div>
<!-- Sayfalama -->
<div class="flex items-center justify-between mt-4 pt-4 border-t border-gray-100">
<p class="text-sm text-gray-500">1-10 / 156 gösteriliyor</p>
<div class="flex space-x-2">
<button class="px-3 py-1 border border-gray-200 rounded-lg text-sm">1</button>
<button class="px-3 py-1 border border-gray-200 rounded-lg text-sm">2</button>
<button class="px-3 py-1 border border-gray-200 rounded-lg text-sm">3</button>
<span class="px-2 py-1">...</span>
<button class="px-3 py-1 border border-gray-200 rounded-lg text-sm">16</button>
</div>
</div>
</div>
<!-- Bağlı Kurslar -->
<div id="detail-content-courses" class="hidden">
<div class="space-y-3">
<!-- Kurs 1 -->
<div class="border border-gray-200 rounded-lg p-3 flex items-center justify-between">
<div class="flex items-center">
<div class="w-10 h-10 bg-indigo-100 rounded-lg flex items-center justify-center mr-3">
<i class="fab fa-js text-indigo-600"></i>
</div>
<div>
<h4 class="font-medium">İleri Seviye JavaScript</h4>
<p class="text-xs text-gray-500">Kurs ID: KRS-001 • 156 sertifika verildi</p>
</div>
</div>
<span class="bg-green-100 text-green-700 text-xs px-2 py-1 rounded-full">Aktif</span>
</div>
<!-- Kurs 2 -->
<div class="border border-gray-200 rounded-lg p-3 flex items-center justify-between">
<div class="flex items-center">
<div class="w-10 h-10 bg-green-100 rounded-lg flex items-center justify-center mr-3">
<i class="fab fa-node text-green-600"></i>
</div>
<div>
<h4 class="font-medium">Node.js Backend Geliştirme</h4>
<p class="text-xs text-gray-500">Kurs ID: KRS-004 • 45 sertifika verildi</p>
</div>
</div>
<span class="bg-green-100 text-green-700 text-xs px-2 py-1 rounded-full">Aktif</span>
</div>
</div>
</div>
<!-- Ayarlar -->
<div id="detail-content-settings" class="hidden">
<div class="space-y-4">
<div>
<label class="block text-sm font-medium text-gray-700 mb-1">Sertifika Adı</label>
<input type="text" value="İleri Seviye JavaScript Sertifikası" class="w-full border border-gray-200 rounded-lg px-3 py-2">
</div>
<div>
<label class="block text-sm font-medium text-gray-700 mb-1">Geçme Notu (%)</label>
<input type="number" value="70" class="w-full border border-gray-200 rounded-lg px-3 py-2">
</div>
<div>
<label class="block text-sm font-medium text-gray-700 mb-1">Geçerlilik Süresi</label>
<select class="w-full border border-gray-200 rounded-lg px-3 py-2">
<option>2 yıl</option>
<option>3 yıl</option>
<option>5 yıl</option>
<option>Sınırsız</option>
</select>
</div>
<div class="border-t border-gray-200 pt-4">
<button class="px-4 py-2 bg-red-600 text-white rounded-lg hover:bg-red-700">
<i class="fas fa-trash mr-2"></i>Sertifikayı Sil
</button>
</div>
</div>
</div>
</div>
</div>
</div>
<script>
// Tab geçişleri
function switchTab(tabName) {
document.querySelectorAll('[id^="content-"]').forEach(content => {
content.classList.add('hidden');
});
document.querySelectorAll('[id^="tab-"]').forEach(tab => {
tab.classList.remove('tab-active');
tab.classList.add('text-gray-500');
});
document.getElementById(`content-${tabName}`).classList.remove('hidden');
const activeTab = document.getElementById(`tab-${tabName}`);
activeTab.classList.add('tab-active');
activeTab.classList.remove('text-gray-500');
}
// Sertifika detay modalı
function openCertificateDetails(certId) {
document.getElementById('certificateDetailModal').classList.remove('hidden');
}
function closeModal() {
document.getElementById('certificateDetailModal').classList.add('hidden');
}
// Detay tab geçişleri
function switchDetailTab(tabName) {
document.querySelectorAll('[id^="detail-content-"]').forEach(content => {
content.classList.add('hidden');
});
document.querySelectorAll('[id^="detail-tab-"]').forEach(tab => {
tab.classList.remove('tab-active');
tab.classList.add('text-gray-500');
});
document.getElementById(`detail-content-${tabName}`).classList.remove('hidden');
const activeTab = document.getElementById(`detail-tab-${tabName}`);
activeTab.classList.add('tab-active');
activeTab.classList.remove('text-gray-500');
}
// Modal dışına tıklama
window.onclick = function(event) {
const modal = document.getElementById('certificateDetailModal');
if (event.target === modal) {
modal.classList.add('hidden');
}
};
</script>
</body>
</html>
🎯 Sertifika ve Rozet Yönetim Sistemi
1. Ana Panel İstatistikleri 📊
- Sertifikalar: 156 toplam, 892 verilen, 124 aktif
- Rozetler: 12 toplam, 234 kazanım, 8 aktif
2. Sertifika Kartı Özellikleri 🏆
Görsel Öğeler:
- Gradient arkaplan (indigo-purple, green-blue)
- Sertifika ikonu
- QR kod göstergesi
- Durum rozeti (Aktif/Taslak)
Sertifika Bilgileri:
- İsim ve kod
- Oluşturma tarihi
- Verilen sayısı
- Bağlı kurs sayısı
- Geçerlilik süresi
Son Verilenler:
- Avatar stack (üst üste fotoğraflar)
- Hover efektleri
- Sayı göstergesi
3. Sertifika Detay Modalı 📋
Tab 1: Genel Bakış
- Sertifika önizleme (gradient kart)
- QR kod bilgisi
- PDF indirme seçeneği
- Detaylı istatistikler:
- Memnuniyet oranı (%98)
- İstihdam oranı (%85)
Tab 2: Verilenler Listesi
- Arama özellikli liste
- Kullanıcı bazlı detaylar:
- İsim
- Verilme tarihi
- Sertifika numarası
- İndirme butonu
- Sayfalama
Tab 3: Bağlı Kurslar
- Kurs listesi:
- İkon, isim, kurs ID
- Verilen sertifika sayısı
- Durum bilgisi
- İlişki yönetimi
Tab 4: Ayarlar
- Sertifika adı düzenleme
- Geçme notu ayarı
- Geçerlilik süresi seçimi
- Silme butonu (tehlikeli işlem)
4. Rozet Kartları 🎖️
Rozet Tipleri:
-
Hızlı Öğrenen (Sarı-turuncu gradient)
- 30 günden kısa sürede tamamlayanlar
- 24 kazanım
-
Mükemmeliyetçi (Mavi-mor gradient)
- Tüm quizlerden 100 alanlar
- 12 kazanım
-
Takım Oyuncusu (Yeşil-teal gradient)
- Grup projelerinde aktif rol
- 8 kazanım
Rozet Kartı Özellikleri:
- Gradient arkaplan
- İkon
- Kazanım sayısı
- Açıklama
- Kazanan avatar stack'i
- Durum göstergesi
5. Görsel Zenginlikler 🎨
Renk Kodlamaları:
- 🟣 İndigo-mor: JavaScript sertifikası
- 🟢 Yeşil-mavi: Python sertifikası
- 🔵 Mavi-mor: React sertifikası
- 🟡 Sarı-turuncu: Hızlı öğrenen rozeti
- 🟣 Mavi-mor: Mükemmeliyetçi rozeti
Avatar Stack:
<div class="avatar-stack">
<img src="user1.jpg" class="avatar-item">
<img src="user2.jpg" class="avatar-item">
<span class="avatar-item">+152</span>
</div>
Gradient Kartlar:
.preview-card {
background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
}
6. İstatistik Kartları 📈
Sertifika İstatistikleri:
- Toplam: 156 (+12 bu ay)
- Verilen: 892
- Aktif: 124
- Bağlı Kurs: 45
Rozet İstatistikleri:
- Toplam: 12
- Kazanılan: 234
- Aktif: 8
7. Kullanıcı Deneyimi ✨
İnteraktif Öğeler:
- Kart hover efektleri (yükselme, gölge)
- Avatar hover (büyüme)
- Buton hover (renk değişimi)
Modal İşlemleri:
- Tıklanabilir kartlar
- Tab geçişleri
- Arama ve filtreleme
- Sayfalama
8. İlişki Yönetimi 🔗
Sertifika - Kullanıcı İlişkisi:
- Her sertifika için verilen kullanıcılar
- Verilme tarihi
- Sertifika numarası
- İndirme takibi
Sertifika - Kurs İlişkisi:
- Bağlı olduğu kurslar
- Kurs bazlı verilme sayısı
- Kurs durumu
Bu sistem ile:
- ✅ Tüm sertifika ve rozetleri yönetebilir
- ✅ Her sertifikanın kime verildiğini görebilir
- ✅ Hangi kurslarla ilişkili olduğunu takip edebilir
- ✅ Rozet kazanımlarını analiz edebilir
- ✅ Sertifika şablonlarını düzenleyebilirsiniz! 🚀