· 9 months ago · Mar 06, 2025, 03:30 AM
1<!DOCTYPE html>
2<html>
3<head>
4 <title>DRIPOLOGY</title>
5 <link rel="icon" href="img/logo.png">
6 <link rel="stylesheet" href="login.css">
7 <link rel="preconnect" href="https://fonts.googleapis.com">
8 <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
9 <link href="https://fonts.googleapis.com/css2?family=Cairo+Play:wght@200..1000&family=Orbitron:wght@400..900&family=Prompt: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">
10 <style>
11 /* Alert styles */
12 .alert-message {
13 padding: 15px;
14 margin-bottom: 20px;
15 border-radius: 4px;
16 display: none;
17 text-align: center;
18 font-weight: bold;
19 }
20 .alert-success {
21 background-color: #d4edda;
22 color: #155724;
23 border: 1px solid #c3e6cb;
24 }
25 .alert-error {
26 background-color: #f8d7da;
27 color: #721c24;
28 border: 1px solid #f5c6cb;
29 }
30 </style>
31</head>
32<body class="bod" style="margin:0;">
33<nav class="navbar">
34 <a class="dripology">DRIPOLOGY CLOTHING</a>
35 <a href="business.html" class="home">Home</a>
36 <a href="shop.html" class="shop">Shop</a>
37 <a href="about.html" class="aboutus">About Us</a>
38 <a class="logi" style="padding-bottom: 30px;">Log In</a>
39</nav>
40<div class="container" id="container">
41 <div class="form-container sign-up-container">
42 <form id="signup-form">
43 <h1 style="margin-bottom: 60px;">Create Account</h1>
44 <div id="signup-alert" class="alert-message"></div>
45 <input type="text" name="pname" id="pname" placeholder="Name" />
46 <input type="email" name="email" id="email" placeholder="Email" />
47 <input type="password" name="password" id="password" placeholder="Password" style="margin-bottom: 30px;" />
48 <button type="submit">Sign Up</button>
49 </form>
50 </div>
51 <div class="form-container sign-in-container">
52 <form id="signin-form">
53 <h1 style="margin-bottom: 60px;">Sign in</h1>
54 <div id="signin-alert" class="alert-message"></div>
55 <input type="email" name="email" id="signin-email" placeholder="Email" />
56 <input type="password" name="password" id="signin-password" placeholder="Password" />
57 <a href="#" style="margin-bottom: 30px;">Forgot your password?</a>
58 <button type="submit">Sign In</button>
59 </form>
60 </div>
61 <div class="overlay-container">
62 <div class="overlay">
63 <div class="overlay-panel overlay-left">
64 <video autoplay loop muted src="img/ss.mp4" style="width: 100%; height:auto; position: absolute;"></video>
65 <button style="position: relative;" class="ghost" id="signInBtn">Sign In</button>
66 </div>
67 <div class="overlay-panel overlay-right">
68 <video autoplay loop muted src="img/ss.mp4" style="width: 100%; height:auto; position: absolute;"></video>
69 <button style="position: relative;" class="ghost" id="signUpBtn">Sign Up</button>
70 </div>
71 </div>
72 </div>
73</div>
74
75<script>
76 // UI Animation and Panel Switching
77 const signInContainer = document.querySelector('.sign-in-container');
78 const signUpContainer = document.querySelector('.sign-up-container');
79 const signInBtn = document.getElementById('signInBtn');
80 const signUpBtn = document.getElementById('signUpBtn');
81 const container = document.getElementById('container');
82
83 signUpBtn.addEventListener('click', () => {
84 signInContainer.style.display = 'none';
85 signUpContainer.style.display = 'block';
86 container.classList.add("right-panel-active");
87 });
88
89 signInBtn.addEventListener('click', () => {
90 signUpContainer.style.display = 'none';
91 signInContainer.style.display = 'block';
92 container.classList.remove("right-panel-active");
93 });
94
95 // Function to show alert messages
96 function showAlert(elementId, message, isSuccess) {
97 const alertElement = document.getElementById(elementId);
98 alertElement.textContent = message;
99 alertElement.className = isSuccess ?
100 'alert-message alert-success' :
101 'alert-message alert-error';
102 alertElement.style.display = 'block';
103
104 // Hide alert after 3 seconds
105 setTimeout(() => {
106 alertElement.style.display = 'none';
107 }, 3000);
108 }
109
110 // Sign Up Form AJAX
111 document.getElementById('signup-form').addEventListener('submit', function(e) {
112 e.preventDefault();
113
114 const formData = new FormData();
115 formData.append('pname', document.getElementById('pname').value);
116 formData.append('email', document.getElementById('email').value);
117 formData.append('password', document.getElementById('password').value);
118 formData.append('signup', 'true');
119
120 fetch('register.php', {
121 method: 'POST',
122 body: formData
123 })
124 .then(response => response.text())
125 .then(data => {
126 try {
127 const result = JSON.parse(data);
128 if (result.success) {
129 showAlert('signup-alert', 'Registration successful!', true);
130 document.getElementById('signup-form').reset();
131
132 // Switch to login panel after successful registration
133 setTimeout(() => {
134 signInBtn.click();
135 }, 2000);
136 } else {
137 showAlert('signup-alert', result.message, false);
138 }
139 } catch (e) {
140 showAlert('signup-alert', 'An error occurred. Please try again.', false);
141 console.error('Error parsing JSON:', data);
142 }
143 })
144 .catch(error => {
145 showAlert('signup-alert', 'Server error. Please try again later.', false);
146 console.error('Error:', error);
147 });
148 });
149
150 // Sign In Form AJAX
151 document.getElementById('signin-form').addEventListener('submit', function(e) {
152 e.preventDefault();
153
154 const formData = new FormData();
155 formData.append('email', document.getElementById('signin-email').value);
156 formData.append('password', document.getElementById('signin-password').value);
157 formData.append('signin', 'true');
158
159 fetch('register.php', {
160 method: 'POST',
161 body: formData
162 })
163 .then(response => response.text())
164 .then(data => {
165 try {
166 const result = JSON.parse(data);
167 if (result.success) {
168 showAlert('signin-alert', 'Login successful! Redirecting...', true);
169
170 // Redirect after successful login
171 setTimeout(() => {
172 window.location.href = 'HomeL.php';
173 }, 1500);
174 } else {
175 showAlert('signin-alert', result.message, false);
176 }
177 } catch (e) {
178 showAlert('signin-alert', 'An error occurred. Please try again.', false);
179 console.error('Error parsing JSON:', data);
180 }
181 })
182 .catch(error => {
183 showAlert('signin-alert', 'Server error. Please try again later.', false);
184 console.error('Error:', error);
185 });
186 });
187</script>
188</body>
189</html>