Skip to content
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

Added Social Score Share button #662

Merged
merged 1 commit into from
Nov 4, 2024
Merged

Added Social Score Share button #662

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
1 commit
Select commit
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
5 changes: 5 additions & 0 deletions index.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -715,6 +715,11 @@ <h2 class="primary-btn" id="logoutButton" style="display: none;">
<a href="privacy_policy.html">
<button class="priacy">Privacy Policy</button>
</a>
</div>
<div id="sharescorebtn">
<a href="share_score.html">
<button class="scoresh">Share Your Score</button>
</a>
</div>
</div>

Expand Down
127 changes: 127 additions & 0 deletions share_score.html
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,127 @@
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Share Your Score</title>
<style>
/*basic styling */
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
body {
display: flex;
justify-content: center;
align-items: center;
flex-direction: column;
height: 100vh;
font-family: Arial, sans-serif;
background-color: #121212;
color: #ffffff;
text-align: center;
}

/* Container for the score and sharing options */
.score-container {
padding: 20px;
max-width: 600px;
background: #1f1f1f;
border-radius: 10px;
box-shadow: 0 4px 10px rgba(0, 0, 0, 0.3);
}

/* Score display styling */
.score-display {
font-size: 3em;
font-weight: bold;
color: #4CAF50;
margin: 20px 0;
}

/* Share text styling */
.share-text {
font-size: 1.2em;
margin: 10px 0 20px;
color: #bbbbbb;
}

/* Social media buttons */
.share-buttons {
display: flex;
gap: 10px;
justify-content: center;
}
.share-button {
padding: 10px 20px;
font-size: 1em;
font-weight: bold;
color: #ffffff;
border: none;
border-radius: 5px;
cursor: pointer;
transition: background-color 0.3s;
}
.share-twitter {
background-color: #1DA1F2;
}
.share-twitter:hover {
background-color: #0d8ae4;
}
.share-facebook {
background-color: #3b5998;
}
.share-facebook:hover {
background-color: #2d4373;
}
.share-whatsapp {
background-color: #25D366;
}
.share-whatsapp:hover {
background-color: #1ebe5d;
}
</style>
</head>
<body>
<div class="score-container">
<h1>Share Your Score!</h1>
<div class="score-display" id="scoreDisplay">0</div>
<p class="share-text">I scored an amazing <span id="score">0</span> points! Can you beat my score?</p>
<div class="share-buttons">
<button class="share-button share-twitter" onclick="shareOnTwitter()">Share on Twitter</button>
<button class="share-button share-facebook" onclick="shareOnFacebook()">Share on Facebook</button>
<button class="share-button share-whatsapp" onclick="shareOnWhatsApp()">Share on WhatsApp</button>
</div>
</div>

<script>
// Example game score
let gameScore = 150; // Replace with the actual score calculation

// Update the score display
document.getElementById("scoreDisplay").textContent = gameScore;
document.getElementById("score").textContent = gameScore;

// Share functions
function shareOnTwitter() {
const text = `I scored ${gameScore} points! Can you beat my score? #GamingWebsite`;
const url = "https://www.yourgamingwebsite.com"; // Replace with your website URL
const twitterUrl = `https://twitter.com/intent/tweet?text=${encodeURIComponent(text)}&url=${encodeURIComponent(url)}`;
window.open(twitterUrl, "_blank");
}

function shareOnFacebook() {
const url = "https://www.yourgamingwebsite.com"; // Replace with your website URL
const facebookUrl = `https://www.facebook.com/sharer/sharer.php?u=${encodeURIComponent(url)}`;
window.open(facebookUrl, "_blank");
}

function shareOnWhatsApp() {
const text = `I scored ${gameScore} points! Can you beat my score? https://www.yourgamingwebsite.com`; // Replace with your URL
const whatsappUrl = `https://wa.me/?text=${encodeURIComponent(text)}`;
window.open(whatsappUrl, "_blank");
}
</script>
</body>
</html>