Skip to content

Add files via upload #3

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Open
JoseLuisCarbajalCa wants to merge 1 commit into
base: main
Choose a base branch
from
Open

Add files via upload #3

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
1 commit
Select commit
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
84 changes: 1 addition & 83 deletions Front/public/admin.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -17,15 +17,14 @@
<a href="index.html" class="logo-link">
<div class="logo">FL</div>
</a>
<h1>FitLife · Cliente</h1>
<h1>FitLife · Admin</h1>
</div>
<div class="tabs" id="tabs">
<button class="tab active" data-view="dashboard">Dashboard</button>
<button class="tab" data-view="exercises">Ejercicios</button>
<button class="tab" data-view="routines">Rutinas</button>
<button class="tab" data-view="users">Usuarios</button>
<button class="tab" data-view="coaches">Entrenadores</button>
<button class="tab" data-view="gyms">Sedes</button>
<button class="tab" data-view="security">Seguridad</button>
</div>
</header>
Expand Down Expand Up @@ -298,87 +297,6 @@ <h3 id="com-title" style="margin:0">Entrenador</h3>
</div>
</div>

<!-- SEDES / GYMS -->
<section id="view-gyms" class="view hide">
<div class="cards">
<div class="card">
<h2>Sedes (Gimnasios)</h2>
<div class="row" style="margin-bottom:10px">
<button id="gym-new" class="btn ghost">Nueva Sede</button>
</div>
<table>
<thead><tr>
<th>Nombre</th><th>Dirección</th><th>Coords</th><th>Máquinas</th><th>Clientes</th>
<th class="actions">Acciones</th>
</tr></thead>
<tbody id="gym-table"></tbody>
</table>
</div>
</div>
</section>

<!-- Modal Sede -->
<div class="modal" id="gym-modal">
<div class="box" style="max-width: 700px;">
<div class="row" style="justify-content:space-between;align-items:center">
<h3 id="gymm-title" style="margin:0">Sede</h3>
<div class="row">
<button id="gymm-cancel" class="btn ghost">Cancelar</button>
<button id="gymm-save" class="btn">Guardar</button>
</div>
</div>

<div style="background: #1e293b; padding: 12px; border-radius: 8px; margin: 15px 0; font-size: 0.9rem; border-left: 4px solid #42d392;">
<p style="margin: 0 0 5px 0;"><strong>ℹ️ ¿Cómo obtener la ubicación?</strong></p>
<ol style="margin: 0; padding-left: 20px; color: #94a3b8;">
<li>Ve a <strong>Google Maps</strong> y busca el gimnasio.</li>
<li>Haz <strong>clic derecho</strong> exacto en el lugar.</li>
<li>Haz clic en los números que aparecen primero (ej: <code>-12.122, -77.030</code>) para copiarlos.</li>
<li>Pégalos abajo en Latitud y Longitud.</li>
</ol>
</div>

<div class="form-grid" style="margin-top:15px">
<div class="field f-6">
<label class="label">Nombre de Sede</label>
<input id="gymm-name" class="input" placeholder="Ej. Sede Larco">
</div>
<div class="field f-6">
<label class="label">Marca / Cadena</label>
<input id="gymm-brand" class="input" placeholder="Ej. SmartFit, Gold's (Opcional)">
<small class="muted">Si es independiente, puedes repetir el nombre.</small>
</div>

<div class="field f-12">
<label class="label">Dirección</label>
<input id="gymm-addr" class="input" placeholder="Av. Principal 123, Distrito">
</div>

<div class="field f-6">
<label class="label">Latitud (Ej: -12.xxxx)</label>
<input id="gymm-lat" class="input" type="number" step="any">
</div>
<div class="field f-6">
<label class="label">Longitud (Ej: -77.xxxx)</label>
<input id="gymm-lng" class="input" type="number" step="any">
</div>

<div class="field f-4">
<label class="label">Aforo / Máquinas</label>
<input id="gymm-total" class="input" type="number">
</div>
<div class="field f-4">
<label class="label">Ocupadas</label>
<input id="gymm-busy" class="input" type="number">
</div>
<div class="field f-4">
<label class="label">Clientes hoy</label>
<input id="gymm-clients" class="input" type="number">
</div>
</div>
</div>
</div>

<!-- SEGURIDAD -->
<section id="view-security" class="view hide">
<div class="cards">
Expand Down
117 changes: 26 additions & 91 deletions Front/public/cliente.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -8,35 +8,9 @@
<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&display=swap" rel="stylesheet">
<!-- Leaflet CSS -->
<link rel="stylesheet" href="https://unpkg.com/leaflet@1.9.4/dist/leaflet.css" />
<!-- Leaflet JS -->
<script src="https://unpkg.com/leaflet@1.9.4/dist/leaflet.js"></script>
<!-- jsPDF para boleta PDF -->
<script src="https://cdn.jsdelivr.net/npm/jspdf@2.5.1/dist/jspdf.umd.min.js" defer></script>

<style>
/* Estilo para el selector de distritos */
#district-filter {
background-color: #1e293b; /* Fondo oscuro azulado */
color: #ffffff; /* Letra blanca */
border: 1px solid #42d392; /* Borde verde FitLife */
padding: 8px 12px;
border-radius: 8px;
cursor: pointer;
outline: none;
font-weight: 500;
}

#district-filter option {
background-color: #1e293b;
color: white;
}

#district-filter:hover {
background-color: #2a3c66;
}
</style>
</head>
<body>
<div class="container">
Expand Down Expand Up @@ -121,64 +95,25 @@ <h2>Nuestros entrenadores</h2>
<div class="cards">
<div class="card">
<h2>Encuentra tu sede</h2>

<!-- FILA SUPERIOR: Buscador + Lista + Mapa Leaflet -->
<div class="gym-top-row" style="display: grid; grid-template-columns: 1fr 1.5fr; gap: 20px; margin-bottom: 20px;">

<!-- COLUMNA IZQUIERDA: Filtros y Lista -->
<div class="gym-controls" style="display: flex; flex-direction: column; gap: 10px;">

<!-- Filtros -->
<div class="filters-compact" style="display: flex; flex-direction: column; gap: 8px;">
<select id="district-filter" class="select" style="width: 100%;">
<option value="">Todos los distritos</option>
</select>
<div style="display: flex; gap: 5px;">
<input id="gym-query" class="input" placeholder="Buscar..." style="flex:1;">
<button id="find-nearby" class="btn" style="padding: 0 10px;">🔍</button>
</div>
<div style="display: flex; gap: 5px; justify-content: space-between;">
<button id="near-me" class="btn ghost" style="font-size: 0.8rem;">📍 Cerca de mí</button>
<button id="show-official" class="btn ghost" style="font-size: 0.8rem;">Ver todos</button>
</div>
<div class="gym-wrap">
<div class="gym-left">
<div class="row" style="margin-bottom:10px">
<input id="gym-query" class="input" placeholder="Ingresa tu zona o ciudad (ej. Miraflores)…" style="flex:2;min-width:220px">
<button id="find-nearby" class="btn">Buscar cercanos</button>
<button id="near-me" class="btn ghost">Cerca de mí</button>
<button id="show-official" class="btn ghost">Mostrar oficiales</button>
</div>


<!-- KPIs -->
<div class="grid-3" style="margin: 5px 0; gap: 5px;">
<div class="kpi" style="padding: 5px;"><div class="n" id="kpi-clients" style="font-size: 1rem">–</div><div class="l" style="font-size: 0.65rem">Clientes</div></div>
<div class="kpi" style="padding: 5px;"><div class="n" id="kpi-free" style="font-size: 1rem">–</div><div class="l" style="font-size: 0.65rem">Libres</div></div>
<div class="kpi" style="padding: 5px;"><div class="n" id="kpi-total" style="font-size: 1rem">–</div><div class="l" style="font-size: 0.65rem">Total</div></div>
<div class="grid-3" style="margin-bottom:12px">
<div class="kpi"><div class="n" id="kpi-clients">–</div><div class="l">Clientes</div></div>
<div class="kpi"><div class="n" id="kpi-free">–</div><div class="l">Máquinas libres</div></div>
<div class="kpi"><div class="n" id="kpi-total">–</div><div class="l">Máquinas totales</div></div>
</div>

<!-- Lista con scroll -->
<div id="gym-list" class="gym-list" style="flex: 1; overflow-y: auto; max-height: 350px; border-top: 1px solid #333; padding-top: 10px;"></div>
<div id="gym-list" class="gym-list"></div>
</div>

<!-- COLUMNA DERECHA: Mapa Leaflet (Ubicación General) -->
<div class="gym-leaflet-container">
<div id="map" style="width: 100%; height: 100%; min-height: 450px; border-radius: 12px; border: 1px solid #333; z-index: 1;"></div>
<div class="gym-right">
<iframe id="map" class="map-embed" loading="lazy" referrerpolicy="no-referrer-when-downgrade"></iframe>
</div>
</div>

<!-- FILA INFERIOR: Mapa Google (Detalle Ancho) -->
<div class="gym-bottom-row" style="margin-top: 20px; border-top: 1px solid #2a3c66; padding-top: 20px;">
<div class="google-card" style="background: #1e293b; border-radius: 12px; padding: 10px; border: 1px solid #333;">
<h4 style="margin: 0 0 10px 0; color: #fff; display: flex; align-items: center; gap: 8px;">
<i class="bi bi-google" style="color: #fff;"></i>
Vista detallada y Referencias
<span class="badge" style="font-weight: normal; font-size: 0.7rem; background: #2a3c66;">Selecciona un gimnasio arriba para ver detalles aquí</span>
</h4>
<!-- Altura fija grande para ver bien el mapa -->
<iframe id="google-frame"
style="width: 100%; height: 400px; border: 0; border-radius: 8px; background: #0f172a;"
loading="lazy"
allowfullscreen
src="">
</iframe>
</div>
</div>

</div>
</div>
</section>
Expand All @@ -195,10 +130,10 @@ <h2>Elige tu plan</h2>
<div class="card plan-card">
<h3>RUTINAS BÁSICAS</h3>
<p class="muted" style="margin-bottom:8px">$9.90 <small>/ mes</small></p>
<ul class="plan-feats">
<li><i class="bi bi-check"></i> Rutinas guiadas para casa o un solo gym</li>
<li><i class="bi bi-check"></i> Hasta 3 rutinas activas al mismo tiempo</li>
<li><i class="bi bi-check"></i> Vista básica del estado de 1 gym favorito</li>
<ul class="features-list">
<li><i class="bi bi-check"></i> Crea rutinas guiadas para entrenar en casa o en un solo gym.</li>
<li><i class="bi bi-check"></i> Hasta 3 rutinas activas al mismo tiempo según tu objetivo.</li>
<li><i class="bi bi-check"></i> Vista rápida del estado de tu gym favorito: máquinas disponibles y ocupación general.</li>
</ul>
</div>

Expand All @@ -207,21 +142,21 @@ <h3>RUTINAS BÁSICAS</h3>
<span class="badge">Más Popular</span>
<h3>GYM FINDER PLUS</h3>
<p class="muted" style="margin-bottom:8px">$19.90 <small>/ mes</small></p>
<ul class="plan-feats">
<li><i class="bi bi-check"></i> Rutinas personalizadas por objetivo y nivel</li>
<li><i class="bi bi-check"></i> Localizador de gyms ilimitado en tu ciudad</li>
<li><i class="bi bi-check"></i> Detalle en tiempo real de máquinas, personas y máquinas libres por gym</li>
<ul class="features-list">
<li><i class="bi bi-check"></i> Rutinas personalizadas según tu nivel, objetivo y frecuencia de entrenamiento.</li>
<li><i class="bi bi-check"></i> Encuentra los mejores gyms cerca de ti y compáralos en segundos.</li>
<li><i class="bi bi-check"></i> Ve en tiempo real cuántas máquinas hay, cuántas se están usando y cuántas personas hay en cada gym.</li>
</ul>
</div>

<!-- Plan Pro -->
<div class="card plan-card">
<h3>MULTI-GYM PRO</h3>
<p class="muted" style="margin-bottom:8px">$29.90 <small>/ mes</small></p>
<ul class="plan-feats">
<li><i class="bi bi-check"></i> Todo lo de Gym Finder Plus para varias personas (familia o equipo)</li>
<li><i class="bi bi-check"></i> Historial avanzado de rutinas, récords y ocupación por sede</li>
<li><i class="bi bi-check"></i> Soporte prioritario y acceso anticipado a nuevas funciones</li>
<ul class="features-list">
<li><i class="bi bi-check"></i> Todo lo de Gym Finder Plus para varias personas (familia o equipo de entrenamiento).</li>
<li><i class="bi bi-check"></i> Historial detallado de tus rutinas, gyms visitados y momentos de mayor ocupación.</li>
<li><i class="bi bi-check"></i> Soporte prioritario y acceso anticipado a nuevas funciones y mejoras de la plataforma.</li>
</ul>
</div>

Expand Down
45 changes: 0 additions & 45 deletions Front/public/css/cliente-styles.css
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -227,48 +227,3 @@ ul.feats{margin:6px 0 0 18px;color:#d4e0f4}
.sf-bottom{border-top:1px solid var(--line);padding:8px 18px;display:flex;flex-direction:column;gap:0;align-items:center;text-align:center;color:#c6d2e6}
.sf-bottom p{margin:2px 0;font-size:12px;line-height:1.3}
.sf-mini{font-size:10px;margin:0}

/* Arreglo para mapas Leaflet */
.leaflet-pane,
.leaflet-tile,
.leaflet-marker-icon,
.leaflet-marker-shadow,
.leaflet-tile-container,
.leaflet-pane > svg,
.leaflet-pane > canvas,
.leaflet-zoom-box,
.leaflet-image-layer,
.leaflet-layer {
position: absolute;
left: 0;
top: 0;
}
#map {
z-index: 1; /* Asegura que el mapa esté en su capa correcta */
}

/* Estilo para cuando el mapa de Google se expande */
.google-card.fullscreen {
position: fixed !important;
top: 0;
left: 0;
width: 100vw !important;
height: 100vh !important;
z-index: 9999; /* Por encima de todo */
border-radius: 0 !important;
border: none !important;
}

/* Ajuste para móviles: que la lista y mapas se apilen */
@media (max-width: 768px) {
.gym-wrap {
grid-template-columns: 1fr !important;
height: auto !important;
}
.gym-left {
height: 300px;
}
.gym-right {
height: 500px;
}
}
Loading