Hugging Face's logo

Spaces:
mbmal
/
contentsync-pro
Running

App Files Community
mbmal commited on
Commit
abc9527
·
verified ·
1 Parent(s): 2d8afac

передумай палитру. практичный коричневый, стальной. мужские брутальные цвета, а не вот это вот всё

Browse files
Files changed (6) hide show
  1. analytics.html +35 -39
  2. components/footer.js +14 -7
  3. components/navbar.js +26 -16
  4. create.html +30 -34
  5. index.html +128 -66
  6. style.css +240 -154
analytics.html CHANGED
@@ -11,70 +11,66 @@
11
  <script src="https://unpkg.com/feather-icons"></script>
12
  <script src="https://cdn.jsdelivr.net/npm/chart.js"></script>
13
  </head>
14
- <body class="bg-gray-50 min-h-screen">
15
- <content-navbar></content-navbar>
16
-
17
  <div class="container mx-auto px-4 py-8">
18
  <div class="mb-8">
19
- <h1 class="text-3xl font-bold text-gray-900 mb-2">Аналитика и статистика</h1>
20
- <p class="text-gray-600">Отслеживайте эффективность вашего контента на всех платформах</p>
21
  </div>
22
-
23
- <div class="grid grid-cols-1 lg:grid-cols-4 gap-8">
24
  <!-- Main Content -->
25
  <div class="lg:col-span-3 space-y-6">
26
- <!-- Performance Overview -->
27
- <div class="bg-white rounded-xl shadow-sm p-6">
28
- <h2 class="text-xl font-bold text-gray-900 mb-6">Обзор эффективности</h2>
29
  <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6">
30
  <div class="text-center">
31
- <div class="text-2xl font-bold text-blue-600 mb-2">156K</div>
32
- <p class="text-sm text-gray-600">Общий охват</p>
33
  </div>
34
  <div class="text-center">
35
- <div class="text-2xl font-bold text-green-600 mb-2">7.2K</div>
36
- <p class="text-sm text-gray-600">Вовлеченность</p>
37
  </div>
38
  <div class="text-center">
39
- <div class="text-2xl font-bold text-purple-600 mb-2">324</div>
40
- <p class="text-sm text-gray-600">Публикации</p>
41
  </div>
42
  </div>
43
  </div>
44
-
45
- <!-- Platform Comparison Chart -->
46
- <div class="bg-white rounded-xl shadow-sm p-6">
47
- <h2 class="text-xl font-bold text-gray-900 mb-6">Сравнение платформ</h2>
48
- <div class="h-64 bg-gray-50 rounded-lg flex items-center justify-center">
49
- <p class="text-gray-500">График сравнения эффективности по платформам</p>
50
  </div>
51
  </div>
52
-
53
- <!-- Content Performance -->
54
- <div class="bg-white rounded-xl shadow-sm p-6">
55
- <h2 class="text-xl font-bold text-gray-900 mb-6">Лучший контент</h2>
56
  <div class="space-y-4">
57
  <!-- Top Performing Post -->
58
- <div class="flex items-center justify-between p-4 border border-gray-200 rounded-lg">
59
- <div class="flex items-center space-x-4">
60
- <div class="w-12 h-12 bg-green-100 rounded-full flex items-center justify-center">
61
- <i data-feather="trending-up" class="text-green-600"></i>
62
- </div>
63
- <div class="flex-1">
64
- <h3 class="font-medium text-gray-900">Как увеличить конверсию в 3 раза</h3>
65
- <div class="flex space-x-4 text-sm text-gray-500">
66
- <span>Охват: 45.2K</span>
67
- <span>Вовлеченность: 12.4%</span>
68
  </div>
69
  </div>
70
  <div class="text-right">
71
- <div class="text-green-600 font-medium">+245%</div>
72
- <div class="text-xs text-gray-500">Telegram</div>
73
  </div>
74
  </div>
75
  </div>
76
  </div>
77
- </div>
78
 
79
  <!-- Sidebar -->
80
  <div class="space-y-6">
 
11
  <script src="https://unpkg.com/feather-icons"></script>
12
  <script src="https://cdn.jsdelivr.net/npm/chart.js"></script>
13
  </head>
14
+ <body class="bg-dark-50 min-h-screen industrial-overlay">
15
+ <content-navbar></content-navbar>
 
16
  <div class="container mx-auto px-4 py-8">
17
  <div class="mb-8">
18
+ <h1 class="text-3xl font-black text-dark-900 mb-2">АНАЛИТИКА И СТАТИСТИКА</h1>
19
+ <p class="text-steel-600 font-bold">ОТСЛЕЖИВАЙТЕ ЭФФЕКТИВНОСТЬ КОНТЕНТА</p>
20
  </div>
21
+ <div class="grid grid-cols-1 lg:grid-cols-4 gap-8">
 
22
  <!-- Main Content -->
23
  <div class="lg:col-span-3 space-y-6">
24
+ <!-- Brutal Performance Overview -->
25
+ <div class="bg-dark-50 rounded-sm shadow-lg p-8 brutal-border">
26
+ <h2 class="text-xl font-black text-dark-900 mb-6">ОБЗОР ЭФФЕКТИВНОСТИ</h2>
27
  <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6">
28
  <div class="text-center">
29
+ <div class="text-3xl font-black text-steel-600 mb-2">156K</div>
30
+ <p class="text-sm text-steel-700 font-bold">ОБЩИЙ ОХВАТ</p>
31
  </div>
32
  <div class="text-center">
33
+ <div class="text-3xl font-black text-success-500 mb-2">7.2K</div>
34
+ <p class="text-sm text-steel-700 font-bold">ВОВЛЕЧЁННОСТЬ</p>
35
  </div>
36
  <div class="text-center">
37
+ <div class="text-3xl font-black text-primary-700 mb-2">324</div>
38
+ <p class="text-sm text-steel-700 font-bold">ПУБЛИКАЦИИ</p>
39
  </div>
40
  </div>
41
  </div>
42
+ <!-- Brutal Platform Comparison Chart -->
43
+ <div class="bg-dark-50 rounded-sm shadow-lg p-8 brutal-border">
44
+ <h2 class="text-xl font-black text-dark-900 mb-6">СРАВНЕНИЕ ПЛАТФОРМ</h2>
45
+ <div class="h-64 bg-steel-100 rounded-sm flex items-center justify-center border-2 border-steel-300">
46
+ <p class="text-steel-600 font-bold">ГРАФИК СРАВНЕНИЯ ЭФФЕКТИВНОСТИ</p>
 
47
  </div>
48
  </div>
49
+ <!-- Brutal Content Performance -->
50
+ <div class="bg-dark-50 rounded-sm shadow-lg p-8 brutal-border">
51
+ <h2 class="text-xl font-black text-dark-900 mb-6">ЛУЧШИЙ КОНТЕНТ</h2>
 
52
  <div class="space-y-4">
53
  <!-- Top Performing Post -->
54
+ <div class="flex items-center justify-between p-4 bg-steel-100 rounded-sm border-2 border-steel-300 brutal-hover">
55
+ <div class="flex items-center space-x-4">
56
+ <div class="w-12 h-12 bg-success-500 rounded-sm flex items-center justify-center">
57
+ <i data-feather="trending-up" class="text-white"></i>
58
+ </div>
59
+ <div class="flex-1">
60
+ <h3 class="font-black text-dark-900 uppercase">КАК УВЕЛИЧИТЬ КОНВЕРСИЮ В 3 РАЗА</h3>
61
+ <div class="flex space-x-4 text-sm text-steel-600 font-bold">
62
+ <span>ОХВАТ: 45.2K</span>
63
+ <span>ВОВЛЕЧЁННОСТЬ: 12.4%</span>
64
  </div>
65
  </div>
66
  <div class="text-right">
67
+ <div class="text-success-500 font-black">+245%</div>
68
+ <div class="text-xs text-steel-600 font-bold">TELEGRAM</div>
69
  </div>
70
  </div>
71
  </div>
72
  </div>
73
+ </div>
74
 
75
  <!-- Sidebar -->
76
  <div class="space-y-6">
components/footer.js CHANGED
@@ -9,8 +9,8 @@ class ContentFooter extends HTMLElement {
9
  margin-top: auto;
10
  }
11
  .footer {
12
- background: white;
13
- border-top: 1px solid #e5e7eb;
14
  padding: 2rem 1rem;
15
  }
16
  .footer-container {
@@ -22,21 +22,28 @@ class ContentFooter extends HTMLElement {
22
  align-items: center;
23
  }
24
  .footer-copyright {
25
- color: #6b7280;
26
  font-size: 0.875rem;
 
 
 
27
  }
28
  .footer-links {
29
  display: flex;
30
  gap: 1.5rem;
31
  }
32
  .footer-link {
33
- color: #6b7280;
34
  text-decoration: none;
35
  font-size: 0.875rem;
36
- transition: color 0.2s;
 
 
 
37
  }
38
  .footer-link:hover {
39
- color: #374151;
 
40
  }
41
  @media (max-width: 768px) {
42
  .footer-container {
@@ -46,7 +53,7 @@ class ContentFooter extends HTMLElement {
46
  }
47
  }
48
  </style>
49
- <footer class="footer">
50
  <div class="footer-container">
51
  <div class="footer-copyright">
52
  © 2024 ContentSync Pro. Все права защищены.
 
9
  margin-top: auto;
10
  }
11
  .footer {
12
+ background: #262626;
13
+ border-top: 4px solid #8b5a2b;
14
  padding: 2rem 1rem;
15
  }
16
  .footer-container {
 
22
  align-items: center;
23
  }
24
  .footer-copyright {
25
+ color: #b3b3b3;
26
  font-size: 0.875rem;
27
+ font-weight: 700;
28
+ text-transform: uppercase;
29
+ letter-spacing: 0.5px;
30
  }
31
  .footer-links {
32
  display: flex;
33
  gap: 1.5rem;
34
  }
35
  .footer-link {
36
+ color: #b3b3b3;
37
  text-decoration: none;
38
  font-size: 0.875rem;
39
+ font-weight: 700;
40
+ transition: all 0.2s ease;
41
+ text-transform: uppercase;
42
+ letter-spacing: 0.5px;
43
  }
44
  .footer-link:hover {
45
+ color: #8b5a2b;
46
+ transform: translateY(-2px);
47
  }
48
  @media (max-width: 768px) {
49
  .footer-container {
 
53
  }
54
  }
55
  </style>
56
+ <footer class="footer">
57
  <div class="footer-container">
58
  <div class="footer-copyright">
59
  © 2024 ContentSync Pro. Все права защищены.
components/navbar.js CHANGED
@@ -8,10 +8,10 @@ class ContentNavbar extends HTMLElement {
8
  width: 100%;
9
  }
10
  .navbar {
11
- background: white;
12
- border-bottom: 1px solid #e5e7eb;
13
  padding: 0 1rem;
14
- box-shadow: 0 1px 3px 0 rgba(0, 0, 0, 0.1);
15
  }
16
  .navbar-container {
17
  max-width: 1200px;
@@ -19,20 +19,23 @@ class ContentNavbar extends HTMLElement {
19
  display: flex;
20
  align-items: center;
21
  justify-content: space-between;
22
- height: 64px;
23
  }
24
  .navbar-brand {
25
  display: flex;
26
  align-items: center;
27
- font-weight: 700;
28
- font-size: 1.25rem;
29
- color: #1f2937;
30
  text-decoration: none;
 
 
31
  }
32
  .navbar-logo {
33
- width: 32px;
34
- height: 32px;
35
  margin-right: 0.75rem;
 
36
  }
37
  .navbar-nav {
38
  display: flex;
@@ -43,24 +46,31 @@ class ContentNavbar extends HTMLElement {
43
  display: flex;
44
  align-items: center;
45
  gap: 0.5rem;
46
- color: #6b7280;
47
  text-decoration: none;
48
- font-weight: 500;
49
- transition: color 0.2s;
50
  padding: 0.5rem 0;
 
 
 
51
  }
52
  .nav-link:hover {
53
- color: #374151;
 
54
  }
55
  .nav-link.active {
56
- color: #3b82f6;
 
57
  }
58
  .mobile-menu-btn {
59
  display: none;
60
- background: none;
61
  border: none;
62
  cursor: pointer;
63
  padding: 0.5rem;
 
 
64
  }
65
  @media (max-width: 768px) {
66
  .navbar-nav {
@@ -71,7 +81,7 @@ class ContentNavbar extends HTMLElement {
71
  }
72
  }
73
  </style>
74
- <nav class="navbar">
75
  <div class="navbar-container">
76
  <a href="index.html" class="navbar-brand">
77
  <div class="navbar-logo">🚀</div>
 
8
  width: 100%;
9
  }
10
  .navbar {
11
+ background: #f6f4f2;
12
+ border-bottom: 3px solid #8b5a2b;
13
  padding: 0 1rem;
14
+ box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
15
  }
16
  .navbar-container {
17
  max-width: 1200px;
 
19
  display: flex;
20
  align-items: center;
21
  justify-content: space-between;
22
+ height: 72px;
23
  }
24
  .navbar-brand {
25
  display: flex;
26
  align-items: center;
27
+ font-weight: 900;
28
+ font-size: 1.5rem;
29
+ color: #5a3410;
30
  text-decoration: none;
31
+ text-transform: uppercase;
32
+ letter-spacing: -1px;
33
  }
34
  .navbar-logo {
35
+ width: 40px;
36
+ height: 40px;
37
  margin-right: 0.75rem;
38
+ filter: drop-shadow(0 2px 4px rgba(0, 0, 0, 0.2));
39
  }
40
  .navbar-nav {
41
  display: flex;
 
46
  display: flex;
47
  align-items: center;
48
  gap: 0.5rem;
49
+ color: #475569;
50
  text-decoration: none;
51
+ font-weight: 700;
52
+ transition: all 0.2s ease;
53
  padding: 0.5rem 0;
54
+ text-transform: uppercase;
55
+ font-size: 0.875rem;
56
+ letter-spacing: 0.5px;
57
  }
58
  .nav-link:hover {
59
+ color: #8b5a2b;
60
+ transform: translateY(-2px);
61
  }
62
  .nav-link.active {
63
+ color: #704214;
64
+ border-bottom: 2px solid #8b5a2b;
65
  }
66
  .mobile-menu-btn {
67
  display: none;
68
+ background: var(--primary-600);
69
  border: none;
70
  cursor: pointer;
71
  padding: 0.5rem;
72
+ border-radius: 4px;
73
+ color: white;
74
  }
75
  @media (max-width: 768px) {
76
  .navbar-nav {
 
81
  }
82
  }
83
  </style>
84
+ <nav class="navbar">
85
  <div class="navbar-container">
86
  <a href="index.html" class="navbar-brand">
87
  <div class="navbar-logo">🚀</div>
create.html CHANGED
@@ -10,59 +10,55 @@
10
  <script src="https://cdn.jsdelivr.net/npm/feather-icons/dist/feather.min.js"></script>
11
  <script src="https://unpkg.com/feather-icons"></script>
12
  </head>
13
- <body class="bg-gray-50 min-h-screen">
14
- <content-navbar></content-navbar>
15
-
16
  <div class="container mx-auto px-4 py-8 max-w-4xl">
17
  <div class="mb-8">
18
- <h1 class="text-3xl font-bold text-gray-900 mb-2">Создать новую публикацию</h1>
19
- <p class="text-gray-600">Напишите контент один раз - опубликуйте везде</p>
20
  </div>
21
-
22
- <div class="bg-white rounded-xl shadow-sm p-6 mb-6">
23
- <!-- Platform Selection -->
24
- <div class="mb-6">
25
- <label class="form-label">Выберите платформы для публикации</label>
26
  <div class="grid grid-cols-2 md:grid-cols-4 gap-4">
27
- <label class="flex flex-col items-center p-4 border-2 border-gray-200 rounded-lg cursor-pointer hover:border-blue-500 transition-colors">
28
  <input type="checkbox" name="platform" value="telegram" class="hidden">
29
- <div class="w-12 h-12 bg-blue-100 rounded-full flex items-center justify-center mb-2">
30
- <i data-feather="message-circle" class="text-blue-600"></i>
31
  </div>
32
- <span class="text-sm font-medium">Telegram</span>
33
  </label>
34
- <label class="flex flex-col items-center p-4 border-2 border-gray-200 rounded-lg cursor-pointer hover:border-blue-400 transition-colors">
35
  <input type="checkbox" name="platform" value="vk" class="hidden">
36
- <div class="w-12 h-12 bg-blue-100 rounded-full flex items-center justify-center mb-2">
37
- <i data-feather="users" class="text-blue-400"></i>
38
  </div>
39
- <span class="text-sm font-medium">VK</span>
40
  </label>
41
- <label class="flex flex-col items-center p-4 border-2 border-gray-200 rounded-lg cursor-pointer hover:border-blue-600 transition-colors">
42
  <input type="checkbox" name="platform" value="linkedin" class="hidden">
43
- <div class="w-12 h-12 bg-blue-100 rounded-full flex items-center justify-center mb-2">
44
- <i data-feather="briefcase" class="text-blue-600"></i>
45
  </div>
46
- <span class="text-sm font-medium">LinkedIn</span>
47
  </label>
48
- <label class="flex flex-col items-center p-4 border-2 border-gray-200 rounded-lg cursor-pointer hover:border-orange-500 transition-colors">
49
  <input type="checkbox" name="platform" value="yandex_zen" class="hidden">
50
- <div class="w-12 h-12 bg-orange-100 rounded-full flex items-center justify-center mb-2">
51
- <i data-feather="trending-up" class="text-orange-500"></i>
52
  </div>
53
- <span class="text-sm font-medium">Яндекс.Дзен</span>
54
  </label>
55
  </div>
56
  </div>
57
-
58
- <!-- Content Editor -->
59
- <div class="mb-6">
60
- <label class="form-label">Текст публикации</label>
61
- <textarea class="form-input post-content" rows="8" placeholder="Напишите ваш контент здесь... Максимальная длина будет автоматически подстроена под выбранные платформы" maxlength="4096"></textarea>
62
- <div class="text-right text-sm text-gray-500 mt-2 char-counter">0/4096</div>
63
  </div>
64
-
65
- <!-- Media Upload -->
66
  <div class="mb-6">
67
  <label class="form-label">Медиафайлы</label>
68
  <div class="border-2 border-dashed border-gray-300 rounded-lg p-8 text-center">
 
10
  <script src="https://cdn.jsdelivr.net/npm/feather-icons/dist/feather.min.js"></script>
11
  <script src="https://unpkg.com/feather-icons"></script>
12
  </head>
13
+ <body class="bg-dark-50 min-h-screen industrial-overlay">
14
+ <content-navbar></content-navbar>
 
15
  <div class="container mx-auto px-4 py-8 max-w-4xl">
16
  <div class="mb-8">
17
+ <h1 class="text-3xl font-black text-dark-900 mb-2">СОЗДАТЬ НОВУЮ ПУБЛИКАЦИЮ</h1>
18
+ <p class="text-steel-600 font-bold">НАПИШИТЕ КОНТЕНТ ОДИН РАЗ - ОПУБЛИКУЙТЕ ВЕЗДЕ</p>
19
  </div>
20
+ <div class="bg-dark-50 rounded-sm shadow-lg p-8 mb-6 brutal-border">
21
+ <!-- Brutal Platform Selection -->
22
+ <div class="mb-8">
23
+ <label class="form-label">ВЫБЕРИТЕ ПЛАТФОРМЫ ДЛЯ ПУБЛИКАЦИИ</label>
 
24
  <div class="grid grid-cols-2 md:grid-cols-4 gap-4">
25
+ <label class="flex flex-col items-center p-6 border-2 border-steel-300 rounded-sm cursor-pointer hover:border-primary-600 transition-all brutal-hover">
26
  <input type="checkbox" name="platform" value="telegram" class="hidden">
27
+ <div class="w-16 h-16 bg-steel-600/20 rounded-sm flex items-center justify-center mb-3">
28
+ <i data-feather="message-circle" class="text-steel-600 w-8 h-8"></i>
29
  </div>
30
+ <span class="text-sm font-black text-dark-900 uppercase">Telegram</span>
31
  </label>
32
+ <label class="flex flex-col items-center p-6 border-2 border-steel-300 rounded-sm cursor-pointer hover:border-primary-600 transition-all brutal-hover">
33
  <input type="checkbox" name="platform" value="vk" class="hidden">
34
+ <div class="w-16 h-16 bg-steel-600/20 rounded-sm flex items-center justify-center mb-3">
35
+ <i data-feather="users" class="text-steel-500 w-8 h-8"></i>
36
  </div>
37
+ <span class="text-sm font-black text-dark-900 uppercase">VK</span>
38
  </label>
39
+ <label class="flex flex-col items-center p-6 border-2 border-steel-300 rounded-sm cursor-pointer hover:border-primary-600 transition-all brutal-hover">
40
  <input type="checkbox" name="platform" value="linkedin" class="hidden">
41
+ <div class="w-16 h-16 bg-steel-600/20 rounded-sm flex items-center justify-center mb-3">
42
+ <i data-feather="briefcase" class="text-steel-600 w-8 h-8"></i>
43
  </div>
44
+ <span class="text-sm font-black text-dark-900 uppercase">LinkedIn</span>
45
  </label>
46
+ <label class="flex flex-col items-center p-6 border-2 border-steel-300 rounded-sm cursor-pointer hover:border-primary-600 transition-all brutal-hover">
47
  <input type="checkbox" name="platform" value="yandex_zen" class="hidden">
48
+ <div class="w-16 h-16 bg-warning-500/20 rounded-sm flex items-center justify-center mb-3">
49
+ <i data-feather="trending-up" class="text-warning-500 w-8 h-8"></i>
50
  </div>
51
+ <span class="text-sm font-black text-dark-900 uppercase">Яндекс.Дзен</span>
52
  </label>
53
  </div>
54
  </div>
55
+ <!-- Brutal Content Editor -->
56
+ <div class="mb-8">
57
+ <label class="form-label">ТЕКСТ ПУБЛИКАЦИИ</label>
58
+ <textarea class="form-input post-content" rows="10" placeholder="НАПИШИТЕ ВАШ КОНТЕНТ ЗДЕСЬ... МАКСИМАЛЬНАЯ ДЛИНА БУДЕТ АВТОМАТИЧЕСКИ ПОДСТРОЕНА ПОД ВЫБРАННЫЕ ПЛАТФОРМЫ" maxlength="4096"></textarea>
59
+ <div class="text-right text-sm text-steel-600 mt-2 font-bold char-counter">0/4096</div>
 
60
  </div>
61
+ <!-- Media Upload -->
 
62
  <div class="mb-6">
63
  <label class="form-label">Медиафайлы</label>
64
  <div class="border-2 border-dashed border-gray-300 rounded-lg p-8 text-center">
index.html CHANGED
@@ -1,3 +1,52 @@
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
1
  <!DOCTYPE html>
2
  <html lang="ru">
3
  <head>
@@ -10,9 +59,10 @@
10
  <script src="https://cdn.jsdelivr.net/npm/feather-icons/dist/feather.min.js"></script>
11
  <script src="https://unpkg.com/feather-icons"></script>
12
  <style>
13
- .gradient-bg { background: linear-gradient(135deg, #667eea 0%, #764ba2 100%); }
14
- .aurora-bg { background: linear-gradient(-45deg, #ee7752, #e73c7e, #23a6d5, #23d5ab); background-size: 400% 400%; animation: aurora 15s ease infinite; }
15
  @keyframes aurora { 0% { background-position: 0% 50%; } 50% { background-position: 100% 50%; } 100% { background-position: 0% 50%; } }
 
16
  </style>
17
  </head>
18
  <body class="min-h-screen aurora-bg">
@@ -24,55 +74,68 @@
24
  <h1 class="text-4xl font-bold text-white mb-2 text-gradient drop-shadow-lg">Управление контентом</h1>
25
  <p class="text-white/80 text-lg drop-shadow-md">Мультимедийная платформа для всех соцсетей</p>
26
  </div>
27
-
28
- <!-- Quick Stats -->
29
- <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-6 mb-8 animate-slideUp">
30
- <div class="glass card hover:scale-105 transition-all cursor-pointer">
31
- <div class="flex items-center justify-between p-6">
32
- <div>
33
- <p class="text-sm font-medium text-slate-600">Опубликовано сегодня</p>
34
- <p class="text-3xl font-bold text-gradient">12</p>
35
- </div>
36
- <div class="p-3 bg-blue-500/20 rounded-full">
37
- <i data-feather="send" class="text-blue-600 w-6 h-6"></i>
38
- </div>
39
  </div>
 
 
 
 
40
  </div>
41
- <div class="glass card hover:scale-105 transition-all cursor-pointer">
42
- <div class="flex items-center justify-between p-6">
43
- <div>
44
- <p class="text-sm font-medium text-slate-600">В очереди</p>
45
- <p class="text-3xl font-bold text-gradient">8</p>
 
46
  </div>
47
- <div class="p-3 bg-green-500/20 rounded-full">
48
- <i data-feather="clock" class="text-green-600 w-6 h-6"></i>
 
 
 
 
 
49
  </div>
50
  </div>
51
  </div>
52
- <div class="glass card hover:scale-105 transition-all cursor-pointer">
53
- <div class="flex items-center justify-between p-6">
54
- <div>
55
- <p class="text-sm font-medium text-slate-600">Охват</p>
56
- <p class="text-3xl font-bold text-gradient">45.2K</p>
57
- </div>
58
- <div class="p-3 bg-purple-500/20 rounded-full">
59
- <i data-feather="eye" class="text-purple-600 w-6 h-6"></i>
60
- </div>
61
  </div>
 
 
 
 
62
  </div>
63
- <div class="glass card hover:scale-105 transition-all cursor-pointer">
64
- <div class="flex items-center justify-between p-6">
65
- <div>
66
- <p class="text-sm font-medium text-slate-600">Вовлеченность</p>
67
- <p class="text-3xl font-bold text-gradient">4.8%</p>
 
68
  </div>
69
- <div class="p-3 bg-orange-500/20 rounded-full">
70
- <i data-feather="heart" class="text-orange-600 w-6 h-6"></i>
 
 
 
 
 
71
  </div>
72
  </div>
73
  </div>
74
  </div>
75
- <!-- Main Content Grid -->
76
  <div class="grid grid-cols-1 lg:grid-cols-3 gap-8 animate-fadeIn">
77
  <!-- Left Column -->
78
  <div class="lg:col-span-2 space-y-6">
@@ -117,61 +180,60 @@
117
  </button>
118
  </div>
119
  <div class="space-y-3">
120
- <!-- Post Item -->
121
- <div class="flex items-center justify-between p-4 bg-white/50 rounded-lg hover:bg-white/80 transition-all cursor-pointer border border-transparent hover:border-blue-200">
122
- <div class="flex items-center space-x-4">
123
- <div class="w-12 h-12 bg-gradient-to-br from-blue-400 to-blue-600 rounded-xl flex items-center justify-center shadow-lg">
124
- <i data-feather="message-circle" class="text-white w-6 h-6"></i>
125
- </div>
126
- <div>
127
- <h3 class="font-medium text-slate-900">Анализ рынка IT в 2024</h3>
128
- <p class="text-sm text-slate-500">Опубликовано 2 часа назад</p>
129
- </div>
130
  </div>
131
- <div class="flex items-center space-x-2">
132
- <span class="status status-published">Live</span>
133
- <div class="text-right">
134
- <div class="text-sm font-medium text-slate-900">2.4K</div>
135
- <div class="text-xs text-slate-500">охват</div>
136
- </div>
 
 
 
 
137
  </div>
138
  </div>
139
- <!-- Add more modern post items -->
 
140
  </div>
141
  </div>
142
  </div>
143
 
144
  <!-- Right Column -->
145
  <div class="space-y-6">
146
- <!-- Schedule Overview -->
147
- <div class="glass card p-6">
148
  <div class="flex items-center justify-between mb-6">
149
- <h2 class="text-xl font-bold text-slate-900">Расписание</h2>
150
  <button class="btn btn-ghost btn-sm">
151
  <i data-feather="calendar"></i>
152
  </button>
153
  </div>
154
  <div class="relative">
155
- <div class="absolute left-4 top-0 bottom-0 w-0.5 bg-blue-200"></div>
156
  <div class="space-y-4">
157
  <div class="relative flex items-start space-x-3">
158
- <div class="p-2 bg-gradient-to-br from-blue-400 to-blue-600 rounded-full shadow-lg relative z-10">
159
  <i data-feather="clock" class="text-white w-4 h-4"></i>
160
  </div>
161
  <div class="flex-1 pt-0.5">
162
- <p class="font-medium text-slate-900">Сегодня, 14:30</p>
163
- <p class="text-sm text-slate-500">Тренды в маркетинге</p>
164
  <div class="flex mt-1 space-x-1">
165
- <i data-feather="message-circle" class="w-3 h-3 text-blue-500"></i>
166
- <i data-feather="users" class="w-3 h-3 text-blue-400"></i>
167
  </div>
168
  </div>
169
  </div>
170
  </div>
171
  </div>
172
  </div>
173
-
174
- <!-- Platform Performance -->
175
  <div class="glass card p-6">
176
  <h2 class="text-xl font-bold text-slate-900 mb-6">Платформы</h2>
177
  <div class="space-y-4">
 
1
+
2
+ <!-- Stats Grid -->
3
+ <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-6 mb-8 animate-slideUp">
4
+ <div class="glass card hover:scale-105 transition-all cursor-pointer brutal-hover">
5
+ <div class="flex items-center justify-between p-6">
6
+ <div>
7
+ <p class="text-sm font-bold text-steel-600">ОПУБЛИКОВАНО СЕГОДНЯ</p>
8
+ <p class="text-3xl font-black text-primary-700">12</p>
9
+ </div>
10
+ <div class="p-3 bg-steel-600/20 rounded-sm">
11
+ <i data-feather="send" class="text-steel-600 w-6 h-6"></i>
12
+ </div>
13
+ </div>
14
+ </div>
15
+ <div class="glass card hover:scale-105 transition-all cursor-pointer brutal-hover">
16
+ <div class="flex items-center justify-between p-6">
17
+ <div>
18
+ <p class="text-sm font-bold text-steel-600">В ОЧЕРЕДИ</p>
19
+ <p class="text-3xl font-black text-primary-700">8</p>
20
+ </div>
21
+ <div class="p-3 bg-metal-600/20 rounded-sm">
22
+ <i data-feather="clock" class="text-metal-600 w-6 h-6"></i>
23
+ </div>
24
+ </div>
25
+ </div>
26
+ <div class="glass card hover:scale-105 transition-all cursor-pointer brutal-hover">
27
+ <div class="flex items-center justify-between p-6">
28
+ <div>
29
+ <p class="text-sm font-bold text-steel-600">ОХВАТ</p>
30
+ <p class="text-3xl font-black text-primary-700">45.2K</p>
31
+ </div>
32
+ <div class="p-3 bg-primary-600/20 rounded-sm">
33
+ <i data-feather="eye" class="text-primary-600 w-6 h-6"></i>
34
+ </div>
35
+ </div>
36
+ </div>
37
+ <div class="glass card hover:scale-105 transition-all cursor-pointer brutal-hover">
38
+ <div class="flex items-center justify-between p-6">
39
+ <div>
40
+ <p class="text-sm font-bold text-steel-600">ВОВЛЕЧЁННОСТЬ</p>
41
+ <p class="text-3xl font-black text-primary-700">4.8%</p>
42
+ </div>
43
+ <div class="p-3 bg-warning-500/20 rounded-sm">
44
+ <i data-feather="heart" class="text-warning-500 w-6 h-6"></i>
45
+ </div>
46
+ </div>
47
+ </div>
48
+ </div>
49
+
50
  <!DOCTYPE html>
51
  <html lang="ru">
52
  <head>
 
59
  <script src="https://cdn.jsdelivr.net/npm/feather-icons/dist/feather.min.js"></script>
60
  <script src="https://unpkg.com/feather-icons"></script>
61
  <style>
62
+ .gradient-bg { background: linear-gradient(135deg, #704214 0%, #5a3410 100%); }
63
+ .aurora-bg { background: linear-gradient(-45deg, #5a3410, #475569, #262626, #3f3f46); background-size: 400% 400%; animation: aurora 20s ease infinite; }
64
  @keyframes aurora { 0% { background-position: 0% 50%; } 50% { background-position: 100% 50%; } 100% { background-position: 0% 50%; } }
65
+ .text-gradient { background: linear-gradient(135deg, #8b5a2b, #475569); -webkit-background-clip: text; -webkit-text-fill-color: transparent; background-clip: text; }
66
  </style>
67
  </head>
68
  <body class="min-h-screen aurora-bg">
 
74
  <h1 class="text-4xl font-bold text-white mb-2 text-gradient drop-shadow-lg">Управление контентом</h1>
75
  <p class="text-white/80 text-lg drop-shadow-md">Мультимедийная платформа для всех соцсетей</p>
76
  </div>
77
+ <!-- Quick Create Card -->
78
+ <div class="glass card p-8 brutal-border">
79
+ <div class="flex items-center justify-between mb-8">
80
+ <div>
81
+ <h2 class="text-2xl font-black text-gradient">СОЗДАТЬ ПУБЛИКАЦИЮ</h2>
82
+ <p class="text-steel-600 mt-2 font-medium">ИСКУССТВЕННЫЙ ИНТЕЛЛЕКТ ПОМОЖЕТ</p>
 
 
 
 
 
 
83
  </div>
84
+ <a href="create.html" class="btn btn-primary btn-lg">
85
+ <i data-feather="plus"></i>
86
+ <span>СОЗДАТЬ</span>
87
+ </a>
88
  </div>
89
+
90
+ <!-- AI Assistant -->
91
+ <div class="bg-steel-600/10 rounded-sm p-6 border-2 border-steel-200">
92
+ <div class="flex items-start space-x-3">
93
+ <div class="p-2 bg-steel-600/20 rounded-sm">
94
+ <i data-feather="brain" class="text-steel-600 w-5 h-5"></i>
95
  </div>
96
+ <div class="flex-1">
97
+ <h3 class="font-bold text-steel-900">AI АССИСТЕНТ</h3>
98
+ <p class="text-sm text-steel-600 font-medium">ПОЛУЧИТЕ РЕКОМЕНДАЦИИ ПО ВРЕМЕНИ И КОНТЕНТУ</p>
99
+ <button class="btn btn-ghost btn-sm mt-2">
100
+ <i data-feather="message-circle"></i>
101
+ <span>НАЧАТЬ ЧАТ</span>
102
+ </button>
103
  </div>
104
  </div>
105
  </div>
106
+ </div>
107
+ =======
108
+ <!-- Quick Create Card -->
109
+ <div class="glass card p-8">
110
+ <div class="flex items-center justify-between mb-8">
111
+ <div>
112
+ <h2 class="text-2xl font-bold text-gradient">Создать публикацию</h2>
113
+ <p class="text-slate-600 mt-2">Искусственный интеллект поможет вам</p>
 
114
  </div>
115
+ <a href="create.html" class="btn btn-primary btn-lg">
116
+ <i data-feather="plus"></i>
117
+ <span>Создать</span>
118
+ </a>
119
  </div>
120
+
121
+ <!-- AI Assistant -->
122
+ <div class="bg-blue-500/10 rounded-xl p-6 border border-blue-200">
123
+ <div class="flex items-start space-x-3">
124
+ <div class="p-2 bg-blue-500/20 rounded-full">
125
+ <i data-feather="brain" class="text-blue-600 w-5 h-5"></i>
126
  </div>
127
+ <div class="flex-1">
128
+ <h3 class="font-medium text-slate-900">AI Ассистент</h3>
129
+ <p class="text-sm text-slate-600">Получите рекомендации по лучшему времени публикации и контенту</p>
130
+ <button class="btn btn-ghost btn-sm mt-2">
131
+ <i data-feather="message-circle"></i>
132
+ <span>Начать чат</span>
133
+ </button>
134
  </div>
135
  </div>
136
  </div>
137
  </div>
138
+ <!-- Main Content Grid -->
139
  <div class="grid grid-cols-1 lg:grid-cols-3 gap-8 animate-fadeIn">
140
  <!-- Left Column -->
141
  <div class="lg:col-span-2 space-y-6">
 
180
  </button>
181
  </div>
182
  <div class="space-y-3">
183
+ <!-- Brutal Post Item -->
184
+ <div class="flex items-center justify-between p-4 bg-steel-50 rounded-sm hover:bg-steel-100 transition-all cursor-pointer border-2 border-steel-200 hover:border-primary-600 brutal-hover">
185
+ <div class="flex items-center space-x-4">
186
+ <div class="w-12 h-12 bg-gradient-to-br from-steel-600 to-primary-600 rounded-sm flex items-center justify-center shadow-lg">
187
+ <i data-feather="message-circle" class="text-white w-6 h-6"></i>
 
 
 
 
 
188
  </div>
189
+ <div>
190
+ <h3 class="font-bold text-dark-900 uppercase">АНАЛИЗ РЫНКА IT В 2024</h3>
191
+ <p class="text-sm text-steel-600 font-medium">ОПУБЛИКОВАНО 2 ЧАСА НАЗАД</p>
192
+ </div>
193
+ </div>
194
+ <div class="flex items-center space-x-2">
195
+ <span class="status status-published">LIVE</span>
196
+ <div class="text-right">
197
+ <div class="text-sm font-black text-dark-900">2.4K</div>
198
+ <div class="text-xs text-steel-600 font-bold">ОХВАТ</div>
199
  </div>
200
  </div>
201
+ </div>
202
+ <!-- Add more modern post items -->
203
  </div>
204
  </div>
205
  </div>
206
 
207
  <!-- Right Column -->
208
  <div class="space-y-6">
209
+ <!-- Brutal Schedule Overview -->
210
+ <div class="glass card p-6 brutal-border">
211
  <div class="flex items-center justify-between mb-6">
212
+ <h2 class="text-xl font-black text-dark-900">РАСПИСАНИЕ</h2>
213
  <button class="btn btn-ghost btn-sm">
214
  <i data-feather="calendar"></i>
215
  </button>
216
  </div>
217
  <div class="relative">
218
+ <div class="absolute left-4 top-0 bottom-0 w-0.5 bg-steel-300"></div>
219
  <div class="space-y-4">
220
  <div class="relative flex items-start space-x-3">
221
+ <div class="p-2 bg-gradient-to-br from-steel-600 to-primary-600 rounded-sm shadow-lg relative z-10">
222
  <i data-feather="clock" class="text-white w-4 h-4"></i>
223
  </div>
224
  <div class="flex-1 pt-0.5">
225
+ <p class="font-black text-dark-900 uppercase">СЕГОДНЯ, 14:30</p>
226
+ <p class="text-sm text-steel-600 font-bold">ТРЕНДЫ В МАРКЕТИНГЕ</p>
227
  <div class="flex mt-1 space-x-1">
228
+ <i data-feather="message-circle" class="w-3 h-3 text-steel-600"></i>
229
+ <i data-feather="users" class="w-3 h-3 text-steel-500"></i>
230
  </div>
231
  </div>
232
  </div>
233
  </div>
234
  </div>
235
  </div>
236
+ <!-- Platform Performance -->
 
237
  <div class="glass card p-6">
238
  <h2 class="text-xl font-bold text-slate-900 mb-6">Платформы</h2>
239
  <div class="space-y-4">
style.css CHANGED
@@ -1,41 +1,104 @@
1
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
2
  /* Modern Design System */
3
  @import url('https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700&display=swap');
4
-
5
  :root {
6
- /* Colors */
7
- --primary-50: #f0f9ff;
8
- --primary-100: #e0f2fe;
9
- --primary-500: #6366f1;
10
- --primary-600: #4f46e5;
11
- --primary-700: #4338ca;
 
 
 
 
 
 
12
 
13
- --secondary-50: #f8fafc;
14
- --secondary-100: #f1f5f9;
15
- --secondary-500: #64748b;
16
- --secondary-600: #475569;
17
 
18
- --success-50: #f0fdf4;
19
- --success-500: #22c55e;
20
 
21
- --warning-50: #fffbeb;
22
- --warning-500: #f59e0b;
23
 
24
- --error-50: #fef2f2;
25
- --error-500: #ef4444;
 
 
 
 
 
 
 
 
26
 
27
- --dark-50: #f8fafc;
28
- --dark-100: #f1f5f9;
29
- --dark-200: #e2e8f0;
30
- --dark-300: #cbd5e1;
31
- --dark-400: #94a3b8;
32
- --dark-500: #64748b;
33
- --dark-600: #475569;
34
- --dark-700: #334155;
35
- --dark-800: #1e293b;
36
- --dark-900: #0f172a;
37
 
38
- /* Spacing */
 
 
 
 
 
39
  --spacing-xs: 0.25rem;
40
  --spacing-sm: 0.5rem;
41
  --spacing-md: 1rem;
@@ -74,8 +137,7 @@
74
  --transition-base: 300ms cubic-bezier(0.4, 0, 0.2, 1);
75
  --transition-slow: 500ms cubic-bezier(0.4, 0, 0.2, 1);
76
  }
77
-
78
- /* Base Styles */
79
  * {
80
  font-family: var(--font-sans);
81
  box-sizing: border-box;
@@ -89,48 +151,45 @@ html {
89
  body {
90
  margin: 0;
91
  padding: 0;
92
- background: linear-gradient(135deg, var(--primary-50) 0%, var(--secondary-50) 100%);
93
- color: var(--dark-700);
94
  line-height: 1.6;
95
  -webkit-font-smoothing: antialiased;
96
  -moz-osx-font-smoothing: grayscale;
97
  }
98
-
99
- /* Modern Scrollbar */
100
  ::-webkit-scrollbar {
101
- width: 8px;
102
  }
103
 
104
  ::-webkit-scrollbar-track {
105
  background: var(--dark-100);
106
- border-radius: 4px;
107
  }
108
 
109
  ::-webkit-scrollbar-thumb {
110
- background: var(--dark-300);
111
- border-radius: 4px;
112
  }
113
 
114
  ::-webkit-scrollbar-thumb:hover {
115
- background: var(--dark-400);
116
  }
117
-
118
- /* Glassmorphism Effects */
119
  .glass {
120
- background: rgba(255, 255, 255, 0.25);
121
- backdrop-filter: blur(12px);
122
- -webkit-backdrop-filter: blur(12px);
123
- border: 1px solid rgba(255, 255, 255, 0.5);
124
  }
125
 
126
  .glass-dark {
127
- background: rgba(15, 23, 42, 0.2);
128
- backdrop-filter: blur(12px);
129
- -webkit-backdrop-filter: blur(12px);
130
- border: 1px solid rgba(255, 255, 255, 0.1);
131
  }
132
-
133
- /* Modern Button System */
134
  .btn {
135
  position: relative;
136
  display: inline-flex;
@@ -139,13 +198,15 @@ body {
139
  gap: 0.5rem;
140
  padding: 0.75rem 1.5rem;
141
  border: none;
142
- border-radius: var(--radius-md);
143
  font-size: var(--text-sm);
144
- font-weight: 600;
145
  text-decoration: none;
146
  cursor: pointer;
147
  transition: all var(--transition-fast);
148
  overflow: hidden;
 
 
149
  }
150
 
151
  .btn:before {
@@ -155,7 +216,7 @@ body {
155
  left: -100%;
156
  width: 100%;
157
  height: 100%;
158
- background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.2), transparent);
159
  transition: left 0.5s;
160
  }
161
 
@@ -164,52 +225,52 @@ body {
164
  }
165
 
166
  .btn-primary {
167
- background: linear-gradient(135deg, var(--primary-500), var(--primary-600));
168
  color: white;
169
- box-shadow: var(--shadow-md);
170
  }
171
 
172
  .btn-primary:hover {
173
- background: linear-gradient(135deg, var(--primary-600), var(--primary-700));
174
- box-shadow: var(--shadow-lg);
175
- transform: translateY(-1px);
176
  }
177
 
178
  .btn-secondary {
179
- background: var(--secondary-50);
180
- color: var(--dark-600);
181
- border: 1px solid var(--dark-200);
182
  }
183
 
184
  .btn-secondary:hover {
185
- background: var(--secondary-100);
186
- color: var(--dark-700);
187
- transform: translateY(-1px);
188
  }
189
 
190
  .btn-success {
191
- background: linear-gradient(135deg, var(--success-500), #16a34a);
192
  color: white;
193
  }
194
 
195
  .btn-warning {
196
- background: linear-gradient(135deg, var(--warning-500), #d97706);
197
  color: white;
198
  }
199
 
200
  .btn-error {
201
- background: linear-gradient(135deg, var(--error-500), #dc2626);
202
  color: white;
203
  }
204
 
205
  .btn-ghost {
206
  background: transparent;
207
- color: var(--dark-600);
 
208
  }
209
 
210
  .btn-ghost:hover {
211
- background: var(--dark-50);
212
- color: var(--dark-700);
 
213
  }
214
 
215
  .btn-sm {
@@ -217,6 +278,15 @@ body {
217
  font-size: var(--text-xs);
218
  }
219
 
 
 
 
 
 
 
 
 
 
220
  .btn-lg {
221
  padding: 1rem 2rem;
222
  font-size: var(--text-base);
@@ -227,48 +297,50 @@ body {
227
  cursor: not-allowed;
228
  transform: none !important;
229
  }
230
-
231
- /* Modern Cards */
232
  .card {
233
- background: white;
234
- border-radius: var(--radius-lg);
235
- box-shadow: var(--shadow-sm);
236
  padding: var(--spacing-lg);
237
- transition: all var(--transition-base);
238
- border: 1px solid var(--dark-100);
239
  }
240
 
241
  .card:hover {
242
- box-shadow: var(--shadow-md);
243
- transform: translateY(-1px);
 
244
  }
245
 
246
  .card-gradient {
247
- background: linear-gradient(135deg, var(--primary-50), var(--secondary-50));
248
  }
249
 
250
  .card-glass {
251
- composes: glass;
 
252
  }
253
-
254
- /* Modern Forms */
255
  .form-group {
256
  margin-bottom: var(--spacing-lg);
257
  }
258
 
259
  .form-label {
260
  display: block;
261
- font-weight: 600;
262
  font-size: var(--text-sm);
263
- color: var(--dark-700);
264
  margin-bottom: var(--spacing-xs);
 
 
265
  }
266
 
267
  .form-input {
268
  width: 100%;
269
  padding: 0.75rem 1rem;
270
- border: 1.5px solid var(--dark-200);
271
- border-radius: var(--radius-md);
272
  font-size: var(--text-base);
273
  background: white;
274
  transition: all var(--transition-fast);
@@ -276,9 +348,8 @@ body {
276
 
277
  .form-input:focus {
278
  outline: none;
279
- border-color: var(--primary-500);
280
- box-shadow: 0 0 0 3px rgba(99, 102, 241, 0.1);
281
- transform: scale(1.005);
282
  }
283
 
284
  .form-input:invalid {
@@ -286,14 +357,13 @@ body {
286
  }
287
 
288
  .form-input:disabled {
289
- background: var(--dark-100);
290
  cursor: not-allowed;
291
  }
292
 
293
  .form-input::placeholder {
294
- color: var(--dark-400);
295
  }
296
-
297
  .form-textarea {
298
  resize: vertical;
299
  min-height: 120px;
@@ -333,12 +403,11 @@ body {
333
  color: var(--error-500);
334
  margin-top: var(--spacing-xs);
335
  }
336
-
337
- /* Modern Animation System */
338
  @keyframes fadeIn {
339
  from {
340
  opacity: 0;
341
- transform: translateY(20px) scale(0.95);
342
  }
343
  to {
344
  opacity: 1;
@@ -349,7 +418,7 @@ body {
349
  @keyframes slideUp {
350
  from {
351
  opacity: 0;
352
- transform: translateY(40px);
353
  }
354
  to {
355
  opacity: 1;
@@ -362,7 +431,7 @@ body {
362
  opacity: 1;
363
  }
364
  50% {
365
- opacity: 0.6;
366
  }
367
  }
368
 
@@ -384,21 +453,20 @@ body {
384
  }
385
 
386
  .animate-pulse {
387
- animation: pulse 2s infinite;
388
  }
389
 
390
  .animate-shimmer {
391
- background: linear-gradient(90deg, transparent 0%, rgba(255, 255, 255, 0.4) 50%, transparent 100%);
392
  background-size: 1000px 100%;
393
  animation: shimmer 2s infinite linear;
394
  }
395
-
396
- /* Skeleton Loading */
397
  .skeleton {
398
- background: linear-gradient(90deg, var(--dark-100) 25%, var(--dark-50) 50%, var(--dark-100) 75%);
399
  background-size: 200% 100%;
400
  animation: shimmer 1.5s infinite linear;
401
- border-radius: var(--radius-md);
402
  }
403
 
404
  .skeleton-text {
@@ -410,72 +478,71 @@ body {
410
  height: 200px;
411
  composes: skeleton;
412
  }
413
-
414
- /* Status Indicators */
415
  .status {
416
  display: inline-flex;
417
  align-items: center;
418
  gap: 0.25rem;
419
  padding: 0.25rem 0.5rem;
420
  font-size: var(--text-xs);
421
- font-weight: 500;
422
- border-radius: 9999px;
 
 
423
  }
424
 
425
  .status-published {
426
- background: var(--success-50);
427
- color: var(--success-500);
428
  }
429
 
430
  .status-scheduled {
431
- background: var(--primary-50);
432
- color: var(--primary-600);
433
  }
434
 
435
  .status-draft {
436
- background: var(--secondary-50);
437
- color: var(--secondary-500);
438
  }
439
 
440
  .status-error {
441
- background: var(--error-50);
442
- color: var(--error-500);
443
  }
444
 
445
  .status-warning {
446
- background: var(--warning-50);
447
- color: var(--warning-500);
448
  }
449
-
450
- /* Platform-Specific Modern Colors */
451
  .platform-telegram {
452
- color: #0088cc;
453
- filter: drop-shadow(0 2px 4px rgba(0, 136, 204, 0.3));
454
  }
455
 
456
  .platform-vk {
457
- color: #4a76a8;
458
- filter: drop-shadow(0 2px 4px rgba(74, 118, 168, 0.3));
459
  }
460
 
461
  .platform-linkedin {
462
- color: #0077b5;
463
- filter: drop-shadow(0 2px 4px rgba(0, 119, 181, 0.3));
464
  }
465
 
466
  .platform-yandex-zen {
467
- color: #ff0000;
468
- filter: drop-shadow(0 2px 4px rgba(255, 0, 0, 0.3));
469
  }
470
-
471
- /* Modern Loading Spinner */
472
  .loading-spinner {
473
  position: relative;
474
  border-radius: 50%;
475
  width: 24px;
476
  height: 24px;
477
- border: 3px solid var(--dark-100);
478
- border-top-color: var(--primary-500);
479
  animation: spin 0.8s linear infinite;
480
  }
481
 
@@ -489,32 +556,30 @@ body {
489
  display: inline-block;
490
  width: 48px;
491
  height: 48px;
492
- border-radius: 50%;
493
- background: var(--primary-500);
494
  animation: pulse 1.2s cubic-bezier(0, 0, 0.2, 1) infinite;
495
  }
496
-
497
- /* Gradient Backgrounds */
498
  .gradient-primary {
499
- background: linear-gradient(135deg, var(--primary-500), var(--primary-600));
500
  }
501
 
502
  .gradient-secondary {
503
- background: linear-gradient(135deg, var(--secondary-500), var(--secondary-600));
504
  }
505
 
506
  .gradient-ocean {
507
- background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
508
  }
509
 
510
  .gradient-sunset {
511
- background: linear-gradient(135deg, #f093fb 0%, #f5576c 100%);
512
  }
513
 
514
  .gradient-forest {
515
- background: linear-gradient(135deg, #4facfe 0%, #00f2fe 100%);
516
  }
517
-
518
  /* Responsive Container */
519
  .container {
520
  width: 100%;
@@ -545,27 +610,48 @@ body {
545
  max-width: 1280px;
546
  }
547
  }
548
-
549
- /* Utility Classes */
550
  .text-gradient {
551
- background: linear-gradient(135deg, var(--primary-500), var(--primary-700));
552
  -webkit-background-clip: text;
553
  -webkit-text-fill-color: transparent;
554
  background-clip: text;
555
  }
556
 
557
  .glass-effect {
558
- background: rgba(255, 255, 255, 0.9);
559
- backdrop-filter: blur(10px);
560
- -webkit-backdrop-filter: blur(10px);
561
- border: 1px solid rgba(255, 255, 255, 0.2);
562
  }
563
 
564
  .neumorphic {
565
- background: var(--dark-50);
566
- box-shadow: 8px 8px 16px #d1d9e6, -8px -8px 16px #ffffff;
 
 
 
 
 
 
 
567
  }
568
 
569
- .aurora { background: linear-gradient(-45deg, #ee7752, #e73c7e, #23a6d5, #23d5ab); background-size: 400% 400%; animation: aurora 15s ease infinite; }
 
 
 
 
570
 
571
- @keyframes aurora { 0% { background-position: 0% 50%; } 50% { background-position: 100% 50%; } 100% { background-position: 0% 50%; } }
 
 
 
 
 
 
 
 
 
 
 
 
1
 
2
+ /* Brutal Typography Enhancements */
3
+ h1, h2, h3, h4, h5, h6 {
4
+ font-weight: 800;
5
+ letter-spacing: -0.5px;
6
+ text-transform: uppercase;
7
+ }
8
+
9
+ /* Brutal Border Utilities */
10
+ .brutal-border {
11
+ border: 3px solid var(--dark-800);
12
+ box-shadow: 4px 4px 0 var(--dark-800);
13
+ }
14
+
15
+ .brutal-shadow {
16
+ box-shadow: 6px 6px 0 rgba(0, 0, 0, 0.3);
17
+ }
18
+
19
+ /* Brutal Hover Effects */
20
+ .brutal-hover {
21
+ transition: all 0.2s cubic-bezier(0.25, 0.46, 0.45, 0.94);
22
+ }
23
+
24
+ .brutal-hover:hover {
25
+ transform: translate(-2px, -2px);
26
+ box-shadow: 8px 8px 0 rgba(0, 0, 0, 0.4);
27
+ }
28
+
29
+ /* Industrial Texture Overlay */
30
+ .industrial-overlay {
31
+ position: relative;
32
+ }
33
+
34
+ .industrial-overlay::before {
35
+ content: '';
36
+ position: absolute;
37
+ top: 0;
38
+ left: 0;
39
+ right: 0;
40
+ bottom: 0;
41
+ background-image:
42
+ repeating-linear-gradient(
43
+ 45deg,
44
+ transparent,
45
+ transparent 10px,
46
+ rgba(140, 140, 140, 0.05) 10px,
47
+ rgba(140, 140, 140, 0.05) 20px
48
+ );
49
+ pointer-events: none;
50
+ }
51
+
52
+
53
  /* Modern Design System */
54
  @import url('https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700&display=swap');
 
55
  :root {
56
+ /* Brutal Industrial Palette */
57
+ --primary-50: #f6f4f2;
58
+ --primary-100: #e8e2dc;
59
+ --primary-500: #8b5a2b; /* Brutal Brown */
60
+ --primary-600: #704214; /* Darker Brown */
61
+ --primary-700: #5a3410; /* Darkest Brown */
62
+
63
+ --secondary-50: #f5f5f6;
64
+ --secondary-100: #e5e7ea;
65
+ --secondary-500: #64748b; /* Steel Blue-Gray */
66
+ --secondary-600: #475569; /* Darker Steel */
67
+ --secondary-700: #334155; /* Darkest Steel */
68
 
69
+ --success-50: #f0f2f0;
70
+ --success-500: #38a169; /* Industrial Green */
 
 
71
 
72
+ --warning-50: #fffaf0;
73
+ --warning-500: #dd6b20; /* Warning Orange */
74
 
75
+ --error-50: #faf0f0;
76
+ --error-500: #c53030; /* Error Red */
77
 
78
+ --dark-50: #fafafa;
79
+ --dark-100: #f0f0f0;
80
+ --dark-200: #d1d1d1;
81
+ --dark-300: #b3b3b3;
82
+ --dark-400: #8c8c8c;
83
+ --dark-500: #666666;
84
+ --dark-600: #4d4d4d;
85
+ --dark-700: #333333;
86
+ --dark-800: #262626;
87
+ --dark-900: #1a1a1a;
88
 
89
+ /* Additional Brutal Colors */
90
+ --steel-50: #f8fafc;
91
+ --steel-100: #f1f5f9;
92
+ --steel-500: #475569; /* Raw Steel */
93
+ --steel-600: #334155; /* Dark Steel */
94
+ --steel-700: #1e293b; /* Darkest Steel */
 
 
 
 
95
 
96
+ --metal-50: #fafafa;
97
+ --metal-100: #f4f4f5;
98
+ --metal-500: #71717a; /* Cold Metal */
99
+ --metal-600: #52525b; /* Dark Metal */
100
+ --metal-700: #3f3f46; /* Darkest Metal */
101
+ /* Spacing */
102
  --spacing-xs: 0.25rem;
103
  --spacing-sm: 0.5rem;
104
  --spacing-md: 1rem;
 
137
  --transition-base: 300ms cubic-bezier(0.4, 0, 0.2, 1);
138
  --transition-slow: 500ms cubic-bezier(0.4, 0, 0.2, 1);
139
  }
140
+ /* Base Brutal Styles */
 
141
  * {
142
  font-family: var(--font-sans);
143
  box-sizing: border-box;
 
151
  body {
152
  margin: 0;
153
  padding: 0;
154
+ background: linear-gradient(135deg, var(--dark-50) 0%, var(--steel-50) 100%);
155
+ color: var(--dark-800);
156
  line-height: 1.6;
157
  -webkit-font-smoothing: antialiased;
158
  -moz-osx-font-smoothing: grayscale;
159
  }
160
+ /* Brutal Scrollbar */
 
161
  ::-webkit-scrollbar {
162
+ width: 10px;
163
  }
164
 
165
  ::-webkit-scrollbar-track {
166
  background: var(--dark-100);
167
+ border-radius: 0;
168
  }
169
 
170
  ::-webkit-scrollbar-thumb {
171
+ background: var(--steel-500);
172
+ border-radius: 0;
173
  }
174
 
175
  ::-webkit-scrollbar-thumb:hover {
176
+ background: var(--steel-600);
177
  }
178
+ /* Brutal Glass Effects */
 
179
  .glass {
180
+ background: rgba(51, 51, 51, 0.8);
181
+ backdrop-filter: blur(10px);
182
+ -webkit-backdrop-filter: blur(10px);
183
+ border: 1px solid rgba(140, 140, 140, 0.2);
184
  }
185
 
186
  .glass-dark {
187
+ background: rgba(26, 26, 26, 0.9);
188
+ backdrop-filter: blur(8px);
189
+ -webkit-backdrop-filter: blur(8px);
190
+ border: 1px solid rgba(71, 85, 105, 0.3);
191
  }
192
+ /* Brutal Button System */
 
193
  .btn {
194
  position: relative;
195
  display: inline-flex;
 
198
  gap: 0.5rem;
199
  padding: 0.75rem 1.5rem;
200
  border: none;
201
+ border-radius: var(--radius-sm);
202
  font-size: var(--text-sm);
203
+ font-weight: 700;
204
  text-decoration: none;
205
  cursor: pointer;
206
  transition: all var(--transition-fast);
207
  overflow: hidden;
208
+ text-transform: uppercase;
209
+ letter-spacing: 0.5px;
210
  }
211
 
212
  .btn:before {
 
216
  left: -100%;
217
  width: 100%;
218
  height: 100%;
219
+ background: linear-gradient(90deg, transparent, rgba(140, 140, 140, 0.3), transparent);
220
  transition: left 0.5s;
221
  }
222
 
 
225
  }
226
 
227
  .btn-primary {
228
+ background: var(--primary-600);
229
  color: white;
 
230
  }
231
 
232
  .btn-primary:hover {
233
+ background: var(--primary-700);
234
+ transform: translateY(-2px);
235
+ box-shadow: 0 8px 16px rgba(112, 66, 20, 0.3);
236
  }
237
 
238
  .btn-secondary {
239
+ background: var(--steel-600);
240
+ color: white;
 
241
  }
242
 
243
  .btn-secondary:hover {
244
+ background: var(--steel-700);
245
+ transform: translateY(-2px);
246
+ box-shadow: 0 8px 16px rgba(51, 65, 85, 0.3);
247
  }
248
 
249
  .btn-success {
250
+ background: var(--success-500);
251
  color: white;
252
  }
253
 
254
  .btn-warning {
255
+ background: var(--warning-500);
256
  color: white;
257
  }
258
 
259
  .btn-error {
260
+ background: var(--error-500);
261
  color: white;
262
  }
263
 
264
  .btn-ghost {
265
  background: transparent;
266
+ color: var(--dark-700);
267
+ border: 2px solid var(--dark-300);
268
  }
269
 
270
  .btn-ghost:hover {
271
+ background: var(--dark-800);
272
+ color: white;
273
+ border-color: var(--dark-800);
274
  }
275
 
276
  .btn-sm {
 
278
  font-size: var(--text-xs);
279
  }
280
 
281
+ .btn-lg {
282
+ padding: 1rem 2rem;
283
+ font-size: var(--text-base);
284
+ }
285
+ .btn-sm {
286
+ padding: 0.5rem 1rem;
287
+ font-size: var(--text-xs);
288
+ }
289
+
290
  .btn-lg {
291
  padding: 1rem 2rem;
292
  font-size: var(--text-base);
 
297
  cursor: not-allowed;
298
  transform: none !important;
299
  }
300
+ /* Brutal Cards */
 
301
  .card {
302
+ background: var(--dark-50);
303
+ border-radius: var(--radius-sm);
304
+ box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
305
  padding: var(--spacing-lg);
306
+ transition: all var(--transition-fast);
307
+ border: 2px solid var(--dark-200);
308
  }
309
 
310
  .card:hover {
311
+ box-shadow: 0 8px 16px rgba(0, 0, 0, 0.15);
312
+ transform: translateY(-2px);
313
+ border-color: var(--primary-600);
314
  }
315
 
316
  .card-gradient {
317
+ background: linear-gradient(135deg, var(--steel-100), var(--primary-100));
318
  }
319
 
320
  .card-glass {
321
+ background: rgba(71, 85, 105, 0.1);
322
+ border: 2px solid rgba(71, 85, 105, 0.2);
323
  }
324
+ /* Brutal Forms */
 
325
  .form-group {
326
  margin-bottom: var(--spacing-lg);
327
  }
328
 
329
  .form-label {
330
  display: block;
331
+ font-weight: 700;
332
  font-size: var(--text-sm);
333
+ color: var(--dark-800);
334
  margin-bottom: var(--spacing-xs);
335
+ text-transform: uppercase;
336
+ letter-spacing: 0.5px;
337
  }
338
 
339
  .form-input {
340
  width: 100%;
341
  padding: 0.75rem 1rem;
342
+ border: 2px solid var(--dark-300);
343
+ border-radius: var(--radius-sm);
344
  font-size: var(--text-base);
345
  background: white;
346
  transition: all var(--transition-fast);
 
348
 
349
  .form-input:focus {
350
  outline: none;
351
+ border-color: var(--primary-600);
352
+ box-shadow: 0 0 0 3px rgba(112, 66, 20, 0.1);
 
353
  }
354
 
355
  .form-input:invalid {
 
357
  }
358
 
359
  .form-input:disabled {
360
+ background: var(--dark-200);
361
  cursor: not-allowed;
362
  }
363
 
364
  .form-input::placeholder {
365
+ color: var(--dark-500);
366
  }
 
367
  .form-textarea {
368
  resize: vertical;
369
  min-height: 120px;
 
403
  color: var(--error-500);
404
  margin-top: var(--spacing-xs);
405
  }
406
+ /* Brutal Animation System */
 
407
  @keyframes fadeIn {
408
  from {
409
  opacity: 0;
410
+ transform: translateY(30px) scale(0.9);
411
  }
412
  to {
413
  opacity: 1;
 
418
  @keyframes slideUp {
419
  from {
420
  opacity: 0;
421
+ transform: translateY(50px);
422
  }
423
  to {
424
  opacity: 1;
 
431
  opacity: 1;
432
  }
433
  50% {
434
+ opacity: 0.5;
435
  }
436
  }
437
 
 
453
  }
454
 
455
  .animate-pulse {
456
+ animation: pulse 1.5s infinite;
457
  }
458
 
459
  .animate-shimmer {
460
+ background: linear-gradient(90deg, transparent 0%, rgba(71, 85, 105, 0.4) 50%, transparent 100%);
461
  background-size: 1000px 100%;
462
  animation: shimmer 2s infinite linear;
463
  }
464
+ /* Brutal Skeleton Loading */
 
465
  .skeleton {
466
+ background: linear-gradient(90deg, var(--dark-200) 25%, var(--dark-100) 50%, var(--dark-200) 75%);
467
  background-size: 200% 100%;
468
  animation: shimmer 1.5s infinite linear;
469
+ border-radius: var(--radius-sm);
470
  }
471
 
472
  .skeleton-text {
 
478
  height: 200px;
479
  composes: skeleton;
480
  }
481
+ /* Brutal Status Indicators */
 
482
  .status {
483
  display: inline-flex;
484
  align-items: center;
485
  gap: 0.25rem;
486
  padding: 0.25rem 0.5rem;
487
  font-size: var(--text-xs);
488
+ font-weight: 700;
489
+ border-radius: var(--radius-sm);
490
+ text-transform: uppercase;
491
+ letter-spacing: 0.5px;
492
  }
493
 
494
  .status-published {
495
+ background: var(--success-500);
496
+ color: white;
497
  }
498
 
499
  .status-scheduled {
500
+ background: var(--steel-600);
501
+ color: white;
502
  }
503
 
504
  .status-draft {
505
+ background: var(--dark-500);
506
+ color: white;
507
  }
508
 
509
  .status-error {
510
+ background: var(--error-500);
511
+ color: white;
512
  }
513
 
514
  .status-warning {
515
+ background: var(--warning-500);
516
+ color: white;
517
  }
518
+ /* Brutal Platform-Specific Colors */
 
519
  .platform-telegram {
520
+ color: var(--steel-600);
521
+ filter: drop-shadow(0 2px 4px rgba(71, 85, 105, 0.4));
522
  }
523
 
524
  .platform-vk {
525
+ color: var(--steel-500);
526
+ filter: drop-shadow(0 2px 4px rgba(100, 116, 139, 0.4));
527
  }
528
 
529
  .platform-linkedin {
530
+ color: var(--metal-600);
531
+ filter: drop-shadow(0 2px 4px rgba(82, 82, 91, 0.4));
532
  }
533
 
534
  .platform-yandex-zen {
535
+ color: var(--warning-500);
536
+ filter: drop-shadow(0 2px 4px rgba(221, 107, 32, 0.4));
537
  }
538
+ /* Brutal Loading Spinner */
 
539
  .loading-spinner {
540
  position: relative;
541
  border-radius: 50%;
542
  width: 24px;
543
  height: 24px;
544
+ border: 3px solid var(--dark-200);
545
+ border-top-color: var(--steel-600);
546
  animation: spin 0.8s linear infinite;
547
  }
548
 
 
556
  display: inline-block;
557
  width: 48px;
558
  height: 48px;
559
+ border-radius: 2px;
560
+ background: var(--steel-600);
561
  animation: pulse 1.2s cubic-bezier(0, 0, 0.2, 1) infinite;
562
  }
563
+ /* Brutal Gradient Backgrounds */
 
564
  .gradient-primary {
565
+ background: linear-gradient(135deg, var(--primary-600), var(--primary-700));
566
  }
567
 
568
  .gradient-secondary {
569
+ background: linear-gradient(135deg, var(--steel-500), var(--steel-600));
570
  }
571
 
572
  .gradient-ocean {
573
+ background: linear-gradient(135deg, var(--steel-600), var(--primary-600));
574
  }
575
 
576
  .gradient-sunset {
577
+ background: linear-gradient(135deg, var(--warning-500), var(--primary-600));
578
  }
579
 
580
  .gradient-forest {
581
+ background: linear-gradient(135deg, var(--steel-700), var(--primary-700));
582
  }
 
583
  /* Responsive Container */
584
  .container {
585
  width: 100%;
 
610
  max-width: 1280px;
611
  }
612
  }
613
+ /* Brutal Utility Classes */
 
614
  .text-gradient {
615
+ background: linear-gradient(135deg, var(--primary-600), var(--steel-600));
616
  -webkit-background-clip: text;
617
  -webkit-text-fill-color: transparent;
618
  background-clip: text;
619
  }
620
 
621
  .glass-effect {
622
+ background: rgba(51, 51, 51, 0.85);
623
+ backdrop-filter: blur(8px);
624
+ -webkit-backdrop-filter: blur(8px);
625
+ border: 1px solid rgba(140, 140, 140, 0.2);
626
  }
627
 
628
  .neumorphic {
629
+ background: var(--dark-100);
630
+ box-shadow: 6px 6px 12px var(--dark-300), -6px -6px 12px var(--dark-50);
631
+ }
632
+
633
+ /* Brutal Aurora - Industrial Dawn */
634
+ .aurora {
635
+ background: linear-gradient(-45deg, var(--primary-700), var(--steel-600), var(--dark-700), var(--metal-600));
636
+ background-size: 400% 400%;
637
+ animation: aurora 20s ease infinite;
638
  }
639
 
640
+ @keyframes aurora {
641
+ 0% { background-position: 0% 50%; }
642
+ 50% { background-position: 100% 50%; }
643
+ 100% { background-position: 0% 50%; }
644
+ }
645
 
646
+ /* Brutal Steel Accent */
647
+ .steel-accent {
648
+ color: var(--steel-500);
649
+ font-weight: 700;
650
+ }
651
+
652
+ /* Concrete Texture Effect */
653
+ .concrete-texture {
654
+ background-image:
655
+ radial-gradient(circle at 1px 1px, rgba(140,140,140,0.15) 1px, transparent 0);
656
+ background-size: 20px 20px;
657
+ }