invisio v2.0

<!DOCTYPE html>
<html>
<head>
	<title>Member Dashboard</title>
    <link href='https://fonts.googleapis.com/css?family=Open+Sans:300italic,400italic,400,300,600,700%7CRaleway:700' rel='stylesheet' type='text/css'>
    <link rel="stylesheet" type="text/css" href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.0.0-alpha.6/css/bootstrap.min.css">
    <script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.0.0-alpha.6/js/bootstrap.min.js" ></script>

.btn {
 background: none;
 -webkit-transition: all .3s ease;
 -moz-transition: all .3s ease;
 transition: all .3s ease;
 min-width: 155px;
}

.btn:hover {
 background: none;
 color: #fff;
 border-color: #3498db;
 background-color: #3498db;
}

.btn-primary {
 border-radius: 25px;
 display: inline-block;
 padding: 14px 28px 13px 28px;
 line-height: 1;
 border: 2px solid #3498db;
 font-family: "Raleway", "Open Sans", "Helvetica Neue", Helvetica, Arial, sans-serif;
 font-weight: bold;
 font-size: 11px;
 text-transform: uppercase;
 letter-spacing: 1px;
 color: #3498db;
}

.btn-primary.btn-filled {
 background: #3498db;
 color: #fff;
}

.btn-white {
 border-color: #fff;
 color: #fff;
}

.btn-white:hover {
 background: #fff;
 color: #333333;
 border-color: #fff;
}

.btn-white.btn-filled {
 background: #fff;
 color: #e74c3c;
}

.btn-grey {
 border-color: #777777;
 color: #333333;
}

.pricing-tables .col-md-3:first-child .pricing-table {
 border-radius: 25px 0px 0px 25px;
}

.pricing-tables .col-md-3:last-child .pricing-table {
 border-radius: 0px 25px 25px 0px;
 border-right: 2px solid rgba(255, 255, 255, 0.2);
}

.pricing-table {
 border-top: 2px solid rgba(255, 255, 255, 0.2);
 border-bottom: 2px solid rgba(255, 255, 255, 0.2);
 border-left: 2px solid rgba(255, 255, 255, 0.2);
 text-align: center;
 padding-bottom: 40px;
}

.pricing-table .price {
 padding: 40px 0px;
 font-weight: 600;
 border-bottom: 2px solid rgba(255, 255, 255, 0.2);
}

.pricing-table .price .sub {
 font-size: 16px;
 color: rgba(255, 255, 255, 0.3);
 position: relative;
 bottom: 10px;
}

.pricing-table .price .amount {
 color: #fff;
 font-size: 56px;
 display: inline-block;
 padding: 0px 8px;
}

.pricing-table .features {
 margin: 40px 0px;
}

.pricing-table .features li {
 color: #fff;
 font-size: 16px;
 text-align: center;
 margin-bottom: 16px;
}

.pricing-table .features li:last-child {
 margin-bottom: 0px;
}

.pricing-table .features li strong {
 font-weight: 600;
}

.pricing-table.emphasis {
 background-color: #e74c3c;
}

.pricing-2 .pricing-tables .col-md-3:first-child .pricing-table {
 border-radius: 25px 0px 0px 25px;
}

.pricing-2 .pricing-tables .col-md-3:last-child .pricing-table {
 border-radius: 0px 25px 25px 0px;
 border-right: 2px solid rgba(35, 35, 35, 0.2);
}

.pricing-2 .pricing-table {
 border-top: 2px solid rgba(35, 35, 35, 0.2);
 border-bottom: 2px solid rgba(35, 35, 35, 0.2);
 border-left: 2px solid rgba(35, 35, 35, 0.2);
 text-align: center;
 padding-bottom: 40px;
}

.pricing-2 .pricing-table .features {
 margin: 0px;
}

.pricing-2 .pricing-table .features li:first-child {
 border-top: none;
}

.pricing-2 .pricing-table .features li {
 color: #333333;
 border-top: 2px solid rgba(35, 35, 35, 0.2);
 padding: 24px 0px;
 margin: 0;
}

.pricing-2 .pricing-table .price {
 border-top: 2px solid rgba(35, 35, 35, 0.2);
 padding-bottom: 24px;
 border-bottom: none;
}

.pricing-2 .pricing-table .price .amount {
 color: #333333;
}

.pricing-2 .pricing-table .price .sub {
 color: #777777;
 opacity: 0.7;
}

.pricing-2 .pricing-table.emphasis {
 background-color: #2c3e50;
}

.pricing-2 .pricing-table.emphasis .features li {
 color: #fff;
 background-color: #2c3e50 !important;
}

.pricing-2 .pricing-table.emphasis .price .amount,
.pricing-2 .pricing-table.emphasis .sub {
 color: #fff;
}

.pricing-2 .feature-list {
 padding-bottom: 0px;
}

.pricing-2 .pricing-table .features li:nth-child(even) {
 background: #f4f4f4;
}

.pricing-tables .no-pad {
 padding: 0px 15px;
}

.pricing-tables .no-pad-left {
 padding-left: 15px;
}

.pricing-tables .no-pad-right {
 padding-right: 15px;
}

.pricing-table {
 margin-bottom: 16px;
 border-radius: 25px !important;
 border: 2px solid rgba(255, 255, 255, 0.2) !important;
}

.pricing-2 .hidden-sm:first-child {
 display: none;
}

.pricing-2 .pricing-table.emphasis .features li {
 border-radius: 25px;
}

.pricing-2 .pricing-table .features li:first-child {
 font-size: 24px;
}

.pricing-tables .no-pad {
 padding: 0px 15px;
}

.pricing-tables .no-pad-left {
 padding-left: 15px;
}

.pricing-tables .no-pad-right {
 padding-right: 15px;
}

.pricing-table {
 margin-bottom: 30px;
 border-radius: 25px !important;
 border: 2px solid rgba(255, 255, 255, 0.2) !important;
}
/* Style the header with a grey background and some padding */
.header {
  overflow: hidden;
  background-color: #f1f1f1;
  padding: 20px 10px;
}

/* Style the header links */
.header a {
  float: left;
  color: black;
  text-align: center;
  padding: 12px;
  text-decoration: none;
  font-size: 18px; 
  line-height: 25px;
  border-radius: 4px;
}

/* Style the logo link (notice that we set the same value of line-height and font-size to prevent the header to increase when the font gets bigger */
.header a.logo {
  font-size: 25px;
  font-weight: bold;
}

/* Change the background color on mouse-over */
.header a:hover {
  background-color: #ddd;
  color: black;
}

/* Style the active/current link*/
.header a.active {
  background-color: dodgerblue;
  color: white;
}

/* Float the link section to the right */
.header-right {
  float: right;
}

/* Add media queries for responsiveness - when the screen is 500px wide or less, stack the links on top of each other */ 
@media screen and (max-width: 500px) {
  .header a {
    float: none;
    display: block;
    text-align: left;
  }
  .header-right {
    float: none;
  }
}
    </style>
</head>
<body>
<?php
//Add wordpress file for accessing db
include('../wp-load.php');

$firstDateOfMonth = date('Y-m-01 00:00:00');
 $firstDateOfWeek  = date('Y-m-d', strtotime("this week")); 
 $userDetails =$_COOKIE;
 $query1 = "SELECT * FROM widget_redirected_traffic_clicks WHERE affiliate_id = '".$userDetails['affiliate_id']."'  and created >= '{$firstDateOfMonth}'";

//My rows will have all the clicks from 1 st of the month
  $myrows = $wpdb->get_results($query1);
  $myrows = json_encode($myrows);
  $myrows = json_decode($myrows,true);

//Set all the clicks to 0 value first
  $monthlyClicks= 0;
  $weeklyClicks =0;
  $DailyClicks  =0;
  $monthlyRevnue= 0;
  $weeklyRevnue =0;
  $DailyRevnue  =0;

//calculating current month, current week, current day clicks by iterating 1 by 1.
  foreach ($myrows as $row) {
    if(date('Y-m-d',strtotime($row['created'])) == date('Y-m-d')){
      $DailyClicks+=1;
      $DailyRevnue+=$row['cpc'];
    }
    if(date('Y-m-d',strtotime($row['created'])) >= $firstDateOfWeek){
      $weeklyClicks+=1;
      $weeklyRevnue +=$row['cpc'];
    }
    $monthlyClicks+=1;
    $monthlyRevnue+=$row['cpc'];
  }

?>
<div class="header">
  <a href="javascript:" class="logo"><img src="images/img-011.png"></a>
  <div class="header-right">
    <a href="https://jobs.viktre.com/memberLogin/">Logout</a>    
  </div>
</div>
<div class="main-container">
<section class="pricing-2">
 <div class="container">
  <div class="row text-center">
   Hi&nbsp;<div style="font-weight: bold;">   
  <?php 
   echo $userDetails['email'] ;
   ?>,
 </div>
   <h1 style="margin-top: 20px;">Welecome to member Dashboard</h1>
  </div> 
  <div class="row pricing-tables">
   <div class="col-md-3 no-pad-right hidden-sm">
    <div class="pricing-table feature-list">
     <ul class="features">
      <li><strong>&nbsp;</strong></li>
      <li><strong>&nbsp;</strong></li>
      <li><strong>&nbsp;</strong></li>
      <li><strong>&nbsp;</strong></li>
      <li><strong>&nbsp;</strong></li>
      <li><strong>&nbsp;</strong></li>
     </ul>
    </div>
   </div>
   <div class="col-md-3 no-pad hidden-sm">
    <div class="pricing-table">
     <ul class="features">
      <li><strong>Clicks</strong></li>
      <li>Monthly : <strong><?php echo $monthlyClicks; ?></strong></li>
      <li><strong>&nbsp;</strong></li>
      <li>Weekly : <strong><?php echo $weeklyClicks; ?></strong></li>
      <li><strong>&nbsp;</strong></li>
      <li>Today : <strong><?php echo $DailyClicks; ?></strong></li>
     </ul>
     <div class="price">
      </div>
     
    </div>
   </div>
   <div class="col-md-3 no-pad hidden-sm">
    <div class="pricing-table emphasis">
     <ul class="features">
      <li>&nbsp;</li>&nbsp;
      <li>&nbsp;</li>&nbsp;
      <li>&nbsp;</li>
      <li>&nbsp;</li>
      <li>&nbsp;</li>
      <li>&nbsp;</li>
     </ul>
     <div class="price">
    </div>
    
    </div>
   </div>
   <div class="col-md-3 no-pad-left hidden-sm">
    <div class="pricing-table">
     <ul class="features">
      <li><strong>Revenue</strong></li>
      <li>Monthly : $<strong><?php echo $monthlyRevnue; ?></strong></li>
      <li><strong>&nbsp;</strong> &nbsp;</li>
      <li>Weekly : $<strong><?php echo $weeklyRevnue; ?></strong></li>
      <li><strong>&nbsp;</strong></li>
      <li>Today : $<strong><?php echo $DailyRevnue; ?></strong></li>
     </ul>
     <div class="price">
      </div>
     </a>
    </div>
   </div>
  </div>
 </div>
</section>
</div>

</body>
</html>