Dashboard

<style>
    .container{  padding-top: 20px;
      padding-bottom: 20px;}
      
    .box{
      position: absolute;
      top: 50%;
      left: 50%;
      transform: translate(-50%, -50%);
      width: 100px;
      height: 100px;
      background: #111845a6;
      box-sizing: border-box;
      overflow: hidden;
      box-shadow: 0 20px 50px rgb(23, 32, 90);
      color: white;
      padding: 20px;
    }

    .box:before{
      content: '';
      position:absolute;
      top:0;
      left:-100%;
      width:100%;
      height:100%;
      background: rgba(255,255,255,0.1);
      transition:0.5s;
      pointer-events: none;
    }

    .box:hover:before{
      left:-50%;
      transform: skewX(-5deg);
    }

    .box .content{
      position:absolute;
      top:15px;
      left:15px;
      right:15px;
      bottom:15px;
      padding:20px;
      text-align:center;
      box-shadow: 0 5px 10px rgba(9,0,0,0.5);
      
    }

    .box span{
      position: absolute;
      top: 0;
      left: 0;
      width: 100%;
      height: 100%;
      display: block;
      box-sizing: border-box;
    }

    .box span:nth-child(1)
    {
      transform:rotate(0deg);
    }

    .box span:nth-child(2)
    {
      transform:rotate(90deg);
    }

    .box span:nth-child(3)
    {
      transform:rotate(180deg);
    }

    .box span:nth-child(4)
    {
      transform:rotate(270deg);
    }

    .box span:before
    {
      content: '';
      position: absolute;
      width:100%;
      height: 2px;
      background: #50dfdb;
      animation: animate 4s linear infinite;
    }

    @keyframes animate {
      0% {
      transform:scaleX(0);
      transform-origin: left;
      }
      50%
      {
        transform:scaleX(1);
      transform-origin: left;
      }
      50.1%
      {
        transform:scaleX(1);
      transform-origin: right;
        
      }
      
      100%
      {
        transform:scaleX(0);
      transform-origin: right;
        
      }
      
      
    }
</style>

<section>
  <div class="container">
      <div class="box">
        <span></span>
        <span></span>
        <span></span>
        <span></span>
        <div class="content">
          <p>Test!</p>
        </div>
      </div>
  </div>
</section>

 

-> Redirect all www requests to non-www requests
-> Always force SSL

RewriteCond %{HTTPS} !=on
RewriteRule ^ https://%{HTTP_HOST}%{REQUEST_URI} [L,R=301]
RewriteCond %{HTTP_HOST} ^www\.(.*)$ [NC]
RewriteRule ^(.*)$ https://%1/$1 [R=301,L]

     /* A little styling */
     border: .15em solid #fff;
     box-shadow: 0 .075em .2em .05em rgba(0,0,0,.25);

     /* fixes a minor clipping issue in Chrome */
     background-origin: border-box;
   }

.pie {
  background-image: conic-gradient(
    #d44 calc(3.6deg * var(--segment1)),
    #fc3 0 calc(3.6deg * var(--segment2)),
    #ac0 0
  );
}
</style>

<div class="pie" style="--segment1: 40; --segment2: 70;"></div>
<div class="pie" style="--segment1: 20; --segment2: 50;"></div>
<div class="pie" style="--segment1: 10; --segment2: 80;"></div>

Save this code into a .html file, open in your browser and see what is does, you have now 3 pie charts
only with HTML and CSS Code.

<style>@keyframes textflicker {
  from {text-shadow: 1px 0 0 #C1C1C1, -2px 0 0 #000000}
  to {text-shadow: 2px 0.5px 2px #C1C1C1, -1px -0.5px 2px #000000;}}
#statered2 { padding: 1em;
       color: #CcCcCc;
       font-size: 1em;
       line-height: 1;
       text-shadow: 0.06rem 0 0.06rem #2c2c2c, -0.125rem 0 0.06rem #2c2c2c;
       letter-spacing: 0.125em;
       animation-duration: 0.5s;
       animation-name: textflicker;
       animation-iteration-count: infinite;
       animation-direction: alternate;}
</style>
<font id="statered2">This is a Flicker Text</font>

Example:
netsh interface portproxy add v4tov4 listenaddress=192.168.178.54 listenport=1254 connectaddress=192.168.178.55 connectport=80