-
Notifications
You must be signed in to change notification settings - Fork 189
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
- Loading branch information
Showing
2 changed files
with
132 additions
and
0 deletions.
There are no files selected for viewing
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
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> |