Hugging Face's logo

Spaces:
amaye15
/
AuthenticationApp
Running

App Files Community
amaye15 commited on
Commit
e3af7fd
·
1 Parent(s): e349c1a

Feat

Browse files
Files changed (3) hide show
  1. static/css/style.css +28 -3
  2. static/js/script.js +20 -0
  3. templates/index.html +1 -0
static/css/style.css CHANGED
@@ -1,5 +1,6 @@
1
- /* Modern UI styling for Auth App */
2
  :root {
 
3
  --primary: #4361ee;
4
  --primary-light: #4cc9f0;
5
  --primary-dark: #3a0ca3;
@@ -16,6 +17,24 @@
16
  --transition: all 0.3s ease;
17
  }
18
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
19
  * {
20
  box-sizing: border-box;
21
  margin: 0;
@@ -29,6 +48,7 @@
29
  background: linear-gradient(135deg, var(--bg-light), var(--bg-dark));
30
  min-height: 100vh;
31
  padding: 2rem;
 
32
  }
33
 
34
  .container {
@@ -248,9 +268,9 @@
248
  padding: 0.75rem;
249
  margin-bottom: 0.75rem;
250
  border-radius: var(--radius);
251
- background-color: white;
252
  border-left: 3px solid var(--primary-light);
253
- box-shadow: 0 2px 4px rgba(0, 0, 0, 0.05);
254
  animation: fadeIn 0.3s ease;
255
  }
256
 
@@ -280,6 +300,11 @@
280
  }
281
  }
282
 
 
 
 
 
 
283
  /* Responsive styles */
284
  @media (max-width: 768px) {
285
  body {
 
1
+ /* Modern UI styling for Auth App with automatic light/dark theme */
2
  :root {
3
+ /* Base colors (light theme) */
4
  --primary: #4361ee;
5
  --primary-light: #4cc9f0;
6
  --primary-dark: #3a0ca3;
 
17
  --transition: all 0.3s ease;
18
  }
19
 
20
+ /* Dark theme colors - will be applied when system prefers dark mode */
21
+ @media (prefers-color-scheme: dark) {
22
+ :root {
23
+ --primary: #5d7aff;
24
+ --primary-light: #70d6ff;
25
+ --primary-dark: #9b5de5;
26
+ --success: #56f2a3;
27
+ --danger: #ff6b6b;
28
+ --text: #e5e7eb;
29
+ --text-light: #9ca3af;
30
+ --bg-light: #111827;
31
+ --bg-dark: #0f172a;
32
+ --card-bg: #1f2937;
33
+ --card-border: #374151;
34
+ --shadow: rgba(0, 0, 0, 0.3);
35
+ }
36
+ }
37
+
38
  * {
39
  box-sizing: border-box;
40
  margin: 0;
 
48
  background: linear-gradient(135deg, var(--bg-light), var(--bg-dark));
49
  min-height: 100vh;
50
  padding: 2rem;
51
+ transition: background-color 0.5s ease, color 0.5s ease;
52
  }
53
 
54
  .container {
 
268
  padding: 0.75rem;
269
  margin-bottom: 0.75rem;
270
  border-radius: var(--radius);
271
+ background-color: var(--card-bg);
272
  border-left: 3px solid var(--primary-light);
273
+ box-shadow: 0 2px 4px var(--shadow);
274
  animation: fadeIn 0.3s ease;
275
  }
276
 
 
300
  }
301
  }
302
 
303
+ /* Theme transition */
304
+ * {
305
+ transition: background-color 0.3s ease, border-color 0.3s ease, box-shadow 0.3s ease;
306
+ }
307
+
308
  /* Responsive styles */
309
  @media (max-width: 768px) {
310
  body {
static/js/script.js CHANGED
@@ -14,6 +14,14 @@ const API_URL = '/api'; // Use relative path
14
 
15
  let webSocket = null;
16
  let authToken = localStorage.getItem('authToken'); // Load token on script start
 
 
 
 
 
 
 
 
17
 
18
  // --- UI Control ---
19
  function showSection(sectionId) {
@@ -231,6 +239,13 @@ async function handleRegister(email, password) {
231
  }
232
  }
233
 
 
 
 
 
 
 
 
234
  async function showWelcomePage() {
235
  if (!authToken) {
236
  showSection('login-section');
@@ -245,6 +260,11 @@ async function showWelcomePage() {
245
 
246
  // Add a welcome notification
247
  addNotification(`You are now logged in as ${user.email}`, 'success');
 
 
 
 
 
248
  } catch (error) {
249
  // If fetching user fails (e.g., invalid/expired token), logout
250
  console.error("Failed to fetch user details:", error);
 
14
 
15
  let webSocket = null;
16
  let authToken = localStorage.getItem('authToken'); // Load token on script start
17
+ let currentTheme = window.matchMedia('(prefers-color-scheme: dark)').matches ? 'dark' : 'light';
18
+
19
+ // Setup theme change listener
20
+ const themeMediaQuery = window.matchMedia('(prefers-color-scheme: dark)');
21
+ themeMediaQuery.addEventListener('change', e => {
22
+ currentTheme = e.matches ? 'dark' : 'light';
23
+ updateThemeNotification();
24
+ });
25
 
26
  // --- UI Control ---
27
  function showSection(sectionId) {
 
239
  }
240
  }
241
 
242
+ // Function to show current theme notification
243
+ function updateThemeNotification() {
244
+ if (welcomeSection.style.display !== 'none') {
245
+ addNotification(`Theme switched to ${currentTheme} mode based on your system settings`, 'info');
246
+ }
247
+ }
248
+
249
  async function showWelcomePage() {
250
  if (!authToken) {
251
  showSection('login-section');
 
260
 
261
  // Add a welcome notification
262
  addNotification(`You are now logged in as ${user.email}`, 'success');
263
+
264
+ // Add theme notification
265
+ setTimeout(() => {
266
+ addNotification(`Currently using ${currentTheme} theme based on your system settings`, 'info');
267
+ }, 1000);
268
  } catch (error) {
269
  // If fetching user fails (e.g., invalid/expired token), logout
270
  console.error("Failed to fetch user details:", error);
templates/index.html CHANGED
@@ -3,6 +3,7 @@
3
  <head>
4
  <meta charset="UTF-8">
5
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
 
6
  <title>Auth App</title>
7
  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0/css/all.min.css">
8
  <link rel="stylesheet" href="/static/css/style.css">
 
3
  <head>
4
  <meta charset="UTF-8">
5
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
6
+ <meta name="color-scheme" content="light dark">
7
  <title>Auth App</title>
8
  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0/css/all.min.css">
9
  <link rel="stylesheet" href="/static/css/style.css">