Upload 13 files

app.py

@@ -1,7 +1,6 @@
-import os, zipfile, sqlite3, uuid, shutil, hashlib, secrets
+import os, zipfile, sqlite3, uuid, shutil, secrets, json
 from datetime import datetime
-from functools import wraps
-from flask import Flask, request, render_template, redirect, url_for, abort, Response, send_from_directory, session, flash
+from flask import Flask, request, render_template, redirect, url_for, abort, Response, send_from_directory, flash, make_response
 
 APP_NAME = "h by Xlnk"
 UPLOAD_DIR = "uploads"
@@ -13,7 +12,7 @@ BRAND_COMMENT = '<!-- h by Xlnk -->'
 os.makedirs(UPLOAD_DIR, exist_ok=True)
 
 app = Flask(__name__)
-app.secret_key = secrets.token_hex(32)  # Generate a secure secret key
+app.secret_key = secrets.token_hex(32)
 
 # ---------- DATABASE ----------
 def db():
@@ -21,63 +20,67 @@ def db():
 
 def init_db():
     with db() as c:
-        # Create users table
-        c.execute("""
-        CREATE TABLE IF NOT EXISTS users (
-            id TEXT PRIMARY KEY,
-            email TEXT UNIQUE NOT NULL,
-            password_hash TEXT NOT NULL,
-            created TEXT
-        )
-        """)
-        # Create sites table with user_id foreign key
         c.execute("""
         CREATE TABLE IF NOT EXISTS sites (
             id TEXT PRIMARY KEY,
-            user_id TEXT NOT NULL,
             created TEXT,
             views INTEGER DEFAULT 0,
             expires TEXT,
-            FOREIGN KEY (user_id) REFERENCES users(id)
+            edit_token TEXT
         )
         """)
+        # Add edit_token column if it doesn't exist (migration)
+        try:
+            c.execute("ALTER TABLE sites ADD COLUMN edit_token TEXT")
+        except sqlite3.OperationalError:
+            pass  # Column already exists
 
 # Initialize database on module load (ensures it works with gunicorn)
 init_db()
 
-# ---------- AUTH HELPERS ----------
-def hash_password(password):
-    """Hash password with SHA-256"""
-    return hashlib.sha256(password.encode()).hexdigest()
-
-def login_required(f):
-    """Decorator to require login for routes"""
-    @wraps(f)
-    def decorated_function(*args, **kwargs):
-        if 'user_id' not in session:
-            flash('Please login to access this page', 'error')
-            return redirect(url_for('login'))
-        return f(*args, **kwargs)
-    return decorated_function
-
-def get_current_user():
-    """Get current logged in user"""
-    if 'user_id' in session:
-        with db() as c:
-            user = c.execute("SELECT * FROM users WHERE id=?", (session['user_id'],)).fetchone()
-            return user
-    return None
-
-def owns_site(site_id):
-    """Check if current user owns the site"""
-    if 'user_id' not in session:
+# ---------- TOKEN MANAGEMENT (COOKIES) ----------
+def get_user_tokens():
+    """Get all tokens stored in user's cookies"""
+    tokens_json = request.cookies.get('site_tokens', '{}')
+    try:
+        return json.loads(tokens_json)
+    except:
+        return {}
+
+def save_token_to_response(response, site_id, token):
+    """Add a token to the user's cookie"""
+    tokens = get_user_tokens()
+    tokens[site_id] = token
+    response.set_cookie('site_tokens', json.dumps(tokens), max_age=365*24*60*60, httponly=True, samesite='Lax')
+    return response
+
+def remove_token_from_response(response, site_id):
+    """Remove a token from the user's cookie"""
+    tokens = get_user_tokens()
+    tokens.pop(site_id, None)
+    response.set_cookie('site_tokens', json.dumps(tokens), max_age=365*24*60*60, httponly=True, samesite='Lax')
+    return response
+
+def get_token_for_site(site_id):
+    """Get token for a specific site from cookies"""
+    tokens = get_user_tokens()
+    return tokens.get(site_id)
+
+def verify_token(site_id, token):
+    """Check if the provided token matches the site's edit token"""
+    if not token:
         return False
     with db() as c:
-        site = c.execute("SELECT user_id FROM sites WHERE id=?", (site_id,)).fetchone()
-        if site and site[0] == session['user_id']:
+        row = c.execute("SELECT edit_token FROM sites WHERE id=?", (site_id,)).fetchone()
+        if row and row[0] == token:
             return True
     return False
 
+def user_owns_site(site_id):
+    """Check if the current user owns the site (has valid token in cookies)"""
+    token = get_token_for_site(site_id)
+    return verify_token(site_id, token)
+
 # ---------- HTML INJECTION ----------
 def inject_html(html):
     if "supreme-engine/a.js" in html:
@@ -101,91 +104,35 @@ def cleanup():
                 shutil.rmtree(os.path.join(UPLOAD_DIR, site_id), ignore_errors=True)
                 c.execute("DELETE FROM sites WHERE id=?", (site_id,))
 
-# ---------- AUTH ROUTES ----------
-@app.route("/login", methods=["GET", "POST"])
-def login():
-    if 'user_id' in session:
-        return redirect(url_for('dashboard'))
+# ---------- ROUTES ----------
+@app.route("/")
+def home():
+    return redirect(url_for('my_sites'))
+
+@app.route("/my-sites")
+def my_sites():
+    """Show only the sites the user owns (has tokens for)"""
+    cleanup()
+    user_tokens = get_user_tokens()
     
-    if request.method == "POST":
-        email = request.form.get("email", "").strip().lower()
-        password = request.form.get("password", "")
-        
-        if not email or not password:
-            flash("Please fill in all fields", "error")
-            return render_template("login.html")
-        
-        password_hash = hash_password(password)
-        
-        with db() as c:
-            user = c.execute("SELECT id, email FROM users WHERE email=? AND password_hash=?", 
-                           (email, password_hash)).fetchone()
-        
-        if user:
-            session['user_id'] = user[0]
-            session['user_email'] = user[1]
-            flash("Welcome back!", "success")
-            return redirect(url_for('dashboard'))
-        else:
-            flash("Invalid email or password", "error")
+    if not user_tokens:
+        # No sites yet
+        return render_template("my_sites.html", sites=[])
     
-    return render_template("login.html")
-
-@app.route("/register", methods=["GET", "POST"])
-def register():
-    if 'user_id' in session:
-        return redirect(url_for('dashboard'))
+    # Get only sites that the user has valid tokens for
+    my_sites_list = []
+    with db() as c:
+        for site_id, token in user_tokens.items():
+            row = c.execute("SELECT * FROM sites WHERE id=? AND edit_token=?", (site_id, token)).fetchone()
+            if row:
+                my_sites_list.append(row)
     
-    if request.method == "POST":
-        email = request.form.get("email", "").strip().lower()
-        password = request.form.get("password", "")
-        confirm_password = request.form.get("confirm_password", "")
-        
-        if not email or not password or not confirm_password:
-            flash("Please fill in all fields", "error")
-            return render_template("register.html")
-        
-        if password != confirm_password:
-            flash("Passwords do not match", "error")
-            return render_template("register.html")
-        
-        if len(password) < 6:
-            flash("Password must be at least 6 characters", "error")
-            return render_template("register.html")
-        
-        # Check if email already exists
-        with db() as c:
-            existing = c.execute("SELECT id FROM users WHERE email=?", (email,)).fetchone()
-            if existing:
-                flash("Email already registered", "error")
-                return render_template("register.html")
-            
-            # Create new user
-            user_id = uuid.uuid4().hex
-            password_hash = hash_password(password)
-            c.execute("INSERT INTO users VALUES (?, ?, ?, ?)",
-                     (user_id, email, password_hash, datetime.utcnow().isoformat()))
-        
-        flash("Registration successful! Please login.", "success")
-        return redirect(url_for('login'))
+    # Sort by created date (newest first)
+    my_sites_list.sort(key=lambda x: x[1] if x[1] else '', reverse=True)
     
-    return render_template("register.html")
-
-@app.route("/logout")
-def logout():
-    session.clear()
-    flash("You have been logged out", "success")
-    return redirect(url_for('login'))
-
-# ---------- ROUTES ----------
-@app.route("/")
-def home():
-    if 'user_id' in session:
-        return redirect(url_for('dashboard'))
-    return redirect(url_for('login'))
+    return render_template("my_sites.html", sites=my_sites_list)
 
 @app.route("/upload", methods=["GET", "POST"])
-@login_required
 def upload():
     cleanup()
 
@@ -193,6 +140,9 @@ def upload():
         file = request.files["file"]
         site_id = request.form.get("site_id") or uuid.uuid4().hex[:6]
         expires = request.form.get("expires") or None
+        
+        # Generate a unique edit token for this site
+        edit_token = secrets.token_urlsafe(32)
 
         site_path = os.path.join(UPLOAD_DIR, site_id)
         if os.path.exists(site_path):
@@ -212,36 +162,50 @@ def upload():
 
         with db() as c:
             c.execute(
-                "INSERT INTO sites VALUES (?, ?, ?, 0, ?)",
-                (site_id, session['user_id'], datetime.utcnow().isoformat(), expires)
+                "INSERT INTO sites VALUES (?, ?, 0, ?, ?)",
+                (site_id, datetime.utcnow().isoformat(), expires, edit_token)
             )
 
         flash("Site uploaded successfully!", "success")
-        return redirect(url_for("dashboard"))
+        
+        # Create response and save token to cookie
+        response = make_response(redirect(url_for("manage_site", site_id=site_id)))
+        save_token_to_response(response, site_id, edit_token)
+        return response
 
     return render_template("upload.html")
 
-@app.route("/dashboard")
-@login_required
-def dashboard():
+@app.route("/manage/<site_id>")
+def manage_site(site_id):
+    """Manage a specific site - auto-checks token from cookies"""
+    if not user_owns_site(site_id):
+        flash("You don't have access to this site.", "error")
+        return redirect(url_for('my_sites'))
+    
     with db() as c:
-        # Only get sites belonging to the current user
-        sites = c.execute("SELECT * FROM sites WHERE user_id=? ORDER BY created DESC", 
-                         (session['user_id'],)).fetchall()
-    return render_template("dashboard.html", sites=sites, user_email=session.get('user_email'))
+        site = c.execute("SELECT * FROM sites WHERE id=?", (site_id,)).fetchone()
+    
+    if not site:
+        abort(404)
+    
+    return render_template("manage.html", site=site, site_id=site_id)
 
 @app.route("/delete/<site_id>")
-@login_required
 def delete(site_id):
-    if not owns_site(site_id):
-        flash("Access denied", "error")
-        return redirect(url_for('dashboard'))
+    """Delete a site - auto-checks token from cookies"""
+    if not user_owns_site(site_id):
+        flash("You don't have access to this site.", "error")
+        return redirect(url_for('my_sites'))
     
     shutil.rmtree(os.path.join(UPLOAD_DIR, site_id), ignore_errors=True)
     with db() as c:
         c.execute("DELETE FROM sites WHERE id=?", (site_id,))
+    
+    # Remove token from cookies
+    response = make_response(redirect(url_for("my_sites")))
+    remove_token_from_response(response, site_id)
     flash("Site deleted", "success")
-    return redirect(url_for("dashboard"))
+    return response
 
 # ---------- FILE MANAGEMENT ----------
 def get_all_files(directory):
@@ -255,11 +219,11 @@ def get_all_files(directory):
     return sorted(files)
 
 @app.route("/files/<site_id>")
-@login_required
 def list_files(site_id):
-    if not owns_site(site_id):
-        flash("Access denied", "error")
-        return redirect(url_for('dashboard'))
+    """List files in a site - auto-checks token from cookies"""
+    if not user_owns_site(site_id):
+        flash("You don't have access to this site.", "error")
+        return redirect(url_for('my_sites'))
     
     site_path = os.path.join(UPLOAD_DIR, site_id)
     if not os.path.exists(site_path):
@@ -268,11 +232,11 @@ def list_files(site_id):
     return render_template("files.html", site_id=site_id, files=files)
 
 @app.route("/edit/<site_id>/<path:file>")
-@login_required
 def edit_file(site_id, file):
-    if not owns_site(site_id):
-        flash("Access denied", "error")
-        return redirect(url_for('dashboard'))
+    """Edit a file - auto-checks token from cookies"""
+    if not user_owns_site(site_id):
+        flash("You don't have access to this site.", "error")
+        return redirect(url_for('my_sites'))
     
     path = os.path.join(UPLOAD_DIR, site_id, file)
     if not os.path.exists(path):
@@ -285,11 +249,11 @@ def edit_file(site_id, file):
     return render_template("edit.html", site_id=site_id, file=file, content=content)
 
 @app.route("/save/<site_id>/<path:file>", methods=["POST"])
-@login_required
 def save_file(site_id, file):
-    if not owns_site(site_id):
-        flash("Access denied", "error")
-        return redirect(url_for('dashboard'))
+    """Save a file - auto-checks token from cookies"""
+    if not user_owns_site(site_id):
+        flash("You don't have access to this site.", "error")
+        return redirect(url_for('my_sites'))
     
     path = os.path.join(UPLOAD_DIR, site_id, file)
     if not os.path.exists(path):
@@ -301,11 +265,11 @@ def save_file(site_id, file):
     return redirect(url_for("list_files", site_id=site_id))
 
 @app.route("/delete-file/<site_id>/<path:file>")
-@login_required
 def delete_file(site_id, file):
-    if not owns_site(site_id):
-        flash("Access denied", "error")
-        return redirect(url_for('dashboard'))
+    """Delete a file - auto-checks token from cookies"""
+    if not user_owns_site(site_id):
+        flash("You don't have access to this site.", "error")
+        return redirect(url_for('my_sites'))
     
     site_path = os.path.join(UPLOAD_DIR, site_id)
     path = os.path.join(site_path, file)
@@ -320,12 +284,114 @@ def delete_file(site_id, file):
     flash("File deleted", "success")
     return redirect(url_for("list_files", site_id=site_id))
 
+@app.route("/create-file/<site_id>", methods=["GET", "POST"])
+def create_file(site_id):
+    """Create a new file - auto-checks token from cookies"""
+    if not user_owns_site(site_id):
+        flash("You don't have access to this site.", "error")
+        return redirect(url_for('my_sites'))
+    
+    site_path = os.path.join(UPLOAD_DIR, site_id)
+    if not os.path.exists(site_path):
+        abort(404)
+    
+    if request.method == "POST":
+        filename = request.form.get("filename", "").strip()
+        content = request.form.get("content", "")
+        
+        # Validate filename
+        if not filename:
+            flash("Please enter a filename", "error")
+            return render_template("create_file.html", site_id=site_id)
+        
+        # Security: prevent path traversal
+        if ".." in filename or filename.startswith("/") or filename.startswith("\\"):
+            flash("Invalid filename", "error")
+            return render_template("create_file.html", site_id=site_id)
+        
+        # Normalize path
+        filename = filename.replace("\\", "/")
+        file_path = os.path.join(site_path, filename)
+        
+        # Check if file already exists
+        if os.path.exists(file_path):
+            flash("A file with this name already exists", "error")
+            return render_template("create_file.html", site_id=site_id, filename=filename, content=content)
+        
+        # Create parent directories if needed
+        parent_dir = os.path.dirname(file_path)
+        if parent_dir and not os.path.exists(parent_dir):
+            os.makedirs(parent_dir, exist_ok=True)
+        
+        # Create the file
+        with open(file_path, "w", encoding="utf-8") as f:
+            f.write(content)
+        
+        flash(f"File '{filename}' created", "success")
+        return redirect(url_for("list_files", site_id=site_id))
+    
+    return render_template("create_file.html", site_id=site_id)
+
+@app.route("/rename-file/<site_id>/<path:file>", methods=["GET", "POST"])
+def rename_file(site_id, file):
+    """Rename a file - auto-checks token from cookies"""
+    if not user_owns_site(site_id):
+        flash("You don't have access to this site.", "error")
+        return redirect(url_for('my_sites'))
+    
+    site_path = os.path.join(UPLOAD_DIR, site_id)
+    old_path = os.path.join(site_path, file)
+    
+    if not os.path.exists(old_path):
+        abort(404)
+    
+    if request.method == "POST":
+        new_name = request.form.get("new_name", "").strip()
+        
+        # Validate new filename
+        if not new_name:
+            flash("Please enter a new filename", "error")
+            return render_template("rename_file.html", site_id=site_id, file=file)
+        
+        # Security: prevent path traversal
+        if ".." in new_name or new_name.startswith("/") or new_name.startswith("\\"):
+            flash("Invalid filename", "error")
+            return render_template("rename_file.html", site_id=site_id, file=file)
+        
+        # Normalize path
+        new_name = new_name.replace("\\", "/")
+        new_path = os.path.join(site_path, new_name)
+        
+        # Check if target already exists
+        if os.path.exists(new_path):
+            flash("A file with this name already exists", "error")
+            return render_template("rename_file.html", site_id=site_id, file=file, new_name=new_name)
+        
+        # Create parent directories if needed
+        parent_dir = os.path.dirname(new_path)
+        if parent_dir and not os.path.exists(parent_dir):
+            os.makedirs(parent_dir, exist_ok=True)
+        
+        # Rename the file
+        shutil.move(old_path, new_path)
+        
+        # Clean up empty parent directories from old location
+        old_parent = os.path.dirname(old_path)
+        while old_parent != site_path and os.path.isdir(old_parent) and not os.listdir(old_parent):
+            os.rmdir(old_parent)
+            old_parent = os.path.dirname(old_parent)
+        
+        flash(f"File renamed to '{new_name}'", "success")
+        return redirect(url_for("list_files", site_id=site_id))
+    
+    return render_template("rename_file.html", site_id=site_id, file=file)
+
 @app.route("/upload/<site_id>", methods=["POST"])
-@login_required
 def upload_to_site(site_id):
-    if not owns_site(site_id):
-        flash("Access denied", "error")
-        return redirect(url_for('dashboard'))
+    """Upload files to a site - auto-checks token from cookies"""
+    if not user_owns_site(site_id):
+        flash("You don't have access to this site.", "error")
+        return redirect(url_for('my_sites'))
     
     site_path = os.path.join(UPLOAD_DIR, site_id)
     if not os.path.exists(site_path):

templates/create_file.html

@@ -0,0 +1,334 @@
+<!DOCTYPE html>
+<html>
+
+<head>
+    <title>Create File - {{site_id}} | h by Xlnk</title>
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <link
+        href="https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&family=Fira+Code:wght@400;500&display=swap"
+        rel="stylesheet">
+    <style>
+        * {
+            margin: 0;
+            padding: 0;
+            box-sizing: border-box;
+        }
+
+        body {
+            background: linear-gradient(135deg, #0f0f23 0%, #1a1a3e 50%, #0d0d1f 100%);
+            min-height: 100vh;
+            font-family: 'Inter', system-ui, sans-serif;
+            color: #e2e8f0;
+        }
+
+        .navbar {
+            background: rgba(15, 23, 42, 0.9);
+            backdrop-filter: blur(20px);
+            border-bottom: 1px solid rgba(99, 102, 241, 0.2);
+            padding: 16px 30px;
+            display: flex;
+            justify-content: space-between;
+            align-items: center;
+            position: sticky;
+            top: 0;
+            z-index: 100;
+        }
+
+        .nav-brand {
+            font-size: 1.5rem;
+            font-weight: 700;
+            background: linear-gradient(135deg, #818cf8, #c084fc);
+            -webkit-background-clip: text;
+            -webkit-text-fill-color: transparent;
+            background-clip: text;
+            text-decoration: none;
+        }
+
+        .nav-links {
+            display: flex;
+            gap: 20px;
+            align-items: center;
+        }
+
+        .nav-links a {
+            color: #94a3b8;
+            text-decoration: none;
+            font-size: 0.9rem;
+            transition: color 0.3s ease;
+        }
+
+        .nav-links a:hover {
+            color: #818cf8;
+        }
+
+        .container {
+            max-width: 900px;
+            margin: 0 auto;
+            padding: 40px 20px;
+        }
+
+        .breadcrumb {
+            margin-bottom: 20px;
+            color: #64748b;
+        }
+
+        .breadcrumb a {
+            color: #818cf8;
+            text-decoration: none;
+            transition: color 0.3s ease;
+        }
+
+        .breadcrumb a:hover {
+            color: #a5b4fc;
+        }
+
+        .page-header {
+            margin-bottom: 30px;
+        }
+
+        .page-header h1 {
+            font-size: 1.8rem;
+            font-weight: 700;
+            background: linear-gradient(135deg, #818cf8, #c084fc, #f472b6);
+            -webkit-background-clip: text;
+            -webkit-text-fill-color: transparent;
+            background-clip: text;
+        }
+
+        .page-header p {
+            color: #94a3b8;
+            margin-top: 8px;
+        }
+
+        .flash-messages {
+            margin-bottom: 20px;
+        }
+
+        .flash {
+            padding: 12px 16px;
+            border-radius: 12px;
+            font-size: 0.9rem;
+            margin-bottom: 10px;
+            animation: slideIn 0.3s ease;
+        }
+
+        @keyframes slideIn {
+            from {
+                opacity: 0;
+                transform: translateY(-10px);
+            }
+
+            to {
+                opacity: 1;
+                transform: translateY(0);
+            }
+        }
+
+        .flash.error {
+            background: rgba(239, 68, 68, 0.15);
+            border: 1px solid rgba(239, 68, 68, 0.3);
+            color: #fca5a5;
+        }
+
+        .flash.success {
+            background: rgba(34, 197, 94, 0.15);
+            border: 1px solid rgba(34, 197, 94, 0.3);
+            color: #86efac;
+        }
+
+        .card {
+            background: rgba(15, 23, 42, 0.8);
+            backdrop-filter: blur(20px);
+            border: 1px solid rgba(99, 102, 241, 0.15);
+            border-radius: 16px;
+            padding: 30px;
+        }
+
+        .form-group {
+            margin-bottom: 24px;
+        }
+
+        label {
+            display: block;
+            color: #e2e8f0;
+            font-size: 0.9rem;
+            font-weight: 500;
+            margin-bottom: 10px;
+        }
+
+        input[type="text"] {
+            width: 100%;
+            padding: 14px 16px;
+            background: rgba(30, 41, 59, 0.8);
+            border: 1px solid rgba(148, 163, 184, 0.2);
+            border-radius: 12px;
+            color: #f1f5f9;
+            font-size: 1rem;
+            font-family: 'Fira Code', monospace;
+            transition: all 0.3s ease;
+        }
+
+        input[type="text"]:focus {
+            outline: none;
+            border-color: #818cf8;
+            box-shadow: 0 0 0 3px rgba(129, 140, 248, 0.15);
+        }
+
+        input::placeholder {
+            color: #64748b;
+        }
+
+        textarea {
+            width: 100%;
+            height: 300px;
+            background: rgba(30, 41, 59, 0.8);
+            border: 1px solid rgba(148, 163, 184, 0.2);
+            border-radius: 12px;
+            color: #f1f5f9;
+            font-size: 14px;
+            font-family: 'Fira Code', monospace;
+            padding: 16px;
+            line-height: 1.6;
+            resize: vertical;
+            transition: all 0.3s ease;
+        }
+
+        textarea:focus {
+            outline: none;
+            border-color: #818cf8;
+            box-shadow: 0 0 0 3px rgba(129, 140, 248, 0.15);
+        }
+
+        .hint {
+            color: #64748b;
+            font-size: 0.8rem;
+            margin-top: 8px;
+        }
+
+        .actions {
+            display: flex;
+            gap: 12px;
+            margin-top: 30px;
+        }
+
+        .btn {
+            padding: 12px 24px;
+            border-radius: 12px;
+            border: none;
+            cursor: pointer;
+            font-weight: 600;
+            font-family: inherit;
+            font-size: 0.95rem;
+            transition: all 0.3s ease;
+            text-decoration: none;
+            display: inline-flex;
+            align-items: center;
+            gap: 8px;
+        }
+
+        .btn-primary {
+            background: linear-gradient(135deg, #22c55e, #16a34a);
+            color: white;
+        }
+
+        .btn-primary:hover {
+            transform: translateY(-2px);
+            box-shadow: 0 10px 30px rgba(34, 197, 94, 0.4);
+        }
+
+        .btn-secondary {
+            background: rgba(100, 116, 139, 0.2);
+            border: 1px solid rgba(100, 116, 139, 0.3);
+            color: #94a3b8;
+        }
+
+        .btn-secondary:hover {
+            background: rgba(100, 116, 139, 0.3);
+            color: #e2e8f0;
+        }
+
+        .glow-orb {
+            position: fixed;
+            width: 400px;
+            height: 400px;
+            border-radius: 50%;
+            filter: blur(100px);
+            opacity: 0.15;
+            pointer-events: none;
+            z-index: -1;
+        }
+
+        .orb-1 {
+            background: #22c55e;
+            top: 20%;
+            right: -100px;
+        }
+
+        .orb-2 {
+            background: #6366f1;
+            bottom: 20%;
+            left: -100px;
+        }
+    </style>
+</head>
+
+<body>
+    <div class="glow-orb orb-1"></div>
+    <div class="glow-orb orb-2"></div>
+
+    <nav class="navbar">
+        <a href="/my-sites" class="nav-brand">h by Xlnk</a>
+        <div class="nav-links">
+            <a href="/files/{{site_id}}">Back to Files</a>
+            <a href="/my-sites">My Sites</a>
+        </div>
+    </nav>
+
+    <div class="container">
+        <div class="breadcrumb">
+            <a href="/my-sites">My Sites</a> / <a href="/manage/{{site_id}}">{{site_id}}</a> / <a
+                href="/files/{{site_id}}">Files</a> /
+            <strong>Create New</strong>
+        </div>
+
+        <div class="page-header">
+            <h1>📝 Create New File</h1>
+            <p>Create a new file in your site</p>
+        </div>
+
+        {% with messages = get_flashed_messages(with_categories=true) %}
+        {% if messages %}
+        <div class="flash-messages">
+            {% for category, message in messages %}
+            <div class="flash {{ category }}">{{ message }}</div>
+            {% endfor %}
+        </div>
+        {% endif %}
+        {% endwith %}
+
+        <div class="card">
+            <form method="post">
+                <div class="form-group">
+                    <label for="filename">Filename</label>
+                    <input type="text" id="filename" name="filename" placeholder="e.g., about.html or css/styles.css"
+                        value="{{ filename or '' }}" required autofocus>
+                    <p class="hint">💡 You can include folder paths like "css/styles.css" to create files in subfolders
+                    </p>
+                </div>
+
+                <div class="form-group">
+                    <label for="content">Content (optional)</label>
+                    <textarea id="content" name="content"
+                        placeholder="Enter file content here...">{{ content or '' }}</textarea>
+                </div>
+
+                <div class="actions">
+                    <a href="/files/{{site_id}}" class="btn btn-secondary">Cancel</a>
+                    <button type="submit" class="btn btn-primary">✨ Create File</button>
+                </div>
+            </form>
+        </div>
+    </div>
+</body>
+
+</html>

templates/edit.html

@@ -61,10 +61,6 @@
             color: #818cf8;
         }
 
-        .nav-links .logout {
-            color: #f87171;
-        }
-
         .container {
             max-width: 1200px;
             margin: 0 auto;
@@ -246,17 +242,17 @@
     <div class="glow-orb orb-1"></div>
 
     <nav class="navbar">
-        <a href="/dashboard" class="nav-brand">h by Xlnk</a>
+        <a href="/my-sites" class="nav-brand">h by Xlnk</a>
         <div class="nav-links">
-            <a href="/dashboard">Dashboard</a>
-            <a href="/upload">Upload</a>
-            <a href="/logout" class="logout">Logout</a>
+            <a href="/files/{{site_id}}">Back to Files</a>
+            <a href="/my-sites">My Sites</a>
         </div>
     </nav>
 
     <div class="container">
         <div class="breadcrumb">
-            <a href="/dashboard">Dashboard</a> / <a href="/files/{{site_id}}">{{site_id}}</a> /
+            <a href="/my-sites">My Sites</a> / <a href="/manage/{{site_id}}">{{site_id}}</a> / <a
+                href="/files/{{site_id}}">Files</a> /
             <strong>{{file}}</strong>
         </div>
 

templates/files.html

@@ -59,10 +59,6 @@
             color: #818cf8;
         }
 
-        .nav-links .logout {
-            color: #f87171;
-        }
-
         .container {
             max-width: 900px;
             margin: 0 auto;
@@ -306,21 +302,24 @@
     <div class="glow-orb orb-2"></div>
 
     <nav class="navbar">
-        <a href="/dashboard" class="nav-brand">h by Xlnk</a>
+        <a href="/my-sites" class="nav-brand">h by Xlnk</a>
         <div class="nav-links">
-            <a href="/dashboard">Dashboard</a>
-            <a href="/upload">Upload</a>
-            <a href="/logout" class="logout">Logout</a>
+            <a href="/manage/{{site_id}}">Back to Manage</a>
+            <a href="/my-sites">My Sites</a>
         </div>
     </nav>
 
     <div class="container">
         <div class="breadcrumb">
-            <a href="/dashboard">Dashboard</a> / <strong>{{site_id}}</strong>
+            <a href="/my-sites">My Sites</a> / <a href="/manage/{{site_id}}">{{site_id}}</a> / <strong>Files</strong>
         </div>
 
-        <div class="page-header">
+        <div class="page-header"
+            style="display: flex; justify-content: space-between; align-items: center; flex-wrap: wrap; gap: 16px;">
             <h1>📁 Files in {{site_id}}</h1>
+            <a href="/create-file/{{site_id}}" class="btn-upload"
+                style="display: inline-flex; align-items: center; gap: 8px; padding: 10px 20px; text-decoration: none;">✨
+                Create New File</a>
         </div>
 
         {% with messages = get_flashed_messages(with_categories=true) %}
@@ -340,6 +339,7 @@
                 <span class="file-name">{{file}}</span>
                 <div class="file-actions">
                     <a href="/edit/{{site_id}}/{{file}}">✏️ Edit</a>
+                    <a href="/rename-file/{{site_id}}/{{file}}">📝 Rename</a>
                     <a href="/h/{{site_id}}/{{file}}" target="_blank">👁️ View</a>
                     <a href="/delete-file/{{site_id}}/{{file}}" class="btn-delete"
                         onclick="return confirm('Delete {{file}}?')">🗑️ Delete</a>

templates/manage.html

@@ -0,0 +1,418 @@
+<!DOCTYPE html>
+<html>
+
+<head>
+    <title>Manage {{site_id}} - h by Xlnk</title>
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <link href="https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&display=swap" rel="stylesheet">
+    <style>
+        * {
+            margin: 0;
+            padding: 0;
+            box-sizing: border-box;
+        }
+
+        body {
+            background: linear-gradient(135deg, #0f0f23 0%, #1a1a3e 50%, #0d0d1f 100%);
+            min-height: 100vh;
+            font-family: 'Inter', system-ui, sans-serif;
+            color: #e2e8f0;
+        }
+
+        .navbar {
+            background: rgba(15, 23, 42, 0.9);
+            backdrop-filter: blur(20px);
+            border-bottom: 1px solid rgba(99, 102, 241, 0.2);
+            padding: 16px 30px;
+            display: flex;
+            justify-content: space-between;
+            align-items: center;
+            position: sticky;
+            top: 0;
+            z-index: 100;
+        }
+
+        .nav-brand {
+            font-size: 1.5rem;
+            font-weight: 700;
+            background: linear-gradient(135deg, #818cf8, #c084fc);
+            -webkit-background-clip: text;
+            -webkit-text-fill-color: transparent;
+            background-clip: text;
+            text-decoration: none;
+        }
+
+        .nav-links {
+            display: flex;
+            gap: 20px;
+            align-items: center;
+        }
+
+        .nav-links a {
+            color: #94a3b8;
+            text-decoration: none;
+            font-size: 0.9rem;
+            transition: color 0.3s ease;
+        }
+
+        .nav-links a:hover {
+            color: #818cf8;
+        }
+
+        .container {
+            max-width: 800px;
+            margin: 0 auto;
+            padding: 40px 20px;
+        }
+
+        .page-header {
+            margin-bottom: 30px;
+        }
+
+        .page-header h1 {
+            font-size: 2rem;
+            font-weight: 700;
+            background: linear-gradient(135deg, #818cf8, #c084fc, #f472b6);
+            -webkit-background-clip: text;
+            -webkit-text-fill-color: transparent;
+            background-clip: text;
+            margin-bottom: 8px;
+        }
+
+        .page-header p {
+            color: #94a3b8;
+        }
+
+        .flash-messages {
+            margin-bottom: 20px;
+        }
+
+        .flash {
+            padding: 12px 16px;
+            border-radius: 12px;
+            font-size: 0.9rem;
+            margin-bottom: 10px;
+            animation: slideIn 0.3s ease;
+        }
+
+        @keyframes slideIn {
+            from {
+                opacity: 0;
+                transform: translateY(-10px);
+            }
+
+            to {
+                opacity: 1;
+                transform: translateY(0);
+            }
+        }
+
+        .flash.error {
+            background: rgba(239, 68, 68, 0.15);
+            border: 1px solid rgba(239, 68, 68, 0.3);
+            color: #fca5a5;
+        }
+
+        .flash.success {
+            background: rgba(34, 197, 94, 0.15);
+            border: 1px solid rgba(34, 197, 94, 0.3);
+            color: #86efac;
+        }
+
+        .site-card {
+            background: rgba(15, 23, 42, 0.8);
+            backdrop-filter: blur(20px);
+            border: 1px solid rgba(99, 102, 241, 0.15);
+            border-radius: 16px;
+            padding: 30px;
+            margin-bottom: 24px;
+        }
+
+        .site-id {
+            font-size: 1.4rem;
+            font-weight: 600;
+            color: #f1f5f9;
+            margin-bottom: 16px;
+        }
+
+        .site-id a {
+            color: inherit;
+            text-decoration: none;
+            transition: color 0.3s ease;
+        }
+
+        .site-id a:hover {
+            color: #818cf8;
+        }
+
+        .site-stats {
+            display: flex;
+            gap: 30px;
+            margin-bottom: 20px;
+            flex-wrap: wrap;
+        }
+
+        .stat {
+            display: flex;
+            flex-direction: column;
+        }
+
+        .stat-label {
+            font-size: 0.75rem;
+            color: #64748b;
+            text-transform: uppercase;
+            letter-spacing: 0.5px;
+        }
+
+        .stat-value {
+            font-size: 1.1rem;
+            font-weight: 600;
+            color: #94a3b8;
+        }
+
+        .stat-value.views {
+            color: #22c55e;
+        }
+
+        .site-actions {
+            display: flex;
+            gap: 12px;
+            flex-wrap: wrap;
+            border-top: 1px solid rgba(148, 163, 184, 0.1);
+            padding-top: 20px;
+            margin-top: 10px;
+        }
+
+        .action-btn {
+            padding: 12px 20px;
+            border-radius: 10px;
+            font-size: 0.9rem;
+            font-weight: 500;
+            text-decoration: none;
+            text-align: center;
+            transition: all 0.3s ease;
+            display: inline-flex;
+            align-items: center;
+            gap: 8px;
+        }
+
+        .action-btn.view {
+            background: rgba(99, 102, 241, 0.15);
+            color: #a5b4fc;
+            border: 1px solid rgba(99, 102, 241, 0.3);
+        }
+
+        .action-btn.view:hover {
+            background: rgba(99, 102, 241, 0.25);
+            transform: translateY(-2px);
+        }
+
+        .action-btn.edit {
+            background: linear-gradient(135deg, #6366f1, #8b5cf6);
+            color: white;
+            border: none;
+        }
+
+        .action-btn.edit:hover {
+            transform: translateY(-2px);
+            box-shadow: 0 10px 30px rgba(99, 102, 241, 0.4);
+        }
+
+        .action-btn.delete {
+            background: rgba(239, 68, 68, 0.15);
+            color: #fca5a5;
+            border: 1px solid rgba(239, 68, 68, 0.3);
+        }
+
+        .action-btn.delete:hover {
+            background: rgba(239, 68, 68, 0.25);
+        }
+
+        .info-box {
+            background: rgba(30, 41, 59, 0.6);
+            border-radius: 12px;
+            padding: 20px;
+            margin-top: 16px;
+        }
+
+        .info-box h3 {
+            color: #a5b4fc;
+            font-size: 0.85rem;
+            text-transform: uppercase;
+            letter-spacing: 0.5px;
+            margin-bottom: 10px;
+        }
+
+        .info-value {
+            background: rgba(15, 23, 42, 0.8);
+            border: 1px solid rgba(99, 102, 241, 0.2);
+            border-radius: 8px;
+            padding: 12px 16px;
+            font-family: 'Fira Code', monospace;
+            font-size: 0.85rem;
+            color: #94a3b8;
+            word-break: break-all;
+            display: flex;
+            align-items: center;
+            justify-content: space-between;
+            gap: 10px;
+        }
+
+        .info-value a {
+            color: #818cf8;
+            text-decoration: none;
+        }
+
+        .info-value a:hover {
+            text-decoration: underline;
+        }
+
+        .copy-btn {
+            background: rgba(99, 102, 241, 0.2);
+            border: 1px solid rgba(99, 102, 241, 0.3);
+            color: #a5b4fc;
+            padding: 6px 12px;
+            border-radius: 6px;
+            cursor: pointer;
+            font-size: 0.75rem;
+            transition: all 0.2s;
+            white-space: nowrap;
+        }
+
+        .copy-btn:hover {
+            background: rgba(99, 102, 241, 0.3);
+        }
+
+        .glow-orb {
+            position: fixed;
+            width: 400px;
+            height: 400px;
+            border-radius: 50%;
+            filter: blur(100px);
+            opacity: 0.2;
+            pointer-events: none;
+            z-index: -1;
+        }
+
+        .orb-1 {
+            background: #6366f1;
+            top: 10%;
+            right: -100px;
+        }
+
+        .orb-2 {
+            background: #c084fc;
+            bottom: 20%;
+            left: -100px;
+        }
+
+        @media (max-width: 600px) {
+            .navbar {
+                flex-direction: column;
+                gap: 15px;
+            }
+
+            .site-stats {
+                flex-direction: column;
+                gap: 15px;
+            }
+
+            .site-actions {
+                flex-direction: column;
+            }
+
+            .action-btn {
+                justify-content: center;
+            }
+        }
+    </style>
+</head>
+
+<body>
+    <div class="glow-orb orb-1"></div>
+    <div class="glow-orb orb-2"></div>
+
+    <nav class="navbar">
+        <a href="/my-sites" class="nav-brand">h by Xlnk</a>
+        <div class="nav-links">
+            <a href="/my-sites">My Sites</a>
+            <a href="/upload">Upload</a>
+        </div>
+    </nav>
+
+    <div class="container">
+        <div class="page-header">
+            <h1>⚙️ Manage Site</h1>
+            <p>Edit files, view stats, and manage your site</p>
+        </div>
+
+        {% with messages = get_flashed_messages(with_categories=true) %}
+        {% if messages %}
+        <div class="flash-messages">
+            {% for category, message in messages %}
+            <div class="flash {{ category }}">{{ message }}</div>
+            {% endfor %}
+        </div>
+        {% endif %}
+        {% endwith %}
+
+        <div class="site-card">
+            <div class="site-id">
+                <a href="/h/{{site_id}}/" target="_blank">📁 {{ site_id }} ↗</a>
+            </div>
+
+            <div class="site-stats">
+                <div class="stat">
+                    <span class="stat-label">Views</span>
+                    <span class="stat-value views">{{ site[2] }}</span>
+                </div>
+                <div class="stat">
+                    <span class="stat-label">Created</span>
+                    <span class="stat-value">{{ site[1][:10] if site[1] else "Unknown" }}</span>
+                </div>
+                <div class="stat">
+                    <span class="stat-label">Expires</span>
+                    <span class="stat-value">{{ site[3] or "Never" }}</span>
+                </div>
+            </div>
+
+            <div class="site-actions">
+                <a href="/h/{{site_id}}/" target="_blank" class="action-btn view">👁️ View Site</a>
+                <a href="/files/{{site_id}}" class="action-btn edit">📝 Edit Files</a>
+                <a href="/delete/{{site_id}}" onclick="return confirm('Delete this site? This cannot be undone.')"
+                    class="action-btn delete">🗑️ Delete Site</a>
+            </div>
+
+            <div class="info-box">
+                <h3>🌐 Site URL</h3>
+                <div class="info-value">
+                    <a href="/h/{{site_id}}/" target="_blank" id="siteUrl">{{ request.host_url }}h/{{site_id}}/</a>
+                    <button class="copy-btn" onclick="copyToClipboard('siteUrl')">📋 Copy</button>
+                </div>
+            </div>
+        </div>
+    </div>
+
+    <script>
+        function copyToClipboard(elementId) {
+            const element = document.getElementById(elementId);
+            const text = element.textContent || element.innerText;
+            navigator.clipboard.writeText(text).then(() => {
+                const btn = element.parentElement.querySelector('.copy-btn');
+                const originalText = btn.textContent;
+                btn.textContent = '✓ Copied!';
+                btn.style.background = 'rgba(34, 197, 94, 0.2)';
+                btn.style.borderColor = 'rgba(34, 197, 94, 0.3)';
+                btn.style.color = '#86efac';
+                setTimeout(() => {
+                    btn.textContent = originalText;
+                    btn.style.background = '';
+                    btn.style.borderColor = '';
+                    btn.style.color = '';
+                }, 2000);
+            });
+        }
+    </script>
+</body>
+
+</html>

templates/my_sites.html

@@ -0,0 +1,399 @@
+<!DOCTYPE html>
+<html>
+
+<head>
+    <title>My Sites - h by Xlnk</title>
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <link href="https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&display=swap" rel="stylesheet">
+    <style>
+        * {
+            margin: 0;
+            padding: 0;
+            box-sizing: border-box;
+        }
+
+        body {
+            background: linear-gradient(135deg, #0f0f23 0%, #1a1a3e 50%, #0d0d1f 100%);
+            min-height: 100vh;
+            font-family: 'Inter', system-ui, sans-serif;
+            color: #e2e8f0;
+        }
+
+        .navbar {
+            background: rgba(15, 23, 42, 0.9);
+            backdrop-filter: blur(20px);
+            border-bottom: 1px solid rgba(99, 102, 241, 0.2);
+            padding: 16px 30px;
+            display: flex;
+            justify-content: space-between;
+            align-items: center;
+            position: sticky;
+            top: 0;
+            z-index: 100;
+        }
+
+        .nav-brand {
+            font-size: 1.5rem;
+            font-weight: 700;
+            background: linear-gradient(135deg, #818cf8, #c084fc);
+            -webkit-background-clip: text;
+            -webkit-text-fill-color: transparent;
+            background-clip: text;
+            text-decoration: none;
+        }
+
+        .nav-links {
+            display: flex;
+            gap: 20px;
+            align-items: center;
+        }
+
+        .nav-links a {
+            color: #94a3b8;
+            text-decoration: none;
+            font-size: 0.9rem;
+            transition: color 0.3s ease;
+        }
+
+        .nav-links a:hover {
+            color: #818cf8;
+        }
+
+        .nav-links a.active {
+            color: #818cf8;
+        }
+
+        .container {
+            max-width: 1200px;
+            margin: 0 auto;
+            padding: 40px 20px;
+        }
+
+        .page-header {
+            display: flex;
+            justify-content: space-between;
+            align-items: center;
+            margin-bottom: 30px;
+            flex-wrap: wrap;
+            gap: 20px;
+        }
+
+        .page-header h1 {
+            font-size: 2rem;
+            font-weight: 700;
+            background: linear-gradient(135deg, #818cf8, #c084fc, #f472b6);
+            -webkit-background-clip: text;
+            -webkit-text-fill-color: transparent;
+            background-clip: text;
+        }
+
+        .upload-btn {
+            display: inline-flex;
+            align-items: center;
+            gap: 8px;
+            padding: 12px 24px;
+            background: linear-gradient(135deg, #6366f1, #8b5cf6);
+            border: none;
+            border-radius: 12px;
+            color: white;
+            font-size: 0.95rem;
+            font-weight: 600;
+            text-decoration: none;
+            transition: all 0.3s ease;
+        }
+
+        .upload-btn:hover {
+            transform: translateY(-2px);
+            box-shadow: 0 10px 30px rgba(99, 102, 241, 0.4);
+        }
+
+        .flash-messages {
+            margin-bottom: 20px;
+        }
+
+        .flash {
+            padding: 12px 16px;
+            border-radius: 12px;
+            font-size: 0.9rem;
+            margin-bottom: 10px;
+            animation: slideIn 0.3s ease;
+        }
+
+        @keyframes slideIn {
+            from {
+                opacity: 0;
+                transform: translateY(-10px);
+            }
+
+            to {
+                opacity: 1;
+                transform: translateY(0);
+            }
+        }
+
+        .flash.error {
+            background: rgba(239, 68, 68, 0.15);
+            border: 1px solid rgba(239, 68, 68, 0.3);
+            color: #fca5a5;
+        }
+
+        .flash.success {
+            background: rgba(34, 197, 94, 0.15);
+            border: 1px solid rgba(34, 197, 94, 0.3);
+            color: #86efac;
+        }
+
+        .sites-grid {
+            display: grid;
+            grid-template-columns: repeat(auto-fill, minmax(320px, 1fr));
+            gap: 20px;
+        }
+
+        .site-card {
+            background: rgba(15, 23, 42, 0.8);
+            backdrop-filter: blur(20px);
+            border: 1px solid rgba(99, 102, 241, 0.15);
+            border-radius: 16px;
+            padding: 24px;
+            transition: all 0.3s ease;
+        }
+
+        .site-card:hover {
+            border-color: rgba(99, 102, 241, 0.4);
+            transform: translateY(-4px);
+            box-shadow: 0 20px 40px rgba(0, 0, 0, 0.3);
+        }
+
+        .site-id {
+            font-size: 1.2rem;
+            font-weight: 600;
+            color: #f1f5f9;
+            margin-bottom: 12px;
+        }
+
+        .site-id a {
+            color: inherit;
+            text-decoration: none;
+            transition: color 0.3s ease;
+        }
+
+        .site-id a:hover {
+            color: #818cf8;
+        }
+
+        .site-stats {
+            display: flex;
+            gap: 20px;
+            margin-bottom: 16px;
+        }
+
+        .stat {
+            display: flex;
+            flex-direction: column;
+        }
+
+        .stat-label {
+            font-size: 0.75rem;
+            color: #64748b;
+            text-transform: uppercase;
+            letter-spacing: 0.5px;
+        }
+
+        .stat-value {
+            font-size: 1rem;
+            font-weight: 600;
+            color: #94a3b8;
+        }
+
+        .stat-value.views {
+            color: #22c55e;
+        }
+
+        .site-actions {
+            display: flex;
+            gap: 10px;
+            border-top: 1px solid rgba(148, 163, 184, 0.1);
+            padding-top: 16px;
+            margin-top: 8px;
+        }
+
+        .action-btn {
+            flex: 1;
+            padding: 10px 16px;
+            border-radius: 10px;
+            font-size: 0.85rem;
+            font-weight: 500;
+            text-decoration: none;
+            text-align: center;
+            transition: all 0.3s ease;
+        }
+
+        .action-btn.view {
+            background: rgba(99, 102, 241, 0.15);
+            color: #a5b4fc;
+            border: 1px solid rgba(99, 102, 241, 0.3);
+        }
+
+        .action-btn.view:hover {
+            background: rgba(99, 102, 241, 0.25);
+        }
+
+        .action-btn.edit {
+            background: rgba(34, 197, 94, 0.15);
+            color: #86efac;
+            border: 1px solid rgba(34, 197, 94, 0.3);
+        }
+
+        .action-btn.edit:hover {
+            background: rgba(34, 197, 94, 0.25);
+        }
+
+        .action-btn.delete {
+            background: rgba(239, 68, 68, 0.15);
+            color: #fca5a5;
+            border: 1px solid rgba(239, 68, 68, 0.3);
+        }
+
+        .action-btn.delete:hover {
+            background: rgba(239, 68, 68, 0.25);
+        }
+
+        .empty-state {
+            text-align: center;
+            padding: 60px 20px;
+            background: rgba(15, 23, 42, 0.5);
+            border-radius: 20px;
+            border: 1px dashed rgba(99, 102, 241, 0.3);
+        }
+
+        .empty-state-icon {
+            font-size: 4rem;
+            margin-bottom: 20px;
+        }
+
+        .empty-state h2 {
+            font-size: 1.5rem;
+            color: #e2e8f0;
+            margin-bottom: 10px;
+        }
+
+        .empty-state p {
+            color: #64748b;
+            margin-bottom: 24px;
+        }
+
+        .glow-orb {
+            position: fixed;
+            width: 400px;
+            height: 400px;
+            border-radius: 50%;
+            filter: blur(100px);
+            opacity: 0.2;
+            pointer-events: none;
+            z-index: -1;
+        }
+
+        .orb-1 {
+            background: #6366f1;
+            top: 10%;
+            right: -100px;
+        }
+
+        .orb-2 {
+            background: #c084fc;
+            bottom: 20%;
+            left: -100px;
+        }
+
+        @media (max-width: 600px) {
+            .navbar {
+                flex-direction: column;
+                gap: 15px;
+            }
+
+            .page-header {
+                flex-direction: column;
+                text-align: center;
+            }
+
+            .site-stats {
+                flex-wrap: wrap;
+            }
+
+            .site-actions {
+                flex-wrap: wrap;
+            }
+        }
+    </style>
+</head>
+
+<body>
+    <div class="glow-orb orb-1"></div>
+    <div class="glow-orb orb-2"></div>
+
+    <nav class="navbar">
+        <a href="/my-sites" class="nav-brand">h by Xlnk</a>
+        <div class="nav-links">
+            <a href="/my-sites" class="active">My Sites</a>
+            <a href="/upload">Upload</a>
+        </div>
+    </nav>
+
+    <div class="container">
+        <div class="page-header">
+            <h1>My Sites</h1>
+            <a href="/upload" class="upload-btn">
+                <span>🚀</span> Upload New Site
+            </a>
+        </div>
+
+        {% with messages = get_flashed_messages(with_categories=true) %}
+        {% if messages %}
+        <div class="flash-messages">
+            {% for category, message in messages %}
+            <div class="flash {{ category }}">{{ message }}</div>
+            {% endfor %}
+        </div>
+        {% endif %}
+        {% endwith %}
+
+        {% if sites %}
+        <div class="sites-grid">
+            {% for s in sites %}
+            <div class="site-card">
+                <div class="site-id">
+                    <a href="/h/{{s[0]}}/" target="_blank">{{ s[0] }} ↗</a>
+                </div>
+                <div class="site-stats">
+                    <div class="stat">
+                        <span class="stat-label">Views</span>
+                        <span class="stat-value views">{{ s[2] }}</span>
+                    </div>
+                    <div class="stat">
+                        <span class="stat-label">Expires</span>
+                        <span class="stat-value">{{ s[3] or "Never" }}</span>
+                    </div>
+                </div>
+                <div class="site-actions">
+                    <a href="/h/{{s[0]}}/" target="_blank" class="action-btn view">View</a>
+                    <a href="/manage/{{s[0]}}" class="action-btn edit">Manage</a>
+                    <a href="/delete/{{s[0]}}" onclick="return confirm('Delete this site? This cannot be undone.')"
+                        class="action-btn delete">Delete</a>
+                </div>
+            </div>
+            {% endfor %}
+        </div>
+        {% else %}
+        <div class="empty-state">
+            <div class="empty-state-icon">📭</div>
+            <h2>No sites yet</h2>
+            <p>Upload your first site to get started</p>
+            <a href="/upload" class="upload-btn">
+                <span>🚀</span> Upload Site
+            </a>
+        </div>
+        {% endif %}
+    </div>
+</body>
+
+</html>

templates/rename_file.html

@@ -0,0 +1,333 @@
+<!DOCTYPE html>
+<html>
+
+<head>
+    <title>Rename File - {{site_id}} | h by Xlnk</title>
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <link
+        href="https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&family=Fira+Code:wght@400;500&display=swap"
+        rel="stylesheet">
+    <style>
+        * {
+            margin: 0;
+            padding: 0;
+            box-sizing: border-box;
+        }
+
+        body {
+            background: linear-gradient(135deg, #0f0f23 0%, #1a1a3e 50%, #0d0d1f 100%);
+            min-height: 100vh;
+            font-family: 'Inter', system-ui, sans-serif;
+            color: #e2e8f0;
+        }
+
+        .navbar {
+            background: rgba(15, 23, 42, 0.9);
+            backdrop-filter: blur(20px);
+            border-bottom: 1px solid rgba(99, 102, 241, 0.2);
+            padding: 16px 30px;
+            display: flex;
+            justify-content: space-between;
+            align-items: center;
+            position: sticky;
+            top: 0;
+            z-index: 100;
+        }
+
+        .nav-brand {
+            font-size: 1.5rem;
+            font-weight: 700;
+            background: linear-gradient(135deg, #818cf8, #c084fc);
+            -webkit-background-clip: text;
+            -webkit-text-fill-color: transparent;
+            background-clip: text;
+            text-decoration: none;
+        }
+
+        .nav-links {
+            display: flex;
+            gap: 20px;
+            align-items: center;
+        }
+
+        .nav-links a {
+            color: #94a3b8;
+            text-decoration: none;
+            font-size: 0.9rem;
+            transition: color 0.3s ease;
+        }
+
+        .nav-links a:hover {
+            color: #818cf8;
+        }
+
+        .container {
+            max-width: 600px;
+            margin: 0 auto;
+            padding: 40px 20px;
+        }
+
+        .breadcrumb {
+            margin-bottom: 20px;
+            color: #64748b;
+        }
+
+        .breadcrumb a {
+            color: #818cf8;
+            text-decoration: none;
+            transition: color 0.3s ease;
+        }
+
+        .breadcrumb a:hover {
+            color: #a5b4fc;
+        }
+
+        .page-header {
+            margin-bottom: 30px;
+        }
+
+        .page-header h1 {
+            font-size: 1.8rem;
+            font-weight: 700;
+            background: linear-gradient(135deg, #818cf8, #c084fc, #f472b6);
+            -webkit-background-clip: text;
+            -webkit-text-fill-color: transparent;
+            background-clip: text;
+        }
+
+        .page-header p {
+            color: #94a3b8;
+            margin-top: 8px;
+        }
+
+        .flash-messages {
+            margin-bottom: 20px;
+        }
+
+        .flash {
+            padding: 12px 16px;
+            border-radius: 12px;
+            font-size: 0.9rem;
+            margin-bottom: 10px;
+            animation: slideIn 0.3s ease;
+        }
+
+        @keyframes slideIn {
+            from {
+                opacity: 0;
+                transform: translateY(-10px);
+            }
+
+            to {
+                opacity: 1;
+                transform: translateY(0);
+            }
+        }
+
+        .flash.error {
+            background: rgba(239, 68, 68, 0.15);
+            border: 1px solid rgba(239, 68, 68, 0.3);
+            color: #fca5a5;
+        }
+
+        .flash.success {
+            background: rgba(34, 197, 94, 0.15);
+            border: 1px solid rgba(34, 197, 94, 0.3);
+            color: #86efac;
+        }
+
+        .card {
+            background: rgba(15, 23, 42, 0.8);
+            backdrop-filter: blur(20px);
+            border: 1px solid rgba(99, 102, 241, 0.15);
+            border-radius: 16px;
+            padding: 30px;
+        }
+
+        .current-name {
+            background: rgba(30, 41, 59, 0.6);
+            border-radius: 12px;
+            padding: 16px 20px;
+            margin-bottom: 24px;
+        }
+
+        .current-name-label {
+            color: #64748b;
+            font-size: 0.8rem;
+            text-transform: uppercase;
+            letter-spacing: 0.5px;
+            margin-bottom: 6px;
+        }
+
+        .current-name-value {
+            color: #f1f5f9;
+            font-family: 'Fira Code', monospace;
+            font-size: 1rem;
+        }
+
+        .form-group {
+            margin-bottom: 24px;
+        }
+
+        label {
+            display: block;
+            color: #e2e8f0;
+            font-size: 0.9rem;
+            font-weight: 500;
+            margin-bottom: 10px;
+        }
+
+        input[type="text"] {
+            width: 100%;
+            padding: 14px 16px;
+            background: rgba(30, 41, 59, 0.8);
+            border: 1px solid rgba(148, 163, 184, 0.2);
+            border-radius: 12px;
+            color: #f1f5f9;
+            font-size: 1rem;
+            font-family: 'Fira Code', monospace;
+            transition: all 0.3s ease;
+        }
+
+        input[type="text"]:focus {
+            outline: none;
+            border-color: #818cf8;
+            box-shadow: 0 0 0 3px rgba(129, 140, 248, 0.15);
+        }
+
+        input::placeholder {
+            color: #64748b;
+        }
+
+        .hint {
+            color: #64748b;
+            font-size: 0.8rem;
+            margin-top: 8px;
+        }
+
+        .actions {
+            display: flex;
+            gap: 12px;
+            margin-top: 30px;
+        }
+
+        .btn {
+            padding: 12px 24px;
+            border-radius: 12px;
+            border: none;
+            cursor: pointer;
+            font-weight: 600;
+            font-family: inherit;
+            font-size: 0.95rem;
+            transition: all 0.3s ease;
+            text-decoration: none;
+            display: inline-flex;
+            align-items: center;
+            gap: 8px;
+        }
+
+        .btn-primary {
+            background: linear-gradient(135deg, #6366f1, #8b5cf6);
+            color: white;
+        }
+
+        .btn-primary:hover {
+            transform: translateY(-2px);
+            box-shadow: 0 10px 30px rgba(99, 102, 241, 0.4);
+        }
+
+        .btn-secondary {
+            background: rgba(100, 116, 139, 0.2);
+            border: 1px solid rgba(100, 116, 139, 0.3);
+            color: #94a3b8;
+        }
+
+        .btn-secondary:hover {
+            background: rgba(100, 116, 139, 0.3);
+            color: #e2e8f0;
+        }
+
+        .glow-orb {
+            position: fixed;
+            width: 400px;
+            height: 400px;
+            border-radius: 50%;
+            filter: blur(100px);
+            opacity: 0.15;
+            pointer-events: none;
+            z-index: -1;
+        }
+
+        .orb-1 {
+            background: #6366f1;
+            top: 20%;
+            right: -100px;
+        }
+
+        .orb-2 {
+            background: #c084fc;
+            bottom: 20%;
+            left: -100px;
+        }
+    </style>
+</head>
+
+<body>
+    <div class="glow-orb orb-1"></div>
+    <div class="glow-orb orb-2"></div>
+
+    <nav class="navbar">
+        <a href="/my-sites" class="nav-brand">h by Xlnk</a>
+        <div class="nav-links">
+            <a href="/files/{{site_id}}">Back to Files</a>
+            <a href="/my-sites">My Sites</a>
+        </div>
+    </nav>
+
+    <div class="container">
+        <div class="breadcrumb">
+            <a href="/my-sites">My Sites</a> / <a href="/manage/{{site_id}}">{{site_id}}</a> / <a
+                href="/files/{{site_id}}">Files</a> /
+            <strong>Rename</strong>
+        </div>
+
+        <div class="page-header">
+            <h1>✏️ Rename File</h1>
+            <p>Change the name or location of this file</p>
+        </div>
+
+        {% with messages = get_flashed_messages(with_categories=true) %}
+        {% if messages %}
+        <div class="flash-messages">
+            {% for category, message in messages %}
+            <div class="flash {{ category }}">{{ message }}</div>
+            {% endfor %}
+        </div>
+        {% endif %}
+        {% endwith %}
+
+        <div class="card">
+            <div class="current-name">
+                <div class="current-name-label">Current Name</div>
+                <div class="current-name-value">{{file}}</div>
+            </div>
+
+            <form method="post">
+                <div class="form-group">
+                    <label for="new_name">New Name</label>
+                    <input type="text" id="new_name" name="new_name" placeholder="Enter new filename"
+                        value="{{ new_name or file }}" required autofocus>
+                    <p class="hint">💡 You can move the file to a subfolder by including a path like "css/styles.css"
+                    </p>
+                </div>
+
+                <div class="actions">
+                    <a href="/files/{{site_id}}" class="btn btn-secondary">Cancel</a>
+                    <button type="submit" class="btn btn-primary">📝 Rename File</button>
+                </div>
+            </form>
+        </div>
+    </div>
+</body>
+
+</html>

templates/upload.html

@@ -59,8 +59,8 @@
             color: #818cf8;
         }
 
-        .nav-links .logout {
-            color: #f87171;
+        .nav-links a.active {
+            color: #818cf8;
         }
 
         .container {
@@ -271,11 +271,10 @@
     <div class="glow-orb orb-2"></div>
 
     <nav class="navbar">
-        <a href="/dashboard" class="nav-brand">h by Xlnk</a>
+        <a href="/my-sites" class="nav-brand">h by Xlnk</a>
         <div class="nav-links">
-            <a href="/dashboard">Dashboard</a>
-            <a href="/upload">Upload</a>
-            <a href="/logout" class="logout">Logout</a>
+            <a href="/my-sites">My Sites</a>
+            <a href="/upload" class="active">Upload</a>
         </div>
     </nav>
 

uploads/1/index.html

@@ -0,0 +1,1592 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>Xlnk AI Chat</title>
+    <style>
+        /* Green Animated Profile Styles */
+        .message.assistant .avatar {
+            background: linear-gradient(135deg, #10a37f 0%, #19c37d 100%);
+            border: 2px solid #10a37f;
+            box-shadow: 
+                0 0 10px #10a37f,
+                0 0 20px #10a37f,
+                inset 0 0 10px rgba(16, 163, 127, 0.3);
+            animation: avatar-glow 3s infinite alternate, subtle-float 4s infinite ease-in-out;
+            overflow: hidden;
+            position: relative;
+        }
+
+        .message.assistant .avatar::before {
+            content: '';
+            position: absolute;
+            top: -50%;
+            left: -50%;
+            width: 200%;
+            height: 200%;
+            background: linear-gradient(
+                45deg,
+                transparent 30%,
+                rgba(16, 163, 127, 0.3) 50%,
+                transparent 70%
+            );
+            animation: shine 3s infinite linear;
+        }
+
+        @keyframes avatar-glow {
+            0% {
+                box-shadow: 
+                    0 0 10px #10a37f,
+                    0 0 20px #10a37f,
+                    inset 0 0 10px rgba(16, 163, 127, 0.3);
+            }
+            100% {
+                box-shadow: 
+                    0 0 15px #10a37f,
+                    0 0 30px #10a37f,
+                    0 0 40px #10a37f,
+                    inset 0 0 15px rgba(16, 163, 127, 0.5);
+            }
+        }
+
+        @keyframes subtle-float {
+            0%, 100% { transform: translateY(0px); }
+            50% { transform: translateY(-5px); }
+        }
+
+        @keyframes shine {
+            0% { transform: translateX(-100%) translateY(-100%) rotate(45deg); }
+            100% { transform: translateX(100%) translateY(100%) rotate(45deg); }
+        }
+
+        .message.assistant .avatar img {
+            width: 100%;
+            height: 100%;
+            object-fit: cover;
+            border-radius: 4px;
+            position: relative;
+            z-index: 1;
+            animation: image-pulse 2s infinite;
+        }
+
+        @keyframes image-pulse {
+            0%, 100% { opacity: 0.95; }
+            50% { opacity: 1; }
+        }
+
+        /* When AI is typing/thinking, enhance the animation */
+        .message.assistant.thinking .avatar {
+            animation: avatar-glow 1.5s infinite alternate, subtle-float 3s infinite ease-in-out;
+        }
+
+        .message.assistant.thinking .avatar::before {
+            animation: shine 1.5s infinite linear;
+        }
+
+        /* Typing Cursor Styles - Centered Image */
+        .typing-cursor {
+            display: inline-flex;
+            align-items: center;
+            justify-content: center;
+            width: 20px;
+            height: 20px;
+            border-radius: 50%;
+            animation: cursor-blink 1s infinite;
+            position: relative;
+            overflow: hidden;
+            border: 2px solid #10a37f;
+            box-shadow: 
+                0 0 6px #10a37f,
+                0 0 12px #10a37f,
+                inset 0 0 6px rgba(16, 163, 127, 0.5);
+            vertical-align: middle;
+            margin-left: 4px;
+            margin-bottom: -2px; /* Fine adjustment for vertical centering */
+        }
+
+        .typing-cursor img {
+            width: 100%;
+            height: 100%;
+            object-fit: cover;
+            border-radius: 50%;
+            display: block;
+            position: relative;
+            z-index: 2;
+        }
+
+        @keyframes cursor-blink {
+            0%, 50% { opacity: 1; }
+            51%, 100% { opacity: 0.3; }
+        }
+
+        .typing-cursor::before {
+            content: '';
+            position: absolute;
+            top: -50%;
+            left: -50%;
+            width: 200%;
+            height: 200%;
+            background: linear-gradient(
+                45deg,
+                transparent 30%,
+                rgba(16, 163, 127, 0.4) 50%,
+                transparent 70%
+            );
+            animation: cursor-shine 2s infinite linear;
+            z-index: 1;
+        }
+
+        @keyframes cursor-shine {
+            0% { transform: translateX(-100%) translateY(-100%) rotate(45deg); }
+            100% { transform: translateX(100%) translateY(100%) rotate(45deg); }
+        }
+
+        /* Enhanced cursor animation when typing */
+        .message.assistant.thinking .typing-cursor {
+            animation: cursor-blink 0.8s infinite, cursor-pulse 1.5s infinite;
+        }
+
+        @keyframes cursor-pulse {
+            0%, 100% { transform: scale(1); }
+            50% { transform: scale(1.1); }
+        }
+
+        /* Ensure proper text alignment */
+        .message-content {
+            position: relative;
+            display: inline-block;
+            line-height: 1.6;
+        }
+
+        .typing-indicator {
+            display: inline-block;
+            width: 8px;
+            height: 8px;
+            border-radius: 50%;
+            background: #9ca3af;
+            animation: pulse 1.4s infinite;
+            vertical-align: middle;
+        }
+
+        @keyframes pulse {
+            0%, 100% {
+                opacity: 0.3;
+            }
+            50% {
+                opacity: 1;
+            }
+        }
+
+        /* Existing styles remain unchanged */
+        * {
+            margin: 0;
+            padding: 0;
+            box-sizing: border-box;
+        }
+
+        body {
+            font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Roboto', 'Oxygen', 'Ubuntu', sans-serif;
+            background: #1a1a1a;
+            height: 100vh;
+            display: flex;
+            flex-direction: column;
+        }
+
+        .header {
+            background: #2a2a2a;
+            border-bottom: 1px solid #3a3a3a;
+            padding: 12px 20px;
+            display: flex;
+            align-items: center;
+            justify-content: space-between;
+            box-shadow: 0 1px 3px rgba(0,0,0,0.3);
+        }
+
+        .header h1 {
+            font-size: 18px;
+            font-weight: 600;
+            color: #e5e5e5;
+        }
+
+        .model-selector {
+            display: flex;
+            align-items: center;
+            gap: 8px;
+        }
+
+        .model-selector label {
+            font-size: 13px;
+            color: #9ca3af;
+            font-weight: 500;
+        }
+
+        .model-selector select {
+            padding: 6px 12px;
+            border: 1px solid #4a4a4a;
+            border-radius: 6px;
+            font-size: 13px;
+            background: #3a3a3a;
+            color: #e5e5e5;
+            cursor: pointer;
+            outline: none;
+            transition: border-color 0.2s;
+        }
+
+        .model-selector select:hover {
+            border-color: #6a6a6a;
+        }
+
+        .model-selector select:focus {
+            border-color: #10a37f;
+        }
+
+        .sidebar {
+            position: fixed;
+            left: 0;
+            top: 0;
+            width: 260px;
+            height: 100vh;
+            background: #2a2a2a;
+            border-right: 1px solid #3a3a3a;
+            display: flex;
+            flex-direction: column;
+            transition: transform 0.3s;
+            z-index: 10;
+        }
+
+        .sidebar-header {
+            padding: 16px;
+            border-bottom: 1px solid #3a3a3a;
+            display: flex;
+            align-items: center;
+            gap: 8px;
+        }
+
+        .new-chat-btn {
+            flex: 1;
+            padding: 10px;
+            background: #3a3a3a;
+            color: #e5e5e5;
+            border: 1px solid #4a4a4a;
+            border-radius: 6px;
+            font-size: 13px;
+            cursor: pointer;
+            transition: background 0.2s;
+        }
+
+        .new-chat-btn:hover {
+            background: #4a4a4a;
+        }
+
+        .chat-history {
+            flex: 1;
+            overflow-y: auto;
+            padding: 8px;
+        }
+
+        .sidebar-footer {
+            padding: 12px;
+            border-top: 1px solid #3a3a3a;
+        }
+
+        .clear-all-btn {
+            width: 100%;
+            padding: 10px;
+            background: transparent;
+            color: #ef4444;
+            border: 1px solid #ef4444;
+            border-radius: 6px;
+            font-size: 13px;
+            cursor: pointer;
+            transition: all 0.2s;
+        }
+
+        .clear-all-btn:hover {
+            background: #ef4444;
+            color: white;
+        }
+
+        .history-item {
+            padding: 10px 12px;
+            margin-bottom: 4px;
+            border-radius: 6px;
+            cursor: pointer;
+            font-size: 13px;
+            color: #9ca3af;
+            background: transparent;
+            transition: background 0.2s;
+            display: flex;
+            align-items: center;
+            justify-content: space-between;
+            gap: 8px;
+        }
+
+        .history-item:hover {
+            background: #3a3a3a;
+        }
+
+        .history-item.active {
+            background: #3a3a3a;
+            color: #e5e5e5;
+        }
+
+        .history-item-title {
+            flex: 1;
+            white-space: nowrap;
+            overflow: hidden;
+            text-overflow: ellipsis;
+        }
+
+        .delete-chat-btn {
+            padding: 4px 8px;
+            background: transparent;
+            color: #ef4444;
+            border: none;
+            border-radius: 4px;
+            font-size: 12px;
+            cursor: pointer;
+            opacity: 0;
+            transition: all 0.2s;
+        }
+
+        .history-item:hover .delete-chat-btn {
+            opacity: 1;
+        }
+
+        .delete-chat-btn:hover {
+            background: #ef4444;
+            color: white;
+        }
+
+        .close-sidebar-btn {
+            background: #3a3a3a;
+            color: #e5e5e5;
+            border: 1px solid #4a4a4a;
+            padding: 10px 14px;
+            border-radius: 6px;
+            font-size: 18px;
+            font-weight: bold;
+            cursor: pointer;
+            transition: all 0.2s;
+            line-height: 1;
+            display: flex;
+            align-items: center;
+            justify-content: center;
+        }
+
+        .close-sidebar-btn:hover {
+            background: #ef4444;
+            border-color: #ef4444;
+        }
+
+        .main-content {
+            margin-left: 260px;
+            display: flex;
+            flex-direction: column;
+            height: 100vh;
+        }
+
+        .toggle-sidebar {
+            display: none;
+            position: fixed;
+            top: 16px;
+            left: 16px;
+            background: #3a3a3a;
+            border: 1px solid #4a4a4a;
+            color: #e5e5e5;
+            padding: 8px 12px;
+            border-radius: 6px;
+            cursor: pointer;
+            z-index: 5;
+        }
+
+        @media (max-width: 768px) {
+            .sidebar {
+                transform: translateX(-100%);
+                width: 100%;
+                max-width: 300px;
+            }
+
+            .sidebar.open {
+                transform: translateX(0);
+            }
+
+            .main-content {
+                margin-left: 0;
+            }
+
+            .toggle-sidebar {
+                display: block;
+            }
+
+            .header {
+                padding-left: 60px;
+            }
+
+            .header h1 {
+                font-size: 16px;
+            }
+
+            .model-selector label {
+                display: none;
+            }
+
+            .search-controls {
+                flex-direction: column;
+                align-items: flex-start;
+            }
+
+            .search-mode-badge {
+                font-size: 10px;
+            }
+        }
+
+        .sidebar-overlay {
+            display: none;
+            position: fixed;
+            top: 0;
+            left: 0;
+            right: 0;
+            bottom: 0;
+            background: rgba(0,0,0,0.5);
+            z-index: 9;
+        }
+
+        .sidebar-overlay.active {
+            display: block;
+        }
+
+        .chat-container {
+            flex: 1;
+            overflow-y: auto;
+            padding: 20px;
+            padding-bottom: 160px;
+            display: flex;
+            flex-direction: column;
+            gap: 16px;
+        }
+
+        .message {
+            display: flex;
+            gap: 12px;
+            max-width: 800px;
+            width: 100%;
+            animation: fadeIn 0.3s ease-in;
+        }
+
+        @keyframes fadeIn {
+            from {
+                opacity: 0;
+                transform: translateY(10px);
+            }
+            to {
+                opacity: 1;
+                transform: translateY(0);
+            }
+        }
+
+        .message.user {
+            align-self: flex-end;
+            flex-direction: row-reverse;
+        }
+
+        .message.assistant {
+            align-self: flex-start;
+        }
+
+        .avatar {
+            width: 32px;
+            height: 32px;
+            border-radius: 50%;
+            display: flex;
+            align-items: center;
+            justify-content: center;
+            font-weight: 600;
+            font-size: 14px;
+            flex-shrink: 0;
+            overflow: hidden;
+        }
+
+        .message.user .avatar {
+            background: #19c37d;
+            color: white;
+            border: 2px solid #10a37f;
+            box-shadow: 0 0 8px #10a37f;
+        }
+
+        .message-content {
+            background: #2a2a2a;
+            padding: 12px 16px;
+            border-radius: 12px;
+            line-height: 1.6;
+            color: #e5e5e5;
+            box-shadow: 0 1px 2px rgba(0,0,0,0.3);
+            word-wrap: break-word;
+        }
+
+        .message.user .message-content {
+            background: #4a4a4a;
+            color: white;
+        }
+
+        .message.assistant .message-content {
+            background: #2a2a2a;
+        }
+
+        .message-content pre {
+            background: #1a1a1a;
+            padding: 12px;
+            border-radius: 6px;
+            overflow-x: auto;
+            margin: 8px 0;
+            border: 1px solid #3a3a3a;
+        }
+
+        .message-content code {
+            background: #1a1a1a;
+            padding: 2px 6px;
+            border-radius: 4px;
+            font-family: 'Courier New', monospace;
+            font-size: 13px;
+            color: #10a37f;
+        }
+
+        .message-content pre code {
+            background: transparent;
+            padding: 0;
+            color: #e5e5e5;
+        }
+
+        .message-content a {
+            color: #10a37f;
+            text-decoration: none;
+            border-bottom: 1px solid transparent;
+            transition: border-color 0.2s;
+        }
+
+        .message-content a:hover {
+            border-bottom-color: #10a37f;
+        }
+
+        .search-results-preview {
+            background: #1a1a1a;
+            border: 1px solid #3a3a3a;
+            border-radius: 8px;
+            padding: 12px;
+            margin: 8px 0;
+            font-size: 13px;
+        }
+
+        .search-results-preview .result-item {
+            padding: 8px 0;
+            border-bottom: 1px solid #2a2a2a;
+        }
+
+        .search-results-preview .result-item:last-child {
+            border-bottom: none;
+        }
+
+        .search-results-preview .result-title {
+            color: #10a37f;
+            font-weight: 500;
+            margin-bottom: 4px;
+        }
+
+        .search-results-preview .result-snippet {
+            color: #9ca3af;
+            font-size: 12px;
+            line-height: 1.4;
+        }
+
+        .search-results-preview .result-url {
+            color: #6a6a6a;
+            font-size: 11px;
+            margin-top: 4px;
+        }
+
+        .search-results-preview .result-url a {
+            color: #6a6a6a;
+        }
+
+        .search-results-preview .result-url a:hover {
+            color: #10a37f;
+        }
+
+        .input-container {
+            position: fixed;
+            bottom: 20px;
+            left: 280px;
+            right: 20px;
+            background: #2a2a2a;
+            border: 1px solid #3a3a3a;
+            border-radius: 16px;
+            padding: 16px 20px;
+            box-shadow: 0 4px 20px rgba(0,0,0,0.4);
+            z-index: 5;
+        }
+
+        @media (max-width: 768px) {
+            .input-container {
+                left: 20px;
+            }
+        }
+
+        .input-wrapper {
+            max-width: 800px;
+            margin: 0 auto;
+            display: flex;
+            gap: 8px;
+            flex-wrap: wrap;
+        }
+
+        .search-controls {
+            width: 100%;
+            display: flex;
+            align-items: center;
+            justify-content: space-between;
+            gap: 12px;
+            margin-bottom: 12px;
+        }
+
+        .web-search-toggle {
+            display: flex;
+            align-items: center;
+            gap: 10px;
+            padding: 8px 14px;
+            background: #3a3a3a;
+            border: 1px solid #4a4a4a;
+            border-radius: 24px;
+            cursor: pointer;
+            transition: all 0.2s;
+        }
+
+        .web-search-toggle:hover {
+            border-color: #5a5a5a;
+        }
+
+        .web-search-toggle.active {
+            background: #10a37f20;
+            border-color: #10a37f;
+        }
+
+        .web-search-toggle .toggle-switch {
+            width: 36px;
+            height: 20px;
+            background: #4a4a4a;
+            border-radius: 10px;
+            position: relative;
+            transition: all 0.2s;
+        }
+
+        .web-search-toggle.active .toggle-switch {
+            background: #10a37f;
+        }
+
+        .web-search-toggle .toggle-switch::after {
+            content: '';
+            position: absolute;
+            width: 16px;
+            height: 16px;
+            background: white;
+            border-radius: 50%;
+            top: 2px;
+            left: 2px;
+            transition: all 0.2s;
+        }
+
+        .web-search-toggle.active .toggle-switch::after {
+            left: 18px;
+        }
+
+        .web-search-toggle .toggle-label {
+            font-size: 13px;
+            color: #9ca3af;
+            font-weight: 500;
+        }
+
+        .web-search-toggle.active .toggle-label {
+            color: #10a37f;
+        }
+
+        .web-search-toggle .search-icon {
+            font-size: 14px;
+        }
+
+        .search-mode-badge {
+            display: none;
+            padding: 6px 12px;
+            background: #10a37f;
+            color: white;
+            border-radius: 16px;
+            font-size: 11px;
+            font-weight: 600;
+            text-transform: uppercase;
+            letter-spacing: 0.5px;
+        }
+
+        .search-mode-badge.active {
+            display: flex;
+            align-items: center;
+            gap: 6px;
+        }
+
+        .search-indicator {
+            display: none;
+            align-items: center;
+            gap: 8px;
+            padding: 10px 16px;
+            background: linear-gradient(90deg, #10a37f20, #10a37f10);
+            border: 1px solid #10a37f;
+            border-radius: 12px;
+            font-size: 13px;
+            color: #10a37f;
+            margin-bottom: 12px;
+            animation: pulse-border 1.5s infinite;
+        }
+
+        @keyframes pulse-border {
+            0%, 100% { border-color: #10a37f; }
+            50% { border-color: #10a37f80; }
+        }
+
+        .search-indicator .spinner {
+            width: 16px;
+            height: 16px;
+            border: 2px solid #10a37f40;
+            border-top-color: #10a37f;
+            border-radius: 50%;
+            animation: spin 0.8s linear infinite;
+        }
+
+        @keyframes spin {
+            to { transform: rotate(360deg); }
+        }
+
+        .search-indicator.active {
+            display: flex;
+        }
+
+        .input-row {
+            display: flex;
+            gap: 8px;
+            flex: 1;
+            width: 100%;
+        }
+
+        #messageInput {
+            flex: 1;
+            padding: 12px 16px;
+            border: 1px solid #4a4a4a;
+            border-radius: 8px;
+            font-size: 14px;
+            font-family: inherit;
+            outline: none;
+            resize: none;
+            min-height: 48px;
+            max-height: 200px;
+            transition: border-color 0.2s;
+            background: #3a3a3a;
+            color: #e5e5e5;
+        }
+
+        #messageInput:focus {
+            border-color: #10a37f;
+        }
+
+        #messageInput:disabled {
+            background: #2a2a2a;
+            cursor: not-allowed;
+        }
+
+        #messageInput::placeholder {
+            color: #6a6a6a;
+        }
+
+        button {
+            padding: 12px 20px;
+            border: none;
+            border-radius: 8px;
+            font-size: 14px;
+            font-weight: 600;
+            cursor: pointer;
+            transition: all 0.2s;
+            outline: none;
+        }
+
+        #sendBtn {
+            background: #10a37f;
+            color: white;
+        }
+
+        #sendBtn:hover:not(:disabled) {
+            background: #0e8f6f;
+        }
+
+        #sendBtn:disabled {
+            background: #d1d5db;
+            cursor: not-allowed;
+        }
+
+        #stopBtn {
+            background: #ef4444;
+            color: white;
+            display: none;
+        }
+
+        #stopBtn:hover {
+            background: #dc2626;
+        }
+
+        .empty-state {
+            text-align: center;
+            color: #6a6a6a;
+            margin-top: 100px;
+        }
+
+        .empty-state h2 {
+            font-size: 24px;
+            margin-bottom: 8px;
+            color: #e5e5e5;
+        }
+
+        .empty-state p {
+            font-size: 14px;
+        }
+
+        .error-message {
+            background: #3a1a1a;
+            color: #ff6b6b;
+            padding: 12px 16px;
+            border-radius: 8px;
+            margin: 8px 0;
+            font-size: 14px;
+            border: 1px solid #5a2a2a;
+        }
+    </style>
+
+<link rel="manifest" href="manifest.json">
+<meta name="theme-color" content="#10a37f">
+<link rel="icon" href="icon.svg" type="image/svg+xml">
+
+</head>
+<body>
+    <button class="toggle-sidebar" id="toggleSidebar">☰</button>
+    <div class="sidebar-overlay" id="sidebarOverlay"></div>
+
+    <div class="sidebar" id="sidebar">
+        <div class="sidebar-header">
+            <button class="new-chat-btn" id="newChatBtn">+ New Chat</button>
+            <button class="close-sidebar-btn" id="closeSidebarBtn">&#10005;</button>
+        </div>
+        <div class="chat-history" id="chatHistory">
+            <!-- Chat history items will be added here -->
+        </div>
+        <div class="sidebar-footer">
+            <button class="clear-all-btn" id="clearAllBtn">Clear All Chats</button>
+        </div>
+    </div>
+
+    <div class="main-content">
+        <div class="header">
+            <h1>Xlnk AI</h1>
+            <div class="model-selector">
+                <label for="modelSelect">Model:</label>
+                <select id="modelSelect">
+                    <option value="https://xlnk-350m.hf.space/v1/chat/completions">Xlnkai 350M (Fastest)</option>
+                    <option value="https://xlnk-ai.hf.space/v1/chat/completions" selected>Xlnkai 700M (Balanced)</option>
+                    <option value="https://xlnk-corelm.hf.space/v1/chat/completions">Xlnkai 3B (Best)</option>
+                </select>
+            </div>
+        </div>
+
+        <div class="chat-container" id="chatContainer">
+            <div class="empty-state">
+                <h2>Welcome to Xlnk AI</h2>
+                <p>Ask me anything to get started</p>
+            </div>
+        </div>
+
+        <div class="input-container">
+            <div class="input-wrapper">
+                <div class="search-controls">
+                    <div class="web-search-toggle" id="webSearchToggle">
+                        <span class="search-icon">&#128269;</span>
+                        <div class="toggle-switch"></div>
+                        <span class="toggle-label">Web Search</span>
+                    </div>
+                    <div class="search-mode-badge" id="searchModeBadge">
+                        <span>&#127760;</span> Web Only Mode
+                    </div>
+                </div>
+                <div class="search-indicator" id="searchIndicator">
+                    <div class="spinner"></div>
+                    <span>Searching the web for real-time information...</span>
+                </div>
+                <div class="input-row">
+                    <textarea id="messageInput" placeholder="Type your message..." rows="1"></textarea>
+                    <button id="sendBtn">Send</button>
+                    <button id="stopBtn">Stop</button>
+                </div>
+            </div>
+        </div>
+    </div>
+
+    <script>
+        const chatContainer = document.getElementById('chatContainer');
+        const messageInput = document.getElementById('messageInput');
+        const sendBtn = document.getElementById('sendBtn');
+        const stopBtn = document.getElementById('stopBtn');
+        const modelSelect = document.getElementById('modelSelect');
+        const webSearchToggle = document.getElementById('webSearchToggle');
+        const searchModeBadge = document.getElementById('searchModeBadge');
+        const chatHistoryEl = document.getElementById('chatHistory');
+        const newChatBtn = document.getElementById('newChatBtn');
+        const toggleSidebarBtn = document.getElementById('toggleSidebar');
+        const closeSidebarBtn = document.getElementById('closeSidebarBtn');
+        const sidebar = document.getElementById('sidebar');
+        const searchIndicator = document.getElementById('searchIndicator');
+        const clearAllBtn = document.getElementById('clearAllBtn');
+        const sidebarOverlay = document.getElementById('sidebarOverlay');
+        
+        let webSearchEnabled = false;
+
+        const SYSTEM_PROMPT = "You are Xlnk AI, a fast, lightweight, and helpful AI assistant.\nYou give clear, concise, and accurate answers.\nYou avoid unnecessary verbosity.\nYou explain step by step only when the user asks.\nYou are optimized for low-latency responses on llama.cpp.\nIf unsure, say you are not sure.\nNever hallucinate facts.";
+
+        const SYSTEM_PROMPT_WITH_SEARCH = `You are Xlnk AI operating in WEB SEARCH ONLY MODE.
+
+CRITICAL INSTRUCTIONS:
+- You MUST ONLY use the web search results provided below to answer the user's question.
+- DO NOT use any information from your training data.
+- If the search results don't contain relevant information, clearly state: "The web search did not return relevant results for this query."
+- ALWAYS cite your sources with the exact URL from the search results.
+- Format citations as [Source: URL] at the end of relevant statements.
+- If multiple sources support a fact, cite all of them.
+- Be explicit about what information came from which source.
+- Never make up or hallucinate information not present in the search results.
+
+Your response MUST be based EXCLUSIVELY on the provided web search results.`;
+
+        // Real web search using multiple APIs for best results
+        async function performWebSearch(query) {
+            let results = [];
+            
+            try {
+                // Try Wikipedia API first - most reliable
+                const wikiSearchUrl = `https://en.wikipedia.org/w/api.php?action=query&list=search&srsearch=${encodeURIComponent(query)}&format=json&origin=*&srlimit=3`;
+                const wikiSearchResponse = await fetch(wikiSearchUrl);
+                const wikiSearchData = await wikiSearchResponse.json();
+                
+                if (wikiSearchData.query?.search?.length > 0) {
+                    for (const result of wikiSearchData.query.search) {
+                        const pageUrl = `https://en.wikipedia.org/wiki/${encodeURIComponent(result.title.replace(/ /g, '_'))}`;
+                        results.push({
+                            title: result.title,
+                            snippet: result.snippet.replace(/<[^>]*>/g, ''),
+                            url: pageUrl
+                        });
+                    }
+                }
+
+                // Also try to get a summary for the main topic
+                const wikiSummaryUrl = `https://en.wikipedia.org/api/rest_v1/page/summary/${encodeURIComponent(query)}`;
+                try {
+                    const wikiResponse = await fetch(wikiSummaryUrl);
+                    if (wikiResponse.ok) {
+                        const wikiData = await wikiResponse.json();
+                        if (wikiData.extract && wikiData.type !== 'disambiguation') {
+                            // Add as first result if we got a direct match
+                            results.unshift({
+                                title: wikiData.title || query,
+                                snippet: wikiData.extract,
+                                url: wikiData.content_urls?.desktop?.page || `https://en.wikipedia.org/wiki/${encodeURIComponent(query)}`
+                            });
+                        }
+                    }
+                } catch (e) {
+                    // Silently fail
+                }
+                
+                // Try DuckDuckGo Instant Answer API as additional source
+                try {
+                    const ddgUrl = `https://xlnk-search.hf.space/search?q=${encodeURIComponent(query)}&format=json&no_html=1&skip_disambig=1`;
+                    const ddgResponse = await fetch(ddgUrl);
+                    const ddgData = await ddgResponse.json();
+                    
+                    if (ddgData.Abstract && ddgData.AbstractURL) {
+                        // Check if we don't already have this
+                        const exists = results.some(r => r.url === ddgData.AbstractURL);
+                        if (!exists) {
+                            results.push({
+                                title: ddgData.Heading || 'DuckDuckGo Result',
+                                snippet: ddgData.Abstract,
+                                url: ddgData.AbstractURL
+                            });
+                        }
+                    }
+                    
+                    // Add related topics
+                    if (ddgData.RelatedTopics) {
+                        for (const topic of ddgData.RelatedTopics.slice(0, 3)) {
+                            if (topic.Text && topic.FirstURL) {
+                                const exists = results.some(r => r.url === topic.FirstURL);
+                                if (!exists) {
+                                    results.push({
+                                        title: topic.Text.split(' - ')[0] || 'Related',
+                                        snippet: topic.Text,
+                                        url: topic.FirstURL
+                                    });
+                                }
+                            }
+                        }
+                    }
+                } catch (e) {
+                    // Silently fail
+                }
+
+                // Limit to 6 results max
+                results = results.slice(0, 6);
+                
+            } catch (error) {
+                console.error('Web search error:', error);
+            }
+            
+            return results;
+        }
+
+        // Store last search results for display
+        let lastSearchResults = [];
+
+        function formatSearchResults(results) {
+            lastSearchResults = results;
+            
+            if (results.length === 0) {
+                return "\n[WEB SEARCH RETURNED NO RESULTS]\nPlease inform the user that no web search results were found and you cannot answer this question in Web Search Only mode.\n";
+            }
+            
+            let formatted = "\n========== WEB SEARCH RESULTS (USE ONLY THESE) ==========\n";
+            results.forEach((result, index) => {
+                formatted += `\n--- RESULT ${index + 1} ---\n`;
+                formatted += `Title: ${result.title}\n`;
+                formatted += `Content: ${result.snippet}\n`;
+                if (result.url) {
+                    formatted += `URL: ${result.url}\n`;
+                }
+            });
+            formatted += "\n========== END OF WEB SEARCH RESULTS ==========\n\n";
+            formatted += "REMEMBER: Base your answer EXCLUSIVELY on the above search results. Include clickable links using markdown format [text](url). Cite sources.\n\nUser's question: ";
+            return formatted;
+        }
+
+        function renderSearchResultsPreview(results) {
+            if (results.length === 0) return '';
+            
+            let html = '<div class="search-results-preview"><strong>Sources found:</strong>';
+            results.forEach((result, index) => {
+                html += `<div class="result-item">`;
+                html += `<div class="result-title">${index + 1}. ${escapeHtml(result.title)}</div>`;
+                html += `<div class="result-url"><a href="${escapeHtml(result.url)}" target="_blank" rel="noopener">${escapeHtml(result.url)}</a></div>`;
+                html += `</div>`;
+            });
+            html += '</div>';
+            return html;
+        }
+
+        let conversationHistory = [];
+        let abortController = null;
+        let isGenerating = false;
+        let chatSessions = [];
+        let currentSessionId = null;
+        let currentAssistantMessageDiv = null;
+
+        // Load chat sessions from localStorage
+        function loadChatSessions() {
+            const saved = localStorage.getItem('xlnkChatSessions');
+            if (saved) {
+                chatSessions = JSON.parse(saved);
+                renderChatHistory();
+            }
+        }
+
+        // Save chat sessions to localStorage
+        function saveChatSessions() {
+            localStorage.setItem('xlnkChatSessions', JSON.stringify(chatSessions));
+        }
+
+        // Create new chat session
+        function createNewSession() {
+            const sessionId = Date.now().toString();
+            const session = {
+                id: sessionId,
+                title: 'New Chat',
+                messages: [],
+                createdAt: Date.now()
+            };
+            chatSessions.unshift(session);
+            currentSessionId = sessionId;
+            conversationHistory = [];
+            clearChat();
+            saveChatSessions();
+            renderChatHistory();
+        }
+
+        // Load a chat session
+        function loadSession(sessionId) {
+            const session = chatSessions.find(s => s.id === sessionId);
+            if (session) {
+                currentSessionId = sessionId;
+                conversationHistory = [...session.messages];
+                clearChat();
+                session.messages.forEach(msg => {
+                    addMessage(msg.role, msg.content);
+                });
+                renderChatHistory();
+            }
+        }
+
+        // Update current session
+        function updateCurrentSession() {
+            if (!currentSessionId) {
+                createNewSession();
+            }
+            const session = chatSessions.find(s => s.id === currentSessionId);
+            if (session) {
+                session.messages = [...conversationHistory];
+                if (session.title === 'New Chat' && conversationHistory.length > 0) {
+                    const firstUserMsg = conversationHistory.find(m => m.role === 'user');
+                    if (firstUserMsg) {
+                        session.title = firstUserMsg.content.substring(0, 50) + (firstUserMsg.content.length > 50 ? '...' : '');
+                    }
+                }
+                saveChatSessions();
+                renderChatHistory();
+            }
+        }
+
+        // Delete a chat session
+        function deleteSession(sessionId, event) {
+            event.stopPropagation();
+            
+            const index = chatSessions.findIndex(s => s.id === sessionId);
+            if (index === -1) return;
+            
+            chatSessions.splice(index, 1);
+            saveChatSessions();
+            
+            // If we deleted the current session, switch to another or create new
+            if (sessionId === currentSessionId) {
+                if (chatSessions.length > 0) {
+                    loadSession(chatSessions[0].id);
+                } else {
+                    createNewSession();
+                }
+            } else {
+                renderChatHistory();
+            }
+        }
+
+        // Render chat history sidebar
+        function renderChatHistory() {
+            chatHistoryEl.innerHTML = '';
+            chatSessions.forEach(session => {
+                const item = document.createElement('div');
+                item.className = 'history-item' + (session.id === currentSessionId ? ' active' : '');
+                
+                const title = document.createElement('div');
+                title.className = 'history-item-title';
+                title.textContent = session.title;
+                
+                const deleteBtn = document.createElement('button');
+                deleteBtn.className = 'delete-chat-btn';
+                deleteBtn.textContent = '🗑️';
+                deleteBtn.onclick = (e) => deleteSession(session.id, e);
+                
+                item.appendChild(title);
+                item.appendChild(deleteBtn);
+                item.onclick = () => loadSession(session.id);
+                
+                chatHistoryEl.appendChild(item);
+            });
+        }
+
+        // Clear chat display
+        function clearChat() {
+            chatContainer.innerHTML = '<div class="empty-state"><h2>Welcome to Xlnk AI</h2><p>Ask me anything to get started</p></div>';
+        }
+
+        // Toggle sidebar
+        function openSidebar() {
+            sidebar.classList.add('open');
+            sidebarOverlay.classList.add('active');
+        }
+        
+        function closeSidebar() {
+            sidebar.classList.remove('open');
+            sidebarOverlay.classList.remove('active');
+        }
+        
+        toggleSidebarBtn.addEventListener('click', () => {
+            if (sidebar.classList.contains('open')) {
+                closeSidebar();
+            } else {
+                openSidebar();
+            }
+        });
+
+        // Close sidebar
+        closeSidebarBtn.addEventListener('click', closeSidebar);
+        
+        // Close sidebar when clicking overlay
+        sidebarOverlay.addEventListener('click', closeSidebar);
+
+        // Web search toggle
+        webSearchToggle.addEventListener('click', () => {
+            webSearchEnabled = !webSearchEnabled;
+            webSearchToggle.classList.toggle('active', webSearchEnabled);
+            searchModeBadge.classList.toggle('active', webSearchEnabled);
+            
+            if (webSearchEnabled) {
+                messageInput.placeholder = "Ask anything - I'll search the web for real-time answers...";
+            } else {
+                messageInput.placeholder = "Type your message...";
+            }
+        });
+
+        // New chat button
+        newChatBtn.addEventListener('click', createNewSession);
+
+        // Clear all chats
+        clearAllBtn.addEventListener('click', () => {
+            if (confirm('Are you sure you want to delete all chat history? This cannot be undone.')) {
+                chatSessions = [];
+                localStorage.removeItem('xlnkChatSessions');
+                createNewSession();
+            }
+        });
+
+        // Initialize
+        loadChatSessions();
+        if (chatSessions.length === 0) {
+            createNewSession();
+        } else {
+            currentSessionId = chatSessions[0].id;
+            renderChatHistory();
+        }
+
+        // Auto-resize textarea
+        messageInput.addEventListener('input', function() {
+            this.style.height = 'auto';
+            this.style.height = Math.min(this.scrollHeight, 200) + 'px';
+        });
+
+        // Send on Enter, new line on Shift+Enter
+        messageInput.addEventListener('keydown', function(e) {
+            if (e.key === 'Enter' && !e.shiftKey) {
+                e.preventDefault();
+                sendMessage();
+            }
+        });
+
+        sendBtn.addEventListener('click', sendMessage);
+        stopBtn.addEventListener('click', stopGeneration);
+
+        function clearEmptyState() {
+            const emptyState = chatContainer.querySelector('.empty-state');
+            if (emptyState) {
+                emptyState.remove();
+            }
+        }
+
+        // Simple markdown renderer with link support
+        function renderMarkdown(text, includeCursor = false) {
+            // Remove existing cursor if present
+            text = text.replace(/<span class="typing-cursor"><img[^>]*><\/span>/g, '');
+            
+            // Code blocks
+            text = text.replace(/```(\w+)?\n([\s\S]*?)```/g, (match, lang, code) => {
+                return `<pre><code>${escapeHtml(code.trim())}</code></pre>`;
+            });
+            
+            // Inline code
+            text = text.replace(/`([^`]+)`/g, '<code>$1</code>');
+            
+            // Links [text](url)
+            text = text.replace(/\[([^\]]+)\]\(([^)]+)\)/g, '<a href="$2" target="_blank" rel="noopener">$1</a>');
+            
+            // Plain URLs - make them clickable
+            text = text.replace(/(https?:\/\/[^\s<]+)/g, (match) => {
+                // Don't double-wrap URLs that are already in links
+                if (text.indexOf(`href="${match}"`) !== -1) return match;
+                return `<a href="${match}" target="_blank" rel="noopener">${match}</a>`;
+            });
+            
+            // Bold
+            text = text.replace(/\*\*(.+?)\*\*/g, '<strong>$1</strong>');
+            
+            // Italic
+            text = text.replace(/\*(.+?)\*/g, '<em>$1</em>');
+            
+            // Line breaks
+            text = text.replace(/\n/g, '<br>');
+            
+            // Add typing cursor at the end if requested
+            if (includeCursor && isGenerating) {
+                text += '<span class="typing-cursor"><img src="https://me.xo.je/11.webp" alt="Typing cursor"></span>';
+            }
+            
+            return text;
+        }
+
+        function escapeHtml(text) {
+            const div = document.createElement('div');
+            div.textContent = text;
+            return div.innerHTML;
+        }
+
+        function addMessage(role, content, isStreaming = false) {
+            clearEmptyState();
+
+            const messageDiv = document.createElement('div');
+            messageDiv.className = `message ${role}`;
+            if (role === 'assistant' && isStreaming) {
+                messageDiv.classList.add('thinking');
+            }
+
+            const avatar = document.createElement('div');
+            avatar.className = 'avatar';
+            
+            if (role === 'user') {
+                avatar.textContent = 'U';
+            } else {
+                // Use the provided webp image for AI assistant with green animation
+                const img = document.createElement('img');
+                img.src = 'https://me.xo.je/11.webp';
+                img.alt = 'Xlnk AI';
+                avatar.appendChild(img);
+                
+                // Store reference to current assistant message
+                currentAssistantMessageDiv = messageDiv;
+            }
+
+            const contentDiv = document.createElement('div');
+            contentDiv.className = 'message-content';
+            
+            if (role === 'assistant') {
+                if (isStreaming) {
+                    // Add initial centered typing cursor
+                    contentDiv.innerHTML = '<span class="typing-cursor"><img src="https://me.xo.je/11.webp" alt="Typing cursor"></span>';
+                } else {
+                    contentDiv.innerHTML = renderMarkdown(content);
+                }
+            } else {
+                contentDiv.textContent = content;
+            }
+
+            messageDiv.appendChild(avatar);
+            messageDiv.appendChild(contentDiv);
+            chatContainer.appendChild(messageDiv);
+
+            scrollToBottom();
+
+            return contentDiv;
+        }
+
+        function scrollToBottom() {
+            chatContainer.scrollTop = chatContainer.scrollHeight;
+        }
+
+        function showError(message) {
+            const errorDiv = document.createElement('div');
+            errorDiv.className = 'error-message';
+            errorDiv.textContent = message;
+            chatContainer.appendChild(errorDiv);
+            scrollToBottom();
+        }
+
+        function updateButtonStates(generating) {
+            isGenerating = generating;
+            sendBtn.disabled = generating;
+            messageInput.disabled = generating;
+            sendBtn.style.display = generating ? 'none' : 'block';
+            stopBtn.style.display = generating ? 'block' : 'none';
+            
+            // Update thinking animation
+            if (currentAssistantMessageDiv) {
+                if (generating) {
+                    currentAssistantMessageDiv.classList.add('thinking');
+                } else {
+                    currentAssistantMessageDiv.classList.remove('thinking');
+                }
+            }
+        }
+
+        function stopGeneration() {
+            if (abortController) {
+                abortController.abort();
+                abortController = null;
+            }
+            updateButtonStates(false);
+        }
+
+        async function sendMessage() {
+            const userMessage = messageInput.value.trim();
+            if (!userMessage || isGenerating) return;
+
+            const useWebSearch = webSearchEnabled;
+
+            // Add user message to UI and history
+            addMessage('user', userMessage);
+            conversationHistory.push({
+                role: 'user',
+                content: userMessage
+            });
+
+            // Clear input
+            messageInput.value = '';
+            messageInput.style.height = 'auto';
+
+            updateButtonStates(true);
+
+            // Create abort controller for this request
+            abortController = new AbortController();
+
+            // Perform web search if enabled
+            let searchResults = '';
+            let searchResultsForDisplay = [];
+            if (useWebSearch) {
+                searchIndicator.classList.add('active');
+                const results = await performWebSearch(userMessage);
+                searchResultsForDisplay = results;
+                searchResults = formatSearchResults(results);
+                searchIndicator.classList.remove('active');
+                
+                // Show sources found message
+                if (results.length > 0) {
+                    const sourcesDiv = document.createElement('div');
+                    sourcesDiv.className = 'message assistant';
+                    sourcesDiv.innerHTML = `
+                        <div class="avatar"><img src="https://me.xo.je/11.webp" alt="Xlnk AI"></div>
+                        <div class="message-content">
+                            ${renderSearchResultsPreview(results)}
+                        </div>
+                    `;
+                    clearEmptyState();
+                    chatContainer.appendChild(sourcesDiv);
+                    scrollToBottom();
+                }
+            }
+
+            // Prepare messages with system prompt
+            const systemPrompt = useWebSearch ? SYSTEM_PROMPT_WITH_SEARCH : SYSTEM_PROMPT;
+            let userContent = userMessage;
+            
+            if (useWebSearch) {
+                userContent = searchResults + userMessage;
+            }
+
+            const messages = [
+                { role: 'system', content: systemPrompt },
+                ...conversationHistory.slice(0, -1),
+                { role: 'user', content: userContent }
+            ];
+
+            // Create assistant message container
+            const assistantContent = addMessage('assistant', '', true);
+            let fullResponse = '';
+
+            try {
+                const endpoint = modelSelect.value;
+                const response = await fetch(endpoint, {
+                    method: 'POST',
+                    headers: {
+                        'Content-Type': 'application/json',
+                    },
+                    body: JSON.stringify({
+                        messages: messages,
+                        stream: true,
+                        max_tokens: -1,
+                        temperature: 0,
+                        top_p: 0
+                    }),
+                    signal: abortController.signal
+                });
+
+                if (!response.ok) {
+                    throw new Error(`HTTP error! status: ${response.status}`);
+                }
+
+                const reader = response.body.getReader();
+                const decoder = new TextDecoder();
+
+                while (true) {
+                    const { done, value } = await reader.read();
+                    if (done) break;
+
+                    const chunk = decoder.decode(value, { stream: true });
+                    const lines = chunk.split('\n');
+
+                    for (const line of lines) {
+                        if (line.startsWith('data: ')) {
+                            const data = line.slice(6);
+                            if (data === '[DONE]') continue;
+
+                            try {
+                                const parsed = JSON.parse(data);
+                                const token = parsed.choices?.[0]?.delta?.content;
+                                
+                                if (token) {
+                                    fullResponse += token;
+                                    assistantContent.innerHTML = renderMarkdown(fullResponse, true);
+                                    scrollToBottom();
+                                }
+                            } catch (e) {
+                                // Skip invalid JSON
+                            }
+                        }
+                    }
+                }
+
+                // Remove cursor when done
+                assistantContent.innerHTML = renderMarkdown(fullResponse, false);
+
+                // Add to conversation history
+                conversationHistory.push({
+                    role: 'assistant',
+                    content: fullResponse
+                });
+
+                // Update session
+                updateCurrentSession();
+
+            } catch (error) {
+                if (error.name === 'AbortError') {
+                    assistantContent.innerHTML = renderMarkdown(fullResponse + ' [Stopped]');
+                    conversationHistory.push({
+                        role: 'assistant',
+                        content: fullResponse
+                    });
+                    updateCurrentSession();
+                } else {
+                    console.error('Error:', error);
+                    assistantContent.remove();
+                    showError(`Error: ${error.message}. Please try again.`);
+                    conversationHistory.pop(); // Remove user message if failed
+                }
+            } finally {
+                updateButtonStates(false);
+                abortController = null;
+                currentAssistantMessageDiv = null;
+            }
+        }
+    </script>
+
+<script>
+if ("serviceWorker" in navigator) {
+  window.addEventListener("load", () => {
+    navigator.serviceWorker.register("sw.js");
+  });
+}
+</script>
+
+</body>
+</html>