Update README.md

Small change
Added a error message when trying to connect without a username or room
2025-12-14 17:34:05 +01:00 · 2024-01-29 21:52:50 +01:00 · 2024-01-29 20:51:04 +00:00 · 2024-01-29 20:50:29 +00:00 · 2024-01-29 18:09:40 +00:00 · 2024-01-29 17:55:53 +00:00
7 changed files with 255 additions and 17 deletions
--- a/README.md
+++ b/README.md
@@ -2,7 +2,11 @@

 MicDropMessages is a basic chat platform using socket.io and JavaScript. Now with a simple dark mode option!

-![grafik](https://github.com/abrendan/MicDropMessages/assets/94894839/259fcb85-5a20-44a7-b966-296aecb9e612)
+![grafik](https://github.com/abrendan/MicDropMessages/assets/94894839/2cb8c5e6-ea6a-4a88-9218-45c58926ba4e)
+
+
+![grafik](https://github.com/abrendan/MicDropMessages/assets/94894839/80878a4a-336a-4071-a480-0fe68f090bcd)
+



--- a/html/index.html
+++ b/html/index.html
@@ -6,13 +6,14 @@
    <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>
-      <h1 id = "Title"> MicDropMessages V1.5 </h1>
+      <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">
        <label id = "NameLabel"> Username  </label>
@@ -37,14 +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>
+      <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>
-      <br><br>
+      </div>
+      <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>
--- a/html/pictures/jezael-melgoza-2FiXtdnVhjQ-unsplash.jpg
+++ b/html/pictures/jezael-melgoza-2FiXtdnVhjQ-unsplash.jpg
--- a/html/pictures/micdropmessages_logo-circle.png
+++ b/html/pictures/micdropmessages_logo-circle.png
--- a/html/privacy.html
+++ b/html/privacy.html
--- a/html/script.js
+++ b/html/script.js
@@ -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(){
--- a/html/style.css
+++ b/html/style.css
@@ -1,5 +1,5 @@
 body{
-  background-image: url('https://images.unsplash.com/37/IHLjdHdzSvi0rgUMMlSK_TE3_0286.jpg'); /* Path to your example image */
+  background-image: url('https://micdropmessages.app/pictures/jezael-melgoza-2FiXtdnVhjQ-unsplash.jpg'); /* Path to your example image */
  background-size: cover; /* Cover the entire viewport */
  background-repeat: no-repeat; /* Do not repeat the image */
  background-attachment: fixed; /* The background image does not scroll */
@@ -27,24 +27,98 @@ 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%;
  padding: 20px; /* Padding added to the main content area */
  border-radius: 10px;
  backdrop-filter: blur(5px); /* Provide a translucent frosted-glass effect */
+  -webkit-backdrop-filter: blur(5px);
  background-color: rgba(255, 255, 255, 0.2); /* Slightly white transparent background */
  display: flex; /* Adding flex properties to layout contents */
  flex-direction: column; /* Stack children elements vertically */
  align-items: center; /* Centering child elements horizontally */
+  position: relative; /* To position the version number correctly */
 }
 #Title{
-  font-family: 'Segoe UI';
  font-size: 300%;
 }
 #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;
@@ -72,7 +146,7 @@ input{
 /* Add this to your CSS to support dark mode */
 body.dark-mode {
  color: #ffffff; /* Light text color for contrast */
-  backdrop-filter: blur(5px); /* Provide a translucent frosted-glass effect */
+  
  background-color: rgba(0, 0, 0, 1); /* Slightly transparent dark background */
 }
 body.dark-mode .button {
@@ -85,7 +159,19 @@ body.dark-mode .input {
  color: #ffffff; /* Dark button background color */
 }
 .dark-mode #Main {
-  background-color: #333; /* Dark background for main content area */
+  background-color: rgba(0, 0, 0, 0.5); /* Slightly transparent dark background */
+}
+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;
@@ -104,7 +190,16 @@ body.dark-mode .input {
  background-color:#000000;
  color:#ffffff;
 }
-@media (max-width: 600px) {
+
+.version-number {
+  position: absolute;
+  bottom: 1px;
+  right: 10px;
+  font-size: 0.75em;
+  color: #000000; /* Assuming light text for visibility against a potentially dark background */
+}
+
+@media (max-width: 800px) {
  label {
    width: auto; /* Full width on narrow screens */
  }
@@ -112,3 +207,37 @@ body.dark-mode .input {
    width: 100%; /* Full width on narrow screens */
  }
 }
+@media (max-width: 650px) {
+  #Title {
+    font-size: 150%;
+  }
+  #ConnectButton {
+    display: block;
+    margin: 0 auto;
+    padding: 20px 40px; /* Increase the padding to make the button bigger */
+    font-size: 20px; /* Increase the font-size for better readability on small screens */
+  }
+  #WebsiteButton {
+    display: block;
+    margin: 0 auto;
+  }
+  #LinkButtons {
+    text-align: center;
+  }
+  #SendMessage {
+    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 */
+  }
+  #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 */
+  }
+}
Author	SHA1	Message	Date
Brendan	10da1b3392	Update README.md	2024-01-29 21:52:50 +01:00
abrendan	bd651effdc	Small change	2024-01-29 20:51:04 +00:00
abrendan	fa1c78031c	Added a error message when trying to connect without a username or room	2024-01-29 20:50:29 +00:00
abrendan	7f8151dfeb	Made Leave Room button bigger on mobile	2024-01-29 18:09:40 +00:00
abrendan	7ce73ce036	Made the Access Part hide after connecting and also added a Leave Room button	2024-01-29 17:55:53 +00:00
abrendan	1970e36448	Increased the bottom margin of the connect button	2024-01-29 17:44:16 +00:00
abrendan	5bee7db3d1	Cleaned code	2024-01-29 17:33:55 +00:00
abrendan	db7b495194	Made the Chat part only visible after being connected with a room	2024-01-29 17:18:14 +00:00
abrendan	0d26f56c4b	Added favi icon	2024-01-29 17:07:13 +00:00
abrendan	b28d9a16db	V2.0.1! Added a version number on the bottom right and a future way to add a logo. Also changed version scheme	2024-01-22 19:44:22 +00:00
Brendan	91e2fa270a	Update README.md	2024-01-15 13:20:40 +01:00
abrendan	201546a7f3	Fixed the blur when viewed on webkit	2024-01-15 10:24:33 +00:00
abrendan	1733bb9a00	V2! New background, better mobile UI	2024-01-15 10:14:14 +00:00
abrendan	5ad7ad2ce6	V1.7! Bigger buttons for when viewed on a mobile screen or the android application	2024-01-12 14:28:32 +00:00
abrendan	226f1250da	Added privacy statement	2024-01-12 14:11:21 +00:00
abrendan	8f6697b00b	Made the buttons center when opened on a phone	2024-01-04 22:22:21 +00:00
abrendan	831834728d	Made adjustments to the padding when viewed on a smaller screen	2024-01-04 21:00:40 +00:00