Skip to content

Commit 2abd124

Browse files
lakshay776lakshay776
authored
Add files via upload
1 parent 8b93661 commit 2abd124

File tree

5 files changed

+700
-0
lines changed

5 files changed

+700
-0
lines changed

‎auth.js‎

Lines changed: 76 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,76 @@
1+
// Import Firebase modules
2+
import { initializeApp } from "https://www.gstatic.com/firebasejs/11.1.0/firebase-app.js";
3+
import { getAuth, createUserWithEmailAndPassword, signInWithEmailAndPassword } from "https://www.gstatic.com/firebasejs/11.1.0/firebase-auth.js";
4+
5+
// Firebase configuration
6+
const firebaseConfig = {
7+
apiKey: "AIzaSyAmIDOyfbskhVn7P2TCR1WwGYjRMnVTP54",
8+
authDomain: "trainx-36cfe.firebaseapp.com",
9+
projectId: "trainx-36cfe",
10+
storageBucket: "trainx-36cfe.firebasestorage.app",
11+
messagingSenderId: "460236361989",
12+
appId: "1:460236361989:web:a9208a9a5cfc58a91be76c",
13+
measurementId: "G-75LWWKV7RG"
14+
};
15+
16+
// Initialize Firebase
17+
const app = initializeApp(firebaseConfig);
18+
const auth = getAuth(app);
19+
20+
// Select UI elements
21+
let create_acc = document.querySelector("#create_acc");
22+
let have_acc = document.querySelector("#have_acc");
23+
let sign_up = document.querySelector("#signup");
24+
let log_in = document.querySelector("#login");
25+
26+
// Toggle between login and signup forms
27+
create_acc.addEventListener("click", (e) => {
28+
e.preventDefault();
29+
sign_up.style.display = "grid";
30+
log_in.style.display = "none";
31+
});
32+
33+
have_acc.addEventListener("click", () => {
34+
sign_up.style.display = "none";
35+
log_in.style.display = "grid";
36+
});
37+
38+
// Sign-up function
39+
const signUp = (e) => {
40+
e.preventDefault();
41+
const email = document.querySelector("#email_signup").value;
42+
const password = document.querySelector("#password_signup").value;
43+
44+
createUserWithEmailAndPassword(auth, email, password)
45+
.then((userCredential) => {
46+
console.log("User Registered:", userCredential.user);
47+
alert("Sign-up successful!");
48+
window.location.href = "train.html"; // Redirect after sign-up
49+
})
50+
.catch((error) => {
51+
console.error("Error:", error.message);
52+
alert(error.message);
53+
});
54+
};
55+
56+
// Login function
57+
const login = (e) => {
58+
e.preventDefault();
59+
const email = document.querySelector("#email_login").value;
60+
const password = document.querySelector("#password_login").value;
61+
62+
signInWithEmailAndPassword(auth, email, password)
63+
.then((userCredential) => {
64+
console.log("User Logged In:", userCredential.user);
65+
alert("Login successful!");
66+
window.location.href = "train.html"; // Redirect after login
67+
})
68+
.catch((error) => {
69+
console.error("Error:", error.message);
70+
alert(error.message);
71+
});
72+
};
73+
74+
// Attach event listeners to buttons
75+
document.querySelector("#signup button").addEventListener("click", signUp);
76+
document.querySelector("#login button").addEventListener("click", login);

‎index.html‎

Lines changed: 104 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,104 @@
1+
<!DOCTYPE html>
2+
<html lang="en">
3+
<head>
4+
<meta charset="UTF-8">
5+
<meta name="viewport" content="width=device-width, initial-scale=1.0">
6+
<title>TrainX - Login / Signup</title>
7+
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/css/bootstrap.min.css" rel="stylesheet">
8+
<script defer src="auth.js" type="module"></script>
9+
<style>
10+
body {
11+
display: grid;
12+
justify-content: center;
13+
align-items: center;
14+
height: 600px;
15+
background: url('https://img.freepik.com/premium-vector/vector-black-grid-line-background_29977-18.jpg') repeat center center/cover;
16+
background-size: cover;
17+
}
18+
19+
h1 , h2{
20+
text-align: center;
21+
color: #d1d1d1;
22+
}
23+
24+
#login {
25+
display: flex;
26+
border: solid #3b8d59 3px;
27+
background-color: rgba(34, 34, 34, 0.9);
28+
border-radius: 5px;
29+
justify-content: center;
30+
width: 300px;
31+
height: 330px;
32+
padding: 20px;
33+
box-sizing: border-box;
34+
color: #d1d1d1;
35+
}
36+
37+
.acc_loop {
38+
display: grid;
39+
justify-content: center;
40+
gap: 10px;
41+
margin:10px;
42+
}
43+
44+
#signup {
45+
display: none;
46+
border: solid #3b8d59 3px;
47+
background-color: rgba(34, 34, 34, 0.9);
48+
border-radius: 5px;
49+
justify-content: center;
50+
width: 300px;
51+
height: 330px;
52+
padding: 20px;
53+
box-sizing: border-box;
54+
color: #d1d1d1;
55+
}
56+
57+
.X {
58+
color: #3b8d59;
59+
font: 45px sans-serif;
60+
}
61+
62+
</style>
63+
</head>
64+
<body>
65+
<h1>Train<span class="X">X</span></h1>
66+
<h2>Your <span class="X">Gym</span> Buddy </h2>
67+
68+
<div id="login">
69+
<form>
70+
<div class="form-group">
71+
<label for="exampleInputEmail1">Email address</label>
72+
<input type="email" class="form-control" id="email_login" aria-describedby="emailHelp">
73+
<small id="emailHelp" class="form-text text-muted">We'll never share your email with anyone else.</small>
74+
</div>
75+
<div class="form-group">
76+
<label for="exampleInputPassword1">Password</label>
77+
<input type="password" class="form-control" id="password_login">
78+
</div>
79+
<div class="acc_loop">
80+
<button type="submit" class="btn btn-success" onclick="login()">Login</button>
81+
<button type="submit" class="btn btn-success" id="create_acc">Create new acount</button>
82+
</div>
83+
</form>
84+
</div>
85+
<div id="signup">
86+
<form>
87+
<div class="form-group">
88+
<label for="exampleInputEmail1">Email address</label>
89+
<input type="email" class="form-control" id="email_signup" aria-describedby="emailHelp">
90+
<small id="emailHelp" class="form-text text-muted">We'll never share your email with anyone else.</small>
91+
</div>
92+
<div class="form-group">
93+
<label for="exampleInputPassword1">Password</label>
94+
<input type="password" class="form-control" id="password_signup">
95+
</div>
96+
<div class="acc_loop">
97+
<button type="submit" class="btn btn-warning" onclick="signUp()">Sign Up</button>
98+
<button type="submit" class="btn btn-warning" id="have_acc">Already have an account?</button>
99+
</div>
100+
</form>
101+
</div>
102+
</div>
103+
</body>
104+
</html>

‎train.css‎

Lines changed: 151 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,151 @@
1+
2+
body {
3+
background: linear-gradient(135deg, #1b1b1b, #2d2d2d);
4+
font-family: 'Poppins', sans-serif;
5+
color: #f8f9fa;
6+
margin: 0;
7+
padding: 0;
8+
align-items: center;
9+
justify-content: center;
10+
background-image: url("https://img.freepik.com/premium-vector/vector-black-grid-line-background_29977-18.jpg");
11+
12+
}
13+
14+
15+
16+
17+
#notnav {
18+
display: flex;
19+
flex-wrap: wrap;
20+
justify-content: space-between;
21+
justify-content: center;
22+
gap: 25px;
23+
max-width: 1200px;
24+
margin: 60px;
25+
}
26+
27+
28+
#train {
29+
margin: 20px 0 0 0;
30+
display: none;
31+
flex-direction: column;
32+
align-items: center;
33+
gap: 15px;
34+
}
35+
36+
.parent_new_session,
37+
#train {
38+
background: rgba(50, 50, 50, 0.6);
39+
backdrop-filter: blur(10px);
40+
border-radius: 15px;
41+
padding: 25px;
42+
box-shadow: 0 4px 20px rgba(0, 0, 0, 0.4);
43+
text-align: center;
44+
width: 90%;
45+
max-width: 700px;
46+
}
47+
48+
#workout-container {
49+
display: flex;
50+
justify-content: center;
51+
gap: 20px;
52+
max-width: 1200px;
53+
margin-top: 20px;
54+
flex-wrap: wrap;
55+
}
56+
57+
58+
#today {
59+
flex: 1;
60+
min-width: 350px;
61+
background: rgba(50, 50, 50, 0.8);
62+
padding: 25px;
63+
border-radius: 15px;
64+
box-shadow: 0 4px 15px rgba(0, 0, 0, 0.3);
65+
text-align: center;
66+
height:fit-content;
67+
}
68+
69+
70+
#historic {
71+
flex: 1;
72+
min-width: 350px;
73+
background: rgba(50, 50, 50, 0.8);
74+
padding: 25px;
75+
border-radius: 15px;
76+
box-shadow: 0 4px 15px rgba(0, 0, 0, 0.3);
77+
text-align: center;
78+
79+
height:fit-content;
80+
}
81+
82+
83+
#types,
84+
#sets,
85+
#reps,
86+
#weights,
87+
#musclegroup,
88+
#dateInput {
89+
background: rgba(80, 80, 80, 0.8);
90+
border: none;
91+
border-radius: 12px;
92+
color: white;
93+
font-size: 16px;
94+
padding: 12px;
95+
outline: none;
96+
text-align: center;
97+
width: 100%;
98+
transition: all 0.3s ease-in-out;
99+
}
100+
101+
#log,
102+
#fetchWorkouts {
103+
width: 150px;
104+
height: 50px;
105+
border-radius: 25px;
106+
background: linear-gradient(135deg, #1fa851, #0e7c36);
107+
border: none;
108+
color: white;
109+
font-weight: bold;
110+
cursor: pointer;
111+
transition: all 0.3s ease-in-out;
112+
margin:10px;
113+
}
114+
115+
#log:hover,
116+
#fetchWorkouts:hover {
117+
transform: scale(1.05);
118+
box-shadow: 0 8px 15px rgba(0, 0, 0, 0.4);
119+
}
120+
121+
122+
#dailyStreak {
123+
position: absolute;
124+
right: 20px;
125+
width: 200px;
126+
height: 45px;
127+
display: flex;
128+
align-items: center;
129+
justify-content: center;
130+
border-radius: 15px;
131+
background: linear-gradient(135deg, #3b8d59, #2a6b42);
132+
box-shadow: 0px 4px 12px rgba(0, 0, 0, 0.3);
133+
font-size: 20px;
134+
font-weight: bold;
135+
color: yellowgreen;
136+
}
137+
138+
.log-entry {
139+
background: rgba(80, 80, 80, 0.8);
140+
padding: 15px;
141+
border-radius: 10px;
142+
border-left: 5px solid #4CAF50;
143+
box-shadow: 0px 3px 10px rgba(0, 0, 0, 0.3);
144+
color: white;
145+
width: 90%;
146+
margin: 20px;
147+
}
148+
.X {
149+
color: #3b8d59;
150+
font: 45px sans-serif;
151+
}

0 commit comments

Comments
 (0)