SightPlusPlus-AVINA-Website/index.html at main · UCL-SightPlusPlus/SightPlusPlus-AVINA-Website · GitHub

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
<!doctype html>
<html lang="en">
  <head>
    <!-- Required meta tags -->
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <!-- Font Awesome icons (free version)-->
    <script src="https://use.fontawesome.com/releases/v5.15.3/js/all.js" crossorigin="anonymous"></script>
    <!-- Bootstrap CSS -->
    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.1.0/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-KyZXEAg3QhqLMpG8r+8fhAXLRk2vvoC2f3B09zVXn8CA5QIVfZOJ3BCsw2P0p/We" crossorigin="anonymous">
    <link rel="stylesheet" type="text/css" href="css/style.css" />
    <title>AVINA website</title>
  </head>
  <body>
    <nav class="navbar fixed-top navbar-expand-sm navbar-light bg-light">
      <div class="container">
        <span class="navbar-brand mb-0 h1">AVINA</span>
        <button
        type="button"
        data-bs-toggle="collapse"
        data-bs-target="#navbar"
        aria-controls="navbar"
        aria-expanded="false"
        aria-label="Toggle navigation"
        class="navbar-toggler"
        >
          <span class="navbar-toggler-icon"></span>
        </button>
        <div class="collapse navbar-collapse" id="navbar">
          <ul class="navbar-nav ms-auto ">
            <li class="nav-item active">
              <a href="#" class="nav-link">Home</a>
            </li>
            <li class="nav-item active">
              <a href="overview.html" class="nav-link">Overview</a>
            </li>
            <li class="nav-item active">
              <a href="implementation.html" class="nav-link">Implementation</a>
            </li>
            <li class="nav-item active">
              <a href="test.html" class="nav-link">Testing</a>
            </li>
            <li class="nav-item active">
              <a href="installation.html" class="nav-link">Installation</a>
            </li>
            <li class="nav-item active">
              <a href="team.html" class="nav-link">Team</a>
            </li>
            <li class="nav-item active">
              <a href="https://github.com/UCL-SightPlusPlus" class="nav-link">
                <i class="fab fa-github" style="width:25px; height:25px;"></i>
              </a>
            </li>
          </ul>
        </div>
      </div>
    </nav>
    <!-- Page Header-->
    <header id="home" class="masthead" style="height: 80%;background-image: url(images/bg.png); -moz-background-size:50%; background-size:100%;">
      <div class="container h-100">
        <div class="row h-100 align-items-center">
          <div class="col-12 mx-auto text-center" style="background-color: black; width: 50%;">
            <h1>AVINA</h1>
            <p class="lead">Accessibility and Visually Impaired Network Awareness</p>
          </div>
        </div>
      </div>
    </header>
    <!-- Main Content-->
    <div class="container mt-5">
      <div class="text-center">
        <div class="iframe-container">
          <div class="container text" style="width: 70%; margin: auto; margin-bottom: 5%; margin-top: 5%;">
            <p class="fw-light">
              In collaboration with Intel, we have developed a system to help visually impaired (VI) people have better access to locations they visit (e.g. banks, hospitals, parks, etc.) by providing them with real-time insight into events occurring at these locations. VI users have a hard time understanding their environment around them without asking for assistance—this system helps alleviate this issue. This information comes from cameras installed at the location and is then relayed to a mobile application installed on their device. Our system automatically detects the area the user is in and allows them to ask questions about the seating availability and queuing length—and also general location questions. This is unlike anything that is currently on the market as of now, as it can give users real-time insight with minimal technology and doesn't require locations to be mapped out in detail to use.
            </p>
          </div>

          <h2 class="fw-light">Demo Video</h2>
          <iframe class="mb-3 mt-2" width="650px" height="400px" src="https://www.youtube.com/embed/FNccW2pKwbw" title="YouTube video player" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe>
        </div>
      </div>
    </div>
    <!-- Footer-->
    <footer class="border-top">
      <img src="images/logos.png" style="width: 500px; height: 58.5px; display: block; margin: auto;" class="mt-3 mb-3">
      <div class="small text-center text-muted fst-italic">Copyright &copy; AVINA 2021</div>
    </footer>
    <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.1.0/dist/js/bootstrap.bundle.min.js" integrity="sha384-U1DAWAznBHeqEIlVSCgzq+c9gqGAJn5c/t99JyeKa9xxaYpSvHU5awsuZVVFIhvj" crossorigin="anonymous"></script>

  </body>
</html>