index_01.html

---
layout: default
title: Home
permalink: /test-home
---

<style>

  select {
    font-size: 16px; /* Set the font size for the selected option */
  }
  
  select option {
    font-size: 16px; /* Change the font size for the options */
  }
  
  
  .containerd {
              display: flex;
              flex-direction: column;
              justify-content: center;
              align-items: center;
              height: 100%;
              padding: 0px;
              /* background: linear-gradient(135deg, #f8f9fa 0%, #e9ecef 100%); */
          }
  
          .content-selection {
              background: #ffffff;
              border-radius: 8px;
              padding: 10px;
              text-align: center;
              max-width: 500px;
              width: 100%;
              box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
          }
  
          h1 {
              font-size: 2.5rem;
              margin-bottom: 5px;
              font-weight: 700;
          
          }
  
          select, button {
              width: 100%;
              padding: 12px;
              margin: 10px 0;
              border-radius: 4px;
              border: 1px solid #ced4da;
              font-size: 1rem;
              font-family: 'Open Sans', sans-serif;
              transition: all 0.3s ease;
          }
  
          select {
              background-color: #ffffff;
              color: #495057;
              appearance: none;
              padding-right: 30px;
              cursor: pointer;
              background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='%23495057' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'%3E%3C/polyline%3E%3C/svg%3E");
              background-repeat: no-repeat;
              background-position: right 10px center;
              background-size: 15px;
          }
  
          select:focus {
              outline: none;
              border-color: #2133;
              box-shadow: 0 0 0 3px rgba(3, 65, 109, 0.2);
          }
  
          button {
              background-color: #8c2133;
              color: #ffffff;
              font-weight: 600;
              cursor: pointer;
              border: none;
          }
  
          button:hover {
              background-color: #8c2133;
          }
  
          button:disabled {
              background-color: #6c757d;
              cursor: not-allowed;
          }
  
          /* .logo {
              width: 100px;
              height: 100px;
              margin-bottom: 20px;
          } */
  
          @keyframes fadeInUp {
              from {
                  opacity: 0;
                  transform: translateY(20px);
              }
              to {
                  opacity: 1;
                  transform: translateY(0);
              }
          }
  
          .content-selection > * {
              animation: fadeInUp 0.5s ease-out forwards;
              opacity: 0;
          }
  
          .content > *:nth-child(1) { animation-delay: 0.1s; }
          .content > *:nth-child(2) { animation-delay: 0.2s; }
          .content > *:nth-child(3) { animation-delay: 0.3s; }
          .content > *:nth-child(4) { animation-delay: 0.4s; }
  
  </style>
  <div class="containerd">
    <div class="content-selection">
        <h3>Welcome </h3> 
        <select id="userType">
          <option value="">Select Your Role</option>
            <option value="Trainee">Trainee</option>
            <option value="Trainer">Trainer</option>
        </select>
        <button id="navigateButton" disabled><h6>Enter Portal</h6></button>
    </div>
  </div>
  
  
  <!-- <div class="row">
  
    <div class="col-sm-12">
      <h3></h3>
      <p>
        The Africa CDC Pathogen Genomics Initiative NGS Academy aims to develop and deliver a comprehensive training
        framework for the implementation of next generation sequencing (NGS) for pathogen surveillance. This
        includes
        all
        aspects of NGS, from sample collection to sequencing and analysis to inform public health interventions.</p>
  
    </div>
  </div>
  
  <div class="row">
    <div class="col-sm-12">
      <p>
      <h3>Pathogen genomics and epidemiology training survey </h3>
      </p>
      <p>A landscaping exercise is being carried out to identify existing training courses and materials relevant to
        Pathogen Genomics and Epidemiology. Information about courses and training materials are being collated into
        a
        central resource that may be used in training the various role players in this area, most notably in the
        public
        health sector.
        The Survey can be accessed <a href="https://redcap.h3abionet.org/redcap/surveys/?s=FCA9MTKHPH">here</a>.
      </p>
    </div>
  </div>
  
  
  <div class="row ">
  
    <div class="col-sm-12">
  
      <h3>Upcoming and current courses </h3>
  
      <a href="{{ site.baseurl }}/courses">Schedule of upcoming and current
        courses</a>
    </div>
  </div>
  
  <div class="row ">
    <div class="col-sm-12">
  
      <p>
      <h3>Tools and resources </h3>
      </p>
      <a href="{{ site.baseurl }}/resources">List of relevant tools</a>
    </div>
  </div> -->
  
  
  <script>
    const userTypeSelect = document.getElementById('userType');
          const navigateButton = document.getElementById('navigateButton');
  
          userTypeSelect.addEventListener('change', function() {
              const selectedValue = this.value;
              navigateButton.disabled = !selectedValue;
          });
  
          navigateButton.addEventListener('click', function() {
              const userType = userTypeSelect.value;
              if (userType === 'Trainee') {
                  console.log('Navigating to Trainee portal');
                  // In a real application, you would redirect here, e.g.:
                  window.location.href = '/courses/';
              } else if (userType === 'Trainer') {
                  console.log('Navigating to Trainer dashboard');
                  // In a real application, you would redirect here, e.g.:
                  window.location.href = '/courses/curricula/';
              }
          });
  </script>