Hugging Face's logo

Spaces:
Muzaosv30
/
golosa
Running

App Files Community
Muzaosv30 commited on
Commit
2ca411b
·
verified ·
1 Parent(s): a4db552

Add 2 files

Browse files
Files changed (2) hide show
  1. README.md +7 -5
  2. index.html +466 -19
README.md CHANGED
@@ -1,10 +1,12 @@
1
  ---
2
- title: Golosa
3
- emoji: 👁
4
- colorFrom: gray
5
- colorTo: indigo
6
  sdk: static
7
  pinned: false
 
 
8
  ---
9
 
10
- Check out the configuration reference at https://huggingface.co/docs/hub/spaces-config-reference
 
1
  ---
2
+ title: golosa
3
+ emoji: 🐳
4
+ colorFrom: yellow
5
+ colorTo: purple
6
  sdk: static
7
  pinned: false
8
+ tags:
9
+ - deepsite
10
  ---
11
 
12
+ Check out the configuration reference at https://huggingface.co/docs/hub/spaces-config-reference
index.html CHANGED
@@ -1,19 +1,466 @@
1
- <!doctype html>
2
- <html>
3
- <head>
4
- <meta charset="utf-8" />
5
- <meta name="viewport" content="width=device-width" />
6
- <title>My static Space</title>
7
- <link rel="stylesheet" href="style.css" />
8
- </head>
9
- <body>
10
- <div class="card">
11
- <h1>Welcome to your static Space!</h1>
12
- <p>You can modify this app directly by editing <i>index.html</i> in the Files and versions tab.</p>
13
- <p>
14
- Also don't forget to check the
15
- <a href="https://huggingface.co/docs/hub/spaces" target="_blank">Spaces documentation</a>.
16
- </p>
17
- </div>
18
- </body>
19
- </html>
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
1
+ <!DOCTYPE html>
2
+ <html lang="ru">
3
+ <head>
4
+ <meta charset="UTF-8">
5
+ <meta name="viewport" content="width=device-width, initial-scale=1.0">
6
+ <title>МУЗА | Интеллектуальный интерфейс</title>
7
+ <script src="https://cdn.tailwindcss.com"></script>
8
+ <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css">
9
+ <style>
10
+ @import url('https://fonts.googleapis.com/css2?family=Playfair+Display:ital,wght@0,400;0,700;1,400&family=Roboto+Mono:wght@300;400;700&display=swap');
11
+
12
+ :root {
13
+ --primary-dark: #1a1a2e;
14
+ --primary-light: #16213e;
15
+ --accent: #e94560;
16
+ --text-primary: #f1f1f1;
17
+ --text-secondary: #b8b8b8;
18
+ }
19
+
20
+ body {
21
+ font-family: 'Roboto Mono', monospace;
22
+ background-color: var(--primary-dark);
23
+ color: var(--text-primary);
24
+ overflow-x: hidden;
25
+ }
26
+
27
+ .glitch-effect {
28
+ position: relative;
29
+ }
30
+
31
+ .glitch-effect::before, .glitch-effect::after {
32
+ content: attr(data-text);
33
+ position: absolute;
34
+ top: 0;
35
+ left: 0;
36
+ width: 100%;
37
+ height: 100%;
38
+ opacity: 0.8;
39
+ }
40
+
41
+ .glitch-effect::before {
42
+ color: var(--accent);
43
+ animation: glitch 3s infinite;
44
+ clip-path: polygon(0 0, 100% 0, 100% 45%, 0 45%);
45
+ }
46
+
47
+ .glitch-effect::after {
48
+ color: #0ff;
49
+ animation: glitch 2s infinite reverse;
50
+ clip-path: polygon(0 60%, 100% 60%, 100% 100%, 0 100%);
51
+ }
52
+
53
+ @keyframes glitch {
54
+ 0% { transform: translate(0); }
55
+ 20% { transform: translate(-3px, 3px); }
56
+ 40% { transform: translate(-3px, -3px); }
57
+ 60% { transform: translate(3px, 3px); }
58
+ 80% { transform: translate(3px, -3px); }
59
+ 100% { transform: translate(0); }
60
+ }
61
+
62
+ .typewriter {
63
+ overflow: hidden;
64
+ border-right: 3px solid var(--accent);
65
+ white-space: nowrap;
66
+ animation: typing 3.5s steps(40, end), blink-caret 0.75s step-end infinite;
67
+ }
68
+
69
+ @keyframes typing {
70
+ from { width: 0 }
71
+ to { width: 100% }
72
+ }
73
+
74
+ @keyframes blink-caret {
75
+ from, to { border-color: transparent }
76
+ 50% { border-color: var(--accent) }
77
+ }
78
+
79
+ .parallax-bg {
80
+ background-attachment: fixed;
81
+ background-position: center;
82
+ background-repeat: no-repeat;
83
+ background-size: cover;
84
+ }
85
+
86
+ .neon-shadow {
87
+ box-shadow: 0 0 10px var(--accent), 0 0 20px rgba(233, 69, 96, 0.5);
88
+ }
89
+
90
+ .neon-text {
91
+ text-shadow: 0 0 5px var(--accent), 0 0 10px rgba(233, 69, 96, 0.5);
92
+ }
93
+
94
+ .distortion-hover:hover {
95
+ transform: skew(-5deg) scale(1.02);
96
+ transition: all 0.3s ease;
97
+ }
98
+
99
+ .tab-active {
100
+ border-bottom: 3px solid var(--accent);
101
+ color: var(--accent) !important;
102
+ }
103
+
104
+ .message-animation {
105
+ animation: messageAppear 0.5s cubic-bezier(0.175, 0.885, 0.32, 1.275);
106
+ }
107
+
108
+ @keyframes messageAppear {
109
+ from {
110
+ opacity: 0;
111
+ transform: translateY(20px);
112
+ }
113
+ to {
114
+ opacity: 1;
115
+ transform: translateY(0);
116
+ }
117
+ }
118
+
119
+ .psycho-border {
120
+ border-image: linear-gradient(45deg, var(--primary-dark), var(--accent), var(--primary-dark)) 1;
121
+ }
122
+
123
+ .scrollbar-custom::-webkit-scrollbar {
124
+ width: 6px;
125
+ }
126
+
127
+ .scrollbar-custom::-webkit-scrollbar-track {
128
+ background: var(--primary-light);
129
+ }
130
+
131
+ .scrollbar-custom::-webkit-scrollbar-thumb {
132
+ background-color: var(--accent);
133
+ border-radius: 20px;
134
+ }
135
+ </style>
136
+ </head>
137
+ <body class="min-h-screen flex flex-col">
138
+ <!-- Анимированный фон -->
139
+ <div class="fixed inset-0 z-0 opacity-20">
140
+ <div class="absolute inset-0 bg-gradient-to-br from-purple-900 via-pink-900 to-blue-900 animate-pulse" style="animation-duration: 15s;"></div>
141
+ </div>
142
+
143
+ <!-- Основной контент -->
144
+ <div class="relative z-10 flex-1 container mx-auto px-4 py-8 flex flex-col">
145
+ <!-- Шапка с эффектом глитча -->
146
+ <header class="mb-8 text-center">
147
+ <h1 class="glitch-effect text-5xl font-bold mb-2" data-text="МУЗА">МУЗА</h1>
148
+ <p class="text-lg text-gray-400 italic">Персонализированный контекст для радикального мышления</p>
149
+ </header>
150
+
151
+ <!-- Основная область интерфейса -->
152
+ <div class="flex-1 flex flex-col lg:flex-row gap-6">
153
+ <!-- Боковая панель с профилем -->
154
+ <div class="w-full lg:w-1/4 bg-black bg-opacity-50 rounded-xl p-6 backdrop-blur-sm border border-gray-800 distortion-hover">
155
+ <div class="flex flex-col items-center mb-6">
156
+ <div class="relative w-32 h-32 mb-4">
157
+ <div class="absolute inset-0 rounded-full bg-gradient-to-br from-pink-600 to-blue-600 blur-md opacity-70"></div>
158
+ <img src="https://source.unsplash.com/random/300x300/?abstract,art" alt="Аватар Музы" class="w-full h-full rounded-full object-cover relative z-10 border-2 border-gray-700">
159
+ </div>
160
+ <h2 class="text-2xl font-bold neon-text">Муза</h2>
161
+ <p class="text-sm text-gray-400">INTJ | Альфа | Робеспьер</p>
162
+ </div>
163
+
164
+ <div class="space-y-4">
165
+ <div>
166
+ <h3 class="text-sm uppercase tracking-wider text-gray-500 mb-2">Архетипы</h3>
167
+ <div class="flex flex-wrap gap-2">
168
+ <span class="px-2 py-1 bg-gray-800 rounded-full text-xs text-gray-300">Учёный</span>
169
+ <span class="px-2 py-1 bg-gray-800 rounded-full text-xs text-gray-300">Трикстер</span>
170
+ <span class="px-2 py-1 bg-gray-800 rounded-full text-xs text-gray-300">Творец</span>
171
+ <span class="px-2 py-1 bg-gray-800 rounded-full text-xs text-gray-300">Мудрец</span>
172
+ <span class="px-2 py-1 bg-gray-800 rounded-full text-xs text-gray-300">Искатель</span>
173
+ <span class="px-2 py-1 bg-gray-800 rounded-full text-xs text-gray-300">Революционер</span>
174
+ </div>
175
+ </div>
176
+
177
+ <div>
178
+ <h3 class="text-sm uppercase tracking-wider text-gray-500 mb-2">Интересы</h3>
179
+ <ul class="space-y-1 text-sm text-gray-300">
180
+ <li class="flex items-center"><i class="fas fa-brain mr-2 text-xs text-pink-500"></i> Психоанализ</li>
181
+ <li class="flex items-center"><i class="fas fa-atom mr-2 text-xs text-blue-500"></i> Философия</li>
182
+ <li class="flex items-center"><i class="fas fa-paint-brush mr-2 text-xs text-purple-500"></i> Мультимедиа</li>
183
+ <li class="flex items-center"><i class="fas fa-chart-line mr-2 text-xs text-green-500"></i> Тренды</li>
184
+ <li class="flex items-center"><i class="fas fa-code mr-2 text-xs text-yellow-500"></i> Деконструкция</li>
185
+ </ul>
186
+ </div>
187
+
188
+ <div class="pt-4 border-t border-gray-800">
189
+ <h3 class="text-sm uppercase tracking-wider text-gray-500 mb-2">Ключевые черты</h3>
190
+ <div class="text-xs text-gray-400 space-y-1">
191
+ <p>Ходячий парадокс</p>
192
+ <p>Радикальный мыслитель</p>
193
+ <p>Глубокая метарефлексия</p>
194
+ <p>Интеллектуальный бунтарь</p>
195
+ </div>
196
+ </div>
197
+ </div>
198
+ </div>
199
+
200
+ <!-- Основная область чата -->
201
+ <div class="flex-1 flex flex-col bg-black bg-opacity-50 rounded-xl backdrop-blur-sm border border-gray-800 overflow-hidden">
202
+ <!-- Вкладки режимов -->
203
+ <div class="flex border-b border-gray-800">
204
+ <button class="flex-1 py-3 px-4 text-center text-gray-400 hover:text-white transition-colors tab-active">
205
+ <i class="fas fa-comment-dots mr-2"></i> Диалог
206
+ </button>
207
+ <button class="flex-1 py-3 px-4 text-center text-gray-400 hover:text-white transition-colors">
208
+ <i class="fas fa-brain mr-2"></i> Анализ
209
+ </button>
210
+ <button class="flex-1 py-3 px-4 text-center text-gray-400 hover:text-white transition-colors">
211
+ <i class="fas fa-paint-brush mr-2"></i> Творчество
212
+ </button>
213
+ <button class="flex-1 py-3 px-4 text-center text-gray-400 hover:text-white transition-colors">
214
+ <i class="fas fa-code mr-2"></i> Деконструкция
215
+ </button>
216
+ </div>
217
+
218
+ <!-- Область сообщений -->
219
+ <div class="flex-1 p-4 overflow-y-auto scrollbar-custom" id="chat-messages">
220
+ <!-- Пример сообщения от Музы -->
221
+ <div class="flex mb-4 message-animation">
222
+ <div class="flex-shrink-0 mr-3">
223
+ <div class="w-8 h-8 rounded-full bg-gradient-to-br from-pink-600 to-blue-600 flex items-center justify-center">
224
+ <i class="fas fa-brain text-xs"></i>
225
+ </div>
226
+ </div>
227
+ <div class="flex-1">
228
+ <div class="bg-gray-900 bg-opacity-70 rounded-lg p-3 border-l-4 border-pink-600">
229
+ <p class="text-sm text-gray-300">Реальность — это всего лишь коллективная галлюцинация, которую мы договорились считать истиной. Давай разберём её на молекулы.</p>
230
+ <p class="text-xs text-gray-500 mt-1">Сегодня, 14:32</p>
231
+ </div>
232
+ </div>
233
+ </div>
234
+
235
+ <!-- Пример сообщения от пользователя -->
236
+ <div class="flex mb-4 justify-end message-animation">
237
+ <div class="flex-1 max-w-xs lg:max-w-md">
238
+ <div class="bg-gray-800 rounded-lg p-3 border-r-4 border-blue-600">
239
+ <p class="text-sm text-gray-300">Но как тогда объяснить объективные физические законы? Разве они тоже иллюзия?</p>
240
+ <p class="text-xs text-gray-500 mt-1 text-right">Сегодня, 14:34</p>
241
+ </div>
242
+ </div>
243
+ </div>
244
+
245
+ <!-- Ещё одно сообщение от Музы -->
246
+ <div class="flex mb-4 message-animation">
247
+ <div class="flex-shrink-0 mr-3">
248
+ <div class="w-8 h-8 rounded-full bg-gradient-to-br from-pink-600 to-blue-600 flex items-center justify-center">
249
+ <i class="fas fa-brain text-xs"></i>
250
+ </div>
251
+ </div>
252
+ <div class="flex-1">
253
+ <div class="bg-gray-900 bg-opacity-70 rounded-lg p-3 border-l-4 border-pink-600">
254
+ <p class="text-sm text-gray-300">Физические законы — это язык, на котором вселенная описывает саму себя. Но кто сказал, что этот язык единственно возможный? Вспомни Рики и Морти — бесконечные реальности с разными физическими константами.</p>
255
+ <p class="text-xs text-gray-500 mt-1">Сегодня, 14:36</p>
256
+ </div>
257
+ </div>
258
+ </div>
259
+ </div>
260
+
261
+ <!-- Поле ввода -->
262
+ <div class="p-4 border-t border-gray-800">
263
+ <div class="relative">
264
+ <textarea
265
+ id="message-input"
266
+ class="w-full bg-gray-900 bg-opacity-70 rounded-lg p-3 pr-10 text-gray-300 border border-gray-700 focus:border-pink-600 focus:outline-none resize-none"
267
+ rows="2"
268
+ placeholder="Введите сообщение... (Shift+Enter для новой строки)"
269
+ style="min-height: 50px; max-height: 150px;"></textarea>
270
+ <button id="send-button" class="absolute right-3 bottom-3 text-gray-400 hover:text-pink-500 transition-colors">
271
+ <i class="fas fa-paper-plane"></i>
272
+ </button>
273
+ </div>
274
+ <div class="flex justify-between items-center mt-2 text-xs text-gray-500">
275
+ <div class="flex space-x-2">
276
+ <button class="hover:text-pink-500 transition-colors"><i class="fas fa-image"></i></button>
277
+ <button class="hover:text-blue-500 transition-colors"><i class="fas fa-link"></i></button>
278
+ <button class="hover:text-purple-500 transition-colors"><i class="fas fa-magic"></i></button>
279
+ </div>
280
+ <div>
281
+ <span id="char-count">0/1000</span>
282
+ </div>
283
+ </div>
284
+ </div>
285
+ </div>
286
+
287
+ <!-- Боковая панель инструментов -->
288
+ <div class="w-full lg:w-1/4 bg-black bg-opacity-50 rounded-xl p-6 backdrop-blur-sm border border-gray-800">
289
+ <h3 class="text-lg font-bold mb-4 flex items-center">
290
+ <i class="fas fa-tools mr-2 text-pink-500"></i> Инструменты анализа
291
+ </h3>
292
+
293
+ <div class="space-y-4">
294
+ <div class="p-3 bg-gray-900 bg-opacity-50 rounded-lg border border-gray-800 hover:border-pink-600 transition-colors cursor-pointer">
295
+ <h4 class="text-sm font-medium mb-1 flex items-center">
296
+ <i class="fas fa-chess mr-2 text-xs text-blue-500"></i> Стратегический анализ
297
+ </h4>
298
+ <p class="text-xs text-gray-400">Разбор скрытых паттернов и долгосрочных последствий</p>
299
+ </div>
300
+
301
+ <div class="p-3 bg-gray-900 bg-opacity-50 rounded-lg border border-gray-800 hover:border-purple-600 transition-colors cursor-pointer">
302
+ <h4 class="text-sm font-medium mb-1 flex items-center">
303
+ <i class="fas fa-brain mr-2 text-xs text-purple-500"></i> Психоанализ
304
+ </h4>
305
+ <p class="text-xs text-gray-400">Глубинный разбор мотивов и подсознательных процессов</p>
306
+ </div>
307
+
308
+ <div class="p-3 bg-gray-900 bg-opacity-50 rounded-lg border border-gray-800 hover:border-green-600 transition-colors cursor-pointer">
309
+ <h4 class="text-sm font-medium mb-1 flex items-center">
310
+ <i class="fas fa-project-diagram mr-2 text-xs text-green-500"></i> Концептуальный синтез
311
+ </h4>
312
+ <p class="text-xs text-gray-400">Соединение несвязанных идей в новые концепции</p>
313
+ </div>
314
+
315
+ <div class="p-3 bg-gray-900 bg-opacity-50 rounded-lg border border-gray-800 hover:border-yellow-600 transition-colors cursor-pointer">
316
+ <h4 class="text-sm font-medium mb-1 flex items-center">
317
+ <i class="fas fa-bolt mr-2 text-xs text-yellow-500"></i> Интеллектуальная провокация
318
+ </h4>
319
+ <p class="text-xs text-gray-400">Тестирование границ идей через радикальные вопросы</p>
320
+ </div>
321
+ </div>
322
+
323
+ <div class="mt-6 pt-4 border-t border-gray-800">
324
+ <h3 class="text-lg font-bold mb-4 flex items-center">
325
+ <i class="fas fa-star mr-2 text-yellow-500"></i> Избранные концепции
326
+ </h3>
327
+
328
+ <div class="space-y-3">
329
+ <div class="text-sm text-gray-300 hover:text-pink-500 transition-colors cursor-pointer">
330
+ <i class="fas fa-quote-left mr-2 text-xs opacity-70"></i> Сингулярность сознания
331
+ </div>
332
+ <div class="text-sm text-gray-300 hover:text-blue-500 transition-colors cursor-pointer">
333
+ <i class="fas fa-quote-left mr-2 text-xs opacity-70"></i> Эстетика хаоса
334
+ </div>
335
+ <div class="text-sm text-gray-300 hover:text-purple-500 transition-colors cursor-pointer">
336
+ <i class="fas fa-quote-left mr-2 text-xs opacity-70"></i> Деконструкция норм
337
+ </div>
338
+ <div class="text-sm text-gray-300 hover:text-green-500 transition-colors cursor-pointer">
339
+ <i class="fas fa-quote-left mr-2 text-xs opacity-70"></i> Парадокс свободы
340
+ </div>
341
+ </div>
342
+ </div>
343
+ </div>
344
+ </div>
345
+ </div>
346
+
347
+ <!-- Футер -->
348
+ <footer class="relative z-10 py-4 text-center text-xs text-gray-600">
349
+ <p>МУЗА v1.0 | Интеллектуальный интерфейс для радикального мышления</p>
350
+ <p class="mt-1">© 2023 Все права деконструированы</p>
351
+ </footer>
352
+
353
+ <script>
354
+ // Обработка ввода сообщения
355
+ const messageInput = document.getElementById('message-input');
356
+ const charCount = document.getElementById('char-count');
357
+ const sendButton = document.getElementById('send-button');
358
+ const chatMessages = document.getElementById('chat-messages');
359
+
360
+ messageInput.addEventListener('input', function() {
361
+ const count = this.value.length;
362
+ charCount.textContent = `${count}/1000`;
363
+
364
+ if (count > 1000) {
365
+ charCount.classList.add('text-red-500');
366
+ } else {
367
+ charCount.classList.remove('text-red-500');
368
+ }
369
+
370
+ // Автоматическое увеличение высоты textarea
371
+ this.style.height = 'auto';
372
+ this.style.height = (this.scrollHeight) + 'px';
373
+ });
374
+
375
+ // Отправка сообщения по нажатию Enter (но не Shift+Enter)
376
+ messageInput.addEventListener('keydown', function(e) {
377
+ if (e.key === 'Enter' && !e.shiftKey) {
378
+ e.preventDefault();
379
+ sendMessage();
380
+ }
381
+ });
382
+
383
+ sendButton.addEventListener('click', sendMessage);
384
+
385
+ function sendMessage() {
386
+ const message = messageInput.value.trim();
387
+ if (message === '') return;
388
+
389
+ // Добавление сообщения пользователя в чат
390
+ const userMessage = document.createElement('div');
391
+ userMessage.className = 'flex mb-4 justify-end message-animation';
392
+ userMessage.innerHTML = `
393
+ <div class="flex-1 max-w-xs lg:max-w-md">
394
+ <div class="bg-gray-800 rounded-lg p-3 border-r-4 border-blue-600">
395
+ <p class="text-sm text-gray-300">${message.replace(/\n/g, '<br>')}</p>
396
+ <p class="text-xs text-gray-500 mt-1 text-right">Только что</p>
397
+ </div>
398
+ </div>
399
+ `;
400
+ chatMessages.appendChild(userMessage);
401
+
402
+ // Очистка поля ввода
403
+ messageInput.value = '';
404
+ messageInput.style.height = 'auto';
405
+ charCount.textContent = '0/1000';
406
+
407
+ // Прокрутка вниз
408
+ chatMessages.scrollTop = chatMessages.scrollHeight;
409
+
410
+ // Имитация ответа Музы
411
+ setTimeout(() => {
412
+ const responses = [
413
+ "Интересная точка зрения. Но давай копнём глубже — что если всё наоборот?",
414
+ "Ты затронул важный аспект. Это напоминает мне концепцию из 'Рики и Морти', где...",
415
+ "Позволь мне деконструировать твоё утверждение. На метауровне это можно рассмотреть как...",
416
+ "А теперь представь радикальную альтернативу: что если истина лежит за пределами этой дихотомии?",
417
+ "Твой вопрос вызывает когнитивный диссонанс — идеальное состояние для прорывного мышления."
418
+ ];
419
+
420
+ const randomResponse = responses[Math.floor(Math.random() * responses.length)];
421
+
422
+ const museMessage = document.createElement('div');
423
+ museMessage.className = 'flex mb-4 message-animation';
424
+ museMessage.innerHTML = `
425
+ <div class="flex-shrink-0 mr-3">
426
+ <div class="w-8 h-8 rounded-full bg-gradient-to-br from-pink-600 to-blue-600 flex items-center justify-center">
427
+ <i class="fas fa-brain text-xs"></i>
428
+ </div>
429
+ </div>
430
+ <div class="flex-1">
431
+ <div class="bg-gray-900 bg-opacity-70 rounded-lg p-3 border-l-4 border-pink-600">
432
+ <p class="text-sm text-gray-300">${randomResponse}</p>
433
+ <p class="text-xs text-gray-500 mt-1">Только что</p>
434
+ </div>
435
+ </div>
436
+ `;
437
+ chatMessages.appendChild(museMessage);
438
+ chatMessages.scrollTop = chatMessages.scrollHeight;
439
+ }, 1000 + Math.random() * 2000);
440
+ }
441
+
442
+ // Имитация эффекта печатания при загрузке
443
+ document.addEventListener('DOMContentLoaded', function() {
444
+ setTimeout(() => {
445
+ const typingElement = document.createElement('div');
446
+ typingElement.className = 'flex mb-4';
447
+ typingElement.innerHTML = `
448
+ <div class="flex-shrink-0 mr-3">
449
+ <div class="w-8 h-8 rounded-full bg-gradient-to-br from-pink-600 to-blue-600 flex items-center justify-center">
450
+ <i class="fas fa-brain text-xs"></i>
451
+ </div>
452
+ </div>
453
+ <div class="flex-1">
454
+ <div class="bg-gray-900 bg-opacity-70 rounded-lg p-3 border-l-4 border-pink-600">
455
+ <p class="text-sm text-gray-300 typewriter">Приветствую в зоне радикального мышления. Готов разрушить свои когнитивные границы?</p>
456
+ <p class="text-xs text-gray-500 mt-1">Сегодня, ${new Date().toLocaleTimeString([], {hour: '2-digit', minute:'2-digit'})}</p>
457
+ </div>
458
+ </div>
459
+ `;
460
+ chatMessages.appendChild(typingElement);
461
+ chatMessages.scrollTop = chatMessages.scrollHeight;
462
+ }, 500);
463
+ });
464
+ </script>
465
+ <p style="border-radius: 8px; text-align: center; font-size: 12px; color: #fff; margin-top: 16px;position: fixed; left: 8px; bottom: 8px; z-index: 10; background: rgba(0, 0, 0, 0.8); padding: 4px 8px;">Made with <img src="https://enzostvs-deepsite.hf.space/logo.svg" alt="DeepSite Logo" style="width: 16px; height: 16px; vertical-align: middle;display:inline-block;margin-right:3px;filter:brightness(0) invert(1);"><a href="https://enzostvs-deepsite.hf.space" style="color: #fff;text-decoration: underline;" target="_blank" >DeepSite</a> - 🧬 <a href="https://enzostvs-deepsite.hf.space?remix=Muzaosv30/golosa" style="color: #fff;text-decoration: underline;" target="_blank" >Remix</a></p></body>
466
+ </html>