faces/index.html at master · tsrsmict/faces · GitHub

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
<!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>Fake or not?</title>
    <script defer src="index.js"></script>
    <link href="tailwind.css" rel="stylesheet">
    <link rel="preconnect" href="https://fonts.googleapis.com">
    <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
    <link href="https://fonts.googleapis.com/css2?family=Major+Mono+Display&family=Montserrat:ital,wght@0,200;0,300;0,400;0,500;0,600;0,700;0,800;0,900;1,100;1,200;1,300;1,400;1,500;1,600;1,700;1,800;1,900&display=swap" rel="stylesheet">
</head>
<body class="h-screen bg-black pt-10 text-white flex flex-col">
    <h1 class="w-full text-center text-5xl font-mono">Human or ai?</h1>
    <p class="w-1/2 mx-auto text-center pt-3">One of these photos has a real human, the other was made by AI. Click on the photo you think features a real human.</p>
    <div class="w-fit mx-auto flex flex-row mt-10" style="display: none;" id="pics">
        <!-- class="order-last" -->
        <a onclick="window.location.href = 'correct.html'" id="correct" class="w-72 h-72 overflow-hidden"><img id="correct_img" class="w-72 mx-6 hover:brightness-75" src="" loading="eager"></a>
        <a onclick="window.location.href = 'wrong.html'" id="wrong" class="w-72 max-h-72 overflow-hidden">  <img id="wrong_img" class="w-72 mx-6 hover:brightness-75" src="" loading="eager"></a>
    </div>
    <p class="w-3/4 mx-auto text-center mt-auto pb-5 text-sm">Made by <a href="https://github.com/adadarohan">Rohan Kapur</a>, the head of ICT. Images from <a href="https://github.com/NVlabs/ffhq-dataset">The Flickr Faces Dataset</a> and <a href="https://generated.photos/">Generated.photos</a></p>
</body>
</html>