3 Star 0 Fork 0

loubinbin/apnet

加入 Gitee
与超过 1200万 开发者一起发现、参与优秀开源项目,私有仓库也完全免费 :)
免费加入
文件
该仓库未声明开源许可证文件(LICENSE),使用请关注具体项目描述及其代码上游依赖。
克隆/下载
set.html 18.50 KB
一键复制 编辑 原始数据 按行查看 历史
huanbin 提交于 2018-01-15 09:23 . 首次提价
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>WeFiew</title>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta name="description" content="">
<meta name="author" content="">
<!-- Le styles -->
<link rel="stylesheet" href="assets/css/style.css">
<link rel="stylesheet" href="assets/css/loader-style.css">
<link rel="stylesheet" href="assets/css/bootstrap.css">
<link rel="stylesheet" type="text/css" href="assets/js/progress-bar/number-pb.css">
<style type="text/css">
canvas#canvas4 {
position: relative;
top: 20px;
}
</style>
<!-- HTML5 shim, for IE6-8 support of HTML5 elements -->
<!--[if lt IE 9]>
<script src="http://html5shim.googlecode.com/svn/trunk/html5.js"></script>
<![endif]-->
<!-- Fav and touch icons -->
<link rel="shortcut icon" href="assets/ico/minus.png">
</head>
<body>
<!-- Preloader -->
<div id="preloader">
<div id="status">&nbsp;</div>
</div>
<!-- TOP NAVBAR -->
<nav role="navigation" class="navbar navbar-static-top">
<div class="container-fluid">
<ul style="margin-right:0;" class="nav navbar-nav navbar-right">
<li>
<a data-toggle="dropdown" class="dropdown-toggle" href="#">
<img alt="" class="admin-pic img-circle" src="http://api.randomuser.me/portraits/thumb/men/10.jpg">Hi, Dave Mattew <b class="caret"></b>
</a>
<ul style="margin-top:14px;" role="menu" class="dropdown-setting dropdown-menu">
<li>
<a href="#">
<span class="entypo-user"></span>&#160;&#160;My Profile</a>
</li>
<li>
<a href="#">
<span class="entypo-vcard"></span>&#160;&#160;Account Setting</a>
</li>
<li>
<a href="#">
<span class="entypo-lifebuoy"></span>&#160;&#160;Help</a>
</li>
<li class="divider"></li>
<li>
<a href="http://themeforest.net/item/apricot-navigation-admin-dashboard-template/7664475?WT.ac=category_item&WT.z_author=themesmile">
<span class="entypo-basket"></span>&#160;&#160; Purchase</a>
</li>
</ul>
</li>
<li class="hidden-xs">
<a class="toggle-left" href="#">
<span style="font-size:20px;" class="entypo-list-add"></span>
</a>
</li>
</ul>
</div>
<!-- /.navbar-collapse -->
</div>
<!-- /.container-fluid -->
</nav>
<!-- /END OF TOP NAVBAR -->
<!-- SIDE MENU -->
<div id="skin-select">
<div id="logo">
<h1>后台管理系统</h1>
</div>
</div>
<!-- END OF SIDE MENU -->
<!-- PAPER WRAP -->
<div class="wrap-fluid">
<div class="container-fluid paper-wrap bevel tlbr">
<!-- CONTENT -->
<!-- DEVICE MANAGER -->
<div class="content-wrap">
<div class="row">
<div class="col-lg-3">
<div class="profit" id="profitClose">
<div class="headline ">
<h3>
<span>
<i class="maki-ferry"></i>&#160;&#160;Ferry Arrival</span>
</h3>
<div class="titleClose">
<a href="#profitClose" class="gone">
<span class="entypo-cancel"></span>
</a>
</div>
</div>
<div class="value">
<span class="pull-left"><i class="entypo-clock clock-position"></i>
</span>
<div id="getting-started">
<span>%M</span>
<span>%S</span>
</div>
</div>
<div class="progress-tinny">
<div style="width: 50%" class="bar"></div>
</div>
<div class="profit-line">
<i class="fa fa-caret-up fa-lg"></i>&#160;&#160; 50% &#160;From Last Hour</div>
</div>
</div>
<div class="col-lg-3">
<div class="revenue" id="revenueClose">
<div class="headline ">
<h3>
<span>
<i class="maki-aboveground-rail"></i>&#160;&#160;Train Speed</span>
</h3>
<div class="titleClose">
<a href="#revenueClose" class="gone">
<span class="entypo-cancel"></span>
</a>
</div>
</div>
<div class="value">
<span class="pull-left"><i class="entypo-gauge gauge-position"></i>
</span>
<canvas id="canvas4" width="70" height="70"></canvas>
<i class="pull-right">/Km</i>
</div>
<div class="progress-tinny">
<div style="width: 25%" class="bar"></div>
</div>
<div class="profit-line">
<i class="fa fa-caret-down fa-lg"></i>&#160;&#160;Rate : 20 km/Hour</div>
</div>
</div>
<div class="col-lg-3">
<div class="order" id="orderClose">
<div class="headline ">
<h3>
<span>
<i class="maki-airport"></i>&#160;&#160;AIR PORT TRAFFIC</span>
</h3>
<div class="titleClose">
<a href="#orderClose" class="gone">
<span class="entypo-cancel"></span>
</a>
</div>
</div>
<div class="value">
<span><i class="fa fa-plane fa-2x"></i>
</span><b id="speed"></b><b>Take Off</b>
</div>
<div class="progress-tinny">
<div style="width: 10%" class="bar"></div>
</div>
<div class="profit-line">
<i class="fa fa-caret-down fa-lg"></i>&#160;&#160;Rate : 20 Plane/Hour</div>
</div>
</div>
<div class="col-lg-3">
<div class=" member" id="memberClose">
<div class="headline ">
<h3>
<span>
<i class="fa fa-truck"></i>
&#160;&#160;CARGO
</span>
</h3>
<div class="titleClose">
<a href="#memberClose" class="gone">
<span class="entypo-cancel"></span>
</a>
</div>
</div>
<div class="value">
<span><i class="maki-warehouse"></i>
</span>45<b>Sent</b>
</div>
<div class="progress-tinny">
<div style="width: 50%" class="bar"></div>
</div>
<div class="profit-line">
<span class="entypo-down-circled"></span>&#160;50% From Last Month</div>
</div>
</div>
</div>
</div>
<!-- RIGHT SLIDER CONTENT -->
<div class="sb-slidebar sb-right">
<div class="right-wrapper">
<div class="row">
<h3>
<span><i class="entypo-gauge"></i>&nbsp;&nbsp;MAIN WIDGET</span>
</h3>
<div class="col-lg-12">
<div class="widget-knob">
<span class="chart" style="position:relative" data-percent="86">
<span class="percent"></span>
</span>
</div>
<div class="widget-def">
<b>Distance traveled</b>
<br>
<i>86% to the check point</i>
</div>
<div class="widget-knob">
<span class="speed-car" style="position:relative" data-percent="60">
<span class="percent2"></span>
</span>
</div>
<div class="widget-def">
<b>The average speed</b>
<br>
<i>30KM/h avarage speed</i>
</div>
<div class="widget-knob">
<span class="overall" style="position:relative" data-percent="25">
<span class="percent3"></span>
</span>
</div>
<div class="widget-def">
<b>Overall result</b>
<br>
<i>30KM/h avarage Result</i>
</div>
</div>
</div>
</div>
<div style="margin-top:0;" class="right-wrapper">
<div class="row">
<h3>
<span><i class="entypo-chat"></i>&nbsp;&nbsp;CHAT</span>
</h3>
<div class="col-lg-12">
<span class="label label-warning label-chat">Online</span>
<ul class="chat">
<li>
<a href="#">
<span>
<img alt="" class="img-chat img-circle" src="http://api.randomuser.me/portraits/thumb/men/20.jpg">
</span><b>Dave Junior</b>
<br><i>Last seen : 08:00 PM</i>
</a>
</li>
<li>
<a href="#">
<span>
<img alt="" class="img-chat img-circle" src="http://api.randomuser.me/portraits/thumb/men/21.jpg">
</span><b>Kenneth Lucas</b>
<br><i>Last seen : 07:21 PM</i>
</a>
</li>
<li>
<a href="#">
<span>
<img alt="" class="img-chat img-circle" src="http://api.randomuser.me/portraits/thumb/men/22.jpg">
</span><b>Heidi Perez</b>
<br><i>Last seen : 05:43 PM</i>
</a>
</li>
</ul>
<span class="label label-chat">Offline</span>
<ul class="chat">
<li>
<a href="#">
<span>
<img alt="" class="img-chat img-offline img-circle" src="http://api.randomuser.me/portraits/thumb/men/23.jpg">
</span><b>Dave Junior</b>
<br><i>Last seen : 08:00 PM</i>
</a>
</li>
<li>
<a href="#">
<span>
<img alt="" class="img-chat img-offline img-circle" src="http://api.randomuser.me/portraits/thumb/women/24.jpg">
</span><b>Kenneth Lucas</b>
<br><i>Last seen : 07:21 PM</i>
</a>
</li>
<li>
<a href="#">
<span>
<img alt="" class="img-chat img-offline img-circle" src="http://api.randomuser.me/portraits/thumb/men/25.jpg">
</span><b>Heidi Perez</b>
<br><i>Last seen : 05:43 PM</i>
</a>
</li>
<li>
<a href="#">
<span>
<img alt="" class="img-chat img-offline img-circle" src="http://api.randomuser.me/portraits/thumb/women/25.jpg">
</span><b>Kenneth Lucas</b>
<br><i>Last seen : 07:21 PM</i>
</a>
</li>
<li>
<a href="#">
<span>
<img alt="" class="img-chat img-offline img-circle" src="http://api.randomuser.me/portraits/thumb/men/26.jpg">
</span><b>Heidi Perez</b>
<br><i>Last seen : 05:43 PM</i>
</a>
</li>
</ul>
</div>
</div>
</div>
</div>
<!-- END OF RIGHT SLIDER CONTENT-->
<script type="text/javascript" src="assets/js/jquery.js"></script>
<script src="assets/js/progress-bar/src/jquery.velocity.min.js"></script>
<script src="assets/js/progress-bar/number-pb.js"></script>
<script src="assets/js/progress-bar/progress-app.js"></script>
<!-- MAIN EFFECT -->
<script type="text/javascript" src="assets/js/preloader.js"></script>
<script type="text/javascript" src="assets/js/bootstrap.js"></script>
<script type="text/javascript" src="assets/js/app.js"></script>
<script type="text/javascript" src="assets/js/load.js"></script>
<script type="text/javascript" src="assets/js/main.js"></script>
<!-- GAGE -->
<script type="text/javascript" src="assets/js/chart/jquery.flot.js"></script>
<script type="text/javascript" src="assets/js/chart/jquery.flot.resize.js"></script>
<script type="text/javascript" src="assets/js/chart/realTime.js"></script>
<script type="text/javascript" src="assets/js/speed/canvasgauge-coustom.js"></script>
<script type="text/javascript" src="assets/js/countdown/jquery.countdown.js"></script>
<script src="assets/js/jhere-custom.js"></script>
<script>
var gauge4 = new Gauge("canvas4", {
'mode': 'needle',
'range': {
'min': 0,
'max': 90
}
});
gauge4.draw(Math.floor(Math.random() * 90));
var run = setInterval(function() {
gauge4.draw(Math.floor(Math.random() * 90));
}, 3500);
</script>
<script type="text/javascript">
/* Javascript
*
* See http://jhere.net/docs.html for full documentation
*/
$(window).on('load', function() {
$('#mapContainer').jHERE({
center: [52.500556, 13.398889],
type: 'smart',
zoom: 10
}).jHERE('marker', [52.500556, 13.338889], {
icon: 'assets/img/marker.png',
anchor: {
x: 12,
y: 32
},
click: function() {
alert('Hallo from Berlin!');
}
})
.jHERE('route', [52.711, 13.011], [52.514, 13.453], {
color: '#FFA200',
marker: {
fill: '#86c440',
text: '#'
}
});
});
</script>
<script type="text/javascript">
var output, started, duration, desired;
// Constants
duration = 5000;
desired = '50';
// Initial setup
output = $('#speed');
started = new Date().getTime();
// Animate!
animationTimer = setInterval(function() {
// If the value is what we want, stop animating
// or if the duration has been exceeded, stop animating
if (output.text().trim() === desired || new Date().getTime() - started > duration) {
console.log('animating');
// Generate a random string to use for the next animation step
output.text('' + Math.floor(Math.random() * 60)
);
} else {
console.log('animating');
// Generate a random string to use for the next animation step
output.text('' + Math.floor(Math.random() * 120)
);
}
}, 5000);
</script>
<script type="text/javascript">
$('#getting-started').countdown('2015/01/01', function(event) {
$(this).html(event.strftime(
'<span>%M</span>' + '<span class="start-min">:</span>' + '<span class="start-min">%S</span>'));
});
</script>
<div style="text-align:center;">
<p>More Templates <a href="http://www.cssmoban.com/" target="_blank" title="模板之家">模板之家</a> - Collect from <a href="http://www.cssmoban.com/" title="网页模板" target="_blank">网页模板</a></p>
</div>
</body>
</html>
Loading...
马建仓 AI 助手
尝试更多
代码解读
代码找茬
代码优化
JavaScript
1
https://gitee.com/loubinbin/apnet.git
git@gitee.com:loubinbin/apnet.git
loubinbin
apnet
apnet
master

搜索帮助