raxol

<div class="login-container">
  <div class="login-box">
    <h1 class="login-title">Raxol Terminal</h1>
    
    <form phx-submit="login" phx-change="validate" class="login-form">
      <div class="form-group">
        <label for="username">Username</label>
        <input
          type="text"
          name="username"
          id="username"
          value={@username}
          class="form-input"
          autocomplete="username"
          required
        />
      </div>
      
      <div class="form-group">
        <label for="password">Password</label>
        <input
          type="password"
          name="password"
          id="password"
          value={@password}
          class="form-input"
          autocomplete="current-password"
          required
        />
      </div>
      
      <%= if @error do %>
        <div class="error-message">
          <%= @error %>
        </div>
      <% end %>
      
      <button type="submit" class="login-button">
        Login
      </button>
    </form>
  </div>
</div>

<style>
  .login-container {
    display: flex;
    justify-content: center;
    align-items: center;
    min-height: 100vh;
    background-color: #1e1e1e;
  }

  .login-box {
    width: 100%;
    max-width: 400px;
    padding: 2rem;
    background-color: #2d2d2d;
    border-radius: 8px;
    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
  }

  .login-title {
    text-align: center;
    color: #f0f0f0;
    margin-bottom: 2rem;
    font-size: 2rem;
  }

  .login-form {
    display: flex;
    flex-direction: column;
    gap: 1.5rem;
  }

  .form-group {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
  }

  .form-group label {
    color: #f0f0f0;
    font-size: 0.9rem;
  }

  .form-input {
    padding: 0.75rem;
    border: 1px solid #3d3d3d;
    border-radius: 4px;
    background-color: #1e1e1e;
    color: #f0f0f0;
    font-size: 1rem;
  }

  .form-input:focus {
    outline: none;
    border-color: #4caf50;
  }

  .error-message {
    color: #f44336;
    font-size: 0.9rem;
    text-align: center;
  }

  .login-button {
    padding: 0.75rem;
    background-color: #4caf50;
    color: white;
    border: none;
    border-radius: 4px;
    font-size: 1rem;
    cursor: pointer;
    transition: background-color 0.2s;
  }

  .login-button:hover {
    background-color: #45a049;
  }

  .login-button:focus {
    outline: none;
    box-shadow: 0 0 0 2px rgba(76, 175, 80, 0.3);
  }
</style>