fix :Elegir que boton de estados vamos a usar #82

UNPSJB · Aug 4, 2023 · 06553ed · 06553ed
1 parent 744b6e2
commit 06553ed
Show file tree

Hide file tree

Showing 4 changed files with 179 additions and 60 deletions.
diff --git a/core/templates/core/regionAdmin.html b/core/templates/core/regionAdmin.html
@@ -1,6 +1,8 @@
 {% extends 'base/base_administrador.html'%}
 {% load static %}
-
+{% block extra_css %}
+<link rel="stylesheet" href="{% static '/css/vistaHotel.css' %}">
+{% endblock extra_css %}
 {% block header %}
 <button onclick="location.href='/core/homeAdministrador'" style="text-decoration:none"
     class="rounded-1 btn  btn-outline-secondary text-white ">Administrador:{% if administrador %}{{administrador.nombre}} {{administrador.apellido}}{% endif %}</button>
@@ -16,52 +18,51 @@
 
 
 <div class="switch-toggle switch-3 switch-candy sm row justify-content-center my-4">
+
+
+        <input id="ciudad" name="state-d" radio type="radio"  value="ciudad" />
+        <label for="ciudad" onclick='seleccionarEstado("ciudad")'>
+            <h1>Localidades</h1>
+        </label>
+
+        <input id="provincia" name="state-d" type="radio"  value="provincia" />
+        <label for="provincia" onclick='seleccionarEstado("provincia")'>
+            <h1>Provincias</h1>
+        </label>
+
+        <input id="pais" name="state-d" type="radio"  value="pais" />
+        <label for="pais" onclick='seleccionarEstado("pais")'>
+            <h1>Paises</h1>
+        </label>
+        <div id="effecto"></div>
+
+
+        <style>
 
+
+            .switch-toggle {
+                margin-top: 1vh;
+                flex-direction: row;
+
+            }
+
+            .switch-toggle input {
+                position: absolute;
+                opacity: 0;
+                border-radius: 5px;
+            }
+
+            .switch-toggle input+label {
+                padding: 20px;
+                float: center;
+                cursor: pointer;
+            }
+
+
+        </style>
 
+    </div>
 
-    <input id="ciudad" name="state-d" radio type="radio"  value="ciudad" />
-    <label for="ciudad" onclick='seleccionarEstado("ciudad")'>
-        <h1>Localidades</h1>
-    </label>
-
-    <input id="provincia" name="state-d" type="radio"  value="provincia" />
-    <label for="provincia" onclick='seleccionarEstado("provincia")'>
-        <h1>Provincias</h1>
-    </label>
-
-    <input id="pais" name="state-d" type="radio"  value="pais" />
-    <label for="pais" onclick='seleccionarEstado("pais")'>
-        <h1>Paises</h1>
-    </label>
-
-
-
-    <style>
-        .switch-toggle {
-            margin-top: 1vh;
-
-        }
-
-        .switch-toggle input {
-            position: absolute;
-            opacity: 0;
-            border-radius: 5px;
-        }
-
-        .switch-toggle input+label {
-            padding: 7px;
-            float: center;
-            cursor: pointer;
-        }
-
-        .switch-toggle input:checked+label {
-            background: #28a745;
-            border-radius: 5px;
-        }
-    </style>
-
-
-</div>
 
 
 

diff --git a/core/templates/core/vendedor.html b/core/templates/core/vendedor.html
@@ -1,6 +1,8 @@
 {% extends 'base/base_administrador.html'%}
 {% load static %}
-
+{% block extra_css %}
+<link rel="stylesheet" href="{% static '/css/vistaHotel.css' %}">
+{% endblock extra_css %}
 {% block header %}
 <button onclick="location.href='/core/homeAdministrador'" style="text-decoration:none"
     class="rounded-1 btn  btn-outline-secondary text-white ">Administrador:{% if administrador %}{{administrador.nombre}} {{administrador.apellido}}{% endif %}</button>
@@ -23,10 +25,14 @@ <h1>Vendedores</h1>
     <label for="encargado" onclick='seleccionarEstado("encargado")'>
         <h1>Encargados</h1>
     </label>
-
+    <div id="effecto"></div>
+
+
     <style>
         .switch-toggle {
             margin-top: 1vh;
+            flex-direction: row;
+
         }
 
         .switch-toggle input {
@@ -36,15 +42,10 @@ <h1>Encargados</h1>
         }
 
         .switch-toggle input+label {
-            padding: 7px;
+            padding: 20px;
             float: center;
             cursor: pointer;
         }
-
-        .switch-toggle input:checked+label {
-            background: #28a745;
-            border-radius: 5px;
-        }
     </style>
 </div>
 

diff --git a/static/css/vistaHotel.css b/static/css/vistaHotel.css
@@ -39,12 +39,126 @@
 
 /* ######################### COSAS BOTON TOOGLE #################################*/
 
-
+
+/* //////////////////////////////2 estados (vendedores encargados)//////////////// */
+
+#vendedor:checked~div#effecto {
+    visibility: visible;
+    animation: vendedor 1s;
+    animation-fill-mode: forwards; 
+}
+
+@keyframes vendedor {
+
+    from {
+      transform: scaleX(2);
+    }
+    to{
+        width: 27%;
+        transform: scaleX(1);
+        transform: translateX(-150px);
+    }
+
+}
+
+#encargado:checked~div#effecto {
+    visibility: visible;
+    animation: encargado 1s;
+    animation-fill-mode: forwards; 
+}
+@keyframes encargado {
+
+    from {
+        transform: scaleX(2);
+    }
+    to{
+        width: 27%;
+        transform: scaleX(1);
+        transform: translateX(150px);
+  }
+
+}
+
+
+
+ /* /////////////////////////  3 estados (localidad provincia pais) /////////////////////////////////////// */
+
+ #effecto{
+    position: absolute;
+    top: 5%;
+    width: 20%;
+    height: 10%;
+    box-shadow: 0px 2px 2px grey;
+    z-index: -1;
+    border-radius: 5px;
+    background-color: orange
+
+}
+
+
+#ciudad:checked~div#effecto {
+    visibility: visible;
+    animation: izquierda 1s;
+    animation-fill-mode: forwards; 
+}
+
+@keyframes izquierda {
+
+    from {
+      transform: scaleX(2);
+    }
+    to{
+        width: 22%;
+        transform: scaleX(1);
+        transform: translateX(-189px);
+    }
+
+}
+
+#provincia:checked~div#effecto {
+    visibility: visible;
+    animation: centro 1s;
+    animation-fill-mode: forwards;
+
+}
+
+@keyframes centro {
+
+      from {
+        transform: scaleX(3);
+    }
+    to{
+        transform: scaleX(1);
+        transform: translateX(50px);
+    }
+
+}
+
+#pais:checked~div#effecto {
+    visibility: visible;
+    animation: derecha 1s;
+    animation-fill-mode: forwards; 
+}
+
+@keyframes derecha {
+
+    from {
+        transform: scaleX(2);
+    }
+    to{
+        width: 14%;
+        transform: scaleX(1);
+        transform: translateX(250px);
+  }
+
+}
+
+ /* /////////////////////////  2 estados /////////////////////////////////////// */
 .boton-Habitaciones-Paquetes {
         display: none;
 }
 
-    div#container {
+    div#container  {
     height: 5vh;
     width: 15vh;
     box-shadow: 0px 1px 5px black;
@@ -72,11 +186,11 @@
     left: 5%;
     }
 
-    .etiqueta-boton#label-2 {
+    .etiqueta-boton#label-2{
     right: 26.5%;
     }
-    
-    
+
+
     div#effect {
     position: absolute;
     top: 5%;
@@ -88,9 +202,10 @@
     border-radius: 5px;
     background-color: orange;
     }
-
+
+
     #habitaciones:checked~div#effect {
-    animation: goLeft 0.5s;
+    animation: goLeft 1s;
     visibility: visible;
     animation-fill-mode: forwards;
     }
@@ -143,6 +258,8 @@
     animation: goRight 0.5s;
     animation-fill-mode: forwards;
     }
+
+
 
     @keyframes goRight {
     0% {

diff --git a/venta/templates/venta/buscarHabitaciones.html b/venta/templates/venta/buscarHabitaciones.html
@@ -90,7 +90,7 @@ <h1>
         <input class="boton-Habitaciones-Paquetes" type="radio" id="paquetes" name="material" value="paquetes">
         <label class="etiqueta-boton" for="paquetes" id="label-2" onclick='seleccionarEstado("paquetes")'>
             <span class="glyphicon glyphicon-bell"><i class=" fas fa-box"></i></span></label>
-            
+
         <div id="effect"></div>
     </div>