<!DOCTYPE html>
<html>
<head>
    <meta charset='utf-8'>
    <meta http-equiv='X-UA-Compatible' content='IE=edge'>
    <title>Coming Soon</title>
    <meta name='viewport' content='width=device-width, initial-scale=1'>
    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.2.3/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-rbsA2VBKQhggwzxH7pPCaAqO46MgnOM80zW1RWuH61DGLwZJEdK2Kadq2F9CUG65" crossorigin="anonymous">
    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap-icons@1.13.1/font/bootstrap-icons.min.css">
    <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=Josefin+Sans:ital,wght@0,100..700;1,100..700&display=swap" rel="stylesheet">
    
    <link rel="stylesheet" href="css/coming-soon.css">
    <style>
    @import url('https://fonts.googleapis.com/css2?family=Josefin+Sans:ital,wght@0,100..700;1,100..700&display=swap');
    body{
        font-family: "Josefin Sans", sans-serif;
    }
    </style>
    
</head>
<body>
    <div class="shape shape-1"></div>
    <div class="shape shape-2"></div>
    <div class="shape shape-3"></div>
    <div class="shape shape-4"></div>
<!--website-maintenance-->
<div class="container">
    <div class="website-maintenance-div">
        <img src="images/logo.png" alt="logo" class="logo">
        <h1>We're Coming Soon</h1>
        <p>We're currently working on some exciting updates to enhance your experience. We'll be <span>back online on July 7th at 9 AM EST</span>. Thank you for your patience!</p>
        
        <div class="countdown-div">
            <div class="timer-box">
                <div id="days" class="days">13</div>
                <div class="text-muted">Days</div>
            </div>

            <div class="timer-box">
                <div id="hours" class="days">23</div>
                <div class="text-muted">Hours</div>
            </div>

            <div class="timer-box">
                <div id="minutes" class="days">29</div>
                <div class="text-muted">Minutes</div>
            </div>

            <div class="timer-box">
                <div id="seconds" class="days">00</div>
                <div class="text-muted">Seconds</div>
            </div>
        </div>

        <p class="small">Need assistance during this time? Our support team is here to help.</p>

        <div class="text-center">
            <a href="https://support.abi.org" class="btn btn-help">Help</a>
        </div>
        
    </div>
</div>
<!--website-maintenance-closed-->

<!-- Include jQuery (CDN) -->
<script src="https://code.jquery.com/jquery-3.7.1.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/@popperjs/core@2.11.6/dist/umd/popper.min.js" integrity="sha384-oBqDVmMz9ATKxIep9tiCxS/Z9fNfEXiDAYTujMAeBAsjFuCZSmKbSSUnQlmh/jp3" crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.2.3/dist/js/bootstrap.min.js" integrity="sha384-cuYeSxntonz0PPNlHhBs68uyIAVpIIOZZ5JqeqvYYIcEL727kskC66kF92t6Xl2V" crossorigin="anonymous"></script>

<script>
    document.addEventListener('DOMContentLoaded', function() {
        // Set the date we're counting down to - July 8, 2025 at 10:00 AM
        const countDownDate = new Date("July 8, 2025 09:00:00").getTime();
        // Update the countdown every 1 second
        const x = setInterval(function() {
            // Get current date and time
            const now = new Date().getTime();
            // Find the distance between now and the countdown date
            const distance = countDownDate - now;
            // Time calculations for days, hours, minutes and seconds
            const days = Math.floor(distance / (1000 * 60 * 60 * 24));
            const hours = Math.floor((distance % (1000 * 60 * 60 * 24)) / (1000 * 60 * 60));
            const minutes = Math.floor((distance % (1000 * 60 * 60)) / (1000 * 60));
            const seconds = Math.floor((distance % (1000 * 60)) / 1000);
            // Display the result
            document.getElementById("days").textContent = days.toString().padStart(2, '0');
            document.getElementById("hours").textContent = hours.toString().padStart(2, '0');
            document.getElementById("minutes").textContent = minutes.toString().padStart(2, '0');
            document.getElementById("seconds").textContent = seconds.toString().padStart(2, '0');
            // If the countdown is finished, display a message
            if (distance < 0) {
                clearInterval(x);
                document.getElementById("days").textContent = "00";
                document.getElementById("hours").textContent = "00";
                document.getElementById("minutes").textContent = "00";
                document.getElementById("seconds").textContent = "00";
            }
        }, 1000);
    });
    </script>

</body>
</html>
