Upload files to "Chatbox-Website"
This commit is contained in:
parent
62f678e812
commit
a9c3110645
73
Chatbox-Website/chat.php
Normal file
73
Chatbox-Website/chat.php
Normal file
@ -0,0 +1,73 @@
|
|||||||
|
<?php
|
||||||
|
// Function to validate and sanitize user inputs
|
||||||
|
function validateAndSanitizeInput($input) {
|
||||||
|
return htmlspecialchars(substr(trim($input), 0, 256), ENT_QUOTES, 'UTF-8');
|
||||||
|
}
|
||||||
|
|
||||||
|
// Check if the request is a POST request
|
||||||
|
if ($_SERVER['REQUEST_METHOD'] === 'POST') {
|
||||||
|
$name = isset($_POST['name']) ? validateAndSanitizeInput($_POST['name']) : 'Anonymous';
|
||||||
|
$message = isset($_POST['message']) ? $_POST['message'] : '';
|
||||||
|
|
||||||
|
// Your keyword filtering code
|
||||||
|
$blockedKeywords = array("php", "javascript", "script");
|
||||||
|
foreach ($blockedKeywords as $keyword) {
|
||||||
|
if (stripos($message, $keyword) !== false) {
|
||||||
|
http_response_code(400); // Bad Request
|
||||||
|
exit('Blocked keyword detected! Your message contains blocked content.');
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
// Sanitize the message
|
||||||
|
$sanitizedMessage = validateAndSanitizeInput($message);
|
||||||
|
|
||||||
|
if (!empty($name) && !empty($message)) {
|
||||||
|
// Use UTC time for the timestamp
|
||||||
|
date_default_timezone_set('UTC');
|
||||||
|
$newMessage = '[' . date('d-M-Y H:i:s') . '] ' . $name . ': ' . $sanitizedMessage . PHP_EOL;
|
||||||
|
|
||||||
|
// Open the chat log file for appending
|
||||||
|
$filename = 'chatlog.txt';
|
||||||
|
|
||||||
|
// Ensure the file path is safe (optional: use a specific directory)
|
||||||
|
$safePath = './' . basename($filename);
|
||||||
|
|
||||||
|
// Read the current messages and count them
|
||||||
|
$fileContent = file_get_contents($filename);
|
||||||
|
|
||||||
|
// Split file content into an array of messages
|
||||||
|
$lines = explode(PHP_EOL, $fileContent);
|
||||||
|
|
||||||
|
// If there are more than 50 messages, remove the oldest ones
|
||||||
|
if (count($lines) >= 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('');
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
?>
|
||||||
1
Chatbox-Website/chatlog.txt
Normal file
1
Chatbox-Website/chatlog.txt
Normal file
@ -0,0 +1 @@
|
|||||||
|
|
||||||
36
Chatbox-Website/index.html
Normal file
36
Chatbox-Website/index.html
Normal file
@ -0,0 +1,36 @@
|
|||||||
|
<!DOCTYPE html>
|
||||||
|
<html lang="en">
|
||||||
|
<head>
|
||||||
|
<title>Chatbox</title>
|
||||||
|
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0">
|
||||||
|
<link rel="stylesheet" type="text/css" href="styles.css">
|
||||||
|
</head>
|
||||||
|
<body>
|
||||||
|
<h1>Chatbox</h1>
|
||||||
|
|
||||||
|
<p style="text-align: center;"><a href="/Tic/" target="_blank">Play Tic-Tac-Toe</a></p>
|
||||||
|
|
||||||
|
<div id="chatbox" style="height: 400px;">
|
||||||
|
<div id="chatMessages">
|
||||||
|
<!-- The chat messages will be added here -->
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div id="popup" style="display: none;"></div>
|
||||||
|
|
||||||
|
<div id="formContainer">
|
||||||
|
<form id="chatForm">
|
||||||
|
<input type="text" name="name" size="15" maxlength="15" id="name" placeholder="Nickname" autocomplete="off" required>
|
||||||
|
<input type="text" name="message" size="40" maxlength="256" id="message" placeholder="Say Something!" autofocus required>
|
||||||
|
<input type="submit" value="Send">
|
||||||
|
</form>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<footer>
|
||||||
|
<p>c. 2023</p>
|
||||||
|
<p>The source code for this site is available on <a href="https://github.com/nxs8739/chatbox01"><b><u>GitHub</u></b></a></p>
|
||||||
|
</footer>
|
||||||
|
|
||||||
|
<script src="script.js"></script>
|
||||||
|
</body>
|
||||||
|
</html>
|
||||||
75
Chatbox-Website/script.js
Normal file
75
Chatbox-Website/script.js
Normal file
@ -0,0 +1,75 @@
|
|||||||
|
function displayChatMessages(messages) {
|
||||||
|
const chatMessagesElement = document.getElementById('chatMessages');
|
||||||
|
chatMessagesElement.innerHTML = messages.map((message) => `<p>${message}</p>`).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;
|
||||||
|
}
|
||||||
92
Chatbox-Website/styles.css
Normal file
92
Chatbox-Website/styles.css
Normal file
@ -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 */
|
||||||
|
}
|
||||||
|
}
|
||||||
Loading…
x
Reference in New Issue
Block a user