110 lines
3.5 KiB
HTML
110 lines
3.5 KiB
HTML
<!DOCTYPE html>
|
||
<html lang="es">
|
||
<head>
|
||
<meta charset="UTF-8">
|
||
<meta name="viewport" content="width=device-width, initial-scale=1">
|
||
<title>SwimArt Manager – Crear Rutina</title>
|
||
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/css/bootstrap.min.css" rel="stylesheet">
|
||
</head>
|
||
<body class="bg-light">
|
||
|
||
<div class="container py-5">
|
||
<h1 class="mb-4 text-center">Crear Rutina – SwimArt Manager</h1>
|
||
|
||
<!-- Formulario general -->
|
||
<form id="routineForm" class="row g-3">
|
||
<div class="col-md-6">
|
||
<label for="title" class="form-label">Título de la rutina</label>
|
||
<input type="text" class="form-control" id="title" required>
|
||
</div>
|
||
|
||
<div class="col-md-3">
|
||
<label for="duration" class="form-label">Duración (segundos)</label>
|
||
<input type="number" class="form-control" id="duration" min="0" required>
|
||
</div>
|
||
|
||
<div class="col-md-3">
|
||
<label for="language" class="form-label">Idioma</label>
|
||
<select class="form-select" id="language">
|
||
<option value="es">Español</option>
|
||
<option value="en">Inglés</option>
|
||
<option value="fr">Francés</option>
|
||
</select>
|
||
</div>
|
||
|
||
<div class="col-md-6">
|
||
<label for="music" class="form-label">Subir música (mp3)</label>
|
||
<input type="file" class="form-control" id="music" accept="audio/mp3">
|
||
</div>
|
||
|
||
<label>Nombre de la competencia:</label>
|
||
<input type="text" id="nombreCompetencia" name="nombreCompetencia" required>
|
||
|
||
<label>Tipo de competencia:</label>
|
||
<select id="tipoCompetencia" name="tipoCompetencia">
|
||
<option value="libre">Libre</option>
|
||
<option value="técnica">Técnica</option>
|
||
</select>
|
||
|
||
<label>Modalidad:</label>
|
||
<select id="modalidad" name="modalidad">
|
||
<option value="solo">Solo</option>
|
||
<option value="duo">Dúo</option>
|
||
<option value="equipo">Equipo (4 a 8)</option>
|
||
</select>
|
||
|
||
<label>Selecciona atletas participantes:</label>
|
||
<div id="listaAtletas"></div> <!-- Aquí se insertarán checkboxes desde JS -->
|
||
|
||
</form>
|
||
|
||
<hr class="my-4">
|
||
|
||
<!-- Elementos técnicos -->
|
||
<div class="mb-4">
|
||
<h4>Agregar Elementos Técnicos</h4>
|
||
<div class="row g-3 align-items-center">
|
||
<div class="col-md-4">
|
||
<select class="form-select" id="elementSelect">
|
||
<option value="T3.2">T3.2 – TRE Inversión</option>
|
||
<option value="A1.1">A1.1 – Acro Lanzamiento</option>
|
||
<option value="H5.3">H5.3 – Híbrido Triple</option>
|
||
</select>
|
||
</div>
|
||
|
||
<div class="col-md-2">
|
||
<input type="number" class="form-control" id="start" step="0.5" min="0" placeholder="Inicio (s)">
|
||
</div>
|
||
|
||
<div class="col-md-2">
|
||
<input type="number" class="form-control" id="durationElem" step="0.5" min="0" placeholder="Duración (s)">
|
||
</div>
|
||
|
||
<div class="col-md-2">
|
||
<button class="btn btn-primary w-100" type="button" onclick="addElement()">Agregar</button>
|
||
</div>
|
||
</div>
|
||
|
||
<ul class="mt-3 list-group" id="elementListPreview"></ul>
|
||
</div>
|
||
|
||
<hr>
|
||
|
||
<!-- Diagrama de piscina -->
|
||
<div class="mb-4">
|
||
<h4>Posiciones en la Piscina</h4>
|
||
<p>Haz clic en la piscina para posicionar el elemento seleccionado</p>
|
||
<canvas id="poolCanvas" width="800" height="400" style="border: 2px solid #007bff;"></canvas>
|
||
</div>
|
||
|
||
<!-- Guardar -->
|
||
<div class="text-end">
|
||
<button class="btn btn-success btn-lg" onclick="saveRoutine()">Guardar Rutina</button>
|
||
</div>
|
||
</div>
|
||
|
||
<script src="js/coach.js"></script>
|
||
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/js/bootstrap.bundle.min.js"></script>
|
||
</body>
|
||
</html>
|