ok
Mini Shell
<?php
include "header.php";
$today_date = date("Y-m-d");
$statement = $pdo->prepare("SELECT * FROM caste");
$statement->execute();
$total_caste= $statement->rowCount();
$statement = $pdo->prepare("SELECT * FROM subcaste group by name");
$statement->execute();
$total_subcaste= $statement->rowCount();
$statement = $pdo->prepare("SELECT * FROM profiles");
$statement->execute();
$total_profiles = $statement->rowCount();
$statement = $pdo->prepare("SELECT * FROM profiles where delete_status=0");
$statement->execute();
$total_del_profiles= $statement->rowCount();
?>
<div class="content-wrapper" style="background: #b5dcdd;">
<section class="content-header">
<div class="container">
<!-- Dashboard Counts Starts Here -->
<div class="container">
<div class="row">
<div class="col-md-3 col-sm-6">
<div class="counter green">
<div class="counter-icon">
<i class="fa fa-map-marker" style=""></i>
</div>
<span class="counter-value"><?=$total_caste?></span>
<h3>ஜாதி</h3>
</div>
</div>
<div class="col-md-3 col-sm-6">
<div class="counter purple">
<div class="counter-icon">
<i class="fa fa-map-marker" style=""></i>
</div>
<span class="counter-value"><?=$total_subcaste?></span>
<h3>உட்பிரிவு</h3>
</div>
</div>
<div class="col-md-3 col-sm-6">
<div class="counter blue">
<div class="counter-icon">
<i class="fa fa-file" style=""></i>
</div>
<span class="counter-value"><?=$total_profiles?></span>
<h3>பதிவுகள் </h3>
</div>
</div>
<div class="col-md-3 col-sm-6">
<div class="counter">
<div class="counter-icon" >
<i class="fa fa-trash" style=""></i>
</div>
<span class="counter-value"><?=$total_del_profiles?></span>
<h3>நீக்கிய பதிவுகள் </h3>
</div>
</div>
</div>
</div>
<!-- Dashboard Counts Endsss Here -->
</div>
</section>
<br><br><br><br>
</div>
<?php include "footer.php"; ?>
<style>
.demo{ background-color: #EBE8EE; }
.counter{
font-family: 'Nunito Sans', sans-serif;
text-align: center;
height: 210px;
width: 210px;
padding: 7px 4px 0;
margin: 0 auto;
position: relative;
z-index: 1;
}
.counter:before{
content: '';
background-color: #fff;
height: 157px;
width: 157px;
border-radius: 15px;
border: 5px solid #fff;
box-shadow: 0 0 10px rgba(0, 0, 0, 0.1) inset;
transform: translateX(-50%) translateY(-50%) rotate(45deg);
position: absolute;
left: 50%;
top: 50%;
z-index: -1;
}
.counter .counter-icon{
color: #fff;
background: linear-gradient(#F83F83,#E2056F);
line-height: 70px;
font-size: 35px;
height: 70px;
width: 70px;
margin: 0 auto 8px;
border-radius: 19px 0 50px;
transform: rotate(45deg);
}
.counter .counter-icon i{ transform: rotate(-45deg); }
.counter .counter-value{
font-size: 25px;
font-weight: 700;
letter-spacing: 1px;
margin: 0 0 13px 0;
display: block;
}
.counter h3{
color: #fff;
background: linear-gradient(#F83F83,#E2056F);
font-size: 18px;
font-weight: 600;
letter-spacing: 1px;
text-transform: capitalize;
padding: 10px 5px;
margin: 0;
border-radius: 0 0 20px 20px;
position: relative;
}
.counter h3:before,
.counter h3:after{
content: "";
background: linear-gradient(to right bottom, transparent 49%,#c90460 50%);
width: 20px;
height: 20px;
position: absolute;
top: -20px;
left: 0;
z-index: -2;
}
.counter h3:after{
transform: rotateY(180deg);
left: auto;
right: 0;
}
.counter.purple .counter-icon,
.counter.purple h3{
background: linear-gradient(#B05FDF,#7B26DD);
}
.counter.purple h3:before,
.counter.purple h3:after{
background: linear-gradient(to right bottom,transparent 49%,#5a07bf 50%);
}
.counter.blue .counter-icon,
.counter.blue h3{
background: linear-gradient(#00BCF9,#027AF6);
}
.counter.blue h3:before,
.counter.blue h3:after{
background: linear-gradient(to right bottom,transparent 49%,#0466c9 50%);
}
.counter.green .counter-icon,
.counter.green h3{
background: linear-gradient(#aff400,#6cc425);
}
.counter.green h3:before,
.counter.green h3:after{
background: linear-gradient(to right bottom,transparent 49%,#489e03 50%);
}
@media screen and (max-width:990px){
.counter{ margin-bottom: 40px; }
}
</style>
<script>
$(document).ready(function(){
$('.counter-value').each(function(){
$(this).prop('Counter',0).animate({
Counter: $(this).text()
},{
duration: 3500,
easing: 'swing',
step: function (now){
$(this).text(Math.ceil(now));
}
});
});
});
</script>
<script type="text/javascript">
<?php
$data_table = " var search_table =$('#search_table').val();
var table = $('#StData').DataTable({
'ajax' : {
url: 'data-tables/dashboard-bookings-data-table.php',
data:{search:search_table},
type: 'POST'},
bFilter: true,
bDestroy: true,
searching: true,pageLength: 10,
'buttons': [
{ extend: 'copyHtml5', 'footer': false, exportOptions: { columns: [ 0, 1, 2, 3, 4, 5 ] } },
{ extend: 'excelHtml5', 'footer': false, exportOptions: { columns: [ 0, 1, 2, 3, 4, 5 ] } },
{ extend: 'csvHtml5', 'footer': false, exportOptions: { columns: [ 0, 1, 2, 3, 4, 5 ] } },
{ extend: 'pdfHtml5', orientation: 'landscape', pageSize: 'A4', 'footer': false,
exportOptions: { columns: [ 0, 1, 2, 3, 4, 5 ] } },
{ extend: 'colvis', text: 'Columns'},
]
});";
?>
$(document).ready(function(){
emp_data();
function emp_data(){
<?=$data_table?>
}
$('#filter_trip_date').change(function() {
emp_data();
});
$('#search_table').keyup(function() {
emp_data();
document.getElementById("search_table").focus();
});
});
function emp_datas(){
<?=$data_table?>
}
</script>
<script>
$(document).ready(function(){
$('#filter_button').click(function(){
$("#filter_section").slideToggle();
return false;
});
});
</script>
<style>
.counter_1{
color: #f27f21;
font-family: 'Open Sans', sans-serif;
text-align: center;
height: 190px;
width: 190px;
padding: 30px 25px 25px;
margin: 0 auto;
border: 3px solid #f27f21;
border-radius: 20px 20px;
position: relative;
z-index: 1;
}
.counter_1:before,
.counter_1:after{
content: "";
background: #f3f3f3;
border-radius: 20px;
box-shadow: 4px 4px 2px rgba(0,0,0,0.2);
position: absolute;
left: 15px;
top: 15px;
bottom: 15px;
right: 15px;
z-index: -1;
}
.counter_1:after{
background: transparent;
width: 100px;
height: 100px;
border: 15px solid #f27f21;
border-top: none;
border-right: none;
border-radius: 0 0 0 20px;
box-shadow: none;
top: auto;
left: -10px;
bottom: -10px;
right: auto;
}
.counter_1 .counter-icon_1{
font-size: 35px;
line-height: 35px;
margin: 0 0 15px;
transition: all 0.3s ease 0s;
}
.counter_1:hover .counter-icon_1{ transform: rotateY(360deg); }
.counter_1 .counter-value_1{
color: #555;
font-size: 30px;
font-weight: 600;
line-height: 20px;
margin: 0 0 20px;
display: block;
transition: all 0.3s ease 0s;
}
.counter_1:hover .counter-value_1{ text-shadow: 2px 2px 0 #d1d8e0; }
.counter_1 h3{
font-size: 17px;
font-weight: 700;
text-transform: uppercase;
margin: 0 0 15px;
}
.blue{
color: #4accdb;
border-color: #4accdb;
}
.blue:after{
border-bottom-color: #4accdb;
border-left-color: #4accdb;
}
.pink {
color: #EE436D;
border-color: #EE436D;
}
.pink:after {
color: #EE436D;
border-color: #EE436D;
}
.purple {
color: #9C52A1;
border-color: #9C52A1;
}
.purple:after{
color: #9C52A1;
border-color: #9C52A1;
}
@media screen and (max-width:990px){
.counter_1{ margin-bottom: 40px; }
}
</style>
<script>
$(document).ready(function(){
$('.counter-value_1').each(function(){
$(this).prop('Counter',0).animate({
Counter: $(this).text()
},{
duration: 3500,
easing: 'swing',
step: function (now){
$(this).text(Math.ceil(now));
}
});
});
});
</script>
<script>
function get_bus_details(){
var bus_id=$('#bus_id').val();
var trip_date=$('#trip_date').val();
if(bus_id!="" && trip_date!=""){
$.ajax({
url: 'api/dashboard_get_bus_details.php',
type: 'post',
data:{bus_id:bus_id,trip_date:trip_date},
dataType: 'json',
success: function (response) {
console.log(response);
$('#details_total_seats').empty();
$('#details_total_seats').text(response[0]['total_bus_seats_count']);
$('#total_booked_seats').text(response[0]['total_booked_seats']);
$('#details_available_seats').text(response[0]['total_available_seats']);
$('#total_blocked_seats').text(response[0]['total_blocked_seats']);
}
});
}else{
alert("Please Choose Bus Code and Trip Date");
}
}
</script>
Zerion Mini Shell 1.0