firebase/index.html at master · dandelionsys/firebase · GitHub

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
<html>
  <head>
    <script src='https://cdn.firebase.com/js/client/2.2.1/firebase.js'></script>
    <script src='https://ajax.googleapis.com/ajax/libs/jquery/1.11.2/jquery.min.js'></script>
    <script src="assets/js/bootstrap.min.js"></script>
    <!-- Bootstrap core CSS -->
	<link rel="stylesheet" href="assets/css/bootstrap.min.css">
	<link rel="stylesheet" href="assets/css/docs.min.css">
	<link rel="stylesheet" href="assets/css/custom.css">
  </head>
  <body>
<section id="chat" class='hero-section home-section section'>
    <!-- Page content of course! -->
    <main class="bs-docs-masthead" id="cooler">
  <div class="container">
    <h3 class="lead">Food Distribution Center by Skagit Community Action</h3>
    <p>Produce available for pickup by Skagit food banks - <a href="http://www.communityactionskagit.org/District/Department/18-Food-Bank-Distribution-Center" target="_blank" data-link-color="#0069D6">USDA planning grants update</a></p>
</main>
</section>

<section>
    <div class="row bs-docs-featured-sites">
      <div class="col-xs-12 col-sm-3">
    <div class="lead">
   <h1>Cooler Chat</h1>
   <p>Now open</p>
  </div>
    <div id='messagesDiv'></div>
    <input type='text' id='nameInput' placeholder='Name'>
    <input type='text' id='messageInput' placeholder='Message'>
    <script>
      var myDataRef = new Firebase('https://yi4jijreje7.firebaseio-demo.com/');
      $('#messageInput').keypress(function (e) {
        if (e.keyCode == 13) {
          var name = $('#nameInput').val();
          var text = $('#messageInput').val();
          myDataRef.push({name: name, text: text});
          $('#messageInput').val('');
        }
      });
      myDataRef.on('child_added', function(snapshot) {
        var message = snapshot.val();
        displayChatMessage(message.name, message.text);
      });
      function displayChatMessage(name, text) {
        $('<div/>').text(text).prepend($('<em/>').text(name+': ')).appendTo($('#messagesDiv'));
        $('#messagesDiv')[0].scrollTop = $('#messagesDiv')[0].scrollHeight;
      };
    </script>


      </div>

      <div class="col-xs-12 col-sm-9">
      <div class="lead">
   <h1>Cooler Inventory</h1>
   <p>Coming soon</p>
  </div>

    </div>

    </div>
</section>
  </body>
</html>