@@ -4,10 +4,9 @@ document.addEventListener('DOMContentLoaded', function() {
44 const themeDropdownMenu = document . getElementById ( 'theme-dropdown-menu' ) ;
55
66 if ( themeDropdownToggle && themeDropdownMenu ) {
7- // Toggle dropdown menu with stopPropagation to prevent immediate closing
7+ // Toggle dropdown menu
88 themeDropdownToggle . addEventListener ( 'click' , function ( e ) {
99 e . preventDefault ( ) ;
10- e . stopPropagation ( ) ;
1110 themeDropdownMenu . classList . toggle ( 'show' ) ;
1211 } ) ;
1312
@@ -27,110 +26,139 @@ document.addEventListener('DOMContentLoaded', function() {
2726 localStorage . setItem ( 'theme' , theme ) ;
2827 themeDropdownMenu . classList . remove ( 'show' ) ;
2928
30- // Visual feedback for selection
31- themeItems . forEach ( i => i . classList . remove ( 'active' ) ) ;
32- this . classList . add ( 'active' ) ;
29+ // Add visual feedback for selection
30+ this . classList . add ( 'selected' ) ;
31+ setTimeout ( ( ) => {
32+ this . classList . remove ( 'selected' ) ;
33+ } , 500 ) ;
3334 } ) ;
3435 } ) ;
3536 }
3637
3738 // Apply saved theme or default on page load
38- const savedTheme = localStorage . getItem ( 'theme' ) || 'light-soft ' ;
39+ const savedTheme = localStorage . getItem ( 'theme' ) || 'light-retro ' ;
3940 applyTheme ( savedTheme ) ;
4041
4142 // Function to apply a theme
4243 function applyTheme ( theme ) {
4344 document . documentElement . setAttribute ( 'data-theme' , theme ) ;
4445
45- // Update active item in dropdown
46+ // Update active item in dropdown if it exists
4647 const themeItems = document . querySelectorAll ( '.theme-dropdown-item' ) ;
4748 themeItems . forEach ( item => {
4849 if ( item . getAttribute ( 'data-theme' ) === theme ) {
4950 item . classList . add ( 'active' ) ;
51+ item . style . fontWeight = 'bold' ;
5052 } else {
5153 item . classList . remove ( 'active' ) ;
54+ item . style . fontWeight = 'normal' ;
5255 }
5356 } ) ;
5457
55- // Update toggle icon based on light or dark theme
58+ // Update toggle text and icon
5659 const themeToggle = document . getElementById ( 'theme-dropdown-toggle' ) ;
5760 if ( themeToggle ) {
5861 const isLight = theme . startsWith ( 'light' ) ;
59- // Check if using Font Awesome 5 (fas) or older version (fa)
60- const iconPrefix = document . querySelector ( '.fas' ) ? 'fas' : 'fa' ;
6162 const iconClass = isLight ? 'fa-sun' : 'fa-moon' ;
62- themeToggle . innerHTML = `<i class="${ iconPrefix } ${ iconClass } ;
63+ themeToggle . innerHTML = `<i class="fas ${ iconClass } ;
6364 }
6465
65- // Fix visibility issues with navigation arrows
66- fixNavigationArrows ( ) ;
67-
68- // Additional theme-specific adjustments
69- adjustThemeSpecificElements ( theme ) ;
66+ // Apply special effects based on theme
67+ applyThemeSpecificEffects ( theme ) ;
7068 }
7169
72- // Additional function to adjust elements based on theme
73- function adjustThemeSpecificElements ( theme ) {
74- const isDark = theme . startsWith ( 'dark' ) ;
70+ // Apply special effects based on current theme
71+ function applyThemeSpecificEffects ( theme ) {
72+ // Get all cards for animations
73+ const cards = document . querySelectorAll ( '.card' ) ;
7574
76- // Adjust navbar toggler for better visibility in dark themes
77- const navbarToggler = document . querySelector ( '.navbar-toggler' ) ;
78- if ( navbarToggler ) {
79- if ( isDark ) {
80- navbarToggler . style . backgroundColor = 'rgba(255, 255, 255, 0.1)' ;
81- } else {
82- navbarToggler . style . backgroundColor = '' ;
83- }
75+ // Apply different animations based on the theme
76+ if ( theme . includes ( 'retro' ) ) {
77+ // For retro themes, add subtle parallax effect to cards
78+ cards . forEach ( card => {
79+ card . classList . add ( 'retro-effect' ) ;
80+
81+ // Add hover listener for parallax effect
82+ card . addEventListener ( 'mousemove' , function ( e ) {
83+ const cardRect = card . getBoundingClientRect ( ) ;
84+ const cardCenterX = cardRect . left + cardRect . width / 2 ;
85+ const cardCenterY = cardRect . top + cardRect . height / 2 ;
86+ const mouseX = e . clientX - cardCenterX ;
87+ const mouseY = e . clientY - cardCenterY ;
88+
89+ // Limit the rotation
90+ const maxRotation = 8 ;
91+ const rotateY = ( mouseX / cardRect . width ) * maxRotation ;
92+ const rotateX = - ( ( mouseY / cardRect . height ) * maxRotation ) ;
93+
94+ card . style . transform = `perspective(1000px) rotateX(${ rotateX } ${ rotateY } ;
95+ } ) ;
96+
97+ // Reset on mouse leave
98+ card . addEventListener ( 'mouseleave' , function ( ) {
99+ card . style . transform = 'perspective(1000px) rotateX(0) rotateY(0) scale3d(1, 1, 1)' ;
100+ } ) ;
101+ } ) ;
102+ } else {
103+ // Remove retro effects if not a retro theme
104+ cards . forEach ( card => {
105+ card . classList . remove ( 'retro-effect' ) ;
106+ card . style . transform = '' ;
107+
108+ // Remove event listeners (clone and replace)
109+ const newCard = card . cloneNode ( true ) ;
110+ card . parentNode . replaceChild ( newCard , card ) ;
111+ } ) ;
84112 }
85113
86- // Ensure navigation arrows have appropriate contrast
87- const navArrows = document . querySelectorAll ( 'a.prev, a.next' ) ;
88- navArrows . forEach ( arrow => {
89- if ( isDark ) {
90- arrow . style . backgroundColor = 'rgba(255, 255, 255, 0.15)' ;
91- arrow . style . color = '#fff' ;
92- } else {
93- arrow . style . backgroundColor = '' ;
94- arrow . style . color = '' ;
114+ // Enhance buttons based on theme
115+ const buttons = document . querySelectorAll ( '.btn-primary, .btn-danger, .btn-warning' ) ;
116+ if ( theme . includes ( 'mono' ) ) {
117+ // For mono themes, add subtle grow effect
118+ buttons . forEach ( btn => {
119+ btn . classList . add ( 'mono-effect' ) ;
120+ } ) ;
121+ } else {
122+ // Remove mono effects
123+ buttons . forEach ( btn => {
124+ btn . classList . remove ( 'mono-effect' ) ;
125+ } ) ;
126+ }
127+
128+ // Apply header footer gradients based on theme
129+ const navbar = document . querySelector ( '.navbar' ) ;
130+ const footer = document . querySelector ( '.footer' ) ;
131+
132+ if ( navbar && footer ) {
133+ if ( theme . includes ( 'soft' ) ) {
134+ navbar . style . background = 'var(--gradient1) !important' ;
135+ footer . style . background = 'var(--gradient1) !important' ;
136+ } else if ( theme . includes ( 'mono' ) ) {
137+ navbar . style . background = 'var(--gradient2) !important' ;
138+ footer . style . background = 'var(--gradient2) !important' ;
139+ } else if ( theme . includes ( 'retro' ) ) {
140+ navbar . style . background = 'var(--gradient3) !important' ;
141+ footer . style . background = 'var(--gradient3) !important' ;
95142 }
96- } ) ;
143+ }
97144 }
98145
99- // Function to fix navigation arrows
100- function fixNavigationArrows ( ) {
101- const prevNextLinks = document . querySelectorAll ( 'a.prev, a.next' ) ;
102- prevNextLinks . forEach ( link => {
103- // Ensure icons are visible
104- if ( ! link . querySelector ( 'i' ) ) {
105- // Check if using Font Awesome 5 (fas) or older version (fa)
106- const iconPrefix = document . querySelector ( '.fas' ) ? 'fas' : 'fa' ;
107- link . innerHTML = link . classList . contains ( 'prev' ) ?
108- `<i class="${ iconPrefix } :
109- `<i class="${ iconPrefix } ;
110- }
111-
112- // Make slightly visible by default
113- link . style . opacity = '0.8' ;
114-
115- // Set background and text color for better visibility
116- const theme = document . documentElement . getAttribute ( 'data-theme' ) || 'light-soft' ;
117- const isDark = theme . startsWith ( 'dark' ) ;
118-
119- if ( isDark ) {
120- link . style . backgroundColor = 'rgba(255, 255, 255, 0.15)' ;
121- link . style . color = '#ffffff' ;
122- } else {
123- // For light themes, use accent color as background
124- const computedStyle = getComputedStyle ( document . documentElement ) ;
125- const accentColor = computedStyle . getPropertyValue ( '--accent-color1' ) ;
126- link . style . backgroundColor = accentColor || '#007BFF' ;
127- link . style . color = '#ffffff' ;
128- }
129-
130- link . style . boxShadow = '0 4px 10px rgba(0, 0, 0, 0.3)' ;
146+ // Add special class to cards for animations
147+ document . querySelectorAll ( '.card' ) . forEach ( card => {
148+ card . addEventListener ( 'mouseenter' , function ( ) {
149+ this . classList . add ( 'card-hover' ) ;
131150 } ) ;
132- }
151+
152+ card . addEventListener ( 'mouseleave' , function ( ) {
153+ this . classList . remove ( 'card-hover' ) ;
154+ } ) ;
155+ } ) ;
133156
134- // Initialize navigation arrows on page load
135- fixNavigationArrows ( ) ;
157+ // Enhance post navigation
158+ const prevNextLinks = document . querySelectorAll ( 'a.prev, a.next' ) ;
159+ prevNextLinks . forEach ( link => {
160+ link . innerHTML = link . classList . contains ( 'prev' ) ?
161+ '<i class="fa fa-angle-left"></i>' :
162+ '<i class="fa fa-angle-right"></i>' ;
163+ } ) ;
136164} ) ;
0 commit comments