| <!DOCTYPE html> |
| <html lang="fr" class="h-full"> |
| <head> |
| <meta charset="UTF-8"> |
| <meta name="viewport" content="width=device-width, initial-scale=1.0"> |
| <title>Calculatrice Rapide</title> |
| <script src="https://cdn.tailwindcss.com"></script> |
| <script src="https://kit.fontawesome.com/a076d05399.js" crossorigin="anonymous"></script> |
| <style> |
| .btn-press { |
| transform: scale(0.95); |
| transition: transform 0.1s; |
| } |
| .display-text { |
| font-size: clamp(1.5rem, 5vw, 2.5rem); |
| } |
| @media (max-width: 640px) { |
| .calculator { |
| width: 95% !important; |
| height: 80vh !important; |
| } |
| } |
| </style> |
| </head> |
| <body class="h-full flex items-center justify-center bg-gray-100 dark:bg-gray-900 transition-colors duration-300"> |
| <div class="calculator w-96 h-[32rem] bg-white dark:bg-gray-800 rounded-3xl shadow-2xl overflow-hidden flex flex-col transition-colors duration-300"> |
| |
| <div class="p-4 flex justify-between items-center"> |
| <div class="text-sm text-gray-500 dark:text-gray-400">Calculatrice</div> |
| <button id="theme-toggle" class="w-8 h-8 rounded-full flex items-center justify-center bg-gray-200 dark:bg-gray-700 text-gray-700 dark:text-gray-300"> |
| <i class="fas fa-moon dark:hidden"></i> |
| <i class="fas fa-sun hidden dark:block"></i> |
| </button> |
| </div> |
| |
| |
| <div class="flex-1 p-4 flex flex-col justify-end items-end"> |
| <div id="history" class="text-gray-500 dark:text-gray-400 text-right text-sm h-6"></div> |
| <div id="display" class="display-text font-semibold text-gray-800 dark:text-white text-right break-all">0</div> |
| </div> |
| |
| |
| <div class="p-4 grid grid-cols-4 gap-3 flex-1"> |
| |
| <button onclick="clearAll()" class="btn bg-gray-200 dark:bg-gray-700 text-gray-800 dark:text-white rounded-xl h-16 flex items-center justify-center font-medium text-lg">AC</button> |
| <button onclick="toggleSign()" class="btn bg-gray-200 dark:bg-gray-700 text-gray-800 dark:text-white rounded-xl h-16 flex items-center justify-center font-medium text-lg">+/-</button> |
| <button onclick="percentage()" class="btn bg-gray-200 dark:bg-gray-700 text-gray-800 dark:text-white rounded-xl h-16 flex items-center justify-center font-medium text-lg">%</button> |
| <button onclick="operation('/')" class="btn operator bg-blue-500 text-white rounded-xl h-16 flex items-center justify-center font-medium text-2xl">÷</button> |
| |
| |
| <button onclick="appendNumber('7')" class="btn number bg-gray-100 dark:bg-gray-600 text-gray-800 dark:text-white rounded-xl h-16 flex items-center justify-center font-medium text-lg">7</button> |
| <button onclick="appendNumber('8')" class="btn number bg-gray-100 dark:bg-gray-600 text-gray-800 dark:text-white rounded-xl h-16 flex items-center justify-center font-medium text-lg">8</button> |
| <button onclick="appendNumber('9')" class="btn number bg-gray-100 dark:bg-gray-600 text-gray-800 dark:text-white rounded-xl h-16 flex items-center justify-center font-medium text-lg">9</button> |
| <button onclick="operation('*')" class="btn operator bg-blue-500 text-white rounded-xl h-16 flex items-center justify-center font-medium text-2xl">×</button> |
| |
| |
| <button onclick="appendNumber('4')" class="btn number bg-gray-100 dark:bg-gray-600 text-gray-800 dark:text-white rounded-xl h-16 flex items-center justify-center font-medium text-lg">4</button> |
| <button onclick="appendNumber('5')" class="btn number bg-gray-100 dark:bg-gray-600 text-gray-800 dark:text-white rounded-xl h-16 flex items-center justify-center font-medium text-lg">5</button> |
| <button onclick="appendNumber('6')" class="btn number bg-gray-100 dark:bg-gray-600 text-gray-800 dark:text-white rounded-xl h-16 flex items-center justify-center font-medium text-lg">6</button> |
| <button onclick="operation('-')" class="btn operator bg-blue-500 text-white rounded-xl h-16 flex items-center justify-center font-medium text-2xl">-</button> |
| |
| |
| <button onclick="appendNumber('1')" class="btn number bg-gray-100 dark:bg-gray-600 text-gray-800 dark:text-white rounded-xl h-16 flex items-center justify-center font-medium text-lg">1</button> |
| <button onclick="appendNumber('2')" class="btn number bg-gray-100 dark:bg-gray-600 text-gray-800 dark:text-white rounded-xl h-16 flex items-center justify-center font-medium text-lg">2</button> |
| <button onclick="appendNumber('3')" class="btn number bg-gray-100 dark:bg-gray-600 text-gray-800 dark:text-white rounded-xl h-16 flex items-center justify-center font-medium text-lg">3</button> |
| <button onclick="operation('+')" class="btn operator bg-blue-500 text-white rounded-xl h-16 flex items-center justify-center font-medium text-2xl">+</button> |
| |
| |
| <button onclick="appendNumber('0')" class="btn number bg-gray-100 dark:bg-gray-600 text-gray-800 dark:text-white rounded-xl h-16 flex items-center justify-center font-medium text-lg col-span-2">0</button> |
| <button onclick="appendDecimal()" class="btn number bg-gray-100 dark:bg-gray-600 text-gray-800 dark:text-white rounded-xl h-16 flex items-center justify-center font-medium text-lg">.</button> |
| <button onclick="calculate()" class="btn operator bg-blue-500 text-white rounded-xl h-16 flex items-center justify-center font-medium text-2xl">=</button> |
| </div> |
| </div> |
|
|
| <script> |
| |
| let currentInput = '0'; |
| let previousInput = ''; |
| let operation = null; |
| let resetInput = false; |
| |
| |
| const display = document.getElementById('display'); |
| const history = document.getElementById('history'); |
| const buttons = document.querySelectorAll('.btn'); |
| |
| |
| function updateDisplay() { |
| display.textContent = currentInput; |
| history.textContent = previousInput + (operation ? ' ' + operation : ''); |
| } |
| |
| 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 toggleSign() { |
| currentInput = (parseFloat(currentInput) * -1).toString(); |
| updateDisplay(); |
| } |
| |
| function percentage() { |
| currentInput = (parseFloat(currentInput) / 100).toString(); |
| updateDisplay(); |
| } |
| |
| function clearAll() { |
| currentInput = '0'; |
| previousInput = ''; |
| operation = null; |
| updateDisplay(); |
| } |
| |
| function operation(op) { |
| if (operation && !resetInput) { |
| calculate(); |
| } |
| operation = op; |
| previousInput = currentInput; |
| resetInput = true; |
| updateDisplay(); |
| } |
| |
| function calculate() { |
| if (!operation) return; |
| |
| let result; |
| const prev = parseFloat(previousInput); |
| const current = parseFloat(currentInput); |
| |
| switch (operation) { |
| case '+': |
| result = prev + current; |
| break; |
| case '-': |
| result = prev - current; |
| break; |
| case '*': |
| result = prev * current; |
| break; |
| case '/': |
| result = prev / current; |
| break; |
| default: |
| return; |
| } |
| |
| currentInput = result.toString(); |
| operation = null; |
| previousInput = ''; |
| resetInput = true; |
| updateDisplay(); |
| } |
| |
| |
| buttons.forEach(button => { |
| button.addEventListener('mousedown', () => { |
| button.classList.add('btn-press'); |
| }); |
| |
| button.addEventListener('mouseup', () => { |
| button.classList.remove('btn-press'); |
| }); |
| |
| button.addEventListener('mouseleave', () => { |
| button.classList.remove('btn-press'); |
| }); |
| }); |
| |
| |
| const themeToggle = document.getElementById('theme-toggle'); |
| const prefersDarkScheme = window.matchMedia('(prefers-color-scheme: dark)'); |
| |
| function setTheme(isDark) { |
| document.documentElement.classList.toggle('dark', isDark); |
| localStorage.setItem('theme', isDark ? 'dark' : 'light'); |
| } |
| |
| |
| const storedTheme = localStorage.getItem('theme'); |
| if (storedTheme) { |
| setTheme(storedTheme === 'dark'); |
| } else { |
| setTheme(prefersDarkScheme.matches); |
| } |
| |
| |
| themeToggle.addEventListener('click', () => { |
| const isDark = document.documentElement.classList.contains('dark'); |
| setTheme(!isDark); |
| }); |
| |
| |
| prefersDarkScheme.addEventListener('change', e => { |
| if (!localStorage.getItem('theme')) { |
| setTheme(e.matches); |
| } |
| }); |
| |
| |
| document.addEventListener('keydown', (e) => { |
| if (/[0-9]/.test(e.key)) { |
| appendNumber(e.key); |
| } else if (e.key === '.') { |
| appendDecimal(); |
| } else if (e.key === 'Enter' || e.key === '=') { |
| calculate(); |
| } else if (e.key === 'Escape') { |
| clearAll(); |
| } else if (e.key === '+' || e.key === '-' || e.key === '*' || e.key === '/') { |
| operation(e.key); |
| } else if (e.key === '%') { |
| percentage(); |
| } else if (e.key === '_') { |
| toggleSign(); |
| } |
| |
| |
| const keyToButton = { |
| '1': '1', '2': '2', '3': '3', '4': '4', '5': '5', |
| '6': '6', '7': '7', '8': '8', '9': '9', '0': '0', |
| '.': '.', '+': '+', '-': '-', '*': '*', '/': '/', |
| 'Enter': '=', '=': '=', 'Escape': 'AC', '%': '%', |
| '_': '+/-' |
| }; |
| |
| if (keyToButton[e.key]) { |
| const button = document.querySelector(`.btn:contains("${keyToButton[e.key]}")`); |
| if (button) { |
| button.classList.add('btn-press'); |
| setTimeout(() => button.classList.remove('btn-press'), 100); |
| } |
| } |
| }); |
| </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=KINGFAUS/cal" style="color: #fff;text-decoration: underline;" target="_blank" >Remix</a></p></body> |
| </html> |
