4 Commits
V1.2 ... V1.3

Author SHA1 Message Date
abrendan
b1bccfb358 V1.3(Again)! Fixed text colors of messages in dark mode 2023-12-02 00:20:32 +00:00
abrendan
a80e0b0abc V1.3! Fixed text colors of messages in dark mode 2023-12-02 00:18:17 +00:00
abrendan
83a6d186ea Built in a easter egg... 2023-12-02 00:02:04 +00:00
abrendan
30f3ea974d Somewhat fixed the bottom 2023-12-01 23:23:18 +00:00
3 changed files with 29 additions and 3 deletions

View File

@@ -11,7 +11,7 @@
<body onload = "onload()"> <body onload = "onload()">
<div id = "Main"> <div id = "Main">
<audio id = "Ding" src = "Ding.mp3"> </audio> <audio id = "Ding" src = "Ding.mp3"> </audio>
<h1 id = "Title"> MicDropMessages V1.2 </h1> <h1 id = "Title"> MicDropMessages V1.3 </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 webbased 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>

View File

@@ -39,7 +39,7 @@ function onload(){
} }
for (var i = 0; i < messages.length; i++){ for (var i = 0; i < messages.length; i++){
document.getElementById("Message"+i).innerHTML = messages[i]; document.getElementById("Message"+i).innerHTML = messages[i];
document.getElementById("Message"+i).style.color = "#000000"; document.getElementById("Message"+i).style.color = getComputedStyle(document.body).color;
} }
}) })
} }
@@ -63,4 +63,14 @@ function delayReset(){
function toggleDarkMode() { function toggleDarkMode() {
document.body.classList.toggle('dark-mode'); 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') {
// Prevent the default action to avoid conflicts
event.preventDefault();
// Open the desired webpage in a new window/tab
window.open('https://www.youtube.com/watch?v=dQw4w9WgXcQ');
}
});

View File

@@ -23,15 +23,18 @@
.Message{ .Message{
color: #000000; color: #000000;
} }
#Main{ #Main{
min-height: 94.5vh; /* Stretch to fill the viewport height */
padding: 20px; /* Padding added to the main content area */ padding: 20px; /* Padding added to the main content area */
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 */
background-color: rgba(255, 255, 255, 0.2); /* Slightly white transparent background */ background-color: rgba(255, 255, 255, 0.2); /* Slightly white transparent background */
} }
#Title{ #Title{
font-size: 300%; font-size: 300%;
} }
@@ -64,6 +67,19 @@
body.dark-mode { body.dark-mode {
color: #ffffff; /* Light text color for contrast */ color: #ffffff; /* Light text color for contrast */
} }
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 */
}
/* You might want to customize other elements for dark mode, for example: */ /* You might want to customize other elements for dark mode, for example: */
.dark-mode #Main { .dark-mode #Main {
background-color: #333; /* Dark background for main content area */ background-color: #333; /* Dark background for main content area */