UI fixes.enhancements, readme update, added gitignore

Website/.gitignore

@@ -0,0 +1,4 @@
+server/node_modules
+node_modules
+server/.env
+.env

Website/README.md

@@ -61,6 +61,20 @@
   ```bash
   git push origin <your_branch_name>
   ```
+
+> [!NOTE] 
+> If you're having trouble cloning the repository on your system, try running the following commands to optimize Git for large repositories and slower connections:
+>
+> ```bash
+> git config --global core.compression 9
+> git config --global http.maxRequestBuffer 1G
+> git config --global http.lowSpeedLimit 0
+> git config --global http.lowSpeedTime 999999
+> git config --global http.postBuffer 1048576000
+> ```
+>
+> Alternatively, you can use [GitHub Codespaces](https://github.com/features/codespaces) to clone and work on the repository in a cloud environment.
+
 - Go to your forked repository on GitHub and click on `Compare & pull request`.
 - Add an appropriate title and description to your pull request explaining your changes and efforts done.
 - Click on `Create pull request`.

Website/index.html

@@ -37,7 +37,7 @@ <h2>Welcome to the Machine Learning Repositories</h2>
 
         <!-- Toggle button for Repository Statistics -->
         <section>
-            <button id="toggle-stats">Show/Hide Repository Statistics</button>
+            <button id="toggle-stats"><span id="display">Show</span> Repository Statistics</button>
         </section>
 
         <!-- Statistics Cards -->
@@ -86,7 +86,7 @@ <h2>Repositories</h2>
     </main>
 
     <footer class="footer">
-        <p>&copy; 2024 Machine Learning Repos - <a href="https://github.com/recodehive">RecodeHive</a>. All rights reserved.</p>
+        <p>&copy; 2024 Machine Learning Repos - <a href="https://github.com/recodehive" id="footer-link">RecodeHive</a>. All rights reserved.</p>
     </footer>
 
     <script src="js/script.js"></script>

Website/js/script.js

@@ -36,14 +36,15 @@ document.addEventListener('DOMContentLoaded', function() {
     function toggleLanguagesSection() {
         const toggleLanguagesButton = document.createElement('button');
         toggleLanguagesButton.id = 'toggle-languages';
-        toggleLanguagesButton.textContent = 'Show/Hide Languages Used';
+        toggleLanguagesButton.textContent = 'Show Languages Used';
         const languagesList = document.getElementById('language-list');
         document.getElementById('languages').insertBefore(toggleLanguagesButton, languagesList);
 
         languagesList.style.display = 'none';
 
         toggleLanguagesButton.addEventListener('click', function() {
             languagesList.style.display = languagesList.style.display === 'none' ? 'block' : 'none';
+            toggleLanguagesButton.textContent = languagesList.style.display === 'none' ? 'Show Languages Used' : 'Hide Languages Used';
         });
     }
 
@@ -97,10 +98,12 @@ document.addEventListener('DOMContentLoaded', function() {
     function toggleStatsSection() {
         const toggleButton = document.getElementById('toggle-stats');
         const statsSection = document.getElementById('statistics-cards');
+        const toggleTextDisplay = document.getElementById('display');
         statsSection.style.display = 'none';
 
         toggleButton.addEventListener('click', function() {
             statsSection.style.display = statsSection.style.display === 'none' ? 'block' : 'none';
+            toggleTextDisplay.textContent = statsSection.style.display === 'none' ? 'Show' : 'Hide';
         });
     }
 

Website/styles.css

@@ -6,15 +6,14 @@ html, body {
 }
 
 body {
-    background-color: #0a0a2e; /* Darkest blue */
-    color: #f1f1f1;
+    background-color: #f4f4f4;
     font-family: 'Arial', sans-serif;
     display: flex;
     flex-direction: column;
 }
 
 header {
-    background-color: #121245; /* Slightly lighter dark blue */
+    background-color: #333; 
     padding: 10px 20px;
 }
 
@@ -52,6 +51,10 @@ header {
     white-space: nowrap; /* Prevents wrapping of links */
 }
 
+.nav-links a:hover{
+    text-decoration: underline;
+}
+
 main {
     padding: 20px;
     flex: 1; /* Makes main content take up the remaining space */
@@ -85,12 +88,13 @@ button#toggle-stats {
 }
 
 button#toggle-stats:hover {
-    background-color: #2a2a7e; /* Lighter blue on hover */
+    background-color: #2a2a7e;
 }
 
 #statistics-cards {
     display: none;
     text-align: center;
+    color: black;
 }
 
 .stats-grid {
@@ -101,7 +105,7 @@ button#toggle-stats:hover {
 }
 
 .stat-card {
-    background-color: #121245; /* Dark blue for stat cards */
+    background-color: white;
     padding: 20px;
     border-radius: 8px;
     width: 150px;
@@ -142,6 +146,9 @@ button#toggle-stats:hover {
     text-align: center;
     margin-top: auto;
 }
+#footer-link{
+    color: white
+}
 
 button#toggle-languages {
     display: block;
@@ -158,3 +165,65 @@ button#toggle-languages {
 button#toggle-languages:hover {
     background-color: #2a2a7e; /* Lighter blue on hover */
 }
+
+#repo-list {
+    margin: 20px auto;
+    max-width: 1200px;
+    padding: 0 20px;
+}
+
+#directories {
+    display: flex;
+    flex-wrap: wrap;
+    justify-content: center;
+    gap: 20px;
+    list-style-type: none;
+    padding: 0;
+    margin-top: 50px;
+    margin-bottom: 100px;
+}
+
+.card {
+    background: #fff;
+    border: 1px solid #ddd;
+    border-radius: 8px;
+    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
+    flex: 1 1 calc(33.333% - 20px); 
+    max-width: calc(33.333% - 20px);
+    padding: 20px;
+    box-sizing: border-box;
+    transition: transform 0.3s ease, box-shadow 0.3s ease;
+}
+
+.card:hover {
+    transform: translateY(-10px);
+    box-shadow: 0 8px 16px rgba(0, 0, 0, 0.2);
+}
+.card .btn-view-repo {
+    display: inline-block;
+    padding: 0.5rem 1rem;
+    color: white;
+    background-color: #1a1a5e;
+    text-decoration: none;
+    border-radius: 0.25rem;
+    font-size: 0.875rem;
+}
+
+.card .btn-view-repo:hover{
+    background-color:#2a2a7e;
+}
+
+
+@media (max-width: 768px) {
+    .card {
+        flex: 1 1 calc(50% - 20px);
+        max-width: calc(50% - 20px);
+    }
+}
+
+@media (max-width: 480px) {
+    .card {
+        flex: 1 1 100%; 
+        max-width: 100%;
+    }
+}