Hugging Face's logo

Spaces:
victorafarias
/
oraculo
Sleeping

App Files Community
victorafarias commited on
Commit
5d1ea87
·
1 Parent(s): 6d1db38

Melhorias no metodo Atomico

Browse files
Files changed (2) hide show
  1. static/style.css +19 -0
  2. templates/index.html +66 -32
static/style.css CHANGED
@@ -409,3 +409,22 @@ textarea.drag-over {
409
  width: 90%;
410
  }
411
  }
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
409
  width: 90%;
410
  }
411
  }
412
+
413
+ .results-wrapper {
414
+ display: flex;
415
+ flex-direction: column; /* Faz com que os elementos fiquem um abaixo do outro */
416
+ gap: 20px;
417
+ }
418
+
419
+ .results-container {
420
+ display: none;
421
+ flex-direction: row; /* As 3 colunas ficam lado a lado */
422
+ gap: 10px;
423
+ margin-bottom: 0;
424
+ }
425
+
426
+ #final-result-container {
427
+ display: none;
428
+ width: 100%; /* Ocupa toda a largura */
429
+ margin-top: 20px;
430
+ }
templates/index.html CHANGED
@@ -24,6 +24,34 @@
24
  background-color: #5a6268;
25
  cursor: not-allowed;
26
  }
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
27
  </style>
28
  </head>
29
  <body>
@@ -75,48 +103,54 @@ Use o botão `Converter para MD` para ver a mágica.</textarea>
75
  <button type="submit">Simular Resposta</button>
76
  </form>
77
  </div>
78
- <div id="results-container" class="results-container" style="display: none;">
79
- <div class="result-column">
80
- <div class="column-header">
81
- <h2>GROK</h2>
82
- <div>
83
- <button class="copy-btn" onclick="copyToClipboard('grok-output')">Copiar</button>
84
- <button class="convert-btn" onclick="convertToMarkdown('grok-output')">Converter para MD</button>
 
 
 
 
 
85
  </div>
 
86
  </div>
87
- <div class="output-box" id="grok-output"></div>
88
- </div>
89
- <div class="result-column">
90
- <div class="column-header">
91
- <h2>Claude Sonnet</h2>
92
- <div>
93
- <button class="copy-btn" onclick="copyToClipboard('sonnet-output')">Copiar</button>
94
- <button class="convert-btn" onclick="convertToMarkdown('sonnet-output')">Converter para MD</button>
95
  </div>
 
96
  </div>
97
- <div class="output-box" id="sonnet-output"></div>
98
- </div>
99
- <div class="result-column">
100
  <div class="result-column">
101
- <div class="column-header">
102
- <h2>Gemini</h2>
103
- <div>
104
- <button class="copy-btn" onclick="copyToClipboard('gemini-output')">Copiar</button>
105
- <button class="convert-btn" onclick="convertToMarkdown('gemini-output')">Converter para MD</button>
 
106
  </div>
 
107
  </div>
108
- <div class="output-box" id="gemini-output"></div>
109
  </div>
110
- </div>
111
- <div id="final-result-container" style="display: none;">
112
- <div class="column-header" style="border-radius: 8px 8px 0 0; background-color: #e9ecef;">
113
- <h2 id="final-result-title">Texto Final</h2>
114
- <div>
115
- <button class="copy-btn" onclick="copyToClipboard('final-output')">Copiar</button>
116
- <button class="convert-btn" onclick="convertToMarkdown('final-output')">Converter para MD</button>
 
 
117
  </div>
 
118
  </div>
119
- <div class="output-box" id="final-output" style="background-color: #fafafa; border: 1px solid #e0e0e0; border-top: none; border-radius: 0 0 8px 8px;"></div>
120
  </div>
121
  </div>
122
  <script>
 
24
  background-color: #5a6268;
25
  cursor: not-allowed;
26
  }
27
+
28
+ /* Estilos para garantir que o texto final fique abaixo das 3 colunas */
29
+ .results-wrapper {
30
+ display: flex;
31
+ flex-direction: column;
32
+ gap: 20px;
33
+ }
34
+
35
+ .results-container {
36
+ display: none; /* Será alterado via JavaScript */
37
+ flex-direction: row;
38
+ gap: 10px;
39
+ margin-bottom: 0;
40
+ }
41
+
42
+ #final-result-container {
43
+ display: none; /* Será alterado via JavaScript */
44
+ width: 100%;
45
+ margin-top: 20px;
46
+ }
47
+
48
+ /* Garantir que as 3 colunas principais mantenham o layout original */
49
+ .results-container .result-column {
50
+ flex: 1;
51
+ min-width: 0;
52
+ }
53
+
54
+
55
  </style>
56
  </head>
57
  <body>
 
103
  <button type="submit">Simular Resposta</button>
104
  </form>
105
  </div>
106
+
107
+ <!-- WRAPPER PRINCIPAL PARA OS RESULTADOS -->
108
+ <div class="results-wrapper">
109
+ <!-- AS 3 COLUNAS PRINCIPAIS -->
110
+ <div id="results-container" class="results-container">
111
+ <div class="result-column">
112
+ <div class="column-header">
113
+ <h2>GROK</h2>
114
+ <div>
115
+ <button class="copy-btn" onclick="copyToClipboard('grok-output')">Copiar</button>
116
+ <button class="convert-btn" onclick="convertToMarkdown('grok-output')">Converter para MD</button>
117
+ </div>
118
  </div>
119
+ <div class="output-box" id="grok-output"></div>
120
  </div>
121
+ <div class="result-column">
122
+ <div class="column-header">
123
+ <h2>Claude Sonnet</h2>
124
+ <div>
125
+ <button class="copy-btn" onclick="copyToClipboard('sonnet-output')">Copiar</button>
126
+ <button class="convert-btn" onclick="convertToMarkdown('sonnet-output')">Converter para MD</button>
127
+ </div>
 
128
  </div>
129
+ <div class="output-box" id="sonnet-output"></div>
130
  </div>
 
 
 
131
  <div class="result-column">
132
+ <div class="column-header">
133
+ <h2>Gemini</h2>
134
+ <div>
135
+ <button class="copy-btn" onclick="copyToClipboard('gemini-output')">Copiar</button>
136
+ <button class="convert-btn" onclick="convertToMarkdown('gemini-output')">Converter para MD</button>
137
+ </div>
138
  </div>
139
+ <div class="output-box" id="gemini-output"></div>
140
  </div>
 
141
  </div>
142
+
143
+ <!-- TEXTO FINAL ABAIXO DAS 3 COLUNAS -->
144
+ <div id="final-result-container">
145
+ <div class="column-header" style="border-radius: 8px 8px 0 0; background-color: #e9ecef;">
146
+ <h2 id="final-result-title">Texto Final</h2>
147
+ <div>
148
+ <button class="copy-btn" onclick="copyToClipboard('final-output')">Copiar</button>
149
+ <button class="convert-btn" onclick="convertToMarkdown('final-output')">Converter para MD</button>
150
+ </div>
151
  </div>
152
+ <div class="output-box" id="final-output" style="background-color: #fafafa; border: 1px solid #e0e0e0; border-top: none; border-radius: 0 0 8px 8px;"></div>
153
  </div>
 
154
  </div>
155
  </div>
156
  <script>