Hugging Face's logo

Spaces:
lior007
/
my-clock
Running

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

UPDATE

Browse files
Files changed (1) hide show
  1. index.html +167 -711
index.html CHANGED
@@ -3,775 +3,231 @@
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>
777
  </html>
 
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
+ </body>
233
  </html>