switch from browserify to plain bower, add initial template from bootstrap
This commit is contained in:
Tim Buckley
parent
6d3ce7b886
commit
bf9fd7733b
|
|
@ -1,4 +1,3 @@
|
|||
node_modules
|
||||
stackviz/static/bundle.js
|
||||
*.pyc
|
||||
.idea
|
||||
.idea
|
||||
stackviz/static/components/*
|
||||
|
|
|
|||
|
|
@ -0,0 +1,30 @@
|
|||
{
|
||||
"name": "stackviz",
|
||||
"version": "0.0.0",
|
||||
"authors": [
|
||||
"Tim Buckley <timothy.jas.buckley@hp.com>",
|
||||
"Austin Clark <austin.clark@hp.com>"
|
||||
],
|
||||
"description": "A performance visualization utility for DevStack and Tempest",
|
||||
"license": "Apache 2.0",
|
||||
"ignore": [
|
||||
"**/.*",
|
||||
"node_modules",
|
||||
"bower_components",
|
||||
"test",
|
||||
"tests"
|
||||
],
|
||||
"dependencies": {
|
||||
"bootstrap": "~3.3.1",
|
||||
"datatables": "~1.10.4",
|
||||
"datatables-plugins": "~1.0.1",
|
||||
"flot": "~0.8.3",
|
||||
"font-awesome": "~4.2.0",
|
||||
"holderjs": "~2.4.1",
|
||||
"metisMenu": "~1.1.3",
|
||||
"morrisjs": "~0.5.1",
|
||||
"datatables-responsive": "~1.0.3",
|
||||
"bootstrap-social": "~4.8.0",
|
||||
"flot.tooltip": "~0.8.4"
|
||||
}
|
||||
}
|
||||
65
gulpfile.js
65
gulpfile.js
|
|
@ -1,65 +0,0 @@
|
|||
var gulp = require('gulp');
|
||||
var gutil = require('gulp-util');
|
||||
var path = require('path');
|
||||
var sourcemaps = require('gulp-sourcemaps');
|
||||
var source = require('vinyl-source-stream');
|
||||
var buffer = require('vinyl-buffer');
|
||||
var browserify = require('browserify');
|
||||
var watchify = require('watchify');
|
||||
|
||||
function configure() {
|
||||
return browserify('./stackviz/static/js/app.js', {
|
||||
debug: true
|
||||
})
|
||||
}
|
||||
|
||||
function rebundle(bundler) {
|
||||
return bundler.bundle()
|
||||
.on('error', function(err) {
|
||||
console.error(err);
|
||||
this.emit('end');
|
||||
})
|
||||
.pipe(source('bundle.js'))
|
||||
.pipe(buffer())
|
||||
.pipe(sourcemaps.init({ loadMaps: true }))
|
||||
.pipe(sourcemaps.write())
|
||||
.pipe(gulp.dest('./stackviz/static/'));
|
||||
}
|
||||
|
||||
function compile() {
|
||||
return rebundle(configure());
|
||||
}
|
||||
|
||||
var _count = 1;
|
||||
|
||||
function watch() {
|
||||
bundler = watchify(configure());
|
||||
|
||||
bundler.on('update', function(ids) {
|
||||
var files = [];
|
||||
ids.forEach(function(id) {
|
||||
files.push(path.basename(id));
|
||||
});
|
||||
|
||||
var s = '[watch #' + _count + ']';
|
||||
gutil.log(gutil.colors.blue(s),
|
||||
'building...',
|
||||
gutil.colors.gray('(', files.join(', '), ')'));
|
||||
|
||||
rebundle(bundler);
|
||||
});
|
||||
|
||||
bundler.on('log', function(msg) {
|
||||
var s = '[watch #' + _count + ']';
|
||||
gutil.log(gutil.colors.blue(s), 'finished: ', msg);
|
||||
|
||||
_count++;
|
||||
})
|
||||
|
||||
return rebundle(bundler);
|
||||
};
|
||||
|
||||
gulp.task('build', function() { return compile(); });
|
||||
gulp.task('watch', function() { return watch(); });
|
||||
|
||||
gulp.task('default', ['build']);
|
||||
20
package.json
20
package.json
|
|
@ -1,20 +0,0 @@
|
|||
{
|
||||
"name": "stackviz",
|
||||
"version": "0.0.0",
|
||||
"private": true,
|
||||
"description": "A performance visualization utility for DevStack and Tempest",
|
||||
"main": "index.js",
|
||||
"scripts": {
|
||||
"test": "echo \"Error: no test specified\" && exit 1"
|
||||
},
|
||||
"author": "",
|
||||
"license": "Apache 2.0",
|
||||
"devDependencies": {
|
||||
"browserify": "^10.2.6",
|
||||
"d3": "^3.5.6",
|
||||
"gulp": "^3.9.0",
|
||||
"vinyl-buffer": "^1.0.0",
|
||||
"vinyl-source-stream": "^1.1.0",
|
||||
"watchify": "^3.2.1"
|
||||
}
|
||||
}
|
||||
|
|
@ -0,0 +1,354 @@
|
|||
/*!
|
||||
* Start Bootstrap - SB Admin 2 Bootstrap Admin Theme (http://startbootstrap.com)
|
||||
* Code licensed under the Apache License v2.0.
|
||||
* For details, see http://www.apache.org/licenses/LICENSE-2.0.
|
||||
*/
|
||||
|
||||
body {
|
||||
background-color: #f8f8f8;
|
||||
}
|
||||
|
||||
#wrapper {
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
#page-wrapper {
|
||||
padding: 0 15px;
|
||||
min-height: 568px;
|
||||
background-color: #fff;
|
||||
}
|
||||
|
||||
@media(min-width:768px) {
|
||||
#page-wrapper {
|
||||
position: inherit;
|
||||
margin: 0 0 0 250px;
|
||||
padding: 0 30px;
|
||||
border-left: 1px solid #e7e7e7;
|
||||
}
|
||||
}
|
||||
|
||||
.navbar-top-links {
|
||||
margin-right: 0;
|
||||
}
|
||||
|
||||
.navbar-top-links li {
|
||||
display: inline-block;
|
||||
}
|
||||
|
||||
.navbar-top-links li:last-child {
|
||||
margin-right: 15px;
|
||||
}
|
||||
|
||||
.navbar-top-links li a {
|
||||
padding: 15px;
|
||||
min-height: 50px;
|
||||
}
|
||||
|
||||
.navbar-top-links .dropdown-menu li {
|
||||
display: block;
|
||||
}
|
||||
|
||||
.navbar-top-links .dropdown-menu li:last-child {
|
||||
margin-right: 0;
|
||||
}
|
||||
|
||||
.navbar-top-links .dropdown-menu li a {
|
||||
padding: 3px 20px;
|
||||
min-height: 0;
|
||||
}
|
||||
|
||||
.navbar-top-links .dropdown-menu li a div {
|
||||
white-space: normal;
|
||||
}
|
||||
|
||||
.navbar-top-links .dropdown-messages,
|
||||
.navbar-top-links .dropdown-tasks,
|
||||
.navbar-top-links .dropdown-alerts {
|
||||
width: 310px;
|
||||
min-width: 0;
|
||||
}
|
||||
|
||||
.navbar-top-links .dropdown-messages {
|
||||
margin-left: 5px;
|
||||
}
|
||||
|
||||
.navbar-top-links .dropdown-tasks {
|
||||
margin-left: -59px;
|
||||
}
|
||||
|
||||
.navbar-top-links .dropdown-alerts {
|
||||
margin-left: -123px;
|
||||
}
|
||||
|
||||
.navbar-top-links .dropdown-user {
|
||||
right: 0;
|
||||
left: auto;
|
||||
}
|
||||
|
||||
.sidebar .sidebar-nav.navbar-collapse {
|
||||
padding-right: 0;
|
||||
padding-left: 0;
|
||||
}
|
||||
|
||||
.sidebar .sidebar-search {
|
||||
padding: 15px;
|
||||
}
|
||||
|
||||
.sidebar ul li {
|
||||
border-bottom: 1px solid #e7e7e7;
|
||||
}
|
||||
|
||||
.sidebar ul li a.active {
|
||||
background-color: #eee;
|
||||
}
|
||||
|
||||
.sidebar .arrow {
|
||||
float: right;
|
||||
}
|
||||
|
||||
.sidebar .fa.arrow:before {
|
||||
content: "\f104";
|
||||
}
|
||||
|
||||
.sidebar .active>a>.fa.arrow:before {
|
||||
content: "\f107";
|
||||
}
|
||||
|
||||
.sidebar .nav-second-level li,
|
||||
.sidebar .nav-third-level li {
|
||||
border-bottom: 0!important;
|
||||
}
|
||||
|
||||
.sidebar .nav-second-level li a {
|
||||
padding-left: 37px;
|
||||
}
|
||||
|
||||
.sidebar .nav-third-level li a {
|
||||
padding-left: 52px;
|
||||
}
|
||||
|
||||
@media(min-width:768px) {
|
||||
.sidebar {
|
||||
z-index: 1;
|
||||
position: absolute;
|
||||
width: 250px;
|
||||
margin-top: 51px;
|
||||
}
|
||||
|
||||
.navbar-top-links .dropdown-messages,
|
||||
.navbar-top-links .dropdown-tasks,
|
||||
.navbar-top-links .dropdown-alerts {
|
||||
margin-left: auto;
|
||||
}
|
||||
}
|
||||
|
||||
.btn-outline {
|
||||
color: inherit;
|
||||
background-color: transparent;
|
||||
transition: all .5s;
|
||||
}
|
||||
|
||||
.btn-primary.btn-outline {
|
||||
color: #428bca;
|
||||
}
|
||||
|
||||
.btn-success.btn-outline {
|
||||
color: #5cb85c;
|
||||
}
|
||||
|
||||
.btn-info.btn-outline {
|
||||
color: #5bc0de;
|
||||
}
|
||||
|
||||
.btn-warning.btn-outline {
|
||||
color: #f0ad4e;
|
||||
}
|
||||
|
||||
.btn-danger.btn-outline {
|
||||
color: #d9534f;
|
||||
}
|
||||
|
||||
.btn-primary.btn-outline:hover,
|
||||
.btn-success.btn-outline:hover,
|
||||
.btn-info.btn-outline:hover,
|
||||
.btn-warning.btn-outline:hover,
|
||||
.btn-danger.btn-outline:hover {
|
||||
color: #fff;
|
||||
}
|
||||
|
||||
.chat {
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
list-style: none;
|
||||
}
|
||||
|
||||
.chat li {
|
||||
margin-bottom: 10px;
|
||||
padding-bottom: 5px;
|
||||
border-bottom: 1px dotted #999;
|
||||
}
|
||||
|
||||
.chat li.left .chat-body {
|
||||
margin-left: 60px;
|
||||
}
|
||||
|
||||
.chat li.right .chat-body {
|
||||
margin-right: 60px;
|
||||
}
|
||||
|
||||
.chat li .chat-body p {
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
.panel .slidedown .glyphicon,
|
||||
.chat .glyphicon {
|
||||
margin-right: 5px;
|
||||
}
|
||||
|
||||
.chat-panel .panel-body {
|
||||
height: 350px;
|
||||
overflow-y: scroll;
|
||||
}
|
||||
|
||||
.login-panel {
|
||||
margin-top: 25%;
|
||||
}
|
||||
|
||||
.flot-chart {
|
||||
display: block;
|
||||
height: 400px;
|
||||
}
|
||||
|
||||
.flot-chart-content {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
}
|
||||
|
||||
.dataTables_wrapper {
|
||||
position: relative;
|
||||
clear: both;
|
||||
}
|
||||
|
||||
table.dataTable thead .sorting,
|
||||
table.dataTable thead .sorting_asc,
|
||||
table.dataTable thead .sorting_desc,
|
||||
table.dataTable thead .sorting_asc_disabled,
|
||||
table.dataTable thead .sorting_desc_disabled {
|
||||
background: 0 0;
|
||||
}
|
||||
|
||||
table.dataTable thead .sorting_asc:after {
|
||||
content: "\f0de";
|
||||
float: right;
|
||||
font-family: fontawesome;
|
||||
}
|
||||
|
||||
table.dataTable thead .sorting_desc:after {
|
||||
content: "\f0dd";
|
||||
float: right;
|
||||
font-family: fontawesome;
|
||||
}
|
||||
|
||||
table.dataTable thead .sorting:after {
|
||||
content: "\f0dc";
|
||||
float: right;
|
||||
font-family: fontawesome;
|
||||
color: rgba(50,50,50,.5);
|
||||
}
|
||||
|
||||
.btn-circle {
|
||||
width: 30px;
|
||||
height: 30px;
|
||||
padding: 6px 0;
|
||||
border-radius: 15px;
|
||||
text-align: center;
|
||||
font-size: 12px;
|
||||
line-height: 1.428571429;
|
||||
}
|
||||
|
||||
.btn-circle.btn-lg {
|
||||
width: 50px;
|
||||
height: 50px;
|
||||
padding: 10px 16px;
|
||||
border-radius: 25px;
|
||||
font-size: 18px;
|
||||
line-height: 1.33;
|
||||
}
|
||||
|
||||
.btn-circle.btn-xl {
|
||||
width: 70px;
|
||||
height: 70px;
|
||||
padding: 10px 16px;
|
||||
border-radius: 35px;
|
||||
font-size: 24px;
|
||||
line-height: 1.33;
|
||||
}
|
||||
|
||||
.show-grid [class^=col-] {
|
||||
padding-top: 10px;
|
||||
padding-bottom: 10px;
|
||||
border: 1px solid #ddd;
|
||||
background-color: #eee!important;
|
||||
}
|
||||
|
||||
.show-grid {
|
||||
margin: 15px 0;
|
||||
}
|
||||
|
||||
.huge {
|
||||
font-size: 40px;
|
||||
}
|
||||
|
||||
.panel-green {
|
||||
border-color: #5cb85c;
|
||||
}
|
||||
|
||||
.panel-green .panel-heading {
|
||||
border-color: #5cb85c;
|
||||
color: #fff;
|
||||
background-color: #5cb85c;
|
||||
}
|
||||
|
||||
.panel-green a {
|
||||
color: #5cb85c;
|
||||
}
|
||||
|
||||
.panel-green a:hover {
|
||||
color: #3d8b3d;
|
||||
}
|
||||
|
||||
.panel-red {
|
||||
border-color: #d9534f;
|
||||
}
|
||||
|
||||
.panel-red .panel-heading {
|
||||
border-color: #d9534f;
|
||||
color: #fff;
|
||||
background-color: #d9534f;
|
||||
}
|
||||
|
||||
.panel-red a {
|
||||
color: #d9534f;
|
||||
}
|
||||
|
||||
.panel-red a:hover {
|
||||
color: #b52b27;
|
||||
}
|
||||
|
||||
.panel-yellow {
|
||||
border-color: #f0ad4e;
|
||||
}
|
||||
|
||||
.panel-yellow .panel-heading {
|
||||
border-color: #f0ad4e;
|
||||
color: #fff;
|
||||
background-color: #f0ad4e;
|
||||
}
|
||||
|
||||
.panel-yellow a {
|
||||
color: #f0ad4e;
|
||||
}
|
||||
|
||||
.panel-yellow a:hover {
|
||||
color: #df8a13;
|
||||
}
|
||||
|
|
@ -0,0 +1,180 @@
|
|||
.timeline {
|
||||
position: relative;
|
||||
padding: 20px 0 20px;
|
||||
list-style: none;
|
||||
}
|
||||
|
||||
.timeline:before {
|
||||
content: " ";
|
||||
position: absolute;
|
||||
top: 0;
|
||||
bottom: 0;
|
||||
left: 50%;
|
||||
width: 3px;
|
||||
margin-left: -1.5px;
|
||||
background-color: #eeeeee;
|
||||
}
|
||||
|
||||
.timeline > li {
|
||||
position: relative;
|
||||
margin-bottom: 20px;
|
||||
}
|
||||
|
||||
.timeline > li:before,
|
||||
.timeline > li:after {
|
||||
content: " ";
|
||||
display: table;
|
||||
}
|
||||
|
||||
.timeline > li:after {
|
||||
clear: both;
|
||||
}
|
||||
|
||||
.timeline > li:before,
|
||||
.timeline > li:after {
|
||||
content: " ";
|
||||
display: table;
|
||||
}
|
||||
|
||||
.timeline > li:after {
|
||||
clear: both;
|
||||
}
|
||||
|
||||
.timeline > li > .timeline-panel {
|
||||
float: left;
|
||||
position: relative;
|
||||
width: 46%;
|
||||
padding: 20px;
|
||||
border: 1px solid #d4d4d4;
|
||||
border-radius: 2px;
|
||||
-webkit-box-shadow: 0 1px 6px rgba(0,0,0,0.175);
|
||||
box-shadow: 0 1px 6px rgba(0,0,0,0.175);
|
||||
}
|
||||
|
||||
.timeline > li > .timeline-panel:before {
|
||||
content: " ";
|
||||
display: inline-block;
|
||||
position: absolute;
|
||||
top: 26px;
|
||||
right: -15px;
|
||||
border-top: 15px solid transparent;
|
||||
border-right: 0 solid #ccc;
|
||||
border-bottom: 15px solid transparent;
|
||||
border-left: 15px solid #ccc;
|
||||
}
|
||||
|
||||
.timeline > li > .timeline-panel:after {
|
||||
content: " ";
|
||||
display: inline-block;
|
||||
position: absolute;
|
||||
top: 27px;
|
||||
right: -14px;
|
||||
border-top: 14px solid transparent;
|
||||
border-right: 0 solid #fff;
|
||||
border-bottom: 14px solid transparent;
|
||||
border-left: 14px solid #fff;
|
||||
}
|
||||
|
||||
.timeline > li > .timeline-badge {
|
||||
z-index: 100;
|
||||
position: absolute;
|
||||
top: 16px;
|
||||
left: 50%;
|
||||
width: 50px;
|
||||
height: 50px;
|
||||
margin-left: -25px;
|
||||
border-radius: 50% 50% 50% 50%;
|
||||
text-align: center;
|
||||
font-size: 1.4em;
|
||||
line-height: 50px;
|
||||
color: #fff;
|
||||
background-color: #999999;
|
||||
}
|
||||
|
||||
.timeline > li.timeline-inverted > .timeline-panel {
|
||||
float: right;
|
||||
}
|
||||
|
||||
.timeline > li.timeline-inverted > .timeline-panel:before {
|
||||
right: auto;
|
||||
left: -15px;
|
||||
border-right-width: 15px;
|
||||
border-left-width: 0;
|
||||
}
|
||||
|
||||
.timeline > li.timeline-inverted > .timeline-panel:after {
|
||||
right: auto;
|
||||
left: -14px;
|
||||
border-right-width: 14px;
|
||||
border-left-width: 0;
|
||||
}
|
||||
|
||||
.timeline-badge.primary {
|
||||
background-color: #2e6da4 !important;
|
||||
}
|
||||
|
||||
.timeline-badge.success {
|
||||
background-color: #3f903f !important;
|
||||
}
|
||||
|
||||
.timeline-badge.warning {
|
||||
background-color: #f0ad4e !important;
|
||||
}
|
||||
|
||||
.timeline-badge.danger {
|
||||
background-color: #d9534f !important;
|
||||
}
|
||||
|
||||
.timeline-badge.info {
|
||||
background-color: #5bc0de !important;
|
||||
}
|
||||
|
||||
.timeline-title {
|
||||
margin-top: 0;
|
||||
color: inherit;
|
||||
}
|
||||
|
||||
.timeline-body > p,
|
||||
.timeline-body > ul {
|
||||
margin-bottom: 0;
|
||||
}
|
||||
|
||||
.timeline-body > p + p {
|
||||
margin-top: 5px;
|
||||
}
|
||||
|
||||
@media(max-width:767px) {
|
||||
ul.timeline:before {
|
||||
left: 40px;
|
||||
}
|
||||
|
||||
ul.timeline > li > .timeline-panel {
|
||||
width: calc(100% - 90px);
|
||||
width: -moz-calc(100% - 90px);
|
||||
width: -webkit-calc(100% - 90px);
|
||||
}
|
||||
|
||||
ul.timeline > li > .timeline-badge {
|
||||
top: 16px;
|
||||
left: 15px;
|
||||
margin-left: 0;
|
||||
}
|
||||
|
||||
ul.timeline > li > .timeline-panel {
|
||||
float: right;
|
||||
}
|
||||
|
||||
ul.timeline > li > .timeline-panel:before {
|
||||
right: auto;
|
||||
left: -15px;
|
||||
border-right-width: 15px;
|
||||
border-left-width: 0;
|
||||
}
|
||||
|
||||
ul.timeline > li > .timeline-panel:after {
|
||||
right: auto;
|
||||
left: -14px;
|
||||
border-right-width: 14px;
|
||||
border-left-width: 0;
|
||||
}
|
||||
}
|
||||
|
|
@ -0,0 +1,36 @@
|
|||
$(function() {
|
||||
|
||||
$('#side-menu').metisMenu();
|
||||
|
||||
});
|
||||
|
||||
//Loads the correct sidebar on window load,
|
||||
//collapses the sidebar on window resize.
|
||||
// Sets the min-height of #page-wrapper to window size
|
||||
$(function() {
|
||||
$(window).bind("load resize", function() {
|
||||
topOffset = 50;
|
||||
width = (this.window.innerWidth > 0) ? this.window.innerWidth : this.screen.width;
|
||||
if (width < 768) {
|
||||
$('div.navbar-collapse').addClass('collapse');
|
||||
topOffset = 100; // 2-row-menu
|
||||
} else {
|
||||
$('div.navbar-collapse').removeClass('collapse');
|
||||
}
|
||||
|
||||
height = ((this.window.innerHeight > 0) ? this.window.innerHeight : this.screen.height) - 1;
|
||||
height = height - topOffset;
|
||||
if (height < 1) height = 1;
|
||||
if (height > topOffset) {
|
||||
$("#page-wrapper").css("min-height", (height) + "px");
|
||||
}
|
||||
});
|
||||
|
||||
var url = window.location;
|
||||
var element = $('ul.nav a').filter(function() {
|
||||
return this.href == url || url.href.indexOf(this.href) == 0;
|
||||
}).addClass('active').parent().parent().addClass('in').parent();
|
||||
if (element.is('li')) {
|
||||
element.addClass('active');
|
||||
}
|
||||
});
|
||||
|
|
@ -1,12 +1,550 @@
|
|||
<!DOCTYPE html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<title></title>
|
||||
{% extends 'template.html' %}
|
||||
|
||||
<script src="{% static 'bundle.js }"></script>
|
||||
</head>
|
||||
<body>
|
||||
{% block title %}Index{% endblock %}
|
||||
|
||||
</body>
|
||||
</html>
|
||||
{% block body %}
|
||||
|
||||
<div class="row">
|
||||
<div class="col-lg-12">
|
||||
<h1 class="page-header">Overview</h1>
|
||||
</div>
|
||||
<!-- /.col-lg-12 -->
|
||||
</div>
|
||||
<!-- /.row -->
|
||||
|
||||
<!--
|
||||
<div class="row">
|
||||
<div class="col-lg-3 col-md-6">
|
||||
<div class="panel panel-primary">
|
||||
<div class="panel-heading">
|
||||
<div class="row">
|
||||
<div class="col-xs-3">
|
||||
<i class="fa fa-comments fa-5x"></i>
|
||||
</div>
|
||||
<div class="col-xs-9 text-right">
|
||||
<div class="huge">26</div>
|
||||
<div>New Comments!</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<a href="#">
|
||||
<div class="panel-footer">
|
||||
<span class="pull-left">View Details</span>
|
||||
<span class="pull-right"><i class="fa fa-arrow-circle-right"></i></span>
|
||||
<div class="clearfix"></div>
|
||||
</div>
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
<div class="col-lg-3 col-md-6">
|
||||
<div class="panel panel-green">
|
||||
<div class="panel-heading">
|
||||
<div class="row">
|
||||
<div class="col-xs-3">
|
||||
<i class="fa fa-tasks fa-5x"></i>
|
||||
</div>
|
||||
<div class="col-xs-9 text-right">
|
||||
<div class="huge">12</div>
|
||||
<div>New Tasks!</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<a href="#">
|
||||
<div class="panel-footer">
|
||||
<span class="pull-left">View Details</span>
|
||||
<span class="pull-right"><i class="fa fa-arrow-circle-right"></i></span>
|
||||
<div class="clearfix"></div>
|
||||
</div>
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
<div class="col-lg-3 col-md-6">
|
||||
<div class="panel panel-yellow">
|
||||
<div class="panel-heading">
|
||||
<div class="row">
|
||||
<div class="col-xs-3">
|
||||
<i class="fa fa-shopping-cart fa-5x"></i>
|
||||
</div>
|
||||
<div class="col-xs-9 text-right">
|
||||
<div class="huge">124</div>
|
||||
<div>New Orders!</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<a href="#">
|
||||
<div class="panel-footer">
|
||||
<span class="pull-left">View Details</span>
|
||||
<span class="pull-right"><i class="fa fa-arrow-circle-right"></i></span>
|
||||
<div class="clearfix"></div>
|
||||
</div>
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
<div class="col-lg-3 col-md-6">
|
||||
<div class="panel panel-red">
|
||||
<div class="panel-heading">
|
||||
<div class="row">
|
||||
<div class="col-xs-3">
|
||||
<i class="fa fa-support fa-5x"></i>
|
||||
</div>
|
||||
<div class="col-xs-9 text-right">
|
||||
<div class="huge">13</div>
|
||||
<div>Support Tickets!</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<a href="#">
|
||||
<div class="panel-footer">
|
||||
<span class="pull-left">View Details</span>
|
||||
<span class="pull-right"><i class="fa fa-arrow-circle-right"></i></span>
|
||||
<div class="clearfix"></div>
|
||||
</div>
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
-->
|
||||
<!-- /.row -->
|
||||
<div class="row">
|
||||
<div class="col-lg-8">
|
||||
<div class="panel panel-default">
|
||||
<div class="panel-heading">
|
||||
<i class="fa fa-bar-chart-o fa-fw"></i> Area Chart Example
|
||||
<div class="pull-right">
|
||||
<div class="btn-group">
|
||||
<button type="button" class="btn btn-default btn-xs dropdown-toggle" data-toggle="dropdown">
|
||||
Actions
|
||||
<span class="caret"></span>
|
||||
</button>
|
||||
<ul class="dropdown-menu pull-right" role="menu">
|
||||
<li><a href="#">Action</a>
|
||||
</li>
|
||||
<li><a href="#">Another action</a>
|
||||
</li>
|
||||
<li><a href="#">Something else here</a>
|
||||
</li>
|
||||
<li class="divider"></li>
|
||||
<li><a href="#">Separated link</a>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<!-- /.panel-heading -->
|
||||
<div class="panel-body">
|
||||
<div id="morris-area-chart"></div>
|
||||
</div>
|
||||
<!-- /.panel-body -->
|
||||
</div>
|
||||
<!-- /.panel -->
|
||||
<div class="panel panel-default">
|
||||
<div class="panel-heading">
|
||||
<i class="fa fa-bar-chart-o fa-fw"></i> Bar Chart Example
|
||||
<div class="pull-right">
|
||||
<div class="btn-group">
|
||||
<button type="button" class="btn btn-default btn-xs dropdown-toggle" data-toggle="dropdown">
|
||||
Actions
|
||||
<span class="caret"></span>
|
||||
</button>
|
||||
<ul class="dropdown-menu pull-right" role="menu">
|
||||
<li><a href="#">Action</a>
|
||||
</li>
|
||||
<li><a href="#">Another action</a>
|
||||
</li>
|
||||
<li><a href="#">Something else here</a>
|
||||
</li>
|
||||
<li class="divider"></li>
|
||||
<li><a href="#">Separated link</a>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<!-- /.panel-heading -->
|
||||
<div class="panel-body">
|
||||
<div class="row">
|
||||
<div class="col-lg-4">
|
||||
<div class="table-responsive">
|
||||
<table class="table table-bordered table-hover table-striped">
|
||||
<thead>
|
||||
<tr>
|
||||
<th>#</th>
|
||||
<th>Date</th>
|
||||
<th>Time</th>
|
||||
<th>Amount</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
<tr>
|
||||
<td>3326</td>
|
||||
<td>10/21/2013</td>
|
||||
<td>3:29 PM</td>
|
||||
<td>$321.33</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>3325</td>
|
||||
<td>10/21/2013</td>
|
||||
<td>3:20 PM</td>
|
||||
<td>$234.34</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>3324</td>
|
||||
<td>10/21/2013</td>
|
||||
<td>3:03 PM</td>
|
||||
<td>$724.17</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>3323</td>
|
||||
<td>10/21/2013</td>
|
||||
<td>3:00 PM</td>
|
||||
<td>$23.71</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>3322</td>
|
||||
<td>10/21/2013</td>
|
||||
<td>2:49 PM</td>
|
||||
<td>$8345.23</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>3321</td>
|
||||
<td>10/21/2013</td>
|
||||
<td>2:23 PM</td>
|
||||
<td>$245.12</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>3320</td>
|
||||
<td>10/21/2013</td>
|
||||
<td>2:15 PM</td>
|
||||
<td>$5663.54</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>3319</td>
|
||||
<td>10/21/2013</td>
|
||||
<td>2:13 PM</td>
|
||||
<td>$943.45</td>
|
||||
</tr>
|
||||
</tbody>
|
||||
</table>
|
||||
</div>
|
||||
<!-- /.table-responsive -->
|
||||
</div>
|
||||
<!-- /.col-lg-4 (nested) -->
|
||||
<div class="col-lg-8">
|
||||
<div id="morris-bar-chart"></div>
|
||||
</div>
|
||||
<!-- /.col-lg-8 (nested) -->
|
||||
</div>
|
||||
<!-- /.row -->
|
||||
</div>
|
||||
<!-- /.panel-body -->
|
||||
</div>
|
||||
<!-- /.panel -->
|
||||
<div class="panel panel-default">
|
||||
<div class="panel-heading">
|
||||
<i class="fa fa-clock-o fa-fw"></i> Responsive Timeline
|
||||
</div>
|
||||
<!-- /.panel-heading -->
|
||||
<div class="panel-body">
|
||||
<ul class="timeline">
|
||||
<li>
|
||||
<div class="timeline-badge"><i class="fa fa-check"></i>
|
||||
</div>
|
||||
<div class="timeline-panel">
|
||||
<div class="timeline-heading">
|
||||
<h4 class="timeline-title">Lorem ipsum dolor</h4>
|
||||
<p><small class="text-muted"><i class="fa fa-clock-o"></i> 11 hours ago via Twitter</small>
|
||||
</p>
|
||||
</div>
|
||||
<div class="timeline-body">
|
||||
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Libero laboriosam dolor perspiciatis omnis exercitationem. Beatae, officia pariatur? Est cum veniam excepturi. Maiores praesentium, porro voluptas suscipit facere rem dicta, debitis.</p>
|
||||
</div>
|
||||
</div>
|
||||
</li>
|
||||
<li class="timeline-inverted">
|
||||
<div class="timeline-badge warning"><i class="fa fa-credit-card"></i>
|
||||
</div>
|
||||
<div class="timeline-panel">
|
||||
<div class="timeline-heading">
|
||||
<h4 class="timeline-title">Lorem ipsum dolor</h4>
|
||||
</div>
|
||||
<div class="timeline-body">
|
||||
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Autem dolorem quibusdam, tenetur commodi provident cumque magni voluptatem libero, quis rerum. Fugiat esse debitis optio, tempore. Animi officiis alias, officia repellendus.</p>
|
||||
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Laudantium maiores odit qui est tempora eos, nostrum provident explicabo dignissimos debitis vel! Adipisci eius voluptates, ad aut recusandae minus eaque facere.</p>
|
||||
</div>
|
||||
</div>
|
||||
</li>
|
||||
<li>
|
||||
<div class="timeline-badge danger"><i class="fa fa-bomb"></i>
|
||||
</div>
|
||||
<div class="timeline-panel">
|
||||
<div class="timeline-heading">
|
||||
<h4 class="timeline-title">Lorem ipsum dolor</h4>
|
||||
</div>
|
||||
<div class="timeline-body">
|
||||
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Repellendus numquam facilis enim eaque, tenetur nam id qui vel velit similique nihil iure molestias aliquam, voluptatem totam quaerat, magni commodi quisquam.</p>
|
||||
</div>
|
||||
</div>
|
||||
</li>
|
||||
<li class="timeline-inverted">
|
||||
<div class="timeline-panel">
|
||||
<div class="timeline-heading">
|
||||
<h4 class="timeline-title">Lorem ipsum dolor</h4>
|
||||
</div>
|
||||
<div class="timeline-body">
|
||||
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Voluptates est quaerat asperiores sapiente, eligendi, nihil. Itaque quos, alias sapiente rerum quas odit! Aperiam officiis quidem delectus libero, omnis ut debitis!</p>
|
||||
</div>
|
||||
</div>
|
||||
</li>
|
||||
<li>
|
||||
<div class="timeline-badge info"><i class="fa fa-save"></i>
|
||||
</div>
|
||||
<div class="timeline-panel">
|
||||
<div class="timeline-heading">
|
||||
<h4 class="timeline-title">Lorem ipsum dolor</h4>
|
||||
</div>
|
||||
<div class="timeline-body">
|
||||
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Nobis minus modi quam ipsum alias at est molestiae excepturi delectus nesciunt, quibusdam debitis amet, beatae consequuntur impedit nulla qui! Laborum, atque.</p>
|
||||
<hr>
|
||||
<div class="btn-group">
|
||||
<button type="button" class="btn btn-primary btn-sm dropdown-toggle" data-toggle="dropdown">
|
||||
<i class="fa fa-gear"></i> <span class="caret"></span>
|
||||
</button>
|
||||
<ul class="dropdown-menu" role="menu">
|
||||
<li><a href="#">Action</a>
|
||||
</li>
|
||||
<li><a href="#">Another action</a>
|
||||
</li>
|
||||
<li><a href="#">Something else here</a>
|
||||
</li>
|
||||
<li class="divider"></li>
|
||||
<li><a href="#">Separated link</a>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</li>
|
||||
<li>
|
||||
<div class="timeline-panel">
|
||||
<div class="timeline-heading">
|
||||
<h4 class="timeline-title">Lorem ipsum dolor</h4>
|
||||
</div>
|
||||
<div class="timeline-body">
|
||||
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Sequi fuga odio quibusdam. Iure expedita, incidunt unde quis nam! Quod, quisquam. Officia quam qui adipisci quas consequuntur nostrum sequi. Consequuntur, commodi.</p>
|
||||
</div>
|
||||
</div>
|
||||
</li>
|
||||
<li class="timeline-inverted">
|
||||
<div class="timeline-badge success"><i class="fa fa-graduation-cap"></i>
|
||||
</div>
|
||||
<div class="timeline-panel">
|
||||
<div class="timeline-heading">
|
||||
<h4 class="timeline-title">Lorem ipsum dolor</h4>
|
||||
</div>
|
||||
<div class="timeline-body">
|
||||
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Deserunt obcaecati, quaerat tempore officia voluptas debitis consectetur culpa amet, accusamus dolorum fugiat, animi dicta aperiam, enim incidunt quisquam maxime neque eaque.</p>
|
||||
</div>
|
||||
</div>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
<!-- /.panel-body -->
|
||||
</div>
|
||||
<!-- /.panel -->
|
||||
</div>
|
||||
<!-- /.col-lg-8 -->
|
||||
<div class="col-lg-4">
|
||||
<div class="panel panel-default">
|
||||
<div class="panel-heading">
|
||||
<i class="fa fa-bell fa-fw"></i> Notifications Panel
|
||||
</div>
|
||||
<!-- /.panel-heading -->
|
||||
<div class="panel-body">
|
||||
<div class="list-group">
|
||||
<a href="#" class="list-group-item">
|
||||
<i class="fa fa-comment fa-fw"></i> New Comment
|
||||
<span class="pull-right text-muted small"><em>4 minutes ago</em>
|
||||
</span>
|
||||
</a>
|
||||
<a href="#" class="list-group-item">
|
||||
<i class="fa fa-twitter fa-fw"></i> 3 New Followers
|
||||
<span class="pull-right text-muted small"><em>12 minutes ago</em>
|
||||
</span>
|
||||
</a>
|
||||
<a href="#" class="list-group-item">
|
||||
<i class="fa fa-envelope fa-fw"></i> Message Sent
|
||||
<span class="pull-right text-muted small"><em>27 minutes ago</em>
|
||||
</span>
|
||||
</a>
|
||||
<a href="#" class="list-group-item">
|
||||
<i class="fa fa-tasks fa-fw"></i> New Task
|
||||
<span class="pull-right text-muted small"><em>43 minutes ago</em>
|
||||
</span>
|
||||
</a>
|
||||
<a href="#" class="list-group-item">
|
||||
<i class="fa fa-upload fa-fw"></i> Server Rebooted
|
||||
<span class="pull-right text-muted small"><em>11:32 AM</em>
|
||||
</span>
|
||||
</a>
|
||||
<a href="#" class="list-group-item">
|
||||
<i class="fa fa-bolt fa-fw"></i> Server Crashed!
|
||||
<span class="pull-right text-muted small"><em>11:13 AM</em>
|
||||
</span>
|
||||
</a>
|
||||
<a href="#" class="list-group-item">
|
||||
<i class="fa fa-warning fa-fw"></i> Server Not Responding
|
||||
<span class="pull-right text-muted small"><em>10:57 AM</em>
|
||||
</span>
|
||||
</a>
|
||||
<a href="#" class="list-group-item">
|
||||
<i class="fa fa-shopping-cart fa-fw"></i> New Order Placed
|
||||
<span class="pull-right text-muted small"><em>9:49 AM</em>
|
||||
</span>
|
||||
</a>
|
||||
<a href="#" class="list-group-item">
|
||||
<i class="fa fa-money fa-fw"></i> Payment Received
|
||||
<span class="pull-right text-muted small"><em>Yesterday</em>
|
||||
</span>
|
||||
</a>
|
||||
</div>
|
||||
<!-- /.list-group -->
|
||||
<a href="#" class="btn btn-default btn-block">View All Alerts</a>
|
||||
</div>
|
||||
<!-- /.panel-body -->
|
||||
</div>
|
||||
<!-- /.panel -->
|
||||
<div class="panel panel-default">
|
||||
<div class="panel-heading">
|
||||
<i class="fa fa-bar-chart-o fa-fw"></i> Donut Chart Example
|
||||
</div>
|
||||
<div class="panel-body">
|
||||
<div id="morris-donut-chart"></div>
|
||||
<a href="#" class="btn btn-default btn-block">View Details</a>
|
||||
</div>
|
||||
<!-- /.panel-body -->
|
||||
</div>
|
||||
<!-- /.panel -->
|
||||
<div class="chat-panel panel panel-default">
|
||||
<div class="panel-heading">
|
||||
<i class="fa fa-comments fa-fw"></i>
|
||||
Chat
|
||||
<div class="btn-group pull-right">
|
||||
<button type="button" class="btn btn-default btn-xs dropdown-toggle" data-toggle="dropdown">
|
||||
<i class="fa fa-chevron-down"></i>
|
||||
</button>
|
||||
<ul class="dropdown-menu slidedown">
|
||||
<li>
|
||||
<a href="#">
|
||||
<i class="fa fa-refresh fa-fw"></i> Refresh
|
||||
</a>
|
||||
</li>
|
||||
<li>
|
||||
<a href="#">
|
||||
<i class="fa fa-check-circle fa-fw"></i> Available
|
||||
</a>
|
||||
</li>
|
||||
<li>
|
||||
<a href="#">
|
||||
<i class="fa fa-times fa-fw"></i> Busy
|
||||
</a>
|
||||
</li>
|
||||
<li>
|
||||
<a href="#">
|
||||
<i class="fa fa-clock-o fa-fw"></i> Away
|
||||
</a>
|
||||
</li>
|
||||
<li class="divider"></li>
|
||||
<li>
|
||||
<a href="#">
|
||||
<i class="fa fa-sign-out fa-fw"></i> Sign Out
|
||||
</a>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
<!-- /.panel-heading -->
|
||||
<div class="panel-body">
|
||||
<ul class="chat">
|
||||
<li class="left clearfix">
|
||||
<span class="chat-img pull-left">
|
||||
<img src="http://placehold.it/50/55C1E7/fff" alt="User Avatar" class="img-circle" />
|
||||
</span>
|
||||
<div class="chat-body clearfix">
|
||||
<div class="header">
|
||||
<strong class="primary-font">Jack Sparrow</strong>
|
||||
<small class="pull-right text-muted">
|
||||
<i class="fa fa-clock-o fa-fw"></i> 12 mins ago
|
||||
</small>
|
||||
</div>
|
||||
<p>
|
||||
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Curabitur bibendum ornare dolor, quis ullamcorper ligula sodales.
|
||||
</p>
|
||||
</div>
|
||||
</li>
|
||||
<li class="right clearfix">
|
||||
<span class="chat-img pull-right">
|
||||
<img src="http://placehold.it/50/FA6F57/fff" alt="User Avatar" class="img-circle" />
|
||||
</span>
|
||||
<div class="chat-body clearfix">
|
||||
<div class="header">
|
||||
<small class=" text-muted">
|
||||
<i class="fa fa-clock-o fa-fw"></i> 13 mins ago</small>
|
||||
<strong class="pull-right primary-font">Bhaumik Patel</strong>
|
||||
</div>
|
||||
<p>
|
||||
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Curabitur bibendum ornare dolor, quis ullamcorper ligula sodales.
|
||||
</p>
|
||||
</div>
|
||||
</li>
|
||||
<li class="left clearfix">
|
||||
<span class="chat-img pull-left">
|
||||
<img src="http://placehold.it/50/55C1E7/fff" alt="User Avatar" class="img-circle" />
|
||||
</span>
|
||||
<div class="chat-body clearfix">
|
||||
<div class="header">
|
||||
<strong class="primary-font">Jack Sparrow</strong>
|
||||
<small class="pull-right text-muted">
|
||||
<i class="fa fa-clock-o fa-fw"></i> 14 mins ago</small>
|
||||
</div>
|
||||
<p>
|
||||
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Curabitur bibendum ornare dolor, quis ullamcorper ligula sodales.
|
||||
</p>
|
||||
</div>
|
||||
</li>
|
||||
<li class="right clearfix">
|
||||
<span class="chat-img pull-right">
|
||||
<img src="http://placehold.it/50/FA6F57/fff" alt="User Avatar" class="img-circle" />
|
||||
</span>
|
||||
<div class="chat-body clearfix">
|
||||
<div class="header">
|
||||
<small class=" text-muted">
|
||||
<i class="fa fa-clock-o fa-fw"></i> 15 mins ago</small>
|
||||
<strong class="pull-right primary-font">Bhaumik Patel</strong>
|
||||
</div>
|
||||
<p>
|
||||
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Curabitur bibendum ornare dolor, quis ullamcorper ligula sodales.
|
||||
</p>
|
||||
</div>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
<!-- /.panel-body -->
|
||||
<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>
|
||||
<!-- /.panel-footer -->
|
||||
</div>
|
||||
<!-- /.panel .chat-panel -->
|
||||
</div>
|
||||
<!-- /.col-lg-4 -->
|
||||
</div>
|
||||
<!-- /.row -->
|
||||
|
||||
{% endblock %}
|
||||
|
|
|
|||
|
|
@ -0,0 +1,49 @@
|
|||
<div class="sidebar-nav navbar-collapse">
|
||||
<ul class="nav" id="side-menu">
|
||||
<!--
|
||||
<li class="sidebar-search">
|
||||
<div class="input-group custom-search-form">
|
||||
<input type="text" class="form-control" placeholder="Search...">
|
||||
<span class="input-group-btn">
|
||||
<button class="btn btn-default" type="button">
|
||||
<i class="fa fa-search"></i>
|
||||
</button>
|
||||
</span>
|
||||
</div>
|
||||
</li>-->
|
||||
<li>
|
||||
<a href="index.html"><i class="fa fa-pie-chart fa-fw"></i> Overview</a>
|
||||
</li>
|
||||
<li>
|
||||
<a href="#"><i class="fa fa-bar-chart-o fa-fw"></i> DevStack<span class="fa arrow"></span></a>
|
||||
<ul class="nav nav-second-level">
|
||||
<li>
|
||||
<a href="#"><i class="fa fa-clock-o fa-fw"></i> Latest Results</a>
|
||||
</li>
|
||||
<li>
|
||||
<a href="#"><i class="fa fa-calendar fa-fw"></i> History</a>
|
||||
</li>
|
||||
<li>
|
||||
<a href="#"><i class="fa fa-database fa-fw"></i> Compare</a>
|
||||
</li>
|
||||
</ul>
|
||||
<!-- /.nav-second-level -->
|
||||
</li>
|
||||
<li>
|
||||
<a href="#"><i class="fa fa-bar-chart-o fa-fw"></i> Tempest<span class="fa arrow"></span></a>
|
||||
<ul class="nav nav-second-level">
|
||||
<li>
|
||||
<a href="#"><i class="fa fa-clock-o fa-fw"></i> Latest Results</a>
|
||||
</li>
|
||||
<li>
|
||||
<a href="#"><i class="fa fa-calendar fa-fw"></i> History</a>
|
||||
</li>
|
||||
<li>
|
||||
<a href="#"><i class="fa fa-database fa-fw"></i> Compare</a>
|
||||
</li>
|
||||
</ul>
|
||||
<!-- /.nav-second-level -->
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
<!-- /.sidebar-collapse -->
|
||||
|
|
@ -0,0 +1,297 @@
|
|||
{% load staticfiles %}
|
||||
<!DOCTYPE html>
|
||||
<html lang="en">
|
||||
|
||||
<head>
|
||||
|
||||
<meta charset="utf-8">
|
||||
<meta http-equiv="X-UA-Compatible" content="IE=edge">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1">
|
||||
<meta name="description" content="">
|
||||
<meta name="author" content="">
|
||||
|
||||
<title>{% block title %}{% endblock %}</title>
|
||||
|
||||
<!-- Bootstrap Core CSS -->
|
||||
<link href="{% static 'components/bootstrap/dist/css/bootstrap.min.css' %}" rel="stylesheet">
|
||||
|
||||
<!-- MetisMenu CSS -->
|
||||
<link href="{% static 'components/metisMenu/dist/metisMenu.min.css' %}" rel="stylesheet">
|
||||
|
||||
<!-- Timeline CSS -->
|
||||
<link href="{% static 'css/timeline.css' %}" rel="stylesheet">
|
||||
|
||||
<!-- Custom CSS -->
|
||||
<link href="{% static 'css/sb-admin-2.css' %}" rel="stylesheet">
|
||||
|
||||
<!-- Morris Charts CSS -->
|
||||
<link href="{% static 'components/morrisjs/morris.css' %}" rel="stylesheet">
|
||||
|
||||
<!-- Custom Fonts -->
|
||||
<link href="{% static 'components/font-awesome/css/font-awesome.min.css' %}" rel="stylesheet" type="text/css">
|
||||
|
||||
<!-- HTML5 Shim and Respond.js IE8 support of HTML5 elements and media queries -->
|
||||
<!-- WARNING: Respond.js doesn't work if you view the page via file:// -->
|
||||
<!--[if lt IE 9]>
|
||||
<script src="https://oss.maxcdn.com/libs/html5shiv/3.7.0/html5shiv.js"></script>
|
||||
<script src="https://oss.maxcdn.com/libs/respond.js/1.4.2/respond.min.js"></script>
|
||||
<![endif]-->
|
||||
|
||||
</head>
|
||||
|
||||
<body>
|
||||
|
||||
<div id="wrapper">
|
||||
|
||||
<!-- Navigation -->
|
||||
<nav class="navbar navbar-default navbar-static-top" role="navigation" style="margin-bottom: 0">
|
||||
<div class="navbar-header">
|
||||
<button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-collapse">
|
||||
<span class="sr-only">Toggle navigation</span>
|
||||
<span class="icon-bar"></span>
|
||||
<span class="icon-bar"></span>
|
||||
<span class="icon-bar"></span>
|
||||
</button>
|
||||
<a class="navbar-brand" href="index.html">StackViz</a>
|
||||
</div>
|
||||
<!-- /.navbar-header -->
|
||||
|
||||
<ul class="nav navbar-top-links navbar-right">
|
||||
<li class="dropdown">
|
||||
<a class="dropdown-toggle" data-toggle="dropdown" href="#">
|
||||
<i class="fa fa-envelope fa-fw"></i> <i class="fa fa-caret-down"></i>
|
||||
</a>
|
||||
<ul class="dropdown-menu dropdown-messages">
|
||||
<li>
|
||||
<a href="#">
|
||||
<div>
|
||||
<strong>John Smith</strong>
|
||||
<span class="pull-right text-muted">
|
||||
<em>Yesterday</em>
|
||||
</span>
|
||||
</div>
|
||||
<div>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque eleifend...</div>
|
||||
</a>
|
||||
</li>
|
||||
<li class="divider"></li>
|
||||
<li>
|
||||
<a href="#">
|
||||
<div>
|
||||
<strong>John Smith</strong>
|
||||
<span class="pull-right text-muted">
|
||||
<em>Yesterday</em>
|
||||
</span>
|
||||
</div>
|
||||
<div>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque eleifend...</div>
|
||||
</a>
|
||||
</li>
|
||||
<li class="divider"></li>
|
||||
<li>
|
||||
<a href="#">
|
||||
<div>
|
||||
<strong>John Smith</strong>
|
||||
<span class="pull-right text-muted">
|
||||
<em>Yesterday</em>
|
||||
</span>
|
||||
</div>
|
||||
<div>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque eleifend...</div>
|
||||
</a>
|
||||
</li>
|
||||
<li class="divider"></li>
|
||||
<li>
|
||||
<a class="text-center" href="#">
|
||||
<strong>Read All Messages</strong>
|
||||
<i class="fa fa-angle-right"></i>
|
||||
</a>
|
||||
</li>
|
||||
</ul>
|
||||
<!-- /.dropdown-messages -->
|
||||
</li>
|
||||
<!-- /.dropdown -->
|
||||
<li class="dropdown">
|
||||
<a class="dropdown-toggle" data-toggle="dropdown" href="#">
|
||||
<i class="fa fa-tasks fa-fw"></i> <i class="fa fa-caret-down"></i>
|
||||
</a>
|
||||
<ul class="dropdown-menu dropdown-tasks">
|
||||
<li>
|
||||
<a href="#">
|
||||
<div>
|
||||
<p>
|
||||
<strong>Task 1</strong>
|
||||
<span class="pull-right text-muted">40% Complete</span>
|
||||
</p>
|
||||
<div class="progress progress-striped active">
|
||||
<div class="progress-bar progress-bar-success" role="progressbar" aria-valuenow="40" aria-valuemin="0" aria-valuemax="100" style="width: 40%">
|
||||
<span class="sr-only">40% Complete (success)</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</a>
|
||||
</li>
|
||||
<li class="divider"></li>
|
||||
<li>
|
||||
<a href="#">
|
||||
<div>
|
||||
<p>
|
||||
<strong>Task 2</strong>
|
||||
<span class="pull-right text-muted">20% Complete</span>
|
||||
</p>
|
||||
<div class="progress progress-striped active">
|
||||
<div class="progress-bar progress-bar-info" role="progressbar" aria-valuenow="20" aria-valuemin="0" aria-valuemax="100" style="width: 20%">
|
||||
<span class="sr-only">20% Complete</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</a>
|
||||
</li>
|
||||
<li class="divider"></li>
|
||||
<li>
|
||||
<a href="#">
|
||||
<div>
|
||||
<p>
|
||||
<strong>Task 3</strong>
|
||||
<span class="pull-right text-muted">60% Complete</span>
|
||||
</p>
|
||||
<div class="progress progress-striped active">
|
||||
<div class="progress-bar progress-bar-warning" role="progressbar" aria-valuenow="60" aria-valuemin="0" aria-valuemax="100" style="width: 60%">
|
||||
<span class="sr-only">60% Complete (warning)</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</a>
|
||||
</li>
|
||||
<li class="divider"></li>
|
||||
<li>
|
||||
<a href="#">
|
||||
<div>
|
||||
<p>
|
||||
<strong>Task 4</strong>
|
||||
<span class="pull-right text-muted">80% Complete</span>
|
||||
</p>
|
||||
<div class="progress progress-striped active">
|
||||
<div class="progress-bar progress-bar-danger" role="progressbar" aria-valuenow="80" aria-valuemin="0" aria-valuemax="100" style="width: 80%">
|
||||
<span class="sr-only">80% Complete (danger)</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</a>
|
||||
</li>
|
||||
<li class="divider"></li>
|
||||
<li>
|
||||
<a class="text-center" href="#">
|
||||
<strong>See All Tasks</strong>
|
||||
<i class="fa fa-angle-right"></i>
|
||||
</a>
|
||||
</li>
|
||||
</ul>
|
||||
<!-- /.dropdown-tasks -->
|
||||
</li>
|
||||
<!-- /.dropdown -->
|
||||
<li class="dropdown">
|
||||
<a class="dropdown-toggle" data-toggle="dropdown" href="#">
|
||||
<i class="fa fa-bell fa-fw"></i> <i class="fa fa-caret-down"></i>
|
||||
</a>
|
||||
<ul class="dropdown-menu dropdown-alerts">
|
||||
<li>
|
||||
<a href="#">
|
||||
<div>
|
||||
<i class="fa fa-comment fa-fw"></i> New Comment
|
||||
<span class="pull-right text-muted small">4 minutes ago</span>
|
||||
</div>
|
||||
</a>
|
||||
</li>
|
||||
<li class="divider"></li>
|
||||
<li>
|
||||
<a href="#">
|
||||
<div>
|
||||
<i class="fa fa-twitter fa-fw"></i> 3 New Followers
|
||||
<span class="pull-right text-muted small">12 minutes ago</span>
|
||||
</div>
|
||||
</a>
|
||||
</li>
|
||||
<li class="divider"></li>
|
||||
<li>
|
||||
<a href="#">
|
||||
<div>
|
||||
<i class="fa fa-envelope fa-fw"></i> Message Sent
|
||||
<span class="pull-right text-muted small">4 minutes ago</span>
|
||||
</div>
|
||||
</a>
|
||||
</li>
|
||||
<li class="divider"></li>
|
||||
<li>
|
||||
<a href="#">
|
||||
<div>
|
||||
<i class="fa fa-tasks fa-fw"></i> New Task
|
||||
<span class="pull-right text-muted small">4 minutes ago</span>
|
||||
</div>
|
||||
</a>
|
||||
</li>
|
||||
<li class="divider"></li>
|
||||
<li>
|
||||
<a href="#">
|
||||
<div>
|
||||
<i class="fa fa-upload fa-fw"></i> Server Rebooted
|
||||
<span class="pull-right text-muted small">4 minutes ago</span>
|
||||
</div>
|
||||
</a>
|
||||
</li>
|
||||
<li class="divider"></li>
|
||||
<li>
|
||||
<a class="text-center" href="#">
|
||||
<strong>See All Alerts</strong>
|
||||
<i class="fa fa-angle-right"></i>
|
||||
</a>
|
||||
</li>
|
||||
</ul>
|
||||
<!-- /.dropdown-alerts -->
|
||||
</li>
|
||||
<!-- /.dropdown -->
|
||||
<li class="dropdown">
|
||||
<a class="dropdown-toggle" data-toggle="dropdown" href="#">
|
||||
<i class="fa fa-user fa-fw"></i> <i class="fa fa-caret-down"></i>
|
||||
</a>
|
||||
<ul class="dropdown-menu dropdown-user">
|
||||
<li><a href="#"><i class="fa fa-user fa-fw"></i> User Profile</a>
|
||||
</li>
|
||||
<li><a href="#"><i class="fa fa-gear fa-fw"></i> Settings</a>
|
||||
</li>
|
||||
<li class="divider"></li>
|
||||
<li><a href="login.html"><i class="fa fa-sign-out fa-fw"></i> Logout</a>
|
||||
</li>
|
||||
</ul>
|
||||
<!-- /.dropdown-user -->
|
||||
</li>
|
||||
<!-- /.dropdown -->
|
||||
</ul>
|
||||
<!-- /.navbar-top-links -->
|
||||
|
||||
<div class="navbar-default sidebar" role="navigation">
|
||||
{% include 'menu.html' %}
|
||||
</div>
|
||||
<!-- /.navbar-static-side -->
|
||||
</nav>
|
||||
|
||||
<div id="page-wrapper">
|
||||
{% block body %}{% endblock %}
|
||||
</div>
|
||||
<!-- /#page-wrapper -->
|
||||
|
||||
</div>
|
||||
<!-- /#wrapper -->
|
||||
|
||||
<!-- jQuery -->
|
||||
<script src="{% static 'components/jquery/dist/jquery.min.js' %}"></script>
|
||||
|
||||
<!-- Bootstrap Core JavaScript -->
|
||||
<script src="{% static 'components/bootstrap/dist/js/bootstrap.min.js' %}"></script>
|
||||
|
||||
<!-- Metis Menu Plugin JavaScript -->
|
||||
<script src="{% static 'components/metisMenu/dist/metisMenu.min.js' %}"></script>
|
||||
|
||||
<!-- Custom Theme JavaScript -->
|
||||
<script src="{% static 'js/sb-admin-2.js' %}"></script>
|
||||
|
||||
</body>
|
||||
|
||||
</html>
|
||||
|
|
@ -0,0 +1,4 @@
|
|||
from django.views.generic import TemplateView
|
||||
|
||||
class IndexView(TemplateView):
|
||||
template_name = 'index.html'
|
||||
Loading…
Reference in New Issue