Skip to content

Improved ui of the website template #1140

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
merged 4 commits into from
Aug 24, 2024
+251 −222
Merged

Improved ui of the website template #1140

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
4 commits
Select commit Hold shift + click to select a range
e91f921
Update index.html
aditya-bhaumik Aug 24, 2024
2d1a548
Update styles.css
aditya-bhaumik Aug 24, 2024
39e5717
Update script.js
aditya-bhaumik Aug 24, 2024
fd0b9a8
Add files via upload
aditya-bhaumik Aug 24, 2024
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
215 changes: 126 additions & 89 deletions Website/index.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -5,37 +5,39 @@
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Machine Learning Repositories</title>
<link rel="stylesheet" href="styles.css">
<link rel="icon" href="logo.png" type="image/png"> <!-- Added favicon -->
</head>
<body>
<header>
<h1>Machine Learning Repos</h1>
<nav>
<ul>
<nav class="navbar">
<div class="logo-container">
<img src="logo.png" alt="RecodeHive Logo" width="50" height="50"> <!-- Added logo to navbar -->
<span class="brand-name">RecodeHive</span>
</div>
<ul class="nav-links">
<li><a href="#">Home</a></li>
<li><a href="#">About</a></li>
<li><a href="#">Organization</a></li>
<li><a href="#">FAQ</a></li>
<li><a href="#">Contact</a></li>
<li>
<a href="https://github.com/recodehive/machine-learning-repos" target="_blank">
<img src="https://github.githubassets.com/images/modules/logos_page/GitHub-Mark.png" alt="GitHub" width="25" height="25"> <!-- GitHub Icon -->
</a>
</li>
</ul>
</nav>
</header>

<main>
<section>
<section class="welcome-section">
<h2>Welcome to the Machine Learning Repositories</h2>
<p>This website provides an overview of various machine learning repositories available on GitHub, brought to you by the RecodeHive organization.</p>
<a href="https://github.com/recodehive/machine-learning-repos" class="cta-button">Visit the Repository</a>
</section>.

<!-- Repository Information -->
<section id="repository-info">
<h2>Repository Information</h2>
<div>
<h3 id="repo-name"></h3>
<p>Owner: <a id="repo-owner-link"><span id="repo-owner-name"></span></a></p>
<img id="repo-owner-avatar" src="" alt="Owner Avatar" width="100" />
<p><a id="repo-link">View on GitHub</a></p>
</div>
<p>Explore a curated collection of diverse machine learning repositories available on GitHub, presented by the RecodeHive community.</p>
</section>

<!-- Toggle button for Repository Statistics -->
<section>
<button id="toggle-stats">Show/Hide Repository Statistics</button>
</section>

<!-- Statistics Cards -->
Expand All @@ -44,44 +46,36 @@ <h2>Repository Statistics</h2>
<div class="stats-grid">
<div class="stat-card">
<h3>Total Stars</h3>
<div id="total-stars">0</div>
<p id="total-stars">Loading...</p>
</div>
<div class="stat-card">
<h3>Total Forks</h3>
<div id="total-forks">0</div>
<p id="total-forks">Loading...</p>
</div>
<div class="stat-card">
<h3>Open Issues</h3>
<div id="open-issues">0</div>
<p id="open-issues">Loading...</p>
</div>
<div class="stat-card">
<h3>License</h3>
<div id="license">No License</div>
<p id="license">Loading...</p>
</div>
<div class="stat-card">
<h3>Repository Size</h3>
<div id="repo-size">0 MB</div>
</div>
<div class="stat-card">
<h3>Total Contributors</h3>
<div id="contributors-count">0</div>
</div>
<div class="stat-card">
<h3>Total Projects</h3>
<div id="total-projects">10</div>
<p id="repo-size">Loading...</p>
</div>
<div class="stat-card">
<h3>Most Used Language</h3>
<div id="most-used-language">N/A</div>
<p id="most-used-language">Loading...</p>
</div>
</div>
</section>

<!-- Languages -->
<section id="languages">
<h2>Languages Used</h2>
<ul id="language-list"></ul>
</section>
<!-- Languages -->
<section id="languages">
<h2>Languages Used</h2>
<ul id="language-list"></ul>
</section>

<section id="repo-list">
<h2>Repositories</h2>
Expand All @@ -91,71 +85,114 @@ <h2>Repositories</h2>

</main>

<footer>
<footer class="footer">
<p>&copy; 2024 Machine Learning Repos - <a href="https://github.com/recodehive">RecodeHive</a>. All rights reserved.</p>
</footer>

<!-- Existing JavaScript code -->
<script>
document.addEventListener('DOMContentLoaded', function () {
const directoriesList = document.getElementById('directories');

async function fetchDirectories() {
try {
const response = await fetch('/api/github/repos');

document.addEventListener('DOMContentLoaded', async function () {
const repoOwner = 'recodehive'; // Your GitHub username
const repoName = 'machine-learning-repos'; // The repository name
const apiUrl = `https://api.github.com/repos/${repoOwner}/${repoName}`;

try {
// Fetch repository data
const repoResponse = await fetch(apiUrl);
const repoData = await repoResponse.json();

// Populate repository info
document.getElementById('repo-name').innerText = repoData.name;
document.getElementById('repo-owner-name').innerText = repoData.owner.login;
document.getElementById('repo-owner-avatar').src = repoData.owner.avatar_url;
document.getElementById('repo-owner-link').href = repoData.owner.html_url;
document.getElementById('repo-link').href = repoData.html_url;

// Populate statistics cards
document.getElementById('total-stars').innerText = repoData.stargazers_count;
document.getElementById('total-forks').innerText = repoData.forks_count;
document.getElementById('open-issues').innerText = repoData.open_issues_count;
document.getElementById('license').innerText = repoData.license ? repoData.license.spdx_id : 'No License';
document.getElementById('repo-size').innerText = (repoData.size / 1024).toFixed(2) + ' MB';


// Fetch languages
const languagesResponse = await fetch(`${apiUrl}/languages`);
const languagesData = await languagesResponse.json();
const languageList = document.getElementById('language-list');
const totalBytes = Object.values(languagesData).reduce((acc, val) => acc + val, 0);
let mostUsedLanguage = { name: '', bytes: 0 };

for (const [language, bytes] of Object.entries(languagesData)) {
const percentage = ((bytes / totalBytes) * 100).toFixed(2);
const listItem = document.createElement('li');
listItem.innerHTML = `
<span>${language}</span>
<div class="progress-bar" style="width: ${percentage}%;"></div>
`;
languageList.appendChild(listItem);

if (bytes > mostUsedLanguage.bytes) {
mostUsedLanguage = { name: language, bytes: bytes };
if (!response.ok) {
throw new Error(`HTTP error! status: ${response.status}`);
}

const data = await response.json();

const directories = data.filter(item => item.type === 'dir' && item.name !== 'Website');

directories.forEach(directory => {
const li = document.createElement('li');
li.classList.add('card');

const h3 = document.createElement('h3');
h3.textContent = directory.name;

const a = document.createElement('a');
a.href = directory.html_url;
a.textContent = 'View Repository';
a.classList.add('btn-view-repo');

li.appendChild(h3);
li.appendChild(a);
directoriesList.appendChild(li);
});
} catch (error) {
console.error('Error fetching directories:', error);
directoriesList.innerHTML = '<li class="card">Failed to load directories.</li>';
}
}

document.getElementById('most-used-language').innerText = mostUsedLanguage.name;
fetchDirectories();
});
</script>

<!-- JavaScript for toggling statistics section -->
<script>
document.addEventListener('DOMContentLoaded', async function () {
const repoOwner = 'recodehive';
const repoName = 'machine-learning-repos';
const apiUrl = `https://api.github.com/repos/${repoOwner}/${repoName}`;

try {
// Fetch repository data
const repoResponse = await fetch(apiUrl);
const repoData = await repoResponse.json();

// Populate statistics cards
document.getElementById('total-stars').innerText = repoData.stargazers_count;
document.getElementById('total-forks').innerText = repoData.forks_count;
document.getElementById('open-issues').innerText = repoData.open_issues_count;
document.getElementById('license').innerText = repoData.license ? repoData.license.spdx_id : 'No License';
document.getElementById('repo-size').innerText = (repoData.size / 1024).toFixed(2) + ' MB';

// Fetch languages
const languagesResponse = await fetch(`${apiUrl}/languages`);
const languagesData = await languagesResponse.json();
const languageList = document.getElementById('language-list');
const totalBytes = Object.values(languagesData).reduce((acc, val) => acc + val, 0);
let mostUsedLanguage = { name: '', bytes: 0 };

for (const [language, bytes] of Object.entries(languagesData)) {
const percentage = ((bytes / totalBytes) * 100).toFixed(2);
const listItem = document.createElement('li');
listItem.innerHTML = `
<span>${language}</span>
<div class="progress-bar" style="width: ${percentage}%;"></div>
`;
languageList.appendChild(listItem);

if (bytes > mostUsedLanguage.bytes) {
mostUsedLanguage = { name: language, bytes: bytes };
}
}

// Populate total projects (assuming this is a static value)
// Replace this with a dynamic calculation if you have a method to determine the total number of projects
document.getElementById('total-projects').innerText = "10";
document.getElementById('most-used-language').innerText = mostUsedLanguage.name;

} catch (error) {
console.error('Error fetching data from GitHub API:', error);
}

// Toggle statistics section
const toggleButton = document.getElementById('toggle-stats');
const statsSection = document.getElementById('statistics-cards');
statsSection.style.display = 'none';

} catch (error) {
console.error('Error fetching data from GitHub API:', error);
}
});
toggleButton.addEventListener('click', function () {
if (statsSection.style.display === 'none') {
statsSection.style.display = 'block';
} else {
statsSection.style.display = 'none';
}
});

});
</script>
<script src="js/script.js"></script>
</body>
</html>
24 changes: 23 additions & 1 deletion Website/js/script.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -36,4 +36,26 @@ document.addEventListener('DOMContentLoaded', function() {
}

fetchDirectories();
});
});


document.addEventListener('DOMContentLoaded', async function () {
// Existing code...

// Toggle languages section
const toggleLanguagesButton = document.createElement('button');
toggleLanguagesButton.id = 'toggle-languages';
toggleLanguagesButton.textContent = 'Show/Hide Languages Used';
document.getElementById('languages').insertBefore(toggleLanguagesButton, document.getElementById('language-list'));

const languagesList = document.getElementById('language-list');
languagesList.style.display = 'none';

toggleLanguagesButton.addEventListener('click', function () {
if (languagesList.style.display === 'none') {
languagesList.style.display = 'block';
} else {
languagesList.style.display = 'none';
}
});
});
Binary file added Website/logo.png
View file
Open in desktop
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Loading