Update app.py

app.py

@@ -119,7 +119,7 @@ def update_last_seen(data, username):
         data['users'][username]['last_seen'] = datetime.now().strftime('%Y-%m-%d %H:%M:%S')
         save_data(data)
 
-# Новый стиль 2025 года
+# Новый стиль 2025 года с изменениями для TikTok-подобной ленты
 BASE_STYLE = '''
 :root {
     --primary: #ff3b8e;
@@ -264,11 +264,13 @@ body {
 
 .container {
     margin: 2rem 2rem 2rem 340px;
-    padding: 2rem;
+    padding: 0;
     background: var(--surface);
     border-radius: 20px;
     box-shadow: var(--shadow);
     transition: var(--transition);
+    height: calc(100vh - 4rem);
+    overflow: hidden;
 }
 
 .btn {
@@ -376,9 +378,141 @@ input:focus, textarea:focus, select:focus {
         display: block;
     }
     .container {
-        margin: 5rem 1rem 1rem;
+        margin: 2rem 1rem;
     }
 }
+
+/* Стили для TikTok-подобной ленты */
+.feed-container {
+    height: 100%;
+    overflow-y: scroll;
+    scroll-snap-type: y mandatory;
+    -webkit-overflow-scrolling: touch;
+}
+
+.post-slide {
+    height: 100vh;
+    scroll-snap-align: start;
+    position: relative;
+    display: flex;
+    flex-direction: column;
+    justify-content: center;
+    align-items: center;
+    background: var(--glass);
+}
+
+.post-media {
+    width: 100%;
+    height: 80%;
+    object-fit: contain;
+    border-radius: 20px;
+    box-shadow: var(--shadow);
+}
+
+.post-overlay {
+    position: absolute;
+    bottom: 0;
+    left: 0;
+    width: 100%;
+    padding: 1rem;
+    background: linear-gradient(to top, rgba(0, 0, 0, 0.8), transparent);
+}
+
+.post-info {
+    padding: 1rem;
+    width: 100%;
+}
+
+.post-info h2 {
+    font-size: 1.5rem;
+    margin-bottom: 0.5rem;
+}
+
+.post-info p {
+    font-size: 1rem;
+    opacity: 0.8;
+}
+
+.actions {
+    position: absolute;
+    right: 1rem;
+    top: 50%;
+    transform: translateY(-50%);
+    display: flex;
+    flex-direction: column;
+    gap: 1rem;
+    align-items: center;
+}
+
+.action-btn {
+    background: var(--glass);
+    border: none;
+    border-radius: 50%;
+    width: 50px;
+    height: 50px;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    cursor: pointer;
+    transition: var(--transition);
+    backdrop-filter: blur(10px);
+}
+
+.action-btn:hover {
+    background: var(--primary);
+    transform: scale(1.1);
+}
+
+.action-btn.liked {
+    background: var(--secondary);
+}
+
+.action-count {
+    font-size: 0.9rem;
+    margin-top: 0.3rem;
+}
+
+.comments-container {
+    position: absolute;
+    right: 0;
+    top: 0;
+    height: 100%;
+    width: 350px;
+    background: rgba(0, 0, 0, 0.9);
+    padding: 1rem;
+    overflow-y: auto;
+    transform: translateX(100%);
+    transition: var(--transition);
+    z-index: 10;
+}
+
+.comments-container.active {
+    transform: translateX(0);
+}
+
+.comment {
+    background: var(--glass);
+    padding: 0.8rem;
+    border-radius: 10px;
+    margin-bottom: 0.8rem;
+}
+
+.comment-form {
+    position: sticky;
+    bottom: 0;
+    background: rgba(0, 0, 0, 0.9);
+    padding: 1rem;
+}
+
+.username-link {
+    color: var(--primary);
+    text-decoration: none;
+    font-weight: 600;
+}
+
+.username-link:hover {
+    color: var(--accent);
+}
 '''
 
 NAV_HTML = '''
@@ -671,9 +805,21 @@ def feed():
     user_count = len(data['users'])
     is_online = is_user_online(data, username) if is_authenticated else False
 
-    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()]
+    if request.method == 'POST' and is_authenticated:
+        post_id = request.form.get('post_id')
+        action = request.form.get('action')
+        post = next((p for p in data['posts'] if p['id'] == post_id), None)
+        if post:
+            if action == 'like':
+                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]
+            elif action == 'comment':
+                comment_text = request.form.get('comment')
+                if comment_text:
+                    post['comments'] = post.get('comments', []) + [{'user': username, 'text': comment_text, 'date': datetime.now().strftime('%Y-%m-%d %H:%M:%S')}]
+            save_data(data)
 
     html = '''
 <!DOCTYPE html>
@@ -686,66 +832,6 @@ def feed():
     <link href="https://fonts.googleapis.com/css2?family=Inter:wght@400;600;800&display=swap" rel="stylesheet">
     <style>
 ''' + BASE_STYLE + '''
-        h1 {
-            font-size: 2.5rem;
-            background: var(--gradient);
-            -webkit-background-clip: text;
-            color: transparent;
-            margin-bottom: 2rem;
-        }
-        .search-container {
-            margin-bottom: 2rem;
-            display: flex;
-            gap: 1rem;
-        }
-        .search-input {
-            flex-grow: 1;
-            box-shadow: var(--shadow);
-        }
-        .post-grid {
-            display: grid;
-            grid-template-columns: repeat(auto-fill, minmax(320px, 1fr));
-            gap: 1.5rem;
-        }
-        .post-item {
-            background: var(--glass);
-            padding: 1.5rem;
-            border-radius: 20px;
-            box-shadow: var(--shadow);
-            transition: var(--transition);
-            backdrop-filter: blur(10px);
-        }
-        .post-item:hover {
-            transform: translateY(-5px) scale(1.02);
-            box-shadow: 0 10px 30px rgba(0, 0, 0, 0.4);
-        }
-        .post-preview {
-            width: 100%;
-            height: 220px;
-            object-fit: cover;
-            border-radius: 15px;
-            transition: var(--transition);
-        }
-        .post-item h2 {
-            font-size: 1.4rem;
-            margin: 1rem 0 0.5rem;
-        }
-        .post-item p {
-            font-size: 0.9rem;
-            opacity: 0.8;
-        }
-        .stats {
-            font-size: 0.85rem;
-            opacity: 0.6;
-        }
-        .username-link {
-            color: var(--primary);
-            text-decoration: none;
-            font-weight: 600;
-        }
-        .username-link:hover {
-            color: var(--accent);
-        }
     </style>
 </head>
 <body>
@@ -753,28 +839,54 @@ def feed():
     ''' + NAV_HTML + '''
     <button class="theme-toggle" onclick="toggleTheme()">🌙</button>
     <div class="container">
-        <h1>Content Feed</h1>
-        <div class="search-container">
-            <form method="POST" class="search-form">
-                <input type="text" name="search" class="search-input" placeholder="Search posts..." value="{{ search_query }}">
-                <button type="submit" class="btn">🔍</button>
-            </form>
-        </div>
-        <div class="post-grid">
+        <div class="feed-container">
             {% for post in posts %}
-            <a href="{{ url_for('post_page', post_id=post['id']) }}" class="post-item">
+            <div class="post-slide" id="post-{{ post['id'] }}">
                 {% if post['type'] == 'video' %}
-                    <video class="post-preview" preload="metadata" muted>
+                    <video class="post-media" controls autoplay muted loop>
                         <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, '{{ post['id'] }}')">
+                    <img class="post-media" src="https://huggingface.co/datasets/{{ repo_id }}/resolve/main/{{ post['type'] }}s/{{ post['filename'] }}" alt="{{ post['title'] }}">
                 {% endif %}
-                <h2>{{ post['title'] }}</h2>
-                <p>{{ post['description']|truncate(100) }}</p>
-                <p>By: <a href="{{ url_for('user_profile', username=post['uploader']) }}" class="username-link">{{ post['uploader'] }}</a> <span class="status-dot {{ 'online' if is_user_online(post['uploader']) else 'offline' }}"></span> | {{ post['upload_date'] }}</p>
-                <p class="stats">Views: {{ post['views'] }} | Likes: {{ post['likes']|length }}</p>
-            </a>
+                <div class="post-overlay">
+                    <div class="post-info">
+                        <h2>{{ post['title'] }}</h2>
+                        <p>{{ post['description']|truncate(100) }}</p>
+                        <p>By: <a href="{{ url_for('user_profile', username=post['uploader']) }}" class="username-link">{{ post['uploader'] }}</a> 
+                        <span class="status-dot {{ 'online' if is_user_online(post['uploader']) else 'offline' }}"></span> | {{ post['upload_date'] }}</p>
+                    </div>
+                </div>
+                <div class="actions">
+                    <form method="POST" style="display: inline;">
+                        <input type="hidden" name="post_id" value="{{ post['id'] }}">
+                        <input type="hidden" name="action" value="like">
+                        <button type="submit" class="action-btn {% if is_authenticated and username in post.get('likes', []) %}liked{% endif %}" {% if not is_authenticated %}disabled{% endif %}>
+                            ❤️
+                        </button>
+                    </form>
+                    <span class="action-count">{{ post.get('likes', [])|length }}</span>
+                    <button class="action-btn" onclick="toggleComments('{{ post['id'] }}')">💬</button>
+                    <span class="action-count">{{ post.get('comments', [])|length }}</span>
+                    <button class="action-btn" onclick="sharePost('{{ post['id'] }}')">↪️</button>
+                </div>
+                <div class="comments-container" id="comments-{{ post['id'] }}">
+                    {% for comment in post.get('comments', []) %}
+                        <div class="comment">
+                            <p><strong><a href="{{ url_for('user_profile', username=comment['user']) }}" class="username-link">{{ comment['user'] }}</a></strong> 
+                            <span class="status-dot {{ 'online' if is_user_online(comment['user']) else 'offline' }}"></span> ({{ comment['date'] }}): {{ comment['text'] }}</p>
+                        </div>
+                    {% endfor %}
+                    {% if is_authenticated %}
+                        <form method="POST" class="comment-form">
+                            <input type="hidden" name="post_id" value="{{ post['id'] }}">
+                            <input type="hidden" name="action" value="comment">
+                            <textarea name="comment" placeholder="Add a comment..." rows="2"></textarea>
+                            <button type="submit" class="btn">Send</button>
+                        </form>
+                    {% endif %}
+                </div>
+            </div>
             {% endfor %}
         </div>
     </div>
@@ -787,30 +899,40 @@ def feed():
             document.body.classList.toggle('dark');
             localStorage.setItem('theme', document.body.classList.contains('dark') ? 'dark' : 'light');
         }
-        function openModal(src, event, postId) {
-            event.preventDefault();
+        function toggleComments(postId) {
+            const comments = document.getElementById(`comments-${postId}`);
+            comments.classList.toggle('active');
+        }
+        function sharePost(postId) {
+            const url = `${window.location.origin}/post/${postId}`;
+            navigator.clipboard.writeText(url).then(() => alert('Link copied!'));
+        }
+        function openModal(src) {
             document.getElementById('imageModal').style.display = 'flex';
             document.getElementById('modalImage').src = src;
-            fetch('/increment_view/' + postId, { method: 'POST' });
         }
         function closeModal(event) {
             if (event.target.tagName !== 'IMG') document.getElementById('imageModal').style.display = 'none';
         }
         window.onload = () => {
             if (localStorage.getItem('theme') === 'dark') document.body.classList.add('dark');
-            document.querySelectorAll('.post-preview').forEach(video => {
-                if (video.tagName === 'VIDEO') {
-                    video.addEventListener('loadedmetadata', () => {
-                        video.currentTime = Math.random() * video.duration;
-                    });
-                }
+            const feed = document.querySelector('.feed-container');
+            feed.addEventListener('scroll', () => {
+                const slides = document.querySelectorAll('.post-slide');
+                slides.forEach(slide => {
+                    const rect = slide.getBoundingClientRect();
+                    if (rect.top >= 0 && rect.bottom <= window.innerHeight) {
+                        const postId = slide.id.split('-')[1];
+                        fetch('/increment_view/' + postId, { method: 'POST' });
+                    }
+                });
             });
         };
     </script>
 </body>
 </html>
 '''
-    return render_template_string(html, posts=posts, is_authenticated=is_authenticated, username=username, repo_id=REPO_ID, search_query=search_query, unread_count=unread_count, user_count=user_count, private_unread_count=private_unread_count, is_online=is_online, is_user_online=lambda u: is_user_online(data, u))
+    return render_template_string(html, posts=posts, is_authenticated=is_authenticated, username=username, repo_id=REPO_ID, unread_count=unread_count, user_count=user_count, private_unread_count=private_unread_count, is_online=is_online, is_user_online=lambda u: is_user_online(data, u))
 
 @app.route('/post/<post_id>', methods=['GET', 'POST'])
 def post_page(post_id):