-
Notifications
You must be signed in to change notification settings - Fork 0
Expand file tree
/
Copy pathtimer.html
More file actions
205 lines (182 loc) · 8.57 KB
/
Copy pathtimer.html
File metadata and controls
205 lines (182 loc) · 8.57 KB
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
<!DOCTYPE html>
<html lang="es">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Cronómetro para Todos</title>
<link rel="stylesheet" href="timer/styles.css">
</head>
<body>
<!-- Configuración -->
<section id="setup" class="container">
<h1>Cronómetro para Todos</h1>
<div class="card">
<div class="routine-header">
<input type="text" id="routineName" placeholder="Nombre de la rutina" value="Mi rutina de entrenamiento">
</div>
<div class="sound-selector">
<label for="victorySound">Sonido de victoria:</label>
<select id="victorySound">
<!-- Las opciones se generarán dinámicamente desde sounds.js -->
</select>
<button id="testSoundBtn" class="btn-small">
<svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
<polygon points="5 3 19 12 5 21 5 3"></polygon>
</svg>
</button>
</div>
<table id="intervalTable">
<thead>
<tr>
<th style="width: 60%">Ejercicio</th>
<th style="width: 30%">Segundos</th>
<th style="width: 10%"></th>
</tr>
</thead>
<tbody>
<tr>
<td><input type="text" value="Ronda 1" placeholder="Nombre del intervalo"></td>
<td><input type="number" value="60" min="1" placeholder="Duración"></td>
<td></td>
</tr>
</tbody>
</table>
<button id="addRow">
<svg width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
<line x1="12" y1="5" x2="12" y2="19"></line>
<line x1="5" y1="12" x2="19" y2="12"></line>
</svg>
Agregar intervalo
</button>
</div>
<div class="button-group">
<button id="startBtn">
<svg width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
<polygon points="5 3 19 12 5 21 5 3"></polygon>
</svg>
Iniciar entrenamiento
</button>
<button id="shareSetupBtn" class="btn-secondary">
<svg width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
<path d="M4 12v8a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2v-8"></path>
<polyline points="16 6 12 2 8 6"></polyline>
<line x1="12" y1="2" x2="12" y2="15"></line>
</svg>
Compartir rutina
</button>
</div>
<div id="shareSetupContainer" class="share-container hidden">
<div class="share-link">
<input id="setupShareLink" type="text" readonly>
<div class="copy-btn" id="setupCopyBtn">
<svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
<rect x="9" y="9" width="13" height="13" rx="2" ry="2"></rect>
<path d="M5 15H4a2 2 0 0 1-2-2V4a2 2 0 0 1 2-2h9a2 2 0 0 1 2 2v1"></path>
</svg>
</div>
</div>
</div>
</section>
<!-- Timer -->
<section id="timerScreen" class="container hidden">
<h2 id="workoutTitle" class="text-gradient">Mi rutina</h2>
<div class="interval-info">
<div>
<div class="info-label">INTERVALO ACTUAL</div>
<div class="info-value" id="currentInterval">1/8</div>
</div>
<div>
<div class="info-label">EJERCICIO</div>
<div class="info-value" id="exerciseName">Ronda 1</div>
</div>
</div>
<div class="next-exercise" id="nextExerciseContainer">
<div class="next-exercise-label">EL PRÓXIMO EJERCICIO</div>
<div class="next-exercise-name" id="nextExerciseName">Descanso</div>
</div>
<div class="progress-container">
<div class="progress-bar" id="progressBar"></div>
</div>
<div id="timeDisplay">00</div>
<div id="status">Próximos: <span id="remaining">7</span> intervalos</div>
<div id="controls">
<button id="pauseBtn">
<svg width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
<rect x="6" y="4" width="4" height="16"></rect>
<rect x="14" y="4" width="4" height="16"></rect>
</svg>
Pausar
</button>
<!-- Botón para saltar ejercicio -->
<button id="skipBtn" class="btn-warning">
<svg width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
<polygon points="5 4 15 12 5 20 5 4"></polygon>
<line x1="19" y1="5" x2="19" y2="19"></line>
</svg>
Saltar
</button>
<button id="stopBtn" class="btn-danger">
<svg width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
<rect x="3" y="3" width="18" height="18" rx="2" ry="2"></rect>
</svg>
Terminar
</button>
</div>
<div id="statisticsContainer" class="stats-container hidden">
<h3>Estadísticas</h3>
<div id="statistics" class="stats-grid"></div>
<div id="statisticsChart" class="stats-chart"></div>
</div>
<div id="ratingContainer" class="rating-container hidden">
<div class="rating-title">¿Cómo fue este entrenamiento?</div>
<div class="rating-stars">
<button class="star-btn" data-value="1">★</button>
<button class="star-btn" data-value="2">★</button>
<button class="star-btn" data-value="3">★</button>
<button class="star-btn" data-value="4">★</button>
<button class="star-btn" data-value="5">★</button>
</div>
<button id="shareRatingBtn" class="btn-secondary hidden" style="margin-top:1rem">
<svg width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
<circle cx="18" cy="5" r="3"></circle>
<circle cx="6" cy="12" r="3"></circle>
<circle cx="18" cy="19" r="3"></circle>
<line x1="8.59" y1="13.51" x2="15.42" y2="17.49"></line>
<line x1="15.41" y1="6.51" x2="8.59" y2="10.49"></line>
</svg>
Compartir calificación
</button>
</div>
<div id="shareContainer" class="share-container hidden">
<div class="rating-title">Compartir esta rutina</div>
<div class="share-link">
<input id="shareLink" type="text" readonly>
<div class="copy-btn" id="copyBtn">
<svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
<rect x="9" y="9" width="13" height="13" rx="2" ry="2"></rect>
<path d="M5 15H4a2 2 0 0 1-2-2V4a2 2 0 0 1 2-2h9a2 2 0 0 1 2 2v1"></path>
</svg>
</div>
</div>
</div>
<div id="copyNotification" class="copy-notification">¡Enlace copiado!</div>
</section>
<div class="footer">
<!-- Sección de patrocinio simplificada -->
<div class="sponsor-section">
<iframe src="https://github.com/sponsors/alvleont/button" title="Sponsor alvleont" height="32" width="114" style="border: 0; border-radius: 6px;"></iframe>
</div>
<!-- Sección de licencia simplificada -->
<div class="license-section">
<a href="https://creativecommons.org/licenses/by-nc-sa/4.0/" target="_blank" rel="license noopener noreferrer">
<img style="height:22px!important;margin-left:3px;vertical-align:text-bottom;" src="https://mirrors.creativecommons.org/presskit/icons/cc.svg" alt="">
<img style="height:22px!important;margin-left:3px;vertical-align:text-bottom;" src="https://mirrors.creativecommons.org/presskit/icons/by.svg" alt="">
<img style="height:22px!important;margin-left:3px;vertical-align:text-bottom;" src="https://mirrors.creativecommons.org/presskit/icons/nc.svg" alt="">
<img style="height:22px!important;margin-left:3px;vertical-align:text-bottom;" src="https://mirrors.creativecommons.org/presskit/icons/sa.svg" alt="">
</a>
</div>
</div>
<script type="module" src="timer/sounds.js"></script>
<script type="module" src="timer/script.js"></script>
</body>
</html>