-
Notifications
You must be signed in to change notification settings - Fork 0
/
index.html
135 lines (133 loc) · 4.43 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
<!DOCTYPE html>
<html>
<head>
<title>Webex: Sign Language</title>
<link rel="stylesheet" href="https://downloads.momentum-ui.com/@momentum-ui/core/css/momentum-ui.css">
<style>
main {
padding: 10px;
}
table {
border-collapse: collapse;
padding: 10px;
margin: 10px;
}
table, th, td {
border: 1px solid black;
}
thead th {
font-weight: bold;
}
tbody td {
min-width: 150px;
}
</style>
</head>
<body>
<header class="md-top-bar md-top-bar--dark" role="navigation">
<div class="md-top-bar__container row">
<div class="md-top-bar__brand">
<a class="md-brand" href="#">
<div class="md-brand__title">Webex Sign Language Translator</div>
</a>
</div>
<nav class="md-top-bar__nav ">
<div class="md-list md-list--horizontal" role="list">
</div>
</nav>
</div>
</header>
<main>
<div>
<div class="row">
<div class="md-input-group small-10 columns">
<input
class="md-input"
id="access-token"
name="accessToken"
placeholder="Your access token"
type="text">
</div>
<div class="small-2 columns">
<button id="connect" title="connect" type="button" class="md-button">Connect</button>
</div>
</div>
<div class="row">
<div class="small-12 columns">
<p id="connection-status">Disconnected</p>
</div>
</div>
<div class="row">
<div class="md-input-group small-10 columns">
<input
class="md-input"
id="invitee"
name="invitee"
placeholder="Person ID or Email Address or SIP URI or Room ID"
placeholder="Person ID or Email Address or SIP URI or Room ID"
type="text">
</div>
<div class="small-2 columns">
<button title="dial" id="dial" type="button" class="md-button">Dial</button>
</div>
</div>
<div class="row">
<p style="color:white;">.</p>
</div>
<div class="row">
<div class="md-input-group small-1 columns">
<button id="hangup" title="hangup" type="button" class="md-button md-button--circle md-button--red icon icon-cancel_36"></button>
</div>
<div class="md-input-group small-1 columns">
<div id="local" class="md-avatar md-avatar--inactive" title="Shannon Sangha">
<span class="md-avatar__letter">SS</span>
</div>
</div>
<div class="md-input-group small-1 columns">
<div id="remote" class="md-avatar md-avatar--inactive" title="Tommy Woodley">
<span class="md-avatar__letter">TW</span>
</div>
</div>
<div class="md-input-group small-9 columns">
</div>
</div>
</div>
</div>
<div class="row">
<p style="color:white;">.</p>
</div>
<div style="display: flex" class="row">
<video style="width:0%" id="self-view" muted autoplay playsinline></video>
<canvas style="width:50%;padding-top: 0%;" id="self-view-canvas"></canvas>
<audio id="remote-view-audio" autoplay playsinline></audio>
<video style="width:50%" id="remote-view-video" autoplay playsinline></video>
</div>
<div class="row">
<div class="md-input-group medium-6 columns">
<input class="md-input" id="readonlyInput" type="text" value="Read Only Text" readonly>
</div>
</div>
<div class="row">
<p style="color:white;">.</p>
</div>
<div class="row">
<div class="md-input-container md-toggle-switch ">
<input
class="md-input md-toggle-switch__input"
type="checkbox"
aria-checked="false"
name=""
id="testToggleSwitch1"
value=""
/>
<label class="md-toggle-switch__label" for="testToggleSwitch1">
<span class="md-toggle-switch__label__container"></span>
<span class="md-toggle-switch__label__text">Eng/Chi</span>
</label>
</div>
</div>
</main>
<!-- app.js is your application code -->
<script src="app.js"></script>
</body>
</html>