Mishak commited on
Commit
e202a45
·
verified ·
1 Parent(s): c70bbe5

Add 2 files

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: Calculator
3
- emoji: 🌖
4
- colorFrom: yellow
5
- colorTo: red
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: calculator
3
+ emoji: 🐳
4
+ colorFrom: blue
5
+ colorTo: blue
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="en">
3
+ <head>
4
+ <meta charset="UTF-8">
5
+ <meta name="viewport" content="width=device-width, initial-scale=1.0">
6
+ <title>Scientific Calculator</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
+ .calculator {
11
+ box-shadow: 0 10px 30px rgba(0, 0, 0, 0.2);
12
+ transition: all 0.3s ease;
13
+ }
14
+ .calculator:hover {
15
+ box-shadow: 0 15px 35px rgba(0, 0, 0, 0.25);
16
+ }
17
+ .btn {
18
+ transition: all 0.2s ease;
19
+ transform: translateY(0);
20
+ }
21
+ .btn:active {
22
+ transform: translateY(2px);
23
+ }
24
+ .display {
25
+ min-height: 80px;
26
+ word-wrap: break-word;
27
+ word-break: break-all;
28
+ }
29
+ .scientific-btn {
30
+ transition: all 0.3s ease;
31
+ opacity: 0;
32
+ max-height: 0;
33
+ overflow: hidden;
34
+ }
35
+ .show-scientific .scientific-btn {
36
+ opacity: 1;
37
+ max-height: 100px;
38
+ }
39
+ .history-panel {
40
+ transition: all 0.3s ease;
41
+ transform: translateX(100%);
42
+ }
43
+ .show-history .history-panel {
44
+ transform: translateX(0);
45
+ }
46
+ </style>
47
+ </head>
48
+ <body class="bg-gray-100 min-h-screen flex items-center justify-center p-4">
49
+ <div class="calculator bg-gray-800 rounded-2xl p-4 w-full max-w-md relative overflow-hidden">
50
+ <!-- Display Area -->
51
+ <div class="display bg-gray-900 text-right p-4 rounded-lg mb-4 text-white font-mono">
52
+ <div id="history" class="text-gray-400 text-sm min-h-4"></div>
53
+ <div id="current" class="text-3xl font-semibold">0</div>
54
+ </div>
55
+
56
+ <!-- History Toggle -->
57
+ <button id="historyToggle" class="absolute top-4 left-4 text-gray-400 hover:text-white">
58
+ <i class="fas fa-history"></i>
59
+ </button>
60
+
61
+ <!-- History Panel -->
62
+ <div class="history-panel absolute top-0 left-0 w-full h-full bg-gray-700 p-4 z-10 overflow-y-auto">
63
+ <div class="flex justify-between items-center mb-4">
64
+ <h3 class="text-white font-bold">Calculation History</h3>
65
+ <button id="closeHistory" class="text-gray-400 hover:text-white">
66
+ <i class="fas fa-times"></i>
67
+ </button>
68
+ </div>
69
+ <div id="historyList" class="text-gray-300 space-y-2"></div>
70
+ </div>
71
+
72
+ <!-- Mode Toggle -->
73
+ <div class="flex justify-between mb-4">
74
+ <button id="modeToggle" class="bg-blue-600 hover:bg-blue-700 text-white px-3 py-1 rounded-lg text-sm">
75
+ <i class="fas fa-flask"></i> Scientific
76
+ </button>
77
+ <div class="flex space-x-2">
78
+ <button id="clear" class="bg-red-600 hover:bg-red-700 text-white px-3 py-1 rounded-lg text-sm">
79
+ AC
80
+ </button>
81
+ <button id="backspace" class="bg-gray-600 hover:bg-gray-700 text-white px-3 py-1 rounded-lg text-sm">
82
+ <i class="fas fa-backspace"></i>
83
+ </button>
84
+ </div>
85
+ </div>
86
+
87
+ <!-- Calculator Buttons -->
88
+ <div class="grid grid-cols-5 gap-2">
89
+ <!-- Scientific Buttons (First Row) -->
90
+ <button class="scientific-btn btn bg-purple-600 hover:bg-purple-700 text-white p-2 rounded-lg" data-value="sin(">sin</button>
91
+ <button class="scientific-btn btn bg-purple-600 hover:bg-purple-700 text-white p-2 rounded-lg" data-value="cos(">cos</button>
92
+ <button class="scientific-btn btn bg-purple-600 hover:bg-purple-700 text-white p-2 rounded-lg" data-value="tan(">tan</button>
93
+ <button class="scientific-btn btn bg-purple-600 hover:bg-purple-700 text-white p-2 rounded-lg" data-value="log(">log</button>
94
+ <button class="scientific-btn btn bg-purple-600 hover:bg-purple-700 text-white p-2 rounded-lg" data-value="ln(">ln</button>
95
+
96
+ <!-- Scientific Buttons (Second Row) -->
97
+ <button class="scientific-btn btn bg-purple-600 hover:bg-purple-700 text-white p-2 rounded-lg" data-value="asin(">sin⁻¹</button>
98
+ <button class="scientific-btn btn bg-purple-600 hover:bg-purple-700 text-white p-2 rounded-lg" data-value="acos(">cos⁻¹</button>
99
+ <button class="scientific-btn btn bg-purple-600 hover:bg-purple-700 text-white p-2 rounded-lg" data-value="atan(">tan⁻¹</button>
100
+ <button class="scientific-btn btn bg-purple-600 hover:bg-purple-700 text-white p-2 rounded-lg" data-value="√(">√</button>
101
+ <button class="scientific-btn btn bg-purple-600 hover:bg-purple-700 text-white p-2 rounded-lg" data-value="^">^</button>
102
+
103
+ <!-- Standard Buttons -->
104
+ <button class="btn bg-gray-600 hover:bg-gray-700 text-white p-2 rounded-lg" data-value="7">7</button>
105
+ <button class="btn bg-gray-600 hover:bg-gray-700 text-white p-2 rounded-lg" data-value="8">8</button>
106
+ <button class="btn bg-gray-600 hover:bg-gray-700 text-white p-2 rounded-lg" data-value="9">9</button>
107
+ <button class="btn bg-blue-600 hover:bg-blue-700 text-white p-2 rounded-lg" data-value="/">/</button>
108
+ <button class="btn bg-blue-600 hover:bg-blue-700 text-white p-2 rounded-lg" data-value="%">%</button>
109
+
110
+ <button class="btn bg-gray-600 hover:bg-gray-700 text-white p-2 rounded-lg" data-value="4">4</button>
111
+ <button class="btn bg-gray-600 hover:bg-gray-700 text-white p-2 rounded-lg" data-value="5">5</button>
112
+ <button class="btn bg-gray-600 hover:bg-gray-700 text-white p-2 rounded-lg" data-value="6">6</button>
113
+ <button class="btn bg-blue-600 hover:bg-blue-700 text-white p-2 rounded-lg" data-value="*">×</button>
114
+ <button class="btn bg-blue-600 hover:bg-blue-700 text-white p-2 rounded-lg" data-value="π">π</button>
115
+
116
+ <button class="btn bg-gray-600 hover:bg-gray-700 text-white p-2 rounded-lg" data-value="1">1</button>
117
+ <button class="btn bg-gray-600 hover:bg-gray-700 text-white p-2 rounded-lg" data-value="2">2</button>
118
+ <button class="btn bg-gray-600 hover:bg-gray-700 text-white p-2 rounded-lg" data-value="3">3</button>
119
+ <button class="btn bg-blue-600 hover:bg-blue-700 text-white p-2 rounded-lg" data-value="-">-</button>
120
+ <button class="btn bg-blue-600 hover:bg-blue-700 text-white p-2 rounded-lg" data-value="(">(</button>
121
+
122
+ <button class="btn bg-gray-600 hover:bg-gray-700 text-white p-2 rounded-lg" data-value="0">0</button>
123
+ <button class="btn bg-gray-600 hover:bg-gray-700 text-white p-2 rounded-lg" data-value=".">.</button>
124
+ <button class="btn bg-green-600 hover:bg-green-700 text-white p-2 rounded-lg col-span-2" id="equals">=</button>
125
+ <button class="btn bg-blue-600 hover:bg-blue-700 text-white p-2 rounded-lg" data-value="+">+</button>
126
+ <button class="btn bg-blue-600 hover:bg-blue-700 text-white p-2 rounded-lg" data-value=")">)</button>
127
+ </div>
128
+ </div>
129
+
130
+ <script>
131
+ document.addEventListener('DOMContentLoaded', function() {
132
+ // Calculator state
133
+ let currentInput = '0';
134
+ let previousInput = '';
135
+ let operation = null;
136
+ let resetScreen = false;
137
+ const calculationHistory = [];
138
+
139
+ // DOM elements
140
+ const currentDisplay = document.getElementById('current');
141
+ const historyDisplay = document.getElementById('history');
142
+ const historyList = document.getElementById('historyList');
143
+ const historyToggle = document.getElementById('historyToggle');
144
+ const closeHistory = document.getElementById('closeHistory');
145
+ const clearButton = document.getElementById('clear');
146
+ const backspaceButton = document.getElementById('backspace');
147
+ const equalsButton = document.getElementById('equals');
148
+ const modeToggle = document.getElementById('modeToggle');
149
+ const numberButtons = document.querySelectorAll('.btn[data-value]');
150
+ const calculator = document.querySelector('.calculator');
151
+
152
+ // Initialize
153
+ updateDisplay();
154
+
155
+ // Event listeners
156
+ numberButtons.forEach(button => {
157
+ button.addEventListener('click', () => {
158
+ appendNumber(button.dataset.value);
159
+ });
160
+ });
161
+
162
+ equalsButton.addEventListener('click', evaluate);
163
+ clearButton.addEventListener('click', clear);
164
+ backspaceButton.addEventListener('click', deleteNumber);
165
+ modeToggle.addEventListener('click', toggleScientificMode);
166
+ historyToggle.addEventListener('click', showHistory);
167
+ closeHistory.addEventListener('click', hideHistory);
168
+
169
+ // Keyboard support
170
+ document.addEventListener('keydown', (e) => {
171
+ if (e.key >= '0' && e.key <= '9') appendNumber(e.key);
172
+ else if (e.key === '.') appendNumber('.');
173
+ else if (e.key === '+' || e.key === '-' || e.key === '*' || e.key === '/') {
174
+ appendNumber(e.key);
175
+ }
176
+ else if (e.key === 'Enter' || e.key === '=') evaluate();
177
+ else if (e.key === 'Escape') clear();
178
+ else if (e.key === 'Backspace') deleteNumber();
179
+ else if (e.key === '(' || e.key === ')') appendNumber(e.key);
180
+ else if (e.key === '^') appendNumber('^');
181
+ });
182
+
183
+ // Functions
184
+ function appendNumber(number) {
185
+ if (currentInput === '0' || resetScreen) {
186
+ currentInput = '';
187
+ resetScreen = false;
188
+ }
189
+
190
+ // Handle special constants
191
+ if (number === 'π') {
192
+ currentInput += Math.PI.toString();
193
+ } else {
194
+ currentInput += number;
195
+ }
196
+
197
+ updateDisplay();
198
+ }
199
+
200
+ function clear() {
201
+ currentInput = '0';
202
+ previousInput = '';
203
+ operation = null;
204
+ updateDisplay();
205
+ }
206
+
207
+ function deleteNumber() {
208
+ if (currentInput.length === 1 || (currentInput.length === 2 && currentInput.startsWith('-'))) {
209
+ currentInput = '0';
210
+ } else {
211
+ currentInput = currentInput.slice(0, -1);
212
+ }
213
+ updateDisplay();
214
+ }
215
+
216
+ function evaluate() {
217
+ if (resetScreen) return;
218
+
219
+ try {
220
+ // Replace special functions and constants
221
+ let expression = currentInput
222
+ .replace(/sin\(/g, 'Math.sin(')
223
+ .replace(/cos\(/g, 'Math.cos(')
224
+ .replace(/tan\(/g, 'Math.tan(')
225
+ .replace(/asin\(/g, 'Math.asin(')
226
+ .replace(/acos\(/g, 'Math.acos(')
227
+ .replace(/atan\(/g, 'Math.atan(')
228
+ .replace(/log\(/g, 'Math.log10(')
229
+ .replace(/ln\(/g, 'Math.log(')
230
+ .replace(/√\(/g, 'Math.sqrt(')
231
+ .replace(/\^/g, '**')
232
+ .replace(/π/g, 'Math.PI');
233
+
234
+ // Evaluate the expression
235
+ const result = eval(expression);
236
+
237
+ // Add to history
238
+ calculationHistory.push(`${currentInput} = ${result}`);
239
+ updateHistory();
240
+
241
+ // Update display
242
+ previousInput = currentInput;
243
+ currentInput = result.toString();
244
+ operation = null;
245
+ resetScreen = true;
246
+ updateDisplay();
247
+ } catch (error) {
248
+ currentInput = 'Error';
249
+ updateDisplay();
250
+ setTimeout(clear, 1500);
251
+ }
252
+ }
253
+
254
+ function updateDisplay() {
255
+ currentDisplay.textContent = currentInput;
256
+ historyDisplay.textContent = previousInput;
257
+ }
258
+
259
+ function updateHistory() {
260
+ historyList.innerHTML = '';
261
+ calculationHistory.slice().reverse().forEach(item => {
262
+ const historyItem = document.createElement('div');
263
+ historyItem.textContent = item;
264
+ historyItem.classList.add('cursor-pointer', 'hover:text-white');
265
+ historyItem.addEventListener('click', () => {
266
+ currentInput = item.split(' = ')[0];
267
+ updateDisplay();
268
+ hideHistory();
269
+ });
270
+ historyList.appendChild(historyItem);
271
+ });
272
+ }
273
+
274
+ function toggleScientificMode() {
275
+ calculator.classList.toggle('show-scientific');
276
+ if (calculator.classList.contains('show-scientific')) {
277
+ modeToggle.innerHTML = '<i class="fas fa-calculator"></i> Standard';
278
+ } else {
279
+ modeToggle.innerHTML = '<i class="fas fa-flask"></i> Scientific';
280
+ }
281
+ }
282
+
283
+ function showHistory() {
284
+ calculator.classList.add('show-history');
285
+ updateHistory();
286
+ }
287
+
288
+ function hideHistory() {
289
+ calculator.classList.remove('show-history');
290
+ }
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=Mishak/calculator" style="color: #fff;text-decoration: underline;" target="_blank" >🧬 Remix</a></p></body>
294
+ </html>