Spaces:
Running
Running
| <html lang="tr"> | |
| <head> | |
| <meta charset="UTF-8"> | |
| <meta name="viewport" content="width=device-width, initial-scale=1.0"> | |
| <title>AI Moderatörlüğü Eğitim Belgesi</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"> | |
| <style> | |
| @import url('https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700&display=swap'); | |
| body { | |
| font-family: 'Inter', sans-serif; | |
| } | |
| .gradient-bg { | |
| background: linear-gradient(135deg, #4f46e5 0%, #7c3aed 100%); | |
| } | |
| .progress-bar { | |
| transition: width 0.5s ease-in-out; | |
| } | |
| .accordion-content { | |
| max-height: 0; | |
| overflow: hidden; | |
| transition: max-height 0.3s ease-out; | |
| } | |
| .accordion.active .accordion-content { | |
| max-height: 1000px; | |
| } | |
| .badge { | |
| animation: pulse 2s infinite; | |
| } | |
| @keyframes pulse { | |
| 0% { transform: scale(1); } | |
| 50% { transform: scale(1.05); } | |
| 100% { transform: scale(1); } | |
| } | |
| </style> | |
| </head> | |
| <body class="bg-gray-50"> | |
| <!-- Header --> | |
| <header class="gradient-bg text-white py-8 px-4 shadow-lg"> | |
| <div class="container mx-auto"> | |
| <div class="flex flex-col md:flex-row items-center justify-between"> | |
| <div class="mb-6 md:mb-0"> | |
| <h1 class="text-3xl md:text-4xl font-bold mb-2">AI Moderatörlüğü Eğitim Belgesi</h1> | |
| <p class="text-indigo-100">Yapay Zeka İçerik Moderatörlüğü Eğitim Süreci</p> | |
| </div> | |
| <div class="flex items-center space-x-4"> | |
| <div class="bg-white/20 p-3 rounded-full"> | |
| <i class="fas fa-robot text-3xl"></i> | |
| </div> | |
| <div class="bg-white/20 p-3 rounded-full"> | |
| <i class="fas fa-certificate text-3xl"></i> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| </header> | |
| <!-- Progress Tracker --> | |
| <section class="py-8 bg-white shadow-sm"> | |
| <div class="container mx-auto px-4"> | |
| <h2 class="text-2xl font-semibold text-gray-800 mb-6 flex items-center"> | |
| <i class="fas fa-tasks mr-3 text-indigo-600"></i> Eğitim Süreciniz | |
| </h2> | |
| <div class="w-full bg-gray-200 rounded-full h-4 mb-4"> | |
| <div class="progress-bar bg-indigo-600 h-4 rounded-full" style="width: 25%"></div> | |
| </div> | |
| <div class="grid grid-cols-1 md:grid-cols-4 gap-4"> | |
| <div class="flex items-center space-x-3 p-3 bg-indigo-50 rounded-lg"> | |
| <div class="bg-indigo-600 text-white p-2 rounded-full"> | |
| <i class="fas fa-check"></i> | |
| </div> | |
| <div> | |
| <p class="font-medium">Kurulum</p> | |
| <p class="text-sm text-gray-500">Tamamlandı</p> | |
| </div> | |
| </div> | |
| <div class="flex items-center space-x-3 p-3 bg-indigo-50 rounded-lg"> | |
| <div class="bg-indigo-100 text-indigo-800 p-2 rounded-full"> | |
| <span class="font-bold">2</span> | |
| </div> | |
| <div> | |
| <p class="font-medium">Eğitim</p> | |
| <p class="text-sm text-gray-500">Devam Ediyor</p> | |
| </div> | |
| </div> | |
| <div class="flex items-center space-x-3 p-3 bg-gray-100 rounded-lg"> | |
| <div class="bg-gray-300 text-gray-600 p-2 rounded-full"> | |
| <span class="font-bold">3</span> | |
| </div> | |
| <div> | |
| <p class="font-medium">PR Sertifikasyonu</p> | |
| <p class="text-sm text-gray-500">Bekleniyor</p> | |
| </div> | |
| </div> | |
| <div class="flex items-center space-x-3 p-3 bg-gray-100 rounded-lg"> | |
| <div class="bg-gray-300 text-gray-600 p-2 rounded-full"> | |
| <span class="font-bold">4</span> | |
| </div> | |
| <div> | |
| <p class="font-medium">LE Sertifikasyonu</p> | |
| <p class="text-sm text-gray-500">Bekleniyor</p> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| </section> | |
| <!-- Main Content --> | |
| <main class="container mx-auto px-4 py-8"> | |
| <!-- Overview Section --> | |
| <section class="mb-12 bg-white rounded-xl shadow-md overflow-hidden"> | |
| <div class="gradient-bg px-6 py-4"> | |
| <h2 class="text-xl font-bold text-white flex items-center"> | |
| <i class="fas fa-info-circle mr-2"></i> Eğitim Özeti | |
| </h2> | |
| </div> | |
| <div class="p-6"> | |
| <div class="grid grid-cols-1 md:grid-cols-2 gap-6"> | |
| <div class="bg-indigo-50 p-5 rounded-lg border border-indigo-100"> | |
| <h3 class="font-semibold text-indigo-800 mb-3 flex items-center"> | |
| <i class="fas fa-bullseye mr-2"></i> Eğitimin Amacı | |
| </h3> | |
| <p class="text-gray-700">Yeni başlayan moderatörlerin şirket operasyonlarını, proje katılımcılarıyla etkileşimi ve görevlerin nasıl yapılacağını öğrenmesini amaçlar.</p> | |
| </div> | |
| <div class="bg-indigo-50 p-5 rounded-lg border border-indigo-100"> | |
| <h3 class="font-semibold text-indigo-800 mb-3 flex items-center"> | |
| <i class="fas fa-clock mr-2"></i> Eğitim Süresi | |
| </h3> | |
| <p class="text-gray-700">Genellikle 5-7 gün sürer ve ilerlemenize bağlı olarak değişir. Eğitim boyunca belirlenen görevleri tamamlayarak gerekli yetkinlikleri kazanırsınız.</p> | |
| </div> | |
| </div> | |
| </div> | |
| </section> | |
| <!-- Training Steps --> | |
| <section class="mb-12"> | |
| <h2 class="text-2xl font-semibold text-gray-800 mb-6 flex items-center"> | |
| <i class="fas fa-map-marked-alt mr-3 text-indigo-600"></i> Eğitim Adımları | |
| </h2> | |
| <div class="space-y-4"> | |
| <!-- Step 1 --> | |
| <div class="accordion bg-white rounded-xl shadow-md overflow-hidden" onclick="toggleAccordion(this)"> | |
| <div class="flex justify-between items-center p-5 cursor-pointer"> | |
| <div class="flex items-center"> | |
| <div class="bg-indigo-100 text-indigo-800 font-bold rounded-full h-8 w-8 flex items-center justify-center mr-4">1</div> | |
| <h3 class="font-semibold text-lg">Kurulum (Settings)</h3> | |
| </div> | |
| <i class="fas fa-chevron-down text-indigo-600 transition-transform"></i> | |
| </div> | |
| <div class="accordion-content px-5 pb-5"> | |
| <p class="text-gray-700 mb-4">Şirketin kurumsal kaynaklarına (Microsoft Teams, Mindy Drive, Zimbra/Sogo e-posta) giriş yapılır.</p> | |
| <div class="bg-gray-50 p-4 rounded-lg"> | |
| <p class="text-sm font-medium text-gray-600 mb-2 flex items-center"> | |
| <i class="fas fa-lightbulb mr-2 text-yellow-500"></i> Önemli Bilgi | |
| </p> | |
| <p class="text-gray-700">Kurulum detayları, size gönderilen "Welcome Mindy" e-postasındaki anket ve sunumda yer alır.</p> | |
| </div> | |
| </div> | |
| </div> | |
| <!-- Step 2 --> | |
| <div class="accordion bg-white rounded-xl shadow-md overflow-hidden" onclick="toggleAccordion(this)"> | |
| <div class="flex justify-between items-center p-5 cursor-pointer"> | |
| <div class="flex items-center"> | |
| <div class="bg-indigo-100 text-indigo-800 font-bold rounded-full h-8 w-8 flex items-center justify-center mr-4">2</div> | |
| <h3 class="font-semibold text-lg">Görev Eğitimi ve Araç Erişimi</h3> | |
| </div> | |
| <i class="fas fa-chevron-down text-indigo-600 transition-transform"></i> | |
| </div> | |
| <div class="accordion-content px-5 pb-5"> | |
| <p class="text-gray-700 mb-4">Kurulumdan sonra, görevleri yapacağınız özel bir ortam olan "annotation tool" (etiketleme aracı) için erişim bilgileri eğitmeniniz tarafından verilir.</p> | |
| <div class="bg-red-50 border-l-4 border-red-500 p-4 mb-4"> | |
| <p class="text-sm font-medium text-red-700 flex items-center"> | |
| <i class="fas fa-exclamation-triangle mr-2"></i> Dikkat | |
| </p> | |
| <p class="text-red-700 mt-1">Giriş bilgileri yalnızca eğitmen tarafından sağlanır, başka kaynaklardan gelen eksik veya yanlış bilgilere itibar edilmemelidir.</p> | |
| </div> | |
| </div> | |
| </div> | |
| <!-- Step 3 --> | |
| <div class="accordion bg-white rounded-xl shadow-md overflow-hidden" onclick="toggleAccordion(this)"> | |
| <div class="flex justify-between items-center p-5 cursor-pointer"> | |
| <div class="flex items-center"> | |
| <div class="bg-indigo-100 text-indigo-800 font-bold rounded-full h-8 w-8 flex items-center justify-center mr-4">3</div> | |
| <h3 class="font-semibold text-lg">Sertifikasyonlar</h3> | |
| </div> | |
| <i class="fas fa-chevron-down text-indigo-600 transition-transform"></i> | |
| </div> | |
| <div class="accordion-content px-5 pb-5"> | |
| <p class="text-gray-700 mb-4">Projede iki ana sertifikasyon aşaması vardır:</p> | |
| <div class="grid grid-cols-1 md:grid-cols-2 gap-4"> | |
| <!-- PR Certification --> | |
| <div class="bg-blue-50 p-4 rounded-lg border border-blue-100"> | |
| <h4 class="font-semibold text-blue-800 mb-2 flex items-center"> | |
| <i class="fas fa-globe mr-2"></i> Preference Ranking (PR) Sertifikasyonu | |
| </h4> | |
| <ul class="list-disc pl-5 text-gray-700 space-y-1"> | |
| <li>İngilizce 20 görev tamamlanır</li> | |
| <li>İki deneme hakkı vardır</li> | |
| <li>İlk denemede başarısız olursanız, ikinci deneme için yardımcı test sunulur</li> | |
| </ul> | |
| </div> | |
| <!-- LE Certification --> | |
| <div class="bg-green-50 p-4 rounded-lg border border-green-100"> | |
| <h4 class="font-semibold text-green-800 mb-2 flex items-center"> | |
| <i class="fas fa-language mr-2"></i> Localization (LE) Sertifikasyonu | |
| </h4> | |
| <ul class="list-disc pl-5 text-gray-700 space-y-1"> | |
| <li>Kendi ana dilinizde 20 görev tamamlanır</li> | |
| <li>İki deneme hakkı vardır</li> | |
| <li>Başarılı olursanız ana görevlere geçersiniz</li> | |
| <li>Başarısız olursanız başka projelere yönlendirilirsiniz</li> | |
| </ul> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| </section> | |
| <!-- Organizational Matters --> | |
| <section class="mb-12"> | |
| <h2 class="text-2xl font-semibold text-gray-800 mb-6 flex items-center"> | |
| <i class="fas fa-users-cog mr-3 text-indigo-600"></i> Organizasyonel Konular | |
| </h2> | |
| <div class="grid grid-cols-1 md:grid-cols-2 gap-6"> | |
| <!-- Work Hours --> | |
| <div class="bg-white p-6 rounded-xl shadow-md"> | |
| <h3 class="font-semibold text-lg text-gray-800 mb-3 flex items-center"> | |
| <i class="fas fa-clock mr-2 text-indigo-600"></i> Çalışma Saatleri ve Takip | |
| </h3> | |
| <p class="text-gray-700 mb-4">Sabit bir günlük çalışma saati yoktur, ancak haftalık/dönemsel olarak belirli bir saat (ör. 5 veya 7 saat/gün) tamamlanmalıdır.</p> | |
| <div class="bg-yellow-50 border-l-4 border-yellow-500 p-4"> | |
| <p class="text-sm font-medium text-yellow-700 flex items-center"> | |
| <i class="fas fa-info-circle mr-2"></i> Bilgi | |
| </p> | |
| <p class="text-yellow-700 mt-1">Görevlerinizin süresi sistem tarafından otomatik olarak kaydedilir, ayrıca kişisel zaman takibi için Toggl gibi araçlar kullanabilirsiniz.</p> | |
| </div> | |
| </div> | |
| <!-- Attendance --> | |
| <div class="bg-white p-6 rounded-xl shadow-md"> | |
| <h3 class="font-semibold text-lg text-gray-800 mb-3 flex items-center"> | |
| <i class="fas fa-calendar-check mr-2 text-indigo-600"></i> Devam ve İletişim | |
| </h3> | |
| <p class="text-gray-700 mb-4">Herhangi bir devamsızlık durumunda (örneğin hastalık, seyahat), eğitmene önceden bilgi verilmelidir.</p> | |
| <div class="bg-red-50 border-l-4 border-red-500 p-4"> | |
| <p class="text-sm font-medium text-red-700 flex items-center"> | |
| <i class="fas fa-exclamation-triangle mr-2"></i> Önemli | |
| </p> | |
| <p class="text-red-700 mt-1">3 gün boyunca haber vermeden iletişimsiz kalmak iş birliğinin sona ermesine neden olabilir.</p> | |
| </div> | |
| </div> | |
| <!-- Communication Channels --> | |
| <div class="bg-white p-6 rounded-xl shadow-md md:col-span-2"> | |
| <h3 class="font-semibold text-lg text-gray-800 mb-3 flex items-center"> | |
| <i class="fas fa-comments mr-2 text-indigo-600"></i> İletişim Kanalları | |
| </h3> | |
| <p class="text-gray-700 mb-4">Tüm iletişim Microsoft Teams üzerinden yürütülür.</p> | |
| <div class="grid grid-cols-1 md:grid-cols-3 gap-4 mt-4"> | |
| <!-- Main Info --> | |
| <div class="bg-indigo-50 p-4 rounded-lg"> | |
| <h4 class="font-semibold text-indigo-800 mb-2 flex items-center"> | |
| <i class="fas fa-bullhorn mr-2"></i> Main Info | |
| </h4> | |
| <p class="text-gray-700">Duyurular ve önemli bilgiler, mutlaka okunmalı ve tepki verilmelidir.</p> | |
| </div> | |
| <!-- For Check --> | |
| <div class="bg-green-50 p-4 rounded-lg"> | |
| <h4 class="font-semibold text-green-800 mb-2 flex items-center"> | |
| <i class="fas fa-check-circle mr-2"></i> For Check | |
| </h4> | |
| <p class="text-gray-700">Görev tamamlandığında burada bildirilir, yeni görev almak için kullanılır.</p> | |
| </div> | |
| <!-- FAQ --> | |
| <div class="bg-blue-50 p-4 rounded-lg"> | |
| <h4 class="font-semibold text-blue-800 mb-2 flex items-center"> | |
| <i class="fas fa-question-circle mr-2"></i> FAQ | |
| </h4> | |
| <p class="text-gray-700">Soru-cevap ve takım üyeleriyle iletişim için kullanılır.</p> | |
| </div> | |
| </div> | |
| <div class="mt-4 bg-purple-50 p-4 rounded-lg"> | |
| <p class="text-sm font-medium text-purple-700 flex items-center"> | |
| <i class="fas fa-user-secret mr-2"></i> Not | |
| </p> | |
| <p class="text-purple-700 mt-1">Özel mesajlar yalnızca gerektiğinde eğitmenlerle yapılmalıdır.</p> | |
| </div> | |
| </div> | |
| </div> | |
| </section> | |
| <!-- Payment Info --> | |
| <section class="mb-12 bg-white rounded-xl shadow-md overflow-hidden"> | |
| <div class="gradient-bg px-6 py-4"> | |
| <h2 class="text-xl font-bold text-white flex items-center"> | |
| <i class="fas fa-money-bill-wave mr-2"></i> Ücretlendirme ve Ödeme | |
| </h2> | |
| </div> | |
| <div class="p-6"> | |
| <div class="flex flex-col md:flex-row items-center"> | |
| <div class="md:w-2/3 mb-6 md:mb-0"> | |
| <ul class="list-disc pl-5 text-gray-700 space-y-2"> | |
| <li>Eğitim ve sertifikasyon sürecinde harcanan saatler için ödeme yapılır (ilk 12 saat için).</li> | |
| <li>Sertifikasyonları başarıyla tamamlayanlar %100 ödeme alır.</li> | |
| <li>Sertifikasyonlarda başarısız olanlara ödeme yapılmaz, ancak başka projelere katılma hakkı sunulur.</li> | |
| </ul> | |
| </div> | |
| <div class="md:w-1/3 flex justify-center"> | |
| <div class="bg-green-100 text-green-800 p-6 rounded-full h-32 w-32 flex flex-col items-center justify-center"> | |
| <i class="fas fa-coins text-3xl mb-2"></i> | |
| <span class="font-bold text-lg">%100</span> | |
| <span class="text-xs">Başarılı Tamamlama</span> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| </section> | |
| <!-- First Tasks --> | |
| <section class="mb-12 bg-white rounded-xl shadow-md overflow-hidden"> | |
| <div class="gradient-bg px-6 py-4"> | |
| <h2 class="text-xl font-bold text-white flex items-center"> | |
| <i class="fas fa-play-circle mr-2"></i> İlk Görevler ve Başlangıç | |
| </h2> | |
| </div> | |
| <div class="p-6"> | |
| <div class="flex flex-col md:flex-row items-center"> | |
| <div class="md:w-2/3 mb-6 md:mb-0"> | |
| <p class="text-gray-700 mb-4">Kurulum anketini doldurup kaynakları inceledikten sonra, Microsoft Teams'de "For check" kanalına kısa bir mesaj göndererek ("Kurulumu tamamladım, yeni görev bekliyorum" gibi) yeni görev talep edilir.</p> | |
| <p class="text-gray-700">Sorularınız için eğitim ekibiyle e-posta veya Teams üzerinden iletişime geçebilirsiniz.</p> | |
| </div> | |
| <div class="md:w-1/3 flex justify-center"> | |
| <div class="bg-indigo-100 text-indigo-800 p-6 rounded-lg text-center"> | |
| <i class="fas fa-comment-dots text-4xl mb-3"></i> | |
| <p class="font-medium">Teams Mesaj Örneği:</p> | |
| <p class="text-sm italic mt-2">"Merhaba, kurulumu tamamladım. Yeni görevler için hazırım."</p> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| </section> | |
| <!-- Success Tips --> | |
| <section class="mb-12"> | |
| <h2 class="text-2xl font-semibold text-gray-800 mb-6 flex items-center"> | |
| <i class="fas fa-trophy mr-3 text-indigo-600"></i> Başarı İçin İpuçları | |
| </h2> | |
| <div class="grid grid-cols-1 md:grid-cols-3 gap-6"> | |
| <!-- Tip 1 --> | |
| <div class="bg-white p-6 rounded-xl shadow-md hover:shadow-lg transition-shadow"> | |
| <div class="bg-indigo-100 text-indigo-800 rounded-full h-12 w-12 flex items-center justify-center mb-4 mx-auto"> | |
| <i class="fas fa-list-ol text-xl"></i> | |
| </div> | |
| <h3 class="font-semibold text-center text-gray-800 mb-3">Adımları Takip Edin</h3> | |
| <p class="text-gray-700 text-center">Tüm adımları dikkatlice takip edin, iletişimi aksatmayın.</p> | |
| </div> | |
| <!-- Tip 2 --> | |
| <div class="bg-white p-6 rounded-xl shadow-md hover:shadow-lg transition-shadow"> | |
| <div class="bg-indigo-100 text-indigo-800 rounded-full h-12 w-12 flex items-center justify-center mb-4 mx-auto"> | |
| <i class="fas fa-question text-xl"></i> | |
| </div> | |
| <h3 class="font-semibold text-center text-gray-800 mb-3">Sorular Sorun</h3> | |
| <p class="text-gray-700 text-center">Sorularınızı çekinmeden sorun, takım kanallarını aktif kullanın.</p> | |
| </div> | |
| <!-- Tip 3 --> | |
| <div class="bg-white p-6 rounded-xl shadow-md hover:shadow-lg transition-shadow"> | |
| <div class="bg-indigo-100 text-indigo-800 rounded-full h-12 w-12 flex items-center justify-center mb-4 mx-auto"> | |
| <i class="fas fa-book text-xl"></i> | |
| </div> | |
| <h3 class="font-semibold text-center text-gray-800 mb-3">Yönergeleri Uygulayın</h3> | |
| <p class="text-gray-700 text-center">Eğitim ve görevlerde verilen yönergeleri harfiyen uygulayın.</p> | |
| </div> | |
| </div> | |
| </section> | |
| <!-- Certification Details --> | |
| <section class="mb-12 bg-white rounded-xl shadow-md overflow-hidden"> | |
| <div class="gradient-bg px-6 py-4"> | |
| <h2 class="text-xl font-bold text-white flex items-center"> | |
| <i class="fas fa-graduation-cap mr-2"></i> Sertifikasyon Detayları | |
| </h2> | |
| </div> | |
| <div class="p-6"> | |
| <div class="grid grid-cols-1 md:grid-cols-2 gap-8"> | |
| <!-- PR Certification --> | |
| <div class="bg-white border border-gray-200 rounded-lg p-6 shadow-sm"> | |
| <div class="flex items-center mb-4"> | |
| <div class="bg-blue-100 text-blue-800 p-3 rounded-full mr-4"> | |
| <i class="fas fa-globe text-xl"></i> | |
| </div> | |
| <h3 class="text-xl font-semibold text-gray-800">PR Sertifikasyonu</h3> | |
| </div> | |
| <div class="space-y-4"> | |
| <div class="flex items-start"> | |
| <div class="bg-blue-50 text-blue-600 rounded-full p-1 mr-3 mt-1"> | |
| <i class="fas fa-check text-xs"></i> | |
| </div> | |
| <p class="text-gray-700">20 İngilizce görev tamamlanacak</p> | |
| </div> | |
| <div class="flex items-start"> | |
| <div class="bg-blue-50 text-blue-600 rounded-full p-1 mr-3 mt-1"> | |
| <i class="fas fa-check text-xs"></i> | |
| </div> | |
| <p class="text-gray-700">İki deneme hakkı var</p> | |
| </div> | |
| <div class="flex items-start"> | |
| <div class="bg-blue-50 text-blue-600 rounded-full p-1 mr-3 mt-1"> | |
| <i class="fas fa-check text-xs"></i> | |
| </div> | |
| <p class="text-gray-700">İlk denemede başarısız olursanız, ikinci deneme için yardımcı test sunulacak</p> | |
| </div> | |
| <div class="mt-6 bg-blue-50 p-4 rounded-lg"> | |
| <p class="text-sm font-medium text-blue-700 flex items-center"> | |
| <i class="fas fa-lightbulb mr-2"></i> İpucu | |
| </p> | |
| <p class="text-blue-700 mt-1">Örnek testleri dikkatlice inceleyin, gerçek sınava çok yakın olacaklar.</p> | |
| </div> | |
| </div> | |
| </div> | |
| <!-- LE Certification --> | |
| <div class="bg-white border border-gray-200 rounded-lg p-6 shadow-sm"> | |
| <div class="flex items-center mb-4"> | |
| <div class="bg-green-100 text-green-800 p-3 rounded-full mr-4"> | |
| <i class="fas fa-language text-xl"></i> | |
| </div> | |
| <h3 class="text-xl font-semibold text-gray-800">LE Sertifikasyonu</h3> | |
| </div> | |
| <div class="space-y-4"> | |
| <div class="flex items-start"> | |
| <div class="bg-green-50 text-green-600 rounded-full p-1 mr-3 mt-1"> | |
| <i class="fas fa-check text-xs"></i> | |
| </div> | |
| <p class="text-gray-700">20 görev kendi ana dilinizde yapılacak</p> | |
| </div> | |
| <div class="flex items-start"> | |
| <div class="bg-green-50 text-green-600 rounded-full p-1 mr-3 mt-1"> | |
| <i class="fas fa-check text-xs"></i> | |
| </div> | |
| <p class="text-gray-700">Bir isteğin yeterli analiz gereksinimini karşılayıp karşılamadığını değerlendireceksiniz</p> | |
| </div> | |
| <div class="flex items-start"> | |
| <div class="bg-green-50 text-green-600 rounded-full p-1 mr-3 mt-1"> | |
| <i class="fas fa-check text-xs"></i> | |
| </div> | |
| <p class="text-gray-700">Başarılı olursanız ana görevlere geçersiniz</p> | |
| </div> | |
| <div class="mt-6 bg-green-50 p-4 rounded-lg"> | |
| <p class="text-sm font-medium text-green-700 flex items-center"> | |
| <i class="fas fa-lightbulb mr-2"></i> İpucu | |
| </p> | |
| <p class="text-green-700 mt-1">Talimatları dikkatlice okuyun, tüm görev türlerinin açıklamaları ana dökümanda mevcut.</p> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| </section> | |
| <!-- Final Tips --> | |
| <section class="bg-indigo-50 rounded-xl p-8"> | |
| <h2 class="text-2xl font-semibold text-indigo-800 mb-6 text-center">Sertifikasyonlarda Başarı İçin Son İpuçları</h2> | |
| <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-6"> | |
| <!-- Tip 1 --> | |
| <div class="bg-white p-5 rounded-lg shadow-sm hover:shadow-md transition-shadow"> | |
| <div class="bg-indigo-600 text-white rounded-full h-10 w-10 flex items-center justify-center mb-3"> | |
| <i class="fas fa-book-reader"></i> | |
| </div> | |
| <h3 class="font-semibold text-gray-800 mb-2">Detaylı Okuma</h3> | |
| <p class="text-gray-600 text-sm">Görevlerin tüm talimatlarını, yönergelerini ve değerlendirme kriterlerini dikkatlice okuyun.</p> | |
| </div> | |
| <!-- Tip 2 --> | |
| <div class="bg-white p-5 rounded-lg shadow-sm hover:shadow-md transition-shadow"> | |
| <div class="bg-indigo-600 text-white rounded-full h-10 w-10 flex items-center justify-center mb-3"> | |
| <i class="fas fa-brain"></i> | |
| </div> | |
| <h3 class="font-semibold text-gray-800 mb-2">Analitik Düşünme</h3> | |
| <p class="text-gray-600 text-sm">Görevdeki bilgileri analiz edin. Neden-sonuç ilişkilerini doğru kurun.</p> | |
| </div> | |
| <!-- Tip 3 --> | |
| <div class="bg-white p-5 rounded-lg shadow-sm hover:shadow-md transition-shadow"> | |
| <div class="bg-indigo-600 text-white rounded-full h-10 w-10 flex items-center justify-center mb-3"> | |
| <i class="fas fa-hourglass-half"></i> | |
| </div> | |
| <h3 class="font-semibold text-gray-800 mb-2">Zaman Yönetimi</h3> | |
| <p class="text-gray-600 text-sm">Her soruya ayrılan süreyi takip edin. Zor soruları sona bırakın.</p> | |
| </div> | |
| <!-- Tip 4 --> | |
| <div class="bg-white p-5 rounded-lg shadow-sm hover:shadow-md transition-shadow"> | |
| <div class="bg-indigo-600 text-white rounded-full h-10 w-10 flex items-center justify-center mb-3"> | |
| <i class="fas fa-comment-medical"></i> | |
| </div> | |
| <h3 class="font-semibold text-gray-800 mb-2">Geri Bildirim</h3> | |
| <p class="text-gray-600 text-sm">Hatalarınızdan ders çıkarın ve bir sonraki denemede aynı hataları yapmayın.</p> | |
| </div> | |
| </div> | |
| <div class="mt-8 text-center"> | |
| <div class="inline-block bg-white px-6 py-3 rounded-full shadow-md"> | |
| <p class="text-indigo-700 font-medium flex items-center justify-center"> | |
| <i class="fas fa-rocket mr-2"></i> Başarılar Dileriz! | |
| </p> | |
| </div> | |
| </div> | |
| </section> | |
| </main> | |
| <!-- Footer --> | |
| <footer class="gradient-bg text-white py-8 mt-12"> | |
| <div class="container mx-auto px-4"> | |
| <div class="flex flex-col md:flex-row justify-between items-center"> | |
| <div class="mb-6 md:mb-0"> | |
| <h3 class="text-xl font-bold mb-2">AI Moderatörlüğü Eğitim Belgesi</h3> | |
| <p class="text-indigo-200">© 2023 Mindy AI. Tüm hakları saklıdır.</p> | |
| </div> | |
| <div class="flex space-x-4"> | |
| <a href="#" class="bg-white/20 p-3 rounded-full hover:bg-white/30 transition-colors"> | |
| <i class="fab fa-microsoft"></i> | |
| </a> | |
| <a href="#" class="bg-white/20 p-3 rounded-full hover:bg-white/30 transition-colors"> | |
| <i class="fas fa-envelope"></i> | |
| </a> | |
| <a href="#" class="bg-white/20 p-3 rounded-full hover:bg-white/30 transition-colors"> | |
| <i class="fas fa-question-circle"></i> | |
| </a> | |
| </div> | |
| </div> | |
| </div> | |
| </footer> | |
| <script> | |
| // Accordion functionality | |
| function toggleAccordion(element) { | |
| element.classList.toggle('active'); | |
| const icon = element.querySelector('.fa-chevron-down'); | |
| icon.classList.toggle('rotate-180'); | |
| // Close other accordions when one is opened | |
| if (element.classList.contains('active')) { | |
| document.querySelectorAll('.accordion').forEach(acc => { | |
| if (acc !== element && acc.classList.contains('active')) { | |
| acc.classList.remove('active'); | |
| acc.querySelector('.fa-chevron-down').classList.remove('rotate-180'); | |
| } | |
| }); | |
| } | |
| } | |
| // Simulate progress bar animation | |
| document.addEventListener('DOMContentLoaded', function() { | |
| const progressBar = document.querySelector('.progress-bar'); | |
| setTimeout(() => { | |
| progressBar.style.width = '65%'; | |
| }, 500); | |
| // Add pulse animation to important badges | |
| const badges = document.querySelectorAll('.badge'); | |
| badges.forEach(badge => { | |
| badge.style.animationDelay = `${Math.random() * 2}s`; | |
| }); | |
| }); | |
| </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=M-Zeki/trainin-to-work" style="color: #fff;text-decoration: underline;" target="_blank" >Remix</a></p></body> | |
| </html> |