mirror of
https://github.com/abrendan/MicDropMessages.git
synced 2025-12-14 17:34:05 +01:00
Compare commits
9 Commits
| Author | SHA1 | Date | |
|---|---|---|---|
|
10da1b3392 | ||
|
|
bd651effdc | ||
|
|
fa1c78031c | ||
|
|
7f8151dfeb | ||
|
|
7ce73ce036 | ||
|
|
1970e36448 | ||
|
|
5bee7db3d1 | ||
|
|
db7b495194 | ||
|
|
0d26f56c4b |
@@ -2,7 +2,10 @@
|
||||
|
||||
MicDropMessages is a basic chat platform using socket.io and JavaScript. Now with a simple dark mode option!
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
@@ -1,4 +1,4 @@
|
||||
<!DOCTYPE HTML>
|
||||
<!DOCTYPE HTML>
|
||||
<html>
|
||||
<head>
|
||||
<title> MicDropMessages </title>
|
||||
@@ -6,13 +6,13 @@
|
||||
<meta name = "viewport" content = "width=device-width">
|
||||
<link href='https://fonts.googleapis.com/css?family=Roboto' rel='stylesheet'>
|
||||
<link rel = "stylesheet" type = "text/css" href = "style.css">
|
||||
<link rel="icon" href="https://i.ibb.co/jvVTdPM/nobackground-withoutname2.png">
|
||||
<script src = "script.js"></script>
|
||||
<script src= "socket.io/socket.io.js"></script>
|
||||
</head>
|
||||
<body onload = "onload()">
|
||||
<div id = "Main">
|
||||
<audio id = "Ding" src = "Ding.mp3"> </audio>
|
||||
<!-- <img id = "Logo" src="https://micdropmessages.app/pictures/micdropmessages_logo-circle.png" alt="Logo"> -->
|
||||
<h1 id = "Title"> MicDropMessages V2 </h1>
|
||||
<p>Welcome to MicDropMessages! This small webbased application allows you to chat with your friends anonymously! To start, enter your username and enter a chatroom.</p>
|
||||
<div id = "AccessPort">
|
||||
@@ -24,7 +24,7 @@
|
||||
<input id = "ConnectButton" class="button2" type = "submit" value = "Connect" onclick = "Connect()">
|
||||
</div>
|
||||
<h2 id = "RoomID"> Chatroom : None </h2>
|
||||
<div id = "Chat">
|
||||
<div id = "Chat" >
|
||||
<p id = "Message0" class = "Message"> - </p>
|
||||
<p id = "Message1" class = "Message"> - </p>
|
||||
<p id = "Message2" class = "Message"> - </p>
|
||||
@@ -38,15 +38,21 @@
|
||||
<label id = "MessageLabel"> Message </label>
|
||||
<input id = "ComposedMessage" class="input" type = "text">
|
||||
<input id = "SendMessage" onclick="Send()" value = "Send your message" class="button2" type = "submit">
|
||||
<input id="LeaveRoomButton" class="button2" type="submit" value="Leave Room" onclick="LeaveRoom()">
|
||||
</div>
|
||||
<button id="darkModeToggle" onclick="toggleDarkMode()" class="button">Toggle Dark Mode</button>
|
||||
<p>Made by abrendan. Visit my website for more of my projects.</p>
|
||||
<div id="LinkButtons">
|
||||
<button id="GitHubButton" onclick=" window.open('https://github.com/abrendan/MicDropMessages','_blank')" class="button">GitHub Page for MicDropMessages</button>
|
||||
<button id="WebsiteButton" onclick=" window.open('http://www.abrendan.dev','_blank')" class="button">abrendan.dev</button>
|
||||
<div class = "other">
|
||||
<button id="darkModeToggle" onclick="toggleDarkMode()" class="button">Toggle Dark Mode</button>
|
||||
<p>Made by abrendan. Visit my website for more of my projects.</p>
|
||||
<div id="LinkButtons">
|
||||
<button id="GitHubButton" onclick=" window.open('https://github.com/abrendan/MicDropMessages','_blank')" class="button">GitHub Page for MicDropMessages</button>
|
||||
<button id="WebsiteButton" onclick=" window.open('http://www.abrendan.dev','_blank')" class="button">abrendan.dev</button>
|
||||
</div>
|
||||
</div>
|
||||
<br><br>
|
||||
<p class="version-number">V2.0.1</p>
|
||||
<p class="version-number">V2.1.0</p>
|
||||
</div>
|
||||
<div id="errorPopup" class="error-popup">
|
||||
<p id="errorText">Please enter a username and a chatroom.</p>
|
||||
<button id="errorButton" class="button2" onclick="closeErrorPopup()">Continue</button>
|
||||
</div>
|
||||
</body>
|
||||
</html>
|
||||
@@ -24,6 +24,8 @@ function onload(){
|
||||
|
||||
socket.on("join", function(room){
|
||||
chatRoom.innerHTML = "Current Chatroom : " + room;
|
||||
// Show the chat div when successfully joined a room.
|
||||
document.getElementById("Chat").style.display = "block";
|
||||
})
|
||||
|
||||
socket.on("recieve", function(message){
|
||||
@@ -42,10 +44,49 @@ function onload(){
|
||||
document.getElementById("Message"+i).style.color = getComputedStyle(document.body).color;
|
||||
}
|
||||
})
|
||||
|
||||
// Ensure that the error popup is not displayed when the page is loaded
|
||||
document.getElementById('errorPopup').style.display = 'none';
|
||||
}
|
||||
|
||||
function Connect(){
|
||||
socket.emit("join", chatIDInput.value, usernameInput.value);
|
||||
var username = usernameInput.value.trim();
|
||||
var room = chatIDInput.value.trim();
|
||||
if(username && room){
|
||||
socket.emit("join", room, username);
|
||||
chatRoom.innerHTML = "Chatroom : " + room;
|
||||
document.getElementById("Chat").style.display = "none";
|
||||
document.getElementById('AccessPort').style.display = 'none';
|
||||
} else {
|
||||
showErrorPopup("Please enter a username and a chatroom.");
|
||||
}
|
||||
}
|
||||
|
||||
function showErrorPopup(message) {
|
||||
document.getElementById('errorText').textContent = message;
|
||||
document.getElementById('errorPopup').style.display = 'flex';
|
||||
}
|
||||
|
||||
function closeErrorPopup() {
|
||||
document.getElementById('errorPopup').style.display = 'none';
|
||||
}
|
||||
|
||||
function LeaveRoom(){
|
||||
// Show access port to join another chat room.
|
||||
document.getElementById('AccessPort').style.display = 'block';
|
||||
|
||||
// Hide the chat div as the user is leaving the room.
|
||||
document.getElementById('Chat').style.display = 'none';
|
||||
|
||||
// Reset chatRoom text to indicate no room connection.
|
||||
chatRoom.innerHTML = "Chatroom : None";
|
||||
|
||||
// If the user is in a room, emit a leave event.
|
||||
if (rooms[socket.id]) {
|
||||
socket.emit('leave', rooms[socket.id], usernames[socket.id]);
|
||||
rooms[socket.id] = null;
|
||||
usernames[socket.id] = null;
|
||||
}
|
||||
}
|
||||
|
||||
function Send(){
|
||||
|
||||
@@ -27,9 +27,16 @@ input{
|
||||
.Message{
|
||||
color: #000000;
|
||||
}
|
||||
.other {
|
||||
width: 100%; /* Set width */
|
||||
text-align: center; /* Center inline and inline-block elements within */
|
||||
}
|
||||
#Logo{
|
||||
height: 80px;
|
||||
}
|
||||
#Chat{
|
||||
display: none;
|
||||
}
|
||||
#Main{
|
||||
min-height: 94.5vh; /* Stretch to fill the viewport height */
|
||||
width: 50%;
|
||||
@@ -49,6 +56,69 @@ input{
|
||||
#LinkButtons{
|
||||
display: inline-block;
|
||||
}
|
||||
#ConnectButton {
|
||||
display: block;
|
||||
margin: 0 auto;
|
||||
margin-bottom: 20px;
|
||||
padding: 20px 40px; /* Increase the padding to make the button bigger */
|
||||
font-size: 20px; /* Increase the font-size for better readability on small screens */
|
||||
}
|
||||
#errorButton {
|
||||
padding: 16px 31px;
|
||||
border-radius: 10px;
|
||||
transition: background-color 0.3s ease;
|
||||
text-decoration: none;
|
||||
width: auto;
|
||||
margin: 0.5em 0;
|
||||
background-color: rgba(255, 255, 255, 0.2); /* Slightly white transparent background */
|
||||
transition: background-color 0.3s ease; /* Transition for button hover effects */
|
||||
border: 0px solid #000000;
|
||||
cursor: pointer;
|
||||
color: #000000;
|
||||
font-size: 17px;
|
||||
text-shadow: 0px 1px 0px #000000;
|
||||
display: block;
|
||||
margin: 20px;
|
||||
}
|
||||
|
||||
#errorButton:hover {
|
||||
background-color: #000000;
|
||||
color: #ffffff;
|
||||
}
|
||||
|
||||
#errorButton:active {
|
||||
position: relative;
|
||||
top: 1px;
|
||||
}
|
||||
#errorText {
|
||||
margin-left: 20px;
|
||||
}
|
||||
.error-popup {
|
||||
display: none;
|
||||
position: fixed;
|
||||
left: 0;
|
||||
top: 0;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
overflow: auto;
|
||||
background-color: rgba(0,0,0,0.4);
|
||||
backdrop-filter: blur(20px); /* Provide a translucent frosted-glass effect */
|
||||
-webkit-backdrop-filter: blur(20px);
|
||||
z-index: 2;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
.error-popup-content {
|
||||
background-color: #fefefe;
|
||||
margin: auto;
|
||||
padding: 20px;
|
||||
border: 1px solid #888;
|
||||
width: 80%;
|
||||
box-shadow: 0 4px 8px 0 rgba(0,0,0,0.2);
|
||||
border-radius: 5px;
|
||||
text-align: center; /* Center the content inside the error popup */
|
||||
}
|
||||
.button {
|
||||
background-color:transparent;
|
||||
border-radius:28px;
|
||||
@@ -94,6 +164,15 @@ body.dark-mode .input {
|
||||
body.dark-mode .version-number {
|
||||
color: #ffffff; /* Dark button background color */
|
||||
}
|
||||
body.dark-mode #errorButton {
|
||||
background-color: rgba(255, 255, 255, 0.2);
|
||||
color: #ffffff;
|
||||
}
|
||||
|
||||
body.dark-mode #errorButton:hover {
|
||||
background-color: #000000;
|
||||
color: #ffffff;
|
||||
}
|
||||
.input {
|
||||
border-radius: 10px;
|
||||
padding: 6px;
|
||||
@@ -153,4 +232,12 @@ body.dark-mode .version-number {
|
||||
padding: 20px 40px; /* Increase the padding to make the button bigger */
|
||||
font-size: 20px; /* Increase the font-size for better readability on small screens */
|
||||
}
|
||||
#LeaveRoomButton {
|
||||
display: block;
|
||||
margin: 0 auto;
|
||||
margin-bottom: 20px;
|
||||
margin-top: 10px;
|
||||
padding: 20px 40px; /* Increase the padding to make the button bigger */
|
||||
font-size: 20px; /* Increase the font-size for better readability on small screens */
|
||||
}
|
||||
}
|
||||
|
||||
Reference in New Issue
Block a user