Services

Password Protected Chat App

body {
font-family: Arial, sans-serif;
background-color: #0a0a0a;
margin: 0;
display: flex;
justify-content: center;
align-items: center;
flex-direction: column;
min-height: 100vh;
}
.clock {
font-size: 28px;
color: pink;
text-shadow: 0 0 10px rgba(255, 105, 180, 0.8);
margin-bottom: 20px;
}
.chat-container {
width: 360px;
background-color: rgba(0, 0, 0, 0.6);
padding: 20px;
border-radius: 10px;
box-shadow: 0 0 20px rgba(255, 105, 180, 0.5);
}
.chat-box {
height: 300px;
overflow-y: scroll;
background-color: rgba(0, 0, 0, 0.8);
border-radius: 10px;
box-shadow: 0 0 10px rgba(255, 105, 180, 0.3);
}
.message {
padding: 10px;
margin: 10px;
border: 1px solid #ddd;
background-color: #222;
color: pink;
text-shadow: 0 0 10px rgba(255, 105, 180, 0.8);
border-radius: 5px;
}
.active-indicator {
display: inline-block;
width: 10px;
height: 10px;
background-color: green;
border-radius: 50%;
margin-right: 5px;
}
.notification {
margin-top: 10px;
color: yellow;
text-shadow: 0 0 5px rgba(255, 255, 0, 0.8);
}
.creator-info {
margin-top: 20px;
text-align: center;
font-size: 14px;
color: #00bfff; /* Neo blue color */
text-shadow: 0 0 10px rgba(0, 191, 255, 0.8);
}
input[type=”text”], button {
margin-top: 10px;
padding: 8px;
background-color: rgba(0, 0, 0, 0.8);
border: none;
color: pink;
text-shadow: 0 0 5px rgba(255, 105, 180, 0.5);
border-radius: 5px;
cursor: pointer;
}
input[type=”text”] {
width: 70%;
}
button {
width: 25%;
}
.name-input {
margin-top: 20px;
padding: 8px;
width: 100%;
background-color: rgba(0, 0, 0, 0.8);
border: none;
color: pink;
text-shadow: 0 0 5px rgba(255, 105, 180, 0.5);
border-radius: 5px;
}
.password-form {
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
height: 100vh;
}
input[type=”password”] {
margin: 5px;
padding: 8px;
background-color: rgba(0, 0, 0, 0.8);
border: none;
color: pink;
text-shadow: 0 0 5px rgba(255, 105, 180, 0.5);
border-radius: 5px;
}
button.password-button {
margin-top: 10px;
padding: 8px;
background-color: rgba(0, 0, 0, 0.8);
border: none;
color: pink;
text-shadow: 0 0 5px rgba(255, 105, 180, 0.5);
border-radius: 5px;
cursor: pointer;
}

var passwordForm = document.getElementById(“passwordForm”);
var chatContainer = document.getElementById(“chatContainer”);

function showChat() {
passwordForm.style.display = “none”;
chatContainer.style.display = “block”;
}

function updateTime() {
const clockElement = document.getElementById(“clock”);
const now = new Date();
const hours = now.getHours().toString().padStart(2, “0”);
const minutes = now.getMinutes().toString().padStart(2, “0”);
const seconds = now.getSeconds().toString().padStart(2, “0”);
clockElement.textContent = `${hours}:${minutes}:${seconds}`;
}

function sendMessage() {
var messageInput = document.getElementById(“messageInput”);
var chatBox = document.getElementById(“chatBox”);
var nameInput = document.getElementById(“nameInput”);
var notification = document.getElementById(“notification”);

var messageText = messageInput.value;
if (messageText.trim() === “”) {
return;
}

var name = nameInput.value || “Guest”;

var messageElement = document.createElement(“div”);
messageElement.classList.add(“message”);
messageElement.textContent = `${name}: ${messageText}`;

chatBox.appendChild(messageElement);
chatBox.scrollTop = chatBox.scrollHeight;

notification.textContent = `${name} is now active!`;
setTimeout(function() {
notification.textContent = “”;
}, 3000); // Clear notification after 3 seconds

messageInput.value = “”;
}

function checkPassword() {
var passwordInput = document.getElementById(“passwordInput”);
var password = passwordInput.value.trim();

// Replace ‘yourpassword’ with the actual password
if (password === “yourpassword”) {
showChat(); // Show the chat container
updateTime(); // Start updating time when chat is shown
setInterval(updateTime, 1000); // Update time every second
} else {
alert(“Incorrect password. Please try again.”);
passwordInput.value = “”;
}
}