index.html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Simple Chat</title>
    <style>
        html, button, input {
            font-size: 1.5rem;
            font-family: 'Gill Sans', 'Gill Sans MT', Calibri, 'Trebuchet MS', sans-serif;
            background-color: black;
            color: white;
        }
        body {
            overflow-y: auto;
            height: 100vh;
            margin: 0;
            text-align: center;
        }
        .message {
            margin: 0.5rem;
        }
        .message.mine {
            text-align: right;
            background-color: green;
            padding-right: 1rem;
            border-radius: 1rem 1rem 0.25rem;
        }
        .message.others {
            background-color: #333;
            padding-left: 1rem;
            border-radius: 1rem 1rem 1rem 0.25rem;
            text-align: left;
        }
        #nickname-container {
            position: fixed;
            top: 0;
            width: 100%;
            padding: 1rem;
            background: black;
            z-index: 10;
        }
        #message-form {
            position: fixed;
            bottom: 0;
            width: 100%;
            background: black;
            display: none;
        }
        #message-input {
            width: calc(100vw - 7rem);
        }
        .time {
            font-size: 0.5rem;
        }
        #chat-container {
            padding-bottom: 2rem;
            padding-top: 3.2rem;
        }
    </style>
</head>
<body>
    <div id="nickname-container">
        <input type="text" id="nickname-input" placeholder="Enter your nickname" maxlength="156" required>
        <button id="set-nickname">Set Nickname</button>
    </div>
    <div id="chat-container"></div>
    <form id="message-form">
        <input type="text" id="message-input" placeholder="Type your message..." autocomplete="off" required>
        <button type="submit">Send</button>
    </form>
    
    <!-- Firebase SDK -->
    <script src="https://www.gstatic.com/firebasejs/8.10.0/firebase-app.js"></script>
    <script src="https://www.gstatic.com/firebasejs/8.10.0/firebase-database.js"></script>
    
    <script>
        // Firebase configuration
        // Note: this should really be in an environment variable or something, not in plain text like this
        const firebaseConfig = {
            apiKey: "AIzaSyDg0wUy2BgfkdM_9ZxywZ81rXiqLdugqg0",
            authDomain: "chat-4b9b6.firebaseapp.com",
            databaseURL: "https://chat-4b9b6-default-rtdb.asia-southeast1.firebasedatabase.app",
            projectId: "chat-4b9b6",
            storageBucket: "chat-4b9b6.firebasestorage.app",
            messagingSenderId: "67637601490",
            appId: "1:67637601490:web:8ee0d3f44868c950c9790b"
        };
        
        // Initialize Firebase
        firebase.initializeApp(firebaseConfig);
        const database = firebase.database();
        
        // DOM elements
        const messageForm = document.getElementById('message-form');
        const messageInput = document.getElementById('message-input');
        const chatContainer = document.getElementById('chat-container');
        const body = document.body;
        
        // Nickname elements
        const nicknameInput = document.getElementById('nickname-input');
        const setNicknameBtn = document.getElementById('set-nickname');
        
        // Store nickname
        let currentNickname = "Anonymous";

        // Hide message list
            
        
        // Send message
        messageForm.addEventListener('submit', e => {
            e.preventDefault();
            const message = messageInput.value.trim();
            if (message) {
                database.ref('messages').push({
                    text: message,
                    timestamp: firebase.database.ServerValue.TIMESTAMP,
                    sender: currentNickname,
                });
                messageInput.value = '';
            }
        });
        
        // Load messages
        database.ref('messages').orderByChild('timestamp').on('value', snapshot => {
            chatContainer.innerHTML = '';
            snapshot.forEach(childSnapshot => {
                const msg = childSnapshot.val();
                const messageDiv = document.createElement('div');
                messageDiv.classList.add("message");
                messageDiv.classList.add(msg.sender === currentNickname ? 'mine' : 'others');
                const textAreaDiv = document.createElement("div");
                textAreaDiv.classList.add("text");
                textAreaDiv.textContent = msg.text;
                const timeAreaDiv = document.createElement("div");
                timeAreaDiv.classList.add("time");
                timeAreaDiv.textContent = `${new Date(msg.timestamp).toLocaleString()} - ${msg.sender}`;
                messageDiv.append(textAreaDiv, timeAreaDiv)
                chatContainer.append(messageDiv);
            });
            // Scroll entire body to bottom
            window.scrollTo(0, document.body.scrollHeight);
        });
        
        setNicknameBtn.addEventListener('click', () => {
            const newNickname = nicknameInput.value.trim();
            if (newNickname) {
                currentNickname = newNickname;
                messageForm.style.display = 'block';
                // Focus message input after setting nickname
                messageInput.focus();
            }
        });
    </script>
</body>
</html>