IMMREX7

aku nok ndi : /home/spdtg/www/schoolmis/resources/views/schools/virtualcard/
aku nok ndi : /home/spdtg/www/schoolmis/resources/views/schools/virtualcard/coming_soon.blade.php
<!DOCTYPE html>
<html>
<style>
body, html {
  height: 100%;
  margin: 0;
}

.bgimg {
  background-image: url('/dist/images/bg_vir.jpg');
  height: 100%;
  background-position: center;
  background-size: cover;
  position: relative;
  color: white;
  font-family: "Courier New", Courier, monospace;
  font-size: 25px;
}

.topleft {
  position: absolute;
  top: 0;
  left: 16px;
}

.bottomleft {
  position: absolute;
  bottom: 0;
  left: 16px;
}

.middle {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  text-align: center;
}

hr {
  margin: auto;
  width: 40%;
}
  .container {
    color: #000;
    margin: 5rem auto;
    text-align: center;
  }
  
  h4 {
    font-size: 2em;
  }

  .title {
    font-size: 2em;
  }
  
  li {
    display: inline-block;
    font-size: 1em;
    list-style: none;
    padding: 1em;
    text-transform: uppercase;
  }
  
  li span {
    display: block;
    font-size: 3.5rem;
  }

  button {
    border: 2px solid white;
    border-radius: 5px;
    padding: 30px 30px;
    width: 100%;
    background-color: transparent;
    color: white;
    font-size: 2rem;
}

.logo{
    background: white;
    border-radius: 5px;
    padding: 13px;
    width: 70px;
    height: 70px;
}

@media (min-width:801px)  { 
            /* tablet, landscape iPad, lo-res laptops ands desktops */ 
            h4 {
                font-size: 1em;
            }

            .title {
                font-size: 1em;
            }

            li {
                font-size: 0.5em;
            }

            button {
                padding: 17px;
                width: 50%;
                font-size: 1.2rem;
            }
        }

</style>
<body>
@php 
    $school = \App\School::where('idSchool', '=', $data['idSchool'])->first(); 
@endphp
<div class="bgimg">
  <div class="topleft">
    <p class="title"><img src="{{ asset('storage/schools/' . $school->idSchool . '/' . $school->schoolLogo)}}" class="logo" alt="School MIS">
    <br>
        {{$school->schoolName}}
    </p>
  </div>
  <div class="middle">
    @if($data['is_started'] == 1)
    <h4>YOU CAN'T EDIT AFTER THIS</h4>
    @else
    <h4>YOU CAN EDIT AFTER THIS</h4>
    @endif

    <hr>
    <div id="countdown">
            <ul>
              <li><span class="days"></span>days</li>
              <li><span class="hours"></span>Hours</li>
              <li><span class="minutes"></span>Minutes</li>
              <li><span class="seconds"></span>Seconds</li>
            </ul>
          </div>
          @if($data['is_started'] == 1)
    <button onclick="location.href='/id-card/{{$data['url']}}?edit=Y';">Edit / Upload</button>
    @endif
  </div>
  <div class="bottomleft">
  <div class="copyright">
                ©
                <script>
                    document.write(new Date().getFullYear())
                </script>
            </div>
  </div>
</div>
<script>
      // Get html elements
      let day = document.querySelector('.days');
    let hour = document.querySelector('.hours');
    let minute = document.querySelector('.minutes');
    let second = document.querySelector('.seconds');

function setCountdown() {

    // Set countdown date
    let countdownDate = new Date('{{\Carbon\Carbon::parse($data['start_count'])->format('M d, Y H:i:s')}}').getTime();

    // Update countdown every second
    let updateCount = setInterval(function(){

        // Get today's date and time
        let todayDate = new Date().getTime();

        // Get distance between now and countdown date
        let distance = countdownDate - todayDate;

        let days = Math.floor(distance / (1000 * 60 * 60 *24));

        let hours = Math.floor(distance % (1000 * 60 * 60 *24) / (1000 * 60 *60));

        let minutes = Math.floor(distance % (1000 * 60 * 60 ) / (1000 * 60));

        let seconds = Math.floor(distance % (1000 * 60) / 1000);

        // Display values in html elements
        day.textContent = days;
        hour.textContent = hours;
        minute.textContent = minutes;
        second.textContent = seconds;

        // if countdown expires
        if(distance < 0){
            clearInterval(updateCount);
            document.querySelector(".container").innerHTML = '<h1>EXPIRED</h1>'
        }
    }, 1000)
}

setCountdown()
</script>
</body>
</html>