diff --git a/Website/index.html b/Website/index.html index 1d42b0438..3e224a672 100644 --- a/Website/index.html +++ b/Website/index.html @@ -7,6 +7,7 @@ +
@@ -32,16 +33,11 @@
-
-
-
-

Welcome to Machine Learning Repositories

-

Explore a curated collection of diverse machine learning repositories available on GitHub, presented by the RecodeHive community.

-
-
-
+

Welcome to the Machine Learning Repositories

+

Explore a curated collection of diverse machine learning repositories available on GitHub, presented by the RecodeHive community.

+
@@ -84,11 +80,22 @@

Most Used Language

- + + +
-

Languages Used

+
Languages
    +
    +
    Milestones Progress
    +
    + +
    +
    +
    +
    +

    Repositories

    diff --git a/Website/js/script.js b/Website/js/script.js index b0b3ca03a..8a48ca257 100644 --- a/Website/js/script.js +++ b/Website/js/script.js @@ -31,6 +31,32 @@ document.addEventListener('DOMContentLoaded', function() { directoriesList.innerHTML = '
  • Failed to load directories.
    • '; } } +// Function to fetch and count subdirectories for each directory +async function fetchSubdirectoryCounts() { + try { + const directoriesResponse = await fetch('/api/github/repos'); + if (!directoriesResponse.ok) { + throw new Error(`HTTP error! status: ${directoriesResponse.status}`); + } + const directoriesData = await directoriesResponse.json(); + const directories = directoriesData.filter(item => item.type === 'dir' && item.name !== 'Website'); + const directoryCounts = []; + + for (const directory of directories) { + const subResponse = await fetch(`https://api.github.com/repos/recodehive/machine-learning-repos/contents/${directory.name}`); + if (!subResponse.ok) { + throw new Error(`HTTP error! status: ${subResponse.status} for ${directory.name}`); + } + const subData = await subResponse.json(); + const subDirectoriesCount = subData.filter(item => item.type === 'dir').length; + directoryCounts.push({ name: directory.name, count: subDirectoriesCount }); + } + + return directoryCounts; + } catch (error) { + console.error('Error fetching subdirectory counts:', error); + } +} // Function to toggle languages section function toggleLanguagesSection() { @@ -76,14 +102,12 @@ document.addEventListener('DOMContentLoaded', function() { for (const [language, bytes] of Object.entries(languagesData)) { const percentage = ((bytes / totalBytes) * 100).toFixed(2); const listItem = document.createElement('li'); - listItem.classList.add('card-languages'); - const h3 = document.createElement('h3'); - h3.textContent = `${language}`; - listItem.appendChild(h3); - // listItem.innerHTML = ` - //

    ${language}

    - //
    - // `; + listItem.innerHTML = ` + ${language} +
    +
    ${percentage}%
    +
    + `; languageList.appendChild(listItem); if (bytes > mostUsedLanguage.bytes) { @@ -97,7 +121,47 @@ document.addEventListener('DOMContentLoaded', function() { console.error('Error fetching data from GitHub API:', error); } } - + async function createPieChart() { + const directoryCounts = await fetchSubdirectoryCounts(); + const ctx = document.getElementById('milestoneChart').getContext('2d'); + const labels = directoryCounts.map(dir => dir.name); + const data = directoryCounts.map(dir => dir.count); + + const chart = new Chart(ctx, { + type: 'pie', + data: { + labels: labels, + datasets: [{ + data: data, + backgroundColor: [ + '#FF6384', + '#36A2EB', + '#FFCE56', + '#4BC0C0', + '#9966FF', + '#FF9F40', + '#01A02A', + '#FA5F20' + ], + }] + }, + options: { + responsive: true, + plugins: { + legend: { + display: false // Disable Chart.js default legend + } + } + } + }); + + // Inject custom legend + const legendContainer = document.querySelector('.legend'); + legendContainer.innerHTML = labels.map((label, index) => ` + ${label} + `).join(''); + } + // Function to toggle statistics section function toggleStatsSection() { const toggleButton = document.getElementById('toggle-stats'); @@ -203,7 +267,7 @@ document.addEventListener('DOMContentLoaded', function() { }); fetchDirectories(); - toggleLanguagesSection(); + createPieChart(); fetchRepoStats(); toggleStatsSection(); }); diff --git a/Website/server/server.js b/Website/server/server.js index 258154ba4..8a496be31 100644 --- a/Website/server/server.js +++ b/Website/server/server.js @@ -13,9 +13,29 @@ const app = express(); const port = 3000; app.use(express.static(path.join(__dirname, '../'))); +app.get('/api/github/repos/subdir', async (req, res) => { + const dirName = req.query.dir; + if (!dirName) { + return res.status(400).json({ error: "Directory name is required" }); + } + + try { + const response = await fetch(`https://api.github.com/repos/recodehive/machine-learning-repos/contents/${dirName}`, { + headers: { + Authorization: `Bearer ${GITHUB_TOKEN}`, + }, + }); + if (!response.ok) { + const errorDetails = await response.text(); + throw new Error(`GitHub API error: ${response.status} - ${response.statusText}: ${errorDetails}`); + } -app.get('/welcome', (req, res) => { - res.send('Welcome to the Machine Learning Repos API!'); + const data = await response.json(); + res.json(data); + } catch (error) { + console.error(`Error fetching GitHub subdirectory contents for ${dirName}:`, error); + res.status(500).json({ error: error.message }); + } }); app.get('/api/github/repos', async (req, res) => { try { diff --git a/Website/styles.css b/Website/styles.css index ea9e93a46..cc0279fc8 100644 --- a/Website/styles.css +++ b/Website/styles.css @@ -7,14 +7,15 @@ body { } body { - background-color: #f4f4f4; + background-color: #0a0a2e; font-family: 'Arial', sans-serif; display: flex; flex-direction: column; + color:white; } header { - background-color: #333; + background-color: #121245; padding: 10px 20px; } @@ -73,32 +74,9 @@ main { .welcome-section { text-align: center; margin-bottom: 30px; + color:white; } -.welcome-title { - font-size: 37px; -} - -.welcome-description { - font-size : 22px; - width:60%; - margin: auto; -} - -.welcome-description a { - text-decoration: none; - color: black; - font-weight: 600; -} - -.welcome-description a:hover { - text-decoration: underline; - cursor: pointer; -} -.highlight { - color: rgb(3, 3, 122); - text-shadow: rgb(183, 189, 248) 1px 0 10px; -} h2 { font-size: 2em; @@ -140,7 +118,7 @@ button#toggle-stats:hover { } .stat-card { - background-color: #050066; + background-color:#121245; /* background: linear-gradient(130deg, #473eed, #04004c); */ padding: 20px; border-radius: 8px; @@ -148,7 +126,7 @@ button#toggle-stats:hover { text-align: center; margin-bottom: 20px; color: #fff; - text-shadow: 1px 1px 2px rgb(0, 10, 150), 0 0 1em rgb(34, 174, 255), 0 0 0.5em rgb(0, 221, 255); + text-shadow: 0.5px 0.5px 1px rgb(0, 10, 150), 0 0 1em rgb(34, 174, 255), 0 0 0.5em rgb(0, 221, 255); transition: transform 0.3s ease-in-out, text-shadow 0.3s ease-in-out; } @@ -199,28 +177,106 @@ button#toggle-stats:hover { color: rgb(255, 213, 98); } + +.language-and-milestone{ + display: flex; + gap:20px; + justify-content: center; + align-items: center; +} + +.text-base{ + text-align: left; + font-size: 16px; +} #languages { text-align: center; margin-bottom: 30px; + width:500px; + background-color: #121245; + padding:10px 20px; + border-radius: 15px; + height:340px; + color:white; } - #language-list { list-style: none; - padding: 0; - display: inline-block; text-align: center; - column-count: 4; - /* Adjust this value to increase or decrease the number of columns */ - column-gap: 40px; - /* Space between columns */ + width:100%; + padding:0px; } #language-list li { - margin: 10px 0; + padding: 10px 0px; + display: flex; + width:100%; + gap:20px; + border-bottom:2px solid white; + justify-content: space-between; + font-size: 16px; + font-weight: 600; +} + +.progress-bar-container{ + background-color: whitesmoke; + border-radius: 8px; + overflow: hidden; + width:300px; + height:20px; +} +.progress-bar { + height: 20px; + background-color: #0D6EFD; + width: 300px; text-align: left; - /* Align text to the left within each column */ + display: flex; + flex-wrap: nowrap; + font-size: 12px; + justify-content: center; + align-items: center; + color:white; +} +#milestone { + text-align: center; + margin-bottom: 30px; + width:500px; + background-color: #121245; + padding:10px 20px; + border-radius: 15px; + height:340px; + color:white; +} + +.chart-container { + display: flex; + align-items: center; + width:150px; + margin: 50px 20px; +} + +.legend { + display: flex; + flex-direction: column; + margin-left: 20px; + font-size: 14px; +} + +.legend span { + display: flex; + align-items: center; + margin-bottom: 8px; + width:300px; } +.legend span::before { + content: ''; + display: inline-block; + width: 20px; + height: 20px; + margin-right: 8px; + border-radius: 50%; + background-color: currentColor; /* This will be set dynamically */ +} /* Footer stays at the bottom */ .footer { @@ -243,7 +299,7 @@ button#toggle-languages { font-size: 1.1em; background-color: #1a1a5e; /* Dark blue button */ - color: #f1f1f1; + color: #f0f0f0; border: none; cursor: pointer; transition: background-color 0.3s ease; @@ -272,8 +328,8 @@ button#toggle-languages:hover { } .card { - background: #fff; - border: 1px solid #ddd; + background: #121245; + /* 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); @@ -342,14 +398,14 @@ button#toggle-languages:hover { #contributors { padding: 40px; - background-color: #f9f9f9; + background-color: #0a0a2e; text-align: center; } #contributors h2 { font-size: 28px; margin-bottom: 20px; - color: #333; + color: white; } /* Container for contributors grid */ @@ -359,7 +415,7 @@ button#toggle-languages:hover { gap: 20px; /* Reduced space between contributors */ justify-content: center; padding: 20px; /* Padding around the grid */ - background: linear-gradient(135deg, #f0f4f8, #cfd9e5); /* Subtle gradient background */ + background: linear-gradient(135deg, #121245, #121245); /* Subtle gradient background */ } /* Styling for individual contributor div */ @@ -372,7 +428,7 @@ button#toggle-languages:hover { border: none; /* Remove default border */ border-radius: 15px; /* More rounded corners */ padding: 15px; - background: #ffffff; /* White background */ + background: #0b0b38; /* White background */ box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1); /* Enhanced shadow for depth */ transition: transform 0.3s ease, box-shadow 0.3s ease; /* Smooth transition effects */ } @@ -403,10 +459,10 @@ button#toggle-languages:hover { .contributor-github { text-decoration: none; - color: #0366d6; /* GitHub blue color */ + color: white; /* GitHub blue color */ font-size: 14px; /* Slightly smaller font size */ font-weight: bold; /* Bold font */ - background: linear-gradient(135deg, #f0f4f8, #cfd9e5); /* Gradient background */ + background: linear-gradient(135deg, #1f1f65, #3c3c99); /* Gradient background */ padding: 8px 12px; /* Adjusted padding around the link */ border-radius: 20px; /* Rounded button shape */ box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1); /* Subtle shadow for button */ @@ -423,7 +479,7 @@ button#toggle-languages:hover { .contri-heading { font-size: 2.5rem; /* Increase font size */ font-weight: 900; /* Bold font weight */ - color: #2c3e50; /* Dark color for better contrast */ + color: white; /* Dark color for better contrast */ }