index.html

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Intelligent Surveillance System</title>
  <link rel="icon" type="image/png" href="image/favicon.png" />
  <link rel="stylesheet" href="css/bootstrap.css" />
  <link rel="stylesheet" href="css/style.css" />
  <link rel="stylesheet" href="css/font-awesome.css" />
</head>

<body>
  <!-- For Logo and Navigation -->
  <section id="home">
    <div class="container-fluid">
      <div class="row">
        <div class="col-md-12 myresponsive">
          <nav class="navbar navbar-expand-lg navbar-dark bg-dark fixed-top scrolling-navber">
            <a class="navbar-brand myLogo" href="#"><b>The </b> <span
                style="color:#009F95; font-family:'Comic Sans MS'">Intelligent Surveillance</span>
              System</a>
            <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarSupportedContent"
              aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation">
              <span class="navbar-toggler-icon"></span>
            </button>
            <div class="collapse navbar-collapse" id="navbarSupportedContent">
              <ul class="navbar-nav mx-auto myNav" style="font-family: Comic Sans MS;">
                <li class="nav-item active">
                  <a class="nav-link" href="#home">About<span class="sr-only">(current)</span></a>
                </li>
                <li class="nav-item">
                  <a class="nav-link" href="#objective">Object</a>
                </li>
                <li class="nav-item">
                  <a class="nav-link " href="#team">Team</a>
                </li>
              </ul>
            </div>
          </nav>
        </div>
      </div>
    </div>
  </section>
  <!-- End Logo and Nav -->
  <!-- Start slider section -->
  <div id="carouselExampleCaptions" class="carousel slide" data-ride="carousel">
    <ol class="carousel-indicators">
      <li data-target="#carouselExampleCaptions" data-slide-to="0" class="active"></li>
      <li data-target="#carouselExampleCaptions" data-slide-to="1"></li>
      <li data-target="#carouselExampleCaptions" data-slide-to="2"></li>
    </ol>
    <div class="carousel-inner">
      <div class="carousel-item active">
        <img src="image/photo1.jpg" class="d-block w-100" alt="...">
        <div class="carousel-caption d-none d-md-block">
          <h5>First slide label</h5>
          <p>Nulla vitae elit libero, a pharetra augue mollis interdum.</p>
        </div>
      </div>
      <div class="carousel-item">
        <img src="image/photo2.jpg" class="d-block w-100" alt="...">
        <div class="carousel-caption d-none d-md-block">
          <h5>Second slide label</h5>
          <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
        </div>
      </div>
      <div class="carousel-item">
        <img src="image/photo1.jpg" class="d-block w-100" alt="...">
        <div class="carousel-caption d-none d-md-block">
          <h5>Third slide label</h5>
          <p>Praesent commodo cursus magna, vel scelerisque nisl consectetur.</p>
        </div>
      </div>
    </div>
    <a class="carousel-control-prev" href="#carouselExampleCaptions" role="button" data-slide="prev">
      <span class="carousel-control-prev-icon" aria-hidden="true"></span>
      <span class="sr-only">Previous</span>
    </a>
    <a class="carousel-control-next" href="#carouselExampleCaptions" role="button" data-slide="next">
      <span class="carousel-control-next-icon" aria-hidden="true"></span>
      <span class="sr-only">Next</span>
    </a>
  </div>
  <!-- End slider Section -->
  <!--About area-->
  <section class="mt-1" style="background: #E8EAED">
    <div class="container p-5">
      <div class="row">
        <div class="col-md-8 col-sm-7 my-4 ">
          <h3 class="green mobailHeading" style="font-family:'Comic Sans MS'">About Intelligent Surveillance
            System</h3>
          <!--bar area-->
          <div class="bar" style="border: 2px dashed gray;"></div>
          <p class="mt-5" style="font-size: 19px;text-align: justify;"><i>We</i> are making a smart and
            intelligent security system based of deep learning and IoT. It keep eye on everyone who enters
            in office by sensor. If any unknown person enter in the office, our system inform to security
            guard and starts monitoring them. It records all steps of unknown person. And it also monitor
            unnecessary and suspicious movement of authorized person.</p>
          <a href="" class="btn btn-success"
            style="background-color: #009F95; font-size: 18px; font-weight: bold; font-family: 'Comic Sans MS';">LEARN
            MORE</a>
        </div>
        <div class="col-md-4 col-sm-5 p-3">
          <img src="./image/about1.jpg" style="width: 100%; padding-top: 60px;">
        </div>
      </div>
    </div>
  </section>
  <!-- End About Section -->
  <!-- Objective Section Start -->
  <section id="objective">
    <div class="container p-2">
      <div class="row">
        <div class="col-md-12 col-sm-12  my-4">
          <h3 class="green mobailHeading" style="text-align: center; font-family:'Comic Sans MS'">Objective
            Intelligent Surveillance System</h3>
          <!--bar area-->
          <div class="bar" style="border: 2px dashed gray; margin: 0 auto;"></div>
          <p class="mt-5" style="font-size: 19px;text-align: justify;">Closed circuit television (CCTv) camera
            is very popular, significant and useful for surveillance system in a commercial building.
            However, conventional CCTv based surveillance system has several weakness. Such as find out
            anyone’s movement is very longtime process, or identifying unknown person is very hard for
            security in charge. This project is aimed to use new technology-based solution to overcome from
            those problem. It implemented facial recognition for recognized coming person in CCTv covered
            area. The human face is being identified using the Histogram of Oriented Gradients (HOG) method.
            Affine transformation of the face has been done using the dlib library. A Deep Convolutional
            Neural Network (Deep CNN) was trained to get unique measurements from the human face (128
            different measurement from a single face), and Support Vector Machine (SVM) for face
            classification (identification). After recognized a person this system will trace all movement
            of this person. And the system is able to detecting unauthorized access of of human. Finally, a
            prototype using a desktop application the entire system managed, a web application and android
            mobile application was used to remote access to the server and a webcam was used for simulation.
          </p>
        </div>
      </div>
    </div>
  </section>
  <!-- Objective Section End -->
  <!-- Tools and Library section start -->
  <section style="padding-bottom: 20px;">
    <div class="container p-1">
      <div class="row">
        <div class="col-md-5 col-sm-6 p-3  ">
          <h3 class="green mobailHeading" style="text-align: center; font-family:'Comic Sans MS'">Language and
            Tools
          </h3>
          <!--bar area-->
          <div class="barshort" style="border: 2px dashed gray; margin: 0 auto;"></div>
          <p class="mt-5" style="font-size: 19px;text-align: center;">
          <table class="table table-striped  mt-1">
            <tbody>
              <tr>
                <td>1. Python 3.8</td>
                <td>2. Java (Server Side & Mobile App)</td>
              </tr>
              <tr>
                <td>3. MySQL</td>
                <td>4. Extensive Markup Language (XML)</td>
              </tr>
            </tbody>
          </table>
          </p>
        </div>
        <div class="col-md-7 col-sm-6 ">
          <h3 class="green mobailHeading" style="text-align: center; font-family:'Comic Sans MS'">Library and
            Framework
          </h3>
          <!--bar area-->
          <div class="barshort" style="border: 2px dashed gray; margin: 0 auto;"></div>
          <p class="mt-5" style="font-size: 19px;text-align: center;">
          <table class="table table-striped ">
            <tbody>
              <tr>
                <td>1. Spring Boot</td>
                <td>2. Hibernate</td>
                <td>3. Android Native Library</td>
              </tr>
              <tr>
                <td>4. Jersy</td>
                <td>5. Retrofit 2</td>
                <td>6. Numpy</td>
              </tr>
              <tr>
                <td>7. Face_detection</td>
                <td>8. Dlib</td>
                <td>9. tkinter</td>
              </tr>
            </tbody>
          </table>
          </p>
        </div>
      </div>
  </section>
  <!-- Tools and Library section End -->
  <!-- Team section start -->
  <section id="team" style="background: #E8EAED; padding-bottom: 30px;">
    <div class="container p-2">
      <div class="row">
        <div class="col-md-12 col-sm-12  my-4">
          <h3 class="green mobailHeading" style="text-align: center; font-family:'Comic Sans MS'">Team Member
          </h3>
          <!--bar area-->
          <div class="barshort" style="border: 2px dashed gray; margin: 0 auto;"></div>
        </div>
      </div>
    </div>
    <div class="container ">
      <div class="row">
        <div class="col-md-3 col-sm-3"></div>
        <div class="col-md-6 col-sm-6">
          <div class="team-item active">
            <div class="header">
              <div class="img">
                <img src="image/Tirtho.jpg" alt="">
              </div>
              <div class="info">
                <strong>Rejaul Karim Tirtho</strong></br>
                <span>Dept. of CSE</span></br>
                <span>Roll : 41 &nbsp; Batch : E-62</span></br>
                <span>Email : rktirtho@gmail.com</span>
              </div>
            </div>
            <ul class="social">
              <li><a href="https://github.com/rktirtho" target="_blank"><i class="fab fa-github color-git " ></i></a>
              </li>
            </ul>
          </div>
        </div>
        <div class="col-md-3 col-sm-3"></div>
      </div>
      <div class="row">
        <div class="col-md-6 col-sm-6">
          <div class="team-item active">
            <div class="header">
              <div class="img">
                <img src="image/Siam.jpg" alt="SiamPhoto">
              </div>
              <div class="info">
                <strong>Md. Shaeed Al Hasan</strong></br>
                <span>Dept. of CSE</span></br>
                <span>Roll : 42 &nbsp; Batch : E-62</span></br>
                <span>Email : siamshaeed@gmail.com</span>
              </div>
            </div>
            <ul class="social">
              <li><a href="https://github.com/siamshaeed" target="_blank"><i class="fab fa-github color-git"></i></a></li>
            </ul>
          </div>
        </div>
        <div class="col-md-6 col-sm-6">
          <div class="team-item active">
            <div class="header">
              <div class="img">
                <img src="image/Shima.jpg" alt="">
              </div>
              <div class="info">
                <strong>Shima Akter</strong></br>
                <span>Dept. of CSE</span></br>
                <span>Roll : 07 &nbsp; Batch : E-62</span></br>
                <span>Email : simaakhter52@gmail.com</span>
              </div>
            </div>
            <ul class="social">
              <li><a href="https://github.com/shimaakter" target="_blank"><i class="fab fa-github color-git"></i></a></li>
            </ul>
          </div>
        </div>
      </div>
      <div class="row">
        <div class="col-md-3 col-sm-3"></div>
        <div class="col-md-6 col-sm-6">
          <div class="team-item active">
            <div class="header">
              <div class="img">
                <img src="image/Shuvo.jpg" alt="">
              </div>
              <div class="info">
                <strong>Abdullah Al Ohab Shuvo</strong></br>
                <span>Dept. of CSE</span></br>
                <span>Roll : 31 &nbsp; Batch : E-62</span></br>
                <span>Email : ahemedshuvo@gmail.com</span>
              </div>
            </div>
            <ul class="social">
              <li><a href="https://github.com/mdshuvorahman"><i class="fab fa-github color-git"></i></a></li>
            </ul>
          </div>
        </div>
        <div class="col-md-3 col-sm-3"></div>
      </div>
    </div>
  </section>
  <!-- Team section End -->
  <!-- footer start -->
  <footer class="footerBgMain">
    <div class="container-fluid">
      <div class="row">
        <div class="col-md-12 col-sm-12"></div>
      </div>
    </div>
  </footer>
  <!-- footer End
  siamshaeed@gmail.com -->
  <script src="js/jquery.js"></script>
  <script src="js/bootstrap.js"></script>
  <script src="https://kit.fontawesome.com/6a8d821a8e.js" crossorigin="anonymous"></script>
</body>

</html>