Skip to content

Feature/improved UI dark themed Ui #343

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

Open
Priyanshu2004-Singh wants to merge 3 commits into
base: main
Choose a base branch
from
Open

Feature/improved UI dark themed Ui #343

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
3 commits
Select commit Hold shift + click to select a range
6be61fa
Fixed the json err now cardDetail working fine
Oct 12, 2025
40005f9
feat(ui): modernize UI – improved navbar, banner, cards, search, pagi…
Oct 12, 2025
f32f04b
feat: Improved UI dark themed
Oct 12, 2025
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
6 changes: 4 additions & 2 deletions app.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -24,7 +24,7 @@ window.addEventListener('DOMContentLoaded', () => {

// initialization of cardDetailsArray
let cardDetailsArray;
const cardsPerPage = 10;
const cardsPerPage = 6; // Show exactly 6 cards per page
let noOfCards;
function createCard(details) {
const cardTemplate = document.getElementById("contributor-card");
Expand Down Expand Up @@ -154,7 +154,9 @@ function displayPages(j) {
const card = createCard(details);
cardsContainer.appendChild(card);
}
cardsContainer.style.display = "flex";
cardsContainer.style.display = "grid";
// Initialize AOS for new cards
AOS.refresh();
}
function setPageStyle(selectedPage) {
const allPages = document.querySelectorAll(".page-details p");
Expand Down
29 changes: 19 additions & 10 deletions cardDetails.json
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -573,6 +573,15 @@
"linkedin": "https://linkedin.com/danyalejaz",
"email": "mailto:danyalejaz10@outlook.com"
},
{
"name": "Priyanshu Singh",
"profession": "Freelancer/Developer and Open Source Contributor",
"quote": "\"You will never get second chance to make a first impression\"</br> - Said By Me",
"twitter": "https://x.com/KotaMemori82141",
"github": "https://github.com/Priyanshu2004-Singh",
"linkedin": "https://www.linkedin.com/in/priyanshu-singh-a17807231/",
"email": "mailto:wizardoo9009950095@gmail.com"
},
{
"name": "Cyril Baah",
"profession": "DevOps Engineer",
Expand Down Expand Up @@ -1834,18 +1843,18 @@
},
{
"name": "Shiv Patle",
"Profession" : "MERN stack Developer | Full Stack Developer",
"quota" : "it doesn't matter when you start, but how you finish that matters!",
"github" : "https://github.com/Shiv-Patel-24",
"profession": "MERN stack Developer | Full Stack Developer",
"quote": "it doesn't matter when you start, but how you finish that matters!",
"github": "https://github.com/Shiv-Patel-24",
"linkedin": "https://www.linkedin.com/in/shiv-patel-94b542223?"
}
},
{
"name": "Jeremiah Reuban",
"profession": "Full Stack Developer",
"quote": "if you can dream it, you can do it.",
"github": "https://github.com/REUBAN7104",
"email": "jeremiahruban7104@gmail.com"
}
"name": "Jeremiah Reuban",
"profession": "Full Stack Developer",
"quote": "if you can dream it, you can do it.",
"github": "https://github.com/REUBAN7104",
"email": "jeremiahruban7104@gmail.com"
}

]
}
51 changes: 27 additions & 24 deletions index.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -20,22 +20,22 @@
</head>

<body>
<nav class="navbar" id="navbar">
<div class="navbar-innner-parent">
<nav class="navbar" id="navbar" role="navigation" aria-label="Main">
<div class="navbar-innner-parent container">
<img src="./image/design-files/logo/simple-contribution.svg" class="navbar-logo-1"
alt="Simple Contribution Logo" />
<img src="./image/design-files/logo/icon-menu.svg" id="navbar-menu-icon-1" alt="MENU Icone" />
<div class="navbar-link-list">
<div class="navbar-link-list" role="menubar" aria-label="Primary links">
<div id="navbar-link-list-container">
<div>
<a href="#discription-title-id"><i class="uil-users-alt navbar-mobile-icon"></i> Meet Our Contributors</a>
<a href="#discription-title-id" role="menuitem"><i class="uil-users-alt navbar-mobile-icon" aria-hidden="true"></i> Meet Our Contributors</a>
</div>
<div>
<a href="https://github.com/amyyalex/simple-contribution?tab=readme-ov-file#simple-contribution"
target="_blank"><i class="uil-question-circle navbar-mobile-icon"></i> About Our Community</a>
target="_blank" role="menuitem" rel="noopener"><i class="uil-question-circle navbar-mobile-icon" aria-hidden="true"></i> About Our Community</a>
</div>
<div>
<a href="https://discord.gg/JhCdztuAcm" target="_blank"><i class="uil-user-plus navbar-mobile-icon"></i>
<a href="https://discord.gg/JhCdztuAcm" target="_blank" role="menuitem" rel="noopener"><i class="uil-user-plus navbar-mobile-icon" aria-hidden="true"></i>
Join Our Community</a>
</div>
</div>
Expand All @@ -44,7 +44,7 @@
<a href="https://github.com/amyyalex/simple-contribution" target="_self"><i class="uil uil-github"
id="github-icon"></i></a>
</div>
<div class="navbar-space-evenly-on-mobile" id="google_translate_element"></div>
<div class="navbar-space-evenly-on-mobile" id="google_translate_element" aria-label="Translate"></div>
<script src="https://translate.google.com/translate_a/element.js?cb=googleTranslateElementInit"></script>
<script>
function googleTranslateElementInit() {
Expand All @@ -65,14 +65,16 @@
<section>
<div class="banner">
<div class="box" id="boxContainer"></div>
<h1>HI CONTRIBUTORS!</h1>
<p>
This is a simple project that will not only help you contribute to your first open source
project, but will also guide you through the entire process,<span>so whether this is your first time
contributing or you're looking for a project to
contribute to, this project is for you!</span>
</p>
<a href="https://discord.gg/JhCdztuAcm" target="_blank" class="button">
<div class="banner-content">
<h1>HI CONTRIBUTORS!</h1>
<p>
This is a simple project that will not only help you contribute to your first open source
project, but will also guide you through the entire process,<span>so whether this is your first time
contributing or you're looking for a project to
contribute to, this project is for you!</span>
</p>
</div>
<a href="https://discord.gg/JhCdztuAcm" target="_blank" class="button" rel="noopener" aria-label="Join our Discord community">
<span class="button_lg">
<span class="button_sl"></span>
<span>😄 </span>
Expand All @@ -81,7 +83,7 @@ <h1>HI CONTRIBUTORS!</h1>
</a>
</div>
</section>
<section class="home-content">
<section class="home-content container">
<div class="discription-title" id="discription-title-id">
<div class="detail-title">
<h2>Add your Contribution!</h2>
Expand All @@ -91,9 +93,10 @@ <h2>Add your Contribution!</h2>
</p>
</div>
<div class="search-section">
<div class="search-form">
<input type="text" placeholder="Insert a name" name="search" id="search" class="search-input" />
<i class="uil uil-search-alt"></i>
<div class="search-form" role="search">
<label for="search" class="visually-hidden">Search contributors by name</label>
<input type="text" placeholder="Insert a name" name="search" id="search" class="search-input" autocomplete="off" />
<i class="uil uil-search-alt" aria-hidden="true"></i>
</div>
</div>
</div>
Expand All @@ -112,21 +115,21 @@ <h5></h5>
</div>
</template>
<!-- END OF TEMPLATE-->
<div class="cards"></div>
<div class="cards" role="list"></div>
<!-- Template for pagination -->
<template id="pages">
<div class="page-details">
<p class=""></p>
</div>
</template>
<!-- END OF TEMPLATE -->
<div class="pagination"></div>
<div class="pagination" role="navigation" aria-label="Pagination"></div>
</section>

<section>
<div class="contribute" data-aos="fade-up" data-aos-delay="300">
<div class="contribute-container">
<h1>Thanks for your Contribution</h1>
<h1 style="color: white;">Thanks for your Contribution</h1>
<hr class="line" />
<p>
I appreciate you for contributing and being part of this amazing project, I hope you
Expand All @@ -142,7 +145,7 @@ <h1>Thanks for your Contribution</h1>
</div>
</section>

<footer id="footer">
<footer id="footer" role="contentinfo">
<div class="copyright">Copyright &copy; Designed by Simple Contribution 2024</div>
</footer>
<script src="./app.js"></script>
Expand All @@ -153,4 +156,4 @@ <h1>Thanks for your Contribution</h1>
</script>
</body>

</html>
</html>
7 changes: 5 additions & 2 deletions style/banner.css
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,5 +1,9 @@
.banner {
animation: animatecolor 8s linear infinite;
background:
radial-gradient(1200px 500px at 10% 10%, rgba(151,95,255,0.25), transparent 60%),
radial-gradient(1000px 500px at 90% 20%, rgba(200,124,238,0.22), transparent 60%),
linear-gradient(180deg, rgba(10,3,50,1) 0%, rgba(10,3,50,0.92) 60%, rgba(10,3,50,1) 100%);
}

@keyframes animatecolor {
Expand Down Expand Up @@ -74,7 +78,6 @@
/* Add this inside your existing media query for smaller screens */
.banner .box {
width: 90%; /* Adjust the width of the box for smaller screens */

margin: 2rem auto;
margin-top: 20rem;
/* Center the box and add some vertical spacing */
Expand All @@ -91,4 +94,4 @@
width: 6px; /* Adjust the width of the dots for smaller screens */
height: 6px; /* Adjust the height of the dots for smaller screens */
}
}
}
Loading