Skip to content

Added SignIn and SignUp #62

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

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

Added SignIn and SignUp #62

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
108 changes: 108 additions & 0 deletions auth.css
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,108 @@
body {
font-family: Arial, sans-serif;
background: linear-gradient(to bottom, #fff, #f9f9f9);
margin: 0;
padding: 0;
}

/* Navbar */
.navbar {
background: white;
display: flex;
justify-content: space-between;
align-items: center;
padding: 15px 40px;
box-shadow: 0 2px 8px rgba(0,0,0,0.1);
}
.logo {
font-weight: bold;
font-size: 1.2rem;
color: green;
}
.logo span {
color: orange;
}
.navbar ul {
list-style: none;
display: flex;
gap: 20px;
}
.navbar ul li a {
text-decoration: none;
color: black;
font-weight: 500;
}

/* Auth Container */
.auth-container {
max-width: 350px;
background: white;
padding: 30px;
border-radius: 12px;
box-shadow: 0 5px 20px rgba(0,0,0,0.1);
margin: 60px auto;
text-align: center;
}
.auth-container h2 {
margin-bottom: 20px;
color: green;
}

/* Form Inputs */
input {
width: 100%;
padding: 12px;
margin: 8px 0;
border: 1px solid #ddd;
border-radius: 8px;
font-size: 14px;
}
.password-wrapper {
position: relative;
}
.toggle-password {
position: absolute;
top: 10px;
right: 10px;
cursor: pointer;
}

/* Button */
.btn-primary {
width: 100%;
background: #ffcc00;
border: none;
padding: 12px;
font-weight: bold;
border-radius: 8px;
cursor: pointer;
transition: 0.3s;
}
.btn-primary:hover {
background: #ffb700;
}

.switch-link {
margin-top: 15px;
font-size: 0.9rem;
}
.switch-link a {
color: orange;
text-decoration: none;
}
.switch-link a:hover {
text-decoration: underline;
}

/* Footer */
footer {
text-align: center;
padding: 15px;
background: white;
font-size: 0.9rem;
color: #555;
position: fixed;
bottom: 0;
width: 100%;
}

139 changes: 138 additions & 1 deletion index.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -18,6 +18,52 @@
</head>

<body class="overflow-x-hidden">
<header class="position-fixed top-0 " style="margin-bottom: 1px; z-index: 10 !important; width: 100vw !important;">
<nav class="navbar navbar-expand-lg bg-light border-bottom border-body overflow-x-hidden" data-bs-theme="dark">
<div class="container-fluid container responsive-navbar">
<div class="header-logo col-auto align-self-center mx-3 ">
<a class="navbar-brand mx-5 px-3 px-md-0 overflow-x-hidden" href="./">
<img src="./assets/images/logo.png" alt="Logo">
</a>
</div>
<button class="navbar-toggler align-self-start m-2 position-absolute top-0 btn btn-primary bg-success" type="button" data-bs-toggle="collapse"
data-bs-target="#navbarSupportedContent" aria-controls="navbarSupportedContent" aria-expanded="false"
aria-label="Toggle navigation">
<span class="navbar-toggler-icon dark "></span>
</button>
<div class="col-auto align-self-start px-2 px-md-0">
<div class="collapse navbar-collapse" id="navbarSupportedContent">
<ul class="navbar-nav me-auto mb-2 mb-lg-0">
<li class="nav-item hover-effect navbar-links-box">
<a class="nav-link text-black hover-effect navbar-links d-flex flex-column fw-bold" aria-current="page" href="index.html">Home</a>
</li>
<li class="nav-item hover-effect navbar-links-box">
<a class="nav-link text-black hover-effect navbar-links d-flex flex-column fw-bold" href="#Why-Gurukul">Why Gurukul</a>
</li>
<li class="nav-item hover-effect navbar-links-box">
<a class="nav-link text-black hover-effect navbar-links d-flex flex-column fw-bold" href="#Our-Achievements">Our Achievements</a>
</li>
<li class="nav-item hover-effect navbar-links-box">
<a class="nav-link text-black hover-effect navbar-links d-flex flex-column fw-bold" href="#The-Team">The Team</a>
</li>
<li class="nav-item hover-effect navbar-links-box">
<a class="nav-link text-black hover-effect navbar-links d-flex flex-column fw-bold" href="#testimonials-section">Testimonials</a>
</li>
<li class="nav-item hover-effect navbar-links-box">
<a class="nav-link text-black hover-effect navbar-links d-flex flex-column fw-bold" href="#Contact">Contacts</a>
</li>
<li class="nav-item hover-effect navbar-links-box">
<a class="nav-link text-black hover-effect navbar-links d-flex flex-column fw-bold" href="supportUs.html">Our Support Us</a>
</li>
</ul>
</div>
</div>
</div>
</nav>
</header>

<div class="py-3 my-2"></div>

<div id="header"></div>

<main class="container-auto ">
Expand All @@ -35,7 +81,7 @@ <h1 class="font-h3 h2 text-white times-roman-font">
</h1>
<div class="d-flex gap-3 ">
<a href="supportUs.html" target="_blank" class="btn btn-warning rounded-5 px-sm-5 px-3 mx-sm-3 mx-2 px-md-5 fw-bold py-2">Support Us</a>
<a class="btn btn-outline-warning rounded-5 px-sm-5 px-3 mx-sm-3 mx-2 px-md-5 fw-bold py-2">Join Us</a>
<a href="signin.html" class="btn btn-outline-warning rounded-5 px-sm-5 px-3 mx-sm-3 mx-2 px-md-5 fw-bold py-2">Join Us</a>
</div>
</div>

Expand Down Expand Up @@ -579,6 +625,97 @@ <h2 class="text-center libre-baskerville-regular">Our Partners</h2>
</main>

<div id="footer"></div>
<div class="bg-yellow mt-3" >
<div class="container overflow-x-hidden ">
<footer class="row row-cols-1 row-cols-sm-2 row-cols-md-5 pt-5 mt-1 d-flex justify-content-md-between justify-content-center">
<div class="col mb-3 ">
<!-- <a href="./" class="d-flex align-items-center mb-3 link-body-emphasis text-decoration-none">
<img src="./assets/images/logo.png" class="w-100" alt="Gurukul Dream Foundation logo">
</a> -->

<div class="col mb-3 text-center text-md-start">
<h5 class="text-success h1 my-3 pt-1 libre-baskerville-regular">Contact Us</h5>
<ul class="nav flex-column p-0">
<li class=" mb-2"><a href="tel:+918269250197" class="nav-link p-0 text-dark ">
<span>
<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" class="bi bi-telephone" viewBox="0 0 16 16">
<path d="M3.654 1.328a.678.678 0 0 0-1.015-.063L1.605 2.3c-.483.484-.661 1.169-.45 1.77a17.6 17.6 0 0 0 4.168 6.608 17.6 17.6 0 0 0 6.608 4.168c.601.211 1.286.033 1.77-.45l1.034-1.034a.678.678 0 0 0-.063-1.015l-2.307-1.794a.68.68 0 0 0-.58-.122l-2.19.547a1.75 1.75 0 0 1-1.657-.459L5.482 8.062a1.75 1.75 0 0 1-.46-1.657l.548-2.19a.68.68 0 0 0-.122-.58zM1.884.511a1.745 1.745 0 0 1 2.612.163L6.29 2.98c.329.423.445.974.315 1.494l-.547 2.19a.68.68 0 0 0 .178.643l2.457 2.457a.68.68 0 0 0 .644.178l2.189-.547a1.75 1.75 0 0 1 1.494.315l2.306 1.794c.829.645.905 1.87.163 2.611l-1.034 1.034c-.74.74-1.846 1.065-2.877.702a18.6 18.6 0 0 1-7.01-4.42 18.6 18.6 0 0 1-4.42-7.009c-.362-1.03-.037-2.137.703-2.877z"/>
</svg>
</span>
<span class="text-black ">+918269250197</span></a>
</li>
<li class=" mb-2"><a href="mailto:info@gurukuldreamfoundation.org" class="nav-link p-0 text-dark">
<span>
<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" class="bi bi-envelope" viewBox="0 0 16 16">
<path d="M0 4a2 2 0 0 1 2-2h12a2 2 0 0 1 2 2v8a2 2 0 0 1-2 2H2a2 2 0 0 1-2-2zm2-1a1 1 0 0 0-1 1v.217l7 4.2 7-4.2V4a1 1 0 0 0-1-1zm13 2.383-4.708 2.825L15 11.105zm-.034 6.876-5.64-3.471L8 9.583l-1.326-.795-5.64 3.47A1 1 0 0 0 2 13h12a1 1 0 0 0 .966-.741M1 11.105l4.708-2.897L1 5.383z"/>
</svg>
</span>
<span class="text-black small">info@gurukuldreamfoundation.org</span></a>
</li>

</ul>
</div>
<div class="all-social-links pt-1 text-center text-md-start my-3 pt-0">
<div class="py-md-3"></div>
<!-- <h3 class="h4 mt-2 mb-3 text-success">
Social Media
</h3> -->
<div class="social-media-links d-flex align-items-center justify-content-enenly gap-3 justify-self-start justify-content-center w-100 px-4 px-md-0">
<a href="https://twitter.com/DreamGurukul?s=08" target="_blank" title="Twitter (X)" class=" border rounded-circle p-1 border-black text-white text-center d-flex align-items-center justify-content-center social-media-logoes">
<img src="./assets/images/logoes/twitter.webp" class="rounded-circle " width="30px" alt="Social Media Logoes">
</a>
<a href="https://www.facebook.com/Gurukul-Dream-Foundation-106034151488777/" target="_blank" title="Facebook" class="text-white border rounded-circle p-1 border-black text-center d-flex align-items-center justify-content-center social-media-logoes">
<img src="./assets/images/logoes/facebook.png" class="rounded-circle " width="30px" alt="Social Media Logoes">
</a>
<a href="https://instagram.com/gurukuldreamfoundation?utm_medium=copy_link" target="_blank" title="Instagram" class="text-white border rounded-circle p-1 border-black text-center d-flex align-items-center justify-content-center social-media-logoes">
<img src="./assets/images/logoes/instagram.avif" class="rounded-circle " width="30px" alt="Social Media Logoes">
</a>
<a href="https://www.linkedin.com/company/gurukul-dream-foundation" target="_blank" title="LinkedIn" class=" border rounded-circle p-1 border-black text-black bg-white text-center d-flex align-items-center justify-content-center social-media-logoes">
<img src="./assets/images/logoes/linkedin.png" class="rounded-circle " width="30px" alt="Social Media Logoes">
</a>
<a href="https://youtu.be/M2y2MtGPANQ" target="_blank" title="YouTube" class="text-white border rounded-circle p-1 border-black text-center d-flex align-items-center justify-content-center social-media-logoes">
<img src="./assets/images/logoes/youtube.jpg" class="rounded-circle " width="30px" alt="Social Media Logoes">
</a>
</div>
</div>

</div>

<a href="./" class="d-flex fs-5 mt-2 align-items-center footer-logo-responsive flex-column mb-3 link-body-emphasis text-decoration-none w-25">
<img src="./assets/images/gdf-logo.png" class="w-100" alt="">
<!-- <img src="./assets/images/logo.png" class="w-100" alt="Gurukul Dream Foundation logo"> -->
<!-- Gurukul Dream Foundation -->
</a>
<!-- <div class="col my-3">
</div> -->

<div class="justify-self-end my-3 " id="Contact" style="width: 400px !important;">
<h3 class="h1 text-success libre-baskerville-regular">Get in Touch</h3>
<form action="./assets/email.php" method="POST">
<input type="text" name="name" class="form-control my-3" required placeholder="Name">
<input type="number" name="mobile" class="form-control my-3" required placeholder="Phone No.">
<input type="email" name="email" class="form-control my-3" required placeholder="Email">
<textarea type="text" name="message" class="form-control my-3" required placeholder="Drop a message..." style="height: 100px;"></textarea>
<button class="btn btn-primary mt-2" type="submit" >Send</button>
</form>
</div>




</footer>
<hr class="text-dark w-100">
<p class="text-body-secondary text-center fw-bold">Copyright &copy; 2024 | Gurukul Dream Foundation. All Rights Reserved.</p>
</div>
</div>


<a class="position-fixed text-orange shadow-yellow rounded shadow" href="#" title="Go to Top" style="bottom: 30px; right: 30px;">
<svg xmlns="http://www.w3.org/2000/svg" width="30" height="30" fill="currentColor" class="bi bi-caret-up-square-fill" viewBox="0 0 16 16">
<path d="M0 2a2 2 0 0 1 2-2h12a2 2 0 0 1 2 2v12a2 2 0 0 1-2 2H2a2 2 0 0 1-2-2zm4 9h8a.5.5 0 0 0 .374-.832l-4-4.5a.5.5 0 0 0-.748 0l-4 4.5A.5.5 0 0 0 4 11"/>
</svg>
</a>


<script src="./assets/bootstrap/js/bootstrap.bundle.min.js"></script>
<script src="./assets/js/script.js"></script>
Expand Down
50 changes: 50 additions & 0 deletions signin.html
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,50 @@
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Sign In | Gurukul Dream Foundation</title>
<link rel="stylesheet" href="auth.css">
</head>
<body>


<!-- Sign In Form -->
<div class="auth-container">
<h2>Sign In</h2>
<form id="signinForm">
<input type="email" id="email" placeholder="Email" required>
<div class="password-wrapper">
<input type="password" id="password" placeholder="Password" required>
<span class="toggle-password" onclick="togglePassword('password')">👁️</span>
</div>
<button type="submit" class="btn-primary">Sign In</button>
<p class="switch-link">Don't have an account? <a href="signup.html">Sign Up</a></p>
</form>
</div>


<script>
function togglePassword(id) {
let input = document.getElementById(id);
input.type = input.type === "password" ? "text" : "password";
}

document.getElementById("signinForm").addEventListener("submit", function(e){
e.preventDefault();
let email = document.getElementById("email").value;
let pass = document.getElementById("password").value;

let savedEmail = localStorage.getItem("userEmail");
let savedPass = localStorage.getItem("userPass");

if(email === savedEmail && pass === savedPass){
alert("✅ Sign In Successful!");
window.location.href = "index.html";
} else {
alert("❌ Account does not exist or wrong password!");
}
});
</script>
</body>
</html>
57 changes: 57 additions & 0 deletions signup.html
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,57 @@
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Sign Up | Gurukul Dream Foundation</title>
<link rel="stylesheet" href="auth.css">
</head>
<body>

<!-- Signup Form -->
<div class="auth-container">
<h2>Create Account</h2>
<form id="signupForm">
<input type="text" id="name" placeholder="Full Name" required>
<input type="email" id="email" placeholder="Email" required>
<div class="password-wrapper">
<input type="password" id="password" placeholder="Password" required>
<span class="toggle-password" onclick="togglePassword('password')">👁️</span>
</div>
<div class="password-wrapper">
<input type="password" id="confirmPassword" placeholder="Confirm Password" required>
<span class="toggle-password" onclick="togglePassword('confirmPassword')">👁️</span>
</div>
<button type="submit" class="btn-primary">Sign Up</button>
<p class="switch-link">Already have an account? <a href="signin.html">Sign In</a></p>
</form>
</div>



<script>
function togglePassword(id) {
let input = document.getElementById(id);
input.type = input.type === "password" ? "text" : "password";
}

document.getElementById("signupForm").addEventListener("submit", function(e){
e.preventDefault();
let name = document.getElementById("name").value;
let email = document.getElementById("email").value;
let pass = document.getElementById("password").value;
let confirmPass = document.getElementById("confirmPassword").value;

if(pass !== confirmPass){
alert("❌ Passwords do not match!");
return;
}

localStorage.setItem("userEmail", email);
localStorage.setItem("userPass", pass);
alert("✅ Account created successfully!");
window.location.href = "signin.html";
});
</script>
</body>
</html>
Loading