new themes test

index.html

@@ -45,7 +45,7 @@
             </div>
             <div class="theme-controls">
                 <select id="colorThemeSelect" class="theme-select" aria-label="Select color theme">
-                    <option value="default">Default Theme</option>
+                    <option value="cyberpunk">Default Theme</option>
                     <option value="purple">Purple Dream</option>
                     <option value="nature">Nature's Touch</option>
                     <option value="sunset">Sunset Vibes</option>
@@ -53,6 +53,12 @@
                     <option value="autumn">Autumn Warmth</option>
                     <option value="midnight">Midnight Rose</option>
                     <option value="rosenoir">Rose Noir</option>
+                    <option value="nord">Nord</option>
+                    <option value="pastel">Pastel Pop</option>
+                    <option value="oceanic">Oceanic Breeze</option>
+                    <option value="dracula">Dracula</option>
+
+
                 </select>
                 <button id="darkModeToggle" class="theme-toggle" aria-label="Toggle dark mode">
                     <i class="fas fa-moon"></i>

script.js

@@ -146,7 +146,110 @@ const colorThemes = {
             sidebarBackground: '#41292c',
             linkColor: '#d72483'
         }
+    },
+    materialkit: {
+        light: {
+            primary: '#d4a574',
+            background: '#f8f9fa',
+            text: '#2c2c2c',
+            cardBackground: '#7fb069',
+            sidebarBackground: '#a67c52',
+            hoverColor: '#7fb069'
+        },
+        dark: {
+            background: '#2c2c2c',
+            text: '#f8f9fa',
+            cardBackground: '#a67c52',
+            sidebarBackground: '#3d3d3d',
+            linkColor: '#d4a574'
+        }
+    },
+    cyberpunk: {
+        light: {
+            primary: '#1a1a1a',
+            background: '#121212',
+            text: '#00ffff',
+            cardBackground: '#2a2a2a',
+            sidebarBackground: '#1f1f1f',
+            hoverColor: '#ff0080'
+        },
+        dark: {
+            background: '#0d0d0d',
+            text: '#00ffff',
+            cardBackground: '#1a1a1a',
+            sidebarBackground: '#111111',
+            linkColor: '#ff0080'
+        }
+    },
+    nord: {
+        light: {
+            primary: '#5e81ac',
+            background: '#eceff4',
+            text: '#2e3440',
+            cardBackground: '#d8dee9',
+            sidebarBackground: '#81a1c1',
+            hoverColor: '#88c0d0'
+        },
+        dark: {
+            background: '#2e3440',
+            text: '#d8dee9',
+            cardBackground: '#3b4252',
+            sidebarBackground: '#4c566a',
+            linkColor: '#8fbcbb'
+        }
+    },
+    pastel: {
+        light: {
+            primary: '#ff88a2',
+            background: '#fff9f8',
+            text: '#301934',
+            cardBackground: '#ffd7e0',
+            sidebarBackground: '#ffc7d8',
+            hoverColor: '#ffb3c6'
+        },
+        dark: {
+            background: '#301934',
+            text: '#ffd7e0',
+            cardBackground: '#ff88a2',
+            sidebarBackground: '#592653',
+            linkColor: '#ffc7d8'
+        }
+    },
+    oceanic: {
+        light: {
+            primary: '#0077b6',
+            background: '#f0fbff',
+            text: '#003049',
+            cardBackground: '#cce9f7',
+            sidebarBackground: '#48cae4',
+            hoverColor: '#0096c7'
+        },
+        dark: {
+            background: '#003049',
+            text: '#ade8f4',
+            cardBackground: '#0077b6',
+            sidebarBackground: '#014f86',
+            linkColor: '#48cae4'
+        }
+    },
+    dracula: {
+        light: {           /* keeps light mode usable */
+            primary: '#bd93f9',
+            background: '#ffffff',
+            text: '#282a36',
+            cardBackground: '#eaeaea',
+            sidebarBackground: '#cfc9e3',
+            hoverColor: '#ff79c6'
+        },
+        dark: {
+            background: '#282a36',
+            text: '#f8f8f2',
+            cardBackground: '#44475a',
+            sidebarBackground: '#6272a4',
+            linkColor: '#bd93f9'
+        }
     }
+
 };
 
 // Initialize all UI controls
@@ -177,9 +280,13 @@ document.addEventListener('DOMContentLoaded', () => {
 
     // Color theme initialization
     const colorThemeSelect = document.getElementById('colorThemeSelect');
-    const savedColorTheme = localStorage.getItem('colorTheme') || 'default';
-    colorThemeSelect.value = savedColorTheme;
-    applyColorTheme(savedColorTheme);
+    const savedColorTheme = localStorage.getItem('colorTheme');
+    const defaultTheme = 'default';
+
+    // Validate saved theme exists
+    const initialTheme = colorThemes[savedColorTheme] ? savedColorTheme : defaultTheme;
+    colorThemeSelect.value = initialTheme;
+    applyColorTheme(initialTheme);
     
     // Color theme change event listener
     colorThemeSelect.addEventListener('change', (e) => {
@@ -973,13 +1080,28 @@ function displaySection(sectionName, sections) {
 }
 
 function applyColorTheme(themeName) {
+    // Check if theme exists, otherwise fallback to default
+    const themeExists = colorThemes[themeName];
+    if (!themeExists) {
+        console.warn(`Theme "${themeName}" not found, falling back to default theme`);
+        themeName = 'default';
+    }
+
     const isDark = document.body.dataset.theme === 'dark';
     const theme = colorThemes[themeName][isDark ? 'dark' : 'light'];
     
+    if (!theme) {
+        console.error(`Could not find ${isDark ? 'dark' : 'light'} mode for theme "${themeName}"`);
+        return;
+    }
+    
     // Apply theme colors to CSS variables
     const root = document.documentElement;
     Object.entries(theme).forEach(([key, value]) => {
         const cssVar = `--${key.replace(/([A-Z])/g, '-$1').toLowerCase()}`;
         root.style.setProperty(cssVar, value);
     });
+
+    // Store the successfully applied theme
+    localStorage.setItem('colorTheme', themeName);
 }

styles.css

@@ -1,4 +1,6 @@
 :root {
+    @import url("https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600&display=swap");
+
     --primary-color: #4a314d;
     --background-color: #ffffff;
     --text-color: #1a090d;
@@ -27,7 +29,8 @@
 }
 
 body {
-    font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, sans-serif;
+    font-family: "Inter", system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen, Ubuntu, Cantarell, sans-serif;
+    letter-spacing: 0.02em;
     background-color: var(--background-color);
     color: var(--text-color);
     line-height: 1.6;
@@ -179,15 +182,18 @@ body {
 }
 
 /* Resource Cards */
-.resource-card {
+.resource-card{
     background: var(--card-background);
-    border-radius: 12px;
-    padding: 16px;
-    margin-bottom: 16px;
-    box-shadow: 0 2px 4px rgba(0,0,0,0.1);
-    width: 100%;
-    height: auto;
-    overflow: visible;
+    border-radius: 16px;
+    padding: 24px 20px;
+    margin-bottom: 20px;
+    box-shadow: 0 4px 14px rgba(0,0,0,.08);
+    transition: transform .25s cubic-bezier(.4,.2,.2,1),
+                box-shadow .25s cubic-bezier(.4,.2,.2,1);
+}
+.resource-card:hover{
+    transform: translateY(-4px);
+    box-shadow: 0 10px 20px rgba(0,0,0,.12);
 }
 
 .resource-header {