Hugging Face's logo

Spaces:
Luiz74
/
equa-o-2
Running

App Files Community
Luiz74 commited on
Commit
c3d0a7a
·
verified ·
1 Parent(s): 065a37c

resolução da equaçao do segundo grau - Initial Deployment

Browse files
Files changed (2) hide show
  1. README.md +7 -5
  2. index.html +294 -19
README.md CHANGED
@@ -1,10 +1,12 @@
1
  ---
2
- title: Equa O 2
3
- emoji: 🏃
4
- colorFrom: blue
5
- colorTo: yellow
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: equa-o-2
3
+ emoji: 🐳
4
+ colorFrom: gray
5
+ colorTo: red
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,294 @@
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>Calculadora de Equação do 2º Grau</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
+ .math-display {
11
+ font-family: 'Times New Roman', Times, serif;
12
+ font-style: italic;
13
+ }
14
+ .solution-step {
15
+ transition: all 0.3s ease;
16
+ }
17
+ .solution-step:hover {
18
+ transform: translateX(5px);
19
+ background-color: rgba(243, 244, 246, 0.5);
20
+ }
21
+ .input-highlight {
22
+ box-shadow: 0 0 0 2px rgba(59, 130, 246, 0.5);
23
+ }
24
+ </style>
25
+ </head>
26
+ <body class="bg-gradient-to-br from-blue-50 to-indigo-100 min-h-screen">
27
+ <div class="container mx-auto px-4 py-8 max-w-4xl">
28
+ <div class="text-center mb-8">
29
+ <h1 class="text-4xl font-bold text-indigo-800 mb-2">Calculadora de Equação Quadrática</h1>
30
+ <p class="text-lg text-gray-600">Resolva equações do segundo grau no formato ax² + bx + c = 0</p>
31
+ </div>
32
+
33
+ <div class="bg-white rounded-xl shadow-lg overflow-hidden mb-8">
34
+ <div class="p-6">
35
+ <div class="flex flex-col md:flex-row gap-6">
36
+ <div class="flex-1">
37
+ <h2 class="text-2xl font-semibold text-gray-800 mb-4">Insira os coeficientes</h2>
38
+
39
+ <div class="space-y-4">
40
+ <div>
41
+ <label for="a" class="block text-sm font-medium text-gray-700 mb-1">Coeficiente a (x²)</label>
42
+ <div class="relative">
43
+ <input type="number" id="a" class="w-full px-4 py-3 rounded-lg border border-gray-300 focus:outline-none focus:ring-2 focus:ring-indigo-500 input-highlight" placeholder="Ex: 1" step="any">
44
+ <div class="absolute inset-y-0 right-0 flex items-center pr-3 pointer-events-none text-gray-400">
45
+ <span class="math-display">x² +</span>
46
+ </div>
47
+ </div>
48
+ </div>
49
+
50
+ <div>
51
+ <label for="b" class="block text-sm font-medium text-gray-700 mb-1">Coeficiente b (x)</label>
52
+ <div class="relative">
53
+ <input type="number" id="b" class="w-full px-4 py-3 rounded-lg border border-gray-300 focus:outline-none focus:ring-2 focus:ring-indigo-500 input-highlight" placeholder="Ex: 5" step="any">
54
+ <div class="absolute inset-y-0 right-0 flex items-center pr-3 pointer-events-none text-gray-400">
55
+ <span class="math-display">x +</span>
56
+ </div>
57
+ </div>
58
+ </div>
59
+
60
+ <div>
61
+ <label for="c" class="block text-sm font-medium text-gray-700 mb-1">Coeficiente c</label>
62
+ <div class="relative">
63
+ <input type="number" id="c" class="w-full px-4 py-3 rounded-lg border border-gray-300 focus:outline-none focus:ring-2 focus:ring-indigo-500 input-highlight" placeholder="Ex: 6" step="any">
64
+ <div class="absolute inset-y-0 right-0 flex items-center pr-3 pointer-events-none text-gray-400">
65
+ <span class="math-display">= 0</span>
66
+ </div>
67
+ </div>
68
+ </div>
69
+ </div>
70
+
71
+ <div class="mt-6">
72
+ <button onclick="solveEquation()" class="w-full bg-indigo-600 hover:bg-indigo-700 text-white font-medium py-3 px-4 rounded-lg transition duration-300 flex items-center justify-center gap-2">
73
+ <i class="fas fa-calculator"></i>
74
+ Calcular Raízes
75
+ </button>
76
+ </div>
77
+ </div>
78
+
79
+ <div class="flex-1">
80
+ <h2 class="text-2xl font-semibold text-gray-800 mb-4">Sua equação</h2>
81
+ <div class="bg-gray-50 p-4 rounded-lg h-32 flex items-center justify-center">
82
+ <p id="equation-display" class="text-2xl math-display text-center text-gray-700">
83
+ <span class="text-gray-400">ax² + bx + c = 0</span>
84
+ </p>
85
+ </div>
86
+
87
+ <div class="mt-4">
88
+ <div class="flex items-center gap-2 text-sm text-gray-600">
89
+ <i class="fas fa-info-circle text-indigo-500"></i>
90
+ <span>Insira os coeficientes para ver a equação formatada</span>
91
+ </div>
92
+ </div>
93
+ </div>
94
+ </div>
95
+ </div>
96
+ </div>
97
+
98
+ <div id="solution-container" class="bg-white rounded-xl shadow-lg overflow-hidden hidden">
99
+ <div class="p-6">
100
+ <h2 class="text-2xl font-semibold text-gray-800 mb-4 flex items-center gap-2">
101
+ <i class="fas fa-brain text-indigo-600"></i>
102
+ Passo a Passo da Solução
103
+ </h2>
104
+
105
+ <div id="solution-steps" class="space-y-4">
106
+ <!-- Steps will be inserted here by JavaScript -->
107
+ </div>
108
+
109
+ <div class="mt-6 pt-4 border-t border-gray-200">
110
+ <h3 class="text-xl font-medium text-gray-800 mb-2 flex items-center gap-2">
111
+ <i class="fas fa-chart-line text-green-600"></i>
112
+ Resultado Final
113
+ </h3>
114
+ <div id="final-result" class="bg-green-50 p-4 rounded-lg">
115
+ <!-- Final result will be inserted here -->
116
+ </div>
117
+ </div>
118
+ </div>
119
+ </div>
120
+
121
+ <div class="mt-8 bg-indigo-50 rounded-lg p-4 border border-indigo-100">
122
+ <h3 class="text-lg font-medium text-indigo-800 mb-2 flex items-center gap-2">
123
+ <i class="fas fa-lightbulb text-indigo-600"></i>
124
+ Sobre a Fórmula Quadrática
125
+ </h3>
126
+ <p class="text-gray-700 mb-3">
127
+ A fórmula quadrática para resolver equações do segundo grau é:
128
+ </p>
129
+ <div class="bg-white p-3 rounded-md shadow-sm text-center mb-3">
130
+ <p class="text-xl math-display font-medium">
131
+ x = [-b ± √(b² - 4ac)] / (2a)
132
+ </p>
133
+ </div>
134
+ <p class="text-gray-700">
135
+ O discriminante Δ = b² - 4ac determina a natureza das raízes:
136
+ </p>
137
+ <ul class="list-disc pl-5 mt-2 space-y-1 text-gray-700">
138
+ <li>Δ > 0: Duas raízes reais distintas</li>
139
+ <li>Δ = 0: Uma raiz real dupla</li>
140
+ <li>Δ < 0: Duas raízes complexas conjugadas</li>
141
+ </ul>
142
+ </div>
143
+ </div>
144
+
145
+ <script>
146
+ // Update equation display in real-time
147
+ document.querySelectorAll('input').forEach(input => {
148
+ input.addEventListener('input', updateEquationDisplay);
149
+ });
150
+
151
+ function updateEquationDisplay() {
152
+ const a = document.getElementById('a').value || 'a';
153
+ const b = document.getElementById('b').value || 'b';
154
+ const c = document.getElementById('c').value || 'c';
155
+
156
+ // Format the equation with proper signs
157
+ let equation = '';
158
+
159
+ // Handle a term
160
+ if (a === '1') equation += 'x²';
161
+ else if (a === '-1') equation += '-x²';
162
+ else equation += `${a}x²`;
163
+
164
+ // Handle b term
165
+ if (b[0] === '-') {
166
+ equation += ` - ${b.slice(1) === '1' ? '' : b.slice(1)}x`;
167
+ } else {
168
+ equation += ` + ${b === '1' ? '' : b}x`;
169
+ }
170
+
171
+ // Handle c term
172
+ if (c[0] === '-') {
173
+ equation += ` - ${c.slice(1)}`;
174
+ } else {
175
+ equation += ` + ${c}`;
176
+ }
177
+
178
+ equation += ' = 0';
179
+
180
+ // Special case when all are empty
181
+ if (a === 'a' && b === 'b' && c === 'c') equation = 'ax² + bx + c = 0';
182
+
183
+ document.getElementById('equation-display').innerHTML = equation;
184
+ }
185
+
186
+ function solveEquation() {
187
+ const a = parseFloat(document.getElementById('a').value);
188
+ const b = parseFloat(document.getElementById('b').value);
189
+ const c = parseFloat(document.getElementById('c').value);
190
+
191
+ // Validate inputs
192
+ if (isNaN(a) || isNaN(b) || isNaN(c)) {
193
+ alert('Por favor, insira valores válidos para todos os coeficientes.');
194
+ return;
195
+ }
196
+
197
+ if (a === 0) {
198
+ alert('O coeficiente "a" não pode ser zero em uma equação quadrática.');
199
+ return;
200
+ }
201
+
202
+ // Clear previous solution
203
+ document.getElementById('solution-steps').innerHTML = '';
204
+ document.getElementById('final-result').innerHTML = '';
205
+
206
+ // Show solution container
207
+ document.getElementById('solution-container').classList.remove('hidden');
208
+
209
+ // Calculate discriminant
210
+ const discriminant = b * b - 4 * a * c;
211
+
212
+ // Add steps to solution
213
+ addSolutionStep(`1. Identificamos os coeficientes: a = ${a}, b = ${b}, c = ${c}`);
214
+ addSolutionStep(`2. Calculamos o discriminante Δ = b² - 4ac`);
215
+ addSolutionStep(` Δ = (${b})² - 4 × ${a} × ${c} = ${b*b} - ${4*a*c} = ${discriminant}`);
216
+
217
+ if (discriminant > 0) {
218
+ addSolutionStep(`3. Como Δ > 0, a equação tem duas raízes reais distintas`);
219
+ const sqrtDiscriminant = Math.sqrt(discriminant);
220
+ addSolutionStep(`4. Calculamos a raiz quadrada do discriminante: √${discriminant} ≈ ${sqrtDiscriminant.toFixed(4)}`);
221
+
222
+ const x1 = (-b + sqrtDiscriminant) / (2 * a);
223
+ const x2 = (-b - sqrtDiscriminant) / (2 * a);
224
+
225
+ addSolutionStep(`5. Aplicamos a fórmula quadrática:`);
226
+ addSolutionStep(` x = [ -(${b}) ± ${sqrtDiscriminant.toFixed(4)} ] / (2 × ${a})`);
227
+ addSolutionStep(` x₁ = [ ${-b} + ${sqrtDiscriminant.toFixed(4)} ] / ${2*a} ≈ ${x1.toFixed(4)}`);
228
+ addSolutionStep(` x₂ = [ ${-b} - ${sqrtDiscriminant.toFixed(4)} ] / ${2*a} ≈ ${x2.toFixed(4)}`);
229
+
230
+ // Final result
231
+ document.getElementById('final-result').innerHTML = `
232
+ <p class="text-lg font-medium text-gray-800">A equação tem duas raízes reais:</p>
233
+ <div class="mt-2 grid grid-cols-1 md:grid-cols-2 gap-4">
234
+ <div class="bg-blue-50 p-3 rounded-lg">
235
+ <p class="text-sm text-blue-600">Primeira raiz (x₁)</p>
236
+ <p class="text-xl math-display font-bold">${x1.toFixed(4)}</p>
237
+ </div>
238
+ <div class="bg-blue-50 p-3 rounded-lg">
239
+ <p class="text-sm text-blue-600">Segunda raiz (x₂)</p>
240
+ <p class="text-xl math-display font-bold">${x2.toFixed(4)}</p>
241
+ </div>
242
+ </div>
243
+ `;
244
+ }
245
+ else if (discriminant === 0) {
246
+ addSolutionStep(`3. Como Δ = 0, a equação tem uma raiz real dupla`);
247
+ const x = -b / (2 * a);
248
+
249
+ addSolutionStep(`4. Aplicamos a fórmula quadrática simplificada:`);
250
+ addSolutionStep(` x = -b / (2a) = -(${b}) / (2 × ${a}) = ${x.toFixed(4)}`);
251
+
252
+ // Final result
253
+ document.getElementById('final-result').innerHTML = `
254
+ <p class="text-lg font-medium text-gray-800">A equação tem uma raiz real dupla:</p>
255
+ <div class="mt-2 bg-blue-50 p-4 rounded-lg">
256
+ <p class="text-xl math-display font-bold text-center">${x.toFixed(4)}</p>
257
+ </div>
258
+ `;
259
+ }
260
+ else {
261
+ addSolutionStep(`3. Como Δ < 0, a equação não tem raízes reais, mas duas raízes complexas conjugadas`);
262
+ const realPart = -b / (2 * a);
263
+ const imaginaryPart = Math.sqrt(-discriminant) / (2 * a);
264
+
265
+ addSolutionStep(`4. Calculamos as partes real e imaginária:`);
266
+ addSolutionStep(` Parte Real = -b / (2a) = -(${b}) / (2 × ${a}) = ${realPart.toFixed(4)}`);
267
+ addSolutionStep(` Parte Imaginária = √|Δ| / (2a) = √${-discriminant} / ${2*a} ≈ ${imaginaryPart.toFixed(4)}`);
268
+
269
+ // Final result
270
+ document.getElementById('final-result').innerHTML = `
271
+ <p class="text-lg font-medium text-gray-800">A equação tem duas raízes complexas conjugadas:</p>
272
+ <div class="mt-2 grid grid-cols-1 md:grid-cols-2 gap-4">
273
+ <div class="bg-purple-50 p-3 rounded-lg">
274
+ <p class="text-sm text-purple-600">Primeira raiz (x₁)</p>
275
+ <p class="text-xl math-display font-bold">${realPart.toFixed(4)} + ${Math.abs(imaginaryPart).toFixed(4)}i</p>
276
+ </div>
277
+ <div class="bg-purple-50 p-3 rounded-lg">
278
+ <p class="text-sm text-purple-600">Segunda raiz (x₂)</p>
279
+ <p class="text-xl math-display font-bold">${realPart.toFixed(4)} - ${Math.abs(imaginaryPart).toFixed(4)}i</p>
280
+ </div>
281
+ </div>
282
+ `;
283
+ }
284
+ }
285
+
286
+ function addSolutionStep(text) {
287
+ const stepDiv = document.createElement('div');
288
+ stepDiv.className = 'solution-step bg-gray-50 p-3 rounded-lg';
289
+ stepDiv.innerHTML = `<p class="text-gray-800">${text}</p>`;
290
+ document.getElementById('solution-steps').appendChild(stepDiv);
291
+ }
292
+ </script>
293
+ <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=Luiz74/equa-o-2" style="color: #fff;text-decoration: underline;" target="_blank" >Remix</a></p></body>
294
+ </html>