<!DOCTYPE html>
<html lang="en">
    <head>
        <!-- Required meta tags -->
        <meta charset="utf-8">
        <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
        <meta name="description" content="Capacity Dashboard">
        <meta name="author" content="capacity">
        <title>Grand National Dashboard</title>
        <!-- favicon -->
        <link rel="shortcut icon" href="{{ url_for('static', path='assets/favicon/favicon-192x192.png')}}">
        <!-- CSS -->
        <!-- bootstrap css -->
        <link rel="stylesheet" type="text/css" href="{{ url_for('node_modules', path='/bootswatch/dist/flatly/bootstrap.min.css') }}">
        <!-- fakeloader css -->
        <link rel="stylesheet" type="text/css" href="{{ url_for('node_modules', path='/jq-fakeloader/css/fakeLoader.css') }}">
        <!-- morphist css -->
        <link rel="stylesheet" type="text/css" href="{{ url_for('bower_components', path='Morphist/dist/morphist.css') }}">
        <!-- animate css -->
        <link rel="stylesheet" type="text/css" href="{{ url_for('bower_components', path='animate.css/animate.min.css') }}">
        <!-- dashboard css -->
        <link rel="stylesheet" type="text/css" href="{{ url_for('static', path='/css/gn.css') }}">
    </head>
    <body>
        <!-- javascript -->
        <!-- jquery js -->
        <script type="text/javascript" src="{{ url_for('node_modules', path='/jquery/dist/jquery.min.js') }}"></script>
        <!-- bootstrap js -->
        <script type="text/javascript" src="{{ url_for('node_modules', path='/bootstrap/dist/js/bootstrap.bundle.js') }}"></script>
        <!-- font-awesome js -->
        <script type="text/javascript" src="{{ url_for('node_modules', path='/@fortawesome/fontawesome-free/js/fontawesome.min.js') }}"></script>
        <!-- fakeloader js -->
        <script type="text/javascript" src="{{ url_for('node_modules', path='/jq-fakeloader/js/fakeLoader.js') }}"></script>
        <!-- morphist js -->
        <script type="text/javascript" src="{{ url_for('bower_components', path='/Morphist/dist/morphist.js') }}"></script>
        <!-- final countdown -->
        <script type="text/javascript" src="{{ url_for('bower_components', path='/jquery.countdown/dist/jquery.countdown.js') }}"></script>
        <!-- begin document -->
        <div class="fakeLoader"></div>
        <script type="text/javascript">
        $.fakeLoader({'timeToHide':1200, 'spinner':'spinner4', 'bgColor': '#00003c'});
        </script>
        <header>
            <div class="overlay"></div>
            <video playsinline="playsinline" autoplay="autoplay" muted="muted" loop="loop">
                <source src="{{ url_for('static', path='/assets/videos/gn19-short.mp4')}}" type="video/mp4">
            </video>
            <div class="container h-100">
                <div class="d-flex h-100 text-center align-items-center">
                    <div class="w-100 text-white">
                        <img src="{{ url_for('static', path='/assets/images/wh_logo.png') }}" width="40%" style="padding-bottom: 40px;">
                        <div id="event-rotate">
                            <div>
                                <h1 class="display-2 hoxton-font">Grand National 2020</h1>
                                <span class="lead mb-0 hoxton-font display-3" id="gn-countdown"></span>
                            </div>
                            <div>
                                <h1 class="display-2 hoxton-font">Cheltenham 2020</h1>
                                <span class="lead mb-0 hoxton-font display-3" id="chelt-countdown"></span>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </header>
        <div class="container-fluid">
            <center>
            <div class="row">
                <div class="col-6" style="margin-left: -10px">
                    <h2 class="hoxton-font" class="hoxton-font">Cheltenham Festival 2020</h2>
                    <hr style="width: 50%;">
                    <h4 class="hoxton-font">Day One 🐴 Tuesday 10th March</h4>
                    <h5 class="hoxton-font font-italic">Featuring the Unibet Champion Hurdle</h5>
                    <hr style="width: 50%;">
                    <h4 class="hoxton-font">Day Two 🐴 Wednesday 11th March</h4>
                    <h5 class="hoxton-font font-italic">Featuring the Betway Queen Mother Champion Chase</h5>
                    <hr style="width: 50%;">
                    <h4 class="hoxton-font">Day Three 🐴 Thursday 12th March</h4>
                    <h5 class="hoxton-font font-italic">Featuring the Ryanair Chase</h5>
                    <hr style="width: 50%;">
                    <h4 class="hoxton-font">Gold Cup Day 🏆 Friday 13th March</h4>
                    <h5 class="hoxton-font font-italic font-gold">Featuring the <i class="fas fa-wine-bottle" style="color: gold;"></i> Magners Cheltenham Gold Cup</h5>
                </div>
                <div class="col-6" style="margin-right: -10px">
                    <h2 class="hoxton-font">Grand National 2020</h2>
                    <hr style="width: 50%;">
                    <h4 class="hoxton-font">Liverpool's Day 🐴 Thursday 2nd April</h4>
                    <h5 class="hoxton-font font-italic">Featuring the Betway Aintree Hurdle</h5>
                    <hr style="width: 50%;">
                    <h4 class="hoxton-font">Ladies Day at Aintree 🐴 Friday 3rd April</h4>
                    <h5 class="hoxton-font font-italic">Featuring the JLT Melling Steeple </h5>
                    <hr style="width: 50%;">
                    <h4 class="hoxton-font">Grand National Day 🏆 Saturday 4th April</h4>
                    <h5 class="hoxton-font font-italic font-gold">Featuring the Randox Health Grand National Steeple Chase</h5>
                    <hr style="width: 50%;">
                    <h4 class="hoxton-font animated pulse" id="first-favourite"><i class="fas fa-horse"></i> 1st Favourite: Tiger Roll 🇮🇪</h4>
                    <h5 class="hoxton-font"><i class="fas fa-horse"></i> 2nd Favourite: Burrows Saint 🇫🇷</h4>
                </div>
            </div>
            </center>
        </div>
        <!-- custom js -->
        <script type="text/javascript" src="{{url_for('static', path='/js/gn.js')}}"></script>
    </body>
</html>
