Skip to content

Instantly share code, notes, and snippets.

@dileephell

dileephell/index.html

Created April 18, 2018 13:03
Show Gist options
  • Save dileephell/7761f4887f05587b2565aa7767dd989f to your computer and use it in GitHub Desktop.
Save dileephell/7761f4887f05587b2565aa7767dd989f to your computer and use it in GitHub Desktop.
Download ZIP
index.html
Raw
index.html
<html>
<head>
<meta charset="UTF-8">
<link rel="stylesheet" type="text/css" media="all" href="index.css">
<link href="http://netdna.bootstrapcdn.com/bootstrap/3.0.0/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css">
<script src="http://code.jquery.com/jquery-1.11.1.min.js"></script>
<script src="http://netdna.bootstrapcdn.com/bootstrap/3.0.0/js/bootstrap.min.js"></script>
</head>
<body>
<div class="container">
<div class="row">
<div class="col-md-5">
<div class="panel panel-primary">
<div class="panel-heading">
<span class="glyphicon glyphicon-comment"></span> Chat
<div class="btn-group pull-right">
<button type="button" class="btn btn-default btn-xs dropdown-toggle" data-toggle="dropdown">
<span class="glyphicon glyphicon-chevron-down"></span>
</button>
</div>
</div>
<div class="panel-body">
<ul class="chat" id="chat">
<li class="left clearfix"><span class="chat-img pull-left">
<img src="http://placehold.it/50/55C1E7/fff&text=U" alt="User Avatar" class="img-circle" />
</span>
<div class="chat-body clearfix">
<div class="header">
<strong class="primary-font">Data Chain</strong>
<small class="pull-right text-muted">
<span class="glyphicon glyphicon-time"></span>
<span id="mainDate">
<script> document.write(new Date().toLocaleTimeString()) </script>
</span>
</small>
</div>
<p>
Hi , Welcome to Data Chain, <br/> How can i help you today ?
</p>
</div>
</li>
</ul>
</div>
<div class="panel-footer">
<div class="input-group">
<input id="btn-input" type="text" class="form-control input-sm" onKeyDown="if(event.keyCode==13) appendText();" placeholder="Type your message here..." autofocus/>
<span class="input-group-btn">
<button class="btn btn-warning btn-sm" id="btn-chat">
Send</button>
<button class="btn btn-warning btn-sm" id="clr-chat" onclick="clearChat()">
Clear</button>
</span>
</div>
</div>
<form id="upload" action="index.html" method="POST" enctype="multipart/form-data">
<fieldset>
<input type="hidden" id="MAX_FILE_SIZE" name="MAX_FILE_SIZE" value="300000" />
<div>
<label for="fileselect">Files to upload:</label>
<input type="file" id="fileselect" name="fileselect[]" multiple="multiple" />
<div id="filedrag">or drop files here</div>
</div>
<div id="submitbutton">
<button type="submit">Upload Files</button>
</div>
</fieldset>
</form>
<script type = "text/javascript" src="filedrag.js"></script>
<script>
function appendText() {
var txt1 = ' <li class="left clearfix"><span class="chat-img pull-left"><img src="http://placehold.it/50/FA6F57/fff&text=ME" width="20" alt="User" class="img-circle" /></span><div class="chat-body clearfix"><div class="header"><strong class="primary-font">Me</strong> <small class="pull-right text-muted"><span class="glyphicon glyphicon-time">'+new Date().toLocaleTimeString()+'</span></small></div><p>Message</p></div></li>'; // Create text with HTML
txt1=txt1.replace("Message",$('#btn-input').val());
inp = $('#btn-input').val();
$("#chat").append(txt1);
//document.getElementById('chat').scrollTop = (document.getElementById('panel-body').offsetHeight)*10;
$('#btn-input').val("");
$.get("/dat?input1="+inp, function(data, status){
var txt2 = '<li class="right clearfix"><span class="chat-img pull-right"><img src="static/x.PNG" width="20" alt="User Avatar" class="img-circle" /></span><div class="chat-body clearfix"><div class="header"><small class=" text-muted"><span class="glyphicon glyphicon-time">'+new Date().toLocaleTimeString()+'</span></small><strong class="pull-right primary-font"></strong></div><p>Response</p></div></li>';
txt2=txt2.replace("Response",data);
$("#chat").append(txt2);
document.getElementById('chat').scrollTop = (document.getElementById('panel-body').offsetHeight)*10;
});
}
function clearChat(){
window.location.href='/';
}
</script>
</div>
</div>
</div>
</div>
</body>
</html>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment