Skip to content

Instantly share code, notes, and snippets.

@japboy
Created February 19, 2019 16:14
Show Gist options
  • Save japboy/86bdec64de9bc6a970b5d7ba5ac45d11 to your computer and use it in GitHub Desktop.
Save japboy/86bdec64de9bc6a970b5d7ba5ac45d11 to your computer and use it in GitHub Desktop.
<!doctype html>
<html lang="ja">
<head>
<meta charset="utf-8">
<title>Tinder?</title>
<meta name="viewport" content="width=device-width,minimum-scale=1,initial-scale=1">
<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.7.2/css/all.css" integrity="sha384-fnmOCqbTlWIlj8LyTjo7mOUStjsKC4pOpQbqyi7RrhN7udi9RwhKkMHpvLbHG9Sr" crossorigin="anonymous">
<style>
body {
background-color: rgb(255, 255, 255);
color: rgb(15, 15, 15);
margin: 0;
padding: 0;
}
.background {
background-image: linear-gradient(0.5turn, hsl(0, 0%, 100%), hsl(0, 0%, 99%));
bottom: 0;
height: 100vh;
left: 0;
position: absolute;
width: 80vw;
z-index: -1;
}
.title {
font-size: 1.6em;
line-height: 1;
margin: 1.2em 0;
text-align: center;
}
.title-emoji {
background-color: rgb(254, 92, 97);
border-radius: 50%;
padding: 0.3em;
}
main {
text-align: center;
}
.frame {
background-color: hsl(0, 0%, 100%);
border-radius: 2%;
box-shadow: 0 0 6px hsl(0, 0%, 90%);
display: inline-block;
height: 110vw;
width: 96vw;
}
#pic-container {
display: inline-block;
height: 96vw;
text-align: center;
width: 96vw;
}
#pic {
border-radius: 2% 2% 0 0;
height: 96vw;
width: 96vw;
}
button {
background-color: hsl(0, 0%, 100%);
border-radius: 50%;
border: none 0 transparent;
box-shadow: 0 0 6px hsl(0, 0%, 90%);
font-size: 2em;
height: 20vw;
position: absolute;
width: 20vw;
}
button::hover {
box-shadow: 0 0 1px hsl(0, 0%, 90%);
}
#like {
bottom: 8vh;
color: rgb(254, 92, 97);
left: 15vw;
}
#dislike {
bottom: 8vh;
color: rgb(50, 230, 180);
right: 15vw;
}
footer {
bottom: 0;
position: absolute;
text-align: center;
width: 100vw;
}
address {
font-style: normal;
font-size: small;
}
</style>
<script>
function load(el, src) {
return new Promise((resolve, reject) => {
el.addEventListener('error', reject, { once: true });
el.addEventListener('load', resolve, { once: true });
el.src = src;
});
}
async function draw() {
console.log('clicked.');
const el = document.createElement('img');
el.id = 'pic'
const parent = document.querySelector('#pic-container');
parent.innerHTML = '';
parent.appendChild(el);
try {
await load(el, 'https://thispersondoesnotexist.com/?_=' + Math.floor(Math.random() * 10));
} catch (error) {
console.warn(error.message);
}
}
async function init() {
document.querySelectorAll('button').forEach((el) => {
el.addEventListener('click', draw, false);
});
draw();
}
document.addEventListener('DOMContentLoaded', init, { once: true });
</script>
</head>
<body class="container">
<div class="background"></div>
<header>
<h1 class="title">
<span class="title-emoji">👻</span>
</h1>
</header>
<main>
<div class="frame">
<div id="pic-container"></div>
</div>
<div>
<button id="like">
<i class="fas fa-heart"></i>
</button>
<button id="dislike">
<i class="fas fa-times"></i>
</button>
</div>
</main>
<footer>
<address><a href="https://thispersondoesnotexist.com">https://thispersondoesnotexist.com</a></address>
</footer>
</body>
</html>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment