Skip to content

Commit

Permalink
Merge branch 'main' into sesh
Browse files Browse the repository at this point in the history
  • Loading branch information
@Jasleen1210
Jasleen1210 authored Jul 31, 2024
2 parents 317c564 + 6c1bd03 commit 64a19ef
Show file tree
Hide file tree
Showing 16 changed files with 646 additions and 611 deletions.
17 changes: 11 additions & 6 deletions 404.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -8,25 +8,30 @@
<meta name="description" content="Page not found on the Random Disco Light Simulator site. Please check the URL or return to the homepage.">
<link rel="icon" href="assets/images/favicon/favicon.ico" type="image/x-icon" />
<link rel="stylesheet" href="./css/404.css">
<link rel="stylesheet" href="./css/style.css">
<link href="https://fonts.googleapis.com/css2?family=Poppins:ital,wght@0,100;0,200;0,300;0,400;0,500;0,600;0,700;0,800;0,900;1,100;1,200;1,300;1,400;1,500;1,600;1,700;1,800;1,900&display=swap" rel="stylesheet">
<title>Error - 404</title>
<script src="./js/404.js" defer></script>
</head>

<body>
<div class="errorpage"></div>
<div class="stars"></div>
<div class="container">
<div class="text1">Oops!</div>
<div class="text2">404 - Page not Found</div>
<div class="text3">The page you are looking for might have been removed, had its name changed, or is temporarily
unavailable.</div>
<div class="text4 text3">Redirecting in <strong></strong> seconds</div>
<div class="text5"><a href="index.html">Go to HomePage</a></div>
<div class="dark-mode-toggle">
<input type="checkbox" id="dark-mode-toggle">
<label for="dark-mode-toggle">Dark Mode</label>
<div class="text4 text3">Redirecting in <strong></strong> seconds</div>
<div class="text5"><a href="index.html">Go to HomePage</a></div>
</div>
</div>
<div id="sun-moon-mode-toggler" class="toggle-container" >
<input type="checkbox" id="themeToggle" class="switch-checkbox">
<label id="themeChangeToggle" class="theme-switch" for="themeToggle">
<div class="toggle-button">
<span class="light-mode-icon"><img src="sun.svg" style = "display: block;"></span>
<span class="dark-mode-icon"><img src="moon.svg"style = "display: block;"></span>
</div>
</body>

</html>
117 changes: 64 additions & 53 deletions Login/script1.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -2,7 +2,7 @@ document.addEventListener('DOMContentLoaded', function() {
const container = document.getElementById('container');
const registerBtn = document.getElementById('register');
const loginBtn = document.getElementById('login');

const createPasswordInput = document.getElementById('passwordSignUp');
const confirmPasswordInput = document.getElementById('confirmPasswordSignUp');
const createPasswordToggle = document.querySelector('.password-toggle[data-target="passwordSignUp"]');
Expand All @@ -11,73 +11,84 @@ document.addEventListener('DOMContentLoaded', function() {
const signInPasswordInput = document.getElementById('passwordSignIn');
const signInPasswordToggle = document.getElementById('togglePasswordSignIn');

registerBtn.addEventListener('click', () => {
container.classList.add("active");
});
if (registerBtn) {
registerBtn.addEventListener('click', () => {
container.classList.add("active");
});
}

loginBtn.addEventListener('click', () => {
container.classList.remove("active");
});
if (loginBtn) {
loginBtn.addEventListener('click', () => {
container.classList.remove("active");
});
}

// Function to toggle password visibility for Create Account
function togglePasswordVisibility(input, toggle) {
const type = input.getAttribute('type') === 'password' ? 'text' : 'password';
input.setAttribute('type', type);
if (input && toggle) {
const type = input.getAttribute('type') === 'password' ? 'text' : 'password';
input.setAttribute('type', type);

// Toggle eye icon class
if (type === 'password') {
toggle.querySelector('i').classList.remove('fa-eye-slash');
toggle.querySelector('i').classList.add('fa-eye');
} else {
toggle.querySelector('i').classList.remove('fa-eye');
toggle.querySelector('i').classList.add('fa-eye-slash');
const icon = toggle.querySelector('i');
if (icon) {
icon.classList.toggle('fa-eye');
icon.classList.toggle('fa-eye-slash');
}
}
}

// Event listener for Create Account password toggle button
createPasswordToggle.addEventListener('click', function(event) {
event.preventDefault();
togglePasswordVisibility(createPasswordInput, createPasswordToggle);
});

// Event listener for Confirm Password toggle button
confirmPasswordToggle.addEventListener('click', function(event) {
event.preventDefault();
togglePasswordVisibility(confirmPasswordInput, confirmPasswordToggle);
});
// Event listeners for password toggle buttons
if (createPasswordToggle) {
createPasswordToggle.addEventListener('click', function(event) {
event.preventDefault();
togglePasswordVisibility(createPasswordInput, createPasswordToggle);
});
}

// Event listener for Sign In password toggle button
signInPasswordToggle.addEventListener('click', function(event) {
event.preventDefault();
togglePasswordVisibility(signInPasswordInput, signInPasswordToggle);
});
if (confirmPasswordToggle) {
confirmPasswordToggle.addEventListener('click', function(event) {
event.preventDefault();
togglePasswordVisibility(confirmPasswordInput, confirmPasswordToggle);
});
}

if (signInPasswordToggle) {
signInPasswordToggle.addEventListener('click', function(event) {
event.preventDefault();
togglePasswordVisibility(signInPasswordInput, signInPasswordToggle);
});
}

const signInForm = document.querySelector('.form-container.sign-in form');

signInForm.addEventListener('submit', function(event) {
const email = signInForm.querySelector('input[type="email"]').value;
const password = signInForm.querySelector('input[type="password"]').value;
if (signInForm) {
signInForm.addEventListener('submit', function(event) {
const email = signInForm.querySelector('input[type="email"]').value;
const password = signInForm.querySelector('input[type="password"]').value;

if (!email || !password) {
event.preventDefault();
alert('Required fields were not filled.');
}
});
if (!email || !password) {
event.preventDefault();
alert('Required fields were not filled.');
}
});
}

const signUpForm = document.querySelector('.form-container.sign-up form');
signUpForm.addEventListener('submit', function(event) {
const name = signUpForm.querySelector('input[type="text"]').value;
const email = signUpForm.querySelector('input[type="email"]').value;
const password = signUpForm.querySelector('#passwordSignUp').value;
const confirmPassword = signUpForm.querySelector('#confirmPasswordSignUp').value;

if (password !== confirmPassword) {
event.preventDefault();
alert('Passwords do not match!');
} else if (!name || !email || !password || !confirmPassword) {
event.preventDefault();
alert('Required fields were not filled.');
}
});
if (signUpForm) {
signUpForm.addEventListener('submit', function(event) {
const name = signUpForm.querySelector('input[type="text"]').value;
const email = signUpForm.querySelector('input[type="email"]').value;
const password = signUpForm.querySelector('#passwordSignUp').value;
const confirmPassword = signUpForm.querySelector('#confirmPasswordSignUp').value;

if (password !== confirmPassword) {
event.preventDefault();
alert('Passwords do not match!');
} else if (!name || !email || !password || !confirmPassword) {
event.preventDefault();
alert('Required fields were not filled.');
}
});
}
});
32 changes: 1 addition & 31 deletions css/404.css
View file
Original file line number Diff line number Diff line change
Expand Up @@ -101,6 +101,7 @@ a {
border-radius: 50px;
transition: background-color 0.3s ease;
animation: slideUp 2s ease-in-out;
font-size: 16px;
}

a:hover {
Expand Down Expand Up @@ -192,37 +193,6 @@ a:hover {
}
}

/* Dark Mode Toggle */

.dark-mode-toggle {
position: fixed;
top: 20px;
right: 20px;
z-index: 100;
display: flex;
align-items: center;
justify-content: flex-end;
color: white;
}

.dark-mode-toggle label {
margin-left: 5px;
cursor: pointer;
}

.dark-mode-toggle input[type="checkbox"] {
display: none;
}

.dark-mode-toggle input[type="checkbox"] + label:before {
content: '\1F31E'; /* Sun emoji for light mode */
font-size: 20px;
}

.dark-mode-toggle input[type="checkbox"]:checked + label:before {
content: '\1F30C'; /* Moon emoji for dark mode */
}

body.dark-mode {
background: #333; /* Dark background color */
color: white;
Expand Down
96 changes: 96 additions & 0 deletions css/mode_toggler.css
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,96 @@
.toggle-container {
transform: translate(-50%, -50%);
display: flex;
align-items: center;
justify-content: center;
margin: 30px 0 0 30px;
right: -4px;
top: 15px;
position: fixed;
top: 30px;
right: 20px;
z-index : 100;
display: flex;
align-items: center;
border: none;
background-color: transparent;
width: 40px;
height: 20px;
margin: 0 5px;
}


/* Hidden Checkbox */
.switch-checkbox {
display: none;
}

.theme-switch {
position: relative;
width: 45px;
height: 30px;
background-color: #ccc;
border-radius: 20px;
cursor: pointer;
display: flex;
align-items: center;
justify-content: center;
padding: 0 5px;
box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
transition: background-color 0.5s ease;
}

.theme-switch .light-mode-icon,
.theme-switch .dark-mode-icon {
font-size: 19px;
/* position: absolute; */
cursor: pointer;
top: 50%;
transform: translateY(-50%);
transition: opacity 0.5s ease, color 0.5s ease;
}

.theme-switch .light-mode-icon {
color: #f39c12;
}

.theme-switch .dark-mode-icon {
color: #bdc3c7;
opacity: 0;
}
.dark-mode-icon img{
position: relative;
bottom: 23px;
}
.light-mode .desc {
color: black !important;
}
.toggle-button {
position: absolute;
top: 3px;
left: 3px;
width: 25px;
height: 25px;
background-color: #fff;
border-radius: 50%;
box-shadow: 0 4px 8px rgba(0, 0, 0, 0.15);
transition: transform 0.5s ease, background-color 0.5s ease;
}

/* Checkbox Checked State */
.switch-checkbox:checked + .theme-switch {
background-color: #34495e;
}

.switch-checkbox:checked + .theme-switch .light-mode-icon {
opacity: 0;
}

.switch-checkbox:checked + .theme-switch .dark-mode-icon {
opacity: 1;
}

.switch-checkbox:checked + .theme-switch .toggle-button {
transform: translateX(13px);
/* background-color: #34495e; */
}
Loading

0 comments on commit 64a19ef

Please sign in to comment.