Hugging Face's logo

Spaces:
Atibroo
/
ala3
Running

App Files Community
Atibroo commited on
Commit
5826f27
·
verified ·
1 Parent(s): 45fb0ec

اله حاسبة للاندرويد متطورة ومزينة بلوقو جميل بعنوان 𝔼𝕃ℍ𝔸𝔻𝕀 الوقو يكون صغير جدا - Initial Deployment

Browse files
Files changed (2) hide show
  1. README.md +7 -5
  2. index.html +409 -19
README.md CHANGED
@@ -1,10 +1,12 @@
1
  ---
2
- title: Ala3
3
- emoji: 🏃
4
- colorFrom: green
5
- colorTo: gray
6
  sdk: static
7
  pinned: false
 
 
8
  ---
9
 
10
- Check out the configuration reference at https://huggingface.co/docs/hub/spaces-config-reference
 
1
  ---
2
+ title: ala3
3
+ emoji: 🐳
4
+ colorFrom: yellow
5
+ colorTo: green
6
  sdk: static
7
  pinned: false
8
+ tags:
9
+ - deepsite
10
  ---
11
 
12
+ Check out the configuration reference at https://huggingface.co/docs/hub/spaces-config-reference
index.html CHANGED
@@ -1,19 +1,409 @@
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>𝔼𝕃ℍ𝔸𝔻𝕀 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=Poppins:wght@300;400;500;600;700&display=swap');
11
+
12
+ body {
13
+ font-family: 'Poppins', sans-serif;
14
+ background: linear-gradient(135deg, #f5f7fa 0%, #c3cfe2 100%);
15
+ }
16
+
17
+ .calculator {
18
+ box-shadow: 0 10px 30px rgba(0, 0, 0, 0.2);
19
+ border-radius: 20px;
20
+ overflow: hidden;
21
+ background: linear-gradient(145deg, #ffffff, #f0f0f0);
22
+ }
23
+
24
+ .display {
25
+ background: rgba(0, 0, 0, 0.8);
26
+ color: white;
27
+ text-shadow: 0 0 5px rgba(255, 255, 255, 0.3);
28
+ }
29
+
30
+ .btn {
31
+ transition: all 0.2s ease;
32
+ box-shadow: inset 0 -3px 0 rgba(0, 0, 0, 0.1);
33
+ }
34
+
35
+ .btn:active {
36
+ transform: translateY(2px);
37
+ box-shadow: inset 0 -1px 0 rgba(0, 0, 0, 0.1);
38
+ }
39
+
40
+ .btn-operator {
41
+ background: linear-gradient(145deg, #ff9500, #ff7b00);
42
+ color: white;
43
+ }
44
+
45
+ .btn-function {
46
+ background: linear-gradient(145deg, #a5a5a5, #8e8e8e);
47
+ color: white;
48
+ }
49
+
50
+ .btn-number {
51
+ background: linear-gradient(145deg, #f0f0f0, #e0e0e0);
52
+ }
53
+
54
+ .btn-equals {
55
+ background: linear-gradient(145deg, #4cd964, #34c759);
56
+ color: white;
57
+ }
58
+
59
+ .logo {
60
+ font-family: 'Poppins', sans-serif;
61
+ font-weight: 600;
62
+ font-size: 0.9rem;
63
+ color: #ff9500;
64
+ text-shadow: 0 0 5px rgba(255, 149, 0, 0.3);
65
+ }
66
+
67
+ .history-btn {
68
+ background: rgba(255, 255, 255, 0.2);
69
+ backdrop-filter: blur(5px);
70
+ }
71
+
72
+ .history-panel {
73
+ transform: translateX(100%);
74
+ transition: transform 0.3s ease;
75
+ backdrop-filter: blur(10px);
76
+ background: rgba(255, 255, 255, 0.8);
77
+ }
78
+
79
+ .history-panel.active {
80
+ transform: translateX(0);
81
+ }
82
+ </style>
83
+ </head>
84
+ <body class="min-h-screen flex items-center justify-center p-4">
85
+ <div class="calculator w-full max-w-xs relative overflow-visible">
86
+ <!-- Logo -->
87
+ <div class="absolute -top-6 left-1/2 transform -translate-x-1/2 bg-white px-3 py-1 rounded-full shadow-md z-10 logo">
88
+ 𝔼𝕃ℍ𝔸𝔻𝕀
89
+ </div>
90
+
91
+ <!-- Display -->
92
+ <div class="display p-4 text-right">
93
+ <div class="text-xs text-gray-400 h-4" id="history-display"></div>
94
+ <div class="text-3xl font-semibold truncate" id="display">0</div>
95
+ </div>
96
+
97
+ <!-- History Button -->
98
+ <button id="history-btn" class="history-btn absolute top-4 left-4 text-white rounded-full w-8 h-8 flex items-center justify-center">
99
+ <i class="fas fa-history"></i>
100
+ </button>
101
+
102
+ <!-- Keypad -->
103
+ <div class="grid grid-cols-4 gap-1 p-2 bg-gray-100 rounded-b-xl">
104
+ <!-- Row 1 -->
105
+ <button class="btn btn-function rounded-lg p-4 text-sm" onclick="clearAll()">AC</button>
106
+ <button class="btn btn-function rounded-lg p-4" onclick="toggleSign()">+/-</button>
107
+ <button class="btn btn-function rounded-lg p-4" onclick="percentage()">%</button>
108
+ <button class="btn btn-operator rounded-lg p-4" onclick="appendOperator('/')">÷</button>
109
+
110
+ <!-- Row 2 -->
111
+ <button class="btn btn-number rounded-lg p-4" onclick="appendNumber('7')">7</button>
112
+ <button class="btn btn-number rounded-lg p-4" onclick="appendNumber('8')">8</button>
113
+ <button class="btn btn-number rounded-lg p-4" onclick="appendNumber('9')">9</button>
114
+ <button class="btn btn-operator rounded-lg p-4" onclick="appendOperator('*')">×</button>
115
+
116
+ <!-- Row 3 -->
117
+ <button class="btn btn-number rounded-lg p-4" onclick="appendNumber('4')">4</button>
118
+ <button class="btn btn-number rounded-lg p-4" onclick="appendNumber('5')">5</button>
119
+ <button class="btn btn-number rounded-lg p-4" onclick="appendNumber('6')">6</button>
120
+ <button class="btn btn-operator rounded-lg p-4" onclick="appendOperator('-')">−</button>
121
+
122
+ <!-- Row 4 -->
123
+ <button class="btn btn-number rounded-lg p-4" onclick="appendNumber('1')">1</button>
124
+ <button class="btn btn-number rounded-lg p-4" onclick="appendNumber('2')">2</button>
125
+ <button class="btn btn-number rounded-lg p-4" onclick="appendNumber('3')">3</button>
126
+ <button class="btn btn-operator rounded-lg p-4" onclick="appendOperator('+')">+</button>
127
+
128
+ <!-- Row 5 -->
129
+ <button class="btn btn-number rounded-lg p-4 col-span-2" onclick="appendNumber('0')">0</button>
130
+ <button class="btn btn-number rounded-lg p-4" onclick="appendDecimal()">.</button>
131
+ <button class="btn btn-equals rounded-lg p-4" onclick="calculate()">=</button>
132
+ </div>
133
+
134
+ <!-- Scientific Functions (Hidden by default) -->
135
+ <div class="grid grid-cols-4 gap-1 p-2 bg-gray-100 hidden" id="scientific-functions">
136
+ <button class="btn btn-function rounded-lg p-3 text-sm" onclick="scientificFunction('sin')">sin</button>
137
+ <button class="btn btn-function rounded-lg p-3 text-sm" onclick="scientificFunction('cos')">cos</button>
138
+ <button class="btn btn-function rounded-lg p-3 text-sm" onclick="scientificFunction('tan')">tan</button>
139
+ <button class="btn btn-function rounded-lg p-3 text-sm" onclick="scientificFunction('log')">log</button>
140
+
141
+ <button class="btn btn-function rounded-lg p-3 text-sm" onclick="scientificFunction('sqrt')">√</button>
142
+ <button class="btn btn-function rounded-lg p-3 text-sm" onclick="scientificFunction('pow')">x^y</button>
143
+ <button class="btn btn-function rounded-lg p-3 text-sm" onclick="scientificFunction('pi')">π</button>
144
+ <button class="btn btn-function rounded-lg p-3 text-sm" onclick="scientificFunction('e')">e</button>
145
+ </div>
146
+
147
+ <!-- Toggle Scientific -->
148
+ <button class="btn btn-function w-full rounded-b-lg p-2 text-sm hidden" id="toggle-scientific" onclick="toggleScientific()">
149
+ <i class="fas fa-flask"></i> Scientific
150
+ </button>
151
+
152
+ <!-- History Panel -->
153
+ <div class="history-panel absolute top-0 right-0 h-full w-3/4 rounded-r-xl p-4 shadow-lg">
154
+ <div class="flex justify-between items-center mb-4">
155
+ <h3 class="font-semibold text-lg">History</h3>
156
+ <button id="close-history" class="text-gray-500">
157
+ <i class="fas fa-times"></i>
158
+ </button>
159
+ </div>
160
+ <ul class="space-y-2 max-h-64 overflow-y-auto" id="history-list">
161
+ <!-- History items will be added here -->
162
+ </ul>
163
+ <button class="btn btn-function w-full mt-4 p-2 rounded-lg text-sm" onclick="clearHistory()">
164
+ Clear History
165
+ </button>
166
+ </div>
167
+ </div>
168
+
169
+ <script>
170
+ // Calculator state
171
+ let currentInput = '0';
172
+ let previousInput = '';
173
+ let operation = null;
174
+ let resetInput = false;
175
+ let calculationHistory = [];
176
+
177
+ // DOM elements
178
+ const display = document.getElementById('display');
179
+ const historyDisplay = document.getElementById('history-display');
180
+ const historyList = document.getElementById('history-list');
181
+ const historyBtn = document.getElementById('history-btn');
182
+ const closeHistoryBtn = document.getElementById('close-history');
183
+ const historyPanel = document.querySelector('.history-panel');
184
+ const scientificFunctions = document.getElementById('scientific-functions');
185
+ const toggleScientificBtn = document.getElementById('toggle-scientific');
186
+ let scientificMode = false;
187
+
188
+ // Initialize
189
+ updateDisplay();
190
+
191
+ // Display functions
192
+ function updateDisplay() {
193
+ display.textContent = currentInput;
194
+ }
195
+
196
+ function updateHistoryDisplay() {
197
+ if (previousInput && operation) {
198
+ historyDisplay.textContent = `${previousInput} ${operation}`;
199
+ } else {
200
+ historyDisplay.textContent = '';
201
+ }
202
+ }
203
+
204
+ // Input functions
205
+ function appendNumber(number) {
206
+ if (currentInput === '0' || resetInput) {
207
+ currentInput = number;
208
+ resetInput = false;
209
+ } else {
210
+ currentInput += number;
211
+ }
212
+ updateDisplay();
213
+ }
214
+
215
+ function appendDecimal() {
216
+ if (resetInput) {
217
+ currentInput = '0.';
218
+ resetInput = false;
219
+ } else if (!currentInput.includes('.')) {
220
+ currentInput += '.';
221
+ }
222
+ updateDisplay();
223
+ }
224
+
225
+ function appendOperator(op) {
226
+ if (operation !== null && !resetInput) {
227
+ calculate();
228
+ }
229
+ previousInput = currentInput;
230
+ operation = op;
231
+ resetInput = true;
232
+ updateHistoryDisplay();
233
+ }
234
+
235
+ // Calculation functions
236
+ function calculate() {
237
+ let result;
238
+ const prev = parseFloat(previousInput);
239
+ const current = parseFloat(currentInput);
240
+
241
+ if (isNaN(prev) || isNaN(current)) return;
242
+
243
+ switch (operation) {
244
+ case '+':
245
+ result = prev + current;
246
+ break;
247
+ case '-':
248
+ result = prev - current;
249
+ break;
250
+ case '*':
251
+ result = prev * current;
252
+ break;
253
+ case '/':
254
+ result = prev / current;
255
+ break;
256
+ default:
257
+ return;
258
+ }
259
+
260
+ // Add to history
261
+ const historyItem = `${previousInput} ${operation} ${currentInput} = ${result}`;
262
+ calculationHistory.push(historyItem);
263
+ updateHistoryList();
264
+
265
+ currentInput = result.toString();
266
+ operation = null;
267
+ previousInput = '';
268
+ resetInput = true;
269
+ updateDisplay();
270
+ updateHistoryDisplay();
271
+ }
272
+
273
+ function clearAll() {
274
+ currentInput = '0';
275
+ previousInput = '';
276
+ operation = null;
277
+ updateDisplay();
278
+ updateHistoryDisplay();
279
+ }
280
+
281
+ function toggleSign() {
282
+ currentInput = (parseFloat(currentInput) * -1).toString();
283
+ updateDisplay();
284
+ }
285
+
286
+ function percentage() {
287
+ currentInput = (parseFloat(currentInput) / 100).toString();
288
+ updateDisplay();
289
+ }
290
+
291
+ // Scientific functions
292
+ function scientificFunction(func) {
293
+ let result;
294
+ const input = parseFloat(currentInput);
295
+
296
+ switch (func) {
297
+ case 'sin':
298
+ result = Math.sin(input);
299
+ break;
300
+ case 'cos':
301
+ result = Math.cos(input);
302
+ break;
303
+ case 'tan':
304
+ result = Math.tan(input);
305
+ break;
306
+ case 'log':
307
+ result = Math.log10(input);
308
+ break;
309
+ case 'sqrt':
310
+ result = Math.sqrt(input);
311
+ break;
312
+ case 'pow':
313
+ previousInput = currentInput;
314
+ operation = '^';
315
+ resetInput = true;
316
+ updateHistoryDisplay();
317
+ return;
318
+ case 'pi':
319
+ result = Math.PI;
320
+ break;
321
+ case 'e':
322
+ result = Math.E;
323
+ break;
324
+ default:
325
+ return;
326
+ }
327
+
328
+ // Add to history
329
+ const historyItem = `${func}(${currentInput}) = ${result}`;
330
+ calculationHistory.push(historyItem);
331
+ updateHistoryList();
332
+
333
+ currentInput = result.toString();
334
+ updateDisplay();
335
+ }
336
+
337
+ function toggleScientific() {
338
+ scientificMode = !scientificMode;
339
+
340
+ if (scientificMode) {
341
+ scientificFunctions.classList.remove('hidden');
342
+ toggleScientificBtn.textContent = 'Standard';
343
+ toggleScientificBtn.classList.add('rounded-t-none');
344
+ } else {
345
+ scientificFunctions.classList.add('hidden');
346
+ toggleScientificBtn.textContent = 'Scientific';
347
+ toggleScientificBtn.classList.remove('rounded-t-none');
348
+ }
349
+ }
350
+
351
+ // History functions
352
+ function updateHistoryList() {
353
+ historyList.innerHTML = '';
354
+ calculationHistory.slice().reverse().forEach(item => {
355
+ const li = document.createElement('li');
356
+ li.textContent = item;
357
+ li.className = 'text-sm p-2 hover:bg-gray-100 rounded cursor-pointer';
358
+ li.onclick = () => {
359
+ // Extract the result from the history item
360
+ const result = item.split(' = ')[1];
361
+ currentInput = result;
362
+ updateDisplay();
363
+ historyPanel.classList.remove('active');
364
+ };
365
+ historyList.appendChild(li);
366
+ });
367
+ }
368
+
369
+ function clearHistory() {
370
+ calculationHistory = [];
371
+ updateHistoryList();
372
+ }
373
+
374
+ // Event listeners
375
+ historyBtn.addEventListener('click', () => {
376
+ historyPanel.classList.add('active');
377
+ });
378
+
379
+ closeHistoryBtn.addEventListener('click', () => {
380
+ historyPanel.classList.remove('active');
381
+ });
382
+
383
+ // Keyboard support
384
+ document.addEventListener('keydown', (e) => {
385
+ if (e.key >= '0' && e.key <= '9') {
386
+ appendNumber(e.key);
387
+ } else if (e.key === '.') {
388
+ appendDecimal();
389
+ } else if (e.key === '+' || e.key === '-' || e.key === '*' || e.key === '/') {
390
+ appendOperator(e.key);
391
+ } else if (e.key === 'Enter' || e.key === '=') {
392
+ calculate();
393
+ } else if (e.key === 'Escape') {
394
+ clearAll();
395
+ } else if (e.key === '%') {
396
+ percentage();
397
+ } else if (e.key === 'Backspace') {
398
+ currentInput = currentInput.slice(0, -1) || '0';
399
+ updateDisplay();
400
+ }
401
+ });
402
+
403
+ // Show scientific toggle button after a delay to indicate advanced features
404
+ setTimeout(() => {
405
+ toggleScientificBtn.classList.remove('hidden');
406
+ }, 3000);
407
+ </script>
408
+ <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=Atibroo/ala3" style="color: #fff;text-decoration: underline;" target="_blank" >Remix</a></p></body>
409
+ </html>