index.html 16 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363364365366367368369370371372373374375376377378379380381382383384385386387388389390391392393394395396397398399400401402403404405406407408409410411412413414415416417418419420421422423424425426
  1. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
  2. <html xmlns="http://www.w3.org/1999/xhtml">
  3. <head>
  4. <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
  5. <meta name="description" content="Flat UI Kit Free is a Twitter Bootstrap Framework design and Theme, this responsive framework includes a PSD and HTML version."/>
  6. <meta name="viewport" content="width=1000, initial-scale=1.0, maximum-scale=1.0">
  7. <!-- Loading Bootstrap -->
  8. <link href="dist/css/vendor/bootstrap/css/bootstrap.min.css" rel="stylesheet">
  9. <!-- Loading Flat UI -->
  10. <link href="dist/css/flat-ui.css" rel="stylesheet">
  11. <link href="docs/assets/css/demo.css" rel="stylesheet">
  12. <link rel="shortcut icon" href="img/favicon.ico">
  13. <!-- HTML5 shim, for IE6-8 support of HTML5 elements. All other JS at the end of file. -->
  14. <!--[if lt IE 9]>
  15. <script src="dist/js/vendor/html5shiv.js"></script>
  16. <script src="dist/js/vendor/respond.min.js"></script>
  17. <title>Untitled Document</title>
  18. <link href='http://fonts.useso.com/css?family=Raleway:300' rel='stylesheet' type='text/css'>
  19. <!-- Latest compiled and minified CSS -->
  20. <link rel="stylesheet" href="css/bootstrap.min.css">
  21. <!-- Optional theme -->
  22. <link rel="stylesheet" href="css/bootstrap-theme.min.css">
  23. <link href="css/style2.css" media="screen" rel="stylesheet">
  24. <link rel="stylesheet" href="style.css" type="text/css" charset="utf-8" />
  25. <!-- main JS libs -->
  26. <script src="js/libs/modernizr.min.js"></script>
  27. <script src="js/libs/jquery-1.10.0.js"></script>
  28. <script src="js/libs/bootstrap.min.js"></script>
  29. <link href="css/font-awesome.min.css" media="screen" rel="stylesheet">
  30. <!-- scripts -->
  31. <script src="js/general.js"></script>
  32. <!-- oneByone slider -->
  33. <link href="css/animate.css" media="screen" rel="stylesheet">
  34. <script src="js/jquery.onecarousel.min.js"></script>
  35. <!-- Placeholders -->
  36. <script type="text/javascript" src="js/jquery.powerful-placeholder.min.js"></script>
  37. <meta charset="utf-8"><link rel="icon" href="https://static.jianshukeji.com/highcharts/images/favicon.ico">
  38. <meta name="viewport" content="width=device-width, initial-scale=1">
  39. <style>
  40. /* css 代码 */
  41. </style>
  42. <script src="https://img.hcharts.cn/highcharts/highcharts.js"></script>
  43. <script src="https://img.hcharts.cn/highcharts/modules/exporting.js"></script>
  44. <script src="https://img.hcharts.cn/highcharts-plugins/highcharts-zh_CN.js"></script>
  45. </head>
  46. <body>
  47. <div class="row demo-row">
  48. <div class="col-xs-12">
  49. <nav class="navbar navbar-inverse navbar-embossed" role="navigation">
  50. <div class="navbar-header">
  51. <button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#navbar-collapse-01">
  52. <span class="sr-only">Toggle navigation</span>
  53. </button>
  54. <a class="navbar-brand" href="#">Mastiff Scanning Report</a>
  55. </div>
  56. <div class="collapse navbar-collapse" id="navbar-collapse-01">
  57. <ul class="nav navbar-nav navbar-left">
  58. <li><a href="#fakelink">Menu Item<span class="navbar-unread">1</span></a></li>
  59. <li class="dropdown">
  60. <a href="#" class="dropdown-toggle" data-toggle="dropdown">Messages <b class="caret"></b></a>
  61. <span class="dropdown-arrow"></span>
  62. <ul class="dropdown-menu">
  63. <li><a href="#">Action</a></li>
  64. <li><a href="#">Another action</a></li>
  65. <li><a href="#">Something else here</a></li>
  66. <li class="divider"></li>
  67. <li><a href="#">Separated link</a></li>
  68. </ul>
  69. </li>
  70. <li><a href="#fakelink">About Us</a></li>
  71. </ul>
  72. <form class="navbar-form navbar-right" action="#" role="search">
  73. <div class="form-group">
  74. <div class="input-group">
  75. <input class="form-control" id="navbarInput-01" type="search" placeholder="Search">
  76. <span class="input-group-btn">
  77. <button type="submit" class="btn"><span class="fui-search"></span></button>
  78. </span>
  79. </div>
  80. </div>
  81. </form>
  82. </div><!-- /.navbar-collapse -->
  83. </nav><!-- /navbar -->
  84. </div>
  85. </div>
  86. <div class="row demo-row">
  87. <div class="col-xs-3">
  88. <a href="#fakelink" class="btn btn-block btn-lg btn-primary">出现BUG数</a>
  89. </div>
  90. <div class="col-xs-3">
  91. <a href="#fakelink" class="btn btn-block btn-lg btn-warning">扫描文件数</a>
  92. </div>
  93. <div class="col-xs-3">
  94. <a href="#fakelink" class="btn btn-block btn-lg btn-default">出现BUG的文件数</a>
  95. </div>
  96. <div class="col-xs-3">
  97. <a href="#fakelink" class="btn btn-block btn-lg btn-danger">扫描用时</a>
  98. </div>
  99. </div> <!-- /row -->
  100. <!--/ background -->
  101. <div class="content-st">
  102. <div class="container">
  103. <h1>Flexi Landing Page.</h1>
  104. <h4>This is a small sub title</h4>
  105. <p>ITS BETA is working hard to launch a new site that's going to revolutionize the way you do business. Leave us your email below, and we'll notify you the minute we open the doors.</p>
  106. <a href="#" class="content-st-btn">Beautifully clean buttons</a>
  107. </div>
  108. </div>
  109. <!--/ content-st -->
  110. <div class="content-nd">
  111. <div class="container">
  112. <div class="row">
  113. <div class="col-xs-12 col-sm-6 col-md-4 col-lg-4">
  114. <div class="box">
  115. <i class="fa fa-tablet fa-5x"></i>
  116. <h2>Responsive</h2>
  117. <p>Epsum factorial non deposit quid pro quo hic escorol. Olypian quarrels et gorilla congolium sic ad nauseum. ITS BETA is working hard to launch a new site that's going to revolutionize the way you do business.</p>
  118. </div>
  119. </div>
  120. <div class="col-xs-12 col-sm-6 col-md-4 col-lg-4">
  121. <div class="box">
  122. <i class="fa fa-laptop fa-5x"></i>
  123. <h2>Modular</h2>
  124. <p>Epsum factorial non deposit quid pro quo hic escorol. Olypian quarrels et gorilla congolium sic ad nauseum. ITS BETA is working hard to launch a new site that's going to revolutionize the way you do business.</p>
  125. </div>
  126. </div>
  127. <div class="col-xs-12 col-sm-6 col-md-4 col-lg-4">
  128. <div class="box">
  129. <i class="fa fa-cogs fa-5x"></i>
  130. <h2>Adaptive</h2>
  131. <p>Epsum factorial non deposit quid pro quo hic escorol. Olypian quarrels et gorilla congolium sic ad nauseum. ITS BETA is working hard to launch a new site that's going to revolutionize the way you do business.</p>
  132. </div>
  133. </div>
  134. </div>
  135. </div>
  136. </div>
  137. <!--/ content-nd -->
  138. <div class="content-rd">
  139. <div class="container">
  140. <h1>Super legible fonts.</h1>
  141. <p>The super clean <span>Raleway</span>, and <span>Merriweather</span> fonts from Google produce super clean, legible text.</p>
  142. <blockquote>
  143. <i class="fa fa-quote-left"></i>
  144. <p>The content width, line spacing and font size follow the golden ratio formula for optimal reading on any device.</p>
  145. </blockquote>
  146. <p>Titles are appropriately sized and are darker giving a good visual hierachy to your page and content. With the light background and not-quite-so-dark font color it's also easy on the eyes for reading making your copy pop, and your message stand-out.</p>
  147. </div>
  148. </div>
  149. <!--/ content-rd -->
  150. <div class="content-ft">
  151. <div class="container">
  152. <div class="row">
  153. <div class="col-xs-12 col-sm-12 col-md-6 col-lg-6">
  154. <div class="right-text">
  155. <h1>Image right. Text left.</h1>
  156. <ul>
  157. <li>
  158. <div class="left-icon"><img src="img/icon-1.png" alt="pic-1" /></div>
  159. <div class="text-right">
  160. <h4>UIV<span>:40</span></h4>
  161. <p>Titles are appropriately sized and are darker giving a good visual hierachy to your page and content.</p>
  162. </div>
  163. </li>
  164. <li>
  165. <div class="left-icon"><img src="img/icon-2.png" alt="pic-2" /></div>
  166. <div class="text-right">
  167. <h4>NPD<span>:50</span></h4>
  168. <p>Titles are appropriately sized and are darker giving a good visual hierachy to your page and content.</p>
  169. </div>
  170. </li>
  171. </ul>
  172. </div>
  173. <!--/ right-text -->
  174. </div>
  175. <div class="col-xs-12 col-sm-12 col-md-6 col-lg-6">
  176. <div class="img-right">
  177. <div id="container1" style="min-width:400px;height:400px"></div>
  178. </div>
  179. </div>
  180. </div><!--/ row-->
  181. </div>
  182. </div>
  183. <!--/ content-ft -->
  184. <div class="content-sx">
  185. <div class="container">
  186. <div class="row">
  187. <div class="col-xs-12 col-sm-12 col-md-6 col-lg-6">
  188. <div class="img-right">
  189. <div id="container2" style="min-width:400px;height:400px"></div>
  190. </div>
  191. </div>
  192. <div class="col-xs-12 col-sm-12 col-md-6 col-lg-6">
  193. <div class="right-text">
  194. <h1>Image left. Text right.</h1>
  195. <ul>
  196. <li>
  197. <div class="left-icon"><img src="img/icon-1.png" alt="pic-1" /></div>
  198. <div class="text-right">
  199. <h4>Retina Support</h4>
  200. <p>Titles are appropriately sized and are darker giving a good visual hierachy to your page and content.</p>
  201. </div>
  202. </li>
  203. <li>
  204. <div class="left-icon"><img src="img/icon-2.png" alt="pic-2" /></div>
  205. <div class="text-right">
  206. <h4>Retina Support</h4>
  207. <p>Titles are appropriately sized and are darker giving a good visual hierachy to your page and content.</p>
  208. </div>
  209. </li>
  210. </ul>
  211. </div>
  212. <!--/ right-text -->
  213. </div>
  214. </div><!--/ row-->
  215. </div>
  216. </div>
  217. <!--/ content-sx -->
  218. <div class="footer">
  219. <div class="container">
  220. <div class="row">
  221. <div class="col-sm-12">
  222. <ul class="footer-social">
  223. <li><a href="#" class="social-facebook"><span>Facebook</span></a></li>
  224. <li><a href="#" class="social-pinterest"><span>Pinterest</span></a></li>
  225. <li><a href="#" class="social-twitter"><span>Twitter</span></a></li>
  226. </ul>
  227. <div class="copyright">A Premium WordPress theme by <a href="http://www.cssmoban.com/">ThemeFuse</a></div>
  228. </div>
  229. </div>
  230. <!--/ row -->
  231. </div>
  232. </div><!--/ footer-->
  233. <script>
  234. Highcharts.chart('container1', {
  235. chart: {
  236. plotBackgroundColor: null,
  237. plotBorderWidth: null,
  238. plotShadow: false,
  239. type: 'pie'
  240. },
  241. title: {
  242. text: '2018 年浏览器市场份额'
  243. },
  244. tooltip: {
  245. pointFormat: '{series.name}: <b>{point.percentage:.1f}%</b>'
  246. },
  247. plotOptions: {
  248. pie: {
  249. allowPointSelect: true,
  250. cursor: 'pointer',
  251. dataLabels: {
  252. enabled: false
  253. },
  254. showInLegend: true
  255. }
  256. },
  257. series: [{
  258. name: 'Brands',
  259. colorByPoint: true,
  260. data: [{
  261. name: 'Chrome',
  262. y: 61.41,
  263. sliced: true,
  264. selected: true
  265. }, {
  266. name: 'Internet Explorer',
  267. y: 11.84
  268. }, {
  269. name: 'Firefox',
  270. y: 10.85
  271. }, {
  272. name: 'Edge',
  273. y: 4.67
  274. }, {
  275. name: 'Safari',
  276. y: 4.18
  277. }, {
  278. name: 'Other',
  279. y: 7.05
  280. }]
  281. }]
  282. });
  283. </script>
  284. <script>
  285. var chart = Highcharts.chart('container2', {
  286. chart: {
  287. zoomType: 'xy'
  288. },
  289. title: {
  290. text: '东京月平均温度和降雨量'
  291. },
  292. subtitle: {
  293. text: '数据来源: WorldClimate.com'
  294. },
  295. xAxis: [{
  296. categories: ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun',
  297. 'Jul', 'Aug', 'Sep', 'Oct', 'Nov', 'Dec'],
  298. crosshair: true
  299. }],
  300. yAxis: [{ // Primary yAxis
  301. labels: {
  302. format: '{value}°C',
  303. style: {
  304. color: Highcharts.getOptions().colors[1]
  305. }
  306. },
  307. title: {
  308. text: '温度',
  309. style: {
  310. color: Highcharts.getOptions().colors[1]
  311. }
  312. }
  313. }, { // Secondary yAxis
  314. title: {
  315. text: '降雨量',
  316. style: {
  317. color: Highcharts.getOptions().colors[0]
  318. }
  319. },
  320. labels: {
  321. format: '{value} mm',
  322. style: {
  323. color: Highcharts.getOptions().colors[0]
  324. }
  325. },
  326. opposite: true
  327. }],
  328. tooltip: {
  329. shared: true
  330. },
  331. legend: {
  332. layout: 'vertical',
  333. align: 'left',
  334. x: 120,
  335. verticalAlign: 'top',
  336. y: 100,
  337. floating: true,
  338. backgroundColor: (Highcharts.theme && Highcharts.theme.legendBackgroundColor) || '#FFFFFF'
  339. },
  340. series: [{
  341. name: '降雨量',
  342. type: 'column',
  343. yAxis: 1,
  344. data: [49.9, 71.5, 106.4, 129.2, 144.0, 176.0, 135.6, 148.5, 216.4, 194.1, 95.6, 54.4],
  345. tooltip: {
  346. valueSuffix: ' mm'
  347. }
  348. }, {
  349. name: '温度',
  350. type: 'spline',
  351. data: [7.0, 6.9, 9.5, 14.5, 18.2, 21.5, 25.2, 26.5, 23.3, 18.3, 13.9, 9.6],
  352. tooltip: {
  353. valueSuffix: '°C'
  354. }
  355. }]
  356. });
  357. </script>
  358. <script src="dist/js/vendor/jquery.min.js"></script>
  359. <script src="dist/js/vendor/video.js"></script>
  360. <script src="dist/js/flat-ui.min.js"></script>
  361. <script src="docs/assets/js/application.js"></script>
  362. <script>
  363. videojs.options.flash.swf = "dist/js/vendors/video-js.swf"
  364. </script>
  365. </body>
  366. </html>