-
Notifications
You must be signed in to change notification settings - Fork 1
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
Refactor theme initialization and tool listing generation
- Loading branch information
1 parent
40309ec
commit 9c66564
Showing
9 changed files
with
901 additions
and
354 deletions.
There are no files selected for viewing
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -1,78 +1,11 @@ | ||
| // Theme Management | ||
| const themeButton = document.getElementById('theme-button'); | ||
| const prefersDarkScheme = window.matchMedia('(prefers-color-scheme: dark)'); | ||
| import { generateToolList } from './utils/template-generator.js'; | ||
| import { initializeTheme } from './utils/theme.js'; | ||
|
|
||
| // Initialize theme | ||
| function initializeTheme() { | ||
| const savedTheme = localStorage.getItem('theme'); | ||
| if (savedTheme) { | ||
| document.documentElement.setAttribute('data-theme', savedTheme); | ||
| updateThemeIcon(savedTheme); | ||
| } else { | ||
| const defaultTheme = prefersDarkScheme.matches ? 'dark' : 'light'; | ||
| document.documentElement.setAttribute('data-theme', defaultTheme); | ||
| updateThemeIcon(defaultTheme); | ||
| } | ||
| } | ||
|
|
||
| // Update theme icon | ||
| function updateThemeIcon(theme) { | ||
| const icon = themeButton.querySelector('i'); | ||
| icon.className = theme === 'dark' ? 'fas fa-sun' : 'fas fa-moon'; | ||
| } | ||
| initializeTheme(); | ||
|
|
||
| // Toggle theme | ||
| function toggleTheme() { | ||
| const currentTheme = document.documentElement.getAttribute('data-theme'); | ||
| const newTheme = currentTheme === 'dark' ? 'light' : 'dark'; | ||
|
|
||
| document.documentElement.setAttribute('data-theme', newTheme); | ||
| localStorage.setItem('theme', newTheme); | ||
| updateThemeIcon(newTheme); | ||
| // Generate tool listings if on index page | ||
| const toolsContainer = document.getElementById('tools-container'); | ||
| if (toolsContainer) { | ||
| toolsContainer.innerHTML = generateToolList(); | ||
| } | ||
|
|
||
| // Event Listeners | ||
| if (themeButton) { | ||
| themeButton.addEventListener('click', toggleTheme); | ||
| } | ||
|
|
||
| // Initialize theme on load | ||
| document.addEventListener('DOMContentLoaded', initializeTheme); | ||
|
|
||
| // Handle system theme changes | ||
| prefersDarkScheme.addEventListener('change', (e) => { | ||
| if (!localStorage.getItem('theme')) { | ||
| const newTheme = e.matches ? 'dark' : 'light'; | ||
| document.documentElement.setAttribute('data-theme', newTheme); | ||
| updateThemeIcon(newTheme); | ||
| } | ||
| }); | ||
|
|
||
| // Navigation active state | ||
| function setActiveNavItem() { | ||
| const currentPath = window.location.pathname; | ||
| const navLinks = document.querySelectorAll('nav a'); | ||
|
|
||
| navLinks.forEach(link => { | ||
| if (link.getAttribute('href') === currentPath) { | ||
| link.classList.add('active'); | ||
| } | ||
| }); | ||
| } | ||
|
|
||
| // Initialize navigation | ||
| document.addEventListener('DOMContentLoaded', setActiveNavItem); | ||
|
|
||
| // Smooth scrolling for anchor links | ||
| document.querySelectorAll('a[href^="#"]').forEach(anchor => { | ||
| anchor.addEventListener('click', function (e) { | ||
| e.preventDefault(); | ||
| const target = document.querySelector(this.getAttribute('href')); | ||
| if (target) { | ||
| target.scrollIntoView({ | ||
| behavior: 'smooth', | ||
| block: 'start' | ||
| }); | ||
| } | ||
| }); | ||
| }); |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,110 @@ | ||
| export const TOOLS = [ | ||
| { | ||
| id: 'text-to-speech', | ||
| name: 'Text to Speech', | ||
| description: 'Convert text to natural-sounding speech with multiple voices and languages.', | ||
| icon: 'fa-volume-up', | ||
| features: ['Multiple voices', 'Download audio'], | ||
| path: 'text-to-speech.html', | ||
| category: 'audio', | ||
| order: 1 | ||
| }, | ||
| { | ||
| id: 'image-resizer', | ||
| name: 'Image Resizer', | ||
| description: 'Resize and optimize your images while maintaining quality.', | ||
| icon: 'fa-image', | ||
| features: ['Preserve ratio', 'Multiple formats'], | ||
| path: 'image-resizer.html', | ||
| category: 'image', | ||
| order: 2 | ||
| }, | ||
| { | ||
| id: 'color-palette', | ||
| name: 'Color Palette', | ||
| description: 'Generate beautiful color harmonies for your designs.', | ||
| icon: 'fa-palette', | ||
| features: ['Color harmony', 'Export options'], | ||
| path: 'color-palette.html', | ||
| category: 'design', | ||
| order: 3 | ||
| }, | ||
| { | ||
| id: 'ascii-art', | ||
| name: 'ASCII Art', | ||
| description: 'Convert images into creative ASCII art with customization options.', | ||
| icon: 'fa-font', | ||
| features: ['Custom styles', 'Export text'], | ||
| path: 'ascii-art.html', | ||
| category: 'image', | ||
| order: 4 | ||
| }, | ||
| { | ||
| id: 'qr-code', | ||
| name: 'QR Code', | ||
| description: 'Generate customizable QR codes for your links and data.', | ||
| icon: 'fa-qrcode', | ||
| features: ['Custom styles', 'Download PNG'], | ||
| path: 'qr-code.html', | ||
| category: 'utility', | ||
| order: 5 | ||
| }, | ||
| { | ||
| id: 'password-generator', | ||
| name: 'Password Generator', | ||
| description: 'Create strong, secure passwords with advanced customization.', | ||
| icon: 'fa-key', | ||
| features: ['Custom options', 'Strength meter'], | ||
| path: 'password-generator.html', | ||
| category: 'security', | ||
| order: 6 | ||
| }, | ||
| { | ||
| id: 'url-shortener', | ||
| name: 'URL Shortener', | ||
| description: 'Create short, memorable links for easy sharing and tracking.', | ||
| icon: 'fa-link', | ||
| features: ['Click analytics', 'Custom aliases'], | ||
| path: 'url-shortener.html', | ||
| category: 'utility', | ||
| order: 7 | ||
| } | ||
| ]; | ||
|
|
||
| export const CATEGORIES = { | ||
| audio: { | ||
| name: 'Audio Tools', | ||
| description: 'Tools for audio processing and conversion', | ||
| icon: 'fa-music' | ||
| }, | ||
| image: { | ||
| name: 'Image Tools', | ||
| description: 'Tools for image manipulation and conversion', | ||
| icon: 'fa-image' | ||
| }, | ||
| design: { | ||
| name: 'Design Tools', | ||
| description: 'Tools for design and color management', | ||
| icon: 'fa-palette' | ||
| }, | ||
| utility: { | ||
| name: 'Utility Tools', | ||
| description: 'General purpose utility tools', | ||
| icon: 'fa-tools' | ||
| }, | ||
| security: { | ||
| name: 'Security Tools', | ||
| description: 'Tools for security and privacy', | ||
| icon: 'fa-shield-alt' | ||
| } | ||
| }; | ||
|
|
||
| export const TOOL_STATS = { | ||
| totalTools: TOOLS.length, | ||
| toolsByCategory: Object.fromEntries( | ||
| Object.keys(CATEGORIES).map(category => [ | ||
| category, | ||
| TOOLS.filter(tool => tool.category === category).length | ||
| ]) | ||
| ) | ||
| }; |
Oops, something went wrong.