343 lines
15 KiB
HTML
343 lines
15 KiB
HTML
<!doctype html>
|
||
<html>
|
||
<head>
|
||
<meta charset="utf-8">
|
||
<title>CEG4912/13 Capstone Project</title>
|
||
<link rel="stylesheet" type="text/css" href="css/bootstrap.min.css"/>
|
||
<link rel="stylesheet" type="text/css" href="css/font-awesome.min.css"/>
|
||
<link rel="stylesheet" type="text/css" href="css/simple-line-icons.css"/>
|
||
<link rel="stylesheet" type="text/css" href="css/animate.css"/>
|
||
<link rel="stylesheet" type="text/css" href="style.css"/>
|
||
<link rel="stylesheet" type="text/css" href="css/owl.carousel.css"/>
|
||
<link rel="stylesheet" type="text/css" href="css/owl.theme.css"/>
|
||
<link rel="stylesheet" type="text/css" href="css/owl.transitions.css"/>
|
||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||
<link href='https://fonts.googleapis.com/css?family=Work+Sans:400,100,200,300,500,600,800,900' rel='stylesheet' type='text/css'>
|
||
<link href='https://fonts.googleapis.com/css?family=Oleo+Script+Swash+Caps:400,700' rel='stylesheet' type='text/css'>
|
||
|
||
<!-- HTML5 shim and Respond.js for IE8 support of HTML5 elements and media queries -->
|
||
<!-- WARNING: Respond.js doesn't work if you view the page via file:// -->
|
||
<!--[if lt IE 9]>
|
||
<script src="https://oss.maxcdn.com/html5shiv/3.7.2/html5shiv.min.js"></script>
|
||
<script src="https://oss.maxcdn.com/respond/1.4.2/respond.min.js"></script>
|
||
<![endif]-->
|
||
|
||
</head>
|
||
|
||
<body id="myPage" data-spy="scroll" data-target=".navbar" data-offset="60">
|
||
<div class="main-header" id="main-header">
|
||
<nav class="navbar mynav navbar-fixed-top">
|
||
<div class="container">
|
||
<div class="navbar-header">
|
||
<button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#myNavbar"> <span class="icon-bar"></span> <span class="icon-bar"></span> <span class="icon-bar"></span> </button>
|
||
<a class="navbar-brand" href="#">Vehicle Anti-theft Recognition System</a> </div>
|
||
<div class="collapse navbar-collapse" id="myNavbar">
|
||
<ul class="nav navbar-nav navbar-right">
|
||
<li class="active"><a href="#banner">Home</a></li>
|
||
<li><a href="#work">Work</a></li>
|
||
<li><a href="#testimonials">Team</a></li>
|
||
<li><a href="#about">About</a></li>
|
||
<li><a href="#contact">Contact Us</a></li>
|
||
</ul>
|
||
</div>
|
||
</div>
|
||
</nav>
|
||
</div>
|
||
<div class="banner" id="banner">
|
||
<div class="bg-overlay">
|
||
<div class="container">
|
||
<div class="row">
|
||
<div class="col-md-12">
|
||
<div class="banner-text">
|
||
<h2>Welcome to a <span>more secure</span> future</h2>
|
||
<p>Vehicular safety through an innovative and futuristic method</p>
|
||
<p class="feature-detail">Vehicle Anti-theft Recognition System</p> </div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
<div class="features">
|
||
<div class="container">
|
||
<div class="row">
|
||
<div class="col-md-4 col-sm-6 col-xs-12">
|
||
<div class="feature-box media">
|
||
<div class="icon-box text-center pull-left media-object"> <i class="icon-eye"></i> </div>
|
||
<div class="feature-text media-body">
|
||
<h4>Face Recognition</h4>
|
||
<p class="feature-detail">Utilizing Python's OpenCV libary, a facial recognition system software
|
||
has been created for an innovative and modern way of securing your vehicle.</p>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
<div class="col-md-4 col-sm-6 col-xs-12">
|
||
<div class="feature-box media pull-left">
|
||
<div class="icon-box text-center pull-left media-object"> <i class="icon-screen-smartphone"></i> </div>
|
||
<div class="feature-text media-body">
|
||
<h4>Mobile Application</h4>
|
||
<p class="feature-detail">Android Studio has been used to create a functional mobile
|
||
application, giving the user engine, lock, and alarm control. </p>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
<div class="col-md-4 col-sm-6 col-xs-12">
|
||
<div class="feature-box media pull-left">
|
||
<div class="icon-box text-center pull-left media-object"> <i class="icon-rocket"></i> </div>
|
||
<div class="feature-text media-body">
|
||
<h4>Functional Prototype</h4>
|
||
<p class="feature-detail">A Raspberry Pi 4 processor and Firebase's Realtime Database have
|
||
allowed us to crate a fully functional real-time prototype.
|
||
</p>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
<!-- Portfolio -->
|
||
<div id="work" class="portfolio">
|
||
<div class="container">
|
||
<div class="row">
|
||
<div class="col-lg-10 col-lg-offset-1 text-center text">
|
||
<h3>Our Work</h3>
|
||
<div class="row">
|
||
<div class="col-md-6 col-sm-6">
|
||
<div class="portfolio-item"> <a href="#"> <img class="img-portfolio img-responsive" src="images/portfolio-1.jpg"> </a> </div>
|
||
</div>
|
||
<div class="col-md-6 col-sm-6">
|
||
<div class="portfolio-item"> <a href="#"> <img class="img-portfolio img-responsive" src="images/portfolio-2.jpg"> </a> </div>
|
||
</div>
|
||
<div class="col-md-6 col-sm-6">
|
||
<div class="portfolio-item"> <a href="#"> <img class="img-portfolio img-responsive" src="images/portfolio-3.jpg"> </a> </div>
|
||
</div>
|
||
<div class="col-md-6 col-sm-6">
|
||
<div class="portfolio-item"> <a href="#"> <img class="img-portfolio img-responsive" src="images/portfolio-4.jpg"> </a> </div>
|
||
</div>
|
||
</div>
|
||
<!-- /.row (nested) -->
|
||
<!-- <a href="#" class="view-more">View More Items</a> </div> -->
|
||
<!-- /.col-lg-10 -->
|
||
</div>
|
||
<!-- /.row -->
|
||
</div>
|
||
<!-- /.container -->
|
||
</div>
|
||
<div class="testimonials" id="testimonials">
|
||
<div class="container">
|
||
<div class="row">
|
||
<div class="col-md-12">
|
||
<div class="text-center">
|
||
<h3>Our Team</h3>
|
||
</div>
|
||
</div>
|
||
<div class="col-md-offset-2 col-md-8 col-sm-offset-1 col-sm-10">
|
||
<div id="owl-demo" class="owl-carousel owl-theme test">
|
||
<div class="item">
|
||
<p><sup><i class="fa fa-quote-left"></i></sup>Autonomous, energy efficient vehicles are the next big thing in the car industry. It only makes sense that the security system moves with the times. <sup><i class="fa fa-quote-right"></i></sup></p>
|
||
<div class="test-img"> <img src="images/team-img-01.jpg"/>
|
||
<p><strong>Sam Hermas Parada</strong></p>
|
||
</div>
|
||
</div>
|
||
<div class="item">
|
||
<p><sup><i class="fa fa-quote-left"></i></sup>Based on the high speed network connection, more and more device are connected to internet and controlled by mobile phones. Our project is helping the customer to enjoy the true keyless to their life and make no key driving be a part of their smart home life.<sup><i class="fa fa-quote-right"></i></sup></p>
|
||
<div class="test-img"> <img src="images/team-img-02.jpg"/>
|
||
<p><strong>Leyao Li</strong></p>
|
||
</div>
|
||
</div>
|
||
<div class="item">
|
||
<p><sup><i class="fa fa-quote-left"></i></sup>Our project is important because it is protecting the user’s car through a simple face recognition program that is innovative and efficient.<sup><i class="fa fa-quote-right"></i></sup></p>
|
||
<div class="test-img"> <img src="images/team-img-03.jpg"/>
|
||
<p><strong>Batuhan Basoglu</strong></p>
|
||
</div>
|
||
</div>
|
||
<div class="item">
|
||
<p><sup><i class="fa fa-quote-left"></i></sup>The Anti-theft system works with the help of sensors and cameras in and installed around the vehicle, we are able to provide more security to our customer.<sup><i class="fa fa-quote-right"></i></sup></p>
|
||
<div class="test-img"> <img src="images/team-img-04.jpg"/>
|
||
<p><strong>Qian Ma</strong></p>
|
||
</div>
|
||
</div>
|
||
<div class="item">
|
||
<p><sup><i class="fa fa-quote-left"></i></sup>Our project has 3 main advantages:
|
||
1. More convenient and good security: Personal facial images are not easy to be obtained by the outside world, lower probability to lost or stolen than physical keys.
|
||
2. Non-contact: users do not have to physical touch the acquisition device (camera) to do the facial authentication.
|
||
3. Visualization: the thief's face can be traced.<sup><i class="fa fa-quote-right"></i></sup></p>
|
||
<div class="test-img"> <img src="images/team-img-05.jpg"/>
|
||
<p><strong>Fayer Zhang</strong></p>
|
||
</div>
|
||
</div>
|
||
<div class="item">
|
||
<p><sup><i class="fa fa-quote-left"></i></sup>As technology advances so do our cars. A prime example is Tesla innovating the Automotive industry with self driving smart cars. Our Anti Theft Facial recognition is just another way we can push technology to make cars smarter and safer for customers.<sup><i class="fa fa-quote-right"></i></sup></p>
|
||
<div class="test-img"> <img src="images/team-img-06.jpg"/>
|
||
<p><strong>Alexandre Pereira</strong></p>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
<div class="about" id="about">
|
||
<div class="container">
|
||
<div class="row">
|
||
<div class="col-md-12 text-center">
|
||
<h3>About Us</h3>
|
||
</div>
|
||
<div class="col-md-6">
|
||
<div class="about-text">
|
||
<p> The objective of this project was to create a vehicle anti-theft recognition system that would
|
||
be practical, secure, and innovative. It was designed to prevent burglary with the use of facial recogniton
|
||
systems. Python's OpenCV library was used to implement the facial recognition system. A Firebase Realtime Database was utilized
|
||
to store the profiles of drivers and thieves; this would be updated in realtime. An application was created on Android Studio so
|
||
the product could be used in a practical settting. A functional prototype consisting of a raspberry pi, engine, and wheels has been
|
||
demonstrated to the Professor's and Teaching Assistant's of our capstone project. </p>
|
||
<p> We see this as a practical solution in an innovative manner for the future of reducing the risk of car robberies. Each of our team
|
||
members have applied +4 years of Computer Engineering knowledge to work on the completion of this project based on a real-world problem.</p>
|
||
</div>
|
||
</div>
|
||
<div class="col-md-6">
|
||
<div class="col-md-6 col-sm-6 col-xs-6 block">
|
||
<div class="counter-item text-center">
|
||
<h5>Days Worked</h5>
|
||
<div class="timer" data-from="0" data-to="148" data-speed="2500" data-refresh-interval="50"></div>
|
||
</div>
|
||
</div>
|
||
<div class="col-md-6 col-sm-6 col-xs-6">
|
||
<div class="counter-item text-center">
|
||
<h5>Project Completion %</h5>
|
||
<div class="timer" data-from="0" data-to="100" data-speed="3500" data-refresh-interval="50"></div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
<div class="contact" id="contact">
|
||
<div class="container">
|
||
<div class="row">
|
||
<div class="col-md-12">
|
||
<div class="text-center">
|
||
<h3>Contact Us</h3>
|
||
</div>
|
||
</div>
|
||
<div class="col-md-7 col-sm-offset-0 col-sm-6 col-xs-offset-1 col-xs-10">
|
||
<div class="contact-form">
|
||
<form role="form">
|
||
<div class="col-md-6">
|
||
<input type="text" class="form-control" id="name" placeholder="Name">
|
||
</div>
|
||
<div class="col-md-6">
|
||
<input type="email" class="form-control" id="email" placeholder="Email">
|
||
</div>
|
||
<div class="col-md-12">
|
||
<textarea class="form-control" placeholder="Message" rows="6"></textarea>
|
||
</div>
|
||
<div class="col-md-12 text-center">
|
||
<button type="submit" class="contact-button">Send Message</button>
|
||
</div>
|
||
</form>
|
||
</div>
|
||
</div>
|
||
<div class="col-md-offset-1 col-md-4 col-sm-offset-1 col-sm-5 col-xs-offset-1 col-xs-10">
|
||
<div class="address">
|
||
<h4>Address</h4>
|
||
<p>75 Laurier Ave.<br>
|
||
Ottawa, ON<br>
|
||
Canada<br>
|
||
<div class="email"><i class="fa fa-at"></i>email@uottawa.ca<br>
|
||
<i class="fa fa-mobile"></i>613 xxx - xxxx</div>
|
||
</p>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
<footer>
|
||
<div class="container">
|
||
<div class="row">
|
||
<div class="col-md-4"> <span class="copyright">CEG 4912/4913</span> </div>
|
||
<div class="col-md-4">
|
||
<!--
|
||
<ul class="list-inline social-buttons">
|
||
<li><a href="#"><i class="fa fa-twitter"></i></a> </li>
|
||
<li><a href="#"><i class="fa fa-facebook"></i></a> </li>
|
||
<li><a href="#"><i class="fa fa-linkedin"></i></a> </li>
|
||
</ul>
|
||
-->
|
||
</div>
|
||
<div class="col-md-4">
|
||
<ul class="list-inline quicklinks">
|
||
<li>Designed by <a>SHP</a> </li>
|
||
</ul>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</footer>
|
||
<script src="js/jquery.min.js"></script>
|
||
<script src="js/bootstrap.min.js"></script>
|
||
<script type="text/javascript" src="js/owl.carousel.min.js"></script>
|
||
<script type="text/javascript" src="js/jquery.countTo.js"></script>
|
||
<script type="text/javascript" src="js/jquery.waypoints.min.js"></script>
|
||
<script>
|
||
$(document).ready(function() {
|
||
|
||
$("#owl-demo").owlCarousel({
|
||
|
||
navigation : false, // Show next and prev buttons
|
||
slideSpeed : 500,
|
||
autoPlay : 3000,
|
||
paginationSpeed : 400,
|
||
singleItem:true
|
||
});
|
||
|
||
});
|
||
|
||
/*$('.timer').each(count);*/
|
||
jQuery(function ($) {
|
||
// custom formatting example
|
||
$('.timer').data('countToOptions', {
|
||
formatter: function (value, options) {
|
||
return value.toFixed(options.decimals).replace(/\B(?=(?:\d{3})+(?!\d))/g, ',');
|
||
}
|
||
});
|
||
|
||
|
||
// start all the timers
|
||
$('#testimonials').waypoint(function() {
|
||
$('.timer').each(count);
|
||
});
|
||
|
||
function count(options) {
|
||
var $this = $(this);
|
||
options = $.extend({}, options || {}, $this.data('countToOptions') || {});
|
||
$this.countTo(options);
|
||
}
|
||
});
|
||
|
||
|
||
$(document).ready(function(){
|
||
// Add smooth scrolling to all links in navbar + footer link
|
||
$(".navbar a, footer a[href='#myPage']").on('click', function(event) {
|
||
|
||
// Prevent default anchor click behavior
|
||
event.preventDefault();
|
||
|
||
// Store hash
|
||
var hash = this.hash;
|
||
|
||
// Using jQuery's animate() method to add smooth page scroll
|
||
// The optional number (900) specifies the number of milliseconds it takes to scroll to the specified area
|
||
$('html, body').animate({
|
||
scrollTop: $(hash).offset().top
|
||
}, 900, function(){
|
||
|
||
// Add hash (#) to URL when done scrolling (default click behavior)
|
||
window.location.hash = hash;
|
||
});
|
||
});
|
||
})
|
||
</script>
|
||
</body>
|
||
</html>
|