elukjanovica
/
Picture-Puzzle-website
0
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

main
elukjanovica 2024-04-19 22:03:43 +03:00
parent 6937bd7d3d
commit 95093eee27
5 changed files with 68 additions and 4 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

27
static/css/main.css
View File

@ -397,3 +397,30 @@ i.far.fa-comment {
.post h2 { .post h2 {
margin-top: 20px; 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;
}

BIN
static/images/bird.gif 100644
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 1.4 KiB

29
static/js/main.js
View File

@ -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";
});
});

7
templates/base.html
View File

@ -9,7 +9,13 @@
</head> </head>
<body> <body>
<nav> <nav>
<div class="logo-container">
<a href="{{ url_for('index') }}"><img src="{{ url_for('static', filename='images/Picture-Puzzle-logo.png') }}" alt="Picture Puzzle website logo"></a> <a href="{{ url_for('index') }}"><img src="{{ url_for('static', filename='images/Picture-Puzzle-logo.png') }}" alt="Picture Puzzle website logo"></a>
<div class="gif-container">
<img src="{{ url_for('static', filename='images/bird.gif') }}" class="clickable" aria-label="Copy game link">
<span class="tooltiptext" id="copyNotification">Get link to game</span>
</div>
</div>
<ul> <ul>
<li><a class="link" href="{{ url_for('all_posts') }}">Posts</a></li> <li><a class="link" href="{{ url_for('all_posts') }}">Posts</a></li>
<li><a class="link" href="#">About</a></li> <li><a class="link" href="#">About</a></li>
@ -56,5 +62,6 @@
</ul> </ul>
<p>&copy; 2024 Picture Puzzle. All rights reserved.</p> <p>&copy; 2024 Picture Puzzle. All rights reserved.</p>
</footer> </footer>
<script src="{{ url_for('static', filename='js/main.js') }}"></script>
</body> </body>
</html> </html>

5
templates/index.html
View File

@ -46,11 +46,12 @@
</section> </section>
<section class="trending-topics"> <section class="trending-topics">
<h2>Trending Topics</h2> </br></br><h2>Main Topics</h2>
<div class="topics"> <div class="topics">
<i class="far fa-comment fa-lg"></i><a href="#"> Instalation</a></br> <i class="far fa-comment fa-lg"></i><a href="#"> Instalation</a></br>
<i class="far fa-comment fa-lg"></i><a href="#"> How to play</a></br> <i class="far fa-comment fa-lg"></i><a href="#"> How to play</a></br>
<i class="far fa-comment fa-lg"></i><a href="#"> Known issues</a></br> <i class="far fa-comment fa-lg"></i><a href="#"> Game settings</a></br>
<i class="far fa-comment fa-lg"></i><a href="#"> Export/import</a></br></br></br>
</div> </div>
</section> </section>