Hugging Face's logo

Spaces:
olimpa
/
CVORG
Running

App Files Community
5

Update index.html

#1
by olimpa - opened
base: refs/heads/main
←
from: refs/pr/1
Discussion Files changed
+182
-16
Files changed (1) hide show
  1. index.html +182 -16
index.html CHANGED
@@ -8,7 +8,7 @@
8
  <link rel="stylesheet" href="https://fonts.googleapis.com/icon?family=Material+Icons">
9
  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/materialize/1.0.0/css/materialize.min.css">
10
  <style>
11
- header {
12
  text-align: center;
13
  background-color: #ece8e0;
14
  }
@@ -66,6 +66,27 @@ table {
66
  align-items: center;
67
  }
68
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
69
  .hide {
70
  display: none;
71
  }
@@ -117,7 +138,6 @@ table {
117
  font-size: 12px;
118
  }
119
 
120
-
121
  /* Estilos para los horarios */
122
  .time-input select {
123
  display: block;
@@ -163,6 +183,105 @@ table {
163
  animation: spin 1s ease-in-out infinite;
164
  }
165
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
166
  /* Mostrar el contenido después de la carga */
167
  #myDiv {
168
  display: none;
@@ -238,11 +357,22 @@ table {
238
  </style>
239
  </head>
240
  <body>
241
- <div class="watermark">Servidor Activado de la Iglesia Cristo Vive⚙️</div>
242
  <div class="mobile-notice hide">
243
  Esta página no está disponible en versión móvil, ejecutar en computadora.
 
 
 
 
 
 
 
 
 
 
 
244
  </div>
245
- <div id="myDiv">
246
 
247
  <header>
248
  <img src="https://i.ibb.co/YLLzsJ8/tcvl-121x107.webp" alt="tcvl-121x107" border="0">
@@ -353,11 +483,18 @@ table {
353
  <script src="https://cdnjs.cloudflare.com/ajax/libs/moment.js/2.29.1/moment.min.js"></script>
354
  <script>
355
 
356
- document.addEventListener('DOMContentLoaded', function() {
357
- var elems = document.querySelectorAll('.sidenav');
358
- var instances = M.Sidenav.init(elems);
359
  });
360
 
 
 
 
 
 
 
 
361
  function checkCells() {
362
  var cells = document.getElementsByClassName("editable-cell");
363
  var allCellsFilled = true;
@@ -395,10 +532,7 @@ document.addEventListener("DOMContentLoaded", function() {
395
  }
396
  var generatedBy = document.getElementById("generado-por");
397
  generatedBy.addEventListener("input", checkCells);
398
-
399
-
400
- }
401
- }
402
 
403
  function guardarDatos() {
404
  var fechaServicioMartes = document.getElementById("fecha-servicio-martes").innerText;
@@ -428,6 +562,17 @@ document.addEventListener("DOMContentLoaded", function() {
428
  }
429
  checkMissingData();
430
  });
 
 
 
 
 
 
 
 
 
 
 
431
  function checkMissingData() {
432
  var cells = document.querySelectorAll('.editable-cell');
433
  var isDataComplete = true;
@@ -495,7 +640,21 @@ function executeAction() {
495
  };
496
  var loader = document.getElementById("loader");
497
  var content = document.getElementById("myDiv");
 
 
 
 
 
 
 
 
 
 
 
498
 
 
 
 
499
  }
500
  function hideWarnings() {
501
  var cells = document.querySelectorAll(".editable-cell");
@@ -507,11 +666,6 @@ function hideWarnings() {
507
  }
508
  }
509
  }
510
- var isMobile = /iPhone|iPad|iPod|Android/i.test(navigator.userAgent);
511
- if (isMobile) {
512
- document.querySelector('.mobile-notice').classList.remove('hide');
513
- }
514
-
515
  function getDate() {
516
  var today = new Date();
517
  var month = today.getMonth() + 1;
@@ -519,6 +673,18 @@ function hideWarnings() {
519
  var year = today.getFullYear();
520
  return month + "/" + day + "/" + year;
521
  }
 
 
 
 
 
 
 
 
 
 
 
 
522
  </script>
523
  <p style="font-size: 12px; opacity: 0.5; text-align: center;">Este documento ha sido aprobado por el departamento de multimedia para su uso</p>
524
  </body>
 
8
  <link rel="stylesheet" href="https://fonts.googleapis.com/icon?family=Material+Icons">
9
  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/materialize/1.0.0/css/materialize.min.css">
10
  <style>
11
+ header {
12
  text-align: center;
13
  background-color: #ece8e0;
14
  }
 
66
  align-items: center;
67
  }
68
 
69
+
70
+
71
+ .modal-overlay {
72
+ background-color: rgba(0, 0, 0, 0.5);
73
+ }
74
+ .modal {
75
+ width: 75% !important;
76
+ max-height: 75% !important;
77
+ }
78
+ .modal-input {
79
+ border: 1px solid #ddd;
80
+ padding: 5px;
81
+ width: 100%;
82
+ box-sizing: border-box;
83
+ }
84
+ .modal-footer {
85
+ display: flex;
86
+ justify-content: flex-end;
87
+ }
88
+
89
+
90
  .hide {
91
  display: none;
92
  }
 
138
  font-size: 12px;
139
  }
140
 
 
141
  /* Estilos para los horarios */
142
  .time-input select {
143
  display: block;
 
183
  animation: spin 1s ease-in-out infinite;
184
  }
185
 
186
+ .scene {
187
+ position: relative;
188
+ transform: translate3d(0, 0, 100vmin) rotateX(calc(var(--rotation-y, 0) * 1deg)) rotateY(calc(var(--rotation-x, 0) * 1deg)) rotateX(0deg);
189
+ }
190
+
191
+ body {
192
+ transform-origin: 50% 50%;
193
+ animation: scale var(--timeline) var(--delay) infinite linear;
194
+ }
195
+
196
+ @keyframes scale {
197
+ 0%, 10% {
198
+ transform: scaleX(1) scaleY(1);
199
+ }
200
+ 35%, 100% {
201
+ transform: scaleX(0.5) scaleY(0.5);
202
+ }
203
+ }
204
+
205
+ .shadow {
206
+ width: calc(var(--size) * var(--coefficient));
207
+ position: absolute;
208
+ bottom: 0;
209
+ aspect-ratio: 1;
210
+ transform-origin: 50% 50%;
211
+ background: hsl(210 80% 50% / 0.2);
212
+ transform: rotateX(90deg) translate3d(0, 0, calc((var(--size) * (var(--coefficient) * -0.5)) - 1px)) scale(0.96);
213
+ animation: squish-squosh var(--timeline) var(--delay) infinite, fade var(--timeline) var(--delay) infinite;
214
+ background: black;
215
+ }
216
+
217
+ .loader {
218
+ --depth: var(--size);
219
+ --color: var(--color-one, #8338EC);
220
+ width: calc(var(--depth) * var(--coefficient));
221
+ aspect-ratio: 1;
222
+ transform-origin: 50% 50%;
223
+ animation: squish-squosh var(--timeline) var(--delay) infinite;
224
+ }
225
+
226
+ .spinner {
227
+ animation: spin var(--timeline) var(--delay) infinite;
228
+ }
229
+
230
+ .jumper {
231
+ animation: jump var(--timeline) var(--delay) infinite;
232
+ }
233
+
234
+ /* Estilos existentes */
235
+
236
+ /* Nuevo CSS */
237
+ @keyframes squish-squosh {
238
+ 0%, 50%, 60% {
239
+ scale: 1 1 1;
240
+ }
241
+ 10%, 35% {
242
+ scale: 1.2 0.8 1.2;
243
+ }
244
+ 25% {
245
+ scale: 0.8 1.2 0.8;
246
+ }
247
+ 70% {
248
+ scale: 1 1 2;
249
+ }
250
+ 80% {
251
+ scale: 2 1 2;
252
+ }
253
+ 90%, 100% {
254
+ scale: 2 2 2;
255
+ }
256
+ }
257
+
258
+ @keyframes fade {
259
+ 0%, 10%, 40%,100% {
260
+ opacity: 1;
261
+ }
262
+ }
263
+
264
+ @keyframes spin {
265
+ 0% {
266
+ transform: rotateX(0) rotateY(0);
267
+ }
268
+ 50%, 100% {
269
+ transform: rotateX(360deg) rotateY(360deg);
270
+ }
271
+ }
272
+
273
+ @keyframes jump {
274
+ 0%, 50%, 100% {
275
+ transform: translateY(0);
276
+ }
277
+ 25% {
278
+ transform: translateY(-100%);
279
+ }
280
+ 75% {
281
+ transform: translateY(-50%);
282
+ }
283
+ }
284
+
285
  /* Mostrar el contenido después de la carga */
286
  #myDiv {
287
  display: none;
 
357
  </style>
358
  </head>
359
  <body>
360
+ <div class="watermark">Servidor Activado de la Iglesia Cristo Vive⚙️</div>
361
  <div class="mobile-notice hide">
362
  Esta página no está disponible en versión móvil, ejecutar en computadora.
363
+ </div>
364
+ <div class="scene">
365
+ <div class="shadow"></div>
366
+ <div class="loader spinner" style="--timeline: 1s; --delay: 0s;"></div>
367
+ <div class="loader spinner" style="--timeline: 1s; --delay: -0.8s;"></div>
368
+ <div class="loader spinner" style="--timeline: 1s; --delay: -1.6s;"></div>
369
+ <div class="loader spinner" style="--timeline: 1s; --delay: -2.4s;"></div>
370
+ <div class="loader jumper" style="--timeline: 1.5s; --delay: 0.5s;"></div>
371
+ <div class="loader jumper" style="--timeline: 1.5s; --delay: -0.7s;"></div>
372
+ <div class="loader jumper" style="--timeline: 1.5s; --delay: -1.9s;"></div>
373
+ <div class="loader jumper" style="--timeline: 1.5s; --delay: -3.1s;"></div>
374
  </div>
375
+ <div id="myDiv" style="display: none;">
376
 
377
  <header>
378
  <img src="https://i.ibb.co/YLLzsJ8/tcvl-121x107.webp" alt="tcvl-121x107" border="0">
 
483
  <script src="https://cdnjs.cloudflare.com/ajax/libs/moment.js/2.29.1/moment.min.js"></script>
484
  <script>
485
 
486
+ window.addEventListener("load", function() {
487
+ document.getElementById("loader").style.display = "none";
488
+ document.getElementById("myDiv").style.display = "block";
489
  });
490
 
491
+ document.addEventListener("DOMContentLoaded", function() {
492
+ var logoContainer = document.getElementById("logo-container");
493
+ logoContainer.style.display = "none";
494
+ });
495
+ document.addEventListener("DOMContentLoaded", function() {
496
+ // ...
497
+
498
  function checkCells() {
499
  var cells = document.getElementsByClassName("editable-cell");
500
  var allCellsFilled = true;
 
532
  }
533
  var generatedBy = document.getElementById("generado-por");
534
  generatedBy.addEventListener("input", checkCells);
535
+ });
 
 
 
536
 
537
  function guardarDatos() {
538
  var fechaServicioMartes = document.getElementById("fecha-servicio-martes").innerText;
 
562
  }
563
  checkMissingData();
564
  });
565
+ var cells = document.querySelectorAll('.editable-cell');
566
+ cells.forEach(function(cell) {
567
+ cell.addEventListener('click', function() {
568
+ var modalInput = document.getElementById('modal-input');
569
+ modalInput.value = cell.innerText;
570
+ var modalInstance = M.Modal.getInstance(document.getElementById('data-modal'));
571
+ modalInstance.open();
572
+ modalInput.focus();
573
+ cell.classList.add('highlight');
574
+ });
575
+ });
576
  function checkMissingData() {
577
  var cells = document.querySelectorAll('.editable-cell');
578
  var isDataComplete = true;
 
640
  };
641
  var loader = document.getElementById("loader");
642
  var content = document.getElementById("myDiv");
643
+ setTimeout(function() {
644
+ loader.classList.add("animate-bottom");
645
+ loader.style.display = "none";
646
+ content.style.display = "block";
647
+ printButton.style.display = 'block';
648
+ }, 2000);
649
+ });
650
+ function startLoading() {
651
+ var loader = document.getElementById("loader");
652
+ loader.style.display = "block";
653
+ }
654
 
655
+ function stopLoading() {
656
+ var loader = document.getElementById("loader");
657
+ loader.style.display = "none";
658
  }
659
  function hideWarnings() {
660
  var cells = document.querySelectorAll(".editable-cell");
 
666
  }
667
  }
668
  }
 
 
 
 
 
669
  function getDate() {
670
  var today = new Date();
671
  var month = today.getMonth() + 1;
 
673
  var year = today.getFullYear();
674
  return month + "/" + day + "/" + year;
675
  }
676
+ // Obtener las celdas de fecha y horario por su id
677
+ const fechaServicioCell = document.getElementById('fecha-servicio');
678
+ const horarioCell = document.getElementById('horario');
679
+ // Obtener la fecha y hora actual
680
+ const now = moment();
681
+ // Formatear la fecha y hora en el formato deseado
682
+ const fechaServicio = now.format('DD/MM/YYYY');
683
+ const horarioInicio = now.format('h:mm A');
684
+ const horarioFinal = now.add(2, 'hours').format('h:mm A'); // Ejemplo: el servicio dura 2 horas
685
+ // Establecer los valores en las celdas correspondientes
686
+ fechaServicioCell.textContent = fechaServicio;
687
+ horarioCell.textContent = `${horarioInicio} - ${horarioFinal}`;
688
  </script>
689
  <p style="font-size: 12px; opacity: 0.5; text-align: center;">Este documento ha sido aprobado por el departamento de multimedia para su uso</p>
690
  </body>