-
Notifications
You must be signed in to change notification settings - Fork 0
/
index.html
200 lines (179 loc) · 12 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
<HTML>
<HEAD>
<TITLE>PubNub Healthcare Demo</TITLE>
<meta name="viewport" content="width=device-width, initial-scale=1">
<meta name="theme-color" content="#161C2D">
<meta name="apple-mobile-web-app-status-bar-style" content="#161C2D">
<!-- Fonts -->
<link href="https://fonts.googleapis.com/css2?family=Poppins:wght@300;400;600;800" rel="stylesheet">
<link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet"
integrity="sha384-rbsA2VBKQhggwzxH7pPCaAqO46MgnOM80zW1RWuH61DGLwZJEdK2Kadq2F9CUG65" crossorigin="anonymous">
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js"
integrity="sha384-kenU1KFdBIe4zVF0s0G1M5b4hcpxyD9F7jL+jjXkk+Q2h455rYXK/7HAuoJl+0I4"
crossorigin="anonymous"></script>
<link rel="icon" href="./favicon.ico" />
<link rel="stylesheet" href="./index.css" />
<link rel="stylesheet" href="./shared/style.css" />
<script src="https://cdn.pubnub.com/sdk/javascript/pubnub.7.2.2.min.js"></script>
<script src="./shared/keys.js"></script>
<script src="./shared/pubnub_setup.js"></script>
<script src="./shared/shared.js"></script>
<script src="./index.js"></script>
<script src="https://www.pubnub.com/scripts/amplitude.js" defer></script>
</HEAD>
<BODY onload="load()">
<div class="red-ellipse-bkd"></div>
<div class="index-container">
<div class="">
<h1 id="title" class="app-header heading-1">PubNub for Healthcare</h1>
</div>
<div id="showcaseGrid" class="showcase-grid" style="cursor: pointer;">
<div class="showcase-tile-container">
<a href="https://github.com/PubNubDevelopers/healthcare-javascript-demo/tree/main/chat" target="_blank" class="code-link"><img src="./img/icons/github-mark.png" class="github-logo"></a>
<a href="javascript:appendSearchParams('./chat/chat.html');" class="showcase-tile">
<img src="./img/icons/icon-doctorchat.png" class="showcase-image">
<div class="heading-2">HIPAA-compliant Chat</div>
<div class="text-body-2">Chat with doctors and other healthcare professionals with end-to-end HIPAA & GDPR compliance</div>
</a>
<!-- You can add customer logos here. See ReadMe for more info -->
</div>
<div class="showcase-tile-container">
<a href="https://github.com/PubNubDevelopers/healthcare-javascript-demo/tree/main/live-events" target="_blank" class="code-link"><img src="./img/icons/github-mark.png" class="github-logo"></a>
<a href="javascript:appendSearchParams('./live-events/live-events.html');" class="showcase-tile">
<img src="./img/icons/icon-live-healthevents.png" class="showcase-image">
<div class="heading-2">Live Healthcare Events</div>
<div class="text-body-2">Stream shared live healthcare events / Chat with the host / Live reactions
Moderation</div>
</a>
<!-- You can add customer logos here. See ReadMe for more info -->
</div>
<div class="showcase-tile-container">
<a href="https://github.com/PubNubDevelopers/healthcare-javascript-demo/tree/main/vehicle-dispatch" target="_blank" class="code-link"><img src="./img/icons/github-mark.png" class="github-logo"></a>
<a href="javascript:appendSearchParams('./vehicle-dispatch/vehicle-dispatch.html');" class="showcase-tile">
<img src="./img/icons/icon-delivery.png" class="showcase-image">
<div class="heading-2">Vehicle Dispatch</div>
<div class="text-body-2">Track ambulances, delivery of medical supplies and temperature-controlled medicine tracking</div>
</a>
<!-- You can add customer logos here. See ReadMe for more info -->
</div>
<div class="showcase-tile-container">
<a href="https://github.com/PubNubDevelopers/healthcare-javascript-demo/tree/main/collaboration" target="_blank" class="code-link"><img src="./img/icons/github-mark.png" class="github-logo"></a>
<a href="javascript:appendSearchParams('./collaboration/collaboration.html');" class="showcase-tile">
<img src="./img/icons/icon-healthchatplus.png" class="showcase-image">
<div class="heading-2">Multi-User Collaboration</div>
<div class="text-body-2">Collaborate securely with patients other medical professionals, such as remotely annotating medical documents</div>
</a>
<!-- You can add customer logos here. See ReadMe for more info -->
</div>
<div class="showcase-tile-container">
<a href="https://github.com/PubNubDevelopers/healthcare-javascript-demo/tree/main/iot" target="_blank" class="code-link"><img src="./img/icons/github-mark.png" class="github-logo"></a>
<a href="javascript:appendSearchParams('./iot/iot.html');" class="showcase-tile">
<img src="./img/icons/icon-healthwatch.png" class="showcase-image">
<div class="heading-2">Medical Devices</div>
<div class="text-body-2">Track the status of medical devices and receive alerts when they exceed a predefined threshold
</div>
</a>
<!-- You can add customer logos here. See ReadMe for more info -->
</div>
</div>
<div class="blue-ellipse-bkd"></div>
</div>
<nav id="bottomNav" class="navbar">
<div id="carousel" class="carousel-parent" style="display:none">
<div class="carousel">
<a href="javascript:appendSearchParams('./chat/chat.html');" class="carousel-tile">
<img src="./img/icons/icon-doctorchat.png" class="carousel-image">
<div class="emphasised-body carousel-name">HIPAA-compliant Chat</div>
</a>
<a href="javascript:appendSearchParams('./live-events/live-events.html');" class="carousel-tile">
<img src="./img/icons/icon-live-healthevents.png" class="carousel-image">
<div class="emphasised-body carousel-name">Live Healthcare Events</div>
</a>
<a href="javascript:appendSearchParams('./vehicle-dispatch/vehicle-dispatch.html');" class="carousel-tile">
<img src="./img/icons/icon-delivery.png" class="carousel-image">
<div class="emphasised-body carousel-name">Vehicle Dispatch</div>
</a>
<a href="javascript:appendSearchParams('./collaboration/collaboration.html');" class="carousel-tile">
<img src="./img/icons/icon-healthchatplus.png" class="carousel-image">
<div class="emphasised-body carousel-name">Multi-User Collaboration</div>
</a>
<a href="javascript:appendSearchParams('./iot/iot.html');" class="carousel-tile">
<img src="./img/icons/icon-healthwatch.png" class="carousel-image">
<div class="emphasised-body carousel-name">Medical Devices</div>
</a>
</div>
</div>
<div class="navbar-container">
<a class="nav-link bottom-nav-item bottom-nav-selected" href="javascript:appendSearchParams('./index.html');">
<img class="navbar-icon" src="./img/navbar/home.png">
<span class="text-caption navbar-text">Home</span></a>
<a id="nav-discover" class="nav-link bottom-nav-item" style="cursor:pointer"
onclick="javascript:toggleShowcase()">
<img class="navbar-icon" src="./img/navbar/discover.png">
<span class="text-caption navbar-text">Discover</span></a>
<a class="nav-link bottom-nav-item" href="./admin/admin.html">
<img class="navbar-icon" src="./img/navbar/profile.png">
<span class="text-caption navbar-text">Profile</span></a>
</div>
</nav>
<!-- Modal: Log in screen -->
<div class="modal" id="loginModal" tabindex="-1">
<div class="modal-dialog modal-lg modal-dialog-centered">
<div class="modal-content login-modal">
<div id="login-message" class="text-label login-message login-message-success" style="display:none">
<img id="login-message-icon" class="login-message-icon login-message-icon-success">
<span id="login-message-text">Hello</span>
</div>
<div id="guided-demo-info" class="heading-3 login-modal-heading guided-demo-heading">
This demo is designed as a <u>guided demo</u> for <u>User and Channel Management</u> only. It uses keys from the '[email protected]' account
</div>
<div class="heading-3 login-modal-heading">
Choose a <b>Nickname</b> and <b>Avatar</b>
</div>
<div>
<label for="txtNickname" class="text-label">Nickname<span class="red-asterisk">*</span></label>
<input type="text" class="form-control pn-text-field" id="txtNickname" maxlength="30"
placeholder="Enter a nickname" autofocus required />
</div>
<div>
<span class="text-label">Avatar<span class="red-asterisk">*</span></span><br>
<div class="login-modal-avatars">
<img src="./img/avatar/placeholder.png" class="avatar" onclick="selectedAvatar(0, src);"
id="avatar-0">
<img src="./img/avatar/placeholder.png" class="avatar" onclick="selectedAvatar(1, src);"
id="avatar-1">
<img src="./img/avatar/placeholder.png" class="avatar" onclick="selectedAvatar(2, src);"
id="avatar-2">
<img src="./img/avatar/placeholder.png" class="avatar" onclick="selectedAvatar(3, src);"
id="avatar-3">
<img src="./img/avatar/placeholder.png" class="avatar" onclick="selectedAvatar(4, src);"
id="avatar-4">
<img src="./img/avatar/placeholder.png" class="avatar hidden" onclick="selectedAvatar(5, src);"
id="avatar-5">
</div>
</div>
<div class="text-body-2 hidden">
<img src="./img/icons/upload.png" width="16" height="16" onclick="selectCustomAvatar()"
style="cursor: pointer;"> <a href="javascript:selectCustomAvatar();">Choose custom avatar</a>
<div id="imageUploadPane" class="hidden">
<div id="imageToUploadDetail">
<img id="imageToUpload" src="./img/avatar/001.png" style="display:none">
<span id="imageToUploadName">My Image.png</span>
<div id="imageUploadCancelDiv" onclick="cancelSelectedImage();">
<span id="imageUploadSpinner" class="spinner-border spinner-border-sm"
style="display:none" role="status" aria-hidden="true"></span>
<img id="imageUploadCancel" src="./img/icons/cancel.png">
</div>
</div>
<input type="submit" class="btn pn-btn pn-btn-white disabled" id="btnUpload" value="Upload"
onclick="uploadCustomAvatar()">
</div>
</div>
<div>
<input type="submit" class="btn pn-btn disabled" id="btnLogin" value="Login" onclick="login()" />
</div>
</div>
</div>
</div>
</BODY>
</HTML>