Spaces:

akhaliq
/

anycoder-db4c6577

Running

App Files Files Community

anycoder-db4c6577 / index.html

akhaliq HF Staff

Upload folder using huggingface_hub

679c2b0 verified 5 days ago

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>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">×</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>