Hugging Face's logo

Spaces:
leonard363
/
anycoder-231eb133
Running

App Files Community
leonard363 commited on
Commit
cb6019e
·
verified ·
1 Parent(s): 14bbb1d

Upload folder using huggingface_hub

Browse files
Files changed (1) hide show
  1. index.html +935 -19
index.html CHANGED
@@ -1,19 +1,935 @@
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
+ /* Estilos para o artigo semântico */
353
+ .semantic-article {
354
+ font-family: 'Times New Roman', serif;
355
+ line-height: 1.8;
356
+ color: #333;
357
+ }
358
+
359
+ .article-header {
360
+ text-align: center;
361
+ margin-bottom: 2rem;
362
+ border-bottom: 1px solid #ddd;
363
+ padding-bottom: 1rem;
364
+ }
365
+
366
+ .article-meta {
367
+ font-size: 0.9rem;
368
+ color: #666;
369
+ margin-top: 0.5rem;
370
+ }
371
+
372
+ .article-section {
373
+ margin-bottom: 2rem;
374
+ }
375
+
376
+ .article-section h2 {
377
+ border-bottom: 1px solid #eee;
378
+ padding-bottom: 0.5rem;
379
+ margin-bottom: 1rem;
380
+ }
381
+
382
+ .article-section h3 {
383
+ margin: 1.5rem 0 0.5rem 0;
384
+ }
385
+
386
+ .article-figure {
387
+ margin: 1.5rem 0;
388
+ text-align: center;
389
+ }
390
+
391
+ .article-figure img {
392
+ max-width: 100%;
393
+ height: auto;
394
+ }
395
+
396
+ .article-figure figcaption {
397
+ font-size: 0.9rem;
398
+ font-style: italic;
399
+ margin-top: 0.5rem;
400
+ color: #666;
401
+ }
402
+
403
+ .article-table {
404
+ width: 100%;
405
+ border-collapse: collapse;
406
+ margin: 1.5rem 0;
407
+ }
408
+
409
+ .article-table th,
410
+ .article-table td {
411
+ border: 1px solid #ddd;
412
+ padding: 0.75rem;
413
+ text-align: left;
414
+ }
415
+
416
+ .article-table thead {
417
+ background-color: #f8f9fa;
418
+ }
419
+
420
+ .article-table caption {
421
+ font-weight: bold;
422
+ margin-bottom: 0.5rem;
423
+ }
424
+
425
+ .article-reference {
426
+ margin-left: 2rem;
427
+ text-indent: -2rem;
428
+ margin-bottom: 0.5rem;
429
+ font-size: 0.95rem;
430
+ line-height: 1.4;
431
+ }
432
+
433
+ .article-citation {
434
+ font-style: italic;
435
+ }
436
+
437
+ @media (max-width: 768px) {
438
+ .header-content {
439
+ flex-direction: column;
440
+ gap: 1rem;
441
+ text-align: center;
442
+ }
443
+
444
+ .options-grid {
445
+ grid-template-columns: 1fr;
446
+ }
447
+
448
+ .actions {
449
+ flex-direction: column;
450
+ }
451
+
452
+ .btn {
453
+ width: 100%;
454
+ justify-content: center;
455
+ }
456
+
457
+ .card-body {
458
+ padding: 1.5rem;
459
+ }
460
+ }
461
+
462
+ @media (max-width: 480px) {
463
+ .container {
464
+ padding: 0 1rem;
465
+ }
466
+
467
+ .upload-area {
468
+ padding: 2rem 1rem;
469
+ }
470
+ }
471
+ </style>
472
+ </head>
473
+ <body>
474
+ <header class="header">
475
+ <div class="container">
476
+ <div class="header-content">
477
+ <div class="logo">
478
+ <div class="logo-icon">📄</div>
479
+ <h1>Conversor Word para HTML - AmeliCA Redalyc</h1>
480
+ </div>
481
+ <a href="https://huggingface.co/spaces/akhaliq/anycoder" class="built-with" target="_blank">
482
+ Built with anycoder
483
+ </a>
484
+ </div>
485
+ </div>
486
+ </header>
487
+
488
+ <main class="main-content">
489
+ <div class="container">
490
+ <div class="converter-card">
491
+ <div class="card-header">
492
+ <h2>Conversor de Artigo Científico</h2>
493
+ <p>Converta seu arquivo Word para HTML UTF-8 compatível com a plataforma AmeliCA Redalyc</p>
494
+ </div>
495
+
496
+ <div class="card-body">
497
+ <div class="upload-area" id="uploadArea">
498
+ <div class="upload-icon">📤</div>
499
+ <h3>Arraste e solte seu arquivo Word aqui</h3>
500
+ <p>ou clique para selecionar o arquivo</p>
501
+ <p style="font-size: 0.9rem; margin-top: 0.5rem; opacity: 0.8;">
502
+ Formatos suportados: .doc, .docx
503
+ </p>
504
+ <input type="file" id="fileInput" class="file-input" accept=".doc,.docx">
505
+ </div>
506
+
507
+ <div class="file-info" id="fileInfo">
508
+ <strong>Arquivo selecionado:</strong>
509
+ <span id="fileName"></span>
510
+ (<span id="fileSize"></span>)
511
+ </div>
512
+
513
+ <div class="conversion-options">
514
+ <h3>Opções de Conversão</h3>
515
+ <div class="options-grid">
516
+ <div class="option-group">
517
+ <h4>Metadados</h4>
518
+ <div class="checkbox-group">
519
+ <label class="checkbox-item">
520
+ <input type="checkbox" id="includeAbstract" checked>
521
+ Incluir resumo
522
+ </label>
523
+ <label class="checkbox-item">
524
+ <input type="checkbox" id="includeKeywords" checked>
525
+ Incluir palavras-chave
526
+ </label>
527
+ <label class="checkbox-item">
528
+ <input type="checkbox" id="includeAuthors" checked>
529
+ Incluir informações dos autores
530
+ </label>
531
+ </div>
532
+ </div>
533
+
534
+ <div class="option-group">
535
+ <h4>Formatação</h4>
536
+ <div class="checkbox-group">
537
+ <label class="checkbox-item">
538
+ <input type="checkbox" id="preserveFormatting" checked>
539
+ Preservar formatação original
540
+ </label>
541
+ <label class="checkbox-item">
542
+ <input type="checkbox" id="convertTables" checked>
543
+ Converter tabelas para HTML
544
+ </label>
545
+ <label class="checkbox-item">
546
+ <input type="checkbox" id="convertImages" checked>
547
+ Converter imagens para base64
548
+ </label>
549
+ </div>
550
+ </div>
551
+ </div>
552
+ </div>
553
+
554
+ <div class="actions">
555
+ <button class="btn btn-primary" id="convertBtn" disabled>
556
+ <span>🔄</span> Converter para HTML
557
+ </button>
558
+ <button class="btn btn-secondary" id="resetBtn">
559
+ <span>🗑️</span> Limpar
560
+ </button>
561
+ </div>
562
+
563
+ <div class="loading" id="loading">
564
+ <div class="spinner"></div>
565
+ <p>Convertendo arquivo... Aguarde</p>
566
+ </div>
567
+
568
+ <div class="preview-section" id="previewSection">
569
+ <div class="preview-header">
570
+ <h3>Prévia do HTML Semântico Gerado</h3>
571
+ <p style="font-size: 0.9rem; color: #666;">(Estrutura semântica com elementos HTML5 apropriados)</p>
572
+ </div>
573
+ <div class="preview-content" id="previewContent">
574
+ <!-- Conteúdo HTML será inserido aqui -->
575
+ </div>
576
+ <div class="download-section">
577
+ <button class="btn btn-success" id="downloadBtn">
578
+ <span>💾</span> Baixar HTML
579
+ </button>
580
+ </div>
581
+ </div>
582
+ </div>
583
+ </div>
584
+ </div>
585
+ </main>
586
+
587
+ <footer class="footer">
588
+ <div class="container">
589
+ <p>&copy; 2024 Conversor AmeliCA Redalyc. Desenvolvido para a comunidade científica.</p>
590
+ </div>
591
+ </footer>
592
+
593
+ <script>
594
+ document.addEventListener('DOMContentLoaded', function() {
595
+ const uploadArea = document.getElementById('uploadArea');
596
+ const fileInput = document.getElementById('fileInput');
597
+ const fileInfo = document.getElementById('fileInfo');
598
+ const fileName = document.getElementById('fileName');
599
+ const fileSize = document.getElementById('fileSize');
600
+ const convertBtn = document.getElementById('convertBtn');
601
+ const resetBtn = document.getElementById('resetBtn');
602
+ const loading = document.getElementById('loading');
603
+ const previewSection = document.getElementById('previewSection');
604
+ const previewContent = document.getElementById('previewContent');
605
+ const downloadBtn = document.getElementById('downloadBtn');
606
+
607
+ let currentFile = null;
608
+
609
+ // Eventos de drag and drop
610
+ ['dragenter', 'dragover', 'dragleave', 'drop'].forEach(eventName => {
611
+ uploadArea.addEventListener(eventName, preventDefaults, false);
612
+ });
613
+
614
+ function preventDefaults(e) {
615
+ e.preventDefault();
616
+ e.stopPropagation();
617
+ }
618
+
619
+ ['dragenter', 'dragover'].forEach(eventName => {
620
+ uploadArea.addEventListener(eventName, () => {
621
+ uploadArea.classList.add('active');
622
+ }, false);
623
+ });
624
+
625
+ ['dragleave', 'drop'].forEach(eventName => {
626
+ uploadArea.addEventListener(eventName, () => {
627
+ uploadArea.classList.remove('active');
628
+ }, false);
629
+ });
630
+
631
+ uploadArea.addEventListener('drop', handleDrop, false);
632
+ uploadArea.addEventListener('click', () => fileInput.click());
633
+ fileInput.addEventListener('change', handleFileSelect);
634
+
635
+ function handleDrop(e) {
636
+ const dt = e.dataTransfer;
637
+ const files = dt.files;
638
+ handleFiles(files);
639
+ }
640
+
641
+ function handleFileSelect(e) {
642
+ const files = e.target.files;
643
+ handleFiles(files);
644
+ }
645
+
646
+ function handleFiles(files) {
647
+ if (files.length > 0) {
648
+ const file = files[0];
649
+ if (file.type.includes('word') || file.name.endsWith('.doc') || file.name.endsWith('.docx')) {
650
+ currentFile = file;
651
+ updateFileInfo(file);
652
+ convertBtn.disabled = false;
653
+ } else {
654
+ alert('Por favor, selecione um arquivo Word válido (.doc ou .docx)');
655
+ }
656
+ }
657
+ }
658
+
659
+ function updateFileInfo(file) {
660
+ fileName.textContent = file.name;
661
+ fileSize.textContent = formatFileSize(file.size);
662
+ fileInfo.classList.add('show');
663
+ }
664
+
665
+ function formatFileSize(bytes) {
666
+ if (bytes === 0) return '0 Bytes';
667
+ const k = 1024;
668
+ const sizes = ['Bytes', 'KB', 'MB', 'GB'];
669
+ const i = Math.floor(Math.log(bytes) / Math.log(k));
670
+ return parseFloat((bytes / Math.pow(k, i)).toFixed(2)) + ' ' + sizes[i];
671
+ }
672
+
673
+ // Evento de conversão
674
+ convertBtn.addEventListener('click', convertFile);
675
+
676
+ function convertFile() {
677
+ if (!currentFile) return;
678
+
679
+ loading.classList.add('show');
680
+ previewSection.classList.remove('show');
681
+
682
+ // Simulação de conversão (em um ambiente real, isso seria feito no backend)
683
+ setTimeout(() => {
684
+ const includeAbstract = document.getElementById('includeAbstract').checked;
685
+ const includeKeywords = document.getElementById('includeKeywords').checked;
686
+ const includeAuthors = document.getElementById('includeAuthors').checked;
687
+ const preserveFormatting = document.getElementById('preserveFormatting').checked;
688
+ const convertTables = document.getElementById('convertTables').checked;
689
+ const convertImages = document.getElementById('convertImages').checked;
690
+
691
+ generateSemanticHTML(includeAbstract, includeKeywords, includeAuthors, preserveFormatting, convertTables, convertImages);
692
+
693
+ loading.classList.remove('show');
694
+ previewSection.classList.add('show');
695
+ }, 2000);
696
+ }
697
+
698
+ function generateSemanticHTML(includeAbstract, includeKeywords, includeAuthors, preserveFormatting, convertTables, convertImages) {
699
+ let htmlContent = '';
700
+
701
+ // Início do artigo semântico
702
+ htmlContent += `<article class="semantic-article" lang="pt-BR">
703
+ <header class="article-header">
704
+ <h1 class="article-title">Título do Artigo Científico: Análise de Dados em Pesquisa Qualitativa</h1>`;
705
+
706
+ // Autores
707
+ if (includeAuthors) {
708
+ htmlContent += `<div class="article-meta">
709
+ <p>Autor Principal<sup>1</sup>, Coautor<sup>2</sup>, Terceiro Autor<sup>1</sup></p>
710
+ <p><sup>1</sup>Universidade Exemplo, <sup>2</sup>Instituto de Pesquisa</p>
711
+ <p><time datetime="2024-01-15">15 de Janeiro de 2024</time></p>
712
+ </div>`;
713
+ }
714
+
715
+ // Resumo
716
+ if (includeAbstract) {
717
+ htmlContent += `<section class="article-abstract">
718
+ <h2>Resumo</h2>
719
+ <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>
720
+ </section>`;
721
+ }
722
+
723
+ // Palavras-chave
724
+ if (includeKeywords) {
725
+ htmlContent += `<section class="article-keywords">
726
+ <h2>Palavras-chave</h2>
727
+ <div>
728
+ <span class="keyword-tag">pesquisa qualitativa</span>
729
+ <span class="keyword-tag">análise de dados</span>
730
+ <span class="keyword-tag">metodologia científica</span>
731
+ </div>
732
+ </section>`;
733
+ }
734
+
735
+ // Corpo do artigo com estrutura semântica
736
+ htmlContent += `<section class="article-section" id="introducao">
737
+ <h2>1. Introdução</h2>
738
+ <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>
739
+ </section>
740
+
741
+ <section class="article-section" id="metodologia">
742
+ <h2>2. Metodologia</h2>
743
+ <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>`;
744
+
745
+ // Figura simulada
746
+ if (convertImages) {
747
+ htmlContent += `<figure class="article-figure">
748
+ <img src="data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iNDAwIiBoZWlnaHQ9IjIwMCIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj4KICA8cmVjdCB3aWR0aD0iNDAwIiBoZWlnaHQ9IjIwMCIgZmlsbD0iI2YxZjJmNCIvPgogIDx0ZXh0IHg9IjUwJSIgeT0iNTAlIiBkb21pbmFudC1iYXNlbGluZT0ibWlkZGxlIiB0ZXh0LWFuY2hvcj0ibWlkZGxlIiBmb250LWZhbWlseT0iQXJpYWwiIGZvbnQtc2l6ZT0iMTgiIGZpbGw9IiM5OTkiPkdyw6FmaY28gZGUgQW7DoWxpc2UgZGUgRGFkb3M8L3RleHQ+Cjwvc3ZnPg==" alt="Gráfico de análise de dados">
749
+ <figcaption>Figura 1: Gráfico demonstrativo da análise de dados qualitativos</figcaption>
750
+ </figure>`;
751
+ }
752
+
753
+ // Tabela semântica
754
+ if (convertTables) {
755
+ htmlContent += `<table class="article-table" aria-labelledby="tabela1">
756
+ <caption id="tabela1">Tabela 1: Variáveis analisadas no estudo</caption>
757
+ <thead>
758
+ <tr>
759
+ <th scope="col">Variável</th>
760
+ <th scope="col">Descrição</th>
761
+ <th scope="col">Valor</th>
762
+ </tr>
763
+ </thead>
764
+ <tbody>
765
+ <tr>
766
+ <th scope="row">Tamanho da amostra</th>
767
+ <td>Número de participantes</td>
768
+ <td>15</td>
769
+ </tr>
770
+ <tr>
771
+ <th scope="row">Período</th>
772
+ <td>Duração do estudo</td>
773
+ <td>6 meses</td>
774
+ </tr>
775
+ </tbody>
776
+ </table>`;
777
+ }
778
+
779
+ htmlContent += `<section class="article-section" id="resultados">
780
+ <h2>3. Resultados e Discussão</h2>
781
+ <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>
782
+ </section>
783
+
784
+ <section class="article-section" id="conclusao">
785
+ <h2>4. Conclusão</h2>
786
+ <p>Concluímos que a abordagem qualitativa oferece insights valiosos para a compreensão de fenômenos complexos.</p>
787
+ </section>`;
788
+
789
+ // Referências semânticas
790
+ htmlContent += `<footer class="article-footer">
791
+ <h2>Referências</h2>
792
+ <ol>
793
+ <li class="article-reference">SOBRENOME, A. B. <cite>Título do livro</cite>. Editora, 2023.</li>
794
+ <li class="article-reference">OUTRO, C. D. <cite>Título do artigo</cite>. <em>Revista Científica</em>, v. 10, n. 2, p. 45-60, 2022.</li>
795
+ </ol>
796
+ </footer>
797
+ </article>`;
798
+
799
+ previewContent.innerHTML = htmlContent;
800
+ }
801
+
802
+ // Evento de reset
803
+ resetBtn.addEventListener('click', resetConverter);
804
+
805
+ function resetConverter() {
806
+ fileInput.value = '';
807
+ currentFile = null;
808
+ fileInfo.classList.remove('show');
809
+ convertBtn.disabled = true;
810
+ previewSection.classList.remove('show');
811
+ loading.classList.remove('show');
812
+ }
813
+
814
+ // Evento de download
815
+ downloadBtn.addEventListener('click', downloadHTML);
816
+
817
+ function downloadHTML() {
818
+ const htmlContent = `<!DOCTYPE html>
819
+ <html lang="pt-BR">
820
+ <head>
821
+ <meta charset="UTF-8">
822
+ <meta name="viewport" content="width=device-width, initial-scale=1.0">
823
+ <title>Artigo Científico - AmeliCA Redalyc</title>
824
+ <style>
825
+ body {
826
+ font-family: 'Times New Roman', serif;
827
+ line-height: 1.8;
828
+ max-width: 800px;
829
+ margin: 0 auto;
830
+ padding: 2rem;
831
+ }
832
+ .semantic-article {
833
+ font-family: 'Times New Roman', serif;
834
+ line-height: 1.8;
835
+ color: #333;
836
+ }
837
+ .article-header {
838
+ text-align: center;
839
+ margin-bottom: 2rem;
840
+ border-bottom: 1px solid #ddd;
841
+ padding-bottom: 1rem;
842
+ }
843
+ .article-title {
844
+ font-size: 1.8rem;
845
+ text-align: center;
846
+ margin-bottom: 1rem;
847
+ }
848
+ .article-meta {
849
+ font-size: 0.9rem;
850
+ color: #666;
851
+ margin-top: 0.5rem;
852
+ }
853
+ .article-abstract {
854
+ background: #f8f9fa;
855
+ padding: 1.5rem;
856
+ border-radius: 6px;
857
+ margin-bottom: 2rem;
858
+ }
859
+ .article-section {
860
+ margin-bottom: 2rem;
861
+ }
862
+ .article-section h2 {
863
+ border-bottom: 1px solid #eee;
864
+ padding-bottom: 0.5rem;
865
+ margin-bottom: 1rem;
866
+ }
867
+ .article-figure {
868
+ margin: 1.5rem 0;
869
+ text-align: center;
870
+ }
871
+ .article-figure img {
872
+ max-width: 100%;
873
+ height: auto;
874
+ }
875
+ .article-figure figcaption {
876
+ font-size: 0.9rem;
877
+ font-style: italic;
878
+ margin-top: 0.5rem;
879
+ color: #666;
880
+ }
881
+ .article-table {
882
+ width: 100%;
883
+ border-collapse: collapse;
884
+ margin: 1.5rem 0;
885
+ }
886
+ .article-table th,
887
+ .article-table td {
888
+ border: 1px solid #ddd;
889
+ padding: 0.75rem;
890
+ text-align: left;
891
+ }
892
+ .article-table thead {
893
+ background-color: #f8f9fa;
894
+ }
895
+ .article-table caption {
896
+ font-weight: bold;
897
+ margin-bottom: 0.5rem;
898
+ }
899
+ .keyword-tag {
900
+ display: inline-block;
901
+ background: #3498db;
902
+ color: white;
903
+ padding: 0.3rem 0.8rem;
904
+ border-radius: 20px;
905
+ margin: 0.2rem;
906
+ font-size: 0.9rem;
907
+ }
908
+ .article-reference {
909
+ margin-left: 2rem;
910
+ text-indent: -2rem;
911
+ margin-bottom: 0.5rem;
912
+ font-size: 0.95rem;
913
+ line-height: 1.4;
914
+ }
915
+ </style>
916
+ </head>
917
+ <body>
918
+ ${previewContent.innerHTML}
919
+ </body>
920
+ </html>`;
921
+
922
+ const blob = new Blob([htmlContent], { type: 'text/html' });
923
+ const url = URL.createObjectURL(blob);
924
+ const a = document.createElement('a');
925
+ a.href = url;
926
+ a.download = 'artigo_cientifico_amelica_redalyc.html';
927
+ document.body.appendChild(a);
928
+ a.click();
929
+ document.body.removeChild(a);
930
+ URL.revokeObjectURL(url);
931
+ }
932
+ });
933
+ </script>
934
+ </body>
935
+ </html>