-
Notifications
You must be signed in to change notification settings - Fork 0
/
index.html
210 lines (184 loc) · 7.28 KB
/
index.html
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
206
207
208
209
210
<!DOCTYPE html>
<html lang="en">
<head>
<link
rel="icon"
type="image/x-icon"
href="https://cdn.glitch.global/779404dd-b4da-46f4-8ea3-6e5c98060c91/favicon%20(7).ico?v=1727968918289"
/>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>sclerenchyma</title>
<link rel="stylesheet" href="style.css" />
</head>
<body>
<div id="banner">
We have changed our terms of service. Please log out to see them.
<button id="close-banner">X</button>
</div>
<div id="sidebar">
<h2>Chat Rooms</h2>
<div id="rooms">
<div class="room" data-room="General">General</div>
<div class="room" data-room="Random">Random</div>
<div class="room" data-room="Tech">Tech</div>
<div class="room" data-room="Suggestions">Suggestions</div>
<div class="room" data-room="Games">Games</div>
</div>
</div>
<div id="chat">
<div id="messages"></div>
<form id="form" action="">
<input id="input" autocomplete="off" placeholder="Type a message..." />
<!-- Hidden file input and styled label -->
<input type="file" id="fileInput" style="display: none;" />
<label for="fileInput" id="file-upload-label">Upload File</label>
<button type="submit" id="send">Send</button>
</form>
</div>
<button id="logoutbutton" onclick="localStorage.clear(); alert('Logged out!'); location.reload();">
Log off
</button>
<div>
<input type="password" id="admin-code" placeholder="Enter Admin Code" />
<button id="admin-button" onclick="submitAdminCode()">Submit</button>
</div>
<button id="theme-toggle" onclick="toggleTheme()">Toggle Theme</button>
<script src="/socket.io/socket.io.js"></script>
<script>
// Ensure user has a username
const username = localStorage.getItem("chatUsername");
if (!username) {
window.location.href = "/login.html"; // Redirect to login page if no username
}
const socket = io();
let currentRoom = "General"; // Default room
// Room switching logic
function switchRoom(roomElement) {
const previousRoom = document.querySelector(".active-room");
if (previousRoom) {
previousRoom.classList.remove("active-room");
}
roomElement.classList.add("active-room");
currentRoom = roomElement.getAttribute("data-room");
socket.emit("switch room", currentRoom);
}
document.querySelectorAll(".room").forEach(roomElement => {
roomElement.addEventListener("click", () => switchRoom(roomElement));
});
// Handle form submission and file upload
document.getElementById("form").addEventListener("submit", function (e) {
e.preventDefault();
const input = document.getElementById("input");
const message = input.value.trim(); // Trim whitespace
// Handle file input
const fileInput = document.getElementById("fileInput");
if (fileInput.files.length > 0) {
const file = fileInput.files[0];
const formData = new FormData();
formData.append("file", file);
formData.append("room", currentRoom);
formData.append("username", username);
fetch("/upload", {
method: "POST",
body: formData
})
.then(response => response.json())
.then(data => {
if (data.success) {
console.log("File uploaded successfully");
} else {
console.error("File upload failed");
}
})
.catch(error => console.error("Error:", error));
fileInput.value = ""; // Clear the file input
} else if (message.startsWith("/")) {
// Handle admin command if the message starts with "/"
socket.emit("admin command", {
room: currentRoom,
name: username,
text: message
});
} else {
// Send normal chat message
socket.emit("chat message", {
room: currentRoom,
name: username,
text: message
});
}
input.value = ""; // Clear the message input
});
// Listening for chat messages
socket.on("chat message", function (msg) {
const item = document.createElement("div");
item.textContent = `${msg.name}: ${msg.text}`;
document.getElementById("messages").appendChild(item);
messages.scrollTop = messages.scrollHeight;
});
// Listening for file uploads
socket.on("file upload", function (data) {
const item = document.createElement("div");
item.innerHTML = `${data.name} sent a file: <a href="${data.filePath}" target="_blank">${data.fileName}</a>`;
document.getElementById("messages").appendChild(item);
messages.scrollTop = messages.scrollHeight;
});
// Listening for message history
socket.on("message history", function (history) {
document.getElementById("messages").innerHTML = ""; // Clear old messages
history.forEach(msg => {
const item = document.createElement("div");
item.textContent = `${msg.name}: ${msg.text}`;
document.getElementById("messages").appendChild(item);
});
});
// Listening for clearChat event to clear the chat window
socket.on("clearChat", () => {
document.getElementById("messages").innerHTML = ""; // Clear chat window
});
// Admin Code Submission
function submitAdminCode() {
const adminCode = document.getElementById("admin-code").value;
fetch("/verify-admin", {
method: "POST",
headers: { "Content-Type": "application/json" },
body: JSON.stringify({ code: adminCode, username })
})
.then(response => response.json())
.then(data => {
if (data.success) {
alert("Admin access granted!");
} else {
alert("Invalid admin code!");
}
})
.catch(error => console.error("Error:", error));
}
// Close banner on click
document.getElementById("close-banner").addEventListener("click", () => {
document.getElementById("banner").style.display = "none";
localStorage.setItem("bannerClosed", "true");
});
// Check if banner was closed in a previous session
if (localStorage.getItem("bannerClosed") === "true") {
document.getElementById("banner").style.display = "none";
}
// Function to toggle between light and dark themes
function toggleTheme() {
const body = document.body;
body.classList.toggle('light-theme'); // Toggle the light-theme class
// Save the current theme to localStorage
const currentTheme = body.classList.contains('light-theme') ? 'light' : 'dark';
localStorage.setItem('theme', currentTheme);
}
// On page load, check for saved theme preference
window.onload = function() {
const savedTheme = localStorage.getItem('theme');
if (savedTheme === 'light') {
document.body.classList.add('light-theme'); // Apply light theme if saved
}
};
</script>
</body>
</html>