Hugging Face's logo

Spaces:
Kahais
/
deepsite-project
Running

App Files Community
Kahais commited on
Commit
04ae3da
·
verified ·
1 Parent(s): f7cfad4

Manual changes saved

Browse files
Files changed (1) hide show
  1. index.html +0 -164
index.html CHANGED
@@ -1,164 +0,0 @@
1
-
2
- <!DOCTYPE html>
3
- <html lang="en">
4
- <head>
5
- <meta charset="UTF-8">
6
- <meta name="viewport" content="width=device-width, initial-scale=1.0">
7
- <title>Admin Dashboard</title>
8
- <link href="https://cdn.jsdelivr.net/npm/tailwindcss@2.2.19/dist/tailwind.min.css" rel="stylesheet">
9
- <script src="https://cdn.jsdelivr.net/npm/chart.js"></script>
10
- </head>
11
- <body class="bg-gray-100">
12
- <div class="container mx-auto px-4 py-8">
13
- <!-- Top Metrics Cards -->
14
- <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-5 gap-4 mb-8">
15
- <!-- New Users Card -->
16
- <div class="bg-white rounded-lg shadow p-6">
17
- <h3 class="text-gray-500 text-sm font-medium">Yangi foydalanuvchilar</h3>
18
- <p class="text-3xl font-bold mt-2">152</p>
19
- <p class="text-green-500 text-sm mt-1">▲ 15% kechagiga nisbatan</p>
20
- </div>
21
-
22
- <!-- Total Users Card -->
23
- <div class="bg-white rounded-lg shadow p-6">
24
- <h3 class="text-gray-500 text-sm font-medium">Jami foydalanuvchilar</h3>
25
- <p class="text-3xl font-bold mt-2">15,200</p>
26
- </div>
27
-
28
- <!-- Active Users Card -->
29
- <div class="bg-white rounded-lg shadow p-6">
30
- <h3 class="text-gray-500 text-sm font-medium">Faol foydalanuvchilar</h3>
31
- <p class="text-3xl font-bold mt-2">1,840</p>
32
- <p class="text-red-500 text-sm mt-1">▼ 5% kechagiga nisbatan</p>
33
- </div>
34
-
35
- <!-- Downloads Card -->
36
- <div class="bg-white rounded-lg shadow p-6">
37
- <h3 class="text-gray-500 text-sm font-medium">Yuklab olingan fayllar</h3>
38
- <p class="text-3xl font-bold mt-2">4,512</p>
39
- <p class="text-green-500 text-sm mt-1">▲ 8% kechagiga nisbatan</p>
40
- </div>
41
-
42
- <!-- Premium Subscriptions Card -->
43
- <div class="bg-white rounded-lg shadow p-6">
44
- <h3 class="text-gray-500 text-sm font-medium">Premium obunalar</h3>
45
- <p class="text-3xl font-bold mt-2">7</p>
46
- <p class="text-green-500 text-sm mt-1">▲ 40% kechagiga nisbatan</p>
47
- </div>
48
- </div>
49
-
50
- <!-- Growth Chart -->
51
- <div class="bg-white rounded-lg shadow p-6 mb-8">
52
- <h2 class="text-xl font-bold mb-4">O'sish dinamikasi (oxirgi 30 kun)</h2>
53
- <canvas id="growthChart" height="400"></canvas>
54
- </div>
55
-
56
- <!-- Audience Analysis -->
57
- <div class="grid grid-cols-1 lg:grid-cols-2 gap-8">
58
- <!-- Language Distribution -->
59
- <div class="bg-white rounded-lg shadow p-6">
60
- <h2 class="text-xl font-bold mb-4">Foydalanuvchilar geografiyasi (til bo'yicha)</h2>
61
- <canvas id="languageChart"></canvas>
62
- </div>
63
-
64
- <!-- Platform Downloads -->
65
- <div class="bg-white rounded-lg shadow p-6">
66
- <h2 class="text-xl font-bold mb-4">Platformalar bo'yicha yuklamalar</h2>
67
- <canvas id="platformChart"></canvas>
68
- </div>
69
- </div>
70
- </div>
71
-
72
- <script>
73
- // Growth Chart
74
- const growthCtx = document.getElementById('growthChart').getContext('2d');
75
- new Chart(growthCtx, {
76
- type: 'line',
77
- data: {
78
- labels: Array.from({length: 30}, (_, i) => `${i+1}-kun`),
79
- datasets: [{
80
- label: 'Jami foydalanuvchilar',
81
- data: Array.from({length: 30}, () => Math.floor(Math.random() * 1000) + 10000),
82
- borderColor: 'rgb(75, 192, 192)',
83
- tension: 0.1,
84
- fill: true
85
- }]
86
- },
87
- options: {
88
- responsive: true,
89
- plugins: {
90
- legend: {
91
- position: 'top',
92
- }
93
- }
94
- }
95
- });
96
-
97
- // Language Distribution Chart
98
- const languageCtx = document.getElementById('languageChart').getContext('2d');
99
- new Chart(languageCtx, {
100
- type: 'bar',
101
- data: {
102
- labels: ['Uzbek', 'Russian', 'English', 'Others'],
103
- datasets: [{
104
- label: 'Foiz',
105
- data: [45, 35, 15, 5],
106
- backgroundColor: [
107
- 'rgba(54, 162, 235, 0.6)',
108
- 'rgba(255, 99, 132, 0.6)',
109
- 'rgba(255, 206, 86, 0.6)',
110
- 'rgba(75, 192, 192, 0.6)'
111
- ],
112
- borderColor: [
113
- 'rgba(54, 162, 235, 1)',
114
- 'rgba(255, 99, 132, 1)',
115
- 'rgba(255, 206, 86, 1)',
116
- 'rgba(75, 192, 192, 1)'
117
- ],
118
- borderWidth: 1
119
- }]
120
- },
121
- options: {
122
- responsive: true,
123
- plugins: {
124
- legend: {
125
- display: false
126
- }
127
- }
128
- }
129
- });
130
-
131
- // Platform Chart
132
- const platformCtx = document.getElementById('platformChart').getContext('2d');
133
- new Chart(platformCtx, {
134
- type: 'bar',
135
- data: {
136
- labels: ['TikTok', 'YouTube', 'Instagram'],
137
- datasets: [{
138
- label: 'Foiz',
139
- data: [60, 30, 10],
140
- backgroundColor: [
141
- 'rgba(255, 99, 132, 0.6)',
142
- 'rgba(54, 162, 235, 0.6)',
143
- 'rgba(153, 102, 255, 0.6)'
144
- ],
145
- borderColor: [
146
- 'rgba(255, 99, 132, 1)',
147
- 'rgba(54, 162, 235, 1)',
148
- 'rgba(153, 102, 255, 1)'
149
- ],
150
- borderWidth: 1
151
- }]
152
- },
153
- options: {
154
- responsive: true,
155
- plugins: {
156
- legend: {
157
- display: false
158
- }
159
- }
160
- }
161
- });
162
- </script>
163
- </body>
164
- </html>