[WIP] Update site in docs folder for improved wiki functionality

docs/api.html

@@ -25,6 +25,9 @@
                 <a href="npc-system.html">NPC System</a>
                 <a href="api.html" class="active">API</a>
             </div>
+            <button id="dark-mode-toggle" class="dark-mode-toggle" aria-label="Toggle dark mode">
+                <i class="fas fa-moon"></i>
+            </button>
             <div class="language-selector">
                 <i class="fas fa-globe"></i>
                 <select id="lang-select" onchange="changeLanguage(this.value)">
@@ -43,6 +46,13 @@
     </nav>
 
     <main class="container">
+        <nav class="breadcrumb" aria-label="Breadcrumb">
+            <ol>
+                <li><a href="index.html"><i class="fas fa-home"></i> Home</a></li>
+                <li class="breadcrumb-separator"><i class="fas fa-chevron-right"></i></li>
+                <li class="breadcrumb-current">Developer API</li>
+            </ol>
+        </nav>
         <section class="section">
             <h1 class="section-title">Developer API</h1>
             <p style="text-align: center; color: #7f8c8d; margin-bottom: 3rem;">
@@ -443,7 +453,7 @@ <h3><i class="fas fa-exclamation-triangle"></i> Common Pitfalls</h3>
             <div class="footer-section">
                 <h4>ReanimateMC</h4>
                 <p>A revolutionary Minecraft plugin by Jachou</p>
-                <p class="version">Version 1.2.02</p>
+                <p class="version">Version 1.2.11</p>
             </div>
             <div class="footer-section">
                 <h4>Links</h4>
@@ -464,7 +474,7 @@ <h4>Documentation</h4>
             </div>
         </div>
         <div class="footer-bottom">
-            <p>&copy; 2024 ReanimateMC. All rights reserved.</p>
+            <p>&copy; 2025 ReanimateMC. All rights reserved.</p>
         </div>
     </footer>
 

docs/assets/css/style.css

@@ -750,3 +750,170 @@ tbody tr:hover {
 .fade-in {
     animation: fadeIn 0.6s ease-out;
 }
+
+/* Dark Mode */
+[data-theme="dark"] {
+    --text-color: #e0e0e0;
+    --text-light: #a0a0a0;
+    --border-color: #444;
+    --shadow: 0 2px 10px rgba(0,0,0,0.3);
+    --shadow-hover: 0 4px 20px rgba(0,0,0,0.4);
+    --light-color: #3a3a3a;
+}
+
+[data-theme="dark"] body {
+    background-color: #1a1a2e;
+    color: var(--text-color);
+}
+
+[data-theme="dark"] .feature-card,
+[data-theme="dark"] .quick-start-step,
+[data-theme="dark"] .gameplay-item,
+[data-theme="dark"] .compatibility-card,
+[data-theme="dark"] .resource-card {
+    background: #16213e;
+    color: var(--text-color);
+}
+
+[data-theme="dark"] .bg-light {
+    background-color: #16213e;
+}
+
+[data-theme="dark"] table {
+    background: #16213e;
+}
+
+[data-theme="dark"] tbody tr:nth-child(even) {
+    background-color: #1e2a45;
+}
+
+[data-theme="dark"] tbody tr:hover {
+    background-color: #1a3a5c;
+}
+
+[data-theme="dark"] pre {
+    background-color: #0f0f1a;
+    border: 1px solid #333;
+}
+
+[data-theme="dark"] code {
+    background-color: #2a2a3e;
+    color: #e06c75;
+}
+
+[data-theme="dark"] .section-title {
+    color: #e0e0e0;
+}
+
+[data-theme="dark"] .feature-card h3,
+[data-theme="dark"] .gameplay-item h3,
+[data-theme="dark"] .compatibility-card h3 {
+    color: #e0e0e0;
+}
+
+[data-theme="dark"] .resource-card {
+    color: var(--text-color);
+}
+
+[data-theme="dark"] .resource-card h3 {
+    color: #e0e0e0;
+}
+
+[data-theme="dark"] .footer {
+    background-color: #0d0d1a;
+}
+
+/* Copy button for code blocks */
+.copy-btn {
+    position: absolute;
+    top: 0.5rem;
+    right: 0.5rem;
+    background: rgba(255,255,255,0.1);
+    border: 1px solid rgba(255,255,255,0.2);
+    color: #666;
+    padding: 0.3rem 0.6rem;
+    border-radius: 4px;
+    cursor: pointer;
+    font-size: 0.85rem;
+    transition: all 0.2s;
+    z-index: 1;
+}
+
+.copy-btn:hover {
+    background: rgba(0,0,0,0.1);
+    color: #333;
+}
+
+[data-theme="dark"] .copy-btn {
+    background: rgba(255,255,255,0.05);
+    color: #aaa;
+}
+
+[data-theme="dark"] .copy-btn:hover {
+    background: rgba(255,255,255,0.15);
+    color: #eee;
+}
+
+/* Dark mode toggle button */
+.dark-mode-toggle {
+    background: none;
+    border: 1px solid rgba(255,255,255,0.3);
+    color: white;
+    padding: 0.4rem 0.6rem;
+    border-radius: 5px;
+    cursor: pointer;
+    font-size: 1rem;
+    transition: all 0.2s;
+    margin-left: 0.5rem;
+}
+
+.dark-mode-toggle:hover {
+    background: rgba(255,255,255,0.2);
+}
+
+/* Smooth transitions for dark mode */
+body, .feature-card, .quick-start-step, .gameplay-item,
+.compatibility-card, .resource-card, table, pre, code {
+    transition: background-color 0.3s ease, color 0.3s ease;
+}
+
+/* Breadcrumb */
+.breadcrumb {
+    padding: 0.75rem 0;
+    margin-bottom: 1.5rem;
+    border-bottom: 1px solid var(--border-color);
+}
+
+.breadcrumb ol {
+    list-style: none;
+    display: flex;
+    align-items: center;
+    flex-wrap: wrap;
+    gap: 0.5rem;
+    padding: 0;
+    margin: 0;
+}
+
+.breadcrumb a {
+    color: var(--primary-color);
+    text-decoration: none;
+    font-size: 0.9rem;
+}
+
+.breadcrumb a:hover {
+    text-decoration: underline;
+}
+
+.breadcrumb-separator {
+    color: var(--text-light);
+    font-size: 0.75rem;
+}
+
+.breadcrumb-current {
+    color: var(--text-light);
+    font-size: 0.9rem;
+}
+
+[data-theme="dark"] .breadcrumb {
+    border-color: #333;
+}

docs/assets/js/main.js

@@ -1,20 +1,56 @@
 // Language switcher functionality
 function changeLanguage(lang) {
     const currentPage = window.location.pathname.split('/').pop() || 'index.html';
-    const pageName = currentPage.replace('.html', '');
+    const pageName = currentPage.replace('.html', '') || 'index';
 
     // Store language preference
     localStorage.setItem('preferredLanguage', lang);
 
+    // Detect if we're currently in a language subfolder
+    const currentPath = window.location.pathname;
+    const isInSubfolder = /\/(fr|es|de|it|ru|zh|kr|pt)\//.test(currentPath);
+    const prefix = isInSubfolder ? '../' : '';
+
     // Redirect to language-specific page
     if (lang !== 'en') {
-        window.location.href = `${lang}/${pageName}.html`;
+        window.location.href = prefix + lang + '/' + pageName + '.html';
     } else {
-        // English is the default, no subfolder
-        window.location.href = `${pageName}.html`;
+        window.location.href = prefix + pageName + '.html';
+    }
+}
+
+// Dark mode toggle
+function initDarkMode() {
+    const savedTheme = localStorage.getItem('theme') || 'light';
+    if (savedTheme === 'dark') {
+        document.documentElement.setAttribute('data-theme', 'dark');
+    }
+
+    const toggleBtn = document.getElementById('dark-mode-toggle');
+    if (toggleBtn) {
+        toggleBtn.addEventListener('click', function() {
+            const current = document.documentElement.getAttribute('data-theme');
+            const newTheme = current === 'dark' ? 'light' : 'dark';
+            document.documentElement.setAttribute('data-theme', newTheme);
+            localStorage.setItem('theme', newTheme);
+            updateDarkModeIcon(newTheme);
+        });
+        updateDarkModeIcon(savedTheme);
     }
 }
 
+function updateDarkModeIcon(theme) {
+    const toggleBtn = document.getElementById('dark-mode-toggle');
+    if (toggleBtn) {
+        const icon = toggleBtn.querySelector('i');
+        if (icon) {
+            icon.className = theme === 'dark' ? 'fas fa-sun' : 'fas fa-moon';
+        }
+    }
+}
+
+document.addEventListener('DOMContentLoaded', initDarkMode);
+
 // Set language selector to current language on page load
 document.addEventListener('DOMContentLoaded', function() {
     const preferredLang = localStorage.getItem('preferredLanguage') || 'en';
@@ -106,19 +142,30 @@ document.addEventListener('DOMContentLoaded', function() {
         });
     }
 
-    // Copy code blocks on click
-    document.querySelectorAll('pre code').forEach(block => {
-        block.addEventListener('click', function() {
-            const text = this.textContent;
+    // Add copy buttons to code blocks
+    document.querySelectorAll('pre').forEach(pre => {
+        const wrapper = document.createElement('div');
+        wrapper.style.position = 'relative';
+        pre.parentNode.insertBefore(wrapper, pre);
+        wrapper.appendChild(pre);
+
+        const copyBtn = document.createElement('button');
+        copyBtn.innerHTML = '<i class="fas fa-copy"></i>';
+        copyBtn.className = 'copy-btn';
+        copyBtn.title = 'Copy to clipboard';
+        copyBtn.addEventListener('click', function() {
+            const code = pre.querySelector('code');
+            const text = code ? code.textContent : pre.textContent;
             navigator.clipboard.writeText(text).then(function() {
-                // Show copied notification
-                const notification = document.createElement('div');
-                notification.textContent = 'Copied!';
-                notification.style.cssText = 'position:fixed;top:20px;right:20px;background:#27ae60;color:white;padding:1rem 2rem;border-radius:8px;z-index:9999;';
-                document.body.appendChild(notification);
-                setTimeout(() => notification.remove(), 2000);
+                copyBtn.innerHTML = '<i class="fas fa-check"></i>';
+                copyBtn.style.color = '#27ae60';
+                setTimeout(() => {
+                    copyBtn.innerHTML = '<i class="fas fa-copy"></i>';
+                    copyBtn.style.color = '';
+                }, 2000);
             });
         });
+        pre.appendChild(copyBtn);
     });
 });
 

docs/commands.html

@@ -25,6 +25,9 @@
                 <a href="npc-system.html">NPC System</a>
                 <a href="api.html">API</a>
             </div>
+            <button id="dark-mode-toggle" class="dark-mode-toggle" aria-label="Toggle dark mode">
+                <i class="fas fa-moon"></i>
+            </button>
             <div class="language-selector">
                 <i class="fas fa-globe"></i>
                 <select id="lang-select" onchange="changeLanguage(this.value)">
@@ -43,6 +46,13 @@
     </nav>
 
     <main class="container">
+        <nav class="breadcrumb" aria-label="Breadcrumb">
+            <ol>
+                <li><a href="index.html"><i class="fas fa-home"></i> Home</a></li>
+                <li class="breadcrumb-separator"><i class="fas fa-chevron-right"></i></li>
+                <li class="breadcrumb-current">Commands Reference</li>
+            </ol>
+        </nav>
         <section class="section">
             <h1 class="section-title">Commands Reference</h1>
             <p style="text-align: center; color: #7f8c8d; margin-bottom: 3rem;">
@@ -374,7 +384,7 @@ <h3>NPC Commands</h3>
             <div class="footer-section">
                 <h4>ReanimateMC</h4>
                 <p>A revolutionary Minecraft plugin by Jachou</p>
-                <p class="version">Version 1.2.02</p>
+                <p class="version">Version 1.2.11</p>
             </div>
             <div class="footer-section">
                 <h4>Links</h4>
@@ -395,7 +405,7 @@ <h4>Documentation</h4>
             </div>
         </div>
         <div class="footer-bottom">
-            <p>&copy; 2024 ReanimateMC. All rights reserved.</p>
+            <p>&copy; 2025 ReanimateMC. All rights reserved.</p>
         </div>
     </footer>
 

docs/configuration.html

@@ -25,6 +25,9 @@
                 <a href="npc-system.html">NPC System</a>
                 <a href="api.html">API</a>
             </div>
+            <button id="dark-mode-toggle" class="dark-mode-toggle" aria-label="Toggle dark mode">
+                <i class="fas fa-moon"></i>
+            </button>
             <div class="language-selector">
                 <i class="fas fa-globe"></i>
                 <select id="lang-select" onchange="changeLanguage(this.value)">
@@ -43,6 +46,13 @@
     </nav>
 
     <main class="container">
+        <nav class="breadcrumb" aria-label="Breadcrumb">
+            <ol>
+                <li><a href="index.html"><i class="fas fa-home"></i> Home</a></li>
+                <li class="breadcrumb-separator"><i class="fas fa-chevron-right"></i></li>
+                <li class="breadcrumb-current">Configuration Guide</li>
+            </ol>
+        </nav>
         <section class="section">
             <h1 class="section-title">Configuration Guide</h1>
             <p style="text-align: center; color: #7f8c8d; margin-bottom: 3rem;">
@@ -460,7 +470,7 @@ <h3>Balance</h3>
             <div class="footer-section">
                 <h4>ReanimateMC</h4>
                 <p>A revolutionary Minecraft plugin by Jachou</p>
-                <p class="version">Version 1.2.02</p>
+                <p class="version">Version 1.2.11</p>
             </div>
             <div class="footer-section">
                 <h4>Links</h4>
@@ -481,7 +491,7 @@ <h4>Documentation</h4>
             </div>
         </div>
         <div class="footer-bottom">
-            <p>&copy; 2024 ReanimateMC. All rights reserved.</p>
+            <p>&copy; 2025 ReanimateMC. All rights reserved.</p>
         </div>
     </footer>