{"id":93,"date":"2024-09-17T10:36:03","date_gmt":"2024-09-17T13:36:03","guid":{"rendered":"https:\/\/xama.unsj.edu.ar\/?page_id=93"},"modified":"2025-02-11T11:46:40","modified_gmt":"2025-02-11T14:46:40","slug":"elementor-pagina-93","status":"publish","type":"page","link":"https:\/\/xama.unsj.edu.ar\/?page_id=93","title":{"rendered":"Programacion"},"content":{"rendered":"\t\t<div data-elementor-type=\"wp-page\" data-elementor-id=\"93\" class=\"elementor elementor-93\">\n\t\t\t\t<div class=\"elementor-element elementor-element-3e650aa e-flex e-con-boxed e-con e-parent\" data-id=\"3e650aa\" data-element_type=\"container\" data-e-type=\"container\">\n\t\t\t\t\t<div class=\"e-con-inner\">\n\t\t\t\t<div class=\"elementor-element elementor-element-911d887 elementor-widget elementor-widget-html\" data-id=\"911d887\" data-element_type=\"widget\" data-e-type=\"widget\" data-widget_type=\"html.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t<style>\r\n    .tv-grid {\r\n        display: grid;\r\n        grid-template-columns: 100px repeat(7, 1fr);\r\n        border: 0.5px solid #0202022b;\r\n        border-radius: 8px;\r\n        overflow: hidden;\r\n        font-family: Arial, sans-serif;\r\n        gap: 5px;\r\n    }\r\n\r\n    .tv-grid div, .tv-grid a {\r\n        border: 1px solid #ccc;\r\n        padding: 20px;\r\n        text-align: center;\r\n        position: relative;\r\n        transition: background 0.3s ease-in-out;\r\n        display: flex;\r\n        align-items: center;\r\n        justify-content: center;\r\n    }\r\n\r\n    .tv-grid .header {\r\n        background: #0073e6;\r\n        color: white;\r\n        font-weight: bold;\r\n    }\r\n\r\n    .tv-grid .hour {\r\n        background: #444;\r\n        color: white;\r\n        font-weight: bold;\r\n    }\r\n\r\n    .program {\r\n        background: rgba(0, 123, 255, 0.1);\r\n        color: #000;\r\n        border-radius: 4px;\r\n        text-decoration: none;\r\n        display: block;\r\n        margin: 2px;\r\n    }\r\n\r\n    \/* Efecto hover *\/\r\n    .program:hover {\r\n        background: rgba(0, 123, 255, 0.3);\r\n        cursor: pointer;\r\n    }\r\n\r\n    \/* Indicador EN VIVO *\/\r\n    .live {\r\n        background: rgba(255, 0, 0, 0.1);\r\n        color: #d60000;\r\n        font-weight: bold;\r\n        position: relative;\r\n    }\r\n\r\n    .live::before {\r\n        content: \"\u25cf EN VIVO\";\r\n        color: red;\r\n        font-size: 12px;\r\n        position: absolute;\r\n        top: 5px;\r\n        left: 5px;\r\n        font-weight: bold;\r\n    }\r\n\r\n    \/* Dise\u00f1o responsivo *\/\r\n    @media (max-width: 768px) {\r\n        .tv-grid {\r\n            display: block;\r\n        }\r\n        .tv-grid div, .tv-grid a {\r\n            padding: 5px;\r\n        }\r\n    }\r\n<\/style>\r\n\r\n<div class=\"tv-grid\">\r\n    <!-- Encabezado -->\r\n    <div class=\"header\">Hora<\/div>\r\n    <div class=\"header\" data-day=\"1\">Lunes<\/div>\r\n    <div class=\"header\" data-day=\"2\">Martes<\/div>\r\n    <div class=\"header\" data-day=\"3\">Mi\u00e9rcoles<\/div>\r\n    <div class=\"header\" data-day=\"4\">Jueves<\/div>\r\n    <div class=\"header\" data-day=\"5\">Viernes<\/div>\r\n    <div class=\"header\" data-day=\"6\">S\u00e1bado<\/div>\r\n    <div class=\"header\" data-day=\"0\">Domingo<\/div>\r\n\r\n    <!-- Generar filas de horarios y programas -->\r\n    <script>\r\n        const schedule = [\r\n { time: \"08:00\", programs: [\r\n            { name: \"Noticias\"},\r\n            { name: \"Deportes\", img: \"deportes.jpg\" },\r\n            { name: \"Series\", img: \"series.jpg\" },\r\n            { name: \"Documentales\", img: \"documentales.jpg\" },\r\n            { name: \"Pel\u00edculas\", img: \"peliculas.jpg\" },\r\n            { name: \"Infantiles\", img: \"infantiles.jpg\" },\r\n            { name: \"Reality Show\", img: \"reality.jpg\" }\r\n        ]},\r\n        { time: \"08:30\", programs: [\r\n            { name: \"Cocina\", img: \"cocina.jpg\" },\r\n            { name: \"Debates\", img: \"debates.jpg\" },\r\n            { name: \"Historias\", img: \"historias.jpg\" },\r\n            { name: \"Animaci\u00f3n\", img: \"animacion.jpg\" },\r\n            { name: \"Charlas\", img: \"charlas.jpg\" },\r\n            { name: \"Conciertos\", img: \"conciertos.jpg\" },\r\n            { name: \"Viajes\", img: \"viajes.jpg\" }\r\n        ]}\r\n];\r\n\r\n        for (let hour = 8; hour <= 20; hour++) {\r\n            let hourFormatted = hour.toString().padStart(2, '0') + \":00\";\r\n            let halfHourFormatted = hour.toString().padStart(2, '0') + \":30\";\r\n            schedule.push({ time: hourFormatted, programs: Array(7).fill(\"(Disponible)\") });\r\n            schedule.push({ time: halfHourFormatted, programs: Array(7).fill(\"(Disponible)\") });\r\n        }\r\n\r\n        const grid = document.querySelector(\".tv-grid\");\r\n\r\n        schedule.forEach(entry => {\r\n        grid.innerHTML += `<div class='hour'>${entry.time}<\/div>`;\r\n        entry.programs.forEach((program, index) => {\r\n            grid.innerHTML += `\r\n                <a href='#' class='program' data-time='${entry.time}' data-day='${index}'>\r\n                    ${program.name}\r\n                <\/a>`;\r\n        });\r\n    });\r\n\r\n        function marcarEnVivo() {\r\n            const now = new Date();\r\n            const currentHour = now.getHours();\r\n            const currentMinutes = now.getMinutes();\r\n            const currentDay = now.getDay();\r\n            const formattedTime1 = `${currentHour.toString().padStart(2, '0')}:00`;\r\n            const formattedTime2 = `${currentHour.toString().padStart(2, '0')}:30`;\r\n\r\n            document.querySelectorAll('.program').forEach(program => {\r\n                program.classList.remove('live');\r\n            });\r\n\r\n            document.querySelectorAll(`.program[data-time=\"${formattedTime1}\"][data-day=\"${currentDay}\"], \r\n                                       .program[data-time=\"${formattedTime2}\"][data-day=\"${currentDay}\"]`).forEach(program => {\r\n                program.classList.add('live');\r\n            });\r\n        }\r\n\r\n        marcarEnVivo();\r\n        setInterval(marcarEnVivo, 60000);\r\n    <\/script>\r\n<\/div>\r\n\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t","protected":false},"excerpt":{"rendered":"<p>Hora Lunes Martes Mi\u00e9rcoles Jueves Viernes S\u00e1bado Domingo<\/p>\n","protected":false},"author":1,"featured_media":0,"parent":0,"menu_order":0,"comment_status":"closed","ping_status":"closed","template":"","meta":{"footnotes":""},"class_list":["post-93","page","type-page","status-publish","hentry"],"rttpg_featured_image_url":null,"rttpg_author":{"display_name":"admin","author_link":"https:\/\/xama.unsj.edu.ar\/?author=1"},"rttpg_comment":0,"rttpg_category":null,"rttpg_excerpt":"Hora Lunes Martes Mi\u00e9rcoles Jueves Viernes S\u00e1bado Domingo","_links":{"self":[{"href":"https:\/\/xama.unsj.edu.ar\/index.php?rest_route=\/wp\/v2\/pages\/93","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/xama.unsj.edu.ar\/index.php?rest_route=\/wp\/v2\/pages"}],"about":[{"href":"https:\/\/xama.unsj.edu.ar\/index.php?rest_route=\/wp\/v2\/types\/page"}],"author":[{"embeddable":true,"href":"https:\/\/xama.unsj.edu.ar\/index.php?rest_route=\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/xama.unsj.edu.ar\/index.php?rest_route=%2Fwp%2Fv2%2Fcomments&post=93"}],"version-history":[{"count":34,"href":"https:\/\/xama.unsj.edu.ar\/index.php?rest_route=\/wp\/v2\/pages\/93\/revisions"}],"predecessor-version":[{"id":777,"href":"https:\/\/xama.unsj.edu.ar\/index.php?rest_route=\/wp\/v2\/pages\/93\/revisions\/777"}],"wp:attachment":[{"href":"https:\/\/xama.unsj.edu.ar\/index.php?rest_route=%2Fwp%2Fv2%2Fmedia&parent=93"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}