GuideBot/index.html at main · davisliu2006/GuideBot · 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
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
<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>GuideBot</title>
    <link rel="stylesheet" href="bs/css/bootstrap.css" />
    <link rel="stylesheet" href="styles/index.css" />
  </head>
  <body>
    <section id="navi-bar">
      <nav class="navbar navbar-expand-lg navbar-dark bg-dark" id="navfr">
        <div class="container-fluid">
          <button
            class="navbar-toggler"
            type="button"
            data-bs-toggle="collapse"
            data-bs-target="#navbarNav"
            aria-controls="navbarNav"
            aria-expanded="false"
            aria-label="Toggle navigation"
          >
            <span class="navbar-toggler-icon"></span>
          </button>
          <div
            class="collapse navbar-collapse justify-content-center"
            id="navbarNav"
          >
            <!-- visibile logo brand thing only on large -->
            <a
              href="#"
              class="navbar-brand d-none d-xl-block d-lg-block"
              id="brand"
              >GuideBot</a
            >

            <ul class="navbar-nav">
              <li class="nav-item">
                <a class="nav-link" aria-current="page" href="index.html"
                  >Home</a
                >
              </li>
              <li class="nav-item">
                <a class="nav-link" href="cam-pages/camera.html">Camera</a>
              </li>
              <li class="nav-item">
                <a class="nav-link" href="cam-pages/demo.html"
                  >Navigation Demo</a
                >
              </li>
              <li class="nav-item">
                <a class="nav-link" href="#">Purchase</a>
              </li>
              <li class="nav-item">
                <a class="nav-link" href="#">Contact</a>
              </li>
            </ul>
          </div>
        </div>
      </nav>
    </section>

    <section class="mb-5" id="banner">
      <div id="banner-wrap">
        <div id="banner-text">
          <h3 id="banner-text">
            <div class="container font-m justify-content-center my-5">
              <span id="gb">GuideBot </span>
              <h1 id="banner-top-heading" class="d-none d-lg-block d-xl-block">
                Reimagining urban center commutes for the visually impaired
                population.
              </h1>
              <a href="cam-pages/camera.html" class="btn btn-primary" id="demo"
                >See Camera</a
              >
              <a
                href="cam-pages/demo.html"
                class="btn btn-primary"
                id="demo"
                target="_blank"
                >See Demo</a
              >
            </div>
          </h3>
        </div>
        <img src="assets/banner.png" alt="" id="banner-img" />
      </div>
      <!-- end banner -->
    </section>

    <section>
      <div class="container">
        <div class="row my-5">
          <div class="col-lg">
            <h1 class="sub-head">What is GuideBot?</h1>
            <ul>
              <p>
                A early-warning system for visually impaired individuals to
                avoid incidents involving motorists in urban and dense cities.
              </p>
              <p />
              <li>Intelligent depth sensing to predict potential collisions</li>
              <p />
              <li>
                High-powered motors and long-lasting battery for optimal
                convenience
              </li>
              <p />
              <li>
                Gives audible and other sensory cues to assist visually impaired
                individuals
              </li>
            </ul>
          </div>
          <div class="col-lg">
            <img src="assets/crows.jpeg" alt="" class="img-fluid" />
          </div>
        </div>
        <div class="row my-5">
          <div class="col-lg">
            <img src="assets/hand.jpeg" alt="" class="img-fluid" />
          </div>
          <div class="col-lg">
            <h1 class="sub-head">How it works?</h1>
            <p>
              Uses various sensors and motors to effecitvely navigate city
              intersections while ensuring accurate depth perception.
            </p>
            <ul>
              <li>Intelligent depth sensing to predict potential collisions</li>
              <p />
              <li>
                High-powered motors and long-lasting battery for optimal
                convenience
              </li>
              <p />
              <li>
                Gives audible and other sensory cues to assist visually impaired
                individuals
              </li>
            </ul>
          </div>
        </div>
      </div>
    </section>

    <script
      src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/js/bootstrap.bundle.min.js"
      integrity="sha384-geWF76RCwLtnZ8qwWowPQNguL3RmwHVBC9FhGdlKrxdiJJigb/j/68SIy3Te4Bkz"
      crossorigin="anonymous"
    ></script>
  </body>
</html>