<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Chatroom</title>
    <!-- Bootstrap core CSS -->
    <link href="vendor/bootstrap/css/bootstrap.min.css" rel="stylesheet">

    <!-- Custom styles for this template -->
    <link href="css/one-page-wonder.css" rel="stylesheet">
    <link href="https://fonts.googleapis.com/css?family=Crimson+Text" rel="stylesheet">
    <link href="https://fonts.googleapis.com/css?family=Work+Sans" rel="stylesheet">
    <!--Reference platform.js library here-->

<script src="https://www.gstatic.com/firebasejs/4.3.1/firebase.js"></script>
<script>
  // Initialize Firebase
  var config = {
    apiKey: "AIzaSyCXIhIGZxTt8WdM0rfyqOllwcHOV5-EQXQ",
    authDomain: "firemessage-a9af4.firebaseapp.com",
    databaseURL: "https://firemessage-a9af4.firebaseio.com",
    projectId: "firemessage-a9af4",
    storageBucket: "",
    messagingSenderId: "312363981413"
  };
  firebase.initializeApp(config);
</script>
     <!--jquery-->
    <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>

    <!--google fonts-->
    <link href="https://fonts.googleapis.com/css?family=Alike+Angular|Asul|Eczar" rel="stylesheet">

    <!--custom files-->
    <script src="main.js"></script>
    <link rel="stylesheet" href="style.css">



</head>
<body>
  <nav class="navbar navbar-expand-lg navbar-dark bg-dark fixed-top">
    <div class="container">
      <a class="navbar-brand" href="index.html">Kite Learning</a>
      <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarResponsive" aria-controls="navbarResponsive" aria-expanded="false" aria-label="Toggle navigation">
        <span class="navbar-toggler-icon"></span>
      </button>
      <div class="collapse navbar-collapse" id="navbarResponsive">
        <ul class="navbar-nav ml-auto">
          <li class="nav-item active">
            <a class="nav-link" href="index.html">Home
              <span class="sr-only">(current)</span>
            </a>
          </li>
          <li class="nav-item">
            <a class="nav-link" href="learningSpaceIndex.html">Learning Space</a>
          </li>
          <li class="nav-item">
            <a class="nav-link" href="chatIndex.html">Chat</a>
          </li>
        </ul>
      </div>
    </div>
  </nav>


  <div id='MicrosoftTranslatorWidget' class='Dark' style='color:white;background-color:#555555'></div><script type='text/javascript'>setTimeout(function(){{var s=document.createElement('script');s.type='text/javascript';s.charset='UTF-8';s.src=((location && location.href && location.href.indexOf('https') == 0)?'https://ssl.microsofttranslator.com':'http://www.microsofttranslator.com')+'/ajax/v3/WidgetV3.ashx?siteData=ueOIGRSKkd965FeEGM5JtQ**&ctf=False&ui=true&settings=Manual&from=';var p=document.getElementsByTagName('head')[0]||document.documentElement;p.insertBefore(s,p.firstChild); }},0);</script>

    <!--Add your name-->
    <h1>KiteChat</h1>

    <!--Will be populated with messages-->
    <div class="allMessages">

    </div>


    <!--For user to input messages-->
    <div class="userContainer">
        <form>
            <div class="textContainer">
                <div>
                    <p>Your name:</p><input id="name" type="text">
                </div>
                <div>
                    <p>Message:</p><input id="message" type="text">
                </div>
            </div>
            <div class="GObutton">
                <button type="reset" onclick="updateDB();" value="Submit/Update" class="btn btn-primary btn-block">Send</button>
            </div>
        </form>
    </div>
</body>
</html>
