Skip to content

Commit

Permalink
signin functionality
Browse files Browse the repository at this point in the history
  • Loading branch information
@alurubalakarthikeya
alurubalakarthikeya committed Aug 5, 2024
1 parent 2993bec commit 834ab39
Show file tree
Hide file tree
Showing 3 changed files with 80 additions and 106 deletions.
11 changes: 7 additions & 4 deletions index.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -51,7 +51,7 @@
<!--Sun and Moon containers-->
<!--Home Page Starts-->
<div id="hero" class="hero">
<div class="hero-content fadeInUp-animation">
<div id="hero-content" class="hero-content fadeInUp-animation">
<h2 class="hehe fadeInUp-animation">Where Learning is <span>made practical</span></h2>
<ul class="icons ">
<li>
Expand All @@ -67,8 +67,8 @@ <h2 class="hehe fadeInUp-animation">Where Learning is <span>made practical</span
<a class="icon" href="https://www.facebook.com/" target="_blank"><i class="fa-brands fa-facebook"></i></a>
</li>
</ul><br>
<button class="sign-in">Sign in</button>
<p>no account? <a href="">Sign up</a></p>
<button class="sign-in" onclick="signIn()">Sign in</button>
<p>no account? <a onclick="signUp()">Sign up</a></p>
</div>
<!--Cloud resource-->
<div class="floating-clouds">
Expand Down Expand Up @@ -119,6 +119,8 @@ <h2 class="heading">Our Courses</h2><br>
<div class="box fade-in-right-target"></div>
<div class="box fade-in-left-target"></div>
<div class="box fade-in-right-target"></div>
<div class="box fade-in-left-target"></div>
<div class="box fade-in-right-target"></div>
</div>
<!--Course list section Ends-->
<!--Contact Us section starts-->
Expand Down Expand Up @@ -150,4 +152,5 @@ <h2 class="heading">Contact Us</h2>
<div class="sky"></div>
<div class="stars"></div>
<!--classes for special effect at night -->
<script src="script.js"></script>
<script src="script.js"></script>

49 changes: 40 additions & 9 deletions script.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -2,7 +2,7 @@ document.addEventListener('DOMContentLoaded', () => {
const menuIcon = document.getElementById('menu-icon');
const menuItems = document.getElementById('menu-items');
const bodyElement = document.getElementById('body');

/*Function for Day-Night Mode*/
function toggleMode() {
const body = document.body;
const sun = document.getElementById("sun");
Expand All @@ -20,10 +20,10 @@ document.addEventListener('DOMContentLoaded', () => {
moon.style.display = "block";
}
}

document.getElementById("sun").addEventListener("click", toggleMode);
document.getElementById("moon").addEventListener("click", toggleMode);

/*Function for Day-Night Mode*/
/*Function for Menu bar*/
menuIcon.addEventListener('click', (event) => {
event.stopPropagation();
menuItems.classList.toggle('active');
Expand All @@ -38,30 +38,28 @@ document.getElementById("moon").addEventListener("click", toggleMode);
menuItems.addEventListener('click', (event) => {
event.stopPropagation();
});

/*Function for Menu bar*/
/*Function for Cursor*/
const cursorDot = document.querySelector("[data-cursor-dot]");
const cursorOutline = document.querySelector("[data-cursor-outline]");

window.addEventListener("mousemove", (e) => {
const posX = e.clientX;
const posY = e.clientY;

cursorDot.style.left = `${posX}px`;
cursorDot.style.top = `${posY}px`;

cursorOutline.style.left = `${posX}px`; // Adjust position to center outline around dot
cursorOutline.style.left = `${posX}px`;
cursorOutline.style.top = `${posY}px`;

cursorOutline.animate({
left: `${posX}px`,
top: `${posY}px`
}, { duration: 500, fill: "forwards" });
});

// Hide the default cursor
document.body.style.cursor = 'none';

});
/*Function for Cursor*/

document.addEventListener("DOMContentLoaded", function() {
gsap.registerPlugin(ScrollTrigger);
Expand Down Expand Up @@ -118,3 +116,36 @@ gsap.utils.toArray('.fade-in-right-target').forEach(el => {
});
});

function signIn() {
const heroContent = document.getElementById('hero-content');
heroContent.innerHTML = `
<h4><span>Sign</span>In</h4>
<form>
<label for="email">Email:</label>
<input type="email" id="email" name="email" required><br>
<label for="password">Password:</label>
<input type="password" id="password" name="password" required><br>
<button class="sign-in" type="submit">Sign In</button>
</form>
<p>Don't have an account? <a href="#" onclick="signUp()">Sign up</a></p>
`;
}

function signUp() {
const heroContent = document.getElementById('hero-content');
heroContent.innerHTML = `
<h4><span>Sign</span>Up</h4>
<form>
<label for="username">Username:</label>
<input type="text" id="username" name="username" required><br>
<label for="email">Email:</label>
<input type="email" id="email" name="email" required><br>
<label for="password">Password:</label>
<input type="password" id="password" name="password" required><br>
<button class="sign-in" type="submit">Sign Up</button>
</form>
<p>Already have an account? <a href="#" onclick="signIn()">Sign in</a></p>
`;
}


126 changes: 33 additions & 93 deletions styles.css
View file
Original file line number Diff line number Diff line change
@@ -1,8 +1,8 @@
/*Only Colors of the site*/
:root {
--main-white: #f0f0f0;
--main-black: #1e1c1c;
--main-blue: #a7d6dc;
--main-pink: #FFD1E3;
--main-dark: #00008B;
--main-green: #008000;
--night-sky: #2c3e50;
Expand All @@ -20,7 +20,6 @@ body {
font-family: "Anek Devanagari", sans-serif;
background-color: var(--main-white);
overflow-x: hidden;
transition: background-color 0.5s ease;
}

body.night {
Expand All @@ -33,7 +32,6 @@ body.day {

header {
position: sticky;
position: -webkit-sticky;
top: 0;
width: 100%;
display: flex;
Expand All @@ -42,17 +40,18 @@ header {
padding: 16px;
background-color: rgba(44,62,80,0.2);
border-bottom: 2px solid var(--main-white);
z-index: 100;
z-index: 10000;
}

body.day, body.night header {
position: sticky;
}

html, body {
overflow-x: hidden;
}

body > header {
position: sticky;
}

body.night header {
background-color: rgba(44,62,80,0.9);
top: 0;
Expand All @@ -61,6 +60,7 @@ body.night header {

body.day header {
background: rgba(167,214,220,0.75);
position: sticky;
top: 0;
}

Expand Down Expand Up @@ -217,21 +217,6 @@ body.day .hero-content > p {
z-index: 2;
}

@keyframes bg-dynamic {
0% {
background: linear-gradient(120deg, #3299cc, #333333) ;
}
50% {
background: linear-gradient(120deg, #1c5f81, #332b2b) ;
}
100% {
background: linear-gradient(120deg, #3bbeff, #292020) ;
}
150% {
background: linear-gradient(120deg, #1c5f81, #332b2b) ;
}
}

@keyframes float {
0% {
transform: translateX(-80%);
Expand All @@ -247,72 +232,6 @@ body.day .hero-content > p {
}
}

@keyframes fadeInUp {
from {
transform: translate3d(0, 40px, 0);
opacity: 0;
}
to {
transform: translate3d(0, 0, 0);
opacity: 1;
}
}


@keyframes fadeInLeft {
0% {
transform: translateX(-100%);
opacity: 0;
}
100% {
transform: translateX(0%);
opacity: 1;
filter: blur(0);
}
}

@keyframes fadeInRight {
0% {
transform: translateX(100%);
opacity: 0;
}
100% {
transform: translateX(0%);
opacity: 1;
filter: blur(0);
}
}

.fadeInUp-animation {
animation: 2s fadeInUp;
}

.fadeInLeft-animation {
animation: 2s fadeInLeft;
}

.fadeInRight-animation {
animation: 2s fadeInRight;
}

/* No need for custom keyframes with GSAP */
.fade-in-up-target,
.fade-in-left-target,
.fade-in-right-target {
opacity: 0; /* Start hidden */
}

/* Optional: Set initial position */
.fade-in-up-target {
transform: translateY(100%);
}
.fade-in-left-target {
transform: translateX(-100%);
}
.fade-in-right-target {
transform: translateX(100%);
}



.sun-moon-container {
Expand Down Expand Up @@ -421,13 +340,14 @@ body.day .hehe > span {

header {
padding: 12px;
position: sticky;
}
}

@media (max-width: 700px) {
body.night nav ul {
display: none;
background-color: rgba(44,62,80,0.9);
background-color: var(--night-sky);
text-align: center;
color: var(--night-sky);
border-radius: 20px;
Expand Down Expand Up @@ -509,6 +429,7 @@ body.day .hehe > span {

header {
padding: 14px;
position: sticky;
}
}

Expand Down Expand Up @@ -745,24 +666,22 @@ body.day .button-courses:hover {

.about > img {
position: relative;
overflow-y: auto;
float: right;
}

.games > img {
position: relative;
overflow-y: auto;
float: right;
}

.courses > img {
position: relative;
overflow-y: auto;
float: right;
}

.games {
animation: bg-dynamic 5s infinite linear;
animation: bg-dynamic 5s infinite;
animation-timing-function: ease-in-out;
border-top: 3px solid var(--moon-color);
color: var(--moon-color);
margin: 0;
Expand Down Expand Up @@ -876,6 +795,7 @@ a:visited {
border-radius: 15px ;
}


.box:hover {
opacity: 0.8;
}
Expand Down Expand Up @@ -947,3 +867,23 @@ body.day .sign-in:hover {
position: relative;
left: 50%;
}

label {
font-size: 2vh;
margin: 0;
}

.hero-content form label {
margin: 5px 0;
align-items: flex-start;
text-align: justify;
}

.hero-content form input {
width: 100%;
padding: 10px;
border-radius: 10px;
border: 1px solid var(--main-green);
}


0 comments on commit 834ab39

Please sign in to comment.