Controle de Corrida

Controle de Corrida

Cadastro, largada simultânea e chegada individual dos corredores

<section class="card">
  <h2>Cadastrar corredor</h2>

  <form id="formCorredor" class="formulario">
    <div class="campo">
      <label for="nome">Nome do corredor</label>
      <input
        type="text"
        id="nome"
        placeholder="Digite o nome completo"
        required
      >
    </div>

    <div class="campo">
      <label for="numero">Número da camisa</label>
      <input
        type="number"
        id="numero"
        min="1"
        placeholder="Ex.: 101"
        required
      >
    </div>

    <button type="submit" class="btn-azul" id="btnCadastrar">
      Cadastrar
    </button>
  </form>

  <p class="observacao">
    O número da camisa não pode ser repetido. Depois que a corrida começar,
    novos participantes não poderão ser cadastrados.
  </p>
</section>

<section class="painel">
  <div class="indicador">
    <strong>Status da corrida</strong>
    <span id="statusCorrida">Aguardando</span>
  </div>

  <div class="indicador">
    <strong>Tempo geral</strong>
    <span id="relogioGeral">00:00:00.000</span>
  </div>

  <div class="indicador">
    <strong>Participantes</strong>
    <span id="totalParticipantes">0</span>
  </div>

  <div class="indicador">
    <strong>Finalizados</strong>
    <span id="totalFinalizados">0</span>
  </div>
</section>

<section class="card">
  <h2>Comandos da corrida</h2>

  <div class="acoes-corrida">
    <button
      type="button"
      id="btnIniciar"
      class="btn-start"
      onclick="iniciarCorrida()"
    >
      Iniciar corrida
    </button>

    <button
      type="button"
      class="btn-amarelo"
      onclick="reiniciarTempos()"
    >
      Reiniciar tempos
    </button>

    <button
      type="button"
      class="btn-cinza"
      onclick="exportarCSV()"
    >
      Exportar resultados
    </button>

    <button
      type="button"
      class="btn-vermelho"
      onclick="apagarTudo()"
    >
      Apagar tudo
    </button>
  </div>
</section>

<section class="card">
  <h2>Participantes e resultados</h2>

  <div class="tabela-container">
    <table>
      <thead>
        <tr>
          <th>Posição</th>
          <th>Camisa</th>
          <th>Corredor</th>
          <th>Status</th>
          <th>Horário de início</th>
          <th>Horário de chegada</th>
          <th>Tempo</th>
          <th>Ações</th>
        </tr>
      </thead>

      <tbody id="listaCorredores"></tbody>
    </table>

    <div id="mensagemVazia" class="mensagem-vazia">
      Nenhum corredor cadastrado.
    </div>
  </div>
</section>