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

V2! New background, better mobile UI

Browse Source
This commit is contained in:
abrendan 2024-01-15 10:14:14 +00:00
parent 5ad7ad2ce6
commit 1733bb9a00
3 changed files with 4 additions and 4 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
html/index.html
View File

@ -12,7 +12,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.7 </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> <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>

BIN
html/pictures/jezael-melgoza-2FiXtdnVhjQ-unsplash.jpg Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 540 KiB

6
html/style.css
View File

@ -1,5 +1,5 @@
body{ 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-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 */
@ -71,7 +71,7 @@ input{
/* Add this to your CSS to support dark mode */ /* Add this to your CSS to support dark mode */
body.dark-mode { body.dark-mode {
color: #ffffff; /* Light text color for contrast */ 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 */ background-color: rgba(0, 0, 0, 1); /* Slightly transparent dark background */
} }
body.dark-mode .button { body.dark-mode .button {
@ -84,7 +84,7 @@ body.dark-mode .input {
color: #ffffff; /* Dark button background color */ color: #ffffff; /* Dark button background color */
} }
.dark-mode #Main { .dark-mode #Main {
background-color: #333; /* Dark background for main content area */ background-color: rgba(0, 0, 0, 0.5); /* Slightly transparent dark background */
} }
.input { .input {
border-radius: 10px; border-radius: 10px;