Spaces:

akhaliq
/

anycoder-db4c6577

Running

App Files Files Community

akhaliq HF Staff commited on 5 days ago

Commit

679c2b0

verified ·

1 Parent(s): b69c523

Upload folder using huggingface_hub

Browse files

Files changed (1) hide show

index.html +514 -19

index.html CHANGED Viewed

@@ -1,19 +1,514 @@
-<!doctype html>
-<html>
-	<head>
-		<meta charset="utf-8" />
-		<meta name="viewport" content="width=device-width" />
-		<title>My static Space</title>
-		<link rel="stylesheet" href="style.css" />
-	</head>
-	<body>
-		<div class="card">
-			<h1>Welcome to your static Space!</h1>
-			<p>You can modify this app directly by editing <i>index.html</i> in the Files and versions tab.</p>
-			<p>
-				Also don't forget to check the
-				<a href="https://huggingface.co/docs/hub/spaces" target="_blank">Spaces documentation</a>.
-			</p>
-		</div>
-	</body>
-</html>

+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>Modern Calculator</title>
+    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css">
+    <style>
+        :root {
+            --primary-color: #4a6bff;
+            --primary-hover: #3a5bef;
+            --secondary-color: #f8f9fa;
+            --text-color: #333;
+            --text-light: #666;
+            --shadow: 0 4px 20px rgba(0, 0, 0, 0.1);
+            --border-radius: 16px;
+            --transition: all 0.3s cubic-bezier(0.25, 0.8, 0.25, 1);
+        }
+        * {
+            margin: 0;
+            padding: 0;
+            box-sizing: border-box;
+            font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
+        }
+        body {
+            background: linear-gradient(135deg, #f5f7fa 0%, #e4e8f0 100%);
+            min-height: 100vh;
+            display: flex;
+            justify-content: center;
+            align-items: center;
+            padding: 20px;
+        }
+        .calculator-container {
+            width: 100%;
+            max-width: 400px;
+            background: white;
+            border-radius: var(--border-radius);
+            box-shadow: var(--shadow);
+            overflow: hidden;
+            position: relative;
+        }
+        .header {
+            padding: 20px;
+            text-align: center;
+            border-bottom: 1px solid rgba(0, 0, 0, 0.05);
+        }
+        .header h1 {
+            color: var(--text-color);
+            font-size: 1.5rem;
+            margin-bottom: 5px;
+        }
+        .header .subtitle {
+            color: var(--text-light);
+            font-size: 0.9rem;
+        }
+        .header .anycoder-link {
+            color: var(--primary-color);
+            text-decoration: none;
+            font-size: 0.8rem;
+            margin-top: 10px;
+            display: inline-block;
+        }
+        .display {
+            padding: 25px;
+            background: var(--secondary-color);
+            position: relative;
+        }
+        .display-input {
+            font-size: 2rem;
+            color: var(--text-color);
+            text-align: right;
+            margin-bottom: 5px;
+            height: 40px;
+            overflow: hidden;
+            white-space: nowrap;
+            text-overflow: ellipsis;
+        }
+        .display-result {
+            font-size: 1.2rem;
+            color: var(--text-light);
+            text-align: right;
+            height: 24px;
+            overflow: hidden;
+            white-space: nowrap;
+            text-overflow: ellipsis;
+        }
+        .buttons {
+            display: grid;
+            grid-template-columns: repeat(4, 1fr);
+            gap: 1px;
+            background: rgba(0, 0, 0, 0.05);
+        }
+        .btn {
+            border: none;
+            outline: none;
+            padding: 20px;
+            font-size: 1.2rem;
+            cursor: pointer;
+            background: white;
+            color: var(--text-color);
+            transition: var(--transition);
+            display: flex;
+            justify-content: center;
+            align-items: center;
+        }
+        .btn:hover {
+            background: rgba(74, 107, 255, 0.1);
+        }
+        .btn:active {
+            transform: scale(0.95);
+        }
+        .btn-operator {
+            color: var(--primary-color);
+            font-weight: bold;
+        }
+        .btn-operator:hover {
+            background: rgba(74, 107, 255, 0.2);
+        }
+        .btn-equals {
+            background: var(--primary-color);
+            color: white;
+        }
+        .btn-equals:hover {
+            background: var(--primary-hover);
+        }
+        .btn-clear {
+            color: #ff4d4f;
+        }
+        .btn-clear:hover {
+            background: rgba(255, 77, 79, 0.1);
+        }
+        .btn-span-2 {
+            grid-column: span 2;
+        }
+        .history-btn {
+            position: absolute;
+            top: 20px;
+            right: 20px;
+            background: none;
+            border: none;
+            color: var(--text-light);
+            font-size: 1rem;
+            cursor: pointer;
+            transition: var(--transition);
+        }
+        .history-btn:hover {
+            color: var(--primary-color);
+        }
+        .history-panel {
+            position: absolute;
+            top: 0;
+            right: 0;
+            width: 100%;
+            height: 100%;
+            background: white;
+            z-index: 10;
+            transform: translateX(100%);
+            transition: var(--transition);
+            padding: 20px;
+            overflow-y: auto;
+        }
+        .history-panel.active {
+            transform: translateX(0);
+        }
+        .history-header {
+            display: flex;
+            justify-content: space-between;
+            align-items: center;
+            margin-bottom: 20px;
+        }
+        .history-header h2 {
+            color: var(--text-color);
+            font-size: 1.2rem;
+        }
+        .history-close {
+            background: none;
+            border: none;
+            font-size: 1.5rem;
+            cursor: pointer;
+            color: var(--text-light);
+        }
+        .history-item {
+            padding: 10px;
+            border-bottom: 1px solid rgba(0, 0, 0, 0.05);
+            color: var(--text-color);
+            text-align: right;
+        }
+        .history-item:last-child {
+            border-bottom: none;
+        }
+        .history-empty {
+            text-align: center;
+            color: var(--text-light);
+            margin-top: 50px;
+        }
+        @media (max-width: 400px) {
+            .calculator-container {
+                border-radius: 0;
+                height: 100vh;
+                display: flex;
+                flex-direction: column;
+            }
+            .display {
+                padding: 20px;
+            }
+            .btn {
+                padding: 16px;
+                font-size: 1.1rem;
+            }
+        }
+    </style>
+</head>
+<body>
+    <div class="calculator-container">
+        <div class="header">
+            <h1>Modern Calculator</h1>
+            <p class="subtitle">Built with precision and style</p>
+            <a href="https://huggingface.co/spaces/akhaliq/anycoder" class="anycoder-link" target="_blank">Built with anycoder</a>
+        </div>
+        <div class="display">
+            <button class="history-btn" id="historyBtn">
+                <i class="fas fa-history"></i>
+            </button>
+            <div class="display-result" id="result">0</div>
+            <div class="display-input" id="input">0</div>
+        </div>
+        <div class="buttons">
+            <button class="btn btn-clear" id="clear">AC</button>
+            <button class="btn" id="backspace"><i class="fas fa-backspace"></i></button>
+            <button class="btn btn-operator" id="percent">%</button>
+            <button class="btn btn-operator" id="divide">/</button>
+            <button class="btn" id="7">7</button>
+            <button class="btn" id="8">8</button>
+            <button class="btn" id="9">9</button>
+            <button class="btn btn-operator" id="multiply">×</button>
+            <button class="btn" id="4">4</button>
+            <button class="btn" id="5">5</button>
+            <button class="btn" id="6">6</button>
+            <button class="btn btn-operator" id="subtract">-</button>
+            <button class="btn" id="1">1</button>
+            <button class="btn" id="2">2</button>
+            <button class="btn" id="3">3</button>
+            <button class="btn btn-operator" id="add">+</button>
+            <button class="btn" id="0">0</button>
+            <button class="btn" id="decimal">.</button>
+            <button class="btn btn-equals btn-span-2" id="equals">=</button>
+        </div>
+        <div class="history-panel" id="historyPanel">
+            <div class="history-header">
+                <h2>Calculation History</h2>
+                <button class="history-close" id="historyClose">&times;</button>
+            </div>
+            <div class="history-content" id="historyContent">
+                <div class="history-empty">No calculations yet</div>
+            </div>
+        </div>
+    </div>
+    <script>
+        document.addEventListener('DOMContentLoaded', function() {
+            // DOM Elements
+            const inputElement = document.getElementById('input');
+            const resultElement = document.getElementById('result');
+            const historyBtn = document.getElementById('historyBtn');
+            const historyPanel = document.getElementById('historyPanel');
+            const historyClose = document.getElementById('historyClose');
+            const historyContent = document.getElementById('historyContent');
+            // Calculator state
+            let currentInput = '0';
+            let previousInput = '';
+            let operation = null;
+            let resetInput = false;
+            let calculationHistory = [];
+            // Update display
+            function updateDisplay() {
+                inputElement.textContent = currentInput;
+                resultElement.textContent = previousInput + (operation ? ' ' + operation : '');
+            }
+            // Add to history
+            function addToHistory(expression, result) {
+                calculationHistory.unshift({
+                    expression: expression,
+                    result: result,
+                    timestamp: new Date()
+                });
+                // Keep only last 10 calculations
+                if (calculationHistory.length > 10) {
+                    calculationHistory.pop();
+                }
+                updateHistoryPanel();
+            }
+            // Update history panel
+            function updateHistoryPanel() {
+                if (calculationHistory.length === 0) {
+                    historyContent.innerHTML = '<div class="history-empty">No calculations yet</div>';
+                    return;
+                }
+                historyContent.innerHTML = calculationHistory.map(item => {
+                    return `
+                        <div class="history-item">
+                            <div>${item.expression} = ${item.result}</div>
+                            <div style="font-size: 0.7rem; color: var(--text-light); text-align: right;">
+                                ${item.timestamp.toLocaleTimeString()}
+                            </div>
+                        </div>
+                    `;
+                }).join('');
+            }
+            // Handle number input
+            function inputNumber(number) {
+                if (currentInput === '0' || resetInput) {
+                    currentInput = number;
+                    resetInput = false;
+                } else {
+                    currentInput += number;
+                }
+                updateDisplay();
+            }
+            // Handle decimal input
+            function inputDecimal() {
+                if (resetInput) {
+                    currentInput = '0.';
+                    resetInput = false;
+                } else if (!currentInput.includes('.')) {
+                    currentInput += '.';
+                }
+                updateDisplay();
+            }
+            // Handle operator input
+            function handleOperator(op) {
+                if (operation !== null) calculate();
+                previousInput = currentInput;
+                operation = op;
+                resetInput = true;
+                updateDisplay();
+            }
+            // Perform calculation
+            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;
+                    case '%':
+                        result = prev % current;
+                        break;
+                    default:
+                        return;
+                }
+                // Format the result
+                currentInput = formatNumber(result);
+                operation = null;
+                resetInput = true;
+                // Add to history
+                addToHistory(`${previousInput} ${operation} ${current}`, currentInput);
+                updateDisplay();
+            }
+            // Format number to avoid scientific notation and limit decimals
+            function formatNumber(num) {
+                // Handle very large or very small numbers
+                if (Math.abs(num) > 999999999 || Math.abs(num) < 0.0000001) {
+                    return num.toExponential(6);
+                }
+                // Limit to 8 decimal places
+                const numStr = num.toString();
+                if (numStr.includes('.')) {
+                    const parts = numStr.split('.');
+                    if (parts[1].length > 8) {
+                        return parseFloat(num).toFixed(8).toString();
+                    }
+                }
+                return numStr;
+            }
+            // Clear calculator
+            function clear() {
+                currentInput = '0';
+                previousInput = '';
+                operation = null;
+                updateDisplay();
+            }
+            // Backspace
+            function backspace() {
+                if (currentInput.length === 1 || (currentInput.length === 2 && currentInput.startsWith('-'))) {
+                    currentInput = '0';
+                } else {
+                    currentInput = currentInput.slice(0, -1);
+                }
+                updateDisplay();
+            }
+            // Event listeners for buttons
+            document.getElementById('clear').addEventListener('click', clear);
+            document.getElementById('backspace').addEventListener('click', backspace);
+            document.getElementById('percent').addEventListener('click', () => handleOperator('%'));
+            document.getElementById('divide').addEventListener('click', () => handleOperator('/'));
+            document.getElementById('multiply').addEventListener('click', () => handleOperator('×'));
+            document.getElementById('subtract').addEventListener('click', () => handleOperator('-'));
+            document.getElementById('add').addEventListener('click', () => handleOperator('+'));
+            document.getElementById('equals').addEventListener('click', calculate);
+            document.getElementById('decimal').addEventListener('click', inputDecimal);
+            // Number buttons
+            for (let i = 0; i <= 9; i++) {
+                document.getElementById(i.toString()).addEventListener('click', () => inputNumber(i.toString()));
+            }
+            // History panel toggle
+            historyBtn.addEventListener('click', () => {
+                historyPanel.classList.add('active');
+            });
+            historyClose.addEventListener('click', () => {
+                historyPanel.classList.remove('active');
+            });
+            // Keyboard support
+            document.addEventListener('keydown', (e) => {
+                if (e.key >= 0 && e.key <= 9) {
+                    inputNumber(e.key);
+                } else if (e.key === '.') {
+                    inputDecimal();
+                } else if (e.key === '+' || e.key === '-' || e.key === '*' || e.key === '/') {
+                    let op = e.key;
+                    if (op === '*') op = '×';
+                    handleOperator(op);
+                } else if (e.key === 'Enter' || e.key === '=') {
+                    calculate();
+                } else if (e.key === 'Escape') {
+                    clear();
+                } else if (e.key === 'Backspace') {
+                    backspace();
+                }
+            });
+            // Initialize
+            updateDisplay();
+        });
+    </script>
+</body>
+</html>