<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Hesap Makinesi</title>
<style>
body {
font-family: Arial, sans-serif;
background: linear-gradient(45deg, #2b5876, #4e4376);
background-size: 400% 400%;
animation: gradientBG 15s ease infinite;
display: flex;
justify-content: center;
align-items: center;
height: 100vh;
margin: 0;
overflow: hidden;
color: #000;
}
@keyframes gradientBG {
0% { background-position: 0% 50%; }
50% { background-position: 100% 50%; }
100% { background-position: 0% 50%; }
}
.calculator {
background-color: rgba(255, 255, 255, 0.1);
border-radius: 8px;
box-shadow: 0 0 20px rgba(0, 0, 0, 0.2);
padding: 20px;
text-align: center;
color: #fff;
transition: background-color 0.3s ease;
}
.calculator input[type="text"] {
width: 100%;
max-width: 150px;
padding: 10px;
border: 1px solid #ccc;
border-radius: 4px;
font-size: 18px;
background: linear-gradient(45deg, #4e4376, #2b5876);
color: #fff;
text-align: right;
position: relative;
overflow: hidden;
animation: gradientEffect 5s linear infinite alternate;
}
@keyframes gradientEffect {
0% { background-position: 0% 50%; }
100% { background-position: 100% 50%; }
}
.calculator button {
width: 48px;
height: 48px;
margin: 4px;
font-size: 18px;
border: none;
border-radius: 4px;
cursor: pointer;
background-color: #444;
transition: background-color 0.3s ease, transform 0.2s ease, box-shadow 0.2s ease;
color: #fff;
box-shadow: 0 2px 5px rgba(0, 0, 0, 0.2);
background: linear-gradient(45deg, #4e4376, #2b5876);
}
.calculator button:hover {
background-color: #666;
transform: translateY(-2px);
}
.calculator button:active {
background-color: #333;
transform: translateY(0);
box-shadow: 0 0 5px rgba(0, 0, 0, 0.5);
}
.ust {
display: flex;
align-items: center;
}
.ust button {
margin-right: 10px; /* Adjust the margin as needed */
}
/* Uçan beyaz partiküller */
.particles {
position: absolute;
width: 100%;
height: 100%;
pointer-events: none;
}
.particle {
position: absolute;
width: 2px;
height: 2px;
background-color: #fff;
border-radius: 50%;
pointer-events: none;
animation: particleAnim 10s linear infinite;
}
@keyframes particleAnim {
0% {
transform: translateY(0) rotate(0deg);
opacity: 1;
}
100% {
transform: translateY(-100vh) rotate(360deg);
opacity: 0;
}
}
.context-menu {
position: absolute;
background-color: white;
color: black;
border: 1px solid #ccc;
padding: 8px;
animation: fadeInOut 3s forwards;
display: none;
}
.context-menu ul {
list-style-type: none;
padding: 0;
margin: 0;
}
.context-menu ul li {
cursor: pointer;
padding: 5px;
transition: background-color 0.3s ease;
}
.context-menu ul li:hover {
background-color: #eee;
}
@keyframes fadeInOut {
0% { opacity: 0; }
100% { opacity: 1; }
}
.modal {
/* Stiller */
}
</style>
</head>
<body>
<div class="calculator">
<div class="ust">
<button onclick="clearResult()">C</button>
<input type="text" id="result" value="" readonly>
</div>
<br>
<button onclick="appendToResult('1')">1</button>
<button onclick="appendToResult('2')">2</button>
<button onclick="appendToResult('3')">3</button>
<button onclick="appendToResult('+')">+</button>
<br>
<button onclick="appendToResult('4')">4</button>
<button onclick="appendToResult('5')">5</button>
<button onclick="appendToResult('6')">6</button>
<button onclick="appendToResult('-')">-</button>
<br>
<button onclick="appendToResult('7')">7</button>
<button onclick="appendToResult('8')">8</button>
<button onclick="appendToResult('9')">9</button>
<button onclick="appendToResult('*')">*</button>
<br>
<button onclick="appendToResult('0')">0</button>
<button onclick="appendToResult('.')">.</button>
<button onclick="calculateResult()">=</button>
<button onclick="appendToResult('/')">/</button>
</div>
<div class="particles"></div>
<script>
function appendToResult(value) {
const result = document.getElementById('result');
result.value += value;
animateNumbers(result);
}
function animateNumbers(element) {
const value = element.value;
element.value = '';
for (let i = 0; i < value.length; i++) {
setTimeout(function() {
element.value += value.charAt(i);
}, i * 100);
}
}
function clearResult() {
document.getElementById('result').value = '';
}
function calculateResult() {
const result = document.getElementById('result');
try {
// Replace comma with dot for decimal separator
const sanitizedExpression = result.value.replace(/,/g, '.');
// Use Function constructor for safer evaluation
const calculation = new Function('return ' + sanitizedExpression)();
// Format the result using toLocaleString to handle locale-specific formatting
result.value = calculation.toLocaleString('tr-TR');
} catch (error) {
result.value = 'Error';
}
}
// Uçan partiküllerin oluşturulması
const particlesContainer = document.querySelector('.particles');
for (let i = 0; i < 50; i++) {
const particle = document.createElement('div');
particle.className = 'particle';
particle.style.left = Math.random() * window.innerWidth + 'px';
particle.style.animationDuration = (Math.random() * 10 + 5) + 's';
particlesContainer.appendChild(particle);
}
// Sayfa yüklenirken select özelliğini devre dışı bırakma
window.onload = function() {
document.addEventListener('selectstart', function(e) {
e.preventDefault();
});
};
</script>
</body>
</html>