Primer commit al repo de funcionarios

2025-08-07 10:18:56 -06:00
parent fa8188c8b4
commit db13386edf
17 changed files with 1029 additions and 122 deletions
@@ -12,12 +12,15 @@
  --font-mono: var(--font-geist-mono);
 }

+/* ❌ Elimina o comenta esta parte para desactivar el modo oscuro automático */
+/*
@media (prefers-color-scheme: dark) {
  :root {
    --background: #0a0a0a;
    --foreground: #ededed;
  }
 }
+*/

 body {
  background: var(--background);
@@ -1,6 +1,10 @@
 import type { Metadata } from "next";
 import { Geist, Geist_Mono } from "next/font/google";
-import "./globals.css";
+import Header from "@/components/layout/header";
+import Footer from "@/components/layout/footer";
+import '@/sass/bootstrap.scss'; // ✅ Aquí tienes tus colores y SCSS correctos
+import "./globals.css";         // ⬅️ Después
+

 const geistSans = Geist({
  variable: "--font-geist-sans",
@@ -27,7 +31,9 @@ export default function RootLayout({
      <body
        className={`${geistSans.variable} ${geistMono.variable} antialiased`}
      >
+        <Header />
        {children}
+        <Footer />
      </body>
    </html>
  );
@@ -2,102 +2,100 @@ import Image from "next/image";

 export default function Home() {
  return (
-    <div className="font-sans grid grid-rows-[20px_1fr_20px] items-center justify-items-center min-h-screen p-8 pb-20 gap-16 sm:p-20">
-      <main className="flex flex-col gap-[32px] row-start-2 items-center sm:items-start">
-        <Image
-          className="dark:invert"
-          src="/next.svg"
-          alt="Next.js logo"
-          width={180}
-          height={38}
-          priority
-        />
-        <ol className="font-mono list-inside list-decimal text-sm/6 text-center sm:text-left">
-          <li className="mb-2 tracking-[-.01em]">
-            Get started by editing{" "}
-            <code className="bg-black/[.05] dark:bg-white/[.06] font-mono font-semibold px-1 py-0.5 rounded">
-              src/app/page.tsx
-            </code>
-            .
-          </li>
-          <li className="tracking-[-.01em]">
-            Save and see your changes instantly.
-          </li>
-        </ol>
+    <main className="container-fluid py-4 bg-light min-vh-100">
+      <div className="row">
+        {/* Sidebar de Filtro */}
+        <div className="col-12 col-md-3 mb-4">
+          <div className="bg-white p-4 rounded shadow-sm">
+            <h4 className="mb-4">Filtro</h4>

-        <div className="flex gap-4 items-center flex-col sm:flex-row">
-          <a
-            className="rounded-full border border-solid border-transparent transition-colors flex items-center justify-center bg-foreground text-background gap-2 hover:bg-[#383838] dark:hover:bg-[#ccc] font-medium text-sm sm:text-base h-10 sm:h-12 px-4 sm:px-5 sm:w-auto"
-            href="https://vercel.com/new?utm_source=create-next-app&utm_medium=appdir-template-tw&utm_campaign=create-next-app"
-            target="_blank"
-            rel="noopener noreferrer"
-          >
-            <Image
-              className="dark:invert"
-              src="/vercel.svg"
-              alt="Vercel logomark"
-              width={20}
-              height={20}
-            />
-            Deploy now
-          </a>
-          <a
-            className="rounded-full border border-solid border-black/[.08] dark:border-white/[.145] transition-colors flex items-center justify-center hover:bg-[#f2f2f2] dark:hover:bg-[#1a1a1a] hover:border-transparent font-medium text-sm sm:text-base h-10 sm:h-12 px-4 sm:px-5 w-full sm:w-auto md:w-[158px]"
-            href="https://nextjs.org/docs?utm_source=create-next-app&utm_medium=appdir-template-tw&utm_campaign=create-next-app"
-            target="_blank"
-            rel="noopener noreferrer"
-          >
-            Read our docs
-          </a>
+            {/* Campos de filtro */}
+            <div className="mb-3">
+              <label htmlFor="nombre" className="form-label">Nombre</label>
+              <input type="text" id="nombre" className="form-control" placeholder="Buscar nombre..." />
+            </div>
+
+            <div className="mb-3">
+              <label htmlFor="adscripcion" className="form-label">Área</label>
+              <select id="adscripcion" className="form-select">
+                <option>Selecciona Adscripción</option>
+                <option>Unidad A</option>
+                <option>Unidad B</option>
+              </select>
+            </div>
+
+            
+
+            <div className="d-grid gap-2">
+              <button className="btn btn-primary">Filtrar</button>
+              <button className="btn btn-secondary">Limpiar Filtro</button>
+            </div>
+          </div>
        </div>
-      </main>
-      <footer className="row-start-3 flex gap-[24px] flex-wrap items-center justify-center">
-        <a
-          className="flex items-center gap-2 hover:underline hover:underline-offset-4"
-          href="https://nextjs.org/learn?utm_source=create-next-app&utm_medium=appdir-template-tw&utm_campaign=create-next-app"
-          target="_blank"
-          rel="noopener noreferrer"
-        >
-          <Image
-            aria-hidden
-            src="/file.svg"
-            alt="File icon"
-            width={16}
-            height={16}
-          />
-          Learn
-        </a>
-        <a
-          className="flex items-center gap-2 hover:underline hover:underline-offset-4"
-          href="https://vercel.com/templates?framework=next.js&utm_source=create-next-app&utm_medium=appdir-template-tw&utm_campaign=create-next-app"
-          target="_blank"
-          rel="noopener noreferrer"
-        >
-          <Image
-            aria-hidden
-            src="/window.svg"
-            alt="Window icon"
-            width={16}
-            height={16}
-          />
-          Examples
-        </a>
-        <a
-          className="flex items-center gap-2 hover:underline hover:underline-offset-4"
-          href="https://nextjs.org?utm_source=create-next-app&utm_medium=appdir-template-tw&utm_campaign=create-next-app"
-          target="_blank"
-          rel="noopener noreferrer"
-        >
-          <Image
-            aria-hidden
-            src="/globe.svg"
-            alt="Globe icon"
-            width={16}
-            height={16}
-          />
-          Go to nextjs.org →
-        </a>
-      </footer>
-    </div>
+
+        {/* Contenido principal */}
+        <div className="col-12 col-md-9">
+          {/* Encabezado y paginación en una línea */}
+          <div className="d-flex justify-content-between align-items-center mb-4 flex-wrap gap-2">
+            <h2 className="text-dorado m-0">Directorio de Funcionarios</h2>
+            <nav>
+              <ul className="pagination mb-0">
+                <li className="page-item disabled">
+                  <span className="page-link">Anterior</span>
+                </li>
+                <li className="page-item active">
+                  <span className="page-link">1</span>
+                </li>
+                <li className="page-item">
+                  <a className="page-link" href="#">2</a>
+                </li>
+                <li className="page-item">
+                  <a className="page-link" href="#">3</a>
+                </li>
+                <li className="page-item">
+                  <a className="page-link" href="#">Siguiente</a>
+                </li>
+              </ul>
+            </nav>
+          </div>
+
+          {/* Tarjetas */}
+          <div className="row g-4 m-2">
+            {[...Array(8)].map((_, i) => (
+              <div key={i} className="col-12 col-md-6 col-lg-4">
+                <div className="card h-100 shadow-sm">
+                  <div className="card-body d-flex flex-row align-items-center">
+                    {/* Imagen */}
+                    <div className="me-3 flex-shrink-0">
+                      <img
+                        src="https://i.pravatar.cc/150?img=1"
+                        alt="Avatar"
+                        width={130}
+                        height={200}
+                      />
+                    </div>
+
+                    {/* Información */}
+                    <div>
+                      <h5 className="card-title fw-bold mb-5">
+                        Nombre Profesor {i + 1}
+                      </h5>
+                      <p className="card-text mb-1">
+                        <strong>Ubicación: </strong>
+                        Unidad de Investigación Multidisciplinaria de la FES Acatlán {i % 2 === 0 ? "I" : "II"}, Cubículo {i + 10}
+                      </p>
+                      <p className="card-text mb-0">
+                        <strong>Correo: </strong>
+                        profesor{i + 1}@correo.unam.mx
+                      </p>
+                    </div>
+                  </div>
+                </div>
+              </div>
+            ))}
+          </div>
+        </div>
+      </div>
+    </main>
  );
 }
@@ -0,0 +1,20 @@
+import React from 'react';
+
+export default function Footer() {
+    const date = new Date();
+    const year = date.getFullYear();
+
+    return (
+        <footer className='bg-azul p-3 text-center text-white small'>
+            <p className='m-0'>
+                Hecho en México. Todos los derechos reservados {year}.
+            </p>
+            <p className='m-0'>
+                Esta página puede ser reproducida con fines no lucrativos,
+                siempre y cuando no se mutile, se cite la fuente completa y su
+                dirección electrónica. De otra forma, requiere permiso previo
+                por escrito de la institución.
+            </p>
+        </footer>
+    );
+}
@@ -0,0 +1,33 @@
+import Image from 'next/image';
+import React from 'react';
+import Link from 'next/link';
+import { Container } from 'react-bootstrap';
+
+export default function Header({ small = false }: { small?: boolean }) {
+    return (
+        <header className='bg-azul p-3'>
+            <Container className='d-flex justify-content-center justify-content-sm-between align-items-center'>
+                <Link
+                    href={'https://www.unam.mx/'}
+                    target='_blank'
+                    className='d-none d-sm-block'
+                >
+                    <Image
+                        src='/logo_unam.png'
+                        alt='Logo de la UNAM'
+                        width={small ? 200 : 280}
+                        height={small ? 60 : 84}
+                    />
+                </Link>
+                <Link href={'https://acatlan.unam.mx/'} target='_blank'>
+                    <Image
+                        src='/logo_acatlan.png'
+                        alt='Logo de la fes Acatlàn'
+                        width={small ? 200 : 250}
+                        height={small ? 48 : 60}
+                    />
+                </Link>
+            </Container>
+        </header>
+    );
+}
@@ -0,0 +1,231 @@
+@import 'bootstrap/scss/functions';
+
+$azul: #003d79;
+$dorado: #bd8c01;
+
+$red-guapa: #9e1d15;
+$blue-guapa: #3d6cb4;
+$yellow-guapa: #eca728;
+
+$modal-lg: 900px;
+
+body {
+  background-color: #f2f2f2 !important;
+}
+
+$font-family-sans-serif: 'Roboto', -apple-system, BlinkMacSystemFont, 'Segoe UI',
+  'Helvetica Neue', Arial, sans-serif, 'Apple Color Emoji', 'Segoe UI Emoji',
+  'Segoe UI Symbol';
+
+@import 'bootstrap/scss/variables';
+@import 'bootstrap/scss/variables-dark';
+
+$custom-colors: (
+  'azul': $azul,
+  'dorado': $dorado,
+  'red-guapa': $red-guapa,
+  'blue-guapa': $blue-guapa,
+  'yellow-guapa': $yellow-guapa,
+);
+
+$theme-colors: map-merge($theme-colors, $custom-colors);
+
+@import 'bootstrap/scss/variables';
+@import 'bootstrap/scss/variables-dark';
+@import 'bootstrap/scss/maps';
+@import 'bootstrap/scss/mixins';
+@import 'bootstrap/scss/bootstrap';
+
+.form-registro {
+  .form-floating {
+    --bs-body-bg: #f2f2f2;
+    --bs-border-width: 0;
+
+    .form-control:focus {
+      box-shadow: none;
+    }
+
+    .form-control:focus ~ label {
+      color: #666666 !important;
+    }
+
+    border: 0;
+    border-bottom: 1px solid #ccc;
+  }
+}
+
+@import 'bootstrap/scss/maps';
+@import 'bootstrap/scss/mixins';
+@import 'bootstrap/scss/bootstrap';
+
+
+.aviso {
+  position: relative;
+  display: inline-block;
+  z-index: 100;
+
+  &::before {
+    content: '';
+    position: absolute;
+    bottom: 55%;
+    left: 125%;
+    width: 150%;
+    height: 2px;
+    background-color: $dorado;
+    transform: translateY(5px);
+  }
+
+  &::after {
+    content: '';
+    position: absolute;
+    bottom: 55%;
+    right: 125%;
+    width: 150%;
+    height: 2px;
+    background-color: $dorado;
+    transform: translateY(5px);
+  }
+}
+
+.login {
+  position: relative;
+  &::before {
+    content: '';
+    position: absolute;
+    bottom: 45%;
+    left: 9rem;
+    width: 50%;
+    height: 2px;
+    background-color: $azul;
+
+    @include media-breakpoint-up(md) {
+      left: 10rem;
+    }
+  }
+}
+
+.scale {
+  transition: transform 0.3s ease-in-out;
+
+  &:hover {
+    transform: scale(1.1);
+  }
+}
+
+.scale-2 {
+  transition: transform 0.3s ease-in-out;
+
+  &:hover {
+    transform: scale(1.05);
+  }
+}
+
+.scale-3 {
+  transition: transform 0.3s ease-in-out;
+
+  &:hover {
+    transform: scale(1.025);
+  }
+}
+
+.dropdown-toggle::after {
+  display: none !important;
+}
+
+#nested-dropdown {
+  color: #000;
+}
+
+.dropdown-item:active,
+.dropdown-item:focus {
+  color: #000;
+  background-color: #f2f2f2;
+}
+
+.navbar-toggler:active,
+.navbar-toggler:focus {
+  border: none !important;
+  box-shadow: none !important;
+}
+
+.nav.nav-string {
+  .nav-item {
+    .nav-link {
+      text-decoration: underline;
+      &.active {
+        color: $dorado;
+      }
+      &:hover {
+        color: $azul;
+      }
+    }
+  }
+}
+
+#dropdown-basic-button {
+  &::before {
+    display: none;
+  }
+}
+
+.full-center {
+  //flex-grow-1 d-flex flex-column justify-content-center align-items-center
+  @extend .flex-grow-1;
+  @extend .d-flex;
+  @extend .flex-column;
+  @extend .justify-content-center;
+  @extend .align-items-center;
+}
+
+.minNavbar {
+  width: 100%;
+  background-color: #d59f0f;
+  height: 32px;
+}
+
+.mainNavbar {
+  width: 100%;
+  background-color: #ffffff;
+  height: 64px;
+}
+
+.bg-hover {
+  transition: background-color 0.3s ease-in-out;
+
+  &:hover {
+    background-color: #f2f2f2;
+  }
+}
+
+.titulo-con-lineas {
+  color: lighten($azul, 20%);
+}
+
+/* .titulo-con-lineas {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  gap: 1rem;
+  color: lighten($azul, 20%);
+  @include media-breakpoint-up(md) {
+    text-wrap: nowrap;
+  }
+}
+
+.titulo-con-lineas::before,
+.titulo-con-lineas::after {
+  content: '';
+  width: 100%;
+  height: 2px;
+  background-color: lighten($azul, 20%);
+}
+ */
+
+.imageFlip {
+  display: inline-block;
+  transform-style: preserve-3d;
+  transition: transform 1s;
+}
+.imageFlip:hover {
+  transform: rotateY(360deg);
+}