Vid

Sleeping

App Files Files Community

Eluza133 commited on Feb 26, 2025

Commit

c1be53d

verified ·

1 Parent(s): d9f6023

Update app.py

Browse files

Files changed (1) hide show

app.py +185 -123

app.py CHANGED Viewed

@@ -85,6 +85,26 @@ def periodic_backup():
         upload_db_to_hf()
         time.sleep(15)
 # Регистрация пользователя
 @app.route('/register', methods=['GET', 'POST'])
 def register():
@@ -103,6 +123,8 @@ def register():
         flash('Регистрация успешна! Войдите в систему.')
         return redirect(url_for('login'))
     html = '''
     <!DOCTYPE html>
     <html lang="ru">
@@ -112,18 +134,35 @@ def register():
         <title>Регистрация</title>
         <link href="https://fonts.googleapis.com/css2?family=Poppins:wght@300;400;600&display=swap" rel="stylesheet">
         <style>
-            body { font-family: 'Poppins', sans-serif; background: #f0f2f5; padding: 20px; margin: 0; }
-            .container { max-width: 400px; margin: 0 auto; background: #fff; padding: 20px; border-radius: 10px; box-shadow: 0 4px 15px rgba(0,0,0,0.1); }
-            input { width: 100%; padding: 10px; margin: 10px 0; border: 1px solid #e2e8f0; border-radius: 8px; box-sizing: border-box; }
-            button { padding: 10px 20px; background: #3b82f6; color: white; border: none; border-radius: 8px; cursor: pointer; width: 100%; }
-            .flash { color: red; margin-bottom: 10px; }
-            @media (max-width: 600px) {
-                .container { padding: 15px; max-width: 100%; }
-                input, button { font-size: 14px; padding: 8px; }
             }
         </style>
     </head>
     <body>
         <div class="container">
             <h1>Регистрация</h1>
             {% with messages = get_flashed_messages() %}
@@ -140,10 +179,15 @@ def register():
             </form>
             <p>Уже есть аккаунт? <a href="{{ url_for('login') }}">Войти</a></p>
         </div>
     </body>
     </html>
     '''
-    return render_template_string(html)
 # Авторизация пользователя
 @app.route('/login', methods=['GET', 'POST'])
@@ -161,6 +205,8 @@ def login():
         flash('Неверный логин или пароль!')
         return redirect(url_for('login'))
     html = '''
     <!DOCTYPE html>
     <html lang="ru">
@@ -170,18 +216,35 @@ def login():
         <title>Вход</title>
         <link href="https://fonts.googleapis.com/css2?family=Poppins:wght@300;400;600&display=swap" rel="stylesheet">
         <style>
-            body { font-family: 'Poppins', sans-serif; background: #f0f2f5; padding: 20px; margin: 0; }
-            .container { max-width: 400px; margin: 0 auto; background: #fff; padding: 20px; border-radius: 10px; box-shadow: 0 4px 15px rgba(0,0,0,0.1); }
-            input { width: 100%; padding: 10px; margin: 10px 0; border: 1px solid #e2e8f0; border-radius: 8px; box-sizing: border-box; }
-            button { padding: 10px 20px; background: #3b82f6; color: white; border: none; border-radius: 8px; cursor: pointer; width: 100%; }
-            .flash { color: red; margin-bottom: 10px; }
-            @media (max-width: 600px) {
-                .container { padding: 15px; max-width: 100%; }
-                input, button { font-size: 14px; padding: 8px; }
             }
         </style>
     </head>
     <body>
         <div class="container">
             <h1>Вход</h1>
             {% with messages = get_flashed_messages() %}
@@ -198,10 +261,15 @@ def login():
             </form>
             <p>Нет аккаунта? <a href="{{ url_for('register') }}">Зарегистрироваться</a></p>
         </div>
     </body>
     </html>
     '''
-    return render_template_string(html)
 # Выход из системы
 @app.route('/logout')
@@ -223,46 +291,40 @@ def feed():
     <head>
         <meta charset="UTF-8">
         <meta name="viewport" content="width=device-width, initial-scale=1.0">
-        <title>Хостинг контента</title>
         <link href="https://fonts.googleapis.com/css2?family=Poppins:wght@300;400;600&display=swap" rel="stylesheet">
         <style>
-            body { font-family: 'Poppins', sans-serif; background: #f0f2f5; padding: 20px; margin: 0; }
-            .container { max-width: 1200px; margin: 0 auto; padding-left: 220px; transition: padding-left 0.3s; }
-            .sidebar { position: fixed; left: -220px; top: 0; width: 200px; height: 100%; background: #fff; padding: 20px; box-shadow: 2px 0 5px rgba(0,0,0,0.1); transition: left 0.3s; z-index: 1000; }
-            .sidebar.active { left: 0; }
             .post-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); gap: 20px; }
-            .post-item { background: #fff; padding: 15px; border-radius: 10px; box-shadow: 0 4px 15px rgba(0,0,0,0.1); text-decoration: none; color: #2d3748; }
             .post-preview { width: 100%; border-radius: 8px; height: 200px; object-fit: cover; }
-            .auth-links, .upload-btn, .logout-btn, .profile-link { display: block; margin: 10px 0; padding: 10px; background: #3b82f6; color: white; text-align: center; text-decoration: none; border-radius: 8px; }
-            .logout-btn { background: #ef4444; }
-            .profile-link { background: #10b981; }
-            .menu-btn { display: none; font-size: 24px; background: none; border: none; cursor: pointer; position: fixed; top: 20px; left: 20px; z-index: 1001; }
-            .stats { font-size: 0.9em; color: #666; }
             @media (max-width: 768px) {
-                .container { padding-left: 20px; padding: 10px; }
-                .sidebar { left: -220px; width: 150px; padding: 15px; }
-                .sidebar.active { left: 0; }
                 .menu-btn { display: block; }
                 .post-grid { grid-template-columns: 1fr; gap: 15px; }
                 .post-item { padding: 10px; }
                 .post-preview { height: 150px; }
-                .auth-links, .upload-btn, .logout-btn, .profile-link { font-size: 14px; padding: 8px; }
             }
         </style>
     </head>
     <body>
         <button class="menu-btn" onclick="toggleSidebar()">☰</button>
-        <div class="sidebar" id="sidebar">
-            {% if is_authenticated %}
-                <a href="{{ url_for('profile') }}" class="profile-link">
-                    <span style="font-size: 1.2em;">👤</span> {{ username }}
-                </a>
-                <a href="{{ url_for('logout') }}" class="logout-btn">Выйти</a>
-            {% else %}
-                <a href="{{ url_for('login') }}" class="auth-links">Войти</a>
-                <a href="{{ url_for('register') }}" class="auth-links">Зарегистрироваться</a>
-            {% endif %}
-        </div>
         <div class="container">
             <h1>Лента публикаций</h1>
             <div class="post-grid">
@@ -342,42 +404,39 @@ def post_page(post_id):
         <title>{{ post['title'] }}</title>
         <link href="https://fonts.googleapis.com/css2?family=Poppins:wght@300;400;600&display=swap" rel="stylesheet">
         <style>
-            body { font-family: 'Poppins', sans-serif; background: #f0f2f5; padding: 20px; margin: 0; }
-            .sidebar { position: fixed; left: -220px; top: 0; width: 200px; height: 100%; background: #fff; padding: 20px; box-shadow: 2px 0 5px rgba(0,0,0,0.1); transition: left 0.3s; z-index: 1000; }
-            .sidebar.active { left: 0; }
-            .container { max-width: 800px; margin: 0 auto; padding-left: 220px; background: #fff; padding: 20px; border-radius: 10px; box-shadow: 0 4px 15px rgba(0,0,0,0.1); transition: padding-left 0.3s; }
             video, img { width: 100%; border-radius: 8px; max-height: 400px; object-fit: cover; }
-            .back-btn, .profile-link, .logout-btn, .like-btn { display: inline-block; margin: 10px 0; padding: 10px; background: #3b82f6; color: white; text-decoration: none; border-radius: 8px; border: none; cursor: pointer; }
-            .profile-link { background: #10b981; }
-            .logout-btn { background: #ef4444; }
-            .like-btn.liked { background: #ef4444; }
-            .menu-btn { display: none; font-size: 24px; background: none; border: none; cursor: pointer; position: fixed; top: 20px; left: 20px; z-index: 1001; }
-            textarea { width: 100%; padding: 10px; margin: 10px 0; border: 1px solid #e2e8f0; border-radius: 8px; }
             .comment { border-top: 1px solid #e2e8f0; padding: 10px 0; }
             @media (max-width: 768px) {
-                .container { padding-left: 20px; padding: 15px; max-width: 100%; }
-                .sidebar { left: -220px; width: 150px; padding: 15px; }
-                .sidebar.active { left: 0; }
                 .menu-btn { display: block; }
                 video, img { max-height: 250px; }
-                .back-btn, .like-btn, textarea, button { width: 100%; font-size: 14px; padding: 8px; margin: 5px 0; }
-                h1 { font-size: 1.2em; }
             }
         </style>
     </head>
     <body>
         <button class="menu-btn" onclick="toggleSidebar()">☰</button>
-        <div class="sidebar" id="sidebar">
-            {% if is_authenticated %}
-                <a href="{{ url_for('profile') }}" class="profile-link">
-                    <span style="font-size: 1.2em;">👤</span> {{ username }}
-                </a>
-                <a href="{{ url_for('logout') }}" class="logout-btn">Выйти</a>
-            {% else %}
-                <a href="{{ url_for('login') }}" class="profile-link">Войти</a>
-                <a href="{{ url_for('register') }}" class="profile-link">Зарегистрироваться</a>
-            {% endif %}
-        </div>
         <div class="container">
             <h1>{{ post['title'] }}</h1>
             {% if post['type'] == 'video' %}
@@ -391,14 +450,14 @@ def post_page(post_id):
             <p>Загрузил: {{ post['uploader'] }} | {{ post['upload_date'] }}</p>
             <p>Просмотров: {{ post['views'] }} | Лайков: {{ post['likes']|length }}</p>
             {% if is_authenticated %}
-                <form method="POST">
-                    <button type="submit" name="like" class="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">Отправить</button>
                 </form>
             {% endif %}
             <h3>Комментарии</h3>
@@ -407,7 +466,7 @@ def post_page(post_id):
                     <p><strong>{{ comment['user'] }}</strong> ({{ comment['date'] }}): {{ comment['text'] }}</p>
                 </div>
             {% endfor %}
-            <a href="{{ url_for('feed') }}" class="back-btn">Назад к ленте</a>
             {% if not is_authenticated %}
                 <p><a href="{{ url_for('login') }}">Войдите</a>, чтобы ставить лайки и комментировать.</p>
             {% endif %}
@@ -432,6 +491,7 @@ def profile():
     data = load_data()
     username = session['username']
     user_posts = [p for p in data['posts'] if p['uploader'] == username]
     if request.method == 'POST':
         post_id = request.form.get('post_id')
@@ -450,43 +510,45 @@ def profile():
         <title>Профиль - {{ username }}</title>
         <link href="https://fonts.googleapis.com/css2?family=Poppins:wght@300;400;600&display=swap" rel="stylesheet">
         <style>
-            body { font-family: 'Poppins', sans-serif; background: #f0f2f5; padding: 20px; margin: 0; }
-            .sidebar { position: fixed; left: -220px; top: 0; width: 200px; height: 100%; background: #fff; padding: 20px; box-shadow: 2px 0 5px rgba(0,0,0,0.1); transition: left 0.3s; z-index: 1000; }
-            .sidebar.active { left: 0; }
-            .container { max-width: 800px; margin: 0 auto; padding-left: 220px; transition: padding-left 0.3s; }
             .post-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); gap: 20px; }
-            .post-item { background: #fff; padding: 15px; border-radius: 10px; box-shadow: 0 4px 15px rgba(0,0,0,0.1); }
             .post-preview { width: 100%; border-radius: 8px; height: 200px; object-fit: cover; }
-            .upload-btn, .delete-btn, .profile-link, .logout-btn { display: block; margin: 10px 0; padding: 10px; background: #3b82f6; color: white; text-decoration: none; border-radius: 8px; }
-            .delete-btn { background: #ef4444; border: none; cursor: pointer; }
-            .profile-link { background: #10b981; }
-            .logout-btn { background: #ef4444; }
-            .menu-btn { display: none; font-size: 24px; background: none; border: none; cursor: pointer; position: fixed; top: 20px; left: 20px; z-index: 1001; }
-            .stats { font-size: 0.9em; color: #666; }
             @media (max-width: 768px) {
-                .container { padding-left: 20px; padding: 15px; max-width: 100%; }
-                .sidebar { left: -220px; width: 150px; padding: 15px; }
-                .sidebar.active { left: 0; }
                 .menu-btn { display: block; }
                 .post-grid { grid-template-columns: 1fr; gap: 15px; }
                 .post-item { padding: 10px; }
                 .post-preview { height: 150px; }
-                .upload-btn, .delete-btn, .profile-link, .logout-btn { font-size: 14px; padding: 8px; }
-                h1, h2 { font-size: 1.2em; }
             }
         </style>
     </head>
     <body>
         <button class="menu-btn" onclick="toggleSidebar()">☰</button>
-        <div class="sidebar" id="sidebar">
-            <a href="{{ url_for('profile') }}" class="profile-link">
-                <span style="font-size: 1.2em;">👤</span> {{ username }}
-            </a>
-            <a href="{{ url_for('logout') }}" class="logout-btn">Выйти</a>
-        </div>
         <div class="container">
             <h1>Профиль: {{ username }}</h1>
-            <a href="{{ url_for('upload') }}" class="upload-btn">Добавить публикацию</a>
             <h2>Ваши публикации</h2>
             <div class="post-grid">
                 {% if user_posts %}
@@ -507,7 +569,7 @@ def profile():
                         <p class="stats">Просмотров: {{ post['views'] }} | Лайков: {{ post['likes']|length }}</p>
                         <form method="POST">
                             <input type="hidden" name="post_id" value="{{ post['id'] }}">
-                            <button type="submit" class="delete-btn">Удалить</button>
                         </form>
                     </div>
                     {% endfor %}
@@ -536,7 +598,7 @@ def profile():
     </body>
     </html>
     '''
-    return render_template_string(html, username=username, user_posts=user_posts, repo_id=REPO_ID)
 # Страница загрузки контента
 @app.route('/upload', methods=['GET', 'POST'])
@@ -598,7 +660,8 @@ def upload():
         return redirect(url_for('profile'))
-    username = session['username']
     html = '''
     <!DOCTYPE html>
     <html lang="ru">
@@ -608,25 +671,29 @@ def upload():
         <title>Загрузка контента</title>
         <link href="https://fonts.googleapis.com/css2?family=Poppins:wght@300;400;600&display=swap" rel="stylesheet">
         <style>
-            body { font-family: 'Poppins', sans-serif; background: #f0f2f5; padding: 20px; margin: 0; }
-            .sidebar { position: fixed; left: -220px; top: 0; width: 200px; height: 100%; background: #fff; padding: 20px; box-shadow: 2px 0 5px rgba(0,0,0,0.1); transition: left 0.3s; z-index: 1000; }
-            .sidebar.active { left: 0; }
-            .container { max-width: 600px; margin: 0 auto; padding-left: 220px; background: #fff; padding: 20px; border-radius: 10px; box-shadow: 0 4px 15px rgba(0,0,0,0.1); transition: padding-left 0.3s; }
-            input, textarea { width: 100%; padding: 10px; margin: 10px 0; border: 1px solid #e2e8f0; border-radius: 8px; box-sizing: border-box; }
-            button { padding: 10px 20px; background: #3b82f6; color: white; border: none; border-radius: 8px; cursor: pointer; width: 100%; }
             #progress-container { margin-top: 10px; }
-            #progress-bar { width: 0%; height: 20px; background: #3b82f6; border-radius: 8px; transition: width 0.3s; }
-            .profile-link, .logout-btn { display: block; margin: 10px 0; padding: 10px; background: #3b82f6; color: white; text-decoration: none; border-radius: 8px; }
-            .profile-link { background: #10b981; }
-            .logout-btn { background: #ef4444; }
-            .menu-btn { display: none; font-size: 24px; background: none; border: none; cursor: pointer; position: fixed; top: 20px; left: 20px; z-index: 1001; }
             @media (max-width: 768px) {
-                .container { padding-left: 20px; padding: 15px; max-width: 100%; }
-                .sidebar { left: -220px; width: 150px; padding: 15px; }
-                .sidebar.active { left: 0; }
                 .menu-btn { display: block; }
-                input, textarea, button { font-size: 14px; padding: 8px; margin: 5px 0; }
-                h1 { font-size: 1.2em; }
                 #progress-container { height: 15px; }
                 #progress-bar { height: 15px; }
             }
@@ -634,12 +701,7 @@ def upload():
     </head>
     <body>
         <button class="menu-btn" onclick="toggleSidebar()">☰</button>
-        <div class="sidebar" id="sidebar">
-            <a href="{{ url_for('profile') }}" class="profile-link">
-                <span style="font-size: 1.2em;">👤</span> {{ username }}
-            </a>
-            <a href="{{ url_for('logout') }}" class="logout-btn">Выйти</a>
-        </div>
         <div class="container">
             <h1>Загрузить контент</h1>
             <form id="upload-form" enctype="multipart/form-data">
@@ -689,7 +751,7 @@ def upload():
     </body>
     </html>
     '''
-    return render_template_string(html, username=username)
 if __name__ == '__main__':
     backup_thread = threading.Thread(target=periodic_backup, daemon=True)

         upload_db_to_hf()
         time.sleep(15)
+# Базовый шаблон боковой навигации
+NAV_HTML = '''
+    <aside class="sidebar" id="sidebar">
+        <div class="sidebar-header">
+            <span class="nav-brand">Контент Хост</span>
+        </div>
+        <nav class="nav-links">
+            <a href="{{ url_for('feed') }}" class="nav-link"><span>📜</span> Лента</a>
+            {% if is_authenticated %}
+                <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"><span>🔑</span> Войти</a>
+                <a href="{{ url_for('register') }}" class="nav-link"><span>✨</span> Регистрация</a>
+            {% endif %}
+        </nav>
+    </aside>
+'''
 # Регистрация пользователя
 @app.route('/register', methods=['GET', 'POST'])
 def register():
         flash('Регистрация успешна! Войдите в систему.')
         return redirect(url_for('login'))
+    is_authenticated = 'username' in session
+    username = session.get('username', None)
     html = '''
     <!DOCTYPE html>
     <html lang="ru">
         <title>Регистрация</title>
         <link href="https://fonts.googleapis.com/css2?family=Poppins:wght@300;400;600&display=swap" rel="stylesheet">
         <style>
+            body { font-family: 'Poppins', sans-serif; background: linear-gradient(135deg, #e0e7ff, #f3f4f6); margin: 0; padding: 0; min-height: 100vh; }
+            .sidebar { position: fixed; left: 0; top: 0; width: 250px; height: 100%; background: rgba(255, 255, 255, 0.9); backdrop-filter: blur(10px); padding: 20px; box-shadow: 2px 0 15px rgba(0,0,0,0.1); transition: transform 0.3s ease; z-index: 1000; }
+            .sidebar-header { display: flex; justify-content: space-between; align-items: center; margin-bottom: 20px; }
+            .nav-brand { font-size: 1.5em; font-weight: 600; color: #3b82f6; }
+            .nav-links { display: flex; flex-direction: column; gap: 10px; }
+            .nav-link { display: flex; align-items: center; gap: 10px; padding: 12px 15px; background: rgba(59, 130, 246, 0.1); color: #3b82f6; text-decoration: none; border-radius: 8px; transition: all 0.3s ease; }
+            .nav-link:hover { background: rgba(59, 130, 246, 0.3); color: #2563eb; transform: translateX(5px); }
+            .logout-btn { background: rgba(239, 68, 68, 0.1); color: #ef4444; }
+            .logout-btn:hover { background: rgba(239, 68, 68, 0.3); color: #dc2626; }
+            .menu-btn { display: none; font-size: 28px; background: rgba(255, 255, 255, 0.9); border: none; color: #3b82f6; cursor: pointer; position: fixed; top: 15px; left: 15px; z-index: 1001; padding: 5px 10px; border-radius: 5px; box-shadow: 0 2px 10px rgba(0,0,0,0.1); }
+            .container { max-width: 400px; margin: 20px auto 20px 270px; background: rgba(255, 255, 255, 0.95); backdrop-filter: blur(5px); padding: 20px; border-radius: 12px; box-shadow: 0 4px 20px rgba(0,0,0,0.1); transition: margin-left 0.3s ease; }
+            input { width: 100%; padding: 12px; margin: 10px 0; border: 1px solid #e2e8f0; border-radius: 8px; box-sizing: border-box; background: rgba(255, 255, 255, 0.8); }
+            button { padding: 12px; background: #3b82f6; color: white; border: none; border-radius: 8px; cursor: pointer; width: 100%; transition: background 0.3s ease; }
+            button:hover { background: #2563eb; }
+            .flash { color: #ef4444; margin-bottom: 10px; text-align: center; }
+            @media (max-width: 768px) {
+                .sidebar { transform: translateX(-100%); width: 200px; }
+                .sidebar.active { transform: translateX(0); }
+                .menu-btn { display: block; }
+                .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; }
             }
         </style>
     </head>
     <body>
+        <button class="menu-btn" onclick="toggleSidebar()">☰</button>
+        ''' + NAV_HTML + '''
         <div class="container">
             <h1>Регистрация</h1>
             {% with messages = get_flashed_messages() %}
             </form>
             <p>Уже есть аккаунт? <a href="{{ url_for('login') }}">Войти</a></p>
         </div>
+        <script>
+            function toggleSidebar() {
+                document.getElementById('sidebar').classList.toggle('active');
+            }
+        </script>
     </body>
     </html>
     '''
+    return render_template_string(html, is_authenticated=is_authenticated, username=username)
 # Авторизация пользователя
 @app.route('/login', methods=['GET', 'POST'])
         flash('Неверный логин или пароль!')
         return redirect(url_for('login'))
+    is_authenticated = 'username' in session
+    username = session.get('username', None)
     html = '''
     <!DOCTYPE html>
     <html lang="ru">
         <title>Вход</title>
         <link href="https://fonts.googleapis.com/css2?family=Poppins:wght@300;400;600&display=swap" rel="stylesheet">
         <style>
+            body { font-family: 'Poppins', sans-serif; background: linear-gradient(135deg, #e0e7ff, #f3f4f6); margin: 0; padding: 0; min-height: 100vh; }
+            .sidebar { position: fixed; left: 0; top: 0; width: 250px; height: 100%; background: rgba(255, 255, 255, 0.9); backdrop-filter: blur(10px); padding: 20px; box-shadow: 2px 0 15px rgba(0,0,0,0.1); transition: transform 0.3s ease; z-index: 1000; }
+            .sidebar-header { display: flex; justify-content: space-between; align-items: center; margin-bottom: 20px; }
+            .nav-brand { font-size: 1.5em; font-weight: 600; color: #3b82f6; }
+            .nav-links { display: flex; flex-direction: column; gap: 10px; }
+            .nav-link { display: flex; align-items: center; gap: 10px; padding: 12px 15px; background: rgba(59, 130, 246, 0.1); color: #3b82f6; text-decoration: none; border-radius: 8px; transition: all 0.3s ease; }
+            .nav-link:hover { background: rgba(59, 130, 246, 0.3); color: #2563eb; transform: translateX(5px); }
+            .logout-btn { background: rgba(239, 68, 68, 0.1); color: #ef4444; }
+            .logout-btn:hover { background: rgba(239, 68, 68, 0.3); color: #dc2626; }
+            .menu-btn { display: none; font-size: 28px; background: rgba(255, 255, 255, 0.9); border: none; color: #3b82f6; cursor: pointer; position: fixed; top: 15px; left: 15px; z-index: 1001; padding: 5px 10px; border-radius: 5px; box-shadow: 0 2px 10px rgba(0,0,0,0.1); }
+            .container { max-width: 400px; margin: 20px auto 20px 270px; background: rgba(255, 255, 255, 0.95); backdrop-filter: blur(5px); padding: 20px; border-radius: 12px; box-shadow: 0 4px 20px rgba(0,0,0,0.1); transition: margin-left 0.3s ease; }
+            input { width: 100%; padding: 12px; margin: 10px 0; border: 1px solid #e2e8f0; border-radius: 8px; box-sizing: border-box; background: rgba(255, 255, 255, 0.8); }
+            button { padding: 12px; background: #3b82f6; color: white; border: none; border-radius: 8px; cursor: pointer; width: 100%; transition: background 0.3s ease; }
+            button:hover { background: #2563eb; }
+            .flash { color: #ef4444; margin-bottom: 10px; text-align: center; }
+            @media (max-width: 768px) {
+                .sidebar { transform: translateX(-100%); width: 200px; }
+                .sidebar.active { transform: translateX(0); }
+                .menu-btn { display: block; }
+                .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; }
             }
         </style>
     </head>
     <body>
+        <button class="menu-btn" onclick="toggleSidebar()">☰</button>
+        ''' + NAV_HTML + '''
         <div class="container">
             <h1>Вход</h1>
             {% with messages = get_flashed_messages() %}
             </form>
             <p>Нет аккаунта? <a href="{{ url_for('register') }}">Зарегистрироваться</a></p>
         </div>
+        <script>
+            function toggleSidebar() {
+                document.getElementById('sidebar').classList.toggle('active');
+            }
+        </script>
     </body>
     </html>
     '''
+    return render_template_string(html, is_authenticated=is_authenticated, username=username)
 # Выход из системы
 @app.route('/logout')
     <head>
         <meta charset="UTF-8">
         <meta name="viewport" content="width=device-width, initial-scale=1.0">
+        <title>Лента</title>
         <link href="https://fonts.googleapis.com/css2?family=Poppins:wght@300;400;600&display=swap" rel="stylesheet">
         <style>
+            body { font-family: 'Poppins', sans-serif; background: linear-gradient(135deg, #e0e7ff, #f3f4f6); margin: 0; padding: 0; min-height: 100vh; }
+            .sidebar { position: fixed; left: 0; top: 0; width: 250px; height: 100%; background: rgba(255, 255, 255, 0.9); backdrop-filter: blur(10px); padding: 20px; box-shadow: 2px 0 15px rgba(0,0,0,0.1); transition: transform 0.3s ease; z-index: 1000; }
+            .sidebar-header { display: flex; justify-content: space-between; align-items: center; margin-bottom: 20px; }
+            .nav-brand { font-size: 1.5em; font-weight: 600; color: #3b82f6; }
+            .nav-links { display: flex; flex-direction: column; gap: 10px; }
+            .nav-link { display: flex; align-items: center; gap: 10px; padding: 12px 15px; background: rgba(59, 130, 246, 0.1); color: #3b82f6; text-decoration: none; border-radius: 8px; transition: all 0.3s ease; }
+            .nav-link:hover { background: rgba(59, 130, 246, 0.3); color: #2563eb; transform: translateX(5px); }
+            .logout-btn { background: rgba(239, 68, 68, 0.1); color: #ef4444; }
+            .logout-btn:hover { background: rgba(239, 68, 68, 0.3); color: #dc2626; }
+            .menu-btn { display: none; font-size: 28px; background: rgba(255, 255, 255, 0.9); border: none; color: #3b82f6; cursor: pointer; position: fixed; top: 15px; left: 15px; z-index: 1001; padding: 5px 10px; border-radius: 5px; box-shadow: 0 2px 10px rgba(0,0,0,0.1); }
+            .container { max-width: 1200px; margin: 20px auto 20px 270px; padding: 20px; transition: margin-left 0.3s ease; }
             .post-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); gap: 20px; }
+            .post-item { background: rgba(255, 255, 255, 0.95); backdrop-filter: blur(5px); padding: 15px; border-radius: 12px; box-shadow: 0 4px 20px rgba(0,0,0,0.1); text-decoration: none; color: #2d3748; transition: transform 0.3s ease; }
+            .post-item:hover { transform: scale(1.02); }
             .post-preview { width: 100%; border-radius: 8px; height: 200px; object-fit: cover; }
+            .stats { font-size: 0.9em; color: #666; margin-top: 5px; }
             @media (max-width: 768px) {
+                .sidebar { transform: translateX(-100%); width: 200px; }
+                .sidebar.active { transform: translateX(0); }
                 .menu-btn { display: block; }
+                .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: 1.5em; }
             }
         </style>
     </head>
     <body>
         <button class="menu-btn" onclick="toggleSidebar()">☰</button>
+        ''' + NAV_HTML + '''
         <div class="container">
             <h1>Лента публикаций</h1>
             <div class="post-grid">
         <title>{{ post['title'] }}</title>
         <link href="https://fonts.googleapis.com/css2?family=Poppins:wght@300;400;600&display=swap" rel="stylesheet">
         <style>
+            body { font-family: 'Poppins', sans-serif; background: linear-gradient(135deg, #e0e7ff, #f3f4f6); margin: 0; padding: 0; min-height: 100vh; }
+            .sidebar { position: fixed; left: 0; top: 0; width: 250px; height: 100%; background: rgba(255, 255, 255, 0.9); backdrop-filter: blur(10px); padding: 20px; box-shadow: 2px 0 15px rgba(0,0,0,0.1); transition: transform 0.3s ease; z-index: 1000; }
+            .sidebar-header { display: flex; justify-content: space-between; align-items: center; margin-bottom: 20px; }
+            .nav-brand { font-size: 1.5em; font-weight: 600; color: #3b82f6; }
+            .nav-links { display: flex; flex-direction: column; gap: 10px; }
+            .nav-link { display: flex; align-items: center; gap: 10px; padding: 12px 15px; background: rgba(59, 130, 246, 0.1); color: #3b82f6; text-decoration: none; border-radius: 8px; transition: all 0.3s ease; }
+            .nav-link:hover { background: rgba(59, 130, 246, 0.3); color: #2563eb; transform: translateX(5px); }
+            .logout-btn { background: rgba(239, 68, 68, 0.1); color: #ef4444; }
+            .logout-btn:hover { background: rgba(239, 68, 68, 0.3); color: #dc2626; }
+            .menu-btn { display: none; font-size: 28px; background: rgba(255, 255, 255, 0.9); border: none; color: #3b82f6; cursor: pointer; position: fixed; top: 15px; left: 15px; z-index: 1001; padding: 5px 10px; border-radius: 5px; box-shadow: 0 2px 10px rgba(0,0,0,0.1); }
+            .container { max-width: 800px; margin: 20px auto 20px 270px; background: rgba(255, 255, 255, 0.95); backdrop-filter: blur(5px); padding: 20px; border-radius: 12px; box-shadow: 0 4px 20px rgba(0,0,0,0.1); transition: margin-left 0.3s ease; }
             video, img { width: 100%; border-radius: 8px; max-height: 400px; object-fit: cover; }
+            .btn { display: inline-block; margin: 10px 0; padding: 12px 20px; background: rgba(59, 130, 246, 0.9); color: white; text-decoration: none; border-radius: 8px; border: none; cursor: pointer; transition: all 0.3s ease; }
+            .btn:hover { background: rgba(59, 130, 246, 1); transform: scale(1.05); }
+            .like-btn.liked { background: rgba(239, 68, 68, 0.9); }
+            .like-btn.liked:hover { background: rgba(239, 68, 68, 1); }
+            textarea { width: 100%; padding: 12px; margin: 10px 0; border: 1px solid #e2e8f0; border-radius: 8px; resize: vertical; background: rgba(255, 255, 255, 0.8); }
             .comment { border-top: 1px solid #e2e8f0; padding: 10px 0; }
             @media (max-width: 768px) {
+                .sidebar { transform: translateX(-100%); width: 200px; }
+                .sidebar.active { transform: translateX(0); }
                 .menu-btn { display: block; }
+                .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>
     <body>
         <button class="menu-btn" onclick="toggleSidebar()">☰</button>
+        ''' + NAV_HTML + '''
         <div class="container">
             <h1>{{ post['title'] }}</h1>
             {% if post['type'] == 'video' %}
             <p>Загрузил: {{ post['uploader'] }} | {{ 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>
                 </form>
             {% endif %}
             <h3>Комментарии</h3>
                     <p><strong>{{ comment['user'] }}</strong> ({{ comment['date'] }}): {{ comment['text'] }}</p>
                 </div>
             {% endfor %}
+            <a href="{{ url_for('feed') }}" class="btn">Назад к ленте</a>
             {% if not is_authenticated %}
                 <p><a href="{{ url_for('login') }}">Войдите</a>, чтобы ставить лайки и комментировать.</p>
             {% endif %}
     data = load_data()
     username = session['username']
     user_posts = [p for p in data['posts'] if p['uploader'] == username]
+    is_authenticated = 'username' in session
     if request.method == 'POST':
         post_id = request.form.get('post_id')
         <title>Профиль - {{ username }}</title>
         <link href="https://fonts.googleapis.com/css2?family=Poppins:wght@300;400;600&display=swap" rel="stylesheet">
         <style>
+            body { font-family: 'Poppins', sans-serif; background: linear-gradient(135deg, #e0e7ff, #f3f4f6); margin: 0; padding: 0; min-height: 100vh; }
+            .sidebar { position: fixed; left: 0; top: 0; width: 250px; height: 100%; background: rgba(255, 255, 255, 0.9); backdrop-filter: blur(10px); padding: 20px; box-shadow: 2px 0 15px rgba(0,0,0,0.1); transition: transform 0.3s ease; z-index: 1000; }
+            .sidebar-header { display: flex; justify-content: space-between; align-items: center; margin-bottom: 20px; }
+            .nav-brand { font-size: 1.5em; font-weight: 600; color: #3b82f6; }
+            .nav-links { display: flex; flex-direction: column; gap: 10px; }
+            .nav-link { display: flex; align-items: center; gap: 10px; padding: 12px 15px; background: rgba(59, 130, 246, 0.1); color: #3b82f6; text-decoration: none; border-radius: 8px; transition: all 0.3s ease; }
+            .nav-link:hover { background: rgba(59, 130, 246, 0.3); color: #2563eb; transform: translateX(5px); }
+            .logout-btn { background: rgba(239, 68, 68, 0.1); color: #ef4444; }
+            .logout-btn:hover { background: rgba(239, 68, 68, 0.3); color: #dc2626; }
+            .menu-btn { display: none; font-size: 28px; background: rgba(255, 255, 255, 0.9); border: none; color: #3b82f6; cursor: pointer; position: fixed; top: 15px; left: 15px; z-index: 1001; padding: 5px 10px; border-radius: 5px; box-shadow: 0 2px 10px rgba(0,0,0,0.1); }
+            .container { max-width: 800px; margin: 20px auto 20px 270px; padding: 20px; transition: margin-left 0.3s ease; }
             .post-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); gap: 20px; }
+            .post-item { background: rgba(255, 255, 255, 0.95); backdrop-filter: blur(5px); padding: 15px; border-radius: 12px; box-shadow: 0 4px 20px rgba(0,0,0,0.1); transition: transform 0.3s ease; }
+            .post-item:hover { transform: scale(1.02); }
             .post-preview { width: 100%; border-radius: 8px; height: 200px; object-fit: cover; }
+            .btn { display: block; margin: 10px 0; padding: 12px 20px; background: rgba(59, 130, 246, 0.9); color: white; text-decoration: none; border-radius: 8px; border: none; cursor: pointer; transition: all 0.3s ease; }
+            .btn:hover { background: rgba(59, 130, 246, 1); transform: scale(1.05); }
+            .delete-btn { background: rgba(239, 68, 68, 0.9); }
+            .delete-btn:hover { background: rgba(239, 68, 68, 1); }
+            .stats { font-size: 0.9em; color: #666; margin-top: 5px; }
             @media (max-width: 768px) {
+                .sidebar { transform: translateX(-100%); width: 200px; }
+                .sidebar.active { transform: translateX(0); }
                 .menu-btn { display: block; }
+                .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, h2 { font-size: 1.5em; }
             }
         </style>
     </head>
     <body>
         <button class="menu-btn" onclick="toggleSidebar()">☰</button>
+        ''' + NAV_HTML + '''
         <div class="container">
             <h1>Профиль: {{ username }}</h1>
+            <a href="{{ url_for('upload') }}" class="btn">Добавить публикацию</a>
             <h2>Ваши публикации</h2>
             <div class="post-grid">
                 {% if user_posts %}
                         <p class="stats">Просмотров: {{ post['views'] }} | Лайков: {{ post['likes']|length }}</p>
                         <form method="POST">
                             <input type="hidden" name="post_id" value="{{ post['id'] }}">
+                            <button type="submit" class="btn delete-btn">Удалить</button>
                         </form>
                     </div>
                     {% endfor %}
     </body>
     </html>
     '''
+    return render_template_string(html, username=username, user_posts=user_posts, repo_id=REPO_ID, is_authenticated=is_authenticated)
 # Страница загрузки контента
 @app.route('/upload', methods=['GET', 'POST'])
         return redirect(url_for('profile'))
+    is_authenticated = 'username' in session
+    username = session.get('username', None)
     html = '''
     <!DOCTYPE html>
     <html lang="ru">
         <title>Загрузка контента</title>
         <link href="https://fonts.googleapis.com/css2?family=Poppins:wght@300;400;600&display=swap" rel="stylesheet">
         <style>
+            body { font-family: 'Poppins', sans-serif; background: linear-gradient(135deg, #e0e7ff, #f3f4f6); margin: 0; padding: 0; min-height: 100vh; }
+            .sidebar { position: fixed; left: 0; top: 0; width: 250px; height: 100%; background: rgba(255, 255, 255, 0.9); backdrop-filter: blur(10px); padding: 20px; box-shadow: 2px 0 15px rgba(0,0,0,0.1); transition: transform 0.3s ease; z-index: 1000; }
+            .sidebar-header { display: flex; justify-content: space-between; align-items: center; margin-bottom: 20px; }
+            .nav-brand { font-size: 1.5em; font-weight: 600; color: #3b82f6; }
+            .nav-links { display: flex; flex-direction: column; gap: 10px; }
+            .nav-link { display: flex; align-items: center; gap: 10px; padding: 12px 15px; background: rgba(59, 130, 246, 0.1); color: #3b82f6; text-decoration: none; border-radius: 8px; transition: all 0.3s ease; }
+            .nav-link:hover { background: rgba(59, 130, 246, 0.3); color: #2563eb; transform: translateX(5px); }
+            .logout-btn { background: rgba(239, 68, 68, 0.1); color: #ef4444; }
+            .logout-btn:hover { background: rgba(239, 68, 68, 0.3); color: #dc2626; }
+            .menu-btn { display: none; font-size: 28px; background: rgba(255, 255, 255, 0.9); border: none; color: #3b82f6; cursor: pointer; position: fixed; top: 15px; left: 15px; z-index: 1001; padding: 5px 10px; border-radius: 5px; box-shadow: 0 2px 10px rgba(0,0,0,0.1); }
+            .container { max-width: 600px; margin: 20px auto 20px 270px; background: rgba(255, 255, 255, 0.95); backdrop-filter: blur(5px); padding: 20px; border-radius: 12px; box-shadow: 0 4px 20px rgba(0,0,0,0.1); transition: margin-left 0.3s ease; }
+            input, textarea { width: 100%; padding: 12px; margin: 10px 0; border: 1px solid #e2e8f0; border-radius: 8px; box-sizing: border-box; background: rgba(255, 255, 255, 0.8); }
+            button { padding: 12px; background: #3b82f6; color: white; border: none; border-radius: 8px; cursor: pointer; width: 100%; transition: background 0.3s ease; }
+            button:hover { background: #2563eb; }
             #progress-container { margin-top: 10px; }
+            #progress-bar { width: 0%; height: 20px; background: #3b82f6; border-radius: 8px; transition: width 0.3s ease; }
             @media (max-width: 768px) {
+                .sidebar { transform: translateX(-100%); width: 200px; }
+                .sidebar.active { transform: translateX(0); }
                 .menu-btn { display: block; }
+                .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; }
             }
     </head>
     <body>
         <button class="menu-btn" onclick="toggleSidebar()">☰</button>
+        ''' + NAV_HTML + '''
         <div class="container">
             <h1>Загрузить контент</h1>
             <form id="upload-form" enctype="multipart/form-data">
     </body>
     </html>
     '''
+    return render_template_string(html, username=username, is_authenticated=is_authenticated)
 if __name__ == '__main__':
     backup_thread = threading.Thread(target=periodic_backup, daemon=True)