Código HTML Estructura Taxi Admin - OV

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.5.1/css/all.min.css">

<div class="container-form">
  <!-- Pantalla de autenticación -->
  <div id="authScreen" class="card">
      <div class="header">
          <h1>Acceso Taxista</h1>
          <p>Ingresa tu PIN para continuar</p>
      </div>
      <div class="content auth-container">
          <input type="password"
                 id="pinInput"
                 class="pin-input"
                 maxlength="4"
                 placeholder="****"
                 inputmode="numeric"
                 pattern="[0-9]*">
          <button id="loginButton" class="button primary-button">
              <i class="fas fa-sign-in-alt"></i>
              Acceder
          </button>
          <div id="authMessage" class="message"></div>
      </div>
  </div>

  <!-- Pantalla principal (oculta inicialmente) -->
  <div id="mainScreen" class="card" style="display: none;">
      <div class="content">
          <div class="taxista-info">
              <img id="taxistaPhoto" class="taxista-photo" src="/api/placeholder/120/120" alt="Foto">
              <div id="taxistaName" class="taxista-name">Cargando...</div>
              <div id="taxistaUnit" class="taxista-unit"></div>
          </div>

          <div id="currentStatus" class="current-status">
              Estado actual: Cargando...
          </div>

          <button onclick="updateStatus('disponible')" class="button status-button available-button">
              <i class="fas fa-check-circle"></i>
              Estoy Disponible
          </button>
          <button onclick="updateStatus('ocupado')" class="button status-button busy-button">
              <i class="fas fa-times-circle"></i>
              Estoy Ocupado
          </button>

          <div id="statusMessage" class="message"></div>
      </div>
  </div>
</div>