Hugging Face's logo

Spaces:
zoeboy
/
criador-de-cursos2
Running

App Files Community
zoeboy commited on
Commit
47bbaaa
路
verified 路
1 Parent(s): 6933300

Add 2 files

Browse files
Files changed (2) hide show
  1. README.md +7 -5
  2. index.html +948 -19
README.md CHANGED
@@ -1,10 +1,12 @@
1
  ---
2
- title: Criador De Cursos2
3
- emoji: 馃悹
4
- colorFrom: yellow
5
- colorTo: red
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: criador-de-cursos2
3
+ emoji: 馃惓
4
+ colorFrom: purple
5
+ colorTo: pink
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,948 @@
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="pt-BR">
3
+ <head>
4
+ <meta charset="UTF-8">
5
+ <meta name="viewport" content="width=device-width, initial-scale=1.0">
6
+ <title>Gerador de Cursos Inteligente</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
+ .dropzone {
11
+ border: 2px dashed #cbd5e0;
12
+ transition: all 0.3s;
13
+ }
14
+ .dropzone.active {
15
+ border-color: #4f46e5;
16
+ background-color: #eef2ff;
17
+ }
18
+ .module-card {
19
+ transition: all 0.2s;
20
+ }
21
+ .module-card:hover {
22
+ transform: translateY(-2px);
23
+ box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1);
24
+ }
25
+ .flip-card {
26
+ perspective: 1000px;
27
+ }
28
+ .flip-card-inner {
29
+ transition: transform 0.6s;
30
+ transform-style: preserve-3d;
31
+ }
32
+ .flip-card.flipped .flip-card-inner {
33
+ transform: rotateY(180deg);
34
+ }
35
+ .flip-card-front, .flip-card-back {
36
+ backface-visibility: hidden;
37
+ }
38
+ .flip-card-back {
39
+ transform: rotateY(180deg);
40
+ }
41
+ .fade-in {
42
+ animation: fadeIn 0.5s;
43
+ }
44
+ .progress-bar {
45
+ height: 6px;
46
+ border-radius: 3px;
47
+ transition: width 0.3s ease;
48
+ }
49
+ @keyframes fadeIn {
50
+ from { opacity: 0; }
51
+ to { opacity: 1; }
52
+ }
53
+ </style>
54
+ </head>
55
+ <body class="bg-gray-50 min-h-screen">
56
+ <div class="container mx-auto px-4 py-8">
57
+ <!-- Header -->
58
+ <header class="mb-10 text-center">
59
+ <h1 class="text-4xl font-bold text-indigo-700 mb-2">Gerador de Cursos Inteligente</h1>
60
+ <p class="text-gray-600 max-w-2xl mx-auto">Transforme seus materiais em cursos interativos com m贸dulos, quizzes e flashcards em minutos!</p>
61
+ </header>
62
+
63
+ <!-- Main Content -->
64
+ <div class="grid grid-cols-1 lg:grid-cols-3 gap-8">
65
+ <!-- Left Panel - Course Creation -->
66
+ <div class="lg:col-span-2 space-y-8">
67
+ <!-- Course Info Section -->
68
+ <div class="bg-white rounded-xl shadow-md p-6">
69
+ <h2 class="text-xl font-semibold text-gray-800 mb-4">Informa莽玫es do Curso</h2>
70
+ <div class="space-y-4">
71
+ <div>
72
+ <label class="block text-sm font-medium text-gray-700 mb-1">T铆tulo do Curso</label>
73
+ <input type="text" id="courseTitle" class="w-full px-4 py-2 border border-gray-300 rounded-lg focus:ring-2 focus:ring-indigo-500 focus:border-indigo-500" placeholder="Ex: Introdu莽茫o 脿 Programa莽茫o">
74
+ </div>
75
+ <div>
76
+ <label class="block text-sm font-medium text-gray-700 mb-1">Descri莽茫o</label>
77
+ <textarea id="courseDescription" rows="3" class="w-full px-4 py-2 border border-gray-300 rounded-lg focus:ring-2 focus:ring-indigo-500 focus:border-indigo-500" placeholder="Descreva o objetivo do curso..."></textarea>
78
+ </div>
79
+ </div>
80
+ </div>
81
+
82
+ <!-- Content Input Section -->
83
+ <div class="bg-white rounded-xl shadow-md p-6">
84
+ <h2 class="text-xl font-semibold text-gray-800 mb-4">Adicionar Conte煤do</h2>
85
+ <div class="flex space-x-2 mb-4">
86
+ <button id="textTab" class="px-4 py-2 bg-indigo-600 text-white rounded-lg font-medium active-tab">Texto</button>
87
+ <button id="pdfTab" class="px-4 py-2 bg-gray-200 text-gray-700 rounded-lg font-medium">PDF</button>
88
+ <button id="txtTab" class="px-4 py-2 bg-gray-200 text-gray-700 rounded-lg font-medium">TXT</button>
89
+ </div>
90
+
91
+ <!-- Text Input -->
92
+ <div id="textInput" class="content-section">
93
+ <textarea id="contentText" rows="8" class="w-full px-4 py-2 border border-gray-300 rounded-lg focus:ring-2 focus:ring-indigo-500 focus:border-indigo-500" placeholder="Cole seu texto aqui ou comece a digitar..."></textarea>
94
+ <div class="mt-4 flex justify-end">
95
+ <button id="analyzeText" class="px-6 py-2 bg-indigo-600 text-white rounded-lg font-medium hover:bg-indigo-700 transition flex items-center">
96
+ <i class="fas fa-magic mr-2"></i> Gerar M贸dulos
97
+ </button>
98
+ </div>
99
+ </div>
100
+
101
+ <!-- File Upload -->
102
+ <div id="fileInput" class="content-section hidden">
103
+ <div id="dropzone" class="dropzone rounded-xl p-8 text-center cursor-pointer">
104
+ <i class="fas fa-cloud-upload-alt text-4xl text-indigo-500 mb-3"></i>
105
+ <p class="text-gray-600 mb-2">Arraste e solte seus arquivos aqui</p>
106
+ <p class="text-sm text-gray-500 mb-4">ou</p>
107
+ <label for="fileUpload" class="px-4 py-2 bg-indigo-600 text-white rounded-lg font-medium hover:bg-indigo-700 transition cursor-pointer">
108
+ Selecione os Arquivos
109
+ </label>
110
+ <input type="file" id="fileUpload" class="hidden" accept=".pdf,.txt">
111
+ </div>
112
+ <div id="filePreview" class="mt-4 hidden">
113
+ <div class="flex items-center p-3 bg-gray-100 rounded-lg">
114
+ <i class="fas fa-file-alt text-indigo-500 mr-3 text-xl"></i>
115
+ <div class="flex-1">
116
+ <p id="fileName" class="font-medium"></p>
117
+ <p id="fileSize" class="text-sm text-gray-500"></p>
118
+ </div>
119
+ <button id="removeFile" class="text-red-500 hover:text-red-700">
120
+ <i class="fas fa-times"></i>
121
+ </button>
122
+ </div>
123
+ <!-- Progress Bar -->
124
+ <div id="uploadProgress" class="hidden mt-3">
125
+ <div class="flex justify-between text-sm text-gray-600 mb-1">
126
+ <span>Upload em progresso...</span>
127
+ <span id="progressPercent">0%</span>
128
+ </div>
129
+ <div class="w-full bg-gray-200 rounded-full">
130
+ <div id="progressBar" class="progress-bar bg-indigo-600" style="width: 0%"></div>
131
+ </div>
132
+ </div>
133
+ <div class="mt-4 flex justify-end">
134
+ <button id="analyzeFile" class="px-6 py-2 bg-indigo-600 text-white rounded-lg font-medium hover:bg-indigo-700 transition flex items-center">
135
+ <i class="fas fa-magic mr-2"></i> Processar Arquivo
136
+ </button>
137
+ </div>
138
+ </div>
139
+ </div>
140
+ </div>
141
+
142
+ <!-- Generated Modules -->
143
+ <div id="modulesSection" class="hidden">
144
+ <div class="flex justify-between items-center mb-4">
145
+ <h2 class="text-xl font-semibold text-gray-800">M贸dulos Gerados</h2>
146
+ <button id="addModule" class="px-4 py-2 bg-green-600 text-white rounded-lg font-medium hover:bg-green-700 transition flex items-center">
147
+ <i class="fas fa-plus mr-2"></i> Adicionar M贸dulo
148
+ </button>
149
+ </div>
150
+ <div id="modulesContainer" class="space-y-4">
151
+ <!-- Modules will be added here dynamically -->
152
+ </div>
153
+ </div>
154
+ </div>
155
+
156
+ <!-- Right Panel - Preview -->
157
+ <div class="lg:col-span-1">
158
+ <div class="bg-white rounded-xl shadow-md p-6 sticky top-6">
159
+ <h2 class="text-xl font-semibold text-gray-800 mb-4">Pr茅-visualiza莽茫o do Curso</h2>
160
+
161
+ <div id="coursePreview" class="space-y-4">
162
+ <div class="text-center py-10 text-gray-400">
163
+ <i class="fas fa-book-open text-4xl mb-3"></i>
164
+ <p>Seu curso aparecer谩 aqui</p>
165
+ </div>
166
+ </div>
167
+
168
+ <div class="mt-6 pt-4 border-t border-gray-200">
169
+ <button id="generateCourse" class="w-full py-3 bg-indigo-600 text-white rounded-lg font-medium hover:bg-indigo-700 transition flex items-center justify-center">
170
+ <i class="fas fa-download mr-2"></i> Exportar Curso
171
+ </button>
172
+ </div>
173
+ </div>
174
+ </div>
175
+ </div>
176
+ </div>
177
+
178
+ <!-- Module Modal -->
179
+ <div id="moduleModal" class="fixed inset-0 bg-black bg-opacity-50 flex items-center justify-center hidden z-50">
180
+ <div class="bg-white rounded-xl p-6 w-full max-w-2xl max-h-[90vh] overflow-y-auto">
181
+ <div class="flex justify-between items-center mb-4">
182
+ <h3 class="text-lg font-semibold">Editar M贸dulo</h3>
183
+ <button id="closeModal" class="text-gray-500 hover:text-gray-700">
184
+ <i class="fas fa-times"></i>
185
+ </button>
186
+ </div>
187
+
188
+ <div class="space-y-4">
189
+ <div>
190
+ <label class="block text-sm font-medium text-gray-700 mb-1">T铆tulo do M贸dulo</label>
191
+ <input type="text" id="moduleTitle" class="w-full px-4 py-2 border border-gray-300 rounded-lg">
192
+ </div>
193
+
194
+ <div>
195
+ <label class="block text-sm font-medium text-gray-700 mb-1">Conte煤do</label>
196
+ <textarea id="moduleContent" rows="6" class="w-full px-4 py-2 border border-gray-300 rounded-lg"></textarea>
197
+ </div>
198
+
199
+ <div>
200
+ <label class="block text-sm font-medium text-gray-700 mb-1">Imagem (URL)</label>
201
+ <input type="text" id="moduleImage" class="w-full px-4 py-2 border border-gray-300 rounded-lg" placeholder="Cole a URL da imagem">
202
+ </div>
203
+
204
+ <div class="pt-4">
205
+ <h4 class="font-medium mb-2">Adicionar Quiz</h4>
206
+ <div id="quizQuestions" class="space-y-3">
207
+ <!-- Quiz questions will be added here -->
208
+ </div>
209
+ <button id="addQuestion" class="mt-2 px-4 py-2 bg-blue-100 text-blue-600 rounded-lg text-sm font-medium">
210
+ <i class="fas fa-plus mr-1"></i> Adicionar Pergunta
211
+ </button>
212
+ </div>
213
+
214
+ <div class="pt-4">
215
+ <h4 class="font-medium mb-2">Adicionar Flashcards</h4>
216
+ <div id="flashcardsContainer" class="space-y-3">
217
+ <!-- Flashcards will be added here -->
218
+ </div>
219
+ <button id="addFlashcard" class="mt-2 px-4 py-2 bg-purple-100 text-purple-600 rounded-lg text-sm font-medium">
220
+ <i class="fas fa-plus mr-1"></i> Adicionar Flashcard
221
+ </button>
222
+ </div>
223
+
224
+ <div class="flex justify-end space-x-3 pt-4">
225
+ <button id="cancelModule" class="px-4 py-2 border border-gray-300 rounded-lg font-medium">Cancelar</button>
226
+ <button id="saveModule" class="px-4 py-2 bg-indigo-600 text-white rounded-lg font-medium">Salvar</button>
227
+ </div>
228
+ </div>
229
+ </div>
230
+ </div>
231
+
232
+ <script>
233
+ // DOM Elements
234
+ const textTab = document.getElementById('textTab');
235
+ const pdfTab = document.getElementById('pdfTab');
236
+ const txtTab = document.getElementById('txtTab');
237
+ const textInput = document.getElementById('textInput');
238
+ const fileInput = document.getElementById('fileInput');
239
+ const contentText = document.getElementById('contentText');
240
+ const analyzeText = document.getElementById('analyzeText');
241
+ const dropzone = document.getElementById('dropzone');
242
+ const fileUpload = document.getElementById('fileUpload');
243
+ const filePreview = document.getElementById('filePreview');
244
+ const fileName = document.getElementById('fileName');
245
+ const fileSize = document.getElementById('fileSize');
246
+ const removeFile = document.getElementById('removeFile');
247
+ const analyzeFile = document.getElementById('analyzeFile');
248
+ const modulesSection = document.getElementById('modulesSection');
249
+ const modulesContainer = document.getElementById('modulesContainer');
250
+ const addModule = document.getElementById('addModule');
251
+ const coursePreview = document.getElementById('coursePreview');
252
+ const generateCourse = document.getElementById('generateCourse');
253
+ const moduleModal = document.getElementById('moduleModal');
254
+ const closeModal = document.getElementById('closeModal');
255
+ const cancelModule = document.getElementById('cancelModule');
256
+ const saveModule = document.getElementById('saveModule');
257
+ const moduleTitle = document.getElementById('moduleTitle');
258
+ const moduleContent = document.getElementById('moduleContent');
259
+ const moduleImage = document.getElementById('moduleImage');
260
+ const quizQuestions = document.getElementById('quizQuestions');
261
+ const addQuestion = document.getElementById('addQuestion');
262
+ const flashcardsContainer = document.getElementById('flashcardsContainer');
263
+ const addFlashcard = document.getElementById('addFlashcard');
264
+ const uploadProgress = document.getElementById('uploadProgress');
265
+ const progressBar = document.getElementById('progressBar');
266
+ const progressPercent = document.getElementById('progressPercent');
267
+
268
+ // State
269
+ let currentTab = 'text';
270
+ let currentFile = null;
271
+ let modules = [];
272
+ let currentModuleIndex = null;
273
+
274
+ // Tab Switching
275
+ textTab.addEventListener('click', () => switchTab('text'));
276
+ pdfTab.addEventListener('click', () => switchTab('pdf'));
277
+ txtTab.addEventListener('click', () => switchTab('txt'));
278
+
279
+ function switchTab(tab) {
280
+ currentTab = tab;
281
+
282
+ // Update tab buttons
283
+ textTab.classList.remove('bg-indigo-600', 'text-white');
284
+ textTab.classList.add('bg-gray-200', 'text-gray-700');
285
+ pdfTab.classList.remove('bg-indigo-600', 'text-white');
286
+ pdfTab.classList.add('bg-gray-200', 'text-gray-700');
287
+ txtTab.classList.remove('bg-indigo-600', 'text-white');
288
+ txtTab.classList.add('bg-gray-200', 'text-gray-700');
289
+
290
+ if (tab === 'text') {
291
+ textTab.classList.remove('bg-gray-200', 'text-gray-700');
292
+ textTab.classList.add('bg-indigo-600', 'text-white');
293
+ textInput.classList.remove('hidden');
294
+ fileInput.classList.add('hidden');
295
+ } else {
296
+ if (tab === 'pdf') {
297
+ pdfTab.classList.remove('bg-gray-200', 'text-gray-700');
298
+ pdfTab.classList.add('bg-indigo-600', 'text-white');
299
+ fileUpload.setAttribute('accept', '.pdf');
300
+ } else {
301
+ txtTab.classList.remove('bg-gray-200', 'text-gray-700');
302
+ txtTab.classList.add('bg-indigo-600', 'text-white');
303
+ fileUpload.setAttribute('accept', '.txt');
304
+ }
305
+ textInput.classList.add('hidden');
306
+ fileInput.classList.remove('hidden');
307
+ }
308
+ }
309
+
310
+ // File Upload Handling
311
+ dropzone.addEventListener('dragover', (e) => {
312
+ e.preventDefault();
313
+ dropzone.classList.add('active');
314
+ });
315
+
316
+ dropzone.addEventListener('dragleave', () => {
317
+ dropzone.classList.remove('active');
318
+ });
319
+
320
+ dropzone.addEventListener('drop', (e) => {
321
+ e.preventDefault();
322
+ dropzone.classList.remove('active');
323
+
324
+ if (e.dataTransfer.files.length) {
325
+ handleFileUpload(e.dataTransfer.files[0]);
326
+ }
327
+ });
328
+
329
+ fileUpload.addEventListener('change', (e) => {
330
+ if (e.target.files.length) {
331
+ handleFileUpload(e.target.files[0]);
332
+ }
333
+ });
334
+
335
+ function handleFileUpload(file) {
336
+ // Validate file type based on current tab
337
+ let isValid = false;
338
+
339
+ if (currentTab === 'pdf') {
340
+ // Check for PDF files by extension or MIME type
341
+ isValid = file.name.toLowerCase().endsWith('.pdf') ||
342
+ file.type === 'application/pdf';
343
+ } else if (currentTab === 'txt') {
344
+ // Check for TXT files by extension or MIME type
345
+ isValid = file.name.toLowerCase().endsWith('.txt') ||
346
+ file.type === 'text/plain';
347
+ }
348
+
349
+ if (!isValid) {
350
+ alert(`Por favor, selecione um arquivo ${currentTab.toUpperCase()} v谩lido.`);
351
+ return;
352
+ }
353
+
354
+ // Show file preview
355
+ currentFile = file;
356
+ fileName.textContent = file.name;
357
+ fileSize.textContent = formatFileSize(file.size);
358
+ filePreview.classList.remove('hidden');
359
+
360
+ // Simulate file upload with progress
361
+ simulateFileUpload(file);
362
+ }
363
+
364
+ function simulateFileUpload(file) {
365
+ // Show progress bar
366
+ uploadProgress.classList.remove('hidden');
367
+ analyzeFile.disabled = true;
368
+
369
+ let progress = 0;
370
+ const interval = setInterval(() => {
371
+ progress += Math.random() * 10;
372
+ if (progress > 100) progress = 100;
373
+
374
+ // Update progress bar
375
+ progressBar.style.width = `${progress}%`;
376
+ progressPercent.textContent = `${Math.round(progress)}%`;
377
+
378
+ if (progress === 100) {
379
+ clearInterval(interval);
380
+ setTimeout(() => {
381
+ uploadProgress.classList.add('hidden');
382
+ analyzeFile.disabled = false;
383
+ }, 500);
384
+ }
385
+ }, 200);
386
+ }
387
+
388
+ function formatFileSize(bytes) {
389
+ if (bytes === 0) return '0 Bytes';
390
+ const k = 1024;
391
+ const sizes = ['Bytes', 'KB', 'MB', 'GB'];
392
+ const i = Math.floor(Math.log(bytes) / Math.log(k));
393
+ return parseFloat((bytes / Math.pow(k, i)).toFixed(2)) + ' ' + sizes[i];
394
+ }
395
+
396
+ removeFile.addEventListener('click', () => {
397
+ currentFile = null;
398
+ fileUpload.value = '';
399
+ filePreview.classList.add('hidden');
400
+ uploadProgress.classList.add('hidden');
401
+ });
402
+
403
+ // Analyze Content
404
+ analyzeText.addEventListener('click', () => {
405
+ const text = contentText.value.trim();
406
+ if (!text) {
407
+ alert('Por favor, insira algum texto para gerar os m贸dulos.');
408
+ return;
409
+ }
410
+
411
+ // Simulate AI processing
412
+ simulateProcessing(text);
413
+ });
414
+
415
+ analyzeFile.addEventListener('click', () => {
416
+ if (!currentFile) {
417
+ alert('Por favor, fa莽a upload de um arquivo primeiro.');
418
+ return;
419
+ }
420
+
421
+ // Simulate file processing
422
+ simulateProcessing(`Conte煤do do arquivo ${currentFile.name}`);
423
+ });
424
+
425
+ function simulateProcessing(content) {
426
+ // Show loading state
427
+ const button = currentTab === 'text' ? analyzeText : analyzeFile;
428
+ button.innerHTML = '<i class="fas fa-spinner fa-spin mr-2"></i> Processando...';
429
+ button.disabled = true;
430
+
431
+ // Simulate API call delay
432
+ setTimeout(() => {
433
+ // Generate sample modules from content
434
+ generateSampleModules(content);
435
+
436
+ // Reset button
437
+ button.innerHTML = '<i class="fas fa-magic mr-2"></i> ' + (currentTab === 'text' ? 'Gerar M贸dulos' : 'Processar Arquivo');
438
+ button.disabled = false;
439
+
440
+ // Show modules section
441
+ modulesSection.classList.remove('hidden');
442
+
443
+ // Update preview
444
+ updateCoursePreview();
445
+ }, 1500);
446
+ }
447
+
448
+ function generateSampleModules(content) {
449
+ // Clear existing modules
450
+ modules = [];
451
+
452
+ // Split content into logical sections (simulating AI analysis)
453
+ const sections = splitContentIntoSections(content);
454
+
455
+ // Create modules for each section
456
+ sections.forEach((section, index) => {
457
+ const module = {
458
+ id: Date.now() + index,
459
+ title: section.title,
460
+ content: section.content,
461
+ image: getRandomImageUrl(section.keywords[0] || 'education'),
462
+ quiz: generateQuizForSection(section),
463
+ flashcards: generateFlashcardsForSection(section)
464
+ };
465
+
466
+ modules.push(module);
467
+ });
468
+
469
+ // If no sections were created (unlikely), create a single module
470
+ if (modules.length === 0) {
471
+ modules.push({
472
+ id: Date.now(),
473
+ title: 'M贸dulo 1: Introdu莽茫o',
474
+ content: content,
475
+ image: getRandomImageUrl('education'),
476
+ quiz: [{
477
+ question: "Qual 茅 o t贸pico principal deste m贸dulo?",
478
+ options: ["Op莽茫o A", "Op莽茫o B", "Op莽茫o C", "Op莽茫o D"],
479
+ correctAnswer: 0
480
+ }],
481
+ flashcards: [{
482
+ front: "Termo importante",
483
+ back: "Defini莽茫o do termo"
484
+ }]
485
+ });
486
+ }
487
+
488
+ renderModules();
489
+ }
490
+
491
+ function splitContentIntoSections(content) {
492
+ // This is a simulation of how an AI might split content into modules
493
+ // In a real app, this would be done by an AI service
494
+
495
+ const paragraphs = content.split('\n\n').filter(p => p.trim().length > 0);
496
+
497
+ // If content is short, treat it as a single module
498
+ if (paragraphs.length <= 2) {
499
+ return [{
500
+ title: "M贸dulo 1: Vis茫o Geral",
501
+ content: content,
502
+ keywords: ["introdu莽茫o", "vis茫o geral"]
503
+ }];
504
+ }
505
+
506
+ // Group paragraphs into sections
507
+ const sections = [];
508
+ let currentSection = null;
509
+
510
+ paragraphs.forEach(para => {
511
+ // Check if this paragraph starts a new section
512
+ const isHeading = para.split('\n')[0].length < 60 &&
513
+ (para.split('\n')[0].endsWith(':') ||
514
+ para.split('\n')[0].match(/^[A-Z][a-z]+/));
515
+
516
+ if (isHeading || !currentSection) {
517
+ // Start a new section
518
+ if (currentSection) {
519
+ sections.push(currentSection);
520
+ }
521
+
522
+ const title = isHeading ? para.split('\n')[0] : `M贸dulo ${sections.length + 1}: ${para.substring(0, 30)}...`;
523
+ const content = isHeading ? para.substring(para.indexOf('\n') + 1) : para;
524
+
525
+ currentSection = {
526
+ title: title,
527
+ content: content,
528
+ keywords: extractKeywords(para)
529
+ };
530
+ } else {
531
+ // Add to current section
532
+ currentSection.content += '\n\n' + para;
533
+ }
534
+ });
535
+
536
+ // Add the last section
537
+ if (currentSection) {
538
+ sections.push(currentSection);
539
+ }
540
+
541
+ // Limit to 5 sections for demo purposes
542
+ if (sections.length > 5) {
543
+ return sections.slice(0, 5).map((section, i) => ({
544
+ ...section,
545
+ title: `M贸dulo ${i + 1}: ${section.title.substring(0, 40)}...`
546
+ }));
547
+ }
548
+
549
+ return sections;
550
+ }
551
+
552
+ function extractKeywords(text) {
553
+ // Simple keyword extraction simulation
554
+ const words = text.toLowerCase().split(/\s+/);
555
+ const commonWords = ['o', 'a', 'os', 'as', 'de', 'do', 'da', 'dos', 'das', 'em', 'no', 'na', 'nos', 'nas', 'por', 'para', 'com', 'sem', 'que', '茅'];
556
+
557
+ const keywords = words
558
+ .filter(word => word.length > 3 && !commonWords.includes(word))
559
+ .slice(0, 3);
560
+
561
+ return keywords.length > 0 ? keywords : ['aprendizado', 'conhecimento'];
562
+ }
563
+
564
+ function generateQuizForSection(section) {
565
+ // Generate 1-3 quiz questions per section
566
+ const questionCount = Math.min(3, Math.max(1, section.content.split('.').length / 5));
567
+ const questions = [];
568
+
569
+ for (let i = 0; i < questionCount; i++) {
570
+ questions.push({
571
+ question: `Pergunta ${i + 1} sobre "${section.title.substring(0, 20)}..."`,
572
+ options: ["Op莽茫o A", "Op莽茫o B", "Op莽茫o C", "Op莽茫o D"],
573
+ correctAnswer: Math.floor(Math.random() * 4)
574
+ });
575
+ }
576
+
577
+ return questions;
578
+ }
579
+
580
+ function generateFlashcardsForSection(section) {
581
+ // Generate 2-5 flashcards per section
582
+ const cardCount = Math.min(5, Math.max(2, section.keywords.length));
583
+ const flashcards = [];
584
+
585
+ for (let i = 0; i < cardCount; i++) {
586
+ const term = section.keywords[i] || `Termo ${i + 1}`;
587
+ flashcards.push({
588
+ front: term.charAt(0).toUpperCase() + term.slice(1),
589
+ back: `Defini莽茫o de ${term}`
590
+ });
591
+ }
592
+
593
+ return flashcards;
594
+ }
595
+
596
+ function getRandomImageUrl(keyword) {
597
+ return `https://source.unsplash.com/300x200/?${keyword},education`;
598
+ }
599
+
600
+ // Modules Management
601
+ function renderModules() {
602
+ modulesContainer.innerHTML = '';
603
+
604
+ modules.forEach((module, index) => {
605
+ const moduleCard = document.createElement('div');
606
+ moduleCard.className = 'module-card bg-white rounded-xl shadow-md overflow-hidden';
607
+ moduleCard.innerHTML = `
608
+ <div class="p-5">
609
+ <div class="flex justify-between items-start">
610
+ <h3 class="font-semibold text-lg text-gray-800">${module.title}</h3>
611
+ <div class="flex space-x-2">
612
+ <button class="edit-module px-3 py-1 bg-blue-100 text-blue-600 rounded-lg text-sm" data-index="${index}">
613
+ <i class="fas fa-edit"></i>
614
+ </button>
615
+ <button class="delete-module px-3 py-1 bg-red-100 text-red-600 rounded-lg text-sm" data-index="${index}">
616
+ <i class="fas fa-trash"></i>
617
+ </button>
618
+ </div>
619
+ </div>
620
+ <div class="mt-3 flex items-center text-sm text-gray-500">
621
+ <span class="mr-3"><i class="fas fa-image mr-1"></i> ${module.image ? 'Com imagem' : 'Sem imagem'}</span>
622
+ <span class="mr-3"><i class="fas fa-question-circle mr-1"></i> ${module.quiz.length} perguntas</span>
623
+ <span><i class="fas fa-layer-group mr-1"></i> ${module.flashcards.length} flashcards</span>
624
+ </div>
625
+ </div>
626
+ `;
627
+
628
+ modulesContainer.appendChild(moduleCard);
629
+ });
630
+
631
+ // Add event listeners to edit and delete buttons
632
+ document.querySelectorAll('.edit-module').forEach(btn => {
633
+ btn.addEventListener('click', (e) => {
634
+ const index = e.target.getAttribute('data-index');
635
+ openEditModuleModal(index);
636
+ });
637
+ });
638
+
639
+ document.querySelectorAll('.delete-module').forEach(btn => {
640
+ btn.addEventListener('click', (e) => {
641
+ const index = e.target.getAttribute('data-index');
642
+ if (confirm('Tem certeza que deseja excluir este m贸dulo?')) {
643
+ modules.splice(index, 1);
644
+ renderModules();
645
+ updateCoursePreview();
646
+ }
647
+ });
648
+ });
649
+ }
650
+
651
+ addModule.addEventListener('click', () => {
652
+ currentModuleIndex = null;
653
+ moduleTitle.value = '';
654
+ moduleContent.value = '';
655
+ moduleImage.value = '';
656
+ quizQuestions.innerHTML = '';
657
+ flashcardsContainer.innerHTML = '';
658
+ moduleModal.classList.remove('hidden');
659
+ });
660
+
661
+ function openEditModuleModal(index) {
662
+ currentModuleIndex = index;
663
+ const module = modules[index];
664
+
665
+ moduleTitle.value = module.title;
666
+ moduleContent.value = module.content;
667
+ moduleImage.value = module.image || '';
668
+
669
+ // Render quiz questions
670
+ quizQuestions.innerHTML = '';
671
+ module.quiz.forEach((question, qIndex) => {
672
+ addQuestionToModal(question, qIndex);
673
+ });
674
+
675
+ // Render flashcards
676
+ flashcardsContainer.innerHTML = '';
677
+ module.flashcards.forEach((card, cIndex) => {
678
+ addFlashcardToModal(card, cIndex);
679
+ });
680
+
681
+ moduleModal.classList.remove('hidden');
682
+ }
683
+
684
+ // Quiz Question Management
685
+ addQuestion.addEventListener('click', () => {
686
+ addQuestionToModal({
687
+ question: '',
688
+ options: ['', '', '', ''],
689
+ correctAnswer: 0
690
+ }, quizQuestions.children.length);
691
+ });
692
+
693
+ function addQuestionToModal(question, index) {
694
+ const questionDiv = document.createElement('div');
695
+ questionDiv.className = 'bg-gray-50 p-3 rounded-lg';
696
+ questionDiv.innerHTML = `
697
+ <div class="flex justify-between items-center mb-2">
698
+ <label class="text-sm font-medium text-gray-700">Pergunta ${index + 1}</label>
699
+ <button class="remove-question text-red-500 text-sm" data-index="${index}">
700
+ <i class="fas fa-times"></i> Remover
701
+ </button>
702
+ </div>
703
+ <input type="text" class="w-full px-3 py-2 border border-gray-300 rounded-lg mb-2 question-text"
704
+ value="${question.question}" placeholder="Digite a pergunta">
705
+ <div class="space-y-2 mb-3">
706
+ ${question.options.map((opt, optIndex) => `
707
+ <div class="flex items-center">
708
+ <input type="radio" name="correct-${index}" value="${optIndex}"
709
+ class="mr-2 correct-answer" ${question.correctAnswer === optIndex ? 'checked' : ''}>
710
+ <input type="text" class="flex-1 px-3 py-2 border border-gray-300 rounded-lg question-option"
711
+ value="${opt}" placeholder="Op莽茫o ${optIndex + 1}">
712
+ </div>
713
+ `).join('')}
714
+ </div>
715
+ `;
716
+
717
+ quizQuestions.appendChild(questionDiv);
718
+
719
+ // Add event listener to remove button
720
+ questionDiv.querySelector('.remove-question').addEventListener('click', (e) => {
721
+ e.target.closest('.bg-gray-50').remove();
722
+ // Renumber remaining questions
723
+ const questions = quizQuestions.querySelectorAll('.bg-gray-50');
724
+ questions.forEach((q, i) => {
725
+ q.querySelector('label').textContent = `Pergunta ${i + 1}`;
726
+ });
727
+ });
728
+ }
729
+
730
+ // Flashcard Management
731
+ addFlashcard.addEventListener('click', () => {
732
+ addFlashcardToModal({
733
+ front: '',
734
+ back: ''
735
+ }, flashcardsContainer.children.length);
736
+ });
737
+
738
+ function addFlashcardToModal(card, index) {
739
+ const cardDiv = document.createElement('div');
740
+ cardDiv.className = 'bg-gray-50 p-3 rounded-lg';
741
+ cardDiv.innerHTML = `
742
+ <div class="flex justify-between items-center mb-2">
743
+ <label class="text-sm font-medium text-gray-700">Flashcard ${index + 1}</label>
744
+ <button class="remove-flashcard text-red-500 text-sm" data-index="${index}">
745
+ <i class="fas fa-times"></i> Remover
746
+ </button>
747
+ </div>
748
+ <input type="text" class="w-full px-3 py-2 border border-gray-300 rounded-lg mb-2 flashcard-front"
749
+ value="${card.front}" placeholder="Frente (termo)">
750
+ <input type="text" class="w-full px-3 py-2 border border-gray-300 rounded-lg flashcard-back"
751
+ value="${card.back}" placeholder="Verso (defini莽茫o)">
752
+ `;
753
+
754
+ flashcardsContainer.appendChild(cardDiv);
755
+
756
+ // Add event listener to remove button
757
+ cardDiv.querySelector('.remove-flashcard').addEventListener('click', (e) => {
758
+ e.target.closest('.bg-gray-50').remove();
759
+ // Renumber remaining flashcards
760
+ const cards = flashcardsContainer.querySelectorAll('.bg-gray-50');
761
+ cards.forEach((c, i) => {
762
+ c.querySelector('label').textContent = `Flashcard ${i + 1}`;
763
+ });
764
+ });
765
+ }
766
+
767
+ // Modal Actions
768
+ closeModal.addEventListener('click', () => {
769
+ moduleModal.classList.add('hidden');
770
+ });
771
+
772
+ cancelModule.addEventListener('click', () => {
773
+ moduleModal.classList.add('hidden');
774
+ });
775
+
776
+ saveModule.addEventListener('click', () => {
777
+ // Get module data from form
778
+ const title = moduleTitle.value.trim();
779
+ const content = moduleContent.value.trim();
780
+ const image = moduleImage.value.trim();
781
+
782
+ if (!title || !content) {
783
+ alert('Por favor, preencha pelo menos o t铆tulo e o conte煤do do m贸dulo.');
784
+ return;
785
+ }
786
+
787
+ // Get quiz questions
788
+ const quiz = [];
789
+ const questionDivs = quizQuestions.querySelectorAll('.bg-gray-50');
790
+ questionDivs.forEach(div => {
791
+ const questionText = div.querySelector('.question-text').value.trim();
792
+ const options = Array.from(div.querySelectorAll('.question-option')).map(opt => opt.value.trim());
793
+ const correctAnswer = parseInt(div.querySelector('.correct-answer:checked').value);
794
+
795
+ if (questionText && options.every(opt => opt)) {
796
+ quiz.push({
797
+ question: questionText,
798
+ options: options,
799
+ correctAnswer: correctAnswer
800
+ });
801
+ }
802
+ });
803
+
804
+ // Get flashcards
805
+ const flashcards = [];
806
+ const flashcardDivs = flashcardsContainer.querySelectorAll('.bg-gray-50');
807
+ flashcardDivs.forEach(div => {
808
+ const front = div.querySelector('.flashcard-front').value.trim();
809
+ const back = div.querySelector('.flashcard-back').value.trim();
810
+
811
+ if (front && back) {
812
+ flashcards.push({
813
+ front: front,
814
+ back: back
815
+ });
816
+ }
817
+ });
818
+
819
+ // Create or update module
820
+ const moduleData = {
821
+ id: currentModuleIndex !== null ? modules[currentModuleIndex].id : Date.now(),
822
+ title: title,
823
+ content: content,
824
+ image: image || null,
825
+ quiz: quiz,
826
+ flashcards: flashcards
827
+ };
828
+
829
+ if (currentModuleIndex !== null) {
830
+ // Update existing module
831
+ modules[currentModuleIndex] = moduleData;
832
+ } else {
833
+ // Add new module
834
+ modules.push(moduleData);
835
+ }
836
+
837
+ // Update UI
838
+ renderModules();
839
+ updateCoursePreview();
840
+ moduleModal.classList.add('hidden');
841
+ });
842
+
843
+ // Course Preview
844
+ function updateCoursePreview() {
845
+ const courseTitle = document.getElementById('courseTitle').value.trim() || 'Nome do Curso';
846
+ const courseDescription = document.getElementById('courseDescription').value.trim() || 'Descri莽茫o do curso ser谩 exibida aqui.';
847
+
848
+ coursePreview.innerHTML = `
849
+ <div class="text-center mb-6">
850
+ <h3 class="text-2xl font-bold text-gray-800">${courseTitle}</h3>
851
+ <p class="text-gray-600 mt-2">${courseDescription}</p>
852
+ </div>
853
+
854
+ ${modules.length > 0 ? `
855
+ <div class="space-y-6">
856
+ ${modules.map((module, index) => `
857
+ <div class="border border-gray-200 rounded-xl overflow-hidden">
858
+ <div class="bg-gray-50 px-5 py-3 border-b border-gray-200">
859
+ <h4 class="font-semibold text-gray-800">${module.title}</h4>
860
+ </div>
861
+
862
+ <div class="p-5">
863
+ ${module.image ? `
864
+ <img src="${module.image}" alt="${module.title}" class="w-full h-48 object-cover rounded-lg mb-4">
865
+ ` : ''}
866
+
867
+ <div class="prose max-w-none text-gray-700">
868
+ ${module.content.split('\n').map(p => `<p>${p}</p>`).join('')}
869
+ </div>
870
+
871
+ ${module.quiz.length > 0 ? `
872
+ <div class="mt-6 pt-4 border-t border-gray-200">
873
+ <h5 class="font-medium text-gray-800 mb-3">Quiz</h5>
874
+ <div class="space-y-4">
875
+ ${module.quiz.map((q, qIndex) => `
876
+ <div class="quiz-question">
877
+ <p class="font-medium">${qIndex + 1}. ${q.question}</p>
878
+ <div class="mt-2 space-y-2">
879
+ ${q.options.map((opt, optIndex) => `
880
+ <div class="flex items-center">
881
+ <input type="radio" id="quiz-${index}-${qIndex}-${optIndex}"
882
+ name="quiz-${index}-${qIndex}" class="mr-2" ${q.correctAnswer === optIndex ? 'checked' : ''}>
883
+ <label for="quiz-${index}-${qIndex}-${optIndex}" class="text-gray-700">${opt}</label>
884
+ </div>
885
+ `).join('')}
886
+ </div>
887
+ </div>
888
+ `).join('')}
889
+ </div>
890
+ </div>
891
+ ` : ''}
892
+
893
+ ${module.flashcards.length > 0 ? `
894
+ <div class="mt-6 pt-4 border-t border-gray-200">
895
+ <h5 class="font-medium text-gray-800 mb-3">Flashcards</h5>
896
+ <div class="grid grid-cols-1 sm:grid-cols-2 gap-3">
897
+ ${module.flashcards.map((card, cIndex) => `
898
+ <div class="flip-card" onclick="this.classList.toggle('flipped')">
899
+ <div class="flip-card-inner bg-white rounded-lg shadow-sm border border-gray-200 h-32">
900
+ <div class="flip-card-front flex items-center justify-center p-4 text-center">
901
+ <p class="font-medium">${card.front}</p>
902
+ </div>
903
+ <div class="flip-card-back flex items-center justify-center p-4 text-center bg-indigo-50">
904
+ <p>${card.back}</p>
905
+ </div>
906
+ </div>
907
+ </div>
908
+ `).join('')}
909
+ </div>
910
+ </div>
911
+ ` : ''}
912
+ </div>
913
+ </div>
914
+ `).join('')}
915
+ </div>
916
+ ` : `
917
+ <div class="text-center py-10 text-gray-400">
918
+ <i class="fas fa-book-open text-4xl mb-3"></i>
919
+ <p>Adicione m贸dulos para visualizar o curso</p>
920
+ </div>
921
+ `}
922
+ `;
923
+
924
+ // Add event listeners to flip cards
925
+ document.querySelectorAll('.flip-card').forEach(card => {
926
+ card.addEventListener('click', function() {
927
+ this.classList.toggle('flipped');
928
+ });
929
+ });
930
+ }
931
+
932
+ // Export Course
933
+ generateCourse.addEventListener('click', () => {
934
+ if (modules.length === 0) {
935
+ alert('Por favor, adicione pelo menos um m贸dulo ao curso antes de exportar.');
936
+ return;
937
+ }
938
+
939
+ // In a real app, this would generate a downloadable package
940
+ alert('Funcionalidade de exporta莽茫o seria implementada aqui!\nO curso seria empacotado para download.');
941
+ });
942
+
943
+ // Initialize
944
+ document.getElementById('courseTitle').addEventListener('input', updateCoursePreview);
945
+ document.getElementById('courseDescription').addEventListener('input', updateCoursePreview);
946
+ </script>
947
+ <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=zoeboy/criador-de-cursos2" style="color: #fff;text-decoration: underline;" target="_blank" >Remix</a></p></body>
948
+ </html>