Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Update index.html #26

Closed
wants to merge 1 commit into from
Closed

Update index.html #26

Changes from all commits
Commits
Show all changes
1 commit
Select commit
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
200 changes: 179 additions & 21 deletions index.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -6,8 +6,8 @@
<title>Mirage - Privacy Focused Chat App</title>
<style>
body {
background-color: #f0f0f0;
color: #333;
background-color: #ffffff;
color: #333333;
font-family: Arial, sans-serif;
display: flex;
flex-direction: column;
Expand Down Expand Up @@ -39,24 +39,25 @@
margin: 15px auto;
padding: 10px 20px;
font-size: 1rem;
color: white;
background-color: #333;
color: #ffffff;
background-color: #0056b3;
border: none;
cursor: pointer;
text-decoration: none;
transition: background-color 0.3s;
}

.cta-button:hover {
background-color: #555;
background-color: #003d80;
}

.dark-mode .cta-button {
background-color: #007bff;
background-color: #4da6ff;
color: #000000;
}

.cta-button:hover {
background-color: #0056b3;
.dark-mode .cta-button:hover {
background-color: #80bfff;
}

.contributors {
Expand All @@ -76,15 +77,32 @@
position: fixed;
top: 20px;
right: 20px;
padding: 10px;
background-color: #333;
color: white;
width: 50px;
height: 50px;
border-radius: 50%;
background-color: #0056b3;
color: #ffffff;
border: none;
cursor: pointer;
display: flex;
align-items: center;
justify-content: center;
font-size: 24px;
transition: background-color 0.3s;
box-shadow: 0 2px 5px rgba(0, 0, 0, 0.2);
}

.dark-mode-toggle:hover {
background-color: #555;
background-color: #003d80;
}

.dark-mode .dark-mode-toggle {
background-color: #4da6ff;
color: #000000;
}

.dark-mode .dark-mode-toggle:hover {
background-color: #80bfff;
}

.stats {
Expand All @@ -98,7 +116,7 @@
}

.footer a {
color: #007bff;
color: #0056b3;
text-decoration: none;
margin: 0 5px;
}
Expand Down Expand Up @@ -144,10 +162,125 @@
text-decoration: none;
cursor: pointer;
}

/* Dark mode styles */
body.dark-mode {
background-color: #1a1a1a;
color: #f0f0f0;
}

.dark-mode .cta-button {
background-color: #4da6ff;
color: #000000;
}

.dark-mode .cta-button:hover {
background-color: #80bfff;
}

.dark-mode .dark-mode-toggle {
background-color: #4da6ff;
color: #000000;
}

.dark-mode .dark-mode-toggle:hover {
background-color: #80bfff;
}

.dark-mode .modal-content {
background-color: #333333;
color: #f0f0f0;
}

.dark-mode .close {
color: #f0f0f0;
}

.dark-mode .close:hover,
.dark-mode .close:focus {
color: #ffffff;
}

.dark-mode .footer a {
color: #4da6ff;
}

/* Navbar styles */
.navbar {
position: fixed;
top: 0;
left: 0;
right: 0;
background-color: #ffffff;
padding: 10px 20px;
display: flex;
justify-content: space-between;
align-items: center;
box-shadow: 0 2px 4px rgba(0,0,0,0.1);
z-index: 1000;
}

.navbar-brand {
font-size: 1.5rem;
font-weight: bold;
color: #333333;
text-decoration: none;
}

.navbar-links {
display: flex;
gap: 20px;
}

.navbar-links a {
color: #333333;
text-decoration: none;
transition: color 0.3s;
}

.navbar-links a:hover {
color: #0056b3;
}

/* Dark mode styles for navbar */
.dark-mode .navbar {
background-color: #333333;
}

.dark-mode .navbar-brand,
.dark-mode .navbar-links a {
color: #f0f0f0;
}

.dark-mode .navbar-links a:hover {
color: #4da6ff;
}

/* Adjust body padding to account for navbar */
body {
padding-top: 60px;
}

/* Move dark mode toggle to align with navbar */
.dark-mode-toggle {
top: 70px;
}
</style>
</head>
<body>
<button class="dark-mode-toggle" onclick="toggleDarkMode()">Toggle Dark Mode</button>
<nav class="navbar">
<a href="#" class="navbar-brand">Mirage</a>
<div class="navbar-links">
<a href="#">Home</a>
<a href="#">About</a>
<a href="#">Features</a>
<a href="#">Contact</a>
</div>
</nav>

<button class="dark-mode-toggle" onclick="toggleDarkMode()" aria-label="Toggle dark mode">
<span id="darkModeIcon">🌙</span>
</button>

<div class="container">
<div class="header">Welcome to Mirage</div>
Expand Down Expand Up @@ -198,13 +331,9 @@
<script>
function toggleDarkMode() {
document.body.classList.toggle('dark-mode');
if (document.body.classList.contains('dark-mode')) {
document.body.style.backgroundColor = '#333';
document.body.style.color = '#f0f0f0';
} else {
document.body.style.backgroundColor = '#f0f0f0';
document.body.style.color = '#333';
}
localStorage.setItem('darkMode', document.body.classList.contains('dark-mode'));
updateDarkModeIcon();
updateNavbarColor();
}

function openModal() {
Expand All @@ -222,6 +351,35 @@
closeModal();
}
}

// Update the text of the dark mode toggle button
function updateDarkModeIcon() {
const darkModeIcon = document.getElementById('darkModeIcon');
if (document.body.classList.contains('dark-mode')) {
darkModeIcon.textContent = '☀️';
} else {
darkModeIcon.textContent = '🌙';
}
}

// Update navbar color when toggling dark mode
function updateNavbarColor() {
const navbar = document.querySelector('.navbar');
if (document.body.classList.contains('dark-mode')) {
navbar.style.backgroundColor = '#333333';
} else {
navbar.style.backgroundColor = '#ffffff';
}
}

// Check for saved dark mode preference and update navbar
document.addEventListener('DOMContentLoaded', (event) => {
if (localStorage.getItem('darkMode') === 'true') {
document.body.classList.add('dark-mode');
}
updateDarkModeIcon();
updateNavbarColor();
});
</script>
</body>
</html>