| <!DOCTYPE html> |
| <html lang="en"> |
| <head> |
| <meta charset="UTF-8"> |
| <meta name="viewport" content="width=device-width, initial-scale=1.0"> |
| <title>Calculator - Text2Video AI</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-color: #f8fafc; |
| } |
| |
| .gradient-bg { |
| background: linear-gradient(135deg, #6e8efb, #a777e3); |
| } |
| |
| .calculator-btn { |
| transition: all 0.2s ease; |
| font-weight: 500; |
| } |
| |
| .calculator-btn:active { |
| transform: scale(0.95); |
| } |
| |
| .display-screen { |
| background: linear-gradient(135deg, #1e293b, #0f172a); |
| box-shadow: inset 0 2px 4px rgba(0,0,0,0.3); |
| } |
| |
| .btn-number { |
| background: white; |
| color: #334155; |
| } |
| |
| .btn-number:hover { |
| background: #f1f5f9; |
| transform: translateY(-2px); |
| box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1); |
| } |
| |
| .btn-operator { |
| background: #6e8efb; |
| color: white; |
| } |
| |
| .btn-operator:hover { |
| background: #5a7de8; |
| transform: translateY(-2px); |
| box-shadow: 0 4px 6px -1px rgba(110, 142, 251, 0.3); |
| } |
| |
| .btn-action { |
| background: #a777e3; |
| color: white; |
| } |
| |
| .btn-action:hover { |
| background: #9566d0; |
| transform: translateY(-2px); |
| box-shadow: 0 4px 6px -1px rgba(167, 119, 227, 0.3); |
| } |
| |
| .btn-equals { |
| background: linear-gradient(135deg, #6e8efb, #a777e3); |
| color: white; |
| } |
| |
| .btn-equals:hover { |
| opacity: 0.9; |
| transform: translateY(-2px); |
| box-shadow: 0 4px 6px -1px rgba(110, 142, 251, 0.4); |
| } |
| |
| .history-item { |
| animation: slideIn 0.3s ease; |
| } |
| |
| @keyframes slideIn { |
| from { |
| opacity: 0; |
| transform: translateX(-10px); |
| } |
| to { |
| opacity: 1; |
| transform: translateX(0); |
| } |
| } |
| |
| .calculator-card { |
| box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 10px 10px -5px rgba(0, 0, 0, 0.04); |
| } |
| </style> |
| </head> |
| <body class="min-h-screen"> |
| <div class="gradient-bg text-white"> |
| <div class="container mx-auto px-4 py-8"> |
| <header class="flex justify-between items-center"> |
| <a href="index.html" class="flex items-center space-x-2 hover:opacity-80 transition"> |
| <i class="fas fa-video text-2xl"></i> |
| <h1 class="text-2xl font-bold">Text2Video AI</h1> |
| </a> |
| <nav class="hidden md:flex space-x-6"> |
| <a href="index.html" class="hover:underline">Home</a> |
| <a href="#" class="hover:underline">Templates</a> |
| <a href="#" class="hover:underline">Pricing</a> |
| <a href="calculator.html" class="hover:underline font-semibold border-b-2 border-white">Calculator</a> |
| </nav> |
| <button class="md:hidden text-xl"> |
| <i class="fas fa-bars"></i> |
| </button> |
| </header> |
| </div> |
| </div> |
| |
| <main class="container mx-auto px-4 py-12"> |
| <div class="max-w-4xl mx-auto"> |
| <h2 class="text-3xl font-bold text-center mb-8 text-gray-800">Scientific Calculator</h2> |
| |
| <div class="grid grid-cols-1 lg:grid-cols-3 gap-8"> |
| |
| <div class="lg:col-span-2"> |
| <div class="calculator-card bg-white rounded-2xl overflow-hidden"> |
| |
| <div class="display-screen p-6 text-right"> |
| <div id="previous-operation" class="text-gray-400 text-sm h-6 mb-1 font-mono"></div> |
| <div id="display" class="text-white text-4xl md:text-5xl font-bold font-mono overflow-hidden">0</div> |
| </div> |
| |
| |
| <div class="p-4 grid grid-cols-4 gap-3 bg-gray-50"> |
| |
| <button class="calculator-btn btn-action p-4 rounded-xl text-lg" onclick="clearAll()">AC</button> |
| <button class="calculator-btn btn-action p-4 rounded-xl text-lg" onclick="clearEntry()">CE</button> |
| <button class="calculator-btn btn-operator p-4 rounded-xl text-lg" onclick="appendOperator('%')">%</button> |
| <button class="calculator-btn btn-operator p-4 rounded-xl text-lg" onclick="appendOperator('/')">÷</button> |
| |
| |
| <button class="calculator-btn btn-number p-4 rounded-xl text-xl" onclick="appendNumber('7')">7</button> |
| <button class="calculator-btn btn-number p-4 rounded-xl text-xl" onclick="appendNumber('8')">8</button> |
| <button class="calculator-btn btn-number p-4 rounded-xl text-xl" onclick="appendNumber('9')">9</button> |
| <button class="calculator-btn btn-operator p-4 rounded-xl text-lg" onclick="appendOperator('*')">×</button> |
| |
| |
| <button class="calculator-btn btn-number p-4 rounded-xl text-xl" onclick="appendNumber('4')">4</button> |
| <button class="calculator-btn btn-number p-4 rounded-xl text-xl" onclick="appendNumber('5')">5</button> |
| <button class="calculator-btn btn-number p-4 rounded-xl text-xl" onclick="appendNumber('6')">6</button> |
| <button class="calculator-btn btn-operator p-4 rounded-xl text-lg" onclick="appendOperator('-')">−</button> |
| |
| |
| <button class="calculator-btn btn-number p-4 rounded-xl text-xl" onclick="appendNumber('1')">1</button> |
| <button class="calculator-btn btn-number p-4 rounded-xl text-xl" onclick="appendNumber('2')">2</button> |
| <button class="calculator-btn btn-number p-4 rounded-xl text-xl" onclick="appendNumber('3')">3</button> |
| <button class="calculator-btn btn-operator p-4 rounded-xl text-lg" onclick="appendOperator('+')">+</button> |
| |
| |
| <button class="calculator-btn btn-number p-4 rounded-xl text-xl" onclick="appendNumber('0')">0</button> |
| <button class="calculator-btn btn-number p-4 rounded-xl text-xl" onclick="appendDecimal()">.</button> |
| <button class="calculator-btn btn-action p-4 rounded-xl text-lg" onclick="toggleSign()">±</button> |
| <button class="calculator-btn btn-equals p-4 rounded-xl text-xl font-bold" onclick="calculate()">=</button> |
| </div> |
| </div> |
| |
| |
| <div class="mt-6 bg-purple-50 p-4 rounded-xl border border-purple-100"> |
| <h3 class="text-purple-800 font-semibold mb-2"><i class="fas fa-keyboard mr-2"></i>Keyboard Shortcuts</h3> |
| <p class="text-sm text-purple-700">Use number keys, operators (+, -, *, /), Enter (=), Escape (AC), Backspace (CE)</p> |
| </div> |
| </div> |
| |
| |
| <div class="lg:col-span-1"> |
| <div class="bg-white rounded-2xl shadow-lg p-6 h-full"> |
| <div class="flex justify-between items-center mb-4"> |
| <h3 class="text-lg font-semibold text-gray-800">History</h3> |
| <button onclick="clearHistory()" class="text-sm text-red-500 hover:text-red-700"> |
| <i class="fas fa-trash-alt"></i> Clear |
| </button> |
| </div> |
| <div id="history-list" class="space-y-2 max-h-96 overflow-y-auto"> |
| <p class="text-gray-400 text-center py-8">No calculations yet</p> |
| </div> |
| </div> |
| </div> |
| </div> |
| </div> |
| </main> |
| |
| <footer class="bg-gray-900 text-white py-8 mt-12"> |
| <div class="container mx-auto px-4 text-center"> |
| <p class="text-gray-400">© 2023 Text2Video AI. All rights reserved.</p> |
| </div> |
| </footer> |
| |
| <script> |
| let display = document.getElementById('display'); |
| let previousOperation = document.getElementById('previous-operation'); |
| let currentValue = '0'; |
| let previousValue = ''; |
| let operator = ''; |
| let shouldResetDisplay = false; |
| let history = []; |
| |
| function updateDisplay() { |
| display.textContent = currentValue; |
| if (previousValue && operator) { |
| previousOperation.textContent = previousValue + ' ' + operator; |
| } else { |
| previousOperation.textContent = ''; |
| } |
| } |
| |
| function appendNumber(num) { |
| if (currentValue === '0' || shouldResetDisplay) { |
| currentValue = num; |
| shouldResetDisplay = false; |
| } else { |
| if (currentValue.length < 12) { |
| currentValue += num; |
| } |
| } |
| updateDisplay(); |
| } |
| |
| function appendDecimal() { |
| if (shouldResetDisplay) { |
| currentValue = '0.'; |
| shouldResetDisplay = false; |
| } else if (!currentValue.includes('.')) { |
| currentValue += '.'; |
| } |
| updateDisplay(); |
| } |
| |
| function appendOperator(op) { |
| if (operator && !shouldResetDisplay) { |
| calculate(); |
| } |
| previousValue = currentValue; |
| operator = op; |
| shouldResetDisplay = true; |
| updateDisplay(); |
| } |
| |
| function calculate() { |
| if (!operator || !previousValue) return; |
| |
| let prev = parseFloat(previousValue); |
| let current = parseFloat(currentValue); |
| let result; |
| |
| switch(operator) { |
| case '+': |
| result = prev + current; |
| break; |
| case '-': |
| result = prev - current; |
| break; |
| case '*': |
| result = prev * current; |
| break; |
| case '/': |
| if (current === 0) { |
| alert('Cannot divide by zero!'); |
| return; |
| } |
| result = prev / current; |
| break; |
| case '%': |
| result = prev % current; |
| break; |
| default: |
| return; |
| } |
| |
| |
| let resultString = result.toString(); |
| if (resultString.length > 12) { |
| resultString = result.toExponential(6); |
| } |
| |
| |
| addToHistory(previousValue + ' ' + operator + ' ' + currentValue + ' = ' + resultString); |
| |
| currentValue = resultString; |
| operator = ''; |
| previousValue = ''; |
| shouldResetDisplay = true; |
| updateDisplay(); |
| } |
| |
| function clearAll() { |
| currentValue = '0'; |
| previousValue = ''; |
| operator = ''; |
| shouldResetDisplay = false; |
| updateDisplay(); |
| } |
| |
| function clearEntry() { |
| currentValue = '0'; |
| updateDisplay(); |
| } |
| |
| function toggleSign() { |
| if (currentValue !== '0') { |
| if (currentValue.startsWith('-')) { |
| currentValue = currentValue.substring(1); |
| } else { |
| currentValue = '-' + currentValue; |
| } |
| updateDisplay(); |
| } |
| } |
| |
| function addToHistory(calculation) { |
| history.unshift(calculation); |
| if (history.length > 10) history.pop(); |
| updateHistoryDisplay(); |
| } |
| |
| function updateHistoryDisplay() { |
| const historyList = document.getElementById('history-list'); |
| if (history.length === 0) { |
| historyList.innerHTML = '<p class="text-gray-400 text-center py-8">No calculations yet</p>'; |
| return; |
| } |
| |
| historyList.innerHTML = history.map((item, index) => ` |
| <div class="history-item bg-gray-50 p-3 rounded-lg text-sm text-gray-700 font-mono cursor-pointer hover:bg-purple-50 transition" onclick="loadFromHistory('${item}')"> |
| ${item} |
| </div> |
| `).join(''); |
| } |
| |
| function loadFromHistory(item) { |
| |
| const parts = item.split(' = '); |
| if (parts.length === 2) { |
| currentValue = parts[1]; |
| updateDisplay(); |
| } |
| } |
| |
| function clearHistory() { |
| history = []; |
| updateHistoryDisplay(); |
| } |
| |
| |
| document.addEventListener('keydown', function(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 === '=') { |
| e.preventDefault(); |
| calculate(); |
| } else if (e.key === 'Escape') { |
| clearAll(); |
| } else if (e.key === 'Backspace') { |
| if (currentValue.length > 1) { |
| currentValue = currentValue.slice(0, -1); |
| } else { |
| currentValue = '0'; |
| } |
| updateDisplay(); |
| } else if (e.key === '%') { |
| appendOperator('%'); |
| } |
| }); |
| </script> |
| </body> |
| </html> |
