Gecko [ www.utparral.edu.mx ]

Name	Size	Permission
noticias	[ DIR ]	drwxrwxr-x
debug.log	125 B	-rwxrwxr-x
ele.php	229 B	-rwxrwxr-x
ingles.php	7.65 KB	-rwxrwxr-x
modalactividades.php	13.86 KB	-rwxrwxr-x
modaladminballeza.php	6.31 KB	-rwxrwxr-x
modaladmindespre.php	6.01 KB	-rwxrwxr-x
modaladmin.php	9.09 KB	-rwxrwxr-x
modalagriculturaingballeza.php	8.11 KB	-rwxrwxr-x
modalagriculturaing.php	8.1 KB	-rwxrwxr-x
modalagricultura.php	7.34 KB	-rwxrwxr-x
modalagriculturatsuballeza.php	7.43 KB	-rwxrwxr-x
modalagriculturatsu.php	7.42 KB	-rwxrwxr-x
modalbecas.php	3.55 KB	-rwxrwxr-x
modalbolsa.php	2.8 KB	-rwxrwxr-x
modaldiplomado.php	18.49 KB	-rwxrwxr-x
modalegresados.php	7.84 KB	-rwxrwxr-x
modalempresariales.php	8.7 KB	-rwxrwxr-x
modalesegreso.php	17.46 KB	-rwxrwxr-x
modalestadias.php	6.34 KB	-rwxrwxr-x
modalfep.php	9.53 KB	-rwxrwxr-x
modalmantenimientodespre.php	6.39 KB	-rwxrwxr-x
modalmantenimiento.php	8.93 KB	-rwxrwxr-x
modalmineriadespre.php	5.89 KB	-rwxrwxr-x
modalmineria.php	8.14 KB	-rwxrwxr-x
modalmmp.php	9.81 KB	-rwxrwxr-x
modalmovilidad.php	1.56 KB	-rwxrwxr-x
modalnodess.php	2.77 KB	-rw-rwxr--
modalpim.php	8.57 KB	-rwxrwxr-x
modalprograma.php	6.17 KB	-rwxrwxr-x
modalprogramas.php	1.88 KB	-rwxrwxr-x
modalpublicaciones.php	13.52 KB	-rwxrwxr-x
modalse.php	6.77 KB	-rwxrwxr-x
modalservicios.php	10.17 KB	-rwxrwxr-x
modalsistemasdespre.php	6.77 KB	-rwxrwxr-x
modalsistemas.php	8.2 KB	-rwxrwxr-x
modalticsballeza.php	8.25 KB	-rwxrwxr-x
modaltics.php	10.17 KB	-rwxrwxr-x
modaltirdballeza.php	9.25 KB	-rwxrwxr-x
modaltird.php	9.38 KB	-rwxrwxr-x
modaltirtballeza.php	10.33 KB	-rwxrwxr-x
modaltirt.php	10.4 KB	-rwxrwxr-x
modaltitulacion.php	11.77 KB	-rwxrwxr-x
modaltsumineria.php	10.55 KB	-rwxrwxr-x
noticia.php	918 B	-rwxrwxr-x

Code Editor : modalestadias.php

<head>
  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/animate.css/3.7.2/animate.min.css">
  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css">
  <style>
    /* ======== ESTILO GENERAL DEL MODAL ======== */
    .modal-dialog {
      max-width: 900px; /* tamaño moderado */
      margin: 30px auto;
    }

.modal-content {
      border-radius: 15px;
      overflow: hidden;
      box-shadow: 0 8px 25px rgba(0, 0, 0, 0.25);
      border: none;
      background-color: #ffffff;
      animation: zoomIn 0.4s ease;
    }

@keyframes zoomIn {
      from { transform: scale(0.95); opacity: 0; }
      to { transform: scale(1); opacity: 1; }
    }

.modal-header {
      background: linear-gradient(135deg, #2e7d32, #43a047);
      color: #fff;
      border-bottom: none;
      padding: 15px 25px;
    }

.modal-header h4 {
      font-weight: 600;
      letter-spacing: 1px;
    }

.modal-body {
      margin-left: 60px;
      margin-right: 60px;
      background-color: #f9faf9;
      padding-top: 30px;
      padding-bottom: 30px;
    }

.modal-footer {
      border-top: none;
      background-color: #e8f5e9;
      padding: 15px 25px;
    }

.btn-danger {
      background-color: #388e3c !important;
      border: none;
      border-radius: 8px;
      padding: 8px 20px;
      transition: all 0.3s ease;
    }

.btn-danger:hover {
      background-color: #2e7d32 !important;
      transform: scale(1.03);
    }

/* ======== SECCIONES ======== */
    .team-section h5 {
      color: #2e7d32;
      font-weight: 700;
      text-transform: uppercase;
      letter-spacing: 0.5px;
    }

.team-section h6 {
      color: #4e4e4e;
      font-size: 0.9rem;
      margin-bottom: 15px;
    }

.avatar img {
      transition: all 0.3s ease-in-out;
      border: 3px solid #a5d6a7;
      border-radius: 20px;
      padding: 5px;
      background-color: #ffffff;
    }

.avatar img:hover {
      transform: scale(1.05);
      box-shadow: 0 8px 20px rgba(76, 175, 80, 0.3);
    }

i.fas {
      color: #2e7d32;
      transition: all 0.3s ease;
      margin-top: 8px;
    }

i.fas:hover {
      color: #1b5e20;
      transform: scale(1.2);
    }

/* ======== RESPONSIVO ======== */
    @media (max-width: 992px) {
      .modal-body {
        margin-left: 20px;
        margin-right: 20px;
      }

.modal-dialog {
        max-width: 95%;
      }
    }

@media (max-width: 768px) {
      .modal-body {
        margin-left: 10px;
        margin-right: 10px;
      }

.avatar img {
        width: 150px;
        height: 150px;
      }

.team-section h5 {
        font-size: 1rem;
      }
    }
  </style>
</head>

<div class="modal fade" id="myModal9" tabindex="-1">
  <div class="modal-dialog">
    <div class="modal-content animate__animated animate__fadeInDown">
      
      
      <div class="modal-header">
        <h4 class="modal-title"><i class="fa-solid fa-briefcase"></i> ESTADÍAS</h4>
        <button type="button" class="close text-white" data-dismiss="modal">&times;</button>
      </div>
      
      
      <div class="modal-body">
        
        
        <section class="team-section text-center my-5">
          <div class="row text-center wow fadeInLeft">

<div class="col-md-6 mb-5">
              <div class="avatar mx-auto">
                <img src="img/iconos/datos.png" class="img-fluid" alt="Inducción" width="230" height="230">
              </div>
              <h5>INDUCCIÓN</h5>
              <h6>(Presentación)</h6>
              <a href="estadias/Induccion.pdf" target="_blank">
                <i class="fas fa-file-powerpoint fa-2x"></i>
              </a>
            </div>

<div class="col-md-6 mb-5">
              <div class="avatar mx-auto">
                <img src="img/iconos/encuesta.png" class="img-fluid" alt="Solicitud" width="230" height="230">
              </div>
              <h5>SOLICITUD</h5>
              <h6>(En línea)</h6>
              <a href="https://docs.google.com/forms/d/e/1FAIpQLSdpe61sUQ7ZDw56opfPx9agO8mE19UJpaeAfSbC6Qm5HKgSTQ/viewform" target="_blank">
                <i class="fas fa-desktop fa-2x"></i>
              </a>
            </div>

</div>
        </section>

<section class="team-section text-center my-5">
          <div class="row text-center wow fadeInLeft">

<div class="col-md-6 mb-5">
              <div class="avatar mx-auto">
                <img src="img/iconos/formato.png" class="img-fluid" alt="Formato seguimiento" width="230" height="230">
              </div>
              <h5>FORMATO DE SEGUIMIENTO</h5>
              <h6>(Se imprime)</h6>
              <a href="estadias/seguimiento.docx" target="_blank">
                <i class="fas fa-file-download fa-2x"></i>
              </a>
            </div>

<div class="col-md-6 mb-5">
              <div class="avatar mx-auto">
                <img src="img/iconos/formato2.png" class="img-fluid" alt="Evaluación" width="230" height="230">
              </div>
              <h5>EVALUACIÓN</h5>
              <h6>(Se imprime)</h6>
              <a href="estadias/evaluacion.pdf" target="_blank">
                <i class="fas fa-file-download fa-2x"></i>
              </a>
            </div>

<div class="col-md-12">
              <div class="avatar mx-auto">
                <img src="img/calendario.png" class="img-fluid" alt="Calendario" width="230" height="230">
              </div>
              <h5>CALENDARIO DE ESTADÍAS</h5>
              <a href="documentos/vinculacion/calendario_estadias_sep_dic_2024.pdf" target="_blank">
                <i class="fas fa-file-download fa-2x"></i>
              </a>
            </div>

</div>
        </section>

</div>

<div class="modal-footer">
        <button type="button" class="btn btn-danger" data-dismiss="modal">
          <i class="fas fa-times-circle"></i> Cerrar
        </button>
      </div>
    </div>
  </div>
</div>

${this.title}

Code Editor : modalestadias.php