<!DOCTYPE html>
<html>
    <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" />
        <link href="./css/index.css" rel="stylesheet" type="text/css" />
        <link href="./css/cursor.css" rel="stylesheet" type="text/css" />
        <link href="./css/preload.css" rel="stylesheet" type="text/css" />
        <link href="./css/video.css" rel="stylesheet" type="text/css" />
        <link href="./css/countdown.css" rel="stylesheet" type="text/css" />
        <link
            href="https://cdn.jsdelivr.net/npm/boxicons@2.0.5/css/boxicons.min.css"
            rel="stylesheet"
        />
        <!-- CSS only -->
        <link
            href="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/css/bootstrap.min.css"
            rel="stylesheet"
            integrity="sha384-1BmE4kWBq78iYhFldvKuhfTAU6auU8tT94WrHftjDbrCEXSU1oBoqyl2QvZ6jIW3"
            crossorigin="anonymous"
        />
        <!-- font-awesome -->
        <link
            rel="stylesheet"
            href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0/css/all.min.css"
            referrerpolicy="no-referrer"
            integrity="sha512-9usAa10IRO0HhonpyAIVpjrylPvoDwiPUiKdWk5t3PyolY1cOd4DSE0Ga+ri4AuTroPR5aQvXU9xC6qOPnzFeg=="
            crossorigin="anonymous"
        />
        <script
            src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.6.0/jquery.slim.min.js"
            integrity="sha512-6ORWJX/LrnSjBzwefdNUyLCMTIsGoNP6NftMy2UAm1JBm6PRZCO1d7OHBStWpVFZLO+RerTvqX/Z9mBFfCJZ4A=="
            crossorigin="anonymous"
        ></script>
        <title>Xpecto | Technical Fest</title>
        <style>
            header {
                display: flex;
                padding-left: 40px;
                padding-right: 10px;
            }
            .showcase.active {
                right: 250px;
            }
            @media (max-width: 768px) {
                .showcase.active {
                    right: 50%;
                }
            }
            @media (max-width: 480px) {
                .showcase.active {
                    right: 75%;
                }
                header .logo {
                    font-size: 1.5rem;
                }
        
                header {
                    /* padding-left: 10px; */
                    padding-right: 10px;
                    display: flex;
                    /* align-items: flex-end; */
                }
                .showcase {
                    padding-right: 50px;
                }
            }
        

        </style>
    </head>

    <body>
        <div class="bg">
            <!-- <h1>Xpecto'22</h1> -->
        </div>

        <div class="preloader">
            <h1 class="jumbotron">Xpecto' 22</h1>
            <h2 style="text-align: center;">The Technical Fest of IIT Mandi</h2>
            <!-- <div class="logo">
            <img src="./images/xpecto design.svg" alt="none" height="150px" width="150px">

        </div> -->
            <div class="enter">
                <img src="./images/arrow-right.svg" alt="arrow-right" />
                <% if(!authenticated){ %>
                <a id="enter" href="#">Enter</a>
                <%}else {%>
                <a id="enter" href="#">Explore</a>
                <%}%>
            </div>
            <div class="row"><%- include('partials/countdown.ejs') %></div>
        </div>

        <div class="home">
            <section class="showcase">
                <header>
                    <a href="/" class=""><h2 class="logo">Xpecto</h2></a>
                    <div class="toggle"></div>
                </header>
                <video
                    src="./images/campus_tour.mp4"
                    muted
                    loop
                    autoplay
                ></video>
                <div class="overlay"></div>
                <div class="wrapper">
                    <div class="text">
                        <h5>IIT Mandi's</h5>
                        <h2>XPECTO '22</h2>
                        <p>Technical Fest</p>
                        <a href="/events">Explore Events</a>
                        <% if(!authenticated){ %>
                        <a href="/auth/login">Signin with Google</a>
                        <%}%>
                        <!-- <% if(authenticated){ %>
                        <a href="/profile">Profile</a>
                        <% } else {%>
                        <a href="/auth/login">Login</a>
                        <%}%> -->
                    </div>
                    <div class="logo bg-dark">
                        <img
                            src="https://user-images.githubusercontent.com/56690827/162669761-372be060-ea2f-4712-b77f-d9f8c6a89622.png"
                            alt=""
                            class="src img-fluid"
                        />
                    </div>
                </div>
                <ul class="social">
                    <li>
                        <a href="#"
                            ><img src="https://i.ibb.co/x7P24fL/facebook.png"
                        /></a>
                    </li>
                    <li>
                        <a href="#"
                            ><img src="https://i.ibb.co/Wnxq2Nq/twitter.png"
                        /></a>
                    </li>
                    <li>
                        <a href="#"
                            ><img src="https://i.ibb.co/ySwtH4B/instagram.png"
                        /></a>
                    </li>
                </ul>
            </section>
            <%- include('partials/navbar_menu.ejs') %>
        </div>

        <div class="sound">
            <button id="toggle">Sound: <span id="status">OFF</span></button>
        </div>

        <img id="cursor" src="./images/gear.png" alt="none" />
        <audio
            id="click"
            class="click-sound"
            src="https://fifpro-gallery-staging.ams3.digitaloceanspaces.com/media/click.mp3"
        ></audio>
        <audio class="anthem" src="./audio/anthem.mp3" loop="true" muted></audio>

        <script src="./js/script.js" type="text/javascript"></script>
        <script src="./js/cursor.js"></script>
        <script src="./js/sound.js"></script>
        <script src="./js/scroll.js"></script>
        <script src="./js/countdown.js" type="text/javascript"></script>
    </body>
</html>
