Skip to content

Commit

Permalink
Merge pull request #375 from Ridhima10/social-toggle
Browse files Browse the repository at this point in the history 
Social toggle
  • Loading branch information
@Manaregr8
Manaregr8 authored Jul 15, 2024
2 parents 0d8cc66 + 9d23da6 commit a458922
Show file tree
Hide file tree
Showing 6 changed files with 105 additions and 98 deletions.
8 changes: 4 additions & 4 deletions server/package-lock.json
View file

Some generated files are not rendered by default. Learn more about how customized files appear on GitHub.

2 changes: 1 addition & 1 deletion server/package.json
View file
Original file line number Diff line number Diff line change
Expand Up @@ -14,6 +14,6 @@
"axios": "^1.7.2",
"ejs": "^3.1.10",
"express": "^4.19.2",
"nodemon": "^3.1.2"
"nodemon": "^3.1.4"
}
}
182 changes: 94 additions & 88 deletions server/views/about.ejs
View file
Original file line number Diff line number Diff line change
Expand Up @@ -7,19 +7,20 @@
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Chrome Gaming | about</title>
<!-- Title of the webpage displayed on the browser tab. -->
<link rel="stylesheet" href="/css/styles.css" />
<!-- Link to an external CSS file for styling. -->

<!-- Link for favicon -->
<link rel="icon" href="/images/logo.PNG" type="image/x-icon" />
<!-- Link for favicon -->
<!-- Unicons CSS -->
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/[email protected]/font/bootstrap-icons.min.css" />
<!-- Title of the webpage displayed on the browser tab. -->
<link rel="stylesheet" href="/css/styles.css" />
<!-- Link to an external CSS file for styling. -->
<link rel="preconnect" href="https://fonts.googleapis.com" />
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin />
<link
href="https://fonts.googleapis.com/css2?family=Micro+5&family=Nova+Cut&family=Press+Start+2P&family=Protest+Guerrilla&family=Sixtyfour&family=Stalinist+One&family=Turret+Road:wght@200;300;400;500;700;800&family=VT323&family=Wallpoet&display=swap"
rel="stylesheet" />
<!-- Unicons CSS -->
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/[email protected]/font/bootstrap-icons.min.css" />

<!-- Link to the Bootstrap icons CSS file. -->
<link
href="https://fonts.googleapis.com/css2?family=Poppins:ital,wght@0,100;0,200;0,300;0,400;0,500;0,600;0,700;0,800;0,900;1,100;1,200;1,300;1,400;1,500;1,600;1,700;1,800;1,900&display=swap"
Expand All @@ -29,13 +30,15 @@
<!-- Link to the fontawesome icons file. -->
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.5.2/css/all.min.css" />
<!-- Link to the Unicons CSS file. -->
<link href="/css/styles.css" rel="stylesheet">

<script src="/js/script.js" defer></script>
<!-- Link to an external JavaScript file with the 'defer' attribute, meaning it will be executed after the document has been parsed. -->
<style>
.social a{
color: black;
}
</style>
<style>
.social a {
color: black;
}
</style>
</head>

<body class="page-leaderboard">
Expand All @@ -52,7 +55,7 @@
<div class="circle" style="background-color: #fff; left: 504px; top: 59px; scale: 0.8;"></div>
<div class="circle" style="background-color: #fff; left: 504px; top: 59px; scale: 0.8;"></div>
<div class="circle" style="background-color: #fff; left: 504px; top: 59px; scale: 0.8;"></div>
</div>
</div>
<!-- Body of the webpage. Background color set inline. -->
<nav class="nav">
<!-- Navigation section. -->
Expand All @@ -67,11 +70,13 @@
<i class="uil uil-times navCloseBtn"></i>
<!-- Icon for closing navigation menu. -->
<li><a href="/" class=" links-hover">Home</a></li>
<li><a href="/play" class=" links-hover" >Play Games</a></li>
<li><a href="/play" class=" links-hover">Play Games</a></li>
<li><a href="/products" class=" links-hover">Products</a></li>

<li><a href="/about" class=" links-hover-currentpage">About Us</a></li>
<li><a href="https://chromegaming.github.io/Chrome-Gaming-Certification/" class=" links-hover">Certificate</a></li>
<li><a class="links-hover" onclick="openRateUs()">Rate Us</a></li>

<li>
<div class="small-screen-social">
<a href="https://www.youtube.com/@ChromeGamingOn" target="_blank" class="social-icon youtube"></a>
Expand Down Expand Up @@ -335,94 +340,95 @@
</footer>
</body>
<script>
//Custom Cursor
const coords = { x: 0, y: 0 };
const circles = document.querySelectorAll(".circle");
const colors = [
"#55a5ea",
"#55a5ea",
"#55a5ea",
"#55a5ea",
"#55a5ea",
"#55a5ea",
"#55a5ea",
"#55a5ea",
"#3fbcc0c6",
"#3fbcc0c6",
"#3fbcc0c6",
"#3fbcc0c6",
"#3fbcc0c6",
"#3fbcc0c6",
"fff",
"fff",
"fff",
"fff",
"fff",
"fff",
"fff",
];
circles.forEach(function (circle, index) {
circle.x = 0;
circle.y = 0;
circle.style.backgroundColor = colors[index % colors.length];
document.querySelector('.toggler').addEventListener('click', function () {
document.querySelector('.social-icons').classList.toggle('show-icons');
});
</script>
<script>
//Custom Cursor
window.addEventListener("mousemove", function (e) {
coords.x = e.clientX;
coords.y = e.clientY;
});
const coords = { x: 0, y: 0 };
const circles = document.querySelectorAll(".circle");
const colors = [
"#55a5ea",
"#55a5ea",
"#55a5ea",
"#55a5ea",
"#55a5ea",
"#55a5ea",
"#55a5ea",
"#55a5ea",
"#3fbcc0c6",
"#3fbcc0c6",
"#3fbcc0c6",
"#3fbcc0c6",
"#3fbcc0c6",
"#3fbcc0c6",
"fff",
"fff",
"fff",
"fff",
"fff",
"fff",
"fff",
];
function animateCircles() {
let x = coords.x;
let y = coords.y;
circles.forEach(function (circle, index) {
circle.x = 0;
circle.y = 0;
circle.style.backgroundColor = colors[index % colors.length];
});
circles.forEach(function (circle, index) {
circle.style.left = x - 12 + "px";
circle.style.top = y - 12 + "px";
window.addEventListener("mousemove", function (e) {
coords.x = e.clientX;
coords.y = e.clientY;
});
circle.style.scale = (circles.length - index) / circles.length;
function animateCircles() {
let x = coords.x;
let y = coords.y;
circle.x = x;
circle.y = y;
circles.forEach(function (circle, index) {
circle.style.left = x - 12 + "px";
circle.style.top = y - 12 + "px";
const nextCircle = circles[index + 1] || circles[0];
x += (nextCircle.x - x) * 0.3;
y += (nextCircle.y - y) * 0.3;
});
circle.style.scale = (circles.length - index) / circles.length;
requestAnimationFrame(animateCircles);
}
circle.x = x;
circle.y = y;
animateCircles();
const nextCircle = circles[index + 1] || circles[0];
x += (nextCircle.x - x) * 0.3;
y += (nextCircle.y - y) * 0.3;
});
document.querySelector('.toggler').addEventListener('click', function () {
document.querySelector('.social-icons').classList.toggle('show-icons');
});
requestAnimationFrame(animateCircles);
}
animateCircles();
</script>
<script>
const shareButton = document.querySelector(".share-button");
const toggleSocials = () => {
const socialsWrapper = document.querySelector(".icons");
const shareButtonImage = shareButton.querySelector("img");
socialsWrapper.classList.toggle("active");
if (shareButtonImage.src.includes("share")) {
shareButtonImage.src = "/images/close.svg";
} else {
shareButtonImage.src = "assets/share.svg";
}
};
shareButton.addEventListener("click", toggleSocials);
document.querySelector('.toggler').addEventListener('click', function() {
document.querySelector('.social-icons').classList.toggle('show-icons');
});
</script>
const shareButton = document.querySelector(".share-button");
const toggleSocials = () => {
const socialsWrapper = document.querySelector(".icons");
const shareButtonImage = shareButton.querySelector("img");
socialsWrapper.classList.toggle("active");
if (shareButtonImage.src.includes("share")) {
shareButtonImage.src = "/images/close.svg";
} else {
shareButtonImage.src = "assets/share.svg";
}
};
shareButton.addEventListener("click", toggleSocials);
</script>

</html>
6 changes: 3 additions & 3 deletions server/views/index.ejs
View file
Original file line number Diff line number Diff line change
Expand Up @@ -710,9 +710,9 @@
<!-- Placeholder text. -->
</div>
</div>

<div style="text-align: center">
<img style="margin-left: 45%;" alt="Leaderboard" class="mb-2"
<div style="text-align: center; display: flex; flex-direction: column; align-items: center;">
<img alt="Leaderboard" class="mb-2"
src="https://d125fmws0bore1.cloudfront.net/assets/svgs/icon_trophy_leaderboard-3442a4b2312e6cdd02aa9870e636dc082890277a6267c4ed986a750fef7cbb35.svg" />
<h2 style="color: white;">Top 50 Contributors Leaderboard</h2>
</div>
Expand Down
4 changes: 2 additions & 2 deletions server/views/play.ejs
View file
Original file line number Diff line number Diff line change
Expand Up @@ -120,13 +120,13 @@
<script src="/js/script.js"></script>

<div class="social-icons">
<button class="toggler"><img src="/images/social1.webp" alt="" ></button>
<button class="toggler"><img src="/images/social1.webp" alt=""></button>
<a href="https://www.youtube.com/@ChromeGamingOn" target="_blank" class="social-icon youtube"></a>
<a href="https://www.linkedin.com/company/chromegaming" target="_blank" class="social-icon linkedin"></a>
<a href="https://www.facebook.com/profile.php?id=61558763492008" target="_blank" class="social-icon facebook"></a>
<a href="https://twitter.com" target="_blank" class="social-icon twitter"></a>
<a href="https://www.instagram.com/chromegamingon/" target="_blank" class="social-icon instagram"></a>
</div>
</div>


<div class="container" style="margin-top: 100px;">
Expand Down
1 change: 1 addition & 0 deletions server/views/products.ejs
View file
Original file line number Diff line number Diff line change
Expand Up @@ -153,6 +153,7 @@
</nav>
<%- include('partials/rateus') %>
<script src="/js/script.js"></script>

<style>
.border-hover::after {
width: 45%;
Expand Down

0 comments on commit a458922

Please sign in to comment.