|
|
<!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"> |
|
|
|
|
|
<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> |
|
|
|
|
|
|
|
|
<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> |
|
|
|
|
|
|
|
|
<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> |
|
|
|
|
|
|
|
|
<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> |
|
|
|
|
|
|
|
|
<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> |
