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

add a option dark moad in html & css style :root , body.dark-moad , b… #955

Open
wants to merge 1 commit into
base: main
Choose a base branch
from
Open

add a option dark moad in html & css style :root , body.dark-moad , b… #955

Show file tree
Hide file tree
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
42 changes: 42 additions & 0 deletions login.css
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -280,3 +280,45 @@ form {
font-size: 1.2rem;
}
}
:root {
--background-color: #ffffff;
--text-color: #333333;
--header-bg: #00796b;
--button-bg: #6e8efb;
--button-text: #ffffff;
}
kusol2004 marked this conversation as resolved.
Show resolved Hide resolved

body.dark-mode {
--background-color: #1e1e1e;
--text-color: #ffffff;
--header-bg: #333333;
--button-bg: #444444;
--button-text: #ffffff;
}

body {
background-color: var(--background-color);
color: var(--text-color);
transition: background-color 0.3s ease, color 0.3s ease;
}
kusol2004 marked this conversation as resolved.
Show resolved Hide resolved

header {
background-color: var(--header-bg);
}
kusol2004 marked this conversation as resolved.
Show resolved Hide resolved

Dark Mode Toggle Button
kusol2004 marked this conversation as resolved.
Show resolved Hide resolved
.dark-mode-btn {
background-color: var(--button-bg);
color: var(--button-text);
border: none;
border-radius: 50%;
font-size: 1.2rem;
padding: 8px;
cursor: pointer;
margin-left: 10px;
transition: background-color 0.3s ease;
}

.dark-mode-btn:hover {
background-color: #555;
}
kusol2004 marked this conversation as resolved.
Show resolved Hide resolved
108 changes: 61 additions & 47 deletions login.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -11,27 +11,30 @@
<!-- Progress Bar -->
<div id="progress-container">
<div id="progress-bar"></div>
</div>
</div>

<!-- Navbar section -->
<header>
<!-- Navbar section -->
<header>
<a href="index.html"><h1>Resum Resume<span>.</span></h1></a>
<nav>
<ul id="nav-menu">
<li><a href="#home">Home</a></li>
<li><a href="#about.html">About Us</a></li>
<li><a href="#resume.html">Resume</a></li>
<li><a href="#signup.html">Sign Up</a></li>
<li><a href="login.html">Login</a></li>
</ul>
<ul id="nav-menu">
<li><a href="#home">Home</a></li>
<li><a href="#about.html">About Us</a></li>
<li><a href="#resume.html">Resume</a></li>
<li><a href="#signup.html">Sign Up</a></li>
<li><a href="login.html">Login</a></li>
</ul>
</nav>
<div class="nav-controls">
<a href="about.html" class="fas fa-info-circle"></a>
<a href="login.html" id="loginIcon" class="fas fa-user"></a>
<button id="menu-toggle" aria-label="Toggle menu">☰</button>
<button id="menu-toggle" aria-label="Toggle menu">☰</button>
</div>
</header>
<!-- Dark Mode Toggle -->
<button id="dark-mode-toggle" aria-label="Toggle dark mode">🌙</button>
Comment on lines +33 to +34
Copy link

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

🛠️ Refactor suggestion

Consider mobile responsiveness and accessibility improvements

The dark mode toggle button placement needs consideration for:

  1. Mobile responsiveness - ensure it doesn't break the layout on small screens
  2. Accessibility - add aria-pressed attribute to indicate toggle state
-    <button id="dark-mode-toggle" aria-label="Toggle dark mode">🌙</button>
+    <button id="dark-mode-toggle" aria-label="Toggle dark mode" aria-pressed="false" class="theme-toggle">🌙</button>
📝 Committable suggestion

‼️ IMPORTANT
Carefully review the code before committing. Ensure that it accurately replaces the highlighted code, contains no missing lines, and has no issues with indentation. Thoroughly test & benchmark the code to ensure it meets the requirements.

Suggested change
<!-- Dark Mode Toggle -->
<button id="dark-mode-toggle" aria-label="Toggle dark mode">🌙</button>
<!-- Dark Mode Toggle -->
<button id="dark-mode-toggle" aria-label="Toggle dark mode" aria-pressed="false" class="theme-toggle">🌙</button>

</header>

<!-- Main Content -->
<div class="container">
<div class="forms-container">
<div class="signin-signup">
Expand Down Expand Up @@ -62,47 +65,58 @@ <h2 class="title">Sign up</h2>
</div>
</div>


<!-- Footer -->
<footer class="footer">
<div class="footer-content">
<div class="footer-section">
<h3>About Us</h3>
<ul>
<li><a href="#">Our Story</a></li>
<li><a href="#">Team</a></li>
<li><a href="#">Careers</a></li>
</ul>
</div>
<div class="footer-section">
<h3>Services</h3>
<ul>
<li><a href="#">Resume Builder</a></li>
<li><a href="cv.html">CV Templates</a></li>
<li><a href="#">Career Advice</a></li>
</ul>
</div>
<div class="footer-section">
<h3>Support</h3>
<ul>
<li><a href="Faqs.html">FAQ</a></li>
<li><a href="comment.html">Contact Us</a></li>
<li><a href="privacy-policy.html">Privacy Policy</a></li>
</ul>
</div>
<div class="footer-section">
<h3>Connect With Us</h3>
<div class="social-icons">
<a href="#"><i class="fab fa-facebook-f"></i></a>
<a href="#"><i class="fab fa-twitter"></i></a>
<a href="#"><i class="fab fa-linkedin-in"></i></a>
<a href="#"><i class="fab fa-instagram"></i></a>
</div>
<div class="footer-section">
<h3>About Us</h3>
<ul>
<li><a href="#">Our Story</a></li>
<li><a href="#">Team</a></li>
<li><a href="#">Careers</a></li>
</ul>
</div>
<div class="footer-section">
<h3>Services</h3>
<ul>
<li><a href="#">Resume Builder</a></li>
<li><a href="cv.html">CV Templates</a></li>
<li><a href="#">Career Advice</a></li>
</ul>
</div>
<div class="footer-section">
<h3>Support</h3>
<ul>
<li><a href="Faqs.html">FAQ</a></li>
<li><a href="comment.html">Contact Us</a></li>
<li><a href="privacy-policy.html">Privacy Policy</a></li>
</ul>
</div>
<div class="footer-section">
<h3>Connect With Us</h3>
<div class="social-icons">
<a href="#"><i class="fab fa-facebook-f"></i></a>
<a href="#"><i class="fab fa-twitter"></i></a>
<a href="#"><i class="fab fa-linkedin-in"></i></a>
<a href="#"><i class="fab fa-instagram"></i></a>
Comment on lines +98 to +101
Copy link

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

⚠️ Potential issue

Add proper href values and security attributes for social links

Social media links should have proper URLs and security attributes.

-          <a href="#"><i class="fab fa-facebook-f"></i></a>
-          <a href="#"><i class="fab fa-twitter"></i></a>
-          <a href="#"><i class="fab fa-linkedin-in"></i></a>
-          <a href="#"><i class="fab fa-instagram"></i></a>
+          <a href="https://facebook.com/resumresume" target="_blank" rel="noopener noreferrer"><i class="fab fa-facebook-f"></i></a>
+          <a href="https://twitter.com/resumresume" target="_blank" rel="noopener noreferrer"><i class="fab fa-twitter"></i></a>
+          <a href="https://linkedin.com/company/resumresume" target="_blank" rel="noopener noreferrer"><i class="fab fa-linkedin-in"></i></a>
+          <a href="https://instagram.com/resumresume" target="_blank" rel="noopener noreferrer"><i class="fab fa-instagram"></i></a>

Committable suggestion was skipped due to low confidence.

</div>
</div>
</div>
<div class="footer-bottom">
<p>&copy; 2024 Resume Builder. All rights reserved.</p>
<p>&copy; 2024 Resume Builder. All rights reserved.</p>
</div>
</footer>
</footer>

<script src="login.js"></script>
<script>
// JavaScript for Dark Mode Toggle
const toggleButton = document.getElementById('dark-mode-toggle');
const body = document.body;

toggleButton.addEventListener('click', () => {
body.classList.toggle('dark-mode');
toggleButton.textContent = body.classList.contains('dark-mode') ? '☀️' : '🌙';
});
</script>
Comment on lines +111 to +120
Copy link

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

🛠️ Refactor suggestion

Improve dark mode implementation

The current implementation needs the following improvements:

  1. Persist user preference using localStorage
  2. Respect system color scheme preference
  3. Move script to external file for better maintainability

Move this code to login.js and replace with:

-  <script>
-    // JavaScript for Dark Mode Toggle
-    const toggleButton = document.getElementById('dark-mode-toggle');
-    const body = document.body;
-
-    toggleButton.addEventListener('click', () => {
-      body.classList.toggle('dark-mode');
-      toggleButton.textContent = body.classList.contains('dark-mode') ? '☀️' : '🌙';
-    });
-  </script>

Add to login.js:

// Dark mode functionality
const toggleButton = document.getElementById('dark-mode-toggle');
const body = document.body;

// Check system preference
const prefersDarkScheme = window.matchMedia('(prefers-color-scheme: dark)');

// Load saved preference
const currentTheme = localStorage.getItem('theme');
if (currentTheme === 'dark') {
  body.classList.add('dark-mode');
  toggleButton.textContent = '☀️';
  toggleButton.setAttribute('aria-pressed', 'true');
} else if (currentTheme === 'light') {
  body.classList.remove('dark-mode');
  toggleButton.textContent = '🌙';
  toggleButton.setAttribute('aria-pressed', 'false');
} else if (prefersDarkScheme.matches) {
  body.classList.add('dark-mode');
  toggleButton.textContent = '☀️';
  toggleButton.setAttribute('aria-pressed', 'true');
}

// Handle toggle
toggleButton.addEventListener('click', () => {
  body.classList.toggle('dark-mode');
  const isDark = body.classList.contains('dark-mode');
  toggleButton.textContent = isDark ? '☀️' : '🌙';
  toggleButton.setAttribute('aria-pressed', isDark);
  localStorage.setItem('theme', isDark ? 'dark' : 'light');
});

// Handle system preference changes
prefersDarkScheme.addEventListener('change', (e) => {
  if (!localStorage.getItem('theme')) {
    const shouldBeDark = e.matches;
    body.classList.toggle('dark-mode', shouldBeDark);
    toggleButton.textContent = shouldBeDark ? '☀️' : '🌙';
    toggleButton.setAttribute('aria-pressed', shouldBeDark);
  }
});

</body>
</html>