DayZ-Stat-Server/index.php

713 lines
29 KiB
PHP
Raw Permalink Normal View History

2021-01-31 18:45:15 +01:00
<!DOCTYPE html>
<html lang="en">
2021-01-31 13:16:02 +01:00
<?php
$page = $_SERVER['PHP_SELF'];
$sec = "300";
2021-01-31 14:14:35 +01:00
2021-02-02 12:45:13 +01:00
//ini_set('display_errors', 'on');
//error_reporting(E_ALL); // Display all types of error
2021-02-02 12:44:26 +01:00
2021-02-06 13:40:40 +01:00
include_once('config/config.php');
include_once('config/consql.php');
2021-01-31 14:14:35 +01:00
2021-01-31 13:16:02 +01:00
?>
2021-02-02 23:34:59 +01:00
2021-01-31 13:16:02 +01:00
<head>
2021-01-31 18:12:00 +01:00
<meta http-equiv="refresh" content="<?php echo $sec?>;URL='<?php echo $page?>'">
2021-01-31 13:16:02 +01:00
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0, shrink-to-fit=no">
2021-01-31 14:14:35 +01:00
<title><?php echo "$title"; ?></title>
2021-01-31 18:12:00 +01:00
<meta name='description' content='<?php echo "$descript"; ?>'>
2021-01-31 13:16:02 +01:00
<meta name="author" content="Erreur32">
2021-02-04 18:00:02 +01:00
<link rel="shortcut icon" type="image/x-icon" href="/favicon.ico">
<link rel="icon" type="image/png" href="/favicon.png"/>
2021-01-31 13:16:02 +01:00
<meta name="keyword" content="tox,server,dayz,map,namalsk,namalsk island">
2021-02-02 11:32:14 +01:00
<link id="theme-style" href="css/style_dark.css" rel="stylesheet">
2021-01-31 13:16:02 +01:00
<style>
2021-02-07 13:34:01 +01:00
.tab-content {margin-top: -1px; background: #3a4149;border: none;border-radius: 0 0 .25rem .25rem;}
a,a:visited {color: #20A8D8;text-decoration: none;}
a:hover {color: orange; text-decoration: none;}
.description-header {color: #26A65B;}
.label-danger { background-color: #EF4836;}
.label-warning {background-color: #F89406;color: white; }
.label-success {background-color: #26A65B;}
.label-primary {background-color: #4183D7;color: green; }
.label-info { background-color: #5bc0de;}
2021-01-31 13:16:02 +01:00
.label {
display: inline;
padding: .2em .6em .3em;
font-size: 75%;
font-weight: 700;
line-height: 1;
color: #fff;
text-align: center;
white-space: nowrap;
vertical-align: baseline;
border-radius: .25em;
}
2021-02-07 13:34:01 +01:00
.selection { color: black !important;}
.select2-results { color: black !important;}
.select2-results__option--highlighted { background-color: #3875d7 !important;}
.pull-left { float: left !important;}
.pull-right { float: right !important;}
.navbar-brand-logo { margin-left: 2rem;}
2021-01-31 13:16:02 +01:00
</style>
<?php
$time = microtime();
$time = explode(' ', $time);
$time = $time[1] + $time[0];
$start = $time;
2021-02-05 22:50:33 +01:00
if (empty($Info['HostName'])) {
$Info['HostName'] = "<h1>OFF LINE</h1>" ;
}
2021-01-31 13:16:02 +01:00
?>
2021-02-07 13:34:01 +01:00
<main class="main" style="margin-top: 10px">
<!-- Breadcrumb <ol class=""></ol>-->
2021-01-31 13:16:02 +01:00
<div class="container-fluid">
2021-02-07 13:34:01 +01:00
<center><img height="" width="" src="img/DayZStats.png"></center>
2021-01-31 13:16:02 +01:00
<div id="ui-view">
<div class="animated fadeIn">
<div class="row">
<div class="col-lg-12 col-xs-12">
<div class="card">
<div class="card-body" style="text-align:center;">
<h3> <img height="24px" width="24px"
src="https://steamcdn-a.akamaihd.net/steamcommunity/public/images/apps/221100/f8c16699ed5ce1cc8aa9b15ed3fdd66553fce2bf.ico">
<?php echo $Info['HostName'] ; ?>
<!--<i class="flag-icon h5 flag-icon-fr"></i>-->
2021-02-05 00:18:56 +01:00
</h3>
<h5><span style="color:grey;"><?php echo $Info['Map']; ?> </span></h5>
2021-01-31 13:16:02 +01:00
<span class="label label-<?php echo $Timer > 1.0 ? 'danger' : 'success'; ?>"><?php echo $Timer; ?>s</span>
</div>
<?php
if (empty($Info['Map'])) {
2021-02-07 13:34:01 +01:00
echo "</main>";
2021-02-05 22:50:33 +01:00
2021-02-07 13:34:01 +01:00
// change to our local zone !!
2021-01-31 13:16:02 +01:00
setlocale(LC_ALL,'french');
2021-02-05 22:50:33 +01:00
2021-02-07 13:34:01 +01:00
echo "<center><small class='text-muted'>Last refresh</small> <br> <strong class='h4'>".date('m/d/y H:i:s')."</strong></center>";
echo "<div style=\"padding-bottom: 10%;padding-left: 20%;padding-right: 20%\"> <center><img src=img/".$logoteam." class=\"arrondie2\" width=\"100%\" max-height=\"20%\" height=\"auto\"></center></div></div>";
2021-01-31 13:16:02 +01:00
exit;
}
?>
<div class="card-footer">
<div class="row" style="text-align:center;">
<div class="col-md-2 col-xs-12 border-right">
<div class="description-block">
<h5 class="description-header">
2021-02-05 22:50:33 +01:00
<?php if (empty($Info['Players'])) { echo "<span style='color:grey;'>"; } ?>
2021-02-07 13:34:01 +01:00
<?php echo $Info['Players']; ?> <span style='color:grey;'>/<?php echo $Info['MaxPlayers'] ; ?></span></span>
2021-01-31 13:16:02 +01:00
</h5>
2021-02-05 22:50:33 +01:00
<span class="description-text">PLAYERS</span>
2021-01-31 13:16:02 +01:00
</div>
</div>
<div class="col-md-2 col-xs-12 border-right">
<div class="description-block">
<h5 class="description-header"><?php echo $ipserv.":".$Info['GamePort']; ?>
</h5>
<span class="description-text">IP Server</span>
</div>
</div>
<div class="col-md-2 col-xs-12 border-right">
<div class="description-block">
<h5 class="description-header"><?php echo $Info['Map']; ?></h5>
<span class="description-text">MAP</span>
</div>
</div>
<div class="col-md-2 col-xs-12 border-right">
<div class="">
<h5 class="description-header">
2021-02-06 00:17:51 +01:00
<?php //echo count($modnum)
2021-02-05 22:50:33 +01:00
echo $timeserver ;
2021-02-07 13:34:01 +01:00
echo " <small style='color: grey;'><i class='fas fa-sun'></i><span style='color: white;'>x".$timespeed."</span> - <i class='fas fa-moon'></i><span style='color: white;'>x".$timespeedn." </span>";
2021-02-05 22:50:33 +01:00
2021-02-02 12:44:26 +01:00
?>
2021-02-05 22:50:33 +01:00
</small></h5>
2021-01-31 13:16:02 +01:00
<span class="description-text">GAME TIME</span>
</div>
</div>
<!--
<div class="col-md-2 col-xs-12 border-right">
<div class="description-block">
<h5 class="description-header">Yes</h5> <span
class="description-text">3 PP</span>
</div>
</div>
-->
<div class="col-md-2 col-xs-12 border-right">
<div class="description-block">
2021-02-05 23:57:13 +01:00
<h5 class="description-header"> <?php echo $Info['Version']; ?></h5>
2021-01-31 13:16:02 +01:00
<span class="description-text">SERVER VERSION</span>
</div>
</div>
<div class="col-md-2 col-xs-12">
<div class="description-block">
2021-02-05 23:57:13 +01:00
<h5 class="description-header"><?php echo $hive; ?></h5>
2021-01-31 13:16:02 +01:00
<span class="description-text">HIVE</span>
</div>
</div>
</div>
</div><!-- class="card-footer" -->
</div> <!-- end card -->
</div>
</div>
<!--end row -->
<div class="row">
<div class="col-lg-12">
<div class="card">
<div class="card-body menutab">
<ul class="nav nav-tabs" id="tabs" role="tablist">
<li class="nav-item">
<a class="nav-link active show" id="overview-tab" data-toggle="tab" href="#overview" role="tab" aria-controls="overview" aria-selected="true">
2021-02-05 22:50:33 +01:00
<!--<i class="fas fa-home">-->
<i class="fas fa-chart-area"></i> Server Info</a>
2021-01-31 13:16:02 +01:00
</li>
<li class="nav-item">
2021-02-05 22:50:33 +01:00
<a class="nav-link" id="modlist-tab" data-toggle="tab" href="#modlist" role="tab" aria-controls="modlist" aria-selected="false">
<i class="fas fa-server"></i> MOD List</a>
2021-01-31 13:16:02 +01:00
</li>
2021-01-31 18:12:00 +01:00
<li class="nav-item">
2021-02-07 13:34:01 +01:00
<a class="nav-link" id="userdata-tab" data-toggle="tab" href="#userdata" role="tab" aria-controls="userdata" aria-selected="false">
<i class="fas fa-user-check"></i> User Database</a>
</li>
<li class="nav-item">
<a class="nav-link" id="map-tab" data-toggle="tab" href="#maptab" role="tab" aria-controls="maptab" aria-selected="false">
<i class="fas fa-map"></i> MAP</a>
</li>
2021-01-31 13:16:02 +01:00
</ul>
<div class="tab-content content_wrapper" id="tabs">
<!-- cadre stat Gameserver -->
<div class="tab-pane fade tab_content active show" id="overview" role="tabpanel" aria-labelledby="overview-tab">
<div class="row" style="margin-left: 30px;">
<div class="col-lg-2 col-sm-5">
2021-02-07 13:34:01 +01:00
<div class="callout callout-dark" style="padding:0">
<img src="img/<?php echo $imagemap;?>" class="arrondie2" height="50px" width="150px">
</div>
</div>
2021-01-31 13:16:02 +01:00
<div class="col-lg-2 col-sm-5">
<div class="callout callout-light">
<small class="text-muted">Last time refresh</small> <br>
2021-01-31 18:12:00 +01:00
<strong class="h4"> <?php setlocale(LC_ALL,'french'); echo date("m/d/y H:i:s"); ?> </strong>
2021-01-31 13:16:02 +01:00
<div class="chart-wrapper">
<canvas id="sparkline-chart-1" width="100" height="30"></canvas>
</div>
</div>
</div>
<div class="col-lg-2 col-sm-5">
<div class="callout callout-primary">
<small class="text-muted">Last Player actif</small> <br>
<strong class="h4"><span style="color: #20A8D8;"><?php echo $Info['Players'] ; ?></span>
<small> /<span style="color: grey;"><?php echo $Info['MaxPlayers'] ; ?></span></small>
</strong>
<div class="chart-wrapper">
<canvas id="sparkline-chart-1" width="100" height="30"></canvas>
</div>
</div>
</div>
<div class="col-lg-2 col-sm-5">
<div class="callout callout-warning">
<small class="text-muted">MOD actif</small>
<br>
2021-02-06 00:17:51 +01:00
<strong class="h4"><span style="color: #FFC107;"><?php echo count($modnum); ?></span></strong>
2021-01-31 13:16:02 +01:00
<div class="chart-wrapper">
<canvas id="sparkline-chart-1" width="100" height="30"></canvas>
</div>
</div>
</div>
<div class="col-lg-2 col-sm-5">
<div class="callout callout-success">
<small class="text-muted">Whitelist entries</small>
<br> <strong class="h4" style="color: #4DBD74">0</strong>
<div class="chart-wrapper">
<canvas id="sparkline-chart-1" width="100" height="30"></canvas>
</div>
</div>
</div>
<div class="col-lg-2 col-sm-5">
<div class="callout callout-danger">
<small class="text-muted">Bans</small>
<br> <strong class="h4" style="color: #F86C6B">0</strong>
<div class="chart-wrapper">
2021-02-07 13:34:01 +01:00
<canvas id="sparkline-chart-1" width="100" height="30"></canvas>
2021-02-05 22:50:33 +01:00
</div>
2021-01-31 13:16:02 +01:00
</div>
</div>
</div>
<div class="row" style="margin-top: 30px">
<div class="col-lg-10 col-sm-16">
<div class="card">
<div class="card-header"><i class="fas fa-server"></i>Stat Gameserver</div>
<div class="card-body">
<div class="row">
<div class="col-lg-14">
<div class="row">
<div class="form-check form-check-inline" style="width: 100% !important;">
<div class="col-sm-5">
<label class="col-form-label" for="date-input">
<strong>Server Name</strong>
</label>
</div>
<div class="col-sm-10" style="color:grey;">
<?php echo $Info['HostName'] ; ?>
</div>
</div>
</div>
<div class="row">
<div class="form-check form-check-inline"
style="width: 100% !important;">
<div class="col-sm-5">
<label class="col-form-label" for="date-input">
<strong>Server IP</strong>
<br><i></i><small> Server port</small></i>
</label>
</div>
<div class="col-sm-7">
2021-01-31 18:45:15 +01:00
<a href="#"><?php echo $ipserv; ?></a><br>
2021-02-04 22:14:31 +01:00
<a href="#"><?php echo $servport; ?></a>
2021-01-31 13:16:02 +01:00
</div>
</div>
</div>
<div class="row">
<div class="form-check form-check-inline"
style="width: 100% !important;">
<div class="col-sm-5">
<label class="col-form-label" for="date-input">
<strong>Gameserver protection</strong>
</label>
</div>
<div class="col-sm-7">
<span class="badge badge-light">Anti-Cheat ON</span>
<span class="badge badge-light">BattlEye enabled</span>
</div>
</div>
</div>
2021-02-04 22:14:31 +01:00
<div class="row">
<div class="form-check form-check-inline"
style="width: 100% !important;">
<div class="col-sm-5">
<label class="col-form-label" for="date-input">
<strong>Total User</strong>
</label>
</div>
<div class="col-sm-7">
2021-02-05 23:57:13 +01:00
<i class="fa fa-user"> <font color=orange></font></i>
2021-02-04 22:14:31 +01:00
</div>
</div>
</div>
2021-01-31 13:16:02 +01:00
<div class="row">
<div class="form-check form-check-inline"
style="width: 100% !important;">
<div class="col-sm-5">
<label class="col-form-label" for="date-input">
<strong>Best Distance Kill</strong>
<!--br>
<small> From User</small-->
</label>
</div>
2021-02-05 23:57:13 +01:00
<div class="col-sm-7"><i class="fas fa-dot-circle" style="color:#20a8d8"></i>
<font color=orange></font>
2021-01-31 13:16:02 +01:00
</div>
</div>
</div>
<div class="row">
2021-01-31 18:12:00 +01:00
<div class="form-check form-check-inline" style="width: 100% !important;">
2021-01-31 13:16:02 +01:00
<div class="col-sm-5">
<label class="col-form-label" for="date-input">
<strong>Mod information</strong>
<br><i><small> MOD Actif </small></i>
</label>
</div>
<div class="col-sm-7">
2021-02-02 11:18:46 +01:00
<!--a href="mod_server.php"--><span class="badge badge-light">
2021-02-06 00:17:51 +01:00
<b><?php echo count($modnum); ?></b> <span class="text-muted"> Mods </span></span><!--/a-->
2021-01-31 13:16:02 +01:00
</div>
</div>
</div>
<div class="row">
<div class="form-check form-check-inline" style="width: 100% !important;">
<div class="col-sm-5">
<label class="col-form-label" for="date-input">
<strong>Direct connect</strong><br>
<em><i> (clic to join) </i> </em>
</label>
</div>
<div class="col-sm-7">
2021-02-02 15:14:05 +01:00
<a style="text-decoration:none;" href='steam://connect/<?php echo $ipserv.":".$queryport."/";?>'>
2021-01-31 13:16:02 +01:00
<span class='label label-success'> GO PLAY </span>
</a>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
2021-01-31 18:12:00 +01:00
<!-- graph home page -->
2021-01-31 13:16:02 +01:00
<div class="col-lg-10 col-sm-16">
<div class="card">
<?php if( !empty( $Players ) ): ?>
<div class="card-header">List players online: <?php echo $Info['Players'] ; ?></div>
<div class="card-body">
2021-02-05 22:50:33 +01:00
2021-01-31 13:16:02 +01:00
<?php foreach( $Players as $Player ): ?>
<table>
<tr>
2021-02-05 22:50:33 +01:00
<td style="width:200px"> <span class="btn btn-large btn-primary">"Survivor" </span> </td>
<td>&emsp; <span style='color:grey'>Playtime </span>> <?php echo $Player[ 'TimeF' ]; ?> Minutes </td>
2021-01-31 13:16:02 +01:00
</tr>
</table>
<?php endforeach; ?>
2021-01-31 18:12:00 +01:00
</div>
2021-01-31 13:16:02 +01:00
<?php else: ?>
<div class="card-header">List players online: <?php echo $Info['Players'] ; ?></div>
2021-01-31 18:12:00 +01:00
<div class="card-body">
<tr>
<td colspan="2"><center><span class="btn btn-large btn-primary">( No players in game )</span></center></td> </tr>
</div>
2021-01-31 13:16:02 +01:00
2021-01-31 18:12:00 +01:00
<?php endif; ?>
2021-01-31 13:16:02 +01:00
</div>
</div>
<!-- graph home page -->
<div class="col-lg-12 col-sm-16">
<div class="card">
2021-02-05 00:18:56 +01:00
<div class="card-header">Player count last 12 hours</div>
2021-01-31 18:12:00 +01:00
<div class="card-body">
2021-01-31 18:56:08 +01:00
<?php include('./GraphPlayer.php'); ?>
2021-01-31 13:16:02 +01:00
</div>
</div>
</div>
2021-01-31 18:12:00 +01:00
2021-01-31 13:16:02 +01:00
</div>
</div>
<!-- TAB MOD list -->
<div class="tab-pane tab_content fade" id="modlist" role="tabpanel" aria-labelledby="modlist-tab">
2021-01-31 18:12:00 +01:00
<div class="row">
2021-01-31 13:16:02 +01:00
<div class="col-lg-5 col-sm-12">
<div class="card">
<div class="card-header"><i class="fas fa-users"></i>
MOD list on <span style="color:grey;"><?php echo $Info['HostName'] ; ?></span>
</div>
<div class="card-body">
<p class="before-list">
<center>
2021-02-06 00:17:51 +01:00
<span style="padding: 5px 0px 2px 20px;"><?php echo count($modnum); ?> MODS </span>
2021-02-07 13:34:01 +01:00
<span style="padding: 5px 0px 2px 20px;">IP: <a href="http://<?php echo $ipserv.":".$modport;?>"><span style="color: orange;"><?php echo $ipserv.":".$modport;?></span></a></span>
2021-01-31 13:16:02 +01:00
</center>
</p>
<table class="table_ table-bordered_ table-striped_">
<thead>
<tr>
<th style="text-align:left;"><span class='label label-info'>MOD Name</span>
</th>
<!-- <th><span class='label label-info'>steamWorkshopId</span></th>-->
</tr>
</thead>
<tbody>
<tr><td><br></td><td></td><br></tr>
2021-02-06 00:17:51 +01:00
<?php $modnum=json_decode($json); //converts to an array of objects
foreach( $modnum as $item ) { ?>
2021-01-31 13:16:02 +01:00
<tr>
<td><a href="http://steamcommunity.com/sharedfiles/filedetails/?id=<?php echo $item->steamWorkshopId?>" data-type="Link"><?php echo $item->name; ?></a></td>
</tr>
<?php } ?>
</tbody>
</table>
</div>
</div>
</div>
</div>
</div>
2021-01-31 18:12:00 +01:00
<!-- tab Metrics Graph -->
2021-01-31 13:16:02 +01:00
<div class="tab-pane tab_content fade" id="metrics" role="tabpanel" aria-labelledby="metrics-tab">
<div class="row">
<div class="col-lg-6 col-sm-8">
<div class="card">
<div class="card-header">Player population 24 hours</div>
<div class="card-body"><br>
<?php // include('graph.php'); ?>
</div>
</div>
</div>
<div class="col-lg-6 col-sm-12">
<div class="card" style="margin: 0 auto; height: 500px; width: 100%;">
<div class="card-header"> line-chart </div>
<div class="card-body"><center>
</center>
</div>
</div>
</div>
<div class="col-lg-8 col-sm-8">
<div class="card">
<div class="card-header"> 12 h </div>
<div class="card-body" style="margin: 0 auto; height: 500px; width: 100%; padding-bottom: 0;">
<center> <script src="morris/morris.js"></script>
</center>
</div>
</div>
</div>
</div>
</div>
<!-- MAP tab -->
<div class="tab-pane tab_content fade" id="maptab" role="tabpanel" aria-labelledby="map-tab">
<div class="col-lg-12 col-sm-12">
<div class="card">
2021-02-04 22:14:31 +01:00
<div class="card-header" style="padding: 15px;"> <i class="fas fa-map"></i> MAP <span style='color: grey;'><?php echo $Info['Map']; ?></span> </div>
2021-02-02 23:34:59 +01:00
<!--a href=""--> <div style="width:100%;height:620px;">
2021-02-06 13:32:02 +01:00
<iframe src="https://dayz.ginfo.gg/<?php echo $Info['Map']; ?>/#c=37;-4;3" frameborder="0" allowfullscreen style="width:100%;height:600px;" security="restricted"></iframe>
2021-02-07 13:34:01 +01:00
<!--img src="img/imagemap.jpg" style="width:100%;max-width:1200px;height:auto;padding:5px;" class="arrondie2" -->
2021-02-06 13:32:02 +01:00
</div>
2021-02-02 11:23:02 +01:00
<!--/a-->
2021-01-31 13:16:02 +01:00
</div>
</div>
</div>
<!-- tab User List -->
<div class="tab-pane tab_content fade" id="userdata" role="tabpanel" aria-labelledby="userdata-tab">
<div class="col-lg-12 col-sm-12">
<div class="card">
<div class="card-header"> <i class="fas fa-user-check"></i> User registered </div>
<div style="position:relative;padding-top:56.25%;">
2021-01-31 18:12:00 +01:00
2021-01-31 13:16:02 +01:00
</div>
</div>
</div>
</div>
2021-01-31 18:12:00 +01:00
<!-- end tabs -->
2021-01-31 13:16:02 +01:00
</div>
</div>
</div>
</div><!-- end row -->
</div>
</div>
</div>
</div>
</main>
<footer class="app-footer">
2021-02-05 23:18:22 +01:00
<div style="text-align:center;"> <span style="text-align:center;"> 🆃🅾🆇 © 2020 - <a href="https://git.echosystem.fr/Erreur32/DayZ-Stat-Server">Dayz-server-stats</a> by <a href="https://echosystem.fr/erreur32">Erreur32</a> </span>
2021-02-05 00:18:56 +01:00
</div>
2021-02-05 23:18:22 +01:00
<div class="ml-auto"> <a href="server.json.php">JSON </a> |
2021-01-31 13:16:02 +01:00
<?php
$time = microtime();
$time = explode(' ', $time);
$time = $time[1] + $time[0];
$finish = $time;
$total_time = round(($finish - $start), 3);
echo 'Generated in <a style="font-size: 12px" href="#" target="_blank">'.$total_time.'</a> sec.';
?>
</div>
</footer>
2021-01-31 18:56:08 +01:00
<script src="https://code.jquery.com/jquery-3.3.1.js"></script>
2021-02-02 11:32:14 +01:00
<script src="js/bootstrap.min.js"></script>
<script src="js/graph_loader.js"></script>
2021-01-31 18:45:15 +01:00
<script src="js/switch.js"></script>
2021-01-31 18:12:00 +01:00
<!-- menu deroulant -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
<script src="https://kit.fontawesome.com/9ba5e91dd6.js" crossorigin="anonymous"></script>
2021-01-31 18:56:08 +01:00
2021-01-31 13:16:02 +01:00
<style>
.tab-content {
margin-top: -1px;
background: #3a4149;
border: none;
border-radius: 0 0 .25rem .25rem;
}
a,
a:visited {
color: #20A8D8;
text-decoration: none;
}
a:hover {
color: orange;
text-decoration: none;
}
.description-header {
color: #26A65B;
}
.arrondie2 {
border:2px solid grey;
-moz-border-radius:7px;
-webkit-border-radius:7px;
border-radius:7px;
}
.switch {
position: relative;
display: inline-block;
}
.switch-input {
display: none;
}
.switch-label {
display: block;
width: 36px;
height: 14px;
text-indent: -100%;
clip: rect(0 0 0 0);
color: transparent;
user-select: none;
}
.switch-label::before,
.switch-label::after {
content: "";
display: block;
position: absolute;
cursor: pointer;
}
.switch-label::before {
width: 100%;
height: 100%;
background-color: #535658;
border-radius: 9999em;
-webkit-transition: background-color 0.25s ease;
transition: background-color 0.25s ease;
}
.switch-label::after {
top: 0;
left: 0;
width: 18px;
height: 18px;
border-radius: 50%;
background-color: #fff;
box-shadow: 0 0 2px rgba(0, 0, 0, 0.45);
-webkit-transition: left 0.25s ease;
transition: left 0.25s ease;
}
.switch-input:checked + .switch-label::before {
background-color: #89c12d;
}
.switch-input:checked + .switch-label::after {
left: 18px;
}
</style>
2021-02-02 11:18:46 +01:00
<!-- not implanted -->
2021-02-02 11:32:14 +01:00
<link rel="stylesheet" type="text/css" href="css/dark.css" />
2021-01-31 13:16:02 +01:00
<!-- Dark Theme -->
<script>
$("#darkTrigger").click(function(){
if ($("body").hasClass("dark")){
$("body").removeClass("dark");
}
else{
$("body").addClass("dark");
}
});
</script>