<!DOCTYPE html>
<html lang=”en”>
<head>
<meta charset=”UTF-8″>
<meta name=”viewport” content=”width=device-width, initial-scale=1.0″>
<title>Virtual Telephone with Sound, Animation, Delete, and On/Off Switch</title>
<style>
body {
display: flex;
justify-content: center;
align-items: center;
height: 100vh;
background: linear-gradient(to right, #6a11cb, #2575fc);
font-family: ‘Arial’, sans-serif;
margin: 0;
}
.phone-container {
background: #fff;
border-radius: 20px;
box-shadow: 0 10px 20px rgba(0, 0, 0, 0.2);
width: 300px;
text-align: center;
padding: 20px;
opacity: 0.5;
transition: opacity 0.5s ease;
}
.phone-container.on {
opacity: 1;
}
.display {
width: 100%;
height: 50px;
font-size: 1.5em;
border: none;
border-radius: 10px;
margin-bottom: 20px;
padding: 10px;
background: #f1f1f1;
text-align: right;
box-shadow: inset 0 4px 8px rgba(0, 0, 0, 0.1);
}
.keypad {
display: flex;
flex-wrap: wrap;
justify-content: center;
}
.key {
background: #eee;
border-radius: 10px;
width: 60px;
height: 60px;
margin: 10px;
display: flex;
align-items: center;
justify-content: center;
font-size: 1.5em;
color: #333;
cursor: pointer;
transition: all 0.3s ease;
box-shadow: 0 4px 10px rgba(0, 0, 0, 0.2);
position: relative;
overflow: hidden;
}
.key:active {
background: #ccc;
transform: scale(0.9);
box-shadow: 0 0 15px rgba(0, 0, 0, 0.5);
}
.key::before {
content: ”;
position: absolute;
top: -50%;
left: -50%;
width: 200%;
height: 200%;
background: radial-gradient(circle, rgba(255,255,255,0.5), transparent);
transition: all 0.3s ease;
}
.key:active::before {
width: 100%;
height: 100%;
top: 0;
left: 0;
background: radial-gradient(circle, rgba(255,255,255,0.3), transparent);
}
.call-button, .delete-button {
background: #28a745;
color: white;
width: 100%;
border: none;
border-radius: 10px;
height: 50px;
font-size: 1.5em;
cursor: pointer;
margin-top: 10px;
transition: background 0.3s;
box-shadow: 0 4px 10px rgba(0, 0, 0, 0.2);
}
.call-button:active, .delete-button:active {
background: #218838;
box-shadow: 0 0 15px rgba(0, 0, 0, 0.5);
}
.calling {
display: none;
flex-direction: column;
align-items: center;
justify-content: center;
padding: 20px;
background: rgba(0, 0, 0, 0.7);
border-radius: 20px;
box-shadow: 0 10px 20px rgba(0, 0, 0, 0.2);
text-align: center;
}
.calling img {
width: 100px;
margin-bottom: 20px;
}
.calling p {
color: white;
font-size: 1.2em;
margin: 0;
}
.switch {
position: absolute;
top: 20px;
right: 20px;
width: 60px;
height: 30px;
background: #ccc;
border-radius: 30px;
cursor: pointer;
transition: background 0.3s;
}
.switch:before {
content: ”;
position: absolute;
top: 3px;
left: 3px;
width: 24px;
height: 24px;
background: #fff;
border-radius: 50%;
transition: all 0.3s;
}
.switch.on {
background: #28a745;
}
.switch.on:before {
left: 33px;
}
</style>
</head>
<body>
<div class=”phone-container”>
<input type=”text” class=”display” readonly>
<div class=”keypad”>
<div class=”key”>1</div>
<div class=”key”>2</div>
<div class=”key”>3</div>
<div class=”key”>4</div>
<div class=”key”>5</div>
<div class=”key”>6</div>
<div class=”key”>7</div>
<div class=”key”>8</div>
<div class=”key”>9</div>
<div class=”key”>*</div>
<div class=”key”>0</div>
<div class=”key”>#</div>
</div>
<button class=”call-button”>Call</button>
<button class=”delete-button”>Delete</button>
</div>
<div class=”calling”>
<img src=”https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcS7yGKdLCapz4AxCsleCyWSW0fLc66WTU9A0g&s” alt=”Calling Emoji”>
<p>Calling…</p>
</div>
<!– On/Off Switch –>
<div class=”switch”></div>
<!– Sound Files –>
<audio id=”key-sound” src=”https://youtu.be/BjNeNobdMaA” preload=”auto”></audio>
<script>
document.addEventListener(‘DOMContentLoaded’, () => {
const keys = document.querySelectorAll(‘.key’);
const display = document.querySelector(‘.display’);
const callButton = document.querySelector(‘.call-button’);
const deleteButton = document.querySelector(‘.delete-button’);
const callingScreen = document.querySelector(‘.calling’);
const keySound = document.getElementById(‘key-sound’);
const phoneContainer = document.querySelector(‘.phone-container’);
const switchButton = document.querySelector(‘.switch’);
// On/Off switch functionality
let phoneOn = false;
switchButton.addEventListener(‘click’, () => {
phoneOn = !phoneOn;
phoneContainer.classList.toggle(‘on’, phoneOn);
switchButton.classList.toggle(‘on’, phoneOn);
if (!phoneOn) {
display.value = ”;
}
});
// Keypad interaction
keys.forEach(key => {
key.addEventListener(‘click’, () => {
if (phoneOn) {
display.value += key.textContent;
// Play sound on key click
keySound.currentTime = 0;
keySound.play();
// Animate the key
key.classList.add(‘active’);
setTimeout(() => key.classList.remove(‘active’), 150);
}
});
});
// Call button interaction
callButton.addEventListener(‘click’, () => {
if (phoneOn && display.value.length > 0) {
callingScreen.style.display = ‘flex’;
setTimeout(() => {
callingScreen.style.display = ‘none’;
display.value = ”;
}, 3000); // Simulate a 3-second call
} else if (!phoneOn) {
alert(“Please turn on the phone first.”);
} else {
alert(“Please enter a number to call.”);
}
});
// Delete button interaction
deleteButton.addEventListener(‘click’, () => {
if (phoneOn && display.value.length > 0) {
display.value = display.value.slice(0, -1);
}
});
});
</script>
</body>
</html>