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