JeanBenitez
/
PlataformaEducativa


			
				
					
						
						
							123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241
							<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <!-- estilos -->
    <link rel="stylesheet" href="css/style-main.css">
    <link rel="stylesheet" href="css/style-funciones.css">
    <link rel="stylesheet" href="css/animations.css">
    <link rel="stylesheet" href="css/menu-main.css">
    <link rel="stylesheet" href="css/icons-platform.css">
    <!-- jquery -->
    <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.0.0/jquery.js"></script>
    <!-- bootstrap -->
    <link rel="stylesheet" type="text/css" href="css/bootstrap.css" />
    <title>Plataforma Educativa</title>
    <!-- Para FTP -->
    <script async src="https://www.googletagmanager.com/gtag/js?id=UA-46001212-3"></script>
    <!-- Vue devlopmnet -->
    <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
    <!-- Vue production -->
    <!-- <script src="https://cdn.jsdelivr.net/npm/vue"></script> -->
    <script>
        window.dataLayer = window.dataLayer || [];

        function gtag() {
            dataLayer.push(arguments);
        }
        gtag('js', new Date());
        gtag('config', 'UA-46001212-3');
    </script>
</head>

<body>
    
    <!-- Header -->
    <?php include('header.html'); ?>
    <!-- Fin Header -->

    <section id="app" class="bg-dinamic" :style="{ background: gradientString }">
        <div class="container section-funcion">
            <div class="row">
                <div class="col-md-8 text-center mb-5 ">
                    <div v-show="funcionStreaming ">
                        <img class="pt-2 img-fluid " src="img/funciones/streaming.png " alt=" ">
                        <div class="bg-white shadow pl-5 pr-5 pt-2 pb-2 card-rounded ">
                            <h1 class="funciones-title pt-3 ">Clase en Línea</h1>
                            <br>
                            <p class="funciones-description ">Programa las sesiones e imparte videoconferecias con hasta 100 alumnos. Graba las sesiones, comparte tu pantalla, escribe en la pizarra, interactúa en video con los participantes o utiliza el chat en vivo de las reuniones.
                                Nuestra solución todo en uno te permite realizar múltiples sesiones simultáneas, evita que contrates otros servicios de streaming y lo mejor de todo, tu informaciónes completamente privada.</p>
                        </div>
                    </div>
                    <div v-show="funcionCalendario ">
                        <img class="img-fluid pt-2 " src="img/funciones/CalendarioActividades.png " alt=" ">
                        <div class="bg-white shadow pl-5 pr-5 pt-2 pb-2 card-rounded ">
                            <h1 class="funciones-title pt-3 ">Calendario de Actividades</h1>
                            <br>
                            <p class="funciones-description ">Planifica las actividades del Colegio a lo largo del ciclo escolar de forma unificada.</p>
                        </div>
                    </div>
                    <div v-show="funcionTareas ">
                        <img class="img-fluid pt-2 " src="img/funciones/AdministracionTareas.png " alt=" ">
                        <div class="bg-white shadow pl-5 pr-5 pt-2 pb-2 card-rounded ">
                            <h1 class="funciones-title pt-3 ">Administración de Tareas</h1>
                            <br>
                            <p class="funciones-description ">Los profesores pueden asignar tares que son consultadas por alumnos y padres de familia. A través del sistema, el alumno mantiene un control de las tareas que ha completado y de aquellas que tiene por realizar. La programación
                                de tareas permite incluir adjuntos de gran tamaño y vínculos directos a los contenidos, para el caso de los vídeos.</p>
                        </div>
                    </div>
                    <div v-show="funcionCirculares ">
                        <img class="img-fluid pt-2 " src="img/funciones/CircularesDigitales.png " alt=" ">
                        <div class="bg-white shadow pl-5 pr-5 pt-2 pb-2 card-rounded ">
                            <h1 class="funciones-title pt-3 ">Circulares Digitales</h1>
                            <br>
                            <p class="funciones-description ">Optimiza la comunicación entre alumnos, profesores y padres de familia, enviando circulares electrónicas de actividades y eventos. Es posible crear grupos para actividades deportivas, artísticas o proyectos de cualquier índole
                                para mantener comunicación privada con sus integrantes. </p>
                        </div>
                    </div>
                    <div v-show="funcionMensajes ">
                        <img class="img-fluid pt-2 " src="img/funciones/CentroMensajes.png " alt=" ">
                        <div class="bg-white shadow pl-5 pr-5 pt-2 pb-2 card-rounded ">
                            <h1 class="funciones-title pt-3 ">Centro de Mensajes</h1>
                            <br>
                            <p class="funciones-description ">Permite la comunicación directa entre alumnos, profesores, padres de familia y directivos sin necesidad de un correo electrónico. Esta función permite a los alumnos el intercambio de información por equipos sin necesidad de
                                reuniones presenciales en casa.</p>
                        </div>
                    </div>
                    <div v-show="funcionMateria ">
                        <img class="img-fluid pt-2 " src="img/funciones/CentroRecursosMateria.png " alt=" ">
                        <div class="bg-white shadow pl-5 pr-5 pt-2 pb-2 card-rounded ">
                            <h1 class="funciones-title pt-3 ">Centro de Recursos por Materia</h1>
                            <br>
                            <p class="funciones-description ">Los alumnos pueden acceder al contenido de cada materia y descargar los contenidos que sus profesores compartan con ellos para su aprendizaje educativo. El sistema está diseñado para archivos adjunto de gran tamaño y el almacenamiento
                                es ilimitado.</p>
                        </div>
                    </div>
                    <div v-show="funcionBitacora ">
                        <img class="img-fluid pt-2 " src="img/funciones/BitácoraAlumno.png " alt=" ">
                        <div class="bg-white shadow pl-5 pr-5 pt-2 pb-2 card-rounded ">
                            <h1 class="funciones-title pt-3 ">Bitácora del Alumno</h1>
                            <br>
                            <p class="funciones-description ">Permite la retroalimentación diaria sobre el desempeño y comportamiento del alumno por materia.</p>
                        </div>
                    </div>
                    <div v-show="funcionNoticias ">
                        <img class="img-fluid pt-2 " src="img/funciones/NoticiasAvisos.png " alt=" ">
                        <div class="bg-white shadow pl-5 pr-5 pt-2 pb-2 card-rounded ">
                            <h1 class="funciones-title pt-3 ">Noticias y Avisos</h1>
                            <br>
                            <p class="funciones-description ">Informa a tu comunidad estudiantil en todo momento sobre lo más destacado del Colegio.</p>
                        </div>
                    </div>
                    <div v-show="funcionCumple ">
                        <img class="img-fluid pt-2 " src="img/funciones/Cumpleaños.png " alt=" ">
                        <div class="bg-white shadow pl-5 pr-5 pt-2 pb-2 card-rounded">
                            <h1 class="funciones-title pt-3 ">Cumpleaños</h1>
                            <br>
                            <p class="funciones-description ">Felicita a tus colaboradores y alumnos en su gran día, gracias a nuestro calendario escolar podras felicitar a todos los usuarios de la plataforma. Involucra a tu comunidad virtual mandando felicitaciones y colaborando en el
                                contenido multimedia de este apartado</p>
                            </p>
                        </div>
                    </div>
                    <div v-show="funcionAsistencia ">
                        <img class="img-fluid pt-2 " src="img/funciones/ListaAsistencia.png " alt=" ">
                        <div class="bg-white shadow pl-5 pr-5 pt-2 pb-2 card-rounded ">
                            <h1 class="funciones-title pt-3 ">Lista de Asistencia</h1>
                            <br>
                            <p class="funciones-description ">El pase de lista para profesores nunca ha sido tan práctico. Registra la asistencia de los alumnos y lleva el control. </p>
                        </div>
                    </div>
                </div>
                <div class="col-md-1 "></div>
                <div class="col-md-3 text-center ">
                    <p class="funciones-description text-center title-movil">Funciones</p>
                    <button @mousemove=" cambiarContenido(); nombreCambiar='Streaming' " @click=" cambiarContenido(); nombreCambiar='Streaming' " type="button " class="shadow btn bg-white btn-block text-buttons btnhover ">Clases en Línea</button>
                    <button @mousemove="cambiarContenido(); nombreCambiar='Calendario' " @click=" cambiarContenido(); nombreCambiar='Streaming' " type="button " class="shadow btn bg-white btn-block text-buttons btnhover ">Calendario de Actividades</button>
                    <button @mousemove="cambiarContenido(); nombreCambiar='AdministracionTareas' " @click=" cambiarContenido(); nombreCambiar='Streaming' " type="button " class="shadow btn bg-white btn-block text-buttons btnhover ">Administración de Tareas</button>
                    <button @mousemove="cambiarContenido(); nombreCambiar='Circulares' " @click=" cambiarContenido(); nombreCambiar='Streaming' " type="button " class="shadow btn bg-white btn-block text-buttons btnhover ">Circulares Digitales</button>
                    <button @mousemove="cambiarContenido(); nombreCambiar='Mensajes' " @click=" cambiarContenido(); nombreCambiar='Streaming' " type="button " class="shadow btn bg-white btn-block text-buttons btnhover ">Centro de Mensajes</button>
                    <button @mousemove="cambiarContenido(); nombreCambiar='Materia' " @click=" cambiarContenido(); nombreCambiar='Streaming' " type="button " class="shadow btn bg-white btn-block text-buttons btnhover ">Centro de Recursos por Materia</button>
                    <button @mousemove="cambiarContenido(); nombreCambiar='Bitacora' " @click=" cambiarContenido(); nombreCambiar='Streaming' " type="button " class="shadow btn bg-white btn-block text-buttons btnhover ">Bitácora del Alumno</button>
                    <button @mousemove="cambiarContenido(); nombreCambiar='Noticias' " @click=" cambiarContenido(); nombreCambiar='Streaming' " type="button " class="shadow btn bg-white btn-block text-buttons btnhover ">Noticias y Avisos</button>
                    <button @mousemove="cambiarContenido(); nombreCambiar='Asistencia' " @click=" cambiarContenido(); nombreCambiar='Streaming' " type="button " class="shadow btn bg-white btn-block text-buttons btnhover ">Lista de Asistencia</button>
                    <button @mousemove="cambiarContenido(); nombreCambiar='Cumpleaños' " @click=" cambiarContenido(); nombreCambiar='Streaming' " type="button " class="shadow btn bg-white btn-block text-buttons btnhover ">Cumpleaños</button>
                </div>
            </div>
        </div>
    </section>

    <!-- Footer -->
    <?php include('footer.html'); ?>
    <!-- Fin Footer -->

</body>
<script>
    var app = new Vue({
        el: '#app',
        data: {
            funcionCalendario: false,
            funcionTareas: false,
            funcionCirculares: false,
            funcionMensajes: false,
            funcionMateria: false,
            funcionBitacora: false,
            funcionNoticias: false,
            funcionAsistencia: false,
            funcionCumple: false,
            funcionStreaming: true,
            nombreCambiar: 'Streaming',
            bg1: 'linear-gradient(90deg, rgba(110,203,232,1) 0%, rgba(71,162,191,1) 8%, rgba(55,123,210,1) 20%, rgba(28,139,205,1) 48%, rgba(0,165,217,1) 77%, rgba(0,136,187,1) 100%)',
            bg2: 'linear-gradient(90deg, rgba(235,217,111,1) 0%, rgba(245,223,50,1) 23%, rgba(245,197,19,1) 48%, rgba(246,235,41,1) 70%, rgba(244,228,45,1) 77%, rgba(245,233,50,1) 94%)',
            bg3: 'linear-gradient(90deg, rgba(174,180,245,1) 0%, rgba(161,168,244,1) 23%, rgba(155,163,246,1) 48%, rgba(117,125,204,1) 70%, rgba(113,121,215,1) 77%, rgba(122,130,212,1) 94%)',
            bg4: 'linear-gradient(90deg, rgba(223,61,47,1) 0%, rgba(223,53,39,1) 50%, rgba(213,44,30,1) 100%)',
            bg5: 'linear-gradient(90deg, rgba(91,171,254,1) 0%, rgba(142,192,245,1) 50%, rgba(170,212,255,1) 100%)',
            gradientString: '',
        },
        mounted() {
            this.gradientString = this.bg5;
        },
        methods: {
            cambiarContenido: function() {
                if (this.funcionStreaming) {
                    this.funcionStreaming = false;
                } else if (this.funcionCalendario) {
                    this.funcionCalendario = false;
                } else if (this.funcionTareas) {
                    this.funcionTareas = false;
                } else if (this.funcionCirculares) {
                    this.funcionCirculares = false;
                } else if (this.funcionMensajes) {
                    this.funcionMensajes = false;
                } else if (this.funcionMateria) {
                    this.funcionMateria = false;
                } else if (this.funcionBitacora) {
                    this.funcionBitacora = false;
                } else if (this.funcionNoticias) {
                    this.funcionNoticias = false;
                } else if (this.funcionAsistencia) {
                    this.funcionAsistencia = false;
                } else if (this.funcionCumple) {
                    this.funcionCumple = false;
                }

                if (this.nombreCambiar == 'Streaming') {
                    this.funcionStreaming = true;
                    this.gradientString = this.bg5;
                } else if (this.nombreCambiar == 'Calendario') {
                    this.funcionCalendario = true;
                    this.gradientString = this.bg3;
                } else if (this.nombreCambiar == 'AdministracionTareas') {
                    this.funcionTareas = true;
                    this.gradientString = this.bg4;
                } else if (this.nombreCambiar == 'Circulares') {
                    this.funcionCirculares = true;
                    this.gradientString = this.bg1;
                } else if (this.nombreCambiar == 'Mensajes') {
                    this.funcionMensajes = true;
                    this.gradientString = this.bg5;
                } else if (this.nombreCambiar == 'Materia') {
                    this.funcionMateria = true;
                    this.gradientString = this.bg2;
                } else if (this.nombreCambiar == 'Bitacora') {
                    this.funcionBitacora = true;
                    this.gradientString = this.bg3;
                } else if (this.nombreCambiar == 'Noticias') {
                    this.funcionNoticias = true;
                    this.gradientString = this.bg2;
                } else if (this.nombreCambiar == 'Asistencia') {
                    this.funcionAsistencia = true;
                    this.gradientString = this.bg3;
                } else if (this.nombreCambiar == 'Cumpleaños') {
                    this.funcionCumple = true;
                    this.gradientString = this.bg3;
                }
            }
        }
    });
</script>

</html>