-
Notifications
You must be signed in to change notification settings - Fork 0
/
index.html
47 lines (42 loc) · 2.34 KB
/
index.html
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
<!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 Monet?</title>
<script defer src="index.js"></script>
<link href="tailwind-compiled-styles.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">
<link href="https://fonts.googleapis.com/css2?family=Oxanium:wght@200;400;500;600;700;800&display=swap"
rel="stylesheet">
</head>
<body class="flex flex-col h-screen pt-10 text-white bg-black">
<h1 class="mb-5 font-mono text-5xl font-semibold tracking-wider text-center">Fake or Monet?</h1>
<p class="mb-20 font-sans text-2xl font-medium leading-relaxed tracking-wide text-center">One of these is an
authentic Claude Monet painting. The other was made by an AI. <br> Can you tell <b>which is the real one?</b>
</p>
<div class="flex flex-row items-center gap-12 mx-auto mt-10" id="pics">
<!-- class="order-last" -->
<a onclick="window.location.href = 'correct.html'" id="correct" class="overflow-hidden w-[35vw] h-[320px]">
<img
id="correct_img" class="object-cover w-full hover:brightness-75 h-full" src="" loading="eager">
</a>
<a onclick="window.location.href = 'wrong.html'" id="wrong" class="overflow-hidden w-[35vw] h-[320px]">
<img
id="wrong_img" class="object-cover w-full hover:brightness-75 h-full" src="" loading="eager">
</a>
</div>
<p class="w-3/4 pb-5 mx-auto mt-auto text-sm text-center">Made by Arjun Sharma based on code originally written by
Rohan Kapur.
Images from the <a href="https://www.kaggle.com/datasets/dimitreoliveira/monet-paintings-jpg-berkeley">Berkeley
Monet Dataset</a> and <a
href="https://www.kaggle.com/code/dimitreoliveira/introduction-to-cyclegan-monet-paintings/notebook">Monet
CycleGAN</a></p>
</div>
</body>
</html>