<!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>