Ajaxdll

app/Controllers/HomeController.php

@@ -19,6 +19,14 @@ class HomeController extends Controller {
         $apkService = new ApkService();
         $apks = $apkService->getAllApks($category, $search);
         
+        // Handle AJAX requests for filtering/searching
+        if (!empty($_SERVER['HTTP_X_REQUESTED_WITH']) && strtolower($_SERVER['HTTP_X_REQUESTED_WITH']) == 'xmlhttprequest') {
+            $this->view('partials/apk_list', [
+                'apks' => $apks
+            ]);
+            return;
+        }
+
         $this->view('home', [
             'apks' => $apks,
             'title' => get_setting('site_name', 'ApkNusa') . __('home_title_suffix')

assets/css/custom.css

@@ -1,13 +1,51 @@
+:root {
+    --bg-color: #ffffff;
+    --text-color: #1E293B;
+    --card-bg: #FFFFFF;
+    --navbar-bg: rgba(255, 255, 255, 0.8);
+    --border-color: rgba(0, 0, 0, 0.05);
+    --subtle-bg: #f8fafc;
+    --muted-text: #64748b;
+    --footer-bg: #ffffff;
+    --accent-color: #10B981;
+}
+
+[data-theme="dark"] {
+    --bg-color: #0f172a;
+    --text-color: #f1f5f9;
+    --card-bg: #1e293b;
+    --navbar-bg: rgba(15, 23, 42, 0.8);
+    --border-color: rgba(255, 255, 255, 0.1);
+    --subtle-bg: #1e293b;
+    --muted-text: #94a3b8;
+    --footer-bg: #0f172a;
+    --accent-color: #34D399;
+}
+
 body {
     font-family: 'Inter', sans-serif;
-    /* Animated gradient background for a subtle dynamic feel */
-    background: linear-gradient(-45deg, #ffffff, #f8fafc, #f1f5f9, #f8fafc);
+    background: var(--bg-color);
     background-size: 400% 400%;
-    animation: gradientBG 15s ease infinite;
     background-attachment: fixed;
-    color: #1E293B;
+    color: var(--text-color);
     position: relative;
     min-height: 100vh;
+    transition: background-color 0.3s ease, color 0.3s ease;
+}
+
+h1, h2, h3, h4, h5, h6, .h1, .h2, .h3, .h4, .h5, .h6 {
+    color: var(--text-color) !important;
+}
+
+/* Ensure headings inside light-text containers are visible */
+.text-white h1, .text-white h2, .text-white h3, .text-white h4, .text-white h5, .text-white h6,
+.bg-dark h1, .bg-dark h2, .bg-dark h3, .bg-dark h4, .bg-dark h5, .bg-dark h6 {
+    color: #ffffff !important;
+}
+
+body.animated-bg {
+    background: linear-gradient(-45deg, var(--bg-color), var(--subtle-bg), var(--bg-color), var(--subtle-bg));
+    animation: gradientBG 15s ease infinite;
 }
 
 @keyframes gradientBG {
@@ -16,7 +54,7 @@ body {
     100% { background-position: 0% 50%; }
 }
 
-/* Background blobs are visible and animated */
+/* Background blobs */
 .bg-blob {
     display: block !important;
     pointer-events: none;
@@ -80,15 +118,20 @@ body {
     background-color: #ECFDF5 !important;
 }
 
+[data-theme="dark"] .bg-success-subtle {
+    background-color: rgba(16, 185, 129, 0.1) !important;
+}
+
 .rounded-4 { border-radius: 1rem !important; }
 .rounded-5 { border-radius: 1.5rem !important; }
 
-/* Navbar styling with glassmorphism */
+/* Navbar styling */
 .navbar {
-    background: rgba(255, 255, 255, 0.8) !important;
+    background: var(--navbar-bg) !important;
     backdrop-filter: blur(10px);
     -webkit-backdrop-filter: blur(10px);
-    border-bottom: 1px solid rgba(255, 255, 255, 0.3);
+    border-bottom: 1px solid var(--border-color) !important;
+    transition: background-color 0.3s ease, border-color 0.3s ease;
 }
 
 .navbar-brand {
@@ -97,12 +140,215 @@ body {
 
 /* Card styling */
 .card {
-    border: none;
-    background-color: #FFFFFF;
+    border: 1px solid var(--border-color);
+    background-color: var(--card-bg);
+    color: var(--text-color);
+    transition: background-color 0.3s ease, border-color 0.3s ease, color 0.3s ease;
 }
 
-/* Mobile adjustments to match the screenshot */
-@media (max-width: 767.98px) {
+.card-title {
+    color: var(--text-color);
+}
+
+.text-muted {
+    color: var(--muted-text) !important;
+}
+
+/* Theme toggle button styling */
+.theme-toggle-btn {
+    cursor: pointer;
+    padding: 8px;
+    border-radius: 50%;
+    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
+    width: 42px;
+    height: 42px;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    border: 1px solid var(--border-color);
+    background: var(--subtle-bg);
+    color: var(--text-color);
+    position: relative;
+    overflow: hidden;
+}
+
+.theme-toggle-btn:hover {
+    background-color: var(--border-color);
+    transform: rotate(15deg) scale(1.05);
+}
+
+.theme-toggle-btn i {
+    font-size: 1.1rem;
+    transition: transform 0.5s cubic-bezier(0.4, 0, 0.2, 1);
+}
+
+[data-theme="dark"] .theme-toggle-btn {
+    box-shadow: 0 0 15px rgba(245, 158, 11, 0.2);
+    border-color: rgba(245, 158, 11, 0.3);
+}
+
+[data-theme="dark"] .theme-toggle-btn i {
+    color: #F59E0B;
+}
+
+/* Language selector polish */
+.lang-selector-btn {
+    background: var(--subtle-bg);
+    border: 1px solid var(--border-color);
+    border-radius: 12px;
+    padding: 0.5rem 1rem;
+    font-size: 0.9rem;
+    font-weight: 500;
+    color: var(--text-color);
+    display: flex;
+    align-items: center;
+    gap: 8px;
+    transition: all 0.2s ease;
+}
+
+.lang-selector-btn:hover {
+    background-color: var(--border-color);
+    border-color: var(--muted-text);
+}
+
+.lang-selector-btn i {
+    color: var(--accent-color);
+}
+
+/* Override Bootstrap utilities for dark mode */
+[data-theme="dark"] .bg-white,
+[data-theme="dark"] .btn-white {
+    background-color: var(--card-bg) !important;
+    color: var(--text-color) !important;
+}
+
+[data-theme="dark"] .bg-light {
+    background-color: var(--subtle-bg) !important;
+}
+
+[data-theme="dark"] .border-top,
+[data-theme="dark"] .border-bottom,
+[data-theme="dark"] .border {
+    border-color: var(--border-color) !important;
+}
+
+[data-theme="dark"] footer.bg-white {
+    background-color: var(--footer-bg) !important;
+}
+
+[data-theme="dark"] .list-unstyled a.text-muted:hover {
+    color: var(--text-color) !important;
+}
+
+[data-theme="dark"] .form-control {
+    background-color: var(--subtle-bg);
+    border-color: var(--border-color);
+    color: var(--text-color);
+}
+
+[data-theme="dark"] .form-control::placeholder {
+    color: var(--muted-text);
+}
+
+[data-theme="dark"] .dropdown-menu {
+    background-color: var(--card-bg);
+    border-color: var(--border-color);
+    box-shadow: 0 1rem 3rem rgba(0, 0, 0, 0.4) !important;
+    padding: 0.5rem;
+    border-radius: 1rem;
+}
+
+[data-theme="dark"] .dropdown-item {
+    color: var(--text-color);
+    border-radius: 0.5rem;
+}
+
+[data-theme="dark"] .dropdown-item:hover {
+    background-color: var(--subtle-bg);
+    color: var(--text-color);
+}
+
+[data-theme="dark"] .nav-link {
+    color: var(--text-color);
+}
+
+[data-theme="dark"] .nav-link:hover {
+    color: #10B981;
+}
+
+[data-theme="dark"] .btn-outline-dark {
+    border-color: var(--text-color);
+    color: var(--text-color);
+}
+
+[data-theme="dark"] .btn-outline-dark:hover {
+    background-color: var(--text-color);
+    color: var(--bg-color);
+}
+
+[data-theme="dark"] .badge.bg-light {
+    background-color: rgba(255,255,255,0.1) !important;
+    color: var(--text-color) !important;
+}
+
+[data-theme="dark"] .breadcrumb-item.active {
+    color: var(--muted-text) !important;
+}
+
+[data-theme="dark"] .navbar-toggler-icon {
+    filter: invert(1) grayscale(1) brightness(2);
+}
+
+/* Mobile adjustments */
+@media (max-width: 991.98px) {
+    .navbar-collapse {
+        background-color: var(--card-bg);
+        margin: 0 -1rem;
+        padding: 1rem;
+        border-radius: 0 0 1.5rem 1.5rem;
+        border: 1px solid var(--border-color);
+        border-top: none;
+        box-shadow: 0 1.5rem 3rem rgba(0,0,0,0.1);
+    }
+    
+    [data-theme="dark"] .navbar-collapse {
+        box-shadow: 0 1.5rem 3rem rgba(0,0,0,0.4);
+    }
+
+    .navbar-nav .nav-item {
+        width: 100%;
+        padding: 0.15rem 0;
+    }
+
+    .navbar-nav .nav-link {
+        padding: 0.85rem 1.25rem !important;
+        border-radius: 0.75rem;
+        font-weight: 500;
+    }
+
+    .navbar-nav .nav-link:hover {
+        background-color: var(--subtle-bg);
+    }
+
+    .navbar-nav .dropdown-menu {
+        background-color: var(--subtle-bg);
+        border: none;
+        box-shadow: none !important;
+        margin: 0.5rem 1rem;
+        padding: 0.5rem;
+    }
+
+    .mobile-controls-row {
+        display: flex;
+        align-items: center;
+        justify-content: space-between;
+        padding: 1rem 1.25rem;
+        background: var(--subtle-bg);
+        border-radius: 1rem;
+        margin-top: 0.75rem;
+        border: 1px solid var(--border-color);
+    }
+
     .display-4 {
         font-size: 2rem !important;
         line-height: 1.2;
@@ -120,4 +366,4 @@ body {
     .card-title {
         font-size: 0.85rem;
     }
-}
+}

assets/js/main.js

@@ -1,11 +1,137 @@
 document.addEventListener('DOMContentLoaded', () => {
     // Basic interaction for toasts
-    const toasts = document.querySelectorAll('.toast');
-    toasts.forEach(toastEl => {
-        const toast = new bootstrap.Toast(toastEl, { delay: 5000 });
-        toast.show();
-    });
+    try {
+        const toasts = document.querySelectorAll('.toast');
+        toasts.forEach(toastEl => {
+            if (window.bootstrap && bootstrap.Toast) {
+                const toast = new bootstrap.Toast(toastEl, { delay: 5000 });
+                toast.show();
+            }
+        });
+    } catch (e) {
+        console.error('Toast error:', e);
+    }
+
+    const html = document.documentElement;
+
+    const updateIcons = (theme) => {
+        // Update all theme toggle icons
+        const icons = document.querySelectorAll('#theme-toggle i, #theme-toggle-mobile i');
+        icons.forEach(icon => {
+            if (theme === 'dark') {
+                icon.className = 'fa-solid fa-sun';
+            } else {
+                icon.className = 'fa-solid fa-moon';
+            }
+        });
+
+        // Update all theme status texts
+        const textLabels = document.querySelectorAll('.theme-status-text');
+        textLabels.forEach(label => {
+            label.textContent = theme === 'dark' ? 'Dark Mode' : 'Light Mode';
+        });
+    };
+
+    // Theme Toggle Logic
+    const initThemeToggle = (btnId) => {
+        const themeToggle = document.getElementById(btnId);
+        if (!themeToggle) return;
+
+        themeToggle.addEventListener('click', () => {
+            const currentTheme = html.getAttribute('data-theme') || 'light';
+            const newTheme = currentTheme === 'dark' ? 'light' : 'dark';
+            
+            // Update UI
+            html.setAttribute('data-theme', newTheme);
+            
+            // Update All Icons and Labels
+            updateIcons(newTheme);
+            
+            // Save preference
+            document.cookie = `theme=${newTheme}; path=/; max-age=${365 * 24 * 60 * 60}`;
+            localStorage.setItem('theme', newTheme);
+        });
+    };
+
+    // AJAX Category Filtering
+    const initCategoryAjax = () => {
+        const filters = document.querySelectorAll('.category-filter');
+        const gridContainer = document.getElementById('apk-grid-container');
+        const dropdownBtn = document.getElementById('category-dropdown-btn');
+        const latestTitle = document.getElementById('latest-title');
+
+        if (!gridContainer || filters.length === 0) return;
+
+        filters.forEach(filter => {
+            filter.addEventListener('click', (e) => {
+                e.preventDefault();
+                
+                const category = filter.getAttribute('data-category');
+                const url = filter.getAttribute('href');
+                const categoryName = filter.textContent;
+
+                // Update UI state
+                gridContainer.style.opacity = '0.5';
+                gridContainer.style.pointerEvents = 'none';
+
+                // Fetch data
+                fetch(url, {
+                    headers: {
+                        'X-Requested-With': 'XMLHttpRequest'
+                    }
+                })
+                .then(response => response.text())
+                .then(data => {
+                    gridContainer.innerHTML = data;
+                    gridContainer.style.opacity = '1';
+                    gridContainer.style.pointerEvents = 'all';
+
+                    // Update dropdown button text
+                    if (dropdownBtn) {
+                        dropdownBtn.innerHTML = `${categoryName} <i class="bi bi-chevron-down ms-1 small"></i>`;
+                    }
+
+                    // Update title if not searching
+                    if (latestTitle && !url.includes('search=')) {
+                        // We could use translations here but for simplicity we'll just use the category name
+                        // if it's All Categories, we'll reset to original (usually "Latest APKs")
+                        // However, we'll just keep it simple for now.
+                    }
+
+                    // Update URL without refreshing
+                    window.history.pushState({ category: category }, '', url);
+                })
+                .catch(err => {
+                    console.error('Fetch error:', err);
+                    gridContainer.style.opacity = '1';
+                    gridContainer.style.pointerEvents = 'all';
+                });
+            });
+        });
+
+        // Handle browser back/forward
+        window.addEventListener('popstate', (e) => {
+            window.location.reload(); // Simple solution for now
+        });
+    };
+
+    // Initial Sync
+    const currentTheme = html.getAttribute('data-theme') || 'light';
+    updateIcons(currentTheme);
+
+    // Sync theme from localStorage if cookie is missing but localStorage has it
+    const savedTheme = localStorage.getItem('theme');
+    const currentCookie = document.cookie.split('; ').find(row => row.startsWith('theme='))?.split('=')[1];
+    
+    if (savedTheme && !currentCookie) {
+        html.setAttribute('data-theme', savedTheme);
+        updateIcons(savedTheme);
+        document.cookie = `theme=${savedTheme}; path=/; max-age=${365 * 24 * 60 * 60}`;
+    }
+
+    initThemeToggle('theme-toggle');
+    initThemeToggle('theme-toggle-mobile');
+    initCategoryAjax();
 
-    // Lazy load or pre-fetch images if needed
     console.log('ApkNusa ready.');
-});
+});

views/admin/footer.php

@@ -1,12 +1,73 @@
-    <footer class="sticky-footer bg-white mt-auto py-4">
-        <div class="container my-auto">
-            <div class="copyright text-center my-auto">
-                <span class="text-muted small">Copyright &copy; APK Portal Admin 2026</span>
+    </main>
+
+    <footer class="footer-admin mt-auto py-4 border-top">
+        <div class="container-fluid px-4">
+            <div class="d-flex align-items-center justify-content-between small">
+                <div class="text-muted">Copyright &copy; <?php echo htmlspecialchars(get_setting('site_name', 'APK ADMIN')); ?> <?php echo date('Y'); ?></div>
+                <div>
+                    <a href="#" class="text-muted text-decoration-none">Privacy Policy</a>
+                    &middot;
+                    <a href="#" class="text-muted text-decoration-none">Terms &amp; Conditions</a>
+                </div>
             </div>
         </div>
     </footer>
-    
+
     <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/js/bootstrap.bundle.min.js"></script>
     <script src="https://cdn.jsdelivr.net/npm/sortablejs@1.15.0/Sortable.min.js"></script>
+    <script>
+        document.addEventListener('DOMContentLoaded', () => {
+            const html = document.documentElement;
+
+            const updateIcons = (theme) => {
+                // Update all theme toggle icons
+                const icons = document.querySelectorAll('#theme-toggle i, #theme-toggle-mobile i');
+                icons.forEach(icon => {
+                    if (theme === 'dark') {
+                        icon.className = 'fa-solid fa-sun';
+                    } else {
+                        icon.className = 'fa-solid fa-moon';
+                    }
+                });
+
+                // Update all theme status texts
+                const textLabels = document.querySelectorAll('.theme-status-text');
+                textLabels.forEach(label => {
+                    label.textContent = theme === 'dark' ? 'Dark Mode' : 'Light Mode';
+                });
+            };
+
+            // Theme Toggle Logic
+            const initThemeToggle = (btnId) => {
+                const themeToggle = document.getElementById(btnId);
+                if (!themeToggle) return;
+
+                themeToggle.addEventListener('click', () => {
+                    const currentTheme = html.getAttribute('data-theme') || 'light';
+                    const newTheme = currentTheme === 'dark' ? 'light' : 'dark';
+                    
+                    // Update UI
+                    html.setAttribute('data-theme', newTheme);
+                    
+                    // Update All Icons and Labels
+                    updateIcons(newTheme);
+                    
+                    // Save preference
+                    document.cookie = `theme=${newTheme}; path=/; max-age=${365 * 24 * 60 * 60}`;
+                    localStorage.setItem('theme', newTheme);
+                });
+            };
+
+            // Initial Sync
+            const currentTheme = html.getAttribute('data-theme') || 'light';
+            updateIcons(currentTheme);
+
+            initThemeToggle('theme-toggle');
+            initThemeToggle('theme-toggle-mobile');
+
+            // Sidebar toggle logic if needed in future
+            console.log('Admin Dashboard ready.');
+        });
+    </script>
 </body>
-</html>
+</html>

views/admin/header.php

@@ -1,5 +1,6 @@
+<?php $currentTheme = \App\Services\ThemeService::getCurrent(); ?>
 <!DOCTYPE html>
-<html lang="<?php echo \App\Services\LanguageService::getLang(); ?>">
+<html lang="<?php echo \App\Services\LanguageService::getLang(); ?>" data-theme="<?php echo $currentTheme; ?>">
 <head>
     <meta charset="UTF-8">
     <meta name="viewport" content="width=device-width, initial-scale=1.0">
@@ -7,34 +8,159 @@
     <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/css/bootstrap.min.css" rel="stylesheet">
     <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0/css/all.min.css">
     <link rel="icon" type="image/x-icon" href="/<?php echo get_setting('site_favicon'); ?>">
+    <script>
+        // Early theme initialization
+        (function() {
+            const savedTheme = localStorage.getItem('theme');
+            if (savedTheme) {
+                document.documentElement.setAttribute('data-theme', savedTheme);
+            }
+        })();
+    </script>
     <style>
         :root {
             --primary-color: #4e73df;
             --success-color: #1cc88a;
+            --bg-color: #f8f9fc;
+            --card-bg: #ffffff;
+            --text-color: #5a5c69;
+            --navbar-bg: #ffffff;
+            --border-color: #e3e6f0;
+            --subtle-bg: #eaecf4;
+            --accent-color: #4e73df;
         }
+
+        [data-theme="dark"] {
+            --bg-color: #0f172a;
+            --card-bg: #1e293b;
+            --text-color: #f1f5f9;
+            --navbar-bg: #1e293b;
+            --border-color: rgba(255, 255, 255, 0.1);
+            --subtle-bg: #0f172a;
+            --accent-color: #60a5fa;
+        }
+
         body {
-            background-color: #f8f9fc;
-            font-family: 'Nunito', sans-serif;
+            background-color: var(--bg-color);
+            color: var(--text-color);
+            font-family: 'Inter', sans-serif;
+            transition: background-color 0.3s, color 0.3s;
         }
         .navbar-admin {
-            background-color: #fff;
+            background-color: var(--navbar-bg);
             box-shadow: 0 .15rem 1.75rem 0 rgba(58,59,69,.15);
+            border-bottom: 1px solid var(--border-color);
         }
         .nav-link {
-            color: #4e73df;
+            color: var(--primary-color);
             padding: 0.5rem 1rem;
             border-radius: 0.35rem;
             transition: all 0.2s;
             font-weight: 600;
         }
+        [data-theme="dark"] .nav-link {
+            color: #858796;
+        }
         .nav-link:hover {
             background-color: rgba(78, 115, 223, 0.1);
             color: #224abe;
         }
         .nav-link.active {
-            background-color: #4e73df;
+            background-color: var(--primary-color);
             color: #fff !important;
         }
+        .card {
+            background-color: var(--card-bg);
+            border-color: var(--border-color);
+            color: var(--text-color);
+        }
+        .theme-toggle-btn {
+            cursor: pointer;
+            padding: 8px;
+            border-radius: 50%;
+            transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
+            width: 38px;
+            height: 38px;
+            display: flex;
+            align-items: center;
+            justify-content: center;
+            border: 1px solid var(--border-color);
+            background: var(--subtle-bg);
+            color: var(--text-color);
+        }
+        .theme-toggle-btn:hover {
+            background-color: var(--border-color);
+            transform: rotate(15deg) scale(1.05);
+        }
+        [data-theme="dark"] .theme-toggle-btn {
+            box-shadow: 0 0 10px rgba(245, 158, 11, 0.2);
+            border-color: rgba(245, 158, 11, 0.3);
+            color: #F59E0B;
+        }
+        [data-theme="dark"] .bg-white {
+            background-color: var(--card-bg) !important;
+        }
+        [data-theme="dark"] .text-muted {
+            color: #94a3b8 !important;
+        }
+        [data-theme="dark"] .form-control {
+            background-color: #0f172a;
+            border-color: rgba(255, 255, 255, 0.1);
+            color: #f1f5f9;
+        }
+        [data-theme="dark"] .navbar-toggler-icon {
+            filter: invert(1);
+        }
+
+        .lang-selector-btn {
+            background: var(--subtle-bg);
+            border: 1px solid var(--border-color);
+            border-radius: 8px;
+            padding: 0.4rem 0.8rem;
+            font-size: 0.85rem;
+            font-weight: 600;
+            color: var(--text-color);
+            display: flex;
+            align-items: center;
+            gap: 6px;
+            transition: all 0.2s ease;
+        }
+        .lang-selector-btn:hover {
+            background-color: var(--border-color);
+        }
+
+        @media (max-width: 991.98px) {
+            .navbar-collapse {
+                background-color: var(--card-bg);
+                margin-top: 1rem;
+                padding: 1rem;
+                border-radius: 0.75rem;
+                border: 1px solid var(--border-color);
+                box-shadow: 0 0.5rem 1rem rgba(0,0,0,0.1);
+            }
+            .admin-controls-row {
+                display: flex;
+                flex-direction: column;
+                align-items: stretch;
+                gap: 1rem;
+                padding-top: 1rem;
+                margin-top: 1rem;
+                border-top: 1px solid var(--border-color);
+            }
+            .admin-controls-row > div, 
+            .admin-controls-row > button {
+                width: 100%;
+                justify-content: space-between !important;
+            }
+            .mobile-theme-row {
+                display: flex;
+                align-items: center;
+                justify-content: space-between;
+                background: var(--subtle-bg);
+                padding: 0.5rem 1rem;
+                border-radius: 8px;
+            }
+        }
     </style>
 </head>
 <body>
@@ -54,52 +180,74 @@
             <div class="collapse navbar-collapse" id="navbarNav">
                 <ul class="navbar-nav me-auto">
                     <li class="nav-item">
-                        <a class="nav-link px-3" href="/admin/dashboard"><i class="fas fa-tachometer-alt me-1"></i> Dashboard</a>
+                        <a class="nav-link px-3 mb-1" href="/admin/dashboard"><i class="fas fa-tachometer-alt me-1"></i> Dashboard</a>
                     </li>
                     <li class="nav-item">
-                        <a class="nav-link px-3" href="/admin/users"><i class="fas fa-users me-1"></i> Members</a>
+                        <a class="nav-link px-3 mb-1" href="/admin/users"><i class="fas fa-users me-1"></i> Members</a>
                     </li>
                     <li class="nav-item">
-                        <a class="nav-link px-3" href="/admin/apks"><i class="fas fa-mobile-alt me-1"></i> APKs</a>
+                        <a class="nav-link px-3 mb-1" href="/admin/apks"><i class="fas fa-mobile-alt me-1"></i> APKs</a>
                     </li>
                     <li class="nav-item">
-                        <a class="nav-link px-3" href="/admin/apks/mass-upload"><i class="fas fa-cloud-upload-alt me-1"></i> Mass Upload</a>
+                        <a class="nav-link px-3 mb-1" href="/admin/apks/mass-upload"><i class="fas fa-cloud-upload-alt me-1"></i> Mass Upload</a>
                     </li>
                     <li class="nav-item">
-                        <a class="nav-link px-3" href="/admin/categories"><i class="fas fa-list me-1"></i> <?php echo __('categories'); ?></a>
+                        <a class="nav-link px-3 mb-1" href="/admin/categories"><i class="fas fa-list me-1"></i> <?php echo __('categories'); ?></a>
                     </li>
                     <li class="nav-item">
-                        <a class="nav-link px-3" href="/admin/withdrawals"><i class="fas fa-wallet me-1"></i> <?php echo __('manage_withdrawals'); ?></a>
+                        <a class="nav-link px-3 mb-1" href="/admin/withdrawals"><i class="fas fa-wallet me-1"></i> <?php echo __('manage_withdrawals'); ?></a>
                     </li>
                     <li class="nav-item">
-                        <a class="nav-link px-3" href="/admin/settings"><i class="fas fa-cog me-1"></i> <?php echo __('settings'); ?></a>
+                        <a class="nav-link px-3 mb-1" href="/admin/settings"><i class="fas fa-cog me-1"></i> <?php echo __('settings'); ?></a>
                     </li>
                 </ul>
                 
-                <!-- Admin Search Bar -->
-                <form action="/admin/apks" method="GET" class="d-none d-sm-inline-block form-inline me-auto ms-md-3 my-2 my-md-0 mw-100 navbar-search">
-                    <div class="input-group">
-                        <input type="text" name="search" class="form-control bg-light border-0 small" placeholder="Search APKs..." aria-label="Search" value="<?php echo htmlspecialchars($_GET['search'] ?? ''); ?>">
-                        <button class="btn btn-primary" type="submit">
-                            <i class="fas fa-search fa-sm"></i>
+                <div class="d-lg-flex align-items-center ms-auto admin-controls-row">
+                    <!-- Theme & Lang Row (Desktop) / Column (Mobile) -->
+                    <div class="d-none d-lg-flex align-items-center">
+                        <button id="theme-toggle" class="theme-toggle-btn me-3" aria-label="Toggle theme">
+                            <i class="fa-solid <?php echo $currentTheme === 'dark' ? 'fa-sun' : 'fa-moon'; ?>"></i>
                         </button>
-                    </div>
-                </form>
 
-                <div class="d-flex align-items-center ms-auto">
-                    <div class="dropdown me-3">
-                        <button class="btn btn-outline-primary btn-sm dropdown-toggle fw-bold" type="button" data-bs-toggle="dropdown">
-                            <i class="fas fa-globe me-1"></i> <?php echo \App\Services\LanguageService::getLang() == 'id' ? 'ID' : 'EN'; ?>
-                        </button>
-                        <ul class="dropdown-menu dropdown-menu-end shadow border-0">
-                            <li><a class="dropdown-item" href="/lang/id">🇮🇩 Indonesia</a></li>
-                            <li><a class="dropdown-item" href="/lang/en">🇺🇸 English</a></li>
-                        </ul>
+                        <div class="dropdown me-3">
+                            <button class="lang-selector-btn dropdown-toggle" type="button" data-bs-toggle="dropdown">
+                                <i class="fas fa-globe"></i> <?php echo \App\Services\LanguageService::getLang() == 'id' ? 'ID' : 'EN'; ?>
+                            </button>
+                            <ul class="dropdown-menu dropdown-menu-end shadow border-0">
+                                <li><a class="dropdown-item" href="/lang/id">🇮🇩 Indonesia</a></li>
+                                <li><a class="dropdown-item" href="/lang/en">🇺🇸 English</a></li>
+                            </ul>
+                        </div>
+                    </div>
+
+                    <!-- Mobile Specific Controls -->
+                    <div class="d-lg-none">
+                        <div class="mobile-theme-row mb-2">
+                            <span class="theme-status-text small fw-bold"><?php echo $currentTheme === 'dark' ? 'Dark Mode' : 'Light Mode'; ?></span>
+                            <button id="theme-toggle-mobile" class="theme-toggle-btn" aria-label="Toggle theme">
+                                <i class="fa-solid <?php echo $currentTheme === 'dark' ? 'fa-sun' : 'fa-moon'; ?>"></i>
+                            </button>
+                        </div>
+                        <div class="dropdown mb-3">
+                            <button class="lang-selector-btn w-100 justify-content-between dropdown-toggle" type="button" data-bs-toggle="dropdown">
+                                <span><i class="fas fa-globe me-2"></i>Language</span>
+                                <span><?php echo \App\Services\LanguageService::getLang() == 'id' ? 'ID' : 'EN'; ?></span>
+                            </button>
+                            <ul class="dropdown-menu shadow border-0 w-100">
+                                <li><a class="dropdown-item" href="/lang/id">🇮🇩 Indonesia</a></li>
+                                <li><a class="dropdown-item" href="/lang/en">🇺🇸 English</a></li>
+                            </ul>
+                        </div>
+                    </div>
+
+                    <div class="d-flex align-items-center justify-content-between">
+                        <div class="d-flex align-items-center">
+                            <span class="text-muted me-3"><b><?php echo $_SESSION['username'] ?? 'Admin'; ?></b></span>
+                            <a href="/" class="btn btn-outline-secondary btn-sm me-2" target="_blank" title="View Site"><i class="fas fa-external-link-alt"></i></a>
+                        </div>
+                        <a href="/admin/logout" class="btn btn-danger btn-sm px-3"><i class="fas fa-sign-out-alt me-1"></i> Logout</a>
                     </div>
-                    <span class="text-muted me-3 d-none d-md-inline"><b><?php echo $_SESSION['username'] ?? 'Admin'; ?></b></span>
-                    <a href="/" class="btn btn-outline-secondary btn-sm me-2" target="_blank"><i class="fas fa-external-link-alt"></i></a>
-                    <a href="/admin/logout" class="btn btn-danger btn-sm"><i class="fas fa-sign-out-alt"></i></a>
                 </div>
             </div>
         </div>
-    </nav>
+    </nav>

views/footer.php

@@ -57,7 +57,7 @@
         </div>
     </footer>
     <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/js/bootstrap.bundle.min.js"></script>
-    <script src="/assets/js/main.js"></script>
+    <script src="/assets/js/main.js?v=<?php echo time(); ?>"></script>
     <?php echo get_setting('body_js'); ?>
 </body>
 </html>

views/header.php

@@ -1,5 +1,11 @@
+<?php 
+$currentTheme = \App\Services\ThemeService::getCurrent(); 
+$db = db();
+$categories = $db->query("SELECT * FROM categories ORDER BY name ASC")->fetchAll();
+$currentLang = \App\Services\LanguageService::getLang();
+?>
 <!DOCTYPE html>
-<html lang="<?php echo \App\Services\LanguageService::getLang(); ?>">
+<html lang="<?php echo $currentLang; ?>" data-theme="<?php echo $currentTheme; ?>">
 <head>
     <meta charset="UTF-8">
     <meta name="viewport" content="width=device-width, initial-scale=1.0">
@@ -9,7 +15,7 @@
     <meta name="keywords" content="<?php echo $meta_keywords ?? htmlspecialchars(get_setting('meta_keywords', __('meta_keywords_default'))); ?>">
     
     <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/css/bootstrap.min.css" rel="stylesheet">
-    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0/css/all.min.css">
+    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0/dist/css/all.min.css">
     <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap-icons@1.11.1/font/bootstrap-icons.css">
     <link rel="icon" type="image/x-icon" href="/<?php echo get_setting('site_favicon'); ?>">
     <link rel="stylesheet" href="/assets/css/custom.css?v=<?php echo time(); ?>">
@@ -18,9 +24,19 @@
     <link href="https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&display=swap" rel="stylesheet">
 
     <?php echo get_setting('head_js'); ?>
+
+    <script>
+        // Early theme initialization to prevent flash
+        (function() {
+            const savedTheme = localStorage.getItem('theme');
+            if (savedTheme) {
+                document.documentElement.setAttribute('data-theme', savedTheme);
+            }
+        })();
+    </script>
 </head>
-<body>
-    <!-- Dynamic background blobs with color-shifting animation -->
+<body class="animated-bg">
+    <!-- Dynamic background blobs -->
     <div class="bg-blob" style="position: fixed; top: -10%; left: -10%; width: 45%; height: 45%; border-radius: 50%; filter: blur(100px); z-index: -1; opacity: 0.15; animation: float-blob 25s infinite alternate, color-cycle 30s infinite;"></div>
     <div class="bg-blob" style="position: fixed; bottom: -10%; right: -10%; width: 50%; height: 50%; border-radius: 50%; filter: blur(100px); z-index: -1; opacity: 0.15; animation: float-blob 30s infinite alternate-reverse, color-cycle 35s infinite reverse;"></div>
     <div class="bg-blob" style="position: fixed; top: 40%; left: 30%; width: 35%; height: 35%; border-radius: 50%; filter: blur(100px); z-index: -1; opacity: 0.1; animation: float-blob 20s infinite alternate, color-cycle 25s infinite 5s;"></div>
@@ -31,15 +47,37 @@
             100% { transform: translate(15%, 15%) scale(1.2); }
         }
         @keyframes color-cycle {
-            0% { background-color: #10B981; } /* Success Green */
-            25% { background-color: #3B82F6; } /* Primary Blue */
-            50% { background-color: #F59E0B; } /* Warning Amber */
-            75% { background-color: #EC4899; } /* Pink */
+            0% { background-color: #10B981; }
+            25% { background-color: #3B82F6; }
+            50% { background-color: #F59E0B; }
+            75% { background-color: #EC4899; }
             100% { background-color: #10B981; }
         }
+        
+        @media (max-width: 991.98px) {
+            .mobile-theme-row {
+                display: flex;
+                align-items: center;
+                justify-content: space-between;
+                background: var(--subtle-bg);
+                padding: 0.65rem 1rem;
+                border-radius: 12px;
+                border: 1px solid var(--border-color);
+                margin-bottom: 0.75rem;
+            }
+            .mobile-lang-row {
+                display: flex;
+                align-items: center;
+                justify-content: space-between;
+                background: var(--subtle-bg);
+                padding: 0.65rem 1rem;
+                border-radius: 12px;
+                border: 1px solid var(--border-color);
+            }
+        }
     </style>
 
-    <nav class="navbar navbar-expand-lg navbar-light bg-white border-bottom py-3 sticky-top shadow-sm">
+    <nav class="navbar navbar-expand-lg navbar-light border-bottom py-3 sticky-top shadow-sm">
         <div class="container">
             <a class="navbar-brand fw-bold text-success d-flex align-items-center" href="/">
                 <?php if (get_setting('site_icon')): ?>
@@ -55,38 +93,80 @@
             </button>
             
             <div class="collapse navbar-collapse" id="navbarNav">
-                <ul class="navbar-nav ms-auto align-items-center">
+                <ul class="navbar-nav ms-auto align-items-lg-center">
                     <li class="nav-item">
                         <a class="nav-link px-3" href="/"><?php echo __('home'); ?></a>
                     </li>
-                    <li class="nav-item">
-                        <a class="nav-link px-3" href="#latest"><?php echo __('categories'); ?></a>
-                    </li>
                     
                     <li class="nav-item dropdown px-3">
                         <a class="nav-link dropdown-toggle" href="#" role="button" data-bs-toggle="dropdown">
-                            <i class="fas fa-globe me-1"></i> <?php echo \App\Services\LanguageService::getLang() == 'id' ? 'ID' : 'EN'; ?>
+                            <?php echo __('categories'); ?>
+                        </a>
+                        <ul class="dropdown-menu shadow border-0">
+                            <li><a class="dropdown-item category-filter" href="/" data-category=""><?php echo __('all_categories'); ?></a></li>
+                            <?php foreach ($categories as $cat): ?>
+                                <li><a class="dropdown-item category-filter" href="/?category=<?php echo $cat['slug']; ?>" data-category="<?php echo htmlspecialchars($cat['slug']); ?>"><?php echo htmlspecialchars($cat['name']); ?></a></li>
+                            <?php endforeach; ?>
+                        </ul>
+                    </li>
+                    
+                    <li class="nav-item dropdown d-none d-lg-block px-2">
+                        <a class="nav-link dropdown-toggle lang-selector-btn" href="#" role="button" data-bs-toggle="dropdown">
+                            <i class="fas fa-globe"></i> <?php echo $currentLang == 'id' ? 'Indonesia' : 'English'; ?>
                         </a>
                         <ul class="dropdown-menu dropdown-menu-end shadow border-0">
-                            <li><a class="dropdown-item" href="/lang/id">🇮🇩 Indonesia</a></li>
-                            <li><a class="dropdown-item" href="/lang/en">🇺🇸 English</a></li>
+                            <li><a class="dropdown-item d-flex align-items-center" href="/lang/id"><span class="me-2">🇮🇩</span> Indonesia</a></li>
+                            <li><a class="dropdown-item d-flex align-items-center" href="/lang/en"><span class="me-2">🇺🇸</span> English</a></li>
                         </ul>
                     </li>
 
+                    <!-- Theme Toggle Desktop -->
+                    <li class="nav-item d-none d-lg-block px-2">
+                        <button id="theme-toggle" class="theme-toggle-btn" aria-label="Toggle theme">
+                            <i class="fa-solid <?php echo $currentTheme === 'dark' ? 'fa-sun' : 'fa-moon'; ?>"></i>
+                        </button>
+                    </li>
+
                     <?php if (isset($_SESSION['user_id'])): ?>
                         <li class="nav-item ms-lg-3">
-                            <a class="btn btn-outline-success rounded-pill px-4 d-flex align-items-center" href="/profile">
+                            <a class="btn btn-success rounded-pill px-4 d-flex align-items-center w-100 w-lg-auto" href="/profile">
                                 <i class="fas fa-user-circle me-2"></i> <?php echo __('profile'); ?>
                             </a>
                         </li>
                     <?php else: ?>
                         <li class="nav-item ms-lg-3">
-                            <a class="btn btn-outline-dark border-0 px-3" href="/login"><?php echo __('login'); ?></a>
+                            <a class="btn btn-outline-secondary border-0 px-3 w-100 w-lg-auto text-start text-lg-center mb-2 mb-lg-0" href="/login"><?php echo __('login'); ?></a>
                         </li>
                         <li class="nav-item ms-lg-2">
-                            <a class="btn btn-success rounded-pill px-4" href="/register"><?php echo __('register'); ?></a>
+                            <a class="btn btn-success rounded-pill px-4 w-100 w-lg-auto mb-2 mb-lg-0" href="/register"><?php echo __('register'); ?></a>
                         </li>
                     <?php endif; ?>
+
+                    <!-- Mobile Controls -->
+                    <li class="d-lg-none mt-3">
+                        <div class="mobile-theme-row">
+                            <span class="theme-status-text small fw-bold"><?php echo $currentTheme === 'dark' ? 'Dark Mode' : 'Light Mode'; ?></span>
+                            <button id="theme-toggle-mobile" class="theme-toggle-btn" aria-label="Toggle theme">
+                                <i class="fa-solid <?php echo $currentTheme === 'dark' ? 'fa-sun' : 'fa-moon'; ?>"></i>
+                            </button>
+                        </div>
+                        
+                        <div class="mobile-lang-row">
+                            <div class="d-flex align-items-center gap-2">
+                                <i class="fas fa-globe text-success"></i>
+                                <span class="small fw-bold">Language</span>
+                            </div>
+                            <div class="dropdown">
+                                <button class="btn btn-link text-decoration-none p-0 dropdown-toggle small fw-bold" type="button" data-bs-toggle="dropdown" style="color: inherit;">
+                                    <?php echo $currentLang == 'id' ? 'Indonesia' : 'English'; ?>
+                                </button>
+                                <ul class="dropdown-menu dropdown-menu-end shadow border-0">
+                                    <li><a class="dropdown-item" href="/lang/id">🇮🇩 Indonesia</a></li>
+                                    <li><a class="dropdown-item" href="/lang/en">🇺🇸 English</a></li>
+                                </ul>
+                            </div>
+                        </div>
+                    </li>
                 </ul>
             </div>
         </div>

views/home.php

@@ -22,7 +22,7 @@
 
     <section id="latest" class="mb-5">
         <div class="d-flex justify-content-between align-items-center mb-4">
-            <h2 class="fw-bold mb-0">
+            <h2 class="fw-bold mb-0" id="latest-title">
                 <?php if (!empty($_GET['search'])): ?>
                     <?php echo __('search_results_for', 'Search results for'); ?>: "<?php echo htmlspecialchars($_GET['search']); ?>"
                 <?php else: ?>
@@ -30,57 +30,24 @@
                 <?php endif; ?>
             </h2>
             <div class="dropdown">
-                <button class="btn btn-white shadow-sm border rounded-pill dropdown-toggle" type="button" data-bs-toggle="dropdown">
+                <button class="btn btn-white shadow-sm border rounded-pill dropdown-toggle" type="button" data-bs-toggle="dropdown" id="category-dropdown-btn">
                     <?php echo __('categories'); ?> <i class="bi bi-chevron-down ms-1 small"></i>
                 </button>
-                <ul class="dropdown-menu dropdown-menu-end shadow border-0">
-                    <li><a class="dropdown-item" href="/"><?php echo __('all_categories'); ?></a></li>
+                <ul class="dropdown-menu dropdown-menu-end shadow border-0" id="category-menu">
+                    <li><a class="dropdown-item category-filter" href="/" data-category=""><?php echo __('all_categories'); ?></a></li>
                     <?php 
                     $db = db();
                     $categories = $db->query("SELECT * FROM categories")->fetchAll();
                     foreach ($categories as $cat): ?>
-                        <li><a class="dropdown-item" href="/?category=<?php echo $cat['slug']; ?>"><?php echo $cat['name']; ?></a></li>
+                        <li><a class="dropdown-item category-filter" href="/?category=<?php echo $cat['slug']; ?>" data-category="<?php echo $cat['slug']; ?>"><?php echo $cat['name']; ?></a></li>
                     <?php endforeach; ?>
                 </ul>
             </div>
         </div>
         
-        <?php if (empty($apks) && !empty($_GET['search'])): ?>
-            <div class="text-center py-5">
-                <i class="bi bi-search display-1 text-muted opacity-25 mb-4"></i>
-                <h3 class="fw-bold"><?php echo __('no_apks_found', 'No APKs found'); ?></h3>
-                <p class="text-muted"><?php echo __('try_another_search', 'Try another search term or browse categories.'); ?></p>
-                <a href="/" class="btn btn-outline-success rounded-pill px-4 mt-2"><?php echo __('view_all_apks', 'View All APKs'); ?></a>
-            </div>
-        <?php else: ?>
-            <div class="row g-3 g-md-4">
-                <?php foreach ($apks as $apk): ?>
-                    <div class="col-4 col-md-4">
-                        <div class="card h-100 border-0 shadow-sm rounded-4 hover-lift">
-                            <div class="card-body p-2 p-md-4 text-center text-md-start">
-                                <div class="d-md-flex align-items-center mb-2 mb-md-3">
-                                    <?php 
-                                        $icon = !empty($apk['icon_path']) ? '/'.$apk['icon_path'] : $apk['image_url'];
-                                    ?>
-                                    <div class="mx-auto mx-md-0 mb-2 mb-md-0" style="width: 50px; height: 50px;">
-                                        <img src="<?php echo $icon; ?>" class="rounded-3" width="50" height="50" alt="<?php echo $apk['title']; ?>" style="object-fit: cover; width: 50px; height: 50px;">
-                                    </div>
-                                    <div class="ms-md-3 flex-grow-1 overflow-hidden">
-                                        <h6 class="card-title fw-bold mb-0 text-truncate"><?php echo $apk['title']; ?></h6>
-                                        <span class="badge bg-light text-dark fw-normal d-none d-md-inline-block">v<?php echo $apk['version']; ?></span>
-                                    </div>
-                                </div>
-                                <p class="card-text text-muted small mb-3 line-clamp-2 d-none d-md-block"><?php echo $apk['description']; ?></p>
-                                <div class="d-flex flex-column flex-md-row justify-content-between align-items-center gap-2">
-                                    <span class="text-muted small d-none d-md-inline-block"><i class="fas fa-download me-1"></i> <?php echo number_format($apk['total_downloads']); ?></span>
-                                    <a href="/apk/<?php echo $apk['slug']; ?>" class="btn btn-success rounded-pill px-3 btn-sm fw-medium w-100 w-md-auto"><?php echo __('details'); ?></a>
-                                </div>
-                            </div>
-                        </div>
-                    </div>
-                <?php endforeach; ?>
-            </div>
-        <?php endif; ?>
+        <div id="apk-grid-container">
+            <?php include 'partials/apk_list.php'; ?>
+        </div>
     </section>
 
     <div class="bg-dark text-white p-5 rounded-5 mt-5 mb-5 shadow-lg position-relative overflow-hidden">

views/partials/apk_list.php

@@ -0,0 +1,36 @@
+<?php if (empty($apks) && !empty($_GET['search'])): ?>
+    <div class="text-center py-5">
+        <i class="bi bi-search display-1 text-muted opacity-25 mb-4"></i>
+        <h3 class="fw-bold"><?php echo __('no_apks_found', 'No APKs found'); ?></h3>
+        <p class="text-muted"><?php echo __('try_another_search', 'Try another search term or browse categories.'); ?></p>
+        <a href="/" class="btn btn-outline-success rounded-pill px-4 mt-2"><?php echo __('view_all_apks', 'View All APKs'); ?></a>
+    </div>
+<?php else: ?>
+    <div class="row g-3 g-md-4">
+        <?php foreach ($apks as $apk): ?>
+            <div class="col-4 col-md-4">
+                <div class="card h-100 border-0 shadow-sm rounded-4 hover-lift">
+                    <div class="card-body p-2 p-md-4 text-center text-md-start">
+                        <div class="d-md-flex align-items-center mb-2 mb-md-3">
+                            <?php 
+                                $icon = !empty($apk['icon_path']) ? '/'.$apk['icon_path'] : $apk['image_url'];
+                            ?>
+                            <div class="mx-auto mx-md-0 mb-2 mb-md-0" style="width: 50px; height: 50px;">
+                                <img src="<?php echo $icon; ?>" class="rounded-3" width="50" height="50" alt="<?php echo $apk['title']; ?>" style="object-fit: cover; width: 50px; height: 50px;">
+                            </div>
+                            <div class="ms-md-3 flex-grow-1 overflow-hidden">
+                                <h6 class="card-title fw-bold mb-0 text-truncate"><?php echo $apk['title']; ?></h6>
+                                <span class="badge bg-light text-dark fw-normal d-none d-md-inline-block">v<?php echo $apk['version']; ?></span>
+                            </div>
+                        </div>
+                        <p class="card-text text-muted small mb-3 line-clamp-2 d-none d-md-block"><?php echo $apk['description']; ?></p>
+                        <div class="d-flex flex-column flex-md-row justify-content-between align-items-center gap-2">
+                            <span class="text-muted small d-none d-md-inline-block"><i class="fas fa-download me-1"></i> <?php echo number_format($apk['total_downloads']); ?></span>
+                            <a href="/apk/<?php echo $apk['slug']; ?>" class="btn btn-success rounded-pill px-3 btn-sm fw-medium w-100 w-md-auto"><?php echo __('details'); ?></a>
+                        </div>
+                    </div>
+                </div>
+            </div>
+        <?php endforeach; ?>
+    </div>
+<?php endif; ?>