Scribd
Upload
43 views4 pages

DOCTYPE html.1

This document defines an anonymous chat room where users can send messages without identifying themselves. It uses Firebase realtime database to store and retrieve messages. When a message is sent, it generates a random name from adjective and noun lists and stores the anonymous name along with the message in the Firebase database. Retrieved messages are appended to the chat window with the random name and message content.

Uploaded by

bhapkaraditya96
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as DOCX, PDF, TXT or read online on Scribd
43 views4 pages

DOCTYPE html.1

This document defines an anonymous chat room where users can send messages without identifying themselves. It uses Firebase realtime database to store and retrieve messages. When a message is sent, it generates a random name from adjective and noun lists and stores the anonymous name along with the message in the Firebase database. Retrieved messages are appended to the chat window with the random name and message content.

Uploaded by

bhapkaraditya96
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as DOCX, PDF, TXT or read online on Scribd
You are on page 1/ 4

<!

DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Anonymous Chat Room</title>
<style>
body {
font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
margin: 0;
padding: 0;
display: flex;
justify-content: center;
align-items: center;
height: 100vh;
background-image: linear-
gradient(rgba(4,9,30,0.6),rgba(4,9,30,0.6)),url(../image/chatroom.png);
background-size: cover;
background-position: center;
}

.chat-container {
width: 800px;
background-color: rgba(255, 255, 255, 0.2);
border-radius: 10px;
box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
overflow: hidden;
}

.chat-header {
padding: 10px;
text-align: center;
background-color: #007bff;
color: #fff;
border-radius: 10px 10px 0 0;
}

.chat-window {
height: 400px;
border-bottom: 2px solid #ccc;
overflow-y: scroll;
padding: 10px;
}

.message {
margin-bottom: 10px;
padding: 5px 10px;
border-radius: 5px;
background-color: #f0f0f0;
}

.message strong {
color: #333;
}

input[type="text"] {
width: calc(100% - 70px);
padding: 10px;
border: none;
border-radius: 5px;
margin: 10px;
}

button {
padding: 10px 20px;
border: none;
background-color: #007bff;
color: #fff;
border-radius: 5px;
cursor: pointer;
margin: 10px;
}

button:hover {
background-color: #0056b3;
}
</style>
</head>
<body>
<div class="chat-container">
<div class="chat-header">
<h2>Anonymous Chat</h2>
</div>
<div class="chat-window" id="chat-window"></div>
<input type="text" id="message-input" placeholder="Type your message...">
<button onclick="sendMessage()">Send</button>
</div>
<script src="https://www.gstatic.com/firebasejs/10.0.1/firebase-app.js"></
script>
<script src="https://www.gstatic.com/firebasejs/10.0.1/firebase-
database.js"></script>
<script>
const firebaseConfig = {
apiKey: "AIzaSyA1TqE1B0VRDHiXE0BDVTQVqb6uW90d-vg",
authDomain: "aditech-517d4.firebaseapp.com",
projectId: "aditech-517d4",
storageBucket: "aditech-517d4.appspot.com",
messagingSenderId: "26119145381",
appId: "1:26119145381:web:87fb301d16385567204a4c"
};
firebase.initializeApp(firebaseConfig);

const database = firebase.database();


const ref = database.ref('messages');

ref.on('child_added', function(snapshot) {
const message = snapshot.val();
appendMessage(message.name, message.message);
});

function appendMessage(name, message) {


const chatWindow = document.getElementById('chat-window');
const messageElement = document.createElement('div');
messageElement.classList.add('message');
messageElement.innerHTML = `<strong>${name}:</strong> ${message}`;
chatWindow.appendChild(messageElement);
chatWindow.scrollTop = chatWindow.scrollHeight;
}

function sendMessage() {
const messageInput = document.getElementById('message-input');
const message = messageInput.value.trim();
if (message !== '') {
const name = generateRandomName();
ref.push({
name: name,
message: message
});
messageInput.value = '';
}
}

function generateRandomName() {
const adjectives = ['Anonymous', 'Mysterious', 'Shadow', 'Silent',
'Whisper', 'Pirate', 'Ninja', 'Sneaky', 'Secret', 'Hidden', 'Ghostly',
'Enigmatic', 'Cryptic', 'Phantom', 'Stealthy', 'Evasive', 'Elusive',
'Invisible', 'Unknown', 'Unseen'];
const nouns = ['Stranger', 'Visitor', 'Watcher', 'Traveler', 'Observer',
'Error', 'Captain', 'Sailor', 'Avenger', 'Voyager', 'Explorer', 'Wanderer',
'Adventurer', 'Prowler', 'Rogue', 'Shadow', 'Guardian', 'Sentinel', 'Specter',
'Phantom'];
const randomAdjective = adjectives[Math.floor(Math.random() *
adjectives.length)];
const randomNoun = nouns[Math.floor(Math.random() * nouns.length)];
return `${randomAdjective} ${randomNoun}`;
}
</script>
</body>
</html>

You might also like