<!DOCTYPE html>
<html>

<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <!-- Scripts kit -->
  <script src="https://kit.fontawesome.com/7124061660.js" crossorigin="anonymous"></script>
  <!-- Styles -->
  <link rel="stylesheet" href="/stylesheets/style.css">
  <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha1/dist/css/bootstrap.min.css" rel="stylesheet"
      integrity="sha384-GLhlTQ8iRABdZLl6O3oVMWSktQOp6b7In1Zl3/Jr59b6EGGoI1aFkw7cmDA6j6gD" crossorigin="anonymous">
  <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap-icons@1.10.3/font/bootstrap-icons.css">    
  <title>MiPistaYa</title>
</head>

<body>
  <!-- MODAL -->
  <div class="modal fade" id="modalLogin" tabindex="-1" aria-labelledby="myModalLabel" aria-hidden="true">
    <div class="modal-dialog modal-dialog-centered"  id="modalWidth" role="document">
        <div class="modal-content">
            <div class="modal-body">
                <div class="row">
                    <img src="/images/runner-login.png" class="d-md-flex col-md-6 col-lg-6 bg-image" alt="">
                    <div class="col-md-6">
                        <div class="login d-flex align-items-center py-5">
                            <div class="container">
                                <div class="row">
                                    <div class="col-md-11 mx-auto">
                                        <h3 class="login-heading mb-4">¡Bienvenido!</h3>
                                        <form method="post" action="/usuarios/login">
                                            <div class="form-floating mb-3">
                                                <input type="email" class="form-control" id="floatingInput"
                                                    placeholder="name@example.com" name="email">
                                                <label for="floatingInput">Dirección de correo</label>
                                            </div>
                                            <div class="form-floating mb-3">
                                                <input type="password" class="form-control" id="floatingPassword"
                                                    placeholder="Password" name="password">
                                                <label for="floatingPassword">Contraseña</label>
                                            </div>
                                            <div class="form-check mb-3">
                                                <input class="form-check-input" type="checkbox" value=""
                                                    id="rememberPasswordCheck">
                                                <label class="form-check-label" for="rememberPasswordCheck">
                                                    Recordar contraseña
                                                </label>
                                            </div>
                                            <div class="d-grid">
                                                <button
                                                    class="btn btn-lg btn-login text-uppercase fw-bold mb-2 bg-morado text-light"
                                                    type="submit">Iniciar sesión</button>
                                                <div class="text-center">
                                                    <a class="small" href="#">He olvidado mi contraseña</a>
                                                </div>
                                            </div>
                                        </form>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
          </div>
      </div>
  </div>
  <!-- END MODAL -->
  <div class="container-fluid px-5">
    <header>
      <nav class="navbar navbar-expand-lg container-fluid">
        <div class="container-fluid">
          <a class="navbar-brand" href="/">
            <img src="/images/Mi Pista Ya.png" alt="Logo Mi Pista Ya" class="w-25">
          </a>
          <button class="navbar-toggler" type="button" data-bs-toggle="collapse"
            data-bs-target="#navbarSupportedContent" aria-controls="navbarSupportedContent" aria-expanded="false"
            aria-label="Toggle navigation">
            <span class="navbar-toggler-icon"></span>
          </button>
          <div class="collapse navbar-collapse" id="navbarSupportedContent">
            <ul class="navbar-nav ms-auto me-5 mb-2 mb-lg-0">
              <li class="nav-item">
                <a class="nav-link" href="reservas">Reservas
                </a>
              </li>
              <li class="nav-item">
                <a class="nav-link" href="">Pistas
                </a>
              </li>
              <li class="nav-item">
                <a class="nav-link" href="">Equipamiento
                </a>
              </li>
              <li class="nav-item">
                <a class="nav-link" href="">Nosotros
                </a>
              </li>
            </ul>
            <form class="d-inline-flex" role="search">
              <button class="btn" type="button" data-bs-toggle="collapse"
                  data-bs-target="#collapseExample" aria-expanded="false"
                  aria-controls="collapseExample">
                  <i class="bi bi-search"></i>
              </button>
              <div class="collapse" id="collapseExample">
                  <input class="form-control me-2" type="search" placeholder="Buscar"
                      aria-label="Search">
              </div>
          </form>
            <a class="btn txt-morado" href="registro">Registro
            </a>
            <a class="btn bg-morado text-light" data-bs-toggle="modal" data-bs-target="#modalLogin">Login
            </a>
          </div>
        </div>
      </nav>
    </header>
    <main class="container-fluid bg-morado p-5">

      <div class="album py-5 bg-light">
        <div class="container">
          <h3 class="text-center py-4">Las mejores instalaciones al alcance de tu mano</h3>
          <div class="row">
            <div class="col-md-4">
              <div class="card mb-4 box-shadow">
                <img class="card-img-top" src="images/pistaFutsal.png" alt="Card image cap">
                <div class="card-body">
                  <p class="card-text text-truncate">Sit amet consectetur adipisicing elit. Repellendus, harum in
                    quisquam doloremque aliquam dolorum expedita autem, aspernatur deserunt modi nostrum. Laborum itaque
                    omnis nulla incidunt blanditiis fuga provident quos.</p>
                  <div class="d-flex justify-content-between align-items-center">
                    <div class="btn-group">
                      <button type="button" class="btn btn-sm btn-outline-secondary">Reservar</button>
                      <button type="button" class="btn btn-sm btn-outline-secondary">Ver detalles</button>
                    </div>
                    <small class="text-muted"><i class="bi bi-star-fill"></i></small>
                  </div>
                </div>
              </div>
            </div>
            <div class="col-md-4">
              <div class="card mb-4 box-shadow">
                <img class="card-img-top" src="images/pistaBasket.jpg" alt="Card image cap">
                <div class="card-body">
                  <p class="card-text text-truncate">Repellat accusamus ea
                    neque nemo temporibus, dicta aliquam consequatur? Doloribus, voluptate, nisi laborum molestias, iste
                    maiores nam velit numquam nulla impedit itaque.</p>
                  <div class="d-flex justify-content-between align-items-center">
                    <div class="btn-group">
                      <button type="button" class="btn btn-sm btn-outline-secondary">Reservar</button>
                      <button type="button" class="btn btn-sm btn-outline-secondary">Ver detalles</button>
                    </div>
                    <small class="text-muted"><i class="bi bi-star"></i></small>
                  </div>
                </div>
              </div>
            </div>
            <div class="col-md-4">
              <div class="card mb-4 box-shadow">
                <img class="card-img-top" src="images/pistaPadel.jfif" alt="Card image cap">
                <div class="card-body">
                  <p class="card-text text-truncate">Molestiae perferendis
                    est ducimus vel nulla corrupti deleniti tempora reiciendis in assumenda, qui quis rem expedita
                    molestias corporis odio sint cupiditate illum!</p>
                  <div class="d-flex justify-content-between align-items-center">
                    <div class="btn-group">
                      <button type="button" class="btn btn-sm btn-outline-secondary">Reservar</button>
                      <button type="button" class="btn btn-sm btn-outline-secondary">Ver detalles</button>
                    </div>
                    <small class="text-muted"><i class="bi bi-star-fill"></i></small>
                  </div>
                </div>
              </div>
            </div>

            <div class="col-md-4">
              <div class="card mb-4 box-shadow">
                <img class="card-img-top" src="images/balonmano1080.jpg" alt="Card image cap">
                <div class="card-body">
                  <p class="card-text text-truncate">Assumenda dolor
                    voluptates error, a quod debitis ab nam laborum voluptate eaque numquam, maxime porro quas
                    accusamus? Qui rerum architecto distinctio aliquid.</p>
                  <div class="d-flex justify-content-between align-items-center">
                    <div class="btn-group">
                      <button type="button" class="btn btn-sm btn-outline-secondary">Reservar</button>
                      <button type="button" class="btn btn-sm btn-outline-secondary">Ver detalles</button>
                    </div>
                    <small class="text-muted"><i class="bi bi-star"></i></small>
                  </div>
                </div>
              </div>
            </div>
            <div class="col-md-4">
              <div class="card mb-4 box-shadow">
                <img class="card-img-top" src="images/voleibol1080.jpg" alt="Card image cap">
                <div class="card-body">
                  <p class="card-text text-truncate">Asperiores reprehenderit
                    voluptatum enim totam mollitia cupiditate ratione dolor laboriosam vero corrupti inventore modi
                    neque quos dignissimos corporis accusantium, nostrum atque alias.</p>
                  <div class="d-flex justify-content-between align-items-center">
                    <div class="btn-group">
                      <button type="button" class="btn btn-sm btn-outline-secondary">Reservar</button>
                      <button type="button" class="btn btn-sm btn-outline-secondary">Ver detalles</button>
                    </div>
                    <small class="text-muted"><i class="bi bi-star"></i></small>
                  </div>
                </div>
              </div>
            </div>
            <div class="col-md-4">
              <div class="card mb-4 box-shadow">
                <img class="card-img-top" src="images/hockey1080.jpg" alt="Card image cap">
                <div class="card-body">
                  <p class="card-text text-truncate">Quibusdam mollitia
                    recusandae quos, labore quasi magnam alias iure libero officiis vero sequi et eius iusto,
                    dignissimos asperiores placeat nostrum numquam obcaecati!</p>
                  <div class="d-flex justify-content-between align-items-center">
                    <div class="btn-group">
                      <button type="button" class="btn btn-sm btn-outline-secondary">Reservar</button>
                      <button type="button" class="btn btn-sm btn-outline-secondary">Ver detalles</button>
                    </div>
                    <small class="text-muted"><i class="bi bi-star"></i></small>
                  </div>
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>
    </main>
    <footer class="text-center border-top pt-2">
      <div class="row">
        <div class="col-sm">
            <h6>Nosotros</h6>
            <iframe class="w-75"
                src="https://www.google.com/maps/embed?pb=!1m18!1m12!1m3!1d12684.986951386925!2d-6.162829129509961!3d37.36033823401792!2m3!1f0!2f0!3f0!3m2!1i1024!2i768!4f13.1!3m3!1m2!1s0xd12110e75b253f9%3A0x957b72dc37f7cbbf!2sLa%20Madruga!5e0!3m2!1ses!2ses!4v1674214902620!5m2!1ses!2ses" style="border:0;" allowfullscreen="" loading="lazy"
                referrerpolicy="no-referrer-when-downgrade" title="Ubicación del polideportivo"></iframe>
            <p class="text-muted mb-0">Calle Huelva. 41806, Umbrete, Sevilla</p>
            <p class="text-muted mb-0">955 123 456</p>
            <p class="text-muted mb-0">info@mipistaya.es</p>
        </div>
        <div class="col-sm">
            <div class="mx-auto text-center">
                <img src="/images/Mi Pista Ya.png" alt="Logo Mi Pista Ya" class="w-100">
                <p class="text-muted">© Copyright 2023 MiPistaYa</p>
            </div>
        </div>
        <div class="col-sm">
            <h6>Síguenos</h6>
            <!-- Iconos RRSSS -->
            <div class="my-3">
                <a href="http://www.facebook.com" target="_blank" class="txt-morado h2 m-1 bi bi-facebook" title="Facebook"></a>
                <a href="http://www.instagram.com" target="_blank" class="txt-morado h2 m-1 bi bi-instagram" title="Instagram"></a>
                <a href="http://www.twitter.com" target="_blank" class="txt-morado h2 m-1 bi bi-twitter" title="Twitter"></a>
                <a href="http://www.tiktok.com" target="_blank" class="txt-morado h2 m-1 bi bi-tiktok" title="Tiktok"></a>    
            </div>
            <a href="">Política de privacidad</a>
        </div>
    </div>
    </footer>
  </div>
  <!-- JS Bootstrap -->
  <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha1/dist/js/bootstrap.bundle.min.js"
      integrity="sha384-w76AqPfDkMBDXo30jS1Sgez6pr3x5MlQ1ZAGC+nuZB+EYdgRZgiwxhTBTkF7CXvN" crossorigin="anonymous">
  </script>
</body>

</html>