Spaces:
Running
Running
| <html lang="ru"> | |
| <head> | |
| <meta charset="UTF-8"> | |
| <meta name="viewport" content="width=device-width, initial-scale=1.0"> | |
| <title>Аналитика - ContentSync Pro</title> | |
| <link rel="icon" type="image/x-icon" href="/static/favicon.ico"> | |
| <link rel="stylesheet" href="style.css"> | |
| <script src="https://cdn.tailwindcss.com"></script> | |
| <script src="https://cdn.jsdelivr.net/npm/feather-icons/dist/feather.min.js"></script> | |
| <script src="https://unpkg.com/feather-icons"></script> | |
| <script src="https://cdn.jsdelivr.net/npm/chart.js"></script> | |
| </head> | |
| <body class="bg-dark-50 min-h-screen industrial-overlay"> | |
| <content-navbar></content-navbar> | |
| <div class="container mx-auto px-4 py-8"> | |
| <div class="mb-8"> | |
| <h1 class="text-3xl font-black text-dark-900 mb-2">АНАЛИТИКА И СТАТИСТИКА</h1> | |
| <p class="text-steel-600 font-bold">ОТСЛЕЖИВАЙТЕ ЭФФЕКТИВНОСТЬ КОНТЕНТА</p> | |
| </div> | |
| <div class="grid grid-cols-1 lg:grid-cols-4 gap-8"> | |
| <!-- Main Content --> | |
| <div class="lg:col-span-3 space-y-6"> | |
| <!-- Brutal Performance Overview --> | |
| <div class="bg-dark-50 rounded-sm shadow-lg p-8 brutal-border"> | |
| <h2 class="text-xl font-black text-dark-900 mb-6">ОБЗОР ЭФФЕКТИВНОСТИ</h2> | |
| <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6"> | |
| <div class="text-center"> | |
| <div class="text-3xl font-black text-steel-600 mb-2">156K</div> | |
| <p class="text-sm text-steel-700 font-bold">ОБЩИЙ ОХВАТ</p> | |
| </div> | |
| <div class="text-center"> | |
| <div class="text-3xl font-black text-success-500 mb-2">7.2K</div> | |
| <p class="text-sm text-steel-700 font-bold">ВОВЛЕЧЁННОСТЬ</p> | |
| </div> | |
| <div class="text-center"> | |
| <div class="text-3xl font-black text-primary-700 mb-2">324</div> | |
| <p class="text-sm text-steel-700 font-bold">ПУБЛИКАЦИИ</p> | |
| </div> | |
| </div> | |
| </div> | |
| <!-- Brutal Platform Comparison Chart --> | |
| <div class="bg-dark-50 rounded-sm shadow-lg p-8 brutal-border"> | |
| <h2 class="text-xl font-black text-dark-900 mb-6">СРАВНЕНИЕ ПЛАТФОРМ</h2> | |
| <div class="h-64 bg-steel-100 rounded-sm flex items-center justify-center border-2 border-steel-300"> | |
| <p class="text-steel-600 font-bold">ГРАФИК СРАВНЕНИЯ ЭФФЕКТИВНОСТИ</p> | |
| </div> | |
| </div> | |
| <!-- Brutal Content Performance --> | |
| <div class="bg-dark-50 rounded-sm shadow-lg p-8 brutal-border"> | |
| <h2 class="text-xl font-black text-dark-900 mb-6">ЛУЧШИЙ КОНТЕНТ</h2> | |
| <div class="space-y-4"> | |
| <!-- Top Performing Post --> | |
| <div class="flex items-center justify-between p-4 bg-steel-100 rounded-sm border-2 border-steel-300 brutal-hover"> | |
| <div class="flex items-center space-x-4"> | |
| <div class="w-12 h-12 bg-success-500 rounded-sm flex items-center justify-center"> | |
| <i data-feather="trending-up" class="text-white"></i> | |
| </div> | |
| <div class="flex-1"> | |
| <h3 class="font-black text-dark-900 uppercase">КАК УВЕЛИЧИТЬ КОНВЕРСИЮ В 3 РАЗА</h3> | |
| <div class="flex space-x-4 text-sm text-steel-600 font-bold"> | |
| <span>ОХВАТ: 45.2K</span> | |
| <span>ВОВЛЕЧЁННОСТЬ: 12.4%</span> | |
| </div> | |
| </div> | |
| <div class="text-right"> | |
| <div class="text-success-500 font-black">+245%</div> | |
| <div class="text-xs text-steel-600 font-bold">TELEGRAM</div> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| <!-- Sidebar --> | |
| <div class="space-y-6"> | |
| <!-- Date Range --> | |
| <div class="bg-white rounded-xl shadow-sm p-6"> | |
| <h3 class="font-bold text-gray-900 mb-4">Период анализа</h3> | |
| <div class="space-y-3"> | |
| <select class="form-input text-sm"> | |
| <option>Последние 7 дней</option> | |
| <option>Последние 30 дней</option> | |
| <option>Последние 90 дней</option> | |
| <option>Произвольный период</option> | |
| </select> | |
| </div> | |
| </div> | |
| <!-- Export Options --> | |
| <div class="bg-white rounded-xl shadow-sm p-6"> | |
| <h3 class="font-bold text-gray-900 mb-4">Экспорт данных</h3> | |
| <div class="space-y-2"> | |
| <button class="w-full btn-secondary text-sm"> | |
| <i data-feather="download"></i> | |
| <span>CSV отчет</span> | |
| </button> | |
| <button class="w-full btn-secondary text-sm"> | |
| <i data-feather="printer"></i> | |
| <span>Печать</span> | |
| </button> | |
| </div> | |
| </div> | |
| <!-- Insights --> | |
| <div class="bg-white rounded-xl shadow-sm p-6"> | |
| <h3 class="font-bold text-gray-900 mb-4">Рекомендации</h3> | |
| <div class="space-y-3 text-sm"> | |
| <div class="p-3 bg-blue-50 rounded-lg"> | |
| <p class="font-medium text-blue-900">Лучшее время для публикации</p> | |
| <p class="text-blue-700">14:00 - 16:00</p> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| <content-footer></content-footer> | |
| <script src="components/navbar.js"></script> | |
| <script src="components/footer.js"></script> | |
| <script src="script.js"></script> | |
| <script> | |
| feather.replace(); | |
| // Initialize charts | |
| document.addEventListener('DOMContentLoaded', function() { | |
| // Platform comparison chart would be initialized here | |
| console.log('Analytics charts initialized'); | |
| }); | |
| </script> | |
| </body> | |
| </html> |