-
Notifications
You must be signed in to change notification settings - Fork 1
/
Copy pathindex.html
229 lines (198 loc) · 10.1 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
201
202
203
204
205
206
207
208
209
210
211
212
213
214
215
216
217
218
219
220
221
222
223
224
225
226
227
228
229
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<meta name="description" content="Inclusive Discussion Support System For Hard of Hearing and Hearing Students">
<meta name="author" content="Anthony Peruma">
<!-- start: favicon -->
<link rel="apple-touch-icon" sizes="57x57" href="images/favicon/apple-icon-57x57.png">
<link rel="apple-touch-icon" sizes="60x60" href="images/favicon/apple-icon-60x60.png">
<link rel="apple-touch-icon" sizes="72x72" href="images/favicon/apple-icon-72x72.png">
<link rel="apple-touch-icon" sizes="76x76" href="images/favicon/apple-icon-76x76.png">
<link rel="apple-touch-icon" sizes="114x114" href="images/favicon/apple-icon-114x114.png">
<link rel="apple-touch-icon" sizes="120x120" href="images/favicon/apple-icon-120x120.png">
<link rel="apple-touch-icon" sizes="144x144" href="images/favicon/apple-icon-144x144.png">
<link rel="apple-touch-icon" sizes="152x152" href="images/favicon/apple-icon-152x152.png">
<link rel="apple-touch-icon" sizes="180x180" href="images/favicon/apple-icon-180x180.png">
<link rel="icon" type="image/png" sizes="192x192" href="images/favicon/android-icon-192x192.png">
<link rel="icon" type="image/png" sizes="32x32" href="images/favicon/favicon-32x32.png">
<link rel="icon" type="image/png" sizes="96x96" href="images/favicon/favicon-96x96.png">
<link rel="icon" type="image/png" sizes="16x16" href="images/favicon/favicon-16x16.png">
<link rel="manifest" href="images/favicon/manifest.json">
<meta name="msapplication-TileColor" content="#ffffff">
<meta name="msapplication-TileImage" content="/ms-icon-144x144.png">
<meta name="theme-color" content="#ffffff">
<!-- end: favicon -->
<title>CollabAll</title>
<!-- Bootstrap Core CSS -->
<link href="css/bootstrap.min.css" rel="stylesheet">
<!-- Custom CSS -->
<link href="css/one-page-wonder.css" rel="stylesheet">
<!-- HTML5 Shim and Respond.js 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/libs/html5shiv/3.7.0/html5shiv.js"></script>
<script src="https://oss.maxcdn.com/libs/respond.js/1.4.2/respond.min.js"></script>
<![endif]-->
</head>
<body>
<!-- Navigation -->
<nav class="navbar navbar-inverse navbar-fixed-top" role="navigation">
<div class="container">
<!-- Brand and toggle get grouped for better mobile display -->
<div class="navbar-header">
<button type="button" class="navbar-toggle" data-toggle="collapse"
data-target="#bs-example-navbar-collapse-1">
<span class="sr-only">Toggle navigation</span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<a class="navbar-brand" href="#">CollabAll</a>
</div>
<!-- Collect the nav links, forms, and other content for toggling -->
<div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
<ul class="nav navbar-nav">
<li>
<a href="#features">Features</a>
</li>
<li>
<a href="#technology">Technology</a>
</li>
<li>
<a href="#try">Try</a>
</li>
<li>
<a href="#code">Code</a>
</li>
<li>
<a href="#contact">Contact/Feedback</a>
</li>
</ul>
</div>
<!-- /.navbar-collapse -->
</div>
<!-- /.container -->
</nav>
<!-- Full Width Image Header -->
<!--
<header class="header-image">
<div class="headline">
<div class="container">
<h1>Inclusive Discussion Support System For Hard of Hearing and Hearing Students</h1>
<h2>For Hard of Hearing and Hearing Student</h2>
</div>
</div>
</header>
-->
<!-- Page Content -->
<div class="container">
<div style="padding-top: 20px;"></di>
<!-- About -->
<div class="featurette" id="about">
<img class="featurette-image img-circle img-responsive pull-right" src="images/collaball_logo.png"
alt="CollabAll logo">
<h2 class="featurette-heading">Inclusive Discussion Support System
<span class="text-muted">For Hard of Hearing and Hearing Students</span>
</h2>
<p class="lead">
CollabAll provides deaf and hard-of-hearing (D/HH) individuals with a mechanism to actively participate
in making decisions and getting
their point across in team meetings. CollabAll provides a team with the ability to create discussion
topics
for their meeting, track the person currently communicating and the current topic being discussed. A key
feature of CollabAll is the ability for a participant to issue real-time interjections during the
meeting.
Examples of interjections include: "Slow Down", "Don't Understand", "Question", etc.
</p>
</div>
<hr class="featurette-divider">
<!-- Features -->
<div class="featurette" id="features">
<img class="featurette-image img-circle img-responsive pull-left" src="images/meetnow.png">
<h2 class="featurette-heading">Application Features
<!-- <span class="text-muted">Is Pretty Cool Too.</span>-->
</h2>
<p class="lead">
CollabAll is composed of the following key components:
</p>
<p class="lead"><small><i class="glyphicon glyphicon-asterisk"></i></small> Groups - represents the team an individual belongs to</p>
<p class="lead"><small><i class="glyphicon glyphicon-asterisk"></i></small> Cards - represents the topic of discussion for the meeting. Multiple Cards can be
associated with aGroup</p>
<p class="lead"><small><i class="glyphicon glyphicon-asterisk"></i></small>
Interjections - represents the different types of interruptions that a user can issue during the meeting
</p>
<p class="lead"><small><i class="glyphicon glyphicon-asterisk"></i></small>
Meet Now - utilized by the group when they meet
</p>
</div>
<hr class="featurette-divider">
<!-- Technology -->
<div class="featurette" id="technology">
<img class="featurette-image img-circle img-responsive pull-right" src="images/technology.png"
alt="project technology logs">
<h2 class="featurette-heading">Built Using Modern Web Technologies
<span class="text-muted">& Accessible Across Multiple Devices.</span>
</h2>
<p class="lead">
CollabAll is built as a responsive web based 3-tier system that utilizes open source technologies.
As a responsive website, CollabAll can be accessed by any device with an Internet connection and
utilizes the HTML 5 API to (1) vibrate the smartphone when an Interjection is issued and (2) issue
Interjections when the user tilts the smartphone/tablet. The real-time notification of Interjections is
implemented using Web Sockets; when the user access the Meet Now page, the user is 'subscribed' to
updates in the group. The updates map to Interjections issued by users and Cards being discussed.
</p>
</div>
<hr class="featurette-divider">
<!-- Code -->
<div class="featurette" id="try">
<img class="featurette-image img-circle img-responsive pull-left" src="images/demo.png">
<h2 class="featurette-heading">Get hands-on.
<span class="text-muted">Try it out.</span>
</h2>
<p class="lead">A demo version of CollabAll is available <a href="http://www.collaball.me" target="_blank">here.</a></p>
</div>
<hr class="featurette-divider">
<!-- Code -->
<div class="featurette" id="code">
<img class="featurette-image img-circle img-responsive pull-right" src="images/github_logo.png">
<h2 class="featurette-heading">Get The Code.
<span class="text-muted">Clone The Repository.</span>
</h2>
<p class="lead">Do you want to become a contributor? Clone the repository <a href="https://github.com/shehan/CollabAll" target="_blank">here.</a></p>
</div>
<hr class="featurette-divider">
<!-- Code -->
<div class="featurette" id="contact">
<img class="featurette-image img-circle img-responsive pull-left" src="images/contact.png">
<h2 class="featurette-heading">Questions? Comments?
<span class="text-muted">Let us know.</span>
</h2>
<p class="lead">Click <a href="https://goo.gl/forms/4OGxa2m94nrBMiCl2" target="_blank">here</a> to contact us.</p>
</div>
<hr class="featurette-divider">
<!-- Footer -->
<footer>
<div class="row">
<div class="col-lg-12">
<p style="text-align: center">
<small>
Made with
<span style="color:red" class="glyphicon glyphicon-heart-empty" aria-hidden="true"></span>
at
<a href="http://www.se.rit.edu" target="_blank">RIT</a>
</small>
</p>
</div>
</div>
</footer>
</div>
<!-- /.container -->
<!-- jQuery -->
<script src="js/jquery.js"></script>
<!-- Bootstrap Core JavaScript -->
<script src="js/bootstrap.min.js"></script>
</body>
</html>