{% extends './template.html' %}
{% load static %}
{% block style %}
<style type="text/css">
	.carder{
		padding:0px;
		background: none;
	}
	.card,.card-body,.card-header{
		padding:0px;
		background: none;

	}
	.btn:active{
		background: white;
	}
</style>
{% endblock %}
{% block body %}
  <body class="offline-doc" style="height:100vh;overflow-y:hidden;">
  <!-- Navbar -->
  <nav class="navbar navbar-expand-lg navbar-transparent navbar-absolute fixed-top ">
 
  <!--
  <div style="padding-left:10px;color:#fff;min-width:300px;"> dssdsd sdsdsd sdsds dsds sdsds </div>
  -->
 
    <div class="container-fluid">
      <button class="navbar-toggler" type="button" data-toggle="collapse" aria-controls="navigation-index" aria-expanded="false" aria-label="Toggle navigation">
        <span class="sr-only">Toggle navigation</span>
        <span class="navbar-toggler-icon icon-bar"></span>
        <span class="navbar-toggler-icon icon-bar"></span>
        <span class="navbar-toggler-icon icon-bar"></span>
      </button>
      <div class="collapse navbar-collapse justify-content-end">
        <ul style="display:none;" class="navbar-nav">
          <li class="nav-item">
            <a class="nav-link" href="#">
              Contact
            </a>
          </li>

          <li class="nav-item">
            <a class="nav-link" href="#">
              Parametres
            </a>
          </li>
          <li class="nav-item">
            <a class="nav-link" href="#" target="_blank">
              Documentation
            </a>
          </li>
          <li class="nav-item">
            <a class="text-primary nav-link" href="okira.cm" target="_blank">
              Okira 
            </a>
          </li>
        </ul>
      </div>
    </div>
  </nav>
  <!-- End Navbar -->
  <div class="page-header clear-filter">
    <div class="page-header-image" style="background-image: url({% static 'utils/wallpaper.jpg' %});"></div>
    <div class="content-center">
      <div class="row">
	      <div class="col-md-12 ml-auto mr-auto">
	        <div class="brand">
	          <h1 class="title">
	            HubStation
	          </h1>
	          <h6> Gestion de Quincaillerie</h6>
	          <h3 class="description d-md-block">Toutes les Informations de votre Quincaillerie en temps reel </h3>
	          <br />

	          <div class="d-none mb-2 justify-content-center">
	          	<!--
	          	<div class="px-3">
	          		<img style="width: 50px;height: 50px;" src="{% static 'utils/windows.svg' %}">
	          	</div>
	          	<div class="px-3">
	          		<img style="width: 50px;height: 50px;" src="{% static 'utils/ubuntu.svg' %}">
	          	</div>
	          	<div class="px-3">
	          		<img style="width: 50px;height: 50px;" src="{% static 'utils/macos.svg' %}">
	          	</div>
	          	<div class="px-3">
	          		<img style="width: 50px;height: 50px;" src="{% static 'utils/android.svg' %}">
	          	</div>
	          	<div class="px-3">
	          		<img style="width: 50px;height: 50px;" src="{% static 'utils/apple2.svg' %}">
	          	</div>
	          	-->
	          </div>
	         <!-- <h6><i class="material-icons">beenhere</i> <span>Certification legale Okira </span></h6> -->
	         <!-- <h6><i class="material-icons">beenhere</i> SHistorique et Chiffres de vos transactions </h6> -->
	          <div class="p-1">
	          	<a href="#giveLoveModal" data-toggle="modal" style="min-width:300px;" class="mt-1 border-radius btn btn-primary2 btn-lg">Se Connecter</a>
	      	  </div>
	      	  <div class="p-1">
	          	<a href="/admin/" style="min-width:300px;" class="border-radius btn btn-primary2 btn-lg">Mon Espace de Donnees</a>
	      	  </div>
	        </div>
	      </div>
      </div>
        <!--
				<div class="pt-3 row d-flex justify-content-center d-md-flex">
	                <div class="carder" style="padding: 0px;">
	                  <div class="card-body" style="padding: 0px; ">
	                    <div class="card" style="padding: 0px;">
	                      <div class="card-header card-header-icon" style="padding:0px;">
	                        <div class="card-icon d-flex" style="padding:10px; background:none;border:1px solid #fff;">
	                          <div><i class="material-icons">shopping_cart</i></div>
	                          <div style="padding-top:4px;"><span> Stocks </span></div>
	                        </div>
	                      </div>
	                  	</div>
	                  </div>
	                </div>
	                <div class="carder">
	                  <div class="card-body" style="background:none;padding: 0px;">
	                    <div class="card " style="background:none;padding: 0px;">
	                      <div class="card-header card-header-warning card-header-icon" style="padding:0px;">
	                      
	                        <div class="card-icon d-flex" style="padding:10px; background:none;border:1px solid #fff;">
	                          <div><i class="material-icons">groups</i></div>
	                          <div style="padding-top:4px;"><span> R.H </span></div>
	                        </div>
	                      </div>
	                  	</div>
	                  </div>
	                </div>
	                <div class="carder">
	                  <div class="card-body">
	                    <div class="card ">
	                      <div class="card-header card-header-success card-header-icon" style="padding:0px;">
	                        <div class="card-icon d-flex" style="padding:10px; background:none;border:1px solid #fff;">
	                          <div><i class="material-icons">attach_money</i></div>
	                          <div style="padding-top:4px;"><span> Compta </span></div>
	                        </div>
	                      </div>
	                  	</div>
	                  </div>
	                </div>
	                <div class="carder">
	                  <div class="card-body" style="background:none;">
	                    <div class="card " style="background:none;">
	                      <div class="card-header card-header-danger card-header-icon" style="padding:0px;">
	                        <div class="card-icon d-flex" style="padding:10px; background:none;border:1px solid #fff;">
	                          <div><i class="material-icons">content_paste</i></div>
	                          <div style="padding-top:4px;"><span> Agenda </span></div>
	                        </div>
	                      </div>
	                  	</div>
	                  </div>
	                </div>


	                <div class="carder">
	                  <div class="card-body" style="background:none;">
	                    <div class="card " style="background:none;">
	                      <div class="card-header card-header-danger card-header-icon" style="padding:0px;">
	                      
	                        <div class="card-icon d-flex" style="padding:10px; background:none;border:1px solid #fff;">
	                          <div><i class="material-icons">assignment</i></div>
	                          <div style="padding-top:4px;"><span> Archives </span></div>
	                        </div>
	                      </div>
	                  	</div>
	                  </div>
	                </div>	                
              </div>
`	`			-->
    </div>
  </div>
  <footer class=" footer d-md-block">
    <div class="container-fluid">
      <div class="copyright float-left">
        Copyright &copy; 
        <script>
          document.write(new Date().getFullYear())
        </script>
        <a href="https://okira.cm" target="_blank"><b style="color:white;">Okira</b></a>
      </div>
    </div>
  </footer>
            <!-- ========== Give a Like Modal ======= -->
<div class="modal fade" id="giveLoveModal"  role="dialog" > 
    <form  action="/log/" method="POST" style="width:100%;">
    {% csrf_token %}
	<div class="modal-dialog" role="document">
         <div class="modal-content">
          <div class="modal-header bg-white">
            <div class='w-100'><h4 class="modal-title">Interface de Connexion</h4></div> 
        <button type="button" class="text-danger close" data-dismiss="modal" aria-label="Close" id="giLoClose"><span aria-hidden="true">&times;</span></button>
          </div>
          <div id="connec-text" style="background:none;" class="modal-body">
             
             <div style="padding-top:20px;">
            <div class="input-group mb-3" style="width:100%;">
	              <div id='form_saler' style="width:100%;">
	                  <div class="col-12 d-flex flex-wrap  input-group-append">
	                    <div><span class=" btn btn-primary2">Pseudo&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</span></div>
	                    
	                    <div><input name="username" required style="border-radius:0%;border:none;background:#fff;color:#333;text-transform:none;" class=" btn" type="text" placeholder="Entrez votre Pseudo"></div>
	                  </div>
	                  <div style="width:100%;" class="d-flex flex-wrap input-group-append">
	                    <div><span class=" btn btn-primary2">Mot de Passe</span></div>
	                    <div><input required style="border-radius:0%;border:none;background:#fff;color:#333;text-transform:none;" class=" btn" type="password" name="password" placeholder="Mot de Passe"></div>
	                  </div>
	                  <!--<div class="my-2"><small>Mot de Passe Oublié ?</small></div>-->
	                    <!--
	                    <div class="" style="text-align: center;">
                              <input type="checkbox" name="">
                              <label> Se Souvenir de moi </label>
                        </div>
                    	-->
              </div>
 
             </div>
          </div>
          <div class="log-description w-100 modal-footer d-block" style="text-align:right;">
          <div style='text-align: right;'> <input type="submit" id='enreg_trans' class="btn btn-warning" value="Se Connecter"> </div>
          </div>
        </div>
     </div>
  </div>
  </form>
</div>
<!-- ========== Give a Like Modal ======= -->
</body>
{% endblock %}
