-
Notifications
You must be signed in to change notification settings - Fork 0
/
Copy pathsignup.html
141 lines (130 loc) · 6.25 KB
/
signup.html
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Sign up - Digiphysio</title>
<!-- font awesome icons -->
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.1.1/css/all.min.css" integrity="sha512-KfkfwYDsLkIlwQp6LFnl8zNdLGxu9YAA1QvwINks4PhcElQSvqcyVLLD9aMhXd13uQjoXtEKNosOWaZqXgel0g==" crossorigin="anonymous" referrerpolicy="no-referrer" />
<!-- css stylesheet -->
<link rel="stylesheet" href="signup.css">
<link rel="shortcut icon" href="assets/asset 0.png" type="image/x-icon">
</head>
<body>
<div class="container" id="container">
<div class="form-container sign-up-container">
<form id="register-form">
<h1>Create Account</h1>
<div class="social-container">
<a href="#" class="social"><i class="fab fa-facebook-f"></i></a>
<a href="#" class="social"><i class="fab fa-google-plus-g"></i></a>
<a href="#" class="social"><i class="fab fa-linkedin-in"></i></a>
</div>
<span>or use your email for registration</span>
<div class="infield">
<input type="text" placeholder="Name" />
<label></label>
</div>
<div class="infield">
<input id="register-email" type="email" placeholder="Email" name="email"/>
<label></label>
</div>
<div class="infield">
<input id="register-password" type="password" placeholder="Password" />
<label></label>
</div>
<button type="submit">Sign Up</button>
</form>
</div>
<div class="form-container sign-in-container">
<form id="login-form">
<h1>Sign in</h1>
<div class="social-container">
<a href="#" class="social"><i class="fab fa-facebook-f"></i></a>
<a href="#" class="social"><i class="fab fa-google-plus-g"></i></a>
<a href="#" class="social"><i class="fab fa-linkedin-in"></i></a>
</div>
<span>or use your account</span>
<div class="infield">
<input id="login-email" type="email" placeholder="Email" name="email"/>
<label></label>
</div>
<div class="infield">
<input id="login-password" type="password" placeholder="Password" />
<label></label>
</div>
<a href="#" class="forgot">Forgot your password?</a>
<button type="submit">Sign In</button>
</form>
</div>
<div class="overlay-container" id="overlayCon">
<div class="overlay">
<div class="overlay-panel overlay-left">
<h1>Welcome Back!</h1>
<p>To keep connected with us please login with your personal info</p>
<button id="sign-in-btn">Sign In</button>
</div>
<div class="overlay-panel overlay-right">
<h1>Hello, Friend!</h1>
<p>Enter your personal details and start journey with us</p>
<button id="sign-up-btn">Sign Up</button>
</div>
</div>
<button id="overlayBtn"></button>
</div>
</div>
<!-- js code -->
<script>
const container = document.getElementById('container');
const overlayCon = document.getElementById('overlayCon');
const overlayBtn = document.getElementById('overlayBtn');
overlayBtn.addEventListener('click', () =>{
container.classList.toggle('right-panel-active');
overlayBtn.classList.remove('btnScaled');
window.requestAnimationFrame(() => {
overlayBtn.classList.add('btnScaled');
});
});
// Handle form submissions
document.getElementById('login-form').addEventListener('submit', function(event) {
event.preventDefault();
// Here you would normally handle the login (e.g., validate credentials, call API)
// For this example, we'll just redirect to profile.html
window.location.href = 'profile.html';
});
document.getElementById('register-form').addEventListener('submit', function(event) {
event.preventDefault();
// Here you would normally handle the registration (e.g., validate inputs, call API)
// For this example, we'll just alert success
alert('Registration successful! Please sign in.');
});
// Handle button clicks to switch between sign-in and sign-up
document.getElementById('sign-in-btn').addEventListener('click', () => {
container.classList.remove('right-panel-active');
});
document.getElementById('sign-up-btn').addEventListener('click', () => {
container.classList.add('right-panel-active');
});
document.getElementById('login-form').addEventListener('submit', function(event) {
event.preventDefault();
const email = document.getElementById('login-email').value;
const password = document.getElementById('login-password').value;
if (email && password) {
const name = email.split('@')[0]; // Extract name from email
const streak = Math.floor(Math.random() * 10) + 1; // Random streak between 1 and 10 days
const progress = Math.floor(Math.random() * 100) + 1; // Random progress between 1% and 100%
// Store data in local storage
localStorage.setItem('userName', name);
localStorage.setItem('userEmail', email);
localStorage.setItem('userStreak', streak);
localStorage.setItem('userProgress', progress);
// Redirect to profile page
window.location.href = 'profile.html';
} else {
alert('Please enter both email and password.');
}
});
</script>
</body>
</html>