From a9c3110645b67d563bece54b75dac62ace39ab29 Mon Sep 17 00:00:00 2001 From: beanz Date: Wed, 12 Feb 2025 18:08:17 +0000 Subject: [PATCH] Upload files to "Chatbox-Website" --- Chatbox-Website/chat.php | 73 +++++++++++++++++++++++++++++ Chatbox-Website/chatlog.txt | 1 + Chatbox-Website/index.html | 36 +++++++++++++++ Chatbox-Website/script.js | 75 ++++++++++++++++++++++++++++++ Chatbox-Website/styles.css | 92 +++++++++++++++++++++++++++++++++++++ 5 files changed, 277 insertions(+) create mode 100644 Chatbox-Website/chat.php create mode 100644 Chatbox-Website/chatlog.txt create mode 100644 Chatbox-Website/index.html create mode 100644 Chatbox-Website/script.js create mode 100644 Chatbox-Website/styles.css diff --git a/Chatbox-Website/chat.php b/Chatbox-Website/chat.php new file mode 100644 index 0000000..4886c2e --- /dev/null +++ b/Chatbox-Website/chat.php @@ -0,0 +1,73 @@ += 50) { + // Trim the oldest messages, keeping only the latest 49 messages + $lines = array_slice($lines, -49); + } + + // Write the new message to the file + file_put_contents($filename, implode(PHP_EOL, $lines) . PHP_EOL . $newMessage); + + // Return a success response + http_response_code(200); + exit('Message saved successfully.'); + } else { + // Invalid input, return an error response + http_response_code(400); + exit('Invalid input data.'); + } + +} else { + // Handle GET requests (fetching chat messages) + if ($_SERVER['REQUEST_METHOD'] === 'GET') { + $filename = 'chatlog.txt'; + if (file_exists($filename)) { + // Read the chat log file and send its content as the response + readfile($filename); + } else { + // Return an empty response if the chat log file doesn't exist + http_response_code(200); + exit(''); + } + } +} +?> diff --git a/Chatbox-Website/chatlog.txt b/Chatbox-Website/chatlog.txt new file mode 100644 index 0000000..d3f5a12 --- /dev/null +++ b/Chatbox-Website/chatlog.txt @@ -0,0 +1 @@ + diff --git a/Chatbox-Website/index.html b/Chatbox-Website/index.html new file mode 100644 index 0000000..12e8991 --- /dev/null +++ b/Chatbox-Website/index.html @@ -0,0 +1,36 @@ + + + + Chatbox + + + + +

Chatbox

+ +

Play Tic-Tac-Toe

+ +
+
+ +
+
+ + + +
+
+ + + +
+
+ + + + + + diff --git a/Chatbox-Website/script.js b/Chatbox-Website/script.js new file mode 100644 index 0000000..4e18809 --- /dev/null +++ b/Chatbox-Website/script.js @@ -0,0 +1,75 @@ +function displayChatMessages(messages) { + const chatMessagesElement = document.getElementById('chatMessages'); + chatMessagesElement.innerHTML = messages.map((message) => `

${message}

`).join(''); + scrollToBottom(); +} + +function fetchChatMessages() { + fetch('chat.php') + .then((response) => response.text()) + .then((data) => { + const messages = data.split('\n').filter((message) => message.trim() !== ''); + displayChatMessages(messages); + }) + .catch((error) => { + console.error('Error fetching chat messages:', error); + }); +} + +// Poll for new messages every 30 seconds +setInterval(fetchChatMessages, 30000); // 30,000 milliseconds = 30 seconds + +function addChatMessage(message) { + const chatMessagesElement = document.getElementById('chatMessages'); + const newMessageElement = document.createElement('p'); + newMessageElement.textContent = message; + chatMessagesElement.appendChild(newMessageElement); + scrollToBottom(); +} + +fetchChatMessages(); + +document.getElementById('chatForm').addEventListener('submit', async (event) => { + event.preventDefault(); + const name = document.getElementById('name').value.trim(); + let message = document.getElementById('message').value.trim().toLowerCase(); + + if (name === '' || message === '') { + // Display a pop-up message for empty fields + alert('Nickname and message are required.'); + return; + } + + // Check for blocked keywords + const blockedKeywords = ['js', 'javascript', 'php']; + let blocked = false; + blockedKeywords.forEach((keyword) => { + if (message.includes(keyword)) { + // Display a pop-up message for blocked keywords + alert('Blocked keyword detected. Message not sent.'); + blocked = true; + } + }); + + if (!blocked) { + // Send the message using AJAX + try { + await fetch('chat.php', { + method: 'POST', + body: new URLSearchParams({ name: name, message: message }), + headers: { 'Content-Type': 'application/x-www-form-urlencoded' }, + }); + fetchChatMessages(); + } catch (error) { + console.error('Error sending chat message:', error); + } + } + + // Clear the message input after submission + event.target.reset(); +}); + +function scrollToBottom() { + const chatbox = document.getElementById('chatbox'); + chatbox.scrollTop = chatbox.scrollHeight; +} diff --git a/Chatbox-Website/styles.css b/Chatbox-Website/styles.css new file mode 100644 index 0000000..373f273 --- /dev/null +++ b/Chatbox-Website/styles.css @@ -0,0 +1,92 @@ +body { + background-color: #000; + color: #fff; + font-family: Arial, sans-serif; +} + +h1 { + text-align: center; +} + +footer { + text-align: center; + padding: 10px; + display: block; +} + +#chatbox { + overflow: auto; + border: 1px solid #fff; + padding: 10px; +} + +#chatMessages p { + margin: 5px 0; +} + +#formContainer { + display: flex; + flex-direction: column; + align-items: center; + width: 100%; + /* Add margin-top and margin-bottom to create space above and below the form */ + margin: 20px 0; +} + +form { + width: 100%; + max-width: 600px; + display: flex; + flex-direction: column; /* Align the form elements in a column */ + align-items: center; +} + +/* Adjust the width of the form elements for better fit on mobile */ +input[type="text"], +input[type="submit"] { + width: 100%; /* Make the form elements full width on mobile */ + max-width: 400px; /* Set a maximum width to avoid excessive stretching */ + padding: 10px; /* Increase the padding for better touch interaction */ + margin-bottom: 10px; /* Add some margin between form elements */ + box-sizing: border-box; /* Include padding and border in the total width */ + background-color: #000; /* Set the background color to black */ + color: #fff; /* Set the text color to white */ +} + +/* Set a width for the nickname input to ensure it's visible */ +input[type="text"][name="name"] { + width: 100%; /* Adjust the width to your preference */ + max-width: 300px; /* Set a maximum width to avoid excessive stretching */ +} + +/* Set the send button to black */ +input[type="submit"] { + cursor: pointer; + background-color: #000; /* Set the background color to black */ + color: #fff; /* Set the text color to white */ + border: none; /* Remove the border */ +} + +#chatbox::-webkit-scrollbar { + width: 8px; +} + +#chatbox::-webkit-scrollbar-thumb { + background-color: #666; + border-radius: 4px; +} + +#chatbox::-webkit-scrollbar-thumb:hover { + background-color: #555; +} + +/* Media query for mobile devices */ +@media (max-width: 600px) { + body { + font-size: 16px; /* Adjust the font size for better readability on smaller screens */ + } + + #chatbox { + height: 200px; /* Adjust the height for a better chat experience on smaller screens */ + } +}