Spaces:

chartManD
/

cata_system

Sleeping

App Files Files Community

chartManD commited on Oct 8, 2025

Commit

a1de763

1 Parent(s): befe7e3

Definicion de paleta de colores, uso de paleta

Browse files

Files changed (5) hide show

tecnicas/templates/tecnicas/layouts/base.html +1 -1
tecnicas/templates/tecnicas/main-panel.html +32 -20
tecnicas/templates/tecnicas/manage_sesions/detalles-sesion.html +17 -17
tecnicas/templates/tecnicas/manage_sesions/sesiones-panel.html +54 -41
theme/static_src/src/styles.css +36 -2

tecnicas/templates/tecnicas/layouts/base.html CHANGED Viewed

@@ -16,7 +16,7 @@
 </head>
 <body>
-  <main class="flex flex-col w-full h-screen bg-main-surface appearance-none">
     {% block content %}{% endblock %}
   </main>

 </head>
 <body>
+  <main class="flex flex-col w-full min-h-screen bg-surface-general appearance-none">
     {% block content %}{% endblock %}
   </main>

tecnicas/templates/tecnicas/main-panel.html CHANGED Viewed

@@ -4,48 +4,60 @@
 {% block content %}
 <article class="w-full flex flex-col justify-center items-center min-sm:mt-10">
-    <article class="flex flex-col bg-gray-400 p-10 max-sm:py-10 max-sm:px-3 min-sm:rounded-3xl">
         <header class="flex flex-col flex-wrap justify-center items-center gap-8">
-            <section class="bg-gray-600 p-8 rounded-md w-full shadow-lg">
-                <h1 class="text-white text-4xl font-bold text-center max-sm:text-2xl">Panel Principal</h1>
             </section>
-            <section class="flex flex-wrap justify-center max-sm:gap-4 items-center p-8 w-full bg-gray-600 rounded-md shadow-lg">
-                <section class="flex flex-col text-white flex-1 flex-wrap gap-4">
                     <fieldset class="fieldset rounded-box border px-3 pb-3 rounded-2xl">
-                        <legend class="fieldset-legend px-1.5">Nombre Presentador</legend>
                         <p class="text-3xl max-sm:text-2xl font-medium">{{ presentador.nombre }}</p>
                     </fieldset>
                     <fieldset class="fieldset rounded-box border px-3 pb-3 rounded-2xl">
-                        <legend class="fieldset-legend px-1.5">Identificador</legend>
                         <p class="text-3xl max-sm:text-2xl font-medium">{{ presentador.id }}</p>
                     </fieldset>
                 </section>
                 <section class="flex-1 flex justify-center">
                     <button type="button"
-                        class="text-white bg-red-600 hover:bg-red-700 active:outline-none active:ring-4 active:ring-red-300 font-medium rounded-2xl text-3xl max-sm:text-2xl px-5 py-4 text-center">Salir
-                        del sistema</button>
                 </section>
             </section>
         </header>
-        <article class="w-full flex flex-col gap-7 items-center min-sm:mt-7 mt-4 bg-gray-600 rounded-lg">
             <article
                 class="w-5xl max-lg:w-3xl max-md:w-auto p-8 flex flex-col justify-around items-center gap-4 flex-wrap text-3xl max-sm:text-2xl">
                 <section class="flex flex-row flex-wrap gap-4 w-full">
-                    <a href="{% url 'cata_system:seleccion_tecnica' %}"
-                        class="text-white bg-green-600 hover:bg-green-700 active:outline-none active:ring-4 active:ring-green-300 font-medium rounded-xl px-8 py-4 text-center flex-1">Iniciar
-                        Sesión <br> Sensorial</a>
-                    <a href="{% url 'cata_system:panel_catadores' %}"
-                        class="text-white bg-yellow-600 hover:bg-yellow-700 active:outline-none active:ring-4 active:ring-yellow-300 font-medium rounded-xl px-8 py-4 text-center flex-1">Gestión
-                        de <br>catadores</a>
                 </section>
                 <section class="flex flex-row flex-wrap gap-4 w-f ull justify-center">
-                    <a href="{% url 'cata_system:panel_sesiones' page=1 %}"
-                        class="text-white bg-blue-600 hover:bg-blue-700 active:outline-none active:ring-4 active:ring-blue-300 font-medium rounded-xl px-8 py-4 text-center">Gestión
-                        de sesiones <br> sensoriales</a>
                 </section>
             </article>
         </article>
     </article>
-    {% endblock %}

 {% block content %}
 <article class="w-full flex flex-col justify-center items-center min-sm:mt-10">
+    <article class="flex flex-col bg-surface-alter p-10 max-sm:py-10 max-sm:px-3 min-sm:rounded-2xl">
         <header class="flex flex-col flex-wrap justify-center items-center gap-8">
+            <section class="bg-surface-card p-8 rounded-md w-full shadow-lg">
+                <h1 class="text-black text-4xl font-bold text-center max-sm:text-2xl">Panel Principal</h1>
             </section>
+            <section
+                class="flex flex-wrap justify-center max-sm:gap-4 items-center p-8 w-full bg-surface-card rounded-md shadow-lg">
+                <section class="flex flex-col text-black flex-1 flex-wrap gap-4">
                     <fieldset class="fieldset rounded-box border px-3 pb-3 rounded-2xl">
+                        <legend class="text-black fieldset-legend px-1.5">Nombre Presentador</legend>
                         <p class="text-3xl max-sm:text-2xl font-medium">{{ presentador.nombre }}</p>
                     </fieldset>
                     <fieldset class="fieldset rounded-box border px-3 pb-3 rounded-2xl">
+                        <legend class="text-black fieldset-legend px-1.5">Identificador</legend>
                         <p class="text-3xl max-sm:text-2xl font-medium">{{ presentador.id }}</p>
                     </fieldset>
                 </section>
                 <section class="flex-1 flex justify-center">
                     <button type="button"
+                        class="btn btn-active text-xl tracking-wider font-bold text-black btn-error py-8 px-12 border-b-red-600 btn-push">
+                        Salir del sistema
+                    </button>
                 </section>
             </section>
         </header>
+        <article class="w-full flex flex-col gap-7 items-center min-sm:mt-7 mt-4 bg-surface-card rounded-lg shadow-lg">
             <article
                 class="w-5xl max-lg:w-3xl max-md:w-auto p-8 flex flex-col justify-around items-center gap-4 flex-wrap text-3xl max-sm:text-2xl">
                 <section class="flex flex-row flex-wrap gap-4 w-full">
+                    <a href="{% url 'cata_system:seleccion_tecnica' %}" class="flex-1 w-full">
+                        <button
+                            class="w-full text-black bg-btn-primary font-medium rounded-xl px-8 py-4 text-center border-b-green-800 btn-push">
+                            Iniciar Sesión <br> Sensorial
+                        </button>
+                    </a>
+                    <a href="{% url 'cata_system:panel_catadores' %}" class="flex-1 w-full">
+                        <button
+                            class="w-full text-black bg-btn-secondary font-medium rounded-xl px-8 py-4 text-center border-b-pink-800 btn-push">
+                            Gestión de <br>catadores
+                        </button>
+                    </a>
                 </section>
                 <section class="flex flex-row flex-wrap gap-4 w-f ull justify-center">
+                    <a href="{% url 'cata_system:panel_sesiones' page=1 %}">
+                        <button
+                            class="text-black bg-btn-tertiary font-medium rounded-xl px-8 py-4 text-center border-b-pink-800 btn-push">
+                            Gestión de sesiones<br>sensoriales
+                        </button>
+                    </a>
                 </section>
             </article>
         </article>
     </article>
+</article>
+{% endblock %}

tecnicas/templates/tecnicas/manage_sesions/detalles-sesion.html CHANGED Viewed

@@ -4,17 +4,17 @@
 {% block title %}Detalles Sesion{% endblock %}
 {% block content %}
-<article class="w-full flex flex-col justify-center items-center bg-gray-600 mt-10 mb-10">
-    <article class="flex flex-col gap-8 bg-gray-400 p-10 max-lg:p-6 max-sm:px-2 rounded-2xl max-lg:rounded-none">
         <header class="text-center flex-row w-full flex justify-around items-center flex-wrap gap-10">
-            <h1 class="text-white rounded-xl font-bold text-2xl bg-gray-600 p-4 flex-1">
                 Detalles de la sesión
             </h1>
-            <a href="{% url 'cata_system:index' %}">
-                <p
-                    class="uppercase text-lg tracking-wider font-medium p-2 px-4 border-b-2 active:border-b-0 active:border-t-2 active:border-blue-500 border-blue-800  transition-all rounded-xl bg-blue-600 text-white">
-                    Panel principal
-                </p>
             </a>
         </header>
@@ -34,11 +34,11 @@
         </article>
         {% endif %}
-        <p class="font-bold text-2xl border-b-2">
             Información general
         </p>
         <article
-            class="text-white rounded-xl grid grid-cols-2 max-sm:grid-cols-1 gap-3 *:bg-gray-500 *:flex *:flex-wrap *:items-center *:justify-center *:max-sm:justify-normal *:gap-x-2 *:p-4 *:rounded-2xl text-xl max-sm:text-base">
             <section class="col-span-2 max-sm:col-span-1">
                 <p class="font-bold">
                     Código:
@@ -129,14 +129,14 @@
             </section>
         </article>
-        <p class="font-bold text-2xl border-b-2">
             Palabras usadas para calificar
         </p>
         <article
-            class="text-white rounded-xl grid grid-cols-4 max-sm:grid-cols-1 gap-3 *:bg-gray-500 *:flex *:items-center *:justify-center *:gap-x-2 *:p-4 *:rounded-2xl">
             {% for palabra in palabras %}
             <section>
-                <p class="block text-xl antialiased font-medium">
                     {{ palabra.nombre_palabra }}
                 </p>
             </section>
@@ -144,7 +144,7 @@
         </article>
-        <p class="font-bold text-2xl border-b-2">
             Acciones disponibles
         </p>
         <article class="flex flex-wrap gap-10 max-sm:gap-2">
@@ -178,18 +178,18 @@
             </button>
         </article>
-        <p class="font-bold text-2xl border-b-2">
             Datos obtenidos
         </p>
         {% if calificaciones.error %}
-        <article class="bg-gray-600 p-4 text-white rounded-xl">
             <p class="block font-sans text-xl antialiased font-normal uppercase tracking-wider text-center">
                 {{ calificaciones.error }}
             </p>
         </article>
         {% else %}
-        <article class="bg-gray-600 p-4 text-white rounded-xl">
         </article>
         {% endif %}
         <form action="" method="post" class="form-action-session hidden">

 {% block title %}Detalles Sesion{% endblock %}
 {% block content %}
+<article class="w-full flex flex-col justify-center items-center bg-surface-general mt-10 mb-10">
+    <article class="flex flex-col gap-8 bg-surface-alter p-10 max-lg:p-6 max-sm:px-2 rounded-xl max-lg:rounded-none">
         <header class="text-center flex-row w-full flex justify-around items-center flex-wrap gap-10">
+            <h1 class="text-black rounded-xl font-bold text-2xl bg-surface-card shadow-lg p-4 flex-1">
                 Detalles de la sesión
             </h1>
+            <a href="{% url 'cata_system:index' %}" class="w-fit">
+                <button
+                    class="text-black bg-btn-secondary font-medium rounded-lg text-xl p-4 text-center border-pink-800 btn-push">
+                    Volver a las Sesiones
+                </button>
             </a>
         </header>
         </article>
         {% endif %}
+        <p class="text-black font-bold text-2xl border-b-2">
             Información general
         </p>
         <article
+            class="text-black rounded-xl grid grid-cols-2 max-sm:grid-cols-1 gap-3 *:bg-surface-card *:flex *:flex-wrap *:items-center *:justify-center *:max-sm:justify-normal *:gap-x-2 *:p-4 *:rounded-2xl text-xl max-sm:text-base">
             <section class="col-span-2 max-sm:col-span-1">
                 <p class="font-bold">
                     Código:
             </section>
         </article>
+        <p class="text-black font-bold text-2xl border-b-2">
             Palabras usadas para calificar
         </p>
         <article
+            class="text-white rounded-xl grid grid-cols-4 max-sm:grid-cols-1 gap-3 *:bg-surface-ligt *:flex *:items-center *:justify-center *:gap-x-2 *:p-4 *:rounded-2xl">
             {% for palabra in palabras %}
             <section>
+                <p class="block text-black text-xl antialiased font-medium">
                     {{ palabra.nombre_palabra }}
                 </p>
             </section>
         </article>
+        <p class="text-black font-bold text-2xl border-b-2">
             Acciones disponibles
         </p>
         <article class="flex flex-wrap gap-10 max-sm:gap-2">
             </button>
         </article>
+        <p class="text-black font-bold text-2xl border-b-2">
             Datos obtenidos
         </p>
         {% if calificaciones.error %}
+        <article class="bg-surface-general p-4 text-white rounded-xl">
             <p class="block font-sans text-xl antialiased font-normal uppercase tracking-wider text-center">
                 {{ calificaciones.error }}
             </p>
         </article>
         {% else %}
+        <article class="bg-surface-general p-4 text-white rounded-xl">
         </article>
         {% endif %}
         <form action="" method="post" class="form-action-session hidden">

tecnicas/templates/tecnicas/manage_sesions/sesiones-panel.html CHANGED Viewed

@@ -4,59 +4,72 @@
 {% block title %}Panel Sesiones{% endblock %}
 {% block content %}
-<article class="w-full flex flex-col justify-center items-center bg-gray-600 mt-10 mb-10">
-    <article class="max-sm:w-full flex flex-col gap-8 bg-gray-400 p-10 max-lg:p-6 max-sm:px-0 rounded-2xl">
         <header class="text-center flex flex-row max-sm:flex-col gap-8 items-center w-full">
-            <div class="bg-gray-600 p-4 text-white rounded-xl flex-1">
                 <h1 class="font-bold text-2xl">Administra las<br>sesiones sensoriales</h1>
             </div>
-            <div class="flex-1">
-                <a href="{% url 'cata_system:index' %}"
-                    class="text-white bg-blue-600 hover:bg-blue-700 active:outline-none active:ring-4 active:ring-blue-300 font-medium rounded-xl text-xl p-4 text-center uppercase">Panel
-                    principal</a>
             </div>
         </header>
-        <section class="grid grid-cols-3 max-lg:grid-cols-2 max-sm:grid-cols-1 gap-4">
             {% for sesion in sessions %}
-            <a href="{% url 'cata_system:detalles_sesion' session_code=sesion.codigo_sesion %}"
-                class="p-4 bg-gray-200 flex flex-row gap-2 justify-center items-center rounded-lg border-b-4 border-blue-500">
-                <div class="text-right *:not-last:mb-2">
-                    {% if sesion.nombre_sesion %}
-                    <p><b>Nombre:</b></p>
-                    {% endif %}
-                    <p><b>Código:</b></p>
-                    <p><b>Fecha:</b></p>
-                    <p><b>Técnica:</b></p>
-                    <p><b>Estilo:</b></p>
                 </div>
-                <div class="*:not-last:mb-2">
-                    {% if sesion.nombre_sesion %}
-                    <p>{{ sesion.nombre_sesion }}</p>
-                    {% endif %}
-                    <p>{{ sesion.codigo_sesion }}</p>
-                    <p>{{ sesion.fechaCreacion }}</p>
-                    <p class="uppercase">{{ sesion.tecnica.tipo_tecnica.nombre_tecnica }}</p>
-                    <p class="uppercase">{{ sesion.tecnica.id_estilo.nombre_estilo }}</p>
-                </div>
-            </a>
             {% endfor %}
         </section>
         <section class="flex justify-center items-center gap-2">
-            <button>
-                <img class="h-10" src="{% static 'img/less-than.svg' %}" alt="menor que">
-            </button>
-            <ul class="flex flex-row gap-2">
-                <li>1</li>
-                <li>2</li>
-                <li>3</li>
-                <li>. . .</li>
-                <li>8</li>
-            </ul>
-            <button>
-                <img class="h-10" src="{% static 'img/greater-than.svg' %}" alt="mayor que">
-            </button>
         </section>
     </article>
 </article>

 {% block title %}Panel Sesiones{% endblock %}
 {% block content %}
+<article class="w-full flex flex-col justify-center items-center bg-surface-general mt-10 mb-10">
+    <article class="max-sm:w-full flex flex-col gap-8 bg-surface-alter p-10 max-lg:p-6 max-sm:px-0 rounded-2xl">
         <header class="text-center flex flex-row max-sm:flex-col gap-8 items-center w-full">
+            <div class="bg-surface-card p-4 text-black shadow-lg rounded-xl flex-1">
                 <h1 class="font-bold text-2xl">Administra las<br>sesiones sensoriales</h1>
             </div>
+            <div class="flex-1 flex justify-end items-center">
+                <a href="{% url 'cata_system:index' %}" class="w-fit">
+                    <button
+                        class="text-black bg-btn-secondary font-medium rounded-lg text-xl p-4 text-center border-pink-800 btn-push">
+                        Ir al Panel principal
+                    </button>
+                </a>
             </div>
         </header>
+        <section class="grid grid-cols-3 max-lg:grid-cols-2 max-sm:grid-cols-1 gap-4 justify-center">
             {% for sesion in sessions %}
+            <div class="card bg-surface-card shadow-lg text-black max-w-80 w-full">
+                <div class="card-body flex flex-col justify-between">
+                    <div class="flex flex-col gap-1 [&>*]:first:text-xl [&>*]:first:font-bold [&>*]:first:border-b">
+                        {% if sesion.nombre_sesion %}
+                        <h2>{{ sesion.nombre_sesion }}</h2>
+                        <span class="text-lg underline"><b>Código:</b><br>{{ sesion.codigo_sesion }}</span>
+                        {% else %}
+                        <span class="text-lg">Código:<br>{{ sesion.codigo_sesion }}</span>
+                        {% endif %}
+                    </div>
+                    <ul class="mt-6 flex flex-col gap-2 text-base">
+                        <li>
+                            Se usa la Técnica:
+                            <span class="uppercase font-bold">
+                                {{ sesion.tecnica.tipo_tecnica.nombre_tecnica }}
+                            </span>
+                        </li>
+                        <li>
+                            El Estilo de palabras:
+                            <span class="uppercase font-bold">
+                                {{ sesion.tecnica.id_estilo.nombre_estilo }}
+                            </span>
+                        </li>
+                        <li>
+                            {{ sesion.fechaCreacion }}
+                        </li>
+                    </ul>
+                    <div class="mt-6">
+                        <a href="{% url 'cata_system:detalles_sesion' session_code=sesion.codigo_sesion %}">
+                            <button class="btn bg-btn-primary border-0 block w-full btn-push">Inspeccionar
+                                sesión</button>
+                        </a>
+                    </div>
                 </div>
+            </div>
             {% endfor %}
         </section>
         <section class="flex justify-center items-center gap-2">
+            <div class="join">
+                <button class="join-item btn bg-btn-secondary">
+                    <img class="h-full" src="{% static 'img/less-than.svg' %}" alt="menor que">
+                </button>
+                <button class="join-item btn bg-btn-secondary">Page 22</button>
+                <button class="join-item btn bg-btn-secondary">
+                    <img class="h-full" src="{% static 'img/greater-than.svg' %}" alt="mayor que">
+                </button>
+            </div>
         </section>
     </article>
 </article>

theme/static_src/src/styles.css CHANGED Viewed

@@ -2,9 +2,41 @@
 @plugin "daisyui";
 @theme {
-  --color-main-surface: #dd1550;
 }
 /**
   * A catch-all path to Django template files, JavaScript, and Python files
   * that contain Tailwind CSS classes and will be scanned by Tailwind to generate the final CSS file.
@@ -12,4 +44,6 @@
   * If your final CSS file is not being updated after code changes, you may want to broaden or narrow
   * the scope of this path.
   */
-@source "../../../**/*.{html,py,js}";

 @plugin "daisyui";
 @theme {
+  --color-surface-general: #B95E82;
+  --color-surface-alter: #F39F9F;
+  --color-surface-sweet: #FFC29B;
+  --color-surface-ligt: #FFECC0;
+  --color-surface-card: #FFF3E0;
+  --color-surface-alter-card: #91C4C3;
+  --color-btn-primary: #4CAF50;
+  --color-btn-secondary: #E45A92;
+  --color-btn-tertiary: #FFACAC;
+  --color-ct-success: #2E7D32;
+  --color-ct-error: #E62727;
 }
+.btn-push {
+  @apply border-b-4 active:border-b-0 active:border-t-4 transition-all;
+}
+/*
+#FFECC0
+#FFC29B
+#F39F9F
+#B95E82
+#80A1BA
+#91C4C3
+#B4DEBD
+#FFF7DD
+#3E1E68
+#5D2F77
+#E45A92
+#FFACAC
+*/
 /**
   * A catch-all path to Django template files, JavaScript, and Python files
   * that contain Tailwind CSS classes and will be scanned by Tailwind to generate the final CSS file.
   * If your final CSS file is not being updated after code changes, you may want to broaden or narrow
   * the scope of this path.
   */
+@source "../../../**/*.{html,py,js}";
+@source "../../../tecnicas/templates/tecnicas/*.{html,py,js}";
+@source "../../../tecnicas/templates/tecnicas/**/*.{html,py,js}";