-
Notifications
You must be signed in to change notification settings - Fork 3
/
Copy pathindex.html
90 lines (77 loc) · 4.17 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
<html>
<head>
<meta charset="utf-8" />
<meta name='viewport' content='width=device-width, initial-scale=1.0, maximum-scale=1.0, shrink-to-fit=no'>
<meta content='text/html; charset=utf-8' http-equiv='Content-Type'>
<meta http-equiv='X-UA-Compatible' content='IE=edge'>
<title>D-5:30 | Welcome</title>
<link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">
<link rel="stylesheet" type="text/css" href="./style.css" />
<meta name="author" content="Jack Guinane" />
<link id="favicon" rel="shortcut icon" type="image/png" href="./favicon.png">
<script type="text/javascript" src="script.js"></script>
</head>
<body>
<div id="content">
<style>
:root
{
--background: #743a94;
--border: #8f47a9;
--foreground: #000;
--foreground-color: #ffa0bf;
--star-color: #000;
}
.film:hover img
{
box-shadow: -1px 3px 20px 0px rgba(0, 0, 0, 0.5), -1px 3px 9px 0px rgba(0, 0, 0, 1);
}
.film img
{
box-shadow: rgba(0, 0, 0, 0.5) -1px 3px 8px 0px, 1px 3px 9px 0px rgba(0, 0, 0, 0.8);
}
.testbutton
{
text-align: center;
}
</style>
<div class="target top" onclick="gotoPage('/settings.html?=drama')">
<div style="top:0px;width: 100%;height: 20px !important;" class="static-border-right"></div>
</div>
<div class="target bottom" onclick="gotoPage('/apps.html', 'bottom')">
<div style="top:calc(100% - 20px);width: 100%;height: 20px !important;" class="static-border-right"></div>
</div>
<div class="target right">
<div class="static-border-right"></div>
</div>
<div class="target left">
<div class="static-border-left"></div>
</div>
<div style="width: 550px; margin: 0px auto; text-align: center; padding-top: 150px;">
<h1 style="color:var(--foreground-color);font-family: 'title'; font-size: 3rem;">Welcome</h1>
<p style="color:var(--foreground-color);font-family: 'body'; font-size: 1.2rem;">
This project is a concept interface. It uses Webgazer.js to track where you are looking. Navigate between pages by looking at the boarders. To make a selection press SPACEBAR.
<br><br>
To recalibrate the system at anytime press C. Calibrate by clicking on each of the dots (with the mouse) while focusing on them. Make sure your face is within the bounderies of the green square.
<br><br>
</p>
<div style="margin:80px 0 0 0;">
<a href="https://beanjuice.ca/apps.html" style="text-decoration:none;background: var(--foreground-color); color:var(--background);font-family:'ui';font-size: 1.2rem;margin:10px; padding:10px 30px; border-radius: 800px; border: 2px solid var(--foreground-color);text-transform: uppercase;">Full demo</a>
<a href="https://guinane.xyz/Eye-Tracking-OS/apps.html" style="text-decoration:none;color:var(--foreground-color);font-family:'ui';font-size: 1.2rem;margin:10px; padding:10px 30px; border-radius: 800px; border: 2px solid;text-transform: uppercase;">Use mouse</a>
</div>
</div>
</div> <!-- end of content -->
<div id="brightness"></div>
<div id="calibrator">
<div class="cali-bttn"></div>
<div class="cali-bttn"></div>
<div class="cali-bttn"></div>
<div class="cali-bttn"></div>
<div class="cali-bttn"></div>
<div class="cali-bttn"></div>
<div class="cali-bttn"></div>
<div class="cali-bttn"></div>
<div class="cali-bttn"></div>
</div>
</body>
</html>