<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Neon Glass Calculator</title>
<style>
*{
box-sizing: border-box;
margin: 0;
padding: 0;
}
body{
font-family: "Poppins",sans-serif;
background: linear-gradient(135deg, #000428, #004e92);
height: 100vh;
display: flex;
justify-content: center;
align-items: center;
}
.calculator{
background: rgba(255, 255, 255, 0.1);
box-shadow: 0 8px 32px rgba(0, 0, 0, 0.37);
backdrop-filter: blur(10px);
border-radius: 20px;
padding: 20px;
width: 350px;
max-width: 90%;
}
.display {
background: rgba(255, 255, 255, 0.2);
box-shadow: inset 0 4px 12px rgba(255, 255, 255, 0.5);
color: #fff;
font-size: 2.5rem;
text-align: right;
padding: 20px 10px;
border-radius: 10px;
margin-bottom: 20px;
}
.buttons {
display: grid;
grid-template-columns: repeat(4, 1fr);
gap: 15px;
}
button {
background: rgba(255, 255, 255, 0.1);
border: none;
box-shadow: 0 4px 15px rgba(0, 255, 255, 0.4), 0 0 10px rgba(0, 255, 255, 0.7) inset;
color: #fff;
font-size: 1.5rem;
padding: 20px;
border-radius: 12px;
transition: transform 0.3s, box-shadow 0.3s;
cursor: pointer;
}
button:active {
transform: scale(0.95);
box-shadow: 0 4px 25px rgba(0, 255, 255, 0.6), 0 0 15px rgba(0, 255, 255, 1) inset;
}
button.operator {
background: rgba(255, 255, 255, 0.2);
color: #00ffff;
box-shadow: 0 4px 15px rgba(255, 165, 0, 0.5), 0 0 10px rgba(255, 165, 0, 0.7) inset;
}
button.operator:active {
box-shadow: 0 4px 25px rgba(255, 165, 0, 0.7), 0 0 15px rgba(255, 165, 0, 1) inset;
}
</style>
</head>
<body>
<div class="calculator">
<div class="display" id="display">0</div>
<div class="buttons">
<button onclick="clearDisplay()">C</button>
<button onclick="inputOperator('/')">÷</button>
<button onclick="inputOperator('*')">×</button>
<button onclick="deleteDigit()">⌫</button>
<button onclick="inputDigit('7')">7</button>
<button onclick="inputDigit('8')">8</button>
<button onclick="inputDigit('9')">9</button>
<button class="operator" onclick="inputOperator('-')">−</button>
<button onclick="inputDigit('4')">4</button>
<button onclick="inputDigit('5')">5</button>
<button onclick="inputDigit('6')">6</button>
<button class="operator" onclick="inputOperator('+')">+</button>
<button onclick="inputDigit('1')">1</button>
<button onclick="inputDigit('2')">2</button>
<button onclick="inputDigit('3')">3</button>
<button rowspan="2" onclick="calculate()">=</button>
<button onclick="inputDigit('0')">0</button>
<button onclick="inputDigit('.')">.</button>
</div>
</div>
<script>
const display = document.getElementById("display");
function inputDigit(digit) {
if (display.innerText === "0") {
display.innerText = digit;
} else {
display.innerText += digit;
}
}
function inputOperator(operator) {
const lastChar = display.innerText.slice(-1);
if ("+-*/".includes(lastChar)) {
display.innerText = display.innerText.slice(0, -1) + operator;
} else {
display.innerText += operator;
}
}
function clearDisplay() {
display.innerText = "0";
}
function deleteDigit() {
display.innerText = display.innerText.slice(0, -1) || "0";
}
function calculate() {
try {
display.innerText = eval(display.innerText);
} catch {
display.innerText = "Error";
}
}
</script>
</body>
</html>
