japboy/index.html

## index.html
<!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>
	<!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>