Hugging Face's logo

Spaces:
olimpa
/
CVORG
Running

App Files Community
5
CVORG / index.html
olimpa's picture
olimpa
Update index.html
94fe077
raw
history blame contribute delete
No virus
20.7 kB
<!DOCTYPE html>
<html lang="es">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>ORGANIZACION SEMANAL PARA LIDERES CRISTO VIVE</title>
<link rel="icon" href="https://ia800509.us.archive.org/8/items/tcvl_20231025/TCVL%20%281%29.png" alt="Nuevo 铆cono"/>
<link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Roboto:300,400,500,700&display=swap">
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/flatpickr@4.6.6/dist/flatpickr.min.css">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/materialize/1.0.0/css/materialize.min.css">
<script src="https://html2canvas.hertzen.com/dist/html2canvas.min.js"></script>
<style>
body {
background-color: #ededed; /* Fondo general */
font-family: "Arial Narrow", sans-serif;
font-size: 13px;
}
header {
background-color: #2d75d3; /* Encabezado */
display: flex;
align-items: center;
margin-bottom: 10px;
}
header h2 {
text-align: center;
}
header svg {
width: auto;
height: auto;
}
h1, h2, h3 {
text-align: center;
font-size: 12px;
margin: 0;
align-items: center;
font-family: "Arial Narrow", sans-serif;
}
.table-responsive {
display: block;
width: 100%;
overflow-x: auto;
}
table {
border-collapse: collapse;
width: 100%;
font-family: "Roboto", sans-serif; /* Fuente de Material Design */
background-color: #fff; /* Fondo de la tabla */
box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1); /* Sombra de la tabla */
}
table td, table th {
border: 1px solid #ddd; /* Borde de celdas */
padding: 12px;
text-align: center;
transition: background-color 0.3s ease;
border-radius: 0;
font-size: 13px;
font-family: "Arial Narrow", sans-serif;
}
table th, table td {
text-align: left;
word-break: break-word;
}
table th, table td {
text-transform: uppercase;
}
table td {
word-break: break-word;
}
table td, table th {
padding: 8px;
text-align: center;
transition: background-color 0.3s ease;
font-size: 13px;
font-family: "Arial Narrow", sans-serif;
}
table th {
background-color: #2196F3; /* Azul primario */
color: #fff; /* Texto blanco */
}
table td {
background-color: #f9fbe7; /* Verde claro */
font-size: 13px;
font-family: "Arial Narrow", sans-serif;
}
table td:hover {
background-color: #90caf9; /* Azul claro al pasar el mouse */
color: #fff; /* Texto blanco al pasar el mouse */
}
th.left-align {
font-family: "Arial Narrow", sans-serif;
font-size: 14px;
}
.table-container {
max-width: 80%;
width: -webkit-fit-content;
width: fit-content;
margin: 0 auto;
}
.hide {
display: none;
}
.footer {
text-align: center;
margin-top: 15px;
font-size: 13px;
font-family: "Arial Narrow", sans-serif;
}
.highlight {
background-color: #e21718 !important; /* Rojo oscuro */
color: #fff; /* Texto blanco */
}
.editable-cell.error {
background-color: #e21718; /* Rojo oscuro */
position: relative;
font-size: 13px;
font-family: "Arial Narrow", sans-serif;
color: #fff; /* Texto blanco */
}
.edit-button {
border: none;
background: none;
font-size: 14px;
cursor: pointer;
color: #2d75d3; /* Azul oscuro */
}
.editable-cell.error::after {
content: "No vac铆a";
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
font-size: 12px;
color: rgb(240, 130, 40);
pointer-events: none;
}
.datepicker-modal {
width: 350px !important;
max-height: 350px !important;
overflow-y: auto !important;
}
.date-input {
position: relative;
}
.date-input .date-label {
position: absolute;
top: -10px;
left: 10px;
background-color: #fff;
padding: 0 5px;
font-size: 12px;
}
.time-input select {
display: block;
width: 100%;
}
.custom-button {
font-size: 12px;
opacity: 0.9;
text-transform: uppercase;
background-color: #2d75d3; /* Azul oscuro */
color: #fff; /* Texto blanco */
border: none;
padding: 8px 12px;
cursor: pointer;
}
.custom-button:hover {
background-color: #1565C0; /* Azul m谩s oscuro al pasar el mouse */
}
.progress-wrapper {
display: flex;
justify-content: center;
align-items: center;
height: 100vh;
}
.progress {
display: flex;
justify-content: center;
align-items: center;
width: 50px;
height: 50px;
border: 3px solid rgba(0, 0, 0, 0.3);
border-top-color: #000;
border-radius: 0;
animation: spin 1s ease-in-out infinite;
}
#myDiv {
display: none;
text-align: center;
}
.custom-button {
font-size: 10px;
opacity: 0.7;
}
.mobile-notice {
display: none;
}
@media (min-width: 400px) {
.mobile-notice {
display: none;
}
}
@media (max-width: 1080px) {
h1, h2, h3 {
font-size: 18px;
}
.table-container {
max-width: 100%;
}
.custom-select {
font-size: 12px;
}
}
@media only screen and (max-width: 600px) {
table, thead, tbody, th, td, tr {
display: block;
}
th {
display: none; /* Ocultar encabezados en dispositivos m贸viles */
}
td {
border: none;
position: relative;
}
td:before {
content: attr(data-label);
position: absolute;
left: 50%;
transform: translateX(-50%);
font-weight: bold;
color: #2d75d3; /* Azul oscuro */
}
}
.custom-select {
border: none;
padding: 1px;
width: 100%;
box-sizing: border-box;
border-radius: 0;
background-color: #f9fbe7; /* Verde claro */
font-family: "Arial Narrow", sans-serif;
font-size: 12px;
appearance: none;
-webkit-appearance: none;
-moz-appearance: none;
text-indent: 1px;
text-overflow: '';
}
.datepicker-cell {
padding: 8px;
text-align: center;
font-size: 13px;
font-family: "Arial Narrow", sans-serif;
background-color: #f7f1f0; /* Gris claro */
border: none;
border-radius: 0;
}
.datepicker.custom-select {
width: 100%;
box-sizing: border-box;
background-color: #f9fbe7; /* Verde claro */
}
#confirmMessage {
display: none;
position: fixed;
top: 0;
left: 0;
width: 100%;
height: 100%;
background: rgba(0, 0, 0, 0.7);
text-align: center;
z-index: 9999;
background-color: #2196F3; /* Azul primario */
}
#confirmMessage p {
color: white;
font-size: 24px;
margin-top: 20%;
}
#exportAsPDF {
display: block;
margin: 0 auto;
}
/* Estilo para las celdas de la fila "Fecha del Servicio" */
tr:first-child {
font-size: 14px; /* Tama帽o de la fuente */
font-weight: bold; /* Negrita */
}
td.datepicker-cell input {
width: 100%; /* Ocupar el ancho completo de la celda */
padding: 8px; /* Ajustar el relleno */
box-sizing: border-box; /* Incluir el relleno en el ancho total */
font-size: 12px; /* Tama帽o de la fuente */
}
td.datepicker-cell {
padding: 10px; /* Ajustar el relleno */
}
/* Estilo para el t铆tulo "PROGRAMACI脫N SEMANAL PARA L脥DERES" */
h2.pika-title {
font-size: 18px; /* Tama帽o de la fuente */
font-weight: bold; /* Negrita */
margin-top: 10px; /* Ajusta el margen superior */
}
/* Ajuste para el logo en el t铆tulo */
h2.pika-title img {
margin-right: 10px; /* Ajusta el margen derecho del logo */
}
@media only screen and (max-width: 600px) {
td.datepicker-cell {
padding: 5px;
}
td.datepicker-cell input {
font-size: 10px;
}
}
@media only screen and (max-width: 600px) {
select {
width: 100%;
margin-bottom: 10px;
}
}
tr:nth-child(odd) {
background-color: #3d1305; /* Marr贸n oscuro */
}
tr:nth-child(even) {
background-color: #f9fbe7; /* Verde claro */
}
/* Estilos para la primera columna de las filas espec铆ficas */
tr td.left-align {
color: #2196F3; /* Azul primario */
font-weight: bold;
}
/* Estilos para las celdas editables de las filas espec铆ficas */
tr td.editable-cell {
background-color: #90caf9; /* Azul claro */
color: #fff; /* Texto blanco */
}
</style>
</head>
<body>
<header>
</header>
<div class="table-container">
<table id="table">
<thead>
<tr>
<td colspan="5" class="center-align">IGLESIA CRISTO VIVE ANT脫N</td>
</tr>
<tr>
<th class="left-align">PROGRAMACION SEMANAL</th>
<td><select class="browser-default custom-select" id="dias-semana-martes" title="D铆as de la semana para el martes"><option value="">Elegir Dia</option><option value="lunes">Lunes</option><option value="martes">Martes</option><option value="miercoles">Mi茅rcoles</option><option value="jueves">Jueves</option><option value="viernes">Viernes</option><option value="sabado">S谩bado</option><option value="domingo">Domingo</option><option value="no-servicio">No servicio</option><option value="extraordinario">Extraordinario</option></select></td>
<td><select class="browser-default custom-select" id="dias-semana-viernes" title="D铆as de la semana para el viernes"><option value="">Elegir Dia</option><option value="lunes">Lunes</option><option value="martes">Martes</option><option value="miercoles">Mi茅rcoles</option><option value="jueves">Jueves</option><option value="viernes">Viernes</option><option value="sabado">S谩bado</option><option value="domingo">Domingo</option><option value="no-servicio">No servicio</option><option value="extraordinario">Extraordinario</option></select></td>
<td><select class="browser-default custom-select" id="dias-semana-sabado" title="D铆as de la semana para el sabado"><option value="">Elegir Dia</option><option value="lunes">Lunes</option><option value="martes">Martes</option><option value="miercoles">Mi茅rcoles</option><option value="jueves">Jueves</option><option value="viernes">Viernes</option><option value="sabado">S谩bado</option><option value="domingo">Domingo</option><option value="no-servicio">No servicio</option><option value="extraordinario">Extraordinario</option></select></td>
<td><select class="browser-default custom-select" id="dias-semana-domingo"title="D铆as de la semana para el domingo"><option value="">Elegir Dia</option><option value="lunes">Lunes</option><option value="martes">Martes</option><option value="miercoles">Mi茅rcoles</option><option value="jueves">Jueves</option><option value="viernes">Viernes</option><option value="sabado">S谩bado</option><option value="domingo">Domingo</option><option value="no-servicio">No servicio</option><option value="extraordinario">Extraordinario</option></select></td>
</tr>
</thead>
<tbody>
<tr>
<td class="left-align">FECHA DEL SERVICIO</td>
<h2 id="pika-title-fn" class="pika-title" role="heading" aria-live="assertive" aria-level="2">
<img width="50" height="50" src="https://ia800509.us.archive.org/8/items/tcvl_20231025/TCVL%20%281%29.png" alt="CristoViveLogoPng"/>
PROGRAMACI脫N SEMANAL PARA LIDERES
</h2>
<td id="fecha-servicio-martes" class="datepicker-cell">
<input type="text" id="datepicker-martes" class="datepicker custom-select" placeholder="Seleccionar Fecha">
</td>
<td id="fecha-servicio-viernes" class="datepicker-cell">
<input type="text" id="datepicker-viernes" class="datepicker custom-select" placeholder="Seleccionar Fecha">
</td>
<td id="fecha-servicio-sabado" class="datepicker-cell">
<input type="text" id="datepicker-sabado" class="datepicker custom-select" placeholder="Seleccionar Fecha">
</td>
<td id="fecha-servicio-domingo" class="datepicker-cell">
<input type="text" id="datepicker-domingo" class="datepicker custom-select" placeholder="Seleccionar Fecha">
</td>
</tr>
<tbody>
<tr>
<td class="left-align">DIRIGE</td>
<td class="editable-cell" contenteditable="true"></td>
<td class="editable-cell" contenteditable="true"></td>
<td class="editable-cell" contenteditable="true"></td>
<td class="editable-cell" contenteditable="true"></td>
</tr>
<tr>
<td class="left-align">Alabanza & Adoraci贸n</td>
<td class="editable-cell" contenteditable="true"></td>
<td class="editable-cell" contenteditable="true"></td>
<td class="editable-cell" contenteditable="true"></td>
<td class="editable-cell" contenteditable="true"></td>
</tr>
<tr>
<td class="left-align">Meditaci贸n de la Palabra</td>
<td class="editable-cell" contenteditable="true"></td>
<td class="editable-cell" contenteditable="true"></td>
<td class="editable-cell" contenteditable="true"></td>
<td class="editable-cell" contenteditable="true"></td>
</tr>
<tr>
<td class="left-align">Actividad adicional</td>
<td class="editable-cell" contenteditable="true"></td>
<td class="editable-cell" contenteditable="true"></td>
<td class="editable-cell" contenteditable="true"></td>
<td class="editable-cell" contenteditable="true"></td>
</tr>
<tr>
<td class="left-align">Actividad extraordinaria</td>
<td class="editable-cell" contenteditable="true"></td>
<td class="editable-cell" contenteditable="true"></td>
<td class="editable-cell" contenteditable="true"></td>
<td class="editable-cell" contenteditable="true"></td>
</tr>
<tr>
<td class="left-align">HORARIO</td>
<td>
<select class="browser-default custom-select" id="horario-martes">
<option value="">Elegir Horario</option>
<option value="8:00AM/12:00PM">8:00AM-12:00PM</option>
<option value="8:00AM/12:30PM">8:00AM-12:30PM</option>
<option value="3:00PM-6:00PM">3:00PM-6:00PM</option>
<option value="6:00PM-9:00PM">6:00PM-9:00PM</option>
<option value="6:30PM-8:30PM">6:30PM-8:30PM</option>
<option value="NO HAY">NO HAY</option>
</select>
</td>
<td>
<select class="browser-default custom-select" id="horario-viernes">
<option value="">Elegir Horario</option>
<option value="8:00AM/12:00PM">8:00AM-12:00PM</option>
<option value="8:00AM/12:30PM">8:00AM-12:30PM</option>
<option value="3:00PM-6:00PM">3:00PM-6:00PM</option>
<option value="6:00PM-9:00PM">6:00PM-9:00PM</option>
<option value="6:30PM-8:30PM">6:30PM-8:30PM</option>
<option value="NO HAY">NO HAY</option>
</select>
</td>
<td>
<select class="browser-default custom-select" id="horario-sabado">
<option value="">Elegir Horario</option>
<option value="8:00AM/12:00PM">8:00AM-12:00PM</option>
<option value="8:00AM/12:30PM">8:00AM-12:30PM</option>
<option value="3:00PM-6:00PM">3:00PM-6:00PM</option>
<option value="6:00PM-9:00PM">6:00PM-9:00PM</option>
<option value="6:30PM-8:30PM">6:30PM-8:30PM</option>
<option value="NO HAY">NO HAY</option>
</select>
</td>
<td>
<select class="browser-default custom-select" id="horario-domingo">
<option value="">Elegir Horario</option>
<option value="8:00AM/12:00PM">8:00AM-12:00PM</option>
<option value="8:00AM/12:30PM">8:00AM-12:30PM</option>
<option value="3:00PM-6:00PM">3:00PM-6:00PM</option>
<option value="6:00PM-9:00PM">6:00PM-9:00PM</option>
<option value="6:30PM-8:30PM">6:30PM-8:30PM</option>
<option value="NO HAY">NO HAY</option>
</select>
</td>
</tr>
<tr>
<td class="left-align">AUTOR DE LA PROGRAMACION</td>
<td colspan="7"><select class="browser-default custom-select" id="generado-por"><option value="">Elegir Responsable </option><option value="Jackie de Rojas">Jackie de Rojas</option><option value="Jhonny Barnet">Jhonny Barnet</option><option value="Administrador">Administrador</option><option value="Pastor">Pastor</option><option value="Miembro Oficial">Miembro Oficial</option><option value="Directiva">Directiva</option><option value="Asistente">Asistente</option><option value="Diacono Principal">Di谩cono Principal</option><option value="NO HAY">NO HAY</option><option value="Extraordinario">Extraordinario</option><option value="Supervisor">Supervisor</option><option value="Coordinador">Coordinador</option><option value="Voluntario">Voluntario</option><option value="Encargado de Eventos">Encargado de Eventos</option><option value="Cambio de Responsabilidades">Cambio de Responsabilidades</option></select></td>
</tr>
</tbody>
</table>
</div>
<div class="footer">
<div>
<p style="font-size: 10px; opacity: 0.3; text-align: center;">LO QUE ES, YA HA SIDO, Y LO QUE SER脕, YA FUE, Y DIOS BUSCA LO QUE HA PASADO.</p>
<p style="font-size: 10px; opacity: 0.3; text-align: center;">&copy; CVM 馃挌 BY JAIRNAY V6 2024</p>
</div>
<button id="exportAsPDF" class="custom-button" style="display: block;">Imprimir</button>
<div id="confirmMessage">
<p>驴Desea confirmar la impresi贸n?</p>
<button id="confirmPrint" class="custom-button">Aceptar</button>
<button id="cancelPrint" class="custom-button">Cancelar</button>
</div>
</div>
<script src="https://cdnjs.cloudflare.com/ajax/libs/moment.js/2.29.1/moment.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/flatpickr@4.6.6/dist/flatpickr.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/materialize/1.0.0/js/materialize.min.js"></script>
<script>
document.addEventListener("DOMContentLoaded", function () {
var pickerMartes = flatpickr('#datepicker-martes', {
dateFormat: 'd-m-Y',
});
var pickerViernes = flatpickr('#datepicker-viernes', {
dateFormat: 'd-m-Y',
});
var pickerSabado = flatpickr('#datepicker-sabado', {
dateFormat: 'd-m-Y',
});
var pickerDomingo = flatpickr('#datepicker-domingo', {
dateFormat: 'd-m-Y',
});
var printButton = document.getElementById('exportAsPDF');
var confirmMessage = document.getElementById('confirmMessage');
var confirmPrintButton = document.getElementById('confirmPrint');
var cancelPrintButton = document.getElementById('cancelPrint');
printButton.addEventListener('click', function () {
// Mostrar el mensaje de confirmaci贸n
confirmMessage.style.display = 'block';
// Ocultar el bot贸n de impresi贸n
printButton.style.display = 'none';
});
// Acci贸n al confirmar la impresi贸n
confirmPrintButton.addEventListener('click', function () {
// Ocultar el mensaje de confirmaci贸n
confirmMessage.style.display = 'none';
// Realizar la impresi贸n del PDF
window.print();
// Mostrar nuevamente el bot贸n despu茅s de la impresi贸n
setTimeout(function () {
printButton.style.display = 'block';
}, 1000); // Puedes ajustar el tiempo si es necesario
});
// Acci贸n al cancelar la impresi贸n
cancelPrintButton.addEventListener('click', function () {
// Ocultar el mensaje de confirmaci贸n
confirmMessage.style.display = 'none';
// Mostrar nuevamente el bot贸n de impresi贸n
printButton.style.display = 'block';
});
});
</script>
</body>
</html>