Tul xxx Tul

Viewing: index4.html

<!DOCTYPE html>
<html lang="es">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>CuéntaMe</title>
    <link rel="icon" href="https://emprendo.com.co/wp-content/uploads/2020/09/Logo-eMprendo.png" sizes="192x192">
    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/css/bootstrap.min.css" rel="stylesheet">
    <link href="https://fonts.googleapis.com/css2?family=Poppins:wght@400;600&display=swap" rel="stylesheet">
    <link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0-beta3/css/all.min.css" rel="stylesheet">
    <link href='https://cdn.jsdelivr.net/npm/fullcalendar@5.10.2/main.css' rel='stylesheet' />

    <style>
        body {
            font-family: 'Poppins', sans-serif;
            color:#666;
            margin: 0;
            padding: 0;
        }

        h1,
        h2,
        h3,
        h4,
        h5,
        h6 {
            font-weight: 600;
            color: #0086FF;
        }

        p {
            color: #7A7A7A;
            font-size: 14px;
        }

        .header-image {
            background-image: url('http://emprendo.com.co/wp-content/uploads/2023/06/Banner-1.gif');
            background-size: contain;
            background-repeat: no-repeat;
            margin: -25px;
            height: 100px;
            display: flex;
            align-items: center;
            justify-content: center;
        }

        .header-quote {
            padding: 10px;
            color: #7A7A7A;
            font-size: 22px;
            font-weight: 500;
            font-style: italic;
            margin-left: -300px;
        }
        
        .stats-container {
                margin-top: 100px;
            }

        .contact-icons {
            display: flex;
            justify-content: center;
            margin-top: 20px;
        }

        .contact-icons a {
            font-size: 24px;
            margin: 0 15px;
            text-decoration: none;
        }

        .img-logo {
            margin-left: 12px;
            text-align: center;
        }

        .footer {
            margin-top: 10px;
            padding: 20px 0;
            border-top: 1px solid #ddd;
            text-align: center;
        }

        .emprendo-link {
            color: #ff3000;
            text-decoration: none;
        }

        .emprendo-link:hover {
            text-decoration: underline;
        }

        .sidebar {
            position: fixed;
            top: 0;
            bottom: 0;
            left: 0;
            z-index: 100;
            padding: 48px 0 0;
            box-shadow: inset -1px 0 0 rgba(0, 0, 0, .1);
            border: #FFFFFF;
        }

        .sidebar-footer {
            margin-top: 220px;
        }

        .calendar-container {
            overflow: hidden;
            position: relative;
            width: 100%;
            height: 0;
            padding-top: 56.25%;
        }

        /* Asegura que el iframe se vea correctamente en dispositivos móviles */
        .calendar-container iframe {
            position: absolute;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
        }
        
        .chat {
            padding: 20px;
            font-size: 12px;
            }

        .container {
            max-width: 300px;
            margin: 0 auto;
            padding: 40px;
        }

        .stats {
            display: flex;
            background-color: white;
            border-radius: 20px;
            padding: 20px;
            box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
            justify-content: space-around;
        }

        .stat {
            display: flex;
            align-items: center;
        }

        .stat-icon {
            background-color: #ff3900;
            border-radius: 50%;
            width: 50px;
            height: 50px;
            display: flex;
            align-items: center;
            justify-content: center;
            margin-right: 15px;
        }

        .stat-icon svg {
            width: 30px;
            height: 30px;
            fill: white;
        }

        .stat-info {
            display: flex;
            flex-direction: column;
        }

        .stat-value {
            font-size: 24px;
            font-weight: bold;
            color: #0086FF;
        }

        .stat-label {
            font-size: 14px;
            color: #666;
        }

        .card {
            background-image: linear-gradient(to bottom, white, #f8f9fa);
        }

        .project-card {
            margin-bottom: 20px;
        }

        .project-card .progress {
            height: 5px;
        }

        .budget-covered {
            color: green;
        }

        .budget-partial {
            color: orange;
        }

        .budget-unpaid {
            color: red;
        }

        .progress-bar {
            background-color: #00c6ff;
            color: #020101;
            font-size: medium;
        }

        /* Container from tp.html */
        .container {
            max-width: 1200px;
            margin: 0 auto;
            padding: 40px;
        }

        .stats-container {
            display: flex;
            align-items: center;
            justify-content: space-between;
            background-color: white;
            border-radius: 20px;
            padding: 20px;
            box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
        }

        .stats-image {
            flex: 0 0 auto;
            margin-right: 20px;
        }

        .stats-image img {
            max-width: 200px;
            height: auto;
        }

        .stats {
            flex: 1;
            display: flex;
            justify-content: space-around;
        }

        .stat {
            display: flex;
            align-items: center;
        }

        .stat-icon {
            background-color: #ff3900;
            border-radius: 50%;
            width: 50px;
            height: 50px;
            display: flex;
            align-items: center;
            justify-content: center;
            margin-right: 15px;
        }

        .stat-icon svg {
            width: 30px;
            height: 30px;
            fill: white;
        }

        .stat-info {
            display: flex;
            flex-direction: column;
        }

        .stat-value {
            font-size: 24px;
            font-weight: bold;
            color: #0086FF;
        }

        .stat-label {
            font-size: 14px;
            color: #666;
        }

        .table th,
        .table td {
            padding: 8px;
            border: 1px solid #fff;
            text-align: center;
            color: #7A7A7A;
        }

        .table th {
            color: #0086FF;
            font-weight: bold;
            border-bottom: 0.0px solid #0086FF;
        }

        /* Estilos para pantallas pequeñas (dispositivos móviles) */
        @media (max-width: 768px) {
            .header-image {
                display: flex;
                flex-direction: column; /* Cambiado a columna para apilar la imagen y la frase */
                align-items: center; /* Centrar el contenido */
                margin-top: 20px;
            }

            .header-quote {
                text-align: center; /* Centrar el texto de la frase */
                padding-top: 10px; /* Espaciado superior para separar de la imagen */
                color: #7A7A7A;
                font-size: 18px; /* Tamaño de fuente más pequeño para dispositivos móviles */
                font-weight: 500;
                font-style: italic;
                word-wrap: break-word; /* Permitir que el texto se ajuste a la línea */
                margin: 0 10px; /* Agregar margen para evitar que el texto toque los bordes */
            }

            .stats-container {
                margin-top: 120px;
                flex-direction: column;
                align-items: center;
            }

            .stat {
                margin-bottom: 20px;
                text-align: center;
            }

            .stats-image {
                margin-bottom: 30px;
            }

            .stat-icon {
                margin-right: 20;
                margin-bottom: 10px;
                text-align: left;
            }

            .calendar-container {
                padding-top: 100%;
                /* Aumenta la altura en pantallas más pequeñas */
                height: auto;
            }

            .calendar-container iframe {
                padding: 10px;
                width: 100%;
                height:1500px;
                /* Haz que el iframe ocupe toda la pantalla vertical */
            }
            .chat {
            padding: 20px;
            
            }

            .sidebar {
                display: none; /* Ocultar la barra lateral en móviles */
            }

            .hamburger {
                display: block; /* Mostrar el botón hamburguesa en móviles */
                cursor: pointer;
                font-size: 24px;
                margin: 10px;
                z-index: 1000; /* Asegurarse de que esté por encima de otros elementos */
            }

            .nav-mobile {
                display: none; /* Ocultar el menú de navegación móvil por defecto */
                flex-direction: column;
                position: absolute;
                background-color: white;
                width: 100%;
                z-index: 1000;
                box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1);
            }

            .nav-mobile.show {
                display: flex; /* Mostrar el menú cuando se activa */
            }
        }

        /* Estilos para pantallas grandes (escritorio) */
        @media (min-width: 769px) {
            .hamburger {
                display: none; /* Ocultar el botón hamburguesa en escritorio */
            }
        }
    </style>
</head>

<body>
    <div id="CuéntaMe" class="container-fluid">
        <div class="row">
            <!-- Botón hamburguesa para móviles -->
            <div class="hamburger" onclick="toggleMenu()">
                <i class="fas fa-bars"></i>
            </div>

            <nav class="col-md-2 d-none d-md-block bg-light sidebar">
                <div class="position-sticky pt-0">
                    <a href="https://emprendo.com.co/" target="_blank">
                        <img class="img-logo"
                            src="http://emprendo.com.co/wp-content/uploads/2023/06/Logotipo-e-mprendo-Transparente-Fondo-Blanco.png"
                            alt="eMprendoLogo" class="img-fluid mb-3" width="200px">
                    </a>
                    <ul class="nav flex-column" style="text-align: right;">
                        <li class="nav-item">
                            <a class="nav-link active" href="#CuéntaMe">CuéntaMe</a>
                        </li>
                        <li class="nav-item">
                            <a class="nav-link" href="#proyectos">Proyectos</a>
                        </li>
                        <li class="nav-item">
                            <a class="nav-link" href="#transacciones">Transacciones</a>
                        </li>
                    </ul>


                    <div class="sidebar-footer">
                        <div class="contact-icons">
                            <a href="tel:+1234567890" target="_blank" style="color: #0086FF;"><i
                                    class="fas fa-phone"></i></a>
                            <a href="https://wa.me/1234567890" target="_blank" style="color: #25d366;"><i
                                    class="fab fa-whatsapp"></i></a>
                            <a href="mailto:info@emprendo.com" target="_blank" style="color: #ff2e00;"><i
                                    class="fas fa-envelope"></i></a>
                        </div>

                        <footer class="footer">
                            <p style="color:#7A7A7A; font-size: small;">Copyright © <a href="https://emprendo.com.co/"
                                    target="_blank" class="emprendo-link">eMprendo</a> 2024</p>
                        </footer>
                    </div>
                </div>
            </nav>

            <!-- Menú de navegación móvil -->
            <div class="nav-mobile" id="mobile-menu">
                <a class="nav-link" href="#CuéntaMe">CuéntaMe</a>
                <a class="nav-link" href="#proyectos">Proyectos</a>
                <a class="nav-link" href="#transacciones">Transacciones</a>
            </div>

            <main class="col-md-10 ms-sm-auto px-md-4">
                <div class="header-image">
                    <img src="http://emprendo.com.co/wp-content/uploads/2023/06/Banner-1.gif" alt="Banner" style="width: 100%; height: auto;"> <!-- Asegúrate de que la imagen sea responsiva -->
                    <div class="header-quote">
                        "El éxito no se mide por lo que logras, sino por los obstáculos que superas para lograrlo".
                    </div>
                </div>


                <!-- Insert the tp.html container here -->
                <div class="container">
                    <div class="stats-container">
                        <div class="stats-image">
                            <img src="http://emprendo.com.co/wp-content/uploads/2024/09/RedPoint.png" alt="RedPoint">
                        </div>

                        <div class="stat">
                            <div class="stat-icon">
                                <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24">
                                    <path d="M0 0h24v24H0z" fill="none" />
                                    <path d="M3 13h8V3H3v10zm0 8h8v-6H3v6zm10 0h8V11h-8v10zm0-18v6h8V3h-8z" />
                                </svg>
                            </div>
                            <div class="stat-info">
                                <span class="stat-value">1</span>
                                <span class="stat-label">Proyectos Activos</span>
                            </div>
                        </div>
                        <div class="stat">
                            <div class="stat-icon">
                                <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24">
                                    <path d="M0 0h24v24H0z" fill="none" />
                                    <path
                                        d="M19 3h-4.18C14.4 1.84 13.3 1 12 1c-1.3 0-2.4.84-2.82 2H5c-1.1 0-2 .9-2 2v14c0 1.1.9 2 2 2h14c1.1 0 2-.9 2-2V5c0-1.1-.9-2-2-2zm-7 0c.55 0 1 .45 1 1s-.45 1-1 1-1-.45-1-1 .45-1 1-1zm-2 14l-4-4 1.41-1.41L10 14.17l6.59-6.59L18 9l-8 8z" />
                                </svg>
                            </div>
                            <div class="stat-info">
                                <span class="stat-value">0</span>
                                <span class="stat-label">Proyectos Culminados</span>
                            </div>
                        </div>
                        <div class="stat">
                            <div class="stat-icon">
                                <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24">
                                    <path d="M0 0h24v24H0z" fill="none" />
                                    <path
                                        d="M11.8 10.9c-2.27-.59-3-1.2-3-2.15 0-1.09 1.01-1.85 2.7-1.85 1.78 0 2.44.85 2.5 2.1h2.21c-.07-1.72-1.12-3.3-3.21-3.81V3h-3v2.16c-1.94.42-3.5 1.68-3.5 3.61 0 2.31 1.91 3.46 4.7 4.13 2.5.6 3 1.48 3 2.41 0 .69-.49 1.79-2.7 1.79-2.06 0-2.87-.92-2.98-2.1h-2.2c.12 2.19 1.76 3.42 3.68 3.83V21h3v-2.15c1.95-.37 3.5-1.5 3.5-3.55 0-2.84-2.43-3.81-4.7-4.4z" />
                                </svg>
                            </div>
                            <div class="stat-info">
                                <span class="stat-value">$1.100</span>
                                <span class="stat-label">Saldo Pendiente</span>
                            </div>
                        </div>

                    </div>
                </div>


                
                    <div class="row mt-4">
                        <div class="col-md-8">
                            <div class="calendar-container"
                                style="overflow: hidden; position: relative; width: 100%; height: 0; padding-top: 70%;">
                                <iframe id="calendar-iframe" style="border: 0; width: 100%;"></iframe>
                            </div>
                        </div>

                        <div class="col-md-4">
                            <div class="chat">
                            <div id="chat-box" style="height: 500px; overflow-y: scroll; padding: 10px; border: none;"> <!-- Eliminado el borde -->
                                <!-- Los mensajes se agregarán aquí -->
                            </div>
                            <div class="input-group mt-2">
                                <select id="username-input" class="form-control">
                                    <option value="🔥 eMprendo">🔥 eMprendo</option>
                                    <option value="🎯 Red Point">🎯 Red Point</option>
                                </select>
                            </div>
                            <textarea id="chat-input" class="form-control mt-2" rows="3" placeholder="Escribe un mensaje..."></textarea> <!-- Cambiado a textarea -->
                            <button class="btn btn-primary mt-2" id="send-btn" type="button">Enviar</button> <!-- Ajustado el botón -->
                        </div>
                        </div>
                    </div>
                

                <div id="proyectos" class="section mt-4" style="padding: 50px;">
                    <h2 style="padding-bottom: 25px; color: #ff3900;">Proyectos Activos</h2>
                    <div id="proyectosList" class="row row-cols-1 row-cols-md-3 g-4">
                        <div class="col">
                            <div class="card" style="border-width: 0cap;">
                                <a href="https://emprendo.com.co/producto/sistemas-digitales/" target="_blank"><img
                                        src="https://emprendo.com.co/wp-content/uploads/2023/06/Plan-Financiero-500x231.png"
                                        class="card-img-top" alt="Sistemas Digitales"></a>
                                <div class="card-body">
                                    <h5 class="card-title">SGI Red Point</h5>
                                    <p class="card-text">Desarrollo de sistema de gestión integral a la medida de Red
                                        Point Autoparts. FMS, SRM, WMS, CRM & OMS</p>
                                    <p><a href="https://emprendo.com.co/producto/sistemas-digitales/"
                                            target="_blank"></a><strong>Producto:</strong> Sistemas Digitales</p></a>
                                    <p><strong>Project Manager:</strong> Cynthia Simancas</p>
                                    <p><strong>Fecha Inicio:</strong> 24-09-2024</p>
                                    <p><strong>Deadline:</strong> 21-10-2024</p>
                                    <p><strong>Status:</strong> En Progreso</p>
                                    <div class="progress mb-2">
                                        <div class="progress-bar" role="progressbar" style="width: 40%;"
                                            aria-valuenow="40" aria-valuemin="0" aria-valuemax="100">40%</div>
                                    </div>
                                    <p class="budget-partial"><strong>Presupuesto:</strong> Abonado $1,945 de $3,045</p>
                                </div>
                            </div>
                        </div>


                    </div>

                    <br><br><br>

                    <h2 style="padding-bottom: 25px;">Proyectos en Cola</h2>
                    <div id="proyectosList" class="row row-cols-1 row-cols-md-3 g-4">
                        <div class="col">
                            <div class="card" style="border-width: 0cap;">
                                <img src="https://emprendo.com.co/wp-content/uploads/2023/06/Diseno-de-Modelos-de-Negocio.png"
                                    class="card-img-top" alt="Proyecto 2">
                                <div class="card-body">
                                    <h5 class="card-title">Proyecto 2</h5>
                                    <p class="card-text">...</p>
                                </div>
                            </div>
                        </div>
                        <div class="col">
                            <div class="card" style="border-width: 0cap;">
                                <img src="https://emprendo.com.co/wp-content/uploads/2023/06/Planificacion-Estrategica.png"
                                    class="card-img-top" alt="Proyecto 3">
                                <div class="card-body">
                                    <h5 class="card-title">Proyecto 3</h5>
                                    <p class="card-text">...</p>
                                </div>
                            </div>
                        </div>
                        <div class="col">
                            <div class="card" style="border-width: 0cap;">
                                <img src="https://emprendo.com.co/wp-content/uploads/2023/06/Estructura-de-Costos.png"
                                    class="card-img-top" alt="Proyecto 4">
                                <div class="card-body">
                                    <h5 class="card-title">Proyecto 4</h5>
                                    <p class="card-text">...</p>
                                </div>
                            </div>
                        </div>
                    </div>

                    <br><br><br>

                    <h2 id="proyectosH" style="padding-bottom: 25px; color: #666;">Historial</h2>
                    <div id="proyectosList" class="row row-cols-1 row-cols-md-3 g-4">
                        <div class="col">
                            <div class="card" style="border-width: 0cap;">
                                <img src="https://emprendo.com.co/wp-content/uploads/2023/06/Plan-Financiero-500x231.png"
                                    class="card-img-top" alt="Proyecto">
                                <div class="card-body">
                                    <h5 class="card-title">Proyecto</h5>
                                    <p class="card-text">...</p>
                                </div>
                            </div>
                        </div>
                        <div class="col">
                            <div class="card" style="border-width: 0cap;">
                                <img src="https://emprendo.com.co/wp-content/uploads/2023/06/Valuacion-Empresarial-500x231.png"
                                    class="card-img-top" alt="Proyecto">
                                <div class="card-body">
                                    <h5 class="card-title">Proyecto</h5>
                                    <p class="card-text">...</p>
                                </div>
                            </div>
                        </div>
                        <div class="col">
                            <div class="card" style="border-width: 0cap;">
                                <img src="https://emprendo.com.co/wp-content/uploads/2023/06/Marketing-de-Ventas-500x231.png"
                                    class="card-img-top" alt="Proyecto">
                                <div class="card-body">
                                    <h5 class="card-title">Proyecto</h5>
                                    <p class="card-text">...</p>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>

                <br><br><br><br><br><br>

                <div id="transacciones" class="section mt-4" style="padding: 50px;">
                    <h2 style="padding-bottom: 25px;">Transacciones</h2>
                    <div class="table-responsive">
                        <table class="table">
                            <thead>
                                <tr>
                                    <th>Fecha</th>
                                    <th>Tipo</th>
                                    <th>Descripción</th>
                                    <th>Monto</th>
                                </tr>
                            </thead>
                            <tbody>
                                <tr>
                                    <td>13-09-2024</td>
                                    <td>Ingreso de Saldo</td>
                                    <td>Descuento por Bienvenida SGI Red Point</td>
                                    <td>$305</td>
                                </tr>
                                <tr>
                                    <td>14-09-2024</td>
                                    <td>Ingreso de Saldo</td>
                                    <td>Descuento SGI Red Point</td>
                                    <td>$140</td>
                                </tr>
                                <tr>
                                    <td>23-09-2024</td>
                                    <td>Ingreso de Saldo</td>
                                    <td>SGI Red Point</td>
                                    <td>$1,500</td>
                                </tr>


                                <!-- Más filas de ejemplo aquí -->
                            </tbody>
                        </table>
                    </div>
                </div>

                <footer class="footer">
                    <p style="color: #7A7A7A;">Copyright © <a href="https://emprendo.com.co/" target="_blank"
                            class="emprendo-link">eMprendo</a>
                        2024 de
                        CyNe Producciones</p>
                </footer>
            </main>
        </div>
    </div>

    <script>
        function toggleMenu() {
            const menu = document.getElementById('mobile-menu');
            menu.classList.toggle('show'); // Alternar la clase 'show' para mostrar/ocultar el menú
        }
    </script>

    <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/js/bootstrap.bundle.min.js"></script>
    <script src='https://cdn.jsdelivr.net/npm/fullcalendar@5.10.2/main.js'></script>
    <!-- Firebase App (Este es obligatorio) -->
    <script src="https://www.gstatic.com/firebasejs/8.6.8/firebase-app.js"></script>
    <!-- Firebase Realtime Database -->
    <script src="https://www.gstatic.com/firebasejs/8.6.8/firebase-database.js"></script>
    <script>
        // Configuración de Firebase con tus credenciales
        const firebaseConfig = {
            apiKey: "AIzaSyBkf8iOalEvZWLiFJnEd5qr2rFkxjuO_Tc",
            authDomain: "chat-emprendo.firebaseapp.com",
            databaseURL: "https://chat-emprendo-default-rtdb.firebaseio.com",
            projectId: "chat-emprendo",
            storageBucket: "chat-emprendo.appspot.com",
            messagingSenderId: "821573543670",
            appId: "1:821573543670:web:46144aa500a62f31e3aed7",
            measurementId: "G-W07Q9HJZ81"
        };

        // Inicializa Firebase
        firebase.initializeApp(firebaseConfig);
        const db = firebase.database();

        // Lógica del chat
        const chatBox = document.getElementById('chat-box');
        const chatInput = document.getElementById('chat-input');
        const usernameInput = document.getElementById('username-input'); // Obtener el campo de selección
        const sendBtn = document.getElementById('send-btn');

        // Enviar mensaje al hacer clic en "Enviar"
        sendBtn.addEventListener('click', () => {
            const message = chatInput.value;
            const username = usernameInput.value; // Obtener el nombre seleccionado
            if (message) {
                db.ref('messages').push().set({
                    message: message,
                    username: username, // Guardar el nombre del usuario
                    timestamp: Date.now()
                });
                chatInput.value = ''; // Limpiar el input después de enviar
            }
        });

        // Escuchar nuevos mensajes en tiempo real desde Firebase
        db.ref('messages').on('child_added', (snapshot) => {
            const msg = snapshot.val();
            const timestamp = new Date(msg.timestamp); // Obtener la marca de tiempo
            const options = { weekday: 'long', year: 'numeric', month: 'long', day: 'numeric', hour: 'numeric', minute: 'numeric', hour12: true };
            const formattedDate = timestamp.toLocaleString('es-ES', options); // Formatear la fecha y hora

            const newMsgElement = document.createElement('div');
            newMsgElement.style.border = '1px solid #ddd'; // Borde del globo
            newMsgElement.style.borderRadius = '15px'; // Bordes redondeados
            newMsgElement.style.padding = '10px'; // Espaciado interno
            newMsgElement.style.marginBottom = '10px'; // Espaciado entre mensajes
            newMsgElement.style.position = 'relative'; // Para posicionar la hora
            newMsgElement.style.backgroundColor = '#f8f9fa'; // Color de fondo del globo

            newMsgElement.innerHTML = `
                <strong>${msg.username}:</strong> ${msg.message}
                <div style="text-align: right; font-size: 10px; color: #7A7A7A; margin-top: 5px;">${formattedDate}</div>
            `;

            chatBox.appendChild(newMsgElement);
            chatBox.scrollTop = chatBox.scrollHeight; // Desplazar hacia abajo automáticamente
        });

        document.addEventListener('DOMContentLoaded', function () {
            var calendarEl = document.getElementById('calendar');
            var calendar = new FullCalendar.Calendar(calendarEl, {
                initialView: 'dayGridMonth',
                headerToolbar: {
                    left: 'prev,next today',
                    center: 'title',
                    right: 'dayGridMonth,timeGridWeek,listWeek'
                }
            });
            calendar.render();
        });

        // Manejo de la navegación y actualización de la clase 'active'
        document.querySelectorAll('.nav-link').forEach(link => {
            link.addEventListener('click', function () {
                document.querySelectorAll('.nav-link').forEach(el => el.classList.remove('active'));
                this.classList.add('active');
            });
        });


        function setCalendarView() {
            var iframe = document.getElementById('calendar-iframe');
            if (window.innerWidth < 768) {
                iframe.src = "https://calendar.google.com/calendar/embed?src=NDU5MDQxOGQ3NTUwN2MyMDJlMzI4NzcyOTA0MjEwMjMyZWIyNTE0MmU2M2QwODhlY2I4ZGM0ODE0OWYwODU1NEBncm91cC5jYWxlbmRhci5nb29nbGUuY29t&ctz=America%2FBogota&mode=AGENDA&showPrint=0&showTabs=0&showTitle=0&showDate=0&showNav=1&showCalendars=0&bgcolor=%23FFFFFF";

            } else {
                iframe.src = "https://calendar.google.com/calendar/embed?src=NDU5MDQxOGQ3NTUwN2MyMDJlMzI4NzcyOTA0MjEwMjMyZWIyNTE0MmU2M2QwODhlY2I4ZGM0ODE0OWYwODU1NEBncm91cC5jYWxlbmRhci5nb29nbGUuY29t&ctz=America%2FBogota&mode=MONTH&showTitle=0";

            }
        }

        window.onload = setCalendarView;
        window.onresize = setCalendarView;

    </script>

</body>

</html>
User / IP	: 216.73.216.217
Host / Server	: 45.84.207.204 / aircan.me
System	: Linux lt-bnk-web1726.main-hosting.eu 5.14.0-611.36.1.el9_7.x86_64 #1 SMP PREEMPT_DYNAMIC Tue Mar 3 11:23:52 EST 2026 x86_64