Hugging Face's logo

Spaces:
M-Zeki
/
trainin-to-work
Running

App Files Community
M-Zeki commited on
Commit
faba6a5
·
verified ·
1 Parent(s): 5036d29

Add 3 files

Browse files
Files changed (3) hide show
  1. README.md +6 -4
  2. index.html +583 -19
  3. prompts.txt +0 -0
README.md CHANGED
@@ -1,10 +1,12 @@
1
  ---
2
- title: Trainin To Work
3
- emoji: 🏢
4
  colorFrom: blue
5
- colorTo: gray
6
  sdk: static
7
  pinned: false
 
 
8
  ---
9
 
10
- Check out the configuration reference at https://huggingface.co/docs/hub/spaces-config-reference
 
1
  ---
2
+ title: trainin-to-work
3
+ emoji: 🐳
4
  colorFrom: blue
5
+ colorTo: red
6
  sdk: static
7
  pinned: false
8
+ tags:
9
+ - deepsite
10
  ---
11
 
12
+ Check out the configuration reference at https://huggingface.co/docs/hub/spaces-config-reference
index.html CHANGED
@@ -1,19 +1,583 @@
1
- <!doctype html>
2
- <html>
3
- <head>
4
- <meta charset="utf-8" />
5
- <meta name="viewport" content="width=device-width" />
6
- <title>My static Space</title>
7
- <link rel="stylesheet" href="style.css" />
8
- </head>
9
- <body>
10
- <div class="card">
11
- <h1>Welcome to your static Space!</h1>
12
- <p>You can modify this app directly by editing <i>index.html</i> in the Files and versions tab.</p>
13
- <p>
14
- Also don't forget to check the
15
- <a href="https://huggingface.co/docs/hub/spaces" target="_blank">Spaces documentation</a>.
16
- </p>
17
- </div>
18
- </body>
19
- </html>
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
1
+ <!DOCTYPE html>
2
+ <html lang="tr">
3
+ <head>
4
+ <meta charset="UTF-8">
5
+ <meta name="viewport" content="width=device-width, initial-scale=1.0">
6
+ <title>AI Moderatörlüğü Eğitim Belgesi</title>
7
+ <script src="https://cdn.tailwindcss.com"></script>
8
+ <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css">
9
+ <style>
10
+ @import url('https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700&display=swap');
11
+ body {
12
+ font-family: 'Inter', sans-serif;
13
+ }
14
+ .gradient-bg {
15
+ background: linear-gradient(135deg, #4f46e5 0%, #7c3aed 100%);
16
+ }
17
+ .progress-bar {
18
+ transition: width 0.5s ease-in-out;
19
+ }
20
+ .accordion-content {
21
+ max-height: 0;
22
+ overflow: hidden;
23
+ transition: max-height 0.3s ease-out;
24
+ }
25
+ .accordion.active .accordion-content {
26
+ max-height: 1000px;
27
+ }
28
+ .badge {
29
+ animation: pulse 2s infinite;
30
+ }
31
+ @keyframes pulse {
32
+ 0% { transform: scale(1); }
33
+ 50% { transform: scale(1.05); }
34
+ 100% { transform: scale(1); }
35
+ }
36
+ </style>
37
+ </head>
38
+ <body class="bg-gray-50">
39
+ <!-- Header -->
40
+ <header class="gradient-bg text-white py-8 px-4 shadow-lg">
41
+ <div class="container mx-auto">
42
+ <div class="flex flex-col md:flex-row items-center justify-between">
43
+ <div class="mb-6 md:mb-0">
44
+ <h1 class="text-3xl md:text-4xl font-bold mb-2">AI Moderatörlüğü Eğitim Belgesi</h1>
45
+ <p class="text-indigo-100">Yapay Zeka İçerik Moderatörlüğü Eğitim Süreci</p>
46
+ </div>
47
+ <div class="flex items-center space-x-4">
48
+ <div class="bg-white/20 p-3 rounded-full">
49
+ <i class="fas fa-robot text-3xl"></i>
50
+ </div>
51
+ <div class="bg-white/20 p-3 rounded-full">
52
+ <i class="fas fa-certificate text-3xl"></i>
53
+ </div>
54
+ </div>
55
+ </div>
56
+ </div>
57
+ </header>
58
+
59
+ <!-- Progress Tracker -->
60
+ <section class="py-8 bg-white shadow-sm">
61
+ <div class="container mx-auto px-4">
62
+ <h2 class="text-2xl font-semibold text-gray-800 mb-6 flex items-center">
63
+ <i class="fas fa-tasks mr-3 text-indigo-600"></i> Eğitim Süreciniz
64
+ </h2>
65
+ <div class="w-full bg-gray-200 rounded-full h-4 mb-4">
66
+ <div class="progress-bar bg-indigo-600 h-4 rounded-full" style="width: 25%"></div>
67
+ </div>
68
+ <div class="grid grid-cols-1 md:grid-cols-4 gap-4">
69
+ <div class="flex items-center space-x-3 p-3 bg-indigo-50 rounded-lg">
70
+ <div class="bg-indigo-600 text-white p-2 rounded-full">
71
+ <i class="fas fa-check"></i>
72
+ </div>
73
+ <div>
74
+ <p class="font-medium">Kurulum</p>
75
+ <p class="text-sm text-gray-500">Tamamlandı</p>
76
+ </div>
77
+ </div>
78
+ <div class="flex items-center space-x-3 p-3 bg-indigo-50 rounded-lg">
79
+ <div class="bg-indigo-100 text-indigo-800 p-2 rounded-full">
80
+ <span class="font-bold">2</span>
81
+ </div>
82
+ <div>
83
+ <p class="font-medium">Eğitim</p>
84
+ <p class="text-sm text-gray-500">Devam Ediyor</p>
85
+ </div>
86
+ </div>
87
+ <div class="flex items-center space-x-3 p-3 bg-gray-100 rounded-lg">
88
+ <div class="bg-gray-300 text-gray-600 p-2 rounded-full">
89
+ <span class="font-bold">3</span>
90
+ </div>
91
+ <div>
92
+ <p class="font-medium">PR Sertifikasyonu</p>
93
+ <p class="text-sm text-gray-500">Bekleniyor</p>
94
+ </div>
95
+ </div>
96
+ <div class="flex items-center space-x-3 p-3 bg-gray-100 rounded-lg">
97
+ <div class="bg-gray-300 text-gray-600 p-2 rounded-full">
98
+ <span class="font-bold">4</span>
99
+ </div>
100
+ <div>
101
+ <p class="font-medium">LE Sertifikasyonu</p>
102
+ <p class="text-sm text-gray-500">Bekleniyor</p>
103
+ </div>
104
+ </div>
105
+ </div>
106
+ </div>
107
+ </section>
108
+
109
+ <!-- Main Content -->
110
+ <main class="container mx-auto px-4 py-8">
111
+ <!-- Overview Section -->
112
+ <section class="mb-12 bg-white rounded-xl shadow-md overflow-hidden">
113
+ <div class="gradient-bg px-6 py-4">
114
+ <h2 class="text-xl font-bold text-white flex items-center">
115
+ <i class="fas fa-info-circle mr-2"></i> Eğitim Özeti
116
+ </h2>
117
+ </div>
118
+ <div class="p-6">
119
+ <div class="grid grid-cols-1 md:grid-cols-2 gap-6">
120
+ <div class="bg-indigo-50 p-5 rounded-lg border border-indigo-100">
121
+ <h3 class="font-semibold text-indigo-800 mb-3 flex items-center">
122
+ <i class="fas fa-bullseye mr-2"></i> Eğitimin Amacı
123
+ </h3>
124
+ <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>
125
+ </div>
126
+ <div class="bg-indigo-50 p-5 rounded-lg border border-indigo-100">
127
+ <h3 class="font-semibold text-indigo-800 mb-3 flex items-center">
128
+ <i class="fas fa-clock mr-2"></i> Eğitim Süresi
129
+ </h3>
130
+ <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>
131
+ </div>
132
+ </div>
133
+ </div>
134
+ </section>
135
+
136
+ <!-- Training Steps -->
137
+ <section class="mb-12">
138
+ <h2 class="text-2xl font-semibold text-gray-800 mb-6 flex items-center">
139
+ <i class="fas fa-map-marked-alt mr-3 text-indigo-600"></i> Eğitim Adımları
140
+ </h2>
141
+
142
+ <div class="space-y-4">
143
+ <!-- Step 1 -->
144
+ <div class="accordion bg-white rounded-xl shadow-md overflow-hidden" onclick="toggleAccordion(this)">
145
+ <div class="flex justify-between items-center p-5 cursor-pointer">
146
+ <div class="flex items-center">
147
+ <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>
148
+ <h3 class="font-semibold text-lg">Kurulum (Settings)</h3>
149
+ </div>
150
+ <i class="fas fa-chevron-down text-indigo-600 transition-transform"></i>
151
+ </div>
152
+ <div class="accordion-content px-5 pb-5">
153
+ <p class="text-gray-700 mb-4">Şirketin kurumsal kaynaklarına (Microsoft Teams, Mindy Drive, Zimbra/Sogo e-posta) giriş yapılır.</p>
154
+ <div class="bg-gray-50 p-4 rounded-lg">
155
+ <p class="text-sm font-medium text-gray-600 mb-2 flex items-center">
156
+ <i class="fas fa-lightbulb mr-2 text-yellow-500"></i> Önemli Bilgi
157
+ </p>
158
+ <p class="text-gray-700">Kurulum detayları, size gönderilen "Welcome Mindy" e-postasındaki anket ve sunumda yer alır.</p>
159
+ </div>
160
+ </div>
161
+ </div>
162
+
163
+ <!-- Step 2 -->
164
+ <div class="accordion bg-white rounded-xl shadow-md overflow-hidden" onclick="toggleAccordion(this)">
165
+ <div class="flex justify-between items-center p-5 cursor-pointer">
166
+ <div class="flex items-center">
167
+ <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>
168
+ <h3 class="font-semibold text-lg">Görev Eğitimi ve Araç Erişimi</h3>
169
+ </div>
170
+ <i class="fas fa-chevron-down text-indigo-600 transition-transform"></i>
171
+ </div>
172
+ <div class="accordion-content px-5 pb-5">
173
+ <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>
174
+ <div class="bg-red-50 border-l-4 border-red-500 p-4 mb-4">
175
+ <p class="text-sm font-medium text-red-700 flex items-center">
176
+ <i class="fas fa-exclamation-triangle mr-2"></i> Dikkat
177
+ </p>
178
+ <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>
179
+ </div>
180
+ </div>
181
+ </div>
182
+
183
+ <!-- Step 3 -->
184
+ <div class="accordion bg-white rounded-xl shadow-md overflow-hidden" onclick="toggleAccordion(this)">
185
+ <div class="flex justify-between items-center p-5 cursor-pointer">
186
+ <div class="flex items-center">
187
+ <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>
188
+ <h3 class="font-semibold text-lg">Sertifikasyonlar</h3>
189
+ </div>
190
+ <i class="fas fa-chevron-down text-indigo-600 transition-transform"></i>
191
+ </div>
192
+ <div class="accordion-content px-5 pb-5">
193
+ <p class="text-gray-700 mb-4">Projede iki ana sertifikasyon aşaması vardır:</p>
194
+
195
+ <div class="grid grid-cols-1 md:grid-cols-2 gap-4">
196
+ <!-- PR Certification -->
197
+ <div class="bg-blue-50 p-4 rounded-lg border border-blue-100">
198
+ <h4 class="font-semibold text-blue-800 mb-2 flex items-center">
199
+ <i class="fas fa-globe mr-2"></i> Preference Ranking (PR) Sertifikasyonu
200
+ </h4>
201
+ <ul class="list-disc pl-5 text-gray-700 space-y-1">
202
+ <li>İngilizce 20 görev tamamlanır</li>
203
+ <li>İki deneme hakkı vardır</li>
204
+ <li>İlk denemede başarısız olursanız, ikinci deneme için yardımcı test sunulur</li>
205
+ </ul>
206
+ </div>
207
+
208
+ <!-- LE Certification -->
209
+ <div class="bg-green-50 p-4 rounded-lg border border-green-100">
210
+ <h4 class="font-semibold text-green-800 mb-2 flex items-center">
211
+ <i class="fas fa-language mr-2"></i> Localization (LE) Sertifikasyonu
212
+ </h4>
213
+ <ul class="list-disc pl-5 text-gray-700 space-y-1">
214
+ <li>Kendi ana dilinizde 20 görev tamamlanır</li>
215
+ <li>İki deneme hakkı vardır</li>
216
+ <li>Başarılı olursanız ana görevlere geçersiniz</li>
217
+ <li>Başarısız olursanız başka projelere yönlendirilirsiniz</li>
218
+ </ul>
219
+ </div>
220
+ </div>
221
+ </div>
222
+ </div>
223
+ </div>
224
+ </section>
225
+
226
+ <!-- Organizational Matters -->
227
+ <section class="mb-12">
228
+ <h2 class="text-2xl font-semibold text-gray-800 mb-6 flex items-center">
229
+ <i class="fas fa-users-cog mr-3 text-indigo-600"></i> Organizasyonel Konular
230
+ </h2>
231
+
232
+ <div class="grid grid-cols-1 md:grid-cols-2 gap-6">
233
+ <!-- Work Hours -->
234
+ <div class="bg-white p-6 rounded-xl shadow-md">
235
+ <h3 class="font-semibold text-lg text-gray-800 mb-3 flex items-center">
236
+ <i class="fas fa-clock mr-2 text-indigo-600"></i> Çalışma Saatleri ve Takip
237
+ </h3>
238
+ <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>
239
+ <div class="bg-yellow-50 border-l-4 border-yellow-500 p-4">
240
+ <p class="text-sm font-medium text-yellow-700 flex items-center">
241
+ <i class="fas fa-info-circle mr-2"></i> Bilgi
242
+ </p>
243
+ <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>
244
+ </div>
245
+ </div>
246
+
247
+ <!-- Attendance -->
248
+ <div class="bg-white p-6 rounded-xl shadow-md">
249
+ <h3 class="font-semibold text-lg text-gray-800 mb-3 flex items-center">
250
+ <i class="fas fa-calendar-check mr-2 text-indigo-600"></i> Devam ve İletişim
251
+ </h3>
252
+ <p class="text-gray-700 mb-4">Herhangi bir devamsızlık durumunda (örneğin hastalık, seyahat), eğitmene önceden bilgi verilmelidir.</p>
253
+ <div class="bg-red-50 border-l-4 border-red-500 p-4">
254
+ <p class="text-sm font-medium text-red-700 flex items-center">
255
+ <i class="fas fa-exclamation-triangle mr-2"></i> Önemli
256
+ </p>
257
+ <p class="text-red-700 mt-1">3 gün boyunca haber vermeden iletişimsiz kalmak iş birliğinin sona ermesine neden olabilir.</p>
258
+ </div>
259
+ </div>
260
+
261
+ <!-- Communication Channels -->
262
+ <div class="bg-white p-6 rounded-xl shadow-md md:col-span-2">
263
+ <h3 class="font-semibold text-lg text-gray-800 mb-3 flex items-center">
264
+ <i class="fas fa-comments mr-2 text-indigo-600"></i> İletişim Kanalları
265
+ </h3>
266
+ <p class="text-gray-700 mb-4">Tüm iletişim Microsoft Teams üzerinden yürütülür.</p>
267
+
268
+ <div class="grid grid-cols-1 md:grid-cols-3 gap-4 mt-4">
269
+ <!-- Main Info -->
270
+ <div class="bg-indigo-50 p-4 rounded-lg">
271
+ <h4 class="font-semibold text-indigo-800 mb-2 flex items-center">
272
+ <i class="fas fa-bullhorn mr-2"></i> Main Info
273
+ </h4>
274
+ <p class="text-gray-700">Duyurular ve önemli bilgiler, mutlaka okunmalı ve tepki verilmelidir.</p>
275
+ </div>
276
+
277
+ <!-- For Check -->
278
+ <div class="bg-green-50 p-4 rounded-lg">
279
+ <h4 class="font-semibold text-green-800 mb-2 flex items-center">
280
+ <i class="fas fa-check-circle mr-2"></i> For Check
281
+ </h4>
282
+ <p class="text-gray-700">Görev tamamlandığında burada bildirilir, yeni görev almak için kullanılır.</p>
283
+ </div>
284
+
285
+ <!-- FAQ -->
286
+ <div class="bg-blue-50 p-4 rounded-lg">
287
+ <h4 class="font-semibold text-blue-800 mb-2 flex items-center">
288
+ <i class="fas fa-question-circle mr-2"></i> FAQ
289
+ </h4>
290
+ <p class="text-gray-700">Soru-cevap ve takım üyeleriyle iletişim için kullanılır.</p>
291
+ </div>
292
+ </div>
293
+
294
+ <div class="mt-4 bg-purple-50 p-4 rounded-lg">
295
+ <p class="text-sm font-medium text-purple-700 flex items-center">
296
+ <i class="fas fa-user-secret mr-2"></i> Not
297
+ </p>
298
+ <p class="text-purple-700 mt-1">Özel mesajlar yalnızca gerektiğinde eğitmenlerle yapılmalıdır.</p>
299
+ </div>
300
+ </div>
301
+ </div>
302
+ </section>
303
+
304
+ <!-- Payment Info -->
305
+ <section class="mb-12 bg-white rounded-xl shadow-md overflow-hidden">
306
+ <div class="gradient-bg px-6 py-4">
307
+ <h2 class="text-xl font-bold text-white flex items-center">
308
+ <i class="fas fa-money-bill-wave mr-2"></i> Ücretlendirme ve Ödeme
309
+ </h2>
310
+ </div>
311
+ <div class="p-6">
312
+ <div class="flex flex-col md:flex-row items-center">
313
+ <div class="md:w-2/3 mb-6 md:mb-0">
314
+ <ul class="list-disc pl-5 text-gray-700 space-y-2">
315
+ <li>Eğitim ve sertifikasyon sürecinde harcanan saatler için ödeme yapılır (ilk 12 saat için).</li>
316
+ <li>Sertifikasyonları başarıyla tamamlayanlar %100 ödeme alır.</li>
317
+ <li>Sertifikasyonlarda başarısız olanlara ödeme yapılmaz, ancak başka projelere katılma hakkı sunulur.</li>
318
+ </ul>
319
+ </div>
320
+ <div class="md:w-1/3 flex justify-center">
321
+ <div class="bg-green-100 text-green-800 p-6 rounded-full h-32 w-32 flex flex-col items-center justify-center">
322
+ <i class="fas fa-coins text-3xl mb-2"></i>
323
+ <span class="font-bold text-lg">%100</span>
324
+ <span class="text-xs">Başarılı Tamamlama</span>
325
+ </div>
326
+ </div>
327
+ </div>
328
+ </div>
329
+ </section>
330
+
331
+ <!-- First Tasks -->
332
+ <section class="mb-12 bg-white rounded-xl shadow-md overflow-hidden">
333
+ <div class="gradient-bg px-6 py-4">
334
+ <h2 class="text-xl font-bold text-white flex items-center">
335
+ <i class="fas fa-play-circle mr-2"></i> İlk Görevler ve Başlangıç
336
+ </h2>
337
+ </div>
338
+ <div class="p-6">
339
+ <div class="flex flex-col md:flex-row items-center">
340
+ <div class="md:w-2/3 mb-6 md:mb-0">
341
+ <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>
342
+ <p class="text-gray-700">Sorularınız için eğitim ekibiyle e-posta veya Teams üzerinden iletişime geçebilirsiniz.</p>
343
+ </div>
344
+ <div class="md:w-1/3 flex justify-center">
345
+ <div class="bg-indigo-100 text-indigo-800 p-6 rounded-lg text-center">
346
+ <i class="fas fa-comment-dots text-4xl mb-3"></i>
347
+ <p class="font-medium">Teams Mesaj Örneği:</p>
348
+ <p class="text-sm italic mt-2">"Merhaba, kurulumu tamamladım. Yeni görevler için hazırım."</p>
349
+ </div>
350
+ </div>
351
+ </div>
352
+ </div>
353
+ </section>
354
+
355
+ <!-- Success Tips -->
356
+ <section class="mb-12">
357
+ <h2 class="text-2xl font-semibold text-gray-800 mb-6 flex items-center">
358
+ <i class="fas fa-trophy mr-3 text-indigo-600"></i> Başarı İçin İpuçları
359
+ </h2>
360
+
361
+ <div class="grid grid-cols-1 md:grid-cols-3 gap-6">
362
+ <!-- Tip 1 -->
363
+ <div class="bg-white p-6 rounded-xl shadow-md hover:shadow-lg transition-shadow">
364
+ <div class="bg-indigo-100 text-indigo-800 rounded-full h-12 w-12 flex items-center justify-center mb-4 mx-auto">
365
+ <i class="fas fa-list-ol text-xl"></i>
366
+ </div>
367
+ <h3 class="font-semibold text-center text-gray-800 mb-3">Adımları Takip Edin</h3>
368
+ <p class="text-gray-700 text-center">Tüm adımları dikkatlice takip edin, iletişimi aksatmayın.</p>
369
+ </div>
370
+
371
+ <!-- Tip 2 -->
372
+ <div class="bg-white p-6 rounded-xl shadow-md hover:shadow-lg transition-shadow">
373
+ <div class="bg-indigo-100 text-indigo-800 rounded-full h-12 w-12 flex items-center justify-center mb-4 mx-auto">
374
+ <i class="fas fa-question text-xl"></i>
375
+ </div>
376
+ <h3 class="font-semibold text-center text-gray-800 mb-3">Sorular Sorun</h3>
377
+ <p class="text-gray-700 text-center">Sorularınızı çekinmeden sorun, takım kanallarını aktif kullanın.</p>
378
+ </div>
379
+
380
+ <!-- Tip 3 -->
381
+ <div class="bg-white p-6 rounded-xl shadow-md hover:shadow-lg transition-shadow">
382
+ <div class="bg-indigo-100 text-indigo-800 rounded-full h-12 w-12 flex items-center justify-center mb-4 mx-auto">
383
+ <i class="fas fa-book text-xl"></i>
384
+ </div>
385
+ <h3 class="font-semibold text-center text-gray-800 mb-3">Yönergeleri Uygulayın</h3>
386
+ <p class="text-gray-700 text-center">Eğitim ve görevlerde verilen yönergeleri harfiyen uygulayın.</p>
387
+ </div>
388
+ </div>
389
+ </section>
390
+
391
+ <!-- Certification Details -->
392
+ <section class="mb-12 bg-white rounded-xl shadow-md overflow-hidden">
393
+ <div class="gradient-bg px-6 py-4">
394
+ <h2 class="text-xl font-bold text-white flex items-center">
395
+ <i class="fas fa-graduation-cap mr-2"></i> Sertifikasyon Detayları
396
+ </h2>
397
+ </div>
398
+ <div class="p-6">
399
+ <div class="grid grid-cols-1 md:grid-cols-2 gap-8">
400
+ <!-- PR Certification -->
401
+ <div class="bg-white border border-gray-200 rounded-lg p-6 shadow-sm">
402
+ <div class="flex items-center mb-4">
403
+ <div class="bg-blue-100 text-blue-800 p-3 rounded-full mr-4">
404
+ <i class="fas fa-globe text-xl"></i>
405
+ </div>
406
+ <h3 class="text-xl font-semibold text-gray-800">PR Sertifikasyonu</h3>
407
+ </div>
408
+ <div class="space-y-4">
409
+ <div class="flex items-start">
410
+ <div class="bg-blue-50 text-blue-600 rounded-full p-1 mr-3 mt-1">
411
+ <i class="fas fa-check text-xs"></i>
412
+ </div>
413
+ <p class="text-gray-700">20 İngilizce görev tamamlanacak</p>
414
+ </div>
415
+ <div class="flex items-start">
416
+ <div class="bg-blue-50 text-blue-600 rounded-full p-1 mr-3 mt-1">
417
+ <i class="fas fa-check text-xs"></i>
418
+ </div>
419
+ <p class="text-gray-700">İki deneme hakkı var</p>
420
+ </div>
421
+ <div class="flex items-start">
422
+ <div class="bg-blue-50 text-blue-600 rounded-full p-1 mr-3 mt-1">
423
+ <i class="fas fa-check text-xs"></i>
424
+ </div>
425
+ <p class="text-gray-700">İlk denemede başarısız olursanız, ikinci deneme için yardımcı test sunulacak</p>
426
+ </div>
427
+ <div class="mt-6 bg-blue-50 p-4 rounded-lg">
428
+ <p class="text-sm font-medium text-blue-700 flex items-center">
429
+ <i class="fas fa-lightbulb mr-2"></i> İpucu
430
+ </p>
431
+ <p class="text-blue-700 mt-1">Örnek testleri dikkatlice inceleyin, gerçek sınava çok yakın olacaklar.</p>
432
+ </div>
433
+ </div>
434
+ </div>
435
+
436
+ <!-- LE Certification -->
437
+ <div class="bg-white border border-gray-200 rounded-lg p-6 shadow-sm">
438
+ <div class="flex items-center mb-4">
439
+ <div class="bg-green-100 text-green-800 p-3 rounded-full mr-4">
440
+ <i class="fas fa-language text-xl"></i>
441
+ </div>
442
+ <h3 class="text-xl font-semibold text-gray-800">LE Sertifikasyonu</h3>
443
+ </div>
444
+ <div class="space-y-4">
445
+ <div class="flex items-start">
446
+ <div class="bg-green-50 text-green-600 rounded-full p-1 mr-3 mt-1">
447
+ <i class="fas fa-check text-xs"></i>
448
+ </div>
449
+ <p class="text-gray-700">20 görev kendi ana dilinizde yapılacak</p>
450
+ </div>
451
+ <div class="flex items-start">
452
+ <div class="bg-green-50 text-green-600 rounded-full p-1 mr-3 mt-1">
453
+ <i class="fas fa-check text-xs"></i>
454
+ </div>
455
+ <p class="text-gray-700">Bir isteğin yeterli analiz gereksinimini karşılayıp karşılamadığını değerlendireceksiniz</p>
456
+ </div>
457
+ <div class="flex items-start">
458
+ <div class="bg-green-50 text-green-600 rounded-full p-1 mr-3 mt-1">
459
+ <i class="fas fa-check text-xs"></i>
460
+ </div>
461
+ <p class="text-gray-700">Başarılı olursanız ana görevlere geçersiniz</p>
462
+ </div>
463
+ <div class="mt-6 bg-green-50 p-4 rounded-lg">
464
+ <p class="text-sm font-medium text-green-700 flex items-center">
465
+ <i class="fas fa-lightbulb mr-2"></i> İpucu
466
+ </p>
467
+ <p class="text-green-700 mt-1">Talimatları dikkatlice okuyun, tüm görev türlerinin açıklamaları ana dökümanda mevcut.</p>
468
+ </div>
469
+ </div>
470
+ </div>
471
+ </div>
472
+ </div>
473
+ </section>
474
+
475
+ <!-- Final Tips -->
476
+ <section class="bg-indigo-50 rounded-xl p-8">
477
+ <h2 class="text-2xl font-semibold text-indigo-800 mb-6 text-center">Sertifikasyonlarda Başarı İçin Son İpuçları</h2>
478
+
479
+ <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-6">
480
+ <!-- Tip 1 -->
481
+ <div class="bg-white p-5 rounded-lg shadow-sm hover:shadow-md transition-shadow">
482
+ <div class="bg-indigo-600 text-white rounded-full h-10 w-10 flex items-center justify-center mb-3">
483
+ <i class="fas fa-book-reader"></i>
484
+ </div>
485
+ <h3 class="font-semibold text-gray-800 mb-2">Detaylı Okuma</h3>
486
+ <p class="text-gray-600 text-sm">Görevlerin tüm talimatlarını, yönergelerini ve değerlendirme kriterlerini dikkatlice okuyun.</p>
487
+ </div>
488
+
489
+ <!-- Tip 2 -->
490
+ <div class="bg-white p-5 rounded-lg shadow-sm hover:shadow-md transition-shadow">
491
+ <div class="bg-indigo-600 text-white rounded-full h-10 w-10 flex items-center justify-center mb-3">
492
+ <i class="fas fa-brain"></i>
493
+ </div>
494
+ <h3 class="font-semibold text-gray-800 mb-2">Analitik Düşünme</h3>
495
+ <p class="text-gray-600 text-sm">Görevdeki bilgileri analiz edin. Neden-sonuç ilişkilerini doğru kurun.</p>
496
+ </div>
497
+
498
+ <!-- Tip 3 -->
499
+ <div class="bg-white p-5 rounded-lg shadow-sm hover:shadow-md transition-shadow">
500
+ <div class="bg-indigo-600 text-white rounded-full h-10 w-10 flex items-center justify-center mb-3">
501
+ <i class="fas fa-hourglass-half"></i>
502
+ </div>
503
+ <h3 class="font-semibold text-gray-800 mb-2">Zaman Yönetimi</h3>
504
+ <p class="text-gray-600 text-sm">Her soruya ayrılan süreyi takip edin. Zor soruları sona bırakın.</p>
505
+ </div>
506
+
507
+ <!-- Tip 4 -->
508
+ <div class="bg-white p-5 rounded-lg shadow-sm hover:shadow-md transition-shadow">
509
+ <div class="bg-indigo-600 text-white rounded-full h-10 w-10 flex items-center justify-center mb-3">
510
+ <i class="fas fa-comment-medical"></i>
511
+ </div>
512
+ <h3 class="font-semibold text-gray-800 mb-2">Geri Bildirim</h3>
513
+ <p class="text-gray-600 text-sm">Hatalarınızdan ders çıkarın ve bir sonraki denemede aynı hataları yapmayın.</p>
514
+ </div>
515
+ </div>
516
+
517
+ <div class="mt-8 text-center">
518
+ <div class="inline-block bg-white px-6 py-3 rounded-full shadow-md">
519
+ <p class="text-indigo-700 font-medium flex items-center justify-center">
520
+ <i class="fas fa-rocket mr-2"></i> Başarılar Dileriz!
521
+ </p>
522
+ </div>
523
+ </div>
524
+ </section>
525
+ </main>
526
+
527
+ <!-- Footer -->
528
+ <footer class="gradient-bg text-white py-8 mt-12">
529
+ <div class="container mx-auto px-4">
530
+ <div class="flex flex-col md:flex-row justify-between items-center">
531
+ <div class="mb-6 md:mb-0">
532
+ <h3 class="text-xl font-bold mb-2">AI Moderatörlüğü Eğitim Belgesi</h3>
533
+ <p class="text-indigo-200">© 2023 Mindy AI. Tüm hakları saklıdır.</p>
534
+ </div>
535
+ <div class="flex space-x-4">
536
+ <a href="#" class="bg-white/20 p-3 rounded-full hover:bg-white/30 transition-colors">
537
+ <i class="fab fa-microsoft"></i>
538
+ </a>
539
+ <a href="#" class="bg-white/20 p-3 rounded-full hover:bg-white/30 transition-colors">
540
+ <i class="fas fa-envelope"></i>
541
+ </a>
542
+ <a href="#" class="bg-white/20 p-3 rounded-full hover:bg-white/30 transition-colors">
543
+ <i class="fas fa-question-circle"></i>
544
+ </a>
545
+ </div>
546
+ </div>
547
+ </div>
548
+ </footer>
549
+
550
+ <script>
551
+ // Accordion functionality
552
+ function toggleAccordion(element) {
553
+ element.classList.toggle('active');
554
+ const icon = element.querySelector('.fa-chevron-down');
555
+ icon.classList.toggle('rotate-180');
556
+
557
+ // Close other accordions when one is opened
558
+ if (element.classList.contains('active')) {
559
+ document.querySelectorAll('.accordion').forEach(acc => {
560
+ if (acc !== element && acc.classList.contains('active')) {
561
+ acc.classList.remove('active');
562
+ acc.querySelector('.fa-chevron-down').classList.remove('rotate-180');
563
+ }
564
+ });
565
+ }
566
+ }
567
+
568
+ // Simulate progress bar animation
569
+ document.addEventListener('DOMContentLoaded', function() {
570
+ const progressBar = document.querySelector('.progress-bar');
571
+ setTimeout(() => {
572
+ progressBar.style.width = '65%';
573
+ }, 500);
574
+
575
+ // Add pulse animation to important badges
576
+ const badges = document.querySelectorAll('.badge');
577
+ badges.forEach(badge => {
578
+ badge.style.animationDelay = `${Math.random() * 2}s`;
579
+ });
580
+ });
581
+ </script>
582
+ <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>
583
+ </html>
prompts.txt ADDED
File without changes