google-ai-edge · p018841p-coder · Oct 3, 2025
diff --git a/client/index.html b/client/index.html
@@ -0,0 +1,34 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>Chat App</title>
+    <link rel="stylesheet" href="style.css">
+</head>
+<body>
+    <div id="password-container">
+        <h2>Enter Password to Join</h2>
+        <input type="password" id="password-input" placeholder="Password">
+        <button id="password-submit">Join</button>
+        <p id="error-message" class="hidden">Wrong password. Please try again.</p>
+    </div>
+
+    <div id="chat-container" class="hidden">
+        <div id="chat-header">
+            <h2>Chat Room</h2>
+            <div id="background-controls">
+                <label for="bg-color">Change BG:</label>
+                <input type="color" id="bg-color" value="#ffffff">
+            </div>
+        </div>
+        <ul id="messages"></ul>
+        <form id="form" action="">
+            <input id="input" autocomplete="off" placeholder="Type a message..." /><button>Send</button>
+        </form>
+    </div>
+
+    <script src="/socket.io/socket.io.js"></script>
+    <script src="script.js"></script>
+</body>
+</html>
diff --git a/client/script.js b/client/script.js
@@ -0,0 +1,58 @@
+const socket = io({
+    autoConnect: false // Do not connect automatically
+});
+
+// DOM Elements
+const passwordContainer = document.getElementById('password-container');
+const passwordInput = document.getElementById('password-input');
+const passwordSubmit = document.getElementById('password-submit');
+const errorMessage = document.getElementById('error-message');
+
+const chatContainer = document.getElementById('chat-container');
+const messages = document.getElementById('messages');
+const form = document.getElementById('form');
+const input = document.getElementById('input');
+
+const bgColorPicker = document.getElementById('bg-color');
+
+// --- Password Handling ---
+passwordSubmit.addEventListener('click', () => {
+    const password = passwordInput.value;
+    socket.auth = { password };
+    socket.connect();
+});
+
+socket.on("connect_error", (err) => {
+    if (err.message === "invalid password") {
+        errorMessage.classList.remove('hidden');
+        passwordInput.value = '';
+    }
+});
+
+socket.on('connect', () => {
+    passwordContainer.classList.add('hidden');
+    chatContainer.classList.remove('hidden');
+    errorMessage.classList.add('hidden');
+});
+
+
+// --- Chat Functionality ---
+form.addEventListener('submit', (e) => {
+    e.preventDefault();
+    if (input.value) {
+        socket.emit('chat message', input.value);
+        input.value = '';
+    }
+});
+
+socket.on('chat message', (msg) => {
+    const item = document.createElement('li');
+    item.textContent = msg;
+    messages.appendChild(item);
+    window.scrollTo(0, document.body.scrollHeight);
+});
+
+// --- Background Change Functionality ---
+bgColorPicker.addEventListener('input', (e) => {
+    chatContainer.style.backgroundColor = e.target.value;
+});
diff --git a/client/style.css b/client/style.css
@@ -0,0 +1,115 @@
+body {
+    margin: 0;
+    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
+    background-color: #f0f2f5;
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    height: 100vh;
+}
+
+#password-container, #chat-container {
+    background: #fff;
+    border-radius: 8px;
+    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1), 0 8px 16px rgba(0, 0, 0, 0.1);
+    padding: 20px;
+    width: 100%;
+    max-width: 400px;
+    box-sizing: border-box;
+}
+
+#password-container {
+    text-align: center;
+}
+
+#password-container h2 {
+    margin-bottom: 20px;
+}
+
+#password-input {
+    width: calc(100% - 22px);
+    padding: 10px;
+    margin-bottom: 10px;
+    border: 1px solid #ddd;
+    border-radius: 6px;
+}
+
+#password-submit {
+    width: 100%;
+    padding: 10px;
+    border: none;
+    background-color: #1877f2;
+    color: white;
+    border-radius: 6px;
+    cursor: pointer;
+}
+
+#password-submit:hover {
+    background-color: #166fe5;
+}
+
+#chat-header {
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+    border-bottom: 1px solid #ddd;
+    padding-bottom: 10px;
+    margin-bottom: 10px;
+}
+
+#chat-header h2 {
+    margin: 0;
+}
+
+#messages {
+    list-style-type: none;
+    margin: 0;
+    padding: 0;
+    height: 300px;
+    overflow-y: auto;
+    border-bottom: 1px solid #ddd;
+}
+
+#messages li {
+    padding: 8px 12px;
+}
+
+#messages li:nth-child(odd) {
+    background: #f1f1f1;
+}
+
+#form {
+    display: flex;
+    margin-top: 10px;
+}
+
+#input {
+    border: 1px solid #ddd;
+    padding: 10px;
+    flex-grow: 1;
+    border-radius: 18px;
+    margin-right: 10px;
+}
+
+#form button {
+    background: #1877f2;
+    border: none;
+    padding: 10px 20px;
+    color: white;
+    border-radius: 18px;
+    cursor: pointer;
+}
+
+#form button:hover {
+    background: #166fe5;
+}
+
+.hidden {
+    display: none;
+}
+
+#error-message {
+    color: red;
+    font-size: 0.9em;
+    margin-top: 10px;
+}
diff --git a/server/.gitignore b/server/.gitignore
@@ -0,0 +1 @@
+node_modules/
diff --git a/server/index.js b/server/index.js
@@ -0,0 +1,44 @@
+const express = require('express');
+const http = require('http');
+const { Server } = require("socket.io");
+const path = require('path');
+
+const app = express();
+const server = http.createServer(app);
+const io = new Server(server, {
+  cors: {
+    origin: "*", // Allow all origins for now
+    methods: ["GET", "POST"]
+  }
+});
+
+// Serve static files from the "client" directory
+app.use(express.static(path.join(__dirname, '..', 'client')));
+
+// Middleware for password verification
+io.use((socket, next) => {
+    const password = socket.handshake.auth.password;
+    if (password === "password123") { // Hardcoded password for now
+        return next();
+    }
+    return next(new Error("invalid password"));
+});
+
+io.on('connection', (socket) => {
+    console.log('a user connected');
+
+    // Handle chat messages
+    socket.on('chat message', (msg) => {
+        io.emit('chat message', msg); // Broadcast the message to all clients
+    });
+
+    socket.on('disconnect', () => {
+        console.log('user disconnected');
+    });
+});
+
+const PORT = process.env.PORT || 3000;
+
+server.listen(PORT, () => {
+  console.log(`listening on *:${PORT}`);
+});