addded watermark, and loading bar

findirfin · Sep 21, 2024 · acd2617 · acd2617
1 parent e8afc5a
commit acd2617
Show file tree

Hide file tree

Showing 3 changed files with 87 additions and 24 deletions.
diff --git a/lotr-memes.html b/lotr-memes.html
@@ -44,35 +44,14 @@
 
             <div class="percentage_container">
                 <p class="percentage" id="percentage">year percentage loading...</p>
-                <script>
-                    function updateContent() {
-                        const today = new Date();
-                        const formattedDate = `${today.getFullYear()}-${today.getMonth() + 1}-${today.getDate()}`;
-
-                        // Update page title
-                        document.title = `LOTR Meme | ${formattedDate}`;
-
-                        // Update meme image
-                        const imageUrl = `https://findirfin.dev/lotr-memes/images/${formattedDate}.png`;
-                        document.querySelector(".meme").src = imageUrl;
-                        document.querySelector(".meme").alt = `Lord of the Rings meme for ${formattedDate}`;
-
-                        // Update year percentage
-                        const millisecondsInYear = new Date(today.getFullYear() + 1, 0, 1) - new Date(today.getFullYear(), 0, 1);
-                        const millisecondsElapsed = today - new Date(today.getFullYear(), 0, 1);
-                        const percentage = (millisecondsElapsed / millisecondsInYear) * 100;
-                        document.getElementById("percentage").textContent = `${percentage.toFixed(2)}% of the year has passed.`;
-                    }
-
-                    // Call the function when the page loads
-                    document.addEventListener('DOMContentLoaded', updateContent);
-                </script>
+                <script src="meme-script.js" defer></script>
             </div>
 
 
 
             <div>
-                <img class="meme" src="" alt="lord of the rings meme for today">
+                <div class="loader" id="memeLoader"></div>
+                <img class="meme" src="" alt="lord of the rings meme for today" style="display: none;">
             </div>
             <script> // Get the current date, insert image and replace title
                 // Get the current date.

diff --git a/meme-script.js b/meme-script.js
@@ -0,0 +1,68 @@
+function showLoader() {
+    document.getElementById('memeLoader').style.display = 'block';
+    document.querySelector('.meme').style.display = 'none';
+}
+
+function hideLoader() {
+    document.getElementById('memeLoader').style.display = 'none';
+    document.querySelector('.meme').style.display = 'block';
+}
+
+function addWatermarkToMeme(imageUrl, watermarkText) {
+    return new Promise((resolve, reject) => {
+        const img = new Image();
+        img.crossOrigin = "Anonymous";
+        img.onload = function() {
+            const canvas = document.createElement('canvas');
+            const ctx = canvas.getContext('2d');
+
+            canvas.width = img.width;
+            canvas.height = img.height;
+
+            ctx.drawImage(img, 0, 0);
+
+            ctx.font = '20px Arial';
+            ctx.fillStyle = 'rgba(255, 255, 255, 0.5)';
+            ctx.textAlign = 'right';
+            ctx.textBaseline = 'bottom';
+
+            ctx.fillText(watermarkText, canvas.width - 10, canvas.height - 10);
+
+            resolve(canvas.toDataURL());
+        };
+        img.onerror = reject;
+        img.src = imageUrl;
+    });
+}
+
+function updateMemeWithWatermark() {
+    const today = new Date();
+    const formattedDate = `${today.getFullYear()}-${today.getMonth() + 1}-${today.getDate()}`;
+
+    document.title = `LOTR Meme | ${formattedDate}`;
+
+    const imageUrl = `https://findirfin.dev/lotr-memes/images/${formattedDate}.png`;
+
+    showLoader(); // Show loader before starting to load and process the image
+
+    addWatermarkToMeme(imageUrl, 'findirfin.dev/lotr-memes')
+        .then(watermarkedImageUrl => {
+            const memeImg = document.querySelector(".meme");
+            memeImg.src = watermarkedImageUrl;
+            memeImg.alt = `Lord of the Rings meme for ${formattedDate}`;
+            memeImg.onload = hideLoader; // Hide loader when the image has loaded
+        })
+        .catch(error => {
+            console.error('Error adding watermark:', error);
+            const memeImg = document.querySelector(".meme");
+            memeImg.src = imageUrl;
+            memeImg.onload = hideLoader; // Hide loader even if watermarking fails
+        });
+
+    const millisecondsInYear = new Date(today.getFullYear() + 1, 0, 1) - new Date(today.getFullYear(), 0, 1);
+    const millisecondsElapsed = today - new Date(today.getFullYear(), 0, 1);
+    const percentage = (millisecondsElapsed / millisecondsInYear) * 100;
+    document.getElementById("percentage").textContent = `${percentage.toFixed(2)}% of the year has passed.`;
+}
+
+document.addEventListener('DOMContentLoaded', updateMemeWithWatermark);
diff --git a/styles.css b/styles.css
@@ -681,4 +681,20 @@ footer a {
 
 .secret {
   text-align: center;
+}
+
+.loader {
+  border: 5px solid #f3f3f3;
+  border-top: 5px solid #163c55;
+  border-radius: 50%;
+  width: 50px;
+  height: 50px;
+  animation: spin 1s linear infinite;
+  display: none;
+  margin: 20px auto;
+}
+
+@keyframes spin {
+  0% { transform: rotate(0deg); }
+  100% { transform: rotate(360deg); }
 }