|
|
<!DOCTYPE html> |
|
|
<html lang="en"> |
|
|
<head> |
|
|
<meta charset="UTF-8"> |
|
|
<meta name="viewport" content="width=device-width, initial-scale=1.0"> |
|
|
<title>Dribbble Style 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=Inter:wght@300;400;500;600;700&display=swap'); |
|
|
|
|
|
body { |
|
|
font-family: 'Inter', sans-serif; |
|
|
background: linear-gradient(135deg, #f5f7fa 0%, #c3cfe2 100%); |
|
|
} |
|
|
|
|
|
.calculator { |
|
|
box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.25), |
|
|
inset 0 -8px 16px rgba(0, 0, 0, 0.1); |
|
|
border-radius: 2rem; |
|
|
backdrop-filter: blur(8px); |
|
|
background: rgba(255, 255, 255, 0.7); |
|
|
border: 1px solid rgba(255, 255, 255, 0.3); |
|
|
} |
|
|
|
|
|
.display { |
|
|
text-shadow: 0 2px 4px rgba(0, 0, 0, 0.1); |
|
|
letter-spacing: -0.05em; |
|
|
} |
|
|
|
|
|
.btn { |
|
|
transition: all 0.2s ease; |
|
|
box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1); |
|
|
border: 1px solid rgba(255, 255, 255, 0.3); |
|
|
} |
|
|
|
|
|
.btn:active { |
|
|
transform: translateY(2px); |
|
|
box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1); |
|
|
} |
|
|
|
|
|
.btn-operator { |
|
|
background: linear-gradient(135deg, #667eea 0%, #764ba2 100%); |
|
|
color: white; |
|
|
} |
|
|
|
|
|
.btn-operator:hover { |
|
|
background: linear-gradient(135deg, #5a6fd1 0%, #6a4199 100%); |
|
|
} |
|
|
|
|
|
.btn-equals { |
|
|
background: linear-gradient(135deg, #f83600 0%, #f9d423 100%); |
|
|
color: white; |
|
|
} |
|
|
|
|
|
.btn-equals:hover { |
|
|
background: linear-gradient(135deg, #e03000 0%, #e9c41d 100%); |
|
|
} |
|
|
|
|
|
.btn-number { |
|
|
background: rgba(255, 255, 255, 0.8); |
|
|
} |
|
|
|
|
|
.btn-number:hover { |
|
|
background: rgba(255, 255, 255, 1); |
|
|
} |
|
|
|
|
|
.btn-function { |
|
|
background: rgba(237, 242, 247, 0.8); |
|
|
} |
|
|
|
|
|
.btn-function:hover { |
|
|
background: rgba(237, 242, 247, 1); |
|
|
} |
|
|
|
|
|
.history-item { |
|
|
transition: all 0.2s ease; |
|
|
} |
|
|
|
|
|
.history-item:hover { |
|
|
background: rgba(0, 0, 0, 0.05); |
|
|
} |
|
|
|
|
|
.glass-effect { |
|
|
backdrop-filter: blur(16px); |
|
|
background: rgba(255, 255, 255, 0.4); |
|
|
border: 1px solid rgba(255, 255, 255, 0.2); |
|
|
} |
|
|
</style> |
|
|
</head> |
|
|
<body class="min-h-screen flex items-center justify-center p-4"> |
|
|
<div class="calculator w-full max-w-md p-6 glass-effect"> |
|
|
|
|
|
<div class="display mb-6 p-4 rounded-xl bg-white bg-opacity-50"> |
|
|
<div class="text-right text-gray-500 text-sm h-6 overflow-x-auto whitespace-nowrap" id="history"> |
|
|
|
|
|
</div> |
|
|
<div class="text-right text-4xl font-bold text-gray-800 h-12 overflow-x-auto whitespace-nowrap" id="result"> |
|
|
0 |
|
|
</div> |
|
|
</div> |
|
|
|
|
|
|
|
|
<div class="grid grid-cols-4 gap-3"> |
|
|
|
|
|
<button class="btn btn-function rounded-xl p-4 text-gray-700 font-medium" onclick="clearAll()"> |
|
|
<i class="fas fa-undo-alt"></i> |
|
|
</button> |
|
|
<button class="btn btn-function rounded-xl p-4 text-gray-700 font-medium" onclick="backspace()"> |
|
|
<i class="fas fa-backspace"></i> |
|
|
</button> |
|
|
<button class="btn btn-function rounded-xl p-4 text-gray-700 font-medium" onclick="toggleHistory()"> |
|
|
<i class="fas fa-history"></i> |
|
|
</button> |
|
|
<button class="btn btn-operator rounded-xl p-4 font-medium" onclick="appendOperator('/')"> |
|
|
÷ |
|
|
</button> |
|
|
|
|
|
|
|
|
<button class="btn btn-number rounded-xl p-4 text-gray-700 font-medium" onclick="appendNumber('7')"> |
|
|
7 |
|
|
</button> |
|
|
<button class="btn btn-number rounded-xl p-4 text-gray-700 font-medium" onclick="appendNumber('8')"> |
|
|
8 |
|
|
</button> |
|
|
<button class="btn btn-number rounded-xl p-4 text-gray-700 font-medium" onclick="appendNumber('9')"> |
|
|
9 |
|
|
</button> |
|
|
<button class="btn btn-operator rounded-xl p-4 font-medium" onclick="appendOperator('*')"> |
|
|
× |
|
|
</button> |
|
|
|
|
|
|
|
|
<button class="btn btn-number rounded-xl p-4 text-gray-700 font-medium" onclick="appendNumber('4')"> |
|
|
4 |
|
|
</button> |
|
|
<button class="btn btn-number rounded-xl p-4 text-gray-700 font-medium" onclick="appendNumber('5')"> |
|
|
5 |
|
|
</button> |
|
|
<button class="btn btn-number rounded-xl p-4 text-gray-700 font-medium" onclick="appendNumber('6')"> |
|
|
6 |
|
|
</button> |
|
|
<button class="btn btn-operator rounded-xl p-4 font-medium" onclick="appendOperator('-')"> |
|
|
− |
|
|
</button> |
|
|
|
|
|
|
|
|
<button class="btn btn-number rounded-xl p-4 text-gray-700 font-medium" onclick="appendNumber('1')"> |
|
|
1 |
|
|
</button> |
|
|
<button class="btn btn-number rounded-xl p-4 text-gray-700 font-medium" onclick="appendNumber('2')"> |
|
|
2 |
|
|
</button> |
|
|
<button class="btn btn-number rounded-xl p-4 text-gray-700 font-medium" onclick="appendNumber('3')"> |
|
|
3 |
|
|
</button> |
|
|
<button class="btn btn-operator rounded-xl p-4 font-medium" onclick="appendOperator('+')"> |
|
|
+ |
|
|
</button> |
|
|
|
|
|
|
|
|
<button class="btn btn-number rounded-xl p-4 text-gray-700 font-medium" onclick="appendNumber('0')"> |
|
|
0 |
|
|
</button> |
|
|
<button class="btn btn-number rounded-xl p-4 text-gray-700 font-medium" onclick="appendNumber('.')"> |
|
|
. |
|
|
</button> |
|
|
<button class="btn btn-function rounded-xl p-4 text-gray-700 font-medium" onclick="toggleSign()"> |
|
|
± |
|
|
</button> |
|
|
<button class="btn btn-equals rounded-xl p-4 font-medium" onclick="calculate()"> |
|
|
= |
|
|
</button> |
|
|
</div> |
|
|
|
|
|
|
|
|
<div id="historyPanel" class="hidden mt-6 max-h-48 overflow-y-auto rounded-xl glass-effect p-4"> |
|
|
<div class="flex justify-between items-center mb-2"> |
|
|
<h3 class="font-bold text-gray-700">Calculation History</h3> |
|
|
<button onclick="clearHistory()" class="text-red-500 hover:text-red-700"> |
|
|
<i class="fas fa-trash"></i> |
|
|
</button> |
|
|
</div> |
|
|
<div id="historyList" class="space-y-2"> |
|
|
|
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
|
|
|
<script> |
|
|
let currentInput = '0'; |
|
|
let previousInput = ''; |
|
|
let operation = null; |
|
|
let resetInput = false; |
|
|
let calculationHistory = []; |
|
|
|
|
|
const resultElement = document.getElementById('result'); |
|
|
const historyElement = document.getElementById('history'); |
|
|
const historyPanel = document.getElementById('historyPanel'); |
|
|
const historyList = document.getElementById('historyList'); |
|
|
|
|
|
function updateDisplay() { |
|
|
resultElement.textContent = currentInput; |
|
|
} |
|
|
|
|
|
function appendNumber(number) { |
|
|
if (currentInput === '0' || resetInput) { |
|
|
currentInput = number; |
|
|
resetInput = false; |
|
|
} else { |
|
|
currentInput += number; |
|
|
} |
|
|
updateDisplay(); |
|
|
} |
|
|
|
|
|
function appendOperator(op) { |
|
|
if (operation !== null) calculate(); |
|
|
previousInput = currentInput; |
|
|
operation = op; |
|
|
resetInput = true; |
|
|
historyElement.textContent = `${previousInput} ${operation}`; |
|
|
} |
|
|
|
|
|
function calculate() { |
|
|
let computation; |
|
|
const prev = parseFloat(previousInput); |
|
|
const current = parseFloat(currentInput); |
|
|
|
|
|
if (isNaN(prev) || isNaN(current)) return; |
|
|
|
|
|
switch (operation) { |
|
|
case '+': |
|
|
computation = prev + current; |
|
|
break; |
|
|
case '-': |
|
|
computation = prev - current; |
|
|
break; |
|
|
case '*': |
|
|
computation = prev * current; |
|
|
break; |
|
|
case '/': |
|
|
computation = prev / current; |
|
|
break; |
|
|
default: |
|
|
return; |
|
|
} |
|
|
|
|
|
|
|
|
const historyEntry = `${previousInput} ${operation} ${currentInput} = ${computation}`; |
|
|
calculationHistory.unshift(historyEntry); |
|
|
updateHistory(); |
|
|
|
|
|
currentInput = computation.toString(); |
|
|
operation = null; |
|
|
resetInput = true; |
|
|
historyElement.textContent = ''; |
|
|
updateDisplay(); |
|
|
} |
|
|
|
|
|
function clearAll() { |
|
|
currentInput = '0'; |
|
|
previousInput = ''; |
|
|
operation = null; |
|
|
updateDisplay(); |
|
|
historyElement.textContent = ''; |
|
|
} |
|
|
|
|
|
function backspace() { |
|
|
if (currentInput.length === 1) { |
|
|
currentInput = '0'; |
|
|
} else { |
|
|
currentInput = currentInput.slice(0, -1); |
|
|
} |
|
|
updateDisplay(); |
|
|
} |
|
|
|
|
|
function toggleSign() { |
|
|
currentInput = (parseFloat(currentInput) * -1).toString(); |
|
|
updateDisplay(); |
|
|
} |
|
|
|
|
|
function updateHistory() { |
|
|
historyList.innerHTML = ''; |
|
|
calculationHistory.slice(0, 5).forEach(item => { |
|
|
const historyItem = document.createElement('div'); |
|
|
historyItem.textContent = item; |
|
|
historyItem.className = 'history-item p-2 rounded hover:bg-gray-100 cursor-pointer text-sm'; |
|
|
historyItem.onclick = () => { |
|
|
|
|
|
const parts = item.split(' = '); |
|
|
if (parts.length === 2) { |
|
|
currentInput = parts[1]; |
|
|
updateDisplay(); |
|
|
} |
|
|
}; |
|
|
historyList.appendChild(historyItem); |
|
|
}); |
|
|
} |
|
|
|
|
|
function toggleHistory() { |
|
|
historyPanel.classList.toggle('hidden'); |
|
|
} |
|
|
|
|
|
function clearHistory() { |
|
|
calculationHistory = []; |
|
|
updateHistory(); |
|
|
} |
|
|
|
|
|
|
|
|
document.addEventListener('keydown', (e) => { |
|
|
if (/[0-9]/.test(e.key)) { |
|
|
appendNumber(e.key); |
|
|
} else if (e.key === '.') { |
|
|
appendNumber('.'); |
|
|
} else if (e.key === '+') { |
|
|
appendOperator('+'); |
|
|
} else if (e.key === '-') { |
|
|
appendOperator('-'); |
|
|
} else if (e.key === '*') { |
|
|
appendOperator('*'); |
|
|
} else if (e.key === '/') { |
|
|
appendOperator('/'); |
|
|
} else if (e.key === 'Enter' || e.key === '=') { |
|
|
calculate(); |
|
|
} else if (e.key === 'Escape') { |
|
|
clearAll(); |
|
|
} else if (e.key === 'Backspace') { |
|
|
backspace(); |
|
|
} |
|
|
}); |
|
|
|
|
|
|
|
|
updateDisplay(); |
|
|
</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=LennyHood/test" style="color: #fff;text-decoration: underline;" target="_blank" >Remix</a></p></body> |
|
|
</html> |
