мне нужен портал проекта Технозаметки Малышева (канал в телеграме @tsingular)

темный кибер стиль.
удобная CMS для добавления новых разделов и статей.
база данных на SQLite локальная
будут и новости технологий и обучения и каталог полезных ссылок, записи докладов, демо приложений и ИИ чат бот ассистент справа внизу, которому можно задать вопросы по порталу, записаться на консультацию.
продумай профессиональную красивую современную структуру в едином стиле.

README.md

@@ -1,10 +1,13 @@
 ---
-title: Singularity Nexus Portal
-emoji: 📉
-colorFrom: indigo
+title: Singularity Nexus Portal 🚀
+colorFrom: green
 colorTo: blue
+emoji: 🐳
 sdk: static
 pinned: false
+tags:
+  - deepsite-v3
 ---
 
-Check out the configuration reference at https://huggingface.co/docs/hub/spaces-config-reference
+# Welcome to your new DeepSite project!
+This project was created with [DeepSite](https://huggingface.co/deepsite).

components/ai-assistant.js

@@ -0,0 +1,326 @@
+class AIAssistant extends HTMLElement {
+    constructor() {
+        super();
+        this.isOpen = false;
+        this.messages = [];
+    }
+
+    connectedCallback() {
+        this.attachShadow({ mode: 'open' });
+        this.render();
+        this.setupEventListeners();
+        this.loadInitialMessage();
+    }
+
+    render() {
+        this.shadowRoot.innerHTML = `
+            <style>
+                :host {
+                    display: block;
+                    position: fixed;
+                    bottom: 20px;
+                    right: 20px;
+                    z-index: 1000;
+                }
+                
+                .ai-toggle-button {
+                    width: 60px;
+                    height: 60px;
+                    border-radius: 50%;
+                    background: linear-gradient(45deg, #00ff88, #00a2ff);
+                    border: none;
+                    color: #050508;
+                    cursor: pointer;
+                    box-shadow: 0 5px 20px rgba(0, 255, 136, 0.4);
+                    transition: all 0.3s ease;
+                    display: flex;
+                    align-items: center;
+                    justify-content: center;
+                    font-size: 1.5rem;
+                }
+                
+                .ai-toggle-button:hover {
+                    transform: scale(1.1);
+                    box-shadow: 0 8px 25px rgba(0, 255, 136, 0.6);
+                }
+                
+                .ai-chat-window {
+                    position: absolute;
+                    bottom: 70px;
+                    right: 0;
+                    width: 350px;
+                    height: 500px;
+                    background: #0a0a0f;
+                    border: 1px solid #00ff88;
+                    border-radius: 12px;
+                    box-shadow: 0 10px 40px rgba(0, 255, 136, 0.3);
+                    display: none;
+                    flex-direction: column;
+                }
+                
+                .ai-chat-window.active {
+                    display: flex;
+                }
+                
+                .ai-chat-header {
+                    padding: 16px;
+                    background: linear-gradient(45deg, #00ff88, #00a2ff);
+                    border-radius: 12px 12px 0 0;
+                    color: #050508;
+                    font-weight: 600;
+                    display: flex;
+                    justify-content: space-between;
+                    align-items: center;
+                }
+                
+                .ai-chat-messages {
+                    flex: 1;
+                    padding: 16px;
+                    overflow-y: auto;
+                    display: flex;
+                    flex-direction: column;
+                    gap: 12px;
+                }
+                
+                .ai-message {
+                    padding: 12px;
+                    border-radius: 8px;
+                    max-width: 80%;
+                    word-wrap: break-word;
+                }
+                
+                .ai-message.user {
+                    align-self: flex-end;
+                    background: linear-gradient(45deg, #00a2ff, #00ff88);
+                    color: #050508;
+                }
+                
+                .ai-message.assistant {
+                    align-self: flex-start;
+                    background: #1a1a2e;
+                    border: 1px solid #2a2a3e;
+                }
+                
+                .ai-chat-input {
+                    padding: 16px;
+                    border-top: 1px solid #2a2a3e;
+                    display: flex;
+                    gap: 8px;
+                }
+                
+                .ai-chat-input input {
+                    flex: 1;
+                    padding: 8px 12px;
+                    background: #1a1a2e;
+                    border: 1px solid #2a2a3e;
+                    border-radius: 6px;
+                    color: white;
+                }
+                
+                .ai-chat-input button {
+                    padding: 8px 16px;
+                    background: #00ff88;
+                    border: none;
+                    border-radius: 6px;
+                    color: #050508;
+                    font-weight: 600;
+                    cursor: pointer;
+                }
+                
+                @media (max-width: 768px) {
+                    .ai-chat-window {
+                        width: 300px;
+                        height: 400px;
+                        right: -50px;
+                    }
+                }
+            </style>
+            
+            <div class="ai-assistant-container">
+                <button class="ai-toggle-button">
+                    <i data-feather="message-circle"></i>
+                </button>
+                
+                <div class="ai-chat-window">
+                    <div class="ai-chat-header">
+                        <span>AI Ассистент Nexus</span>
+                        <button class="close-button">
+                            <i data-feather="x"></i>
+                        </button>
+                    </div>
+                    
+                    <div class="ai-chat-messages" id="chat-messages">
+                        <!-- Messages will be added here -->
+                    </div>
+                    
+                    <div class="ai-chat-input">
+                        <input type="text" id="chat-input" placeholder="Задайте вопрос...">
+                        <button id="send-button">
+                            <i data-feather="send"></i>
+                        </button>
+                    </div>
+                </div>
+            </div>
+        `;
+        
+        setTimeout(() => {
+            if (typeof feather !== 'undefined') {
+                feather.replace();
+            }
+        }, 100);
+    }
+
+    setupEventListeners() {
+        const toggleButton = this.shadowRoot.querySelector('.ai-toggle-button');
+        const closeButton = this.shadowRoot.querySelector('.close-button');
+        const sendButton = this.shadowRoot.querySelector('#send-button');
+        const chatInput = this.shadowRoot.querySelector('#chat-input');
+        
+        if (toggleButton) {
+            toggleButton.addEventListener('click', () => {
+                this.toggleChat();
+            });
+        }
+        
+        if (closeButton) {
+            closeButton.addEventListener('click', () => {
+                this.closeChat();
+            });
+        }
+        
+        if (sendButton && chatInput) {
+            sendButton.addEventListener('click', () => {
+                this.sendMessage();
+            });
+            
+            chatInput.addEventListener('keypress', (e) => {
+                if (e.key === 'Enter') {
+                    this.sendMessage();
+                }
+            });
+        }
+    }
+
+    loadInitialMessage() {
+        const welcomeMessage = {
+            type: 'assistant',
+            text: 'Привет! Я ваш AI ассистент Nexus. Могу помочь с информацией о портале, записать на консультацию или ответить на вопросы о технологиях. Чем могу помочь?'
+        };
+        
+        this.addMessage(welcomeMessage);
+    }
+
+    toggleChat() {
+        this.isOpen = !this.isOpen;
+        const chatWindow = this.shadowRoot.querySelector('.ai-chat-window');
+        
+        if (chatWindow) {
+            chatWindow.classList.toggle('active', this.isOpen);
+        if (this.isOpen) {
+            const input = this.shadowRoot.querySelector('#chat-input');
+            if (input) {
+                input.focus();
+            }
+        }
+    }
+
+    closeChat() {
+        this.isOpen = false;
+        const chatWindow = this.shadowRoot.querySelector('.ai-chat-window');
+        if (chatWindow) {
+            chatWindow.classList.remove('active');
+        }
+    }
+
+    async sendMessage() {
+        const input = this.shadowRoot.querySelector('#chat-input');
+        if (!input || !input.value.trim()) return;
+        
+        const userMessage = {
+            type: 'user',
+            text: input.value.trim()
+        };
+        
+        this.addMessage(userMessage);
+        const userText = input.value;
+        input.value = '';
+        
+        // Simulate AI response
+        this.simulateAIResponse(userText);
+    }
+
+    async simulateAIResponse(userMessage) {
+        // Show typing indicator
+        this.showTypingIndicator();
+        
+        // Simulate API call delay
+        setTimeout(async () => {
+            this.hideTypingIndicator();
+            
+            let responseText = '';
+            
+            if (userMessage.toLowerCase().includes('консультация') || userMessage.toLowerCase().includes('запись')) {
+                responseText = 'Отлично! Для записи на консультацию перейдите в раздел "Консультации" или свяжитесь напрямую через Telegram @tsingular. Хотите, чтобы я открыл соответствующий раздел?';
+            } else if (userMessage.toLowerCase().includes('новости')) {
+                responseText = 'В разделе "Новости" вы найдете свежие технологические тренды, аналитику и инсайты от Алексея Малышева.';
+            } else if (userMessage.toLowerCase().includes('обучение')) {
+                responseText = 'Раздел "Обучение" содержит образовательные материалы, курсы и руководства по современным технологиям.';
+            } else {
+                responseText = 'Интересный вопрос! Я могу помочь с информацией о различных разделах портала, технологиях или ор��анизации консультации. Что именно вас интересует?';
+            }
+            
+            const assistantMessage = {
+                type: 'assistant',
+                text: responseText
+            };
+            
+            this.addMessage(assistantMessage);
+        }, 1500);
+    }
+
+    showTypingIndicator() {
+        const messagesContainer = this.shadowRoot.querySelector('#chat-messages');
+        if (messagesContainer) {
+            const typingElement = document.createElement('div');
+            typingElement.className = 'ai-message assistant typing-indicator';
+            typingElement.innerHTML = '<div class="typing-dots"><span></span><span></span><span></span></div>';
+            messagesContainer.appendChild(typingElement);
+            messagesContainer.scrollTop = messagesContainer.scrollHeight;
+    }
+
+    hideTypingIndicator() {
+        const messagesContainer = this.shadowRoot.querySelector('#chat-messages');
+        if (messagesContainer) {
+            const typingElement = messagesContainer.querySelector('.typing-indicator');
+            if (typingElement) {
+                typingElement.remove();
+            }
+        }
+    }
+
+    addMessage(message) {
+        const messagesContainer = this.shadowRoot.querySelector('#chat-messages');
+        if (messagesContainer) {
+            const messageElement = document.createElement('div');
+            messageElement.className = `ai-message ${message.type}`;
+            messageElement.textContent = message.text;
+            messagesContainer.appendChild(messageElement);
+            messagesContainer.scrollTop = messagesContainer.scrollHeight;
+        }
+    }
+}
+
+customElements.define('ai-assistant', AIAssistant);
+
+// Global AI Assistant functions
+function initializeAIAssistant() {
+    // AI Assistant is already initialized by the component
+    console.log('AI Assistant initialized');
+}
+
+function toggleAIAssistant() {
+    const assistant = document.querySelector('ai-assistant');
+    if (assistant) {
+        assistant.toggleChat();
+    }
+}

components/footer.js

@@ -0,0 +1,153 @@
+class CustomFooter extends HTMLElement {
+    constructor() {
+        super();
+    }
+
+    connectedCallback() {
+        this.attachShadow({ mode: 'open' });
+        this.render();
+    }
+
+    render() {
+        this.shadowRoot.innerHTML = `
+            <style>
+                :host {
+                    display: block;
+                    width: 100%;
+                }
+                
+                .footer {
+                    background: #050508;
+                    border-top: 1px solid #00a2ff;
+                    padding: 3rem 0 2rem;
+                    margin-top: 4rem;
+                }
+                
+                .footer-content {
+                    max-width: 1200px;
+                    margin: 0 auto;
+                    padding: 0 1rem;
+                }
+                
+                .footer-grid {
+                    display: grid;
+                    grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
+                    gap: 2rem;
+                    margin-bottom: 2rem;
+                }
+                
+                .footer-section h3 {
+                    font-family: Orbitron, monospace;
+                    color: #00ff88;
+                    margin-bottom: 1rem;
+                    font-size: 1.125rem;
+                }
+                
+                .footer-links {
+                    display: flex;
+                    flex-direction: column;
+                    gap: 0.5rem;
+                }
+                
+                .footer-link {
+                    color: #94a3b8;
+                    text-decoration: none;
+                    transition: color 0.3s ease;
+                }
+                
+                .footer-link:hover {
+                    color: #00ff88;
+                }
+                
+                .footer-bottom {
+                    border-top: 1px solid #1a1a2e;
+                    padding-top: 2rem;
+                    text-align: center;
+                    color: #64748b;
+                }
+                
+                .social-links {
+                    display: flex;
+                    gap: 1rem;
+                    margin-top: 1rem;
+                }
+                
+                .social-link {
+                    width: 40px;
+                    height: 40px;
+                    border-radius: 8px;
+                    background: #1a1a2e;
+                    display: flex;
+                    align-items: center;
+                    justify-content: center;
+                    transition: all 0.3s ease;
+                }
+                
+                .social-link:hover {
+                    background: #00ff88;
+                    color: #050508;
+                    transform: translateY(-2px);
+                }
+            </style>
+            
+            <footer class="footer">
+                <div class="footer-content">
+                    <div class="footer-grid">
+                        <div class="footer-section">
+                            <h3>Singularity Nexus</h3>
+                            <p class="text-gray-400">
+                                Технологический портал Алексея Малышева. 
+                                Исследования, инсайты и трансформации цифрового мира.
+                            </p>
+                            <div class="social-links">
+                                <a href="https://t.me/tsingular" class="social-link" target="_blank">
+                                    <i data-feather="send"></i>
+                            </a>
+                                <a href="#" class="social-link">
+                                    <i data-feather="youtube"></i>
+                                </a>
+                                <a href="#" class="social-link">
+                                    <i data-feather="github"></i>
+                                </a>
+                            </div>
+                        </div>
+                        
+                        <div class="footer-section">
+                            <h3>Разделы</h3>
+                            <div class="footer-links">
+                                <a href="/news" class="footer-link">Новости технологий</a>
+                                <a href="/learning" class="footer-link">Образовательные курсы</a>
+                                <a href="/resources" class="footer-link">Полезные ресурсы</a>
+                                <a href="/talks" class="footer-link">Записи докладов</a>
+                                <a href="/demos" class="footer-link">Демо проекты</a>
+                            </div>
+                        </div>
+                        
+                        <div class="footer-section">
+                            <h3>Поддержка</h3>
+                            <div class="footer-links">
+                                <a href="/consultation" class="footer-link">Консультации</a>
+                                <a href="/about" class="footer-link">О проекте</a>
+                                <a href="/contact" class="footer-link">Контакты</a>
+                                <a href="/privacy" class="footer-link">Политика конфиденциальности</a>
+                            </div>
+                        </div>
+                    </div>
+                    
+                    <div class="footer-bottom">
+                        <p>&copy; 2024 Singularity Nexus. Все права в цифровом пространстве.</p>
+                    </div>
+                </div>
+            </footer>
+        `;
+        
+        // Replace feather icons after rendering
+        setTimeout(() => {
+            if (typeof feather !== 'undefined') {
+                feather.replace();
+            }
+        }, 100);
+    }
+}
+
+customElements.define('custom-footer', CustomFooter);

components/navbar.js

@@ -0,0 +1,192 @@
+class CustomNavbar extends HTMLElement {
+    constructor() {
+        super();
+    }
+
+    connectedCallback() {
+        this.attachShadow({ mode: 'open' });
+        this.render();
+        this.setupEventListeners();
+    }
+
+    render() {
+        this.shadowRoot.innerHTML = `
+            <style>
+                :host {
+                    display: block;
+                    width: 100%;
+                }
+                
+                .navbar {
+                    background: rgba(10, 10, 15, 0.95);
+                    backdrop-filter: blur(10px);
+                    border-bottom: 1px solid #00ff88;
+                    padding: 1rem 0;
+                    position: sticky;
+                    top: 0;
+                    z-index: 100;
+                }
+                
+                .nav-container {
+                    max-width: 1200px;
+                    margin: 0 auto;
+                    padding: 0 1rem;
+                    display: flex;
+                    justify-content: space-between;
+                    align-items: center;
+                }
+                
+                .nav-brand {
+                    display: flex;
+                    align-items: center;
+                    gap: 0.5rem;
+                    text-decoration: none;
+                    font-family: Orbitron, monospace;
+                    font-weight: 700;
+                    font-size: 1.25rem;
+                    background: linear-gradient(45deg, #00ff88, #00a2ff);
+                    background-clip: text;
+                    -webkit-background-clip: text;
+                    -webkit-text-fill-color: transparent;
+                }
+                
+                .nav-menu {
+                    display: flex;
+                    gap: 2rem;
+                    align-items: center;
+                }
+                
+                .nav-link {
+                    color: #e2e8f0;
+                    text-decoration: none;
+                    font-weight: 500;
+                    transition: all 0.3s ease;
+                    position: relative;
+                }
+                
+                .nav-link:hover {
+                    color: #00ff88;
+                }
+                
+                .nav-link.active {
+                    color: #00ff88;
+                }
+                
+                .nav-link.active::after {
+                    content: '';
+                    position: absolute;
+                    bottom: -8px;
+                    left: 0;
+                    width: 100%;
+                    height: 2px;
+                    background: #00ff88;
+                    box-shadow: 0 0 8px #00ff88;
+                }
+                
+                .mobile-menu-button {
+                    display: none;
+                    background: none;
+                    border: none;
+                    color: #00ff88;
+                    cursor: pointer;
+                }
+                
+                @media (max-width: 768px) {
+                    .nav-menu {
+                        position: absolute;
+                        top: 100%;
+                        left: 0;
+                        right: 0;
+                        background: rgba(10, 10, 15, 0.95);
+                        flex-direction: column;
+                        padding: 1rem;
+                        gap: 1rem;
+                        display: none;
+                    }
+                    
+                    .nav-menu.active {
+                        display: flex;
+                    }
+                    
+                    .mobile-menu-button {
+                        display: block;
+                    }
+                }
+            </style>
+            
+            <nav class="navbar">
+                <div class="nav-container">
+                    <a href="/" class="nav-brand">
+                        <i data-feather="cpu"></i>
+                        SINGULARITY
+                    </a>
+                    
+                    <button class="mobile-menu-button">
+                        <i data-feather="menu"></i>
+                    </button>
+                    
+                    <div class="nav-menu">
+                        <a href="/news" class="nav-link">
+                            <i data-feather="zap" class="inline mr-1"></i>
+                            Новости
+                        </a>
+                        <a href="/learning" class="nav-link">
+                            <i data-feather="book-open" class="inline mr-1"></i>
+                            Обучение
+                        </a>
+                        <a href="/resources" class="nav-link">
+                            <i data-feather="link" class="inline mr-1"></i>
+                            Ресурсы
+                        </a>
+                        <a href="/talks" class="nav-link">
+                            <i data-feather="video" class="inline mr-1"></i>
+                            Доклады
+                        </a>
+                        <a href="/demos" class="nav-link">
+                            <i data-feather="code" class="inline mr-1"></i>
+                            Демо
+                        </a>
+                        <a href="/admin" class="nav-link" data-auth="admin">
+                            <i data-feather="settings" class="inline mr-1"></i>
+                            Управление
+                        </a>
+                    </div>
+                </div>
+            </nav>
+        `;
+        
+        // Replace feather icons after rendering
+        setTimeout(() => {
+            if (typeof feather !== 'undefined') {
+                feather.replace();
+            }
+        }, 100);
+    }
+
+    setupEventListeners() {
+        const mobileButton = this.shadowRoot.querySelector('.mobile-menu-button');
+        const navMenu = this.shadowRoot.querySelector('.nav-menu');
+        
+        if (mobileButton) {
+            mobileButton.addEventListener('click', () => {
+                navMenu.classList.toggle('active');
+                mobileButton.innerHTML = navMenu.classList.contains('active') ? 
+                    '<i data-feather="x"></i>' : 
+                    '<i data-feather="menu"></i>';
+                feather.replace();
+            });
+        }
+
+        // Close mobile menu when clicking outside
+        document.addEventListener('click', (event) => {
+            if (!this.contains(event.target) && navMenu.classList.contains('active')) {
+                    navMenu.classList.remove('active');
+                    mobileButton.innerHTML = '<i data-feather="menu"></i>';
+                    feather.replace();
+                }
+            });
+        }
+    }
+}
+
+customElements.define('custom-navbar', CustomNavbar);

index.html

@@ -1,19 +1,134 @@
-<!doctype html>
-<html>
-	<head>
-		<meta charset="utf-8" />
-		<meta name="viewport" content="width=device-width" />
-		<title>My static Space</title>
-		<link rel="stylesheet" href="style.css" />
-	</head>
-	<body>
-		<div class="card">
-			<h1>Welcome to your static Space!</h1>
-			<p>You can modify this app directly by editing <i>index.html</i> in the Files and versions tab.</p>
-			<p>
-				Also don't forget to check the
-				<a href="https://huggingface.co/docs/hub/spaces" target="_blank">Spaces documentation</a>.
-			</p>
-		</div>
-	</body>
-</html>
+<!DOCTYPE html>
+<html lang="ru" class="dark">
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>Singularity Nexus - Технозаметки Малышева</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>
+        tailwind.config = {
+            darkMode: 'class',
+            theme: {
+                extend: {
+                    colors: {
+                        cyber: {
+                            primary: '#00ff88',
+                            secondary: '#00a2ff',
+                            accent: '#ff0088',
+                            dark: '#0a0a0f',
+                            darker: '#050508',
+                            gray: '#1a1a2e'
+                        }
+                    },
+                    fontFamily: {
+                        'cyber': ['Orbitron', 'monospace'],
+                        'main': ['Inter', 'sans-serif']
+                    }
+                }
+            }
+        }
+    </script>
+    <link href="https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700&family=Orbitron:wght@400;500;700;900&display=swap" rel="stylesheet">
+</head>
+<body class="bg-cyber-dark text-white font-main min-h-screen">
+    <custom-navbar></custom-navbar>
+    
+    <main class="container mx-auto px-4 py-8">
+        <!-- Hero Section -->
+        <section class="mb-16">
+            <div class="text-center">
+                <div class="cyber-glow mb-6">
+                    <h1 class="text-5xl md:text-7xl font-cyber font-bold bg-gradient-to-r from-cyber-primary to-cyber-secondary bg-clip-text text-transparent">
+                        SINGULARITY NEXUS
+                    </h1>
+                </div>
+                <p class="text-xl md:text-2xl text-gray-300 mb-8 max-w-3xl mx-auto">
+                    Портал технологических инсайтов и цифровых трансформаций от Алексея Малышева
+                </p>
+                <div class="flex flex-wrap justify-center gap-4">
+                    <a href="/news" class="cyber-button-primary px-8 py-3">
+                        <i data-feather="zap" class="inline mr-2"></i>
+                        Новости
+                    </a>
+                    <a href="/learning" class="cyber-button-secondary px-8 py-3">
+                        <i data-feather="book-open" class="inline mr-2"></i>
+                        Обучение
+                    </a>
+                    <a href="/resources" class="cyber-button-accent px-8 py-3">
+                        <i data-feather="link" class="inline mr-2"></i>
+                        Ресурсы
+                    </a>
+                </div>
+            </div>
+        </section>
+
+        <!-- Featured Content Grid -->
+        <section class="mb-16">
+            <h2 class="text-3xl font-cyber mb-8 text-center">Фокус внимания</h2>
+            <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6">
+                <div class="cyber-card group">
+                    <div class="cyber-card-header">
+                        <i data-feather="trending-up" class="text-cyber-primary"></i>
+                        <h3 class="text-xl font-cyber">Актуальные новости</h3>
+                    </div>
+                    <p class="text-gray-400 mb-4">Свежие технологические тренды и инсайты</p>
+                    <a href="/news" class="cyber-link">Исследовать →</a>
+                </div>
+
+                <div class="cyber-card group">
+                    <div class="cyber-card-header">
+                        <i data-feather="graduation-cap" class="text-cyber-secondary"></i>
+                        <h3 class="text-xl font-cyber">Образовательные материалы</h3>
+                    </div>
+                    <p class="text-gray-400 mb-4">Глубокие погружения в технологии будущего</p>
+                    <a href="/learning" class="cyber-link">Учиться →</a>
+                </div>
+
+                <div class="cyber-card group">
+                    <div class="cyber-card-header">
+                        <i data-feather="cpu" class="text-cyber-accent"></i>
+                        <h3 class="text-xl font-cyber">Демо проекты</h3>
+                    </div>
+                    <p class="text-gray-400 mb-4">Интерактивные примеры и прототипы</p>
+                    <a href="/demos" class="cyber-link">Тестировать →</a>
+                </div>
+            </div>
+        </section>
+
+        <!-- Latest Updates -->
+        <section class="mb-16">
+            <h2 class="text-3xl font-cyber mb-8">Последние обновления</h2>
+            <div id="latest-updates" class="cyber-timeline">
+                <!-- Updates will be loaded dynamically -->
+            </div>
+        </section>
+    </main>
+
+    <custom-footer></custom-footer>
+
+    <!-- AI Assistant -->
+    <ai-assistant></ai-assistant>
+
+    <!-- Component Scripts -->
+    <script src="components/navbar.js"></script>
+    <script src="components/footer.js"></script>
+    <script src="components/ai-assistant.js"></script>
+    
+    <!-- Main Script -->
+    <script src="script.js"></script>
+    
+    <script>
+        feather.replace();
+        // Initialize AI assistant
+        document.addEventListener('DOMContentLoaded', function() {
+            initializeAIAssistant();
+            loadLatestUpdates();
+        });
+    </script>
+<script src="https://huggingface.co/deepsite/deepsite-badge.js"></script>
+</body>
+</html>

script.js

@@ -0,0 +1,207 @@
+// Main application JavaScript
+class SingularityPortal {
+    constructor() {
+        this.apiBase = '/api';
+        this.currentUser = null;
+        this.init();
+    }
+
+    init() {
+        this.setupEventListeners();
+        this.checkAuthStatus();
+        this.loadInitialData();
+    }
+
+    setupEventListeners() {
+        // Global event listeners
+        document.addEventListener('keydown', this.handleKeyboardShortcuts.bind(this));
+    }
+
+    handleKeyboardShortcuts(event) {
+        if (event.ctrlKey && event.key === 'k') {
+            event.preventDefault();
+            this.toggleAIAssistant();
+        }
+    }
+
+    async checkAuthStatus() {
+        try {
+            const response = await fetch(`${this.apiBase}/auth/status`);
+            if (response.ok) {
+                this.currentUser = await response.json();
+                this.updateUIForAuth();
+            }
+        } catch (error) {
+            console.log('Auth check failed:', error);
+        }
+    }
+
+    updateUIForAuth() {
+        const authElements = document.querySelectorAll('[data-auth]');
+        authElements.forEach(element => {
+            const authType = element.getAttribute('data-auth');
+            if (authType === 'required' && !this.currentUser) {
+                element.style.display = 'none';
+            } else if (authType === 'admin' && (!this.currentUser || !this.currentUser.isAdmin)) {
+                element.style.display = 'none';
+            }
+        });
+    }
+
+    async loadInitialData() {
+        await this.loadLatestUpdates();
+    }
+
+    async loadLatestUpdates() {
+        try {
+            const response = await fetch(`${this.apiBase}/content/latest`);
+            if (response.ok) {
+                const updates = await response.json();
+                this.renderLatestUpdates(updates);
+            }
+        } catch (error) {
+            console.log('Failed to load latest updates:', error);
+        }
+    }
+
+    renderLatestUpdates(updates) {
+        const container = document.getElementById('latest-updates');
+        if (!container) return;
+
+        container.innerHTML = updates.map(update => `
+            <div class="cyber-timeline-item">
+                <div class="flex justify-between items-start mb-2">
+                    <h4 class="font-cyber text-cyber-primary">${update.title}</h4>
+                    <span class="text-sm text-gray-400">${this.formatDate(update.date)}</span>
+                </div>
+                <p class="text-gray-300">${update.description}</p>
+                <a href="${update.link}" class="cyber-link text-sm mt-2">Подробнее →</a>
+            </div>
+        `).join('');
+    }
+
+    formatDate(dateString) {
+        const date = new Date(dateString);
+        return date.toLocaleDateString('ru-RU');
+    }
+
+    toggleAIAssistant() {
+        const assistant = document.querySelector('ai-assistant');
+        if (assistant) {
+            assistant.toggleChat();
+        }
+    }
+}
+
+// Initialize the portal
+let portal;
+
+document.addEventListener('DOMContentLoaded', function() {
+    portal = new SingularityPortal();
+    feather.replace();
+});
+
+// Utility functions
+const Utils = {
+    debounce(func, wait) {
+        let timeout;
+        return function executedFunction(...args) {
+            const later = () => {
+                clearTimeout(timeout);
+                func(...args);
+            };
+            clearTimeout(timeout);
+            timeout = setTimeout(later, wait);
+        };
+    },
+
+    generateId() {
+        return Date.now().toString(36) + Math.random().toString(36).substr(2);
+    },
+
+    formatFileSize(bytes) {
+        const sizes = ['Bytes', 'KB', 'MB', 'GB'];
+        if (bytes === 0) return '0 Bytes';
+        const i = parseInt(Math.floor(Math.log(bytes) / Math.log(1024)));
+        return Math.round(bytes / Math.pow(1024, i) * 100) / 100 + ' ' + sizes[i];
+    }
+};
+
+// API service for backend communication
+class APIService {
+    constructor() {
+        this.baseURL = '/api';
+    }
+
+    async request(endpoint, options = {}) {
+        const url = `${this.baseURL}${endpoint}`;
+        const config = {
+            headers: {
+                'Content-Type': 'application/json',
+            },
+            ...options
+        };
+
+        try {
+            const response = await fetch(url, config);
+            if (!response.ok) {
+                throw new Error(`HTTP error! status: ${response.status}`);
+            }
+            return await response.json();
+        } catch (error) {
+            console.error('API request failed:', error);
+            throw error;
+        }
+    }
+
+    // Content management
+    async getContent(section, filters = {}) {
+        const query = new URLSearchParams(filters).toString();
+        return this.request(`/content/${section}?${query}`);
+    }
+
+    async createContent(contentData) {
+        return this.request('/content', {
+            method: 'POST',
+            body: JSON.stringify(contentData)
+        });
+    }
+
+    async updateContent(id, contentData) {
+        return this.request(`/content/${id}`, {
+            method: 'PUT',
+            body: JSON.stringify(contentData)
+        });
+    }
+
+    // AI Assistant communication
+    async sendMessageToAI(message, context = {}) {
+        return this.request('/ai/chat', {
+            method: 'POST',
+            body: JSON.stringify({ message, context })
+        });
+    }
+
+    // User management
+    async login(credentials) {
+        return this.request('/auth/login', {
+            method: 'POST',
+            body: JSON.stringify(credentials)
+        });
+    }
+
+    async register(userData) {
+        return this.request('/auth/register', {
+            method: 'POST',
+            body: JSON.stringify(userData)
+        });
+    }
+}
+
+// Initialize API service
+const apiService = new APIService();
+
+// Export for use in components
+window.SingularityPortal = SingularityPortal;
+window.APIService = APIService;
+window.Utils = Utils;

style.css

@@ -1,28 +1,298 @@
-body {
-	padding: 2rem;
-	font-family: -apple-system, BlinkMacSystemFont, "Arial", sans-serif;
+/* Cyber Style Global Styles */
+.cyber-glow {
+    text-shadow: 0 0 10px rgba(0, 255, 136, 0.5),
+                 0 0 20px rgba(0, 255, 136, 0.3),
+                 0 0 40px rgba(0, 255, 136, 0.1);
 }
 
-h1 {
-	font-size: 16px;
-	margin-top: 0;
+.cyber-button-primary {
+    background: linear-gradient(45deg, #00ff88, #00a2ff);
+    border: 1px solid #00ff88;
+    color: #050508;
+    font-weight: 600;
+    border-radius: 8px;
+    transition: all 0.3s ease;
+    text-decoration: none;
+    display: inline-flex;
+    align-items: center;
+    box-shadow: 0 0 15px rgba(0, 255, 136, 0.3);
 }
 
-p {
-	color: rgb(107, 114, 128);
-	font-size: 15px;
-	margin-bottom: 10px;
-	margin-top: 5px;
+.cyber-button-primary:hover {
+    box-shadow: 0 0 25px rgba(0, 255, 136, 0.6);
+    transform: translateY(-2px);
 }
 
-.card {
-	max-width: 620px;
-	margin: 0 auto;
-	padding: 16px;
-	border: 1px solid lightgray;
-	border-radius: 16px;
+.cyber-button-secondary {
+    background: transparent;
+    border: 1px solid #00a2ff;
+    color: #00a2ff;
+    font-weight: 600;
+    border-radius: 8px;
+    transition: all 0.3s ease;
+    text-decoration: none;
+    display: inline-flex;
+    align-items: center;
+    box-shadow: 0 0 15px rgba(0, 162, 255, 0.3);
 }
 
-.card p:last-child {
-	margin-bottom: 0;
+.cyber-button-secondary:hover {
+    box-shadow: 0 0 25px rgba(0, 162, 255, 0.6);
+    transform: translateY(-2px);
 }
+
+.cyber-button-accent {
+    background: transparent;
+    border: 1px solid #ff0088;
+    color: #ff0088;
+    font-weight: 600;
+    border-radius: 8px;
+    transition: all 0.3s ease;
+    text-decoration: none;
+    display: inline-flex;
+    align-items: center;
+    box-shadow: 0 0 15px rgba(255, 0, 136, 0.3);
+}
+
+.cyber-button-accent:hover {
+    box-shadow: 0 0 25px rgba(255, 0, 136, 0.6);
+    transform: translateY(-2px);
+}
+
+.cyber-card {
+    background: linear-gradient(145deg, #1a1a2e, #0a0a0f);
+    border: 1px solid #2a2a3e;
+    border-radius: 12px;
+    padding: 24px;
+    transition: all 0.3s ease;
+    position: relative;
+    overflow: hidden;
+}
+
+.cyber-card::before {
+    content: '';
+    position: absolute;
+    top: 0;
+    left: -100%;
+    width: 100%;
+    height: 100%;
+    background: linear-gradient(90deg, transparent, rgba(0, 255, 136, 0.1), transparent);
+    transition: left 0.5s ease;
+}
+
+.cyber-card:hover::before {
+    left: 100%;
+}
+
+.cyber-card:hover {
+    border-color: #00ff88;
+    transform: translateY(-5px);
+    box-shadow: 0 10px 30px rgba(0, 255, 136, 0.2);
+}
+
+.cyber-card-header {
+    display: flex;
+    align-items: center;
+    gap: 12px;
+    margin-bottom: 16px;
+}
+
+.cyber-card-header h3 {
+    background: linear-gradient(45deg, #00ff88, #00a2ff);
+    background-clip: text;
+    -webkit-background-clip: text;
+    -webkit-text-fill-color: transparent;
+}
+
+.cyber-link {
+    color: #00ff88;
+    text-decoration: none;
+    font-weight: 600;
+    transition: all 0.3s ease;
+    display: inline-flex;
+    align-items: center;
+    gap: 4px;
+}
+
+.cyber-link:hover {
+    color: #00a2ff;
+    gap: 8px;
+}
+
+.cyber-timeline {
+    position: relative;
+    padding-left: 30px;
+}
+
+.cyber-timeline::before {
+    content: '';
+    position: absolute;
+    left: 0;
+    top: 0;
+    bottom: 0;
+    width: 2px;
+    background: linear-gradient(to bottom, #00ff88, #00a2ff, #ff0088);
+}
+
+.cyber-timeline-item {
+    position: relative;
+    margin-bottom: 24px;
+    padding: 16px;
+    background: rgba(26, 26, 46, 0.5);
+    border-radius: 8px;
+    border-left: 3px solid #00ff88;
+}
+
+.cyber-timeline-item::before {
+    content: '';
+    position: absolute;
+    left: -38px;
+    top: 20px;
+    width: 12px;
+    height: 12px;
+    border-radius: 50%;
+    background: #00ff88;
+    box-shadow: 0 0 10px #00ff88;
+}
+
+/* AI Assistant Styles */
+.ai-assistant-container {
+    position: fixed;
+    bottom: 20px;
+    right: 20px;
+    z-index: 1000;
+}
+
+.ai-toggle-button {
+    width: 60px;
+    height: 60px;
+    border-radius: 50%;
+    background: linear-gradient(45deg, #00ff88, #00a2ff);
+    border: none;
+    color: #050508;
+    cursor: pointer;
+    box-shadow: 0 5px 20px rgba(0, 255, 136, 0.4);
+    transition: all 0.3s ease;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+}
+
+.ai-toggle-button:hover {
+    transform: scale(1.1);
+    box-shadow: 0 8px 25px rgba(0, 255, 136, 0.6);
+}
+
+.ai-chat-window {
+    position: absolute;
+    bottom: 70px;
+    right: 0;
+    width: 350px;
+    height: 500px;
+    background: #0a0a0f;
+    border: 1px solid #00ff88;
+    border-radius: 12px;
+    box-shadow: 0 10px 40px rgba(0, 255, 136, 0.3);
+    display: none;
+    flex-direction: column;
+}
+
+.ai-chat-window.active {
+    display: flex;
+}
+
+.ai-chat-header {
+    padding: 16px;
+    background: linear-gradient(45deg, #00ff88, #00a2ff);
+    border-radius: 12px 12px 0 0;
+    color: #050508;
+    font-weight: 600;
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+}
+
+.ai-chat-messages {
+    flex: 1;
+    padding: 16px;
+    overflow-y: auto;
+    display: flex;
+    flex-direction: column;
+    gap: 12px;
+}
+
+.ai-message {
+    padding: 12px;
+    border-radius: 8px;
+    max-width: 80%;
+    word-wrap: break-word;
+}
+
+.ai-message.user {
+    align-self: flex-end;
+    background: linear-gradient(45deg, #00a2ff, #00ff88);
+    color: #050508;
+}
+
+.ai-message.assistant {
+    align-self: flex-start;
+    background: #1a1a2e;
+    border: 1px solid #2a2a3e;
+}
+
+.ai-chat-input {
+    padding: 16px;
+    border-top: 1px solid #2a2a3e;
+    display: flex;
+    gap: 8px;
+}
+
+.ai-chat-input input {
+    flex: 1;
+    padding: 8px 12px;
+    background: #1a1a2e;
+    border: 1px solid #2a2a3e;
+    border-radius: 6px;
+    color: white;
+}
+
+.ai-chat-input button {
+    padding: 8px 16px;
+    background: #00ff88;
+    border: none;
+    border-radius: 6px;
+    color: #050508;
+    font-weight: 600;
+    cursor: pointer;
+}
+
+/* Responsive Design */
+@media (max-width: 768px) {
+    .ai-chat-window {
+        width: 300px;
+        height: 400px;
+        right: -50px;
+    }
+    
+    .cyber-card {
+        padding: 16px;
+    }
+}
+
+/* Scrollbar Styling */
+::-webkit-scrollbar {
+    width: 6px;
+}
+
+::-webkit-scrollbar-track {
+    background: #1a1a2e;
+}
+
+::-webkit-scrollbar-thumb {
+    background: linear-gradient(45deg, #00ff88, #00a2ff);
+    border-radius: 3px;
+}
+
+::-webkit-scrollbar-thumb:hover {
+    background: linear-gradient(45deg, #00a2ff, #ff0088);
+}