From d2ff618a248532969f398072d84914f2733c21b4 Mon Sep 17 00:00:00 2001
From: Bijay Jiwrajka <jiwrajkabijay@gmail.com>
Date: Sun, 7 Jan 2024 11:04:27 +0530
Subject: [PATCH] add: social media sharing options

---
 Dark/end.html   | 26 ++++++++++++++++++++++++++
 Dark/end.js     | 13 ++++++++++++-
 Dark/style.css  | 11 ++---------
 Light/end.html  | 26 ++++++++++++++++++++++++++
 Light/end.js    | 13 ++++++++++++-
 Light/style.css | 11 ++---------
 6 files changed, 80 insertions(+), 20 deletions(-)

diff --git a/Dark/end.html b/Dark/end.html
index 369bb3c..79855dc 100644
--- a/Dark/end.html
+++ b/Dark/end.html
@@ -32,6 +32,32 @@ <h1 id="finalScore"></h1>
         <a class="btn" href="index.html">Go Home</a>
         <a class="btn" href="../Light/end.html">Change Theme</a>
       </div>
+      <div class="socials">
+        <a  href="#" onclick="shareOnFacebook()" style="font-size: 3rem;">
+          <svg
+            xmlns="http://www.w3.org/2000/svg"
+            height="16"
+            width="16"
+            viewBox="0 0 512 512"
+          >
+            <path
+              d="M512 256C512 114.6 397.4 0 256 0S0 114.6 0 256C0 376 82.7 476.8 194.2 504.5V334.2H141.4V256h52.8V222.3c0-87.1 39.4-127.5 125-127.5c16.2 0 44.2 3.2 55.7 6.4V172c-6-.6-16.5-1-29.6-1c-42 0-58.2 15.9-58.2 57.2V256h83.6l-14.4 78.2H287V510.1C413.8 494.8 512 386.9 512 256h0z"
+            />
+          </svg>
+        </a>
+        <a  href="#" onclick="shareOnTwitter()"
+          ><svg
+            xmlns="http://www.w3.org/2000/svg"
+            height="16"
+            width="16"
+            viewBox="0 0 512 512"
+          >
+            <path
+              d="M459.4 151.7c.3 4.5 .3 9.1 .3 13.6 0 138.7-105.6 298.6-298.6 298.6-59.5 0-114.7-17.2-161.1-47.1 8.4 1 16.6 1.3 25.3 1.3 49.1 0 94.2-16.6 130.3-44.8-46.1-1-84.8-31.2-98.1-72.8 6.5 1 13 1.6 19.8 1.6 9.4 0 18.8-1.3 27.6-3.6-48.1-9.7-84.1-52-84.1-103v-1.3c14 7.8 30.2 12.7 47.4 13.3-28.3-18.8-46.8-51-46.8-87.4 0-19.5 5.2-37.4 14.3-53 51.7 63.7 129.3 105.3 216.4 109.8-1.6-7.8-2.6-15.9-2.6-24 0-57.8 46.8-104.9 104.9-104.9 30.2 0 57.5 12.7 76.7 33.1 23.7-4.5 46.5-13.3 66.6-25.3-7.8 24.4-24.4 44.8-46.1 57.8 21.1-2.3 41.6-8.1 60.4-16.2-14.3 20.8-32.2 39.3-52.6 54.3z"
+            />
+          </svg>
+        </a>
+      </div>
     </div>
     <script src="end.js"></script>
   </body>
diff --git a/Dark/end.js b/Dark/end.js
index b59002f..468f311 100644
--- a/Dark/end.js
+++ b/Dark/end.js
@@ -26,4 +26,15 @@ saveHighScore = (e) => {
 
     localStorage.setItem('highScores', JSON.stringify(highScores));
     window.location.assign('index.html');
-};
\ No newline at end of file
+};
+
+function shareOnFacebook() {
+    var urlToShare = "https://cpvalor.netlify.app";
+    window.open("https://www.facebook.com/sharer/sharer.php?u=" + encodeURIComponent(urlToShare), "_blank");
+}
+
+function shareOnTwitter() {
+    var textToShare = "I scored high in the game! Check it out!";
+    var urlToShare = "https://cpvalor.netlify.app";
+    window.open("https://twitter.com/intent/tweet?text=" + encodeURIComponent(textToShare) + "&url=" + encodeURIComponent(urlToShare), "_blank");
+}
\ No newline at end of file
diff --git a/Dark/style.css b/Dark/style.css
index 1dcfc6a..ad71f4c 100644
--- a/Dark/style.css
+++ b/Dark/style.css
@@ -49,23 +49,16 @@ h3 {
 }
 
 /* UTILITIES */
-
 .container {
   width: 100vw;
   height: 100vh;
   display: flex;
   justify-content: center;
   align-items: center;
-  max-width: 80rem;
-  margin: 0 auto;
-  padding: 0rem;
-  padding-left: 1rem;
-  padding-right: 1rem;
+  flex-direction: column;
+  gap: 1rem;
 }
 
-.container > * {
-  width: 100%;
-}
 
 .flex-column {
   display: flex;
diff --git a/Light/end.html b/Light/end.html
index d1cf334..f03f118 100644
--- a/Light/end.html
+++ b/Light/end.html
@@ -32,6 +32,32 @@ <h1 id="finalScore"></h1>
         <a class="btn" href="index.html">Go Home</a>
         <a class="btn" href="../Dark/end.html">Change Theme</a>
       </div>
+      <div class="socials">
+        <a  href="#" onclick="shareOnFacebook()" style="font-size: 3rem;">
+          <svg
+            xmlns="http://www.w3.org/2000/svg"
+            height="16"
+            width="16"
+            viewBox="0 0 512 512"
+          >
+            <path
+              d="M512 256C512 114.6 397.4 0 256 0S0 114.6 0 256C0 376 82.7 476.8 194.2 504.5V334.2H141.4V256h52.8V222.3c0-87.1 39.4-127.5 125-127.5c16.2 0 44.2 3.2 55.7 6.4V172c-6-.6-16.5-1-29.6-1c-42 0-58.2 15.9-58.2 57.2V256h83.6l-14.4 78.2H287V510.1C413.8 494.8 512 386.9 512 256h0z"
+            />
+          </svg>
+        </a>
+        <a  href="#" onclick="shareOnTwitter()"
+          ><svg
+            xmlns="http://www.w3.org/2000/svg"
+            height="16"
+            width="16"
+            viewBox="0 0 512 512"
+          >
+            <path
+              d="M459.4 151.7c.3 4.5 .3 9.1 .3 13.6 0 138.7-105.6 298.6-298.6 298.6-59.5 0-114.7-17.2-161.1-47.1 8.4 1 16.6 1.3 25.3 1.3 49.1 0 94.2-16.6 130.3-44.8-46.1-1-84.8-31.2-98.1-72.8 6.5 1 13 1.6 19.8 1.6 9.4 0 18.8-1.3 27.6-3.6-48.1-9.7-84.1-52-84.1-103v-1.3c14 7.8 30.2 12.7 47.4 13.3-28.3-18.8-46.8-51-46.8-87.4 0-19.5 5.2-37.4 14.3-53 51.7 63.7 129.3 105.3 216.4 109.8-1.6-7.8-2.6-15.9-2.6-24 0-57.8 46.8-104.9 104.9-104.9 30.2 0 57.5 12.7 76.7 33.1 23.7-4.5 46.5-13.3 66.6-25.3-7.8 24.4-24.4 44.8-46.1 57.8 21.1-2.3 41.6-8.1 60.4-16.2-14.3 20.8-32.2 39.3-52.6 54.3z"
+            />
+          </svg>
+        </a>
+      </div>
     </div>
     <script src="end.js"></script>
   </body>
diff --git a/Light/end.js b/Light/end.js
index b59002f..468f311 100644
--- a/Light/end.js
+++ b/Light/end.js
@@ -26,4 +26,15 @@ saveHighScore = (e) => {
 
     localStorage.setItem('highScores', JSON.stringify(highScores));
     window.location.assign('index.html');
-};
\ No newline at end of file
+};
+
+function shareOnFacebook() {
+    var urlToShare = "https://cpvalor.netlify.app";
+    window.open("https://www.facebook.com/sharer/sharer.php?u=" + encodeURIComponent(urlToShare), "_blank");
+}
+
+function shareOnTwitter() {
+    var textToShare = "I scored high in the game! Check it out!";
+    var urlToShare = "https://cpvalor.netlify.app";
+    window.open("https://twitter.com/intent/tweet?text=" + encodeURIComponent(textToShare) + "&url=" + encodeURIComponent(urlToShare), "_blank");
+}
\ No newline at end of file
diff --git a/Light/style.css b/Light/style.css
index b3faf15..1ef9e57 100644
--- a/Light/style.css
+++ b/Light/style.css
@@ -56,15 +56,8 @@ h3 {
   display: flex;
   justify-content: center;
   align-items: center;
-  max-width: 80rem;
-  margin: 0 auto;
-  padding: 0rem;
-  padding-left: 1rem;
-  padding-right: 1rem;
-}
-
-.container > * {
-  width: 100%;
+  flex-direction: column;
+  gap: 1rem;
 }