Skip to content

Instantly share code, notes, and snippets.

@japboy

japboy/index.html

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.
Download ZIP

Revisions

  1. japboy created this gist Feb 19, 2019.
    148 changes: 148 additions & 0 deletions index.html
    View file
    Original file line number Diff line number Diff line change
    @@ -0,0 +1,148 @@
    <!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>