Hugging Face's logo

Spaces:
lior007
/
my-clock
Running

App Files Community
lior007 commited on
Commit
a2859c9
·
verified ·
1 Parent(s): 36182e2

Add 1 files

Browse files
Files changed (1) hide show
  1. index.html +710 -166
index.html CHANGED
@@ -3,230 +3,774 @@
3
  <head>
4
  <meta charset="UTF-8">
5
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
6
- <title>Elegant Digital Clock</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
- @import url('https://fonts.googleapis.com/css2?family=Orbitron:wght@400;700&display=swap');
11
 
12
- .clock-container {
13
- font-family: 'Orbitron', sans-serif;
14
- text-shadow: 0 0 10px rgba(0, 255, 255, 0.7);
15
- transition: all 0.5s ease;
16
  }
17
 
18
- .clock-face {
19
- box-shadow: 0 0 20px rgba(0, 255, 255, 0.5),
20
- inset 0 0 10px rgba(0, 0, 0, 0.5);
21
- backdrop-filter: blur(5px);
22
  }
23
 
24
- .time-segment {
25
- transition: all 0.3s ease;
 
26
  }
27
 
28
- .time-segment:hover {
29
- transform: scale(1.05);
30
- text-shadow: 0 0 15px rgba(0, 255, 255, 1);
31
  }
32
 
33
- .date-display {
34
- letter-spacing: 2px;
35
- text-shadow: 0 0 5px rgba(255, 255, 255, 0.7);
36
  }
37
 
38
- .theme-btn {
39
- transition: all 0.3s ease;
 
40
  }
41
 
42
- .theme-btn:hover {
43
- transform: rotate(15deg) scale(1.1);
44
  }
45
 
46
- .glow {
47
- animation: glow 2s infinite alternate;
 
48
  }
49
 
50
- @keyframes glow {
51
- from {
52
- box-shadow: 0 0 5px rgba(0, 255, 255, 0.5);
53
- }
54
- to {
55
- box-shadow: 0 0 20px rgba(0, 255, 255, 0.8);
56
- }
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
57
  }
58
  </style>
59
  </head>
60
- <body class="bg-gray-900 min-h-screen flex items-center justify-center p-4 transition-colors duration-500">
61
- <div class="clock-container w-full max-w-md">
62
- <div class="clock-face bg-gray-800 bg-opacity-70 rounded-2xl p-8 border border-cyan-400 border-opacity-30 relative overflow-hidden">
63
- <!-- Theme toggle button -->
64
- <button id="themeToggle" class="theme-btn absolute top-4 right-4 text-cyan-400 text-xl hover:text-cyan-300">
65
- <i class="fas fa-moon"></i>
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
66
  </button>
 
 
67
 
68
- <!-- Time display -->
69
- <div class="time-display flex justify-center items-center mb-6">
70
- <div id="hours" class="time-segment text-6xl font-bold text-cyan-400 mr-2">00</div>
71
- <div class="text-6xl font-bold text-cyan-400 opacity-70">:</div>
72
- <div id="minutes" class="time-segment text-6xl font-bold text-cyan-400 mx-2">00</div>
73
- <div class="text-6xl font-bold text-cyan-400 opacity-70">:</div>
74
- <div id="seconds" class="time-segment text-6xl font-bold text-cyan-400 ml-2">00</div>
75
- </div>
76
 
77
- <!-- AM/PM indicator -->
78
- <div id="ampm" class="text-xl font-semibold text-cyan-300 text-center mb-1">AM</div>
 
 
 
 
79
 
80
- <!-- Date display -->
81
- <div id="date" class="date-display text-lg text-gray-300 text-center mt-4"></div>
 
 
 
 
82
 
83
- <!-- Additional features -->
84
- <div class="flex justify-center mt-6 space-x-4">
85
- <button id="formatToggle" class="glow bg-cyan-800 bg-opacity-50 hover:bg-opacity-70 text-cyan-300 px-4 py-2 rounded-full flex items-center">
86
- <i class="fas fa-exchange-alt mr-2"></i> 24H/12H
87
- </button>
88
- <button id="stopwatchBtn" class="glow bg-cyan-800 bg-opacity-50 hover:bg-opacity-70 text-cyan-300 px-4 py-2 rounded-full flex items-center">
89
- <i class="fas fa-stopwatch mr-2"></i> Stopwatch
90
- </button>
91
- </div>
 
 
 
 
 
 
 
 
 
 
 
 
92
  </div>
93
 
94
- <!-- Footer with greeting -->
95
- <div id="greeting" class="text-center mt-6 text-xl text-gray-300"></div>
 
 
 
96
  </div>
97
 
98
  <script>
99
  // DOM elements
100
- const hoursElement = document.getElementById('hours');
101
- const minutesElement = document.getElementById('minutes');
102
- const secondsElement = document.getElementById('seconds');
103
- const ampmElement = document.getElementById('ampm');
104
- const dateElement = document.getElementById('date');
105
- const greetingElement = document.getElementById('greeting');
106
- const themeToggle = document.getElementById('themeToggle');
107
- const formatToggle = document.getElementById('formatToggle');
108
- const stopwatchBtn = document.getElementById('stopwatchBtn');
109
- const body = document.body;
110
- const clockFace = document.querySelector('.clock-face');
111
-
112
- // State variables
113
- let is24HourFormat = true;
114
- let isDarkTheme = true;
115
- let isStopwatchMode = false;
116
- let stopwatchStartTime = 0;
117
- let stopwatchInterval = null;
118
-
119
- // Initialize clock
120
- updateClock();
121
- setInterval(updateClock, 1000);
122
-
123
- // Theme toggle
124
- themeToggle.addEventListener('click', () => {
125
- isDarkTheme = !isDarkTheme;
126
-
127
- if (isDarkTheme) {
128
- body.classList.remove('bg-gray-100');
129
- body.classList.add('bg-gray-900');
130
- clockFace.classList.remove('bg-gray-200', 'text-gray-800');
131
- clockFace.classList.add('bg-gray-800', 'text-cyan-400');
132
- themeToggle.innerHTML = '<i class="fas fa-moon"></i>';
133
- document.querySelectorAll('.glow').forEach(el => {
134
- el.classList.remove('bg-gray-300', 'text-gray-800');
135
- el.classList.add('bg-cyan-800', 'text-cyan-300');
136
- });
137
- } else {
138
- body.classList.remove('bg-gray-900');
139
- body.classList.add('bg-gray-100');
140
- clockFace.classList.remove('bg-gray-800', 'text-cyan-400');
141
- clockFace.classList.add('bg-gray-200', 'text-gray-800');
142
- themeToggle.innerHTML = '<i class="fas fa-sun"></i>';
143
- document.querySelectorAll('.glow').forEach(el => {
144
- el.classList.remove('bg-cyan-800', 'text-cyan-300');
145
- el.classList.add('bg-gray-300', 'text-gray-800');
146
- });
147
- }
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
148
  });
149
 
150
- // Format toggle
151
- formatToggle.addEventListener('click', () => {
152
- is24HourFormat = !is24HourFormat;
153
- updateClock();
 
 
 
154
  });
155
 
156
- // Stopwatch toggle
157
- stopwatchBtn.addEventListener('click', () => {
158
- isStopwatchMode = !isStopwatchMode;
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
159
 
160
- if (isStopwatchMode) {
161
- stopwatchStartTime = Date.now();
162
- stopwatchInterval = setInterval(updateStopwatch, 10);
163
- stopwatchBtn.innerHTML = '<i class="fas fa-stop mr-2"></i> Stop';
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
164
  } else {
165
- clearInterval(stopwatchInterval);
166
- stopwatchBtn.innerHTML = '<i class="fas fa-stopwatch mr-2"></i> Stopwatch';
167
- setTimeout(updateClock, 100); // Return to normal clock
168
  }
169
- });
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
170
 
171
- // Update clock function
172
- function updateClock() {
173
- if (isStopwatchMode) return;
 
 
 
 
 
 
 
174
 
175
- const now = new Date();
176
- let hours = now.getHours();
177
- const minutes = now.getMinutes();
178
- const seconds = now.getSeconds();
179
- const ampm = hours >= 12 ? 'PM' : 'AM';
 
180
 
181
- // Format hours based on 12/24 hour setting
182
- if (!is24HourFormat) {
183
- hours = hours % 12 || 12;
 
 
 
 
 
 
 
 
 
 
184
  }
185
 
186
- // Update time display
187
- hoursElement.textContent = hours.toString().padStart(2, '0');
188
- minutesElement.textContent = minutes.toString().padStart(2, '0');
189
- secondsElement.textContent = seconds.toString().padStart(2, '0');
 
 
190
 
191
- // Update AM/PM display
192
- ampmElement.textContent = is24HourFormat ? '' : ampm;
 
 
 
 
 
193
 
194
- // Update date
195
- const options = { weekday: 'long', year: 'numeric', month: 'long', day: 'numeric' };
196
- dateElement.textContent = now.toLocaleDateString(undefined, options);
 
 
 
197
 
198
- // Update greeting
199
- updateGreeting(hours);
200
  }
201
 
202
- // Update stopwatch function
203
- function updateStopwatch() {
204
- const elapsed = Date.now() - stopwatchStartTime;
205
- const milliseconds = Math.floor(elapsed % 1000 / 10);
206
- const seconds = Math.floor(elapsed / 1000) % 60;
207
- const minutes = Math.floor(elapsed / (1000 * 60)) % 60;
208
- const hours = Math.floor(elapsed / (1000 * 60 * 60));
209
 
210
- hoursElement.textContent = hours.toString().padStart(2, '0');
211
- minutesElement.textContent = minutes.toString().padStart(2, '0');
212
- secondsElement.textContent = seconds.toString().padStart(2, '0');
213
- ampmElement.textContent = milliseconds.toString().padStart(2, '0');
214
- dateElement.textContent = 'Stopwatch';
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
215
  }
216
 
217
- // Update greeting based on time of day
218
- function updateGreeting(hours) {
219
- let greeting = '';
220
 
221
- if (hours < 12) {
222
- greeting = 'Good Morning!';
223
- } else if (hours < 18) {
224
- greeting = 'Good Afternoon!';
225
  } else {
226
- greeting = 'Good Evening!';
227
  }
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
228
 
229
- greetingElement.textContent = greeting;
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
230
  }
231
  </script>
232
  <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=lior007/my-clock" style="color: #fff;text-decoration: underline;" target="_blank" >Remix</a></p></body>
 
3
  <head>
4
  <meta charset="UTF-8">
5
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
6
+ <title>Professional 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
+ @import url('https://fonts.googleapis.com/css2?family=Roboto+Mono:wght@300;400;500;700&display=swap');
11
 
12
+ body {
13
+ font-family: 'Roboto Mono', monospace;
 
 
14
  }
15
 
16
+ .calculator {
17
+ box-shadow: 0 10px 30px rgba(0, 0, 0, 0.2);
18
+ transition: all 0.3s ease;
 
19
  }
20
 
21
+ .display {
22
+ min-height: 120px;
23
+ word-break: break-all;
24
  }
25
 
26
+ .btn {
27
+ transition: all 0.1s ease;
28
+ transform-origin: center;
29
  }
30
 
31
+ .btn:active {
32
+ transform: scale(0.95);
 
33
  }
34
 
35
+ .btn-operator {
36
+ background-color: #3b82f6;
37
+ color: white;
38
  }
39
 
40
+ .btn-operator:hover {
41
+ background-color: #2563eb;
42
  }
43
 
44
+ .btn-function {
45
+ background-color: #10b981;
46
+ color: white;
47
  }
48
 
49
+ .btn-function:hover {
50
+ background-color: #059669;
51
+ }
52
+
53
+ .btn-equals {
54
+ background-color: #f59e0b;
55
+ color: white;
56
+ }
57
+
58
+ .btn-equals:hover {
59
+ background-color: #d97706;
60
+ }
61
+
62
+ .btn-clear {
63
+ background-color: #ef4444;
64
+ color: white;
65
+ }
66
+
67
+ .btn-clear:hover {
68
+ background-color: #dc2626;
69
+ }
70
+
71
+ .btn-secondary {
72
+ background-color: #4b5563;
73
+ color: white;
74
+ }
75
+
76
+ .btn-secondary:hover {
77
+ background-color: #374151;
78
+ }
79
+
80
+ .btn-number {
81
+ background-color: #1f2937;
82
+ color: white;
83
+ }
84
+
85
+ .btn-number:hover {
86
+ background-color: #111827;
87
+ }
88
+
89
+ .history-item:hover {
90
+ background-color: #f3f4f6;
91
+ cursor: pointer;
92
+ }
93
+
94
+ .tab-active {
95
+ border-bottom: 3px solid #3b82f6;
96
+ font-weight: 500;
97
+ }
98
+
99
+ .scientific-panel {
100
+ transition: all 0.3s ease;
101
+ }
102
+
103
+ .angle-unit {
104
+ background-color: #e5e7eb;
105
+ color: #1f2937;
106
+ }
107
+
108
+ .angle-unit.active {
109
+ background-color: #3b82f6;
110
+ color: white;
111
  }
112
  </style>
113
  </head>
114
+ <body class="bg-gray-100 min-h-screen flex items-center justify-center p-4">
115
+ <div class="calculator w-full max-w-md bg-white rounded-2xl overflow-hidden shadow-xl">
116
+ <!-- Calculator header with tabs -->
117
+ <div class="flex border-b">
118
+ <div class="tab tab-active py-3 px-6 text-center flex-1 cursor-pointer" data-tab="basic">
119
+ <i class="fas fa-calculator mr-2"></i> Basic
120
+ </div>
121
+ <div class="tab py-3 px-6 text-center flex-1 cursor-pointer" data-tab="scientific">
122
+ <i class="fas fa-square-root-alt mr-2"></i> Scientific
123
+ </div>
124
+ <div class="tab py-3 px-6 text-center flex-1 cursor-pointer" data-tab="history">
125
+ <i class="fas fa-history mr-2"></i> History
126
+ </div>
127
+ </div>
128
+
129
+ <!-- Display area -->
130
+ <div class="display p-4 bg-gray-50 text-right">
131
+ <div id="expression" class="text-gray-500 text-lg min-h-6 overflow-x-auto whitespace-nowrap"></div>
132
+ <div id="result" class="text-3xl font-semibold mt-2 overflow-x-auto whitespace-nowrap">0</div>
133
+ </div>
134
+
135
+ <!-- Angle unit selector -->
136
+ <div class="scientific-panel hidden px-4 py-2 bg-gray-100 flex justify-center space-x-2">
137
+ <button class="angle-unit active px-3 py-1 rounded-full text-sm" data-unit="deg">DEG</button>
138
+ <button class="angle-unit px-3 py-1 rounded-full text-sm" data-unit="rad">RAD</button>
139
+ <button class="angle-unit px-3 py-1 rounded-full text-sm" data-unit="grad">GRAD</button>
140
+ </div>
141
+
142
+ <!-- Calculator buttons -->
143
+ <div class="grid grid-cols-5 gap-1 p-2">
144
+ <!-- Row 1 -->
145
+ <button class="btn btn-clear col-span-2 py-4 rounded" data-action="clear">AC</button>
146
+ <button class="btn btn-clear py-4 rounded" data-action="backspace">
147
+ <i class="fas fa-backspace"></i>
148
  </button>
149
+ <button class="btn btn-secondary py-4 rounded" data-action="percentage">%</button>
150
+ <button class="btn btn-operator py-4 rounded" data-action="divide">÷</button>
151
 
152
+ <!-- Row 2 -->
153
+ <button class="btn btn-function py-4 rounded scientific-btn hidden" data-action="sin">sin</button>
154
+ <button class="btn btn-function py-4 rounded scientific-btn hidden" data-action="cos">cos</button>
155
+ <button class="btn btn-function py-4 rounded scientific-btn hidden" data-action="tan">tan</button>
156
+ <button class="btn btn-secondary py-4 rounded" data-action="power">x^y</button>
157
+ <button class="btn btn-operator py-4 rounded" data-action="multiply">×</button>
 
 
158
 
159
+ <!-- Row 3 -->
160
+ <button class="btn btn-function py-4 rounded scientific-btn hidden" data-action="asin">sin⁻¹</button>
161
+ <button class="btn btn-function py-4 rounded scientific-btn hidden" data-action="acos">cos⁻¹</button>
162
+ <button class="btn btn-function py-4 rounded scientific-btn hidden" data-action="atan">tan⁻¹</button>
163
+ <button class="btn btn-secondary py-4 rounded" data-action="square">x²</button>
164
+ <button class="btn btn-operator py-4 rounded" data-action="subtract">−</button>
165
 
166
+ <!-- Row 4 -->
167
+ <button class="btn btn-function py-4 rounded scientific-btn hidden" data-action="log">log</button>
168
+ <button class="btn btn-function py-4 rounded scientific-btn hidden" data-action="ln">ln</button>
169
+ <button class="btn btn-function py-4 rounded scientific-btn hidden" data-action="factorial">x!</button>
170
+ <button class="btn btn-secondary py-4 rounded" data-action="sqrt">√</button>
171
+ <button class="btn btn-operator py-4 rounded" data-action="add">+</button>
172
 
173
+ <!-- Row 5 -->
174
+ <button class="btn btn-function py-4 rounded scientific-btn hidden" data-action="pi">π</button>
175
+ <button class="btn btn-function py-4 rounded scientific-btn hidden" data-action="e">e</button>
176
+ <button class="btn btn-secondary py-4 rounded" data-action="decimal">.</button>
177
+ <button class="btn btn-number py-4 rounded col-span-2" data-action="equals">=</button>
178
+
179
+ <!-- Row 6 (Numbers) -->
180
+ <button class="btn btn-number py-4 rounded" data-number="7">7</button>
181
+ <button class="btn btn-number py-4 rounded" data-number="8">8</button>
182
+ <button class="btn btn-number py-4 rounded" data-number="9">9</button>
183
+
184
+ <button class="btn btn-number py-4 rounded" data-number="4">4</button>
185
+ <button class="btn btn-number py-4 rounded" data-number="5">5</button>
186
+ <button class="btn btn-number py-4 rounded" data-number="6">6</button>
187
+
188
+ <button class="btn btn-number py-4 rounded" data-number="1">1</button>
189
+ <button class="btn btn-number py-4 rounded" data-number="2">2</button>
190
+ <button class="btn btn-number py-4 rounded" data-number="3">3</button>
191
+
192
+ <button class="btn btn-number py-4 rounded" data-number="0">0</button>
193
+ <button class="btn btn-number py-4 rounded" data-action="sign">±</button>
194
  </div>
195
 
196
+ <!-- History panel (hidden by default) -->
197
+ <div id="history-panel" class="hidden max-h-64 overflow-y-auto p-4 border-t">
198
+ <div class="text-center text-gray-500 mb-2">Calculation History</div>
199
+ <div id="history-list"></div>
200
+ </div>
201
  </div>
202
 
203
  <script>
204
  // DOM elements
205
+ const resultElement = document.getElementById('result');
206
+ const expressionElement = document.getElementById('expression');
207
+ const historyList = document.getElementById('history-list');
208
+ const tabs = document.querySelectorAll('.tab');
209
+ const scientificPanel = document.querySelector('.scientific-panel');
210
+ const scientificButtons = document.querySelectorAll('.scientific-btn');
211
+ const historyPanel = document.getElementById('history-panel');
212
+ const angleUnitButtons = document.querySelectorAll('.angle-unit');
213
+
214
+ // Calculator state
215
+ let currentInput = '0';
216
+ let previousInput = '';
217
+ let operation = null;
218
+ let resetInput = false;
219
+ let angleMode = 'deg'; // deg, rad, grad
220
+ let calculationHistory = [];
221
+
222
+ // Initialize calculator
223
+ updateDisplay();
224
+
225
+ // Event listeners for number buttons
226
+ document.querySelectorAll('[data-number]').forEach(button => {
227
+ button.addEventListener('click', () => {
228
+ appendNumber(button.getAttribute('data-number'));
229
+ });
230
+ });
231
+
232
+ // Event listeners for operation buttons
233
+ document.querySelectorAll('[data-action]').forEach(button => {
234
+ button.addEventListener('click', () => {
235
+ const action = button.getAttribute('data-action');
236
+
237
+ switch(action) {
238
+ case 'add':
239
+ case 'subtract':
240
+ case 'multiply':
241
+ case 'divide':
242
+ chooseOperation(action);
243
+ break;
244
+ case 'equals':
245
+ compute();
246
+ break;
247
+ case 'clear':
248
+ clear();
249
+ break;
250
+ case 'backspace':
251
+ backspace();
252
+ break;
253
+ case 'decimal':
254
+ appendDecimal();
255
+ break;
256
+ case 'sign':
257
+ toggleSign();
258
+ break;
259
+ case 'percentage':
260
+ percentage();
261
+ break;
262
+ case 'square':
263
+ square();
264
+ break;
265
+ case 'sqrt':
266
+ squareRoot();
267
+ break;
268
+ case 'power':
269
+ power();
270
+ break;
271
+ case 'sin':
272
+ sin();
273
+ break;
274
+ case 'cos':
275
+ cos();
276
+ break;
277
+ case 'tan':
278
+ tan();
279
+ break;
280
+ case 'asin':
281
+ asin();
282
+ break;
283
+ case 'acos':
284
+ acos();
285
+ break;
286
+ case 'atan':
287
+ atan();
288
+ break;
289
+ case 'log':
290
+ log();
291
+ break;
292
+ case 'ln':
293
+ ln();
294
+ break;
295
+ case 'factorial':
296
+ factorial();
297
+ break;
298
+ case 'pi':
299
+ appendPi();
300
+ break;
301
+ case 'e':
302
+ appendE();
303
+ break;
304
+ }
305
+ });
306
+ });
307
+
308
+ // Tab switching
309
+ tabs.forEach(tab => {
310
+ tab.addEventListener('click', () => {
311
+ const tabName = tab.getAttribute('data-tab');
312
+
313
+ // Update active tab
314
+ tabs.forEach(t => t.classList.remove('tab-active'));
315
+ tab.classList.add('tab-active');
316
+
317
+ // Show/hide panels
318
+ if (tabName === 'scientific') {
319
+ scientificPanel.classList.remove('hidden');
320
+ scientificButtons.forEach(btn => btn.classList.remove('hidden'));
321
+ historyPanel.classList.add('hidden');
322
+ } else if (tabName === 'history') {
323
+ scientificPanel.classList.add('hidden');
324
+ scientificButtons.forEach(btn => btn.classList.add('hidden'));
325
+ historyPanel.classList.remove('hidden');
326
+ renderHistory();
327
+ } else {
328
+ scientificPanel.classList.add('hidden');
329
+ scientificButtons.forEach(btn => btn.classList.add('hidden'));
330
+ historyPanel.classList.add('hidden');
331
+ }
332
+ });
333
  });
334
 
335
+ // Angle unit selection
336
+ angleUnitButtons.forEach(button => {
337
+ button.addEventListener('click', () => {
338
+ angleUnitButtons.forEach(btn => btn.classList.remove('active'));
339
+ button.classList.add('active');
340
+ angleMode = button.getAttribute('data-unit');
341
+ });
342
  });
343
 
344
+ // Keyboard support
345
+ document.addEventListener('keydown', (e) => {
346
+ if (e.key >= '0' && e.key <= '9') {
347
+ appendNumber(e.key);
348
+ } else if (e.key === '.') {
349
+ appendDecimal();
350
+ } else if (e.key === '+') {
351
+ chooseOperation('add');
352
+ } else if (e.key === '-') {
353
+ chooseOperation('subtract');
354
+ } else if (e.key === '*') {
355
+ chooseOperation('multiply');
356
+ } else if (e.key === '/') {
357
+ chooseOperation('divide');
358
+ } else if (e.key === 'Enter' || e.key === '=') {
359
+ compute();
360
+ } else if (e.key === 'Escape') {
361
+ clear();
362
+ } else if (e.key === 'Backspace') {
363
+ backspace();
364
+ } else if (e.key === '%') {
365
+ percentage();
366
+ } else if (e.key === '^') {
367
+ power();
368
+ }
369
+ });
370
+
371
+ // Calculator functions
372
+ function appendNumber(number) {
373
+ if (currentInput === '0' || resetInput) {
374
+ currentInput = number;
375
+ resetInput = false;
376
+ } else {
377
+ currentInput += number;
378
+ }
379
+ updateDisplay();
380
+ }
381
+
382
+ function appendDecimal() {
383
+ if (resetInput) {
384
+ currentInput = '0.';
385
+ resetInput = false;
386
+ return;
387
+ }
388
 
389
+ if (currentInput.indexOf('.') === -1) {
390
+ currentInput += '.';
391
+ }
392
+ updateDisplay();
393
+ }
394
+
395
+ function toggleSign() {
396
+ currentInput = (parseFloat(currentInput) * -1).toString();
397
+ updateDisplay();
398
+ }
399
+
400
+ function clear() {
401
+ currentInput = '0';
402
+ previousInput = '';
403
+ operation = null;
404
+ updateDisplay();
405
+ }
406
+
407
+ function backspace() {
408
+ if (currentInput.length === 1 || (currentInput.length === 2 && currentInput.startsWith('-'))) {
409
+ currentInput = '0';
410
  } else {
411
+ currentInput = currentInput.slice(0, -1);
 
 
412
  }
413
+ updateDisplay();
414
+ }
415
+
416
+ function chooseOperation(op) {
417
+ if (currentInput === '0' && previousInput !== '') {
418
+ operation = op;
419
+ return;
420
+ }
421
+
422
+ if (previousInput === '') {
423
+ previousInput = currentInput;
424
+ } else if (operation) {
425
+ const result = computeOperation(previousInput, currentInput, operation);
426
+ previousInput = result.toString();
427
+ }
428
+
429
+ operation = op;
430
+ currentInput = '0';
431
+ updateDisplay();
432
+ }
433
+
434
+ function compute() {
435
+ if (operation === null || previousInput === '') return;
436
+
437
+ const result = computeOperation(previousInput, currentInput, operation);
438
+
439
+ // Add to history
440
+ const historyEntry = {
441
+ expression: `${previousInput} ${getOperationSymbol(operation)} ${currentInput}`,
442
+ result: result
443
+ };
444
+ calculationHistory.unshift(historyEntry);
445
+
446
+ currentInput = result.toString();
447
+ operation = null;
448
+ previousInput = '';
449
+ resetInput = true;
450
+ updateDisplay();
451
+ }
452
+
453
+ function computeOperation(num1, num2, op) {
454
+ const n1 = parseFloat(num1);
455
+ const n2 = parseFloat(num2);
456
+
457
+ switch(op) {
458
+ case 'add': return n1 + n2;
459
+ case 'subtract': return n1 - n2;
460
+ case 'multiply': return n1 * n2;
461
+ case 'divide': return n1 / n2;
462
+ default: return n2;
463
+ }
464
+ }
465
+
466
+ function percentage() {
467
+ currentInput = (parseFloat(currentInput) / 100).toString();
468
+ updateDisplay();
469
+ }
470
+
471
+ function square() {
472
+ const num = parseFloat(currentInput);
473
+ const result = num * num;
474
+
475
+ // Add to history
476
+ const historyEntry = {
477
+ expression: `${num}²`,
478
+ result: result
479
+ };
480
+ calculationHistory.unshift(historyEntry);
481
+
482
+ currentInput = result.toString();
483
+ updateDisplay();
484
+ }
485
+
486
+ function squareRoot() {
487
+ const num = parseFloat(currentInput);
488
+ const result = Math.sqrt(num);
489
+
490
+ // Add to history
491
+ const historyEntry = {
492
+ expression: `√${num}`,
493
+ result: result
494
+ };
495
+ calculationHistory.unshift(historyEntry);
496
+
497
+ currentInput = result.toString();
498
+ updateDisplay();
499
+ }
500
+
501
+ function power() {
502
+ previousInput = currentInput;
503
+ currentInput = '0';
504
+ operation = 'power';
505
+ expressionElement.textContent = `${previousInput}^`;
506
+ resultElement.textContent = currentInput;
507
+ }
508
+
509
+ function sin() {
510
+ let num = parseFloat(currentInput);
511
+
512
+ // Convert to radians if needed
513
+ if (angleMode === 'deg') {
514
+ num = degToRad(num);
515
+ } else if (angleMode === 'grad') {
516
+ num = gradToRad(num);
517
+ }
518
+
519
+ const result = Math.sin(num);
520
+
521
+ // Add to history
522
+ const historyEntry = {
523
+ expression: `sin(${currentInput}${angleMode})`,
524
+ result: result
525
+ };
526
+ calculationHistory.unshift(historyEntry);
527
+
528
+ currentInput = result.toString();
529
+ updateDisplay();
530
+ }
531
+
532
+ function cos() {
533
+ let num = parseFloat(currentInput);
534
+
535
+ // Convert to radians if needed
536
+ if (angleMode === 'deg') {
537
+ num = degToRad(num);
538
+ } else if (angleMode === 'grad') {
539
+ num = gradToRad(num);
540
+ }
541
+
542
+ const result = Math.cos(num);
543
+
544
+ // Add to history
545
+ const historyEntry = {
546
+ expression: `cos(${currentInput}${angleMode})`,
547
+ result: result
548
+ };
549
+ calculationHistory.unshift(historyEntry);
550
+
551
+ currentInput = result.toString();
552
+ updateDisplay();
553
+ }
554
+
555
+ function tan() {
556
+ let num = parseFloat(currentInput);
557
+
558
+ // Convert to radians if needed
559
+ if (angleMode === 'deg') {
560
+ num = degToRad(num);
561
+ } else if (angleMode === 'grad') {
562
+ num = gradToRad(num);
563
+ }
564
+
565
+ const result = Math.tan(num);
566
+
567
+ // Add to history
568
+ const historyEntry = {
569
+ expression: `tan(${currentInput}${angleMode})`,
570
+ result: result
571
+ };
572
+ calculationHistory.unshift(historyEntry);
573
+
574
+ currentInput = result.toString();
575
+ updateDisplay();
576
+ }
577
+
578
+ function asin() {
579
+ let num = parseFloat(currentInput);
580
+ let result = Math.asin(num);
581
+
582
+ // Convert from radians if needed
583
+ if (angleMode === 'deg') {
584
+ result = radToDeg(result);
585
+ } else if (angleMode === 'grad') {
586
+ result = radToGrad(result);
587
+ }
588
+
589
+ // Add to history
590
+ const historyEntry = {
591
+ expression: `sin⁻¹(${currentInput})`,
592
+ result: result
593
+ };
594
+ calculationHistory.unshift(historyEntry);
595
+
596
+ currentInput = result.toString();
597
+ updateDisplay();
598
+ }
599
 
600
+ function acos() {
601
+ let num = parseFloat(currentInput);
602
+ let result = Math.acos(num);
603
+
604
+ // Convert from radians if needed
605
+ if (angleMode === 'deg') {
606
+ result = radToDeg(result);
607
+ } else if (angleMode === 'grad') {
608
+ result = radToGrad(result);
609
+ }
610
 
611
+ // Add to history
612
+ const historyEntry = {
613
+ expression: `cos⁻¹(${currentInput})`,
614
+ result: result
615
+ };
616
+ calculationHistory.unshift(historyEntry);
617
 
618
+ currentInput = result.toString();
619
+ updateDisplay();
620
+ }
621
+
622
+ function atan() {
623
+ let num = parseFloat(currentInput);
624
+ let result = Math.atan(num);
625
+
626
+ // Convert from radians if needed
627
+ if (angleMode === 'deg') {
628
+ result = radToDeg(result);
629
+ } else if (angleMode === 'grad') {
630
+ result = radToGrad(result);
631
  }
632
 
633
+ // Add to history
634
+ const historyEntry = {
635
+ expression: `tan⁻¹(${currentInput})`,
636
+ result: result
637
+ };
638
+ calculationHistory.unshift(historyEntry);
639
 
640
+ currentInput = result.toString();
641
+ updateDisplay();
642
+ }
643
+
644
+ function log() {
645
+ const num = parseFloat(currentInput);
646
+ const result = Math.log10(num);
647
 
648
+ // Add to history
649
+ const historyEntry = {
650
+ expression: `log(${currentInput})`,
651
+ result: result
652
+ };
653
+ calculationHistory.unshift(historyEntry);
654
 
655
+ currentInput = result.toString();
656
+ updateDisplay();
657
  }
658
 
659
+ function ln() {
660
+ const num = parseFloat(currentInput);
661
+ const result = Math.log(num);
 
 
 
 
662
 
663
+ // Add to history
664
+ const historyEntry = {
665
+ expression: `ln(${currentInput})`,
666
+ result: result
667
+ };
668
+ calculationHistory.unshift(historyEntry);
669
+
670
+ currentInput = result.toString();
671
+ updateDisplay();
672
+ }
673
+
674
+ function factorial() {
675
+ const num = parseInt(currentInput);
676
+ let result = 1;
677
+
678
+ for (let i = 2; i <= num; i++) {
679
+ result *= i;
680
+ }
681
+
682
+ // Add to history
683
+ const historyEntry = {
684
+ expression: `${currentInput}!`,
685
+ result: result
686
+ };
687
+ calculationHistory.unshift(historyEntry);
688
+
689
+ currentInput = result.toString();
690
+ updateDisplay();
691
+ }
692
+
693
+ function appendPi() {
694
+ if (currentInput === '0' || resetInput) {
695
+ currentInput = Math.PI.toString();
696
+ resetInput = false;
697
+ } else {
698
+ currentInput += Math.PI.toString();
699
+ }
700
+ updateDisplay();
701
+ }
702
+
703
+ function appendE() {
704
+ if (currentInput === '0' || resetInput) {
705
+ currentInput = Math.E.toString();
706
+ resetInput = false;
707
+ } else {
708
+ currentInput += Math.E.toString();
709
+ }
710
+ updateDisplay();
711
  }
712
 
713
+ // Helper functions
714
+ function updateDisplay() {
715
+ resultElement.textContent = currentInput;
716
 
717
+ if (operation !== null) {
718
+ expressionElement.textContent = `${previousInput} ${getOperationSymbol(operation)}`;
 
 
719
  } else {
720
+ expressionElement.textContent = '';
721
  }
722
+ }
723
+
724
+ function getOperationSymbol(op) {
725
+ switch(op) {
726
+ case 'add': return '+';
727
+ case 'subtract': return '−';
728
+ case 'multiply': return '×';
729
+ case 'divide': return '÷';
730
+ case 'power': return '^';
731
+ default: return '';
732
+ }
733
+ }
734
+
735
+ function degToRad(degrees) {
736
+ return degrees * Math.PI / 180;
737
+ }
738
+
739
+ function radToDeg(radians) {
740
+ return radians * 180 / Math.PI;
741
+ }
742
+
743
+ function gradToRad(grads) {
744
+ return grads * Math.PI / 200;
745
+ }
746
+
747
+ function radToGrad(radians) {
748
+ return radians * 200 / Math.PI;
749
+ }
750
+
751
+ function renderHistory() {
752
+ historyList.innerHTML = '';
753
 
754
+ if (calculationHistory.length === 0) {
755
+ historyList.innerHTML = '<div class="text-center text-gray-400 py-4">No history yet</div>';
756
+ return;
757
+ }
758
+
759
+ calculationHistory.forEach((item, index) => {
760
+ const historyItem = document.createElement('div');
761
+ historyItem.className = 'history-item p-2 border-b hover:bg-gray-50';
762
+ historyItem.innerHTML = `
763
+ <div class="text-sm text-gray-500">${item.expression}</div>
764
+ <div class="text-right font-semibold">${item.result}</div>
765
+ `;
766
+
767
+ historyItem.addEventListener('click', () => {
768
+ currentInput = item.result.toString();
769
+ updateDisplay();
770
+ });
771
+
772
+ historyList.appendChild(historyItem);
773
+ });
774
  }
775
  </script>
776
  <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=lior007/my-clock" style="color: #fff;text-decoration: underline;" target="_blank" >Remix</a></p></body>