-
Notifications
You must be signed in to change notification settings - Fork 4
/
index.html
executable file
·122 lines (106 loc) · 6.95 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
<!doctype html>
<html lang="en">
<head>
<title>faceID.js - iOS-like Face ID authentication on the Web</title>
<!-- Meta tags -->
<meta charset="utf-8">
<link rel="shortcut icon" type="image/png" href="/images/favicon.ico">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<meta name="description" content="faceID.js - iOS-like Face ID authentication on the Web">
<meta name="keywords" content="HTML5, AI, artificial intelligence, machine learning, recognition, face ID">
<!-- Font -->
<link rel="dns-prefetch" href="//fonts.googleapis.com">
<link href="https://fonts.googleapis.com/css?family=Rubik:300,400,500" rel="stylesheet">
<!-- 3rd party CSS -->
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css"
integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">
<!-- Main css -->
<link href="css/style.css" rel="stylesheet">
</head>
<body data-spy="scroll" data-target="#navbar" data-offset="30">
<!-- NAV -->
<div class="nav-menu fixed-top">
<div class="container">
<div class="row">
<div class="col-md-12">
<nav class="navbar navbar-dark navbar-expand-lg">
<a class="navbar-brand" href="index.html"><img src="images/logo.png" class="img-fluid" alt="logo"></a> <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbar" aria-controls="navbar" aria-expanded="false" aria-label="Toggle navigation"> <span class="navbar-toggler-icon"></span> </button>
<div class="collapse navbar-collapse" id="navbar">
<ul class="navbar-nav ml-auto">
<li class="nav-item"> <a class="nav-link active" href="#home">HOME <span class="sr-only">(current)</span></a> </li>
<li class="nav-item"> <a class="nav-link" href="#try-it-out">TRY IT OUT</a> </li>
<li class="nav-item"> <a class="nav-link" href="#faq">FAQ</a> </li>
<li class="nav-item"> <a class="nav-link" href="https://github.com/gusgad/faceID.js" target="_blank">GITHUB</a> </li>
</ul>
</div>
</nav>
</div>
</div>
</div>
</div>
<!-- HERO -->
<header class="bg-gradient" id="home">
<div class="container mt-5">
<h1>Authentication tool <br> of the New Era</h1>
<p class="tagline">The AI powered faceID.js brings your website authentication system to the next level and lets you manipulate user accounts by associating facial descriptors with usernames.</p>
</div>
<div class="img-holder mt-3"><img src="images/iphonex.png" alt="phone" class="img-fluid"></div>
</header>
<!-- END -- HERO -->
<!-- TRY IT OUT -->
<div class="section" id="try-it-out">
<div class="container">
<div class="row">
<div class="col-lg-6 offset-lg-6">
<h2 class="mt-4">Try it Out</h2>
<p class="mb-4">We will demonstrate user identification based on the previous data (username, photo) that is given upon registration.</p>
<a href="views/demo.html" class="btn btn-primary">Jump to demo</a>
</div>
</div>
<div class="perspective-phone">
<img src="images/perspective.png" alt="perspective phone" class="img-fluid">
</div>
</div>
</div>
<!-- END -- TRY IT OUT -->
<!-- FAQ -->
<div class="section pt-0" id="faq">
<div class="container">
<div class="section-title">
<h3>Frequently Asked Questions</h3>
</div>
<div class="row pt-4">
<div class="col-md-6">
<h4 class="mb-2">Why use it?</h4>
<p class="light-font mb-5">"Face ID" technology does not only push the web autheniation to its limits but also enhances the overall UX by completely changing the way users perceive their identities on your platform.</p>
<h4 class="mb-2">Any actual benefits?</h4>
<p class="light-font mb-5">An additional security layer will sit on top of your authentication process by making usual usernames obsolete and letting users associate their accounts with their actual face images prior to using passwords.</p>
</div>
<div class="col-md-6">
<h4 class="mb-2">What is the underlying technology?</h4>
<p class="light-font">Computer Vision and Machine Learning technologies let us first compute the facial landmarks by leveraging the power of pre-trained Deep Learning models and analyzing the distance between the input and facial-landmark vectors stored in the database.</p>
<h4 class="mb-2">Is it production ready?</h4>
<p class="light-font mb-5">Since ordinary laptops and phones do not have the "True Depth Camera" and infrared lights, it is still impossible to achieve great accuracy and ship it to prodution only by using our current technologies. However, we recommend using faceID.js as a way to link usernames to faces instead of passwords to faces.</p>
</div>
</div>
</div>
</div>
<!-- END -- FAQ -->
<footer class="my-5 text-center">
<!-- Copyright removal is not prohibited! -->
<p class="mb-2"><small>MIT LICENSE, FREE FOR USE @ 2019.MOBAPP TEMPLATE BY <a href="https://colorlib.com">COLORLIB</a></small></p>
</footer>
<!-- 3rd party libs -->
<script src="https://code.jquery.com/jquery-3.4.1.min.js"
integrity="sha256-CSXorXvZcTkaix6Yvo6HppcZGetbYMGWSFlBw8HfCJo="
crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js"
integrity="sha384-UO2eT0CpHqdSJQ6hJty5KVphtPhzWj9WO1clHTMGa3JDZwrnQq4sF86dIHNDz0W1"
crossorigin="anonymous"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js"
integrity="sha384-JjSmVgyd0p3pXB1rRibZUAYoIIy6OrQ6VrjIEaFf/nJGzIxFDsf4x0xIM+B07jRM"
crossorigin="anonymous"></script>
<!-- Custom JS -->
<script src="js/script.js"></script>
</body>
</html>