New background, new "Ding" and fixed long messages breaking the design

2025-06-16 12:45:01 +02:00 · 2024-07-10 20:47:07 +00:00 · 2024-07-10 20:47:07 +00:00 · 62a3d0b7a7
commit 62a3d0b7a7
parent 1ec626532c
6 changed files with 93 additions and 101 deletions
--- a/.replit
+++ b/.replit
@ -86,3 +86,7 @@ support = true
 [deployment]
 deploymentTarget = "cloudrun"
 run = ["sh", "-c", "node index.js"]
+
+[[ports]]
+localPort = 3000
+externalPort = 80
--- a/html/index.html
+++ b/html/index.html
@ -12,9 +12,9 @@
  </head>
  <body onload="onload()">
    <div id="Main">
-      <audio id = "Ding" src = "Ding.mp3"> </audio>
+      <audio id="Ding" src="new-notification.mp3"> </audio>
      <h1 id="Title"> MicDropMessagesV2</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>
+      <p>Welcome to MicDropMessages! This small web-based 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>
        <input id="NameInput" class="input" type="text">
@ -41,14 +41,13 @@
        <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>
      </div>
-      <p class="version-number">V2.1.0</p>
+      <p class="version-number">V2.2.0</p>
    </div>
    <div id="errorPopup" class="error-popup">
      <p id="errorText">Please enter a username and a chatroom.</p>
--- a/html/new-notification.mp3
+++ b/html/new-notification.mp3
--- a/html/pictures/andy-holmes-rCbdp8VCYhQ-unsplash.jpg
+++ b/html/pictures/andy-holmes-rCbdp8VCYhQ-unsplash.jpg
--- a/html/script.js
+++ b/html/script.js
@ -26,7 +26,7 @@ function onload(){
    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){
    console.log(message);
@ -34,8 +34,7 @@ function onload(){
      messages.push(message);
      dingSound.currentTime = 0;
      dingSound.play();
-    }
-    else{
+    } else {
      messages.shift();
      messages.push(message);
    }
@ -43,7 +42,7 @@ function onload(){
      document.getElementById("Message"+i).innerHTML = messages[i];
      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';
@ -107,10 +106,6 @@ function delayReset(){
  delay = true;
 }

-function toggleDarkMode() {
-  document.body.classList.toggle('dark-mode');
-}
-
 document.addEventListener('keydown', function(event) {
  // Check if Alt + Ctrl + R are pressed together
  if (event.altKey && event.ctrlKey && event.key === 'r') {
--- a/html/style.css
+++ b/html/style.css
@ -1,42 +1,53 @@
 body{
-  background-image: url('https://micdropmessages.app/pictures/jezael-melgoza-2FiXtdnVhjQ-unsplash.jpg'); /* Path to your example image */
+  background-image: url('https://micdropmessages.app/pictures/andy-holmes-rCbdp8VCYhQ-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 */
-  color: #000000;
+  color: #ffffff; /* Light text color for contrast */
  font-family: 'Roboto';
  display: flex; /* Use flexbox to center content */
  justify-content: center; /* Center horizontally */
  align-items: center; /* Center vertically */
 }
+
 label{
  min-width: 70px; /* Ensure label has enough width */
  display: block; /* Make labels stack above inputs and buttons */
  margin-bottom: 0.5em; /* Provide some space between label and input/button */
  text-align: left; /* Align text to the left */
 }
+
 input{
  background-color: rgba(255, 255, 255, 0.15);
-  color: #000000;
+  color: #ffffff; /* Light text color for contrast */
  font-size: 120%;
  border: none;
  width: 100%; /* Full width input fields */
  box-sizing: border-box; /* Border box sizing for padding and borders */
  margin-bottom: 1em; /* Provide space below inputs */
 }
+
 .Message{
-  color: #000000;
+  color: #ffffff; /* Light text color for contrast */
+  word-wrap: break-word; /* Break long words */
+  word-break: break-all; /* Break long words */
+  white-space: pre-wrap; /* Wrap text maintaining white spaces */
 }
+
 .other {
  width: 100%; /* Set width */
  text-align: center; /* Center inline and inline-block elements within */
 }
+
 #Logo{
  height: 80px;
 }
+
 #Chat{
  display: none;
+  width: 100%; /* Make the chat part fill the entire width */
 }
+
 #Main{
  min-height: 94.5vh; /* Stretch to fill the viewport height */
  width: 50%;
@ -44,18 +55,21 @@ input{
  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 */
+  background-color: rgba(0, 0, 0, 0.1); /* Slightly transparent dark 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-size: 300%;
 }
+
 #LinkButtons{
  display: inline-block;
 }
+
 #ConnectButton {
  display: block;
  margin: 0 auto;
@ -63,6 +77,7 @@ input{
  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;
@ -71,10 +86,9 @@ input{
  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;
+  color: #ffffff; /* Light text color for contrast */
  font-size: 17px;
  text-shadow: 0px 1px 0px #000000;
  display: block;
@ -90,9 +104,11 @@ input{
  position: relative;
  top: 1px;
 }
+
 #errorText {
  margin-left: 20px;
 }
+
 .error-popup {
  display: none;
  position: fixed;
@ -119,73 +135,50 @@ input{
  border-radius: 5px;
  text-align: center; /* Center the content inside the error popup */
 }
+
 .button {
-  background-color:transparent;
+  background-color: rgba(255, 255, 255, 0.2); /* Slightly white transparent background */
  border-radius: 28px;
  border: 0px solid #000000;
  display: inline-block;
  cursor: pointer;
-  color:#000000;
+  color: #ffffff; /* Light text color for contrast */
  font-size: 17px;
  padding: 16px 31px;
  text-decoration: none;
  text-shadow: 0px 1px 0px #000000;
-  background-color: rgba(255, 255, 255, 0.2); /* Slightly white transparent background */
  transition: background-color 0.3s ease; /* Transition for button hover effects */
  width: auto; /* Width is determined by content within */
  margin: 0.5em 0; /* Margin around buttons */
 }
+
 .button:hover {
  background-color: #000000;
  color: #ffffff;
 }
+
 .button:active {
  position: relative;
  top: 1px;
 }
-/* Add this to your CSS to support dark mode */
-body.dark-mode {
-  color: #ffffff; /* Light text color for contrast */

-  background-color: rgba(0, 0, 0, 1); /* Slightly transparent dark background */
-}
-body.dark-mode .button {
-  color: #ffffff; /* Dark button background color */
-}
-body.dark-mode .button2 {
-  color: #ffffff; /* Dark button background color */
-}
-body.dark-mode .input {
-  color: #ffffff; /* Dark button background color */
-}
-.dark-mode #Main {
-  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;
  padding: 6px;
  width: 100%;  /* Full width input fields */
  box-sizing: border-box;  /* Border box sizing for padding and borders */
 }
+
 .button2 {
  border-radius: 10px;
  padding: 6px;
  transition: background-color 0.3s ease; /* Transition for button hover effects */
  width: auto; /* Width is determined by content within */
  margin: 0.5em 0; /* Margin around buttons */
+  background-color: rgba(255, 255, 255, 0.2); /* Slightly white transparent background */
+  color: #ffffff; /* Light text color for contrast */
 }
+
 .button2:hover {
  background-color: #000000;
  color: #ffffff;
@ -196,7 +189,7 @@ body.dark-mode #errorButton:hover {
  bottom: 1px;
  right: 10px;
  font-size: 0.75em;
-  color: #000000; /* Assuming light text for visibility against a potentially dark background */
+  color: #ffffff; /* Light text color for contrast */
 }

@media (max-width: 800px) {
@ -207,6 +200,7 @@ body.dark-mode #errorButton:hover {
    width: 100%; /* Full width on narrow screens */
  }
 }
+
@media (max-width: 650px) {
  #Title {
    font-size: 150%;