trevor/sst_site
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Main functions

Browse Source
This commit is contained in:
Andrey K. Choi
2025-10-26 14:44:10 +09:00
parent 6ff35e26f4
commit 291fc63a4c
901 changed files with 79783 additions and 201383 deletions
Download Patch File Download Diff File Expand all files Collapse all files

92
views/partials/navigation.ejs
View File

@@ -36,12 +36,20 @@
<button class="flex items-center text-gray-700 dark:text-gray-300 hover:text-blue-600 px-3 py-2 text-sm font-medium transition-colors" id="language-dropdown">
<%
let currentFlag = '🇰🇷';
if (currentLanguage === 'en') currentFlag = '🇺🇸';
else if (currentLanguage === 'ru') currentFlag = '🇷🇺';
else if (currentLanguage === 'kk') currentFlag = '🇰🇿';
let languageKey = 'korean';
if (currentLanguage === 'en') {
currentFlag = '🇺🇸';
languageKey = 'english';
} else if (currentLanguage === 'ru') {
currentFlag = '🇷🇺';
languageKey = 'russian';
} else if (currentLanguage === 'kk') {
currentFlag = '🇰🇿';
languageKey = 'kazakh';
}
%>
<span class="mr-2"><%= currentFlag %></span>
<%= __('language.' + currentLanguage) %>
<%= __('language.' + languageKey) %>
<i class="fas fa-chevron-down ml-1 text-xs"></i>
</button>
<div class="absolute right-0 mt-2 w-40 bg-white dark:bg-gray-800 rounded-lg shadow-lg border dark:border-gray-700 opacity-0 invisible group-hover:opacity-100 group-hover:visible transition-all duration-200">
@@ -60,14 +68,18 @@
</div>
</div>
<!-- iOS Style Theme Toggle -->
<div class="relative inline-block" title="<%= __('theme.toggle') %>">
<!-- Animated Theme Toggle -->
<div class="relative inline-block ml-4" title="<%= __('theme.toggle') %>">
<input type="checkbox" id="theme-toggle" class="sr-only">
<label for="theme-toggle" class="flex items-center cursor-pointer">
<div class="relative w-12 h-6 bg-gray-300 dark:bg-gray-600 rounded-full transition-colors duration-200">
<div class="absolute top-0.5 left-0.5 w-5 h-5 bg-white rounded-full shadow-md transform transition-transform duration-200 flex items-center justify-center theme-toggle-slider">
<i class="fas fa-sun text-yellow-500 text-xs theme-sun-icon"></i>
<i class="fas fa-moon text-blue-500 text-xs hidden theme-moon-icon"></i>
<div class="relative w-14 h-7 bg-gradient-to-r from-blue-200 to-yellow-200 dark:from-gray-700 dark:to-gray-600 rounded-full border-2 border-gray-300 dark:border-gray-500 transition-all duration-300 shadow-sm">
<div class="absolute top-0.5 left-1 w-5 h-5 bg-white dark:bg-gray-200 rounded-full shadow-md transform transition-all duration-300 flex items-center justify-center theme-toggle-slider">
<div class="relative w-full h-full flex items-center justify-center">
<!-- Sun Icon -->
<i class="fas fa-sun absolute text-yellow-500 text-xs theme-sun-icon transition-all duration-300 transform"></i>
<!-- Moon Icon -->
<i class="fas fa-moon absolute text-blue-500 text-xs theme-moon-icon transition-all duration-300 transform"></i>
</div>
</div>
</div>
</label>
@@ -113,57 +125,6 @@
<script>
document.addEventListener('DOMContentLoaded', function() {
// Theme Management
const themeToggle = document.getElementById('theme-toggle');
const html = document.documentElement;
const slider = document.querySelector('.theme-toggle-slider');
const sunIcon = document.querySelector('.theme-sun-icon');
const moonIcon = document.querySelector('.theme-moon-icon');
// Get current theme
const currentTheme = localStorage.getItem('theme') ||
(window.matchMedia('(prefers-color-scheme: dark)').matches ? 'dark' : 'light');
// Apply theme and update toggle
function applyTheme(isDark) {
if (isDark) {
html.classList.add('dark');
themeToggle.checked = true;
if (slider) {
slider.style.transform = 'translateX(24px)';
slider.style.backgroundColor = '#374151';
}
if (sunIcon) sunIcon.classList.add('hidden');
if (moonIcon) moonIcon.classList.remove('hidden');
} else {
html.classList.remove('dark');
themeToggle.checked = false;
if (slider) {
slider.style.transform = 'translateX(0)';
slider.style.backgroundColor = '#ffffff';
}
if (sunIcon) sunIcon.classList.remove('hidden');
if (moonIcon) moonIcon.classList.add('hidden');
}
}
// Initial theme application
applyTheme(currentTheme === 'dark');
// Theme toggle handler
function toggleTheme() {
const isDark = html.classList.contains('dark');
const newTheme = isDark ? 'light' : 'dark';
applyTheme(!isDark);
localStorage.setItem('theme', newTheme);
fetch(`/theme/${newTheme}`);
}
if (themeToggle) {
themeToggle.addEventListener('change', toggleTheme);
}
// Mobile Menu Management
const mobileMenuToggle = document.getElementById('mobile-menu-toggle');
const mobileMenu = document.getElementById('mobile-menu');
@@ -193,5 +154,14 @@ document.addEventListener('DOMContentLoaded', function() {
}
});
}
// Handle language change clicks
document.querySelectorAll('a[href^="/lang/"]').forEach(link => {
link.addEventListener('click', function(e) {
const newLang = this.href.split('/lang/')[1];
sessionStorage.setItem('expectedLanguage', newLang);
console.log('Setting expected language:', newLang);
});
});
});
</script>