One Hat Cyber Team

View File Name : general-commingsoon.html

<!DOCTYPE html>
<html lang="zxx">
  <head>
    <meta charset="utf-8" />
    <meta http-equiv="x-ua-compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <meta
      name="description"
      content="Fully Responsive Admin & Dashboard Template"
    />
    <meta name="keyword" content="" />
    <meta name="author" content="WRAPCODERS" />
    <!--! The above 6 meta tags *must* come first in the head; any other head content must come *after* these tags !-->

    <!--! BEGIN: Google Fonts !--><link
      rel="preconnect"
      href="https://fonts.googleapis.com"
    />
    <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin />
    <link rel="preconnect" href="https://fonts.googleapis.com" />
    <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin />
    <link
      href="https://fonts.googleapis.com/css2?family=Inter:wght@100..900&family=Public+Sans:ital,wght@0,100..900;1,100..900&display=swap"
      rel="stylesheet"
    />
    <!--! END: Google Fonts !-->

    <!--! BEGIN: Favicon !-->
    <link
      rel="shortcut icon"
      type="image/x-icon"
      href="./../assets/images/favicon.ico"
    />
    <!--! END: Favicon !-->

    <!--! BEGIN: Apps Title !-->
    <title>Comming Soon | Expodash - Admin & Dashboard Template</title>
    <!--! END: Apps Title !-->

    <!--! BEGIN: Page Vendors -!-->
    <!--! END: Page Vendors -!-->

    <!--! BEGIN: MatisMenu CSS -!-->
    <link rel="stylesheet" href="./../assets/vendors/metismenu/metisMenu.min.css">
    <!--! END: MatisMenu CSS -!-->

    <!--! BEGIN: Flaticon CSS -!-->
    <link rel="stylesheet" href="./../assets/vendors/@flaticon/flaticon-uicons/css/all/all.css">
    <!--! END: Flaticon CSS -!-->

    <!--! BEGIN: Theme CSS -!-->
    <link rel="stylesheet" type="text/css" href="./../assets/css/theme.min.css">
    <!--! END: Theme CSS -!-->

    <!--! Start:: Color Modes JS -!-->
    <script src="./../assets/js/color-modes.min.js"></script>
    <!--! End:: Color Modes JS -!-->

    <!--! HTML5 shim and Respond.js for IE8 support of HTML5 elements and media queries !-->
    <!--! WARNING: Respond.js doesn"t work if you view the page via file: !-->
    <!--[if lt IE 9]>
    	<script src="https:oss.maxcdn.com/html5shiv/3.7.2/html5shiv.min.js"></script>
    	<script src="https:oss.maxcdn.com/respond/1.4.2/respond.min.js"></script>
    <![endif]-->

  </head>

  <body>
    <!--! ================================================================ !-->
    <!--! Start:: Main !-->
    <!--! ================================================================ !-->
    <div class="main-wrapper">
      <main
        class="min-vh-100 overflow-y-auto d-flex flex-column justify-content-center px-4 m-0"
        id="edash-main"
      >
        <div
          class="card max-wd-400 max-wd-sm-500 max-wd-md-600 mx-auto my-5 bg-body-tertiary"
        >
          <div class="card-body p-sm-8 p-4 text-center">
            <div
              id="countdown"
              class="d-flex align-items-center justify-content-center gap-3"
            >
              <div>
                <div
                  class="wd-64 ht-64 d-flex align-items-center justify-content-center rounded-3 bg-primary bg-opacity-5"
                >
                  <span class="fs-24 fw-semibolder text-primary days"></span>
                </div>
                <div class="fs-12 fw-semibold text-muted text-uppercase mt-2">
                  DAYS
                </div>
              </div>
              <div>
                <div
                  class="wd-64 ht-64 d-flex align-items-center justify-content-center rounded-3 bg-primary bg-opacity-5"
                >
                  <span class="fs-24 fw-semibolder text-primary hours"></span>
                </div>
                <div class="fs-12 fw-semibold text-muted text-uppercase mt-2">
                  HOURS
                </div>
              </div>
              <div>
                <div
                  class="wd-64 ht-64 d-flex align-items-center justify-content-center rounded-3 bg-primary bg-opacity-5"
                >
                  <span class="fs-24 fw-semibolder text-primary minutes"></span>
                </div>
                <div class="fs-12 fw-semibold text-muted text-uppercase mt-2">
                  MINUTES
                </div>
              </div>
              <div>
                <div
                  class="wd-64 ht-64 d-flex align-items-center justify-content-center rounded-3 bg-primary bg-opacity-5"
                >
                  <span class="fs-24 fw-semibolder text-primary seconds"></span>
                </div>
                <div class="fs-12 fw-semibold text-muted text-uppercase mt-2">
                  SECONDS
                </div>
              </div>
            </div>
            <div class="my-16 text-center">
              <h2 class="fw-semibold">We're Launching Soon</h2>
              <p class="lead max-wd-400 text-center">
                This is your opportunity to get creative amazing opportunaties
                that gives readers an idea.
              </p>
              <div class="input-group mt-6 px-12">
                <input
                  type="email"
                  class="form-control"
                  placeholder="Your email"
                />
                <button type="submit" class="btn btn-primary">Notify</button>
              </div>
            </div>
            <div class="d-flex justify-content-center gap-2">
              <a
                href="javascript:void(0);"
                class="btn btn-sm btn-icon btn-light"
                data-bs-toggle="tooltip"
                title=""
                data-bs-original-title="Follow on Facebook"
              >
                <i class="fi fi-brands-facebook"></i>
              </a>
              <a
                href="javascript:void(0);"
                class="btn btn-sm btn-icon btn-light"
                data-bs-toggle="tooltip"
                title=""
                data-bs-original-title="Follow on Twitter"
              >
                <i class="fi fi-brands-twitter"></i>
              </a>
              <a
                href="javascript:void(0);"
                class="btn btn-sm btn-icon btn-light"
                data-bs-toggle="tooltip"
                title=""
                data-bs-original-title="Follow on Instagram"
              >
                <i class="fi fi-brands-instagram"></i>
              </a>
            </div>
          </div>
        </div>
      </main>
    </div>
    <!--! ================================================================ !-->
    <!--! End:: Main !-->
    <!--! ================================================================ !-->
    <!--! ================================================================ !-->
    <!--! Footer Script !-->
    <!--! ================================================================ !-->
    <!--! BEGIN: Common Vendors !-->
    <script src="./../assets/js/vendors.min.js"></script>
    <!--! END: Common Vendors !-->

    <!--! BEGIN: Apps Common Init  !-->
    <script src="./../assets/js/common-init.min.js"></script>
    <!--! END: Apps Common Init  !-->

    <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("May 01, 2024 12:00:00").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>