Hugging Face's logo

Spaces:
Atibroo
/
ala3
Running

App Files Community
ala3 / index.html
Atibroo's picture
Atibroo
ุงู„ู‡ ุญุงุณุจุฉ ู„ู„ุงู†ุฏุฑูˆูŠุฏ ู…ุชุทูˆุฑุฉ ูˆู…ุฒูŠู†ุฉ ุจู„ูˆู‚ูˆ ุฌู…ูŠู„ ุจุนู†ูˆุงู† ๐”ผ๐•ƒโ„๐”ธ๐”ป๐•€ ุงู„ูˆู‚ูˆ ูŠูƒูˆู† ุตุบูŠุฑ ุฌุฏุง - Initial Deployment
5826f27 verified
raw
history blame contribute delete
16.5 kB
<!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">
 <!-- Logo -->
 <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>
<!-- Display -->
 <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>
<!-- History Button -->
 <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>
<!-- Keypad -->
 <div class="grid grid-cols-4 gap-1 p-2 bg-gray-100 rounded-b-xl">
 <!-- Row 1 -->
 <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>
<!-- Row 2 -->
 <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>
<!-- Row 3 -->
 <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>
<!-- Row 4 -->
 <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>
<!-- Row 5 -->
 <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>
<!-- Scientific Functions (Hidden by default) -->
 <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>
<!-- Toggle Scientific -->
 <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>
<!-- History Panel -->
 <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">
 <!-- History items will be added here -->
 </ul>
 <button class="btn btn-function w-full mt-4 p-2 rounded-lg text-sm" onclick="clearHistory()">
 Clear History
 </button>
 </div>
 </div>
<script>
 // Calculator state
 let currentInput = '0';
 let previousInput = '';
 let operation = null;
 let resetInput = false;
 let calculationHistory = [];
// DOM elements
 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;
// Initialize
 updateDisplay();
// Display functions
 function updateDisplay() {
 display.textContent = currentInput;
 }
function updateHistoryDisplay() {
 if (previousInput && operation) {
 historyDisplay.textContent = `${previousInput} ${operation}`;
 } else {
 historyDisplay.textContent = '';
 }
 }
// Input functions
 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();
 }
// Calculation functions
 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;
 }
// Add to history
 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();
 }
// Scientific functions
 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;
 }
// Add to history
 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');
 }
 }
// History functions
 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 = () => {
 // Extract the result from the history item
 const result = item.split(' = ')[1];
 currentInput = result;
 updateDisplay();
 historyPanel.classList.remove('active');
 };
 historyList.appendChild(li);
 });
 }
function clearHistory() {
 calculationHistory = [];
 updateHistoryList();
 }
// Event listeners
 historyBtn.addEventListener('click', () => {
 historyPanel.classList.add('active');
 });
closeHistoryBtn.addEventListener('click', () => {
 historyPanel.classList.remove('active');
 });
// Keyboard support
 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();
 }
 });
// Show scientific toggle button after a delay to indicate advanced features
 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>