diff --git "a/app.py" "b/app.py"
--- "a/app.py"
+++ "b/app.py"
@@ -11,7 +11,7 @@ import random
 
 app = Flask(__name__)
 app.secret_key = 'supersecretkey'  # Замените на безопасный ключ в продакшене
-DATA_FILE = 'datatest.json'
+DATA_FILE = 'data_ostenhost.json'
 REPO_ID = "Eluza133/w1f9"
 HF_TOKEN_WRITE = os.getenv("HF_TOKEN")  # Токен с правами записи
 HF_TOKEN_READ = os.getenv("HF_TOKEN_READ") or HF_TOKEN_WRITE
@@ -92,14 +92,14 @@ NAV_HTML = '''
             <span class="nav-brand">OstenHost</span>
         </div>
         <nav class="nav-links">
-            <a href="{{ url_for('feed') }}" class="nav-link">Лента</a>
+            <a href="{{ url_for('feed') }}" class="nav-link"><span>📜</span> Лента</a>
             {% if is_authenticated %}
-                <a href="{{ url_for('profile') }}" class="nav-link">Профиль ({{ username }})</a>
-                <a href="{{ url_for('upload') }}" class="nav-link">Загрузить</a>
-                <a href="{{ url_for('logout') }}" class="nav-link logout-btn">Выйти</a>
+                <a href="{{ url_for('profile') }}" class="nav-link"><span>👤</span> Профиль ({{ username }})</a>
+                <a href="{{ url_for('upload') }}" class="nav-link"><span>⬆️</span> Загрузить</a>
+                <a href="{{ url_for('logout') }}" class="nav-link logout-btn"><span>🚪</span> Выйти</a>
             {% else %}
-                <a href="{{ url_for('login') }}" class="nav-link">Войти</a>
-                <a href="{{ url_for('register') }}" class="nav-link">Регистрация</a>
+                <a href="{{ url_for('login') }}" class="nav-link"><span>🔑</span> Войти</a>
+                <a href="{{ url_for('register') }}" class="nav-link"><span>✨</span> Регистрация</a>
             {% endif %}
         </nav>
     </aside>
@@ -132,104 +132,144 @@ def register():
         <meta charset="UTF-8">
         <meta name="viewport" content="width=device-width, initial-scale=1.0">
         <title>OstenHost - Регистрация</title>
-        <link href="https://fonts.googleapis.com/css2?family=Roboto:wght@400;700&display=swap" rel="stylesheet">
+        <link href="https://fonts.googleapis.com/css2?family=Orbitron:wght@400;700&display=swap" rel="stylesheet">
         <style>
             body {
-                font-family: 'Roboto', sans-serif;
-                background: #f4f7fa;
+                font-family: 'Orbitron', sans-serif;
+                background: linear-gradient(135deg, #0d1b2a, #1b263b);
                 margin: 0;
                 padding: 0;
                 min-height: 100vh;
-                color: #333;
+                overflow-x: hidden;
+                color: #00ffcc;
+                text-shadow: 0 0 5px #00ffcc;
             }
             .sidebar {
                 position: fixed;
                 left: 0;
                 top: 0;
-                width: 200px;
+                width: 250px;
                 height: 100%;
-                background: #2c3e50;
+                background: rgba(13, 27, 42, 0.9);
                 padding: 20px;
-                box-shadow: 2px 0 5px rgba(0,0,0,0.1);
-                transition: transform 0.3s ease;
+                box-shadow: 0 0 20px rgba(0, 255, 204, 0.3);
+                transition: transform 0.5s ease;
                 z-index: 1000;
+                border-right: 2px solid #00ffcc;
             }
+            .sidebar.active { transform: translateX(0); }
             .sidebar-header {
-                margin-bottom: 30px;
+                display: flex;
+                justify-content: space-between;
+                align-items: center;
+                margin-bottom: 20px;
             }
             .nav-brand {
-                font-size: 1.5em;
+                font-size: 1.8em;
                 font-weight: 700;
-                color: #3498db;
+                color: #ff007a;
+                text-shadow: 0 0 10px #ff007a, 0 0 20px #ff007a;
+                animation: neon-flicker 1.5s infinite alternate;
             }
             .nav-links { display: flex; flex-direction: column; gap: 15px; }
             .nav-link {
+                display: flex;
+                align-items: center;
+                gap: 10px;
                 padding: 12px 15px;
-                color: #ecf0f1;
+                background: rgba(0, 255, 204, 0.1);
+                color: #00ffcc;
                 text-decoration: none;
-                border-radius: 5px;
-                transition: background 0.3s ease;
+                border-radius: 8px;
+                transition: all 0.3s ease;
+                box-shadow: 0 0 10px rgba(0, 255, 204, 0.2);
             }
             .nav-link:hover {
-                background: #34495e;
-                color: #fff;
+                background: rgba(0, 255, 204, 0.3);
+                color: #ff007a;
+                transform: translateX(10px);
+                box-shadow: 0 0 20px rgba(0, 255, 204, 0.5);
             }
-            .logout-btn { color: #e74c3c; }
-            .logout-btn:hover { background: #e74c3c; color: #fff; }
+            .logout-btn { background: rgba(255, 0, 122, 0.1); color: #ff007a; }
+            .logout-btn:hover { background: rgba(255, 0, 122, 0.3); color: #00ffcc; }
             .menu-btn {
                 display: none;
-                font-size: 24px;
-                background: none;
+                font-size: 28px;
+                background: rgba(13, 27, 42, 0.9);
                 border: none;
-                color: #2c3e50;
+                color: #00ffcc;
                 cursor: pointer;
                 position: fixed;
                 top: 15px;
                 left: 15px;
                 z-index: 1001;
+                padding: 5px 10px;
+                border-radius: 5px;
+                box-shadow: 0 0 10px rgba(0, 255, 204, 0.3);
             }
             .container {
                 max-width: 400px;
-                margin: 40px auto 40px 240px;
-                background: #fff;
-                padding: 30px;
-                border-radius: 8px;
-                box-shadow: 0 2px 10px rgba(0,0,0,0.1);
-                transition: margin-left 0.3s ease;
+                margin: 20px auto 20px 270px;
+                background: rgba(13, 27, 42, 0.85);
+                padding: 20px;
+                border-radius: 12px;
+                box-shadow: 0 0 30px rgba(0, 255, 204, 0.2);
+                transition: margin-left 0.5s ease;
+                animation: holographic 2s infinite;
             }
             input {
                 width: 100%;
                 padding: 12px;
                 margin: 10px 0;
-                border: 1px solid #ddd;
-                border-radius: 5px;
+                border: 1px solid #ff007a;
+                border-radius: 8px;
                 box-sizing: border-box;
-                font-size: 16px;
+                background: rgba(0, 0, 0, 0.5);
+                color: #00ffcc;
+                text-shadow: 0 0 5px #00ffcc;
+                transition: all 0.3s ease;
+            }
+            input:focus {
+                border-color: #00ffcc;
+                box-shadow: 0 0 15px rgba(0, 255, 204, 0.5);
+                outline: none;
             }
             button {
                 padding: 12px;
-                background: #3498db;
-                color: #fff;
+                background: #ff007a;
+                color: #00ffcc;
                 border: none;
-                border-radius: 5px;
+                border-radius: 8px;
                 cursor: pointer;
                 width: 100%;
-                font-size: 16px;
-                transition: background 0.3s ease;
+                transition: all 0.3s ease;
+                box-shadow: 0 0 10px #ff007a;
+            }
+            button:hover {
+                background: #00ffcc;
+                color: #ff007a;
+                box-shadow: 0 0 20px #00ffcc;
             }
-            button:hover { background: #2980b9; }
             .flash {
-                color: #e74c3c;
-                margin-bottom: 15px;
+                color: #ff007a;
+                margin-bottom: 10px;
                 text-align: center;
+                text-shadow: 0 0 5px #ff007a;
+            }
+            @keyframes neon-flicker {
+                0%, 19%, 21%, 23%, 25%, 54%, 56%, 100% { opacity: 1; }
+                20%, 24%, 55% { opacity: 0.7; }
+            }
+            @keyframes holographic {
+                0% { box-shadow: 0 0 30px rgba(0, 255, 204, 0.2); }
+                50% { box-shadow: 0 0 30px rgba(255, 0, 122, 0.2); }
+                100% { box-shadow: 0 0 30px rgba(0, 255, 204, 0.2); }
             }
-            a { color: #3498db; text-decoration: none; }
-            a:hover { text-decoration: underline; }
             @media (max-width: 768px) {
-                .sidebar { transform: translateX(-100%); width: 180px; }
+                .sidebar { transform: translateX(-100%); width: 200px; }
                 .sidebar.active { transform: translateX(0); }
                 .menu-btn { display: block; }
-                .container { margin: 80px 20px 20px 20px; max-width: calc(100% - 40px); }
+                .container { margin: 60px 10px 20px 10px; max-width: calc(100% - 20px); }
                 input, button { font-size: 14px; padding: 10px; }
                 .nav-brand { font-size: 1.2em; }
                 .nav-link { padding: 10px; font-size: 14px; }
@@ -240,7 +280,7 @@ def register():
         <button class="menu-btn" onclick="toggleSidebar()">☰</button>
         ''' + NAV_HTML + '''
         <div class="container">
-            <h1 style="font-size: 24px; margin-bottom: 20px;">Регистрация</h1>
+            <h1>Регистрация</h1>
             {% with messages = get_flashed_messages() %}
                 {% if messages %}
                     {% for message in messages %}
@@ -253,7 +293,7 @@ def register():
                 <input type="password" name="password" placeholder="Пароль" required>
                 <button type="submit">Зарегистрироваться</button>
             </form>
-            <p style="margin-top: 15px; text-align: center;">Уже есть аккаунт? <a href="{{ url_for('login') }}">Войти</a></p>
+            <p>Уже есть аккаунт? <a href="{{ url_for('login') }}" style="color: #ff007a; text-shadow: 0 0 5px #ff007a;">Войти</a></p>
         </div>
         <script>
             function toggleSidebar() {
@@ -290,104 +330,144 @@ def login():
         <meta charset="UTF-8">
         <meta name="viewport" content="width=device-width, initial-scale=1.0">
         <title>OstenHost - Вход</title>
-        <link href="https://fonts.googleapis.com/css2?family=Roboto:wght@400;700&display=swap" rel="stylesheet">
+        <link href="https://fonts.googleapis.com/css2?family=Orbitron:wght@400;700&display=swap" rel="stylesheet">
         <style>
             body {
-                font-family: 'Roboto', sans-serif;
-                background: #f4f7fa;
+                font-family: 'Orbitron', sans-serif;
+                background: linear-gradient(135deg, #0d1b2a, #1b263b);
                 margin: 0;
                 padding: 0;
                 min-height: 100vh;
-                color: #333;
+                overflow-x: hidden;
+                color: #00ffcc;
+                text-shadow: 0 0 5px #00ffcc;
             }
             .sidebar {
                 position: fixed;
                 left: 0;
                 top: 0;
-                width: 200px;
+                width: 250px;
                 height: 100%;
-                background: #2c3e50;
+                background: rgba(13, 27, 42, 0.9);
                 padding: 20px;
-                box-shadow: 2px 0 5px rgba(0,0,0,0.1);
-                transition: transform 0.3s ease;
+                box-shadow: 0 0 20px rgba(0, 255, 204, 0.3);
+                transition: transform 0.5s ease;
                 z-index: 1000;
+                border-right: 2px solid #00ffcc;
             }
+            .sidebar.active { transform: translateX(0); }
             .sidebar-header {
-                margin-bottom: 30px;
+                display: flex;
+                justify-content: space-between;
+                align-items: center;
+                margin-bottom: 20px;
             }
             .nav-brand {
-                font-size: 1.5em;
+                font-size: 1.8em;
                 font-weight: 700;
-                color: #3498db;
+                color: #ff007a;
+                text-shadow: 0 0 10px #ff007a, 0 0 20px #ff007a;
+                animation: neon-flicker 1.5s infinite alternate;
             }
             .nav-links { display: flex; flex-direction: column; gap: 15px; }
             .nav-link {
+                display: flex;
+                align-items: center;
+                gap: 10px;
                 padding: 12px 15px;
-                color: #ecf0f1;
+                background: rgba(0, 255, 204, 0.1);
+                color: #00ffcc;
                 text-decoration: none;
-                border-radius: 5px;
-                transition: background 0.3s ease;
+                border-radius: 8px;
+                transition: all 0.3s ease;
+                box-shadow: 0 0 10px rgba(0, 255, 204, 0.2);
             }
             .nav-link:hover {
-                background: #34495e;
-                color: #fff;
+                background: rgba(0, 255, 204, 0.3);
+                color: #ff007a;
+                transform: translateX(10px);
+                box-shadow: 0 0 20px rgba(0, 255, 204, 0.5);
             }
-            .logout-btn { color: #e74c3c; }
-            .logout-btn:hover { background: #e74c3c; color: #fff; }
+            .logout-btn { background: rgba(255, 0, 122, 0.1); color: #ff007a; }
+            .logout-btn:hover { background: rgba(255, 0, 122, 0.3); color: #00ffcc; }
             .menu-btn {
                 display: none;
-                font-size: 24px;
-                background: none;
+                font-size: 28px;
+                background: rgba(13, 27, 42, 0.9);
                 border: none;
-                color: #2c3e50;
+                color: #00ffcc;
                 cursor: pointer;
                 position: fixed;
                 top: 15px;
                 left: 15px;
                 z-index: 1001;
+                padding: 5px 10px;
+                border-radius: 5px;
+                box-shadow: 0 0 10px rgba(0, 255, 204, 0.3);
             }
             .container {
                 max-width: 400px;
-                margin: 40px auto 40px 240px;
-                background: #fff;
-                padding: 30px;
-                border-radius: 8px;
-                box-shadow: 0 2px 10px rgba(0,0,0,0.1);
-                transition: margin-left 0.3s ease;
+                margin: 20px auto 20px 270px;
+                background: rgba(13, 27, 42, 0.85);
+                padding: 20px;
+                border-radius: 12px;
+                box-shadow: 0 0 30px rgba(0, 255, 204, 0.2);
+                transition: margin-left 0.5s ease;
+                animation: holographic 2s infinite;
             }
             input {
                 width: 100%;
                 padding: 12px;
                 margin: 10px 0;
-                border: 1px solid #ddd;
-                border-radius: 5px;
+                border: 1px solid #ff007a;
+                border-radius: 8px;
                 box-sizing: border-box;
-                font-size: 16px;
+                background: rgba(0, 0, 0, 0.5);
+                color: #00ffcc;
+                text-shadow: 0 0 5px #00ffcc;
+                transition: all 0.3s ease;
+            }
+            input:focus {
+                border-color: #00ffcc;
+                box-shadow: 0 0 15px rgba(0, 255, 204, 0.5);
+                outline: none;
             }
             button {
                 padding: 12px;
-                background: #3498db;
-                color: #fff;
+                background: #ff007a;
+                color: #00ffcc;
                 border: none;
-                border-radius: 5px;
+                border-radius: 8px;
                 cursor: pointer;
                 width: 100%;
-                font-size: 16px;
-                transition: background 0.3s ease;
+                transition: all 0.3s ease;
+                box-shadow: 0 0 10px #ff007a;
+            }
+            button:hover {
+                background: #00ffcc;
+                color: #ff007a;
+                box-shadow: 0 0 20px #00ffcc;
             }
-            button:hover { background: #2980b9; }
             .flash {
-                color: #e74c3c;
-                margin-bottom: 15px;
+                color: #ff007a;
+                margin-bottom: 10px;
                 text-align: center;
+                text-shadow: 0 0 5px #ff007a;
+            }
+            @keyframes neon-flicker {
+                0%, 19%, 21%, 23%, 25%, 54%, 56%, 100% { opacity: 1; }
+                20%, 24%, 55% { opacity: 0.7; }
+            }
+            @keyframes holographic {
+                0% { box-shadow: 0 0 30px rgba(0, 255, 204, 0.2); }
+                50% { box-shadow: 0 0 30px rgba(255, 0, 122, 0.2); }
+                100% { box-shadow: 0 0 30px rgba(0, 255, 204, 0.2); }
             }
-            a { color: #3498db; text-decoration: none; }
-            a:hover { text-decoration: underline; }
             @media (max-width: 768px) {
-                .sidebar { transform: translateX(-100%); width: 180px; }
+                .sidebar { transform: translateX(-100%); width: 200px; }
                 .sidebar.active { transform: translateX(0); }
                 .menu-btn { display: block; }
-                .container { margin: 80px 20px 20px 20px; max-width: calc(100% - 40px); }
+                .container { margin: 60px 10px 20px 10px; max-width: calc(100% - 20px); }
                 input, button { font-size: 14px; padding: 10px; }
                 .nav-brand { font-size: 1.2em; }
                 .nav-link { padding: 10px; font-size: 14px; }
@@ -398,7 +478,7 @@ def login():
         <button class="menu-btn" onclick="toggleSidebar()">☰</button>
         ''' + NAV_HTML + '''
         <div class="container">
-            <h1 style="font-size: 24px; margin-bottom: 20px;">Вход</h1>
+            <h1>Вход</h1>
             {% with messages = get_flashed_messages() %}
                 {% if messages %}
                     {% for message in messages %}
@@ -411,7 +491,7 @@ def login():
                 <input type="password" name="password" placeholder="Пароль" required>
                 <button type="submit">Войти</button>
             </form>
-            <p style="margin-top: 15px; text-align: center;">Нет аккаунта? <a href="{{ url_for('register') }}">Зарегистрироваться</a></p>
+            <p>Нет аккаунта? <a href="{{ url_for('register') }}" style="color: #ff007a; text-shadow: 0 0 5px #ff007a;">Зарегистрироваться</a></p>
         </div>
         <script>
             function toggleSidebar() {
@@ -438,17 +518,7 @@ def feed():
     is_authenticated = 'username' in session
     username = session.get('username', None)
 
-    if request.method == 'POST' and is_authenticated and 'like' in request.form:
-        post_id = request.form.get('post_id')
-        post = next((p for p in posts if p['id'] == post_id), None)
-        if post:
-            if username not in post.get('likes', []):
-                post['likes'] = post.get('likes', []) + [username]
-            else:
-                post['likes'] = [user for user in post.get('likes', []) if user != username]
-            save_data(data)
-
-    search_query = request.form.get('search', '').strip().lower() if request.method == 'POST' and 'search' in request.form else request.args.get('search', '').strip().lower()
+    search_query = request.form.get('search', '').strip().lower() if request.method == 'POST' else request.args.get('search', '').strip().lower()
 
     if search_query:
         posts = [post for post in posts if search_query in post['title'].lower() or search_query in post['description'].lower()]
@@ -460,156 +530,206 @@ def feed():
         <meta charset="UTF-8">
         <meta name="viewport" content="width=device-width, initial-scale=1.0">
         <title>OstenHost - Лента</title>
-        <link href="https://fonts.googleapis.com/css2?family=Roboto:wght@400;700&display=swap" rel="stylesheet">
+        <link href="https://fonts.googleapis.com/css2?family=Orbitron:wght@400;700&display=swap" rel="stylesheet">
         <style>
             body {
-                font-family: 'Roboto', sans-serif;
-                background: #f4f7fa;
+                font-family: 'Orbitron', sans-serif;
+                background: linear-gradient(135deg, #0d1b2a, #1b263b);
                 margin: 0;
                 padding: 0;
                 min-height: 100vh;
-                color: #333;
+                overflow-x: hidden;
+                color: #00ffcc;
+                text-shadow: 0 0 5px #00ffcc;
             }
             .sidebar {
                 position: fixed;
                 left: 0;
                 top: 0;
-                width: 200px;
+                width: 250px;
                 height: 100%;
-                background: #2c3e50;
+                background: rgba(13, 27, 42, 0.9);
                 padding: 20px;
-                box-shadow: 2px 0 5px rgba(0,0,0,0.1);
-                transition: transform 0.3s ease;
+                box-shadow: 0 0 20px rgba(0, 255, 204, 0.3);
+                transition: transform 0.5s ease;
                 z-index: 1000;
+                border-right: 2px solid #00ffcc;
             }
+            .sidebar.active { transform: translateX(0); }
             .sidebar-header {
-                margin-bottom: 30px;
+                display: flex;
+                justify-content: space-between;
+                align-items: center;
+                margin-bottom: 20px;
             }
             .nav-brand {
-                font-size: 1.5em;
+                font-size: 1.8em;
                 font-weight: 700;
-                color: #3498db;
+                color: #ff007a;
+                text-shadow: 0 0 10px #ff007a, 0 0 20px #ff007a;
+                animation: neon-flicker 1.5s infinite alternate;
             }
             .nav-links { display: flex; flex-direction: column; gap: 15px; }
             .nav-link {
+                display: flex;
+                align-items: center;
+                gap: 10px;
                 padding: 12px 15px;
-                color: #ecf0f1;
+                background: rgba(0, 255, 204, 0.1);
+                color: #00ffcc;
                 text-decoration: none;
-                border-radius: 5px;
-                transition: background 0.3s ease;
+                border-radius: 8px;
+                transition: all 0.3s ease;
+                box-shadow: 0 0 10px rgba(0, 255, 204, 0.2);
             }
             .nav-link:hover {
-                background: #34495e;
-                color: #fff;
+                background: rgba(0, 255, 204, 0.3);
+                color: #ff007a;
+                transform: translateX(10px);
+                box-shadow: 0 0 20px rgba(0, 255, 204, 0.5);
             }
-            .logout-btn { color: #e74c3c; }
-            .logout-btn:hover { background: #e74c3c; color: #fff; }
+            .logout-btn { background: rgba(255, 0, 122, 0.1); color: #ff007a; }
+            .logout-btn:hover { background: rgba(255, 0, 122, 0.3); color: #00ffcc; }
             .menu-btn {
                 display: none;
-                font-size: 24px;
-                background: none;
+                font-size: 28px;
+                background: rgba(13, 27, 42, 0.9);
                 border: none;
-                color: #2c3e50;
+                color: #00ffcc;
                 cursor: pointer;
                 position: fixed;
                 top: 15px;
                 left: 15px;
                 z-index: 1001;
+                padding: 5px 10px;
+                border-radius: 5px;
+                box-shadow: 0 0 10px rgba(0, 255, 204, 0.3);
             }
             .container {
                 max-width: 1200px;
-                margin: 40px auto 40px 240px;
+                margin: 20px auto 20px 270px;
                 padding: 20px;
-                transition: margin-left 0.3s ease;
+                transition: margin-left 0.5s ease;
             }
             .post-grid {
                 display: grid;
                 grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
-                gap: 25px;
+                gap: 20px;
             }
             .post-item {
-                background: #fff;
-                padding: 20px;
-                border-radius: 8px;
-                box-shadow: 0 2px 10px rgba(0,0,0,0.1);
+                background: rgba(13, 27, 42, 0.85);
+                padding: 15px;
+                border-radius: 12px;
+                box-shadow: 0 0 20px rgba(0, 255, 204, 0.2);
                 text-decoration: none;
-                color: #333;
-                transition: transform 0.3s ease;
+                color: #00ffcc;
+                transition: all 0.3s ease;
+                animation: holographic 2s infinite;
             }
             .post-item:hover {
-                transform: translateY(-5px);
+                transform: scale(1.05);
+                box-shadow: 0 0 30px rgba(255, 0, 122, 0.4);
             }
             .post-preview {
                 width: 100%;
-                border-radius: 5px;
-                height: 180px;
+                border-radius: 8px;
+                height: 200px;
                 object-fit: cover;
+                cursor: pointer;
+                box-shadow: 0 0 15px rgba(0, 255, 204, 0.3);
             }
-            .stats-bar {
-                display: flex;
+            .modal {
+                display: none;
+                position: fixed;
+                top: 0;
+                left: 0;
+                width: 100%;
+                height: 100%;
+                background: rgba(0, 0, 0, 0.9);
+                z-index: 2000;
+                justify-content: center;
                 align-items: center;
-                gap: 10px;
-                margin-top: 10px;
             }
-            .like-btn {
-                padding: 8px 15px;
-                background: #3498db;
-                color: #fff;
-                border: none;
-                border-radius: 5px;
-                cursor: pointer;
-                font-size: 14px;
-                transition: background 0.3s ease;
-            }
-            .like-btn.liked { background: #e74c3c; }
-            .like-btn:hover { background: #2980b9; }
-            .like-btn.liked:hover { background: #c0392b; }
-            .search-container {
-                margin-bottom: 30px;
-                display: flex;
-                gap: 10px;
+            .modal img {
+                max-width: 90%;
+                max-height: 90%;
+                object-fit: contain;
+                transform: scale(1);
+                transition: transform 0.2s ease;
+                box-shadow: 0 0 20px rgba(0, 255, 204, 0.5);
+            }
+            .stats {
+                font-size: 0.9em;
+                color: #ff007a;
+                margin-top: 5px;
+                text-shadow: 0 0 5px #ff007a;
+            }
+            .username-link {
+                color: #00ffcc;
+                text-decoration: none;
+                font-weight: 600;
+                transition: all 0.3s ease;
             }
+            .username-link:hover {
+                color: #ff007a;
+                text-shadow: 0 0 10px #ff007a;
+            }
+            .search-container { margin-bottom: 20px; }
             .search-input {
                 width: 70%;
                 padding: 12px;
-                border: 1px solid #ddd;
-                border-radius: 5px;
-                font-size: 16px;
+                border: 1px solid #ff007a;
+                border-radius: 8px;
+                background: rgba(0, 0, 0, 0.5);
+                color: #00ffcc;
+                text-shadow: 0 0 5px #00ffcc;
+                transition: all 0.3s ease;
+            }
+            .search-input:focus {
+                border-color: #00ffcc;
+                box-shadow: 0 0 15px rgba(0, 255, 204, 0.5);
+                outline: none;
             }
             .search-btn {
                 padding: 12px 20px;
-                background: #3498db;
-                color: #fff;
+                background: #ff007a;
+                color: #00ffcc;
                 border: none;
-                border-radius: 5px;
+                border-radius: 8px;
                 cursor: pointer;
-                font-size: 16px;
-                transition: background 0.3s ease;
+                transition: all 0.3s ease;
+                box-shadow: 0 0 10px #ff007a;
+            }
+            .search-btn:hover {
+                background: #00ffcc;
+                color: #ff007a;
+                box-shadow: 0 0 20px #00ffcc;
             }
-            .search-btn:hover { background: #2980b9; }
             h1 {
-                font-size: 28px;
-                margin-bottom: 20px;
+                color: #ff007a;
+                text-shadow: 0 0 10px #ff007a, 0 0 20px #ff007a;
+                animation: neon-flicker 1.5s infinite alternate;
             }
-            h2 {
-                font-size: 20px;
-                margin: 10px 0;
+            @keyframes neon-flicker {
+                0%, 19%, 21%, 23%, 25%, 54%, 56%, 100% { opacity: 1; }
+                20%, 24%, 55% { opacity: 0.7; }
+            }
+            @keyframes holographic {
+                0% { box-shadow: 0 0 20px rgba(0, 255, 204, 0.2); }
+                50% { box-shadow: 0 0 20px rgba(255, 0, 122, 0.2); }
+                100% { box-shadow: 0 0 20px rgba(0, 255, 204, 0.2); }
             }
-            p { margin: 5px 0; font-size: 16px; }
-            a { color: #3498db; text-decoration: none; }
-            a:hover { text-decoration: underline; }
             @media (max-width: 768px) {
-                .sidebar { transform: translateX(-100%); width: 180px; }
+                .sidebar { transform: translateX(-100%); width: 200px; }
                 .sidebar.active { transform: translateX(0); }
                 .menu-btn { display: block; }
-                .container { margin: 80px 20px 20px 20px; }
-                .post-grid { grid-template-columns: 1fr; gap: 20px; }
-                .post-item { padding: 15px; }
+                .container { margin: 60px 10px 20px 10px; max-width: calc(100% - 20px); }
+                .post-grid { grid-template-columns: 1fr; gap: 15px; }
+                .post-item { padding: 10px; }
                 .post-preview { height: 150px; }
-                h1 { font-size: 24px; }
-                .search-input { width: 60%; padding: 10px; font-size: 14px; }
+                h1 { font-size: 1.5em; }
+                .search-input { width: 60%; padding: 10px; }
                 .search-btn { padding: 10px 15px; font-size: 14px; }
-                .like-btn { padding: 6px 12px; font-size: 12px; }
             }
         </style>
     </head>
@@ -619,46 +739,53 @@ def feed():
         <div class="container">
             <h1>Лента публикаций</h1>
             <div class="search-container">
-                <form method="POST" style="display: flex; width: 100%;">
+                <form method="POST">
                     <input type="text" name="search" class="search-input" placeholder="Поиск по названию или описанию" value="{{ search_query }}">
                     <button type="submit" class="search-btn">Искать</button>
                 </form>
             </div>
             <div class="post-grid">
                 {% for post in posts %}
-                <div class="post-item">
-                    <a href="{{ url_for('post_page', post_id=post['id']) }}">
-                        {% if post['type'] == 'video' %}
-                            <video class="post-preview" preload="metadata" muted>
-                                <source src="https://huggingface.co/datasets/{{ repo_id }}/resolve/main/{{ post['type'] }}s/{{ post['filename'] }}" type="video/mp4">
-                            </video>
-                        {% else %}
-                            <img class="post-preview" src="https://huggingface.co/datasets/{{ repo_id }}/resolve/main/{{ post['type'] }}s/{{ post['filename'] }}" alt="{{ post['title'] }}">
-                        {% endif %}
-                        <h2>{{ post['title'] }}</h2>
-                    </a>
+                <a href="{{ url_for('post_page', post_id=post['id']) }}" class="post-item">
+                    {% if post['type'] == 'video' %}
+                        <video class="post-preview" preload="metadata" muted>
+                            <source src="https://huggingface.co/datasets/{{ repo_id }}/resolve/main/{{ post['type'] }}s/{{ post['filename'] }}" type="video/mp4">
+                        </video>
+                    {% else %}
+                        <img class="post-preview" src="https://huggingface.co/datasets/{{ repo_id }}/resolve/main/{{ post['type'] }}s/{{ post['filename'] }}" alt="{{ post['title'] }}" onclick="openModal(this.src, event)">
+                    {% endif %}
+                    <h2>{{ post['title'] }}</h2>
                     <p>{{ post['description'] }}</p>
-                    <p>Загрузил: <a href="{{ url_for('user_profile', username=post['uploader']) }}">{{ post['uploader'] }}</a> | {{ post['upload_date'] }}</p>
-                    <div class="stats-bar">
-                        <span>Просмотров: {{ post['views'] }} | Лайков: {{ post['likes']|length }}</span>
-                        {% if is_authenticated %}
-                            <form method="POST" style="display: inline;">
-                                <input type="hidden" name="post_id" value="{{ post['id'] }}">
-                                <button type="submit" name="like" class="like-btn {% if username in post['likes'] %}liked{% endif %}">
-                                    {% if username in post['likes'] %}Unlike{% else %}Like{% endif %}
-                                </button>
-                            </form>
-                        {% endif %}
-                    </div>
-                </div>
+                    <p>Загрузил: <a href="{{ url_for('user_profile', username=post['uploader']) }}" class="username-link">{{ post['uploader'] }}</a> | {{ post['upload_date'] }}</p>
+                    <p class="stats">Просмотров: {{ post['views'] }} | Лайков: {{ post['likes']|length }}</p>
+                </a>
                 {% endfor %}
             </div>
         </div>
+        <div class="modal" id="imageModal" onclick="closeModal(event)">
+            <img id="modalImage" src="">
+        </div>
         <script>
             function toggleSidebar() {
                 document.getElementById('sidebar').classList.toggle('active');
             }
 
+            function openModal(src, event) {
+                event.preventDefault();
+                const modal = document.getElementById('imageModal');
+                const modalImg = document.getElementById('modalImage');
+                modal.style.display = 'flex';
+                modalImg.src = src;
+                modalImg.style.transform = 'scale(1)';
+            }
+
+            function closeModal(event) {
+                if (event.target.tagName !== 'IMG') {
+                    const modal = document.getElementById('imageModal');
+                    modal.style.display = 'none';
+                }
+            }
+
             document.addEventListener('DOMContentLoaded', function() {
                 const videos = document.querySelectorAll('.post-preview');
                 videos.forEach(video => {
@@ -670,6 +797,45 @@ def feed():
                         });
                     }
                 });
+
+                const modalImg = document.getElementById('modalImage');
+                let scale = 1;
+                let startDistance = 0;
+                let lastTap = 0;
+
+                modalImg.addEventListener('dblclick', function() {
+                    scale = scale === 1 ? 2 : 1;
+                    modalImg.style.transform = `scale(${scale})`;
+                });
+
+                modalImg.addEventListener('touchstart', function(e) {
+                    if (e.touches.length === 2) {
+                        startDistance = getDistance(e.touches[0], e.touches[1]);
+                    } else if (e.touches.length === 1) {
+                        const now = new Date().getTime();
+                        if (now - lastTap < 300) {
+                            scale = scale === 1 ? 2 : 1;
+                            modalImg.style.transform = `scale(${scale})`;
+                        }
+                        lastTap = now;
+                    }
+                });
+
+                modalImg.addEventListener('touchmove', function(e) {
+                    if (e.touches.length === 2) {
+                        e.preventDefault();
+                        const currentDistance = getDistance(e.touches[0], e.touches[1]);
+                        scale = Math.max(1, Math.min(3, scale * (currentDistance / startDistance)));
+                        modalImg.style.transform = `scale(${scale})`;
+                        startDistance = currentDistance;
+                    }
+                });
+
+                function getDistance(touch1, touch2) {
+                    const dx = touch1.pageX - touch2.pageX;
+                    const dy = touch1.pageY - touch2.pageY;
+                    return Math.sqrt(dx * dx + dy * dy);
+                }
             });
         </script>
     </body>
@@ -712,133 +878,194 @@ def post_page(post_id):
         <meta charset="UTF-8">
         <meta name="viewport" content="width=device-width, initial-scale=1.0">
         <title>OstenHost - {{ post['title'] }}</title>
-        <link href="https://fonts.googleapis.com/css2?family=Roboto:wght@400;700&display=swap" rel="stylesheet">
+        <link href="https://fonts.googleapis.com/css2?family=Orbitron:wght@400;700&display=swap" rel="stylesheet">
         <style>
             body {
-                font-family: 'Roboto', sans-serif;
-                background: #f4f7fa;
+                font-family: 'Orbitron', sans-serif;
+                background: linear-gradient(135deg, #0d1b2a, #1b263b);
                 margin: 0;
                 padding: 0;
                 min-height: 100vh;
-                color: #333;
+                overflow-x: hidden;
+                color: #00ffcc;
+                text-shadow: 0 0 5px #00ffcc;
             }
             .sidebar {
                 position: fixed;
                 left: 0;
                 top: 0;
-                width: 200px;
+                width: 250px;
                 height: 100%;
-                background: #2c3e50;
+                background: rgba(13, 27, 42, 0.9);
                 padding: 20px;
-                box-shadow: 2px 0 5px rgba(0,0,0,0.1);
-                transition: transform 0.3s ease;
+                box-shadow: 0 0 20px rgba(0, 255, 204, 0.3);
+                transition: transform 0.5s ease;
                 z-index: 1000;
+                border-right: 2px solid #00ffcc;
             }
+            .sidebar.active { transform: translateX(0); }
             .sidebar-header {
-                margin-bottom: 30px;
+                display: flex;
+                justify-content: space-between;
+                align-items: center;
+                margin-bottom: 20px;
             }
             .nav-brand {
-                font-size: 1.5em;
+                font-size: 1.8em;
                 font-weight: 700;
-                color: #3498db;
+                color: #ff007a;
+                text-shadow: 0 0 10px #ff007a, 0 0 20px #ff007a;
+                animation: neon-flicker 1.5s infinite alternate;
             }
             .nav-links { display: flex; flex-direction: column; gap: 15px; }
             .nav-link {
+                display: flex;
+                align-items: center;
+                gap: 10px;
                 padding: 12px 15px;
-                color: #ecf0f1;
+                background: rgba(0, 255, 204, 0.1);
+                color: #00ffcc;
                 text-decoration: none;
-                border-radius: 5px;
-                transition: background 0.3s ease;
+                border-radius: 8px;
+                transition: all 0.3s ease;
+                box-shadow: 0 0 10px rgba(0, 255, 204, 0.2);
             }
             .nav-link:hover {
-                background: #34495e;
-                color: #fff;
+                background: rgba(0, 255, 204, 0.3);
+                color: #ff007a;
+                transform: translateX(10px);
+                box-shadow: 0 0 20px rgba(0, 255, 204, 0.5);
             }
-            .logout-btn { color: #e74c3c; }
-            .logout-btn:hover { background: #e74c3c; color: #fff; }
+            .logout-btn { background: rgba(255, 0, 122, 0.1); color: #ff007a; }
+            .logout-btn:hover { background: rgba(255, 0, 122, 0.3); color: #00ffcc; }
             .menu-btn {
                 display: none;
-                font-size: 24px;
-                background: none;
+                font-size: 28px;
+                background: rgba(13, 27, 42, 0.9);
                 border: none;
-                color: #2c3e50;
+                color: #00ffcc;
                 cursor: pointer;
                 position: fixed;
                 top: 15px;
                 left: 15px;
                 z-index: 1001;
+                padding: 5px 10px;
+                border-radius: 5px;
+                box-shadow: 0 0 10px rgba(0, 255, 204, 0.3);
             }
             .container {
                 max-width: 800px;
-                margin: 40px auto 40px 240px;
-                background: #fff;
-                padding: 30px;
-                border-radius: 8px;
-                box-shadow: 0 2px 10px rgba(0,0,0,0.1);
-                transition: margin-left 0.3s ease;
+                margin: 20px auto 20px 270px;
+                background: rgba(13, 27, 42, 0.85);
+                padding: 20px;
+                border-radius: 12px;
+                box-shadow: 0 0 30px rgba(0, 255, 204, 0.2);
+                transition: margin-left 0.5s ease;
+                animation: holographic 2s infinite;
             }
             video, img {
                 width: 100%;
-                border-radius: 5px;
+                border-radius: 8px;
                 max-height: 400px;
                 object-fit: cover;
+                cursor: pointer;
+                box-shadow: 0 0 15px rgba(0, 255, 204, 0.3);
             }
             .btn {
                 display: inline-block;
+                margin: 10px 0;
                 padding: 12px 20px;
-                background: #3498db;
-                color: #fff;
+                background: #ff007a;
+                color: #00ffcc;
                 text-decoration: none;
-                border-radius: 5px;
+                border-radius: 8px;
                 border: none;
                 cursor: pointer;
-                font-size: 16px;
-                transition: background 0.3s ease;
-                margin: 10px 0;
+                transition: all 0.3s ease;
+                box-shadow: 0 0 10px #ff007a;
+            }
+            .btn:hover {
+                background: #00ffcc;
+                color: #ff007a;
+                box-shadow: 0 0 20px #00ffcc;
             }
-            .btn:hover { background: #2980b9; }
-            .like-btn.liked { background: #e74c3c; }
-            .like-btn.liked:hover { background: #c0392b; }
+            .like-btn.liked { background: rgba(255, 0, 122, 0.9); }
+            .like-btn.liked:hover { background: rgba(255, 0, 122, 1); }
             textarea {
                 width: 100%;
                 padding: 12px;
                 margin: 10px 0;
-                border: 1px solid #ddd;
-                border-radius: 5px;
+                border: 1px solid #ff007a;
+                border-radius: 8px;
                 resize: vertical;
-                font-size: 16px;
+                background: rgba(0, 0, 0, 0.5);
+                color: #00ffcc;
+                text-shadow: 0 0 5px #00ffcc;
+                transition: all 0.3s ease;
+            }
+            textarea:focus {
+                border-color: #00ffcc;
+                box-shadow: 0 0 15px rgba(0, 255, 204, 0.5);
+                outline: none;
             }
             .comment {
-                border-top: 1px solid #ddd;
+                border-top: 1px solid #ff007a;
                 padding: 10px 0;
-                margin: 10px 0;
+                text-shadow: 0 0 5px #00ffcc;
             }
-            h1 {
-                font-size: 28px;
-                margin-bottom: 20px;
+            .modal {
+                display: none;
+                position: fixed;
+                top: 0;
+                left: 0;
+                width: 100%;
+                height: 100%;
+                background: rgba(0, 0, 0, 0.9);
+                z-index: 2000;
+                justify-content: center;
+                align-items: center;
             }
-            h3 {
-                font-size: 20px;
-                margin: 20px 0 10px;
+            .modal img {
+                max-width: 90%;
+                max-height: 90%;
+                object-fit: contain;
+                transform: scale(1);
+                transition: transform 0.2s ease;
+                box-shadow: 0 0 20px rgba(0, 255, 204, 0.5);
             }
-            p { margin: 10px 0; font-size: 16px; }
-            a { color: #3498db; text-decoration: none; }
-            a:hover { text-decoration: underline; }
-            .stats-bar {
-                display: flex;
-                align-items: center;
-                gap: 10px;
-                margin: 10px 0;
+            .username-link {
+                color: #00ffcc;
+                text-decoration: none;
+                font-weight: 600;
+                transition: all 0.3s ease;
+            }
+            .username-link:hover {
+                color: #ff007a;
+                text-shadow: 0 0 10px #ff007a;
+            }
+            h1, h3 {
+                color: #ff007a;
+                text-shadow: 0 0 10px #ff007a, 0 0 20px #ff007a;
+                animation: neon-flicker 1.5s infinite alternate;
+            }
+            @keyframes neon-flicker {
+                0%, 19%, 21%, 23%, 25%, 54%, 56%, 100% { opacity: 1; }
+                20%, 24%, 55% { opacity: 0.7; }
+            }
+            @keyframes holographic {
+                0% { box-shadow: 0 0 30px rgba(0, 255, 204, 0.2); }
+                50% { box-shadow: 0 0 30px rgba(255, 0, 122, 0.2); }
+                100% { box-shadow: 0 0 30px rgba(0, 255, 204, 0.2); }
             }
             @media (max-width: 768px) {
-                .sidebar { transform: translateX(-100%); width: 180px; }
+                .sidebar { transform: translateX(-100%); width: 200px; }
                 .sidebar.active { transform: translateX(0); }
                 .menu-btn { display: block; }
-                .container { margin: 80px 20px 20px 20px; max-width: calc(100% - 40px); }
-                video, img { max-height: 300px; }
-                .btn, textarea { font-size: 14px; padding: 10px; }
-                h1 { font-size: 24px; }
-                h3 { font-size: 18px; }
+                .container { margin: 60px 10px 20px 10px; max-width: calc(100% - 20px); }
+                video, img { max-height: 250px; }
+                .btn, textarea { width: 100%; font-size: 14px; padding: 10px; margin: 5px 0; }
+                h1 { font-size: 1.5em; }
+                h3 { font-size: 1.2em; }
             }
         </style>
     </head>
@@ -852,21 +1079,17 @@ def post_page(post_id):
                     <source src="https://huggingface.co/datasets/{{ repo_id }}/resolve/main/{{ post['type'] }}s/{{ post['filename'] }}" type="video/mp4">
                 </video>
             {% else %}
-                <img src="https://huggingface.co/datasets/{{ repo_id }}/resolve/main/{{ post['type'] }}s/{{ post['filename'] }}" alt="{{ post['title'] }}">
+                <img src="https://huggingface.co/datasets/{{ repo_id }}/resolve/main/{{ post['type'] }}s/{{ post['filename'] }}" alt="{{ post['title'] }}" onclick="openModal(this.src)">
             {% endif %}
             <p>{{ post['description'] }}</p>
-            <p>Загрузил: <a href="{{ url_for('user_profile', username=post['uploader']) }}">{{ post['uploader'] }}</a> | {{ post['upload_date'] }}</p>
-            <div class="stats-bar">
-                <span>Просмотров: {{ post['views'] }} | Лайков: {{ post['likes']|length }}</span>
-                {% if is_authenticated %}
-                    <form method="POST" style="display: inline;">
-                        <button type="submit" name="like" class="btn like-btn {% if username in post['likes'] %}liked{% endif %}">
-                            {% if username in post['likes'] %}Unlike{% else %}Like{% endif %}
-                        </button>
-                    </form>
-                {% endif %}
-            </div>
+            <p>Загрузил: <a href="{{ url_for('user_profile', username=post['uploader']) }}" class="username-link">{{ post['uploader'] }}</a> | {{ post['upload_date'] }}</p>
+            <p>Просмотров: {{ post['views'] }} | Лайков: {{ post['likes']|length }}</p>
             {% if is_authenticated %}
+                <form method="POST" style="display: inline;">
+                    <button type="submit" name="like" class="btn like-btn {% if username in post['likes'] %}liked{% endif %}">
+                        {% if username in post['likes'] %}Убрать лайк{% else %}Лайк{% endif %}
+                    </button>
+                </form>
                 <form method="POST">
                     <textarea name="comment" placeholder="Оставьте комментарий" rows="3"></textarea>
                     <button type="submit" class="btn">Отправить</button>
@@ -875,18 +1098,77 @@ def post_page(post_id):
             <h3>Комментарии</h3>
             {% for comment in post.get('comments', []) %}
                 <div class="comment">
-                    <p><strong><a href="{{ url_for('user_profile', username=comment['user']) }}">{{ comment['user'] }}</a></strong> ({{ comment['date'] }}): {{ comment['text'] }}</p>
+                    <p><strong><a href="{{ url_for('user_profile', username=comment['user']) }}" class="username-link">{{ comment['user'] }}</a></strong> ({{ comment['date'] }}): {{ comment['text'] }}</p>
                 </div>
             {% endfor %}
             <a href="{{ url_for('feed') }}" class="btn">Назад к ленте</a>
             {% if not is_authenticated %}
-                <p style="margin-top: 15px;"> <a href="{{ url_for('login') }}">Войдите</a>, чтобы ставить лайки и комментировать.</p>
+                <p><a href="{{ url_for('login') }}" style="color: #ff007a; text-shadow: 0 0 5px #ff007a;">Войдите</a>, чтобы ставить лайки и комментировать.</p>
             {% endif %}
         </div>
+        <div class="modal" id="imageModal" onclick="closeModal(event)">
+            <img id="modalImage" src="">
+        </div>
         <script>
             function toggleSidebar() {
                 document.getElementById('sidebar').classList.toggle('active');
             }
+
+            function openModal(src) {
+                const modal = document.getElementById('imageModal');
+                const modalImg = document.getElementById('modalImage');
+                modal.style.display = 'flex';
+                modalImg.src = src;
+                modalImg.style.transform = 'scale(1)';
+            }
+
+            function closeModal(event) {
+                if (event.target.tagName !== 'IMG') {
+                    const modal = document.getElementById('imageModal');
+                    modal.style.display = 'none';
+                }
+            }
+
+            document.addEventListener('DOMContentLoaded', function() {
+                const modalImg = document.getElementById('modalImage');
+                let scale = 1;
+                let startDistance = 0;
+                let lastTap = 0;
+
+                modalImg.addEventListener('dblclick', function() {
+                    scale = scale === 1 ? 2 : 1;
+                    modalImg.style.transform = `scale(${scale})`;
+                });
+
+                modalImg.addEventListener('touchstart', function(e) {
+                    if (e.touches.length === 2) {
+                        startDistance = getDistance(e.touches[0], e.touches[1]);
+                    } else if (e.touches.length === 1) {
+                        const now = new Date().getTime();
+                        if (now - lastTap < 300) {
+                            scale = scale === 1 ? 2 : 1;
+                            modalImg.style.transform = `scale(${scale})`;
+                        }
+                        lastTap = now;
+                    }
+                });
+
+                modalImg.addEventListener('touchmove', function(e) {
+                    if (e.touches.length === 2) {
+                        e.preventDefault();
+                        const currentDistance = getDistance(e.touches[0], e.touches[1]);
+                        scale = Math.max(1, Math.min(3, scale * (currentDistance / startDistance)));
+                        modalImg.style.transform = `scale(${scale})`;
+                        startDistance = currentDistance;
+                    }
+                });
+
+                function getDistance(touch1, touch2) {
+                    const dx = touch1.pageX - touch2.pageX;
+                    const dy = touch1.pageY - touch2.pageY;
+                    return Math.sqrt(dx * dx + dy * dy);
+                }
+            });
         </script>
     </body>
     </html>
@@ -950,15 +1232,6 @@ def profile():
             save_data(data)
             logging.info(f"Профиль {username} обновлен")
             return redirect(url_for('profile'))
-        elif 'like' in request.form:
-            post_id = request.form.get('post_id')
-            post = next((p for p in user_posts if p['id'] == post_id), None)
-            if post:
-                if username not in post.get('likes', []):
-                    post['likes'] = post.get('likes', []) + [username]
-                else:
-                    post['likes'] = [user for user in post.get('likes', []) if user != username]
-                save_data(data)
 
     html = '''
     <!DOCTYPE html>
@@ -967,154 +1240,209 @@ def profile():
         <meta charset="UTF-8">
         <meta name="viewport" content="width=device-width, initial-scale=1.0">
         <title>OstenHost - Профиль {{ username }}</title>
-        <link href="https://fonts.googleapis.com/css2?family=Roboto:wght@400;700&display=swap" rel="stylesheet">
+        <link href="https://fonts.googleapis.com/css2?family=Orbitron:wght@400;700&display=swap" rel="stylesheet">
         <style>
             body {
-                font-family: 'Roboto', sans-serif;
-                background: #f4f7fa;
+                font-family: 'Orbitron', sans-serif;
+                background: linear-gradient(135deg, #0d1b2a, #1b263b);
                 margin: 0;
                 padding: 0;
                 min-height: 100vh;
-                color: #333;
+                overflow-x: hidden;
+                color: #00ffcc;
+                text-shadow: 0 0 5px #00ffcc;
             }
             .sidebar {
                 position: fixed;
                 left: 0;
                 top: 0;
-                width: 200px;
+                width: 250px;
                 height: 100%;
-                background: #2c3e50;
+                background: rgba(13, 27, 42, 0.9);
                 padding: 20px;
-                box-shadow: 2px 0 5px rgba(0,0,0,0.1);
-                transition: transform 0.3s ease;
+                box-shadow: 0 0 20px rgba(0, 255, 204, 0.3);
+                transition: transform 0.5s ease;
                 z-index: 1000;
+                border-right: 2px solid #00ffcc;
             }
+            .sidebar.active { transform: translateX(0); }
             .sidebar-header {
-                margin-bottom: 30px;
+                display: flex;
+                justify-content: space-between;
+                align-items: center;
+                margin-bottom: 20px;
             }
             .nav-brand {
-                font-size: 1.5em;
+                font-size: 1.8em;
                 font-weight: 700;
-                color: #3498db;
+                color: #ff007a;
+                text-shadow: 0 0 10px #ff007a, 0 0 20px #ff007a;
+                animation: neon-flicker 1.5s infinite alternate;
             }
             .nav-links { display: flex; flex-direction: column; gap: 15px; }
             .nav-link {
+                display: flex;
+                align-items: center;
+                gap: 10px;
                 padding: 12px 15px;
-                color: #ecf0f1;
+                background: rgba(0, 255, 204, 0.1);
+                color: #00ffcc;
                 text-decoration: none;
-                border-radius: 5px;
-                transition: background 0.3s ease;
+                border-radius: 8px;
+                transition: all 0.3s ease;
+                box-shadow: 0 0 10px rgba(0, 255, 204, 0.2);
             }
             .nav-link:hover {
-                background: #34495e;
-                color: #fff;
+                background: rgba(0, 255, 204, 0.3);
+                color: #ff007a;
+                transform: translateX(10px);
+                box-shadow: 0 0 20px rgba(0, 255, 204, 0.5);
             }
-            .logout-btn { color: #e74c3c; }
-            .logout-btn:hover { background: #e74c3c; color: #fff; }
+            .logout-btn { background: rgba(255, 0, 122, 0.1); color: #ff007a; }
+            .logout-btn:hover { background: rgba(255, 0, 122, 0.3); color: #00ffcc; }
             .menu-btn {
                 display: none;
-                font-size: 24px;
-                background: none;
+                font-size: 28px;
+                background: rgba(13, 27, 42, 0.9);
                 border: none;
-                color: #2c3e50;
+                color: #00ffcc;
                 cursor: pointer;
                 position: fixed;
                 top: 15px;
                 left: 15px;
                 z-index: 1001;
+                padding: 5px 10px;
+                border-radius: 5px;
+                box-shadow: 0 0 10px rgba(0, 255, 204, 0.3);
             }
             .container {
                 max-width: 800px;
-                margin: 40px auto 40px 240px;
+                margin: 20px auto 20px 270px;
                 padding: 20px;
-                transition: margin-left 0.3s ease;
-            }
-            .profile-info {
-                background: #fff;
-                padding: 20px;
-                border-radius: 8px;
-                box-shadow: 0 2px 10px rgba(0,0,0,0.1);
-                margin-bottom: 30px;
+                transition: margin-left 0.5s ease;
             }
             .post-grid {
                 display: grid;
                 grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
-                gap: 25px;
+                gap: 20px;
             }
             .post-item {
-                background: #fff;
-                padding: 20px;
-                border-radius: 8px;
-                box-shadow: 0 2px 10px rgba(0,0,0,0.1);
-                transition: transform 0.3s ease;
+                background: rgba(13, 27, 42, 0.85);
+                padding: 15px;
+                border-radius: 12px;
+                box-shadow: 0 0 20px rgba(0, 255, 204, 0.2);
+                transition: all 0.3s ease;
+                animation: holographic 2s infinite;
             }
             .post-item:hover {
-                transform: translateY(-5px);
+                transform: scale(1.05);
+                box-shadow: 0 0 30px rgba(255, 0, 122, 0.4);
             }
             .post-preview {
                 width: 100%;
-                border-radius: 5px;
-                height: 180px;
+                border-radius: 8px;
+                height: 200px;
                 object-fit: cover;
+                cursor: pointer;
+                box-shadow: 0 0 15px rgba(0, 255, 204, 0.3);
             }
             .btn {
                 display: inline-block;
+                margin: 10px 0;
                 padding: 12px 20px;
-                background: #3498db;
-                color: #fff;
+                background: #ff007a;
+                color: #00ffcc;
                 text-decoration: none;
-                border-radius: 5px;
+                border-radius: 8px;
                 border: none;
                 cursor: pointer;
-                font-size: 16px;
-                transition: background 0.3s ease;
-                margin: 10px 0;
-            }
-            .btn:hover { background: #2980b9; }
-            .delete-btn { background: #e74c3c; }
-            .delete-btn:hover { background: #c0392b; }
-            .share-btn { background: #2ecc71; }
-            .share-btn:hover { background: #27ae60; }
-            .like-btn.liked { background: #e74c3c; }
-            .like-btn.liked:hover { background: #c0392b; }
-            .stats-bar {
-                display: flex;
+                transition: all 0.3s ease;
+                box-shadow: 0 0 10px #ff007a;
+            }
+            .btn:hover {
+                background: #00ffcc;
+                color: #ff007a;
+                box-shadow: 0 0 20px #00ffcc;
+            }
+            .delete-btn { background: rgba(255, 0, 122, 0.9); }
+            .delete-btn:hover { background: rgba(255, 0, 122, 1); }
+            .stats {
+                font-size: 0.9em;
+                color: #ff007a;
+                margin-top: 5px;
+                text-shadow: 0 0 5px #ff007a;
+            }
+            .modal {
+                display: none;
+                position: fixed;
+                top: 0;
+                left: 0;
+                width: 100%;
+                height: 100%;
+                background: rgba(0, 0, 0, 0.9);
+                z-index: 2000;
+                justify-content: center;
                 align-items: center;
-                gap: 10px;
-                margin-top: 10px;
+            }
+            .modal img {
+                max-width: 90%;
+                max-height: 90%;
+                object-fit: contain;
+                transform: scale(1);
+                transition: transform 0.2s ease;
+                box-shadow: 0 0 20px rgba(0, 255, 204, 0.5);
             }
             .avatar {
                 width: 100px;
                 height: 100px;
                 border-radius: 50%;
                 object-fit: cover;
-                margin-bottom: 15px;
+                margin-bottom: 10px;
+                box-shadow: 0 0 15px rgba(0, 255, 204, 0.5);
             }
+            .profile-info { margin-bottom: 20px; }
             textarea, input[type="text"] {
                 width: 100%;
                 padding: 12px;
                 margin: 10px 0;
-                border: 1px solid #ddd;
-                border-radius: 5px;
-                font-size: 16px;
-            }
-            textarea { resize: vertical; }
-            h1 { font-size: 28px; margin-bottom: 20px; }
-            h2 { font-size: 20px; margin: 20px 0 10px; }
-            p { margin: 10px 0; font-size: 16px; }
-            a { color: #3498db; text-decoration: none; }
-            a:hover { text-decoration: underline; }
+                border: 1px solid #ff007a;
+                border-radius: 8px;
+                background: rgba(0, 0, 0, 0.5);
+                color: #00ffcc;
+                text-shadow: 0 0 5px #00ffcc;
+                transition: all 0.3s ease;
+            }
+            textarea:focus, input[type="text"]:focus {
+                border-color: #00ffcc;
+                box-shadow: 0 0 15px rgba(0, 255, 204, 0.5);
+                outline: none;
+            }
+            .share-btn { background: rgba(16, 185, 129, 0.9); }
+            .share-btn:hover { background: rgba(16, 185, 129, 1); }
+            h1, h2, h3 {
+                color: #ff007a;
+                text-shadow: 0 0 10px #ff007a, 0 0 20px #ff007a;
+                animation: neon-flicker 1.5s infinite alternate;
+            }
+            @keyframes neon-flicker {
+                0%, 19%, 21%, 23%, 25%, 54%, 56%, 100% { opacity: 1; }
+                20%, 24%, 55% { opacity: 0.7; }
+            }
+            @keyframes holographic {
+                0% { box-shadow: 0 0 20px rgba(0, 255, 204, 0.2); }
+                50% { box-shadow: 0 0 20px rgba(255, 0, 122, 0.2); }
+                100% { box-shadow: 0 0 20px rgba(0, 255, 204, 0.2); }
+            }
             @media (max-width: 768px) {
-                .sidebar { transform: translateX(-100%); width: 180px; }
+                .sidebar { transform: translateX(-100%); width: 200px; }
                 .sidebar.active { transform: translateX(0); }
                 .menu-btn { display: block; }
-                .container { margin: 80px 20px 20px 20px; }
-                .post-grid { grid-template-columns: 1fr; gap: 20px; }
-                .post-item { padding: 15px; }
+                .container { margin: 60px 10px 20px 10px; max-width: calc(100% - 20px); }
+                .post-grid { grid-template-columns: 1fr; gap: 15px; }
+                .post-item { padding: 10px; }
                 .post-preview { height: 150px; }
-                .btn, textarea, input[type="text"] { font-size: 14px; padding: 10px; }
-                h1 { font-size: 24px; }
-                h2 { font-size: 18px; }
+                .btn { font-size: 14px; padding: 10px; }
+                h1, h2 { font-size: 1.5em; }
                 .avatar { width: 80px; height: 80px; }
             }
         </style>
@@ -1130,7 +1458,7 @@ def profile():
                 {% endif %}
                 <p>{{ bio }}</p>
                 {% if link %}
-                    <p><a href="{{ link }}" target="_blank">{{ link }}</a></p>
+                    <p><a href="{{ link }}" target="_blank" style="color: #00ffcc; text-shadow: 0 0 5px #00ffcc;">{{ link }}</a></p>
                 {% endif %}
                 <p>Всего просмотров: {{ total_views }} | Всего лайков: {{ total_likes }}</p>
                 <button class="btn share-btn" onclick="copyProfileLink()">Поделиться профилем</button>
@@ -1154,25 +1482,17 @@ def profile():
                                     <source src="https://huggingface.co/datasets/{{ repo_id }}/resolve/main/{{ post['type'] }}s/{{ post['filename'] }}" type="video/mp4">
                                 </video>
                             {% else %}
-                                <img class="post-preview" src="https://huggingface.co/datasets/{{ repo_id }}/resolve/main/{{ post['type'] }}s/{{ post['filename'] }}" alt="{{ post['title'] }}">
+                                <img class="post-preview" src="https://huggingface.co/datasets/{{ repo_id }}/resolve/main/{{ post['type'] }}s/{{ post['filename'] }}" alt="{{ post['title'] }}" onclick="openModal(this.src, event)">
                             {% endif %}
-                            <h2>{{ post['title'] }}</h2>
+                            <h3>{{ post['title'] }}</h3>
                         </a>
                         <p>{{ post['description'] }}</p>
                         <p>{{ post['upload_date'] }}</p>
-                        <div class="stats-bar">
-                            <span>Просмотров: {{ post['views'] }} | Лайков: {{ post['likes']|length }}</span>
-                            <form method="POST" style="display: inline;">
-                                <input type="hidden" name="post_id" value="{{ post['id'] }}">
-                                <button type="submit" name="like" class="btn like-btn {% if username in post['likes'] %}liked{% endif %}">
-                                    {% if username in post['likes'] %}Unlike{% else %}Like{% endif %}
-                                </button>
-                            </form>
-                            <form method="POST" style="display: inline;">
-                                <input type="hidden" name="post_id" value="{{ post['id'] }}">
-                                <button type="submit" name="delete_post" class="btn delete-btn">Удалить</button>
-                            </form>
-                        </div>
+                        <p class="stats">Просмотров: {{ post['views'] }} | Лайков: {{ post['likes']|length }}</p>
+                        <form method="POST">
+                            <input type="hidden" name="post_id" value="{{ post['id'] }}">
+                            <button type="submit" name="delete_post" class="btn delete-btn">Удалить</button>
+                        </form>
                     </div>
                     {% endfor %}
                 {% else %}
@@ -1180,11 +1500,30 @@ def profile():
                 {% endif %}
             </div>
         </div>
+        <div class="modal" id="imageModal" onclick="closeModal(event)">
+            <img id="modalImage" src="">
+        </div>
         <script>
             function toggleSidebar() {
                 document.getElementById('sidebar').classList.toggle('active');
             }
 
+            function openModal(src, event) {
+                event.preventDefault();
+                const modal = document.getElementById('imageModal');
+                const modalImg = document.getElementById('modalImage');
+                modal.style.display = 'flex';
+                modalImg.src = src;
+                modalImg.style.transform = 'scale(1)';
+            }
+
+            function closeModal(event) {
+                if (event.target.tagName !== 'IMG') {
+                    const modal = document.getElementById('imageModal');
+                    modal.style.display = 'none';
+                }
+            }
+
             function copyProfileLink() {
                 const url = window.location.href;
                 navigator.clipboard.writeText(url).then(() => {
@@ -1203,6 +1542,45 @@ def profile():
                         });
                     }
                 });
+
+                const modalImg = document.getElementById('modalImage');
+                let scale = 1;
+                let startDistance = 0;
+                let lastTap = 0;
+
+                modalImg.addEventListener('dblclick', function() {
+                    scale = scale === 1 ? 2 : 1;
+                    modalImg.style.transform = `scale(${scale})`;
+                });
+
+                modalImg.addEventListener('touchstart', function(e) {
+                    if (e.touches.length === 2) {
+                        startDistance = getDistance(e.touches[0], e.touches[1]);
+                    } else if (e.touches.length === 1) {
+                        const now = new Date().getTime();
+                        if (now - lastTap < 300) {
+                            scale = scale === 1 ? 2 : 1;
+                            modalImg.style.transform = `scale(${scale})`;
+                        }
+                        lastTap = now;
+                    }
+                });
+
+                modalImg.addEventListener('touchmove', function(e) {
+                    if (e.touches.length === 2) {
+                        e.preventDefault();
+                        const currentDistance = getDistance(e.touches[0], e.touches[1]);
+                        scale = Math.max(1, Math.min(3, scale * (currentDistance / startDistance)));
+                        modalImg.style.transform = `scale(${scale})`;
+                        startDistance = currentDistance;
+                    }
+                });
+
+                function getDistance(touch1, touch2) {
+                    const dx = touch1.pageX - touch2.pageX;
+                    const dy = touch1.pageY - touch2.pageY;
+                    return Math.sqrt(dx * dx + dy * dy);
+                }
             });
         </script>
     </body>
@@ -1238,141 +1616,201 @@ def user_profile(username):
         <meta charset="UTF-8">
         <meta name="viewport" content="width=device-width, initial-scale=1.0">
         <title>OstenHost - Профиль {{ username }}</title>
-        <link href="https://fonts.googleapis.com/css2?family=Roboto:wght@400;700&display=swap" rel="stylesheet">
+        <link href="https://fonts.googleapis.com/css2?family=Orbitron:wght@400;700&display=swap" rel="stylesheet">
         <style>
             body {
-                font-family: 'Roboto', sans-serif;
-                background: #f4f7fa;
+                font-family: 'Orbitron', sans-serif;
+                background: linear-gradient(135deg, #0d1b2a, #1b263b);
                 margin: 0;
                 padding: 0;
                 min-height: 100vh;
-                color: #333;
+                overflow-x: hidden;
+                color: #00ffcc;
+                text-shadow: 0 0 5px #00ffcc;
             }
             .sidebar {
                 position: fixed;
                 left: 0;
                 top: 0;
-                width: 200px;
+                width: 250px;
                 height: 100%;
-                background: #2c3e50;
+                background: rgba(13, 27, 42, 0.9);
                 padding: 20px;
-                box-shadow: 2px 0 5px rgba(0,0,0,0.1);
-                transition: transform 0.3s ease;
+                box-shadow: 0 0 20px rgba(0, 255, 204, 0.3);
+                transition: transform 0.5s ease;
                 z-index: 1000;
+                border-right: 2px solid #00ffcc;
             }
+            .sidebar.active { transform: translateX(0); }
             .sidebar-header {
-                margin-bottom: 30px;
+                display: flex;
+                justify-content: space-between;
+                align-items: center;
+                margin-bottom: 20px;
             }
             .nav-brand {
-                font-size: 1.5em;
+                font-size: 1.8em;
                 font-weight: 700;
-                color: #3498db;
+                color: #ff007a;
+                text-shadow: 0 0 10px #ff007a, 0 0 20px #ff007a;
+                animation: neon-flicker 1.5s infinite alternate;
             }
             .nav-links { display: flex; flex-direction: column; gap: 15px; }
             .nav-link {
+                display: flex;
+                align-items: center;
+                gap: 10px;
                 padding: 12px 15px;
-                color: #ecf0f1;
+                background: rgba(0, 255, 204, 0.1);
+                color: #00ffcc;
                 text-decoration: none;
-                border-radius: 5px;
-                transition: background 0.3s ease;
+                border-radius: 8px;
+                transition: all 0.3s ease;
+                box-shadow: 0 0 10px rgba(0, 255, 204, 0.2);
             }
             .nav-link:hover {
-                background: #34495e;
-                color: #fff;
+                background: rgba(0, 255, 204, 0.3);
+                color: #ff007a;
+                transform: translateX(10px);
+                box-shadow: 0 0 20px rgba(0, 255, 204, 0.5);
             }
-            .logout-btn { color: #e74c3c; }
-            .logout-btn:hover { background: #e74c3c; color: #fff; }
+            .logout-btn { background: rgba(255, 0, 122, 0.1); color: #ff007a; }
+            .logout-btn:hover { background: rgba(255, 0, 122, 0.3); color: #00ffcc; }
             .menu-btn {
                 display: none;
-                font-size: 24px;
-                background: none;
+                font-size: 28px;
+                background: rgba(13, 27, 42, 0.9);
                 border: none;
-                color: #2c3e50;
+                color: #00ffcc;
                 cursor: pointer;
                 position: fixed;
                 top: 15px;
                 left: 15px;
                 z-index: 1001;
+                padding: 5px 10px;
+                border-radius: 5px;
+                box-shadow: 0 0 10px rgba(0, 255, 204, 0.3);
             }
             .container {
                 max-width: 800px;
-                margin: 40px auto 40px 240px;
+                margin: 20px auto 20px 270px;
                 padding: 20px;
-                transition: margin-left 0.3s ease;
-            }
-            .profile-info {
-                background: #fff;
-                padding: 20px;
-                border-radius: 8px;
-                box-shadow: 0 2px 10px rgba(0,0,0,0.1);
-                margin-bottom: 30px;
+                transition: margin-left 0.5s ease;
             }
             .post-grid {
                 display: grid;
                 grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
-                gap: 25px;
+                gap: 20px;
             }
             .post-item {
-                background: #fff;
-                padding: 20px;
-                border-radius: 8px;
-                box-shadow: 0 2px 10px rgba(0,0,0,0.1);
-                transition: transform 0.3s ease;
+                background: rgba(13, 27, 42, 0.85);
+                padding: 15px;
+                border-radius: 12px;
+                box-shadow: 0 0 20px rgba(0, 255, 204, 0.2);
+                transition: all 0.3s ease;
+                animation: holographic 2s infinite;
             }
             .post-item:hover {
-                transform: translateY(-5px);
+                transform: scale(1.05);
+                box-shadow: 0 0 30px rgba(255, 0, 122, 0.4);
             }
             .post-preview {
                 width: 100%;
-                border-radius: 5px;
-                height: 180px;
+                border-radius: 8px;
+                height: 200px;
                 object-fit: cover;
+                cursor: pointer;
+                box-shadow: 0 0 15px rgba(0, 255, 204, 0.3);
             }
             .btn {
                 display: inline-block;
+                margin: 10px 0;
                 padding: 12px 20px;
-                background: #3498db;
-                color: #fff;
+                background: #ff007a;
+                color: #00ffcc;
                 text-decoration: none;
-                border-radius: 5px;
+                border-radius: 8px;
                 border: none;
                 cursor: pointer;
-                font-size: 16px;
-                transition: background 0.3s ease;
-                margin: 10px 0;
+                transition: all 0.3s ease;
+                box-shadow: 0 0 10px #ff007a;
             }
-            .btn:hover { background: #2980b9; }
-            .share-btn { background: #2ecc71; }
-            .share-btn:hover { background: #27ae60; }
-            .stats-bar {
-                display: flex;
+            .btn:hover {
+                background: #00ffcc;
+                color: #ff007a;
+                box-shadow: 0 0 20px #00ffcc;
+            }
+            .stats {
+                font-size: 0.9em;
+                color: #ff007a;
+                margin-top: 5px;
+                text-shadow: 0 0 5px #ff007a;
+            }
+            .modal {
+                display: none;
+                position: fixed;
+                top: 0;
+                left: 0;
+                width: 100%;
+                height: 100%;
+                background: rgba(0, 0, 0, 0.9);
+                z-index: 2000;
+                justify-content: center;
                 align-items: center;
-                gap: 10px;
-                margin-top: 10px;
+            }
+            .modal img {
+                max-width: 90%;
+                max-height: 90%;
+                object-fit: contain;
+                transform: scale(1);
+                transition: transform 0.2s ease;
+                box-shadow: 0 0 20px rgba(0, 255, 204, 0.5);
+            }
+            .username-link {
+                color: #00ffcc;
+                text-decoration: none;
+                font-weight: 600;
+                transition: all 0.3s ease;
+            }
+            .username-link:hover {
+                color: #ff007a;
+                text-shadow: 0 0 10px #ff007a;
             }
             .avatar {
                 width: 100px;
                 height: 100px;
                 border-radius: 50%;
                 object-fit: cover;
-                margin-bottom: 15px;
+                margin-bottom: 10px;
+                box-shadow: 0 0 15px rgba(0, 255, 204, 0.5);
+            }
+            .profile-info { margin-bottom: 20px; }
+            .share-btn { background: rgba(16, 185, 129, 0.9); }
+            .share-btn:hover { background: rgba(16, 185, 129, 1); }
+            h1, h2, h3 {
+                color: #ff007a;
+                text-shadow: 0 0 10px #ff007a, 0 0 20px #ff007a;
+                animation: neon-flicker 1.5s infinite alternate;
+            }
+            @keyframes neon-flicker {
+                0%, 19%, 21%, 23%, 25%, 54%, 56%, 100% { opacity: 1; }
+                20%, 24%, 55% { opacity: 0.7; }
+            }
+            @keyframes holographic {
+                0% { box-shadow: 0 0 20px rgba(0, 255, 204, 0.2); }
+                50% { box-shadow: 0 0 20px rgba(255, 0, 122, 0.2); }
+                100% { box-shadow: 0 0 20px rgba(0, 255, 204, 0.2); }
             }
-            h1 { font-size: 28px; margin-bottom: 20px; }
-            h2 { font-size: 20px; margin: 20px 0 10px; }
-            p { margin: 10px 0; font-size: 16px; }
-            a { color: #3498db; text-decoration: none; }
-            a:hover { text-decoration: underline; }
             @media (max-width: 768px) {
-                .sidebar { transform: translateX(-100%); width: 180px; }
+                .sidebar { transform: translateX(-100%); width: 200px; }
                 .sidebar.active { transform: translateX(0); }
                 .menu-btn { display: block; }
-                .container { margin: 80px 20px 20px 20px; }
-                .post-grid { grid-template-columns: 1fr; gap: 20px; }
-                .post-item { padding: 15px; }
+                .container { margin: 60px 10px 20px 10px; max-width: calc(100% - 20px); }
+                .post-grid { grid-template-columns: 1fr; gap: 15px; }
+                .post-item { padding: 10px; }
                 .post-preview { height: 150px; }
                 .btn { font-size: 14px; padding: 10px; }
-                h1 { font-size: 24px; }
-                h2 { font-size: 18px; }
+                h1, h2 { font-size: 1.5em; }
                 .avatar { width: 80px; height: 80px; }
             }
         </style>
@@ -1388,7 +1826,7 @@ def user_profile(username):
                 {% endif %}
                 <p>{{ bio }}</p>
                 {% if link %}
-                    <p><a href="{{ link }}" target="_blank">{{ link }}</a></p>
+                    <p><a href="{{ link }}" target="_blank" style="color: #00ffcc; text-shadow: 0 0 5px #00ffcc;">{{ link }}</a></p>
                 {% endif %}
                 <p>Всего просмотров: {{ total_views }} | Всего лайков: {{ total_likes }}</p>
                 <button class="btn share-btn" onclick="copyProfileLink()">Поделиться профилем</button>
@@ -1404,15 +1842,13 @@ def user_profile(username):
                                     <source src="https://huggingface.co/datasets/{{ repo_id }}/resolve/main/{{ post['type'] }}s/{{ post['filename'] }}" type="video/mp4">
                                 </video>
                             {% else %}
-                                <img class="post-preview" src="https://huggingface.co/datasets/{{ repo_id }}/resolve/main/{{ post['type'] }}s/{{ post['filename'] }}" alt="{{ post['title'] }}">
+                                <img class="post-preview" src="https://huggingface.co/datasets/{{ repo_id }}/resolve/main/{{ post['type'] }}s/{{ post['filename'] }}" alt="{{ post['title'] }}" onclick="openModal(this.src, event)">
                             {% endif %}
-                            <h2>{{ post['title'] }}</h2>
+                            <h3>{{ post['title'] }}</h3>
                         </a>
                         <p>{{ post['description'] }}</p>
                         <p>{{ post['upload_date'] }}</p>
-                        <div class="stats-bar">
-                            <span>Просмотров: {{ post['views'] }} | Лайков: {{ post['likes']|length }}</span>
-                        </div>
+                        <p class="stats">Просмотров: {{ post['views'] }} | Лайков: {{ post['likes']|length }}</p>
                     </div>
                     {% endfor %}
                 {% else %}
@@ -1420,11 +1856,30 @@ def user_profile(username):
                 {% endif %}
             </div>
         </div>
+        <div class="modal" id="imageModal" onclick="closeModal(event)">
+            <img id="modalImage" src="">
+        </div>
         <script>
             function toggleSidebar() {
                 document.getElementById('sidebar').classList.toggle('active');
             }
 
+            function openModal(src, event) {
+                event.preventDefault();
+                const modal = document.getElementById('imageModal');
+                const modalImg = document.getElementById('modalImage');
+                modal.style.display = 'flex';
+                modalImg.src = src;
+                modalImg.style.transform = 'scale(1)';
+            }
+
+            function closeModal(event) {
+                if (event.target.tagName !== 'IMG') {
+                    const modal = document.getElementById('imageModal');
+                    modal.style.display = 'none';
+                }
+            }
+
             function copyProfileLink() {
                 const url = window.location.href;
                 navigator.clipboard.writeText(url).then(() => {
@@ -1443,6 +1898,45 @@ def user_profile(username):
                         });
                     }
                 });
+
+                const modalImg = document.getElementById('modalImage');
+                let scale = 1;
+                let startDistance = 0;
+                let lastTap = 0;
+
+                modalImg.addEventListener('dblclick', function() {
+                    scale = scale === 1 ? 2 : 1;
+                    modalImg.style.transform = `scale(${scale})`;
+                });
+
+                modalImg.addEventListener('touchstart', function(e) {
+                    if (e.touches.length === 2) {
+                        startDistance = getDistance(e.touches[0], e.touches[1]);
+                    } else if (e.touches.length === 1) {
+                        const now = new Date().getTime();
+                        if (now - lastTap < 300) {
+                            scale = scale === 1 ? 2 : 1;
+                            modalImg.style.transform = `scale(${scale})`;
+                        }
+                        lastTap = now;
+                    }
+                });
+
+                modalImg.addEventListener('touchmove', function(e) {
+                    if (e.touches.length === 2) {
+                        e.preventDefault();
+                        const currentDistance = getDistance(e.touches[0], e.touches[1]);
+                        scale = Math.max(1, Math.min(3, scale * (currentDistance / startDistance)));
+                        modalImg.style.transform = `scale(${scale})`;
+                        startDistance = currentDistance;
+                    }
+                });
+
+                function getDistance(touch1, touch2) {
+                    const dx = touch1.pageX - touch2.pageX;
+                    const dy = touch1.pageY - touch2.pageY;
+                    return Math.sqrt(dx * dx + dy * dy);
+                }
             });
         </script>
     </body>
@@ -1519,109 +2013,155 @@ def upload():
         <meta charset="UTF-8">
         <meta name="viewport" content="width=device-width, initial-scale=1.0">
         <title>OstenHost - Загрузка контента</title>
-        <link href="https://fonts.googleapis.com/css2?family=Roboto:wght@400;700&display=swap" rel="stylesheet">
+        <link href="https://fonts.googleapis.com/css2?family=Orbitron:wght@400;700&display=swap" rel="stylesheet">
         <style>
             body {
-                font-family: 'Roboto', sans-serif;
-                background: #f4f7fa;
+                font-family: 'Orbitron', sans-serif;
+                background: linear-gradient(135deg, #0d1b2a, #1b263b);
                 margin: 0;
                 padding: 0;
                 min-height: 100vh;
-                color: #333;
+                overflow-x: hidden;
+                color: #00ffcc;
+                text-shadow: 0 0 5px #00ffcc;
             }
             .sidebar {
                 position: fixed;
                 left: 0;
                 top: 0;
-                width: 200px;
+                width: 250px;
                 height: 100%;
-                background: #2c3e50;
+                background: rgba(13, 27, 42, 0.9);
                 padding: 20px;
-                box-shadow: 2px 0 5px rgba(0,0,0,0.1);
-                transition: transform 0.3s ease;
+                box-shadow: 0 0 20px rgba(0, 255, 204, 0.3);
+                transition: transform 0.5s ease;
                 z-index: 1000;
+                border-right: 2px solid #00ffcc;
             }
+            .sidebar.active { transform: translateX(0); }
             .sidebar-header {
-                margin-bottom: 30px;
+                display: flex;
+                justify-content: space-between;
+                align-items: center;
+                margin-bottom: 20px;
             }
             .nav-brand {
-                font-size: 1.5em;
+                font-size: 1.8em;
                 font-weight: 700;
-                color: #3498db;
+                color: #ff007a;
+                text-shadow: 0 0 10px #ff007a, 0 0 20px #ff007a;
+                animation: neon-flicker 1.5s infinite alternate;
             }
             .nav-links { display: flex; flex-direction: column; gap: 15px; }
             .nav-link {
+                display: flex;
+                align-items: center;
+                gap: 10px;
                 padding: 12px 15px;
-                color: #ecf0f1;
+                background: rgba(0, 255, 204, 0.1);
+                color: #00ffcc;
                 text-decoration: none;
-                border-radius: 5px;
-                transition: background 0.3s ease;
+                border-radius: 8px;
+                transition: all 0.3s ease;
+                box-shadow: 0 0 10px rgba(0, 255, 204, 0.2);
             }
             .nav-link:hover {
-                background: #34495e;
-                color: #fff;
+                background: rgba(0, 255, 204, 0.3);
+                color: #ff007a;
+                transform: translateX(10px);
+                box-shadow: 0 0 20px rgba(0, 255, 204, 0.5);
             }
-            .logout-btn { color: #e74c3c; }
-            .logout-btn:hover { background: #e74c3c; color: #fff; }
+            .logout-btn { background: rgba(255, 0, 122, 0.1); color: #ff007a; }
+            .logout-btn:hover { background: rgba(255, 0, 122, 0.3); color: #00ffcc; }
             .menu-btn {
                 display: none;
-                font-size: 24px;
-                background: none;
+                font-size: 28px;
+                background: rgba(13, 27, 42, 0.9);
                 border: none;
-                color: #2c3e50;
+                color: #00ffcc;
                 cursor: pointer;
                 position: fixed;
                 top: 15px;
                 left: 15px;
                 z-index: 1001;
+                padding: 5px 10px;
+                border-radius: 5px;
+                box-shadow: 0 0 10px rgba(0, 255, 204, 0.3);
             }
             .container {
                 max-width: 600px;
-                margin: 40px auto 40px 240px;
-                background: #fff;
-                padding: 30px;
-                border-radius: 8px;
-                box-shadow: 0 2px 10px rgba(0,0,0,0.1);
-                transition: margin-left 0.3s ease;
+                margin: 20px auto 20px 270px;
+                background: rgba(13, 27, 42, 0.85);
+                padding: 20px;
+                border-radius: 12px;
+                box-shadow: 0 0 30px rgba(0, 255, 204, 0.2);
+                transition: margin-left 0.5s ease;
+                animation: holographic 2s infinite;
             }
             input, textarea {
                 width: 100%;
                 padding: 12px;
                 margin: 10px 0;
-                border: 1px solid #ddd;
-                border-radius: 5px;
+                border: 1px solid #ff007a;
+                border-radius: 8px;
                 box-sizing: border-box;
-                font-size: 16px;
+                background: rgba(0, 0, 0, 0.5);
+                color: #00ffcc;
+                text-shadow: 0 0 5px #00ffcc;
+                transition: all 0.3s ease;
+            }
+            input:focus, textarea:focus {
+                border-color: #00ffcc;
+                box-shadow: 0 0 15px rgba(0, 255, 204, 0.5);
+                outline: none;
             }
-            textarea { resize: vertical; }
             button {
                 padding: 12px;
-                background: #3498db;
-                color: #fff;
+                background: #ff007a;
+                color: #00ffcc;
                 border: none;
-                border-radius: 5px;
+                border-radius: 8px;
                 cursor: pointer;
                 width: 100%;
-                font-size: 16px;
-                transition: background 0.3s ease;
+                transition: all 0.3s ease;
+                box-shadow: 0 0 10px #ff007a;
             }
-            button:hover { background: #2980b9; }
-            #progress-container { margin-top: 15px; }
+            button:hover {
+                background: #00ffcc;
+                color: #ff007a;
+                box-shadow: 0 0 20px #00ffcc;
+            }
+            #progress-container { margin-top: 10px; }
             #progress-bar {
                 width: 0%;
                 height: 20px;
-                background: #3498db;
-                border-radius: 5px;
+                background: #00ffcc;
+                border-radius: 8px;
                 transition: width 0.3s ease;
+                box-shadow: 0 0 10px #00ffcc;
+            }
+            h1 {
+                color: #ff007a;
+                text-shadow: 0 0 10px #ff007a, 0 0 20px #ff007a;
+                animation: neon-flicker 1.5s infinite alternate;
+            }
+            @keyframes neon-flicker {
+                0%, 19%, 21%, 23%, 25%, 54%, 56%, 100% { opacity: 1; }
+                20%, 24%, 55% { opacity: 0.7; }
+            }
+            @keyframes holographic {
+                0% { box-shadow: 0 0 30px rgba(0, 255, 204, 0.2); }
+                50% { box-shadow: 0 0 30px rgba(255, 0, 122, 0.2); }
+                100% { box-shadow: 0 0 30px rgba(0, 255, 204, 0.2); }
             }
-            h1 { font-size: 28px; margin-bottom: 20px; }
             @media (max-width: 768px) {
-                .sidebar { transform: translateX(-100%); width: 180px; }
+                .sidebar { transform: translateX(-100%); width: 200px; }
                 .sidebar.active { transform: translateX(0); }
                 .menu-btn { display: block; }
-                .container { margin: 80px 20px 20px 20px; max-width: calc(100% - 40px); }
-                input, textarea, button { font-size: 14px; padding: 10px; }
-                h1 { font-size: 24px; }
+                .container { margin: 60px 10px 20px 10px; max-width: calc(100% - 20px); }
+                input, textarea, button { font-size: 14px; padding: 10px; margin: 5px 0; }
+                h1 { font-size: 1.5em; }
+                #progress-container { height: 15px; }
                 #progress-bar { height: 15px; }
             }
         </style>
@@ -1708,147 +2248,199 @@ def admin_panel():
         <meta charset="UTF-8">
         <meta name="viewport" content="width=device-width, initial-scale=1.0">
         <title>OstenHost - Админ-панель</title>
-        <link href="https://fonts.googleapis.com/css2?family=Roboto:wght@400;700&display=swap" rel="stylesheet">
+        <link href="https://fonts.googleapis.com/css2?family=Orbitron:wght@400;700&display=swap" rel="stylesheet">
         <style>
             body {
-                font-family: 'Roboto', sans-serif;
-                background: #f4f7fa;
+                font-family: 'Orbitron', sans-serif;
+                background: linear-gradient(135deg, #0d1b2a, #1b263b);
                 margin: 0;
                 padding: 0;
                 min-height: 100vh;
-                color: #333;
+                overflow-x: hidden;
+                color: #00ffcc;
+                text-shadow: 0 0 5px #00ffcc;
             }
             .sidebar {
                 position: fixed;
                 left: 0;
                 top: 0;
-                width: 200px;
+                width: 250px;
                 height: 100%;
-                background: #2c3e50;
+                background: rgba(13, 27, 42, 0.9);
                 padding: 20px;
-                box-shadow: 2px 0 5px rgba(0,0,0,0.1);
-                transition: transform 0.3s ease;
+                box-shadow: 0 0 20px rgba(0, 255, 204, 0.3);
+                transition: transform 0.5s ease;
                 z-index: 1000;
+                border-right: 2px solid #00ffcc;
             }
+            .sidebar.active { transform: translateX(0); }
             .sidebar-header {
-                margin-bottom: 30px;
+                display: flex;
+                justify-content: space-between;
+                align-items: center;
+                margin-bottom: 20px;
             }
             .nav-brand {
-                font-size: 1.5em;
+                font-size: 1.8em;
                 font-weight: 700;
-                color: #3498db;
+                color: #ff007a;
+                text-shadow: 0 0 10px #ff007a, 0 0 20px #ff007a;
+                animation: neon-flicker 1.5s infinite alternate;
             }
             .nav-links { display: flex; flex-direction: column; gap: 15px; }
             .nav-link {
+                display: flex;
+                align-items: center;
+                gap: 10px;
                 padding: 12px 15px;
-                color: #ecf0f1;
+                background: rgba(0, 255, 204, 0.1);
+                color: #00ffcc;
                 text-decoration: none;
-                border-radius: 5px;
-                transition: background 0.3s ease;
+                border-radius: 8px;
+                transition: all 0.3s ease;
+                box-shadow: 0 0 10px rgba(0, 255, 204, 0.2);
             }
             .nav-link:hover {
-                background: #34495e;
-                color: #fff;
+                background: rgba(0, 255, 204, 0.3);
+                color: #ff007a;
+                transform: translateX(10px);
+                box-shadow: 0 0 20px rgba(0, 255, 204, 0.5);
             }
-            .logout-btn { color: #e74c3c; }
-            .logout-btn:hover { background: #e74c3c; color: #fff; }
+            .logout-btn { background: rgba(255, 0, 122, 0.1); color: #ff007a; }
+            .logout-btn:hover { background: rgba(255, 0, 122, 0.3); color: #00ffcc; }
             .menu-btn {
                 display: none;
-                font-size: 24px;
-                background: none;
+                font-size: 28px;
+                background: rgba(13, 27, 42, 0.9);
                 border: none;
-                color: #2c3e50;
+                color: #00ffcc;
                 cursor: pointer;
                 position: fixed;
                 top: 15px;
                 left: 15px;
                 z-index: 1001;
+                padding: 5px 10px;
+                border-radius: 5px;
+                box-shadow: 0 0 10px rgba(0, 255, 204, 0.3);
             }
             .container {
                 max-width: 1200px;
-                margin: 40px auto 40px 240px;
+                margin: 20px auto 20px 270px;
                 padding: 20px;
-                transition: margin-left 0.3s ease;
+                transition: margin-left 0.5s ease;
             }
             .post-grid {
                 display: grid;
                 grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
-                gap: 25px;
+                gap: 20px;
             }
             .post-item {
-                background: #fff;
-                padding: 20px;
-                border-radius: 8px;
-                box-shadow: 0 2px 10px rgba(0,0,0,0.1);
-                transition: transform 0.3s ease;
+                background: rgba(13, 27, 42, 0.85);
+                padding: 15px;
+                border-radius: 12px;
+                box-shadow: 0 0 20px rgba(0, 255, 204, 0.2);
+                transition: all 0.3s ease;
+                animation: holographic 2s infinite;
             }
             .post-item:hover {
-                transform: translateY(-5px);
+                transform: scale(1.05);
+                box-shadow: 0 0 30px rgba(255, 0, 122, 0.4);
             }
             .post-preview {
                 width: 100%;
-                border-radius: 5px;
-                height: 180px;
+                border-radius: 8px;
+                height: 200px;
                 object-fit: cover;
+                box-shadow: 0 0 15px rgba(0, 255, 204, 0.3);
             }
             .delete-btn {
-                padding: 12px;
-                background: #e74c3c;
-                color: #fff;
+                padding: 10px;
+                background: #ff007a;
+                color: #00ffcc;
                 border: none;
-                border-radius: 5px;
+                border-radius: 8px;
                 cursor: pointer;
                 width: 100%;
-                font-size: 16px;
-                transition: background 0.3s ease;
-                margin-top: 10px;
+                transition: all 0.3s ease;
+                box-shadow: 0 0 10px #ff007a;
             }
-            .delete-btn:hover { background: #c0392b; }
-            .search-container {
-                margin-bottom: 30px;
-                display: flex;
-                gap: 10px;
+            .delete-btn:hover {
+                background: #00ffcc;
+                color: #ff007a;
+                box-shadow: 0 0 20px #00ffcc;
             }
+            .search-container { margin-bottom: 20px; }
             .search-input {
                 width: 70%;
                 padding: 12px;
-                border: 1px solid #ddd;
-                border-radius: 5px;
-                font-size: 16px;
+                border: 1px solid #ff007a;
+                border-radius: 8px;
+                background: rgba(0, 0, 0, 0.5);
+                color: #00ffcc;
+                text-shadow: 0 0 5px #00ffcc;
+                transition: all 0.3s ease;
+            }
+            .search-input:focus {
+                border-color: #00ffcc;
+                box-shadow: 0 0 15px rgba(0, 255, 204, 0.5);
+                outline: none;
             }
             .search-btn {
                 padding: 12px 20px;
-                background: #3498db;
-                color: #fff;
+                background: #ff007a;
+                color: #00ffcc;
                 border: none;
-                border-radius: 5px;
+                border-radius: 8px;
                 cursor: pointer;
-                font-size: 16px;
-                transition: background 0.3s ease;
+                transition: all 0.3s ease;
+                box-shadow: 0 0 10px #ff007a;
+            }
+            .search-btn:hover {
+                background: #00ffcc;
+                color: #ff007a;
+                box-shadow: 0 0 20px #00ffcc;
+            }
+            .stats {
+                font-size: 0.9em;
+                color: #ff007a;
+                margin-top: 5px;
+                text-shadow: 0 0 5px #ff007a;
+            }
+            .username-link {
+                color: #00ffcc;
+                text-decoration: none;
+                font-weight: 600;
+                transition: all 0.3s ease;
             }
-            .search-btn:hover { background: #2980b9; }
-            .stats-bar {
-                display: flex;
-                align-items: center;
-                gap: 10px;
-                margin-top: 10px;
+            .username-link:hover {
+                color: #ff007a;
+                text-shadow: 0 0 10px #ff007a;
+            }
+            h1, h2 {
+                color: #ff007a;
+                text-shadow: 0 0 10px #ff007a, 0 0 20px #ff007a;
+                animation: neon-flicker 1.5s infinite alternate;
+            }
+            @keyframes neon-flicker {
+                0%, 19%, 21%, 23%, 25%, 54%, 56%, 100% { opacity: 1; }
+                20%, 24%, 55% { opacity: 0.7; }
+            }
+            @keyframes holographic {
+                0% { box-shadow: 0 0 20px rgba(0, 255, 204, 0.2); }
+                50% { box-shadow: 0 0 20px rgba(255, 0, 122, 0.2); }
+                100% { box-shadow: 0 0 20px rgba(0, 255, 204, 0.2); }
             }
-            h1 { font-size: 28px; margin-bottom: 20px; }
-            h2 { font-size: 20px; margin: 10px 0; }
-            p { margin: 10px 0; font-size: 16px            }
-            a { color: #3498db; text-decoration: none; }
-            a:hover { text-decoration: underline; }
             @media (max-width: 768px) {
-                .sidebar { transform: translateX(-100%); width: 180px; }
+                .sidebar { transform: translateX(-100%); width: 200px; }
                 .sidebar.active { transform: translateX(0); }
                 .menu-btn { display: block; }
-                .container { margin: 80px 20px 20px 20px; max-width: calc(100% - 40px); }
-                .post-grid { grid-template-columns: 1fr; gap: 20px; }
-                .post-item { padding: 15px; }
+                .container { margin: 60px 10px 20px 10px; max-width: calc(100% - 20px); }
+                .post-grid { grid-template-columns: 1fr; gap: 15px; }
+                .post-item { padding: 10px; }
                 .post-preview { height: 150px; }
-                .delete-btn, .search-input { font-size: 14px; padding: 10px; }
+                .delete-btn, .search-input { padding: 10px; font-size: 14px; }
                 .search-btn { padding: 10px 15px; font-size: 14px; }
-                h1 { font-size: 24px; }
+                h1 { font-size: 1.5em; }
             }
         </style>
     </head>
@@ -1858,7 +2450,7 @@ def admin_panel():
         <div class="container">
             <h1>Админ-панель: Все посты</h1>
             <div class="search-container">
-                <form method="POST" style="display: flex; width: 100%;">
+                <form method="POST">
                     <input type="text" name="search" class="search-input" placeholder="Поиск по названию или описанию" value="{{ search_query }}">
                     <button type="submit" class="search-btn">Искать</button>
                 </form>
@@ -1878,10 +2470,8 @@ def admin_panel():
                             <h2>{{ post['title'] }}</h2>
                         </a>
                         <p>{{ post['description'] }}</p>
-                        <p>Загрузил: <a href="{{ url_for('user_profile', username=post['uploader']) }}">{{ post['uploader'] }}</a> | {{ post['upload_date'] }}</p>
-                        <div class="stats-bar">
-                            <span>Просмотров: {{ post['views'] }} | Лайков: {{ post['likes']|length }}</span>
-                        </div>
+                        <p>Загрузил: <a href="{{ url_for('user_profile', username=post['uploader']) }}" class="username-link">{{ post['uploader'] }}</a> | {{ post['upload_date'] }}</p>
+                        <p class="stats">Просмотров: {{ post['views'] }} | Лайков: {{ post['likes']|length }}</p>
                         <form method="POST">
                             <input type="hidden" name="post_id" value="{{ post['id'] }}">
                             <button type="submit" name="delete" class="delete-btn">Удалить</button>
@@ -1919,4 +2509,5 @@ def admin_panel():
 if __name__ == '__main__':
     backup_thread = threading.Thread(target=periodic_backup, daemon=True)
     backup_thread.start()
-    app.run(debug=True, host='0.0.0.0', port=7860)
\ No newline at end of file
+    app.run(debug=True, host='0.0.0.0', port=7860)
+               
\ No newline at end of file