<!--
=========================================================
* Mi Restaurant Punto de Venta V 1.0
=========================================================

* Product Page: www.xolotlcl.com
* Copyright 2023 (https://www.micabanita.mx)

=========================================================

-->

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

<head>
  <meta charset="utf-8" />
  <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
  <meta http-equiv='cache-control' content='no-cache'>
  <meta http-equiv='expires' content='0'>
  <meta http-equiv='pragma' content='no-cache'>
  <link rel="apple-touch-icon" sizes="76x76" href="assets/img/apple-icon.png">
  <link rel="icon" type="image/png" href="assets/img/favicon.png">
  
  <title>
    Mi Restaurant - Punto de Venta
  </title>
  <!--     Fonts and icons    
  <link rel="stylesheet" type="text/css" href="https://fonts.googleapis.com/css?family=Roboto:300,400,500,700,900|Roboto+Slab:400,700" />
   -->
  <!-- Nucleo Icons -->
  <link href="assets/css/nucleo-icons.css" rel="stylesheet" />
  <link href="assets/css/nucleo-svg.css" rel="stylesheet" />
  <!-- Font Awesome Icons 
  <script src="https://kit.fontawesome.com/42d5adcbca.js" crossorigin="anonymous"></script>
  -->
  <!-- Material Icons 
  <link href="https://fonts.googleapis.com/icon?family=Material+Icons+Round" rel="stylesheet">
  -->
  <!-- CSS Files -->
  <link id="pagestyle" href="assets/css/material-dashboard.css?v=3.0.0" rel="stylesheet" />
  
</head>

<body class="">
  <div class="container position-sticky z-index-sticky top-0">
    <div class="row">
      <div class="col-12">
        <!-- Navbar -->
        
        <!-- End Navbar -->
      </div>
    </div>
  </div>
  <main class="main-content  mt-0">
    <section style="background-color: #eef2ff;">
      <div class="content-half-circle" id="half_circle">
        
        <div class="" style="width: 100%;">
          <div class="half-circle bg-primary d-flex justify-content-center" > 
            <img class="mt-6" src="assets/img/logos/logo.png" alt="" width="412" height="136">
            </div>
          </div>
        </div>
      </div>
      <div class="page-header min-vh-100 mt-tablet-2">
        <div class="container">
          <div class="row">
            <div class="col-6 d-lg-flex d-none h-100 my-auto pe-0 position-absolute top-0 start-0 text-center justify-content-center flex-column">
            <div class="position-relative bg-gradient-primary h-100 m-3 px-7 border-radius-lg d-flex flex-column justify-content-center" style="background-image: url('assets/img/illustrations/illustration-signup.png'); background-size: cover; width:82%;">
              </div>
            </div>
            <div class="col-xl-5 col-lg-5 col-md-7 d-flex flex-column ms-auto me-auto ms-lg-auto me-lg-5">
              <div class="card card-plain">
                <div class="card-header">
                  <h4 class="font-weight-bolder">Ingresa tu clave</h4>
                </div>
                <div class="card-body" style="padding: 0;">
                  <form action="functions/acceso.php" method="POST" name="Form">
                    
                    <!--<input value=" 1 " onclick="number(1)" type="button" style='width:50px; height:50px;font-size:30px;color:blue'></td>-->
                    <div class="input-group input-group-outline mt-3">
                      <!-- <label class="form-label text-tablet">Clave</label> -->
                      <input type="password" maxlength="4" class="form-control pass-tablet" id="password" name="password" required>
                    </div>
                    <div class="text-center">
                      <button type="submit" class="btn btn-lg bg-gradient-primary btn-tablet btn-lg w-100 mt-4 mb-0">Ingresar</button>
                    </div>
                  </form>
                  <div class="row mt-3">
                      <div id="content" class="col-lg-12">  
                          <div class="date" style="display: none;">
                              <span id="weekDay" class="weekDay"></span>, 
                              <span id="day" class="day"></span> de
                              <span id="month" class="month"></span> del
                              <span id="year" class="year"></span>
                          </div>
                          <div align="center" class="clock pt-1">
                              <span id="hours" class="hours h1"></span> :
                              <span id="minutes" class="minutes h1"></span> :
                              <span id="seconds" class="seconds h1"></span>
                          </div>
                          <!-- <p align="center" class="foot-text">Usar F11 al iniciar para mejor uso del sistema</p> -->
                           
                      </div>
                      <div class="col-lg-12 d-flex align-items-center justify-content-center">
                        <span style="font-style: italic; color: #052659;">Sistema de Gestión de Restaurant V 1 Beta</span>
                      </div>
                  </div>
                      
                  
                </div>
              </div>
            </div>
          </div>
        </div>
        <div class="d-flex justify-content-end" id="half-circle-footer">
          
          <div class="">
            <div class="half-circle-footer bg-primary" > 
            </div>
          </div>
        </div>
      </div>
      
    </section>
  </main>
  
  <!--   Core JS Files   -->
  <script src="assets/js/jquery-3.5.1.min.js"></script>
  <script src="assets/js/core/popper.min.js"></script>
  <script src="assets/js/core/bootstrap.min.js"></script>
  <script src="assets/js/plugins/perfect-scrollbar.min.js"></script>
  <script src="assets/js/plugins/smooth-scrollbar.min.js"></script>
  <script src="assets/js/clock.js"></script>
  
  <script>
    var win = navigator.platform.indexOf('Win') > -1;
    if (win && document.querySelector('#sidenav-scrollbar')) {
      var options = {
        damping: '0.5'
      }
      Scrollbar.init(document.querySelector('#sidenav-scrollbar'), options);
    }
  </script>
  <script>
    var password = document.getElementById('password');

    function number(n){
      valor = n 
      password.value += valor
    }
    function cursorInput(){
        document.getElementById("password").focus();
    }

    cursorInput();
  </script>
  
  <!-- Github buttons 
  <script async defer src="https://buttons.github.io/buttons.js"></script>-->
  <!-- Control Center for Material Dashboard: parallax effects, scripts for the example pages etc -->
  <script src="assets/js/material-dashboard.min.js?v=3.0.0"></script>

</body>

</html>