Hugging Face's logo

Spaces:
Amin44
/
app
Running

App Files Community
Amin44 commited on
Commit
0a7e44a
·
verified ·
1 Parent(s): d80fcc8

🐳 11/02 - 23:01 - نعم

Browse files
Files changed (2) hide show
  1. calculator.html +380 -0
  2. index.html +2 -2
calculator.html ADDED
@@ -0,0 +1,380 @@
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
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>Calculator - Text2Video AI</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=Poppins:wght@300;400;500;600;700&display=swap');
11
+
12
+ body {
13
+ font-family: 'Poppins', sans-serif;
14
+ background-color: #f8fafc;
15
+ }
16
+
17
+ .gradient-bg {
18
+ background: linear-gradient(135deg, #6e8efb, #a777e3);
19
+ }
20
+
21
+ .calculator-btn {
22
+ transition: all 0.2s ease;
23
+ font-weight: 500;
24
+ }
25
+
26
+ .calculator-btn:active {
27
+ transform: scale(0.95);
28
+ }
29
+
30
+ .display-screen {
31
+ background: linear-gradient(135deg, #1e293b, #0f172a);
32
+ box-shadow: inset 0 2px 4px rgba(0,0,0,0.3);
33
+ }
34
+
35
+ .btn-number {
36
+ background: white;
37
+ color: #334155;
38
+ }
39
+
40
+ .btn-number:hover {
41
+ background: #f1f5f9;
42
+ transform: translateY(-2px);
43
+ box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1);
44
+ }
45
+
46
+ .btn-operator {
47
+ background: #6e8efb;
48
+ color: white;
49
+ }
50
+
51
+ .btn-operator:hover {
52
+ background: #5a7de8;
53
+ transform: translateY(-2px);
54
+ box-shadow: 0 4px 6px -1px rgba(110, 142, 251, 0.3);
55
+ }
56
+
57
+ .btn-action {
58
+ background: #a777e3;
59
+ color: white;
60
+ }
61
+
62
+ .btn-action:hover {
63
+ background: #9566d0;
64
+ transform: translateY(-2px);
65
+ box-shadow: 0 4px 6px -1px rgba(167, 119, 227, 0.3);
66
+ }
67
+
68
+ .btn-equals {
69
+ background: linear-gradient(135deg, #6e8efb, #a777e3);
70
+ color: white;
71
+ }
72
+
73
+ .btn-equals:hover {
74
+ opacity: 0.9;
75
+ transform: translateY(-2px);
76
+ box-shadow: 0 4px 6px -1px rgba(110, 142, 251, 0.4);
77
+ }
78
+
79
+ .history-item {
80
+ animation: slideIn 0.3s ease;
81
+ }
82
+
83
+ @keyframes slideIn {
84
+ from {
85
+ opacity: 0;
86
+ transform: translateX(-10px);
87
+ }
88
+ to {
89
+ opacity: 1;
90
+ transform: translateX(0);
91
+ }
92
+ }
93
+
94
+ .calculator-card {
95
+ box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 10px 10px -5px rgba(0, 0, 0, 0.04);
96
+ }
97
+ </style>
98
+ </head>
99
+ <body class="min-h-screen">
100
+ <div class="gradient-bg text-white">
101
+ <div class="container mx-auto px-4 py-8">
102
+ <header class="flex justify-between items-center">
103
+ <a href="index.html" class="flex items-center space-x-2 hover:opacity-80 transition">
104
+ <i class="fas fa-video text-2xl"></i>
105
+ <h1 class="text-2xl font-bold">Text2Video AI</h1>
106
+ </a>
107
+ <nav class="hidden md:flex space-x-6">
108
+ <a href="index.html" class="hover:underline">Home</a>
109
+ <a href="#" class="hover:underline">Templates</a>
110
+ <a href="#" class="hover:underline">Pricing</a>
111
+ <a href="calculator.html" class="hover:underline font-semibold border-b-2 border-white">Calculator</a>
112
+ </nav>
113
+ <button class="md:hidden text-xl">
114
+ <i class="fas fa-bars"></i>
115
+ </button>
116
+ </header>
117
+ </div>
118
+ </div>
119
+
120
+ <main class="container mx-auto px-4 py-12">
121
+ <div class="max-w-4xl mx-auto">
122
+ <h2 class="text-3xl font-bold text-center mb-8 text-gray-800">Scientific Calculator</h2>
123
+
124
+ <div class="grid grid-cols-1 lg:grid-cols-3 gap-8">
125
+ <!-- Calculator -->
126
+ <div class="lg:col-span-2">
127
+ <div class="calculator-card bg-white rounded-2xl overflow-hidden">
128
+ <!-- Display -->
129
+ <div class="display-screen p-6 text-right">
130
+ <div id="previous-operation" class="text-gray-400 text-sm h-6 mb-1 font-mono"></div>
131
+ <div id="display" class="text-white text-4xl md:text-5xl font-bold font-mono overflow-hidden">0</div>
132
+ </div>
133
+
134
+ <!-- Buttons -->
135
+ <div class="p-4 grid grid-cols-4 gap-3 bg-gray-50">
136
+ <!-- Row 1 -->
137
+ <button class="calculator-btn btn-action p-4 rounded-xl text-lg" onclick="clearAll()">AC</button>
138
+ <button class="calculator-btn btn-action p-4 rounded-xl text-lg" onclick="clearEntry()">CE</button>
139
+ <button class="calculator-btn btn-operator p-4 rounded-xl text-lg" onclick="appendOperator('%')">%</button>
140
+ <button class="calculator-btn btn-operator p-4 rounded-xl text-lg" onclick="appendOperator('/')">÷</button>
141
+
142
+ <!-- Row 2 -->
143
+ <button class="calculator-btn btn-number p-4 rounded-xl text-xl" onclick="appendNumber('7')">7</button>
144
+ <button class="calculator-btn btn-number p-4 rounded-xl text-xl" onclick="appendNumber('8')">8</button>
145
+ <button class="calculator-btn btn-number p-4 rounded-xl text-xl" onclick="appendNumber('9')">9</button>
146
+ <button class="calculator-btn btn-operator p-4 rounded-xl text-lg" onclick="appendOperator('*')">×</button>
147
+
148
+ <!-- Row 3 -->
149
+ <button class="calculator-btn btn-number p-4 rounded-xl text-xl" onclick="appendNumber('4')">4</button>
150
+ <button class="calculator-btn btn-number p-4 rounded-xl text-xl" onclick="appendNumber('5')">5</button>
151
+ <button class="calculator-btn btn-number p-4 rounded-xl text-xl" onclick="appendNumber('6')">6</button>
152
+ <button class="calculator-btn btn-operator p-4 rounded-xl text-lg" onclick="appendOperator('-')">−</button>
153
+
154
+ <!-- Row 4 -->
155
+ <button class="calculator-btn btn-number p-4 rounded-xl text-xl" onclick="appendNumber('1')">1</button>
156
+ <button class="calculator-btn btn-number p-4 rounded-xl text-xl" onclick="appendNumber('2')">2</button>
157
+ <button class="calculator-btn btn-number p-4 rounded-xl text-xl" onclick="appendNumber('3')">3</button>
158
+ <button class="calculator-btn btn-operator p-4 rounded-xl text-lg" onclick="appendOperator('+')">+</button>
159
+
160
+ <!-- Row 5 -->
161
+ <button class="calculator-btn btn-number p-4 rounded-xl text-xl" onclick="appendNumber('0')">0</button>
162
+ <button class="calculator-btn btn-number p-4 rounded-xl text-xl" onclick="appendDecimal()">.</button>
163
+ <button class="calculator-btn btn-action p-4 rounded-xl text-lg" onclick="toggleSign()">±</button>
164
+ <button class="calculator-btn btn-equals p-4 rounded-xl text-xl font-bold" onclick="calculate()">=</button>
165
+ </div>
166
+ </div>
167
+
168
+ <!-- Keyboard shortcuts info -->
169
+ <div class="mt-6 bg-purple-50 p-4 rounded-xl border border-purple-100">
170
+ <h3 class="text-purple-800 font-semibold mb-2"><i class="fas fa-keyboard mr-2"></i>Keyboard Shortcuts</h3>
171
+ <p class="text-sm text-purple-700">Use number keys, operators (+, -, *, /), Enter (=), Escape (AC), Backspace (CE)</p>
172
+ </div>
173
+ </div>
174
+
175
+ <!-- History -->
176
+ <div class="lg:col-span-1">
177
+ <div class="bg-white rounded-2xl shadow-lg p-6 h-full">
178
+ <div class="flex justify-between items-center mb-4">
179
+ <h3 class="text-lg font-semibold text-gray-800">History</h3>
180
+ <button onclick="clearHistory()" class="text-sm text-red-500 hover:text-red-700">
181
+ <i class="fas fa-trash-alt"></i> Clear
182
+ </button>
183
+ </div>
184
+ <div id="history-list" class="space-y-2 max-h-96 overflow-y-auto">
185
+ <p class="text-gray-400 text-center py-8">No calculations yet</p>
186
+ </div>
187
+ </div>
188
+ </div>
189
+ </div>
190
+ </div>
191
+ </main>
192
+
193
+ <footer class="bg-gray-900 text-white py-8 mt-12">
194
+ <div class="container mx-auto px-4 text-center">
195
+ <p class="text-gray-400">© 2023 Text2Video AI. All rights reserved.</p>
196
+ </div>
197
+ </footer>
198
+
199
+ <script>
200
+ let display = document.getElementById('display');
201
+ let previousOperation = document.getElementById('previous-operation');
202
+ let currentValue = '0';
203
+ let previousValue = '';
204
+ let operator = '';
205
+ let shouldResetDisplay = false;
206
+ let history = [];
207
+
208
+ function updateDisplay() {
209
+ display.textContent = currentValue;
210
+ if (previousValue && operator) {
211
+ previousOperation.textContent = previousValue + ' ' + operator;
212
+ } else {
213
+ previousOperation.textContent = '';
214
+ }
215
+ }
216
+
217
+ function appendNumber(num) {
218
+ if (currentValue === '0' || shouldResetDisplay) {
219
+ currentValue = num;
220
+ shouldResetDisplay = false;
221
+ } else {
222
+ if (currentValue.length < 12) {
223
+ currentValue += num;
224
+ }
225
+ }
226
+ updateDisplay();
227
+ }
228
+
229
+ function appendDecimal() {
230
+ if (shouldResetDisplay) {
231
+ currentValue = '0.';
232
+ shouldResetDisplay = false;
233
+ } else if (!currentValue.includes('.')) {
234
+ currentValue += '.';
235
+ }
236
+ updateDisplay();
237
+ }
238
+
239
+ function appendOperator(op) {
240
+ if (operator && !shouldResetDisplay) {
241
+ calculate();
242
+ }
243
+ previousValue = currentValue;
244
+ operator = op;
245
+ shouldResetDisplay = true;
246
+ updateDisplay();
247
+ }
248
+
249
+ function calculate() {
250
+ if (!operator || !previousValue) return;
251
+
252
+ let prev = parseFloat(previousValue);
253
+ let current = parseFloat(currentValue);
254
+ let result;
255
+
256
+ switch(operator) {
257
+ case '+':
258
+ result = prev + current;
259
+ break;
260
+ case '-':
261
+ result = prev - current;
262
+ break;
263
+ case '*':
264
+ result = prev * current;
265
+ break;
266
+ case '/':
267
+ if (current === 0) {
268
+ alert('Cannot divide by zero!');
269
+ return;
270
+ }
271
+ result = prev / current;
272
+ break;
273
+ case '%':
274
+ result = prev % current;
275
+ break;
276
+ default:
277
+ return;
278
+ }
279
+
280
+ // Format result
281
+ let resultString = result.toString();
282
+ if (resultString.length > 12) {
283
+ resultString = result.toExponential(6);
284
+ }
285
+
286
+ // Add to history
287
+ addToHistory(previousValue + ' ' + operator + ' ' + currentValue + ' = ' + resultString);
288
+
289
+ currentValue = resultString;
290
+ operator = '';
291
+ previousValue = '';
292
+ shouldResetDisplay = true;
293
+ updateDisplay();
294
+ }
295
+
296
+ function clearAll() {
297
+ currentValue = '0';
298
+ previousValue = '';
299
+ operator = '';
300
+ shouldResetDisplay = false;
301
+ updateDisplay();
302
+ }
303
+
304
+ function clearEntry() {
305
+ currentValue = '0';
306
+ updateDisplay();
307
+ }
308
+
309
+ function toggleSign() {
310
+ if (currentValue !== '0') {
311
+ if (currentValue.startsWith('-')) {
312
+ currentValue = currentValue.substring(1);
313
+ } else {
314
+ currentValue = '-' + currentValue;
315
+ }
316
+ updateDisplay();
317
+ }
318
+ }
319
+
320
+ function addToHistory(calculation) {
321
+ history.unshift(calculation);
322
+ if (history.length > 10) history.pop();
323
+ updateHistoryDisplay();
324
+ }
325
+
326
+ function updateHistoryDisplay() {
327
+ const historyList = document.getElementById('history-list');
328
+ if (history.length === 0) {
329
+ historyList.innerHTML = '<p class="text-gray-400 text-center py-8">No calculations yet</p>';
330
+ return;
331
+ }
332
+
333
+ historyList.innerHTML = history.map((item, index) => `
334
+ <div class="history-item bg-gray-50 p-3 rounded-lg text-sm text-gray-700 font-mono cursor-pointer hover:bg-purple-50 transition" onclick="loadFromHistory('${item}')">
335
+ ${item}
336
+ </div>
337
+ `).join('');
338
+ }
339
+
340
+ function loadFromHistory(item) {
341
+ // Extract result from "a + b = result"
342
+ const parts = item.split(' = ');
343
+ if (parts.length === 2) {
344
+ currentValue = parts[1];
345
+ updateDisplay();
346
+ }
347
+ }
348
+
349
+ function clearHistory() {
350
+ history = [];
351
+ updateHistoryDisplay();
352
+ }
353
+
354
+ // Keyboard support
355
+ document.addEventListener('keydown', function(e) {
356
+ if (e.key >= '0' && e.key <= '9') {
357
+ appendNumber(e.key);
358
+ } else if (e.key === '.') {
359
+ appendDecimal();
360
+ } else if (e.key === '+' || e.key === '-' || e.key === '*' || e.key === '/') {
361
+ appendOperator(e.key);
362
+ } else if (e.key === 'Enter' || e.key === '=') {
363
+ e.preventDefault();
364
+ calculate();
365
+ } else if (e.key === 'Escape') {
366
+ clearAll();
367
+ } else if (e.key === 'Backspace') {
368
+ if (currentValue.length > 1) {
369
+ currentValue = currentValue.slice(0, -1);
370
+ } else {
371
+ currentValue = '0';
372
+ }
373
+ updateDisplay();
374
+ } else if (e.key === '%') {
375
+ appendOperator('%');
376
+ }
377
+ });
378
+ </script>
379
+ </body>
380
+ </html>
index.html CHANGED
@@ -138,10 +138,10 @@
138
  <h1 class="text-2xl font-bold">Text2Video AI</h1>
139
  </div>
140
  <nav class="hidden md:flex space-x-6">
141
- <a href="#" class="hover:underline">Home</a>
142
  <a href="#" class="hover:underline">Templates</a>
143
  <a href="#" class="hover:underline">Pricing</a>
144
- <a href="#" class="hover:underline">About</a>
145
  </nav>
146
  <button class="md:hidden text-xl">
147
  <i class="fas fa-bars"></i>
 
138
  <h1 class="text-2xl font-bold">Text2Video AI</h1>
139
  </div>
140
  <nav class="hidden md:flex space-x-6">
141
+ <a href="index.html" class="hover:underline">Home</a>
142
  <a href="#" class="hover:underline">Templates</a>
143
  <a href="#" class="hover:underline">Pricing</a>
144
+ <a href="calculator.html" class="hover:underline">Calculator</a>
145
  </nav>
146
  <button class="md:hidden text-xl">
147
  <i class="fas fa-bars"></i>