Sincronizacion similar a SIGMAC. creando apis

src/public/css/app_tv.css

@@ -0,0 +1,255 @@
+* {
+    margin: 0;
+    padding: 0;
+    box-sizing: border-box;
+  }
+
+@font-face {
+    font-family: sigma_tipografia;
+    src: url(../tipografias/sigma_font.ttf) format('truetype'), url(../tipografias/sigma_font.otf) format('truetype');
+    font-style: normal;
+}
+
+  body {
+    font-family: "ROBOTO", sans-serif,sigma_tipografia;
+  }
+  
+  .nav,
+  .slider {
+    display: flex;
+    flex-direction: column;
+    justify-content: center;
+    align-items: center;
+    height: 100vh;
+    position: relative;
+    background-color: #1e1f26;
+    text-align: center;
+    padding: 0 2em;
+  }
+  
+  .nav h1,
+  .slider h1 {
+    font-family: "Josefin Sans", sans-serif;
+    font-size: 5vw;
+    margin: 0;
+    padding-bottom: 0.5rem;
+    letter-spacing: 0.5rem;
+    color: #03dac6;
+    transition: all 0.3s ease;
+    z-index: 3;
+  }
+  h1:hover {
+    transform: translate3d(0, -10px, 22px);
+    color: #ff0266;
+  }
+  
+  .slider h2 {
+    font-size: 2vw;
+    letter-spacing: 0.3rem;
+    font-family: "ROBOTO", sans-serif;
+    font-weight: 300;
+    color: #faebd7;
+    z-index: 4;
+  }
+  h3.span {
+    font-size: 2vw;
+    letter-spacing: 0.7em;
+    font-family: "ROBOTO", sans-serif;
+    font-weight: 300;
+    color: #faebd7;
+    z-index: 4;
+  }
+  span:hover {
+    color: #ff0266;
+    font-weight: 500;
+    font-size: 2.2vw;
+  }
+  
+  a {
+    text-decoration: none;
+  }
+  
+  .nav-container {
+    display: flex;
+    flex-direction: row;
+    position: absolute;
+    bottom: 0;
+    width: 100%;
+    height: 75px;
+    box-shadow: 20px 20px 50px rgba(0, 0, 0, 0.5);
+    background: #1e1f26;
+    z-index: 10;
+    transition: all 0.3s cubic-bezier(0.19, 1, 0.22, 1);
+  }
+  
+  .nav-container--top-first {
+    position: fixed;
+    top: 75px;
+    transition: all 0.3s cubic-bezier(0.19, 1, 0.22, 1);
+  }
+  
+  .nav-container--top-second {
+    position: fixed;
+    top: 0;
+  }
+  .nav-tab {
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    flex: 1;
+    color: #03dac6;
+    letter-spacing: 0.1rem;
+    transition: all 0.5s ease;
+    font-size: 2vw;
+  }
+  
+  .nav-tab:hover {
+    color: #1e1f26;
+    background: #03dac6;
+    transition: all 0.5s ease;
+  }
+  
+  .nav-tab-slider {
+    position: absolute;
+    bottom: 0;
+    width: 0;
+    height: 2px;
+    background: #03dac6;
+    transition: left 0.3s ease;
+  }
+  .background {
+    position: absolute;
+    height: 90vh;
+    top: 0;
+    bottom: 0;
+    left: 0;
+    right: 0;
+    z-index: auto;
+  }
+  @media (min-width: 800px) {
+    .nav h1,
+    .slider h1 {
+      font-size: 5vw;
+    }
+  
+    .nav h2,
+    .slider h2 {
+      font-size: 3vw;
+    }
+  
+    .nav-tab {
+      font-size: 3vw;
+    }
+  }
+  
+  @media screen only (min-width: 360px) {
+    .nav h1,
+    .slider h1 {
+      font-size: 8vw;
+    }
+  
+    .nav h2,
+    .slider h2 {
+      font-size: 2vw;
+      letter-spacing: 0.2vw;
+    }
+  
+    .nav-tab {
+      font-size: 1.2vw;
+    }
+  }
+  .background {
+    position: absolute;
+    height: 100vh;
+    top: 0;
+    bottom: 0;
+    left: 0;
+    right: 0;
+    z-index: 0;
+  }
+  .loader span {
+    color: #faebd7;
+    text-shadow: 0 0 0 #faebd7;
+    -webkit-animation: loading 1s ease-in-out infinite alternate;
+  }
+  
+  @-webkit-keyframes loading {
+    to {
+      text-shadow: 20px 0 70px #ff0266;
+      color: #ff0266;
+    }
+  }
+  .loader span:nth-child(2) {
+    -webkit-animation-delay: 0.1s;
+  }
+  .loader span:nth-child(3) {
+    -webkit-animation-delay: 0.2s;
+  }
+  .loader span:nth-child(4) {
+    -webkit-animation-delay: 0.3s;
+  }
+  .loader span:nth-child(5) {
+    -webkit-animation-delay: 0.4s;
+  }
+  .loader span:nth-child(6) {
+    -webkit-animation-delay: 0.5s;
+  }
+  .loader span:nth-child(7) {
+    -webkit-animation-delay: 0.6s;
+  }
+  .loader span:nth-child(8) {
+    -webkit-animation-delay: 0.7s;
+  }
+  .loader span:nth-child(9) {
+    -webkit-animation-delay: 0.8s;
+  }
+  
+  .loader span:nth-child(10) {
+    -webkit-animation-delay: 0.9s;
+  }
+  .loader span:nth-child(11) {
+    -webkit-animation-delay: 1s;
+  }
+  .loader span:nth-child(12) {
+    -webkit-animation-delay: 1.1s;
+  }
+  .loader span:nth-child(13) {
+    -webkit-animation-delay: 1.2s;
+  }
+  .loader span:nth-child(14) {
+    -webkit-animation-delay: 1.3s;
+  }
+  .loader span:nth-child(15) {
+    -webkit-animation-delay: 1.4s;
+  }
+  .loader span:nth-child(16) {
+    -webkit-animation-delay: 1.5s;
+  }
+  .loader span:nth-child(17) {
+    -webkit-animation-delay: 1.6s;
+  }
+  .loader span:nth-child(18) {
+    -webkit-animation-delay: 1.7s;
+  }
+  .loader span:nth-child(19) {
+    -webkit-animation-delay: 1.8s;
+  }
+  .loader span:nth-child(20) {
+    -webkit-animation-delay: 1.9s;
+  }
+  .loader span:nth-child(21) {
+    -webkit-animation-delay: 2s;
+  }
+  .loader span:nth-child(22) {
+    -webkit-animation-delay: 2.1s;
+  }
+  
+  .logo_txt{
+    font-family: 'Poppins', sans-serif,sigma_tipografia;
+  }
+  .logo_img{
+    background: url(../img/favicon_sigma/android-chrome-192x192.png);
+    background-repeat: repeat;
+    width: 100px;
+    height: 100px;
+  }

src/public/css/cloud.css

@@ -23,7 +23,84 @@ body{
   width: 600;
   height:400;
 }
-#ctrl_audio{
+#ctr.l_audio{
   margin-top: -60px;
 }
 
+/*  MENU USUARIO DESPLEGABLE  */
+.dropdown-menu {
+  position: absolute;
+  left: 5%;
+  left: auto;
+  border: 1px solid #ddd;
+  background: #fff;
+  padding: 0px;
+}
+.dropdown-menu ul{
+  list-style-type: none;
+  color: aliceblue;
+  padding: 0px;
+}
+.dropdown-menu ul li{
+  list-style-type: none;
+  color: aliceblue;
+}
+.dropdown-menu ul li img{
+  z-index: 5;
+  height: 90px;
+  width: 90px;
+  border: 3px solid;
+  border-color: transparent;
+  border-color: rgba(255,255,255,0.2);
+}
+.img-circle {
+  border-radius: 50%;
+}
+.dropdown-menu ul li.user-header {
+  height: 175px;
+  padding: 10px;
+  text-align: center;
+}
+.user-header{
+  background-color: #255977;
+  color: white
+}
+
+.user-body {
+  padding: 15px;
+  border-bottom: 1px solid #f4f4f4;
+  border-top: 1px solid #dddddd;
+  background-color: #255977;
+}
+.user-footer {
+  display: flex;
+  background-color: #8d8d8d;
+  padding: 10px;
+}
+.pull-left{
+  box-sizing: border-box;
+  width: 50%;
+}
+.pull-right{
+  box-sizing: border-box;
+  width: 50%;
+}
+#id_usuario{
+  
+}
+/*#TEST_COLORS{
+  #98BFDA
+#FEDE58
+#98D8A5
+#FE9898
+#FE98FE
+#FFFFFF
+
+#FFEEEC
+#FEFDED
+#EAFFE5
+#ECFDFF
+#F0F1FE
+#FFEBFA
+
+}*/

src/public/js/app_tv.js

@@ -0,0 +1,142 @@
+/* Credit and Thanks:
+Matrix - Particles.js;
+SliderJS - Ettrics;
+Design - Sara Mazal Web;
+Fonts - Google Fonts
+*/
+
+window.onload = function () {
+    Particles.init({
+      selector: ".background"
+    });
+  };
+  const particles = Particles.init({
+    selector: ".background",
+    color: ["#03dac6", "#ff0266", "#000000"],
+    connectParticles: true,
+    responsive: [
+      {
+        breakpoint: 768,
+        options: {
+          color: ["#faebd7", "#03dac6", "#ff0266"],
+          maxParticles: 43,
+          connectParticles: false
+        }
+      }
+    ]
+  });
+  
+  class NavigationPage {
+    constructor() {
+      this.currentId = null;
+      this.currentTab = null;
+      this.tabContainerHeight = 70;
+      this.lastScroll = 0;
+      let self = this;
+      $(".nav-tab").click(function () {
+        self.onTabClick(event, $(this));
+      });
+      $(window).scroll(() => {
+        this.onScroll();
+      });
+      $(window).resize(() => {
+        this.onResize();
+      });
+    }
+  
+    onTabClick(event, element) {
+      event.preventDefault();
+      let scrollTop =
+        $(element.attr("href")).offset().top - this.tabContainerHeight + 1;
+      $("html, body").animate({ scrollTop: scrollTop }, 600);
+    }
+  
+    onScroll() {
+      this.checkHeaderPosition();
+      this.findCurrentTabSelector();
+      this.lastScroll = $(window).scrollTop();
+    }
+  
+    onResize() {
+      if (this.currentId) {
+        this.setSliderCss();
+      }
+    }
+  
+    checkHeaderPosition() {
+      const headerHeight = 75;
+      if ($(window).scrollTop() > headerHeight) {
+        $(".nav-container").addClass("nav-container--scrolled");
+      } else {
+        $(".nav-container").removeClass("nav-container--scrolled");
+      }
+      let offset =
+        $(".nav").offset().top +
+        $(".nav").height() -
+        this.tabContainerHeight -
+        headerHeight;
+      if (
+        $(window).scrollTop() > this.lastScroll &&
+        $(window).scrollTop() > offset
+      ) {
+        $(".nav-container").addClass("nav-container--move-up");
+        $(".nav-container").removeClass("nav-container--top-first");
+        $(".nav-container").addClass("nav-container--top-second");
+      } else if (
+        $(window).scrollTop() < this.lastScroll &&
+        $(window).scrollTop() > offset
+      ) {
+        $(".nav-container").removeClass("nav-container--move-up");
+        $(".nav-container").removeClass("nav-container--top-second");
+        $(".nav-container-container").addClass("nav-container--top-first");
+      } else {
+        $(".nav-container").removeClass("nav-container--move-up");
+        $(".nav-container").removeClass("nav-container--top-first");
+        $(".nav-container").removeClass("nav-container--top-second");
+      }
+    }
+  
+    findCurrentTabSelector(element) {
+      let newCurrentId;
+      let newCurrentTab;
+      let self = this;
+      $(".nav-tab").each(function () {
+        let id = $(this).attr("href");
+        let offsetTop = $(id).offset().top - self.tabContainerHeight;
+        let offsetBottom =
+          $(id).offset().top + $(id).height() - self.tabContainerHeight;
+        if (
+          $(window).scrollTop() > offsetTop &&
+          $(window).scrollTop() < offsetBottom
+        ) {
+          newCurrentId = id;
+          newCurrentTab = $(this);
+        }
+      });
+      if (this.currentId != newCurrentId || this.currentId === null) {
+        this.currentId = newCurrentId;
+        this.currentTab = newCurrentTab;
+        this.setSliderCss();
+      }
+    }
+  
+    setSliderCss() {
+      let width = 0;
+      let left = 0;
+      if (this.currentTab) {
+        width = this.currentTab.css("width");
+        left = this.currentTab.offset().left;
+      }
+      $(".nav-tab-slider").css("width", width);
+      $(".nav-tab-slider").css("left", left);
+    }
+  }
+  
+  new NavigationPage();
+  /* Credit and Thanks:
+  Matrix - Particles.js;
+  SliderJS - Ettrics;
+  Design - Sara Mazal Web;
+  Fonts - Google Fonts
+  */
+  

src/public/tareas/tareas.html

@@ -0,0 +1,66 @@
+<!DOCTYPE html>
+<html lang="es">
+<head>
+  <meta charset="UTF-8">
+  <meta name="viewport" content="width=device-width, initial-scale=1.0">
+  <title>Tareas</title>
+  <style>
+    /* Estilos CSS para la barra de navegación */
+    nav {
+      background-color: #333;
+      overflow: hidden;
+    }
+    nav a {
+      float: left;
+      color: white;
+      text-align: center;
+      padding: 14px 16px;
+      text-decoration: none;
+      font-size: 17px;
+    }
+    nav a:hover {
+      background-color: #ddd;
+      color: black;
+    }
+    /* Estilos CSS para el formulario */
+    form {
+      margin-top: 20px;
+    }
+    label {
+      display: block;
+      margin-bottom: 5px;
+    }
+    input[type="text"], input[type="date"] {
+      padding: 5px;
+      margin-bottom: 10px;
+      width: 100%;
+      box-sizing: border-box;
+    }
+    input[type="submit"] {
+      background-color: #4CAF50;
+      color: white;
+      padding: 10px 20px;
+      border: none;
+      border-radius: 4px;
+      cursor: pointer;
+    }
+    input[type="submit"]:hover {
+      background-color: #45a049;
+    }
+  </style>
+</head>
+<body>
+  <nav>
+    <a href="#">Inicio</a>
+    <a href="#">Tareas</a>
+    <a href="#">Acerca de</a>
+  </nav>
+  <form>
+    <label for="tarea">Tarea:</label>
+    <input type="text" id="tarea" name="tarea"><br>
+    <label for="fecha">Fecha de vencimiento:</label>
+    <input type="date" id="fecha" name="fecha"><br>
+    <input type="submit" value="Agregar tarea">
+  </form>
+</body>
+</html>

src/public/testing/audio.html

@@ -0,0 +1,55 @@
+<!-- FILEPATH: /home/pablinux/Projects/Node/APP-SIGMA-WEB/src/public/testing/audio.html -->
+
+<!-- Add this script tag to load the YouTube Iframe API -->
+<script src="https://www.youtube.com/iframe_api"></script>
+
+<!-- Add a div element where you want to display the player -->
+<div id="player"></div>
+
+<script>
+    // Create a new player object
+    let player;
+    function onYouTubeIframeAPIReady() {
+        player = new YT.Player('player', {
+            height: '0',
+            width: '0',
+            videoId: 'VIDEO_ID',
+            playerVars: {
+                autoplay: 1,
+                controls: 0,
+                disablekb: 1,
+                enablejsapi: 1,
+                iv_load_policy: 3,
+                modestbranding: 1,
+                playsinline: 1,
+                rel: 0,
+                showinfo: 0
+            },
+            events: {
+                'onReady': onPlayerReady,
+                'onStateChange': onPlayerStateChange,
+                'onError': onPlayerError
+            }
+        });
+    }
+
+    // Handle player state changes
+    function onPlayerStateChange(event) {
+        if (event.data === YT.PlayerState.ENDED) {
+            // Handle end of video
+        }
+    }
+
+    // Handle player errors
+    function onPlayerError(event) {
+        // Handle player errors
+    }
+
+    // Handle player ready
+    function onPlayerReady(event) {
+        // Handle player ready
+    }
+
+    // Call the onYouTubeIframeAPIReady function when the API is loaded
+    window.onYouTubeIframeAPIReady = onYouTubeIframeAPIReady;
+</script>