.test-container { max-width: 800px; margin: 20px auto; padding: 20px; background: linear-gradient(135deg, #667eea 0%, #764ba2 100%); border-radius: 12px; box-shadow: 0 10px 30px rgba(0,0,0,0.3); font-family: ‘Segoe UI’, Tahoma, Geneva, Verdana, sans-serif; } .status-box { background: white; padding: 20px; border-radius: 8px; margin-bottom: 20px; text-align: center; } .success { color: #10b981; font-size: 24px; font-weight: bold; animation: pulse 2s infinite; } .info { color: #6366f1; font-size: 16px; margin-top: 10px; } .chart-container { background: white; padding: 20px; border-radius: 8px; margin-bottom: 20px; } .bar { height: 40px; margin: 10px 0; border-radius: 6px; display: flex; align-items: center; padding-left: 15px; color: white; font-weight: bold; transition: all 0.3s ease; cursor: pointer; position: relative; overflow: hidden; } .bar:hover { transform: translateX(10px); box-shadow: 0 5px 15px rgba(0,0,0,0.2); } .bar::before { content: ”; position: absolute; left: 0; top: 0; height: 100%; width: 0; background: rgba(255,255,255,0.2); transition: width 1s ease; } .bar.animated::before { width: 100%; } .bar1 { background: #ef4444; } .bar2 { background: #3b82f6; } .bar3 { background: #10b981; } .interactive-box { background: white; padding: 20px; border-radius: 8px; text-align: center; } .test-button { background: #8b5cf6; color: white; border: none; padding: 15px 30px; font-size: 18px; border-radius: 8px; cursor: pointer; transition: all 0.3s ease; margin: 10px; } .test-button:hover { background: #7c3aed; transform: scale(1.05); } .counter { font-size: 48px; font-weight: bold; color: #8b5cf6; margin: 20px 0; } @keyframes pulse { 0%, 100% { opacity: 1; } 50% { opacity: 0.5; } } .timestamp { color: #666; font-size: 14px; margin-top: 15px; } // Оновлення часу function updateTimestamp() { const now = new Date(); const options = { year: ‘numeric’, month: ‘long’, day: ‘numeric’, hour: ‘2-digit’, minute: ‘2-digit’, second: ‘2-digit’ }; document.getElementById(‘timestamp’).textContent = ‘Згенеровано: ‘ + now.toLocaleDateString(‘uk-UA’, options); } // Лічильник let count = 0; function incrementCounter() { count++; document.getElementById(‘counter’).textContent = count; // Додаємо анімацію при кліку const counter = document.getElementById(‘counter’); counter.style.transform = ‘scale(1.2)’; setTimeout(() => { counter.style.transform = ‘scale(1)’; }, 200); } // Анімація барів function animateBars() { const bars = document.querySelectorAll(‘.bar’); bars.forEach((bar, index) => { setTimeout(() => { bar.classList.add(‘animated’); setTimeout(() => { bar.classList.remove(‘animated’); }, 1000); }, index * 200); }); } // Ініціалізація при завантаженні updateTimestamp(); setInterval(updateTimestamp, 1000); // Автоматична анімація при завантаженні setTimeout(() => { animateBars(); }, 500);

* { box-sizing: border-box; } body { font-family: ‘Segoe UI’, Tahoma, Geneva, Verdana, sans-serif !important; background: #ffffff !important; margin: 0 !important; padding: 20px !important; min-height: 100vh !important; } html { background: #ffffff !important; } .container { max-width: 1200px; margin: 0 auto; background: #ffffff !important; padding: 30px; } h1 { text-align: center; color: #2c3e50; margin-bottom: 30px; font-size: 2.2em; } .chart-container { position: relative; height: 500px; margin-bottom: 30px; } .notes { background: rgba(52, 152, 219, 0.1); border-left: 4px solid #3498db; padding: 20px; margin-top: 20px; border-radius: 8px; } .notes h3 { color: #2c3e50; margin-top: 0; font-size: 1.3em; } .notes ul { line-height: 1.6; color: #34495e; } .highlight-box { background: #fff3cd; border-left: 4px solid #ffc107; padding: 20px; margin: 20px 0; border-radius: 8px; } .highlight-box h3 { color: #856404; margin-top: 0; } .election-type { font-size: 0.9em; color: #7f8c8d; font-style: italic; } .data-table { margin-top: 30px; overflow-x: auto; } table { width: 100%; border-collapse: collapse; background: white; border-radius: 10px; overflow: hidden; box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1); } th, td { padding: 12px 15px; text-align: center; border-bottom: 1px solid #ecf0f1; } th { background: linear-gradient(45deg, #3498db, #2ecc71); color: white; font-weight: 600; } tr:hover { background-color: #f8f9fa; } .pro-russian-cell { color: #e74c3c; font-weight: 600; } .pro-eu-cell { color: #3498db; font-weight: 600; } .projection-row { background-color: #fffacd; } .actual-row { background-color: #d4edda; } window.addEventListener(‘load’, function() { const ctx = document.getElementById(‘electionsChart’).getContext(‘2d’); const data = { labels: [‘2014\nParl.’, ‘2016\nPres.’, ‘2019\nParl.’, ‘2020\nPres.’, ‘2021\nParl.’, ‘2024\nPres.’, ‘2025\nProjection’, ‘2025\nACTUAL’], datasets: [ { label: ‘Pro-Russian parties/candidates %’, data: [38, 52.2, 39.5, 42.3, 33, 44.7, 44.4, 24.2], backgroundColor: ‘#e74c3c’, borderColor: ‘#c0392b’, borderWidth: 3, fill: false, tension: 0.4, segment: { borderDash: ctx => { // Make the line dashed between point 6 (2025 projection) and point 7 (2025 actual) if (ctx.p0DataIndex === 6) return [5, 5]; return []; } }, pointStyle: ctx => { // Use hollow circle for projection (index 6) if (ctx.dataIndex === 6) return ‘rect’; return ‘circle’; }, pointRadius: ctx => { if (ctx.dataIndex === 6) return 8; if (ctx.dataIndex === 7) return 10; return 6; }, pointBorderWidth: ctx => { if (ctx.dataIndex === 7) return 4; return 3; } }, { label: ‘Pro-EU parties/candidates %’, data: [45, 47.8, 26.8, 57.7, 52.8, 55.3, 34.7, 50.2], backgroundColor: ‘#3498db’, borderColor: ‘#2980b9’, borderWidth: 3, fill: false, tension: 0.4, segment: { borderDash: ctx => { if (ctx.p0DataIndex === 6) return [5, 5]; return []; } }, pointStyle: ctx => { if (ctx.dataIndex === 6) return ‘rect’; return ‘circle’; }, pointRadius: ctx => { if (ctx.dataIndex === 6) return 8; if (ctx.dataIndex === 7) return 10; return 6; }, pointBorderWidth: ctx => { if (ctx.dataIndex === 7) return 4; return 3; } } ] }; const config = { type: ‘line’, data: data, options: { responsive: true, maintainAspectRatio: false, plugins: { title: { display: true, text: ‘Electoral performance: Projection vs Reality’, font: { size: 18, weight: ‘bold’ }, color: ‘#2c3e50’ }, legend: { display: true, position: ‘top’, labels: { font: { size: 14, weight: ‘600’ }, usePointStyle: true, pointStyle: ‘circle’ } }, tooltip: { backgroundColor: ‘rgba(0, 0, 0, 0.8)’, titleColor: ‘#fff’, bodyColor: ‘#fff’, borderColor: ‘#3498db’, borderWidth: 1, cornerRadius: 8, displayColors: true, callbacks: { title: function(context) { return context[0].label; }, label: function(context) { let label = context.dataset.label + ‘: ‘ + context.formattedValue + ‘%’; if (context.dataIndex === 6) { label += ‘ (Pre-election poll)’; } else if (context.dataIndex === 7) { label += ‘ (ACTUAL RESULT)’; } return label; } } }, annotation: { annotations: { box1: { type: ‘box’, xMin: 6.5, xMax: 7.5, backgroundColor: ‘rgba(52, 152, 219, 0.1)’, borderWidth: 0 } } } }, scales: { y: { beginAtZero: true, max: 65, grid: { color: ‘rgba(0, 0, 0, 0.1)’ }, ticks: { font: { size: 12 }, callback: function(value) { return value + ‘%’; } }, title: { display: true, text: ‘Vote share (%)’, font: { size: 14, weight: ‘bold’ } } }, x: { grid: { color: ‘rgba(0, 0, 0, 0.1)’ }, ticks: { font: { size: 11 }, maxRotation: 0 }, title: { display: true, text: ‘Elections (Square = Pre-election projection | Circle = Actual result)’, font: { size: 13, weight: ‘bold’ } } } }, elements: { point: { hoverRadius: 10, hoverBorderWidth: 4 }, line: { borderWidth: 3 } }, interaction: { intersect: false, mode: ‘index’ } } }; if (typeof Chart !== ‘undefined’) { new Chart(ctx, config); } else { console.error(‘Chart.js is not loaded. Please check your internet connection.’); document.getElementById(‘electionsChart’).style.display = ‘none’; const fallback = document.createElement(‘div’); fallback.innerHTML = ‘

Chart.js failed to load. Please check your internet connection and refresh the page.

‘; document.querySelector(‘.chart-container’).appendChild(fallback); } });