<!doctype html>
<html lang="en">
  <head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>SJDA Competition</title>
    <meta name="description" content="SJDA Competition Application Tool">
    <meta name="author" content="Tanja Sadow, Alex Zupancich, JDMIS">
    <meta name="generator" content="Crafted by hand">
    <link rel="manifest" href="/manifest.json" />
    

    <!-- Bootstrap core CSS -->
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.2.2/dist/css/bootstrap.min.css" rel="stylesheet" crossorigin="anonymous">
<link href="https://cdn.jsdelivr.net/npm/boxicons@latest/css/boxicons.min.css" rel="stylesheet" crossorigin="anonymous">

<link href="/assets/css/main.css" rel="stylesheet" crossorigin="anonymous">
<link href="https://unpkg.com/bootstrap-table@1.18.3/dist/bootstrap-table.min.css" rel="stylesheet">
<script src="https://code.jquery.com/jquery-3.6.1.min.js" crossorigin="anonymous"></script>
    
<script type="module">
   import 'https://cdn.jsdelivr.net/npm/@pwabuilder/pwaupdate';
   const el = document.createElement('pwa-update');
   document.body.appendChild(el);
</script>

<meta name="theme-color" content="#CCCCCC">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/magnific-popup.js/1.1.0/magnific-popup.css">


<style>
  .bg-light {
    background:#FFFFFF!important;
  }

  .formmargin5 {
      margin-top:5px;
  }
  .formmaxwidth {
      max-width:600px;
      margin: 0 auto;
  }
  .thirdofForm {
      width:32.5%;
      display:inline-block;
  }
</style>

    
  </head>
  <body id="body-pd">
      <header class="header" id="header">
        <div class="header_toggle"> <i class='bx bx-menu' id="header-toggle"></i> </div>
                    <div class="d-none d-md-block"><b>SJDA Competition App</b></div>
            <div class="d-md-none"><b>SJDA</b></div>

                <div class="header_img"> 
                  </div>
    </header>
            <div class="l-navbar" id="nav-bar">
        <nav class="nav">
            <div> <a href="#" class="nav_logo"> <i class='bx bxs-diamond nav_logo-icon'></i> <span class="nav_logo-name">
                SJDA Competition Web-app</span> </a>
                <div class="nav_list"> 
                    <a href="/home" class="nav_link active"> <i class='bx bxs-home-heart nav_icon'></i> <span class="nav_name">Home</span> </a> 
                    <a href="/terms" class="nav_link"> <i class='bx bxs-book-bookmark nav_icon'></i> <span class="nav_name">Terms</span> </a> 
                    <a href="/public" class="nav_link"> <i class='bx bxl-jquery nav_icon'></i> <span class="nav_name">Public Voting</span> </a> 
                                        <!--<a href="#" class="nav_link"> <i class='bx bx-folder nav_icon'></i> <span class="nav_name">Files</span> </a> -->
                    <!--<a href="/records?sidebar=true" class="nav_link"> <i class='bx bx-bar-chart-alt-2 nav_icon'></i> <span class="nav_name">Record Data</span> </a>-->
                </div>
            </div> <a href="/login?logout=true" class="nav_link"> <i class='bx bx-log-out nav_icon'></i> <span class="nav_name">Sign Out</span> </a>
        </nav>
    </div>

    <!--Container Main start-->
    <div class="xheight-100 bg-light">

<div style="text-align:center;margin:0 auto;max-width:600px;">

  <IMG src="/images/SJDA-Square-large.png" style="margin-top:0  0px;width:100%; max-width:400px;">
    
    
<style>
    .formmargin5 {
        margin-top:5px;
    }
    .formmaxwidth {
        max-width:600px;
        margin: 0 auto;
    }
    .form-floating>label {
      top: -15px;
    }
</style>
    
<div class="container" class="animate__fadeInUp">
    <div class="animate__animated animate__fadeInUp" style="width:100%">
    
    </div>

    <h4 class="animate__animated animate__fadeInUp">Login</h4>

        
      
  
  
      <form method="post" class="form-floating">
      <div class="form-floating formmargin5 form-group animate__animated animate__fadeInUp">
        <label>Email</label>
        <input type="email" name="email" class="form-control" value="">
      </div>
      <div class="form-floating formmargin5 form-group animate__animated animate__fadeInUp">
        <label>Password</label>
        <input type="password" name="password" class="form-control">
              </div>
      <div class="form-floating formmargin5">
        <button type="submit" name="mode" value="login" class="btn btn-primary animate__animated animate__pulse">Login</button>
        <button type="submit" name="mode" value="reset-request" class="btn btn-link">Forgot?</button>
        <button type="submit" name="mode" value="register" class="btn btn-link">Register</button>
        <button type="submit" disabled class="btn btn-link">Registration closed</button>
      </div>
    </form>
  



  
  
  </div>





</div>
        
<script>
        console.log("No session token found .");
        </script><script>
        console.log("Original Mode:login");
        </script>    </div>
    <!--Container Main end-->
    <!--Toast-->
        <!--/Toast-->
    <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.2.2/dist/js/bootstrap.bundle.min.js" crossorigin="anonymous"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/magnific-popup.js/1.1.0/jquery.magnific-popup.min.js"></script>
    <script src="/assets/js/confirmbutton.js"></script>
    <script>
        document.addEventListener("DOMContentLoaded", function(event) {

        const showNavbar = (toggleId, navId, bodyId, headerId) =>{
        const toggle = document.getElementById(toggleId),
        nav = document.getElementById(navId),
        bodypd = document.getElementById(bodyId),
        headerpd = document.getElementById(headerId)

        // Validate that all variables exist
            if(toggle && nav && bodypd && headerpd){
                toggle.addEventListener('click', ()=>{
                    // show navbar
                    nav.classList.toggle('show')
                    // change icon
                    toggle.classList.toggle('bx-x')
                    // add padding to body
                    bodypd.classList.toggle('body-pd')
                    // add padding to header
                    headerpd.classList.toggle('body-pd')
                })
            }
        }

        showNavbar('header-toggle','nav-bar','body-pd','header')

            /*===== LINK ACTIVE =====*/
            const linkColor = document.querySelectorAll('.nav_link')

            function colorLink(){
                if(linkColor){
                    linkColor.forEach(l=> l.classList.remove('active'))
                    this.classList.add('active')
                }
            }
            linkColor.forEach(l=> l.addEventListener('click', colorLink))

            // Your code to run since DOM is loaded and ready
            
            $( document ).on( "pagecreate", function() {
                $( ".photopopup" ).on({
                    popupbeforeposition: function() {
                        var maxHeight = $( window ).height() - 60 + "px";
                        $( ".photopopup img" ).css( "max-height", maxHeight );
                    }
                });
            });
            $('.spectra').magnificPopup({
                type: 'image',
                closeBtnInside: false,
                closeOnContentClick: false,
                image: {
                        verticalFit: true
                }
            });



                    });
    </script>
    <style>
        .developer {
            position: fixed;
            right:0px;
            bottom:0px;
            background:white;
            border-radius:4px;
            font-size: x-small;
            padding: 1px 8px 4px 8px;
        }
        /* Mobile Styles */
        @media (max-width: 600px) {
            
            .developer .nomobile {
                display:none;
            }
        }
         /* Desktop Styles */
        @media (min-width: 601px) {

            .developer .nodesktop {
                display:none;
            }
        }
    </style>

<script> 
    var route = "login";
    history.pushState({route: route}, "", "");
    //override back button based on route
    window.onpopstate = function(event) {
        //alert("popping");
        if (route == "login" || route == "terms" || route == "results" || route == "stats") {
            window.location.href = "/";
        } else {
            if(route=="category") {
                window.location.href = "/category/";
            }         }
    };
</script>
    
    <div class="developer">
                <span class="nomobile">Copyright</span><span class="nodesktop">&copy;</span> 2026, <a href="https://jdmis.edu.sg" target="_BLANK"><span class="nodesktop">JDMIS</span><span class="nomobile">Jewellery Design and Management International School Pte. Ltd.</a></span>
    </div>
  <script>(function(){function c(){var b=a.contentDocument||a.contentWindow.document;if(b){var d=b.createElement('script');d.innerHTML="window.__CF$cv$params={r:'9d23d43fdfe4370a',t:'MTc3MTgxOTM2MQ=='};var a=document.createElement('script');a.src='/cdn-cgi/challenge-platform/scripts/jsd/main.js';document.getElementsByTagName('head')[0].appendChild(a);";b.getElementsByTagName('head')[0].appendChild(d)}}if(document.body){var a=document.createElement('iframe');a.height=1;a.width=1;a.style.position='absolute';a.style.top=0;a.style.left=0;a.style.border='none';a.style.visibility='hidden';document.body.appendChild(a);if('loading'!==document.readyState)c();else if(window.addEventListener)document.addEventListener('DOMContentLoaded',c);else{var e=document.onreadystatechange||function(){};document.onreadystatechange=function(b){e(b);'loading'!==document.readyState&&(document.onreadystatechange=e,c())}}}})();</script></body>
</html>
