Skip to content

Commit

Permalink
Refactor file paths for JavaScript resources and update theme system
Browse files Browse the repository at this point in the history
  • Loading branch information
@TMHSDigital
TMHSDigital committed Dec 26, 2024
1 parent ac2ccf4 commit 76cc4be
Show file tree
Hide file tree
Showing 4 changed files with 304 additions and 86 deletions.
145 changes: 131 additions & 14 deletions css/components/cards.css
View file
Original file line number Diff line number Diff line change
Expand Up @@ -154,6 +154,7 @@
cursor: pointer;
position: relative;
overflow: hidden;
border: 1px solid rgba(var(--bg-secondary-rgb), 0.5);
}

.tool-card::before {
Expand All @@ -163,14 +164,15 @@
left: 0;
right: 0;
height: 4px;
background: var(--primary-gradient);
background: linear-gradient(90deg, var(--category-color), rgba(var(--primary-rgb), 0.5));
opacity: 0;
transition: var(--transition-all);
}

.tool-card:hover {
transform: translateY(-5px);
box-shadow: var(--shadow-lg);
border-color: rgba(var(--primary-rgb), 0.2);
}

.tool-card:hover::before {
Expand All @@ -186,14 +188,26 @@
align-items: center;
justify-content: center;
margin-bottom: 1rem;
position: relative;
overflow: hidden;
}

.tool-icon::before {
content: '';
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
background: linear-gradient(135deg, var(--category-color), rgba(var(--primary-rgb), 0.2));
opacity: 0.2;
}

.tool-icon i {
font-size: 1.5rem;
background: var(--primary-gradient);
-webkit-background-clip: text;
background-clip: text;
color: transparent;
color: var(--category-color);
position: relative;
z-index: 1;
}

.tool-content {
Expand Down Expand Up @@ -223,35 +237,105 @@

.tool-category {
font-size: 0.75rem;
padding: 0.25rem 0.5rem;
padding: 0.25rem 0.75rem;
border-radius: var(--radius-full);
background: rgba(var(--primary-rgb), 0.1);
background: rgba(var(--bg-secondary-rgb), 0.5);
color: var(--text-secondary);
display: flex;
align-items: center;
gap: 0.25rem;
gap: 0.375rem;
transition: var(--transition-all);
}

.tool-card:hover .tool-category {
background: rgba(var(--primary-rgb), 0.1);
color: var(--category-color);
}

.tool-category i {
font-size: 0.875rem;
}

.tool-features {
display: flex;
gap: 0.5rem;
flex-wrap: wrap;
}

.tool-feature {
width: 24px;
height: 24px;
width: 28px;
height: 28px;
border-radius: var(--radius-full);
background: rgba(var(--accent-rgb), 0.1);
background: rgba(var(--bg-secondary-rgb), 0.5);
display: flex;
align-items: center;
justify-content: center;
color: var(--text-secondary);
font-size: 0.75rem;
font-size: 0.875rem;
transition: var(--transition-all);
position: relative;
}

.tool-card:hover .tool-feature {
background: rgba(var(--primary-rgb), 0.1);
color: var(--category-color);
}

.tool-feature:hover {
background: rgba(var(--accent-rgb), 0.2);
transform: scale(1.1);
transform: translateY(-2px);
background: rgba(var(--primary-rgb), 0.2);
}

.feature-tooltip {
position: absolute;
bottom: 100%;
left: 50%;
transform: translateX(-50%) translateY(5px);
background: var(--bg-primary);
border: 1px solid rgba(var(--bg-secondary-rgb), 0.5);
border-radius: var(--radius-md);
padding: 0.75rem;
width: max-content;
max-width: 200px;
box-shadow: var(--shadow-lg);
opacity: 0;
pointer-events: none;
transition: var(--transition-all);
z-index: 10;
}

.feature-tooltip::before {
content: '';
position: absolute;
top: 100%;
left: 50%;
transform: translateX(-50%);
border: 6px solid transparent;
border-top-color: rgba(var(--bg-secondary-rgb), 0.5);
}

.feature-tooltip::after {
content: '';
position: absolute;
top: 100%;
left: 50%;
transform: translateX(-50%);
border: 5px solid transparent;
border-top-color: var(--bg-primary);
}

.feature-tooltip strong {
display: block;
font-size: 0.75rem;
font-weight: 600;
color: var(--text-primary);
margin-bottom: 0.25rem;
}

.feature-tooltip p {
font-size: 0.75rem;
color: var(--text-secondary);
line-height: 1.4;
}

/* Loading State */
Expand Down Expand Up @@ -280,6 +364,13 @@
animation: shimmer 1.5s infinite;
}

.tool-card.loading .tool-features {
height: 28px;
background: rgba(var(--bg-secondary-rgb), 0.5);
border-radius: var(--radius-sm);
animation: shimmer 1.5s infinite;
}

/* Error State */
.error-message {
text-align: center;
Expand All @@ -293,6 +384,22 @@
color: var(--text-secondary);
}

.retry-button {
margin-top: 1rem;
padding: 0.5rem 1rem;
border-radius: var(--radius-md);
background: rgba(var(--primary-rgb), 0.1);
color: var(--text-primary);
border: 1px solid rgba(var(--primary-rgb), 0.2);
cursor: pointer;
transition: var(--transition-all);
}

.retry-button:hover {
background: rgba(var(--primary-rgb), 0.2);
transform: translateY(-2px);
}

/* Responsive adjustments */
@media (max-width: 640px) {
.tool-card {
Expand All @@ -315,4 +422,14 @@
.tool-meta {
gap: 0.5rem;
}

.tool-feature {
width: 24px;
height: 24px;
font-size: 0.75rem;
}

.feature-tooltip {
display: none;
}
}
89 changes: 62 additions & 27 deletions js/config/tools.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -30,69 +30,97 @@ 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: 'pages/text-to-speech.html',
icon: 'fas fa-volume-up',
features: [
{ name: 'Multiple Voices', icon: 'fas fa-microphone', description: 'Choose from various voices' },
{ name: 'Language Support', icon: 'fas fa-language', description: 'Multiple language options' },
{ name: 'Download Audio', icon: 'fas fa-download', description: 'Save as MP3' }
],
path: '/tools/text-to-speech',
category: TOOL_CATEGORIES.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: 'pages/image-resizer.html',
icon: 'fas fa-image',
features: [
{ name: 'Preserve Ratio', icon: 'fas fa-expand', description: 'Maintain aspect ratio' },
{ name: 'Multiple Formats', icon: 'fas fa-file-image', description: 'Support for PNG, JPG, WebP' },
{ name: 'Batch Processing', icon: 'fas fa-layer-group', description: 'Process multiple images' }
],
path: '/tools/image-resizer',
category: TOOL_CATEGORIES.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: 'pages/color-palette.html',
icon: 'fas fa-palette',
features: [
{ name: 'Color Harmony', icon: 'fas fa-paint-brush', description: 'Generate matching colors' },
{ name: 'Export Options', icon: 'fas fa-file-export', description: 'Save in various formats' },
{ name: 'Accessibility', icon: 'fas fa-universal-access', description: 'Check contrast ratios' }
],
path: '/tools/color-palette',
category: TOOL_CATEGORIES.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: 'pages/ascii-art.html',
icon: 'fas fa-font',
features: [
{ name: 'Custom Styles', icon: 'fas fa-brush', description: 'Multiple art styles' },
{ name: 'Export Text', icon: 'fas fa-file-alt', description: 'Save as text file' },
{ name: 'Image Input', icon: 'fas fa-file-image', description: 'Convert from images' }
],
path: '/tools/ascii-art',
category: TOOL_CATEGORIES.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: 'pages/qr-code.html',
icon: 'fas fa-qrcode',
features: [
{ name: 'Custom Styles', icon: 'fas fa-paint-roller', description: 'Customize appearance' },
{ name: 'Download PNG', icon: 'fas fa-download', description: 'High-quality export' },
{ name: 'Error Correction', icon: 'fas fa-shield-alt', description: 'Reliable scanning' }
],
path: '/tools/qr-code',
category: TOOL_CATEGORIES.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: 'pages/password-generator.html',
icon: 'fas fa-key',
features: [
{ name: 'Custom Options', icon: 'fas fa-sliders-h', description: 'Customize complexity' },
{ name: 'Strength Meter', icon: 'fas fa-tachometer-alt', description: 'Check password strength' },
{ name: 'Secure Generation', icon: 'fas fa-lock', description: 'Cryptographically secure' }
],
path: '/tools/password-generator',
category: TOOL_CATEGORIES.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: 'pages/url-shortener.html',
icon: 'fas fa-link',
features: [
{ name: 'Click Analytics', icon: 'fas fa-chart-line', description: 'Track link usage' },
{ name: 'Custom Aliases', icon: 'fas fa-tag', description: 'Personalize URLs' },
{ name: 'QR Code Export', icon: 'fas fa-qrcode', description: 'Generate QR codes' }
],
path: '/tools/url-shortener',
category: TOOL_CATEGORIES.UTILITY,
order: 7
}
Expand All @@ -103,39 +131,46 @@ export const TOOLS = [
* @property {string} name - Display name of the category
* @property {string} description - Category description
* @property {string} icon - FontAwesome icon class
* @property {string} color - Category color
*/

/** @type {Record<string, CategoryInfo>} */
export const CATEGORIES = {
[TOOL_CATEGORIES.AUDIO]: {
name: 'Audio Tools',
description: 'Tools for audio processing and conversion',
icon: 'fa-music'
icon: 'fas fa-music',
color: '#00f2fe'
},
[TOOL_CATEGORIES.IMAGE]: {
name: 'Image Tools',
description: 'Tools for image manipulation and conversion',
icon: 'fa-image'
icon: 'fas fa-image',
color: '#4facfe'
},
[TOOL_CATEGORIES.DESIGN]: {
name: 'Design Tools',
description: 'Tools for design and color management',
icon: 'fa-palette'
icon: 'fas fa-palette',
color: '#b721ff'
},
[TOOL_CATEGORIES.UTILITY]: {
name: 'Utility Tools',
description: 'General purpose utility tools',
icon: 'fa-tools'
icon: 'fas fa-tools',
color: '#21d4fd'
},
[TOOL_CATEGORIES.SECURITY]: {
name: 'Security Tools',
description: 'Tools for security and privacy',
icon: 'fa-shield-alt'
icon: 'fas fa-shield-alt',
color: '#0061ff'
},
[TOOL_CATEGORIES.TEXT]: {
name: 'Text Tools',
description: 'Tools for text manipulation and processing',
icon: 'fa-font'
icon: 'fas fa-font',
color: '#60efff'
}
};

Expand Down
Loading

0 comments on commit 76cc4be

Please sign in to comment.