File size: 7,150 Bytes
2d8afac
 
 
 
 
 
 
 
 
 
 
 
 
abc9527
 
2d8afac
 
abc9527
 
2d8afac
abc9527
2d8afac
 
abc9527
 
 
2d8afac
 
abc9527
 
2d8afac
 
abc9527
 
2d8afac
 
abc9527
 
2d8afac
 
 
abc9527
 
 
 
 
2d8afac
 
abc9527
 
 
2d8afac
 
abc9527
 
 
 
 
 
 
 
 
 
2d8afac
 
 
abc9527
 
2d8afac
 
 
 
abc9527
2d8afac
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
<!DOCTYPE html>
<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>