-
Notifications
You must be signed in to change notification settings - Fork 0
/
Copy pathindex.html
executable file
·100 lines (100 loc) · 5.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
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<link rel="stylesheet" href="assets/css/common.css">
<title>Circuit Reception Kiosk</title>
<style>[v-cloak] {display: none; }</style>
</head>
<body>
<audio id="remoteAudio" autoplay></audio>
<div id="app" class="screen" v-cloak>
<div class="header">
<div class="title">{{title}}</div>
</div>
<div class="main-content">
<div class="remote-video-section" v-if="currentCall">
<video id="remoteVideo" v-if="currentCall.state === 'Active'" class="remote-video" autoplay></video>
<div v-else>
<img class="large-avatar" v-bind:src="callingUser.avatarLarge"></img>
<div class="calling-legend blinking">Calling {{callingUser.firstName}} {{callingUser.lastName}}</div>
</div>
</div>
<div class="search-users-section" v-else-if="userPresent">
<div class="search-results">
<ul id="userList" class="users-list">
<button class="user-data" v-on:click="callReceptionist()" v-if="receptionist">
<img class="user-image" v-bind:src="receptionist.avatar"></img>
<div class="user-name">{{receptionist.firstName}} {{receptionist.lastName}}</div>
</button>
<li class="user-block" v-for="(user, index) in users">
<button class="user-data" v-on:click="callUser(index)">
<img class="user-image" v-bind:src="user.avatar"></img>
<div class="user-name">{{user.firstName}} {{user.lastName}}</div>
</button>
</li>
</ul>
</div>
<div class="search-results-legend" v-if="tooManyUsers()">Too many results. Please refine your search.</div>
<div class="search-string-wrapper">
<div class="search-string">{{searchString}}</div>
</div>
<div class="input-row">
<div class="keyboard" id="keyboard">
<div class="keys-line">
<button class="key" v-on:click="tapKey('Q')">Q</button>
<button class="key" v-on:click="tapKey('W')">W</button>
<button class="key" v-on:click="tapKey('E')">E</button>
<button class="key" v-on:click="tapKey('R')">R</button>
<button class="key" v-on:click="tapKey('T')">T</button>
<button class="key" v-on:click="tapKey('Y')">Y</button>
<button class="key" v-on:click="tapKey('U')">U</button>
<button class="key" v-on:click="tapKey('I')">I</button>
<button class="key" v-on:click="tapKey('O')">O</button>
<button class="key" v-on:click="tapKey('P')">P</button>
</div>
<div class="keys-line">
<button class="key" v-on:click="tapKey('A')">A</button>
<button class="key" v-on:click="tapKey('S')">S</button>
<button class="key" v-on:click="tapKey('D')">D</button>
<button class="key" v-on:click="tapKey('F')">F</button>
<button class="key" v-on:click="tapKey('G')">G</button>
<button class="key" v-on:click="tapKey('H')">H</button>
<button class="key" v-on:click="tapKey('J')">J</button>
<button class="key" v-on:click="tapKey('K')">K</button>
<button class="key" v-on:click="tapKey('L')">L</button>
<button class="key" v-on:click="clickEnter()">Enter</button>
</div>
<div class="keys-line">
<button class="key" v-on:click="tapKey('Z')">Z</button>
<button class="key" v-on:click="tapKey('X')">X</button>
<button class="key" v-on:click="tapKey('C')">C</button>
<button class="key" v-on:click="tapKey('V')">V</button>
<button class="key" v-on:click="tapKey('B')">B</button>
<button class="key" v-on:click="tapKey('N')">N</button>
<button class="key" v-on:click="tapKey('M')">M</button>
<button class="key" v-on:click="tapKey(' ')">SPC</button>
<button class="key" v-on:click="tapBskSpc()">BCKSPC</button>
</div>
</div>
<button class='speech-to-text' v-if="onTranscriptionStarted" v-on:click="transcribe" :disabled="speechToTextText==='Recording'">
<div>{{speechToTextText}}</div>
<img src="./assets/icons/mic-icon.png" class="mic-icon"></img>
</button>
</div>
</div>
<div class="logo-section" v-else>
<img src="./assets/icons/atos-olympic-games-thumbnail.jpg" class="logo"></img>
</div>
</div>
<div class="footer">
<div class="date-time-temp">Date:<span class="date-time-temp-data">{{date}}</span></div>
<div class="date-time-temp">Time:<span class="date-time-temp-data">{{time}}</span></div>
<div class="date-time-temp">Temperature:<span class="date-time-temp-data">{{temp}}</span></div>
<div class="date-time-temp">Humidity:<span class="date-time-temp-data">{{humidity}}</span></div>
</div>
</div>
<script type="text/javascript" src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<script type="text/javascript" src="./renderer.js"></script>
</body>
</html>