<!DOCTYPE html>
<html lang="en">

<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="Author: Domenico Marabello for UNIMI">
    <title>Atmos.com | Home</title>
    <link rel="stylesheet" href="stylesheets/Index/index.css">
    <link rel="stylesheet" href="stylesheets/Common/common.css">
    <link rel="stylesheet" href="stylesheets/Index/index-responsive.css">

</head>

<body>
    <div class="main-research-container">
        <div class="navbar-container">

            <div class="logo-container">
                <a href="/">
                    <img alt="logo" class="logo" src="images/homepage/icons/logo.png">
                </a>
            </div>

            <div class="navbar-button-container">
                <a href="/"><button class="navbar-item">Home</button>
                    <a href="/dashboard"><button class="navbar-item" href="/">Forecast</button></a>
            </div>

            <% if (!user) { %>
                <div class="login-signup-container" id="loginSignupForm">
                    <form>
                        <button formaction="/login" class="login">login</button>
                        <button formaction="/signup" class="sign-up">sign up</button>
                    </form>
                </div>
                <% }else{ %>
                    <div class="profile-container">
                        <img alt="user icon" src="images/dashboard/user.png" class="profile-picture">
                        <p>
                            <%=user.email%>
                        </p>
                    </div>
                    <%}%>
        </div>

        <div class="main-research">
            <p class="title">Weather info. Just a click away.<br>
                <span>
                    Atmos is a powerful tool that allows you to get weather data on any city in the world.
                </span>
            </p>
            <div>
                <form action="/dashboard" method="POST" class="research-form">
                    <input class="forecast-input" placeholder="Rome, IT" id="search_term" name="location"
                        onfocus="this.style.border = 'none'" autocomplete="off">
                    <p id="city_name" style="font-size: 35px;"></p>
                    <button onclick="showBufferingIcon()" class="city-forecast-button">
                        Weather
                        Forecast
                    </button>
                    <button onclick="geolocateUser(), hideStatusMessages()" type="button" id="geolocateUserButton"
                        class="city-forecast-button" style="width:60px">
                        <img alt="location icon" src="images/homepage/icons/location.png"
                            style="height:25px;width:25px">
                    </button>
                </form>

                <img alt="rocket icon" class="buffering-rocket-icon" src="images/homepage/icons/rocket.svg" id="rocket"
                    type="submit">
            </div>
            <% if(cityNotFound){ %>
                <p class="city-not-found" id="cityNotFound"> Oops! Lost in space üöÄ - try locations from
                    Earth üåè! </p>
                <% } %>
        </div>

    </div>


    <div class="overview-card">

        <p class="website-overview-card">
            <span class="number-highlight">01.</span>

            <span class="title">
                Easy and user-friendly<br>
            </span>
            <span class="description">
                Our website is designed with simplicity and ease of use in mind. Select a
                city and easily access the weather information you need, all in a user-friendly and straightforward
                platform. We strive to make accessing weather information quick and hassle-free.
            </span>
        </p>
        <img alt="umbrella" src="images/homepage/website_overview/umbrella.svg" class="umbrella-image">
    </div>

    <div class="overview-card second">

        <img alt="exploration" src="images/homepage/website_overview//exploration.svg" class="overview-image-mountain">

        <p class="website-overview-card">
            <span class="number-highlight">02.</span>

            <span class="title">
                Worldwide coverage<br>
            </span>
            <span class="description">
                Our website provides up-to-date and accurate weather information for cities worldwide. The data is
                directly fetched from meteorological stations via our powerful OpenWeatherMap API. Stay ahead of the
                weather no matter where you are located.
            </span>
        </p>

    </div>

    <div class="overview-card">

        <p class="website-overview-card">
            <span class="number-highlight">03.</span>

            <span class="title">
                Live weather alerts<br>
            </span>
            <span class="description">
                Stay informed with our live weather alerts, providing accurate and up-to-date weather information for
                cities worldwide. Stay ahead of changing weather conditions and be prepared with our quick and reliable
                alerts.
            </span>
        </p>

        <img alt="notification" src="images/homepage/website_overview//notification.svg" class="notification-image">

    </div>



    <div style="margin-top: 80px;">
        <svg class="waves" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"
            viewBox="0 24 150 28" preserveAspectRatio="none" shape-rendering="auto">
            <defs>
                <path id="gentle-wave" d="M-160 44c30 0 58-18 88-18s 58 18 88 18 58-18 88-18 58 18 88 18 v44h-352z" />
            </defs>
            <g class="parallax">
                <use xlink:href="#gentle-wave" x="48" y="0" fill="#3554b1" />
                <use xlink:href="#gentle-wave" x="48" y="5" fill="#2f4a9d" />

                <use xlink:href="#gentle-wave" x="48" y="3" fill="#233876" />

                <use xlink:href="#gentle-wave" x="48" y="7" fill="#1d3062" />
            </g>
        </svg>

    </div>



    <div class="why-card-row-container">

        <p class="row-title">
            Why using our tool?<br>
            <span class="row-subtitle"> a handful of things we're proud of.</span>
        </p>

        <div class="why-card-row">
            <div class="why-card">
                <div class="why-card-logo-container">
                    <img alt="fuse box" src="images/homepage/icons/fuse-box.png" class="why-card-logo">
                </div>
                <p class="why-card-description">
                    <span class="why-card-title">Powerful</span><br><br> Our website is optimized for fast performance,
                    with efficient API calls, database fetching, and quick server response-times. Experience a smooth
                    and powerful solution for your weather needs.
                </p>
            </div>
            <div class="why-card">
                <div class="why-card-logo-container">
                    <img alt="optimization box" src="images/homepage/icons/optimization.png" class="why-card-logo">
                </div>
                <p class="why-card-description">
                    <span class="why-card-title">Totally Optimized</span><br><br> This website's API calls, database
                    fetching and processes are executed in the most efficient way possible in order to enhance
                    optimization, loading times, and server response-time.
                </p>
            </div>
            <div class="why-card">
                <div class="why-card-logo-container">
                    <img alt="support box" src="images/homepage/icons/support.png" class="why-card-logo">
                </div>
                <p class="why-card-description">
                    <span class="why-card-title">Worldwide Support</span><br><br> Having trouble using our website? Fill
                    in the contact form to send us feedback. Answers are to be expected in a working day. From anywhere.
                </p>
            </div>
        </div>
    </div>

    <div class="our-fake-partners">
        <img alt="partner" class="fake-partner"
            src="https://cdn.logojoy.com/wp-content/uploads/2019/02/20102301/google%402x.png">

        <img alt="partner" class="fake-partner"
            src="https://cdn.logojoy.com/wp-content/uploads/2019/02/20102302/techCrunch%402x.png">

        <img alt="partner" class="fake-partner"
            src="https://cdn.logojoy.com/wp-content/uploads/2019/02/20102302/huffpost%402x.png" style="height:30px">
        <img alt="partner" class="fake-partner"
            src="https://cdn.logojoy.com/wp-content/uploads/2019/02/20102258/Forbes%402x.png">

        <img alt="partner" class="fake-partner"
            src="https://cdn.logojoy.com/wp-content/uploads/2019/02/20102300/globe-and-mail%402x-350x37.png"
            style="height:30px;">
    </div>

    <div class=" footer ">
        <div class="inside-container ">
            <div style="display:flex;flex-direction: row; ">
                <div class="social-container ">
                    <p class="weather-solutions-title ">WEATHER SOLUTIONS</p>
                    <div class="social-icons-container ">
                        <img alt="instagram icon" src="images/homepage/icons/Social_icons/instagram.svg "
                            class="social-icon ">
                        <img alt="twitter icon" src="images/homepage/icons/Social_icons/twitter.svg "
                            class="social-icon ">
                        <img alt="linkedin icon" src="images/homepage/icons/Social_icons/linkedin.svg "
                            class="social-icon ">
                        <img alt="youtube icon" src="images/homepage/icons/Social_icons/youtube.svg "
                            style="height:35px;width:35px; ">

                    </div>
                </div>
                <div class="footer-column">
                    <p class="footer-column-title "> Product </p>
                    <p class="footer-clickable "> Use guide </p>
                    <p class="footer-clickable "> Status </p>
                    <p class="footer-clickable "> Technologies </p>
                </div>
                <div class="footer-column" style="margin-left:120px;">
                    <p class="footer-column-title "> Company </p>
                    <p class="footer-clickable "> About </p>
                    <p class="footer-clickable "> News </p>
                    <p class="footer-clickable "> Branding </p>
                    <p class="footer-clickable "> Developers </p>
                </div>
                <div class="footer-column" style="margin-left:120px;">
                    <p class="footer-column-title "> Policies </p>
                    <p class="footer-clickable "> Terms </p>
                    <p class="footer-clickable "> License </p>
                    <p class="footer-clickable "> Cookies </p>
                    <p class="footer-clickable "> Guidelines </p>
                    <p class="footer-clickable "> Privacy </p>
                    <p class="footer-clickable "> Credits </p>
                    <p class="footer-clickable "> Moderation </p>
                </div>
            </div>
            <div class="footer-bottom-container ">
                <div class="logo-container ">
                    <img alt="logo" class="logo " src="images/homepage/icons/logo.png "
                        style="height:45px;width:auto; ">
                </div>
                <%if(user){%>
                    <form method="POST">
                        <div class="login-signup-container " class="logout-button">
                            <button formaction="/logout" class="sign-up">Log out</button>
                        </div>
                    </form>
                    <%}%>
            </div>
        </div>
    </div>
    <script type="text/javascript " src="js/index_scripts.js "></script>
    <script src="https://maps.googleapis.com/maps/api/js?key=AIzaSyBNbaCOsry-bPOnTqL3Iy0E0B_sV1BHXUQ
    &libraries=places&types=locality&language=en&callback=initAutocomplete"></script>

</body>

</html>