Compare commits

..

No commits in common. "main" and "V1.4" have entirely different histories.
main ... V1.4

14 changed files with 150 additions and 373 deletions

View File

@ -86,7 +86,3 @@ 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

View File

@ -1,24 +1,7 @@
# MicDropMessagesV2 # MicDropMessages
MicDropMessages is a basic chat platform using socket.io and JavaScript. It doesn't save any messages on any server.
## Android App
MicDropMessages is available as an webapp at https://micdropmessages.app but also as an app in the Google Play Store:
https://play.google.com/store/apps/details?id=com.abrendan.micdropmessages
## Screenshots
![grafik](https://github.com/abrendan/MicDropMessages/assets/94894839/13ba80a7-d4df-47ec-b86f-2a8e921c3d1a)
![grafik](https://github.com/abrendan/MicDropMessages/assets/94894839/d4e4a1c4-f194-460a-a31a-76798da58f26)
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/7284b5fb-7a0a-4a6b-a8b3-95d2cef3959b)

View File

@ -1,9 +0,0 @@
[{
"relation": ["delegate_permission/common.handle_all_urls"],
"target": {
"namespace": "android_app",
"package_name": "com.abrendan.micdropmessages",
"sha256_cert_fingerprints":
["F4:68:84:2F:72:FC:E3:DC:82:A8:AC:73:FA:EA:0D:E9:9D:20:CD:07:D5:91:55:C7:E6:ED:49:9F:61:80:54:84"]
}
}]

View File

@ -4,23 +4,15 @@
<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/css2?family=Segoe+UI:wght@400;500;600&display=swap' rel='stylesheet'>
<style>
html {
scroll-behavior: smooth;
}
</style>
<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">
<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="new-notification.mp3"> </audio> <audio id = "Ding" src = "Ding.mp3"> </audio>
<h1 id="Title"> MicDropMessages</h1> <h1 id = "Title"> MicDropMessages V1.4 </h1>
<img id="Logo" src="https://micdropmessages.app/pictures/mdm2logo1.png" alt="Logo"> <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">
@ -40,25 +32,15 @@ html {
<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>
<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()">
</div> </div>
<div class="other">
<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"> <button id="darkModeToggle" onclick="toggleDarkMode()" class="button">Toggle Dark Mode</button>
<button id="GitHubButton" onclick="window.open('https://github.com/abrendan/MicDropMessages','_blank')" class="button">GitHub Page for MicDropMessages</button> <button 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> <br><br>
</div>
</div>
<p class="version-number">V2.3.0</p>
</div>
<div id="errorPopup" class="error-popup">
<div class="error-popup-content">
<p id="errorText">Please enter a username and a chatroom.</p>
<button id="errorButton" class="button2" onclick="closeErrorPopup()">Continue</button>
</div>
</div> </div>
</body> </body>
</html> </html>

Binary file not shown.

Binary file not shown.

Before

Width:  |  Height:  |  Size: 1018 KiB

Binary file not shown.

Before

Width:  |  Height:  |  Size: 7.0 MiB

Binary file not shown.

Before

Width:  |  Height:  |  Size: 540 KiB

Binary file not shown.

Before

Width:  |  Height:  |  Size: 547 KiB

Binary file not shown.

Before

Width:  |  Height:  |  Size: 448 KiB

File diff suppressed because one or more lines are too long

View File

@ -24,9 +24,7 @@ function onload(){
socket.on("join", function(room){ socket.on("join", function(room){
chatRoom.innerHTML = "Current Chatroom : " + 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){ socket.on("recieve", function(message){
console.log(message); console.log(message);
@ -34,7 +32,8 @@ 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);
} }
@ -42,54 +41,11 @@ 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
document.getElementById('errorPopup').style.display = 'none';
} }
function Connect(){ function Connect(){
var username = usernameInput.value.trim(); socket.emit("join", chatIDInput.value, usernameInput.value);
var room = chatIDInput.value.trim();
if(username && room){
socket.emit("join", room, username);
chatRoom.innerHTML = "Chatroom: " + room;
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(){
if (chatRoom.innerHTML.includes("Chatroom")) {
var roomName = chatRoom.innerHTML.split(": ")[1];
var username = usernameInput.value;
socket.emit('leave', roomName, username);
}
// 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(){ function Send(){
@ -105,6 +61,10 @@ 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') {

View File

@ -1,182 +1,110 @@
body{ body{
background-color: #202020; background-image: url('https://images.unsplash.com/37/IHLjdHdzSvi0rgUMMlSK_TE3_0286.jpg'); /* Path to your example image */
color: #ffffff; background-size: cover; /* Cover the entire viewport */
font-family: 'Segoe UI', 'Roboto', sans-serif; background-repeat: no-repeat; /* Do not repeat the image */
display: flex; background-attachment: fixed; /* The background image does not scroll */
justify-content: center; color: #000000;
align-items: center; font-family: 'Segoe UI';
margin: 0; display: flex; /* Use flexbox to center content */
min-height: 100vh; justify-content: center; /* Center horizontally */
background-image: linear-gradient(45deg, #1a1a1a 0%, #2d2d2d 100%); align-items: center; /* Center vertically */
} }
label{
#Main { min-width: 70px; /* Ensure label has enough width */
background: rgba(32, 32, 32, 0.8); display: block; /* Make labels stack above inputs and buttons */
backdrop-filter: blur(20px); margin-bottom: 0.5em; /* Provide some space between label and input/button */
-webkit-backdrop-filter: blur(20px); text-align: left; /* Align text to the left */
border-radius: 12px;
border: 1px solid rgba(255, 255, 255, 0.1);
padding: 2rem;
width: 90%;
max-width: 800px;
box-shadow: 0 8px 32px rgba(0, 0, 0, 0.1);
transition: transform 0.3s ease, box-shadow 0.3s ease;
} }
input{
#Main:hover { background-color: rgba(255, 255, 255, 0.15);
transform: translateY(-5px); color: #000000;
box-shadow: 0 12px 40px rgba(0, 0, 0, 0.2); font-size: 120%;
}
.input {
background: rgba(255, 255, 255, 0.05);
border: 1px solid rgba(255, 255, 255, 0.1);
border-radius: 8px;
color: #ffffff;
padding: 12px;
font-size: 16px;
transition: all 0.3s ease;
width: 100%;
box-sizing: border-box;
}
.input:focus {
border-color: #0078d4;
outline: none;
background: rgba(255, 255, 255, 0.08);
}
.button, .button2 {
background: rgba(255, 255, 255, 0.08);
border: none; border: none;
border-radius: 8px; width: 100%; /* Full width input fields */
color: #ffffff; box-sizing: border-box; /* Border box sizing for padding and borders */
padding: 12px 24px; margin-bottom: 1em; /* Provide space below inputs */
font-size: 16px;
cursor: pointer;
transition: all 0.3s ease;
margin: 8px 0;
backdrop-filter: blur(4px);
} }
.button:hover, .button2:hover {
background: #0078d4;
transform: translateY(-2px);
}
.button:active, .button2:active {
transform: translateY(0);
background: #006cbd;
}
.Message{ .Message{
padding: 12px; color: #000000;
margin: 8px 0;
border-radius: 8px;
background: rgba(255, 255, 255, 0.05);
animation: fadeIn 0.3s ease;
} }
@keyframes fadeIn {
from {
opacity: 0;
transform: translateY(10px);
}
to {
opacity: 1;
transform: translateY(0);
}
}
#Title {
font-size: 2.5rem;
margin-bottom: 1rem;
text-align: center;
background: linear-gradient(45deg, #0078d4, #00b4ff);
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
animation: titleGlow 2s ease-in-out infinite alternate;
}
@keyframes titleGlow {
from {
filter: drop-shadow(0 0 2px rgba(0, 120, 212, 0.3));
}
to {
filter: drop-shadow(0 0 10px rgba(0, 120, 212, 0.6));
}
}
#Logo {
display: block;
margin: 0 auto;
height: 80px;
animation: float 3s ease-in-out infinite;
}
@keyframes float {
0% { transform: translateY(0px); }
50% { transform: translateY(-10px); }
100% { transform: translateY(0px); }
}
.error-popup {
display: none;
position: fixed;
top: 0;
left: 0;
width: 100%;
height: 100%;
background: rgba(32, 32, 32, 0.95);
backdrop-filter: blur(20px);
justify-content: center;
align-items: center;
z-index: 1000;
}
.error-popup-content {
background: #202020;
border: 1px solid rgba(255, 255, 255, 0.1);
color: #ffffff;
border-radius: 12px;
padding: 20px;
text-align: center;
max-width: 300px;
}
@media (max-width: 900px) {
body {
background: #202020;
}
#Main{ #Main{
width: 100%; min-height: 94.5vh; /* Stretch to fill the viewport height */
padding: 1rem; width: 50%;
background: transparent; padding: 20px; /* Padding added to the main content area */
border: none; border-radius: 10px;
backdrop-filter: none; backdrop-filter: blur(5px); /* Provide a translucent frosted-glass effect */
box-shadow: none; 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 */
} }
#Main:hover {
transform: none;
box-shadow: none;
}
#SendMessage, #LeaveRoomButton, #ConnectButton {
display: block;
width: 100%;
max-width: 300px;
margin: 8px auto;
}
}
@media (max-width: 650px) {
#Title{ #Title{
font-size: 2rem; font-size: 300%;
}
.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 */
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 */
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 {
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: #333; /* Dark background for main content area */
}
.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 */
}
.button2:hover {
background-color:#000000;
color:#ffffff;
}
@media (max-width: 600px) {
label {
width: auto; /* Full width on narrow screens */
}
#Main {
width: 100%; /* Full width on narrow screens */
} }
} }
#Chat {
display: none;
}

View File

@ -36,11 +36,4 @@ io.on('connection', function(socket){
socket.on("recieve", function(message){ socket.on("recieve", function(message){
socket.emit("recieve", message); socket.emit("recieve", message);
}) })
socket.on("leave", function(room, username){
if (room && username) {
socket.leave(room);
io.in(room).emit("recieve", "Server: " + username + " has left the chat.");
}
});
}) })