diff --git "a/app (6).py" "b/app (6).py"
new file mode 100644--- /dev/null
+++ "b/app (6).py"
@@ -0,0 +1,2997 @@
+
+
+from flask import Flask, render_template_string, request, redirect, url_for, session, flash, jsonify
+from flask_caching import Cache
+import json
+import os
+import logging
+import threading
+import time
+from datetime import datetime, timedelta
+from huggingface_hub import HfApi, hf_hub_download
+from werkzeug.utils import secure_filename
+import random
+
+app = Flask(__name__)
+app.secret_key = os.getenv("FLASK_SECRET_KEY", "verysecretkey")
+app.config['PERMANENT_SESSION_LIFETIME'] = timedelta(days=30)
+DATA_FILE = 'data_adusis.json'
+REPO_ID = "Eluza133/A12d12s12"
+HF_TOKEN_WRITE = os.getenv("HF_TOKEN")
+HF_TOKEN_READ = os.getenv("HF_TOKEN_READ") or HF_TOKEN_WRITE
+UPLOAD_FOLDER = 'uploads'
+os.makedirs(UPLOAD_FOLDER, exist_ok=True)
+
+cache = Cache(app, config={'CACHE_TYPE': 'simple'})
+logging.basicConfig(level=logging.INFO)
+
+def initialize_data_structure(data):
+    if not isinstance(data, dict):
+        logging.warning("Data is not a dict, initializing empty database")
+        return {'posts': [], 'users': {}}
+
+    data.setdefault('posts', [])
+    data.setdefault('users', {})
+
+    for post in data['posts']:
+        post.setdefault('likes', [])
+        post.setdefault('views', 0)
+        post.setdefault('comments', [])
+        post.setdefault('jerked_off_count', 0)
+        post.setdefault('id', str(random.randint(100000, 999999)))
+
+    for user in data['users']:
+        data['users'][user].setdefault('last_seen', '1970-01-01 00:00:00')
+        data['users'][user].setdefault('bio', '')
+        data['users'][user].setdefault('link', '')
+        data['users'][user].setdefault('avatar', None)
+
+    return data
+
+@cache.memoize(timeout=120)
+def load_data():
+    try:
+        download_db_from_hf()
+        if os.path.exists(DATA_FILE) and os.path.getsize(DATA_FILE) > 0:
+            with open(DATA_FILE, 'r', encoding='utf-8') as file:
+                data = json.load(file)
+        else:
+             data = {'posts': [], 'users': {}}
+
+        data = initialize_data_structure(data)
+        logging.info("Data loaded successfully")
+        return data
+    except json.JSONDecodeError:
+        logging.error(f"Error decoding JSON from {DATA_FILE}. Initializing empty data.")
+        return initialize_data_structure({})
+    except Exception as e:
+        logging.error(f"Error loading data: {e}")
+        return initialize_data_structure({})
+
+def save_data(data):
+    try:
+        temp_file = DATA_FILE + '.tmp'
+        with open(temp_file, 'w', encoding='utf-8') as file:
+            json.dump(data, file, ensure_ascii=False, indent=4)
+        os.replace(temp_file, DATA_FILE)
+        upload_db_to_hf()
+        cache.clear()
+        logging.info("Data saved and uploaded to HF")
+    except Exception as e:
+        logging.error(f"Error saving data: {e}")
+        if os.path.exists(temp_file):
+            os.remove(temp_file)
+        raise
+
+def upload_db_to_hf():
+    if not HF_TOKEN_WRITE:
+        logging.warning("HF_TOKEN_WRITE not set. Skipping upload.")
+        return
+    try:
+        api = HfApi()
+        api.upload_file(
+            path_or_fileobj=DATA_FILE,
+            path_in_repo=DATA_FILE,
+            repo_id=REPO_ID,
+            repo_type="dataset",
+            token=HF_TOKEN_WRITE,
+            commit_message=f"Backup {datetime.now().strftime('%Y-%m-%d %H:%M:%S')}"
+        )
+        logging.info("Database uploaded to Hugging Face")
+    except Exception as e:
+        logging.error(f"Error uploading database: {e}")
+
+def download_db_from_hf():
+    if not HF_TOKEN_READ:
+        logging.warning("HF_TOKEN_READ not set. Skipping download.")
+        if not os.path.exists(DATA_FILE):
+             with open(DATA_FILE, 'w', encoding='utf-8') as f:
+                json.dump(initialize_data_structure({}), f)
+        return
+    try:
+        hf_hub_download(
+            repo_id=REPO_ID,
+            filename=DATA_FILE,
+            repo_type="dataset",
+            token=HF_TOKEN_READ,
+            local_dir=".",
+            local_dir_use_symlinks=False,
+            force_download=True
+        )
+        logging.info("Database downloaded from Hugging Face")
+    except Exception as e:
+        logging.error(f"Error downloading database: {e}")
+        if not os.path.exists(DATA_FILE):
+            logging.info("Creating empty database file as download failed and file doesn't exist.")
+            with open(DATA_FILE, 'w', encoding='utf-8') as f:
+                json.dump(initialize_data_structure({}), f)
+
+def periodic_backup():
+    while True:
+        time.sleep(1800)
+        logging.info("Initiating periodic backup.")
+        try:
+            data = load_data()
+            save_data(data)
+        except Exception as e:
+            logging.error(f"Error during periodic backup: {e}")
+
+def is_user_online(data, username):
+    if username not in data.get('users', {}):
+        return False
+    last_seen_str = data['users'][username].get('last_seen', '1970-01-01 00:00:00')
+    try:
+        last_seen = datetime.strptime(last_seen_str, '%Y-%m-%d %H:%M:%S')
+        return (datetime.now() - last_seen).total_seconds() < 300
+    except ValueError:
+        logging.error(f"Invalid last_seen format for user {username}: {last_seen_str}")
+        return False
+
+def update_last_seen(username):
+    if username:
+        try:
+            data = load_data()
+            if username in data['users']:
+                data['users'][username]['last_seen'] = datetime.now().strftime('%Y-%m-%d %H:%M:%S')
+                save_data(data)
+            else:
+                 logging.warning(f"Attempted to update last_seen for non-existent user: {username}")
+        except Exception as e:
+            logging.error(f"Error updating last_seen for {username}: {e}")
+
+@app.before_request
+def before_request_func():
+    if 'username' in session:
+        update_last_seen(session['username'])
+
+BASE_STYLE = '''
+:root {
+    --primary: #ff1f8f;
+    --secondary: #a0f;
+    --accent: #ffcc00;
+    --background-light: #1a1a1a;
+    --background-dark: #0d0d0d;
+    --card-bg: rgba(30, 30, 30, 0.9);
+    --card-bg-dark: rgba(15, 15, 15, 0.95);
+    --text-light: #f0f0f0;
+    --text-dark: #cccccc;
+    --shadow: 0 8px 25px rgba(255, 31, 143, 0.3);
+    --glass-bg: rgba(40, 40, 40, 0.5);
+    --transition: all 0.3s ease;
+    --online: #0f0;
+    --offline: #ff3b30;
+    --like-color: #ff1f8f;
+    --jerk-color: #ffcc00;
+}
+* { margin: 0; padding: 0; box-sizing: border-box; }
+body {
+    font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
+    background: var(--background-dark);
+    color: var(--text-light);
+    line-height: 1.6;
+    overflow-x: hidden;
+}
+body.dark {
+    background: var(--background-dark);
+    color: var(--text-light);
+}
+.sidebar {
+    position: fixed;
+    top: 0;
+    left: 0;
+    width: 280px;
+    height: 100%;
+    background: var(--card-bg-dark);
+    backdrop-filter: blur(10px);
+    padding: 20px;
+    box-shadow: 5px 0 15px rgba(0, 0, 0, 0.5);
+    z-index: 1000;
+    transition: transform var(--transition);
+    border-right: 1px solid var(--primary);
+}
+.sidebar.hidden {
+    transform: translateX(-100%);
+}
+.sidebar-header {
+    display: flex;
+    align-items: center;
+    gap: 15px;
+    margin-bottom: 30px;
+    border-bottom: 1px solid var(--primary);
+    padding-bottom: 15px;
+}
+.nav-brand {
+    font-size: 1.6em;
+    font-weight: 700;
+    color: var(--primary);
+    text-shadow: 0 0 10px var(--primary);
+}
+.logo {
+    width: 45px;
+    height: 45px;
+    border-radius: 10px;
+    border: 2px solid var(--primary);
+}
+.nav-links {
+    display: flex;
+    flex-direction: column;
+    gap: 12px;
+}
+.nav-link {
+    display: flex;
+    align-items: center;
+    gap: 12px;
+    padding: 12px 20px;
+    background: transparent;
+    color: var(--text-light);
+    text-decoration: none;
+    border-radius: 8px;
+    font-size: 1.05em;
+    font-weight: 500;
+    transition: var(--transition);
+    border-left: 3px solid transparent;
+}
+body.dark .nav-link {
+    color: var(--text-light);
+}
+.nav-link:hover, .nav-link.active {
+    background: var(--glass-bg);
+    color: var(--primary);
+    border-left: 3px solid var(--primary);
+    transform: translateX(5px);
+}
+.nav-link span:first-child {
+    font-size: 1.2em;
+}
+.logout-btn {
+    color: var(--secondary);
+}
+.logout-btn:hover {
+    background: var(--secondary);
+    color: white;
+    border-left: 3px solid var(--secondary);
+}
+.menu-btn {
+    display: none;
+    font-size: 26px;
+    background: var(--card-bg-dark);
+    border: 1px solid var(--primary);
+    color: var(--primary);
+    cursor: pointer;
+    position: fixed;
+    top: 15px;
+    left: 15px;
+    z-index: 1001;
+    padding: 10px;
+    border-radius: 50%;
+    box-shadow: var(--shadow);
+    transition: var(--transition);
+}
+.menu-btn:hover {
+    background: var(--primary);
+    color: var(--background-dark);
+}
+.container {
+    margin: 20px auto 20px 300px;
+    max-width: 1100px;
+    padding: 20px;
+    transition: margin-left var(--transition);
+}
+.btn {
+    padding: 12px 25px;
+    background: var(--primary);
+    color: white;
+    border: none;
+    border-radius: 8px;
+    cursor: pointer;
+    font-size: 1em;
+    font-weight: 600;
+    transition: var(--transition);
+    display: inline-flex;
+    align-items: center;
+    gap: 8px;
+    box-shadow: 0 4px 15px rgba(255, 31, 143, 0.4);
+    text-transform: uppercase;
+    letter-spacing: 1px;
+}
+.btn:hover {
+    transform: translateY(-2px);
+    background: #e01b7e;
+    box-shadow: var(--shadow);
+}
+.btn-secondary {
+    background: var(--secondary);
+    box-shadow: 0 4px 15px rgba(170, 0, 255, 0.4);
+}
+.btn-secondary:hover {
+    background: #90f;
+    box-shadow: 0 6px 20px rgba(170, 0, 255, 0.5);
+}
+.btn-accent {
+    background: var(--accent);
+    color: var(--background-dark);
+    box-shadow: 0 4px 15px rgba(255, 204, 0, 0.4);
+}
+.btn-accent:hover {
+    background: #e6b800;
+    box-shadow: 0 6px 20px rgba(255, 204, 0, 0.5);
+}
+input, textarea, select {
+    width: 100%;
+    padding: 12px 15px;
+    margin: 10px 0;
+    border: 1px solid var(--glass-bg);
+    border-radius: 8px;
+    background: var(--glass-bg);
+    color: var(--text-light);
+    font-size: 1em;
+    transition: var(--transition);
+}
+body.dark input, body.dark textarea, body.dark select {
+    color: var(--text-light);
+}
+input:focus, textarea:focus, select:focus {
+    outline: none;
+    border-color: var(--primary);
+    background: rgba(50, 50, 50, 0.5);
+    box-shadow: 0 0 0 3px rgba(255, 31, 143, 0.3);
+}
+textarea {
+    min-height: 100px;
+    resize: vertical;
+}
+.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;
+    transition: opacity var(--transition);
+}
+.modal img, .modal video {
+    max-width: 90%;
+    max-height: 90%;
+    object-fit: contain;
+    border-radius: 10px;
+    box-shadow: 0 0 30px rgba(255, 31, 143, 0.5);
+    animation: zoomIn 0.3s ease;
+}
+.theme-toggle {
+    position: fixed;
+    top: 15px;
+    right: 15px;
+    background: var(--glass-bg);
+    border: 1px solid var(--secondary);
+    padding: 10px;
+    border-radius: 50%;
+    cursor: pointer;
+    font-size: 20px;
+    color: var(--secondary);
+    box-shadow: var(--shadow);
+    transition: var(--transition);
+    z-index: 1001;
+}
+.theme-toggle:hover {
+    transform: rotate(180deg);
+    background: var(--secondary);
+    color: white;
+}
+.status-dot {
+    width: 10px;
+    height: 10px;
+    border-radius: 50%;
+    display: inline-block;
+    margin-left: 6px;
+    vertical-align: middle;
+    box-shadow: 0 0 5px currentColor;
+}
+.online { background: var(--online); }
+.offline { background: var(--offline); }
+.badge {
+    background-color: var(--primary);
+    color: white;
+    padding: 2px 6px;
+    border-radius: 4px;
+    font-size: 0.8em;
+    margin-left: 8px;
+}
+.flash {
+    padding: 15px;
+    margin-bottom: 20px;
+    border-radius: 8px;
+    font-weight: 600;
+    text-align: center;
+}
+.flash.success {
+    background-color: rgba(0, 255, 0, 0.2);
+    color: #90ee90;
+    border: 1px solid #90ee90;
+}
+.flash.error {
+    background-color: rgba(255, 31, 143, 0.2);
+    color: var(--primary);
+    border: 1px solid var(--primary);
+}
+
+@keyframes zoomIn {
+    from { opacity: 0; transform: scale(0.8); }
+    to { opacity: 1; transform: scale(1); }
+}
+@media (max-width: 900px) {
+    .sidebar {
+        transform: translateX(-100%);
+        width: 250px;
+    }
+    .sidebar.active {
+        transform: translateX(0);
+        box-shadow: 5px 0 15px rgba(0, 0, 0, 0.7);
+    }
+    .menu-btn {
+        display: block;
+    }
+    .container {
+        margin: 70px 15px 15px 15px;
+        max-width: calc(100% - 30px);
+        padding: 15px;
+    }
+    .theme-toggle {
+        top: 70px;
+    }
+}
+@media (max-width: 480px) {
+    .nav-brand { font-size: 1.4em; }
+    .nav-link { font-size: 1em; padding: 10px 15px; }
+    .btn { padding: 10px 20px; font-size: 0.9em; }
+    input, textarea, select { padding: 10px 12px; font-size: 0.95em;}
+}
+'''
+
+NAV_HTML = '''
+<aside class="sidebar" id="sidebar">
+    <div class="sidebar-header">
+        <img src="https://cdn-avatars.huggingface.co/v1/production/uploads/673b00f35373479538ac373c/W_dumUND8K6IlMxVmpUgS.jpeg" alt="Logo" class="logo">
+        <span class="nav-brand">Adusis</span>
+    </div>
+    <nav class="nav-links">
+        <a href="{{ url_for('feed') }}" class="nav-link {% if request.endpoint == 'feed' %}active{% endif %}"><span>🔥</span> Feed</a>
+        {% if is_authenticated %}
+            <a href="{{ url_for('profile') }}" class="nav-link {% if request.endpoint == 'profile' %}active{% endif %}"><span>😈</span> Profile ({{ username }}) <span class="status-dot {{ 'online' if is_online else 'offline' }}"></span></a>
+            <a href="{{ url_for('upload') }}" class="nav-link {% if request.endpoint == 'upload' %}active{% endif %}"><span>📤</span> Upload Story</a>
+            <a href="{{ url_for('users') }}" class="nav-link {% if request.endpoint == 'users' %}active{% endif %}"><span>👀</span> Users <span class="badge">{{ user_count }}</span></a>
+            <a href="{{ url_for('logout') }}" class="nav-link logout-btn"><span>🚪</span> Logout</a>
+        {% else %}
+            <a href="{{ url_for('login') }}" class="nav-link {% if request.endpoint == 'login' %}active{% endif %}"><span>🔑</span> Login</a>
+            <a href="{{ url_for('register') }}" class="nav-link {% if request.endpoint == 'register' %}active{% endif %}"><span>✍️</span> Register</a>
+            <a href="{{ url_for('users') }}" class="nav-link {% if request.endpoint == 'users' %}active{% endif %}"><span>👀</span> Users <span class="badge">{{ user_count }}</span></a>
+        {% endif %}
+    </nav>
+</aside>
+'''
+
+@app.route('/register', methods=['GET', 'POST'])
+def register():
+    if request.method == 'POST':
+        username = request.form.get('username')
+        password = request.form.get('password')
+        if not username or not password:
+             flash('Username and password are required.', 'error')
+             return redirect(url_for('register'))
+        if len(username) < 3:
+             flash('Username must be at least 3 characters long.', 'error')
+             return redirect(url_for('register'))
+        if len(password) < 6:
+             flash('Password must be at least 6 characters long.', 'error')
+             return redirect(url_for('register'))
+
+        data = load_data()
+        if username in data['users']:
+            flash('Username already exists! Choose another.', 'error')
+            return redirect(url_for('register'))
+
+        data['users'][username] = {
+            'password': password,
+            'bio': '',
+            'link': '',
+            'avatar': None,
+            'last_seen': datetime.now().strftime('%Y-%m-%d %H:%M:%S')
+        }
+        try:
+            save_data(data)
+            flash('Registration successful! Please login.', 'success')
+            return redirect(url_for('login'))
+        except Exception as e:
+            flash('Registration failed. Please try again.', 'error')
+            logging.error(f"Failed to save data during registration: {e}")
+            return redirect(url_for('register'))
+
+    is_authenticated = 'username' in session
+    username = session.get('username')
+    data = load_data()
+    user_count = len(data.get('users', {}))
+    is_online = is_user_online(data, username) if username else False
+    html = '''
+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>Register - Adusis - BBC QoS hub</title>
+    <link href="https://fonts.googleapis.com/css2?family=Roboto:wght@400;700&display=swap" rel="stylesheet">
+    <style>
+''' + BASE_STYLE + '''
+        .container {
+            max-width: 500px; /* Slightly wider for PC */
+            background: var(--card-bg);
+            padding: 30px;
+            border-radius: 12px;
+            box-shadow: var(--shadow);
+            animation: slideUp 0.4s ease;
+            border: 1px solid var(--primary);
+            margin-top: 50px;
+            margin-left: auto;
+            margin-right: auto;
+        }
+        body.dark .container {
+            background: var(--card-bg);
+        }
+        h1 {
+            font-size: 1.8em;
+            font-weight: 700;
+            text-align: center;
+            margin-bottom: 25px;
+            color: var(--primary);
+            text-shadow: 0 0 8px var(--primary);
+        }
+        .link {
+            display: block;
+            text-align: center;
+            margin-top: 20px;
+            color: var(--secondary);
+            font-size: 0.95em;
+            text-decoration: none;
+            font-weight: 500;
+            transition: var(--transition);
+        }
+        .link:hover {
+            color: var(--primary);
+            text-decoration: underline;
+        }
+        @keyframes slideUp {
+            from { opacity: 0; transform: translateY(20px); }
+            to { opacity: 1; transform: translateY(0); }
+        }
+        @media (min-width: 901px) {
+            .container {
+                 margin-left: 300px; /* Adjust when sidebar is shown */
+            }
+            body:not(:has(.sidebar.active)) .container { /* Center if sidebar is not active */
+                 margin-left: auto;
+                 margin-right: auto;
+            }
+        }
+        @media (max-width: 900px) {
+             .container {
+                 margin-left: auto; /* Center on mobile */
+                 margin-right: auto;
+             }
+        }
+    </style>
+</head>
+<body class="dark">
+    <button class="menu-btn" onclick="toggleSidebar()">☰</button>
+    ''' + NAV_HTML + '''
+    <button class="theme-toggle" onclick="toggleTheme()">🎨</button>
+    <div class="container">
+        <h1>Join the Fun</h1>
+        {% with messages = get_flashed_messages(with_categories=true) %}
+            {% if messages %}
+                {% for category, message in messages %}
+                    <div class="flash {{ category }}">{{ message }}</div>
+                {% endfor %}
+            {% endif %}
+        {% endwith %}
+        <form method="POST">
+            <input type="text" name="username" placeholder="Choose a Username" required minlength="3">
+            <input type="password" name="password" placeholder="Create a Password" required minlength="6">
+            <button type="submit" class="btn" style="width: 100%;">Register</button>
+        </form>
+        <a href="{{ url_for('login') }}" class="link">Already joined? Login here</a>
+    </div>
+    <script>
+        function toggleSidebar() {
+            const sidebar = document.getElementById('sidebar');
+            sidebar.classList.toggle('active');
+            sidebar.classList.toggle('hidden', !sidebar.classList.contains('active')); // Manage hidden state
+            adjustContainerMargin();
+        }
+        function toggleTheme() {
+            document.body.classList.toggle('dark');
+            localStorage.setItem('theme', document.body.classList.contains('dark') ? 'dark' : 'light');
+        }
+         function adjustContainerMargin() {
+            const sidebar = document.getElementById('sidebar');
+            const container = document.querySelector('.container');
+            if (!container) return; // Make sure container exists
+
+            if (window.innerWidth > 900) {
+                 const isActive = sidebar.classList.contains('active');
+                 container.style.marginLeft = isActive ? '300px' : 'auto';
+            } else {
+                container.style.marginLeft = 'auto'; // Keep centered on mobile regardless of sidebar
+            }
+         }
+
+        window.onload = () => {
+            if (window.innerWidth > 900) {
+                 // Assume sidebar is initially visible on PC unless hidden class is set
+                 document.getElementById('sidebar').classList.add('active');
+            } else {
+                 document.getElementById('sidebar').classList.add('hidden');
+            }
+            adjustContainerMargin(); // Adjust margin on load
+        };
+        window.onresize = adjustContainerMargin; // Adjust margin on resize
+    </script>
+</body>
+</html>
+'''
+    return render_template_string(html, is_authenticated=is_authenticated, username=username, user_count=user_count, is_online=is_online)
+
+@app.route('/login', methods=['GET', 'POST'])
+def login():
+    if request.method == 'POST':
+        username = request.form.get('username')
+        password = request.form.get('password')
+        data = load_data()
+        if username in data.get('users', {}) and data['users'][username].get('password') == password:
+            session['username'] = username
+            session.permanent = True
+            update_last_seen(username)
+            flash('Login successful!', 'success')
+            return redirect(url_for('feed'))
+        else:
+            flash('Invalid username or password.', 'error')
+            return redirect(url_for('login'))
+
+    is_authenticated = 'username' in session
+    username = session.get('username')
+    data = load_data()
+    user_count = len(data.get('users', {}))
+    is_online = is_user_online(data, username) if username else False
+    html = '''
+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>Login - Adusis - BBC QoS hub</title>
+    <link href="https://fonts.googleapis.com/css2?family=Roboto:wght@400;700&display=swap" rel="stylesheet">
+    <style>
+''' + BASE_STYLE + '''
+        .container {
+            max-width: 500px; /* Slightly wider for PC */
+            background: var(--card-bg);
+            padding: 30px;
+            border-radius: 12px;
+            box-shadow: var(--shadow);
+            animation: slideUp 0.4s ease;
+            border: 1px solid var(--primary);
+            margin-top: 50px;
+            margin-left: auto;
+            margin-right: auto;
+        }
+        body.dark .container {
+            background: var(--card-bg);
+        }
+        h1 {
+            font-size: 1.8em;
+            font-weight: 700;
+            text-align: center;
+            margin-bottom: 25px;
+            color: var(--primary);
+            text-shadow: 0 0 8px var(--primary);
+        }
+        .link {
+            display: block;
+            text-align: center;
+            margin-top: 20px;
+            color: var(--secondary);
+            font-size: 0.95em;
+            text-decoration: none;
+            font-weight: 500;
+            transition: var(--transition);
+        }
+        .link:hover {
+            color: var(--primary);
+            text-decoration: underline;
+        }
+        @keyframes slideUp {
+            from { opacity: 0; transform: translateY(20px); }
+            to { opacity: 1; transform: translateY(0); }
+        }
+        @media (min-width: 901px) {
+            .container {
+                 margin-left: 300px; /* Adjust when sidebar is shown */
+            }
+             body:not(:has(.sidebar.active)) .container { /* Center if sidebar is not active */
+                 margin-left: auto;
+                 margin-right: auto;
+            }
+        }
+         @media (max-width: 900px) {
+             .container {
+                 margin-left: auto; /* Center on mobile */
+                 margin-right: auto;
+             }
+        }
+    </style>
+</head>
+<body class="dark">
+    <button class="menu-btn" onclick="toggleSidebar()">☰</button>
+    ''' + NAV_HTML + '''
+    <button class="theme-toggle" onclick="toggleTheme()">🎨</button>
+    <div class="container">
+        <h1>Welcome Back</h1>
+         {% with messages = get_flashed_messages(with_categories=true) %}
+            {% if messages %}
+                {% for category, message in messages %}
+                    <div class="flash {{ category }}">{{ message }}</div>
+                {% endfor %}
+            {% endif %}
+        {% endwith %}
+        <form method="POST">
+            <input type="text" name="username" placeholder="Username" required>
+            <input type="password" name="password" placeholder="Password" required>
+            <button type="submit" class="btn" style="width: 100%;">Login</button>
+        </form>
+        <a href="{{ url_for('register') }}" class="link">New here? Register an account</a>
+    </div>
+     <script>
+        function toggleSidebar() {
+            const sidebar = document.getElementById('sidebar');
+            sidebar.classList.toggle('active');
+            sidebar.classList.toggle('hidden', !sidebar.classList.contains('active')); // Manage hidden state
+            adjustContainerMargin();
+        }
+        function toggleTheme() {
+            document.body.classList.toggle('dark');
+            localStorage.setItem('theme', document.body.classList.contains('dark') ? 'dark' : 'light');
+        }
+         function adjustContainerMargin() {
+            const sidebar = document.getElementById('sidebar');
+            const container = document.querySelector('.container');
+             if (!container) return;
+
+            if (window.innerWidth > 900) {
+                 const isActive = sidebar.classList.contains('active');
+                 container.style.marginLeft = isActive ? '300px' : 'auto';
+            } else {
+                container.style.marginLeft = 'auto'; // Keep centered on mobile regardless of sidebar
+            }
+         }
+
+        window.onload = () => {
+            if (window.innerWidth > 900) {
+                 document.getElementById('sidebar').classList.add('active');
+            } else {
+                 document.getElementById('sidebar').classList.add('hidden');
+            }
+             adjustContainerMargin();
+        };
+        window.onresize = adjustContainerMargin;
+    </script>
+</body>
+</html>
+'''
+    return render_template_string(html, is_authenticated=is_authenticated, username=username, user_count=user_count, is_online=is_online)
+
+
+@app.route('/logout')
+def logout():
+    username = session.get('username')
+    if username:
+        update_last_seen(username)
+        session.pop('username', None)
+        flash('You have been logged out.', 'success')
+    return redirect(url_for('login'))
+
+@app.route('/', methods=['GET'])
+def feed():
+    data = load_data()
+    username = session.get('username')
+    posts_list = data.get('posts', [])
+    if not isinstance(posts_list, list):
+        logging.error("Posts data is not a list, resetting.")
+        posts_list = []
+
+    stories = sorted(posts_list, key=lambda x: datetime.strptime(x.get('upload_date', '1970-01-01 00:00:00'), '%Y-%m-%d %H:%M:%S'), reverse=True)
+    is_authenticated = 'username' in session
+    user_count = len(data.get('users', {}))
+    is_online = is_user_online(data, username) if username else False
+
+    html = '''
+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>Feed - Adusis - BBC QoS hub</title>
+    <link href="https://fonts.googleapis.com/css2?family=Roboto:wght@400;700&display=swap" rel="stylesheet">
+    <style>
+''' + BASE_STYLE + '''
+        body, html {
+            height: 100%;
+            margin: 0;
+            padding: 0;
+            overflow: hidden;
+        }
+        .feed-container {
+            height: 100vh;
+            width: 100%;
+            overflow-y: scroll;
+            scroll-snap-type: y mandatory;
+            scroll-behavior: smooth;
+            -webkit-overflow-scrolling: touch;
+            margin-left: 0;
+            padding: 0;
+            background-color: var(--background-dark);
+        }
+        .story-container {
+            height: 100vh;
+            width: 100%;
+            position: relative;
+            scroll-snap-align: start;
+            display: flex;
+            align-items: center;
+            justify-content: center;
+            background: #000;
+            overflow: hidden;
+            border-bottom: 2px solid var(--primary);
+        }
+        .story-media {
+            max-height: 100%;
+            max-width: 100%;
+            object-fit: contain;
+            display: block;
+            position: absolute;
+            top: 50%;
+            left: 50%;
+            transform: translate(-50%, -50%);
+            z-index: 1;
+            loading: lazy;
+        }
+        .play-btn {
+            position: absolute;
+            top: 50%;
+            left: 50%;
+            transform: translate(-50%, -50%);
+            background: rgba(0, 0, 0, 0.6);
+            border: 2px solid var(--primary);
+            border-radius: 50%;
+            width: 70px;
+            height: 70px;
+            font-size: 35px;
+            color: var(--primary);
+            cursor: pointer;
+            z-index: 3;
+            transition: var(--transition);
+            display: flex;
+            align-items: center;
+            justify-content: center;
+            padding-left: 5px;
+        }
+        .play-btn:hover {
+            background: var(--primary);
+            color: white;
+            transform: translate(-50%, -50%) scale(1.1);
+        }
+         .story-overlay {
+            position: absolute;
+            bottom: 0;
+            left: 0;
+            right: 0;
+            z-index: 2;
+            color: white;
+            background: linear-gradient(to top, rgba(0,0,0,0.9) 20%, rgba(0,0,0,0.6) 60%, transparent);
+            padding: 20px 20px 20px 20px; /* Adjusted padding */
+            pointer-events: none;
+        }
+        .story-controls {
+             pointer-events: auto;
+             display: flex;
+             gap: 15px;
+             align-items: center;
+             justify-content: flex-start; /* Align buttons left */
+             margin-bottom: 15px; /* Space below controls */
+             flex-wrap: wrap; /* Allow wrapping on small screens */
+             z-index: 3;
+        }
+        .control-btn {
+            background: rgba(0, 0, 0, 0.5);
+            border: 1px solid rgba(255, 255, 255, 0.3);
+            color: white;
+            border-radius: 25px; /* Pill shape */
+            width: auto; /* Fit content */
+            min-width: 50px; /* Minimum touch area */
+            height: 40px;
+            font-size: 16px;
+            cursor: pointer;
+            transition: var(--transition);
+            display: flex;
+            align-items: center;
+            justify-content: center;
+            padding: 0 12px; /* Padding left/right */
+            gap: 6px; /* Gap between icon and count */
+            line-height: 1;
+        }
+        .control-btn:hover {
+            background: var(--primary);
+            border-color: var(--primary);
+        }
+        .control-btn.liked {
+             background: var(--like-color);
+             color: white;
+             border-color: var(--like-color);
+        }
+        .control-count {
+            font-size: 0.9em;
+            font-weight: bold;
+        }
+        .story-info {
+             pointer-events: auto;
+        }
+        .story-info h2 {
+            font-size: 1.6em;
+            font-weight: 700;
+            margin-bottom: 8px;
+            text-shadow: 2px 2px 4px #000;
+        }
+        .story-info p {
+            font-size: 1em;
+            margin-bottom: 10px;
+            text-shadow: 1px 1px 3px #000;
+        }
+        .uploader-link {
+            color: var(--primary);
+            font-weight: 600;
+            text-decoration: none;
+        }
+         .uploader-link:hover {
+            text-decoration: underline;
+        }
+
+        @media (min-width: 901px) {
+             .feed-container {
+                 margin-left: 280px;
+                 width: calc(100% - 280px);
+             }
+             body:not(:has(.sidebar.active)) .feed-container {
+                 margin-left: 0;
+                 width: 100%;
+             }
+              .story-overlay {
+                 padding-left: 30px;
+                 padding-right: 30px;
+             }
+        }
+        @media (max-width: 900px) {
+            .menu-btn { display: block; }
+            .feed-container {
+                 margin-left: 0;
+                 width: 100%;
+            }
+        }
+
+        @media (max-width: 480px) {
+            .story-info h2 { font-size: 1.3em; }
+            .story-info p { font-size: 0.9em; }
+            .story-controls { gap: 10px; margin-bottom: 10px;}
+            .control-btn { height: 35px; font-size: 14px; padding: 0 10px; min-width: 45px; gap: 4px;}
+            .play-btn { width: 60px; height: 60px; font-size: 30px; }
+            .story-overlay { padding: 15px 15px 15px 15px; }
+        }
+    </style>
+</head>
+<body class="dark">
+    <button class="menu-btn" onclick="toggleSidebar()">☰</button>
+    ''' + NAV_HTML + '''
+    <button class="theme-toggle" onclick="toggleTheme()">🎨</button>
+
+    <div class="feed-container" id="feed">
+        {% if not stories %}
+            <div style="display: flex; justify-content: center; align-items: center; height: 100vh; color: var(--text-dark); flex-direction: column; text-align: center;">
+                <h2>No stories yet!</h2>
+                <p>Be the first one to <a href="{{ url_for('upload') }}" style="color: var(--primary);">upload</a> something hot.</p>
+             </div>
+        {% else %}
+            {% for story in stories %}
+            <div class="story-container" id="story-{{ story['id'] }}" data-story-id="{{ story['id'] }}">
+                {% set media_url = "https://huggingface.co/datasets/" + repo_id + "/resolve/main/" + story['type'] + "s/" + story['filename'] %}
+                {% if story['type'] == 'video' %}
+                    <video class="story-media" preload="metadata" muted loop playsinline loading="lazy" poster="{{ media_url }}?raw=true">
+                        <source src="{{ media_url }}" type="video/mp4">
+                    </video>
+                    <button class="play-btn" onclick="togglePlay('{{ story['id'] }}')">▶️</button>
+                {% else %}
+                    <img class="story-media" src="{{ media_url }}" alt="{{ story['title'] }}" loading="lazy" onclick="openModal(this.src)">
+                {% endif %}
+
+                <div class="story-overlay">
+                     <div class="story-controls">
+                         {% if is_authenticated %}
+                             <button class="control-btn like-btn {% if username in story.get('likes', []) %}liked{% endif %}" onclick="likeStory('{{ story['id'] }}', this)">
+                                 <span>❤️</span>
+                                 <span class="control-count like-count">{{ story.get('likes', []) | length }}</span>
+                             </button>
+                         {% else %}
+                              <div class="control-btn">
+                                 <span>❤️</span>
+                                 <span class="control-count like-count">{{ story.get('likes', []) | length }}</span>
+                             </div>
+                         {% endif %}
+                         <button class="control-btn jerk-btn" onclick="jerkOff('{{ story['id'] }}', this)">
+                             <span>🍆</span>
+                             <span class="control-count jerk-count">{{ story.get('jerked_off_count', 0) }}</span>
+                         </button>
+                          <div class="control-btn">
+                             <span>👁️</span>
+                             <span class="control-count view-count">{{ story.get('views', 0) }}</span>
+                         </div>
+                         <a href="{{ url_for('story_page', story_id=story['id']) }}" class="control-btn comment-btn">
+                             <span>💬</span>
+                             <span class="control-count comment-count">{{ story.get('comments', []) | length }}</span>
+                         </a>
+                    </div>
+                    <div class="story-info">
+                        <h2>{{ story['title'] }}</h2>
+                        <p>{{ story['description'] | truncate(100) }}</p>
+                        <p>By: <a href="{{ url_for('user_profile', username=story['uploader']) }}" class="uploader-link">{{ story['uploader'] }}</a>
+                           <span class="status-dot {{ 'online' if is_user_online(story['uploader']) else 'offline' }}"></span>
+                           <br><small>{{ story['upload_date'] }}</small>
+                        </p>
+                     </div>
+                </div>
+            </div>
+            {% endfor %}
+        {% endif %}
+    </div>
+
+     <div class="modal" id="imageModal" onclick="closeModal(event)">
+        <img id="modalImage" src="">
+    </div>
+
+    <script>
+        let currentStoryId = null;
+        let viewIncrementTimeout = null;
+
+        function toggleSidebar() {
+            const sidebar = document.getElementById('sidebar');
+            sidebar.classList.toggle('active');
+            sidebar.classList.toggle('hidden', !sidebar.classList.contains('active'));
+            adjustFeedMargin();
+        }
+        function toggleTheme() {
+            document.body.classList.toggle('dark');
+            localStorage.setItem('theme', document.body.classList.contains('dark') ? 'dark' : 'light');
+        }
+        function openModal(src) {
+            const modal = document.getElementById('imageModal');
+            const modalImg = document.getElementById('modalImage');
+            modalImg.src = src;
+            modal.style.display = 'flex';
+        }
+        function closeModal(event) {
+             if (event.target.classList.contains('modal')) {
+                 document.getElementById('imageModal').style.display = 'none';
+                 document.getElementById('modalImage').src = '';
+             }
+        }
+
+        function togglePlay(storyId) {
+            const container = document.getElementById(`story-${storyId}`);
+            if (!container) return;
+            const video = container.querySelector('.story-media');
+            const playBtn = container.querySelector('.play-btn');
+            if (video && playBtn) {
+                if (video.paused) {
+                    video.play().catch(e => console.error("Play failed:", e));
+                    playBtn.innerHTML = '⏸️';
+                    playBtn.style.opacity = '0';
+                } else {
+                    video.pause();
+                    playBtn.innerHTML = '▶️';
+                    playBtn.style.opacity = '1';
+                }
+                 setTimeout(() => {
+                    if (!video.paused) playBtn.style.opacity = '0';
+                 }, 1500);
+            }
+        }
+
+        const observer = new IntersectionObserver((entries) => {
+            entries.forEach(entry => {
+                const video = entry.target.querySelector('video.story-media');
+                const playBtn = entry.target.querySelector('.play-btn');
+                const storyId = entry.target.dataset.storyId;
+
+                if (entry.isIntersecting && entry.intersectionRatio >= 0.7) {
+                    if (video && video.paused) {
+                         video.play().catch(e => console.error("Autoplay failed:", e));
+                         if(playBtn) playBtn.innerHTML = '⏸️';
+                         if(playBtn) playBtn.style.opacity = '0';
+                         setTimeout(() => { if (!video.paused && playBtn) playBtn.style.opacity = '0';}, 1500);
+                    }
+                    if (storyId && storyId !== currentStoryId) {
+                        currentStoryId = storyId;
+                        clearTimeout(viewIncrementTimeout);
+                        viewIncrementTimeout = setTimeout(() => {
+                            incrementView(storyId, entry.target);
+                        }, 1500);
+                    }
+
+                } else {
+                    if (video && !video.paused) {
+                        video.pause();
+                        if(playBtn) playBtn.innerHTML = '▶️';
+                         if(playBtn) playBtn.style.opacity = '1';
+                    }
+                     if (storyId === currentStoryId) {
+                         currentStoryId = null;
+                         clearTimeout(viewIncrementTimeout);
+                     }
+                }
+            });
+        }, { threshold: 0.7 });
+
+        document.querySelectorAll('.story-container').forEach(container => {
+            observer.observe(container);
+            const video = container.querySelector('video.story-media');
+             if(video) {
+                 video.addEventListener('click', () => togglePlay(container.dataset.storyId));
+                 video.onended = () => {
+                     const playBtn = container.querySelector('.play-btn');
+                     if (playBtn) {
+                         playBtn.innerHTML = '▶️';
+                         playBtn.style.opacity = '1';
+                     }
+                 };
+             }
+        });
+
+         async function likeStory(storyId, buttonElement) {
+             if (!'{{ is_authenticated }}') {
+                 window.location.href = '{{ url_for("login") }}';
+                 return;
+             }
+             try {
+                 const response = await fetch(`/like/${storyId}`, { method: 'POST' });
+                 const data = await response.json();
+                 if (response.ok) {
+                     const likeCountSpan = buttonElement.querySelector('.like-count');
+                     likeCountSpan.textContent = data.likes;
+                     buttonElement.classList.toggle('liked', data.liked);
+                 } else {
+                     console.error('Failed to like:', data.message);
+                 }
+             } catch (error) {
+                 console.error('Error liking story:', error);
+             }
+         }
+
+         async function jerkOff(storyId, buttonElement) {
+             try {
+                 const response = await fetch(`/jerk_off/${storyId}`, { method: 'POST' });
+                 const data = await response.json();
+                 if (response.ok) {
+                     const jerkCountSpan = buttonElement.querySelector('.jerk-count');
+                     jerkCountSpan.textContent = data.jerked_off_count;
+                     buttonElement.classList.add('jerked-feedback');
+                     setTimeout(() => buttonElement.classList.remove('jerked-feedback'), 500);
+                 } else {
+                     console.error('Failed to record jerk off:', data.message);
+                 }
+             } catch (error) {
+                 console.error('Error jerking off:', error);
+             }
+         }
+
+         async function incrementView(storyId, containerElement) {
+              try {
+                  const response = await fetch(`/view/${storyId}`, { method: 'POST' });
+                  const data = await response.json();
+                  if (response.ok) {
+                      const viewCountSpan = containerElement.querySelector('.view-count');
+                      if (viewCountSpan) viewCountSpan.textContent = data.views;
+                  } else {
+                      console.error('Failed to increment view:', data.message);
+                  }
+              } catch (error) {
+                  console.error('Error incrementing view:', error);
+              }
+          }
+
+         function adjustFeedMargin() {
+            const sidebar = document.getElementById('sidebar');
+            const feedContainer = document.getElementById('feed');
+            if (!feedContainer) return;
+
+            if (window.innerWidth > 900) {
+                const isActive = sidebar.classList.contains('active');
+                feedContainer.style.marginLeft = isActive ? '280px' : '0';
+                feedContainer.style.width = isActive ? 'calc(100% - 280px)' : '100%';
+            } else {
+                feedContainer.style.marginLeft = '0';
+                feedContainer.style.width = '100%';
+            }
+         }
+
+        window.onload = () => {
+            if (window.innerWidth > 900) {
+                 document.getElementById('sidebar').classList.add('active');
+            } else {
+                 document.getElementById('sidebar').classList.add('hidden');
+            }
+            adjustFeedMargin();
+        };
+         window.onresize = adjustFeedMargin;
+    </script>
+</body>
+</html>
+'''
+    return render_template_string(html,
+                                stories=stories,
+                                is_authenticated=is_authenticated,
+                                username=username,
+                                repo_id=REPO_ID,
+                                user_count=user_count,
+                                is_online=is_online,
+                                is_user_online=lambda u: is_user_online(data, u))
+
+@app.route('/profile', methods=['GET', 'POST'])
+def profile():
+    if 'username' not in session:
+        flash('Login to view your profile!', 'error')
+        return redirect(url_for('login'))
+
+    data = load_data()
+    username = session['username']
+
+    if request.method == 'POST':
+        if 'delete_story' in request.form:
+            story_id = request.form.get('story_id')
+            if story_id:
+                original_length = len(data['posts'])
+                data['posts'] = [p for p in data['posts'] if not (p.get('id') == story_id and p.get('uploader') == username)]
+                if len(data['posts']) < original_length:
+                    try:
+                        save_data(data)
+                        flash('Story deleted.', 'success')
+                    except Exception as e:
+                         flash('Failed to delete story.', 'error')
+                         logging.error(f"Error saving data after deleting story {story_id}: {e}")
+                else:
+                     flash('Story not found or you do not have permission.', 'error')
+                return redirect(url_for('profile'))
+
+        elif 'update_profile' in request.form:
+            bio = request.form.get('bio', '').strip()[:500]
+            link = request.form.get('link', '').strip()[:200]
+            avatar_file = request.files.get('avatar')
+
+            if avatar_file and avatar_file.filename:
+                if not allowed_file(avatar_file.filename, {'png', 'jpg', 'jpeg', 'gif'}):
+                     flash('Invalid avatar file type. Use png, jpg, jpeg, gif.', 'error')
+                     return redirect(url_for('profile'))
+
+                filename = secure_filename(f"{username}_avatar_{random.randint(100,999)}{os.path.splitext(avatar_file.filename)[1]}")
+                temp_path = os.path.join(UPLOAD_FOLDER, filename)
+
+                try:
+                    avatar_file.save(temp_path)
+                    api = HfApi()
+                    avatar_path = f"avatars/{filename}"
+
+                    api.upload_file(
+                        path_or_fileobj=temp_path,
+                        path_in_repo=avatar_path,
+                        repo_id=REPO_ID,
+                        repo_type="dataset",
+                        token=HF_TOKEN_WRITE,
+                        commit_message=f"Avatar update for {username}"
+                    )
+                    data['users'][username]['avatar'] = avatar_path
+                    if os.path.exists(temp_path):
+                        os.remove(temp_path)
+                except Exception as e:
+                     flash('Failed to upload avatar.', 'error')
+                     logging.error(f"Error uploading avatar for {username}: {e}")
+                     if os.path.exists(temp_path):
+                         os.remove(temp_path)
+
+            data['users'][username]['bio'] = bio
+            data['users'][username]['link'] = link
+            try:
+                save_data(data)
+                flash('Profile updated!', 'success')
+            except Exception as e:
+                 flash('Failed to update profile.', 'error')
+                 logging.error(f"Error saving profile data for {username}: {e}")
+            return redirect(url_for('profile'))
+
+    data = load_data()
+    user_data = data.get('users', {}).get(username, {})
+    user_stories = sorted([p for p in data.get('posts', []) if p.get('uploader') == username], key=lambda x: datetime.strptime(x.get('upload_date', '1970-01-01 00:00:00'), '%Y-%m-%d %H:%M:%S'), reverse=True)
+    is_authenticated = True
+    user_count = len(data.get('users', {}))
+    is_online = is_user_online(data, username)
+    bio = user_data.get('bio', '')
+    link = user_data.get('link', '')
+    avatar = user_data.get('avatar', None)
+    last_seen = user_data.get('last_seen', 'Never')
+
+    html = '''
+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>Profile - {{ username }} - Adusis - BBC QoS hub</title>
+    <link href="https://fonts.googleapis.com/css2?family=Roboto:wght@400;700&display=swap" rel="stylesheet">
+    <style>
+''' + BASE_STYLE + '''
+        .container {
+            max-width: 1000px; /* Wider for PC */
+        }
+        .profile-header {
+            display: flex;
+            flex-wrap: wrap;
+            gap: 25px;
+            background: var(--card-bg);
+            padding: 25px;
+            border-radius: 12px;
+            box-shadow: var(--shadow);
+            margin-bottom: 30px;
+            border: 1px solid var(--primary);
+        }
+        body.dark .profile-header { background: var(--card-bg); }
+
+        .avatar-container {
+             text-align: center;
+             flex-shrink: 0; /* Prevent shrinking */
+        }
+        .avatar {
+            width: 130px;
+            height: 130px;
+            border-radius: 50%;
+            object-fit: cover;
+            border: 3px solid var(--primary);
+            box-shadow: 0 0 15px var(--primary);
+            transition: var(--transition);
+            cursor: pointer;
+            margin-bottom: 10px;
+            loading: lazy;
+        }
+        .avatar-placeholder {
+             width: 130px;
+             height: 130px;
+             border-radius: 50%;
+             background: linear-gradient(45deg, var(--primary), var(--secondary));
+             display: flex;
+             align-items: center;
+             justify-content: center;
+             font-size: 50px;
+             color: white;
+             font-weight: bold;
+             margin: 0 auto 10px auto;
+        }
+        .avatar:hover {
+            transform: scale(1.05);
+            box-shadow: 0 0 25px var(--primary);
+        }
+        .profile-info {
+            flex-grow: 1;
+            min-width: 250px;
+        }
+        .profile-info h1 {
+            font-size: 2em;
+            font-weight: 700;
+            color: var(--primary);
+            margin-bottom: 10px;
+            display: flex;
+            align-items: center;
+        }
+        .profile-info p {
+            margin: 8px 0;
+            font-size: 1em;
+            color: var(--text-dark);
+            word-wrap: break-word;
+        }
+        .profile-info a {
+            color: var(--secondary);
+            text-decoration: none;
+            font-weight: 500;
+        }
+        .profile-info a:hover {
+            color: var(--primary);
+            text-decoration: underline;
+        }
+        .section-title {
+             font-size: 1.6em;
+             color: var(--primary);
+             margin-bottom: 20px;
+             border-bottom: 1px solid var(--secondary);
+             padding-bottom: 5px;
+        }
+        .story-grid {
+            display: grid;
+            grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); /* Slightly larger min */
+            gap: 20px;
+        }
+        .story-item {
+            background: var(--card-bg);
+            border-radius: 10px;
+            box-shadow: 0 4px 10px rgba(0,0,0,0.4);
+            transition: var(--transition);
+            overflow: hidden;
+            border: 1px solid var(--glass-bg);
+        }
+        body.dark .story-item { background: var(--card-bg); }
+        .story-item:hover {
+            transform: translateY(-5px);
+            box-shadow: 0 6px 15px rgba(0,0,0,0.6);
+            border-color: var(--primary);
+        }
+        .story-preview-link {
+             display: block;
+             text-decoration: none;
+             color: inherit;
+        }
+        .story-preview {
+            width: 100%;
+            height: 180px;
+            object-fit: cover;
+            display: block;
+            background-color: #222;
+            loading: lazy;
+        }
+        .story-item-info {
+             padding: 15px;
+        }
+        .story-item h3 {
+            font-size: 1.15em;
+            font-weight: 600;
+            margin-bottom: 8px;
+            color: var(--text-light);
+            white-space: nowrap;
+            overflow: hidden;
+            text-overflow: ellipsis;
+        }
+        .story-item p.description {
+            font-size: 0.9em;
+            color: var(--text-dark);
+            margin-bottom: 10px;
+            height: 3.6em;
+            overflow: hidden;
+        }
+        .story-item p.date {
+             font-size: 0.8em;
+             color: var(--text-dark);
+             margin-bottom: 12px;
+        }
+        .delete-btn {
+            background: #d32f2f;
+            padding: 8px 15px;
+            font-size: 0.85em;
+            width: 100%;
+        }
+        .delete-btn:hover {
+            background: #b71c1c;
+        }
+        .edit-form {
+            background: var(--card-bg);
+            padding: 25px;
+            border-radius: 12px;
+            box-shadow: var(--shadow);
+            margin-bottom: 30px;
+            border: 1px solid var(--secondary);
+        }
+        body.dark .edit-form { background: var(--card-bg); }
+
+        @media (max-width: 900px) {
+             .container {
+                 margin-left: auto;
+                 margin-right: auto;
+             }
+             .story-grid {
+                  grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
+             }
+        }
+        @media (max-width: 600px) {
+            .profile-header {
+                flex-direction: column;
+                align-items: center;
+                text-align: center;
+            }
+             .avatar-container { width: 100%; }
+            .profile-info h1 {
+                 justify-content: center;
+                 font-size: 1.8em;
+            }
+             .story-grid {
+                grid-template-columns: 1fr;
+            }
+             .story-preview { height: 200px; }
+        }
+    </style>
+</head>
+<body class="dark">
+    <button class="menu-btn" onclick="toggleSidebar()">☰</button>
+    ''' + NAV_HTML + '''
+    <button class="theme-toggle" onclick="toggleTheme()">🎨</button>
+    <div class="container">
+         {% with messages = get_flashed_messages(with_categories=true) %}
+            {% if messages %}
+                {% for category, message in messages %}
+                    <div class="flash {{ category }}">{{ message }}</div>
+                {% endfor %}
+            {% endif %}
+        {% endwith %}
+
+        <div class="profile-header">
+            <div class="avatar-container">
+            {% if avatar %}
+                <img src="https://huggingface.co/datasets/{{ repo_id }}/resolve/main/{{ avatar }}?rand={{ random.randint(1,1000) }}" alt="Avatar" class="avatar" loading="lazy" onclick="openModal(this.src)">
+            {% else %}
+                <div class="avatar-placeholder">{{ username[0]|upper }}</div>
+            {% endif %}
+             </div>
+            <div class="profile-info">
+                <h1>{{ username }} <span class="status-dot {{ 'online' if is_online else 'offline' }}"></span></h1>
+                <p><strong>Bio:</strong> {{ bio if bio else 'No bio yet.' }}</p>
+                {% if link %}
+                    <p><strong>Link:</strong> <a href="{{ link if link.startswith('http') else '//' + link }}" target="_blank" rel="noopener noreferrer">{{ link }}</a></p>
+                {% endif %}
+                 <p><small>Last Seen: {{ last_seen }}</small></p>
+            </div>
+        </div>
+
+        <div class="edit-form">
+            <h2 class="section-title">Edit Profile</h2>
+            <form method="POST" enctype="multipart/form-data">
+                <input type="hidden" name="update_profile" value="1">
+                <label for="bio">Bio (max 500 chars):</label>
+                <textarea id="bio" name="bio" placeholder="Tell us about yourself..." maxlength="500">{{ bio }}</textarea>
+                 <label for="link">Website/Link (max 200 chars):</label>
+                <input id="link" type="text" name="link" placeholder="https://yourlink.com" value="{{ link }}" maxlength="200">
+                <label for="avatar">Change Avatar (JPG, PNG, GIF):</label>
+                <input id="avatar" type="file" name="avatar" accept="image/png, image/jpeg, image/gif">
+                <button type="submit" class="btn btn-secondary" style="margin-top: 10px;">Save Changes</button>
+            </form>
+        </div>
+
+        <h2 class="section-title">Your Stories</h2>
+        <div class="story-grid">
+            {% for story in user_stories %}
+            <div class="story-item">
+                <a href="{{ url_for('story_page', story_id=story['id']) }}" class="story-preview-link">
+                     {% set media_url = "https://huggingface.co/datasets/" + repo_id + "/resolve/main/" + story['type'] + "s/" + story['filename'] %}
+                    {% if story['type'] == 'video' %}
+                        <video class="story-preview" preload="metadata" muted loading="lazy">
+                            <source src="{{ media_url }}" type="video/mp4">
+                             Your browser does not support the video tag.
+                        </video>
+                    {% else %}
+                        <img class="story-preview" src="{{ media_url }}" alt="{{ story['title'] }}" loading="lazy">
+                    {% endif %}
+                 </a>
+                 <div class="story-item-info">
+                     <h3>{{ story['title'] }}</h3>
+                    <p class="description">{{ story['description'] | truncate(80) }}</p>
+                    <p class="date"><small>Uploaded: {{ story['upload_date'] }}</small></p>
+                    <p class="date"><small>❤️ {{ story.get('likes', [])|length }} | 👁️ {{ story.get('views', 0) }} | 🍆 {{ story.get('jerked_off_count', 0) }} | 💬 {{ story.get('comments', [])|length }} </small></p>
+                    <form method="POST" onsubmit="return confirm('Are you sure you want to delete this story?');">
+                        <input type="hidden" name="story_id" value="{{ story['id'] }}">
+                        <button type="submit" name="delete_story" class="btn delete-btn">Delete Story</button>
+                    </form>
+                </div>
+            </div>
+            {% endfor %}
+            {% if not user_stories %}
+                <p style="color: var(--text-dark); grid-column: 1 / -1; text-align: center;">You haven't uploaded any stories yet. <a href="{{ url_for('upload') }}" style="color: var(--primary);">Upload one now!</a></p>
+            {% endif %}
+        </div>
+    </div>
+
+    <div class="modal" id="imageModal" onclick="closeModal(event)">
+        <img id="modalImage" src="">
+    </div>
+
+    <script>
+         function toggleSidebar() {
+            const sidebar = document.getElementById('sidebar');
+            sidebar.classList.toggle('active');
+            sidebar.classList.toggle('hidden', !sidebar.classList.contains('active'));
+            adjustContainerMargin();
+        }
+        function toggleTheme() {
+            document.body.classList.toggle('dark');
+            localStorage.setItem('theme', document.body.classList.contains('dark') ? 'dark' : 'light');
+        }
+         function openModal(src) {
+            const modal = document.getElementById('imageModal');
+            const modalImg = document.getElementById('modalImage');
+            modalImg.src = src;
+            modal.style.display = 'flex';
+        }
+        function closeModal(event) {
+             if (event.target.classList.contains('modal')) {
+                 document.getElementById('imageModal').style.display = 'none';
+                 document.getElementById('modalImage').src = '';
+             }
+        }
+         function adjustContainerMargin() {
+            const sidebar = document.getElementById('sidebar');
+            const container = document.querySelector('.container');
+             if (!container) return;
+
+            if (window.innerWidth > 900) {
+                 const isActive = sidebar.classList.contains('active');
+                 container.style.marginLeft = isActive ? '300px' : 'auto';
+            } else {
+                container.style.marginLeft = 'auto';
+            }
+         }
+
+        window.onload = () => {
+             const videos = document.querySelectorAll('.story-preview');
+            videos.forEach(video => {
+                if (video.tagName === 'VIDEO') {
+                    video.addEventListener('loadedmetadata', () => {
+                        if (video.duration) {
+                             video.currentTime = Math.random() * video.duration * 0.5;
+                        }
+                    }, { once: true });
+                     video.addEventListener('mouseenter', () => video.play().catch(e => {}));
+                     video.addEventListener('mouseleave', () => video.pause());
+                }
+            });
+             if (window.innerWidth > 900) {
+                 document.getElementById('sidebar').classList.add('active');
+            } else {
+                 document.getElementById('sidebar').classList.add('hidden');
+            }
+            adjustContainerMargin();
+        };
+        window.onresize = adjustContainerMargin;
+    </script>
+</body>
+</html>
+'''
+    return render_template_string(html,
+                                username=username,
+                                user_stories=user_stories,
+                                bio=bio,
+                                link=link,
+                                avatar=avatar,
+                                last_seen=last_seen,
+                                is_authenticated=is_authenticated,
+                                repo_id=REPO_ID,
+                                user_count=user_count,
+                                is_online=is_online,
+                                random=random
+                                )
+
+def allowed_file(filename, allowed_extensions):
+    return '.' in filename and \
+           filename.rsplit('.', 1)[1].lower() in allowed_extensions
+
+@app.route('/story/<story_id>', methods=['GET', 'POST'])
+def story_page(story_id):
+    data = load_data()
+    username = session.get('username')
+
+    story_index = next((index for (index, d) in enumerate(data.get('posts',[])) if d.get('id') == story_id), None)
+
+    if story_index is None:
+        flash('Story not found.', 'error')
+        return redirect(url_for('feed'))
+
+    story = data['posts'][story_index]
+
+    if request.method == 'POST':
+        if 'add_comment' in request.form:
+            if not username:
+                 flash('You must be logged in to comment.', 'error')
+                 return redirect(url_for('story_page', story_id=story_id))
+
+            comment_text = request.form.get('comment_text', '').strip()
+            if not comment_text:
+                 flash('Comment cannot be empty.', 'error')
+                 return redirect(url_for('story_page', story_id=story_id))
+            if len(comment_text) > 1000:
+                 flash('Comment too long (max 1000 characters).', 'error')
+                 return redirect(url_for('story_page', story_id=story_id))
+
+            new_comment = {
+                'username': username,
+                'text': comment_text,
+                'timestamp': datetime.now().strftime('%Y-%m-%d %H:%M:%S')
+            }
+
+            if not isinstance(story.get('comments'), list):
+                story['comments'] = []
+
+            story['comments'].append(new_comment)
+            data['posts'][story_index] = story
+
+            try:
+                save_data(data)
+                flash('Comment added!', 'success')
+                return redirect(url_for('story_page', story_id=story_id) + '#comments')
+            except Exception as e:
+                flash('Failed to add comment.', 'error')
+                logging.error(f"Error saving comment for story {story_id}: {e}")
+                if story['comments'] and story['comments'][-1] == new_comment:
+                    story['comments'].pop()
+                return redirect(url_for('story_page', story_id=story_id))
+
+    data = load_data()
+    story_index = next((index for (index, d) in enumerate(data.get('posts',[])) if d.get('id') == story_id), None)
+    if story_index is None:
+        flash('Story disappeared.', 'error')
+        return redirect(url_for('feed'))
+    story = data['posts'][story_index]
+
+    is_authenticated = 'username' in session
+    user_count = len(data.get('users', {}))
+    is_online = is_user_online(data, username) if username else False
+    uploader_online = is_user_online(data, story.get('uploader'))
+
+    html = '''
+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>{{ story['title'] }} - Adusis - BBC QoS hub</title>
+    <link href="https://fonts.googleapis.com/css2?family=Roboto:wght@400;700&display=swap" rel="stylesheet">
+    <style>
+''' + BASE_STYLE + '''
+        .container {
+            max-width: 950px; /* Wider for PC */
+            background: var(--card-bg);
+            padding: 25px;
+            border-radius: 12px;
+            box-shadow: var(--shadow);
+            border: 1px solid var(--primary);
+        }
+         body.dark .container { background: var(--card-bg); }
+
+        h1 {
+            font-size: 2em;
+            font-weight: 700;
+            margin-bottom: 20px;
+            color: var(--primary);
+            text-shadow: 0 0 5px var(--primary);
+            border-bottom: 1px solid var(--secondary);
+            padding-bottom: 10px;
+        }
+        .media-container {
+            margin-bottom: 25px;
+            background-color: #000;
+            border-radius: 10px;
+            overflow: hidden;
+             position: relative;
+        }
+        .media-container video, .media-container img {
+            width: 100%;
+            max-height: 70vh;
+            object-fit: contain;
+            display: block;
+            border-radius: 0;
+            loading: lazy;
+        }
+         .play-btn-static {
+            position: absolute;
+            top: 50%;
+            left: 50%;
+            transform: translate(-50%, -50%);
+            background: rgba(0, 0, 0, 0.6);
+            border: 2px solid var(--primary);
+            border-radius: 50%;
+            width: 70px;
+            height: 70px;
+            font-size: 35px;
+            color: var(--primary);
+            cursor: pointer;
+            z-index: 3;
+            transition: var(--transition);
+            display: flex;
+            align-items: center;
+            justify-content: center;
+            padding-left: 5px;
+            opacity: 0;
+        }
+        .media-container video:paused + .play-btn-static {
+             opacity: 1;
+        }
+
+        .story-details p {
+            font-size: 1.05em;
+            margin-bottom: 12px;
+            color: var(--text-dark);
+        }
+         .story-details p strong {
+             color: var(--text-light);
+         }
+        .uploader-link {
+            color: var(--primary);
+            font-weight: 600;
+            text-decoration: none;
+        }
+        .uploader-link:hover {
+            text-decoration: underline;
+            color: var(--secondary);
+        }
+        .story-actions {
+             margin-top: 25px;
+             margin-bottom: 30px;
+             display: flex;
+             gap: 15px;
+             align-items: center;
+             flex-wrap: wrap;
+             padding-bottom: 20px;
+             border-bottom: 1px solid var(--glass-bg);
+        }
+         .action-btn {
+             padding: 10px 15px;
+             font-size: 0.9em;
+             min-width: 120px;
+             justify-content: center;
+             text-align: center;
+         }
+         .action-btn .icon { font-size: 1.2em; margin-right: 5px; }
+         .action-btn .count { font-weight: bold; margin-left: 5px; }
+          .action-btn.liked {
+              background: var(--like-color);
+              border-color: var(--like-color);
+          }
+
+        .comments-section {
+             margin-top: 30px;
+        }
+        .comments-section h2 {
+            font-size: 1.5em;
+            color: var(--secondary);
+            margin-bottom: 20px;
+             border-bottom: 1px solid var(--secondary);
+             padding-bottom: 5px;
+        }
+        .comment {
+            background: var(--glass-bg);
+            padding: 15px;
+            border-radius: 8px;
+            margin-bottom: 15px;
+            border-left: 3px solid var(--primary);
+            box-shadow: inset 3px 3px 5px rgba(0,0,0,0.2);
+        }
+        .comment-header {
+            display: flex;
+            justify-content: space-between;
+            align-items: center;
+            margin-bottom: 8px;
+            font-size: 0.9em;
+            color: var(--text-dark);
+        }
+        .comment-user {
+            font-weight: bold;
+            color: var(--primary);
+        }
+         .comment-user a { color: inherit; text-decoration: none;}
+         .comment-user a:hover { text-decoration: underline; }
+        .comment-text {
+            font-size: 1em;
+            color: var(--text-light);
+            line-height: 1.5;
+            word-wrap: break-word;
+        }
+        .comment-form textarea {
+             min-height: 80px;
+             margin-bottom: 10px;
+        }
+         .no-comments {
+             color: var(--text-dark);
+             text-align: center;
+             padding: 20px;
+         }
+        .back-btn { margin-top: 20px;}
+
+         @media (max-width: 900px) {
+             .container {
+                 margin-left: auto;
+                 margin-right: auto;
+             }
+         }
+        @media (max-width: 480px) {
+             h1 { font-size: 1.6em; }
+             .story-details p { font-size: 0.95em; }
+             .action-btn { min-width: 100px; font-size: 0.85em; padding: 8px 12px;}
+             .comments-section h2 { font-size: 1.3em; }
+             .comment { padding: 12px; }
+        }
+    </style>
+</head>
+<body class="dark">
+    <button class="menu-btn" onclick="toggleSidebar()">☰</button>
+    ''' + NAV_HTML + '''
+    <button class="theme-toggle" onclick="toggleTheme()">🎨</button>
+    <div class="container">
+        {% with messages = get_flashed_messages(with_categories=true) %}
+            {% if messages %}
+                {% for category, message in messages %}
+                    <div class="flash {{ category }}">{{ message }}</div>
+                {% endfor %}
+            {% endif %}
+        {% endwith %}
+
+        <h1>{{ story['title'] }}</h1>
+
+        <div class="media-container" id="media-{{ story['id'] }}">
+             {% set media_url = "https://huggingface.co/datasets/" + repo_id + "/resolve/main/" + story['type'] + "s/" + story['filename'] %}
+            {% if story['type'] == 'video' %}
+                <video controls controlsList="nodownload" preload="metadata" loading="lazy" onclick="togglePlayStatic('{{ story['id'] }}')" poster="{{ media_url }}?raw=true">
+                    <source src="{{ media_url }}" type="video/mp4">
+                    Your browser does not support the video tag.
+                </video>
+                 <button class="play-btn-static" onclick="togglePlayStatic('{{ story['id'] }}')">▶️</button>
+            {% else %}
+                <img src="{{ media_url }}" alt="{{ story['title'] }}" loading="lazy" onclick="openModal(this.src)">
+            {% endif %}
+        </div>
+
+        <div class="story-details">
+            <p><strong>Description:</strong> {{ story['description'] if story['description'] else 'No description.'}}</p>
+            <p><strong>Uploaded by:</strong> <a href="{{ url_for('user_profile', username=story['uploader']) }}" class="uploader-link">{{ story['uploader'] }}</a> <span class="status-dot {{ 'online' if uploader_online else 'offline' }}"></span></p>
+            <p><strong>Uploaded on:</strong> {{ story['upload_date'] }}</p>
+        </div>
+
+        <div class="story-actions">
+             {% if is_authenticated %}
+                 <button class="btn action-btn like-btn {% if username in story.get('likes', []) %}liked{% endif %}" onclick="likeStory('{{ story['id'] }}', this)">
+                     <span class="icon">❤️</span> Like <span class="count like-count">{{ story.get('likes', []) | length }}</span>
+                 </button>
+             {% else %}
+                 <div class="btn action-btn" style="background: var(--glass-bg); cursor: default;">
+                    <span class="icon">❤️</span> Likes <span class="count">{{ story.get('likes', []) | length }}</span>
+                 </div>
+             {% endif %}
+             <button class="btn action-btn btn-accent jerk-btn" onclick="jerkOff('{{ story['id'] }}', this)">
+                 <span class="icon">🍆</span> Jerked Off <span class="count jerk-count">{{ story.get('jerked_off_count', 0) }}</span>
+             </button>
+             <div class="btn action-btn" style="background: var(--glass-bg); cursor: default;">
+                 <span class="icon">👁️</span> Views <span class="count view-count">{{ story.get('views', 0) }}</span>
+             </div>
+         </div>
+
+
+        <div class="comments-section" id="comments">
+            <h2>Comments ({{ story.get('comments', []) | length }})</h2>
+            {% if is_authenticated %}
+                <div class="comment-form">
+                    <form method="POST">
+                        <input type="hidden" name="add_comment" value="1">
+                        <textarea name="comment_text" placeholder="Add your comment..." required maxlength="1000"></textarea>
+                        <button type="submit" class="btn btn-secondary">Post Comment</button>
+                    </form>
+                </div>
+                <hr style="border-color: var(--glass-bg); margin: 25px 0;">
+            {% else %}
+                <p style="text-align: center; color: var(--text-dark); margin-bottom: 20px;"><a href="{{ url_for('login') }}" style="color: var(--primary);">Login</a> to post a comment.</p>
+            {% endif %}
+
+            <div class="comments-list">
+                 {% if story.get('comments') %}
+                    {% for comment in story['comments'] | reverse %}
+                        <div class="comment">
+                            <div class="comment-header">
+                                <span class="comment-user"><a href="{{ url_for('user_profile', username=comment['username']) }}">{{ comment['username'] }}</a></span>
+                                <span class="comment-time">{{ comment['timestamp'] }}</span>
+                            </div>
+                            <div class="comment-text">
+                                {{ comment['text'] }}
+                            </div>
+                        </div>
+                     {% endfor %}
+                 {% else %}
+                     <p class="no-comments">Be the first to comment!</p>
+                 {% endif %}
+            </div>
+        </div>
+
+        <a href="{{ url_for('feed') }}" class="btn back-btn">Back to Feed</a>
+    </div>
+
+    <div class="modal" id="imageModal" onclick="closeModal(event)">
+        <img id="modalImage" src="">
+    </div>
+
+    <script>
+         function toggleSidebar() {
+            const sidebar = document.getElementById('sidebar');
+            sidebar.classList.toggle('active');
+            sidebar.classList.toggle('hidden', !sidebar.classList.contains('active'));
+            adjustContainerMargin();
+        }
+        function toggleTheme() {
+            document.body.classList.toggle('dark');
+            localStorage.setItem('theme', document.body.classList.contains('dark') ? 'dark' : 'light');
+        }
+         function openModal(src) {
+            const modal = document.getElementById('imageModal');
+            const modalImg = document.getElementById('modalImage');
+            modalImg.src = src;
+            modal.style.display = 'flex';
+        }
+        function closeModal(event) {
+             if (event.target.classList.contains('modal')) {
+                 document.getElementById('imageModal').style.display = 'none';
+                 document.getElementById('modalImage').src = '';
+             }
+        }
+
+        function togglePlayStatic(storyId) {
+            const container = document.getElementById(`media-${storyId}`);
+            if (!container) return;
+            const video = container.querySelector('video');
+            const playBtn = container.querySelector('.play-btn-static');
+            if (video && playBtn) {
+                if (video.paused) {
+                    video.play().catch(e => console.error("Play failed:", e));
+                    playBtn.innerHTML = '⏸️';
+                    playBtn.style.opacity = '0';
+                    video.controls = true;
+                } else {
+                    video.pause();
+                    playBtn.innerHTML = '▶️';
+                    playBtn.style.opacity = '1';
+                }
+            }
+        }
+         const staticVideo = document.querySelector('.media-container video');
+         if (staticVideo) {
+             const staticPlayBtn = document.querySelector('.play-btn-static');
+             staticVideo.onplay = () => { if(staticPlayBtn) staticPlayBtn.style.opacity = '0'; }
+             staticVideo.onpause = () => { if(staticPlayBtn) staticPlayBtn.style.opacity = '1'; }
+             staticVideo.onclick = () => {
+                 if (!staticVideo.paused && staticPlayBtn) {
+                     staticPlayBtn.style.opacity = '1';
+                     setTimeout(() => {
+                         if(!staticVideo.paused) staticPlayBtn.style.opacity = '0';
+                     }, 1500);
+                 }
+             }
+         }
+
+
+         async function likeStory(storyId, buttonElement) {
+             if (!'{{ is_authenticated }}') {
+                 window.location.href = '{{ url_for("login") }}';
+                 return;
+             }
+             try {
+                 const response = await fetch(`/like/${storyId}`, { method: 'POST' });
+                 const data = await response.json();
+                 if (response.ok) {
+                     const likeCountSpan = buttonElement.querySelector('.like-count');
+                     likeCountSpan.textContent = data.likes;
+                     buttonElement.classList.toggle('liked', data.liked);
+                 } else { console.error('Failed to like:', data.message); }
+             } catch (error) { console.error('Error liking story:', error); }
+         }
+
+         async function jerkOff(storyId, buttonElement) {
+             try {
+                 const response = await fetch(`/jerk_off/${storyId}`, { method: 'POST' });
+                 const data = await response.json();
+                 if (response.ok) {
+                     const jerkCountSpan = buttonElement.querySelector('.jerk-count');
+                     jerkCountSpan.textContent = data.jerked_off_count;
+                     buttonElement.classList.add('jerked-feedback');
+                     setTimeout(() => buttonElement.classList.remove('jerked-feedback'), 500);
+                 } else { console.error('Failed to record jerk off:', data.message); }
+             } catch (error) { console.error('Error jerking off:', error); }
+         }
+
+         async function incrementViewOnLoad(storyId) {
+              try {
+                  const response = await fetch(`/view/${storyId}`, { method: 'POST' });
+                  const data = await response.json();
+                  if (response.ok) {
+                      const viewCountSpan = document.querySelector('.view-count');
+                      if (viewCountSpan) viewCountSpan.textContent = data.views;
+                  } else { console.error('Failed to increment view:', data.message); }
+              } catch (error) { console.error('Error incrementing view:', error); }
+          }
+
+         function adjustContainerMargin() {
+            const sidebar = document.getElementById('sidebar');
+            const container = document.querySelector('.container');
+            if (!container) return;
+
+            if (window.innerWidth > 900) {
+                 const isActive = sidebar.classList.contains('active');
+                 container.style.marginLeft = isActive ? '300px' : 'auto';
+            } else {
+                container.style.marginLeft = 'auto';
+            }
+         }
+
+        window.onload = () => {
+             incrementViewOnLoad('{{ story['id'] }}');
+             if (window.innerWidth > 900) {
+                 document.getElementById('sidebar').classList.add('active');
+            } else {
+                 document.getElementById('sidebar').classList.add('hidden');
+            }
+            adjustContainerMargin();
+        };
+         window.onresize = adjustContainerMargin;
+    </script>
+</body>
+</html>
+'''
+    return render_template_string(html,
+                                story=story,
+                                repo_id=REPO_ID,
+                                is_authenticated=is_authenticated,
+                                username=username,
+                                user_count=user_count,
+                                is_online=is_online,
+                                uploader_online=uploader_online)
+
+
+@app.route('/upload', methods=['GET', 'POST'])
+def upload():
+    if 'username' not in session:
+        flash('Login to upload a story!', 'error')
+        return redirect(url_for('login'))
+
+    data = load_data()
+    username = session['username']
+
+    if request.method == 'POST':
+        title = request.form.get('title', '').strip()
+        description = request.form.get('description', '').strip()[:2000]
+        file = request.files.get('file')
+
+        if not file or not title:
+            flash('Title and file are required!', 'error')
+            return redirect(url_for('upload'))
+
+        if not allowed_file(file.filename, {'png', 'jpg', 'jpeg', 'gif', 'mp4', 'mov', 'avi', 'webm'}):
+             flash('Invalid file type. Allowed: Images (png, jpg, gif), Videos (mp4, mov, avi, webm)', 'error')
+             return redirect(url_for('upload'))
+
+        filename = secure_filename(f"{username}_{int(time.time())}_{file.filename}")
+        temp_path = os.path.join(UPLOAD_FOLDER, filename)
+
+        try:
+             file.save(temp_path)
+
+             file_type = 'video' if filename.lower().endswith(('.mp4', '.mov', 'avi', '.webm')) else 'photo'
+
+             story_id = str(random.randint(100000, 999999))
+             while any(p.get('id') == story_id for p in data.get('posts', [])):
+                 story_id = str(random.randint(100000, 999999))
+
+             api = HfApi()
+             hf_filename = f"{story_id}_{filename}"
+             file_path = f"{file_type}s/{hf_filename}"
+
+             api.upload_file(
+                 path_or_fileobj=temp_path,
+                 path_in_repo=file_path,
+                 repo_id=REPO_ID,
+                 repo_type="dataset",
+                 token=HF_TOKEN_WRITE,
+                 commit_message=f"Upload {file_type} by {username} (ID: {story_id})"
+             )
+
+             data.setdefault('posts', []).append({
+                'id': story_id,
+                'title': title,
+                'description': description,
+                'filename': hf_filename,
+                'type': file_type,
+                'uploader': username,
+                'upload_date': datetime.now().strftime('%Y-%m-%d %H:%M:%S'),
+                'likes': [],
+                'views': 0,
+                'comments': [],
+                'jerked_off_count': 0
+             })
+
+             save_data(data)
+             flash('Story uploaded successfully!', 'success')
+
+             if os.path.exists(temp_path):
+                os.remove(temp_path)
+             return redirect(url_for('profile'))
+
+        except Exception as e:
+            flash(f'Upload failed: {e}', 'error')
+            logging.error(f"Error during upload for {username}: {e}")
+            if os.path.exists(temp_path):
+                 os.remove(temp_path)
+            return redirect(url_for('upload'))
+
+    is_authenticated = True
+    user_count = len(data.get('users', {}))
+    is_online = is_user_online(data, username)
+
+    html = '''
+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>Upload Story - Adusis - BBC QoS hub</title>
+    <link href="https://fonts.googleapis.com/css2?family=Roboto:wght@400;700&display=swap" rel="stylesheet">
+    <style>
+''' + BASE_STYLE + '''
+        .container {
+            max-width: 700px; /* Wider for PC */
+            background: var(--card-bg);
+            padding: 30px;
+            border-radius: 12px;
+            box-shadow: var(--shadow);
+            border: 1px solid var(--primary);
+        }
+        body.dark .container { background: var(--card-bg); }
+
+        h1 {
+            font-size: 1.8em;
+            font-weight: 700;
+            margin-bottom: 25px;
+            color: var(--primary);
+            text-shadow: 0 0 8px var(--primary);
+        }
+        label {
+             display: block;
+             margin-bottom: 5px;
+             font-weight: 500;
+             color: var(--text-dark);
+        }
+        input[type="file"] {
+            background: var(--glass-bg);
+            padding: 10px;
+            border: 1px dashed var(--secondary);
+        }
+         input[type="file"]::file-selector-button {
+             background: var(--secondary);
+             color: white;
+             border: none;
+             padding: 8px 12px;
+             border-radius: 5px;
+             cursor: pointer;
+             transition: var(--transition);
+         }
+          input[type="file"]::file-selector-button:hover {
+              background: var(--primary);
+          }
+        #progress-container {
+            width: 100%;
+            height: 10px;
+            background: var(--glass-bg);
+            border-radius: 5px;
+            margin-top: 20px;
+            overflow: hidden;
+            display: none;
+        }
+        #progress-bar {
+            width: 0%;
+            height: 100%;
+            background: linear-gradient(90deg, var(--secondary), var(--primary));
+            transition: width 0.3s ease;
+            border-radius: 5px;
+        }
+        .upload-btn { width: 100%; margin-top: 15px;}
+        .spinner {
+            border: 4px solid rgba(255, 255, 255, 0.3);
+            border-radius: 50%;
+            border-top: 4px solid var(--primary);
+            width: 20px;
+            height: 20px;
+            animation: spin 1s linear infinite;
+            display: none;
+            margin-left: 10px;
+        }
+        @keyframes spin {
+            0% { transform: rotate(0deg); }
+            100% { transform: rotate(360deg); }
+        }
+         @media (max-width: 900px) {
+             .container {
+                 margin-left: auto;
+                 margin-right: auto;
+             }
+         }
+    </style>
+</head>
+<body class="dark">
+    <button class="menu-btn" onclick="toggleSidebar()">☰</button>
+    ''' + NAV_HTML + '''
+    <button class="theme-toggle" onclick="toggleTheme()">🎨</button>
+    <div class="container">
+        <h1>Upload Your Story</h1>
+        {% with messages = get_flashed_messages(with_categories=true) %}
+            {% if messages %}
+                {% for category, message in messages %}
+                    <div class="flash {{ category }}">{{ message }}</div>
+                {% endfor %}
+            {% endif %}
+        {% endwith %}
+        <form id="upload-form" method="POST" enctype="multipart/form-data">
+            <label for="title">Title*:</label>
+            <input type="text" id="title" name="title" placeholder="Catchy title for your story" required>
+
+            <label for="description">Description (optional):</label>
+            <textarea id="description" name="description" placeholder="Describe your content (max 2000 chars)" rows="4" maxlength="2000"></textarea>
+
+            <label for="file">Select Photo or Video*:</label>
+            <input type="file" id="file" name="file" accept="image/png, image/jpeg, image/gif, video/mp4, video/quicktime, video/x-msvideo, video/webm" required>
+            <small style="display: block; margin-top: 5px; color: var(--text-dark);">Allowed: JPG, PNG, GIF, MP4, MOV, AVI, WEBM</small>
+
+            <button type="submit" class="btn upload-btn">
+                <span class="btn-text">Upload Now</span>
+                <div class="spinner"></div>
+            </button>
+        </form>
+        <div id="progress-container">
+            <div id="progress-bar"></div>
+        </div>
+    </div>
+    <script>
+         function toggleSidebar() {
+            const sidebar = document.getElementById('sidebar');
+            sidebar.classList.toggle('active');
+            sidebar.classList.toggle('hidden', !sidebar.classList.contains('active'));
+            adjustContainerMargin();
+        }
+        function toggleTheme() {
+            document.body.classList.toggle('dark');
+            localStorage.setItem('theme', document.body.classList.contains('dark') ? 'dark' : 'light');
+        }
+
+        const uploadForm = document.getElementById('upload-form');
+        const progressBar = document.getElementById('progress-bar');
+        const progressContainer = document.getElementById('progress-container');
+        const submitButton = uploadForm.querySelector('button[type="submit"]');
+        const buttonText = submitButton.querySelector('.btn-text');
+        const spinner = submitButton.querySelector('.spinner');
+
+
+        uploadForm.onsubmit = function(e) {
+             const title = document.getElementById('title').value.trim();
+             const fileInput = document.getElementById('file');
+             if (!title || !fileInput.files || fileInput.files.length === 0) {
+                 alert('Please provide a title and select a file.');
+                 e.preventDefault();
+                 return;
+             }
+
+             progressContainer.style.display = 'block';
+             progressBar.style.width = '0%';
+             submitButton.disabled = true;
+             buttonText.textContent = 'Uploading...';
+             spinner.style.display = 'inline-block';
+
+        };
+
+         function adjustContainerMargin() {
+            const sidebar = document.getElementById('sidebar');
+            const container = document.querySelector('.container');
+             if (!container) return;
+
+            if (window.innerWidth > 900) {
+                 const isActive = sidebar.classList.contains('active');
+                 container.style.marginLeft = isActive ? '300px' : 'auto';
+            } else {
+                container.style.marginLeft = 'auto';
+            }
+         }
+
+
+        window.onload = () => {
+             if (window.innerWidth > 900) {
+                 document.getElementById('sidebar').classList.add('active');
+            } else {
+                 document.getElementById('sidebar').classList.add('hidden');
+            }
+            adjustContainerMargin();
+        };
+        window.onresize = adjustContainerMargin;
+    </script>
+</body>
+</html>
+'''
+    return render_template_string(html,
+                                username=username,
+                                is_authenticated=is_authenticated,
+                                repo_id=REPO_ID,
+                                user_count=user_count,
+                                is_online=is_online)
+
+@app.route('/users', methods=['GET', 'POST'])
+def users():
+    data = load_data()
+    username = session.get('username')
+
+    is_authenticated = 'username' in session
+    user_count = len(data.get('users', {}))
+    is_online = is_user_online(data, username) if username else False
+
+    search_query = request.form.get('search', '').strip().lower() if request.method == 'POST' else ''
+
+    user_list = []
+    for user, user_data in data.get('users', {}).items():
+         if user == username:
+              continue
+         if not search_query or search_query in user.lower():
+             user_list.append({
+                'name': user,
+                'avatar': user_data.get('avatar'),
+                'online': is_user_online(data, user)
+            })
+
+    user_list.sort(key=lambda u: (-u['online'], u['name'].lower()))
+
+    html = '''
+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>Users - Adusis - BBC QoS hub</title>
+    <link href="https://fonts.googleapis.com/css2?family=Roboto:wght@400;700&display=swap" rel="stylesheet">
+    <style>
+''' + BASE_STYLE + '''
+        .container {
+            max-width: 1000px; /* Wider for PC */
+        }
+         h1 {
+            font-size: 2em;
+            font-weight: 700;
+            margin-bottom: 25px;
+            color: var(--primary);
+            text-shadow: 0 0 8px var(--primary);
+             border-bottom: 1px solid var(--secondary);
+             padding-bottom: 10px;
+        }
+        .search-container {
+            max-width: 600px;
+            margin: 0 auto 30px auto;
+        }
+        .search-form {
+            display: flex;
+            gap: 10px;
+            background: var(--glass-bg);
+            padding: 8px;
+            border-radius: 10px;
+        }
+        .search-input {
+            flex-grow: 1;
+            background: transparent;
+            border: none;
+            color: var(--text-light);
+            padding: 10px;
+             margin: 0;
+        }
+         .search-input:focus {
+             box-shadow: none;
+         }
+        .search-btn {
+            padding: 8px 18px;
+            box-shadow: none;
+            background: var(--secondary);
+             flex-shrink: 0;
+        }
+         .search-btn:hover {
+             background: var(--primary);
+         }
+        .user-grid {
+            display: grid;
+            grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); /* Larger min */
+            gap: 20px;
+        }
+        .user-item {
+            background: var(--card-bg);
+            padding: 15px;
+            border-radius: 10px;
+            box-shadow: 0 4px 10px rgba(0,0,0,0.4);
+            transition: var(--transition);
+            display: flex;
+            align-items: center;
+            gap: 15px;
+            border: 1px solid var(--glass-bg);
+        }
+         body.dark .user-item { background: var(--card-bg); }
+        .user-item:hover {
+            transform: translateY(-4px);
+            box-shadow: 0 6px 15px rgba(0,0,0,0.6);
+            border-color: var(--primary);
+        }
+        .user-avatar {
+            width: 55px;
+            height: 55px;
+            border-radius: 50%;
+            object-fit: cover;
+            border: 2px solid var(--secondary);
+            flex-shrink: 0;
+            loading: lazy;
+        }
+         .user-avatar-placeholder {
+            width: 55px;
+            height: 55px;
+            border-radius: 50%;
+             background: linear-gradient(45deg, var(--primary), var(--secondary));
+             display: flex;
+             align-items: center;
+             justify-content: center;
+             font-size: 24px;
+             color: white;
+             font-weight: bold;
+             flex-shrink: 0;
+         }
+        .user-info {
+            flex-grow: 1;
+            overflow: hidden;
+        }
+        .user-info a {
+            color: var(--primary);
+            font-weight: 600;
+            text-decoration: none;
+            font-size: 1.1em;
+            display: block;
+             white-space: nowrap;
+             overflow: hidden;
+             text-overflow: ellipsis;
+        }
+        .user-info a:hover {
+            color: var(--secondary);
+            text-decoration: underline;
+        }
+         .user-item .status-dot {
+            margin-left: 8px;
+        }
+         .no-users {
+             grid-column: 1 / -1;
+             text-align: center;
+             color: var(--text-dark);
+             padding: 30px;
+         }
+          @media (max-width: 900px) {
+             .container {
+                 margin-left: auto;
+                 margin-right: auto;
+             }
+              .user-grid {
+                 grid-template-columns: repeat(auto-fill, minmax(250px, 1fr));
+             }
+         }
+    </style>
+</head>
+<body class="dark">
+    <button class="menu-btn" onclick="toggleSidebar()">☰</button>
+    ''' + NAV_HTML + '''
+    <button class="theme-toggle" onclick="toggleTheme()">🎨</button>
+    <div class="container">
+        <h1>Explore Users ({{ user_count }})</h1>
+        <div class="search-container">
+            <form method="POST" class="search-form">
+                <input type="text" name="search" class="search-input" placeholder="Find someone..." value="{{ search_query }}">
+                <button type="submit" class="btn search-btn">🔍</button>
+            </form>
+        </div>
+        <div class="user-grid">
+            {% for user_info in user_list %}
+                <div class="user-item">
+                     {% if user_info['avatar'] %}
+                        <img src="https://huggingface.co/datasets/{{ repo_id }}/resolve/main/{{ user_info['avatar'] }}?rand={{ random.randint(1,1000) }}" alt="{{ user_info['name'] }} Avatar" class="user-avatar" loading="lazy">
+                    {% else %}
+                        <div class="user-avatar-placeholder">{{ user_info['name'][0]|upper }}</div>
+                    {% endif %}
+                    <div class="user-info">
+                        <a href="{{ url_for('user_profile', username=user_info['name']) }}">{{ user_info['name'] }}</a>
+                         <span class="status-dot {{ 'online' if user_info['online'] else 'offline' }}" title="{{ 'Online' if user_info['online'] else 'Offline' }}"></span>
+                    </div>
+                </div>
+            {% endfor %}
+            {% if not user_list and search_query %}
+                 <p class="no-users">No users found matching "{{ search_query }}".</p>
+            {% elif not user_list %}
+                 <p class="no-users">Looks like it's just you (and maybe the admin)!</p>
+            {% endif %}
+        </div>
+    </div>
+    <script>
+         function toggleSidebar() {
+            const sidebar = document.getElementById('sidebar');
+            sidebar.classList.toggle('active');
+            sidebar.classList.toggle('hidden', !sidebar.classList.contains('active'));
+            adjustContainerMargin();
+        }
+        function toggleTheme() {
+            document.body.classList.toggle('dark');
+            localStorage.setItem('theme', document.body.classList.contains('dark') ? 'dark' : 'light');
+        }
+         function adjustContainerMargin() {
+            const sidebar = document.getElementById('sidebar');
+            const container = document.querySelector('.container');
+            if (!container) return;
+
+            if (window.innerWidth > 900) {
+                 const isActive = sidebar.classList.contains('active');
+                 container.style.marginLeft = isActive ? '300px' : 'auto';
+            } else {
+                container.style.marginLeft = 'auto';
+            }
+         }
+
+        window.onload = () => {
+             if (window.innerWidth > 900) {
+                 document.getElementById('sidebar').classList.add('active');
+            } else {
+                 document.getElementById('sidebar').classList.add('hidden');
+            }
+            adjustContainerMargin();
+         };
+        window.onresize = adjustContainerMargin;
+    </script>
+</body>
+</html>
+'''
+    return render_template_string(html,
+                                user_list=user_list,
+                                username=username,
+                                is_authenticated=is_authenticated,
+                                repo_id=REPO_ID,
+                                user_count=user_count,
+                                is_online=is_online,
+                                search_query=search_query,
+                                random=random)
+
+@app.route('/user/<username>', methods=['GET'])
+def user_profile(username):
+    data = load_data()
+    current_user = session.get('username')
+
+    if username not in data.get('users', {}):
+        flash(f'User "{username}" not found.', 'error')
+        return redirect(url_for('users'))
+
+    is_own_profile = (username == current_user)
+    if is_own_profile:
+        return redirect(url_for('profile'))
+
+    user_data = data['users'][username]
+    user_stories = sorted([p for p in data.get('posts', []) if p.get('uploader') == username], key=lambda x: datetime.strptime(x.get('upload_date','1970-01-01 00:00:00'), '%Y-%m-%d %H:%M:%S'), reverse=True)
+
+    is_authenticated = 'username' in session
+    user_count = len(data.get('users', {}))
+    current_user_online = is_user_online(data, current_user) if current_user else False
+    profile_user_online = is_user_online(data, username)
+
+    bio = user_data.get('bio', '')
+    link = user_data.get('link', '')
+    avatar = user_data.get('avatar', None)
+    last_seen = user_data.get('last_seen', 'Never')
+
+    html = '''
+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>Profile - {{ username }} - Adusis - BBC QoS hub</title>
+    <link href="https://fonts.googleapis.com/css2?family=Roboto:wght@400;700&display=swap" rel="stylesheet">
+    <style>
+''' + BASE_STYLE + '''
+        .container { max-width: 1000px; }
+        .profile-header { display: flex; flex-wrap: wrap; gap: 25px; background: var(--card-bg); padding: 25px; border-radius: 12px; box-shadow: var(--shadow); margin-bottom: 30px; border: 1px solid var(--primary); }
+        body.dark .profile-header { background: var(--card-bg); }
+        .avatar-container { text-align: center; flex-shrink: 0; }
+        .avatar { width: 130px; height: 130px; border-radius: 50%; object-fit: cover; border: 3px solid var(--primary); box-shadow: 0 0 15px var(--primary); transition: var(--transition); cursor: pointer; margin-bottom: 10px; loading: lazy;}
+        .avatar-placeholder { width: 130px; height: 130px; border-radius: 50%; background: linear-gradient(45deg, var(--primary), var(--secondary)); display: flex; align-items: center; justify-content: center; font-size: 50px; color: white; font-weight: bold; margin: 0 auto 10px auto; }
+        .avatar:hover { transform: scale(1.05); box-shadow: 0 0 25px var(--primary); }
+        .profile-info { flex-grow: 1; min-width: 250px; }
+        .profile-info h1 { font-size: 2em; font-weight: 700; color: var(--primary); margin-bottom: 10px; display: flex; align-items: center; }
+        .profile-info p { margin: 8px 0; font-size: 1em; color: var(--text-dark); word-wrap: break-word; }
+        .profile-info a { color: var(--secondary); text-decoration: none; font-weight: 500; }
+        .profile-info a:hover { color: var(--primary); text-decoration: underline; }
+        .section-title { font-size: 1.6em; color: var(--primary); margin-bottom: 20px; border-bottom: 1px solid var(--secondary); padding-bottom: 5px; }
+        .story-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); gap: 20px; }
+        .story-item { background: var(--card-bg); border-radius: 10px; box-shadow: 0 4px 10px rgba(0,0,0,0.4); transition: var(--transition); overflow: hidden; border: 1px solid var(--glass-bg); }
+        body.dark .story-item { background: var(--card-bg); }
+        .story-item:hover { transform: translateY(-5px); box-shadow: 0 6px 15px rgba(0,0,0,0.6); border-color: var(--primary); }
+        .story-preview-link { display: block; text-decoration: none; color: inherit; }
+        .story-preview { width: 100%; height: 180px; object-fit: cover; display: block; background-color: #222; loading: lazy; }
+        .story-item-info { padding: 15px; }
+        .story-item h3 { font-size: 1.15em; font-weight: 600; margin-bottom: 8px; color: var(--text-light); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
+        .story-item p.description { font-size: 0.9em; color: var(--text-dark); margin-bottom: 10px; height: 3.6em; overflow: hidden; }
+        .story-item p.date { font-size: 0.8em; color: var(--text-dark); margin-bottom: 12px; }
+         .story-item p.stats { font-size: 0.8em; color: var(--text-dark); }
+
+          @media (max-width: 900px) {
+             .container {
+                 margin-left: auto;
+                 margin-right: auto;
+             }
+              .story-grid {
+                 grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
+             }
+         }
+         @media (max-width: 600px) {
+            .profile-header { flex-direction: column; align-items: center; text-align: center; }
+             .avatar-container { width: 100%; }
+            .profile-info h1 { justify-content: center; font-size: 1.8em; }
+             .story-grid { grid-template-columns: 1fr; }
+             .story-preview { height: 200px; }
+        }
+    </style>
+</head>
+<body class="dark">
+    <button class="menu-btn" onclick="toggleSidebar()">☰</button>
+    ''' + NAV_HTML + '''
+    <button class="theme-toggle" onclick="toggleTheme()">🎨</button>
+    <div class="container">
+         {% with messages = get_flashed_messages(with_categories=true) %}
+            {% if messages %}
+                {% for category, message in messages %}
+                    <div class="flash {{ category }}">{{ message }}</div>
+                {% endfor %}
+            {% endif %}
+        {% endwith %}
+
+        <div class="profile-header">
+             <div class="avatar-container">
+             {% if avatar %}
+                 <img src="https://huggingface.co/datasets/{{ repo_id }}/resolve/main/{{ avatar }}?rand={{ random.randint(1,1000) }}" alt="Avatar" class="avatar" loading="lazy" onclick="openModal(this.src)">
+             {% else %}
+                 <div class="avatar-placeholder">{{ username[0]|upper }}</div>
+             {% endif %}
+             </div>
+            <div class="profile-info">
+                 <h1>{{ username }} <span class="status-dot {{ 'online' if profile_user_online else 'offline' }}" title="{{ 'Online' if profile_user_online else 'Offline' }}"></span></h1>
+                <p><strong>Bio:</strong> {{ bio if bio else 'No bio provided.' }}</p>
+                {% if link %}
+                     <p><strong>Link:</strong> <a href="{{ link if link.startswith('http') else '//' + link }}" target="_blank" rel="noopener noreferrer">{{ link }}</a></p>
+                {% endif %}
+                 <p><small>Last Seen: {{ last_seen }}</small></p>
+            </div>
+        </div>
+
+        <h2 class="section-title">{{ username }}'s Stories</h2>
+        <div class="story-grid">
+            {% for story in user_stories %}
+            <div class="story-item">
+                 <a href="{{ url_for('story_page', story_id=story['id']) }}" class="story-preview-link">
+                    {% set media_url = "https://huggingface.co/datasets/" + repo_id + "/resolve/main/" + story['type'] + "s/" + story['filename'] %}
+                    {% if story['type'] == 'video' %}
+                        <video class="story-preview" preload="metadata" muted loading="lazy">
+                            <source src="{{ media_url }}" type="video/mp4">
+                        </video>
+                    {% else %}
+                        <img class="story-preview" src="{{ media_url }}" alt="{{ story['title'] }}" loading="lazy">
+                    {% endif %}
+                 </a>
+                 <div class="story-item-info">
+                    <h3>{{ story['title'] }}</h3>
+                    <p class="description">{{ story['description'] | truncate(80) }}</p>
+                    <p class="date"><small>Uploaded: {{ story['upload_date'] }}</small></p>
+                     <p class="stats"><small>❤️ {{ story.get('likes', [])|length }} | 👁️ {{ story.get('views', 0) }} | 🍆 {{ story.get('jerked_off_count', 0) }} | 💬 {{ story.get('comments', [])|length }}</small></p>
+                 </div>
+            </div>
+            {% endfor %}
+            {% if not user_stories %}
+                <p style="color: var(--text-dark); grid-column: 1 / -1; text-align: center;">This user hasn't uploaded any stories yet.</p>
+            {% endif %}
+        </div>
+    </div>
+
+    <div class="modal" id="imageModal" onclick="closeModal(event)">
+        <img id="modalImage" src="">
+    </div>
+
+    <script>
+         function toggleSidebar() {
+            const sidebar = document.getElementById('sidebar');
+            sidebar.classList.toggle('active');
+            sidebar.classList.toggle('hidden', !sidebar.classList.contains('active'));
+            adjustContainerMargin();
+        }
+        function toggleTheme() {
+            document.body.classList.toggle('dark');
+            localStorage.setItem('theme', document.body.classList.contains('dark') ? 'dark' : 'light');
+        }
+         function openModal(src) {
+            const modal = document.getElementById('imageModal');
+            const modalImg = document.getElementById('modalImage');
+            modalImg.src = src;
+            modal.style.display = 'flex';
+        }
+        function closeModal(event) {
+             if (event.target.classList.contains('modal')) {
+                 document.getElementById('imageModal').style.display = 'none';
+                 document.getElementById('modalImage').src = '';
+             }
+        }
+         function adjustContainerMargin() {
+            const sidebar = document.getElementById('sidebar');
+            const container = document.querySelector('.container');
+             if (!container) return;
+
+            if (window.innerWidth > 900) {
+                 const isActive = sidebar.classList.contains('active');
+                 container.style.marginLeft = isActive ? '300px' : 'auto';
+            } else {
+                container.style.marginLeft = 'auto';
+            }
+         }
+
+        window.onload = () => {
+             const videos = document.querySelectorAll('.story-preview');
+            videos.forEach(video => {
+                if (video.tagName === 'VIDEO') {
+                     video.addEventListener('loadedmetadata', () => {
+                         if (video.duration) { video.currentTime = Math.random() * video.duration * 0.5; }
+                     }, { once: true });
+                     video.addEventListener('mouseenter', () => video.play().catch(e => {}));
+                     video.addEventListener('mouseleave', () => video.pause());
+                 }
+            });
+             if (window.innerWidth > 900) {
+                 document.getElementById('sidebar').classList.add('active');
+            } else {
+                 document.getElementById('sidebar').classList.add('hidden');
+            }
+            adjustContainerMargin();
+        };
+         window.onresize = adjustContainerMargin;
+    </script>
+</body>
+</html>
+'''
+    return render_template_string(html,
+                                username=username,
+                                user_stories=user_stories,
+                                bio=bio,
+                                link=link,
+                                avatar=avatar,
+                                last_seen=last_seen,
+                                is_authenticated=is_authenticated,
+                                current_user=current_user,
+                                repo_id=REPO_ID,
+                                user_count=user_count,
+                                is_online=current_user_online,
+                                profile_user_online=profile_user_online,
+                                random=random)
+
+
+@app.route('/like/<story_id>', methods=['POST'])
+def like_story(story_id):
+    if 'username' not in session:
+        return jsonify({'message': 'Login required'}), 401
+
+    username = session['username']
+    data = load_data()
+
+    story_index = next((index for (index, d) in enumerate(data.get('posts',[])) if d.get('id') == story_id), None)
+    if story_index is None:
+        return jsonify({'message': 'Story not found'}), 404
+
+    story = data['posts'][story_index]
+
+    if not isinstance(story.get('likes'), list):
+        story['likes'] = []
+
+    liked = False
+    if username in story['likes']:
+        story['likes'].remove(username)
+        liked = False
+    else:
+        story['likes'].append(username)
+        liked = True
+
+    data['posts'][story_index] = story
+
+    try:
+        save_data(data)
+        return jsonify({'message': 'Success', 'likes': len(story['likes']), 'liked': liked}), 200
+    except Exception as e:
+        logging.error(f"Error saving like for story {story_id} by {username}: {e}")
+        if liked:
+             if username in story['likes']: story['likes'].remove(username)
+        else:
+             if username not in story['likes']: story['likes'].append(username)
+        return jsonify({'message': 'Failed to save like'}), 500
+
+
+@app.route('/jerk_off/<story_id>', methods=['POST'])
+def jerk_off_story(story_id):
+    data = load_data()
+
+    story_index = next((index for (index, d) in enumerate(data.get('posts',[])) if d.get('id') == story_id), None)
+    if story_index is None:
+        return jsonify({'message': 'Story not found'}), 404
+
+    story = data['posts'][story_index]
+
+    if not isinstance(story.get('jerked_off_count'), int):
+        story['jerked_off_count'] = 0
+
+    story['jerked_off_count'] += 1
+    data['posts'][story_index] = story
+
+    try:
+        save_data(data)
+        return jsonify({'message': 'Success', 'jerked_off_count': story['jerked_off_count']}), 200
+    except Exception as e:
+        logging.error(f"Error saving jerk_off count for story {story_id}: {e}")
+        story['jerked_off_count'] -= 1
+        return jsonify({'message': 'Failed to save count'}), 500
+
+@app.route('/view/<story_id>', methods=['POST'])
+def increment_view(story_id):
+
+     data = load_data()
+     story_index = next((index for (index, d) in enumerate(data.get('posts',[])) if d.get('id') == story_id), None)
+     if story_index is None:
+         return jsonify({'message': 'Story not found'}), 404
+
+     story = data['posts'][story_index]
+
+     if not isinstance(story.get('views'), int):
+         story['views'] = 0
+
+     story['views'] += 1
+     data['posts'][story_index] = story
+
+     try:
+         save_data(data)
+         return jsonify({'message': 'Success', 'views': story['views']}), 200
+     except Exception as e:
+         logging.error(f"Error saving view count for story {story_id}: {e}")
+         story['views'] -= 1
+         return jsonify({'message': 'Failed to save view count'}), 500
+
+if __name__ == '__main__':
+    backup_thread = threading.Thread(target=periodic_backup, daemon=True)
+    backup_thread.start()
+    app.run(debug=False, host='0.0.0.0', port=7860)
+