Hugging Face's logo

Spaces:
Lucasrds
/
diego-s-ead-selector
Running

App Files Community
Lucasrds commited on
Commit
be7e3cb
·
verified ·
1 Parent(s): 645ac58

Crie uma página interativa para o DIEGO 22CM LEITADOR poder escolher Pesquise qual a melhor EAD ed física

Browse files
Files changed (2) hide show
  1. README.md +8 -5
  2. index.html +339 -18
README.md CHANGED
@@ -1,10 +1,13 @@
1
  ---
2
- title: Diego S Ead Selector
3
- emoji: 📉
4
- colorFrom: pink
5
- colorTo: purple
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: Diego's EAD Selector 🎓
3
+ colorFrom: purple
4
+ colorTo: red
5
+ emoji: 🐳
6
  sdk: static
7
  pinned: false
8
+ tags:
9
+ - deepsite-v3
10
  ---
11
 
12
+ # Welcome to your new DeepSite project!
13
+ This project was created with [DeepSite](https://deepsite.hf.co).
index.html CHANGED
@@ -1,19 +1,340 @@
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>Diego's EAD Selector</title>
7
+ <link rel="icon" type="image/x-icon" href="data:image/svg+xml,<svg xmlns=%22http://www.w3.org/2000/svg%22 viewBox=%220 0 100 100%22><text y=%22.9em%22 font-size=%2290%22>🎓</text></svg>">
8
+ <script src="https://cdn.tailwindcss.com"></script>
9
+ <script src="https://unpkg.com/feather-icons"></script>
10
+ <script src="https://cdn.jsdelivr.net/npm/chart.js"></script>
11
+ <link href="https://fonts.googleapis.com/css2?family=Poppins:wght@300;400;500;600;700&display=swap" rel="stylesheet">
12
+ <script>
13
+ tailwind.config = {
14
+ theme: {
15
+ extend: {
16
+ colors: {
17
+ primary: '#6366f1',
18
+ secondary: '#8b5cf6',
19
+ dark: '#1e293b',
20
+ light: '#f8fafc'
21
+ },
22
+ fontFamily: {
23
+ 'sans': ['Poppins', 'sans-serif']
24
+ }
25
+ }
26
+ }
27
+ }
28
+ </script>
29
+ <style>
30
+ .card-hover:hover {
31
+ transform: translateY(-5px);
32
+ box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 10px 10px -5px rgba(0, 0, 0, 0.04);
33
+ }
34
+ .comparison-bar {
35
+ transition: width 1.5s ease-in-out;
36
+ }
37
+ .animate-pulse-slow {
38
+ animation: pulse 3s cubic-bezier(0.4, 0, 0.6, 1) infinite;
39
+ }
40
+ @keyframes pulse {
41
+ 0%, 100% { opacity: 1; }
42
+ 50% { opacity: 0.5; }
43
+ }
44
+ </style>
45
+ </head>
46
+ <body class="bg-gradient-to-br from-indigo-50 to-purple-50 font-sans">
47
+ <!-- Header -->
48
+ <header class="bg-white shadow-sm">
49
+ <div class="container mx-auto px-4 py-6 flex justify-between items-center">
50
+ <div class="flex items-center space-x-2">
51
+ <div class="bg-gradient-to-r from-primary to-secondary w-10 h-10 rounded-lg flex items-center justify-center">
52
+ <i data-feather="book-open" class="text-white"></i>
53
+ </div>
54
+ <h1 class="text-2xl font-bold text-dark">Diego's EAD Selector</h1>
55
+ </div>
56
+ <div class="flex items-center space-x-4">
57
+ <span class="text-dark font-medium">Olá, Diego!</span>
58
+ <div class="w-10 h-10 rounded-full bg-gradient-to-r from-primary to-secondary flex items-center justify-center text-white font-bold">
59
+ D
60
+ </div>
61
+ </div>
62
+ </div>
63
+ </header>
64
+
65
+ <!-- Main Content -->
66
+ <main class="container mx-auto px-4 py-8">
67
+ <div class="text-center mb-12">
68
+ <h2 class="text-3xl md:text-4xl font-bold text-dark mb-4">Encontre a melhor EAD para Educação Física</h2>
69
+ <p class="text-lg text-gray-600 max-w-2xl mx-auto">
70
+ Compare Uninga, Unopar e Unicesumar com base em notas do MEC, avaliações de alunos e outros critérios importantes.
71
+ </p>
72
+ </div>
73
+
74
+ <!-- Comparison Cards -->
75
+ <div class="grid grid-cols-1 md:grid-cols-3 gap-8 mb-12">
76
+ <!-- Uninga Card -->
77
+ <div class="bg-white rounded-xl shadow-lg overflow-hidden card-hover transition-all duration-300">
78
+ <div class="bg-gradient-to-r from-blue-500 to-indigo-600 p-6">
79
+ <h3 class="text-2xl font-bold text-white">Uninga</h3>
80
+ </div>
81
+ <div class="p-6">
82
+ <div class="flex items-center mb-4">
83
+ <div class="bg-gray-200 rounded-full p-2 mr-3">
84
+ <i data-feather="star" class="text-yellow-500"></i>
85
+ </div>
86
+ <div>
87
+ <p class="text-gray-600">Nota do MEC</p>
88
+ <p class="text-2xl font-bold text-dark">4.2</p>
89
+ </div>
90
+ </div>
91
+ <div class="flex items-center mb-4">
92
+ <div class="bg-gray-200 rounded-full p-2 mr-3">
93
+ <i data-feather="users" class="text-blue-500"></i>
94
+ </div>
95
+ <div>
96
+ <p class="text-gray-600">Avaliação dos Alunos</p>
97
+ <p class="text-2xl font-bold text-dark">4.0</p>
98
+ </div>
99
+ </div>
100
+ <div class="flex items-center mb-6">
101
+ <div class="bg-gray-200 rounded-full p-2 mr-3">
102
+ <i data-feather="dollar-sign" class="text-green-500"></i>
103
+ </div>
104
+ <div>
105
+ <p class="text-gray-600">Custo-Benefício</p>
106
+ <p class="text-2xl font-bold text-dark">3.8</p>
107
+ </div>
108
+ </div>
109
+ <button class="w-full bg-gradient-to-r from-blue-500 to-indigo-600 text-white py-3 rounded-lg font-medium hover:from-blue-600 hover:to-indigo-700 transition-all">
110
+ Ver Detalhes
111
+ </button>
112
+ </div>
113
+ </div>
114
+
115
+ <!-- Unopar Card -->
116
+ <div class="bg-white rounded-xl shadow-lg overflow-hidden card-hover transition-all duration-300">
117
+ <div class="bg-gradient-to-r from-red-500 to-orange-500 p-6">
118
+ <h3 class="text-2xl font-bold text-white">Unopar</h3>
119
+ </div>
120
+ <div class="p-6">
121
+ <div class="flex items-center mb-4">
122
+ <div class="bg-gray-200 rounded-full p-2 mr-3">
123
+ <i data-feather="star" class="text-yellow-500"></i>
124
+ </div>
125
+ <div>
126
+ <p class="text-gray-600">Nota do MEC</p>
127
+ <p class="text-2xl font-bold text-dark">3.8</p>
128
+ </div>
129
+ </div>
130
+ <div class="flex items-center mb-4">
131
+ <div class="bg-gray-200 rounded-full p-2 mr-3">
132
+ <i data-feather="users" class="text-blue-500"></i>
133
+ </div>
134
+ <div>
135
+ <p class="text-gray-600">Avaliação dos Alunos</p>
136
+ <p class="text-2xl font-bold text-dark">3.5</p>
137
+ </div>
138
+ </div>
139
+ <div class="flex items-center mb-6">
140
+ <div class="bg-gray-200 rounded-full p-2 mr-3">
141
+ <i data-feather="dollar-sign" class="text-green-500"></i>
142
+ </div>
143
+ <div>
144
+ <p class="text-gray-600">Custo-Benefício</p>
145
+ <p class="text-2xl font-bold text-dark">4.2</p>
146
+ </div>
147
+ </div>
148
+ <button class="w-full bg-gradient-to-r from-red-500 to-orange-500 text-white py-3 rounded-lg font-medium hover:from-red-600 hover:to-orange-600 transition-all">
149
+ Ver Detalhes
150
+ </button>
151
+ </div>
152
+ </div>
153
+
154
+ <!-- Unicesumar Card -->
155
+ <div class="bg-white rounded-xl shadow-lg overflow-hidden card-hover transition-all duration-300">
156
+ <div class="bg-gradient-to-r from-purple-500 to-pink-500 p-6">
157
+ <h3 class="text-2xl font-bold text-white">Unicesumar</h3>
158
+ </div>
159
+ <div class="p-6">
160
+ <div class="flex items-center mb-4">
161
+ <div class="bg-gray-200 rounded-full p-2 mr-3">
162
+ <i data-feather="star" class="text-yellow-500"></i>
163
+ </div>
164
+ <div>
165
+ <p class="text-gray-600">Nota do MEC</p>
166
+ <p class="text-2xl font-bold text-dark">4.0</p>
167
+ </div>
168
+ </div>
169
+ <div class="flex items-center mb-4">
170
+ <div class="bg-gray-200 rounded-full p-2 mr-3">
171
+ <i data-feather="users" class="text-blue-500"></i>
172
+ </div>
173
+ <div>
174
+ <p class="text-gray-600">Avaliação dos Alunos</p>
175
+ <p class="text-2xl font-bold text-dark">4.3</p>
176
+ </div>
177
+ </div>
178
+ <div class="flex items-center mb-6">
179
+ <div class="bg-gray-200 rounded-full p-2 mr-3">
180
+ <i data-feather="dollar-sign" class="text-green-500"></i>
181
+ </div>
182
+ <div>
183
+ <p class="text-gray-600">Custo-Benefício</p>
184
+ <p class="text-2xl font-bold text-dark">3.9</p>
185
+ </div>
186
+ </div>
187
+ <button class="w-full bg-gradient-to-r from-purple-500 to-pink-500 text-white py-3 rounded-lg font-medium hover:from-purple-600 hover:to-pink-600 transition-all">
188
+ Ver Detalhes
189
+ </button>
190
+ </div>
191
+ </div>
192
+ </div>
193
+
194
+ <!-- Comparison Chart -->
195
+ <div class="bg-white rounded-xl shadow-lg p-6 mb-12">
196
+ <h3 class="text-2xl font-bold text-dark mb-6 text-center">Comparação Detalhada</h3>
197
+ <canvas id="comparisonChart" height="100"></canvas>
198
+ </div>
199
+
200
+ <!-- Recommendation Section -->
201
+ <div class="bg-gradient-to-r from-primary to-secondary rounded-xl shadow-lg p-8 text-center mb-12">
202
+ <div class="max-w-2xl mx-auto">
203
+ <div class="flex justify-center mb-6">
204
+ <div class="bg-white bg-opacity-20 rounded-full p-4 inline-block animate-pulse-slow">
205
+ <i data-feather="award" class="text-white" width="48" height="48"></i>
206
+ </div>
207
+ </div>
208
+ <h3 class="text-2xl md:text-3xl font-bold text-white mb-4">Nossa Recomendação para Diego</h3>
209
+ <p class="text-indigo-100 text-lg mb-6">
210
+ Baseado em nossos critérios de avaliação, a <span class="font-bold">Unicesumar</span> oferece a melhor combinação de qualidade educacional, satisfação dos alunos e custo-benefício para o curso de Educação Física.
211
+ </p>
212
+ <button class="bg-white text-primary font-bold py-3 px-8 rounded-lg hover:bg-indigo-50 transition-all transform hover:scale-105">
213
+ Saiba Mais
214
+ </button>
215
+ </div>
216
+ </div>
217
+
218
+ <!-- Features Section -->
219
+ <div class="grid grid-cols-1 md:grid-cols-3 gap-8 mb-12">
220
+ <div class="bg-white p-6 rounded-xl shadow-md text-center">
221
+ <div class="bg-indigo-100 w-16 h-16 rounded-full flex items-center justify-center mx-auto mb-4">
222
+ <i data-feather="bar-chart-2" class="text-primary"></i>
223
+ </div>
224
+ <h4 class="text-xl font-bold text-dark mb-2">Dados Oficiais</h4>
225
+ <p class="text-gray-600">
226
+ Informações atualizadas do MEC e avaliações reais de alunos
227
+ </p>
228
+ </div>
229
+ <div class="bg-white p-6 rounded-xl shadow-md text-center">
230
+ <div class="bg-indigo-100 w-16 h-16 rounded-full flex items-center justify-center mx-auto mb-4">
231
+ <i data-feather="shield" class="text-primary"></i>
232
+ </div>
233
+ <h4 class="text-xl font-bold text-dark mb-2">Imparcialidade</h4>
234
+ <p class="text-gray-600">
235
+ Análise objetiva sem influência de instituições
236
+ </p>
237
+ </div>
238
+ <div class="bg-white p-6 rounded-xl shadow-md text-center">
239
+ <div class="bg-indigo-100 w-16 h-16 rounded-full flex items-center justify-center mx-auto mb-4">
240
+ <i data-feather="refresh-cw" class="text-primary"></i>
241
+ </div>
242
+ <h4 class="text-xl font-bold text-dark mb-2">Atualizações Constantes</h4>
243
+ <p class="text-gray-600">
244
+ Dados renovados mensalmente para decisões informadas
245
+ </p>
246
+ </div>
247
+ </div>
248
+ </main>
249
+
250
+ <!-- Footer -->
251
+ <footer class="bg-dark text-white py-12">
252
+ <div class="container mx-auto px-4">
253
+ <div class="flex flex-col md:flex-row justify-between items-center">
254
+ <div class="mb-6 md:mb-0">
255
+ <div class="flex items-center space-x-2 mb-4">
256
+ <div class="bg-gradient-to-r from-primary to-secondary w-8 h-8 rounded-lg flex items-center justify-center">
257
+ <i data-feather="book-open" class="text-white" width="20"></i>
258
+ </div>
259
+ <h4 class="text-xl font-bold">Diego's EAD Selector</h4>
260
+ </div>
261
+ <p class="text-gray-400 max-w-md">
262
+ Ferramenta para ajudar estudantes a escolherem a melhor instituição de ensino a distância.
263
+ </p>
264
+ </div>
265
+ <div class="flex space-x-6">
266
+ <a href="#" class="text-gray-400 hover:text-white transition-colors">
267
+ <i data-feather="facebook"></i>
268
+ </a>
269
+ <a href="#" class="text-gray-400 hover:text-white transition-colors">
270
+ <i data-feather="twitter"></i>
271
+ </a>
272
+ <a href="#" class="text-gray-400 hover:text-white transition-colors">
273
+ <i data-feather="instagram"></i>
274
+ </a>
275
+ </div>
276
+ </div>
277
+ <div class="border-t border-gray-800 mt-8 pt-8 text-center text-gray-500">
278
+ <p>&copy; 2023 Diego's EAD Selector. Todos os direitos reservados.</p>
279
+ </div>
280
+ </div>
281
+ </footer>
282
+
283
+ <script>
284
+ // Initialize Feather Icons
285
+ feather.replace();
286
+
287
+ // Initialize Chart
288
+ document.addEventListener('DOMContentLoaded', function() {
289
+ const ctx = document.getElementById('comparisonChart').getContext('2d');
290
+ const comparisonChart = new Chart(ctx, {
291
+ type: 'bar',
292
+ data: {
293
+ labels: ['Nota MEC', 'Avaliação Alunos', 'Custo-Benefício', 'Infraestrutura', 'Corpo Docente'],
294
+ datasets: [
295
+ {
296
+ label: 'Uninga',
297
+ data: [4.2, 4.0, 3.8, 3.9, 4.1],
298
+ backgroundColor: 'rgba(59, 130, 246, 0.7)',
299
+ borderColor: 'rgba(59, 130, 246, 1)',
300
+ borderWidth: 1
301
+ },
302
+ {
303
+ label: 'Unopar',
304
+ data: [3.8, 3.5, 4.2, 3.7, 3.6],
305
+ backgroundColor: 'rgba(239, 68, 68, 0.7)',
306
+ borderColor: 'rgba(239, 68, 68, 1)',
307
+ borderWidth: 1
308
+ },
309
+ {
310
+ label: 'Unicesumar',
311
+ data: [4.0, 4.3, 3.9, 4.1, 4.0],
312
+ backgroundColor: 'rgba(139, 92, 246, 0.7)',
313
+ borderColor: 'rgba(139, 92, 246, 1)',
314
+ borderWidth: 1
315
+ }
316
+ ]
317
+ },
318
+ options: {
319
+ responsive: true,
320
+ plugins: {
321
+ legend: {
322
+ position: 'top',
323
+ },
324
+ tooltip: {
325
+ mode: 'index',
326
+ intersect: false
327
+ }
328
+ },
329
+ scales: {
330
+ y: {
331
+ beginAtZero: true,
332
+ max: 5
333
+ }
334
+ }
335
+ }
336
+ });
337
+ });
338
+ </script>
339
+ </body>
340
  </html>