<style type="text/css">
.navbar {
position: relative;
min-height: 50px;
margin-bottom: -7px;
border: 1px solid transparent;
}
.chat-box {
border: 5px solid black;
width: 99%;
background-color: white;
min-height: 218px;
overflow: auto
}
.textbox{
width: 96%;
margin-top: 220px;
}
.on{
display: block;
}
.off{
display: none;
}
.chat{
width: 50%;
margin-left: 126px;
border: 2px solid black;
background-color: slategrey;
overflow: auto
}
.list{
list-style: none;
}
.mess{
width: 78%;
}
#message{
width: 20%;
margin-top: -40px;
margin-left: 1px;
}
.panel-heading {
padding: 10px 15px;
border-bottom: 1px solid transparent;
border-top-left-radius: 3px;
border-top-right-radius: 3px;
text-align: -webkit-center;
font-size: 1em;
}
#chat{
overflow: auto
}
.say{
}
.online{
border-radius: 40%;
}
</style>
</style>
<aside class="right-side">
<!-- Content Header (Page header) -->
<section class="content-header">
<h1>Dashboard<small>Control panel</small></h1>
</section>
<!-- Main content -->
<!-- Main content -->
<section class="content">
<!-- Small boxes (Stat box) -->
<div class="row">
<div class="col-lg-3 col-xs-6">
<!-- small box -->
<div class="small-box bg-aqua">
<div class="inner">
<h3>
150
</h3>
<p>
New Chats
</p>
</div>
<div class="icon">
<i class="ion ion-bag"></i>
</div>
<a href="#" class="small-box-footer">
More info <i class="fa fa-arrow-circle-right"></i>
</a>
</div>
</div><!-- ./col -->
<div class="col-lg-3 col-xs-6">
<!-- small box -->
<div class="small-box bg-green">
<div class="inner">
<h3>
53<sup style="font-size: 20px">%</sup>
</h3>
<p>
Bounce Rate
</p>
</div>
<div class="icon">
<i class="ion ion-stats-bars"></i>
</div>
<a href="#" class="small-box-footer">
More info <i class="fa fa-arrow-circle-right"></i>
</a>
</div>
</div><!-- ./col -->
<div class="col-lg-3 col-xs-6">
<!-- small box -->
<div class="small-box bg-yellow">
<div class="inner">
<h3 id="regUser">
</h3>
<p>
User Registrations
</p>
</div>
<div class="icon">
<i class="ion ion-person-add"></i>
</div>
<a href="#" class="small-box-footer">
More info <i class="fa fa-arrow-circle-right"></i>
</a>
</div>
</div><!-- ./col -->
<div class="col-lg-3 col-xs-6">
<!-- small box -->
<div class="small-box bg-red">
<div class="inner">
<h3>
65
</h3>
<p>
Unique Visitors
</p>
</div>
<div class="icon">
<i class="ion ion-pie-graph"></i>
</div>
<a href="#" class="small-box-footer">
More info <i class="fa fa-arrow-circle-right"></i>
</a>
</div>
</div><!-- ./col -->
</div><!-- /.row -->
<!-- top row -->
<div class="row">
<div class="col-xs-12 connectedSortable">
</div><!-- /.col -->
</div>
<!-- /.row -->
<!-- Main row -->
<div class="row">
<!-- Left col -->
<section class="col-lg-6 connectedSortable">
<!-- Box (with bar chart) -->
<div class="box box-danger" id="loading-example">
<div class="box-header">
<!-- tools box -->
<div class="pull-right box-tools">
<button class="btn btn-danger btn-sm refresh-btn" data-toggle="tooltip" title="Reload"><i class="fa fa-refresh"></i></button>
<button class="btn btn-danger btn-sm" data-widget='collapse' data-toggle="tooltip" title="Collapse"><i class="fa fa-minus"></i></button>
<button class="btn btn-danger btn-sm" data-widget='remove' data-toggle="tooltip" title="Remove"><i class="fa fa-times"></i></button>
</div><!-- /. tools -->
<i class="fa fa-cloud"></i>
<h3 class="box-title">Server Load</h3>
</div><!-- /.box-header -->
<div class="box-body no-padding">
<div class="row">
<div class="col-sm-7">
<!-- bar chart -->
<div class="chart" id="bar-chart" style="height: 250px;">
</div>
</div>
<div class="col-sm-5">
<div class="pad">
<!-- Progress bars -->
<div class="clearfix">
<span class="pull-left">Bandwidth</span>
<small class="pull-right">10/200 GB</small>
</div>
<div class="progress xs">
<div class="progress-bar progress-bar-green" style="width: 70%;"></div>
</div>
<div class="clearfix">
<span class="pull-left">Transfered</span>
<small class="pull-right">10 GB</small>
</div>
<div class="progress xs">
<div class="progress-bar progress-bar-red" style="width: 70%;"></div>
</div>
<div class="clearfix">
<span class="pull-left">Activity</span>
<small class="pull-right">73%</small>
</div>
<div class="progress xs">
<div class="progress-bar progress-bar-light-blue" style="width: 70%;"></div>
</div>
<div class="clearfix">
<span class="pull-left">FTP</span>
<small class="pull-right">30 GB</small>
</div>
<div class="progress xs">
<div class="progress-bar progress-bar-aqua" style="width: 70%;"></div>
</div>
<!-- Buttons -->
<p>
<button class="btn btn-default btn-sm"><i class="fa fa-cloud-download"></i> Generate PDF</button>
</p>
</div><!-- /.pad -->
</div><!-- /.col -->
</div><!-- /.row - inside box -->
</div><!-- /.box-body -->
<div class="box-footer">
<div class="row">
<div class="col-xs-4 text-center" style="border-right: 1px solid #f4f4f4">
<input type="text" class="knob" data-readonly="true" value="80" data-width="60" data-height="60" data-fgColor="#f56954"/>
<div class="knob-label">CPU</div>
</div><!-- ./col -->
<div class="col-xs-4 text-center" style="border-right: 1px solid #f4f4f4">
<input type="text" class="knob" data-readonly="true" value="50" data-width="60" data-height="60" data-fgColor="#00a65a"/>
<div class="knob-label">Disk</div>
</div><!-- ./col -->
<div class="col-xs-4 text-center">
<input type="text" class="knob" data-readonly="true" value="30" data-width="60" data-height="60" data-fgColor="#3c8dbc"/>
<div class="knob-label">RAM</div>
</div><!-- ./col -->
</div><!-- /.row -->
</div><!-- /.box-footer -->
</div><!-- /.box -->
<!-- Custom tabs (Charts with tabs)-->
<div class="nav-tabs-custom">
<!-- Tabs within a box -->
<ul class="nav nav-tabs pull-right">
<li class="active"><a href="#revenue-chart" data-toggle="tab">Area</a></li>
<li><a href="#sales-chart" data-toggle="tab">Donut</a></li>
<li class="pull-left header"><i class="fa fa-inbox"></i> Sales</li>
</ul>
<div class="tab-content no-padding">
<!-- Morris chart - Sales -->
<div class="chart tab-pane active" id="revenue-chart" style="position: relative; height: 300px;"></div>
<div class="chart tab-pane" id="sales-chart" style="position: relative; height: 300px;"></div>
</div>
</div><!-- /.nav-tabs-custom -->
<!-- Calendar -->
<div class="box box-warning">
<div class="box-header">
<i class="fa fa-calendar"></i>
<div class="box-title">Calendar</div>
<!-- tools box -->
<div class="pull-right box-tools">
<!-- button with a dropdown -->
<div class="btn-group">
<button class="btn btn-warning btn-sm dropdown-toggle" data-toggle="dropdown"><i class="fa fa-bars"></i></button>
<ul class="dropdown-menu pull-right" role="menu">
<li><a href="#">Add new event</a></li>
<li><a href="#">Clear events</a></li>
<li class="divider"></li>
<li><a href="#">View calendar</a></li>
</ul>
</div>
</div><!-- /. tools -->
</div><!-- /.box-header -->
<div class="box-body no-padding">
<!--The calendar -->
<div id="calendar"></div>
</div><!-- /.box-body -->
</div><!-- /.box -->
<!-- quick email widget -->
<div class="box box-info">
<div class="box-header">
<i class="fa fa-envelope"></i>
<h3 class="box-title">Quick Email</h3>
<!-- tools box -->
<div class="pull-right box-tools">
<button class="btn btn-info btn-sm" data-widget="remove" data-toggle="tooltip" title="Remove"><i class="fa fa-times"></i></button>
</div><!-- /. tools -->
</div>
<div class="box-body">
<form action="#" method="post">
<div class="form-group">
<input type="email" class="form-control" name="emailto" placeholder="Email to:"/>
</div>
<div class="form-group">
<input type="text" class="form-control" name="subject" placeholder="Subject"/>
</div>
<div>
<textarea class="textarea" placeholder="Message" style="width: 100%; height: 125px; font-size: 14px; line-height: 18px; border: 1px solid #dddddd; padding: 10px;"></textarea>
</div>
</form>
</div>
<div class="box-footer clearfix">
<button class="pull-right btn btn-default" id="sendEmail">Send <i class="fa fa-arrow-circle-right"></i></button>
</div>
</div>
</section><!-- /.Left col -->
<!-- right col (We are only adding the ID to make the widgets sortable)-->
<section class="col-lg-6 connectedSortable">
<!-- Map box -->
<div class="box box-primary">
<div class="box-header">
<!-- tools box -->
<div class="pull-right box-tools">
<button class="btn btn-primary btn-sm daterange pull-right" data-toggle="tooltip" title="Date range"><i class="fa fa-calendar"></i></button>
<button class="btn btn-primary btn-sm pull-right" data-widget='collapse' data-toggle="tooltip" title="Collapse" style="margin-right: 5px;"><i class="fa fa-minus"></i></button>
</div><!-- /. tools -->
<i class="fa fa-map-marker"></i>
<h3 class="box-title">
Visitors
</h3>
</div>
<div class="box-body no-padding">
<div id="world-map" style="height: 300px;"></div>
<div class="table-responsive">
<!-- .table - Uses sparkline charts-->
<table class="table table-striped">
<tr>
<th>Country</th>
<th>Visitors</th>
<th>Online</th>
<th>Page Views</th>
</tr>
<tr>
<td><a href="#">USA</a></td>
<td><div id="sparkline-1"></div></td>
<td>209</td>
<td>239</td>
</tr>
<tr>
<td><a href="#">India</a></td>
<td><div id="sparkline-2"></div></td>
<td>131</td>
<td>958</td>
</tr>
<tr>
<td><a href="#">Britain</a></td>
<td><div id="sparkline-3"></div></td>
<td>19</td>
<td>417</td>
</tr>
<tr>
<td><a href="#">Brazil</a></td>
<td><div id="sparkline-4"></div></td>
<td>109</td>
<td>476</td>
</tr>
<tr>
<td><a href="#">China</a></td>
<td><div id="sparkline-5"></div></td>
<td>192</td>
<td>437</td>
</tr>
<tr>
<td><a href="#">Australia</a></td>
<td><div id="sparkline-6"></div></td>
<td>1709</td>
<td>947</td>
</tr>
</table><!-- /.table -->
</div>
</div><!-- /.box-body-->
<div class="box-footer">
<button class="btn btn-info"><i class="fa fa-download"></i> Generate PDF</button>
<button class="btn btn-warning"><i class="fa fa-bug"></i> Report Bug</button>
</div>
</div>
<!-- /.box -->
<!-- Chat box -->
<div class="box box-success" id="chatBox">
<?php $adminChat->adminChat() ?>
</div><!-- /.box (chat box) -->
<!-- TO DO List -->
<div class="box box-primary" id="todolist">
</div><!-- /.box -->
</section><!-- right col -->
</div><!-- /.row (main row) -->
</section><!-- /.content -->
</aside>
<link href="https://fonts.googleapis.com/icon?family=Material+Icons"
rel="stylesheet">
<script type="text/javascript" src="WICore/WIJ/WIChat.js"></script>
<div class="modal off" id="modal-todo-add">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" onclick="WIDashboard.Closed()" data-dismiss="modal" aria-hidden="true">×</button>
<h4 class="modal-title" id="modal-username">
<?php echo WILang::get('add_todo'); ?>
</h4>
</div>
<div class="modal-body" id="details-body">
<form class="form-horizontal" id="add_todo">
<div class="control-group form-group">
<label class="control-label col-lg-3" for="add_todo">
<?php echo WILang::get('ToDoItem'); ?>
</label>
<div class="controls col-lg-9">
<input id="add_todoList_Item" name="add_todo" type="text" class="input-xlarge form-control" >
</div>
</div>
</form>
</div>
<div align="center" class="ajax-loading off"><img src="WIMedia/Img/ajax_loader.gif" />
<div class="center" id="results-lang"></div>
</div>
<div class="modal-footer">
<a href="javascript:void(0);" onclick="WIDashboard.Closed()" class="btn btn-default" data-dismiss="modal" aria-hidden="true">
<?php echo WILang::get('cancel'); ?>
</a>
<a href="javascript:void(0);" id="btn-trans" onclick="WIDashboard.AddTodo()" class="btn btn-primary">
<?php echo WILang::get('add'); ?>
</a>
</div>
</div><!-- /.modal-content -->
</div><!-- /.modal-dialog -->
</div><!-- /.modal -->
|
Download
