You cannot select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
64 lines
1.9 KiB
HTML
64 lines
1.9 KiB
HTML
<!DOCTYPE html>
|
|
<html lang="en">
|
|
<head>
|
|
<meta charset="UTF-8">
|
|
<meta http-equiv="X-UA-Compatible" content="IE=edge">
|
|
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
|
<title>Document</title>
|
|
<link rel="stylesheet" href="/static/main.css">
|
|
</head>
|
|
<body>
|
|
|
|
<nav>
|
|
<div class = "navLogo">
|
|
<img src="/static/logo.png" width = "300px">
|
|
</div>
|
|
|
|
{% if loggedIn == True %}
|
|
<div class = "navLinks">
|
|
<a href="/">Home</a>
|
|
<a href="/upload">Upload</a>
|
|
<a href="/sign-out">Sign Out</a>
|
|
</div>
|
|
{% else %}
|
|
<div class = "navLinks">
|
|
<a href="/">Home</a>
|
|
<a href="/sign-in">Sign In</a>
|
|
<a href="/sign-up">Sign Up</a>
|
|
</div>
|
|
{% endif %}
|
|
|
|
</nav>
|
|
|
|
<h1 class = "userTitle">{{ username }}'s Memes</h1>
|
|
|
|
<div class = "memes">
|
|
|
|
{% for meme in memes %}
|
|
<div class = "meme">
|
|
<h1>{{ meme[0].title }}</h1>
|
|
<img src="/static/memes/{{ meme[0].image }}" class = "memeImage">
|
|
</div>
|
|
{% endfor %}
|
|
|
|
</div>
|
|
|
|
<script>
|
|
|
|
const items = document.querySelectorAll(".meme")
|
|
|
|
console.log(items)
|
|
items.forEach( item => {
|
|
item.addEventListener("mousemove", event => {
|
|
console.log(item)
|
|
item.style.transform = `perspective(500px) scale(1.02) rotateX(${ - 20 * (( item.getBoundingClientRect().bottom - event.clientY - item.clientHeight / 2 ) / item.clientHeight ) / 5 }deg) rotateY(${ 20 * (( item.getBoundingClientRect().right - event.clientX - item.clientWidth / 2) / item.clientWidth ) / 5 }deg)`;
|
|
})
|
|
|
|
item.addEventListener("mouseout", event => {
|
|
item.style.transform = "perspective(500px) scale(1) rotateX(0) rotateY(0)";
|
|
})
|
|
})
|
|
</script>
|
|
|
|
</body>
|
|
</html> |