|
|
<!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"> |
|
|
|
|
|
<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> |
|
|
|
|
|
|
|
|
<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> |
|
|
|
|
|
|
|
|
<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> |
|
|
|
|
|
|
|
|
<div class="grid grid-cols-4 gap-1 p-2 bg-gray-100 rounded-b-xl"> |
|
|
|
|
|
<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> |
|
|
|
|
|
|
|
|
<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> |
|
|
|
|
|
|
|
|
<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> |
|
|
|
|
|
|
|
|
<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> |
|
|
|
|
|
|
|
|
<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> |
|
|
|
|
|
|
|
|
<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> |
|
|
|
|
|
|
|
|
<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> |
|
|
|
|
|
|
|
|
<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"> |
|
|
|
|
|
</ul> |
|
|
<button class="btn btn-function w-full mt-4 p-2 rounded-lg text-sm" onclick="clearHistory()"> |
|
|
Clear History |
|
|
</button> |
|
|
</div> |
|
|
</div> |
|
|
|
|
|
<script> |
|
|
|
|
|
let currentInput = '0'; |
|
|
let previousInput = ''; |
|
|
let operation = null; |
|
|
let resetInput = false; |
|
|
let calculationHistory = []; |
|
|
|
|
|
|
|
|
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; |
|
|
|
|
|
|
|
|
updateDisplay(); |
|
|
|
|
|
|
|
|
function updateDisplay() { |
|
|
display.textContent = currentInput; |
|
|
} |
|
|
|
|
|
function updateHistoryDisplay() { |
|
|
if (previousInput && operation) { |
|
|
historyDisplay.textContent = `${previousInput} ${operation}`; |
|
|
} else { |
|
|
historyDisplay.textContent = ''; |
|
|
} |
|
|
} |
|
|
|
|
|
|
|
|
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(); |
|
|
} |
|
|
|
|
|
|
|
|
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; |
|
|
} |
|
|
|
|
|
|
|
|
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(); |
|
|
} |
|
|
|
|
|
|
|
|
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; |
|
|
} |
|
|
|
|
|
|
|
|
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'); |
|
|
} |
|
|
} |
|
|
|
|
|
|
|
|
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 = () => { |
|
|
|
|
|
const result = item.split(' = ')[1]; |
|
|
currentInput = result; |
|
|
updateDisplay(); |
|
|
historyPanel.classList.remove('active'); |
|
|
}; |
|
|
historyList.appendChild(li); |
|
|
}); |
|
|
} |
|
|
|
|
|
function clearHistory() { |
|
|
calculationHistory = []; |
|
|
updateHistoryList(); |
|
|
} |
|
|
|
|
|
|
|
|
historyBtn.addEventListener('click', () => { |
|
|
historyPanel.classList.add('active'); |
|
|
}); |
|
|
|
|
|
closeHistoryBtn.addEventListener('click', () => { |
|
|
historyPanel.classList.remove('active'); |
|
|
}); |
|
|
|
|
|
|
|
|
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(); |
|
|
} |
|
|
}); |
|
|
|
|
|
|
|
|
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> |
