<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    
    <meta name="viewport" content="width=device-width, initial-scale=1" />
    <link rel="stylesheet" href="CSS\reset.css">
    <link rel="stylesheet" href="CSS\style.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=Figtree&display=swap" rel="stylesheet"> 
    <link href="https://fonts.googleapis.com/css2?family=Genos&amp;display=swap" rel="stylesheet">

    <link href="https://fonts.googleapis.com/css2?family=Indie+Flower&display=swap" rel="stylesheet"> 
    
    <script src="https://unpkg.com/validator@latest/validator.min.js"></script>
    <script src='https://unpkg.com/maplibre-gl@3.0.1/dist/maplibre-gl.js'></script>
    <link href='https://unpkg.com/maplibre-gl@3.0.1/dist/maplibre-gl.css' rel='stylesheet' />   
   
    
  
</head>

<body>

  <%- include('./partials/header') %>

<main>

  <section class="aboutmap">
    
    <p>One of the goals of Nature Dopes is to build up a log of where wild flowers are found. Sure we don't need to log a Dandelion (as valuable as they are!) every time we find one. 
        But there are many genres of flowers which are much less common and becoming even more rare due to degradation of their natural environments. 
        We would like users to input their finds onto the map to build up a working knowledge of where communities of such flowers are found.  </p>

  </section>

    <h1 id="screen-warning"></h1>
    
    <script>
    let message = 'Please Rotate Device for mobiles';
    
    function resizeMessage(){    
    
        let w = window.innerWidth;
        if(w < 500){
        document.getElementById('screen-warning').innerHTML = message;
        
        } else {
        document.getElementById('screen-warning').innerHTML = '';
        }
           
        }
    window.onresize = resizeMessage    
    console.log(window.innerWidth);
    
    

    </script>



    <section class="map-overlay">

        <div id='map' alt="awaiting map, please wait">
        
          
        </div>
        
       
        <aside class="mapSideBar">  
          
          <div class="mapAsideMsg">
            <p> Please login or Register to access our Map section</p>
          </div> 
            
            <button onclick="document.getElementById('id01').style.display='block'" class="loginButton">Login</button>
            <button onclick="document.getElementById('id02').style.display='block'" class="registerButton">Register</button>
          

          <!-- The Modal id01 ---------------------------------------------------->
          <div id="id01" name="Login View" class="modal">
            <span onclick="document.getElementById('id01').style.display='none'"
          class="close" title="Close Modal">&times;</span>
          
            <!-- Modal Content -->
            <form class="modal-content animate" method="post" >
              <div class="imgcontainer">
                <img src="Images/logomini.png" alt="Avatar" class="avatar">
              </div>
          
              <div class="container">
                <label for="username"><b>Username</b></label>
                <input type="text" id='username' placeholder="Enter Username" name="username" required>

                  

                <label for="password"><b>Password</b></label>
                <input type="password" id='password' placeholder="Enter Password" name="password" required>
          
                <div class="buttonDiv">
                  <button class='loginButton' type="submit" formaction="/maplogin">Login</button>
                 
                </div>
                
              </div>
      
          
              <div class="container" style="background-color:#f1f1f1">
                <button type="button" onclick="document.getElementById('id01').style.display='none'" class="cancelbtn">Cancel</button>
                <span class="psw"> <a href="reset-password-email">Forgot password?</a></span>
              </div>
            </form>
          </div>

          <!--------------------Register Modal id02-------------------------------------->

          <div id="id02" name="Register view" class="modal">
            <span onclick="document.getElementById('id02').style.display='none'"
          class="close" title="Close Modal">&times;</span>
          
            <!-- Modal Content -->
            <form class="modal-content animate" id="register">
              <div class="imgcontainer">
                <img src="Images/logomini.png" alt="Avatar" class="avatar">
              </div>
              
              <aside id="postRegister-response-msg" class="container" >
                  Please complete the form below then click 'register' to create a new user. 
              </aside>
              <div class="container">
                <label for="username_r"><b>Username</b></label>
                <input type="text" id='username_r' placeholder="Enter Username" name="username" required>

                <label for="email"><b>Email</b></label>
                <input type="text" id="email" placeholder="Enter email address" name="email" required>

                <label for="password_r"><b>Password</b></label>
                <input type="password" id='password_r' placeholder="Enter Password" name="password" required>
          
                <div class="buttonDiv">
                  
                  <button id="register_button" class='registerButton' type="button">Register</button>
                </div>
                  
              </div>
      
          
              <div class="container" style="background-color:#f1f1f1">
                <button type="button" onclick="document.getElementById('id02').style.display='none'" class="cancelbtn" id="cancelbtn">Cancel</button>
                
              </div>
            </form>
          </div>
             
        </aside>
          
        
    </section>
    
    
   <script>
        
        
         
        let map = new maplibregl.Map({
        container: 'map',
        style: 'https://api.maptiler.com/maps/streets/style.json?key=CMRIccwlZz6zI6QR2E5I ', // stylesheet location
        center: [-74.5, 40], // starting position [lng, lat]
        zoom: 1 // starting zoom
            
        }); 

      


        //console.log(newMarker);
    


       
    </script>
 
   

</main>


<%- include('./partials/footer') %>


<script src="./views-js/register.js"></script>
</body>
</html>