One Hat Cyber Team

View File Name : index.php

<?php

require 'conexion.php';

session_start();
$agenda = "SELECT * FROM agenda ";
$portada = "SELECT * FROM imagen ORDER BY id DESC";
$flyer = "SELECT * FROM flyerprincipal ORDER BY id DESC";
?>



<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Oficina de la Mujer</title>
  <link href="https://fonts.googleapis.com/css2?family=Righteous&display=swap" rel="stylesheet">
  <link href="https://fonts.googleapis.com/css2?family=Open+Sans:ital,wght@0,300;0,400;0,600;0,700;0,800;1,300;1,400;1,600;1,700;1,800&family=Oswald:wght@200;300;400;500;600;700&family=PT+Sans:ital,wght@0,400;0,700;1,400;1,700&display=swap" rel="stylesheet">
  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.5.0/css/font-awesome.min.css">
  <link rel="stylesheet" href="https://cdn.jsdelivr.net/bxslider/4.2.12/jquery.bxslider.css">
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
  <script src="https://cdn.jsdelivr.net/bxslider/4.2.12/jquery.bxslider.min.js"></script>
  <link rel="stylesheet" href="Css/estilos.css">
  <link rel="stylesheet" href="Css/estilodark.css">
  <script src="js/menu.js"></script>
  <link href='https://fonts.googleapis.com/css?family=Open+Sans:400,700,600' rel='stylesheet' type='text/css'>
  <link rel="preconnect" href="https://fonts.googleapis.com">
  <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
  <link href="https://fonts.googleapis.com/css2?family=EB+Garamond&display=swap" rel="stylesheet">

  <script src="http://code.jquery.com/jquery-3.2.1.slim.min.js" integrity="sha256-k2WSCIexGzOj3Euiig+TlR8gA0EmPjuc79OEeY5L45g=" crossorigin="anonymous">
  </script>





</head>





<body>

  <header class="contenedor">
    <div class="logos-cabeza separador">
      <img class="logo-izquierdo" src="imagen/logo catamarca.png" alt="">
      <img class="logo-derecho" src="imagen/logo pj negro.png" alt="">
    </div>

    <div class="menu-burguer2">
      <div class="menu-burguer" id="menu_on">
        <div class="menu-line"></div>
        <div class="menu-line"></div>
        <div class="menu-line"></div>

      </div>
      <div>
        <h1></h1>
      </div>
    </div>

    <script type="text/javascript">
      $(document).ready(function() {
        $('#menu_on').click(function() { // Al hacer click...
          $('body').toggleClass('visible_menu'); // Añadimos o eliminamos la clase 'visible_menu' al body
        })
      });
    </script>

    <nav class="navegador .visible_menu">

      <script src="js/burguer.js">

      </script>
      <a class="ini" href="index.php">Inicio</a>
      <a class="guia" href="recursero.php">CONTACTOS ÚTILES</a>
      <a class="observatorio" href="observatorio.php">Observatorio de Sentencias</a>
      <a class="datos" href="datosestadisticos.php">Ley Micaela</a>
      <a class="capa" href="capacitaciones.php">Capacitacion</a>
      <a class="mate" href="materiales.php">Materiales</a>
      <a class="noti" href="noticias.php">Noticias</a>

    </nav>



  </header>



  <div class="idx-hero-slider" id="idxHeroSlider">
    <div class="idx-hero-track">
      <?php
      $imagenespor = mysqli_query($conexion, $portada);
      $i = 0;
      while ($row = mysqli_fetch_array($imagenespor)) {
        $i++; ?>
        <div class="idx-hero-slide <?php echo ($i === 1 ? 'is-active' : ''); ?>">
          <img src="<?php echo $row["ruta"]; ?>" alt="Portada Oficina de la Mujer" loading="lazy">
        </div>
      <?php } ?>
    </div>

    <button class="idx-hero-arrow idx-hero-prev" type="button" aria-label="Anterior">‹</button>
    <button class="idx-hero-arrow idx-hero-next" type="button" aria-label="Siguiente">›</button>

    <div class="idx-hero-dots" id="idxHeroDots" aria-label="Puntos de navegación"></div>
  </div>


  <script src="js/slider.js"></script>


  <section class="idx-wrap">

    <!-- HERO de contenido -->


    <div class="idx-grid">

      <!-- ¿Qué es? -->
      <article class="idx-card" id="card-que-es">
      <img src="./imagen/principal.jpeg" alt="">
      </article>


      <!-- Equipo -->
      <article class="idx-card" id="card-equipo">
        <h2 class="idx-card__title">Equipo de trabajo</h2>

        <div class="idx-team">
          <div class="idx-person">
            <img class="idx-person__img" src="imagen/Picsart_23-07-07_11-53-08-700.png" alt="">
            <div class="idx-person__info">
              <div class="idx-person__name">Dra. Fabiana Edith Gómez</div>
              <div class="idx-person__role">Ministra de la Corte de Justicia — Titular de la Oficina de la Mujer</div>
            </div>
          </div>

          <div class="idx-person">
            <img class="idx-person__img" src="imagen/PicsArt_07-27-09.45.14.png" alt="">
            <div class="idx-person__info">
              <div class="idx-person__name">Dra. Marcela Whitaker</div>
              <div class="idx-person__role">Secretaria</div>
            </div>
          </div>

          <div class="idx-person">
            <img class="idx-person__img" src="imagen/FOTOALE.png" alt="">
            <div class="idx-person__info">
              <div class="idx-person__name">Ing. Alejandra de la Mota</div>
              <div class="idx-person__role">Oficial Superior Profesional</div>
            </div>
          </div>
        </div>
      </article>


      

   


   

   





      <!-- Flyer principal -->
      <?php
      $flyerprin = mysqli_query($conexion, $flyer);
      if (mysqli_num_rows($flyerprin)) {
      ?>
        <article class="idx-card idx-card--flyer" id="card-datos">

          <div class="idx-flyer-head">
            <h2 class="idx-card__title">DATOS OFICIALES</h2>

            <div class="idx-flyer-actions">
              <button class="idx-flyer-btn" type="button" id="idxFlyerPrev" aria-label="Anterior">‹</button>
              <button class="idx-flyer-btn" type="button" id="idxFlyerNext" aria-label="Siguiente">›</button>
            </div>
          </div>

          <div class="idx-flyer-slider" id="idxFlyerSlider" tabindex="0" aria-label="Carrusel de novedades">
            <?php while ($row2 = mysqli_fetch_array($flyerprin)) { ?>
              <figure
                class="idx-flyer-slide"
                data-date="<?php echo htmlspecialchars($row2['fecha'] ?? ''); ?>">
                <img
                  class="idx-flyer-img"
                  src="<?php echo $row2["ruta"]; ?>"
                  alt="Novedad Oficina de la Mujer"
                  loading="lazy">
                <figcaption class="idx-flyer-caption">
                  <span class="idx-flyer-pill">
                    <?php echo htmlspecialchars($row2['fecha'] ?? ''); ?>
                  </span>
                </figcaption>
              </figure>
            <?php } ?>
          </div>

          <div class="idx-flyer-nav" id="idxFlyerNav" aria-label="Navegación por fechas"></div>

        </article>
      <?php } ?>

    </div>
  </section>


  <section class="ftx-pre">
    <div class="ftx-pre__inner">
      <a class="ftx-pre__logo" href="https://amja.org.ar/" target="_blank" rel="noopener">
        <img src="./imagen/omantifuter-1.jpeg" alt="AMJA">
      </a>

      <a class="ftx-pre__logo" href="https://om.csjn.gov.ar/om/" target="_blank" rel="noopener">
        <img src="./imagen/omantifooter-2.jpeg" alt="Oficina de la Mujer - CSJN">
      </a>

      <a class="ftx-pre__logo" href="https://www.unwomen.org/es" target="_blank" rel="noopener">
        <img src="./imagen/om-antifuter-3.jpeg" alt="ONU Mujeres">
      </a>
    </div>
  </section>





  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.5.0/css/font-awesome.min.css">
  <a href="https://api.whatsapp.com/send?phone=543834985593" class="float" target="_blank">
    <i class="fa fa-whatsapp my-float"></i>
  </a>



  <footer class="contenedor">

    <div class="logos-pie ">
      <img class="logo-izquierdo" src="imagen/logo catamarca.png" alt="">
      <div>
        <?php if (isset($_SESSION['usuario'])) : ?>

          <a class="guiainteractiva" href="CerrarSesion.php">Cerrar Sesion</a>
          <a class="guiainteractiva" href="administrador.php">Administrador</a>
        <?php else : ?>
          <a class="guiainteractiva" href="login.php">Ingresar</a>

        <?php endif; ?>

        <a class="guiainteractiva" href="direccion.php">Direccion <img class="pin" src="imagen/pin.png" width="20px" alt=""></a>
      </div>


      <div class="footer-redes-buttones">

        <a class="footer-enlace" target="_blank" href="https://instagram.com/catamarcaom?utm_medium=copy_link"><img src="imagen/580b57fcd9996e24bc43c521.png" alt=""></a>
        <a class="footer-enlace" target="_blank" href="https://www.facebook.com/Oficina-De-La-MUJER-Poder-Judicial-de-Catamarca-106722248403654"><img src="imagen/facebook.png" alt=""></a>
      </div>

      <img class="logo-derecho" src="imagen/logo pj circular negro.png" alt="">
    </div>




  </footer>

  <div class="contenedor copyright">
    <p> Poder Judicial de Catamarca - Todos los derechos Reservados 2022 &copy;</p>
  </div>


  <script>
    (function() {
      const slider = document.getElementById('idxFlyerSlider');
      const nav = document.getElementById('idxFlyerNav');
      const btnPrev = document.getElementById('idxFlyerPrev');
      const btnNext = document.getElementById('idxFlyerNext');

      if (!slider) return;

      const slides = Array.from(slider.querySelectorAll('.idx-flyer-slide'));
      if (!slides.length) return;

      let index = 0;
      let interval = null;
      const DELAY = 4000;

      function showSlide(i) {
        slides.forEach(s => s.classList.remove('is-active'));
        slides[i].classList.add('is-active');

        // chips activos
        if (nav) {
          const chips = nav.querySelectorAll('.idx-flyer-chip');
          chips.forEach(c => c.classList.remove('is-active'));
          chips[i]?.classList.add('is-active');
        }
      }

      function next() {
        index = (index + 1) % slides.length;
        showSlide(index);
      }

      function prev() {
        index = (index - 1 + slides.length) % slides.length;
        showSlide(index);
      }

      function start() {
        stop();
        interval = setInterval(next, DELAY);
      }

      function stop() {
        if (interval) clearInterval(interval);
        interval = null;
      }

      // Build chips con fechas
      if (nav) {
        nav.innerHTML = '';
        slides.forEach((slide, i) => {
          const date = slide.getAttribute('data-date') || `Dato Oficial ${i+1}`;
          const chip = document.createElement('button');
          chip.type = 'button';
          chip.className = 'idx-flyer-chip';
          chip.textContent = date;
          chip.addEventListener('click', () => {
            index = i;
            showSlide(index);
            start(); // resetea timer
          });
          nav.appendChild(chip);
        });
      }

      // Init
      showSlide(index);
      start();

      // Flechas
      btnNext?.addEventListener('click', () => {
        next();
        start();
      });
      btnPrev?.addEventListener('click', () => {
        prev();
        start();
      });

      // ⏸ Pausa cuando lee: hover o foco
      slider.addEventListener('mouseenter', stop);
      slider.addEventListener('mouseleave', start);
      slider.addEventListener('focusin', stop);
      slider.addEventListener('focusout', start);

      // Teclado (cuando está enfocado)
      slider.addEventListener('keydown', (e) => {
        if (e.key === 'ArrowRight') {
          next();
          start();
        }
        if (e.key === 'ArrowLeft') {
          prev();
          start();
        }
      });
    })();


    (function() {
      const slider = document.getElementById('idxHeroSlider');
      if (!slider) return;

      const slides = Array.from(slider.querySelectorAll('.idx-hero-slide'));
      const prevBtn = slider.querySelector('.idx-hero-prev');
      const nextBtn = slider.querySelector('.idx-hero-next');
      const dotsWrap = document.getElementById('idxHeroDots');

      if (!slides.length) return;

      let index = 0;
      let timer = null;
      const DELAY = 4000;

      function show(i) {
        slides.forEach(s => s.classList.remove('is-active'));
        slides[i].classList.add('is-active');

        if (dotsWrap) {
          const dots = dotsWrap.querySelectorAll('.idx-hero-dot');
          dots.forEach(d => d.classList.remove('is-active'));
          dots[i]?.classList.add('is-active');
        }
      }

      function next() {
        index = (index + 1) % slides.length;
        show(index);
      }

      function prev() {
        index = (index - 1 + slides.length) % slides.length;
        show(index);
      }

      function start() {
        stop();
        timer = setInterval(next, DELAY);
      }

      function stop() {
        if (timer) clearInterval(timer);
        timer = null;
      }

      // dots
      if (dotsWrap) {
        dotsWrap.innerHTML = '';
        slides.forEach((_, i) => {
          const dot = document.createElement('button');
          dot.type = 'button';
          dot.className = 'idx-hero-dot' + (i === 0 ? ' is-active' : '');
          dot.addEventListener('click', () => {
            index = i;
            show(index);
            start();
          });
          dotsWrap.appendChild(dot);
        });
      }

      // init
      show(index);
      start();

      // navigation
      nextBtn?.addEventListener('click', () => {
        next();
        start();
      });
      prevBtn?.addEventListener('click', () => {
        prev();
        start();
      });

      // pause on read
      slider.addEventListener('mouseenter', stop);
      slider.addEventListener('mouseleave', start);
      slider.addEventListener('focusin', stop);
      slider.addEventListener('focusout', start);

      // touch (mobile): pausa mientras toca
      slider.addEventListener('touchstart', stop, {
        passive: true
      });
      slider.addEventListener('touchend', start);

    })();
  </script>

</body>




</html>