-
Notifications
You must be signed in to change notification settings - Fork 0
/
Copy pathindex.html
executable file
·270 lines (264 loc) · 13.3 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
230
231
232
233
234
235
236
237
238
239
240
241
242
243
244
245
246
247
248
249
250
251
252
253
254
255
256
257
258
259
260
261
262
263
264
265
266
267
268
269
270
---
layout: landing
---
<!-- Banner -->
<section id="banner">
<div class="inner">
<h2><span style='color: #aaa;'>Co-</span>VidSpeak</h2>
<p>
{{ site.description }}<br/>
<i>Months w/ under 30 minutes are free</i>
</p>
<ul class="actions">
<li><a style='display: none;' href="#" class="button special inline_video" data-video-id="ELNKXfvTDbA">
<span class='button_icon icon fa-play-circle-o'></span>
What is Co-VidSpeak?
</a></li>
</ul>
</div>
<a href="#one" class="more scrolly">Learn More</a>
</section>
<!-- One -->
<section id="one" class="wrapper style1 special">
<header class="major">
<h2>About <span style='color: #888;'>Co-</span>VidSpeak</h2>
<div class='content dual'>
<div class='right'>
<div style='margin: 10px; border: 1px solid #888; position: relative; min-height: 100px;'>
<video id='covidspeak_preview' rel="https://d34mlja0s1hd92.cloudfront.net/covidspeak/Co-VidSpeak-demo.mp4" muted="true" autoplay="true" loop="true" style="width: calc(100% - 20px); border: 1px solid rgba(255, 255, 255, 0.25); margin: 10px; max-width: 600px;" src="https://d34mlja0s1hd92.cloudfront.net/covidspeak/Co-VidSpeak-demo.mp4"></video>
<br/><button style='margin-bottom: 10px;' id='toggle_mute'>Toggle Mute</button>
</div>
</div>
<div class='left' style='padding: 0 50px;'>
<p>
Co-VidSpeak is a flexible, open source, web-based video conferencing
tool built for people who can't speak but still need to
emotionally connect with others at a distance.
</p>
<p>
We built Co-VidSpeak as a powerful tool to help people
because <b>we've seen it ourselves.</b>
We have family member and friends who
couldn't use their voice, and want to help
others like them who may feel isolated during recovery
or physical distancing.
</p>
<p>
We want everyone to be able to access
Co-VidSpeak, and even though we can't give video
calling away free to everyone, we know that many people
are also facing
a limited budget. That's why with Co-VidSpeak subscriptions
<b>you won't be
charged for any months where you use less than 30 minutes
of call time.</b> That way you don't have to worry that
seasonal or occasional usage will rack up an unnecessary bill.
</p>
<ul class="actions vertical">
<li><a href="https://app.covidspeak.org/rooms/mirror-self/join" class="button fit">Try a Practice Room</a></li>
<li><a href="https://app.covidspeak.org/?join=demo" class="button fit">Start a Demo Room</a></li>
<li><a href="https://app.covidspeak.org/pricing" class="button fit special">Sign Up for an Account</a></li>
</ul>
</div>
<div style='clear: both;'></div>
</div>
</header>
</section>
<!-- Two -->
<section id="three" class="wrapper style3 special">
<div class="inner">
<header class="major">
<h2>Video-Supported Communication</h2>
</header>
<div style='text-align: left;'>
<div style='margin-bottom: 20px; padding-bottom: 20px; border-bottom: 1px dotted #fff;'>
<div style='margin: 10px; border: 1px solid #888; float: right; width: 30%;'>
<!-- https://www.pexels.com/photo/woman-in-a-video-call-with-a-covid-19-patient-4031710/ -->
<img src="images/medical.jpeg" style='width: 100%; padding: 5px 5px 0 5px;'/>
</div>
<h3>Medical Support</h3>
<blockquote>
"Our patient was excited to use Co-VidSpeak to support communication beyond the ICU. She liked all its features, especially the ability to spell messages and use emojis!"
</blockquote>
<p>
Co-VidSpeak was originally created to support inviduals in
a hospital setting who are unable to use their voice to
connect remotely with families. It also works as a remote
support tool for medical professionals who may need to interact
with the patient without entering their room.
</p>
<p>
Co-VidSpeak has a strong focus on privacy, user information is stored
long-term, and all communication is encrypted and simple routed
between the two parties as a basic conduit. We want to make implementation
straightforward, even in a complicated environment like
a hospital setting.
</p>
<div style='clear: both;'></div>
</div>
<div style='margin-bottom: 20px; padding-bottom: 20px; border-bottom: 1px dotted #fff;'>
<div style='margin: 10px; border: 1px solid #888; float: right; width: 30%;'>
<!-- https://www.pexels.com/photo/boy-watching-video-using-laptop-821948/-->
<img src="images/edu.jpeg" style='width: 100%; padding: 5px 5px 0 5px;'/>
</div>
<h3>Telepractice and Educational Support</h3>
<blockquote>"Engagement seems to have increased by attention to the screen, time on task, and alerting to the speaker, the react buttons are a huge hit, and some of our students are vocalizing more, which is awesome! "</blockquote>
<p>
Remote learners and telepractice clients can
benefit from remote interaction, but only with the right supports.
We have expanded Co-VidSpeak to support therapists and
instructors because we have heard so many reports of
learners struggling to engage in a video-only environment.
</p>
<p>
In Co-VidSpeak, btton layouts are fully configurable,
and you can schedule rooms in advance. Additionally, visual
prompts can be activated by either side, so modeling
can happen naturally and effectively.
</p>
<div style='clear: both;'></div>
</div>
<div style='margin-bottom: 20px; padding-bottom: 20px; border-bottom: 1px dotted #fff;'>
<div style='margin: 10px; border: 1px solid #888; float: right; width: 30%;'>
<!-- https://www.pexels.com/photo/photo-of-child-smiling-while-using-tablet-computer-4145032/-->
<img src="images/social.jpeg" style='width: 100%; padding: 5px 5px 0 5px;'/>
</div>
<h3>Emotional Connection</h3>
<blockquote>
"My daughter doesn't speak in larger group forums. Virtual learning has been difficult. I see this as a great alternative for her and others in her situation."
</blockquote>
<p>
Families and loved ones can benefit from
the simple, intuitive interface that Co-VidSpeak provides.
When one party cannot speak, the field of button responses
and icon reactions help both sides feel engaged and more
connected, instead of just having a one-way interaction.
</p>
<p>
Co-VidSpeak works on most devices, including
computers, smartphones and tablets, so loved ones
can connect from whatever devices they have on hand.
</p>
<div style='clear: both;'></div>
</div>
<div>
<div style='margin: 10px; border: 1px solid #888; float: right; width: 30%;'>
<img src="/images/demo.png" style='width: 100%; padding: 5px 5px 0 5px;'/>
</div>
<h3>Flexible Features</h3>
<blockquote>
"I can see how being able to switch between different modalities will help people engage more in a virtual environment."
</blockquote>
<p>
Co-VidSpeak makes remote interaction simple
with a clean, minimal video interface. However, to support
the many needs of practitioners and supports, Co-VidSpeak
also has more advanced features like custom icons and
layouts, advance scheduling, screen and video sharing,
etc. We are actively adding new features and functionality
to Co-VidSpeak so stay tuned for more features!
</p>
<p>
In addition, Co-VidSpeak subscriptions can adjust to
your needs and usage. <b>You will only be charged for
months in which you use more than 30 minutes of call time.</b>
</p>
<div style='clear: both;'></div>
</div>
</div>
</div>
</section>
<!-- Two -->
<section id="two" class="wrapper style2 special">
<div class="inner">
<header class="major">
<h2>How to Sign Up</h2>
<section class="spotlight with_video" style='text-align: left; background: transparent;'>
<div class='image'>
<img src="images/logo.svg" style="width: 100%; max-height: 300px; border: 1px solid rgba(255, 255, 255, 0.25); padding: 10px;" />
</div>
<div class='content'>
<p>
Co-VidSpeak is available through a
<a href="https://app.covidspeak.org/pricing">self-service monthly
subscription</a>, and you will <b>only be charged for months where you
use more than 30 minutes of call time</b>.
</p>
<p>
We are also working with hospitals
and medical groups to implement Co-VidSpeak for free
to support individuals during the Covid-19 pandemic.
You can see how it works using our <a href="https://app.covidspeak.org/rooms/mirror-self/join">app demo</a>,
or <a href="contact.html">reach out to us</a> with details about your situation and how you think Co-VidSpeak could help.
</p>
<p>We are offering this as a free service where possible because we want to help. Purchasing a subscription will help fund ongoing free work that we do for medical groups during the pandemic. If you like what we are doing and want to help, you can also <a href="http://atmakers.org/" target='_blank'>donate through ATMakers</a> to help fund our server and bandwidth costs. If you have software development or speech therapy experience and want to get involved, <a href="https://www.openaac.org" target='_blank'>join us at openaac.org</a>.</p>
</div>
</section>
</header>
<div>
<ul class="actions vertical" style='margin: -20px auto 30px;'>
<li><a href="https://app.covidspeak.org/pricing" class="button fit special">Sign Up for an Account</a></li>
<li><a href="contact.html" class="button fit">Contact Us to Learn More</a></li>
<li><a href="http://atmakers.org/" class="button fit">Donate through ATMakers</a></li>
</ul>
</div>
<ul class="icons major" style='margin-top: 30px; margin-bottom: 50px;'>
<li><span class="icon fa-cloud major style1"><span class="label">Mobile</span></span></li>
<li><span class="icon fa-heartbeat major style2"><span class="label">Eye Gaze</span></span></li>
<li><span class="icon fa-tablet major style3"><span class="label">Touch</span></span></li>
<li><span class="icon fa-eye major style2"><span class="label">Switch Access</span></span></li>
<li><span class="icon fa-hand-o-up major style1"><span class="label">Reports</span></span></li>
</ul>
</div>
</section>
<!-- CTA -->
<section id="cta" class="wrapper style4">
<div class="inner">
<header>
<h2>Wondering Who We Are?</h2>
<p>Learn more about <a href="https://www.coughdrop.com" target="_blank">CoughDrop</a> and <a href="https://lessonpix.com" target="_blank">LessonPix</a>, the teams behind the idea of Co-VidSpeak.</p>
</header>
<ul class="actions vertical">
<li><a href="contact.html" class="button fit special">Contact Us</a></li>
<li><a href="faq.html" class="button fit">See the FAQ</a></li>
</ul>
</div>
</section>
<div id="video_player" style='display: none; position: fixed; top: 5vh; left: 5vw; width: 90vw; height: 90vh; background: rgba(255, 255, 255, 0.8); border-radius: 5px; z-index: 99999;'>
<iframe frameborder='0' id='video_frame' style='background: #fff; width: calc(90vw - 20px); height: calc(90vh - 20px - 85px); margin: 10px;'></iframe>
<div style='margin: -5px 10px 5px;'>
<a href="#" class='button special big' id='close_video_player' style='vertical-align: middle;'>Close</a>
<span id='video_player_times' style='display: none; color: #444; font-size: 20px; margin-left: 20px; background: #fff; box-shadow: rgb(255, 255, 255) 0px 0px 30px 15px; border-radius: 5px; padding: 5px;'>
<span id='video_player_time'></span> /
<span id='video_player_duration'></span>
</span>
</div>
</div>
<script>
(function() {
var loady = function() {
var videos = document.getElementsByTagName('video');
for(var idx = 0; idx < videos.length; idx++) {
var vid = videos[idx];
if(vid.getAttribute('rel') && !vid.getAttribute('src')) {
vid.setAttribute('src', vid.getAttribute('rel'));
}
}
};
document.querySelector('#toggle_mute').addEventListener('click', function(e) {
e.preventDefault();
var video = document.querySelector('#covidspeak_preview');
if(video.muted) {
video.muted = false;
if(!video.restarted) {
video.restarted = true;
video.currentTime = 0;
}
} else {
video.muted = true;
}
})
window.addEventListener('load', loady);
setTimeout(loady, 10000);
})();
</script>