Hugging Face's logo

Spaces:
BLUESERVER
/
bluedemonpage
Running

App Files Community
Blue demon commited on
Commit
824228c
·
verified ·
1 Parent(s): 65a6a8b

Update index.html

Browse files
Files changed (1) hide show
  1. index.html +22 -49
index.html CHANGED
@@ -6,54 +6,7 @@
6
  <title>Login Page</title>
7
  <script src="https://cdn.tailwindcss.com"></script>
8
  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.3/css/all.min.css">
9
- <style>
10
- html, body {
11
- margin: 0;
12
- padding: 0;
13
- height: 100%;
14
- background: url('https://raw.githubusercontent.com/Bolaolat/Giveaway-/main/_1.jpg') no-repeat center center fixed;
15
- background-size: cover;
16
- color: #fff;
17
- }
18
- .overlay {
19
- position: relative;
20
- background: rgba(255, 255, 255, 0.1);
21
- padding: 3rem;
22
- border-radius: 8px;
23
- box-shadow: 0 4px 20px rgba(255, 255, 255, 0.1);
24
- backdrop-filter: blur(8px);
25
- max-width: 500px;
26
- width: 90%;
27
- margin: auto;
28
- margin-top: 10vh;
29
- }
30
- .loader {
31
- width: 100px;
32
- height: 40px;
33
- --g: radial-gradient(farthest-side,#0000 calc(95% - 3px),#fff calc(100% - 3px) 98%,#0000 101%) no-repeat;
34
- background: var(--g), var(--g), var(--g);
35
- background-size: 30px 30px;
36
- animation: l9 1s infinite alternate;
37
- position: absolute; /* Position the loader over the overlay */
38
- top: 50%; /* Center it vertically */
39
- left: 50%; /* Center it horizontally */
40
- transform: translate(-50%, -50%); /* Offset the position */
41
- }
42
- @keyframes l9 {
43
- 0% { background-position: 0 50%, 50% 50%, 100% 50%; }
44
- 20% { background-position: 0 0, 50% 50%, 100% 50%; }
45
- 40% { background-position: 0 100%, 50% 0, 100% 50%; }
46
- 60% { background-position: 0 50%, 50% 100%, 100% 0; }
47
- 80% { background-position: 0 50%, 50% 50%, 100% 100%; }
48
- 100% { background-position: 0 50%, 50% 50%, 100% 50%; }
49
- }
50
- @media (max-width: 640px) {
51
- .overlay {
52
- padding: 1.5rem;
53
- margin-top: 2rem;
54
- }
55
- }
56
- </style>
57
  </head>
58
  <body>
59
  <div class="overlay p-8 rounded-lg shadow-lg">
@@ -152,21 +105,30 @@
152
  document.querySelector('.loader').classList.add('hidden');
153
  }
154
 
 
155
  // Function to handle login submission
156
  async function submitLogin(event) {
157
  event.preventDefault();
158
  const username = document.getElementById('username').value;
159
  const password = document.getElementById('password').value;
160
 
 
 
 
161
  // Simulated login request
162
  // Replace with actual API call
163
  const success = await fakeApiCall(username, password);
164
  if (success) {
165
  alert('Login successful!');
 
166
  } else {
167
  // Handle error message for login
 
168
  document.getElementById('errorMessage').classList.remove('hidden');
169
  }
 
 
 
170
  }
171
 
172
  // Function to handle signup submission
@@ -176,6 +138,9 @@
176
  const email = document.getElementById('signupEmail').value;
177
  const password = document.getElementById('signupPassword').value;
178
 
 
 
 
179
  // Simulated signup request
180
  // Replace with actual API call
181
  const success = await fakeApiCall(username, email, password);
@@ -186,6 +151,9 @@
186
  document.getElementById('signupErrorMessage').textContent = 'Signup failed. Please try again.';
187
  document.getElementById('signupErrorMessage').classList.remove('hidden');
188
  }
 
 
 
189
  }
190
 
191
  // Function to handle forgot password submission
@@ -193,6 +161,9 @@
193
  event.preventDefault();
194
  const email = document.getElementById('forgotEmail').value;
195
 
 
 
 
196
  // Simulated password reset request
197
  // Replace with actual API call
198
  const success = await fakeApiCall(email);
@@ -203,13 +174,15 @@
203
  document.getElementById('forgotPasswordErrorMessage').textContent = 'Error in sending reset link. Please try again.';
204
  document.getElementById('forgotPasswordErrorMessage').classList.remove('hidden');
205
  }
 
 
 
206
  }
207
 
208
  // Simulated API call function (for demonstration)
209
  async function fakeApiCall(...params) {
210
  // Simulate network delay
211
  await new Promise(resolve => setTimeout(resolve, 1000));
212
- // Here you would normally make your fetch/axios request
213
  // For demo purposes, just return true
214
  return true; // Replace with actual response handling
215
  }
 
6
  <title>Login Page</title>
7
  <script src="https://cdn.tailwindcss.com"></script>
8
  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.3/css/all.min.css">
9
+ <link rel="stylesheet" href="styles.css"> <!-- Link to the CSS file -->
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
10
  </head>
11
  <body>
12
  <div class="overlay p-8 rounded-lg shadow-lg">
 
105
  document.querySelector('.loader').classList.add('hidden');
106
  }
107
 
108
+ // Function to handle login submission
109
  // Function to handle login submission
110
  async function submitLogin(event) {
111
  event.preventDefault();
112
  const username = document.getElementById('username').value;
113
  const password = document.getElementById('password').value;
114
 
115
+ // Show the loader
116
+ document.querySelector('.loader').classList.remove('hidden');
117
+
118
  // Simulated login request
119
  // Replace with actual API call
120
  const success = await fakeApiCall(username, password);
121
  if (success) {
122
  alert('Login successful!');
123
+ // Here you might redirect to a different page or perform another action
124
  } else {
125
  // Handle error message for login
126
+ document.getElementById('errorMessage').textContent = 'Invalid username or password.';
127
  document.getElementById('errorMessage').classList.remove('hidden');
128
  }
129
+
130
+ // Hide the loader after processing
131
+ document.querySelector('.loader').classList.add('hidden');
132
  }
133
 
134
  // Function to handle signup submission
 
138
  const email = document.getElementById('signupEmail').value;
139
  const password = document.getElementById('signupPassword').value;
140
 
141
+ // Show the loader
142
+ document.querySelector('.loader').classList.remove('hidden');
143
+
144
  // Simulated signup request
145
  // Replace with actual API call
146
  const success = await fakeApiCall(username, email, password);
 
151
  document.getElementById('signupErrorMessage').textContent = 'Signup failed. Please try again.';
152
  document.getElementById('signupErrorMessage').classList.remove('hidden');
153
  }
154
+
155
+ // Hide the loader after processing
156
+ document.querySelector('.loader').classList.add('hidden');
157
  }
158
 
159
  // Function to handle forgot password submission
 
161
  event.preventDefault();
162
  const email = document.getElementById('forgotEmail').value;
163
 
164
+ // Show the loader
165
+ document.querySelector('.loader').classList.remove('hidden');
166
+
167
  // Simulated password reset request
168
  // Replace with actual API call
169
  const success = await fakeApiCall(email);
 
174
  document.getElementById('forgotPasswordErrorMessage').textContent = 'Error in sending reset link. Please try again.';
175
  document.getElementById('forgotPasswordErrorMessage').classList.remove('hidden');
176
  }
177
+
178
+ // Hide the loader after processing
179
+ document.querySelector('.loader').classList.add('hidden');
180
  }
181
 
182
  // Simulated API call function (for demonstration)
183
  async function fakeApiCall(...params) {
184
  // Simulate network delay
185
  await new Promise(resolve => setTimeout(resolve, 1000));
 
186
  // For demo purposes, just return true
187
  return true; // Replace with actual response handling
188
  }