-
Notifications
You must be signed in to change notification settings - Fork 1
/
Copy pathindex.html
200 lines (178 loc) · 9.25 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
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1.0"/>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8"/>
<title>Home</title>
<!--Let browser know website is optimized for mobile-->
<link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">
<link rel="stylesheet" href="css/font-awesome.min.css">
<!-- Compiled and minified CSS -->
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/materialize/0.97.7/css/materialize.min.css">
<!-- Compiled and minified JavaScript -->
<link href="https://fonts.googleapis.com/css?family=Raleway|Roboto" rel="stylesheet">
<!-- Materialize Scripts-->
<!-- SweetAleert2-->
<!-- Include a polyfill for ES6 Promises (optional) for IE11 and Android browser -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/core-js/2.4.1/core.js"></script>
<!-- First, include the Webcam.js JavaScript Library -->
<link href="css/style.css" type="text/css" rel="stylesheet" media="screen,projection"/>
<script type="text/javascript" src="https://code.jquery.com/jquery-2.1.1.min.js"></script>
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/materialize/0.97.7/js/materialize.min.js"></script>
<script src="js/init.js"></script>
<!-- Place this tag in your head or just before your close body tag. -->
<script async defer src="https://buttons.github.io/buttons.js"></script>
</head>
<body>
<div class="navbar-fixed">
<nav class="white" role="navigation">
<div class="nav-wrapper container">
<ul id="slide-out" class="side-nav">
<li><a href=".">Home</a></li>
<li><a href="captura.html">Captura</a></li>
<li><a href="reconocimiento.html">Reconocimiento Facial</a></li>
</ul>
<a href="#" data-activates="slide-out" class="button-collapse show-on-large"><i class="material-icons">menu</i></a>
<a id="logo-container" href="." class="brand-logo">RF</a>
<ul class="right hide-on-med-and-down">
<li><a href="captura.html">Captura</a></li>
<li><a href="reconocimiento.html">Reconocimiento</a></li>
</ul>
<ul id="nav-mobile" class="side-nav">
<li><a href="captura.html">Captura</a></li>
<li><a href="reconocimiento.html">Reconocimiento</a></li>
</ul>
</div>
</nav>
</div>
<div id="index-banner" class="parallax-container">
<div class="section no-pad-bot">
<div class="container">
<br><br>
<div class="row center">
<h3 class="header col s12 teal-text text-lighten-2">Reconocimiento Facial</h3>
</div>
<div class="row center">
<h5 class="header col s12 light">Bienvenido al módulo de reconocimiento facial</h5>
</div>
<div class="row center">
<a href="captura.html" id="download-button" class="btn-large waves-effect waves-light indigo lighten-1">Registrarse</a>
</div>
<br><br>
</div>
</div>
<div class="parallax"><img src="media/header1.png" alt="Unsplashed background img 1"></div>
</div>
<div class="container">
<div class="section">
<!-- Icon Section -->
<div class="row">
<div class="col s12 m4">
<div class="icon-block">
<h2 class="center brown-text"><i class="material-icons">lock</i></h2>
<h5 class="center">Alto grado de seguridad</h5>
<p class="light">Nuestros rasgos faciales son únicos, es por esto que la biometría facial es uno de los métodos de autenticación más seguros actualmente, es fácil de implementar y mucho menos costoso que otros metodos de autenticación.</p>
</div>
</div>
<div class="col s12 m4">
<div class="icon-block">
<h2 class="center brown-text"><i class="material-icons">photo_camera</i></h2>
<h5 class="center">Un único requisito</h5>
<p class="light">Sólo necesitarás una cámara web o la cámara de tu dispositivo móvil, recuerda que es muy importante contar con buena iluminación y que tendrás que mantener tu cara estable.</p>
</div>
</div>
<div class="col s12 m4">
<div class="icon-block">
<h2 class="center brown-text"><i class="material-icons">mood</i></h2>
<h5 class="center">Sonríe y listo</h5>
<p class="light">Cuando ya estés sólo necesitarás introducir tu correo y sonreir, solo eso basta para validar tu identidad ya que el sistema escaneará todos tus rasgos faciales para otorgar el acceso, nada de molestas contraseñas.</p>
</div>
</div>
</div>
</div>
</div>
<div class="parallax-container valign-wrapper">
<div class="section no-pad-bot">
<div class="container">
<div class="row center">
<h5 class="header col s12 light">Compatible con dispositivos móviles</h5>
</div>
</div>
</div>
<div class="parallax"><img src="https://listen.statestreet.com/content/dam/ssblog/inline/face.gif" alt="Unsplashed background img 2"></div>
</div>
<div class="container">
<div class="section">
<div class="row">
<div class="col s12 center">
<h3><i class="mdi-content-send brown-text"></i></h3>
<h4>Reconocimiento vocal</h4>
<p class="left-align light">Estamos trabjando desarrollando un proyecto similar que involucra reconocimiento vocal, en el cual será posible identificarse con solo decir una frase predefinida, nuestro proposito principal es realizar un módulo que trabaje en conjunto con los dos tipos de autenticación biométrica.</p>
<a href="#tcmodal" class="btn waves-effect waves-light indigo lighten-1 tctrigger">Más información</a>
</div>
</div>
</div>
</div>
<div class="row">
<div id="tcmodal" class="modal">
<div class="modal-content">
<h4>Rostro & Voz</h4>
<p>La biometría facial y de voz actualmente permiten una implementación sencilla, pues en cuanto a hardware se refiere tan solo se necesita una cámara y un micrófono respectivamente, encontramos estos componentes físicos en dispositivos móviles o computadores lo que no solo reduce costos sino que también aumenta su sencillez y usabilidad.
</p>
<p>La biometría facial y de voz actualmente permiten una implementación sencilla, pues en cuanto a hardware se refiere tan solo se necesita una cámara y un micrófono respectivamente, encontramos estos componentes físicos en dispositivos móviles o computadores lo que no solo reduce costos sino que también aumenta su sencillez y usabilidad.
</p>
</div>
<div class="modal-footer">
<a href="#!" class=" modal-action modal-close waves-effect waves-green btn-flat">Cerrar</a>
</div>
</div>
</div>
<script type="text/javascript">
$(document).ready(function(){
$('.tctrigger').leanModal();
});
</script>
<div class="parallax-container valign-wrapper">
<div class="section no-pad-bot">
<div class="container">
<div class="row center">
<h5 class="header col s12 light">Mi voz es mi contraseña</h5>
<!-- Place this tag where you want the button to render. -->
<a href="https://github.com/julian1303/ReconocimientoVocal" class="btn-floating btn-large waves-effect waves-light indigo lighten-1"><i class="fa fa-github"></i></a>
</div>
</div>
</div>
<div class="parallax"><img src="http://www.dataversity.net/wp-content/uploads/2015/09/Voice-Processing.jpg" alt="Unsplashed background img 3"></div>
</div>
<footer class="page-footer indigo darken-4">
<div class="container">
<div class="row">
<div class="col l6 s12">
<h5 class="white-text">Sobre nosotros</h5>
<p class="grey-text text-lighten-4">Somos estudiantes de último semestre de ingeniería de sistemas de la universidad Industrial de Santander, actualmente estamos desarrollando nuestro proyecto orientado en métodos de autenticación biométrica.</p>
</div>
<div class="col l3 s12">
<h5 class="white-text">Desarrollado con</h5>
<ul>
<li><a class="white-text" href="https://aws.amazon.com/es/rekognition/">Amazon Rekognition</a></li>
<li><a class="white-text" href="http://materializecss.com/">Materializecss</a></li>
<li><a class="white-text" href="https://limonte.github.io/sweetalert2/">SweetAlert2</a></li>
</ul>
</div>
<div class="col l3 s12">
<h5 class="white-text">Repositorios</h5>
<ul>
<li><a class="github-button" href="https://github.com/davidjurado/ReconocimientoFacial" data-size="large" aria-label="Star davidjurado/ReconocimientoFacial on GitHub">ReconocimientoFacial</a></li>
<li><a class="github-button" href="https://github.com/julian1303/ReconocimientoVocal" data-size="large" aria-label="Star julian1303/ReconocimientoVocal on GitHub">ReconocimientoVocal</a></li>
</ul>
</div>
</div>
</div>
<div class="footer-copyright">
<div class="container">
©2017 Universidad Industrial de Santander
</div>
</div>
</footer>
</body>
</html>