Hugging Face's logo

Spaces:
Atibroo
/
ala3
Running

App Files Community
ala3 / index.html
Atibroo's picture
Atibroo
اله حاسبة للاندرويد متطورة ومزينة بلوقو جميل بعنوان 𝔼𝕃ℍ𝔸𝔻𝕀 الوقو يكون صغير جدا - Initial Deployment
5826f27 verified
Raw History Blame Contribute Delete
16.5 kB
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>𝔼𝕃ℍ𝔸𝔻𝕀 Calculator</title>
<script src="https://cdn.tailwindcss.com"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css">
<style>
@import url('https://fonts.googleapis.com/css2?family=Poppins:wght@300;400;500;600;700&display=swap');
body {
font-family: 'Poppins', sans-serif;
background: linear-gradient(135deg, #f5f7fa 0%, #c3cfe2 100%);
}
.calculator {
box-shadow: 0 10px 30px rgba(0, 0, 0, 0.2);
border-radius: 20px;
overflow: hidden;
background: linear-gradient(145deg, #ffffff, #f0f0f0);
}
.display {
background: rgba(0, 0, 0, 0.8);
color: white;
text-shadow: 0 0 5px rgba(255, 255, 255, 0.3);
}
.btn {
transition: all 0.2s ease;
box-shadow: inset 0 -3px 0 rgba(0, 0, 0, 0.1);
}
.btn:active {
transform: translateY(2px);
box-shadow: inset 0 -1px 0 rgba(0, 0, 0, 0.1);
}
.btn-operator {
background: linear-gradient(145deg, #ff9500, #ff7b00);
color: white;
}
.btn-function {
background: linear-gradient(145deg, #a5a5a5, #8e8e8e);
color: white;
}
.btn-number {
background: linear-gradient(145deg, #f0f0f0, #e0e0e0);
}
.btn-equals {
background: linear-gradient(145deg, #4cd964, #34c759);
color: white;
}
.logo {
font-family: 'Poppins', sans-serif;
font-weight: 600;
font-size: 0.9rem;
color: #ff9500;
text-shadow: 0 0 5px rgba(255, 149, 0, 0.3);
}
.history-btn {
background: rgba(255, 255, 255, 0.2);
backdrop-filter: blur(5px);
}
.history-panel {
transform: translateX(100%);
transition: transform 0.3s ease;
backdrop-filter: blur(10px);
background: rgba(255, 255, 255, 0.8);
}
.history-panel.active {
transform: translateX(0);
}
</style>
</head>
<body class="min-h-screen flex items-center justify-center p-4">
<div class="calculator w-full max-w-xs relative overflow-visible">
<!-- Logo -->
<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">
𝔼𝕃ℍ𝔸𝔻𝕀
</div>
<!-- Display -->
<div class="display p-4 text-right">
<div class="text-xs text-gray-400 h-4" id="history-display"></div>
<div class="text-3xl font-semibold truncate" id="display">0</div>
</div>
<!-- History Button -->
<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">
<i class="fas fa-history"></i>
</button>
<!-- Keypad -->
<div class="grid grid-cols-4 gap-1 p-2 bg-gray-100 rounded-b-xl">
<!-- Row 1 -->
<button class="btn btn-function rounded-lg p-4 text-sm" onclick="clearAll()">AC</button>
<button class="btn btn-function rounded-lg p-4" onclick="toggleSign()">+/-</button>
<button class="btn btn-function rounded-lg p-4" onclick="percentage()">%</button>
<button class="btn btn-operator rounded-lg p-4" onclick="appendOperator('/')">÷</button>
<!-- Row 2 -->
<button class="btn btn-number rounded-lg p-4" onclick="appendNumber('7')">7</button>
<button class="btn btn-number rounded-lg p-4" onclick="appendNumber('8')">8</button>
<button class="btn btn-number rounded-lg p-4" onclick="appendNumber('9')">9</button>
<button class="btn btn-operator rounded-lg p-4" onclick="appendOperator('*')">×</button>
<!-- Row 3 -->
<button class="btn btn-number rounded-lg p-4" onclick="appendNumber('4')">4</button>
<button class="btn btn-number rounded-lg p-4" onclick="appendNumber('5')">5</button>
<button class="btn btn-number rounded-lg p-4" onclick="appendNumber('6')">6</button>
<button class="btn btn-operator rounded-lg p-4" onclick="appendOperator('-')">−</button>
<!-- Row 4 -->
<button class="btn btn-number rounded-lg p-4" onclick="appendNumber('1')">1</button>
<button class="btn btn-number rounded-lg p-4" onclick="appendNumber('2')">2</button>
<button class="btn btn-number rounded-lg p-4" onclick="appendNumber('3')">3</button>
<button class="btn btn-operator rounded-lg p-4" onclick="appendOperator('+')">+</button>
<!-- Row 5 -->
<button class="btn btn-number rounded-lg p-4 col-span-2" onclick="appendNumber('0')">0</button>
<button class="btn btn-number rounded-lg p-4" onclick="appendDecimal()">.</button>
<button class="btn btn-equals rounded-lg p-4" onclick="calculate()">=</button>
</div>
<!-- Scientific Functions (Hidden by default) -->
<div class="grid grid-cols-4 gap-1 p-2 bg-gray-100 hidden" id="scientific-functions">
<button class="btn btn-function rounded-lg p-3 text-sm" onclick="scientificFunction('sin')">sin</button>
<button class="btn btn-function rounded-lg p-3 text-sm" onclick="scientificFunction('cos')">cos</button>
<button class="btn btn-function rounded-lg p-3 text-sm" onclick="scientificFunction('tan')">tan</button>
<button class="btn btn-function rounded-lg p-3 text-sm" onclick="scientificFunction('log')">log</button>
<button class="btn btn-function rounded-lg p-3 text-sm" onclick="scientificFunction('sqrt')">√</button>
<button class="btn btn-function rounded-lg p-3 text-sm" onclick="scientificFunction('pow')">x^y</button>
<button class="btn btn-function rounded-lg p-3 text-sm" onclick="scientificFunction('pi')">π</button>
<button class="btn btn-function rounded-lg p-3 text-sm" onclick="scientificFunction('e')">e</button>
</div>
<!-- Toggle Scientific -->
<button class="btn btn-function w-full rounded-b-lg p-2 text-sm hidden" id="toggle-scientific" onclick="toggleScientific()">
<i class="fas fa-flask"></i> Scientific
</button>
<!-- History Panel -->
<div class="history-panel absolute top-0 right-0 h-full w-3/4 rounded-r-xl p-4 shadow-lg">
<div class="flex justify-between items-center mb-4">
<h3 class="font-semibold text-lg">History</h3>
<button id="close-history" class="text-gray-500">
<i class="fas fa-times"></i>
</button>
</div>
<ul class="space-y-2 max-h-64 overflow-y-auto" id="history-list">
<!-- History items will be added here -->
</ul>
<button class="btn btn-function w-full mt-4 p-2 rounded-lg text-sm" onclick="clearHistory()">
Clear History
</button>
</div>
</div>
<script>
// Calculator state
let currentInput = '0';
let previousInput = '';
let operation = null;
let resetInput = false;
let calculationHistory = [];
// DOM elements
const display = document.getElementById('display');
const historyDisplay = document.getElementById('history-display');
const historyList = document.getElementById('history-list');
const historyBtn = document.getElementById('history-btn');
const closeHistoryBtn = document.getElementById('close-history');
const historyPanel = document.querySelector('.history-panel');
const scientificFunctions = document.getElementById('scientific-functions');
const toggleScientificBtn = document.getElementById('toggle-scientific');
let scientificMode = false;
// Initialize
updateDisplay();
// Display functions
function updateDisplay() {
display.textContent = currentInput;
}
function updateHistoryDisplay() {
if (previousInput && operation) {
historyDisplay.textContent = `${previousInput} ${operation}`;
} else {
historyDisplay.textContent = '';
}
}
// Input functions
function appendNumber(number) {
if (currentInput === '0' || resetInput) {
currentInput = number;
resetInput = false;
} else {
currentInput += number;
}
updateDisplay();
}
function appendDecimal() {
if (resetInput) {
currentInput = '0.';
resetInput = false;
} else if (!currentInput.includes('.')) {
currentInput += '.';
}
updateDisplay();
}
function appendOperator(op) {
if (operation !== null && !resetInput) {
calculate();
}
previousInput = currentInput;
operation = op;
resetInput = true;
updateHistoryDisplay();
}
// Calculation functions
function calculate() {
let result;
const prev = parseFloat(previousInput);
const current = parseFloat(currentInput);
if (isNaN(prev) || isNaN(current)) return;
switch (operation) {
case '+':
result = prev + current;
break;
case '-':
result = prev - current;
break;
case '*':
result = prev * current;
break;
case '/':
result = prev / current;
break;
default:
return;
}
// Add to history
const historyItem = `${previousInput} ${operation} ${currentInput} = ${result}`;
calculationHistory.push(historyItem);
updateHistoryList();
currentInput = result.toString();
operation = null;
previousInput = '';
resetInput = true;
updateDisplay();
updateHistoryDisplay();
}
function clearAll() {
currentInput = '0';
previousInput = '';
operation = null;
updateDisplay();
updateHistoryDisplay();
}
function toggleSign() {
currentInput = (parseFloat(currentInput) * -1).toString();
updateDisplay();
}
function percentage() {
currentInput = (parseFloat(currentInput) / 100).toString();
updateDisplay();
}
// Scientific functions
function scientificFunction(func) {
let result;
const input = parseFloat(currentInput);
switch (func) {
case 'sin':
result = Math.sin(input);
break;
case 'cos':
result = Math.cos(input);
break;
case 'tan':
result = Math.tan(input);
break;
case 'log':
result = Math.log10(input);
break;
case 'sqrt':
result = Math.sqrt(input);
break;
case 'pow':
previousInput = currentInput;
operation = '^';
resetInput = true;
updateHistoryDisplay();
return;
case 'pi':
result = Math.PI;
break;
case 'e':
result = Math.E;
break;
default:
return;
}
// Add to history
const historyItem = `${func}(${currentInput}) = ${result}`;
calculationHistory.push(historyItem);
updateHistoryList();
currentInput = result.toString();
updateDisplay();
}
function toggleScientific() {
scientificMode = !scientificMode;
if (scientificMode) {
scientificFunctions.classList.remove('hidden');
toggleScientificBtn.textContent = 'Standard';
toggleScientificBtn.classList.add('rounded-t-none');
} else {
scientificFunctions.classList.add('hidden');
toggleScientificBtn.textContent = 'Scientific';
toggleScientificBtn.classList.remove('rounded-t-none');
}
}
// History functions
function updateHistoryList() {
historyList.innerHTML = '';
calculationHistory.slice().reverse().forEach(item => {
const li = document.createElement('li');
li.textContent = item;
li.className = 'text-sm p-2 hover:bg-gray-100 rounded cursor-pointer';
li.onclick = () => {
// Extract the result from the history item
const result = item.split(' = ')[1];
currentInput = result;
updateDisplay();
historyPanel.classList.remove('active');
};
historyList.appendChild(li);
});
}
function clearHistory() {
calculationHistory = [];
updateHistoryList();
}
// Event listeners
historyBtn.addEventListener('click', () => {
historyPanel.classList.add('active');
});
closeHistoryBtn.addEventListener('click', () => {
historyPanel.classList.remove('active');
});
// Keyboard support
document.addEventListener('keydown', (e) => {
if (e.key >= '0' && e.key <= '9') {
appendNumber(e.key);
} else if (e.key === '.') {
appendDecimal();
} else if (e.key === '+' || e.key === '-' || e.key === '*' || e.key === '/') {
appendOperator(e.key);
} else if (e.key === 'Enter' || e.key === '=') {
calculate();
} else if (e.key === 'Escape') {
clearAll();
} else if (e.key === '%') {
percentage();
} else if (e.key === 'Backspace') {
currentInput = currentInput.slice(0, -1) || '0';
updateDisplay();
}
});
// Show scientific toggle button after a delay to indicate advanced features
setTimeout(() => {
toggleScientificBtn.classList.remove('hidden');
}, 3000);
</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-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>
</html>