diff --git a/static/css/main.css b/static/css/main.css index beed3e3..62f7aae 100644 --- a/static/css/main.css +++ b/static/css/main.css @@ -396,4 +396,31 @@ i.far.fa-comment { .post h2 { margin-top: 20px; +} + +/* Tooltip */ +.gif-container { + position: relative; + display: inline-block; +} + +.tooltiptext { + visibility: hidden; + width: 170px; + background-color: #333; + color: #fff; + text-align: center; + border-radius: 5px; + padding: 5px 0; + position: absolute; + z-index: 1; + left: 30px; + margin-left: 12px; + opacity: 0; + transition: opacity 0.3s; +} + +.gif-container:hover .tooltiptext { + visibility: visible; + opacity: 1; } \ No newline at end of file diff --git a/static/images/bird.gif b/static/images/bird.gif new file mode 100644 index 0000000..03ba1cc Binary files /dev/null and b/static/images/bird.gif differ diff --git a/static/js/main.js b/static/js/main.js index e69de29..89ed756 100644 --- a/static/js/main.js +++ b/static/js/main.js @@ -0,0 +1,29 @@ +document.addEventListener("DOMContentLoaded", function() { + var gif = document.querySelector(".clickable"); + + var notification = document.getElementById("copyNotification"); + + gif.addEventListener("mouseenter", function() { + notification.textContent = "Get link to game"; + notification.style.visibility = "visible"; + }); + + gif.addEventListener("click", function() { + var gameUrl = "https://gitea.rkg.lv/elukjanovica/Picture-Puzzle-website.git"; + + navigator.clipboard.writeText(gameUrl).then(function() { + notification.textContent = "Link copied!"; + + setTimeout(function() { + notification.textContent = "Get link to game"; + }, 2000); + }, function() { + console.error("Failed to copy link."); + }); + }); + + gif.addEventListener("mouseleave", function() { + notification.style.visibility = "hidden"; + }); + }); + \ No newline at end of file diff --git a/templates/base.html b/templates/base.html index db5eaf8..5276eea 100644 --- a/templates/base.html +++ b/templates/base.html @@ -9,7 +9,13 @@