270 lines
10 KiB
HTML
270 lines
10 KiB
HTML
{% extends "base.html" %}
|
|
|
|
{% block content %}
|
|
<div class="text-center mb-5">
|
|
<h1 class="display-4 fw-bold text-primary mb-3">
|
|
<i class="fas fa-graduation-cap me-3"></i>
|
|
Balotario Licencia Clase A - Categoría I
|
|
</h1>
|
|
<p class="lead text-muted">Prepárate para tu examen de manejo con {{ total_questions }} preguntas oficiales del MTC
|
|
</p>
|
|
</div>
|
|
|
|
<div class="row g-4">
|
|
<div class="col-md-6 col-lg-3">
|
|
<div class="card h-100 text-center">
|
|
<div class="card-body d-flex flex-column">
|
|
<div class="mb-3">
|
|
<i class="fas fa-book fa-3x text-primary"></i>
|
|
</div>
|
|
<h5 class="card-title">Modo Estudio</h5>
|
|
<p class="card-text flex-grow-1">
|
|
Revisa todas las preguntas con sus respuestas correctas. Perfecto para aprender.
|
|
</p>
|
|
<a href="/study" class="btn btn-primary">
|
|
<i class="fas fa-play me-2"></i>Comenzar a Estudiar
|
|
</a>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="col-md-6 col-lg-3">
|
|
<div class="card h-100 text-center">
|
|
<div class="card-body d-flex flex-column">
|
|
<div class="mb-3">
|
|
<i class="fas fa-dumbbell fa-3x text-success"></i>
|
|
</div>
|
|
<h5 class="card-title">Modo Práctica</h5>
|
|
<p class="card-text flex-grow-1">
|
|
Practica con preguntas aleatorias y recibe retroalimentación inmediata.
|
|
</p>
|
|
<a href="/practice" class="btn btn-success">
|
|
<i class="fas fa-play me-2"></i>Practicar Ahora
|
|
</a>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="col-md-6 col-lg-3">
|
|
<div class="card h-100 text-center">
|
|
<div class="card-body d-flex flex-column">
|
|
<div class="mb-3">
|
|
<i class="fas fa-clipboard-check fa-3x text-warning"></i>
|
|
</div>
|
|
<h5 class="card-title">Examen Simulado</h5>
|
|
<p class="card-text flex-grow-1">
|
|
Simula el examen real con tiempo limitado y obtén tu calificación final.
|
|
</p>
|
|
<a href="/exam" class="btn btn-warning">
|
|
<i class="fas fa-clock me-2"></i>Tomar Examen
|
|
</a>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="col-md-6 col-lg-3">
|
|
<div class="card h-100 text-center stats-card">
|
|
<div class="card-body d-flex flex-column">
|
|
<div class="mb-3">
|
|
<i class="fas fa-chart-line fa-3x text-white"></i>
|
|
</div>
|
|
<h5 class="card-title text-white">Estadísticas</h5>
|
|
<div class="flex-grow-1">
|
|
<div id="stats-content">
|
|
<div class="row text-center">
|
|
<div class="col-6">
|
|
<h4 id="total-answered">0</h4>
|
|
<small>Respondidas</small>
|
|
</div>
|
|
<div class="col-6">
|
|
<h4 id="accuracy">0%</h4>
|
|
<small>Precisión</small>
|
|
</div>
|
|
</div>
|
|
<div class="mt-3">
|
|
<div class="progress">
|
|
<div class="progress-bar bg-success" id="accuracy-bar" style="width: 0%"></div>
|
|
</div>
|
|
</div>
|
|
<div class="mt-3">
|
|
<button class="btn btn-outline-light btn-sm" id="reset-stats-btn"
|
|
title="Restablecer estadísticas">
|
|
<i class="fas fa-redo me-1"></i>Restablecer
|
|
</button>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="row mt-5">
|
|
<div class="col-12">
|
|
<div class="card">
|
|
<div class="card-body">
|
|
<h5 class="card-title">
|
|
<i class="fas fa-info-circle me-2"></i>
|
|
Información del Balotario
|
|
</h5>
|
|
<div class="row">
|
|
<div class="col-md-6">
|
|
<ul class="list-unstyled">
|
|
<li><i class="fas fa-check text-success me-2"></i>{{ total_questions }} preguntas oficiales
|
|
</li>
|
|
<li><i class="fas fa-check text-success me-2"></i>Respuestas correctas marcadas</li>
|
|
<li><i class="fas fa-check text-success me-2"></i>Imágenes de señales de tránsito</li>
|
|
<li><i class="fas fa-check text-success me-2"></i>Seguimiento de progreso</li>
|
|
</ul>
|
|
</div>
|
|
<div class="col-md-6">
|
|
<ul class="list-unstyled">
|
|
<li><i class="fas fa-check text-success me-2"></i>Interfaz intuitiva y moderna</li>
|
|
<li><i class="fas fa-check text-success me-2"></i>Modo examen con cronómetro</li>
|
|
<li><i class="fas fa-check text-success me-2"></i>Estadísticas detalladas</li>
|
|
<li><i class="fas fa-check text-success me-2"></i>Responsive para móviles</li>
|
|
</ul>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Statistics reset confirmation modal -->
|
|
<div id="resetStatsModal" style="display: none;">
|
|
<div id="resetStatsBackdrop" style="
|
|
position: fixed;
|
|
top: 0;
|
|
left: 0;
|
|
width: 100%;
|
|
height: 100%;
|
|
background: rgba(0,0,0,0.6);
|
|
z-index: 1050;
|
|
backdrop-filter: blur(3px);
|
|
"></div>
|
|
<div id="resetStatsDialog" style="
|
|
position: fixed;
|
|
top: 50%;
|
|
left: 50%;
|
|
transform: translate(-50%, -50%);
|
|
z-index: 1055;
|
|
background: white;
|
|
border-radius: 20px;
|
|
box-shadow: 0 20px 40px rgba(0,0,0,0.3);
|
|
min-width: 400px;
|
|
max-width: 500px;
|
|
max-height: 90vh;
|
|
overflow-y: auto;
|
|
animation: modalSlideIn 0.3s ease-out;
|
|
">
|
|
<div style="
|
|
padding: 25px 30px 20px 30px;
|
|
border-bottom: 1px solid #dee2e6;
|
|
display: flex;
|
|
justify-content: space-between;
|
|
align-items: center;
|
|
">
|
|
<div style="display: flex; align-items: center;">
|
|
<i class="fas fa-exclamation-triangle text-warning me-3" style="font-size: 24px;"></i>
|
|
<h5 style="margin: 0; color: #333; font-weight: 600;">Restablecer Estadísticas</h5>
|
|
</div>
|
|
<button id="resetStatsModalClose" style="
|
|
background: none;
|
|
border: none;
|
|
font-size: 28px;
|
|
cursor: pointer;
|
|
color: #666;
|
|
padding: 0;
|
|
width: 35px;
|
|
height: 35px;
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
border-radius: 50%;
|
|
transition: all 0.2s ease;
|
|
" onmouseover="this.style.background='#f8f9fa'" onmouseout="this.style.background='none'">×</button>
|
|
</div>
|
|
<div style="padding: 25px 30px;">
|
|
<div style="text-align: center; margin-bottom: 20px;">
|
|
<i class="fas fa-chart-line text-primary" style="font-size: 48px; opacity: 0.7;"></i>
|
|
</div>
|
|
<p style="margin: 0 0 15px 0; color: #333; font-size: 16px; text-align: center;">
|
|
¿Estás seguro de que quieres restablecer todas tus estadísticas?
|
|
</p>
|
|
<div
|
|
style="background: #fff3cd; border: 1px solid #ffeaa7; border-radius: 10px; padding: 15px; margin-bottom: 20px;">
|
|
<div style="display: flex; align-items: flex-start;">
|
|
<i class="fas fa-info-circle text-warning me-2" style="margin-top: 2px;"></i>
|
|
<div style="font-size: 14px; color: #856404;">
|
|
<strong>Esta acción eliminará:</strong>
|
|
<ul style="margin: 8px 0 0 0; padding-left: 20px;">
|
|
<li>Preguntas respondidas</li>
|
|
<li>Porcentaje de precisión</li>
|
|
<li>Racha de respuestas correctas</li>
|
|
<li>Tiempo de estudio</li>
|
|
<li>Historial de exámenes</li>
|
|
</ul>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<p style="margin: 0; color: #666; font-size: 14px; text-align: center;">
|
|
<strong>Esta acción no se puede deshacer.</strong>
|
|
</p>
|
|
</div>
|
|
<div style="
|
|
padding: 20px 30px 25px 30px;
|
|
border-top: 1px solid #dee2e6;
|
|
display: flex;
|
|
gap: 12px;
|
|
justify-content: flex-end;
|
|
">
|
|
<button id="resetStatsModalCancel" class="btn btn-secondary" style="min-width: 100px;">
|
|
<i class="fas fa-times me-1"></i>Cancelar
|
|
</button>
|
|
<button id="confirmResetStats" class="btn btn-danger" style="min-width: 120px;">
|
|
<i class="fas fa-trash-alt me-1"></i>Restablecer
|
|
</button>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<style>
|
|
@keyframes modalSlideIn {
|
|
from {
|
|
opacity: 0;
|
|
transform: translate(-50%, -60%);
|
|
}
|
|
|
|
to {
|
|
opacity: 1;
|
|
transform: translate(-50%, -50%);
|
|
}
|
|
}
|
|
|
|
@keyframes modalSlideOut {
|
|
from {
|
|
opacity: 1;
|
|
transform: translate(-50%, -50%);
|
|
}
|
|
|
|
to {
|
|
opacity: 0;
|
|
transform: translate(-50%, -40%);
|
|
}
|
|
}
|
|
|
|
.modal-closing {
|
|
animation: modalSlideOut 0.2s ease-in forwards;
|
|
}
|
|
</style>
|
|
{% endblock %}
|
|
|
|
{% block scripts %}
|
|
<script>
|
|
// Index page stats are now handled by the StatsDisplay module
|
|
// The module auto-initializes when the DOM is ready
|
|
console.log('Index page template loaded - using modular JavaScript');
|
|
</script>
|
|
{% endblock %}
|