Hugging Face's logo

Spaces:
leonard363
/
anycoder-4e07a91e
Running

App Files Community
leonard363 commited on
Commit
1e12df9
·
verified ·
1 Parent(s): 3c723c0

Upload folder using huggingface_hub

Browse files
Files changed (1) hide show
  1. index.html +770 -19
index.html CHANGED
@@ -1,19 +1,770 @@
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>Conversor Word para HTML - AmeliCA Redalyc</title>
7
+ <style>
8
+ :root {
9
+ --primary-color: #2c3e50;
10
+ --secondary-color: #3498db;
11
+ --accent-color: #e74c3c;
12
+ --light-color: #ecf0f1;
13
+ --dark-color: #34495e;
14
+ --success-color: #27ae60;
15
+ --warning-color: #f39c12;
16
+ }
17
+
18
+ * {
19
+ margin: 0;
20
+ padding: 0;
21
+ box-sizing: border-box;
22
+ }
23
+
24
+ body {
25
+ font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
26
+ line-height: 1.6;
27
+ color: #333;
28
+ background: linear-gradient(135deg, #f5f7fa 0%, #c3cfe2 100%);
29
+ min-height: 100vh;
30
+ }
31
+
32
+ .header {
33
+ background: var(--primary-color);
34
+ color: white;
35
+ padding: 1rem 0;
36
+ box-shadow: 0 2px 10px rgba(0,0,0,0.1);
37
+ position: relative;
38
+ }
39
+
40
+ .container {
41
+ max-width: 1200px;
42
+ margin: 0 auto;
43
+ padding: 0 2rem;
44
+ }
45
+
46
+ .header-content {
47
+ display: flex;
48
+ justify-content: space-between;
49
+ align-items: center;
50
+ flex-wrap: wrap;
51
+ }
52
+
53
+ .logo {
54
+ display: flex;
55
+ align-items: center;
56
+ gap: 1rem;
57
+ }
58
+
59
+ .logo-icon {
60
+ font-size: 2rem;
61
+ background: var(--secondary-color);
62
+ width: 50px;
63
+ height: 50px;
64
+ border-radius: 50%;
65
+ display: flex;
66
+ align-items: center;
67
+ justify-content: center;
68
+ }
69
+
70
+ .header h1 {
71
+ font-size: 1.5rem;
72
+ font-weight: 600;
73
+ }
74
+
75
+ .built-with {
76
+ color: var(--light-color);
77
+ text-decoration: none;
78
+ font-size: 0.9rem;
79
+ opacity: 0.8;
80
+ transition: opacity 0.3s;
81
+ }
82
+
83
+ .built-with:hover {
84
+ opacity: 1;
85
+ }
86
+
87
+ .main-content {
88
+ padding: 2rem 0;
89
+ }
90
+
91
+ .converter-card {
92
+ background: white;
93
+ border-radius: 12px;
94
+ box-shadow: 0 10px 30px rgba(0,0,0,0.1);
95
+ overflow: hidden;
96
+ margin-bottom: 2rem;
97
+ }
98
+
99
+ .card-header {
100
+ background: var(--secondary-color);
101
+ color: white;
102
+ padding: 1.5rem;
103
+ text-align: center;
104
+ }
105
+
106
+ .card-header h2 {
107
+ font-size: 1.5rem;
108
+ margin-bottom: 0.5rem;
109
+ }
110
+
111
+ .card-body {
112
+ padding: 2rem;
113
+ }
114
+
115
+ .upload-area {
116
+ border: 3px dashed var(--secondary-color);
117
+ border-radius: 8px;
118
+ padding: 3rem 2rem;
119
+ text-align: center;
120
+ transition: all 0.3s ease;
121
+ cursor: pointer;
122
+ margin-bottom: 2rem;
123
+ }
124
+
125
+ .upload-area:hover {
126
+ background: #f8f9fa;
127
+ border-color: var(--primary-color);
128
+ }
129
+
130
+ .upload-area.active {
131
+ background: #e3f2fd;
132
+ border-color: var(--success-color);
133
+ }
134
+
135
+ .upload-icon {
136
+ font-size: 3rem;
137
+ color: var(--secondary-color);
138
+ margin-bottom: 1rem;
139
+ }
140
+
141
+ .file-input {
142
+ display: none;
143
+ }
144
+
145
+ .file-info {
146
+ margin-top: 1rem;
147
+ padding: 1rem;
148
+ background: var(--light-color);
149
+ border-radius: 6px;
150
+ display: none;
151
+ }
152
+
153
+ .file-info.show {
154
+ display: block;
155
+ }
156
+
157
+ .conversion-options {
158
+ margin: 2rem 0;
159
+ }
160
+
161
+ .options-grid {
162
+ display: grid;
163
+ grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
164
+ gap: 1.5rem;
165
+ margin-top: 1rem;
166
+ }
167
+
168
+ .option-group {
169
+ background: #f8f9fa;
170
+ padding: 1.5rem;
171
+ border-radius: 8px;
172
+ border-left: 4px solid var(--secondary-color);
173
+ }
174
+
175
+ .option-group h4 {
176
+ margin-bottom: 1rem;
177
+ color: var(--primary-color);
178
+ }
179
+
180
+ .checkbox-group {
181
+ display: flex;
182
+ flex-direction: column;
183
+ gap: 0.75rem;
184
+ }
185
+
186
+ .checkbox-item {
187
+ display: flex;
188
+ align-items: center;
189
+ gap: 0.5rem;
190
+ }
191
+
192
+ .checkbox-item input {
193
+ width: 18px;
194
+ height: 18px;
195
+ }
196
+
197
+ .actions {
198
+ display: flex;
199
+ gap: 1rem;
200
+ justify-content: center;
201
+ flex-wrap: wrap;
202
+ margin-top: 2rem;
203
+ }
204
+
205
+ .btn {
206
+ padding: 0.75rem 2rem;
207
+ border: none;
208
+ border-radius: 6px;
209
+ font-size: 1rem;
210
+ font-weight: 600;
211
+ cursor: pointer;
212
+ transition: all 0.3s ease;
213
+ display: flex;
214
+ align-items: center;
215
+ gap: 0.5rem;
216
+ }
217
+
218
+ .btn-primary {
219
+ background: var(--secondary-color);
220
+ color: white;
221
+ }
222
+
223
+ .btn-primary:hover {
224
+ background: var(--primary-color);
225
+ transform: translateY(-2px);
226
+ }
227
+
228
+ .btn-secondary {
229
+ background: var(--light-color);
230
+ color: var(--dark-color);
231
+ }
232
+
233
+ .btn-secondary:hover {
234
+ background: #d5dbdb;
235
+ }
236
+
237
+ .btn:disabled {
238
+ opacity: 0.6;
239
+ cursor: not-allowed;
240
+ transform: none;
241
+ }
242
+
243
+ .preview-section {
244
+ margin-top: 3rem;
245
+ display: none;
246
+ }
247
+
248
+ .preview-section.show {
249
+ display: block;
250
+ }
251
+
252
+ .preview-header {
253
+ display: flex;
254
+ justify-content: between;
255
+ align-items: center;
256
+ margin-bottom: 1rem;
257
+ }
258
+
259
+ .preview-content {
260
+ background: white;
261
+ border: 1px solid #ddd;
262
+ border-radius: 8px;
263
+ padding: 2rem;
264
+ max-height: 500px;
265
+ overflow-y: auto;
266
+ font-family: 'Times New Roman', serif;
267
+ line-height: 1.8;
268
+ }
269
+
270
+ .article-title {
271
+ font-size: 1.8rem;
272
+ text-align: center;
273
+ margin-bottom: 1rem;
274
+ color: var(--primary-color);
275
+ }
276
+
277
+ .article-author {
278
+ text-align: center;
279
+ font-style: italic;
280
+ margin-bottom: 2rem;
281
+ color: var(--dark-color);
282
+ }
283
+
284
+ .article-abstract {
285
+ background: #f8f9fa;
286
+ padding: 1.5rem;
287
+ border-radius: 6px;
288
+ margin-bottom: 2rem;
289
+ }
290
+
291
+ .article-keywords {
292
+ margin-bottom: 2rem;
293
+ }
294
+
295
+ .keyword-tag {
296
+ display: inline-block;
297
+ background: var(--secondary-color);
298
+ color: white;
299
+ padding: 0.3rem 0.8rem;
300
+ border-radius: 20px;
301
+ margin: 0.2rem;
302
+ font-size: 0.9rem;
303
+ }
304
+
305
+ .download-section {
306
+ text-align: center;
307
+ margin-top: 2rem;
308
+ }
309
+
310
+ .btn-success {
311
+ background: var(--success-color);
312
+ color: white;
313
+ }
314
+
315
+ .btn-success:hover {
316
+ background: #219653;
317
+ }
318
+
319
+ .loading {
320
+ display: none;
321
+ text-align: center;
322
+ padding: 2rem;
323
+ }
324
+
325
+ .loading.show {
326
+ display: block;
327
+ }
328
+
329
+ .spinner {
330
+ border: 4px solid #f3f3f3;
331
+ border-top: 4px solid var(--secondary-color);
332
+ border-radius: 50%;
333
+ width: 40px;
334
+ height: 40px;
335
+ animation: spin 1s linear infinite;
336
+ margin: 0 auto 1rem;
337
+ }
338
+
339
+ @keyframes spin {
340
+ 0% { transform: rotate(0deg); }
341
+ 100% { transform: rotate(360deg); }
342
+ }
343
+
344
+ .footer {
345
+ background: var(--dark-color);
346
+ color: white;
347
+ text-align: center;
348
+ padding: 2rem 0;
349
+ margin-top: 3rem;
350
+ }
351
+
352
+ @media (max-width: 768px) {
353
+ .header-content {
354
+ flex-direction: column;
355
+ gap: 1rem;
356
+ text-align: center;
357
+ }
358
+
359
+ .options-grid {
360
+ grid-template-columns: 1fr;
361
+ }
362
+
363
+ .actions {
364
+ flex-direction: column;
365
+ }
366
+
367
+ .btn {
368
+ width: 100%;
369
+ justify-content: center;
370
+ }
371
+
372
+ .card-body {
373
+ padding: 1.5rem;
374
+ }
375
+ }
376
+
377
+ @media (max-width: 480px) {
378
+ .container {
379
+ padding: 0 1rem;
380
+ }
381
+
382
+ .upload-area {
383
+ padding: 2rem 1rem;
384
+ }
385
+ }
386
+ </style>
387
+ </head>
388
+ <body>
389
+ <header class="header">
390
+ <div class="container">
391
+ <div class="header-content">
392
+ <div class="logo">
393
+ <div class="logo-icon">📄</div>
394
+ <h1>Conversor Word para HTML - AmeliCA Redalyc</h1>
395
+ </div>
396
+ <a href="https://huggingface.co/spaces/akhaliq/anycoder" class="built-with" target="_blank">
397
+ Built with anycoder
398
+ </a>
399
+ </div>
400
+ </div>
401
+ </header>
402
+
403
+ <main class="main-content">
404
+ <div class="container">
405
+ <div class="converter-card">
406
+ <div class="card-header">
407
+ <h2>Conversor de Artigo Científico</h2>
408
+ <p>Converta seu arquivo Word para HTML UTF-8 compatível com a plataforma AmeliCA Redalyc</p>
409
+ </div>
410
+
411
+ <div class="card-body">
412
+ <div class="upload-area" id="uploadArea">
413
+ <div class="upload-icon">📤</div>
414
+ <h3>Arraste e solte seu arquivo Word aqui</h3>
415
+ <p>ou clique para selecionar o arquivo</p>
416
+ <p style="font-size: 0.9rem; margin-top: 0.5rem; opacity: 0.8;">
417
+ Formatos suportados: .doc, .docx
418
+ </p>
419
+ <input type="file" id="fileInput" class="file-input" accept=".doc,.docx">
420
+ </div>
421
+
422
+ <div class="file-info" id="fileInfo">
423
+ <strong>Arquivo selecionado:</strong>
424
+ <span id="fileName"></span>
425
+ (<span id="fileSize"></span>)
426
+ </div>
427
+
428
+ <div class="conversion-options">
429
+ <h3>Opções de Conversão</h3>
430
+ <div class="options-grid">
431
+ <div class="option-group">
432
+ <h4>Metadados</h4>
433
+ <div class="checkbox-group">
434
+ <label class="checkbox-item">
435
+ <input type="checkbox" id="includeAbstract" checked>
436
+ Incluir resumo
437
+ </label>
438
+ <label class="checkbox-item">
439
+ <input type="checkbox" id="includeKeywords" checked>
440
+ Incluir palavras-chave
441
+ </label>
442
+ <label class="checkbox-item">
443
+ <input type="checkbox" id="includeAuthors" checked>
444
+ Incluir informações dos autores
445
+ </label>
446
+ </div>
447
+ </div>
448
+
449
+ <div class="option-group">
450
+ <h4>Formatação</h4>
451
+ <div class="checkbox-group">
452
+ <label class="checkbox-item">
453
+ <input type="checkbox" id="preserveFormatting" checked>
454
+ Preservar formatação original
455
+ </label>
456
+ <label class="checkbox-item">
457
+ <input type="checkbox" id="convertTables" checked>
458
+ Converter tabelas para HTML
459
+ </label>
460
+ <label class="checkbox-item">
461
+ <input type="checkbox" id="convertImages" checked>
462
+ Converter imagens para base64
463
+ </label>
464
+ </div>
465
+ </div>
466
+ </div>
467
+ </div>
468
+
469
+ <div class="actions">
470
+ <button class="btn btn-primary" id="convertBtn" disabled>
471
+ <span>🔄</span> Converter para HTML
472
+ </button>
473
+ <button class="btn btn-secondary" id="resetBtn">
474
+ <span>🗑️</span> Limpar
475
+ </button>
476
+ </div>
477
+
478
+ <div class="loading" id="loading">
479
+ <div class="spinner"></div>
480
+ <p>Convertendo arquivo... Aguarde</p>
481
+ </div>
482
+
483
+ <div class="preview-section" id="previewSection">
484
+ <div class="preview-header">
485
+ <h3>Prévia do HTML Gerado</h3>
486
+ </div>
487
+ <div class="preview-content" id="previewContent">
488
+ <!-- Conteúdo HTML será inserido aqui -->
489
+ </div>
490
+ <div class="download-section">
491
+ <button class="btn btn-success" id="downloadBtn">
492
+ <span>💾</span> Baixar HTML
493
+ </button>
494
+ </div>
495
+ </div>
496
+ </div>
497
+ </div>
498
+ </div>
499
+ </main>
500
+
501
+ <footer class="footer">
502
+ <div class="container">
503
+ <p>&copy; 2024 Conversor AmeliCA Redalyc. Desenvolvido para a comunidade científica.</p>
504
+ </div>
505
+ </footer>
506
+
507
+ <script>
508
+ document.addEventListener('DOMContentLoaded', function() {
509
+ const uploadArea = document.getElementById('uploadArea');
510
+ const fileInput = document.getElementById('fileInput');
511
+ const fileInfo = document.getElementById('fileInfo');
512
+ const fileName = document.getElementById('fileName');
513
+ const fileSize = document.getElementById('fileSize');
514
+ const convertBtn = document.getElementById('convertBtn');
515
+ const resetBtn = document.getElementById('resetBtn');
516
+ const loading = document.getElementById('loading');
517
+ const previewSection = document.getElementById('previewSection');
518
+ const previewContent = document.getElementById('previewContent');
519
+ const downloadBtn = document.getElementById('downloadBtn');
520
+
521
+ let currentFile = null;
522
+
523
+ // Eventos de drag and drop
524
+ ['dragenter', 'dragover', 'dragleave', 'drop'].forEach(eventName => {
525
+ uploadArea.addEventListener(eventName, preventDefaults, false);
526
+ });
527
+
528
+ function preventDefaults(e) {
529
+ e.preventDefault();
530
+ e.stopPropagation();
531
+ }
532
+
533
+ ['dragenter', 'dragover'].forEach(eventName => {
534
+ uploadArea.addEventListener(eventName, () => {
535
+ uploadArea.classList.add('active');
536
+ }, false);
537
+ });
538
+
539
+ ['dragleave', 'drop'].forEach(eventName => {
540
+ uploadArea.addEventListener(eventName, () => {
541
+ uploadArea.classList.remove('active');
542
+ }, false);
543
+ });
544
+
545
+ uploadArea.addEventListener('drop', handleDrop, false);
546
+ uploadArea.addEventListener('click', () => fileInput.click());
547
+ fileInput.addEventListener('change', handleFileSelect);
548
+
549
+ function handleDrop(e) {
550
+ const dt = e.dataTransfer;
551
+ const files = dt.files;
552
+ handleFiles(files);
553
+ }
554
+
555
+ function handleFileSelect(e) {
556
+ const files = e.target.files;
557
+ handleFiles(files);
558
+ }
559
+
560
+ function handleFiles(files) {
561
+ if (files.length > 0) {
562
+ const file = files[0];
563
+ if (file.type.includes('word') || file.name.endsWith('.doc') || file.name.endsWith('.docx')) {
564
+ currentFile = file;
565
+ updateFileInfo(file);
566
+ convertBtn.disabled = false;
567
+ } else {
568
+ alert('Por favor, selecione um arquivo Word válido (.doc ou .docx)');
569
+ }
570
+ }
571
+ }
572
+
573
+ function updateFileInfo(file) {
574
+ fileName.textContent = file.name;
575
+ fileSize.textContent = formatFileSize(file.size);
576
+ fileInfo.classList.add('show');
577
+ }
578
+
579
+ function formatFileSize(bytes) {
580
+ if (bytes === 0) return '0 Bytes';
581
+ const k = 1024;
582
+ const sizes = ['Bytes', 'KB', 'MB', 'GB'];
583
+ const i = Math.floor(Math.log(bytes) / Math.log(k));
584
+ return parseFloat((bytes / Math.pow(k, i)).toFixed(2)) + ' ' + sizes[i];
585
+ }
586
+
587
+ // Evento de conversão
588
+ convertBtn.addEventListener('click', convertFile);
589
+
590
+ function convertFile() {
591
+ if (!currentFile) return;
592
+
593
+ loading.classList.add('show');
594
+ previewSection.classList.remove('show');
595
+
596
+ // Simulação de conversão (em um ambiente real, isso seria feito no backend)
597
+ setTimeout(() => {
598
+ const includeAbstract = document.getElementById('includeAbstract').checked;
599
+ const includeKeywords = document.getElementById('includeKeywords').checked;
600
+ const includeAuthors = document.getElementById('includeAuthors').checked;
601
+ const preserveFormatting = document.getElementById('preserveFormatting').checked;
602
+ const convertTables = document.getElementById('convertTables').checked;
603
+ const convertImages = document.getElementById('convertImages').checked;
604
+
605
+ generatePreviewHTML(includeAbstract, includeKeywords, includeAuthors, preserveFormatting, convertTables, convertImages);
606
+
607
+ loading.classList.remove('show');
608
+ previewSection.classList.add('show');
609
+ }, 2000);
610
+ }
611
+
612
+ function generatePreviewHTML(includeAbstract, includeKeywords, includeAuthors, preserveFormatting, convertTables, convertImages) {
613
+ let htmlContent = '';
614
+
615
+ // Título do artigo
616
+ htmlContent += `<h1 class="article-title">Título do Artigo Científico: Análise de Dados em Pesquisa Qualitativa</h1>`;
617
+
618
+ // Autores
619
+ if (includeAuthors) {
620
+ htmlContent += `<div class="article-author">
621
+ <p>Autor Principal<sup>1</sup>, Coautor<sup>2</sup>, Terceiro Autor<sup>1</sup></p>
622
+ <p><sup>1</sup>Universidade Exemplo, <sup>2</sup>Instituto de Pesquisa</p>
623
+ </div>`;
624
+ }
625
+
626
+ // Resumo
627
+ if (includeAbstract) {
628
+ htmlContent += `<div class="article-abstract">
629
+ <h3>Resumo</h3>
630
+ <p>Este artigo apresenta uma análise detalhada sobre métodos de pesquisa qualitativa aplicados em estudos científicos. A metodologia utilizada baseia-se em revisão sistemática da literatura e estudo de caso. Os resultados demonstram a eficácia das abordagens qualitativas em contextos complexos.</p>
631
+ </div>`;
632
+ }
633
+
634
+ // Palavras-chave
635
+ if (includeKeywords) {
636
+ htmlContent += `<div class="article-keywords">
637
+ <h3>Palavras-chave</h3>
638
+ <div>
639
+ <span class="keyword-tag">pesquisa qualitativa</span>
640
+ <span class="keyword-tag">análise de dados</span>
641
+ <span class="keyword-tag">metodologia científica</span>
642
+ </div>
643
+ </div>`;
644
+ }
645
+
646
+ // Corpo do artigo
647
+ htmlContent += `<div class="article-body">
648
+ <h2>1. Introdução</h2>
649
+ <p>A pesquisa qualitativa tem se mostrado fundamental para a compreensão de fenômenos sociais complexos. Este estudo visa explorar as principais técnicas e ferramentas utilizadas nesse tipo de investigação.</p>
650
+
651
+ <h2>2. Metodologia</h2>
652
+ <p>Utilizamos uma abordagem mista, combinando análise documental com entrevistas semiestruturadas. A amostra foi composta por 15 participantes selecionados por critérios específicos.</p>`;
653
+
654
+ // Tabela simulada
655
+ if (convertTables) {
656
+ htmlContent += `<table style="width: 100%; border-collapse: collapse; margin: 1rem 0;">
657
+ <thead>
658
+ <tr style="background: #f8f9fa;">
659
+ <th style="border: 1px solid #ddd; padding: 0.75rem;">Variável</th>
660
+ <th style="border: 1px solid #ddd; padding: 0.75rem;">Descrição</th>
661
+ <th style="border: 1px solid #ddd; padding: 0.75rem;">Valor</th>
662
+ </tr>
663
+ </thead>
664
+ <tbody>
665
+ <tr>
666
+ <td style="border: 1px solid #ddd; padding: 0.75rem;">Tamanho da amostra</td>
667
+ <td style="border: 1px solid #ddd; padding: 0.75rem;">Número de participantes</td>
668
+ <td style="border: 1px solid #ddd; padding: 0.75rem;">15</td>
669
+ </tr>
670
+ <tr>
671
+ <td style="border: 1px solid #ddd; padding: 0.75rem;">Período</td>
672
+ <td style="border: 1px solid #ddd; padding: 0.75rem;">Duração do estudo</td>
673
+ <td style="border: 1px solid #ddd; padding: 0.75rem;">6 meses</td>
674
+ </tr>
675
+ </tbody>
676
+ </table>`;
677
+ }
678
+
679
+ htmlContent += `<h2>3. Resultados e Discussão</h2>
680
+ <p>Os resultados indicam uma forte correlação entre as variáveis analisadas. A discussão aprofunda as implicações práticas desses achados.</p>
681
+
682
+ <h2>4. Conclusão</h2>
683
+ <p>Concluímos que a abordagem qualitativa oferece insights valiosos para a compreensão de fenômenos complexos.</p>
684
+ </div>`;
685
+
686
+ // Referências
687
+ htmlContent += `<div class="references">
688
+ <h2>Referências</h2>
689
+ <p>SOBRENOME, A. B. <em>Título do livro</em>. Editora, 2023.</p>
690
+ </div>`;
691
+
692
+ previewContent.innerHTML = htmlContent;
693
+ }
694
+
695
+ // Evento de reset
696
+ resetBtn.addEventListener('click', resetConverter);
697
+
698
+ function resetConverter() {
699
+ fileInput.value = '';
700
+ currentFile = null;
701
+ fileInfo.classList.remove('show');
702
+ convertBtn.disabled = true;
703
+ previewSection.classList.remove('show');
704
+ loading.classList.remove('show');
705
+ }
706
+
707
+ // Evento de download
708
+ downloadBtn.addEventListener('click', downloadHTML);
709
+
710
+ function downloadHTML() {
711
+ const htmlContent = `<!DOCTYPE html>
712
+ <html lang="pt-BR">
713
+ <head>
714
+ <meta charset="UTF-8">
715
+ <meta name="viewport" content="width=device-width, initial-scale=1.0">
716
+ <title>Artigo Científico - AmeliCA Redalyc</title>
717
+ <style>
718
+ body {
719
+ font-family: 'Times New Roman', serif;
720
+ line-height: 1.8;
721
+ max-width: 800px;
722
+ margin: 0 auto;
723
+ padding: 2rem;
724
+ }
725
+ .article-title {
726
+ text-align: center;
727
+ font-size: 1.8rem;
728
+ margin-bottom: 1rem;
729
+ }
730
+ .article-author {
731
+ text-align: center;
732
+ font-style: italic;
733
+ margin-bottom: 2rem;
734
+ }
735
+ .article-abstract {
736
+ background: #f8f9fa;
737
+ padding: 1.5rem;
738
+ border-radius: 6px;
739
+ margin-bottom: 2rem;
740
+ }
741
+ .keyword-tag {
742
+ display: inline-block;
743
+ background: #3498db;
744
+ color: white;
745
+ padding: 0.3rem 0.8rem;
746
+ border-radius: 20px;
747
+ margin: 0.2rem;
748
+ font-size: 0.9rem;
749
+ }
750
+ </style>
751
+ </head>
752
+ <body>
753
+ ${previewContent.innerHTML}
754
+ </body>
755
+ </html>`;
756
+
757
+ const blob = new Blob([htmlContent], { type: 'text/html' });
758
+ const url = URL.createObjectURL(blob);
759
+ const a = document.createElement('a');
760
+ a.href = url;
761
+ a.download = 'artigo_cientifico_amelica_redalyc.html';
762
+ document.body.appendChild(a);
763
+ a.click();
764
+ document.body.removeChild(a);
765
+ URL.revokeObjectURL(url);
766
+ }
767
+ });
768
+ </script>
769
+ </body>
770
+ </html>