{% load static %}
<!DOCTYPE html>
<html lang="en">
  <head>
  <title>Product List</title>
  <link rel="stylesheet" type="text/css" href="{% static 'bootstrap.css' %}">

  <link rel="stylesheet" type="text/css" href="{% static 'firststyle.css' %}">
{#  <link rel="stylesheet" type="text/css" href=" {% static 'bootstrap-theme.css' %}">#}
  <link href="//netdna.bootstrapcdn.com/bootstrap/3.0.0/css/bootstrap-glyphicons.css" rel="stylesheet">
  <script  src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
  <script  src="{% static 'javascriptt.js' %}"></script>
 <script  src="{% static 'serverRequestHandler.js' %}"></script>
      <script  src="{% static 'productlistJS.js' %}"></script>

    
  
  
  </head>
  <!-- onload="load()" -->
  <body style="background-image:url({%static "back.jpg"  %}) " onload="loadingHTML()">
 <nav class="navbar navbar-inverse" role="navigation" >
  <!-- Brand and toggle get grouped for better mobil display -->
  <div class="navbar-header" style="float: left;">
    <button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1">
      <span class="sr-only">Toggle navigation</span>
      <span class="icon-bar"></span>
      <span class="icon-bar"></span>
      <span class="icon-bar"></span>
    </button>
   
  </div>

  <!-- Collect the nav links, forms, and other content for toggling -->
  <div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
    <ul class="nav navbar-nav">
    <li>  <a class="navbar-brand" href="#">Brand</a></li>
      <li ><a href="http://127.0.0.1:8000/first/">My Beautiful Shop</a></li>
      <li class="active" id="122"><a href="#">Product List</a></li>
     <div class="input-group">
     <div class="input-group-btn" id="">
       <button  id="listtt"  type="button"class="btn btn-danger dropdown-toggle" data-toggle="dropdown" class="dropdown-menu"  role="menu" style="margin-right: -2ex;margin-left:15ex" >Select&#160;&#160;<b class="caret">&#160;&#160;</b></button>
     	<ul  class="dropdown-menu"  id="CompDrop" style="margin-left:15ex" >
     	{% for i in categorylist %}
            {% if i.1 == "1" %}
           <li class="dropdown-submenu" id="{{i.0.id }}" onclick="getName();ELZAM()"><a href="#"id="{{i.0.id }}+">{{ i.0.Name }}</a><ul class="dropdown-menu">
            {% for l in i %}

                {% if forloop.counter == 1 %}
                {% elif forloop.counter == 2 %}

                {% else  %}
                <li id="{{ l.id }}" onclick="getName();ELZAM()"><a id="{{ l.id }}+" href="#">{{ l.Name }}</a></li>
                {% endif %}

                {% endfor %}
           </ul>
           </li>
                {% else %}
              <li  id="{{i.0.id }}"onclick="getName();ELZAM()"><a id="{{i.0.id }}+" href="#">{{ i.0.Name }}</a></li>
             {% endif %}
            {% endfor %}
        </ul>
   </div><!-- /btn-group -->
       <form class="navbar-form navbar-left" role="search">
     <div class="form-group">
        <input type="text" class="form-control" placeholder="Search" id="searchInput">
      </div>
      <button type="button"class="btn btn-info" onclick="SEARCHLOAD()"><span class="glyphicon glyphicon-search" style="vertical-align: top;"></span></button>
      
    </form>
   </div>
   </ul>
</div>
  </nav>
  
  
<!--   leftNav  -->
<section >
<div id="leftNAV"style="padding: 5ex">
{% for i in categorylist %}
            {% if i.1 == "1" %}
           <button class="btn btn-primary"  id="{{i.0.id }}" onclick="an();LISTSELECT()" style="margin-bottom: 0.5ex">{{ i.0.Name }}&#160;&#160;<b class="caret">&#160;&#160;</b></button>
            <div id="{{ i.0.id }}div"style="display: none">
                {% for l in i %}

                {% if forloop.counter == 1 %}
                {% elif forloop.counter == 2 %}

                {% else  %}
                <button class="btn btn-primary btn-xs"onclick="LISTSELECT()" id="{{ l.id }}"style="margin-bottom: 0.3ex;margin-left: 1ex" >{{ l.Name }}</button>
                {% endif %}

                {% endfor %}
                </div>


                {% else %}
              <button class="btn btn-primary" onclick="LISTSELECT()" id="{{i.0.id }}">{{ i.0.Name }}</button>
             {% endif %}
            {% endfor %}
</div>

</section>
   
 <section id="mahsoolat" style="opacity: 0.87">
 
 

 </section>  
 
<div id="pagbag" style="position:absolute;top:160ex; left: 10ex;width: 140ex; ">
<ul class="pagination" id="pages">

</ul>
 </div>
<section id="cart"style=" box-shadow: 0px 0px 5px 5px #2f2f2f;" >
<img  src="{% static "logo.png" %}" style=";margin-top: 3ex;width:10ex;height:10ex;margin-left:9ex;">
<section  style="width: 26.9ex;height: 32ex;margin-top: 3ex;background-image: url({% static "cloth.jpg" %});margin-left: 0.05ex;margin-right: 0.05ex;opacity: 0.8 " >
<section id="cartPices" style=" overflow:scroll;width: 26ex;height: 26ex;text-indent: 2ex;">
</section>

<section  id="totalPrice" style="width: 27ex;border-left-style:solid;border-left-color:white;border-top-style:solid;border-top-color:white;
border-right-style:solid;border-right-color:white;height: 4ex;margin-top:2ex;background-color: #101010;color: greenyellow; font-weight: bold; text-align:center;vertical-align: text-top ;">

price :&#160;<span id="totalPriceResult">00</span>
</section>
</section>
</section>
   
   
{#loading#}
<div id="load" style="position: absolute;left: 80ex;
top: 30ex;">
<style>
.windows8 {
position: relative;
width: 90px;
height:90px;
}

.windows8 .wBall {
position: absolute;
width: 86px;
height: 86px;
opacity: 0;
-moz-transform: rotate(225deg);
-moz-animation: orbit 7.15s infinite;
-webkit-transform: rotate(225deg);
-webkit-animation: orbit 7.15s infinite;
-ms-transform: rotate(225deg);
-ms-animation: orbit 7.15s infinite;
-o-transform: rotate(225deg);
-o-animation: orbit 7.15s infinite;
transform: rotate(225deg);
animation: orbit 7.15s infinite;
}

.windows8 .wBall .wInnerBall{
position: absolute;
width: 11px;
height: 11px;
background: #f5f5f5;
left:0px;
top:0px;
-moz-border-radius: 11px;
-webkit-border-radius: 11px;
-ms-border-radius: 11px;
-o-border-radius: 11px;
border-radius: 11px;
}

.windows8 #wBall_1 {
-moz-animation-delay: 1.56s;
-webkit-animation-delay: 1.56s;
-ms-animation-delay: 1.56s;
-o-animation-delay: 1.56s;
animation-delay: 1.56s;
}

.windows8 #wBall_2 {
-moz-animation-delay: 0.31s;
-webkit-animation-delay: 0.31s;
-ms-animation-delay: 0.31s;
-o-animation-delay: 0.31s;
animation-delay: 0.31s;
}

.windows8 #wBall_3 {
-moz-animation-delay: 0.62s;
-webkit-animation-delay: 0.62s;
-ms-animation-delay: 0.62s;
-o-animation-delay: 0.62s;
animation-delay: 0.62s;
}

.windows8 #wBall_4 {
-moz-animation-delay: 0.94s;
-webkit-animation-delay: 0.94s;
-ms-animation-delay: 0.94s;
-o-animation-delay: 0.94s;
animation-delay: 0.94s;
}

.windows8 #wBall_5 {
-moz-animation-delay: 1.25s;
-webkit-animation-delay: 1.25s;
-ms-animation-delay: 1.25s;
-o-animation-delay: 1.25s;
animation-delay: 1.25s;
}

@-moz-keyframes orbit {
0% {
opacity: 1;
z-index:99;
-moz-transform: rotate(180deg);
-moz-animation-timing-function: ease-out;
}

7% {
opacity: 1;
-moz-transform: rotate(300deg);
-moz-animation-timing-function: linear;
-moz-origin:0%;
}

30% {
opacity: 1;
-moz-transform:rotate(410deg);
-moz-animation-timing-function: ease-in-out;
-moz-origin:7%;
}

39% {
opacity: 1;
-moz-transform: rotate(645deg);
-moz-animation-timing-function: linear;
-moz-origin:30%;
}

70% {
opacity: 1;
-moz-transform: rotate(770deg);
-moz-animation-timing-function: ease-out;
-moz-origin:39%;
}

75% {
opacity: 1;
-moz-transform: rotate(900deg);
-moz-animation-timing-function: ease-out;
-moz-origin:70%;
}

76% {
opacity: 0;
-moz-transform:rotate(900deg);
}

100% {
opacity: 0;
-moz-transform: rotate(900deg);
}

}

@-webkit-keyframes orbit {
0% {
opacity: 1;
z-index:99;
-webkit-transform: rotate(180deg);
-webkit-animation-timing-function: ease-out;
}

7% {
opacity: 1;
-webkit-transform: rotate(300deg);
-webkit-animation-timing-function: linear;
-webkit-origin:0%;
}

30% {
opacity: 1;
-webkit-transform:rotate(410deg);
-webkit-animation-timing-function: ease-in-out;
-webkit-origin:7%;
}

39% {
opacity: 1;
-webkit-transform: rotate(645deg);
-webkit-animation-timing-function: linear;
-webkit-origin:30%;
}

70% {
opacity: 1;
-webkit-transform: rotate(770deg);
-webkit-animation-timing-function: ease-out;
-webkit-origin:39%;
}

75% {
opacity: 1;
-webkit-transform: rotate(900deg);
-webkit-animation-timing-function: ease-out;
-webkit-origin:70%;
}

76% {
opacity: 0;
-webkit-transform:rotate(900deg);
}

100% {
opacity: 0;
-webkit-transform: rotate(900deg);
}

}

@-ms-keyframes orbit {
0% {
opacity: 1;
z-index:99;
-ms-transform: rotate(180deg);
-ms-animation-timing-function: ease-out;
}

7% {
opacity: 1;
-ms-transform: rotate(300deg);
-ms-animation-timing-function: linear;
-ms-origin:0%;
}

30% {
opacity: 1;
-ms-transform:rotate(410deg);
-ms-animation-timing-function: ease-in-out;
-ms-origin:7%;
}

39% {
opacity: 1;
-ms-transform: rotate(645deg);
-ms-animation-timing-function: linear;
-ms-origin:30%;
}

70% {
opacity: 1;
-ms-transform: rotate(770deg);
-ms-animation-timing-function: ease-out;
-ms-origin:39%;
}

75% {
opacity: 1;
-ms-transform: rotate(900deg);
-ms-animation-timing-function: ease-out;
-ms-origin:70%;
}

76% {
opacity: 0;
-ms-transform:rotate(900deg);
}

100% {
opacity: 0;
-ms-transform: rotate(900deg);
}

}

@-o-keyframes orbit {
0% {
opacity: 1;
z-index:99;
-o-transform: rotate(180deg);
-o-animation-timing-function: ease-out;
}

7% {
opacity: 1;
-o-transform: rotate(300deg);
-o-animation-timing-function: linear;
-o-origin:0%;
}

30% {
opacity: 1;
-o-transform:rotate(410deg);
-o-animation-timing-function: ease-in-out;
-o-origin:7%;
}

39% {
opacity: 1;
-o-transform: rotate(645deg);
-o-animation-timing-function: linear;
-o-origin:30%;
}

70% {
opacity: 1;
-o-transform: rotate(770deg);
-o-animation-timing-function: ease-out;
-o-origin:39%;
}

75% {
opacity: 1;
-o-transform: rotate(900deg);
-o-animation-timing-function: ease-out;
-o-origin:70%;
}

76% {
opacity: 0;
-o-transform:rotate(900deg);
}

100% {
opacity: 0;
-o-transform: rotate(900deg);
}

}

@keyframes orbit {
0% {
opacity: 1;
z-index:99;
transform: rotate(180deg);
animation-timing-function: ease-out;
}

7% {
opacity: 1;
transform: rotate(300deg);
animation-timing-function: linear;
origin:0%;
}

30% {
opacity: 1;
transform:rotate(410deg);
animation-timing-function: ease-in-out;
origin:7%;
}

39% {
opacity: 1;
transform: rotate(645deg);
animation-timing-function: linear;
origin:30%;
}

70% {
opacity: 1;
transform: rotate(770deg);
animation-timing-function: ease-out;
origin:39%;
}

75% {
opacity: 1;
transform: rotate(900deg);
animation-timing-function: ease-out;
origin:70%;
}

76% {
opacity: 0;
transform:rotate(900deg);
}

100% {
opacity: 0;
transform: rotate(900deg);
}

}

</style>
<div id="dasasd">
<div class="windows8">
<div class="wBall" id="wBall_1">
<div class="wInnerBall">
</div>
</div>
<div class="wBall" id="wBall_2">
<div class="wInnerBall">
</div>
</div>
<div class="wBall" id="wBall_3">
<div class="wInnerBall">
</div>
</div>
<div class="wBall" id="wBall_4">
<div class="wInnerBall">
</div>
</div>
<div class="wBall" id="wBall_5">
<div class="wInnerBall">
</div>
</div>
</div>
    </div>
   </div>
  </body>
</html>
 