новая папка / main

Главная страница body { font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; background-color: #f4f6f9; color: #333; margin: 0; } .header { background: #fff; padding: 15px 30px; box-shadow: 0 2px 4px rgba(0,0,0,0.1); display: flex; justify-content: space-between; align-items: center; } .header h1 { margin: 0; font-size: 24px; } .header a { text-decoration: none; color: #007bff; font-weight: 500; } .container { padding: 30px; } /* Стили для диаграмм */ .charts-container { display: flex; justify-content: space-around; gap: 30px; margin-bottom: 40px; } .chart-card { background: #fff; border-radius: 8px; box-shadow: 0 2px 8px rgba(0,0,0,0.08); padding: 20px; width: 30%; text-align: center; cursor: pointer; transition: transform 0.2s, box-shadow 0.2s; } .chart-card:hover { transform: translateY(-5px); box-shadow: 0 4px 12px rgba(0,0,0,0.12); } .chart-card h3 { margin-top: 0; } /* Стили для вкладок */ .tabs-container { background: #fff; border-radius: 8px; box-shadow: 0 2px 8px rgba(0,0,0,0.08); padding: 20px; } .tab-buttons { display: flex; border-bottom: 2px solid #eee; } .tab-button { padding: 12px 20px; cursor: pointer; border: none; background: none; font-size: 16px; font-weight: 500; color: #555; } .tab-button.active { color: #007bff; border-bottom: 2px solid #007bff; } .tab-content { display: none; padding: 20px 0 0 0; } .tab-content.active { display: block; } .indicator-row { display: flex; justify-content: space-between; padding: 15px; border-bottom: 1px solid #f0f0f0; } .indicator-row:last-child { border-bottom: none; } .indicator-row span:first-child { font-weight: 500; } /* Стили для модального окна */ .modal { display: none; position: fixed; z-index: 1000; left: 0; top: 0; width: 100%; height: 100%; overflow: auto; background-color: rgba(0,0,0,0.5); } .modal-content { background-color: #fefefe; margin: 15% auto; padding: 25px; border: 1px solid #888; width: 80%; max-width: 500px; border-radius: 8px; box-shadow: 0 5px 15px rgba(0,0,0,0.3); } .close-button { color: #aaa; float: right; font-size: 28px; font-weight: bold; cursor: pointer; } .close-button:hover, .close-button:focus { color: black; } Панель управления Добро пожаловать, {{ username }}! Выйти Продажи Активность Эффективность Финансы Пользователи Маркетинг {% for key, value in tab_data.tab1.items() %} {{ key }}{{ value }} {% endfor %} {% for key, value in tab_data.tab2.items() %} {{ key }}{{ value }} {% endfor %} {% for key, value in tab_data.tab3.items() %} {{ key }}{{ value }} {% endfor %} × Подробная статистика по продажам {% for key, value in modal_data.modal1.items() %} {{ key }}{{ value }} {% endfor %} × Подробная статистика по активности {% for key, value in modal_data.modal2.items() %} {{ key }}{{ value }} {% endfor %} × Подробная статистика по эффективности {% for key, value in modal_data.modal3.items() %} {{ key }}{{ value }} {% endfor %} // --- Логика для вкладок --- function openTab(evt, tabName) { var i, tabcontent, tablinks; tabcontent = document.getElementsByClassName("tab-content"); for (i = 0; i < tabcontent.length; i++) { tabcontent[i].style.display = "none"; } tablinks = document.getElementsByClassName("tab-button"); for (i = 0; i < tablinks.length; i++) { tablinks[i].className = tablinks[i].className.replace(" active", ""); } document.getElementById(tabName).style.display = "block"; evt.currentTarget.className += " active"; } // --- Логика для диаграмм --- const chartColors = ['#007bff', '#28a745', '#ffc107']; new Chart(document.getElementById('chart1'), { type: 'doughnut', data: { labels: ['Продукт A', 'Продукт B', 'Продукт C'], datasets: [{ data: {{ chart_data.chart1 | tojson }}, backgroundColor: chartColors, borderWidth: 0 }] }, options: { responsive: true, plugins: { legend: { display: false } } } }); new Chart(document.getElementById('chart2'), { type: 'doughnut', data: { labels: ['Онлайн', 'Оффлайн', 'Мобильные'], datasets: [{ data: {{ chart_data.chart2 | tojson }}, backgroundColor: chartColors, borderWidth: 0 }] }, options: { responsive: true, plugins: { legend: { display: false } } } }); new Chart(document.getElementById('chart3'), { type: 'doughnut', data: { labels: ['Реклама', 'SEO', 'SMM'], datasets: [{ data: {{ chart_data.chart3 | tojson }}, backgroundColor: chartColors, borderWidth: 0 }] }, options: { responsive: true, plugins: { legend: { display: false } } } }); // --- Логика для модальных окон --- function showModal(modalId) { document.getElementById(modalId).style.display = 'block'; } function closeModal(modalId) { document.getElementById(modalId).style.display = 'none'; } window.onclick = function(event) { const modals = document.getElementsByClassName('modal'); for(let i = 0; i < modals.length; i++){ if (event.target == modals[i]) { modals[i].style.display = "none"; } } }