add initial project files and setup for Vue with Tailwind CSS and authentication

2025-03-16 13:00:03 +04:00 · 2025-03-16 13:00:03 +04:00 · fd65043a0e
commit fd65043a0e
parent 2f1ceec405
29 changed files with 2682 additions and 0 deletions
--- a/callback.html
+++ b/callback.html
@ -0,0 +1,92 @@
+<!DOCTYPE html>
+<html>
+<head>
+    <title>Authentication Callback</title>
+    <script type="module" src="/src/scripts/callback.ts"></script>
+    <style>
+        body, html {
+            height: 100%;
+            width: 100%;
+            margin: 0;
+            padding: 0;
+            font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif;
+            background-color: #f9fafb;
+            color: #4b5563;
+            display: flex;
+            justify-content: center;
+            align-items: center;
+            flex-direction: column;
+            overflow: hidden;
+            transition: background-color 0.3s ease, color 0.3s ease;
+        }
+
+        html.dark body {
+            background-color: #1f2937;
+            color: #f3f4f6;
+        }
+
+        .loading-container {
+            text-align: center;
+        }
+
+        .loader {
+            border: 4px solid rgba(59, 130, 246, 0.2);
+            border-radius: 50%;
+            border-top: 4px solid #3b82f6;
+            width: 50px;
+            height: 50px;
+            animation: spin 1s linear infinite;
+            margin: 0 auto 20px;
+            transition: border-color 0.3s ease;
+        }
+
+        html.dark .loader {
+            border-color: rgba(96, 165, 250, 0.2);
+            border-top-color: #60a5fa;
+        }
+
+        @keyframes spin {
+            0% { transform: rotate(0deg); }
+            100% { transform: rotate(360deg); }
+        }
+
+        .loading-text {
+            font-size: 16px;
+            color: inherit;
+            margin-top: 16px;
+        }
+    </style>
+    <script>
+        // Apply theme on page load
+        (function() {
+            // Check for saved theme preference
+            const savedTheme = localStorage.getItem('theme');
+
+            // Check if user prefers dark mode
+            const prefersDark = window.matchMedia('(prefers-color-scheme: dark)').matches;
+
+            // Apply dark mode if explicitly set or if system prefers dark and no preference is saved
+            if (savedTheme === 'dark' || (!savedTheme && prefersDark)) {
+                document.documentElement.classList.add('dark');
+            }
+
+            // Listen for system preference changes
+            window.matchMedia('(prefers-color-scheme: dark)').addEventListener('change', e => {
+                if (!localStorage.getItem('theme')) {
+                    if (e.matches) {
+                        document.documentElement.classList.add('dark');
+                    } else {
+                        document.documentElement.classList.remove('dark');
+                    }
+                }
+            });
+        })();
+    </script>
+</head>
+<body>
+<div class="loading-container">
+    <div class="loader"></div>
+    <p class="loading-text">Completing authentication, please wait...</p>
+</div>
+</body>
+</html>