<!DOCTYPE html>
<html lang="pt-br">

<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 rel="stylesheet" href="/css/style.css">
    <title>Blue Séries</title>

    <!-- <script src="https://accounts.google.com/gsi/client" async defer></script> -->
    <script src="https://unpkg.com/jwt-decode/build/jwt-decode.js"></script>
    <!-- <script src="/js/scriptLoginGoogle.js"></script> -->

</head>

    <body>

        <nav>

            <input type="checkbox" id="check">
            <label for="check" class="checkbtn">
                <i class="fas fa-bars"></i>
            </label>

            <ul>

                <li> <a href="/cadastro"> Cadastre </a></li>
                <li><h1> <a href="/">  Blue Séries </a></h1></li>
                <li> <a href="/lista"> Lista </a></li>
                <!-- <div id="buttonDiv"></div>  -->


            </ul>

        </nav>

        <div class="app">

            <div class="cardList">

                <button class="cardList__btn btn btn--left">

                    <div class="icon">

                        <svg>

                        <use xlink:href="#arrow-left"></use>

                        </svg>

                    </div>
                    
                </button>

                <div class="cards__wrapper">
                    <div class="card current--card">
                        <div class="card__image">
                        <img src="/img/supernatural.jpg" alt="" />
                        </div>
                    </div>

                    <div class="card next--card">
                        <div class="card__image">
                        <img src="/img/the last kingdom.jpg" alt="" />
                        </div>
                    </div>

                    <div class="card previous--card">
                        <div class="card__image">
                        <img src="/img/vikings.jpg" alt="" />
                        </div>
                    </div>
                </div>

                <button class="cardList__btn btn btn--right">

                    <div class="icon">

                        <svg>

                            <use xlink:href="#arrow-right"></use>

                        </svg>

                    </div>

                </button>

            </div>

        <div class="infoList">
            <div class="info__wrapper">
                <div class="info current--info">
                    <h1 class="text name">Supernatural</h1>

                    <h4 class="text location">Terror/Suspense</h4>
                </div>

                <div class="info next--info">
                    <h1 class="text name">The Last Kingdom</h1>

                    <h4 class="text location">History/Action</h4>
                </div>

            <div class="info previous--info">
                <h1 class="text name">Vikings</h1>

                <h4 class="text location">War/Drama</h4>

            </div>

            </div>
        </div>

        <div class="app__bg">
            <div class="app__bg__image current--image">
            <img src="/img/supernatural.jpg" alt="" />
            </div>

            <div class="app__bg__image next--image">
            <img src="/img/the last kingdom.jpg" alt="" />
            </div>

            <div class="app__bg__image previous--image">
            <img src="/img/vikings.jpg" alt="" />
            </div>
        </div>
        </div>

        <div class="loading__wrapper">
        <div class="loader--text">Loading...</div>

        <div class="loader">
            <span></span>
        </div>
        </div>

        <svg class="icons" style="display: none">
        <symbol
            id="arrow-left"
            xmlns="http://www.w3.org/2000/svg"
            viewBox="0 0 512 512">
            <polyline
            points="328 112 184 256 328 400"
            style="
                fill: none;
                stroke: #fff;
                stroke-linecap: round;
                stroke-linejoin: round;
                stroke-width: 48px;
            "/>
        </symbol>

        <symbol id="arrow-right" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512" >
            <polyline points="184 112 328 256 184 400" style="fill: none; stroke: #fff; stroke-linecap: round; stroke-linejoin: round; stroke-width: 48px;"/>
        </symbol>
        </svg>

        <footer>

            <p>Todos os direitos reservados para </p>

        </footer>
        

        <script
        type="text/javascript"
        src="https://unpkg.com/imagesloaded@4/imagesloaded.pkgd.min.js"
        ></script>
        <script
        type="text/javascript"
        src="https://cdnjs.cloudflare.com/ajax/libs/gsap/3.3.3/gsap.min.js"
        ></script>
        <script type="text/javascript" src="/js/script.js"></script>


        </form>
        
        

    </body>

</html>
