<link href="//maxcdn.bootstrapcdn.com/bootstrap/3.3.0/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css">
<script src="//maxcdn.bootstrapcdn.com/bootstrap/3.3.0/js/bootstrap.min.js"></script>
<script src="//code.jquery.com/jquery-1.11.1.min.js"></script>
<!------ Include the above in your HEAD tag ---------->
<script src="https://twitter.github.io/typeahead.js/releases/latest/typeahead.bundle.js"></script>
<p> </p>
<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> Coach Chat
</div>
<div class="panel-body">
<ul class="chat">
<li class="right clearfix"><span class="chat-img pull-right">
<img src="http://i.imgur.com/hsf4S3T.jpg" alt="User Avatar" class="img-circle" width="50" height="50" />
</span>
<div class="chat-body clearfix">
<div class="header">
<small class=" text-muted"> </small>
<strong class="pull-right primary-font">You</strong>
</div>
<p>
Hi Jen! Laura has been missing deadlines for a few weeks and I'm having trouble motivating her to move faster.
</p>
</div>
</li>
<li class="left clearfix"><span class="chat-img pull-left">
<img src="http://i.imgur.com/GYWbwhq.jpg" alt="User Avatar" class="img-circle" width="50" height="50" />
</span>
<div class="chat-body clearfix">
<div class="header">
<strong class="primary-font">Jen Darby</strong>
<small class="pull-right text-muted"> </small>
</div>
<p>
No problem, Tim! Let's look at <a href="">Laura's profile</a> together and come up with a plan.
</p>
</div>
</li>
<li class="right clearfix"><span class="chat-img pull-right">
<img src="http://i.imgur.com/hsf4S3T.jpg" alt="User Avatar" class="img-circle" width="50" height="50" />
</span>
<div class="chat-body clearfix">
<div class="header">
<small class=" text-muted"> </small>
<strong class="pull-right primary-font">You</strong>
</div>
<p>
Okay, so here's what's been happening...
</p>
</div>
</li>
</ul>
</div>
<div class="panel-footer">
<div class="input-group">
<input id="btn-input" type="text" class="form-control input-sm" placeholder="Type your message here..." />
<span class="input-group-btn">
<button class="btn btn-warning btn-sm" id="btn-chat">
Send</button>
</span>
</div>
</div>
</div>
</div>
</div>
</div>
<p> </p>
<p> </p>
<div class="container">
<div class="row">
<div class="col-md-7">
<div class="panel panel-primary">
<div class="panel-heading">
<span class="glyphicon glyphicon-comment"></span> Get Help
</div>
<div class="panel-body2">
<form>
<div class="form-group getHelp">
<label for="exampleInput">Which team member do you need help with?</label>
<select class="form-control" id="exampleInput" placeholder="Laura Madison">
<option>Laura Madison</option>
</select>
</div>
<div class="form-group">
<label for="typeahead">What issue do you need help with?</label>
<input type="text" class="form-control" id="typeahead" placeholder="Search">
</div>
</form>
</div>
</div><!-- /panel -->
</div><!--/col-md-6 -->
</div><!--/row-->
</div><!--/container-->
<div class="container">
<div class="row">
<div class="col-md-7">
<div class="panel panel-primary">
<div class="panel-heading">
<span class="glyphicon glyphicon-comment"></span> Guided Help: Motivating Laura
</div>
<div class="panel-body3">
<div class="media">
<div class="media-left">
<a href="#">
<img class="media-object img-circle" src="http://i.imgur.com/3dDNsdd.jpg" width="50" height="50" alt="...">
</a>
</div>
<div class="media-body">
<h4 class="media-heading">Summary: Motivating Laura</h4>
Laura finds clear metrics and deadlines far more motivating than big visions.
<div class="row help-buttons">
<div class="col-md-6"><button type="button" class="btn btn-primary btn-block">See Full Analysis</button></div>
<div class="col-md-6"><button type="button" class="btn btn-warning btn-block">Contact Your Coach</button></div>
</div>
</div>
</div>
</div>
</div><!-- /panel -->
</div><!--/col-md-6 -->
</div><!--/row-->
</div><!--/container-->
<p> </p>
<p> </p>
<div class="container">
<div class="row">
<div class="col-md-7">
<div class="panel panel-primary">
<div class="panel-heading">
<span class="glyphicon glyphicon-comment"></span> Your Manager
</div>
<div class="panel-body3">
<div class="media">
<div class="media-left">
<a href="#">
<img class="media-object img-circle" src="http://i.imgur.com/3dDNsdd.jpg" width="50" height="50" alt="...">
</a>
</div>
<div class="media-body">
<h4 class="media-heading">Laura Madison</h4>
Laura is relaxed, community-minded, and values team-work. Frame your needs as a way to advance the whole team.
<div class="row help-buttons">
<div class="col-md-6"><button type="button" class="btn btn-primary btn-block">See Full Analysis</button></div>
<div class="col-md-6"><button type="button" class="btn btn-warning btn-block">Contact Your Coach</button></div>
</div>
</div>
</div>
</div>
</div><!-- /panel -->
</div><!--/col-md-6 -->
</div><!--/row-->
</div><!--/container-->
<div class="container">
<div class="row">
<div class="col-md-7">
<div class="panel panel-primary">
<div class="panel-heading">
<span class="glyphicon glyphicon-comment"></span> Your Manager
</div>
<div class="panel-body3">
<div class="media">
<div class="media-left">
<a href="#">
<img class="media-object img-circle" src="http://i.imgur.com/Gib75vM.jpg" width="50" height="50" alt="...">
</a>
</div>
<div class="media-body">
<h4 class="media-heading">Jack Lewis</h4>
Jack is busy and incredibly goal-oriented. Explain how accomplishing your goals helps accomplish shared goals.
<div class="row help-buttons">
<div class="col-md-6"><button type="button" class="btn btn-primary btn-block">See Full Analysis</button></div>
<div class="col-md-6"><button type="button" class="btn btn-warning btn-block">Contact Your Coach</button></div>
</div>
</div>
</div>
</div>
</div><!-- /panel -->
</div><!--/col-md-6 -->
</div><!--/row-->
</div><!--/container-->
<p> </p>
<p> </p>
<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> Reminder
</div>
<div class="panel-body4">
<div class="media">
<div class="media-left">
<span class="glyphicon glyphicon-exclamation-sign" style="font-size:30px;"></span>
</div>
<div class="media-body">
<h2 class="media-heading">Expectations Check-In</h2>
<p>It's time to follow up on <a href="" style="text-decoration:underline">expectations</a> with your manager!</p>
<div class="row help-buttons">
<div class="col-md-6"><button type="button" class="btn btn-primary btn-block">Step-by-Step Guide</button></div>
<div class="col-md-6"><button type="button" class="btn btn-warning btn-block">Contact Your Coach</button></div>
</div>
</div>
</div>
</div><!--/panel-body-->
</div><!-- /panel -->
</div><!--/col-md-6 -->
</div><!--/row-->
</div><!--/container-->
.chat
{
list-style: none;
margin: 0;
padding: 0;
}
.chat li
{
margin-bottom: 10px;
padding-bottom: 5px;
border-bottom: 1px dotted #B3A9A9;
}
.chat li:last-child
{
margin-bottom: 10px;
padding-bottom: 5px;
border-bottom: none;
}
.chat li.left .chat-body
{
margin-left: 60px;
}
.chat li.right .chat-body
{
margin-right: 60px;
}
.chat li .chat-body p
{
margin: 0;
color: #777777;
}
.panel .slidedown .glyphicon, .chat .glyphicon
{
margin-right: 5px;
}
.panel-body
{
height: 225px;
}
.panel-body2
{
height: 185px;
margin: 15px;
}
.panel-body3
{
margin: 15px;
}
.panel-body4
{
margin: 15px;
}
::-webkit-scrollbar-track
{
-webkit-box-shadow: inset 0 0 6px rgba(0,0,0,0.3);
background-color: #F5F5F5;
}
::-webkit-scrollbar
{
width: 12px;
background-color: #F5F5F5;
}
::-webkit-scrollbar-thumb
{
-webkit-box-shadow: inset 0 0 6px rgba(0,0,0,.3);
background-color: #555;
}
p a {
text-decoration: underline;
}
.twitter-typeahead {
display: block !important;
}
.tt-dataset-topics {
margin-left: 15px;
}
.help-buttons {
margin-top: 15px;
}
$.getScript('https://twitter.github.io/typeahead.js/releases/latest/typeahead.bundle.js', function()
{
var substringMatcher = function(strs) {
return function findMatches(q, cb) {
var matches, substringRegex;
// an array that will be populated with substring matches
matches = [];
// regex used to determine if a string contains the substring `q`
substrRegex = new RegExp(q, 'i');
// iterate through the pool of strings and for any string that
// contains the substring `q`, add it to the `matches` array
$.each(strs, function(i, str) {
if (substrRegex.test(str)) {
matches.push(str);
}
});
cb(matches);
};
};
var topics = ['Motivating a Team Member', 'Motivating After a Setback', 'Motivating and Creating a Sense of Urgency'
];
$('#typeahead').typeahead({
hint: false,
highlight: true,
minLength: 1
},
{
name: 'topics',
source: substringMatcher(topics)
});
});
