CodePen Embed

<html lang="es">
<head>
  <meta charset="UTF-8" />
  <meta name="viewport" content="width=device-width, initial-scale=1.0"/>
  <title>Bici Nav EAN</title>
  <link rel="stylesheet" href="styles.css" />
  <link rel="preconnect" href="https://fonts.googleapis.com">
  <link href="https://fonts.googleapis.com/css2?family=Inter:wght@400;700&display=swap" rel="stylesheet">
  <script src="https://kit.fontawesome.com/a076d05399.js" crossorigin="anonymous"></script>
</head>
<body>

  <header class="navbar">
    <div class="logo">🚲 Bici Nav EAN</div>
    <nav class="nav-links">
      <button onclick="navigate('inicio')">Inicio</button>
      <button onclick="navigate('mapa')">Mapa</button>
      <button onclick="navigate('parqueaderos')">Parqueaderos</button>
      <button onclick="navigate('comunidad')">Comunidad</button>
      <button onclick="navigate('seguridad')">Seguridad</button>
    </nav>
  </header>

  <main>

    <!-- INICIO -->
    <section id="inicio" class="view active">
      <div class="portada-layout-horizontal">
        <div class="portada-texto">
          <h1><span class="highlight">Bici Nav EAN</span></h1>
          <p>Una plataforma moderna para moverse de forma segura, sostenible y eficiente por Bogotá.</p>
          <p>Planifica rutas, localiza parqueaderos, participa en la comunidad, recibe alertas y registra tu bicicleta.</p>
        </div>
        <div class="portada-imagen">
          <img src="https://i.imgur.com/8Zah47j.png" alt="Bicicleta portada" />
        </div>
      </div>

      <div class="perfil-box">
        <h2>Mi Perfil</h2>
        <form id="perfilForm">
          <input type="text" placeholder="Nombre completo" required />
          <input type="email" placeholder="Correo EAN" required />
          <input type="password" placeholder="Contraseña segura" required />
          <select required>
            <option disabled selected>Tipo de usuario</option>
            <option>Estudiante</option>
            <option>Docente</option>
            <option>Administrativo</option>
          </select>
          <h3>Datos de mi bicicleta</h3>
          <input type="text" placeholder="Marca de bicicleta" required />
          <input type="text" placeholder="Color" required />
          <input type="text" placeholder="Número serial" required />
          <button type="submit">Guardar</button>
        </form>
      </div>
    </section>

    <!-- MAPA -->
    <section id="mapa" class="view">
      <h2>Mapa Interactivo de Ciclorutas</h2>
      <p>Consulta ciclorutas seguras, zonas bloqueadas y planifica tu ruta.</p>
      <img src="https://i.imgur.com/7AYtfWk.png" alt="Mapa ciclorutas" />
      <div class="leyenda">
        <p><strong>Leyenda:</strong> 🟢 Buena vía – 🟡 En mantenimiento – 🔴 Bloqueada</p>
      </div>
      <div id="ruta-ejemplo"></div>
      <button onclick="alert('Ruta alternativa sugerida por la calle 80')">Ver ruta alternativa</button>
    </section>

    <!-- PARQUEADEROS -->
    <section id="parqueaderos" class="view">
      <h2>Parqueaderos Disponibles</h2>
      <div class="card-group">
        <div class="card">
          <h3>Estaciones TM</h3>
          <p>Consulta parqueaderos vigilados y conectados con transporte público.</p>
          <button onclick="window.open('https://www.transmilenio.gov.co/', '_blank')">Ir a TransMilenio</button>
        </div>
        <div class="card">
          <h3>Privados</h3>
          <p>Ubica parqueaderos cerca de tu destino con seguridad certificada.</p>
          <button onclick="alert('Cargando parqueaderos privados...')">Ver privados</button>
        </div>
      </div>
    </section>

    <!-- COMUNIDAD -->
    <section id="comunidad" class="view">
      <h2>Comunidad y Retroalimentación</h2>
      <form id="comentarioForm">
        <textarea placeholder="Comparte tu experiencia, alerta o recomendación..." required></textarea>
        <button type="submit">Enviar</button>
      </form>
      <div class="card">⭐ Esteban: “Evita la ruta de la Calle 26 después de las 6 PM.”</div>
      <div class="card">⭐ Laura: “La vía por la 116 es rápida y segura.”</div>
      <div class="card">🎯 Reto del mes: Realiza 5 rutas en la semana y gana una visita gratuita al taller.</div>
      <div class="card">🌱 Impacto sostenible: Esta semana evitaste 4.2 kg de CO₂. ¡Sigue así!</div>
      <div class="card">
        <h4>Valora una ruta</h4>
        <form>
          <input type="text" placeholder="Nombre de la ruta (ej: Calle 80)" required />
          <select>
            <option>⭐</option>
            <option>⭐⭐</option>
            <option>⭐⭐⭐</option>
            <option>⭐⭐⭐⭐</option>
            <option>⭐⭐⭐⭐⭐</option>
          </select>
          <button type="submit">Enviar valoración</button>
        </form>
      </div>
    </section>

    <!-- SEGURIDAD -->
    <section id="seguridad" class="view">
      <h2>Seguridad y Navegación</h2>
      <ul>
        <li>📍 Zonas peligrosas actualizadas con reportes ciudadanos.</li>
        <li>🗣️ Asistente de navegación por voz (simulado).</li>
        <li>📴 Navegación sin conexión para rutas frecuentes.</li>
        <li>🔔 Botón de emergencia en caso de robo o incidente.</li>
        <li>🦽 Opciones para accesibilidad visual y física.</li>
      </ul>
      <button onclick="alert('Modo seguro activado.')">Activar modo seguro</button>
    </section>

  </main>

  <footer>
    <p>© 2025 Bici Nav EAN</p>
  </footer>

  <script src="script.js"></script>
</body>
</html>

body {
  font-family: 'Inter', sans-serif;
  margin: 0;
  background: #f4f4f4;
  color: #222;
}

.navbar {
  background: #2e7d32;
  color: white;
  padding: 1rem;
  display: flex;
  justify-content: space-between;
  flex-wrap: wrap;
}

.logo {
  font-weight: bold;
  font-size: 1.4rem;
}

.nav-links button {
  background: transparent;
  border: none;
  color: white;
  font-weight: bold;
  margin: 0.2rem;
  cursor: pointer;
}

main {
  padding: 2rem;
}

.view {
  display: none;
  max-width: 1000px;
  margin: auto;
}

.view.active {
  display: block;
}

h1, h2, h3, h4 {
  color: #2e7d32;
}

img {
  width: 100%;
  max-width: 600px;
  border-radius: 10px;
  margin-top: 1rem;
}

form {
  display: flex;
  flex-direction: column;
  gap: 1rem;
  max-width: 600px;
  margin: 2rem auto;
}

form input, form textarea, form select {
  padding: 1rem;
  border-radius: 8px;
  border: 1px solid #ccc;
}

form button {
  background: #388e3c;
  color: white;
  padding: 0.9rem;
  border: none;
  border-radius: 8px;
  cursor: pointer;
  font-weight: bold;
}

form button:hover {
  background: #2e7d32;
}

.card-group {
  display: flex;
  gap: 1rem;
  flex-wrap: wrap;
}

.card {
  background: white;
  border: 1px solid #ccc;
  border-radius: 8px;
  padding: 1rem;
  box-shadow: 0 2px 6px rgba(0,0,0,0.1);
  margin-bottom: 1rem;
}

footer {
  background: #eee;
  text-align: center;
  padding: 1.5rem;
  margin-top: 2rem;
  font-size: 0.9rem;
}

.highlight {
  color: #388e3c;
}

/* NUEVO: Portada horizontal */
.portada-layout-horizontal {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 2rem;
  margin-bottom: 3rem;
}

.portada-texto {
  flex: 1 1 50%;
  text-align: left;
}

.portada-imagen {
  flex: 1 1 40%;
  text-align: center;
}

.portada-imagen img {
  max-width: 100%;
  border-radius: 12px;
  box-shadow: 0 4px 12px rgba(0,0,0,0.1);
}

.leyenda {
  font-size: 0.9rem;
  margin: 1rem 0;
  background: #e8f5e9;
  padding: 0.5rem;
  border-radius: 8px;
}

// Navegación dinámica entre secciones
function navigate(sectionId) {
  document.querySelectorAll('.view').forEach(sec => sec.classList.remove('active'));
  document.getElementById(sectionId).classList.add('active');
  window.scrollTo({ top: 0, behavior: 'smooth' });
}

// Manejo de formularios
document.querySelectorAll("form").forEach(form => {
  form.addEventListener("submit", e => {
    e.preventDefault();
    const submitButton = form.querySelector("button[type='submit']");
    if (submitButton) submitButton.disabled = true;

    setTimeout(() => {
      alert("Formulario enviado correctamente.");
      form.reset();
      if (submitButton) submitButton.disabled = false;
    }, 600);
  });
});

// Simulación de planificación de ruta
const rutaEjemplo = document.getElementById("ruta-ejemplo");
if (rutaEjemplo) {
  rutaEjemplo.innerHTML = `
    <h3>Planifica tu ruta</h3>
    <form id="planRutaForm">
      <input type="text" placeholder="Origen (Ej: Calle 100)" required />
      <input type="text" placeholder="Destino (Ej: Universidad EAN)" required />
      <button type="submit">Calcular Ruta</button>
    </form>
  `;

  document.getElementById("planRutaForm")?.addEventListener("submit", function(e) {
    e.preventDefault();
    alert("Ruta generada desde Calle 100 hasta Universidad EAN. Tiempo estimado: 22 minutos.");
  });
}

This Pen is owned by J D on CodePen.

See more by @gdwhcydi-the-looper on CodePen

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

This Pen doesn't use any external JavaScript resources.