一个简陋前端页面

虽然很不开心,那也没办法

。。。。。

地图的动态效果,看能在哪抄,前端的页面其实就这几个,用到不多,剩下的看能不能找到能直接用的js代码

把网上的代码处理成django静态引用代码.py:


a='<link href="css/bootstrap.min.css" rel="stylesheet">'
f=open("test.txt")
for i in f.readlines():
i=i.rstrip("\n")
if "<link " in i:
a=i.split('href')
b=a[0]+'href'+'="'+'{{ STATIC_URL }}'+a[1].lstrip('="')
print(b)
else:
print(i)



大体前端代码,在此基础上,增加区块,删除区块(主体还是难在写js的动态变换):
下面代码都是拼凑起来的。。。。。。。

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta name="description" content="Creative - Bootstrap 3 Responsive Admin Template">
<meta name="author" content="GeeksLabs">
<meta name="keyword" content="Creative, Dashboard, Admin, Template, Theme, Bootstrap, Responsive, Retina, Minimal">
<link rel="shortcut icon" href="img/favicon.png">

<title>Creative - Bootstrap Admin Template</title>

<!-- Bootstrap CSS -->
<link href="css/bootstrap.min.css" rel="stylesheet">
<!-- bootstrap theme -->
<link href="css/bootstrap-theme.css" rel="stylesheet">
<!--external css-->
<!-- font icon -->
<link href="css/elegant-icons-style.css" rel="stylesheet" />
<link href="css/font-awesome.min.css" rel="stylesheet" />
<!-- full calendar css-->
<link href="assets/fullcalendar/fullcalendar/bootstrap-fullcalendar.css" rel="stylesheet" />
<link href="assets/fullcalendar/fullcalendar/fullcalendar.css" rel="stylesheet" />
<!-- easy pie chart-->
<link href="assets/jquery-easy-pie-chart/jquery.easy-pie-chart.css" rel="stylesheet" type="text/css" media="screen"/>
<!-- owl carousel -->
<link rel="stylesheet" href="css/owl.carousel.css" type="text/css">
<link href="css/jquery-jvectormap-1.2.2.css" rel="stylesheet">
<!-- Custom styles -->
<link rel="stylesheet" href="css/fullcalendar.css">
<link href="css/widgets.css" rel="stylesheet">
<link href="css/style.css" rel="stylesheet">
<link href="css/style-responsive.css" rel="stylesheet" />
<link href="css/xcharts.min.css" rel=" stylesheet">
<link href="css/jquery-ui-1.10.4.min.css" rel="stylesheet">
<!-- HTML5 shim and Respond.js IE8 support of HTML5 -->
<!--[if lt IE 9]>
<script src="js/html5shiv.js"></script>
<script src="js/respond.min.js"></script>
<script src="js/lte-ie7.js"></script>
<![endif]-->
</head>

<body>
<!-- container section start -->
<section id="container" class="">


<header class="header dark-bg">
<div class="toggle-nav">
<div class="icon-reorder tooltips" data-original-title="Toggle Navigation" data-placement="bottom"></div>
</div>

<!--logo start-->
<a href="index.html" class="logo">Collect_Scan_Platform</a>
<!--logo end-->

<div class="nav search-row" id="top_menu">
<!-- search form start -->
<ul class="nav top-menu">
<li>
<form class="navbar-form">
<input class="form-control" placeholder="Search" type="text">
</form>
</li>
</ul>
<!-- search form end -->
</div>


</ul>
<!-- notificatoin dropdown end-->
</div>
</header>
<!--header end-->

<!--sidebar start-->
<aside>
<div id="sidebar" class="nav-collapse ">
<!-- sidebar menu start-->
<ul class="sidebar-menu">
<li class="active">
<a class="" href="index.html">
<i class="icon_house_alt"></i>
<span>singal url</span>
</a>
</li>
<li>
<a class="" href="domains.html">
<i class="icon_genius"></i>
<span>domains扫描</span>
</a>
</li>
<li>
<a class="" href="ips_scan.html">
<i class="icon_piechart"></i>
<span>特定的段扫描</span>

</a>

</li>
<li>
<a class="" href="all_scan.html">
<i class="icon_piechart"></i>
<span>全网扫描</span>

</a>

</li>
</ul>
<!-- sidebar menu end-->
</div>
</aside>
<!--sidebar end-->

<!--main content start-->
<section id="main-content">
<section class="wrapper">



<!--overview start-->
<div class="input-group input-group-lg">
<input type="text" id="url" class="form-control" aria-label="..." name="url">
<div class="input-group-btn">
<button type="button" id="cms" class="btn btn-info btn-lg search-btn" aria-haspopup="true" aria-expanded="false"><b>检测</b></button>
</div>
</div>
<br/>


<!-- List starts -->
<ul class="today-datas">
<!-- List #1 -->
<li>
<!-- Graph -->
<div><span id="todayspark1" class="spark"></span></div>
<!-- Text -->
<div class="datas-text">11,500 visitors/day</div>
</li>
<li>
<div><span id="todayspark2" class="spark"></span></div>
<div class="datas-text">15,000 Pageviews</div>
</li>
<li>
<div><span id="todayspark3" class="spark"></span></div>
<div class="datas-text">30.55% Bounce Rate</div>
</li>
<li>
<div><span id="todayspark4" class="spark"></span></div>
<div class="datas-text">$16,00 Revenue/Day</div>
</li>
<li>
<div><span id="todayspark5" class="spark"></span></div>
<div class="datas-text">12,000000 visitors every Month</div>
</li>
</ul>
</div>


</div>


<div class="row">
<!-- Line -->
<div class="col-lg-6">
<section class="panel">
<header class="panel-heading">
Line
</header>
<div class="panel-body text-center">
<canvas id="line" height="300" width="450"></canvas>
</div>
</section>
</div>
<!-- Bar -->
<div class="col-lg-6">
<section class="panel">
<header class="panel-heading">
Bar
</header>
<div class="panel-body text-center">
<canvas id="bar" height="300" width="500"></canvas>
</div>
</section>
</div>
</div>
<div class="row">
<!-- Radar -->
<div class="col-lg-6">
<section class="panel">
<header class="panel-heading">
Radar
</header>
<div class="panel-body text-center">
<canvas id="radar" height="300" width="400"></canvas>
</div>
</section>
</div>
<!-- Polar Area -->
<div class="col-lg-6">
<section class="panel">
<header class="panel-heading">
Polar Area
</header>
<div class="panel-body text-center">
<canvas id="polarArea" height="300" width="400"></canvas>
</div>
</section>
</div>
</div>
<div class="row">

<!-- Pie -->
<div class="col-lg-6">
<section class="panel">
<header class="panel-heading">
Pie
</header>
<div class="panel-body text-center">
<canvas id="pie" height="300" width="400"></canvas>
</div>
</section>
</div>
<!-- Doughnut -->
<div class="col-lg-6">
<section class="panel">
<header class="panel-heading">
Doughnut
</header>
<div class="panel-body text-center">
<canvas id="doughnut" height="300" width="400"></canvas>
</div>
</section>
</div>
</div>
</div>



<br/>
<div class="row">
<div class="col-lg-12 col-md-12">

<div class="panel panel-default">
<div class="panel-heading">
<h2><i class="fa fa-map-marker red"></i><strong>Countries</strong></h2>
<div class="panel-actions">
<a href="index.html#" class="btn-setting"><i class="fa fa-rotate-right"></i></a>
<a href="index.html#" class="btn-minimize"><i class="fa fa-chevron-up"></i></a>
<a href="index.html#" class="btn-close"><i class="fa fa-times"></i></a>
</div>
</div>
<div class="panel-body-map">
<div id="map" style="height:380px;"></div>
</div>

</div>
</div>



</section>
</section>
<!--main content end-->
</section>
<!-- container section start -->

<!-- javascripts -->
<script src="js/jquery.js"></script>
<script src="js/jquery-ui-1.10.4.min.js"></script>
<script src="js/jquery-1.8.3.min.js"></script>
<script type="text/javascript" src="js/jquery-ui-1.9.2.custom.min.js"></script>
<!-- bootstrap -->
<script src="js/bootstrap.min.js"></script>
<!-- nice scroll -->
<script src="js/jquery.scrollTo.min.js"></script>
<script src="js/jquery.nicescroll.js" type="text/javascript"></script>
<!-- charts scripts -->
<script src="assets/jquery-knob/js/jquery.knob.js"></script>
<script src="js/jquery.sparkline.js" type="text/javascript"></script>
<script src="assets/jquery-easy-pie-chart/jquery.easy-pie-chart.js"></script>
<script src="js/owl.carousel.js" ></script>
<!-- jQuery full calendar -->
<<script src="js/fullcalendar.min.js"></script> <!-- Full Google Calendar - Calendar -->
<script src="assets/fullcalendar/fullcalendar/fullcalendar.js"></script>
<!--script for this page only-->
<script src="js/calendar-custom.js"></script>
<script src="js/jquery.rateit.min.js"></script>
<!-- custom select -->
<script src="js/jquery.customSelect.min.js" ></script>
<script src="assets/chart-master/Chart.js"></script>

<!--custome script for all page-->
<script src="js/scripts.js"></script>
<!-- custom script for this page-->
<script src="js/sparkline-chart.js"></script>
<script src="js/easy-pie-chart.js"></script>
<script src="js/jquery-jvectormap-1.2.2.min.js"></script>
<script src="js/jquery-jvectormap-world-mill-en.js"></script>
<script src="js/xcharts.min.js"></script>
<script src="js/jquery.autosize.min.js"></script>
<script src="js/jquery.placeholder.min.js"></script>
<script src="js/gdp-data.js"></script>
<script src="js/morris.min.js"></script>
<script src="js/sparklines.js"></script>
<script src="js/charts.js"></script>
<script src="js/jquery.slimscroll.min.js"></script>
<script src="js/jquery.js"></script>
<script src="js/jquery-1.8.3.min.js"></script>
<script src="js/bootstrap.min.js"></script>
<!-- nice scroll -->
<script src="js/jquery.scrollTo.min.js"></script>
<script src="js/jquery.nicescroll.js" type="text/javascript"></script>
<!-- chartjs -->
<script src="assets/chart-master/Chart.js"></script>
<!-- custom chart script for this page only-->
<script src="js/chartjs-custom.js" ></script>
<!--custome script for all page-->
<script src="js/scripts.js"></script>
<script>

//knob
$(function() {
$(".knob").knob({
'draw' : function () {
$(this.i).val(this.cv + '%')
}
})
});

//carousel
$(document).ready(function() {
$("#owl-slider").owlCarousel({
navigation : true,
slideSpeed : 300,
paginationSpeed : 400,
singleItem : true

});
});

//custom select box

$(function(){
$('select.styled').customSelect();
});

/* ---------- Map ---------- */
$(function(){
$('#map').vectorMap({
map: 'world_mill_en',
series: {
regions: [{
values: gdpData,
scale: ['#000', '#000'],
normalizeFunction: 'polynomial'
}]
},
backgroundColor: '#eef3f7',
onLabelShow: function(e, el, code){
el.html(el.html()+' (GDP - '+gdpData[code]+')');
}
});
});



</script>

</body>
</html>

2019.4.13

发表评论

电子邮件地址不会被公开。 必填项已用*标注