1<!doctype html> 2<!-- 3 Copyright 2015 Google Inc. All rights reserved. 4 Licensed under the Apache License, Version 2.0 (the "License"); 5 you may not use this file except in compliance with the License. 6 You may obtain a copy of the License at 7 https://www.apache.org/licenses/LICENSE-2.0 8 Unless required by applicable law or agreed to in writing, software 9 distributed under the License is distributed on an "AS IS" BASIS, 10 WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. 11 See the License for the specific language governing permissions and 12 limitations under the License 13--> 14<html lang="en"> 15<head> 16 <meta charset="utf-8"> 17 <meta http-equiv="X-UA-Compatible" content="IE=edge"> 18 <meta name="description" content="Learn how to use the Firebase platform on the Web"> 19 <meta name="viewport" content="width=device-width, initial-scale=1.0"> 20 <title>Friendly Chat</title> 21 22 <!-- Disable tap highlight on IE --> 23 <meta name="msapplication-tap-highlight" content="no"> 24 25 <!-- Web Application Manifest --> 26 <link rel="manifest" href="manifest.json"> 27 28 <!-- Add to homescreen for Chrome on Android --> 29 <meta name="mobile-web-app-capable" content="yes"> 30 <meta name="application-name" content="Friendly Chat"> 31 <meta name="theme-color" content="#303F9F"> 32 33 <!-- Add to homescreen for Safari on iOS --> 34 <meta name="apple-mobile-web-app-capable" content="yes"> 35 <meta name="apple-mobile-web-app-status-bar-style" content="black-translucent"> 36 <meta name="apple-mobile-web-app-title" content="Friendly Chat"> 37 <meta name="apple-mobile-web-app-status-bar-style" content="#303F9F"> 38 39 <!-- Tile icon for Win8 --> 40 <meta name="msapplication-TileColor" content="#3372DF"> 41 <meta name="msapplication-navbutton-color" content="#303F9F"> 42 <!-- Jquery --> 43
43<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
43 44 <!-- Material Design Lite --> 45 <link rel="stylesheet" href="https://fonts.googleapis.com/icon?family=Material+Icons"> 46 <link rel="stylesheet" href="https://code.getmdl.io/1.1.3/material.orange-indigo.min.css"> 47
47<script defer src="https://code.getmdl.io/1.1.3/material.min.js"></script>
47 48 49 <!-- w3-content--> 50 <link rel="stylesheet" href="https://www.w3schools.com/w3css/4/w3.css"> 51 <!-- App Styling --> 52 <link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Roboto:regular,bold,italic,thin,light,bolditalic,black,medium&lang=en"> 53 <link rel="stylesheet" href="styles/main.css"> 54 55 <style> 56 @media screen and (max-width: 1000px) { 57 #chatheader {} 58 59 } 60 #chatheader {} 61 </style> 62</head> 63<body > 64<div class="demo-layout mdl-layout mdl-js-layout mdl-layout--fixed-header"> 65 66 <!-- Header section containing logo --> 67 <header id="chatheader" class="mdl-layout__header mdl-color-text--white mdl-color--light-blue-700 "> 68 <div class="mdl-cell mdl-cell--12-col mdl-cell--12-col-tablet mdl-grid"> 69 70 <div class="mdl-layout__header-row mdl-cell mdl-cell--12-col mdl-cell--12-col-tablet mdl-cell--12-col-desktop"> 71 <div id="user-container"> 72 73 <div hidden id="user-pic"></div> 74 <div hidden id="user-name"></div> 75 <button hidden id="sign-out" class="mdl-button mdl-js-button mdl-js-ripple-effect mdl-color-text--white"> 76 Sign-out 77 </button> 78 <button id="sign-in" class="mdl-button mdl-js-button mdl-js-ripple-effect mdl-color-text--white hidden" > 79 <i class="material-icons">account_circle</i>Sign-in with Google 80 </button> 81 <button id="sign-in-facebook" class="mdl-button mdl-js-button mdl-js-ripple-effect mdl-color-text--white hidden"> 82 <i class="material-icons">account_circle</i>Sign-in with Facebook 83 </button> 84 <button id="sign-in-anonymous" class="mdl-button mdl-js-button mdl-js-ripple-effect mdl-color-text--white" > 85 <i class="material-icons">account_circle</i>Choose a nickname here ! 86 </button> 87 </div> 88 </div> 89 <div class="mdl-layout__header-row mdl-cell mdl-cell--12-col mdl-cell--12-col-tablet mdl-cell--12-col-desktop w3-hide-small w3-hide-medium"> 90 <h3><i class="material-icons ">chat_bubble_outline</i>whw Friendly Chat</h3> 91 92 </div> 93 <div class="w3-right-align w3-hide-small w3-hide-medium">Live chat open times : 8.30am - 4.30am, Mon - Fri. (GMT UTC 0:00)/BST UTC +01:00)</div> 94 </div> 95 </header> 96 97 <main class="mdl-layout__content mdl-color--grey-100"> 98 <!--button id="sign-in-anonymous" class="mdl-button mdl-js-button mdl-js-ripple-effect mdl-color-text--white"> 99 <i class="material-icons">account_circle</i>Sign-in Anonymously 100 </button--> 101 <div id="anonymous-panel" class="mdl-card mdl-shadow--2dp mdl-cell mdl-cell--12-col mdl-cell--12-col-tablet mdl-cell--12-col-desktop hidden"> 102 <div class="mdl-card__title mdl-color--light-blue-600 mdl-color-text--white"> 103 <h2 class="mdl-card__title-text">Welcome to whw chat</h2> 104 </div> 105 <div class="mdl-card__supporting-text mdl-color-text--grey-600"> 106 <p>Choose a nickname below and sign in</p> 107 108 <input class="mdl-textfield__input" style="display:inline;width:auto;" type="text" id="nickname" name="nickname" placeholder="Nickname"/> 109 110 111 <button id="sign-in-anonymous_panelButton" class="mdl-button mdl-js-button mdl-js-ripple-effect mdl-color-text--light-blue-A400"> 112 <i class="material-icons">navigate_next</i>next 113 </button> 114 <br><br> 115 </div> 116 </div> 117 118 <div id="admin-panel" class="mdl-card mdl-shadow--2dp mdl-cell mdl-cell--12-col mdl-cell--12-col-tablet mdl-cell--12-col-desktop hidden"> 119 <div class="mdl-card__title mdl-color--light-blue-600 mdl-color-text--white"> 120 <h2 class="mdl-card__title-text">whw Staff Email & Password Authentication</h2> 121 </div> 122 <div class="mdl-card__supporting-text mdl-color-text--grey-600"> 123 <p>Enter an email and password below and either sign in to an existing account or sign up</p> 124 125 <input class="mdl-textfield__input" style="display:inline;width:auto;" type="text" id="email" name="email" placeholder="Email"/> 126 127 <input class="mdl-textfield__input" style="display:inline;width:auto;" type="password" id="password" name="password" placeholder="Password"/> 128 <br/><br/> 129 <button disabled class="mdl-button mdl-js-button mdl-button--raised" id="quickstart-sign-in" name="signin">Sign In</button> 130 131 <button class="mdl-button mdl-js-button mdl-button--raised" id="quickstart-sign-up" name="signup">Sign Up</button> 132 133 <button class="mdl-button mdl-js-button mdl-button--raised" disabled id="quickstart-verify-email" name="verify-email">Send Email Verification</button> 134 135 <button class="mdl-button mdl-js-button mdl-button--raised" id="quickstart-password-reset" name="verify-email">Send Password Reset Email</button> 136 137 <!-- Container where we'll display the user details --> 138 <div class="quickstart-user-details-container"> 139 chat sign-in status: <span id="quickstart-sign-in-status">Unknown</span> 140 <div hidden>Firebase auth <code>currentUser</code> object value:</div> 141 <pre hidden><code id="quickstart-account-details">null</code></pre> 142 </div> 143 </div> 144 </div> 145 <div id="chat-room-container" class="mdl-cell mdl-cell--12-col mdl-grid"> 146 <div id="chatRoom" class="mdl-card mdl-shadow--2dp mdl-cell mdl-cell--12-col mdl-cell--12-col-tablet mdl-cell--12-col-desktop "> 147 <div class="mdl-card__title mdl-color--light-blue-600 mdl-color-text--white"> 148 <h2 class="mdl-card__title-text"> 149 <div id="answered" style="margin-top:20px" >Please choose a nickname to connect!</div></h2> 150 151 </div> 152 <div id="calling" class="mdl-card__supporting-text mdl-color-text--grey-600 "> 153 <div class="mdl-progress mdl-js-progress mdl-progress__indeterminate"><i class="material-icons">settings_phone</i>calling</div>
154 <span></span> 155 </div> 156 </div> 157 </div> 158 <input class="mdl-textfield__input" type="text" id="cusid" value="cus" hidden> 159 <div id="messages-card-container" class="mdl-cell mdl-cell--12-col mdl-grid"> 160 161 <!-- Messages container --> 162 <div id="messages-card" class="mdl-card mdl-shadow--2dp mdl-cell mdl-cell--12-col mdl-cell--6-col-tablet mdl-cell--12-col-desktop"> 163 <div id="roomTabs" class="mdl-card__supporting-text mdl-color-text--grey-600"> 164 165 <div id="messages"> 166 167 <span id="message-filler"></span> 168 </div> 169 <form id="message-form" action="#"> 170 <div class="mdl-textfield mdl-js-textfield mdl-textfield--floating-label"> 171 172 <input class="mdl-textfield__input" type="text" id="message"> 173 <label class="mdl-textfield__label" for="message">Message...</label> 174 </div> 175 <button id="submit" disabled type="submit" class="mdl-button mdl-js-button mdl-button--raised mdl-js-ripple-effect"> 176 Send 177 </button> 178 </form> 179 <form id="image-form" action="#"> 180 <input id="mediaCapture" type="file" accept="image/*,capture=camera"> 181 <button id="submitImage" title="Add an image" class="mdl-button mdl-js-button mdl-button--raised mdl-js-ripple-effect mdl-color--amber-400 mdl-color-text--white"> 182 <i class="material-icons">image</i> 183 </button> 184 </form> 185 </div> 186 </div> 187 188 <div id="must-signin-snackbar" class="mdl-js-snackbar mdl-snackbar"> 189 <div class="mdl-snackbar__text"></div> 190 <button class="mdl-snackbar__action" type="button"></button> 191 </div> 192 193 </div> 194 <!-- Container for the demo --> 195 196 </main> 197 <footer class="mdl-mini-footer w3-hide-small w3-hide-medium"> 198 <div class="mdl-mini-footer__left-section"> 199 <div class="mdl-logo hidden"> 200 More Information 201 </div> 202 <ul class="mdl-mini-footer__link-list hidden"> 203 <li><a href="#">Help</a></li> 204 <li><a href="#">Privacy and Terms</a></li> 205 <li><a href="#">User Agreement</a></li> 206 </ul> 207 </div> 208 <div class="mdl-mini-footer__right-section"> 209 <button id="admin-button" class="mdl-mini-footer__social-btn mdl-button mdl-js-button mdl-js-ripple-effect mdl-color-text--white" ><i class="material-icons">vpn_key</i>Admin</button> 210 211 </div> 212</footer> 213</div> 214<!--w3 modal chat timeout modal--> 215<div id="timeoutmodal" class="w3-modal" > 216 <div class="w3-modal-content w3-card-4 w3-animate-zoom" style="max-width:600px"> 217 218 <div class="w3-center"><br> 219 <span onclick="document.getElementById('timeoutmodal').style.display='none'" class="w3-button w3-xlarge w3-hover-red w3-display-topright" title="Close Modal">×</span> 220 <p class="w3-center">Would you like to stay signed in to whw live chat</p> 221 <p id="timeout"></P> 222 </div> 223 <div class="w3-container w3-border-top w3-padding-16 w3-light-grey"> 224 <button onclick="window.friendlyChat.toStayin()" type="button" class="w3-button w3-red">Yes</button> 225 <button onclick=" window.friendlyChat.signOut()" type="button" class="w3-button w3-red w3-right">No</button> 226 </div> 227 228 </div> 229 </div> 230
230<script> 231 function onPageHide() { 232 alert ("Thank you, Please Visit again."); 233 console.log("Thank you"); 234 } 235 </script>
235 236<!-- Firebase --> 237<!-- *********************************************************************************************************************** 238 * TODO(DEVELOPER): Paste the initialization snippet from: Firebase Console > Overview > Add Firebase to your web app. * 239 *********************************************************************************************************************** --> 240
241<script src="https://www.gstatic.com/firebasejs/3.6.0/firebase.js"></script>
vendor: 1 bytes, line 241
241
242<script> 243 // Initialize Firebase 244 var config = { 245 apiKey: "AIzaSyCaijS20Oeoybf_fj994t14Ax29OxPD0ZY", 246 authDomain: "friendlychat-6f7d1.firebaseapp.com", 247 databaseURL: "https://friendlychat-6f7d1.firebaseio.com", 248 storageBucket: "friendlychat-6f7d1.appspot.com", 249 messagingSenderId: "519747730333" 250 }; 251 firebase.initializeApp(config); 252</script>
vendor: 1 bytes, line 252
252
253<script src="scripts/main.js"></script>
253 254<audio id="customer_waiting"> 255 <source src="21479095.mp3" type="audio/mpeg"> 256 Your browser does not support the audio element. 257</audio> 258<audio id="customer_left"> 259 <source src="21510266.mp3" type="audio/mpeg"> 260 Your browser does not support the audio element. 261</audio> 262</body> 263</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.