abrendan_dev/MicDropMessages
1
0
Fork 0
mirror of https://github.com/abrendan/MicDropMessages.git synced 2025-06-16 12:45:01 +02:00
Code Issues Packages Projects Releases Wiki Activity

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

Browse Source
This commit is contained in:
Brendan 2024-07-10 20:47:07 +00:00
parent 1ec626532c
commit 62a3d0b7a7
6 changed files with 93 additions and 101 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

4
.replit
View File

@ -86,3 +86,7 @@ support = true
[deployment] [deployment]
deploymentTarget = "cloudrun" deploymentTarget = "cloudrun"
run = ["sh", "-c", "node index.js"] run = ["sh", "-c", "node index.js"]
[[ports]]
localPort = 3000
externalPort = 80

71
html/index.html
View File

@ -2,53 +2,52 @@
<html> <html>
<head> <head>
<title> MicDropMessages </title> <title> MicDropMessages </title>
<meta name = "charset" charset = "utf-8"> <meta name="charset" charset="utf-8">
<meta name = "viewport" content = "width=device-width"> <meta name="viewport" content="width=device-width">
<link href='https://fonts.googleapis.com/css?family=Roboto' rel='stylesheet'> <link href='https://fonts.googleapis.com/css?family=Roboto' rel='stylesheet'>
<link rel = "stylesheet" type = "text/css" href = "style.css"> <link rel="stylesheet" type="text/css" href="style.css">
<link rel="icon" href="https://i.ibb.co/jvVTdPM/nobackground-withoutname2.png"> <link rel="icon" href="https://i.ibb.co/jvVTdPM/nobackground-withoutname2.png">
<script src = "script.js"></script> <script src="script.js"></script>
<script src= "socket.io/socket.io.js"></script> <script src="socket.io/socket.io.js"></script>
</head> </head>
<body onload = "onload()"> <body onload="onload()">
<div id = "Main"> <div id="Main">
<audio id = "Ding" src = "Ding.mp3"> </audio> <audio id="Ding" src="new-notification.mp3"> </audio>
<h1 id = "Title"> MicDropMessages V2 </h1> <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"> <div id="AccessPort">
<label id = "NameLabel"> Username </label> <label id="NameLabel"> Username </label>
<input id = "NameInput" class="input" type = "text"> <input id="NameInput" class="input" type="text">
<br><br> <br><br>
<label id = "IDLabel"> Chatroom </label> <label id="IDLabel"> Chatroom </label>
<input id = "IDInput" class="input" value = "Room1" type = "text"> <input id="IDInput" class="input" value="Room1" type="text">
<input id = "ConnectButton" class="button2" type = "submit" value = "Connect" onclick = "Connect()"> <input id="ConnectButton" class="button2" type="submit" value="Connect" onclick="Connect()">
</div> </div>
<h2 id = "RoomID"> Chatroom : None </h2> <h2 id="RoomID"> Chatroom : None </h2>
<div id = "Chat" > <div id="Chat">
<p id = "Message0" class = "Message"> - </p> <p id="Message0" class="Message"> - </p>
<p id = "Message1" class = "Message"> - </p> <p id="Message1" class="Message"> - </p>
<p id = "Message2" class = "Message"> - </p> <p id="Message2" class="Message"> - </p>
<p id = "Message3" class = "Message"> - </p> <p id="Message3" class="Message"> - </p>
<p id = "Message4" class = "Message"> - </p> <p id="Message4" class="Message"> - </p>
<p id = "Message5" class = "Message"> - </p> <p id="Message5" class="Message"> - </p>
<p id = "Message6" class = "Message"> - </p> <p id="Message6" class="Message"> - </p>
<p id = "Message7" class = "Message"> - </p> <p id="Message7" class="Message"> - </p>
<p id = "Message8" class = "Message"> - </p> <p id="Message8" class="Message"> - </p>
<p id = "Message9" class = "Message"> - </p> <p id="Message9" class="Message"> - </p>
<label id = "MessageLabel"> Message </label> <label id="MessageLabel"> Message </label>
<input id = "ComposedMessage" class="input" type = "text"> <input id="ComposedMessage" class="input" type="text">
<input id = "SendMessage" onclick="Send()" value = "Send your message" class="button2" type = "submit"> <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()"> <input id="LeaveRoomButton" class="button2" type="submit" value="Leave Room" onclick="LeaveRoom()">
</div> </div>
<div class = "other"> <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> <p>Made by abrendan. Visit my website for more of my projects.</p>
<div id="LinkButtons"> <div id="LinkButtons">
<button id="GitHubButton" onclick=" window.open('https://github.com/abrendan/MicDropMessages','_blank')" class="button">GitHub Page for MicDropMessages</button> <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> <button id="WebsiteButton" onclick="window.open('http://www.abrendan.dev','_blank')" class="button">abrendan.dev</button>
</div> </div>
</div> </div>
<p class="version-number">V2.1.0</p> <p class="version-number">V2.2.0</p>
</div> </div>
<div id="errorPopup" class="error-popup"> <div id="errorPopup" class="error-popup">
<p id="errorText">Please enter a username and a chatroom.</p> <p id="errorText">Please enter a username and a chatroom.</p>

BIN
html/new-notification.mp3 Normal file
View File

Binary file not shown.

BIN
html/pictures/andy-holmes-rCbdp8VCYhQ-unsplash.jpg Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 7.0 MiB

11
html/script.js
View File

@ -26,7 +26,7 @@ function onload(){
chatRoom.innerHTML = "Current Chatroom : " + room; chatRoom.innerHTML = "Current Chatroom : " + room;
// Show the chat div when successfully joined a room. // Show the chat div when successfully joined a room.
document.getElementById("Chat").style.display = "block"; document.getElementById("Chat").style.display = "block";
}) });
socket.on("recieve", function(message){ socket.on("recieve", function(message){
console.log(message); console.log(message);
@ -34,8 +34,7 @@ function onload(){
messages.push(message); messages.push(message);
dingSound.currentTime = 0; dingSound.currentTime = 0;
dingSound.play(); dingSound.play();
} } else {
else{
messages.shift(); messages.shift();
messages.push(message); messages.push(message);
} }
@ -43,7 +42,7 @@ function onload(){
document.getElementById("Message"+i).innerHTML = messages[i]; document.getElementById("Message"+i).innerHTML = messages[i];
document.getElementById("Message"+i).style.color = getComputedStyle(document.body).color; document.getElementById("Message"+i).style.color = getComputedStyle(document.body).color;
} }
}) });
// Ensure that the error popup is not displayed when the page is loaded // Ensure that the error popup is not displayed when the page is loaded
document.getElementById('errorPopup').style.display = 'none'; document.getElementById('errorPopup').style.display = 'none';
@ -107,10 +106,6 @@ function delayReset(){
delay = true; delay = true;
} }
function toggleDarkMode() {
document.body.classList.toggle('dark-mode');
}
document.addEventListener('keydown', function(event) { document.addEventListener('keydown', function(event) {
// Check if Alt + Ctrl + R are pressed together // Check if Alt + Ctrl + R are pressed together
if (event.altKey && event.ctrlKey && event.key === 'r') { if (event.altKey && event.ctrlKey && event.key === 'r') {

108
html/style.css
View File

@ -1,42 +1,53 @@
body{ 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-size: cover; /* Cover the entire viewport */
background-repeat: no-repeat; /* Do not repeat the image */ background-repeat: no-repeat; /* Do not repeat the image */
background-attachment: fixed; /* The background image does not scroll */ background-attachment: fixed; /* The background image does not scroll */
color: #000000; color: #ffffff; /* Light text color for contrast */
font-family: 'Roboto'; font-family: 'Roboto';
display: flex; /* Use flexbox to center content */ display: flex; /* Use flexbox to center content */
justify-content: center; /* Center horizontally */ justify-content: center; /* Center horizontally */
align-items: center; /* Center vertically */ align-items: center; /* Center vertically */
} }
label{ label{
min-width: 70px; /* Ensure label has enough width */ min-width: 70px; /* Ensure label has enough width */
display: block; /* Make labels stack above inputs and buttons */ display: block; /* Make labels stack above inputs and buttons */
margin-bottom: 0.5em; /* Provide some space between label and input/button */ margin-bottom: 0.5em; /* Provide some space between label and input/button */
text-align: left; /* Align text to the left */ text-align: left; /* Align text to the left */
} }
input{ input{
background-color: rgba(255, 255, 255, 0.15); background-color: rgba(255, 255, 255, 0.15);
color: #000000; color: #ffffff; /* Light text color for contrast */
font-size: 120%; font-size: 120%;
border: none; border: none;
width: 100%; /* Full width input fields */ width: 100%; /* Full width input fields */
box-sizing: border-box; /* Border box sizing for padding and borders */ box-sizing: border-box; /* Border box sizing for padding and borders */
margin-bottom: 1em; /* Provide space below inputs */ margin-bottom: 1em; /* Provide space below inputs */
} }
.Message{ .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 { .other {
width: 100%; /* Set width */ width: 100%; /* Set width */
text-align: center; /* Center inline and inline-block elements within */ text-align: center; /* Center inline and inline-block elements within */
} }
#Logo{ #Logo{
height: 80px; height: 80px;
} }
#Chat{ #Chat{
display: none; display: none;
width: 100%; /* Make the chat part fill the entire width */
} }
#Main{ #Main{
min-height: 94.5vh; /* Stretch to fill the viewport height */ min-height: 94.5vh; /* Stretch to fill the viewport height */
width: 50%; width: 50%;
@ -44,18 +55,21 @@ input{
border-radius: 10px; border-radius: 10px;
backdrop-filter: blur(5px); /* Provide a translucent frosted-glass effect */ backdrop-filter: blur(5px); /* Provide a translucent frosted-glass effect */
-webkit-backdrop-filter: blur(5px); -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 */ display: flex; /* Adding flex properties to layout contents */
flex-direction: column; /* Stack children elements vertically */ flex-direction: column; /* Stack children elements vertically */
align-items: center; /* Centering child elements horizontally */ align-items: center; /* Centering child elements horizontally */
position: relative; /* To position the version number correctly */ position: relative; /* To position the version number correctly */
} }
#Title{ #Title{
font-size: 300%; font-size: 300%;
} }
#LinkButtons{ #LinkButtons{
display: inline-block; display: inline-block;
} }
#ConnectButton { #ConnectButton {
display: block; display: block;
margin: 0 auto; margin: 0 auto;
@ -63,6 +77,7 @@ input{
padding: 20px 40px; /* Increase the padding to make the button bigger */ padding: 20px 40px; /* Increase the padding to make the button bigger */
font-size: 20px; /* Increase the font-size for better readability on small screens */ font-size: 20px; /* Increase the font-size for better readability on small screens */
} }
#errorButton { #errorButton {
padding: 16px 31px; padding: 16px 31px;
border-radius: 10px; border-radius: 10px;
@ -71,10 +86,9 @@ input{
width: auto; width: auto;
margin: 0.5em 0; margin: 0.5em 0;
background-color: rgba(255, 255, 255, 0.2); /* Slightly white transparent background */ 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; border: 0px solid #000000;
cursor: pointer; cursor: pointer;
color: #000000; color: #ffffff; /* Light text color for contrast */
font-size: 17px; font-size: 17px;
text-shadow: 0px 1px 0px #000000; text-shadow: 0px 1px 0px #000000;
display: block; display: block;
@ -90,9 +104,11 @@ input{
position: relative; position: relative;
top: 1px; top: 1px;
} }
#errorText { #errorText {
margin-left: 20px; margin-left: 20px;
} }
.error-popup { .error-popup {
display: none; display: none;
position: fixed; position: fixed;
@ -119,76 +135,53 @@ input{
border-radius: 5px; border-radius: 5px;
text-align: center; /* Center the content inside the error popup */ text-align: center; /* Center the content inside the error popup */
} }
.button { .button {
background-color:transparent;
border-radius:28px;
border:0px solid #000000;
display:inline-block;
cursor:pointer;
color:#000000;
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 */ 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: #ffffff; /* Light text color for contrast */
font-size: 17px;
padding: 16px 31px;
text-decoration: none;
text-shadow: 0px 1px 0px #000000;
transition: background-color 0.3s ease; /* Transition for button hover effects */ transition: background-color 0.3s ease; /* Transition for button hover effects */
width: auto; /* Width is determined by content within */ width: auto; /* Width is determined by content within */
margin: 0.5em 0; /* Margin around buttons */ 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 { .button:hover {
background-color: #000000; background-color: #000000;
color: #ffffff; color: #ffffff;
} }
.button:active {
position: relative;
top: 1px;
}
.input { .input {
border-radius: 10px; border-radius: 10px;
padding: 6px; padding: 6px;
width: 100%; /* Full width input fields */ width: 100%; /* Full width input fields */
box-sizing: border-box; /* Border box sizing for padding and borders */ box-sizing: border-box; /* Border box sizing for padding and borders */
} }
.button2 { .button2 {
border-radius: 10px; border-radius: 10px;
padding: 6px; padding: 6px;
transition: background-color 0.3s ease; /* Transition for button hover effects */ transition: background-color 0.3s ease; /* Transition for button hover effects */
width: auto; /* Width is determined by content within */ width: auto; /* Width is determined by content within */
margin: 0.5em 0; /* Margin around buttons */ 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 { .button2:hover {
background-color:#000000; background-color: #000000;
color:#ffffff; color: #ffffff;
} }
.version-number { .version-number {
@ -196,7 +189,7 @@ body.dark-mode #errorButton:hover {
bottom: 1px; bottom: 1px;
right: 10px; right: 10px;
font-size: 0.75em; 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) { @media (max-width: 800px) {
@ -207,6 +200,7 @@ body.dark-mode #errorButton:hover {
width: 100%; /* Full width on narrow screens */ width: 100%; /* Full width on narrow screens */
} }
} }
@media (max-width: 650px) { @media (max-width: 650px) {
#Title { #Title {
font-size: 150%; font-size: 150%;
@ -240,4 +234,4 @@ body.dark-mode #errorButton:hover {
padding: 20px 40px; /* Increase the padding to make the button bigger */ padding: 20px 40px; /* Increase the padding to make the button bigger */
font-size: 20px; /* Increase the font-size for better readability on small screens */ font-size: 20px; /* Increase the font-size for better readability on small screens */
} }
} }