Hugging Face's logo

Spaces:
Atibroo
/
ala2
Running

App Files Community
ala2
File size: 7,780 Bytes 
53a0668
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
 
<!DOCTYPE html>
<html lang="ar" dir="rtl">
<head>
  <meta charset="UTF-8" />
  <meta name="viewport" content="width=device-width, initial-scale=1.0"/>
  <title>آلة حاسبة جميلة</title>
  <script src="https://cdn.tailwindcss.com"></script>
  <script src="https://kit.fontawesome.com/a076d05399.js" crossorigin="anonymous"></script>
  <style>
    body {
      background: linear-gradient(to bottom right, #1e3c72, #2a5298);
      font-family: 'Tajawal', sans-serif;
    }

    .calc-container {
      max-width: 400px;
      margin: 50px auto;
      border-radius: 20px;
      overflow: hidden;
      box-shadow: 0 10px 25px rgba(0, 0, 0, 0.3);
    }

    .btn:active {
      transform: scale(0.95);
    }

    .logo-text {
      font-family: 'Monotype Corsiva', cursive;
      font-size: 0.5rem; /* تقليل الحجم إلى الحد الأدنى */
      color: #fbbf24;
      margin-top: 2px;
    }
  </style>
  <link href="https://fonts.googleapis.com/css2?family=Tajawal:wght@500&display=swap" rel="stylesheet">
</head>
<body class="text-white min-h-screen flex items-center justify-center">

  <div class="calc-container bg-gray-900 text-white">
    <div class="p-5 bg-gray-800">
      <input type="text" id="display" class="w-full text-right text-3xl p-3 bg-gray-900 border-none outline-none text-white" readonly>
    </div>

    <div class="grid grid-cols-4 gap-2 p-3 bg-gray-900">
      <!-- Row 1 -->
      <button onclick="clearDisplay()" class="btn bg-red-500 hover:bg-red-600 text-white p-4 rounded-xl text-xl transition flex flex-col items-center justify-center">
        <i class="fas fa-trash mb-1"></i>
        <span class="logo-text">𝔼𝕃ℍ𝔸𝔻𝕀</span>
      </button>
      <button onclick="appendOperator('%')" class="btn bg-gray-700 hover:bg-gray-600 text-white p-4 rounded-xl text-xl transition flex flex-col items-center justify-center">
        <span>%</span>
        <span class="logo-text">𝔼𝕃ℍ𝔸𝔻𝕀</span>
      </button>
      <button onclick="appendOperator('÷')" class="btn bg-gray-700 hover:bg-gray-600 text-white p-4 rounded-xl text-xl transition flex flex-col items-center justify-center">
        <span>÷</span>
        <span class="logo-text">𝔼𝕃ℍ𝔸𝔻𝕀</span>
      </button>
      <button onclick="appendOperator('×')" class="btn bg-yellow-500 hover:bg-yellow-600 text-white p-4 rounded-xl text-xl transition flex flex-col items-center justify-center">
        <span>×</span>
        <span class="logo-text">𝔼𝕃ℍ𝔸𝔻𝕀</span>
      </button>

      <!-- Row 2 -->
      <button onclick="appendNumber('7')" class="btn bg-gray-700 hover:bg-gray-600 text-white p-4 rounded-xl text-xl transition flex flex-col items-center justify-center">
        <span>7</span>
        <span class="logo-text">𝔼𝕃ℍ𝔸𝔻𝕀</span>
      </button>
      <button onclick="appendNumber('8')" class="btn bg-gray-700 hover:bg-gray-600 text-white p-4 rounded-xl text-xl transition flex flex-col items-center justify-center">
        <span>8</span>
        <span class="logo-text">𝔼𝕃ℍ𝔸𝔻𝕀</span>
      </button>
      <button onclick="appendNumber('9')" class="btn bg-gray-700 hover:bg-gray-600 text-white p-4 rounded-xl text-xl transition flex flex-col items-center justify-center">
        <span>9</span>
        <span class="logo-text">𝔼𝕃ℍ𝔸𝔻𝕀</span>
      </button>
      <button onclick="appendOperator('-')" class="btn bg-yellow-500 hover:bg-yellow-600 text-white p-4 rounded-xl text-xl transition flex flex-col items-center justify-center">
        <span>-</span>
        <span class="logo-text">𝔼𝕃ℍ𝔸𝔻𝕀</span>
      </button>

      <!-- Row 3 -->
      <button onclick="appendNumber('4')" class="btn bg-gray-700 hover:bg-gray-600 text-white p-4 rounded-xl text-xl transition flex flex-col items-center justify-center">
        <span>4</span>
        <span class="logo-text">𝔼𝕃ℍ𝔸𝔻𝕀</span>
      </button>
      <button onclick="appendNumber('5')" class="btn bg-gray-700 hover:bg-gray-600 text-white p-4 rounded-xl text-xl transition flex flex-col items-center justify-center">
        <span>5</span>
        <span class="logo-text">𝔼𝕃ℍ𝔸𝔻𝕀</span>
      </button>
      <button onclick="appendNumber('6')" class="btn bg-gray-700 hover:bg-gray-600 text-white p-4 rounded-xl text-xl transition flex flex-col items-center justify-center">
        <span>6</span>
        <span class="logo-text">𝔼𝕃ℍ𝔸𝔻𝕀</span>
      </button>
      <button onclick="appendOperator('+')" class="btn bg-yellow-500 hover:bg-yellow-600 text-white p-4 rounded-xl text-xl transition flex flex-col items-center justify-center">
        <span>+</span>
        <span class="logo-text">𝔼𝕃ℍ𝔸𝔻𝕀</span>
      </button>

      <!-- Row 4 -->
      <button onclick="appendNumber('1')" class="btn bg-gray-700 hover:bg-gray-600 text-white p-4 rounded-xl text-xl transition flex flex-col items-center justify-center">
        <span>1</span>
        <span class="logo-text">𝔼𝕃ℍ𝔸𝔻𝕀</span>
      </button>
      <button onclick="appendNumber('2')" class="btn bg-gray-700 hover:bg-gray-600 text-white p-4 rounded-xl text-xl transition flex flex-col items-center justify-center">
        <span>2</span>
        <span class="logo-text">𝔼𝕃ℍ𝔸𝔻𝕀</span>
      </button>
      <button onclick="appendNumber('3')" class="btn bg-gray-700 hover:bg-gray-600 text-white p-4 rounded-xl text-xl transition flex flex-col items-center justify-center">
        <span>3</span>
        <span class="logo-text">𝔼𝕃ℍ𝔸𝔻𝕀</span>
      </button>
      <button onclick="calculate()" class="btn bg-green-500 hover:bg-green-600 text-white p-4 rounded-xl text-xl transition row-span-2 flex flex-col items-center justify-center">
        <span class="text-2xl">=</span>
        <span class="logo-text">𝔼𝕃ℍ𝔸𝔻𝕀</span>
      </button>

      <!-- Row 5 -->
      <button onclick="appendNumber('0')" class="btn bg-gray-700 hover:bg-gray-600 text-white p-4 rounded-xl text-xl transition col-span-2 w-full flex flex-col items-center justify-center">
        <span>0</span>
        <span class="logo-text">𝔼𝕃ℍ𝔸𝔻𝕀</span>
      </button>
      <button onclick="appendNumber('.')" class="btn bg-gray-700 hover:bg-gray-600 text-white p-4 rounded-xl text-xl transition flex flex-col items-center justify-center">
        <span>.</span>
        <span class="logo-text">𝔼𝕃ℍ𝔸𝔻𝕀</span>
      </button>
    </div>
  </div>

  <script>
    let display = document.getElementById('display');

    function appendNumber(num) {
      display.value += num;
    }

    function appendOperator(op) {
      if (op === '÷') op = '/';
      else if (op === '×') op = '*';
      display.value += op;
    }

    function clearDisplay() {
      display.value = '';
    }

    function calculate() {
      try {
        display.value = eval(display.value.replace(/[^-()\d/*+.%]/g, ''));
      } catch (e) {
        display.value = 'خطأ';
      }
    }
  </script>

<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-qwensite.hf.space/logo.svg" alt="qwensite Logo" style="width: 16px; height: 16px; vertical-align: middle;display:inline-block;margin-right:3px;filter:brightness(0) invert(1);"><a href="https://enzostvs-qwensite.hf.space" style="color: #fff;text-decoration: underline;" target="_blank" >QwenSite</a> - 🧬 <a href="https://enzostvs-qwensite.hf.space?remix=Atibroo/ala2" style="color: #fff;text-decoration: underline;" target="_blank" >Remix</a></p></body>
</html>