Hugging Face's logo

Spaces:
and89
/
anycoder-966dbad0
Running

App Files Community
and89 commited on
Commit
a78a69b
·
verified ·
1 Parent(s): d4c79c2

Upload folder using huggingface_hub

Browse files
Files changed (1) hide show
  1. index.html +403 -19
index.html CHANGED
@@ -1,19 +1,403 @@
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>Modern Calc UI</title>
7
+ <!-- Icons -->
8
+ <script src="https://unpkg.com/@phosphor-icons/web@2.0.1/dist/index.js"></script>
9
+ <!-- Font -->
10
+ <link href="https://fonts.googleapis.com/css2?family=Inter:wght@400;600&family=JetBrains+Mono:wght@400;700&display=swap" rel="stylesheet">
11
+
12
+ <style>
13
+ :root {
14
+ --bg-color: #09090b;
15
+ --calc-bg: #1c1c1e;
16
+ --text-primary: #ffffff;
17
+ --text-secondary: #a1a1aa;
18
+ --accent-color: #6366f1;
19
+ --accent-hover: #818cf8;
20
+ --btn-bg: #27272a;
21
+ --btn-hover: #3f3f46;
22
+ --btn-text: #e4e4e7;
23
+ --shadow-soft: 0 10px 15px -3px rgba(0, 0, 0, 0.5);
24
+ --glow: 0 0 20px rgba(99, 102, 241, 0.3);
25
+ }
26
+
27
+ * {
28
+ box-sizing: box-sizing;
29
+ margin: 0;
30
+ padding: 0;
31
+ user-select: none; /* Prevent text selection on buttons */
32
+ }
33
+
34
+ body {
35
+ font-family: 'Inter', sans-serif;
36
+ background-color: var(--bg-color);
37
+ background-image:
38
+ radial-gradient(at 0% 0%, hsla(253,16%,7%,1) 0, transparent 50%),
39
+ radial-gradient(at 50% 0%, hsla(220,100%,62%,1) 0, transparent 50%),
40
+ radial-gradient(at 100% 0%, hsla(340,100%,76%,1) 0, transparent 50%);
41
+ height: 100vh;
42
+ display: flex;
43
+ justify-content: center;
44
+ align-items: center;
45
+ overflow: hidden;
46
+ color: var(--text-primary);
47
+ }
48
+
49
+ /* --- Layout Wrapper --- */
50
+ .wrapper {
51
+ width: 100%;
52
+ max-width: 400px;
53
+ padding: 20px;
54
+ display: flex;
55
+ flex-direction: column;
56
+ gap: 20px;
57
+ }
58
+
59
+ /* --- Header --- */
60
+ .app-header {
61
+ display: flex;
62
+ justify-content: space-between;
63
+ align-items: center;
64
+ padding: 0 10px;
65
+ }
66
+
67
+ .brand {
68
+ font-weight: 600;
69
+ letter-spacing: -0.5px;
70
+ color: var(--text-secondary);
71
+ font-size: 0.9rem;
72
+ }
73
+
74
+ .anycoder-link {
75
+ font-size: 0.85rem;
76
+ color: var(--accent-color);
77
+ text-decoration: none;
78
+ font-weight: 600;
79
+ transition: opacity 0.2s;
80
+ display: flex;
81
+ align-items: center;
82
+ gap: 6px;
83
+ }
84
+
85
+ .anycoder-link:hover {
86
+ opacity: 0.8;
87
+ text-decoration: underline;
88
+ }
89
+
90
+ /* --- Calculator Container --- */
91
+ .calculator {
92
+ background: var(--calc-bg);
93
+ border-radius: 24px;
94
+ padding: 24px;
95
+ box-shadow: var(--shadow-soft);
96
+ border: 1px solid rgba(255, 255, 255, 0.05);
97
+ backdrop-filter: blur(10px);
98
+ }
99
+
100
+ /* --- Display Area --- */
101
+ .display-container {
102
+ height: 120px;
103
+ display: flex;
104
+ flex-direction: column;
105
+ justify-content: flex-end;
106
+ align-items: flex-end;
107
+ margin-bottom: 20px;
108
+ padding: 0 10px;
109
+ position: relative;
110
+ }
111
+
112
+ .previous-operand {
113
+ font-family: 'JetBrains Mono', monospace;
114
+ color: var(--text-secondary);
115
+ font-size: 0.9rem;
116
+ min-height: 20px;
117
+ margin-bottom: 5px;
118
+ opacity: 0.7;
119
+ overflow: hidden;
120
+ white-space: nowrap;
121
+ }
122
+
123
+ .current-operand {
124
+ font-family: 'JetBrains Mono', monospace;
125
+ color: var(--text-primary);
126
+ font-size: 2.5rem;
127
+ font-weight: 700;
128
+ word-break: break-all;
129
+ line-height: 1.2;
130
+ transition: font-size 0.2s ease;
131
+ }
132
+
133
+ /* --- Button Grid --- */
134
+ .buttons-grid {
135
+ display: grid;
136
+ grid-template-columns: repeat(4, 1fr);
137
+ gap: 12px;
138
+ }
139
+
140
+ button {
141
+ background: var(--btn-bg);
142
+ border: none;
143
+ border-radius: 16px;
144
+ height: 60px;
145
+ font-family: 'Inter', sans-serif;
146
+ font-size: 1.2rem;
147
+ font-weight: 500;
148
+ color: var(--btn-text);
149
+ cursor: pointer;
150
+ transition: all 0.15s ease;
151
+ display: flex;
152
+ justify-content: center;
153
+ align-items: center;
154
+ box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1);
155
+ }
156
+
157
+ button:hover {
158
+ background: var(--btn-hover);
159
+ transform: translateY(-2px);
160
+ box-shadow: 0 6px 8px -1px rgba(0, 0, 0, 0.2);
161
+ }
162
+
163
+ button:active {
164
+ transform: translateY(0);
165
+ scale: 0.95;
166
+ }
167
+
168
+ /* Special Button Styles */
169
+ .btn-operator {
170
+ color: var(--accent-color);
171
+ font-weight: 700;
172
+ background: rgba(99, 102, 241, 0.1);
173
+ }
174
+
175
+ .btn-operator:hover {
176
+ background: rgba(99, 102, 241, 0.2);
177
+ }
178
+
179
+ .btn-equals {
180
+ background: var(--accent-color);
181
+ color: white;
182
+ box-shadow: var(--glow);
183
+ }
184
+
185
+ .btn-equals:hover {
186
+ background: var(--accent-hover);
187
+ }
188
+
189
+ .btn-function {
190
+ color: var(--text-secondary);
191
+ font-size: 1rem;
192
+ }
193
+
194
+ .btn-zero {
195
+ grid-column: span 2; /* Zero spans two columns */
196
+ }
197
+
198
+ /* --- Responsive Tweaks --- */
199
+ @media (max-width: 450px) {
200
+ .wrapper {
201
+ padding: 10px;
202
+ }
203
+ .calculator {
204
+ padding: 16px;
205
+ }
206
+ button {
207
+ height: 50px;
208
+ font-size: 1.1rem;
209
+ }
210
+ .current-operand {
211
+ font-size: 2rem;
212
+ }
213
+ }
214
+ </style>
215
+ </head>
216
+ <body>
217
+
218
+ <div class="wrapper">
219
+ <!-- Header Section -->
220
+ <header class="app-header">
221
+ <div class="brand">Calc.UI</div>
222
+ <a href="https://huggingface.co/spaces/akhaliq/anycoder" class="anycoder-link" target="_blank">
223
+ Built with anycoder <phosphor-icon name="arrow-right"></phosphor-icon>
224
+ </a>
225
+ </header>
226
+
227
+ <!-- Main Calculator Unit -->
228
+ <main class="calculator">
229
+
230
+ <!-- Display -->
231
+ <div class="display-container">
232
+ <div class="previous-operand" data-previous></div>
233
+ <div class="current-operand" data-current>0</div>
234
+ </div>
235
+
236
+ <!-- Controls -->
237
+ <div class="buttons-grid">
238
+ <button class="btn-function" onclick="calculator.clear()">
239
+ <phosphor-icon name="trash"></phosphor-icon>
240
+ </button>
241
+ <button class="btn-function" onclick="calculator.delete()">
242
+ <phosphor-icon name="backspace"></phosphor-icon>
243
+ </button>
244
+ <button class="btn-operator" onclick="calculator.chooseOperation('%')">%</button>
245
+ <button class="btn-operator" onclick="calculator.chooseOperation('÷')">÷</button>
246
+
247
+ <button onclick="calculator.appendNumber('7')">7</button>
248
+ <button onclick="calculator.appendNumber('8')">8</button>
249
+ <button onclick="calculator.appendNumber('9')">9</button>
250
+ <button class="btn-operator" onclick="calculator.chooseOperation('*')">×</button>
251
+
252
+ <button onclick="calculator.appendNumber('4')">4</button>
253
+ <button onclick="calculator.appendNumber('5')">5</button>
254
+ <button onclick="calculator.appendNumber('6')">6</button>
255
+ <button class="btn-operator" onclick="calculator.chooseOperation('-')">-</button>
256
+
257
+ <button onclick="calculator.appendNumber('1')">1</button>
258
+ <button onclick="calculator.appendNumber('2')">2</button>
259
+ <button onclick="calculator.appendNumber('3')">3</button>
260
+ <button class="btn-operator" onclick="calculator.chooseOperation('+')">+</button>
261
+
262
+ <button class="btn-zero" onclick="calculator.appendNumber('0')">0</button>
263
+ <button onclick="calculator.appendNumber('.')">.</button>
264
+ <button class="btn-equals" onclick="calculator.compute()">=</button>
265
+ </div>
266
+ </main>
267
+ </div>
268
+
269
+ <script>
270
+ class Calculator {
271
+ constructor(previousOperandTextElement, currentOperandTextElement) {
272
+ this.previousOperandTextElement = previousOperandTextElement;
273
+ this.currentOperandTextElement = currentOperandTextElement;
274
+ this.clear();
275
+ }
276
+
277
+ clear() {
278
+ this.currentOperand = '';
279
+ this.previousOperand = '';
280
+ this.operation = undefined;
281
+ this.updateDisplay();
282
+ }
283
+
284
+ delete() {
285
+ this.currentOperand = this.currentOperand.toString().slice(0, -1);
286
+ this.updateDisplay();
287
+ }
288
+
289
+ appendNumber(number) {
290
+ if (number === '.' && this.currentOperand.includes('.')) return;
291
+ this.currentOperand = this.currentOperand.toString() + number.toString();
292
+ this.updateDisplay();
293
+ }
294
+
295
+ chooseOperation(operation) {
296
+ if (this.currentOperand === '') return;
297
+ if (this.previousOperand !== '') {
298
+ this.compute();
299
+ }
300
+ this.operation = operation;
301
+ this.previousOperand = this.currentOperand;
302
+ this.currentOperand = '';
303
+ this.updateDisplay();
304
+ }
305
+
306
+ compute() {
307
+ let computation;
308
+ const prev = parseFloat(this.previousOperand);
309
+ const current = parseFloat(this.currentOperand);
310
+ if (isNaN(prev) || isNaN(current)) return;
311
+
312
+ switch (this.operation) {
313
+ case '+':
314
+ computation = prev + current;
315
+ break;
316
+ case '-':
317
+ computation = prev - current;
318
+ break;
319
+ case '*':
320
+ computation = prev * current;
321
+ break;
322
+ case '÷':
323
+ if(current === 0) {
324
+ alert("Cannot divide by zero!");
325
+ this.clear();
326
+ return;
327
+ }
328
+ computation = prev / current;
329
+ break;
330
+ case '%':
331
+ computation = prev % current;
332
+ break;
333
+ default:
334
+ return;
335
+ }
336
+ this.currentOperand = computation;
337
+ this.operation = undefined;
338
+ this.previousOperand = '';
339
+ this.updateDisplay();
340
+ }
341
+
342
+ getDisplayNumber(number) {
343
+ const stringNumber = number.toString();
344
+ const integerDigits = parseFloat(stringNumber.split('.')[0]);
345
+ const decimalDigits = stringNumber.split('.')[1];
346
+ let integerDisplay;
347
+ if (isNaN(integerDigits)) {
348
+ integerDisplay = '';
349
+ } else {
350
+ integerDisplay = integerDigits.toLocaleString('en', { maximumFractionDigits: 0 });
351
+ }
352
+ if (decimalDigits != null) {
353
+ return `${integerDisplay}.${decimalDigits}`;
354
+ } else {
355
+ return integerDisplay;
356
+ }
357
+ }
358
+
359
+ updateDisplay() {
360
+ this.currentOperandTextElement.innerText =
361
+ this.getDisplayNumber(this.currentOperand);
362
+ if (this.operation != null) {
363
+ this.previousOperandTextElement.innerText =
364
+ `${this.getDisplayNumber(this.previousOperand)} ${this.operation}`;
365
+ } else {
366
+ this.previousOperandTextElement.innerText = '';
367
+ }
368
+ }
369
+ }
370
+
371
+ const numberElements = document.querySelectorAll('[data-current]');
372
+ const previousOperandTextElement = document.querySelector('[data-previous]');
373
+ const currentOperandTextElement = document.querySelector('[data-current]');
374
+
375
+ const calculator = new Calculator(previousOperandTextElement, currentOperandTextElement);
376
+
377
+ // Keyboard Support
378
+ document.addEventListener('keydown', (e) => {
379
+ if ((e.key >= 0 && e.key <= 9) || e.key === '.') {
380
+ calculator.appendNumber(e.key);
381
+ }
382
+ if (e.key === '+' || e.key === '-') {
383
+ calculator.chooseOperation(e.key);
384
+ }
385
+ if (e.key === '*') {
386
+ calculator.chooseOperation('*');
387
+ }
388
+ if (e.key === '/') {
389
+ calculator.chooseOperation('÷');
390
+ }
391
+ if (e.key === 'Enter' || e.key === '=') {
392
+ calculator.compute();
393
+ }
394
+ if (e.key === 'Backspace') {
395
+ calculator.delete();
396
+ }
397
+ if (e.key === 'Escape') {
398
+ calculator.clear();
399
+ }
400
+ });
401
+ </script>
402
+ </body>
403
+ </html>