Hugging Face's logo

Spaces:
tufonoayuda
/
GeneratorActivitySLPdeepseek
Runtime error

App Files Community
tufonoayuda commited on
Commit
a78a1d2
·
verified ·
1 Parent(s): 2fbf702

Create script.js

Browse files
Files changed (1) hide show
  1. script.js +306 -0
script.js ADDED
@@ -0,0 +1,306 @@
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
1
+ <!DOCTYPE html>
2
+ <html lang="es">
3
+ <head>
4
+ <meta charset="UTF-8">
5
+ <meta name="viewport" content="width=device-width, initial-scale=1.0">
6
+ <title>Generador de Actividades Fonoaudiológicas</title>
7
+ <link href="https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700&display=swap" rel="stylesheet">
8
+ <style>
9
+ :root {
10
+ --primary: #4f46e5;
11
+ --primary-hover: #4338ca;
12
+ --secondary: #10b981;
13
+ --dark: #1f2937;
14
+ --light: #f9fafb;
15
+ --gray: #6b7280;
16
+ --gray-light: #e5e7eb;
17
+ --danger: #ef4444;
18
+ --success: #10b981;
19
+ --border-radius: 12px;
20
+ --shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06);
21
+ --transition: all 0.3s ease;
22
+ }
23
+
24
+ * {
25
+ margin: 0;
26
+ padding: 0;
27
+ box-sizing: border-box;
28
+ }
29
+
30
+ body {
31
+ font-family: 'Inter', sans-serif;
32
+ background-color: #f3f4f6;
33
+ color: var(--dark);
34
+ line-height: 1.6;
35
+ }
36
+
37
+ .container {
38
+ max-width: 1200px;
39
+ margin: 0 auto;
40
+ padding: 20px;
41
+ }
42
+
43
+ header {
44
+ text-align: center;
45
+ margin-bottom: 40px;
46
+ padding: 20px 0;
47
+ }
48
+
49
+ header h1 {
50
+ font-size: 2.5rem;
51
+ color: var(--primary);
52
+ margin-bottom: 10px;
53
+ }
54
+
55
+ header p {
56
+ color: var(--gray);
57
+ font-size: 1.1rem;
58
+ }
59
+
60
+ .card {
61
+ background: white;
62
+ border-radius: var(--border-radius);
63
+ box-shadow: var(--shadow);
64
+ padding: 25px;
65
+ margin-bottom: 25px;
66
+ transition: var(--transition);
67
+ }
68
+
69
+ .card:hover {
70
+ box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -2px rgba(0, 0, 0, 0.05);
71
+ }
72
+
73
+ .card-title {
74
+ font-size: 1.25rem;
75
+ font-weight: 600;
76
+ margin-bottom: 20px;
77
+ color: var(--dark);
78
+ display: flex;
79
+ align-items: center;
80
+ gap: 10px;
81
+ }
82
+
83
+ .form-group {
84
+ margin-bottom: 20px;
85
+ }
86
+
87
+ label {
88
+ display: block;
89
+ margin-bottom: 8px;
90
+ font-weight: 500;
91
+ color: var(--dark);
92
+ }
93
+
94
+ input, select, textarea {
95
+ width: 100%;
96
+ padding: 12px 15px;
97
+ border: 1px solid var(--gray-light);
98
+ border-radius: var(--border-radius);
99
+ font-family: 'Inter', sans-serif;
100
+ font-size: 1rem;
101
+ transition: var(--transition);
102
+ }
103
+
104
+ input:focus, select:focus, textarea:focus {
105
+ outline: none;
106
+ border-color: var(--primary);
107
+ box-shadow: 0 0 0 3px rgba(79, 70, 229, 0.2);
108
+ }
109
+
110
+ textarea {
111
+ min-height: 120px;
112
+ resize: vertical;
113
+ }
114
+
115
+ .checkbox-group {
116
+ display: flex;
117
+ align-items: center;
118
+ gap: 10px;
119
+ margin-bottom: 20px;
120
+ }
121
+
122
+ .checkbox-group input[type="checkbox"] {
123
+ width: auto;
124
+ transform: scale(1.2);
125
+ }
126
+
127
+ .btn {
128
+ display: inline-flex;
129
+ align-items: center;
130
+ justify-content: center;
131
+ gap: 8px;
132
+ padding: 12px 24px;
133
+ background-color: var(--primary);
134
+ color: white;
135
+ border: none;
136
+ border-radius: var(--border-radius);
137
+ font-size: 1rem;
138
+ font-weight: 500;
139
+ cursor: pointer;
140
+ transition: var(--transition);
141
+ }
142
+
143
+ .btn:hover {
144
+ background-color: var(--primary-hover);
145
+ transform: translateY(-2px);
146
+ }
147
+
148
+ .btn-secondary {
149
+ background-color: white;
150
+ color: var(--primary);
151
+ border: 1px solid var(--gray-light);
152
+ }
153
+
154
+ .btn-secondary:hover {
155
+ background-color: #f9fafb;
156
+ color: var(--primary-hover);
157
+ }
158
+
159
+ .btn-success {
160
+ background-color: var(--success);
161
+ }
162
+
163
+ .btn-success:hover {
164
+ background-color: #0da271;
165
+ }
166
+
167
+ .btn:disabled {
168
+ opacity: 0.7;
169
+ cursor: not-allowed;
170
+ transform: none;
171
+ }
172
+
173
+ .advanced-toggle {
174
+ display: flex;
175
+ align-items: center;
176
+ gap: 10px;
177
+ margin-bottom: 20px;
178
+ cursor: pointer;
179
+ user-select: none;
180
+ }
181
+
182
+ .advanced-section {
183
+ overflow: hidden;
184
+ transition: max-height 0.3s ease;
185
+ }
186
+
187
+ .hidden {
188
+ max-height: 0;
189
+ overflow: hidden;
190
+ }
191
+
192
+ .upload-section {
193
+ margin-bottom: 20px;
194
+ }
195
+
196
+ .drop-zone {
197
+ border: 2px dashed var(--gray-light);
198
+ border-radius: var(--border-radius);
199
+ padding: 30px;
200
+ text-align: center;
201
+ transition: var(--transition);
202
+ margin-bottom: 20px;
203
+ }
204
+
205
+ .drop-zone.highlight {
206
+ border-color: var(--primary);
207
+ background-color: rgba(79, 70, 229, 0.05);
208
+ }
209
+
210
+ .drop-zone p {
211
+ margin-bottom: 15px;
212
+ color: var(--gray);
213
+ }
214
+
215
+ .file-list {
216
+ margin-top: 20px;
217
+ }
218
+
219
+ .file-item {
220
+ display: flex;
221
+ align-items: center;
222
+ justify-content: space-between;
223
+ padding: 12px 15px;
224
+ background-color: #f9fafb;
225
+ border-radius: var(--border-radius);
226
+ margin-bottom: 10px;
227
+ }
228
+
229
+ .file-item div {
230
+ display: flex;
231
+ align-items: center;
232
+ gap: 10px;
233
+ }
234
+
235
+ .remove-file {
236
+ background: none;
237
+ border: none;
238
+ color: var(--danger);
239
+ font-size: 1.2rem;
240
+ cursor: pointer;
241
+ padding: 0 5px;
242
+ }
243
+
244
+ .action-buttons {
245
+ display: flex;
246
+ gap: 15px;
247
+ margin-top: 30px;
248
+ }
249
+
250
+ .result-container {
251
+ display: none;
252
+ }
253
+
254
+ .result-content {
255
+ line-height: 1.8;
256
+ }
257
+
258
+ .result-content h3 {
259
+ margin: 25px 0 15px;
260
+ color: var(--primary);
261
+ font-weight: 600;
262
+ }
263
+
264
+ .result-content ul {
265
+ padding-left: 25px;
266
+ margin-bottom: 20px;
267
+ }
268
+
269
+ .result-content .step {
270
+ background: #f8f9fa;
271
+ padding: 15px;
272
+ border-radius: var(--border-radius);
273
+ margin-bottom: 15px;
274
+ }
275
+
276
+ .loading {
277
+ text-align: center;
278
+ padding: 40px 0;
279
+ }
280
+
281
+ .spinner {
282
+ width: 50px;
283
+ height: 50px;
284
+ border: 5px solid rgba(79, 70, 229, 0.2);
285
+ border-radius: 50%;
286
+ border-top-color: var(--primary);
287
+ animation: spin 1s ease-in-out infinite;
288
+ margin: 0 auto 20px;
289
+ }
290
+
291
+ @keyframes spin {
292
+ to { transform: rotate(360deg); }
293
+ }
294
+
295
+ .error-message {
296
+ background-color: #fee2e2;
297
+ color: var(--danger);
298
+ padding: 15px;
299
+ border-radius: var(--border-radius);
300
+ margin-bottom: 20px;
301
+ display: none;
302
+ }
303
+
304
+ .success-message {
305
+ background-color: #d1fae5;
306
+ color: