initial commit
This commit is contained in:
269
templates/index.html
Normal file
269
templates/index.html
Normal file
@@ -0,0 +1,269 @@
|
||||
{% 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 %}
|
||||
Reference in New Issue
Block a user