<!DOCTYPE HTML PUBLIC '-//W3C//DTD HTML 4.01//EN' 'http://www.w3.org/TR/html4/strict.dtd'>
<head>
<style>
#messagesDiv {
background-color: white;
overflow: auto;
height: 230px;
width: 100%;
padding: 10px;
border: 8px solid #424547;
margin-bottom: 5px;
text-align: left;
}
#nameInput {
width: 26%;
}
#messageInput {
width: 68%;
}
</style>
<script src='https://cdn.firebase.com/v0/firebase.js'></script>
<script src='https://ajax.googleapis.com/ajax/libs/jquery/1.9.0/jquery.min.js'></script>
<link href='http://netdna.bootstrapcdn.com/bootstrap/3.0.0/css/bootstrap.min.css' rel='stylesheet' media='screen'>
<script src='http://netdna.bootstrapcdn.com/bootstrap/3.0.0/js/bootstrap.min.js'></script>
<!-- twitter card meta --!>
<!-- <meta name='twitter:card' content='summary'>
<meta name='twitter:image:src' content='http://bitcointips.tk/57x57.png'>
<meta name='twitter:site' content='@1Bitcointips'>
<meta name='twitter:title' content='Bitcointips.tk - your guide in the btc world.'>
<meta name='twitter:description' content='Welcome to bitcointips.tk your source for free bitcoins and tips how to get started with your bitcoin buissnies. Now also with webapp! and a faucet.'>
<meta name='twitter:domain' content='http://bitcointips.tk/'>
<meta name='twitter:creator' content='@svbeon'>
--!>
<title>Chatvik - Chat</title>
<meta name='viewport' content='width=device-width; initial-scale=1.0; maximum-scale=1.0; user-scalable=0;' />
</head>
<body>
<div class='navbar navbar-inverse navbar-fixed-top' role='navigation'>
<div class='container'>
<div class='navbar-header'>
<button type='button' class='navbar-toggle' data-toggle='collapse' data-target='.navbar-collapse'>
<span class='icon-bar'></span>
<span class='icon-bar'></span>
<span class='icon-bar'></span>
</button>
<a class='navbar-brand' href='http://chatvik.tk'>Chatvik</a>
</div>
<div class='collapse navbar-collapse'>
<ul class='nav navbar-nav'>
<li><a href='http://chatvik.tk/welcome.php'>Home</a></li>
<li><a href='http://firebase.com' target='_blank'>Firebase</a></li>
<li class='active'><a href='#'>Chat</a></li>
<li><a href='index.php?logout='><button class='btn btn-danger btn-xs'>Log out</button></a></li>
</ul>
</div><!-- /.nav-collapse -->
</div><!-- /.container -->
</div>
<div class='container'></br></br></br>
<div class='row row-offcanvas row-offcanvas-right'>
<div class='col-xs-12 col-sm-9'>
<p class='pull-right visible-xs'>
<center>
<div class='jumbotron'>
<p>
<div id='messagesDiv'></div>
<input type='hidden' id='nameInput' value='<?php echo $_SESSION["sess_user"]; ?>'>
<input minlength='2' type='text' id='messageInput' placeholder='Message'>
</p>
</div>
</p>
</div>
</div>
<script>
// Get a reference to the root of the chat data.
var messagesRef = new Firebase('https://chatvik.firebaseio.com/');
// When the user presses enter on the message input, write the message to firebase.
$('#messageInput').keypress(function (e) {
if (e.keyCode == 13) {
var name = $('#nameInput').val();
var text = $('#messageInput').val();
messagesRef.push({name:name, text:text});
$('#messageInput').val('');
}
});
// Add a callback that is triggered for each chat message.
messagesRef.limit(10).on('child_added', function (snapshot) {
var message = snapshot.val();
$('<div/>').text(message.text).prepend($('<em/>')
.text(message.name+': ')).appendTo($('#messagesDiv'));
$('#messagesDiv')[0].scrollTop = $('#messagesDiv')[0].scrollHeight;
});
</script>
<div class='footer'>
<center>
<p>â–‘copy; svbeon 2013</p></div></div><!-- /container -->
</center>
</div>
</body>
</html>
