Skip to content

Commit

Permalink
Merge branch 'ChromeGaming:main' into main
Browse files Browse the repository at this point in the history
  • Loading branch information
@ayush-848
ayush-848 authored Jul 21, 2024
2 parents 13aa1d7 + 873b850 commit 66fa561
Show file tree
Hide file tree
Showing 2 changed files with 473 additions and 159 deletions.
281 changes: 122 additions & 159 deletions pages/contributors.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -5,150 +5,43 @@
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<link rel="stylesheet" href="../styles/mainstyle.css" />
<link rel="stylesheet" href="../styles/index.style.css">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0-beta3/css/all.min.css">
<script defer src="../js/edge.js"></script>
<script defer src="../js/box.js"></script>
<script defer src="../js/board.js"></script>
<script defer src="../js/game.js"></script>
<script defer src="../js/validation.js"></script>
<link rel="shortcut icon" href="../assets/favicon.ico" type="image/x-icon" />
<link rel="stylesheet" href="/styles/contributors.css">
<title>Contributors</title>
<style>
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}

.contributors-list img {
max-width: 100%;
height: auto;
/* display: block; */
margin: 0 auto;
}

.contributors-list {
text-align: center;
padding: 3px;
background-color: rgba(255, 255, 255, 0.8);
border-radius: 10px;
box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
max-width: 100%;
margin: auto;
}

.whole-background {
width: 75%;
max-width: 85%;
text-align: center;
display: flex;
flex-direction: row;
height: 90%;

}

.settings .form {
max-width: 100%;
}

.contributors-description {
padding: 10px;
}

.settings a {
background-color: initial;
<style>
.circle {
position: absolute;
width: 25px;
height: 25px;
border-radius: 50%;
pointer-events: none;
background: radial-gradient(circle, rgba(73, 232, 247, 0.466), rgba(141, 38, 172, 0.5));
transition: transform 0.1s, left 0.1s, top 0.1s;
}

.form h1 {
margin-top: 60px;

.circle-container {
position: fixed;
top: 0;
left: 0;
width: 100%;
height: 100%;
pointer-events: none;
z-index: 9999;
}
.circle {
position: absolute;
width: 25px;
height: 25px;
border-radius: 50%;
pointer-events: none;
background: radial-gradient(circle, rgba(73, 232, 247, 0.466), rgba(141, 38, 172, 0.5));
transition: transform 0.1s, left 0.1s, top 0.1s;
}

.circle-container {
position: fixed;
top: 0;
left: 0;
width: 100%;
height: 100%;
pointer-events: none;
z-index: 9999;
}

@media (max-width : 768px){
@media (max-width: 760px) {
.circle-container{
display: none;
}
}
</style>
</head>

<div class="settings">
<video autoplay muted class="video" loop id="myVideo">
<source src="../assets/videos/default.mp4" type="video/mp4" />
</video>
<div class="whole-background">
<nav class="navbarr">
<div class="logo">
<a href="../index.html">Dots & Boxes ⚄</a>
</div>
<ul class="nav-links">
<li><a href="../index.html">Home</a></li>
<li><a href="../pages/about.html">About Us</a></li>
<li><a href="../pages/FAQs.html">FAQs</a></li>

<li><a href="../pages/contributors.html">
Contributors
</a></li>
<button><a href="../pages/game.html">Let's Go</a></button>
</ul>
<div class="hamburger">
<i class="fas fa-bars"></i>
</div>
</nav>
<div class="form">
<h1 class="heading">
Our Contributors</h1>
<p class="contributors-description">
We are grateful to the following contributors for their hard work
and dedication in making this project a success:
</p>
<div class="contributors-list">

<a href="https://github.com/ChromeGaming/Dot-Box/graphs/contributors">

<img src="https://contrib.rocks/image?repo=ChromeGaming/Dot-Box" />
</a>

</div>
</div>
</div>
<div class="author">
<div class="fotbar">
<a href="../pages/howtoplay.html">HowToPlay?</a>
<a href="../pages/termsofservice.html">TermsOfService</a>
<a href="../pages/privacypolicy.html">PrivacyPolicy</a>
</div>
<p>
Created with ❤️ by <a href="https://github.com/ChromeGaming">Chrome Gaming</a>
</p>
<div class="social-icons">
<a href="https://github.com/ChromeGaming/Dot-Box" target="_blank"><i class="fab fa-github"></i></a>
<a href="https://discord.gg/2HTCFrSvPB" target="_blank"><i class="fab fa-discord"></i></a>
</div>
</div>
</div>



<body>

<div class="circle-container">
<div class="circle"></div>
<div class="circle"></div>
Expand Down Expand Up @@ -180,46 +73,116 @@ <h1 class="heading">
<div class="circle"></div>
<div class="circle"></div>
<div class="circle"></div>
</div>
<script>
</div>
<script>
document.addEventListener("DOMContentLoaded", function () {
const coords = { x: 0, y: 0 };
const circles = document.querySelectorAll(".circle");

circles.forEach(function (circle) {
circle.x = 0;
circle.y = 0;
const coords = { x: 0, y: 0 };
const circles = document.querySelectorAll(".circle");

circles.forEach(function (circle) {
circle.x = 0;
circle.y = 0;
});

window.addEventListener("mousemove", function (e) {
coords.x = e.pageX;
coords.y = e.pageY - window.scrollY; // Adjust for vertical scroll position
});

function animateCircles() {
let x = coords.x;
let y = coords.y;

circles.forEach(function (circle, index) {
circle.style.left = `${x - 12}px`;
circle.style.top = `${y - 12}px`;
circle.style.transform = `scale(${(circles.length - index) / circles.length})`;

const nextCircle = circles[index + 1] || circles[0];
circle.x = x;
circle.y = y;

x += (nextCircle.x - x) * 0.3;
y += (nextCircle.y - y) * 0.3;
});

window.addEventListener("mousemove", function (e) {
coords.x = e.pageX;
coords.y = e.pageY - window.scrollY; // Adjust for vertical scroll position
});

function animateCircles() {
let x = coords.x;
let y = coords.y;

circles.forEach(function (circle, index) {
circle.style.left = `${x - 12}px`;
circle.style.top = `${y - 12}px`;
circle.style.transform = `scale(${(circles.length - index) / circles.length})`;
requestAnimationFrame(animateCircles);
}

const nextCircle = circles[index + 1] || circles[0];
circle.x = x;
circle.y = y;
animateCircles();
});

x += (nextCircle.x - x) * 0.3;
y += (nextCircle.y - y) * 0.3;
});
</script>

requestAnimationFrame(animateCircles);
<nav class="navbar">
<div class="logo">
<a href="../index.html">Dots & Boxes ⚄</a>
</div>
<ul class="navlinks">
<li><a href="../index.html">Home</a></li>
<li><a href="../pages/about.html">About Us</a></li>
<li><a href="../pages/FAQs.html">FAQs</a></li>
<li><a href="../pages/contributors.html">Contributors</a></li>
<li><a href="../pages/game.html">Let's Go</a></li>
</ul>

</nav>
<div class="content min-h-screen text-black dark:text-gray-200">
<div class="container mx-auto py-8">
<h1 class="text-center text-3xl font-semibold mb-8"
style="background-color: #333; color: white; padding: 10px; border-radius: 4px;">Our Contributors</h1>
<div id="contributors" class="contributors flex flex-wrap justify-center gap-8"></div>
</div>
</div>
<script>
document.addEventListener('DOMContentLoaded', function () {
const contributorsContainer = document.getElementById('contributors');

async function fetchContributors() {
try {
const response = await fetch('https://api.github.com/repos/ChromeGaming/Dot-Box/contributors');
const contributors = await response.json();

contributors.forEach(contributor => {
const contributorCard = document.createElement('a');
contributorCard.href = contributor.html_url;
contributorCard.target = '_blank';
contributorCard.className = 'contributor-card';
contributorCard.innerHTML = `
<img src="${contributor.avatar_url}" alt="${contributor.login}">
<h2 class="text-lg font-medium text-gray-900 dark:text-gray-100 mb-2">${contributor.login}</h2>
<p class="text-gray-700 dark:text-gray-400">Contributions: ${contributor.contributions}</p>
`;
contributorsContainer.appendChild(contributorCard);
});
} catch (error) {
console.error('Error fetching contributors:', error);
}
}

animateCircles();
fetchContributors();
});

</script>
</script>

<div class="author">
<div class="fotbar">
<a href="/pages/howtoplay.html">HowToPlay?</a>
<a href="./pages/termsofservice.html">TermsOfService</a>
<a href="./pages/privacypolicy.html">PrivacyPolicy</a>
<a href="./pages/licensing.html">Licensing</a>
</div>
<p>
Created with ❤️ by
<a href="https://github.com/ChromeGaming">Chrome Gaming</a>
</p>
<div class="social-icons">
<a href="https://github.com/ChromeGaming/Dot-Box" target="_blank"><i class="fab fa-github"></i></a>
<a href="https://discord.gg/2HTCFrSvPB" target="_blank"><i class="fab fa-discord"></i></a>
</div>
</div>
</div>

</body>

</html>
Loading

0 comments on commit 66fa561

Please sign in to comment.