数据统计后台网站模板
来源:网络收集分类:后台模板2021-06-170
- 后台模板编号:20210617185253
- 后台模板分类:后台模板
- 后台模板格式:html/css
- 后台模板关键词: 后台 模板 html
-
index_数据统计后台网站模板源代码<!DOCTYPE HTML> <html> <head> <title>Home</title> <meta name="viewport" content="width=device-width, initial-scale=1"> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <meta name="keywords" content="Baxster Responsive web template, Bootstrap Web Templates, Flat Web Templates, Android Compatible web template, SmartPhone Compatible web template, free WebDesigns for Nokia, Samsung, LG, SonyEricsson, Motorola web design" /> <script type="application/x-javascript"> addEventListener("load", function() { setTimeout(hideURLbar, 0); }, false); function hideURLbar(){ window.scrollTo(0,1); } </script> <!-- Bootstrap Core CSS --> <link href="css/bootstrap.css" rel='stylesheet' type='text/css' /> <!-- Custom CSS --> <link href="css/style.css" rel='stylesheet' type='text/css' /> <!-- font CSS --> <link rel="icon" href="favicon.ico" type="image/x-icon" > <!-- font-awesome icons --> <link href="css/font-awesome.css" rel="stylesheet"> <!-- //font-awesome icons --> <!-- chart --> <script src="js/Chart.js"></script> <!-- //chart --> <!-- js--> <script src="js/jquery-1.11.1.min.js"></script> <script src="js/modernizr.custom.js"></script> <!--webfonts--> <link href='http://fonts.useso.com/css?family=Roboto+Condensed:400,300,300italic,400italic,700,700italic' rel='stylesheet' type='text/css'> <!--//webfonts--> <!--animate--> <link href="css/animate.css" rel="stylesheet" type="text/css" media="all"> <script src="js/wow.min.js"></script> <script> new WOW().init(); </script> <!--//end-animate--> <!-- Metis Menu --> <script src="js/metisMenu.min.js"></script> <script src="js/custom.js"></script> <link href="css/custom.css" rel="stylesheet"> <!--//Metis Menu --> </head> <body class="cbp-spmenu-push"> <div class="main-content"> <!--left-fixed -navigation--> <div class="sidebar" role="navigation"> <div class="navbar-collapse"> <nav class="cbp-spmenu cbp-spmenu-vertical cbp-spmenu-right dev-page-sidebar mCustomScrollbar _mCS_1 mCS-autoHide mCS_no_scrollbar" id="cbp-spmenu-s1"> <div class="scrollbar scrollbar1"> <ul class="nav" id="side-menu"> <li> <a href="index.html" class="active"><i class="fa fa-home nav_icon"></i>Dashboard</a> </li> <li> <a href="#"><i class="fa fa-cogs nav_icon"></i>Components <span class="fa arrow"></span></a> <ul class="nav nav-second-level collapse"> <li> <a href="progressbar.html">Progressbar</a> </li> <li> <a href="grid.html">Grid</a> </li> </ul> <!-- /nav-second-level --> </li> <li> <a href="#"><i class="fa fa-book nav_icon"></i>Elements <span class="fa arrow"></span></a> <ul class="nav nav-second-level collapse"> <li> <a href="buttons.html">Buttons</a> </li> <li> <a href="typography.html">Typography</a> </li> </ul> <!-- /nav-second-level --> </li> <li> <a href="widgets.html"><i class="fa fa-th-large nav_icon"></i>Widgets</a> </li> <li> <a href="#"><i class="fa fa-check-square-o nav_icon"></i>Forms<span class="fa arrow"></span></a> <ul class="nav nav-second-level collapse"> <li> <a href="inputs.html">Inputs</a> </li> <li> <a href="validation.html">Form Validation</a> </li> </ul> <!-- //nav-second-level --> </li> <li> <a href="#"><i class="fa fa-envelope nav_icon"></i>Mailbox<span class="fa arrow"></span></a> <ul class="nav nav-second-level collapse"> <li> <a href="inbox.html">Inbox</a> </li> <li> <a href="compose.html">Compose email</a> </li> </ul> <!-- //nav-second-level --> </li> <li> <a href="maps.html"><i class="fa fa-location-arrow nav_icon"></i>Maps</a> </li> <li> <a href="#"><i class="fa fa-file-text-o nav_icon"></i>Pages<span class="fa arrow"></span></a> <ul class="nav nav-second-level collapse"> <li> <a href="login.html">Login</a> </li> <li> <a href="signup.html">SignUp</a> </li> <li> <a href="blank-page.html">Blank Page</a> </li> </ul> <!-- //nav-second-level --> </li> <li> <a href="charts.html" class="chart-nav"><i class="fa fa-bar-chart nav_icon"></i>Charts</a> </li> <li> <a href="#" class="chart-nav"><i class="fa fa-list-ul nav_icon"></i>Extras<span class="fa arrow"></span></a> <ul class="nav nav-second-level collapse"> <li> <a href="tables.html">Tables</a> </li> <li> <a href="404.html">404 Page</a> </li> </ul> <!-- //nav-second-level --> </li> </ul> </div> <!-- //sidebar-collapse --> </nav> </div> </div> <!--left-fixed -navigation--> <!-- header-starts --> <div class="sticky-header header-section "> <div class="header-left"> <!--logo --> <div class="logo"> <a href="index.html"> <ul> <li><img src="images/logo1.png" alt="" /></li> <li><h1>Baxster</h1></li> <div class="clearfix"> </div> </ul> </a> </div> <!--//logo--> <div class="header-right header-right-grid"> <div class="profile_details_left"><!--notifications of menu start --> <ul class="nofitications-dropdown"> <li class="dropdown head-dpdn"> <a href="#" class="dropdown-toggle" data-toggle="dropdown"><i class="fa fa-envelope"></i><span class="badge">3</span></a> <ul class="dropdown-menu anti-dropdown-menu"> <li> <div class="notification_header"> <h3>You have 3 new messages</h3> </div> </li> <li><a href="#"> <div class="user_img"><img src="images/1.png" alt=""></div> <div class="notification_desc"> <p>Lorem ipsum dolor amet</p> <p><span>1 hour ago</span></p> </div> <div class="clearfix"></div> </a></li> <li class="odd"><a href="#"> <div class="user_img"><img src="images/2.png" alt=""></div> <div class="notification_desc"> <p>Lorem ipsum dolor amet </p> <p><span>1 hour ago</span></p> </div> <div class="clearfix"></div> </a></li> <li><a href="#"> <div class="user_img"><img src="images/3.png" alt=""></div> <div class="notification_desc"> <p>Lorem ipsum dolor amet </p> <p><span>1 hour ago</span></p> </div> <div class="clearfix"></div> </a></li> <li> <div class="notification_bottom"> <a href="#">See all messages</a> </div> </li> </ul> </li> <li class="dropdown head-dpdn"> <a href="#" class="dropdown-toggle" data-toggle="dropdown" aria-expanded="false"><i class="fa fa-bell"></i><span class="badge blue">3</span></a> <ul class="dropdown-menu anti-dropdown-menu"> <li> <div class="notification_header"> <h3>You have 3 new notification</h3> </div> </li> <li><a href="#"> <div class="user_img"><img src="images/2.png" alt=""></div> <div class="notification_desc"> <p>Lorem ipsum dolor amet</p> <p><span>1 hour ago</span></p> </div> <div class="clearfix"></div> </a></li> <li class="odd"><a href="#"> <div class="user_img"><img src="images/1.png" alt=""></div> <div class="notification_desc"> <p>Lorem ipsum dolor amet </p> <p><span>1 hour ago</span></p> </div> <div class="clearfix"></div> </a></li> <li><a href="#"> <div class="user_img"><img src="images/3.png" alt=""></div> <div class="notification_desc"> <p>Lorem ipsum dolor amet </p> <p><span>1 hour ago</span></p> </div> <div class="clearfix"></div> </a></li> <li> <div class="notification_bottom"> <a href="#">See all notifications</a> </div> </li> </ul> </li> <li class="dropdown head-dpdn"> <a href="#" class="dropdown-toggle" data-toggle="dropdown" aria-expanded="false"><i class="fa fa-tasks"></i><span class="badge blue1">15</span></a> <ul class="dropdown-menu anti-dropdown-menu"> <li> <div class="notification_header"> <h3>You have 8 pending task</h3> </div> </li> <li><a href="#"> <div class="task-info"> <span class="task-desc">Database update</span><span class="percentage">40%</span> <div class="clearfix"></div> </div> <div class="progress progress-striped active"> <div class="bar yellow" style="width:40%;"></div> </div> </a></li> <li><a href="#"> <div class="task-info"> <span class="task-desc">Dashboard done</span><span class="percentage">90%</span> <div class="clearfix"></div> </div> <div class="progress progress-striped active"> <div class="bar green" style="width:90%;"></div> </div> </a></li> <li><a href="#"> <div class="task-info"> <span class="task-desc">Mobile App</span><span class="percentage">33%</span> <div class="clearfix"></div> </div> <div class="progress progress-striped active"> <div class="bar red" style="width: 33%;"></div> </div> </a></li> <li><a href="#"> <div class="task-info"> <span class="task-desc">Issues fixed</span><span class="percentage">80%</span> <div class="clearfix"></div> </div> <div class="progress progress-striped active"> <div class="bar blue" style="width: 80%;"></div> </div> </a></li> <li> <div class="notification_bottom"> <a href="#">See all pending tasks</a> </div> </li> </ul> </li> </ul> <div class="clearfix"> </div> </div> </div> <div class="clearfix"> </div> </div> <!--search-box--> <div class="search-box"> <form class="input"> <input class="sb-search-input input__field--madoka" placeholder="Search..." type="search" id="input-31" /> </form> </div> <!--//end-search-box--> <div class="header-right"> <!--notification menu end --> <div class="profile_details"> <ul> <li class="dropdown profile_details_drop"> <a href="#" class="dropdown-toggle" data-toggle="dropdown" aria-expanded="false"> <div class="profile_img"> <span class="prfil-img"><img src="images/a.png" alt=""> </span> <div class="clearfix"></div> </div> </a> <ul class="dropdown-menu drp-mnu"> <li> <a href="#"><i class="fa fa-cog"></i> Settings</a> </li> <li> <a href="#"><i class="fa fa-user"></i> Profile</a> </li> <li> <a href="#"><i class="fa fa-sign-out"></i> Logout</a> </li> </ul> </li> </ul> </div> <!--toggle button start--> <button id="showLeftPush"><i class="fa fa-bars"></i></button> <!--toggle button end--> <div class="clearfix"> </div> </div> <div class="clearfix"> </div> </div> <!-- //header-ends --> <!-- main content start--> <div id="page-wrapper"> <div class="main-page"> <!-- four-grids --> <div class="row four-grids"> <div class="col-md-3 ticket-grid"> <div class="tickets"> <div class="grid-left"> <div class="book-icon"> <i class="fa fa-book"></i> </div> </div> <div class="grid-right"> <h3>Tickets <span>Answered</span></h3> <p>452</p> </div> <div class="clearfix"> </div> </div> </div> <div class="col-md-3 ticket-grid"> <div class="tickets"> <div class="grid-left"> <div class="book-icon"> <i class="fa fa-rocket"></i> </div> </div> <div class="grid-right"> <h3>New <span>Projects</span></h3> <p>745</p> </div> <div class="clearfix"> </div> </div> </div> <div class="col-md-3 ticket-grid"> <div class="tickets"> <div class="grid-left"> <div class="book-icon"> <i class="fa fa-bar-chart"></i> </div> </div> <div class="grid-right"> <h3>Our <span>Status</span></h3> <p>125</p> </div> <div class="clearfix"> </div> </div> </div> <div class="col-md-3 ticket-grid"> <div class="tickets"> <div class="grid-left"> <div class="book-icon"> <i class="fa fa-user"></i> </div> </div> <div class="grid-right"> <h3>Daily <span>Visitors</span></h3> <p>7462</p> </div> <div class="clearfix"> </div> </div> </div> <div class="clearfix"> </div> </div> <!-- //four-grids --> <!--row--> <div class="row"> <div class="col-md-6"> <div class="panel panel-widget"> <div class="panel-title"> Candlestick colors <ul class="panel-tools"> <li><a class="icon minimise-tool"><i class="fa fa-minus"></i></a></li> <li><a class="icon expand-tool"><i class="fa fa-expand"></i></a></li> <li><a class="icon closed-tool"><i class="fa fa-times"></i></a></li> </ul> </div> <div class="panel-body"> <!-- candlestick --> <div class="candlestick"> <script type="text/javascript"> // Generate data var data = []; var time = new Date('Dec 1, 2013 12:00').valueOf(); var h = Math.floor(Math.random() * 100); var l = h - Math.floor(Math.random() * 20); var o = h - Math.floor(Math.random() * (h - l)); var c = h - Math.floor(Math.random() * (h - l)); var v = Math.floor(Math.random() * 1000); for (var i = 0; i < 30; i++) { data.push([time, o, h, l, c, v]); h += Math.floor(Math.random() * 10 - 5); l = h - Math.floor(Math.random() * 20); o = h - Math.floor(Math.random() * (h - l)); c = h - Math.floor(Math.random() * (h - l)); v += Math.floor(Math.random() * 100 - 50); time += 30 * 60000; // Add 30 minutes } </script> <div id="example-8"></div> <script type="text/javascript"> $(function() { $('#example-8').jqCandlestick({ data: data, theme: 'light', yAxis: [{ height: 7, // 7 / (7 + 3) }, { height: 3, // 3 / (7 + 3) }], series: [{ type: 'candlestick', upStroke: '#0C0', downStroke: '#C00', downColor: 'rgba(255, 0, 0, 0.4)', }, { type: 'column', name: 'VOLUME', yAxis: 1, stroke: '#00C', color: 'rgba(0, 0, 255, 0.5)', }], }); }); </script> </div> <!-- //candlestick --> </div> </div> </div> <div class="col-md-6"> <div class="panel panel-widget"> <div class="panel-title"> Lines and points <ul class="panel-tools"> <li><a class="icon minimise-tool"><i class="fa fa-minus"></i></a></li> <li><a class="icon expand-tool"><i class="fa fa-expand"></i></a></li> <li><a class="icon closed-tool"><i class="fa fa-times"></i></a></li> </ul> </div> <div class="panel-body"> <div class="lines-points"> <div id="example-4"></div> <script type="text/javascript"> $(function() { $('#example-4').jqCandlestick({ data: data, theme: 'light', series: [{ type: 'line', }, { type: 'point', }], }); }); </script> </div> </div> </div> </div> <div class="clearfix"> </div> </div> <!--//row--> <!--row--> <div class="row"> <div class="col-md-7"> <div class="panel panel-widget"> <div class="panel-title"> Real Time Updates <ul class="panel-tools"> <li><a class="icon minimise-tool"><i class="fa fa-minus"></i></a></li> <li><a class="icon expand-tool"><i class="fa fa-expand"></i></a></li> <li><a class="icon closed-tool"><i class="fa fa-times"></i></a></li> </ul> </div> <div class="panel-body"> <div class="demo-container"> <div id="placeholder" class="demo-placeholder"></div> </div> <p>Time between updates: <input id="updateInterval" type="text" value="" style="text-align: right; width:5em"> milliseconds</p> </div> </div> </div> <div class="col-md-5"> <div class="panel panel-widget"> <div class="panel-title"> Error Bars <ul class="panel-tools"> <li><a class="icon minimise-tool"><i class="fa fa-minus"></i></a></li> <li><a class="icon expand-tool"><i class="fa fa-expand"></i></a></li> <li><a class="icon closed-tool"><i class="fa fa-times"></i></a></li> </ul> </div> <div class="panel-body"> <div class="demo-container"> <div id="placeholder1" class="demo-placeholder"></div> </div> </div> </div> </div> <div class="clearfix"> </div> </div> <!--//row--> <!--row--> <div class="row"> <div class="col-md-5 program-grid"> <div class="panel panel-widget"> <div class="panel-title"> Programming Skills <ul class="panel-tools"> <li><a class="icon minimise-tool"><i class="fa fa-minus"></i></a></li> <li><a class="icon expand-tool"><i class="fa fa-expand"></i></a></li> <li><a class="icon closed-tool"><i class="fa fa-times"></i></a></li> </ul> </div> <div class="panel-body"> <div class="content"> <svg id="svg"></svg> </div> </div> </div> </div> <div class="col-md-7 monthly-grid"> <div class="panel panel-widget"> <div class="panel-title"> Monthly Status Report <ul class="panel-tools"> <li><a class="icon minimise-tool"><i class="fa fa-minus"></i></a></li> <li><a class="icon expand-tool"><i class="fa fa-expand"></i></a></li> <li><a class="icon closed-tool"><i class="fa fa-times"></i></a></li> </ul> </div> <div class="panel-body"> <!-- status --> <div class="contain"> <div class="gantt"></div> </div> <!-- status --> </div> </div> </div> <div class="clearfix"> </div> </div> <!--//row--> </div> </div> <!--footer--> <div class="dev-page"> <!-- page footer --> <!-- dev-page-footer-closed dev-page-footer-fixed --> <div class="dev-page-footer dev-page-footer-fixed"> <!-- container --> <div class="container"> <div class="copyright"> <p>Copyright © 2016.Company name All rights reserved.<a target="_blank" href="#">网页模板</a></p> </div> <!-- page footer buttons --> <ul class="dev-page-footer-buttons"> <li><a href="#footer_content_1" class="dev-page-footer-container-open"><span class="glyphicon glyphicon glyphicon-sort" aria-hidden="true"></span></a></li> <li><a href="#footer_content_2" class="dev-page-footer-container-open"><span class="glyphicon glyphicon glyphicon-signal" aria-hidden="true"></span></a></li> <li><a href="#footer_content_3" class="dev-page-footer-container-open"><span class="glyphicon glyphicon glyphicon glyphicon-file" aria-hidden="true"></span></a></li> </ul> <!-- //page footer buttons --> <!-- page footer container --> <div class="dev-page-footer-container"> <!-- loader and close button --> <div class="dev-page-footer-container-layer"> <a href="#" class="dev-page-footer-container-layer-button"></a> </div> <!-- //loader and close button --> <!-- informers --> <div class="dev-page-footer-container-content" id="footer_content_1"> <div class="block-hdnews"> <div class="list-wrpaaer" style="height:200px;"> <ul class="list-aggregate" id="marquee-horizontal"> <li class="fat-l" style="width:300px"> <a href="#">Lorem ipsum dolor</a> <p> Lorem ipsum dolor sit amet, consectetur adipiscing elit. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Lorem ipsum dolor sit amet, consectetur adipiscing elit. </p> </li> <li class="fat-l" style="width:300px"> <a href="#">Consectetur</a> <p> Lorem ipsum dolor sit amet, consectetur adipiscing elit. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Lorem ipsum dolor sit amet, consectetur adipiscing elit. </p> </li> <li class="fat-l" style="width:300px"> <a href="#">Adipiscing elit</a> <p> Lorem ipsum dolor sit amet, consectetur adipiscing elit. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Lorem ipsum dolor sit amet, consectetur adipiscing elit. </p> </li> <li class="fat-l" style="width:300px"> <a href="#">Lorem ipsum dolor</a> <p> Lorem ipsum dolor sit amet, consectetur adipiscing elit. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Lorem ipsum dolor sit amet, consectetur adipiscing elit. </p> </li> <li class="fat-l" style="width:300px"> <a href="#">Consectetur</a> <p> Lorem ipsum dolor sit amet, consectetur adipiscing elit. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Lorem ipsum dolor sit amet, consectetur adipiscing elit. </p> </li> <li class="fat-l" style="width:300px"> <a href="#">Adipiscing elit</a> <p> Lorem ipsum dolor sit amet, consectetur adipiscing elit. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Lorem ipsum dolor sit amet, consectetur adipiscing elit. </p> </li> </ul> </div><!-- list-wrpaaer --> </div> <!-- block-hdnews --> <script type="text/javascript"> $(function(){ $('#marquee-vertical').marquee(); $('#marquee-horizontal').marquee({direction:'horizontal', delay:0, timing:50}); }); </script> </div> <!-- //informers --> <!-- informers --> <div class="dev-page-footer-container-content" id="footer_content_2"> <div class="graphs"> <div class="col-md-4 graph-points"> <div class="graph-left"> <script type="text/javascript"> // Generate data var data = []; var time = new Date('Dec 1, 2013 12:00').valueOf(); var h = Math.floor(Math.random() * 100); var l = h - Math.floor(Math.random() * 20); var o = h - Math.floor(Math.random() * (h - l)); var c = h - Math.floor(Math.random() * (h - l)); var v = Math.floor(Math.random() * 1000); for (var i = 0; i < 30; i++) { data.push([time, o, h, l, c, v]); h += Math.floor(Math.random() * 10 - 5); l = h - Math.floor(Math.random() * 20); o = h - Math.floor(Math.random() * (h - l)); c = h - Math.floor(Math.random() * (h - l)); v += Math.floor(Math.random() * 100 - 50); time += 30 * 60000; // Add 30 minutes } </script> <div id="example-1"></div> <script type="text/javascript"> $(function() { $('#example-1').jqCandlestick({ data: data, theme: 'light', series: [{ }], }); }); </script> </div> <div class="graph-right"> <h3>TODAY'S STATS</h3> <p>Duis aute irure dolor in reprehenderit.</p> <ul> <li>Earning: $400 USD</li> <li>Items Sold: 20 Items</li> <li>Last Hour Sales: $34 USD</li> </ul> </div> <div class="clearfix"> </div> </div> <div class="col-md-4 bar-grid"> <div class="graph-left"> <canvas id="line"></canvas> <script> var lineChartData = { labels : ["Mon","Tue","Wed","Thu","Fri","Sat","Mon"], datasets : [ { fillColor : "rgba(202, 202, 202, 0)", strokeColor : "#3E495A", pointColor : "#fbfbfb", pointStrokeColor : "#fbfbfb", data : [20,35,45,30,10,65,40] } ] }; new Chart(document.getElementById("line").getContext("2d")).Line(lineChartData); </script> </div> <div class="graph-right"> <h3>TODAY'S STATS</h3> <p>Duis aute irure dolor in reprehenderit.</p> <ul> <li>Earning: $400 USD</li> <li>Items Sold: 20 Items</li> <li>Last Hour Sales: $34 USD</li> </ul> </div> <div class="clearfix"> </div> </div> <div class="col-md-4 switch-right"> <div class="graph-left"> <canvas id="bar"></canvas> <script> var barChartData = { labels : ["Mon","Tue","Wed","Thu","Fri","Sat","Mon","Tue","Wed","Thu"], datasets : [ { fillColor : "#fbc02d", strokeColor : "#fbc02d", highlightFill: "rgba(220,220,220,0.75)", highlightStroke: "rgba(220,220,220,1)", data : [25,40,50,65,55,30,20,10,6,4] }, { fillColor : "#3E495A", strokeColor : "#3E495A", data : [30,45,55,70,40,25,15,8,5,2] } ] }; new Chart(document.getElementById("bar").getContext("2d")).Bar(barChartData); </script> </div> <div class="graph-right"> <h3>TODAY'S STATS</h3> <p>Duis aute irure dolor in reprehenderit.</p> <ul> <li>Earning: $400 USD</li> <li>Items Sold: 20 Items</li> <li>Last Hour Sales: $34 USD</li> </ul> </div> <div class="clearfix"> </div> </div> <div class="clearfix"> </div> </div> </div> <!-- //informers --> <!-- projects --> <div class="dev-page-footer-container-content" id="footer_content_3"> <div class="social"> <div class="col-md-3 top-comment-grid"> <div class="comments"> <div class="comments-icon"> <i class="fa fa-comments"></i> </div> <div class="comments-info"> <h3>85</h5> <a href="#">Comments</a> </div> <div class="clearfix"> </div> </div> </div> <div class="col-md-3 top-comment-grid"> <div class="comments likes"> <div class="comments-icon"> <i class="fa fa-facebook"></i> </div> <div class="comments-info likes-info"> <h3>2150</h5> <a href="#">Likes</a> </div> <div class="clearfix"> </div> </div> </div> <div class="col-md-3 top-comment-grid"> <div class="comments tweets"> <div class="comments-icon"> <i class="fa fa-twitter"></i> </div> <div class="comments-info tweets-info"> <h3>325</h5> <a href="#">Tweets</a> </div> <div class="clearfix"> </div> </div> </div> <div class="col-md-3 top-comment-grid"> <div class="comments views"> <div class="comments-icon"> <i class="fa fa-eye"></i> </div> <div class="comments-info views-info"> <h3>471</h5> <a href="#">Views</a> </div> <div class="clearfix"> </div> </div> </div> <div class="clearfix"> </div> </div> </div> <!-- //projects --> </div> <!-- //page footer container --> </div> <!-- //container --> </div> <!-- /page footer --> </div> <!--//footer--> </div> <!-- Classie --> <script src="js/classie.js"></script> <script> var menuLeft = document.getElementById( 'cbp-spmenu-s1' ), showLeftPush = document.getElementById( 'showLeftPush' ), body = document.body; showLeftPush.onclick = function() { classie.toggle( this, 'active' ); classie.toggle( body, 'cbp-spmenu-push-toright' ); classie.toggle( menuLeft, 'cbp-spmenu-open' ); disableOther( 'showLeftPush' ); }; function disableOther( button ) { if( button !== 'showLeftPush' ) { classie.toggle( showLeftPush, 'disabled' ); } } </script> <!-- Bootstrap Core JavaScript --> <script type="text/javascript" src="js/bootstrap.min.js"></script> <script type="text/javascript" src="js/dev-loaders.js"></script> <script type="text/javascript" src="js/dev-layout-default.js"></script> <script type="text/javascript" src="js/jquery.marquee.js"></script> <link href="css/bootstrap.min.css" rel="stylesheet"> <!-- candlestick --> <script type="text/javascript" src="js/jquery.jqcandlestick.min.js"></script> <link rel="stylesheet" type="text/css" href="css/jqcandlestick.css" /> <!-- //candlestick --> <!--max-plugin--> <script type="text/javascript" src="js/plugins.js"></script> <!--//max-plugin--> <!--scrolling js--> <script src="js/jquery.nicescroll.js"></script> <script src="js/scripts.js"></script> <!--//scrolling js--> <!-- real-time-updates --> <script language="javascript" type="text/javascript" src="js/jquery.flot.js"></script> <script type="text/javascript"> $(function() { // We use an inline data source in the example, usually data would // be fetched from a server var data = [], totalPoints = 300; function getRandomData() { if (data.length > 0) data = data.slice(1); // Do a random walk while (data.length < totalPoints) { var prev = data.length > 0 ? data[data.length - 1] : 50, y = prev + Math.random() * 10 - 5; if (y < 0) { y = 0; } else if (y > 100) { y = 100; } data.push(y); } // Zip the generated y values with the x values var res = []; for (var i = 0; i < data.length; ++i) { res.push([i, data[i]]) } return res; } // Set up the control widget var updateInterval = 30; $("#updateInterval").val(updateInterval).change(function () { var v = $(this).val(); if (v && !isNaN(+v)) { updateInterval = +v; if (updateInterval < 1) { updateInterval = 1; } else if (updateInterval > 2000) { updateInterval = 2000; } $(this).val("" + updateInterval); } }); var plot = $.plot("#placeholder", [ getRandomData() ], { series: { shadowSize: 0 // Drawing is faster without shadows }, yaxis: { min: 0, max: 100 }, xaxis: { show: false } }); function update() { plot.setData([getRandomData()]); // Since the axes don't change, we don't need to call plot.setupGrid() plot.draw(); setTimeout(update, updateInterval); } update(); // Add the Flot version string to the footer $("#footer").prepend("Flot " + $.plot.version + " – "); }); </script> <!-- //real-time-updates --> <!-- error-graph --> <script language="javascript" type="text/javascript" src="js/jquery.flot.errorbars.js"></script> <script language="javascript" type="text/javascript" src="js/jquery.flot.navigate.js"></script> <script type="text/javascript"> $(function() { function drawArrow(ctx, x, y, radius){ ctx.beginPath(); ctx.moveTo(x + radius, y + radius); ctx.lineTo(x, y); ctx.lineTo(x - radius, y + radius); ctx.stroke(); } function drawSemiCircle(ctx, x, y, radius){ ctx.beginPath(); ctx.arc(x, y, radius, 0, Math.PI, false); ctx.moveTo(x - radius, y); ctx.lineTo(x + radius, y); ctx.stroke(); } var data1 = [ [1,1,.5,.1,.3], [2,2,.3,.5,.2], [3,3,.9,.5,.2], [1.5,-.05,.5,.1,.3], [3.15,1.,.5,.1,.3], [2.5,-1.,.5,.1,.3] ]; var data1_points = { show: true, radius: 5, fillColor: "blue", errorbars: "xy", xerr: {show: true, asymmetric: true, upperCap: "-", lowerCap: "-"}, yerr: {show: true, color: "red", upperCap: "-"} }; var data2 = [ [.7,3,.2,.4], [1.5,2.2,.3,.4], [2.3,1,.5,.2] ]; var data2_points = { show: true, radius: 5, errorbars: "y", yerr: {show:true, asymmetric:true, upperCap: drawArrow, lowerCap: drawSemiCircle} }; var data3 = [ [1,2,.4], [2,0.5,.3], [2.7,2,.5] ]; var data3_points = { //do not show points radius: 0, errorbars: "y", yerr: {show:true, upperCap: "-", lowerCap: "-", radius: 5} }; var data4 = [ [1.3, 1], [1.75, 2.5], [2.5, 0.5] ]; var data4_errors = [0.1, 0.4, 0.2]; for (var i = 0; i < data4.length; i++) { data4_errors[i] = data4[i].concat(data4_errors[i]) } var data = [ {color: "blue", points: data1_points, data: data1, label: "data1"}, {color: "red", points: data2_points, data: data2, label: "data2"}, {color: "green", lines: {show: true}, points: data3_points, data: data3, label: "data3"}, // bars with errors {color: "orange", bars: {show: true, align: "center", barWidth: 0.25}, data: data4, label: "data4"}, {color: "orange", points: data3_points, data: data4_errors} ]; $.plot($("#placeholder1"), data , { legend: { position: "sw", show: true }, series: { lines: { show: false } }, xaxis: { min: 0.6, max: 3.1 }, yaxis: { min: 0, max: 3.5 }, zoom: { interactive: true }, pan: { interactive: true } }); // Add the Flot version string to the footer $("#footer").prepend("Flot " + $.plot.version + " – "); }); </script> <!-- //error-graph --> <!-- Skills-graph --> <script src='http://cdnjs.cloudflare.com/ajax/libs/snap.svg/0.3.0/snap.svg-min.js'></script> <script> var programmingSkills = [ { value: 20, label: 'jQuery', color: '#3399FF' }, { value: 23, label: 'JavaScript', color: '#FFC575' }, { value: 17, label: 'Ruby', color: '#99CC00' }, { value: 22, label: 'Python', color: '#FF3300' }, { value: 18, label: 'CSS3', color: '#944DDB' }, ]; </script> <script src="js/svg-donut-chart-framework.js"></script> <!-- //Skills-graph --> <!-- status --> <script src="js/jquery.fn.gantt.js"></script> <script> $(function() { "use strict"; $(".gantt").gantt({ source: [{ name: "Sprint 0", desc: "Analysis", values: [{ from: "/Date(1320192000000)/", to: "/Date(1322401600000)/", label: "Requirement Gathering", customClass: "ganttRed" }] },{ name: " ", desc: "Scoping", values: [{ from: "/Date(1322611200000)/", to: "/Date(1323302400000)/", label: "Scoping", customClass: "ganttRed" }] },{ name: "Sprint 1", desc: "Development", values: [{ from: "/Date(1323802400000)/", to: "/Date(1325685200000)/", label: "Development", customClass: "ganttGreen" }] },{ name: " ", desc: "Showcasing", values: [{ from: "/Date(1325685200000)/", to: "/Date(1325695200000)/", label: "Showcasing", customClass: "ganttBlue" }] },{ name: "Sprint 2", desc: "Development", values: [{ from: "/Date(1326785200000)/", to: "/Date(1325785200000)/", label: "Development", customClass: "ganttGreen" }] },{ name: " ", desc: "Showcasing", values: [{ from: "/Date(1328785200000)/", to: "/Date(1328905200000)/", label: "Showcasing", customClass: "ganttBlue" }] },{ name: "Release Stage", desc: "Training", values: [{ from: "/Date(1330011200000)/", to: "/Date(1336611200000)/", label: "Training", customClass: "ganttOrange" }] },{ name: " ", desc: "Deployment", values: [{ from: "/Date(1336611200000)/", to: "/Date(1338711200000)/", label: "Deployment", customClass: "ganttOrange" }] },{ name: " ", desc: "Warranty Period", values: [{ from: "/Date(1336611200000)/", to: "/Date(1349711200000)/", label: "Warranty Period", customClass: "ganttOrange" }] }], navigate: "scroll", scale: "weeks", maxScale: "months", minScale: "days", itemsPerPage: 10, onItemClick: function(data) { alert("Item clicked - show some details"); }, onAddClick: function(dt, rowId) { alert("Empty space clicked - add an item!"); }, onRender: function() { if (window.console && typeof console.log === "function") { console.log("chart rendered"); } } }); $(".gantt").popover({ selector: ".bar", title: "I'm a popover", content: "And I'm the content of said popover.", trigger: "hover" }); prettyPrint(); }); </script> <!-- //status --> </body> </html>44283
-
login_数据统计后台网站模板源代码<!DOCTYPE HTML> <html> <head> <title>Login</title> <meta name="viewport" content="width=device-width, initial-scale=1"> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <meta name="keywords" content="Baxster Responsive web template, Bootstrap Web Templates, Flat Web Templates, Android Compatible web template, SmartPhone Compatible web template, free WebDesigns for Nokia, Samsung, LG, SonyEricsson, Motorola web design" /> <script type="application/x-javascript"> addEventListener("load", function() { setTimeout(hideURLbar, 0); }, false); function hideURLbar(){ window.scrollTo(0,1); } </script> <!-- Bootstrap Core CSS --> <link href="css/bootstrap.css" rel='stylesheet' type='text/css' /> <!-- Custom CSS --> <link href="css/style.css" rel='stylesheet' type='text/css' /> <!-- font CSS --> <link rel="icon" href="favicon.ico" type="image/x-icon" > <!-- font-awesome icons --> <link href="css/font-awesome.css" rel="stylesheet"> <!-- //font-awesome icons --> <!--webfonts--> <link href='http://fonts.useso.com/css?family=Roboto+Condensed:400,300,300italic,400italic,700,700italic' rel='stylesheet' type='text/css'> <!--//webfonts--> <!-- js --> <script src="js/jquery-1.11.1.min.js"></script> <!-- //js --> </head> <body class="login-bg"> <div class="login-body"> <div class="login-heading"> <h1>Login</h1> </div> <div class="login-info"> <form> <input type="text" class="user" name="email" placeholder="Email" required=""> <input type="password" name="password" class="lock" placeholder="Password"> <div class="forgot-top-grids"> <div class="forgot-grid"> <ul> <li> <input type="checkbox" id="brand1" value=""> <label for="brand1"><span></span>Remember me</label> </li> </ul> </div> <div class="forgot"> <a href="#">Forgot password?</a> </div> <div class="clearfix"> </div> </div> <input type="submit" name="Sign In" value="Login"> <div class="signup-text"> <a href="signup.html">Don't have an account? Create one now</a> </div> <hr> <h2>or login with</h2> <div class="login-icons"> <ul> <li><a href="#" class="facebook"><i class="fa fa-facebook"></i></a></li> <li><a href="#" class="twitter"><i class="fa fa-twitter"></i></a></li> <li><a href="#" class="google"><i class="fa fa-google-plus"></i></a></li> <li><a href="#" class="dribbble"><i class="fa fa-dribbble"></i></a></li> </ul> </div> </form> </div> </div> <div class="go-back login-go-back"> <a href="index.html">Go To Home</a> </div> <div class="copyright login-copyright"> <p>Copyright © 2016.Company name All rights reserved.<a target="_blank" href="#">网页模板</a></p> </div> </body> </html>3250
-
progressbar_数据统计后台网站模板源代码<!DOCTYPE HTML> <html> <head> <title>Progressbar</title> <meta name="viewport" content="width=device-width, initial-scale=1"> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <meta name="keywords" content="Baxster Responsive web template, Bootstrap Web Templates, Flat Web Templates, Android Compatible web template, SmartPhone Compatible web template, free WebDesigns for Nokia, Samsung, LG, SonyEricsson, Motorola web design" /> <script type="application/x-javascript"> addEventListener("load", function() { setTimeout(hideURLbar, 0); }, false); function hideURLbar(){ window.scrollTo(0,1); } </script> <!-- Bootstrap Core CSS --> <link href="css/bootstrap.css" rel='stylesheet' type='text/css' /> <!-- Custom CSS --> <link href="css/style.css" rel='stylesheet' type='text/css' /> <!-- font CSS --> <link rel="icon" href="favicon.ico" type="image/x-icon" > <!-- font-awesome icons --> <link href="css/font-awesome.css" rel="stylesheet"> <!-- //font-awesome icons --> <!-- chart --> <script src="js/Chart.js"></script> <!-- //chart --> <!-- js--> <script src="js/jquery-1.11.1.min.js"></script> <script src="js/modernizr.custom.js"></script> <!--webfonts--> <link href='http://fonts.useso.com/css?family=Roboto+Condensed:400,300,300italic,400italic,700,700italic' rel='stylesheet' type='text/css'> <!--//webfonts--> <!--animate--> <link href="css/animate.css" rel="stylesheet" type="text/css" media="all"> <script src="js/wow.min.js"></script> <script> new WOW().init(); </script> <!--//end-animate--> <!-- Metis Menu --> <!--//Metis Menu --> <!-- Metis Menu --> <script src="js/metisMenu.min.js"></script> <script src="js/custom.js"></script> <link href="css/custom.css" rel="stylesheet"> <!--//Metis Menu --> </head> <body class="cbp-spmenu-push"> <div class="main-content"> <!--left-fixed -navigation--> <div class="sidebar" role="navigation"> <div class="navbar-collapse"> <nav class="cbp-spmenu cbp-spmenu-vertical cbp-spmenu-right dev-page-sidebar mCustomScrollbar _mCS_1 mCS-autoHide mCS_no_scrollbar" id="cbp-spmenu-s1"> <div class="scrollbar scrollbar1"> <ul class="nav" id="side-menu"> <li> <a href="index.html"><i class="fa fa-home nav_icon"></i>Dashboard</a> </li> <li> <a href="#"><i class="fa fa-cogs nav_icon"></i>Components<span class="fa arrow"></span></a> <ul class="nav nav-second-level collapse"> <li> <a href="progressbar.html">Progressbar</a> </li> <li> <a href="grid.html">Grid</a> </li> </ul> <!-- /nav-second-level --> </li> <li> <a href="#"><i class="fa fa-book nav_icon"></i>Elements <span class="fa arrow"></span></a> <ul class="nav nav-second-level collapse"> <li> <a href="buttons.html">Buttons</a> </li> <li> <a href="typography.html">Typography</a> </li> </ul> <!-- /nav-second-level --> </li> <li> <a href="widgets.html"><i class="fa fa-th-large nav_icon"></i>Widgets</a> </li> <li> <a href="#"><i class="fa fa-check-square-o nav_icon"></i>Forms<span class="fa arrow"></span></a> <ul class="nav nav-second-level collapse"> <li> <a href="inputs.html">Inputs</a> </li> <li> <a href="validation.html">Form Validation</a> </li> </ul> <!-- //nav-second-level --> </li> <li> <a href="#"><i class="fa fa-envelope nav_icon"></i>Mailbox<span class="fa arrow"></span></a> <ul class="nav nav-second-level collapse"> <li> <a href="inbox.html">Inbox</a> </li> <li> <a href="compose.html">Compose email</a> </li> </ul> <!-- //nav-second-level --> </li> <li> <a href="maps.html"><i class="fa fa-location-arrow nav_icon"></i>Maps</a> </li> <li> <a href="#"><i class="fa fa-file-text-o nav_icon"></i>Pages<span class="fa arrow"></span></a> <ul class="nav nav-second-level collapse"> <li> <a href="login.html">Login</a> </li> <li> <a href="signup.html">SignUp</a> </li> <li> <a href="blank-page.html">Blank Page</a> </li> </ul> <!-- //nav-second-level --> </li> <li> <a href="charts.html" class="chart-nav"><i class="fa fa-bar-chart nav_icon"></i>Charts</a> </li> <li> <a href="#" class="chart-nav"><i class="fa fa-list-ul nav_icon"></i>Extras<span class="fa arrow"></span></a> <ul class="nav nav-second-level collapse"> <li> <a href="tables.html">Tables</a> </li> <li> <a href="404.html">404 Page</a> </li> </ul> <!-- //nav-second-level --> </li> </ul> </div> <!-- //sidebar-collapse --> </nav> </div> </div> <!--left-fixed -navigation--> <!-- header-starts --> <div class="sticky-header header-section "> <div class="header-left"> <!--logo --> <div class="logo"> <a href="index.html"> <ul> <li><img src="images/logo1.png" alt="" /></li> <li><h1>Baxster</h1></li> <div class="clearfix"> </div> </ul> </a> </div> <!--//logo--> <div class="header-right header-right-grid"> <div class="profile_details_left"><!--notifications of menu start --> <ul class="nofitications-dropdown"> <li class="dropdown head-dpdn"> <a href="#" class="dropdown-toggle" data-toggle="dropdown"><i class="fa fa-envelope"></i><span class="badge">3</span></a> <ul class="dropdown-menu anti-dropdown-menu"> <li> <div class="notification_header"> <h3>You have 3 new messages</h3> </div> </li> <li><a href="#"> <div class="user_img"><img src="images/1.png" alt=""></div> <div class="notification_desc"> <p>Lorem ipsum dolor amet</p> <p><span>1 hour ago</span></p> </div> <div class="clearfix"></div> </a></li> <li class="odd"><a href="#"> <div class="user_img"><img src="images/2.png" alt=""></div> <div class="notification_desc"> <p>Lorem ipsum dolor amet </p> <p><span>1 hour ago</span></p> </div> <div class="clearfix"></div> </a></li> <li><a href="#"> <div class="user_img"><img src="images/3.png" alt=""></div> <div class="notification_desc"> <p>Lorem ipsum dolor amet </p> <p><span>1 hour ago</span></p> </div> <div class="clearfix"></div> </a></li> <li> <div class="notification_bottom"> <a href="#">See all messages</a> </div> </li> </ul> </li> <li class="dropdown head-dpdn"> <a href="#" class="dropdown-toggle" data-toggle="dropdown" aria-expanded="false"><i class="fa fa-bell"></i><span class="badge blue">3</span></a> <ul class="dropdown-menu anti-dropdown-menu"> <li> <div class="notification_header"> <h3>You have 3 new notification</h3> </div> </li> <li><a href="#"> <div class="user_img"><img src="images/2.png" alt=""></div> <div class="notification_desc"> <p>Lorem ipsum dolor amet</p> <p><span>1 hour ago</span></p> </div> <div class="clearfix"></div> </a></li> <li class="odd"><a href="#"> <div class="user_img"><img src="images/1.png" alt=""></div> <div class="notification_desc"> <p>Lorem ipsum dolor amet </p> <p><span>1 hour ago</span></p> </div> <div class="clearfix"></div> </a></li> <li><a href="#"> <div class="user_img"><img src="images/3.png" alt=""></div> <div class="notification_desc"> <p>Lorem ipsum dolor amet </p> <p><span>1 hour ago</span></p> </div> <div class="clearfix"></div> </a></li> <li> <div class="notification_bottom"> <a href="#">See all notifications</a> </div> </li> </ul> </li> <li class="dropdown head-dpdn"> <a href="#" class="dropdown-toggle" data-toggle="dropdown" aria-expanded="false"><i class="fa fa-tasks"></i><span class="badge blue1">15</span></a> <ul class="dropdown-menu anti-dropdown-menu"> <li> <div class="notification_header"> <h3>You have 8 pending task</h3> </div> </li> <li><a href="#"> <div class="task-info"> <span class="task-desc">Database update</span><span class="percentage">40%</span> <div class="clearfix"></div> </div> <div class="progress progress-striped active"> <div class="bar yellow" style="width:40%;"></div> </div> </a></li> <li><a href="#"> <div class="task-info"> <span class="task-desc">Dashboard done</span><span class="percentage">90%</span> <div class="clearfix"></div> </div> <div class="progress progress-striped active"> <div class="bar green" style="width:90%;"></div> </div> </a></li> <li><a href="#"> <div class="task-info"> <span class="task-desc">Mobile App</span><span class="percentage">33%</span> <div class="clearfix"></div> </div> <div class="progress progress-striped active"> <div class="bar red" style="width: 33%;"></div> </div> </a></li> <li><a href="#"> <div class="task-info"> <span class="task-desc">Issues fixed</span><span class="percentage">80%</span> <div class="clearfix"></div> </div> <div class="progress progress-striped active"> <div class="bar blue" style="width: 80%;"></div> </div> </a></li> <li> <div class="notification_bottom"> <a href="#">See all pending tasks</a> </div> </li> </ul> </li> </ul> <div class="clearfix"> </div> </div> </div> <div class="clearfix"> </div> </div> <!--search-box--> <div class="search-box"> <form class="input"> <input class="sb-search-input input__field--madoka" placeholder="Search..." type="search" id="input-31" /> </form> </div> <!--//end-search-box--> <div class="header-right"> <!--notification menu end --> <div class="profile_details"> <ul> <li class="dropdown profile_details_drop"> <a href="#" class="dropdown-toggle" data-toggle="dropdown" aria-expanded="false"> <div class="profile_img"> <span class="prfil-img"><img src="images/a.png" alt=""> </span> <div class="clearfix"></div> </div> </a> <ul class="dropdown-menu drp-mnu"> <li> <a href="#"><i class="fa fa-cog"></i> Settings</a> </li> <li> <a href="#"><i class="fa fa-user"></i> Profile</a> </li> <li> <a href="#"><i class="fa fa-sign-out"></i> Logout</a> </li> </ul> </li> </ul> </div> <!--toggle button start--> <button id="showLeftPush"><i class="fa fa-bars"></i></button> <!--toggle button end--> <div class="clearfix"> </div> </div> <div class="clearfix"> </div> </div> <!-- //header-ends --> <!-- main content start--> <div id="page-wrapper"> <div class="main-page"> <!--progressbar--> <div class="progressbar"> <div class="progressbar-heading"> <h2>Progress Bars</h2> </div> <div class="panel panel-widget"> <div class="grid_3 grid_5"> <h3>Colors</h3> <div class="tab-content"> <div class="tab-pane active" id="domprogress"> <div class="progress p-progress"> <div class="progress-bar progress-bar-primary" style="width: 20%">20%</div> </div> <div class="progress p-progress"> <div class="progress-bar progress-bar-info" style="width: 60%">60%</div> </div> <div class="progress p-progress"> <div class="progress-bar progress-bar-success" style="width: 30%">30%</div> </div> <div class="progress p-progress"> <div class="progress-bar progress-bar-warning" style="width: 70%">70%</div> </div> <div class="progress p-progress"> <div class="progress-bar progress-bar-danger" style="width: 50%">50%</div> </div> <div class="progress p-progress"> <div class="progress-bar progress-bar-inverse" style="width: 40%">40%</div> </div> </div> </div> </div> <div class="grid_3 grid_5"> <h3>Size</h3> <div class="tab-content"> <div class="tab-pane active" id="domprogress"> <div class="progress p-progress p-progress-size"> <div class="progress-bar progress-bar-primary p-progress-info" style="width: 20%">20%</div> </div> <div class="progress p-progress progress-sm"> <div class="progress-bar progress-bar-info p-progress-info" style="width: 60%">60%</div> </div> <div class="progress p-progress progress-sm"> <div class="progress-bar progress-bar-success p-progress-info" style="width: 30%">30%</div> </div> <div class="progress p-progress progress-md"> <div class="progress-bar progress-bar-warning p-progress-info" style="width: 70%"></div> </div> <div class="progress p-progress progress-md"> <div class="progress-bar progress-bar-danger p-progress-info" style="width: 50%"></div> </div> <div class="progress p-progress progress-xl"> <div class="progress-bar progress-bar-inverse p-progress-info" style="width: 40%"></div> </div> </div> </div> </div> <div class="grid_3 grid_5"> <h3>Striped</h3> <div class="progress progress-striped"> <div class="progress-bar progress-bar-primary" style="width:40%">40%</div> </div> <div class="progress progress-striped active"> <div class="progress-bar progress-bar-info" style="width:30%">30%</div> </div> </div> <div class="grid_3 grid_5"> <h3>Stack</h3> <div class="progress"> <div class="progress-bar progress-bar-success" style="width: 35%"><span class="sr-only">35% Complete (success)</span></div> <div class="progress-bar progress-bar-warning" style="width: 20%"><span class="sr-only">20% Complete (warning)</span></div> <div class="progress-bar progress-bar-danger" style="width: 10%"><span class="sr-only">10% Complete (danger)</span></div> </div> </div> <div class="grid_3 grid_5"> <h3>No radius</h3> <div class="progress progress-striped no-radius"> <div class="progress-bar progress-bar-success" style="width:50%">50%</div> </div> <div class="progress progress-striped progress-no no-radius"> <div class="progress-bar progress-bar-warning" style="width:20%"></div> </div> <div class="progress progress-striped progress-nor no-radius"> <div class="progress-bar bg-dark" style="width:15%"></div> </div> </div> </div> </div> <!--//progressbar--> </div> </div> <!--footer--> <div class="dev-page"> <!-- page footer --> <!-- dev-page-footer-closed dev-page-footer-fixed --> <div class="dev-page-footer dev-page-footer-fixed"> <!-- container --> <div class="container"> <div class="copyright"> <p>Copyright © 2016.Company name All rights reserved.<a target="_blank" href="#">网页模板</a></p> </div> <!-- page footer buttons --> <ul class="dev-page-footer-buttons"> <li><a href="#footer_content_1" class="dev-page-footer-container-open"><span class="glyphicon glyphicon glyphicon-sort" aria-hidden="true"></span></a></li> <li><a href="#footer_content_2" class="dev-page-footer-container-open"><span class="glyphicon glyphicon glyphicon-signal" aria-hidden="true"></span></a></li> <li><a href="#footer_content_3" class="dev-page-footer-container-open"><span class="glyphicon glyphicon glyphicon glyphicon-file" aria-hidden="true"></span></a></li> </ul> <!-- //page footer buttons --> <!-- page footer container --> <div class="dev-page-footer-container"> <!-- loader and close button --> <div class="dev-page-footer-container-layer"> <a href="#" class="dev-page-footer-container-layer-button"></a> </div> <!-- //loader and close button --> <!-- informers --> <div class="dev-page-footer-container-content" id="footer_content_1"> <div class="block-hdnews"> <div class="list-wrpaaer" style="height:200px;"> <ul class="list-aggregate" id="marquee-horizontal"> <li class="fat-l" style="width:300px"> <a href="#">Lorem ipsum dolor</a> <p> Lorem ipsum dolor sit amet, consectetur adipiscing elit. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Lorem ipsum dolor sit amet, consectetur adipiscing elit. </p> </li> <li class="fat-l" style="width:300px"> <a href="#">Consectetur</a> <p> Lorem ipsum dolor sit amet, consectetur adipiscing elit. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Lorem ipsum dolor sit amet, consectetur adipiscing elit. </p> </li> <li class="fat-l" style="width:300px"> <a href="#">Adipiscing elit</a> <p> Lorem ipsum dolor sit amet, consectetur adipiscing elit. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Lorem ipsum dolor sit amet, consectetur adipiscing elit. </p> </li> <li class="fat-l" style="width:300px"> <a href="#">Lorem ipsum dolor</a> <p> Lorem ipsum dolor sit amet, consectetur adipiscing elit. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Lorem ipsum dolor sit amet, consectetur adipiscing elit. </p> </li> <li class="fat-l" style="width:300px"> <a href="#">Consectetur</a> <p> Lorem ipsum dolor sit amet, consectetur adipiscing elit. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Lorem ipsum dolor sit amet, consectetur adipiscing elit. </p> </li> <li class="fat-l" style="width:300px"> <a href="#">Adipiscing elit</a> <p> Lorem ipsum dolor sit amet, consectetur adipiscing elit. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Lorem ipsum dolor sit amet, consectetur adipiscing elit. </p> </li> </ul> </div><!-- list-wrpaaer --> </div> <!-- block-hdnews --> <script type="text/javascript"> $(function(){ $('#marquee-vertical').marquee(); $('#marquee-horizontal').marquee({direction:'horizontal', delay:0, timing:50}); }); </script> </div> <!-- //informers --> <!-- informers --> <div class="dev-page-footer-container-content" id="footer_content_2"> <div class="graphs"> <div class="col-md-4 graph-points"> <div class="graph-left"> <script type="text/javascript"> // Generate data var data = []; var time = new Date('Dec 1, 2013 12:00').valueOf(); var h = Math.floor(Math.random() * 100); var l = h - Math.floor(Math.random() * 20); var o = h - Math.floor(Math.random() * (h - l)); var c = h - Math.floor(Math.random() * (h - l)); var v = Math.floor(Math.random() * 1000); for (var i = 0; i < 30; i++) { data.push([time, o, h, l, c, v]); h += Math.floor(Math.random() * 10 - 5); l = h - Math.floor(Math.random() * 20); o = h - Math.floor(Math.random() * (h - l)); c = h - Math.floor(Math.random() * (h - l)); v += Math.floor(Math.random() * 100 - 50); time += 30 * 60000; // Add 30 minutes } </script> <div id="example-1"></div> <script type="text/javascript"> $(function() { $('#example-1').jqCandlestick({ data: data, theme: 'light', series: [{ }], }); }); </script> </div> <div class="graph-right"> <h3>TODAY'S STATS</h3> <p>Duis aute irure dolor in reprehenderit.</p> <ul> <li>Earning: $400 USD</li> <li>Items Sold: 20 Items</li> <li>Last Hour Sales: $34 USD</li> </ul> </div> <div class="clearfix"> </div> </div> <div class="col-md-4 bar-grid"> <div class="graph-left"> <canvas id="line"></canvas> <script> var lineChartData = { labels : ["Mon","Tue","Wed","Thu","Fri","Sat","Mon"], datasets : [ { fillColor : "rgba(202, 202, 202, 0)", strokeColor : "#3E495A", pointColor : "#fbfbfb", pointStrokeColor : "#fbfbfb", data : [20,35,45,30,10,65,40] } ] }; new Chart(document.getElementById("line").getContext("2d")).Line(lineChartData); </script> </div> <div class="graph-right"> <h3>TODAY'S STATS</h3> <p>Duis aute irure dolor in reprehenderit.</p> <ul> <li>Earning: $400 USD</li> <li>Items Sold: 20 Items</li> <li>Last Hour Sales: $34 USD</li> </ul> </div> <div class="clearfix"> </div> </div> <div class="col-md-4 switch-right"> <div class="graph-left"> <canvas id="bar"></canvas> <script> var barChartData = { labels : ["Mon","Tue","Wed","Thu","Fri","Sat","Mon","Tue","Wed","Thu"], datasets : [ { fillColor : "#fbc02d", strokeColor : "#fbc02d", highlightFill: "rgba(220,220,220,0.75)", highlightStroke: "rgba(220,220,220,1)", data : [25,40,50,65,55,30,20,10,6,4] }, { fillColor : "#3E495A", strokeColor : "#3E495A", data : [30,45,55,70,40,25,15,8,5,2] } ] }; new Chart(document.getElementById("bar").getContext("2d")).Bar(barChartData); </script> </div> <div class="graph-right"> <h3>TODAY'S STATS</h3> <p>Duis aute irure dolor in reprehenderit.</p> <ul> <li>Earning: $400 USD</li> <li>Items Sold: 20 Items</li> <li>Last Hour Sales: $34 USD</li> </ul> </div> <div class="clearfix"> </div> </div> <div class="clearfix"> </div> </div> </div> <!-- //informers --> <!-- projects --> <div class="dev-page-footer-container-content" id="footer_content_3"> <div class="social"> <div class="col-md-3 top-comment-grid"> <div class="comments"> <div class="comments-icon"> <i class="fa fa-comments"></i> </div> <div class="comments-info"> <h3>85</h5> <a href="#">Comments</a> </div> <div class="clearfix"> </div> </div> </div> <div class="col-md-3 top-comment-grid"> <div class="comments likes"> <div class="comments-icon"> <i class="fa fa-facebook"></i> </div> <div class="comments-info likes-info"> <h3>2150</h5> <a href="#">Likes</a> </div> <div class="clearfix"> </div> </div> </div> <div class="col-md-3 top-comment-grid"> <div class="comments tweets"> <div class="comments-icon"> <i class="fa fa-twitter"></i> </div> <div class="comments-info tweets-info"> <h3>325</h5> <a href="#">Tweets</a> </div> <div class="clearfix"> </div> </div> </div> <div class="col-md-3 top-comment-grid"> <div class="comments views"> <div class="comments-icon"> <i class="fa fa-eye"></i> </div> <div class="comments-info views-info"> <h3>471</h5> <a href="#">Views</a> </div> <div class="clearfix"> </div> </div> </div> <div class="clearfix"> </div> </div> </div> <!-- //projects --> </div> <!-- //page footer container --> </div> <!-- //container --> </div> <!-- /page footer --> </div> <!--//footer--> </div> <!-- Classie --> <script src="js/classie.js"></script> <script> var menuLeft = document.getElementById( 'cbp-spmenu-s1' ), showLeftPush = document.getElementById( 'showLeftPush' ), body = document.body; showLeftPush.onclick = function() { classie.toggle( this, 'active' ); classie.toggle( body, 'cbp-spmenu-push-toright' ); classie.toggle( menuLeft, 'cbp-spmenu-open' ); disableOther( 'showLeftPush' ); }; function disableOther( button ) { if( button !== 'showLeftPush' ) { classie.toggle( showLeftPush, 'disabled' ); } } </script> <!-- Bootstrap Core JavaScript --> <script type="text/javascript" src="js/bootstrap.min.js"></script> <script type="text/javascript" src="js/dev-loaders.js"></script> <script type="text/javascript" src="js/dev-layout-default.js"></script> <script type="text/javascript" src="js/jquery.marquee.js"></script> <link href="css/bootstrap.min.css" rel="stylesheet"> <script type="text/javascript" src="js/jquery.jqcandlestick.min.js"></script> <link rel="stylesheet" type="text/css" href="css/jqcandlestick.css" /> <!--max-plugin--> <script type="text/javascript" src="js/plugins.js"></script> <!--//max-plugin--> <!--scrolling js--> <script src="js/jquery.nicescroll.js"></script> <script src="js/scripts.js"></script> <!--//scrolling js--> </body> </html>31403
特别说明:
1.如有链接无法下载、失效或广告,请联系QQ:2305911934 处理!
2.本站所有资源来源于用户上传和网络,如有侵权请邮件联系站长!
3.本站提供的源码、模板、插件等等其他资源,都不包含技术服务请大家谅解!
4.本站所有资源仅供学习与参考,请勿用于商业用途,否则产生的一切后果将由您自己承担!
5.该模板为静态页面,没有后台,大部分未经测试可用,并不保证百分百无误及完整
如有侵犯您的版权,请及时联系2305911934#qq.com(#换@),我们将尽快处理。
相关文章
HTML模板