<!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>