update

static/css/colors.css

@@ -1,122 +0,0 @@
-:root {
-    --light-background: #f0f0f0;
-    --dark-background: #121212;
-    --light-title-text: #e0e0e0;
-    --light-icons: #333;
-    --dark-title-text: #e0e0e0;
-    --dark-icons: #e0e0e0;
-    --light-header: #3f51b5;
-    --light-group-text: #3f51b5;
-    --light-router-title: #3f51b5;
-    --dark-header: #1e1e1e;
-    --light-border: #3f51b5;
-    --dark-border: #bb86fc;
-    --dark-group-text: #bb86fc;
-    --dark-router-title: #bb86fc;
-    --light-icon-bg: rgba(240, 240, 240, 0.2);
-    --dark-icon-bg: rgba(224, 224, 224, 0.2);
-    --light-icon-hover-bg: rgba(240, 240, 240, 0.4);
-    --dark-icon-hover-bg: rgba(224, 224, 224, 0.4);
-    --light-router-bg: white;
-    --dark-router-bg: #1e1e1e;
-    --light-router-hover-shadow: rgba(0, 0, 0, 0.2);
-    --light-router-text: #666;
-    --dark-router-text: #e0e0e0;
-    --dark-router-hover-shadow: rgba(255, 255, 255, 0.2);
-}
-
-body {
-    background-color: var(--light-background);
-    color: var(--light-title-text);
-}
-
-.dark-mode {
-    background-color: var(--dark-background);
-    color: var(--dark-title-text);
-}
-
-.header {
-    background-color: var(--light-header);
-}
-
-.dark-mode .header {
-    background-color: var(--dark-header);
-}
-
-.icon-button {
-    background-color: var(--light-icon-bg);
-    border: 1px solid var(--light-border);
-    color: var(--light-icons);
-}
-
-.icon-button:hover {
-    background-color: var(--light-icon-hover-bg);
-}
-
-.dark-mode .icon-button {
-    background-color: var(--dark-icon-bg);
-    border: 1px solid var(--dark-border);
-    color: var(--dark-icons);
-}
-
-.dark-mode .icon-button:hover {
-    background-color: var(--dark-icon-hover-bg);
-}
-
-.group h2 {
-    color: var(--light-group-text);
-}
-
-.dark-mode .group h2 {
-    color: var(--dark-group-text);
-}
-
-.router {
-    background-color: var(--light-router-bg);
-    color: var(--light-router-text);
-}
-
-.router:hover {
-    box-shadow: 0 4px 8px var(--light-router-hover-shadow);
-}
-
-.router h2 {
-    color: var(--light-router-title);
-}
-
-.dark-mode .router h2 {
-    color: var(--dark-router-title);
-}
-
-.dark-mode .router {
-    background-color: var(--dark-router-bg);
-    color: var(--dark-router-text);
-}
-
-.dark-mode .router:hover {
-    box-shadow: 0 4px 8px var(--dark-router-hover-shadow);
-}
-
-.group-title .fa {
-    color: var(--light-group-text);
-}
-
-.dark-mode .group-title .fa {
-    color: var(--dark-group-text);
-}
-
-.settings-menu .fa {
-    color: var(--light-icons);
-}
-
-.dark-mode .settings-menu .fa {
-    color: var(--dark-icons);
-}
-.router svg {
-    font-size: 26px;
-    color: var(--light-router-title);
-}
-
-.dark-mode .router svg {
-    color: var(--dark-router-title);
-}

static/css/components.css

@@ -9,6 +9,7 @@
     margin: 0;
     flex-grow: 1;
     text-align: center;
+    font-size: 2em;
 }
 
 .settings {
@@ -41,13 +42,14 @@
 }
 
 .group {
-    margin-bottom: 20px;  /* Reduced margin between groups */
+    margin-bottom: 15px;  /* Reduced margin between groups */
 }
 
 .group-title {
     display: inline-block;
     cursor: pointer;
     margin-top: 10px;  /* Reduced margin above group title */
+    margin-left: 15px;
 }
 
 .group-icon {
@@ -89,34 +91,139 @@
     margin: 0;
 }
 
+.router div {
+    overflow: hidden;
+}
+
 .router p {
     font-size: 14px;
     margin: 5px 0 0;
+    white-space: nowrap;
+    overflow: hidden;
+    text-overflow: ellipsis;
 }
 
 .content {
     padding: 20px;  /* Added padding to the left and right of the webpage */
+    padding-bottom: 60px
+}
+
+/* List mode styles */
+.list-mode .content {
+    display: flex;
+    flex-wrap: wrap;
+}
+
+.list-mode .group {
+    display: flex;
+    flex-direction: column;
+    flex: 1 1 calc(33.333% - 40px);  /* Adjusted for new margin */
+    max-width: calc(33.333% - 40px);  /* Adjusted for new margin */
+    margin: 0 15px 15px 15px;
+}
+
+.list-mode .group-title {
+    margin-left: 0;
+}
+
+.list-mode .router-container {
+    flex-direction: column;
+    flex-wrap: nowrap;
+}
+
+.list-mode .router {
+    max-width: 100%;
+    margin: 1px 0;  /* Adjusted margin between routers */
+}
+
+.router:first-child {
+    margin-top: 15px;  /* Adjusted margin between routers */
+}
+
+.footer {
+    position: fixed;
+    bottom: 0;
+    width: 100%;
+    padding: 10px 0;
+    box-shadow: 0 -2px 4px rgba(0, 0, 0, 0.1);
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    z-index: 1000;
+}
+
+.search-bar {
+    display: flex;
+    align-items: center;
+    width: 100%;
+    max-width: 600px;
+    border-radius: 20px;
+    padding: 5px 10px;
+    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
+    margin: 0 20px;
+}
+
+
+.search-bar i {
+    margin-right: 10px;
+}
+
+#clear-search, #start-search {
+    cursor: pointer;
+}
+
+.search-bar input {
+    width: 100%;
+    border: none;
+    background: none;
+    outline: none;
+    text-align: center;
+    font-weight: bold;
 }
 
 /* Responsive Design */
 @media (max-width: 1024px) {
-    .router {
+    body:not(.list-mode) .router {
+        flex: 1 1 calc(50% - 40px);  /* Adjusted for new margin */
+        max-width: calc(50% - 40px);  /* Adjusted for new margin */
+    }
+
+    .list-mode .group {
         flex: 1 1 calc(50% - 40px);  /* Adjusted for new margin */
         max-width: calc(50% - 40px);  /* Adjusted for new margin */
     }
 }
 
 @media (max-width: 768px) {
-    .router {
+    body:not(.list-mode) .router {
         flex: 1 1 calc(50% - 40px);  /* Adjusted for new margin */
         max-width: calc(50% - 40px);  /* Adjusted for new margin */
     }
+
+    .list-mode .group {
+        flex: 1 1 calc(50% - 40px);  /* Adjusted for new margin */
+        max-width: calc(50% - 40px);  /* Adjusted for new margin */
+    }
+    .header h1 {
+        font-size: 1.8em;
+    }
 }
 
 @media (max-width: 480px) {
-    .router {
+    body:not(.list-mode) .router {
         flex: 1 1 100%;
         max-width: 100%;
     }
+
+    .list-mode .group {
+        flex: 1 1 100%;
+        max-width: 100%;
+    }
+    .router:first-child {
+        margin-top: 1px;  /* Adjusted margin between routers */
+    }
+    .header h1 {
+        font-size: 1.5em;
+    }
 }
 

static/css/styles.css

@@ -1,5 +1,5 @@
 body {
-    font-family: Arial, sans-serif;
+    font-family: 'Helvetica', 'Arial', sans-serif;
     margin: 0;
     transition: background-color 0.3s, color 0.3s;
 }
@@ -34,4 +34,10 @@ body {
     transition: box-shadow 0.3s ease;
     box-sizing: border-box;
 }
-
+/* Custom scrollbar for webkit browsers */
+body::-webkit-scrollbar {
+    width: 8px;
+    height: 8px;
+    overflow: visible;
+    display: none;
+}

static/js/scripts.js

@@ -1,4 +1,8 @@
+let initialWindowHeight;
+
 document.addEventListener("DOMContentLoaded", function() {
+    initialWindowHeight = window.innerHeight;
+
     if (localStorage.getItem("dark-mode") === "true") {
         document.body.classList.add("dark-mode");
         document.getElementById('theme-icon').classList.remove('fa-moon');
@@ -8,6 +12,15 @@ document.addEventListener("DOMContentLoaded", function() {
         document.getElementById('theme-icon').classList.add('fa-moon');
     }
 
+    if (localStorage.getItem("view-mode") === "list") {
+        document.body.classList.add("list-mode");
+        document.getElementById('view-mode-icon').classList.remove('fa-list');
+        document.getElementById('view-mode-icon').classList.add('fa-table');
+    } else {
+        document.getElementById('view-mode-icon').classList.remove('fa-table');
+        document.getElementById('view-mode-icon').classList.add('fa-list');
+    }
+
     document.querySelectorAll('.group').forEach(group => {
         const groupName = group.id;
         const collapsed = group.dataset.collapsed === 'true';
@@ -24,8 +37,30 @@ document.addEventListener("DOMContentLoaded", function() {
             settingsMenu.classList.remove('visible');
         }
     });
+
+    const searchInput = document.getElementById('search-input');
+    searchInput.addEventListener('input', handleSearch);
+    searchInput.addEventListener('keydown', handleKeyDown);
+
+    document.addEventListener('keydown', function(event) {
+        if (event.key === '/') {
+            event.preventDefault();
+            searchInput.focus();
+        }
+        if (event.key === 'Escape' || event.key === 'Esc') {
+            event.preventDefault();
+            clearSearch();
+            searchInput.blur();
+        }
+    });
+
+    window.visualViewport.addEventListener('resize', adjustFooterPosition);
 });
 
+function searchFocus() {
+    document.getElementById('search-input').focus()
+}
+
 function toggleDarkMode() {
     document.body.classList.toggle("dark-mode");
     const themeIcon = document.getElementById('theme-icon');
@@ -56,3 +91,171 @@ function refreshData() {
     location.reload();
 }
 
+function toggleViewMode() {
+    document.body.classList.toggle("list-mode");
+    const viewModeIcon = document.getElementById('view-mode-icon');
+    if (document.body.classList.contains("list-mode")) {
+        localStorage.setItem("view-mode", "list");
+        viewModeIcon.classList.remove('fa-list');
+        viewModeIcon.classList.add('fa-table');
+    } else {
+        localStorage.setItem("view-mode", "box");
+        viewModeIcon.classList.remove('fa-table');
+        viewModeIcon.classList.add('fa-list');
+    }
+}
+
+let selectedRouterIndex = -1;
+
+function handleSearch(event) {
+    const query = event.target.value.toLowerCase();
+    const groups = document.querySelectorAll('.group');
+    const content = document.getElementById('content');
+
+    // Remove the search group if it exists
+    let searchGroup = document.getElementById('search-group');
+    if (searchGroup) {
+        searchGroup.remove();
+    }
+
+    if (query === '') {
+        // Show all original groups
+        groups.forEach(group => group.style.display = '');
+        selectedRouterIndex = -1;
+    } else {
+        // Hide all original groups
+        groups.forEach(group => group.style.display = 'none');
+
+        // Create and show the search group
+        searchGroup = document.createElement('div');
+        searchGroup.id = 'search-group';
+        searchGroup.className = 'group';
+        content.appendChild(searchGroup);
+
+        searchGroup.innerHTML = `
+            <h2 class="group-title"><i class="fas fa-search"></i> ${query}</h2>
+            <div class="router-container"></div>
+        `;
+
+        const routerContainer = searchGroup.querySelector('.router-container');
+        const matchingRouters = [];
+
+        document.querySelectorAll('.router').forEach(router => {
+            const displayName = router.querySelector('h2').textContent.toLowerCase();
+            if (displayName.includes(query)) {
+                const clonedRouter = router.cloneNode(true);
+                matchingRouters.push(clonedRouter);
+                routerContainer.appendChild(clonedRouter);
+            }
+        });
+
+        if (matchingRouters.length > 0) {
+            selectedRouterIndex = 0;
+            matchingRouters[selectedRouterIndex].classList.add('selected');
+        }
+
+        // Scroll to search group
+        document.getElementById("header").scrollIntoView({ behavior: "instant" });
+    }
+}
+
+function handleKeyDown(event) {
+    const searchGroup = document.getElementById('search-group');
+    if (!searchGroup) return;
+
+    const matchingRouters = searchGroup.querySelectorAll('.router');
+    if (matchingRouters.length === 0) return;
+
+    const isListMode = document.body.classList.contains('list-mode');
+    const itemsPerRow = getItemsPerRow();
+
+    switch (event.key) {
+        case 'ArrowDown':
+            event.preventDefault();
+            if (isListMode) {
+                if (selectedRouterIndex < matchingRouters.length - 1) {
+                    matchingRouters[selectedRouterIndex].classList.remove('selected');
+                    selectedRouterIndex++;
+                    matchingRouters[selectedRouterIndex].classList.add('selected');
+                    matchingRouters[selectedRouterIndex].scrollIntoView({ behavior: 'smooth', block: 'center' });
+                }
+            } else {
+                if (selectedRouterIndex + itemsPerRow < matchingRouters.length) {
+                    matchingRouters[selectedRouterIndex].classList.remove('selected');
+                    selectedRouterIndex += itemsPerRow;
+                    matchingRouters[selectedRouterIndex].classList.add('selected');
+                    matchingRouters[selectedRouterIndex].scrollIntoView({ behavior: 'smooth', block: 'center' });
+                }
+            }
+            break;
+        case 'ArrowUp':
+            event.preventDefault();
+            if (isListMode) {
+                if (selectedRouterIndex > 0) {
+                    matchingRouters[selectedRouterIndex].classList.remove('selected');
+                    selectedRouterIndex--;
+                    matchingRouters[selectedRouterIndex].classList.add('selected');
+                    matchingRouters[selectedRouterIndex].scrollIntoView({ behavior: 'smooth', block: 'center' });
+                }
+            } else {
+                if (selectedRouterIndex - itemsPerRow >= 0) {
+                    matchingRouters[selectedRouterIndex].classList.remove('selected');
+                    selectedRouterIndex -= itemsPerRow;
+                    matchingRouters[selectedRouterIndex].classList.add('selected');
+                    matchingRouters[selectedRouterIndex].scrollIntoView({ behavior: 'smooth', block: 'center' });
+                }
+            }
+            break;
+        case 'ArrowRight':
+            if (!isListMode) {
+                event.preventDefault();
+                if (selectedRouterIndex < matchingRouters.length - 1) {
+                    matchingRouters[selectedRouterIndex].classList.remove('selected');
+                    selectedRouterIndex++;
+                    matchingRouters[selectedRouterIndex].classList.add('selected');
+                    matchingRouters[selectedRouterIndex].scrollIntoView({ behavior: 'smooth', block: 'center' });
+                }
+            }
+            break;
+        case 'ArrowLeft':
+            if (!isListMode) {
+                event.preventDefault();
+                if (selectedRouterIndex > 0) {
+                    matchingRouters[selectedRouterIndex].classList.remove('selected');
+                    selectedRouterIndex--;
+                    matchingRouters[selectedRouterIndex].classList.add('selected');
+                    matchingRouters[selectedRouterIndex].scrollIntoView({ behavior: 'smooth', block: 'center' });
+                }
+            }
+            break;
+        case 'Enter':
+            event.preventDefault();
+            if (selectedRouterIndex >= 0 && selectedRouterIndex < matchingRouters.length) {
+                matchingRouters[selectedRouterIndex].click();
+            }
+            break;
+    }
+}
+
+function getItemsPerRow() {
+    const width = window.innerWidth;
+    if (width <= 480) return 1;
+    if (width <= 1024) return 2;
+    return 3;
+}
+
+function clearSearch() {
+    const searchInput = document.getElementById('search-input');
+    searchInput.value = '';
+    handleSearch({ target: searchInput });
+}
+
+function adjustFooterPosition() {
+    const footer = document.querySelector('.footer');
+    const visualViewportHeight = window.visualViewport.height;
+    const bottomOffset = window.innerHeight - visualViewportHeight;
+
+    // Set the bottom position
+    footer.style.bottom = `${bottomOffset}px`;
+}
+