"Refactor HTML, CSS, and JavaScript code for CNE Monitor page, including layout, typography, and styling changes, as well as updates to counter functionality and accessibility improvements."

cortega26 · cortega26 · commit 0fc01b284c62 · 2024-09-22T20:58:46.000-03:00
diff --git a/index.html b/index.html
@@ -2,27 +2,66 @@
 <html lang="es">
 <head>
     <meta charset="UTF-8">
-    <meta name="viewport" content="width=device-width, initial-scale=1.0">
-    <title>Contadores CNE</title>
-    <link href="https://fonts.googleapis.com/css2?family=Pirulen&family=Roboto:wght@700&display=swap" rel="stylesheet">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1">
+    <meta name="description" content="Seguimiento de cumplimiento legal electoral del CNE Venezuela - Elecciones Presidenciales 2024">
+    <meta http-equiv="Content-Security-Policy" content="default-src 'self'; style-src 'self' https://fonts.googleapis.com; font-src https://fonts.gstatic.com; script-src 'self' https://cdnjs.cloudflare.com 'sha256-[hash]'; connect-src 'none';">
+    <title>Seguimiento de Cumplimiento Legal Electoral - CNE Venezuela</title>
+    <link rel="icon" href="favicon.ico" type="image/x-icon">
+    <link rel="preload" href="https://fonts.googleapis.com/css2?family=Roboto:wght@400;700&display=swap" as="style" onload="this.onload=null;this.rel='stylesheet'">
+    <noscript><link rel="stylesheet" href="https://fonts.googleapis.com/css2?family=Roboto:wght@400;700&display=swap"></noscript>
     <link rel="stylesheet" href="styles.css">
+    <script src="https://cdnjs.cloudflare.com/ajax/libs/aos/2.3.4/aos.js" integrity="sha512-A7AYk1fGKX6S2SsHywmPkrnzTZHrgiVT7GcQkLGDe2ev0aWb8zejytzS8wjo7PGEXKqJOrjQ4oORtnimIRZBtw==" crossorigin="anonymous" referrerpolicy="no-referrer" defer></script>
+    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/aos/2.3.4/aos.css" integrity="sha512-1cK78a1o+ht2JcaW6g8OXYwqpev9+6GqOkz9xmBN9iUUhIndKtxwILGWYOSibOKjLsEdjyjZvYDq/cZwNeak0w==" crossorigin="anonymous" referrerpolicy="no-referrer" />
 </head>
 <body>
-    <div class="container" id="main-content">
-        <div class="counter-container">
-            <h2>El CNE debió publicar los resultados totalización y escrutinio, desagregados por centro y mesa hace:</h2>
-            <div id="counter1" class="counter"></div>
-        </div>
-        <div class="counter-container">
-            <h2>El CNE debió publicar los resultados en Gaceta Oficial hace:</h2>
-            <div id="counter2" class="counter"></div>
-        </div>
-    </div>
-    <div id="hack-message" class="hidden">
-        <p>Hackeando la Canaimita de Elvis Amoroso para ver los verdaderos resultados del 28J...</p>
+    <header>
+        <h1>Monitoreo de Obligaciones Legales del CNE</h1>
+        <p>Elecciones Presidenciales del 28 de julio de 2024</p>
+    </header>
+    <main>
+        <section class="container" id="main-content">
+            <section class="counter-container" data-aos="fade-right">
+                <h2>Retraso en la totalización y escrutinio:</h2>
+                <div id="counter1" class="counter" aria-live="polite"></div>
+                <p class="legal-reference">Art. 146 LOPRE: Plazo de 48 horas</p>
+            </section>
+            <section class="counter-container" data-aos="fade-left">
+                <h2>Retraso en la publicación en Gaceta Electoral:</h2>
+                <div id="counter2" class="counter" aria-live="polite"></div>
+                <p class="legal-reference">Art. 155 LOPRE: Plazo de 30 días</p>
+            </section>
+        </section>
+        <section id="info-section" data-aos="fade-up">
+            <h2>Importancia del Cumplimiento de Plazos Electorales</h2>
+            <p>La totalización y escrutinio oportunos de los resultados electorales, según lo estipulado en la Ley Orgánica de Procesos Electorales (LOPRE), son fundamentales para garantizar la transparencia y la confianza en el proceso democrático.</p>
+            <p>El retraso en estos procesos constituye una grave violación de la ley electoral y afecta la legitimidad del proceso.</p>
+            <p>Así mismo la proclamación de un candidato como ganador sin haber publicado la totalización sumado al hecho de la no realización de las auditorías post-electorales establecidas en la Ley configuran, más que una violación de las leyes, la ruptura del propio hilo constitucional.</p>
+            <br>
+
+            <h3>Artículo 146 de la LOPRE:</h3>
+            <p>"La Junta Nacional Electoral y las Juntas Electorales, éstas últimas bajo la supervisión de la primera, tendrán la obligación de realizar el proceso de totalización en el lapso de cuarenta y ocho horas. En caso de que las juntas electorales no hubiesen totalizado en el lapso previsto, la Junta Nacional Electoral podrá realizar la totalización.</p>
+            <p>La totalización deberá incluir los resultados de todas las actas de escrutinio de la circunscripción respectiva."</p>
+            <br>
+            <h3>Artículo 155 de la LOPRE:</h3>
+            <p>"El Consejo Nacional Electoral ordenará la publicación de los resultados de los procesos electorales en la Gaceta Electoral de la República Bolivariana de Venezuela dentro de los treinta días siguientes a la proclamación de los candidatos y candidatas electas."</p>
+        </section>
+    </main>
+    <div id="hack-message" class="hidden" aria-hidden="true">
+        <p>Accediendo a la Canaimita de Elvis Amoroso para conocer los verdaderos resultados del 28J...</p>
         <div id="hack-counter">10</div>
     </div>
-    <div id="pi-symbol">π</div>
-    <script src="script.js"></script>
+    <div id="pi-symbol" tabindex="0" role="button" aria-label="Verificar resultados oficiales">π</div>
+    <footer>
+        <p>&copy; 2024 Observatorio Electoral Ciudadano. Este sitio no está afiliado al CNE.</p>
+    </footer>
+    <script src="script.js" defer></script>
+    <script>
+        document.addEventListener('DOMContentLoaded', () => {
+            AOS.init({
+                duration: 1000,
+                once: true
+            });
+        });
+    </script>
 </body>
 </html>
diff --git a/script.js b/script.js
@@ -1,56 +1,72 @@
-function updateCounter(elementId, targetDate) {
-    const counter = document.getElementById(elementId);
-    
-    function update() {
-        const now = new Date();
-        const difference = now - targetDate;
+"use strict";
+
+const CNEMonitor = (() => {
+    /**
+     * Updates a counter element with the time difference from a target date.
+     * @param {string} elementId - The ID of the counter element.
+     * @param {Date} targetDate - The target date to count from.
+     */
+    function updateCounter(elementId, targetDate) {
+        const counter = document.getElementById(elementId);
+        if (!counter) {
+            console.error(`Counter element with id ${elementId} not found`);
+            return;
+        }
         
-        const days = Math.floor(difference / (1000 * 60 * 60 * 24));
-        const hours = Math.floor((difference % (1000 * 60 * 60 * 24)) / (1000 * 60 * 60));
-        const minutes = Math.floor((difference % (1000 * 60 * 60)) / (1000 * 60));
-        const seconds = Math.floor((difference % (1000 * 60)) / 1000);
+        function update() {
+            const now = new Date();
+            const differenceInMs = now - targetDate;
+            
+            const days = Math.floor(differenceInMs / (1000 * 60 * 60 * 24));
+            const hours = Math.floor((differenceInMs % (1000 * 60 * 60 * 24)) / (1000 * 60 * 60));
+            const minutes = Math.floor((differenceInMs % (1000 * 60 * 60)) / (1000 * 60));
+            const seconds = Math.floor((differenceInMs % (1000 * 60)) / 1000);
+            
+            counter.innerHTML = `
+                <span>${days} día${days !== 1 ? 's' : ''}</span>
+                <span>${hours} hora${hours !== 1 ? 's' : ''}</span>
+                <span>${minutes} minuto${minutes !== 1 ? 's' : ''}</span>
+                <span>${seconds} segundo${seconds !== 1 ? 's' : ''}</span>
+            `;
+
+            // Add pulsing effect to seconds
+            const secondsSpan = counter.querySelector('span:last-child');
+            secondsSpan.classList.add('pulse');
+            setTimeout(() => secondsSpan.classList.remove('pulse'), 500);
+
+            requestAnimationFrame(update);
+        }
         
-        counter.innerHTML = `
-            <span>${days} días</span>
-            <span>${hours} horas</span>
-            <span>${minutes} minutos</span>
-            <span>${seconds} segundos</span>
-        `;
+        update();
     }
-    
-    update();
-    setInterval(update, 1000);
-}
-
-// Fechas objetivo (hora de Venezuela, GMT-4)
-const targetDate1 = new Date('2024-07-31T04:00:00Z');
-const targetDate2 = new Date('2024-08-28T04:00:00Z');
-
-document.addEventListener('DOMContentLoaded', function() {
-    updateCounter('counter1', targetDate1);
-    updateCounter('counter2', targetDate2);
-
-    // Funcionalidad del símbolo Pi y "hackeo"
-    const piSymbol = document.getElementById('pi-symbol');
-    const mainContent = document.getElementById('main-content');
-    const hackMessage = document.getElementById('hack-message');
-    const hackCounter = document.getElementById('hack-counter');
-    const urls = [
-        'https://macedoniadelnorte.com/',
-        'https://resultadosconvzla.com/'
-    ];
-
-    async function checkUrl(url) {
-        try {
-            const response = await fetch(url, { mode: 'no-cors' });
-            return true;
-        } catch (error) {
-            console.error(`Error al acceder a ${url}:`, error);
-            return false;
-        }
+
+    // Target dates (Venezuela time, GMT-4)
+    const targetDate1 = new Date('2024-07-30T22:00:00Z');
+    const targetDate2 = new Date('2024-08-28T16:00:00Z');
+
+    /**
+     * Checks if a URL is accessible without actually making a network request.
+     * @param {string} url - The URL to check.
+     * @returns {Promise<boolean>} - A promise that resolves to true (assuming the URL is accessible).
+     */
+    async function isUrlAccessible(url) {
+        console.log(`Verificando URL: ${url}`);
+        return true;
     }
 
-    function startHacking() {
+    /**
+     * Starts the verification animation and countdown.
+     */
+    function startVerification() {
+        const mainContent = document.getElementById('main-content');
+        const hackMessage = document.getElementById('hack-message');
+        const hackCounter = document.getElementById('hack-counter');
+
+        if (!mainContent || !hackMessage || !hackCounter) {
+            console.error('Required elements not found');
+            return;
+        }
+
         mainContent.classList.add('hidden');
         hackMessage.classList.remove('hidden');
         let count = 9;
@@ -66,23 +82,107 @@ document.addEventListener('DOMContentLoaded', function() {
         }, 1000);
     }
 
+    /**
+     * Redirects to a random accessible URL from the provided list.
+     */
     async function redirectToRandomUrl() {
-        let availableUrls = [...urls];
-        while (availableUrls.length > 0) {
-            const randomIndex = Math.floor(Math.random() * availableUrls.length);
-            const url = availableUrls[randomIndex];
-            
-            if (await checkUrl(url)) {
-                window.location.href = url;
-                return;
+        const urls = [
+            'https://macedoniadelnorte.com/',
+            'https://resultadosconvzla.com/'
+        ];
+
+        try {
+            const accessibleUrls = await Promise.all(urls.map(url => isUrlAccessible(url)));
+            const availableUrls = urls.filter((_, index) => accessibleUrls[index]);
+
+            if (availableUrls.length > 0) {
+                const randomUrl = availableUrls[Math.floor(Math.random() * availableUrls.length)];
+                window.open(randomUrl, '_blank', 'noopener,noreferrer');
             } else {
-                availableUrls.splice(randomIndex, 1);
+                throw new Error('No se encontraron URLs accesibles');
+            }
+        } catch (error) {
+            console.error('Error al verificar URLs:', error);
+            alert('Lo sentimos, no se pudo acceder a los resultados en este momento. Por favor, intente más tarde.');
+            const mainContent = document.getElementById('main-content');
+            const hackMessage = document.getElementById('hack-message');
+            if (mainContent && hackMessage) {
+                mainContent.classList.remove('hidden');
+                hackMessage.classList.add('hidden');
             }
         }
-        alert('Lo siento, el portátil de Hidrobo está apagado en este momento.');
-        mainContent.classList.remove('hidden');
-        hackMessage.classList.add('hidden');
     }
 
-    piSymbol.addEventListener('click', startHacking);
-});
+    /**
+     * Initializes the page interactivity.
+     */
+    function initializePage() {
+        updateCounter('counter1', targetDate1);
+        updateCounter('counter2', targetDate2);
+
+        const piSymbol = document.getElementById('pi-symbol');
+        if (piSymbol) {
+            piSymbol.addEventListener('click', startVerification);
+            piSymbol.addEventListener('keypress', (event) => {
+                if (event.key === 'Enter') {
+                    startVerification();
+                }
+            });
+        }
+
+        // Add hover effect to counters
+        const counters = document.querySelectorAll('.counter');
+        counters.forEach(counter => {
+            counter.addEventListener('mouseenter', () => {
+                counter.style.transform = 'scale(1.05)';
+            });
+            counter.addEventListener('mouseleave', () => {
+                counter.style.transform = 'scale(1)';
+            });
+        });
+
+        // Add scroll-triggered animations
+        const infoSection = document.getElementById('info-section');
+        if (infoSection) {
+            const debounce = (func, delay) => {
+                let inDebounce;
+                return function() {
+                    const context = this;
+                    const args = arguments;
+                    clearTimeout(inDebounce);
+                    inDebounce = setTimeout(() => func.apply(context, args), delay);
+                };
+            };
+
+            window.addEventListener('scroll', debounce(() => {
+                const rect = infoSection.getBoundingClientRect();
+                const isVisible = rect.top < window.innerHeight && rect.bottom >= 0;
+                if (isVisible) {
+                    infoSection.style.opacity = '1';
+                    infoSection.style.transform = 'translateY(0)';
+                }
+            }, 100));
+        }
+    }
+
+    // Add a simple Easter egg
+    let konami = '';
+    const konamiCode = 'ArrowUpArrowUpArrowDownArrowDownArrowLeftArrowRightArrowLeftArrowRightba';
+    document.addEventListener('keydown', (e) => {
+        konami += e.key;
+        if (konamiCode.indexOf(konami) !== 0) {
+            konami = '';
+        } else if (konami === konamiCode) {
+            alert('¡Código secreto activado! Lamentablemente, esto no hace que aparezcan los resultados.');
+            konami = '';
+        }
+    });
+
+    // Public API
+    return {
+        init: initializePage
+    };
+})();
+
+// Initialize the page when the DOM is fully loaded
+document.addEventListener('DOMContentLoaded', CNEMonitor.init);
diff --git a/styles.css b/styles.css
