1<HTML> 2 3<HEAD> 4 <TITLE>PubNub Showcase Demo</TITLE> 5 <meta name="viewport" content="width=device-width, initial-scale=1"> 6 <meta name="theme-color" content="#161C2D"> 7 <meta name="apple-mobile-web-app-status-bar-style" content="#161C2D"> 8 9 <!-- Fonts --> 10 <link href="https://fonts.googleapis.com/css2?family=Poppins:wght@300;400;600;800" rel="stylesheet"> 11 <link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet" 12 integrity="sha384-rbsA2VBKQhggwzxH7pPCaAqO46MgnOM80zW1RWuH61DGLwZJEdK2Kadq2F9CUG65" crossorigin="anonymous"> 13
13<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js" 14 integrity="sha384-kenU1KFdBIe4zVF0s0G1M5b4hcpxyD9F7jL+jjXkk+Q2h455rYXK/7HAuoJl+0I4" 15 crossorigin="anonymous"></script>
15 16 17 <link rel="icon" href="./favicon.ico" /> 18 <link rel="stylesheet" href="./index.css" /> 19 <link rel="stylesheet" href="./shared/style.css" /> 20
20<script src="https://cdn.pubnub.com/sdk/javascript/pubnub.7.2.2.min.js"></script>
20 21
21<script src="./shared/keys.js"></script>
21 22
22<script src="./shared/pubnub_setup.js"></script>
22 23
23<script src="./shared/shared.js"></script>
23 24
24<script src="./index.js"></script>
24 25
25<script src="https://www.pubnub.com/scripts/amplitude.js" defer></script>
25 26</HEAD> 27 28<BODY onload="load()"> 29 <div class="red-ellipse-bkd"></div> 30 31 <div class="index-container"> 32 <div class=""> 33 <h1 id="title" class="app-header heading-1">Showcase App</h1> 34 </div> 35 36 <div id="showcaseGrid" class="showcase-grid" style="cursor: pointer;"> 37 38 <div class="showcase-tile-container"> 39 <a href="https://github.com/PubNubDevelopers/PubNub-Showcase/tree/main/web/chat" target="_blank" class="code-link"><img src="./img/icons/github-mark.png" class="github-logo"></a> 40 <a class='showcase-tile' href='/chat/chat'> 41 <img src="./img/icons/icon-chat.png" class="showcase-image"> 42 <div class="heading-2">Chat</div> 43 <div class="text-body-2">Group Chat / 1:1 / History / Presence / Typing indicator / Emoji reaction / 44 Read 45 indicator / Send attachment / Unread message indicator / Files / Moderation</div> 46 </a> 47 <!-- You can add customer logos here. See ReadMe for more info --> 48 </div> 49 50 <div class="showcase-tile-container"> 51 <a href="https://github.com/PubNubDevelopers/PubNub-Showcase/tree/main/web/live-events" target="_blank" class="code-link"><img src="./img/icons/github-mark.png" class="github-logo"></a> 52 <a class='showcase-tile' href='/live-events/live-events'> 53 <img src="./img/icons/icon-live-events.png" class="showcase-image"> 54 <div class="heading-2">Live Events</div> 55 <div class="text-body-2">Experience a shared live event / Chat with host / Live reactions using 56 Signals 57 / Polls / 58 Moderation</div> 59 </a> 60 <!-- You can add customer logos here. See ReadMe for more info --> 61 </div> 62 63 <div class="showcase-tile-container"> 64 <a href="https://github.com/PubNubDevelopers/PubNub-Showcase/tree/main/web/data-streaming" target="_blank" class="code-link"><img src="./img/icons/github-mark.png" class="github-logo"></a> 65 <a class='showcase-tile' href='/data-streaming/data-streaming'> 66 <img src="./img/icons/icon-realtime-streaming.png" class="showcase-image"> 67 <div class="heading-2">Data Streaming</div> 68 <div class="text-body-2">Subscribe to data streams / Stream data</div> 69 </a> 70 <!-- You can add customer logos here. See ReadMe for more info --> 71 </div> 72 73 <div class="showcase-tile-container"> 74 <a href="https://github.com/PubNubDevelopers/PubNub-Showcase/tree/main/web/geolocation" target="_blank" class="code-link"><img src="./img/icons/github-mark.png" class="github-logo"></a> 75 <a class='showcase-tile' href='/geolocation/geolocation'> 76 <img src="./img/icons/icon-geolocation.png" class="showcase-image"> 77 <div class="heading-2">Geolocation</div> 78 <div class="text-body-2">Pub/Sub / Overlay on map / Share location</div> 79 </a> 80 <!-- You can add customer logos here. See ReadMe for more info --> 81 </div> 82 83 <div class="showcase-tile-container"> 84 <a href="https://github.com/PubNubDevelopers/PubNub-Showcase/tree/main/web/collaboration" target="_blank" class="code-link"><img src="./img/icons/github-mark.png" class="github-logo"></a> 85 <a class='showcase-tile' href='/collaboration/collaboration'> 86 <img src="./img/icons/icon-collaboration.png" class="showcase-image"> 87 <div class="heading-2">Multi-User Collaboration</div> 88 <div class="text-body-2">Interactive whiteboard / Publish messages to draw / User state (cursor 89 position)</div> 90 </a> 91 <!-- You can add customer logos here. See ReadMe for more info --> 92 </div> 93 94 <div class="showcase-tile-container"> 95 <a href="https://github.com/PubNubDevelopers/PubNub-Showcase/tree/main/web/iot" target="_blank" class="code-link"><img src="./img/icons/github-mark.png" class="github-logo"></a> 96 <a class='showcase-tile' href='/iot/iot'> 97 <img src="./img/icons/icon-iot.png" class="showcase-image"> 98 <div class="heading-2">IoT Device Control</div> 99 <div class="text-body-2">Subscribe to sensor data / Monitor sensor values / Recieve sensor alerts 100 </div> 101 </a> 102 <!-- You can add customer logos here. See ReadMe for more info --> 103 </div> 104 105 </div> 106 107 <div class="blue-ellipse-bkd"></div> 108 </div> 109 110 <nav id="bottomNav" class="navbar"> 111 112 <div id="carousel" class="carousel-parent" style="display:none"> 113 <div class="carousel"> 114 <a class='carousel-tile' href='/chat/chat'> 115 <img src="./img/icons/icon-chat.png" class="carousel-image"> 116 <div class="emphasised-body carousel-name">
116Chat</div> 117 </a> 118 <a class='carousel-tile' href='/live-events/live-events'> 119 <img src="./img/icons/icon-live-events.png" class="carousel-image"> 120 <div class="emphasised-body carousel-name">Live Events</div> 121 </a> 122 <a class='carousel-tile' href='/data-streaming/data-streaming'> 123 <img src="./img/icons/icon-realtime-streaming.png" class="carousel-image"> 124 <div class="emphasised-body carousel-name">Data Streaming</div> 125 </a> 126 <a class='carousel-tile' href='/geolocation/geolocation'> 127 <img src="./img/icons/icon-geolocation.png" class="carousel-image"> 128 <div class="emphasised-body carousel-name">Geolocation</div> 129 </a> 130 <a class='carousel-tile' href='/collaboration/collaboration'> 131 <img src="./img/icons/icon-collaboration.png" class="carousel-image"> 132 <div class="emphasised-body carousel-name">Multi-User Collaboration</div> 133 </a> 134 <a class='carousel-tile' href='/iot/iot'> 135 <img src="./img/icons/icon-iot.png" class="carousel-image"> 136 <div class="emphasised-body carousel-name">IoT Device Control</div> 137 </a> 138 </div> 139 </div> 140 141 <div class="navbar-container"> 142 <a class='nav-link bottom-nav-item bottom-nav-selected' href='/'> 143 <img class="navbar-icon" src="./img/navbar/home.png"> 144 <span class="text-caption navbar-text">Home</span></a> 145 <a id="nav-discover" class="nav-link bottom-nav-item" style="cursor:pointer" 146 onclick="javascript:toggleShowcase()"> 147 <img class="navbar-icon" src="./img/navbar/discover.png"> 148 <span class="text-caption navbar-text">Discover</span></a> 149 <a class='nav-link bottom-nav-item' href='/admin/admin'> 150 <img class="navbar-icon" src="./img/navbar/profile.png"> 151 <span class="text-caption navbar-text">Profile</span></a> 152 </div> 153 </nav> 154 155 <!-- Modal: Log in screen --> 156 <div class="modal" id="loginModal" tabindex="-1"> 157 <div class="modal-dialog modal-lg modal-dialog-centered"> 158 <div class="modal-content login-modal"> 159 <div id="login-message" class="text-label login-message login-message-success" style="display:none"> 160 <img id="login-message-icon" class="login-message-icon login-message-icon-success"> 161 <span id="login-message-text">Hello</span> 162 </div> 163 <div id="guided-demo-info" class="heading-3 login-modal-heading guided-demo-heading"> 164 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 165 </div> 166 <div class="heading-3 login-modal-heading"> 167 Choose a <b>Nickname</b> and <b>Avatar</b> 168 </div> 169 <div> 170 <label for="txtNickname" class="text-label">Nickname<span class="red-asterisk">*</span></label> 171 <input type="text" class="form-control pn-text-field" id="txtNickname" maxlength="30" 172 placeholder="Enter a nickname" autofocus required /> 173 </div> 174 <div> 175 <span class="text-label">Avatar<span class="red-asterisk">*</span></span><br> 176 <div class="login-modal-avatars"> 177 <img src="./img/avatar/placeholder.png" class="avatar" onclick="selectedAvatar(0, src);" 178 id="avatar-0"> 179 <img src="./img/avatar/placeholder.png" class="avatar" onclick="selectedAvatar(1, src);" 180 id="avatar-1"> 181 <img src="./img/avatar/placeholder.png" class="avatar" onclick="selectedAvatar(2, src);" 182 id="avatar-2"> 183 <img src="./img/avatar/placeholder.png" class="avatar" onclick="selectedAvatar(3, src);" 184 id="avatar-3"> 185 <img src="./img/avatar/placeholder.png" class="avatar" onclick="selectedAvatar(4, src);" 186 id="avatar-4"> 187 <img src="./img/avatar/placeholder.png" class="avatar hidden" onclick="selectedAvatar(5, src);" 188 id="avatar-5"> 189 </div> 190 </div> 191 <div class="text-body-2"> 192 <img src="./img/icons/upload.png" width="16" height="16" onclick="selectCustomAvatar()" 193 style="cursor: pointer;"> <a href="javascript:selectCustomAvatar();">
193Choose custom avatar</a> 194 <div id="imageUploadPane" class="hidden"> 195 <div id="imageToUploadDetail"> 196 <img id="imageToUpload" src="./img/avatar/001.png" style="display:none"> 197 <span id="imageToUploadName">My Image.png</span> 198 <div id="imageUploadCancelDiv" onclick="cancelSelectedImage();"> 199 <span id="imageUploadSpinner" class="spinner-border spinner-border-sm" 200 style="display:none" role="status" aria-hidden="true"></span> 201 <img id="imageUploadCancel" src="./img/icons/cancel.png"> 202 </div> 203 </div> 204 205 <input type="submit" class="btn pn-btn pn-btn-white disabled" id="btnUpload" value="Upload" 206 onclick="uploadCustomAvatar()"> 207 208 </div> 209 </div> 210 <div> 211 <input type="submit" class="btn pn-btn disabled" id="btnLogin" value="Login" onclick="login()" /> 212 </div> 213 214 <div id="developer-note" class="text-label developer-message developer-message-info"> 215 <img id="developer-note-icon" class="login-message-icon login-message-icon-info"> 216 <span id="login-message-text"><b>Developers:</b> Enable the browser JavaScript console for 217 implementation details</span> 218 </div> 219 220 </div> 221 </div> 222 </div> 223</BODY> 224 225</HTML>
Line numbers count LF bytes from the start of the resource, as the search results do. Vendor segments are library code the classifier recognised; they are stored but not indexed. Bytes are shown as Latin1 characters, one per byte.