From a1c081f4afdccddacf0d6cdb23c886e4570f97aa Mon Sep 17 00:00:00 2001 From: Vansh Chaurasiya <114163734+vansh-codes@users.noreply.github.com> Date: Sat, 24 Aug 2024 11:43:28 +0000 Subject: [PATCH] UI fixes.enhancements, readme update, added gitignore Co-authored-by: vansh-codes Co-authored-by: sanjay-kv --- Website/.gitignore | 4 +++ Website/README.md | 14 ++++++++ Website/index.html | 4 +-- Website/js/script.js | 5 ++- Website/styles.css | 79 +++++++++++++++++++++++++++++++++++++++++--- 5 files changed, 98 insertions(+), 8 deletions(-) create mode 100644 Website/.gitignore diff --git a/Website/.gitignore b/Website/.gitignore new file mode 100644 index 000000000..58ae3990c --- /dev/null +++ b/Website/.gitignore @@ -0,0 +1,4 @@ +server/node_modules +node_modules +server/.env +.env diff --git a/Website/README.md b/Website/README.md index 6d752533c..4f8c5565f 100644 --- a/Website/README.md +++ b/Website/README.md @@ -61,6 +61,20 @@ ```bash git push origin ``` + +> [!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`. diff --git a/Website/index.html b/Website/index.html index d4bb8f108..6b09b5136 100644 --- a/Website/index.html +++ b/Website/index.html @@ -37,7 +37,7 @@

Welcome to the Machine Learning Repositories

- +
@@ -86,7 +86,7 @@

Repositories

-

© 2024 Machine Learning Repos - RecodeHive. All rights reserved.

+

© 2024 Machine Learning Repos - RecodeHive. All rights reserved.

diff --git a/Website/js/script.js b/Website/js/script.js index 3a5d7fedb..932a80d20 100644 --- a/Website/js/script.js +++ b/Website/js/script.js @@ -36,7 +36,7 @@ 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); @@ -44,6 +44,7 @@ document.addEventListener('DOMContentLoaded', function() { 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'; }); } diff --git a/Website/styles.css b/Website/styles.css index b53627288..9208c3280 100644 --- a/Website/styles.css +++ b/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%; + } +} \ No newline at end of file