-
Notifications
You must be signed in to change notification settings - Fork 1
/
index.html
146 lines (146 loc) · 7.99 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
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
<!DOCTYPE html>
<html lang="en">
<head>
<link rel="manifest" href="manifest.json">
<link rel="stylesheet" href="main.css">
<link rel="icon" type="image/png" href="images/image.png">
<link rel="apple-touch-icon" type="image/png" href="images/image.png">
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Saptcha</title>
<meta name="description" content="Slightly Automated Public Turing test to tell Computers and Humans Apart. Game made for js13k competition. PWA and web monetization features.">
<meta name="theme-color" content="#4A90E2">
<meta property="og:image" content="https://konradlinkowski.github.io/Saptcha/images/image.png">
<meta property="og:image:width" content="256">
<meta property="og:image:height" content="256">
<meta property="og:image:type" content="image/png">
<meta property="og:image:alt" content="Game logo">
<meta name="og:site_name" content="Konrad Linkowski">
<meta name="monetization" content="$coil.xrptipbot.com/Qsw2CNFETAawl2gydFJ11w">
</head>
<body>
<div class="wrapper">
<main class="window">
<div class="window__wrapper" id="main_window">
<header class="window__header">
<div class="header__info">
<span class="info__select">Select all images with</span>
<strong class="info__object" id="objects_name">a cute animal</strong>
<span class="info__verify">Click verify once there are none left.</span>
</div>
<div class="points">
<svg id="lose-arrow" class="undisplayed" xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24">
<path fill="none" d="M0 0h24v24H0V0z"/>
<path fill="#f00" d="M20 12l-1.41-1.41L13 16.17V4h-2v12.17l-5.58-5.59L4 12l8 8 8-8z"/>
</svg>
<svg id="win-arrow" class="undisplayed" xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24">
<path fill="none" d="M0 0h24v24H0V0z"/>
<path fill="#0f0" d="M4 12l1.41 1.41L11 7.83V20h2V7.83l5.58 5.59L20 12l-8-8-8 8z"/>
</svg>
<span class="points__counter" id="points_counter">00000</span>
</div>
</header>
<section class="window__body">
<div id="tiles_container" class="tiles_container"></div>
</section>
<footer class="window__footer">
<div class="footer_buttons">
<button class="button button--action" id="reset_button" title="Get a new challenge">
<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24">
<path d="M17.65 6.35C16.2 4.9 14.21 4 12 4c-4.42 0-7.99 3.58-7.99 8s3.57 8 7.99 8c3.73 0 6.84-2.55 7.73-6h-2.08c-.82 2.33-3.04 4-5.65 4-3.31 0-6-2.69-6-6s2.69-6 6-6c1.66 0 3.14.69 4.22 1.78L13 11h7V4l-2.35 2.35z"/>
<path d="M0 0h24v24H0z" fill="none"/>
</svg>
</button>
<button id="sound_on" disabled class="button button--action" title="Turn on sound effects">
<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24">
<path d="M0 0h24v24H0z" opacity=".1" fill="none"/><path d="M12 1c-4.97 0-9 4.03-9 9v7c0 1.66 1.34 3 3 3h3v-8H5v-2c0-3.87 3.13-7 7-7s7 3.13 7 7v2h-4v8h3c1.66 0 3-1.34 3-3v-7c0-4.97-4.03-9-9-9z"/>
<path d="M4.27 3L3 4.27 7.73 9l4.25 4.258L19.73 21 21 19.73z"/>
</svg>
</button>
<button id="sound_off" class="button button--action undisplayed" title="Turn off sound effects">
<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24">
<path d="M0 0h24v24H0z" opacity=".1" fill="none"/><path d="M12 1c-4.97 0-9 4.03-9 9v7c0 1.66 1.34 3 3 3h3v-8H5v-2c0-3.87 3.13-7 7-7s7 3.13 7 7v2h-4v8h3c1.66 0 3-1.34 3-3v-7c0-4.97-4.03-9-9-9z"/>
</svg>
</button>
<button class="button button--action" id="info_button" title="Info">
<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24">
<path fill="none" d="M0 0h24v24H0V0z"/>
<path d="M11 7h2v2h-2zm0 4h2v6h-2zm1-9C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm0 18c-4.41 0-8-3.59-8-8s3.59-8 8-8 8 3.59 8 8-3.59 8-8 8z"/>
</svg>
</button>
<button class="button button--action fade-in hidden" id="install_button" title="Install the app">
<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24">
<path d="M19 12v7H5v-7H3v7c0 1.1.9 2 2 2h14c1.1 0 2-.9 2-2v-7h-2zm-6 .67l2.59-2.58L17 11.5l-5 5-5-5 1.41-1.41L11 12.67V3h2z"/>
<path fill="none" d="M0 0h24v24H0z"/>
</svg>
</button>
</div>
<button class="button button--submit undisplayed" id="verify_button">Verify</button>
<button class="button button--submit" id="skip_button">Skip</button>
</footer>
</div>
<div id="modal" class="modal hidden">
<article id="intro_screen" class="intro">
<h1 class="intro__title glow">Saptcha</h1>
<p>
<strong class="intro__subtitle">
<span class="glow">Slightly Automated Public Turing</span> test
to tell <span class="glow">Computers</span> and <span class="glow">Humans Apart</span>
</strong>
</p>
<p>
Imagine that you are at the <strong class="glow">back</strong> of the Captcha system.
The programmers didn't have time to code a real artificial intelligence
so now you have to match the pictures with the given name
to help websites test if the user is a Human or a malicious Robot.
</p>
<h2 class="intro__header">How to play</h2>
<p>
Select all images that look like the animal given by the name and than click verify.<br>
For each correct answer you earn <span id="win-text" class="win glow">35</span> points
and you lose <span id="lose-text" class="lose glow">25</span> points for each mistake.<br>
Earn points to unlock new types of animals.
</p>
<p>
Your best score is: <strong id="best-score" class="glow">00000</strong>
</p>
<p>
© 2019 Konrad Linkowski
</p>
</article>
<button class="button button--action button--close" id="close_button">
<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24">
<path d="M19 6.41L17.59 5 12 10.59 6.41 5 5 6.41 10.59 12 5 17.59 6.41 19 12 13.41 17.59 19 19 17.59 13.41 12z"/>
<path d="M0 0h24v24H0z" fill="none"/>
</svg>
</button>
</div>
<div id="unlock_modal" class="modal hidden">
<article id="unlock_screen" class="unlock_screen">
<div class="header__info">
<span class="info__select">You have unlocked</span>
<strong class="info__object" id="unlock_name"></strong>
</div>
<div class="unlock_container">
<div id="unlock_image" class="unlock_screen__image"></div>
<button class="button button--submit" id="unlock_continue">Continue</button>
</div>
</article>
<button class="button button--action button--close" id="unlock_close_button">
<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24">
<path d="M19 6.41L17.59 5 12 10.59 6.41 5 5 6.41 10.59 12 5 17.59 6.41 19 12 13.41 17.59 19 19 17.59 13.41 12z"/>
<path d="M0 0h24v24H0z" fill="none"/>
</svg>
</button>
</div>
</main>
</div>
<script src="registerServiceWorker.js"></script>
<script src="js/zzfx.js"></script>
<script src="js/util.js"></script>
<script src="js/shapes.js"></script>
<script src="js/game.js"></script>
<script src="js/main.js"></script>
</body>
</html>