Hugging Face's logo

Spaces:
TASOMM
/
anycoder-17aaafe8
Running

App Files Community
TASOMM commited on
Commit
e2b4375
·
verified ·
1 Parent(s): fba9a82

Upload folder using huggingface_hub

Browse files
Files changed (1) hide show
  1. index.html +533 -19
index.html CHANGED
@@ -1,19 +1,533 @@
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>TasoCalcIO - Scientific Calculator</title>
7
+ <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css">
8
+ <style>
9
+ * {
10
+ margin: 0;
11
+ padding: 0;
12
+ box-sizing: border-box;
13
+ font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
14
+ }
15
+
16
+ :root {
17
+ --primary-color: #2c3e50;
18
+ --secondary-color: #34495e;
19
+ --accent-color: #3498db;
20
+ --text-color: #ecf0f1;
21
+ --button-color: #34495e;
22
+ --button-hover: #2c3e50;
23
+ --shadow: 0 10px 30px rgba(0, 0, 0, 0.3);
24
+ --transition: all 0.3s ease;
25
+ }
26
+
27
+ body {
28
+ background: linear-gradient(135deg, #1a2a3a, #2c3e50);
29
+ color: var(--text-color);
30
+ min-height: 100vh;
31
+ display: flex;
32
+ justify-content: center;
33
+ align-items: center;
34
+ padding: 20px;
35
+ }
36
+
37
+ .container {
38
+ width: 100%;
39
+ max-width: 400px;
40
+ display: flex;
41
+ flex-direction: column;
42
+ gap: 15px;
43
+ }
44
+
45
+ .header {
46
+ display: flex;
47
+ justify-content: space-between;
48
+ align-items: center;
49
+ padding: 10px 15px;
50
+ background: rgba(52, 73, 94, 0.8);
51
+ border-radius: 15px;
52
+ box-shadow: var(--shadow);
53
+ }
54
+
55
+ .logo {
56
+ font-size: 1.8rem;
57
+ font-weight: 700;
58
+ color: var(--accent-color);
59
+ display: flex;
60
+ align-items: center;
61
+ gap: 10px;
62
+ }
63
+
64
+ .logo i {
65
+ font-size: 2rem;
66
+ }
67
+
68
+ .theme-switch {
69
+ display: flex;
70
+ align-items: center;
71
+ gap: 10px;
72
+ }
73
+
74
+ .theme-btn {
75
+ background: var(--secondary-color);
76
+ border: none;
77
+ color: var(--text-color);
78
+ padding: 8px 15px;
79
+ border-radius: 20px;
80
+ cursor: pointer;
81
+ transition: var(--transition);
82
+ display: flex;
83
+ align-items: center;
84
+ gap: 5px;
85
+ font-weight: 500;
86
+ }
87
+
88
+ .theme-btn:hover {
89
+ background: var(--accent-color);
90
+ }
91
+
92
+ .calculator {
93
+ background: var(--primary-color);
94
+ border-radius: 20px;
95
+ padding: 20px;
96
+ box-shadow: var(--shadow);
97
+ }
98
+
99
+ .display {
100
+ background: rgba(236, 240, 241, 0.1);
101
+ border-radius: 15px;
102
+ padding: 20px;
103
+ margin-bottom: 20px;
104
+ text-align: right;
105
+ min-height: 120px;
106
+ display: flex;
107
+ flex-direction: column;
108
+ justify-content: space-between;
109
+ }
110
+
111
+ .expression {
112
+ font-size: 1.2rem;
113
+ color: rgba(236, 240, 241, 0.7);
114
+ min-height: 30px;
115
+ word-wrap: break-word;
116
+ overflow-wrap: break-word;
117
+ }
118
+
119
+ .result {
120
+ font-size: 2.5rem;
121
+ font-weight: 600;
122
+ word-wrap: break-word;
123
+ overflow-wrap: break-word;
124
+ }
125
+
126
+ .buttons {
127
+ display: grid;
128
+ grid-template-columns: repeat(5, 1fr);
129
+ gap: 12px;
130
+ }
131
+
132
+ .btn {
133
+ background: var(--button-color);
134
+ border: none;
135
+ color: var(--text-color);
136
+ padding: 15px 0;
137
+ border-radius: 12px;
138
+ font-size: 1.2rem;
139
+ cursor: pointer;
140
+ transition: var(--transition);
141
+ display: flex;
142
+ justify-content: center;
143
+ align-items: center;
144
+ box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
145
+ }
146
+
147
+ .btn:hover {
148
+ background: var(--button-hover);
149
+ transform: translateY(-2px);
150
+ }
151
+
152
+ .btn:active {
153
+ transform: translateY(0);
154
+ }
155
+
156
+ .btn.operator {
157
+ background: var(--accent-color);
158
+ }
159
+
160
+ .btn.operator:hover {
161
+ background: #2980b9;
162
+ }
163
+
164
+ .btn.equals {
165
+ background: #e74c3c;
166
+ grid-column: span 2;
167
+ }
168
+
169
+ .btn.equals:hover {
170
+ background: #c0392b;
171
+ }
172
+
173
+ .btn.function {
174
+ background: #9b59b6;
175
+ }
176
+
177
+ .btn.function:hover {
178
+ background: #8e44ad;
179
+ }
180
+
181
+ .btn.clear {
182
+ background: #e67e22;
183
+ }
184
+
185
+ .btn.clear:hover {
186
+ background: #d35400;
187
+ }
188
+
189
+ .footer {
190
+ text-align: center;
191
+ padding: 10px;
192
+ font-size: 0.9rem;
193
+ color: rgba(236, 240, 241, 0.7);
194
+ }
195
+
196
+ .footer a {
197
+ color: var(--accent-color);
198
+ text-decoration: none;
199
+ transition: var(--transition);
200
+ }
201
+
202
+ .footer a:hover {
203
+ text-decoration: underline;
204
+ }
205
+
206
+ /* Light Theme */
207
+ .light-theme {
208
+ --primary-color: #ffffff;
209
+ --secondary-color: #f5f5f5;
210
+ --accent-color: #3498db;
211
+ --text-color: #2c3e50;
212
+ --button-color: #f0f0f0;
213
+ --button-hover: #e0e0e0;
214
+ --shadow: 0 10px 30px rgba(0, 0, 0, 0.1);
215
+ }
216
+
217
+ .light-theme body {
218
+ background: linear-gradient(135deg, #e0e0e0, #f5f5f5);
219
+ }
220
+
221
+ .light-theme .display {
222
+ background: rgba(44, 62, 80, 0.05);
223
+ }
224
+
225
+ /* Responsive Design */
226
+ @media (max-width: 480px) {
227
+ .container {
228
+ max-width: 100%;
229
+ }
230
+
231
+ .buttons {
232
+ gap: 8px;
233
+ }
234
+
235
+ .btn {
236
+ padding: 12px 0;
237
+ font-size: 1rem;
238
+ }
239
+
240
+ .result {
241
+ font-size: 2rem;
242
+ }
243
+ }
244
+ </style>
245
+ </head>
246
+ <body>
247
+ <div class="container">
248
+ <div class="header">
249
+ <div class="logo">
250
+ <i class="fas fa-calculator"></i>
251
+ TasoCalcIO
252
+ </div>
253
+ <div class="theme-switch">
254
+ <button class="theme-btn" id="themeToggle">
255
+ <i class="fas fa-moon"></i> Dark
256
+ </button>
257
+ </div>
258
+ </div>
259
+
260
+ <div class="calculator">
261
+ <div class="display">
262
+ <div class="expression" id="expression"></div>
263
+ <div class="result" id="result">0</div>
264
+ </div>
265
+
266
+ <div class="buttons">
267
+ <!-- First Row -->
268
+ <button class="btn function" data-action="sin">sin</button>
269
+ <button class="btn function" data-action="cos">cos</button>
270
+ <button class="btn function" data-action="tan">tan</button>
271
+ <button class="btn function" data-action="log">log</button>
272
+ <button class="btn clear" data-action="clear">C</button>
273
+
274
+ <!-- Second Row -->
275
+ <button class="btn function" data-action="asin">sin⁻¹</button>
276
+ <button class="btn function" data-action="acos">cos⁻¹</button>
277
+ <button class="btn function" data-action="atan">tan⁻¹</button>
278
+ <button class="btn function" data-action="ln">ln</button>
279
+ <button class="btn function" data-action="sqrt">√</button>
280
+
281
+ <!-- Third Row -->
282
+ <button class="btn" data-value="7">7</button>
283
+ <button class="btn" data-value="8">8</button>
284
+ <button class="btn" data-value="9">9</button>
285
+ <button class="btn operator" data-action="divide">/</button>
286
+ <button class="btn operator" data-action="power">xʸ</button>
287
+
288
+ <!-- Fourth Row -->
289
+ <button class="btn" data-value="4">4</button>
290
+ <button class="btn" data-value="5">5</button>
291
+ <button class="btn" data-value="6">6</button>
292
+ <button class="btn operator" data-action="multiply">×</button>
293
+ <button class="btn operator" data-action="pi">π</button>
294
+
295
+ <!-- Fifth Row -->
296
+ <button class="btn" data-value="1">1</button>
297
+ <button class="btn" data-value="2">2</button>
298
+ <button class="btn" data-value="3">3</button>
299
+ <button class="btn operator" data-action="subtract">-</button>
300
+ <button class="btn operator" data-action="e">e</button>
301
+
302
+ <!-- Sixth Row -->
303
+ <button class="btn" data-value="0">0</button>
304
+ <button class="btn" data-value=".">.</button>
305
+ <button class="btn operator" data-action="add">+</button>
306
+ <button class="btn equals" data-action="equals">=</button>
307
+ </div>
308
+ </div>
309
+
310
+ <div class="footer">
311
+ <a href="https://huggingface.co/spaces/akhaliq/anycoder" target="_blank">Built with anycoder</a>
312
+ </div>
313
+ </div>
314
+
315
+ <script>
316
+ document.addEventListener('DOMContentLoaded', function() {
317
+ const resultDisplay = document.getElementById('result');
318
+ const expressionDisplay = document.getElementById('expression');
319
+ const themeToggle = document.getElementById('themeToggle');
320
+ const buttons = document.querySelectorAll('.btn');
321
+
322
+ let currentInput = '0';
323
+ let previousInput = '';
324
+ let operation = null;
325
+ let resetInput = false;
326
+
327
+ // Theme Toggle
328
+ themeToggle.addEventListener('click', function() {
329
+ document.body.classList.toggle('light-theme');
330
+ if (document.body.classList.contains('light-theme')) {
331
+ themeToggle.innerHTML = '<i class="fas fa-sun"></i> Light';
332
+ } else {
333
+ themeToggle.innerHTML = '<i class="fas fa-moon"></i> Dark';
334
+ }
335
+ });
336
+
337
+ // Button Click Handler
338
+ buttons.forEach(button => {
339
+ button.addEventListener('click', function() {
340
+ const action = this.dataset.action;
341
+ const value = this.dataset.value;
342
+
343
+ if (value) {
344
+ inputNumber(value);
345
+ } else if (action) {
346
+ handleAction(action);
347
+ }
348
+
349
+ updateDisplay();
350
+ });
351
+ });
352
+
353
+ // Keyboard Support
354
+ document.addEventListener('keydown', function(event) {
355
+ const key = event.key;
356
+
357
+ if (/[0-9]/.test(key)) {
358
+ inputNumber(key);
359
+ } else if (key === '.') {
360
+ inputNumber(key);
361
+ } else if (key === '+') {
362
+ handleAction('add');
363
+ } else if (key === '-') {
364
+ handleAction('subtract');
365
+ } else if (key === '*') {
366
+ handleAction('multiply');
367
+ } else if (key === '/') {
368
+ event.preventDefault();
369
+ handleAction('divide');
370
+ } else if (key === 'Enter' || key === '=') {
371
+ event.preventDefault();
372
+ handleAction('equals');
373
+ } else if (key === 'Escape' || key === 'Delete') {
374
+ handleAction('clear');
375
+ } else if (key === 'Backspace') {
376
+ handleAction('backspace');
377
+ }
378
+
379
+ updateDisplay();
380
+ });
381
+
382
+ function inputNumber(num) {
383
+ if (currentInput === '0' || resetInput) {
384
+ currentInput = num;
385
+ resetInput = false;
386
+ } else {
387
+ currentInput += num;
388
+ }
389
+ }
390
+
391
+ function handleAction(action) {
392
+ switch (action) {
393
+ case 'add':
394
+ case 'subtract':
395
+ case 'multiply':
396
+ case 'divide':
397
+ case 'power':
398
+ if (operation !== null && !resetInput) {
399
+ calculate();
400
+ }
401
+ previousInput = currentInput;
402
+ operation = action;
403
+ resetInput = true;
404
+ break;
405
+
406
+ case 'equals':
407
+ if (operation !== null) {
408
+ calculate();
409
+ operation = null;
410
+ previousInput = '';
411
+ }
412
+ break;
413
+
414
+ case 'clear':
415
+ currentInput = '0';
416
+ previousInput = '';
417
+ operation = null;
418
+ break;
419
+
420
+ case 'sin':
421
+ currentInput = Math.sin(parseFloat(currentInput) * Math.PI / 180).toString();
422
+ resetInput = true;
423
+ break;
424
+
425
+ case 'cos':
426
+ currentInput = Math.cos(parseFloat(currentInput) * Math.PI / 180).toString();
427
+ resetInput = true;
428
+ break;
429
+
430
+ case 'tan':
431
+ currentInput = Math.tan(parseFloat(currentInput) * Math.PI / 180).toString();
432
+ resetInput = true;
433
+ break;
434
+
435
+ case 'asin':
436
+ currentInput = (Math.asin(parseFloat(currentInput)) * 180 / Math.PI).toString();
437
+ resetInput = true;
438
+ break;
439
+
440
+ case 'acos':
441
+ currentInput = (Math.acos(parseFloat(currentInput)) * 180 / Math.PI).toString();
442
+ resetInput = true;
443
+ break;
444
+
445
+ case 'atan':
446
+ currentInput = (Math.atan(parseFloat(currentInput)) * 180 / Math.PI).toString();
447
+ resetInput = true;
448
+ break;
449
+
450
+ case 'log':
451
+ currentInput = Math.log10(parseFloat(currentInput)).toString();
452
+ resetInput = true;
453
+ break;
454
+
455
+ case 'ln':
456
+ currentInput = Math.log(parseFloat(currentInput)).toString();
457
+ resetInput = true;
458
+ break;
459
+
460
+ case 'sqrt':
461
+ currentInput = Math.sqrt(parseFloat(currentInput)).toString();
462
+ resetInput = true;
463
+ break;
464
+
465
+ case 'pi':
466
+ currentInput = Math.PI.toString();
467
+ resetInput = true;
468
+ break;
469
+
470
+ case 'e':
471
+ currentInput = Math.E.toString();
472
+ resetInput = true;
473
+ break;
474
+ }
475
+ }
476
+
477
+ function calculate() {
478
+ let result;
479
+ const prev = parseFloat(previousInput);
480
+ const current = parseFloat(currentInput);
481
+
482
+ if (isNaN(prev) || isNaN(current)) return;
483
+
484
+ switch (operation) {
485
+ case 'add':
486
+ result = prev + current;
487
+ break;
488
+ case 'subtract':
489
+ result = prev - current;
490
+ break;
491
+ case 'multiply':
492
+ result = prev * current;
493
+ break;
494
+ case 'divide':
495
+ if (current === 0) {
496
+ result = 'Error';
497
+ } else {
498
+ result = prev / current;
499
+ }
500
+ break;
501
+ case 'power':
502
+ result = Math.pow(prev, current);
503
+ break;
504
+ default:
505
+ return;
506
+ }
507
+
508
+ currentInput = result.toString();
509
+ resetInput = true;
510
+ }
511
+
512
+ function updateDisplay() {
513
+ resultDisplay.textContent = currentInput;
514
+
515
+ if (operation !== null) {
516
+ let operatorSymbol;
517
+ switch (operation) {
518
+ case 'add': operatorSymbol = '+'; break;
519
+ case 'subtract': operatorSymbol = '-'; break;
520
+ case 'multiply': operatorSymbol = '×'; break;
521
+ case 'divide': operatorSymbol = '÷'; break;
522
+ case 'power': operatorSymbol = '^'; break;
523
+ default: operatorSymbol = '';
524
+ }
525
+ expressionDisplay.textContent = `${previousInput} ${operatorSymbol}`;
526
+ } else {
527
+ expressionDisplay.textContent = '';
528
+ }
529
+ }
530
+ });
531
+ </script>
532
+ </body>
533
+ </html>