V .4.1

app.py

@@ -1,3 +1,4 @@
+# ===== Standard Library Imports =====
 import os
 import io
 import json
@@ -5,11 +6,13 @@ import html
 import base64
 import hashlib
 import secrets
-import shutil
 import datetime
 import subprocess
 import platform
+from datetime import UTC
+import sys
 
+# ===== Third-Party Imports =====
 from flask import (
     Flask, render_template, request, jsonify, session,
     redirect, url_for, flash, send_file
@@ -20,9 +23,11 @@ from cryptography.hazmat.primitives.hashes import SHA256
 from cryptography.hazmat.primitives.ciphers.aead import AESGCM
 from cryptography.fernet import Fernet
 
+# ===== Application Configuration =====
 app = Flask(__name__)
 app.secret_key = os.getenv("FLASK_SECRET", os.urandom(24))
 
+# ===== Constants =====
 ADMIN_CRED_FILE = 'admin_creds.json'
 ADMIN_KEY_FILE = 'admin_key.key'
 ADMIN_LOG_FILE = 'admin_logs.enc'
@@ -35,8 +40,9 @@ DEFAULT_SETTINGS = {
     "max_file_size_bytes": 25 * 1024 * 1024 * 1024  # 25GB
 }
 
-# === Settings ===
+# ===== Settings Management =====
 def load_settings():
+    """Load application settings from file or create with defaults."""
     if not os.path.exists(SETTINGS_FILE):
         with open(SETTINGS_FILE, 'w') as f:
             json.dump(DEFAULT_SETTINGS, f)
@@ -51,20 +57,25 @@ MAX_FILE_SIZE_BYTES = settings["max_file_size_bytes"]
 if not os.path.exists(UPLOAD_FOLDER):
     os.makedirs(UPLOAD_FOLDER)
 
-# === Crypto ===
+# ===== Cryptographic Functions =====
 def derive_key(password: str, salt: bytes) -> bytes:
+    """Derive a cryptographic key from password using PBKDF2."""
     return PBKDF2HMAC(algorithm=SHA256(), length=32, salt=salt, iterations=200_000).derive(password.encode())
 
 def hash_password(password: str, salt: bytes) -> str:
+    """Hash a password with salt for secure storage."""
     return base64.urlsafe_b64encode(derive_key(password, salt)).decode()
 
 def simple_encode(text: str) -> str:
+    """Basic Caesar cipher encryption."""
     return ''.join(ALPHABET[(ALPHABET.index(c) + 3) % 26] if c in ALPHABET else c for c in text.lower())
 
 def simple_decode(text: str) -> str:
+    """Basic Caesar cipher decryption."""
     return ''.join(ALPHABET[(ALPHABET.index(c) - 3) % 26] if c in ALPHABET else c for c in text.lower())
 
 def advanced_encrypt(plaintext: str, password: str) -> str:
+    """Encrypt text using AES-GCM with password-derived key."""
     salt = os.urandom(16)
     key = derive_key(password, salt)
     nonce = os.urandom(12)
@@ -72,6 +83,7 @@ def advanced_encrypt(plaintext: str, password: str) -> str:
     return base64.urlsafe_b64encode(salt + nonce + ct).decode()
 
 def advanced_decrypt(token_b64: str, password: str) -> str:
+    """Decrypt text using AES-GCM with password-derived key."""
     try:
         data = base64.urlsafe_b64decode(token_b64.encode())
         salt, nonce, ct = data[:16], data[16:28], data[28:]
@@ -80,8 +92,9 @@ def advanced_decrypt(token_b64: str, password: str) -> str:
     except Exception:
         return "[Error] Invalid password or corrupted data!"
 
-# === Admin Auth ===
+# ===== Admin Authentication =====
 def load_admin_key():
+    """Load or generate admin encryption key."""
     if not os.path.exists(ADMIN_KEY_FILE):
         with open(ADMIN_KEY_FILE, 'wb') as f:
             f.write(Fernet.generate_key())
@@ -89,6 +102,7 @@ def load_admin_key():
         return f.read()
 
 def encrypt_creds(username, password):
+    """Encrypt and store admin credentials."""
     key = load_admin_key()
     cipher = Fernet(key)
     salt = os.urandom(16)
@@ -98,6 +112,7 @@ def encrypt_creds(username, password):
         f.write(cipher.encrypt(data))
 
 def check_creds(username, password):
+    """Verify admin credentials."""
     try:
         key = load_admin_key()
         cipher = Fernet(key)
@@ -111,32 +126,55 @@ def check_creds(username, password):
         return False
 
 def log_admin_event(message: str):
+    """Log admin actions securely."""
     try:
         key = load_admin_key()
         cipher = Fernet(key)
-        timestamp = datetime.datetime.now().strftime("%Y-%m-%d %H:%M:%S")
+        timestamp = datetime.datetime.now(UTC).strftime("%Y-%m-%d %H:%M:%S")
         encrypted = cipher.encrypt(f"[{timestamp}] {message}".encode())
         with open(ADMIN_LOG_FILE, 'ab') as f:
             f.write(encrypted + b"\n")
     except Exception as e:
         print("[ERROR] Failed to write admin log:", e)
 
-# === Text Encryption Route ===
+# ===== File Management =====
+def cleanup_expired_files():
+    """Remove files older than MAX_FILE_AGE_DAYS."""
+    now = datetime.datetime.now(UTC)
+    for fname in os.listdir(UPLOAD_FOLDER):
+        if fname.endswith(".enc") or fname.endswith(".json"):
+            path = os.path.join(UPLOAD_FOLDER, fname)
+            try:
+                file_time = datetime.datetime.fromtimestamp(os.path.getmtime(path), UTC)
+                age = (now - file_time).days
+                if age > MAX_FILE_AGE_DAYS:
+                    os.remove(path)
+                    print(f"[INFO] Deleted expired file: {fname}")
+            except Exception as e:
+                print(f"[ERROR] Could not check/delete file {fname}: {e}")
+
+# ===== Route Handlers =====
 @app.route("/", methods=["GET", "POST"])
 def index():
+    """Main application route handling encryption/decryption and file uploads."""
     if request.method == 'POST':
-        if 'file' in request.files:  # <-- Handling file upload
+        if 'file' in request.files:
+            return handle_file_upload(request)
+        else:
+            return handle_text_operation(request)
+    return render_template("index.html", result="", password="", encryption_type="advanced", settings=settings)
+
+def handle_file_upload(request):
+    """Process file upload and encryption."""
     file = request.files['file']
     enc_password = request.form.get('enc_password')
     pickup_password = request.form.get('pickup_password')
 
     if not file or not enc_password or not pickup_password:
-                flash('Missing fields')
+        return jsonify({"error": "Missing fields"}), 400
-                return redirect(url_for('index'))
 
     if file.content_length and file.content_length > MAX_FILE_SIZE_BYTES:
-                flash(f"File too large! Limit: {MAX_FILE_SIZE_BYTES / (1024**3):.2f} GB")
+        return jsonify({"error": f"File too large! Limit: {MAX_FILE_SIZE_BYTES / (1024**3):.2f} GB"}), 400
-                return redirect(url_for('index'))
 
     filename = secure_filename(file.filename)
     temp_path = os.path.join(UPLOAD_FOLDER, filename)
@@ -159,16 +197,16 @@ def index():
     meta = {
         'pickup_password': base64.urlsafe_b64encode(hashlib.sha256(pickup_password.encode()).digest()).decode(),
         'original_name': filename,
-                'timestamp': datetime.datetime.utcnow().isoformat()
+        'timestamp': datetime.datetime.now(UTC).isoformat()
     }
     with open(os.path.join(UPLOAD_FOLDER, f"{random_id}.json"), 'w') as f:
         json.dump(meta, f)
 
     pickup_url = request.host_url.rstrip('/') + url_for('pickup_file', file_id=random_id)
-            flash(pickup_url)
+    return jsonify({"success": True, "pickup_url": pickup_url})
-            return redirect(url_for('index'))
 
-        else:  # <-- Handling encryption/decryption
+def handle_text_operation(request):
+    """Process text encryption/decryption operations."""
     data = request.get_json()
     encryption_type = data.get("encryption-type", "basic")
     operation = data.get("operation", "")
@@ -182,11 +220,10 @@ def index():
 
     return jsonify(result=html.escape(result))
 
-    return render_template("index.html", result="", password="", encryption_type="advanced", settings=settings)
+# ===== File Pickup Route =====
-
-# === File Pickup Route ===
 @app.route("/pickup/<file_id>", methods=["GET", "POST"])
 def pickup_file(file_id):
+    """Handle file pickup and decryption."""
     meta_path = os.path.join(UPLOAD_FOLDER, f"{file_id}.json")
     enc_path = os.path.join(UPLOAD_FOLDER, f"{file_id}.enc")
 
@@ -195,6 +232,11 @@ def pickup_file(file_id):
         return redirect(url_for('index'))
 
     if request.method == 'POST':
+        return handle_file_pickup(request, meta_path, enc_path, file_id)
+    return render_template("pickup.html", file_id=file_id)
+
+def handle_file_pickup(request, meta_path, enc_path, file_id):
+    """Process file pickup and decryption."""
     pickup_password = request.form.get('pickup_password')
     enc_password = request.form.get('enc_password')
 
@@ -225,29 +267,26 @@ def pickup_file(file_id):
     os.remove(enc_path)
     log_admin_event(f"File {file_id} downloaded and deleted.")
 
-        return send_file(io.BytesIO(decrypted), as_attachment=True, download_name=meta['original_name'])
+    response = send_file(
+        io.BytesIO(decrypted),
+        as_attachment=True,
+        download_name=meta['original_name'],
+        mimetype='application/octet-stream'
+    )
     
-    return render_template("pickup.html", file_id=file_id)
+    # Add headers for better mobile compatibility
+    response.headers['Content-Disposition'] = f'attachment; filename="{meta["original_name"]}"'
+    response.headers['Content-Type'] = 'application/octet-stream'
+    response.headers['Cache-Control'] = 'no-cache, no-store, must-revalidate'
+    response.headers['Pragma'] = 'no-cache'
+    response.headers['Expires'] = '0'
     
-def cleanup_expired_files():
+    return response
-    now = datetime.datetime.utcnow()
 
-    for fname in os.listdir(UPLOAD_FOLDER):
+# ===== Admin Routes =====
-        if fname.endswith(".enc") or fname.endswith(".json"):
-            path = os.path.join(UPLOAD_FOLDER, fname)
-            try:
-                file_time = datetime.datetime.utcfromtimestamp(os.path.getmtime(path))
-                age = (now - file_time).days
-                if age > MAX_FILE_AGE_DAYS:
-                    os.remove(path)
-                    print(f"[INFO] Deleted expired file: {fname}")
-            except Exception as e:
-                print(f"[ERROR] Could not check/delete file {fname}: {e}")
-
-
-# === Admin Log Viewer ===
 @app.route("/admin-logs")
 def admin_logs():
+    """View admin activity logs."""
     if not session.get("admin_logged_in"):
         return redirect(url_for("admin_login"))
 
@@ -270,15 +309,20 @@ def admin_logs():
 
     return jsonify(logs=logs)
 
-# === Admin Settings Editor ===
 @app.route("/admin-settings", methods=["GET", "POST"])
 def admin_settings():
+    """Manage application settings."""
     if not session.get("admin_logged_in"):
         return redirect(url_for("admin_login"))
 
     current_settings = load_settings()
 
     if request.method == 'POST':
+        return handle_settings_update(request, current_settings)
+    return render_template("admin_settings.html", settings=current_settings)
+
+def handle_settings_update(request, current_settings):
+    """Process settings update request."""
     upload_folder = request.form.get('upload_folder', current_settings.get('upload_folder', 'uploads'))
     max_file_age_days = int(request.form.get('max_file_age_days', current_settings.get('max_file_age_days', 14)))
     max_file_size_gb = float(request.form.get('max_file_size_gb', current_settings.get('max_file_size_bytes', 25 * 1024 * 1024 * 1024) / (1024 * 1024 * 1024)))
@@ -306,11 +350,9 @@ def admin_settings():
 
     return redirect(url_for("admin_settings"))
 
-    return render_template("admin_settings.html", settings=current_settings)
-
-# === Admin Setup ===
 @app.route("/admin-setup", methods=["GET", "POST"])
 def admin_setup():
+    """Initial admin account setup."""
     if os.path.exists(ADMIN_CRED_FILE):
         return redirect(url_for("admin_login"))
     if request.method == "POST":
@@ -323,9 +365,9 @@ def admin_setup():
         flash("Both fields required")
     return render_template("admin_setup.html")
 
-# === Admin Login ===
 @app.route("/admin-login", methods=["GET", "POST"])
 def admin_login():
+    """Admin login handler."""
     if request.method == "POST":
         u = request.form.get("username")
         p = request.form.get("password")
@@ -338,15 +380,15 @@ def admin_login():
             flash("Incorrect credentials")
     return render_template("admin_login.html")
 
-# === Admin Logout ===
 @app.route("/admin-logout")
 def admin_logout():
+    """Admin logout handler."""
     session.pop("admin_logged_in", None)
     return redirect(url_for("index"))
 
-# === Admin Page ===
 @app.route("/adminpage")
 def admin_page():
+    """Admin dashboard."""
     if not session.get("admin_logged_in"):
         if not os.path.exists(ADMIN_CRED_FILE):
             return redirect(url_for("admin_setup"))
@@ -355,32 +397,88 @@ def admin_page():
     cleanup_expired_files()
     routes = [rule.rule for rule in app.url_map.iter_rules() if rule.endpoint != 'static']
 
+    # Get uptime based on OS
+    if platform.system() == "Windows":
         try:
-        uptime = subprocess.check_output("uptime -p", shell=True).decode().strip()
+            # Windows uptime using PowerShell
-    except Exception:
+            ps_command = "(Get-CimInstance -ClassName Win32_OperatingSystem).LastBootUpTime"
-        uptime = "Unavailable"
+            uptime_output = subprocess.check_output(["powershell", "-Command", ps_command], shell=True).decode()
+            # Convert the PowerShell DateTime to Python datetime
+            boot_time = datetime.datetime.strptime(uptime_output.strip(), "%A, %B %d, %Y %I:%M:%S %p")
+            # Make boot_time timezone-aware (assuming local time)
+            boot_time = boot_time.replace(tzinfo=datetime.timezone.utc)
+            current_time = datetime.datetime.now(UTC)
+            uptime = current_time - boot_time
+            uptime_str = f"{uptime.days} days, {uptime.seconds // 3600} hours, {(uptime.seconds % 3600) // 60} minutes"
+        except Exception as e:
+            print(f"[ERROR] Failed to get Windows uptime: {str(e)}")
+            uptime_str = "Unavailable"
+    else:
+        try:
+            # Linux uptime using uptime command
+            uptime_str = subprocess.check_output("uptime -p", shell=True).decode().strip()
+        except Exception as e:
+            print(f"[ERROR] Failed to get Linux uptime: {str(e)}")
+            uptime_str = "Unavailable"
 
     server_info = {
-        "uptime": uptime,
+        "uptime": uptime_str,
-        "time": datetime.datetime.now().strftime("%Y-%m-%d %H:%M:%S"),
+        "time": datetime.datetime.now(UTC).strftime("%Y-%m-%d %H:%M:%S"),
         "python": platform.python_version(),
         "debug": app.debug
     }
 
     return render_template("admin.html", routes=routes, server_info=server_info)
 
-# === Restart Server ===
+@app.route("/restart-server", methods=["POST"])
-@app.route("/restart-server")
 def restart_server():
+    """Restart the server."""
     if not session.get("admin_logged_in"):
-        return redirect(url_for("admin_login"))
+        return jsonify({"error": "Unauthorized"}), 401
-    subprocess.Popen(["sudo", "systemctl", "restart", "paccrypt.service"])
+
-    flash("Restart triggered")
+    try:
-    return redirect(url_for("admin_page"))
+        if platform.system() == "Windows":
+            # Get the current process ID
+            current_pid = os.getpid()
+            # Create a batch file to restart the server
+            restart_script = f"""
+            @echo off
+            timeout /t 2 /nobreak
+            start "" "python" "app.py"
+            """
+            with open("restart.bat", "w") as f:
+                f.write(restart_script)
+            
+            # Start the restart script and exit
+            subprocess.Popen(["restart.bat"], shell=True)
+            return jsonify({"message": "Server restart initiated"}), 200
+        else:
+            # For Linux/Unix systems, use a Python-based restart
+            # Get the current Python interpreter and script path
+            python_path = sys.executable
+            script_path = os.path.abspath(__file__)
+            
+            # Create a shell script to restart the server
+            restart_script = f"""#!/bin/bash
+            sleep 2
+            {python_path} {script_path}
+            """
+            
+            # Write and make the script executable
+            with open("restart.sh", "w") as f:
+                f.write(restart_script)
+            os.chmod("restart.sh", 0o755)
+            
+            # Start the restart script and exit
+            subprocess.Popen(["./restart.sh"], shell=True)
+            return jsonify({"message": "Server restart initiated"}), 200
+    except Exception as e:
+        print(f"[ERROR] Failed to restart server: {str(e)}")
+        return jsonify({"error": f"Failed to restart server: {str(e)}"}), 500
 
-# === Reset Admin Credentials ===
 @app.route("/admin-reset", methods=["POST"])
 def admin_reset():
+    """Reset admin credentials."""
     if not session.get("admin_logged_in"):
         return redirect(url_for("admin_login"))
     try:
@@ -395,9 +493,9 @@ def admin_reset():
         print("[ERROR] admin_reset failed:", e)
     return redirect(url_for("admin_setup"))
 
-# === Change Admin Password ===
 @app.route("/admin-change-password", methods=["POST"])
 def admin_change_password():
+    """Change admin password."""
     if not session.get("admin_logged_in"):
         return redirect(url_for("admin_login"))
 
@@ -432,6 +530,7 @@ def admin_change_password():
 
 @app.route("/admin-clear-uploads", methods=["POST"])
 def admin_clear_uploads():
+    """Clear all uploaded files."""
     if not session.get("admin_logged_in"):
         return redirect(url_for("admin_login"))
 
@@ -449,31 +548,34 @@ def admin_clear_uploads():
 
 @app.route("/admin-update-server", methods=["POST"])
 def admin_update_server():
+    """Update server from GitHub repository."""
     if not session.get("admin_logged_in"):
-        return redirect(url_for("admin_login"))
+        return jsonify({"error": "Unauthorized"}), 401
 
     try:
-        repo_dir = os.path.abspath(os.path.dirname(__file__))  # Dynamically get current project directory
+        repo_dir = os.path.abspath(os.path.dirname(__file__))
-        repo_url = "https://github.com/TySP-Dev/PacCrypt.git"
         
-        # Ensure directory is a git repo
+        # Check if we're in a git repository
         if not os.path.exists(os.path.join(repo_dir, ".git")):
-            return redirect(url_for('500.html'))
+            return jsonify({"error": "Not a git repository"}), 400
 
-        # Pull latest changes
+        # Execute git commands
         subprocess.run(["git", "fetch"], cwd=repo_dir, check=True)
         subprocess.run(["git", "reset", "--hard", "origin/main"], cwd=repo_dir, check=True)
-        subprocess.run(["git", "pull", repo_url, "main"], cwd=repo_dir, check=True)
+        subprocess.run(["git", "pull"], cwd=repo_dir, check=True)
 
-        flash("Server updated from GitHub!", "clear-feedback")
+        return jsonify({"message": "Server updated successfully from GitHub!"}), 200
+    except subprocess.CalledProcessError as e:
+        print(f"[ERROR] Git operation failed: {str(e)}")
+        return jsonify({"error": f"Git operation failed: {str(e)}"}), 500
     except Exception as e:
-        flash(f"Update failed: {str(e)}", "clear-feedback")
+        print(f"[ERROR] Update failed: {str(e)}")
-
+        return jsonify({"error": f"Update failed: {str(e)}"}), 500
-    return redirect(url_for("admin_page"))
-
 
+# ===== Sitemap and Robots =====
 @app.route("/sitemap", methods=["GET"])
 def sitemap():
+    """Generate sitemap.xml."""
     sitemap_xml = '''<?xml version="1.0" encoding="UTF-8"?>
 <urlset xmlns="http://www.sitemaps.org/schemas/sitemap/0.9">
   <url><loc>https://paccrypt.unnaturalll.dev/</loc></url>
@@ -483,9 +585,9 @@ def sitemap():
 </urlset>'''
     return sitemap_xml, 200, {'Content-Type': 'application/xml'}
 
-
 @app.route("/robots.txt")
 def robots_txt():
+    """Generate robots.txt."""
     lines = [
         "User-agent: *",
         "Disallow: /adminpage",
@@ -501,10 +603,7 @@ def robots_txt():
     ]
     return "\n".join(lines), 200, {"Content-Type": "text/plain"}
 
-
+# ===== Error Handlers =====
-
-
-# === Error Handlers ===
 @app.errorhandler(404)
 def page_not_found(e):
     return render_template('404.html'), 404
@@ -526,10 +625,9 @@ def handle_file_not_found(e):
     if os.getenv("PRODUCTION", "false").lower() == "true":
         return render_template('500.html'), 500
     else:
-        raise e  # re-raise for debugging in development
+        raise e
 
-
+# ===== Application Entry Point =====
-# === Server Mode Execution ===
 if __name__ == "__main__":
     PRODUCTION = os.getenv("PRODUCTION", "false").lower() == "true"
     if PRODUCTION:

requirements.txt

@@ -3,6 +3,7 @@
 flask==3.0.3
 cryptography==42.0.5
 waitress==2.1.2
+werkzeug==3.0.1
 
 # nginx - Only needed for Nginx integration, not installed via pip
 # Run pip install -r requirements.txt

restart.bat

@@ -0,0 +1,5 @@
+
+            @echo off
+            timeout /t 2 /nobreak
+            start "" "python" "app.py"
+            

static/css/styles.css

@@ -1,7 +1,7 @@
 /* ===== Global Reset ===== */
 * {
     box-sizing: border-box;
-    margin: 0;
+    margin: 3px;
     padding: 0;
 }
 
@@ -27,7 +27,7 @@ header {
     box-shadow: 0 0 15px rgba(0, 255, 153, 0.4);
     width: 100%;
     max-width: 800px;
-    margin-bottom: 30px;
+    margin-bottom: 40px !important;
 }
 
     header h1 {
@@ -48,8 +48,8 @@ main {
     align-items: center;
     width: 100%;
     max-width: 800px;
-    padding: 20px;
+    padding: 0;
-    gap: 30px;
+    gap: 0;
 }
 
 /* ===== Card Styling ===== */
@@ -68,6 +68,7 @@ main {
     flex-direction: column;
     align-items: center;
     gap: 0px;
+    max-width: 725px;
     width: 100%;
 }
 
@@ -79,14 +80,17 @@ input[type="file"] {
     width: 80%;
     max-width: 500px;
     padding: 12px 20px;
-    border: 2px solid #00ff99;
+    border: 1px solid #00ff99;
     border-radius: 8px;
     background-color: #2c2f33;
     color: #00ff99;
     font-size: 1em;
-    text-align: center;
+    text-align: left;
     transition: 0.3s;
-    margin:10px auto;
+}
+
+select {
+    text-align: center;
 }
 
 textarea {
@@ -122,7 +126,7 @@ input:focus,
 textarea:focus,
 select:focus {
     outline: none;
-    box-shadow: 0 0 8px rgba(0, 255, 153, 0.8);
+    box-shadow: 0 0 10px rgba(0, 255, 153, 0.8);
 }
 
 /* ===== Textareas Specific Widths ===== */
@@ -136,10 +140,9 @@ select:focus {
 /* ===== Button Group Styling ===== */
 .button-group {
     display: flex;
-    flex-wrap: wrap;
+    flex-wrap: nowrap;
     justify-content: center;
     gap: 15px;
-    margin: 10px auto;
     width: 100%;
 }
 
@@ -152,23 +155,34 @@ button {
     font-size: 1em;
     cursor: pointer;
     transition: 0.3s;
-    width: 100%;
+    width: auto;
-    max-width: 200px;
+    min-width: 225px;
-    /* margin: 10px auto; */
+    max-width: 300px;
 }
 
     button:hover {
         background-color: #00ff99;
         color: #121212;
+        box-shadow: 0 0 10px rgba(0, 255, 153, 0.4);
     }
 
+.danger-button {
+    background-color: #5f3131;
+    box-shadow: 0 0 20px rgba(185, 0, 0, 0.4);
+}
+
+.danger-button:hover {
+    background-color: #ff0000;
+    color: #121212;
+    box-shadow: 0 0 40px rgb(255, 0, 0);
+}
+
 /* ===== Toggle Switch Styling ===== */
 .toggle-container {
     display: flex;
     align-items: center;
     justify-content: center;
     gap: 12px;
-    margin-top: 10px;
     width: 100%;
 }
 
@@ -207,15 +221,15 @@ button {
     /* The circle knob */
     .slider::before {
         content: "";
-        height: 26px;
+        height: 22px;
-        width: 26px;
+        width: 22px;
         background-color: #00ff99;
         border-radius: 50%;
         transition: .4s;
-        transform: translateX(4px);
+        transform: translateX(2px);
         position: absolute;
-        left: 0px;
+        left: auto;
-        bottom: 2.5px;
+        bottom: auto;
     }
 
 input:checked + .slider::before {
@@ -295,9 +309,9 @@ footer {
     color: #00ff99;
     border-radius: 12px;
     box-shadow: 0 0 15px rgba(0, 255, 153, 0.4);
-    margin-top: 30px;
     width: 100%;
     max-width: 800px;
+    margin-top: 40px;
 }
 
     footer a {
@@ -309,39 +323,70 @@ footer {
             color: #ff0066;
         }
 
-/* ===== Responsive Tweaks ===== */
+/* ===== Responsive Design ===== */
 @media (max-width: 600px) {
-    input, textarea, select, #input-text, #output-text {
+    input,
+    textarea,
+    select,
+    #input-text,
+    #output-text {
         width: 100%;
         max-width: 90%;
     }
 }
 
 /* ===== Copy Feedback Message ===== */
-.copy-feedback {
+.copy-feedback, #shared-link-feedback {
-    background-color: #2a2a2a;
+    background-color: #2c2f33;
-    border: 1px solid #00ff99;
     padding: 6px 12px;
     margin-top: 6px;
     border-radius: 6px;
     color: #00ff99;
     font-size: 0.9em;
+    display: none;
     opacity: 0;
-    transition: opacity 0.3s ease;
     text-align: center;
     max-width: 300px;
     margin-left: auto;
     margin-right: auto;
+    transition: opacity 0.3s ease;
 }
 
-    .copy-feedback.show {
+.copy-feedback.show, #shared-link-feedback.show {
+    display: block;
     opacity: 1;
-    }
-
-.hidden {
-    display: none !important;
 }
 
+.share-link-container {
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    gap: 8px;
+    margin-top: 12px;
+    margin-bottom: 12px;
+}
+
+#share-link {
+    display: block;
+    background-color: #2c2f33;
+    padding: 8px 16px;
+    border-radius: 6px;
+    color: #00ff99;
+    font-size: 0.9em;
+    text-align: center;
+    max-width: 720px;
+    width: 100%;
+    word-break: break-all;
+    text-decoration: none;
+    transition: all 0.3s ease;
+}
+
+#share-link:hover {
+    color: #00cc77;
+    background-color: #36393f;
+}
+
+/* ===== Form Styling ===== */
 form {
     width: 100%;
     display: flex;
@@ -349,65 +394,39 @@ form {
     align-items: center;
 }
 
-    form input,
+form input {
-    form button {
     width: 80%;
     max-width: 500px;
-        margin-bottom: 12px;
+    text-align: left;
-        text-align: center;
+}
-    }
 
+/* ===== Section Card Styling ===== */
 section.card {
     display: flex;
     flex-direction: column;
     align-items: center;
 }
 
-.copy-feedback.show {
+/* ===== Pacman Game Styling ===== */
-    display: block;
-    width: fit-content;
-    margin-top: 10px;
-    padding: 6px 12px;
-    background-color: #2a2a2a;
-    color: #00ff99;
-    border: 1px solid #00ff99;
-    border-radius: 6px;
-}
-
-#logContainer {
-    white-space: pre-wrap; /* Wrap long lines */
-    word-wrap: break-word; /* Break long words if needed */
-    overflow-wrap: anywhere; /* Ensures long strings don't overflow */
-    background: black;
-    color: lime;
-    padding: 10px;
-    border-radius: 8px;
-    max-height: 400px;
-    overflow-y: auto;
-    width: 100%;
-    box-sizing: border-box;
-}
-
 #pacmanCanvas {
     background-color: black;
     display: block;
-    margin: auto;
     border: 2px solid #00ff99;
     border-radius: 12px;
-    align-items: center;
+    max-width: 700px;
-    justify-content: center;
+    width: 100%;
+    aspect-ratio: 4/3;
+    object-fit: contain;
 }
+
 #pacman-section {
     display: flex;
     flex-direction: column;
     align-items: center;
-    justify-content: center;
     gap: 20px;
-    padding: 20px;
+    margin-bottom: 25px;
-    display: block;
+    max-width: 725px;
-    margin: auto;
+    width: 100%;
-    border: 2px solid #00ff99;
-    border-radius: 12px;
 }
 
 .pacman-wrapper {
@@ -415,10 +434,197 @@ section.card {
     justify-content: center;
     align-items: center;
     width: 100%;
+    padding: 0;
+    margin: 0;
 }
 
-
+/* ===== Utility Classes ===== */
-/* ===== Utility: Hidden Class ===== */
 .hidden {
     display: none !important;
 }
+
+/* ===== Section Spacing ===== */
+#password-generator-section {
+    margin-bottom: 25px;
+}
+
+#encoding-section {
+    margin-bottom: 25px;
+}
+
+/* ===== File Input Section ===== */
+#encoding-section #file-section {
+    display: none;
+}
+
+#encoding-section #file-section:not(.hidden) {
+    display: flex;
+}
+
+/* Ensure PacCrypt sharing file uploader is always visible */
+#sharing-section #file-section {
+    display: flex;
+}
+
+/* Mobile-friendly download button */
+.download-btn {
+    width: 100%;
+    padding: 12px;
+    font-size: 16px;
+    cursor: pointer;
+    background-color: var(--primary-color);
+    color: white;
+    border: none;
+    border-radius: 4px;
+    transition: background-color 0.3s;
+}
+
+.download-btn:hover {
+    background-color: var(--primary-hover);
+}
+
+/* Mobile form adjustments */
+.pickup-form {
+    max-width: 100%;
+    margin: 0 auto;
+}
+
+.pickup-form input[type="password"] {
+    width: 100%;
+    padding: 12px;
+    margin-bottom: 10px;
+    font-size: 16px;
+    border: 1px solid var(--border-color);
+    border-radius: 4px;
+    background-color: var(--input-bg);
+    color: var(--text-color);
+}
+
+/* Mobile-specific styles */
+@media (max-width: 768px) {
+    .download-btn {
+        padding: 15px;
+        font-size: 18px;
+    }
+    
+    .pickup-form input[type="password"] {
+        padding: 15px;
+        font-size: 18px;
+    }
+}
+
+/* ===== Admin Section Styling ===== */
+#sitemap-section,
+#password-change-section,
+#server-update-section,
+#server-status-section,
+#server-logs-section,
+#system-settings-section {
+    margin-bottom: 25px;
+    padding: 25px;
+    background-color: #1e1e1e;
+    border-radius: 12px;
+    box-shadow: 0 0 15px rgba(0, 255, 153, 0.4);
+}
+
+.sitemap-header {
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+    margin: 15px 0;
+}
+
+.sitemap-header h3 {
+    color: #00ff99;
+    margin: 0;
+}
+
+.collapse-btn {
+    background: none;
+    border: none;
+    color: #00ff99;
+    font-size: 1.2em;
+    cursor: pointer;
+    padding: 5px 10px;
+    transition: transform 0.3s ease;
+}
+
+.collapse-btn:hover {
+    transform: scale(1.1);
+}
+
+.sitemap-content {
+    transition: all 0.3s ease;
+    margin-bottom: 15px;
+}
+
+#sitemap-section ul,
+#server-status-section ul {
+    list-style: none;
+    padding-left: 0;
+    margin-top: 15px;
+}
+
+#sitemap-section li,
+#server-status-section li {
+    margin-bottom: 10px;
+    padding: 8px;
+    background-color: #2c2f33;
+    border-radius: 6px;
+    color: #00ff99;
+}
+
+#server-logs-section button {
+    margin-bottom: 15px;
+    width: 100%;
+    max-width: 300px;
+}
+
+#logLoader {
+    color: #00ff99;
+    text-align: center;
+    padding: 10px;
+}
+
+#logContainer {
+    background-color: #2c2f33;
+    color: #00ff99;
+    padding: 15px;
+    border-radius: 8px;
+    max-height: 400px;
+    overflow-y: auto;
+    font-family: monospace;
+    white-space: pre-wrap;
+}
+
+#system-settings-section {
+    margin-bottom: unset !important;
+    padding: 25px;
+    background-color: #1e1e1e;
+    border-radius: 12px;
+    box-shadow: 0 0 15px rgba(0, 255, 153, 0.4);
+}
+
+/* ===== Mobile Responsive Adjustments ===== */
+@media (max-width: 768px) {
+    #sitemap-section,
+    #password-change-section,
+    #server-update-section,
+    #server-status-section,
+    #server-logs-section,
+    #system-settings-section {
+        padding: 20px;
+        margin-bottom: 20px;
+    }
+
+    #sitemap-section li,
+    #server-status-section li {
+        font-size: 0.9em;
+        padding: 6px;
+    }
+
+    #logContainer {
+        font-size: 0.9em;
+        padding: 10px;
+    }
+}

static/js/encryption.js

@@ -1,10 +1,21 @@
-// encryption.js
+/**
+ * Encryption module.
+ * Handles cryptographic operations using Web Crypto API.
+ * Implements AES-GCM encryption with PBKDF2 key derivation.
+ */
 
+// ===== Constants =====
+const SALT_LENGTH = 16;
+const IV_LENGTH = 12;
+const PBKDF2_ITERATIONS = 200_000;
+const KEY_LENGTH = 256;
+
+// ===== Key Derivation =====
 /**
  * Derives an AES-GCM key from a password using PBKDF2.
  * @param {string} password - User-supplied password.
  * @param {Uint8Array} salt - Randomly generated salt.
- * @returns {Promise<CryptoKey>}
+ * @returns {Promise<CryptoKey>} - Derived cryptographic key.
  */
 export async function deriveKey(password, salt) {
     const encoder = new TextEncoder();
@@ -20,16 +31,17 @@ export async function deriveKey(password, salt) {
         {
             name: 'PBKDF2',
             salt,
-            iterations: 200_000,
+            iterations: PBKDF2_ITERATIONS,
             hash: 'SHA-256'
         },
         keyMaterial,
-        { name: 'AES-GCM', length: 256 },
+        { name: 'AES-GCM', length: KEY_LENGTH },
         false,
         ['encrypt', 'decrypt']
     );
 }
 
+// ===== Encryption =====
 /**
  * Encrypts a message using AES-GCM with a derived key.
  * @param {string} message - Plaintext message to encrypt.
@@ -38,12 +50,16 @@ export async function deriveKey(password, salt) {
  */
 export async function encryptAdvanced(message, password) {
     const encoder = new TextEncoder();
-    const salt = crypto.getRandomValues(new Uint8Array(16));
+    const salt = crypto.getRandomValues(new Uint8Array(SALT_LENGTH));
-    const iv = crypto.getRandomValues(new Uint8Array(12));
+    const iv = crypto.getRandomValues(new Uint8Array(IV_LENGTH));
     const key = await deriveKey(password, salt);
     const encoded = encoder.encode(message);
 
-    const ciphertext = await crypto.subtle.encrypt({ name: 'AES-GCM', iv }, key, encoded);
+    const ciphertext = await crypto.subtle.encrypt(
+        { name: 'AES-GCM', iv },
+        key,
+        encoded
+    );
 
     const output = new Uint8Array(salt.length + iv.length + ciphertext.byteLength);
     output.set(salt);
@@ -53,6 +69,7 @@ export async function encryptAdvanced(message, password) {
     return btoa(String.fromCharCode(...output));
 }
 
+// ===== Decryption =====
 /**
  * Decrypts an AES-GCM encrypted string.
  * @param {string} encryptedData - Base64-encoded ciphertext.
@@ -64,9 +81,9 @@ export async function decryptAdvanced(encryptedData, password) {
         atob(encryptedData).split('').map(c => c.charCodeAt(0))
     );
 
-    const salt = encrypted.slice(0, 16);
+    const salt = encrypted.slice(0, SALT_LENGTH);
-    const iv = encrypted.slice(16, 28);
+    const iv = encrypted.slice(SALT_LENGTH, SALT_LENGTH + IV_LENGTH);
-    const ciphertext = encrypted.slice(28);
+    const ciphertext = encrypted.slice(SALT_LENGTH + IV_LENGTH);
     const key = await deriveKey(password, salt);
 
     const decrypted = await crypto.subtle.decrypt(
@@ -78,8 +95,9 @@ export async function decryptAdvanced(encryptedData, password) {
     return new TextDecoder().decode(decrypted);
 }
 
+// ===== Module Initialization =====
 /**
- * Optional init logging for module diagnostics.
+ * Initializes the encryption module and logs its status.
  */
 export function setupEncryption() {
     console.log('[Encryption] Module loaded');

static/js/fileops.js

@@ -1,92 +1,119 @@
-// fileops.js
-
-import { encryptAdvanced, decryptAdvanced } from './encryption.js';
-
 /**
- * Encrypts the selected file and triggers download of the encrypted version.
+ * File operations module.
- * @param {HTMLInputElement} fileInput - The input element of type 'file'.
+ * Handles file encryption and decryption operations.
- * @param {string} password - Password for encryption.
  */
-export function encryptFile(fileInput, password) {
-    if (!fileInput.files.length) {
-        alert("Please select a file!");
-        return;
-    }
 
+// ===== Constants =====
+const CHUNK_SIZE = 1024 * 1024; // 1MB chunks
+
+// ===== Public Interface =====
+export async function encryptFile(fileInput, password) {
     const file = fileInput.files[0];
-    const reader = new FileReader();
+    if (!file) return;
 
-    reader.onload = async (e) => {
-        const rawBytes = new Uint8Array(e.target.result);
-        const base64 = btoa(String.fromCharCode(...rawBytes));
-        const encrypted = await encryptAdvanced(base64, password);
-        downloadFile(encrypted, file.name + ".enc");
-    };
-
-    reader.readAsArrayBuffer(file);
-}
-
-/**
- * Decrypts the selected encrypted file and triggers download of the original.
- * @param {HTMLInputElement} fileInput - The input element of type 'file'.
- * @param {string} password - Password for decryption.
- */
-export function decryptFile(fileInput, password) {
-    if (!fileInput.files.length) {
-        alert("Please select a file!");
-        return;
-    }
-
-    const file = fileInput.files[0];
-    const reader = new FileReader();
-
-    reader.onload = async (e) => {
     try {
-            const encryptedText = e.target.result;
+        const encryptedChunks = await processFile(file, password, true);
-            const base64Decrypted = await decryptAdvanced(encryptedText, password);
+        downloadEncryptedFile(encryptedChunks, file.name);
-            const byteArray = new Uint8Array(
+    } catch (error) {
-                [...atob(base64Decrypted)].map(c => c.charCodeAt(0))
+        alert("Error encrypting file: " + error.message);
-            );
-            downloadFileBinary(byteArray, file.name.replace(/\.enc$/, ''));
-        } catch (err) {
-            console.error("[Decryption Error]", err);
-            alert("Decryption failed: wrong password or corrupted file.");
     }
+}
+
+export async function decryptFile(fileInput, password) {
+    const file = fileInput.files[0];
+    if (!file) return;
+
+    try {
+        const decryptedChunks = await processFile(file, password, false);
+        downloadDecryptedFile(decryptedChunks, file.name);
+    } catch (error) {
+        alert("Error decrypting file: " + error.message);
+    }
+}
+
+// ===== File Processing =====
+async function processFile(file, password, isEncrypt) {
+    const chunks = [];
+    const totalChunks = Math.ceil(file.size / CHUNK_SIZE);
+    let processedChunks = 0;
+
+    for (let start = 0; start < file.size; start += CHUNK_SIZE) {
+        const chunk = file.slice(start, start + CHUNK_SIZE);
+        const arrayBuffer = await chunk.arrayBuffer();
+        const uint8Array = new Uint8Array(arrayBuffer);
+        
+        const processedChunk = await processChunk(uint8Array, password, isEncrypt);
+        chunks.push(processedChunk);
+        
+        processedChunks++;
+        updateProgress(processedChunks, totalChunks);
+    }
+
+    return chunks;
+}
+
+async function processChunk(data, password, isEncrypt) {
+    const payload = {
+        "encryption-type": "advanced",
+        operation: isEncrypt ? "encrypt" : "decrypt",
+        message: Array.from(data).join(','),
+        password: password
     };
 
-    reader.readAsText(file);
+    const response = await fetch("/", {
+        method: "POST",
+        headers: { "Content-Type": "application/json" },
+        body: JSON.stringify(payload)
+    });
+
+    if (!response.ok) {
+        throw new Error(`HTTP error! status: ${response.status}`);
+    }
+
+    const result = await response.json();
+    return new Uint8Array(result.result.split(',').map(Number));
 }
 
-/**
+// ===== File Download =====
- * Downloads a text-based file (encrypted string).
+function downloadEncryptedFile(chunks, originalName) {
- * @param {string} content - The file content to download.
+    const blob = new Blob(chunks, { type: 'application/octet-stream' });
- * @param {string} filename - Desired name for the downloaded file.
- */
-function downloadFile(content, filename) {
-    const blob = new Blob([content], { type: "application/octet-stream" });
     const url = URL.createObjectURL(blob);
-
+    const a = document.createElement('a');
-    const a = document.createElement("a");
     a.href = url;
-    a.download = filename;
+    a.download = originalName + '.encrypted';
+    document.body.appendChild(a);
     a.click();
-
+    document.body.removeChild(a);
     URL.revokeObjectURL(url);
 }
 
-/**
+function downloadDecryptedFile(chunks, originalName) {
- * Downloads a binary file (Uint8Array).
+    const blob = new Blob(chunks, { type: 'application/octet-stream' });
- * @param {Uint8Array} byteArray - The binary content.
- * @param {string} filename - Desired name for the downloaded file.
- */
-function downloadFileBinary(byteArray, filename) {
-    const blob = new Blob([byteArray], { type: "application/octet-stream" });
     const url = URL.createObjectURL(blob);
-
+    const a = document.createElement('a');
-    const a = document.createElement("a");
     a.href = url;
-    a.download = filename;
+    a.download = originalName.replace('.encrypted', '');
+    document.body.appendChild(a);
     a.click();
-
+    document.body.removeChild(a);
     URL.revokeObjectURL(url);
 }
+
+// ===== Progress Tracking =====
+function updateProgress(processed, total) {
+    const progressBar = document.getElementById("file-progress");
+    const progressText = document.getElementById("file-progress-text");
+    
+    if (progressBar && progressText) {
+        const percent = Math.round((processed / total) * 100);
+        progressBar.style.width = percent + "%";
+        progressText.textContent = `Processing: ${percent}%`;
+        
+        if (processed === total) {
+            setTimeout(() => {
+                progressBar.style.width = "0%";
+                progressText.textContent = "";
+            }, 1000);
+        }
+    }
+}

static/js/main.js

@@ -1,11 +1,12 @@
-// main.js
+/**
+ * Main application entry point.
+ * Initializes UI and game components when the DOM is loaded.
+ */
 
 import { setupUI } from './ui.js';
 import { setupGame } from './pacman.js';
 
-/**
+// Initialize application when DOM is fully loaded
- * Initialize UI and game once the DOM is fully loaded.
- */
 window.addEventListener("DOMContentLoaded", () => {
     setupUI();
     setupGame();

static/js/pacman.js

@@ -1,47 +1,28 @@
-// pacman.js
+/**
+ * Pacman game module.
+ * Handles game logic, rendering, and user interaction.
+ */
 
+// ===== Game Constants =====
+const PACMAN_SPEED = 40;
+const ENEMY_SPEED = 20;
+const CELL_SIZE = 40;
+const DOT_SIZE = 5;
+
+// ===== Game State =====
+let canvas, ctx, pacman, enemy, walls, dots, score;
+let cols, rows, randSeed, gameInterval;
+
+// ===== Public Interface =====
 export function setupGame() {
     console.log('[PacMan] Game module loaded.');
-
     window.startPacman = startPacman;
     window.exitGame = exitGame;
 }
 
-// ====== Game Constants & State ======
-let canvas, ctx, pacman, enemy, walls, dots, score;
-let pacmanSpeed = 40,
-    enemySpeed = 20,
-    cellSize = 40,
-    dotSize = 5,
-    cols, rows, randSeed, gameInterval;
-
-// ====== Game Initialization ======
-
 export function startPacman() {
-    canvas = document.getElementById("pacmanCanvas");
+    initializeGame();
-    ctx = canvas.getContext("2d");
+    setupGameLoop();
-
-    cols = Math.floor(canvas.width / cellSize);
-    rows = Math.floor(canvas.height / cellSize);
-    walls = [];
-    dots = [];
-    score = 0;
-
-    clearInterval(gameInterval);
-    const seedSource = document.getElementById("password")?.value || "pacman";
-    randSeed = [...seedSource].reduce((s, c) => s + c.charCodeAt(0), 0);
-
-
-    generateWalls();
-    generateDots();
-
-    pacman = spawn();
-    do { enemy = spawn(); } while (enemy.x === pacman.x && enemy.y === pacman.y);
-
-    pacman.dx = pacman.dy = 0;
-    document.addEventListener("keydown", movePacman);
-
-    gameInterval = setInterval(gameLoop, 150);
 }
 
 export function stopPacman() {
@@ -61,8 +42,39 @@ export function exitGame() {
     document.getElementById("encoding-section").style.display = "block";
 }
 
-// ====== Game Setup Helpers ======
+// ===== Game Initialization =====
+function initializeGame() {
+    canvas = document.getElementById("pacmanCanvas");
+    ctx = canvas.getContext("2d");
 
+    cols = Math.floor(canvas.width / CELL_SIZE);
+    rows = Math.floor(canvas.height / CELL_SIZE);
+    walls = [];
+    dots = [];
+    score = 0;
+
+    clearInterval(gameInterval);
+    
+    // Get seed from generated password or use default
+    const passwordField = document.getElementById("generated-password");
+    const seedSource = passwordField?.value || "pacman";
+    randSeed = [...seedSource].reduce((s, c) => s + c.charCodeAt(0), 0);
+
+    generateWalls();
+    generateDots();
+
+    pacman = spawn();
+    do { enemy = spawn(); } while (enemy.x === pacman.x && enemy.y === pacman.y);
+
+    pacman.dx = pacman.dy = 0;
+    document.addEventListener("keydown", movePacman);
+}
+
+function setupGameLoop() {
+    gameInterval = setInterval(gameLoop, 150);
+}
+
+// ===== Game Setup Helpers =====
 function spawn() {
     const options = [];
     for (let c = 1; c < cols - 1; c++) {
@@ -80,9 +92,9 @@ function spawn() {
     }
     const s = options[Math.floor(rand() * options.length)];
     return {
-        x: s.c * cellSize + cellSize / 2,
+        x: s.c * CELL_SIZE + CELL_SIZE / 2,
-        y: s.r * cellSize + cellSize / 2,
+        y: s.r * CELL_SIZE + CELL_SIZE / 2,
-        size: cellSize / 2 - 5,
+        size: CELL_SIZE / 2 - 5,
         dx: 0,
         dy: 0
     };
@@ -94,6 +106,7 @@ function rand() {
 }
 
 function generateWalls() {
+    // First pass: generate initial walls
     for (let c = 0; c < cols; c++) {
         for (let r = 0; r < rows; r++) {
             if (c === 0 || r === 0 || c === cols - 1 || r === rows - 1 || rand() < 0.2) {
@@ -101,6 +114,25 @@ function generateWalls() {
             }
         }
     }
+
+    // Second pass: check for enclosed spaces
+    for (let c = 1; c < cols - 1; c++) {
+        for (let r = 1; r < rows - 1; r++) {
+            // Skip if already a wall
+            if (walls.some(w => w.c === c && w.r === r)) continue;
+
+            // Check all four sides
+            const hasWallAbove = walls.some(w => w.c === c && w.r === r - 1);
+            const hasWallBelow = walls.some(w => w.c === c && w.r === r + 1);
+            const hasWallLeft = walls.some(w => w.c === c - 1 && w.r === r);
+            const hasWallRight = walls.some(w => w.c === c + 1 && w.r === r);
+
+            // If all sides are walls, make this spot a wall too
+            if (hasWallAbove && hasWallBelow && hasWallLeft && hasWallRight) {
+                walls.push({ c, r });
+            }
+        }
+    }
 }
 
 function generateDots() {
@@ -120,8 +152,7 @@ function generateDots() {
     }
 }
 
-// ====== Game Loop & Drawing ======
+// ===== Game Loop & Rendering =====
-
 function gameLoop() {
     ctx.clearRect(0, 0, canvas.width, canvas.height);
     drawWalls();
@@ -137,7 +168,7 @@ function gameLoop() {
 function drawWalls() {
     ctx.fillStyle = "blue";
     walls.forEach(w => {
-        ctx.fillRect(w.c * cellSize, w.r * cellSize, cellSize, cellSize);
+        ctx.fillRect(w.c * CELL_SIZE, w.r * CELL_SIZE, CELL_SIZE, CELL_SIZE);
     });
 }
 
@@ -151,7 +182,10 @@ function drawChar(ch, color) {
 function drawScore() {
     ctx.fillStyle = "white";
     ctx.font = "20px Poppins";
-    ctx.fillText("Score: " + score, 10, 25);
+    ctx.textAlign = "left";
+    // Add padding to prevent clipping
+    const padding = 10;
+    ctx.fillText("Score: " + score, padding, 25);
 }
 
 function checkGameOver() {
@@ -167,17 +201,16 @@ function checkGameOver() {
     }
 }
 
-// ====== Movement Logic ======
+// ===== Movement Logic =====
-
 function movePacman(e) {
     const k = e.key;
     if (!["ArrowUp", "ArrowDown", "ArrowLeft", "ArrowRight"].includes(k)) return;
     e.preventDefault();
 
-    if (k === "ArrowUp") { pacman.dx = 0; pacman.dy = -pacmanSpeed; }
+    if (k === "ArrowUp") { pacman.dx = 0; pacman.dy = -PACMAN_SPEED; }
-    if (k === "ArrowDown") { pacman.dx = 0; pacman.dy = pacmanSpeed; }
+    if (k === "ArrowDown") { pacman.dx = 0; pacman.dy = PACMAN_SPEED; }
-    if (k === "ArrowLeft") { pacman.dx = -pacmanSpeed; pacman.dy = 0; }
+    if (k === "ArrowLeft") { pacman.dx = -PACMAN_SPEED; pacman.dy = 0; }
-    if (k === "ArrowRight") { pacman.dx = pacmanSpeed; pacman.dy = 0; }
+    if (k === "ArrowRight") { pacman.dx = PACMAN_SPEED; pacman.dy = 0; }
 }
 
 function moveChar(ch) {
@@ -191,7 +224,7 @@ function moveChar(ch) {
 
 function moveEnemy() {
     const options = [];
-    const moves = [[enemySpeed, 0], [-enemySpeed, 0], [0, enemySpeed], [0, -enemySpeed]];
+    const moves = [[ENEMY_SPEED, 0], [-ENEMY_SPEED, 0], [0, ENEMY_SPEED], [0, -ENEMY_SPEED]];
 
     moves.forEach(([dx, dy]) => {
         const nx = enemy.x + dx;
@@ -225,8 +258,8 @@ function willCollide(x, y, size) {
     const top = y - size, bottom = y + size;
 
     return walls.some(w => {
-        const wx1 = w.c * cellSize, wy1 = w.r * cellSize;
+        const wx1 = w.c * CELL_SIZE, wy1 = w.r * CELL_SIZE;
-        const wx2 = wx1 + cellSize, wy2 = wy1 + cellSize;
+        const wx2 = wx1 + CELL_SIZE, wy2 = wy1 + CELL_SIZE;
         return right > wx1 && left < wx2 && bottom > wy1 && top < wy2;
     });
 }
@@ -235,8 +268,8 @@ function eatDots() {
     const chompSound = document.getElementById("chomp-sound");
 
     dots = dots.filter(d => {
-        const dx = d.c * cellSize + cellSize / 2;
+        const dx = d.c * CELL_SIZE + CELL_SIZE / 2;
-        const dy = d.r * cellSize + cellSize / 2;
+        const dy = d.r * CELL_SIZE + CELL_SIZE / 2;
 
         if (Math.abs(pacman.x - dx) < pacman.size && Math.abs(pacman.y - dy) < pacman.size) {
             score++;
@@ -253,10 +286,11 @@ function eatDots() {
     ctx.fillStyle = "white";
     dots.forEach(d => {
         ctx.beginPath();
-        ctx.arc(d.c * cellSize + cellSize / 2, d.r * cellSize + cellSize / 2, dotSize, 0, Math.PI * 2);
+        ctx.arc(d.c * CELL_SIZE + CELL_SIZE / 2, d.r * CELL_SIZE + CELL_SIZE / 2, DOT_SIZE, 0, Math.PI * 2);
         ctx.fill();
     });
 }
 
+// ===== Global Functions =====
 window.resetGame = resetGame;
 window.exitGame = exitGame;

static/js/ui.js

@@ -1,72 +1,99 @@
-// ui.js
+/**
+ * UI management module.
+ * Handles user interface interactions and form handling.
+ */
+
 import { encryptFile, decryptFile } from './fileops.js';
 
-/**
+// ===== UI Initialization =====
- * Initialize all UI functionality after DOM is loaded
- */
 export function setupUI() {
-    toggleEncryptionOptions();
+    // Set initial state of remove button to hidden
-    toggleInputMode();
+    const removeBtn = document.getElementById("remove-file-btn");
+    if (removeBtn) {
+        removeBtn.style.display = "none";
+    }
     
-    const encryptionTypeEl = document.getElementById("encryption-type");
+    initializeEventListeners();
-    const inputTextEl = document.getElementById("input-text");
+}
-    const formEl = document.getElementById("crypto-form");
-    const removeFileBtn = document.getElementById("remove-file-btn");
-    const clearAllBtn = document.getElementById("clear-all-btn");
-    const generateBtn = document.getElementById("generate-btn");
-    const copyPasswordBtn = document.getElementById("copy-btn");
-    const copyOutputBtn = document.getElementById("copy-output-btn");
-    const toggleSwitch = document.getElementById("operation-toggle");
-    const copyShareBtn = document.getElementById("copy-share-btn");
-    const shareLink = document.getElementById("share-link");
 
-    if (
+// ===== Event Listeners =====
-        encryptionTypeEl && inputTextEl && formEl && removeFileBtn &&
+function initializeEventListeners() {
-        clearAllBtn && generateBtn && copyPasswordBtn && toggleSwitch
+    const elements = {
-    ) {
+        encryptionType: document.getElementById("encryption-type"),
-        encryptionTypeEl.addEventListener("change", toggleEncryptionOptions);
+        inputText: document.getElementById("input-text"),
-        inputTextEl.addEventListener("input", () => {
+        form: document.getElementById("crypto-form"),
-            toggleInputMode();
+        removeFileBtn: document.getElementById("remove-file-btn"),
-            checkForPacman();
+        clearAllBtn: document.getElementById("clear-all-btn"),
+        generateBtn: document.getElementById("generate-btn"),
+        copyPasswordBtn: document.getElementById("copy-btn"),
+        copyOutputBtn: document.getElementById("copy-output-btn"),
+        toggleSwitch: document.getElementById("operation-toggle"),
+        copyShareBtn: document.getElementById("copy-share-btn"),
+        shareLink: document.getElementById("share-link")
+    };
+
+    if (validateElements(elements)) {
+        setupElementListeners(elements);
+    }
+}
+
+function validateElements(elements) {
+    return elements.encryptionType && elements.inputText && elements.form && 
+           elements.removeFileBtn && elements.clearAllBtn && elements.generateBtn && 
+           elements.copyPasswordBtn && elements.toggleSwitch;
+}
+
+function setupElementListeners(elements) {
+    elements.encryptionType.addEventListener("change", toggleEncryptionOptions);
+    elements.inputText.addEventListener("input", handleInputChange);
+    elements.form.addEventListener("submit", handleSubmit);
+    elements.removeFileBtn.addEventListener("click", removeFile);
+    elements.clearAllBtn.addEventListener("click", clearAll);
+    elements.generateBtn.addEventListener("click", generateRandomPassword);
+    elements.copyPasswordBtn.addEventListener("click", () => copyToClipboard("generated-password", "password-copy-feedback"));
+    elements.copyOutputBtn?.addEventListener("click", () => copyToClipboard("output-text", "output-copy-feedback"));
+    elements.toggleSwitch.addEventListener("change", updateToggleLabels);
+
+    // Add file input change listener
+    const fileInput = document.getElementById("file-input");
+    if (fileInput) {
+        fileInput.addEventListener("change", () => {
+            const removeBtn = document.getElementById("remove-file-btn");
+            if (removeBtn) {
+                removeBtn.style.display = fileInput.files.length > 0 ? "inline-block" : "none";
+            }
         });
-        formEl.addEventListener("submit", handleSubmit);
+    }
-        removeFileBtn.addEventListener("click", removeFile);
-        clearAllBtn.addEventListener("click", clearAll);
-        generateBtn.addEventListener("click", generateRandomPassword);
-        copyPasswordBtn.addEventListener("click", () => copyToClipboard("generated-password", "password-copy-feedback"));
-        copyOutputBtn?.addEventListener("click", () => copyToClipboard("output-text", "output-copy-feedback"));
-        toggleSwitch.addEventListener("change", updateToggleLabels);
 
-        const copySharedLinkBtn = document.getElementById("copy-shared-link");
+    setupShareLinkListeners(elements);
-        const sharedLinkEl = document.getElementById("shared-link");
+}
 
-        if (copySharedLinkBtn && sharedLinkEl) {
+function setupShareLinkListeners(elements) {
-            copySharedLinkBtn.addEventListener("click", () => {
+    if (elements.copyShareBtn && elements.shareLink) {
-                navigator.clipboard.writeText(sharedLinkEl.textContent.trim()).then(() => {
+        elements.copyShareBtn.addEventListener("click", () => {
+            const linkText = elements.shareLink.textContent.trim();
+            navigator.clipboard.writeText(linkText).then(() => {
                 const feedback = document.getElementById("shared-link-feedback");
                 if (feedback) {
-                        feedback.classList.remove("hidden");
+                    feedback.style.display = "block";
                     feedback.classList.add("show");
-
                     setTimeout(() => {
                         feedback.classList.remove("show");
-                            feedback.classList.add("hidden");
+                        setTimeout(() => {
+                            feedback.style.display = "none";
+                        }, 300);
                     }, 3000);
                 }
             });
         });
-
-            sharedLinkEl.scrollIntoView({ behavior: "smooth" });
-        }
     }
 }
 
-
+// ===== UI State Management =====
-
-
 function toggleEncryptionOptions() {
     const type = document.getElementById("encryption-type").value.trim().toLowerCase();
     const passwordInputWrapper = document.getElementById("password-input");
+    const fileSection = document.querySelector("#encoding-section #file-section");
     const isAdvanced = type.includes("advanced");
 
     if (passwordInputWrapper) {
@@ -77,11 +104,18 @@ function toggleEncryptionOptions() {
         }
     }
 
+    if (fileSection) {
+        if (isAdvanced) {
+            fileSection.classList.remove("hidden");
+        } else {
+            fileSection.classList.add("hidden");
+        }
+    }
+
     updateToggleLabels();
     toggleInputMode();
 }
 
-
 function updateToggleLabels() {
     const type = document.getElementById("encryption-type")?.value;
     const leftLabel = document.getElementById("toggle-left-label");
@@ -112,6 +146,7 @@ function toggleInputMode() {
     removeBtn.style.display = fileSelected ? "inline-block" : "none";
 }
 
+// ===== Form Handling =====
 async function handleSubmit(event) {
     event.preventDefault();
 
@@ -133,6 +168,10 @@ async function handleSubmit(event) {
             : decryptFile(fileInput, password);
     }
 
+    await handleTextOperation(encryptionType, operation, password);
+}
+
+async function handleTextOperation(encryptionType, operation, password) {
     const payload = {
         "encryption-type": encryptionType,
         operation: operation,
@@ -153,6 +192,7 @@ async function handleSubmit(event) {
     }
 }
 
+// ===== Utility Functions =====
 function removeFile() {
     const fileInput = document.getElementById("file-input");
     if (fileInput) fileInput.value = "";
@@ -168,19 +208,30 @@ function generateRandomPassword() {
         charset.charAt(Math.floor(Math.random() * charset.length))
     ).join("");
     const passwordField = document.getElementById("generated-password");
-    if (passwordField) passwordField.value = password;
+    if (passwordField) {
+        passwordField.value = password;
+        // Check if we should start Pacman
+        checkForPacman();
+    }
 }
 
 function copyToClipboard(elementId, feedbackId) {
     const el = document.getElementById(elementId);
     const feedback = document.getElementById(feedbackId);
-    if (!el || !feedback) return;
 
-    navigator.clipboard.writeText(el.textContent || el.value || "").then(() => {
+    if (!el || !el.value) return;
+
+    navigator.clipboard.writeText(el.value).then(() => {
+        if (feedback) {
+            feedback.style.display = "block";
             feedback.classList.add("show");
             setTimeout(() => {
                 feedback.classList.remove("show");
+                setTimeout(() => {
+                    feedback.style.display = "none";
+                }, 300); // Wait for fade-out animation to complete
             }, 3000);
+        }
     });
 }
 
@@ -196,6 +247,11 @@ function clearAll() {
     document.getElementById("encoding-section")?.style.setProperty("display", "block");
 }
 
+function handleInputChange() {
+    toggleInputMode();
+    checkForPacman();
+}
+
 function checkForPacman() {
     const val = document.getElementById("input-text").value.trim().toLowerCase();
     const pacSection = document.getElementById("pacman-section");
@@ -210,6 +266,7 @@ function checkForPacman() {
     }
 }
 
-
 function startPacman() { }
 function exitGame() { }
+
+

templates/403.html

@@ -3,20 +3,27 @@
 <head>
     <meta charset="UTF-8" />
     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
-    <title>403 - PacCrypt</title>
+    <meta name="description" content="PacCrypt - 403 Forbidden Access" />
+    <title>403 Forbidden - PacCrypt</title>
 
+    <!-- Favicon -->
     <link rel="icon" type="image/png" href="{{ url_for('static', filename='img/PacCrypt.png') }}" />
+    
+    <!-- Stylesheets -->
     <link href="https://fonts.googleapis.com/css2?family=Poppins:wght@300;400;600&display=swap" rel="stylesheet" />
     <link rel="stylesheet" href="{{ url_for('static', filename='css/styles.css') }}" />
+    
+    <!-- Scripts -->
     <script type="module" src="{{ url_for('static', filename='js/main.js') }}"></script>
 </head>
 <body class="dark">
-
+    <!-- Header -->
-    <header class="card mb-5">
+    <header class="card">
         <h1>PacCrypt</h1>
-        <p>Secure Encoding, Encryption and Password Generation</p>
+        <p>Encrypt and share your text or files securely</p>
     </header>
 
+    <!-- Main Content -->
     <main>
         <section class="card form-group" style="padding: 50px 30px;">
             <h2 style="color: #00ff99; font-size: 2.5em;">🚫 403 - Forbidden</h2>
@@ -24,6 +31,7 @@
                 Looks like this area is locked behind a secret ghost door! 🛡️👻
             </p>
 
+            <!-- Navigation -->
             <div class="button-group mt-4">
                 <a href="{{ url_for('index') }}">
                     <button type="button">⬅️ Return Home</button>
@@ -36,10 +44,8 @@
     <footer>
         <p>&copy; 2025 UnNaturalll-Dev. All rights reserved.</p>
         <a href="https://github.com/TySP-Dev" target="_blank" id="github-link">
-            <img src="\static\img\Github_logo.png"
+            <img src="\static\img\Github_logo.png" alt="GitHub Logo" width="100" />
-                 alt="GitHub Logo" width="100" />
         </a>
     </footer>
-
 </body>
 </html>

templates/404.html

@@ -3,27 +3,35 @@
 <head>
     <meta charset="UTF-8" />
     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
-    <title>404 - PacCrypt</title>
+    <meta name="description" content="PacCrypt - 404 Page Not Found" />
+    <title>404 Not Found - PacCrypt</title>
 
+    <!-- Favicon -->
     <link rel="icon" type="image/png" href="{{ url_for('static', filename='img/PacCrypt.png') }}" />
+    
+    <!-- Stylesheets -->
     <link href="https://fonts.googleapis.com/css2?family=Poppins:wght@300;400;600&display=swap" rel="stylesheet" />
     <link rel="stylesheet" href="{{ url_for('static', filename='css/styles.css') }}" />
+    
+    <!-- Scripts -->
     <script type="module" src="{{ url_for('static', filename='js/main.js') }}"></script>
 </head>
 <body class="dark">
-
+    <!-- Header -->
-    <header class="card mb-5">
+    <header class="card">
         <h1>PacCrypt</h1>
-        <p>Secure Encoding, Encryption and Password Generation</p>
+        <p>Encrypt and share your text or files securely</p>
     </header>
 
+    <!-- Main Content -->
     <main>
         <section class="card form-group" style="padding: 50px 30px;">
             <h2 style="color: #ff0066; font-size: 2.5em;">❓ 404 - Not Found</h2>
             <p class="mt-4" style="font-size: 1.2em; color: #cccccc;">
-                Whoops! That page doesn’t seem to exist. Maybe it got encrypted? 🧩🔐
+                Whoops! That page doesn't seem to exist. Maybe it got encrypted? 🧩🔐
             </p>
 
+            <!-- Navigation -->
             <div class="button-group mt-4">
                 <a href="{{ url_for('index') }}">
                     <button type="button">⬅️ Return Home</button>
@@ -36,10 +44,8 @@
     <footer>
         <p>&copy; 2025 UnNaturalll-Dev. All rights reserved.</p>
         <a href="https://github.com/TySP-Dev" target="_blank" id="github-link">
-            <img src="\static\img\Github_logo.png"
+            <img src="\static\img\Github_logo.png" alt="GitHub Logo" width="100" />
-                 alt="GitHub Logo" width="100" />
         </a>
     </footer>
-
 </body>
 </html>

templates/500.html

@@ -3,28 +3,36 @@
 <head>
     <meta charset="UTF-8" />
     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
-    <title>500 - PacCrypt</title>
+    <meta name="description" content="PacCrypt - 500 Internal Server Error" />
+    <title>500 Server Error - PacCrypt</title>
 
+    <!-- Favicon -->
     <link rel="icon" type="image/png" href="{{ url_for('static', filename='img/PacCrypt.png') }}" />
+    
+    <!-- Stylesheets -->
     <link href="https://fonts.googleapis.com/css2?family=Poppins:wght@300;400;600&display=swap" rel="stylesheet" />
     <link rel="stylesheet" href="{{ url_for('static', filename='css/styles.css') }}" />
+    
+    <!-- Scripts -->
     <script type="module" src="{{ url_for('static', filename='js/main.js') }}"></script>
 </head>
 <body class="dark">
-
+    <!-- Header -->
-    <header class="card mb-5">
+    <header class="card">
         <h1>PacCrypt</h1>
-        <p>Secure Encoding, Encryption and Password Generation</p>
+        <p>Encrypt and share your text or files securely</p>
     </header>
 
+    <!-- Main Content -->
     <main>
         <section class="card form-group" style="padding: 50px 30px;">
             <h2 style="color: #ff3300; font-size: 2.5em;">💥 500 - Server Error</h2>
             <p class="mt-4" style="font-size: 1.2em; color: #cccccc;">
                 Uh oh! The ghosts chomped the server wires. 🧟‍♂️👾
-                We’re working on patching it up.
+                We're working on patching it up.
             </p>
 
+            <!-- Navigation -->
             <div class="button-group mt-4">
                 <a href="{{ url_for('index') }}">
                     <button type="button">⬅️ Return Home</button>
@@ -37,10 +45,8 @@
     <footer>
         <p>&copy; 2025 UnNaturalll-Dev. All rights reserved.</p>
         <a href="https://github.com/TySP-Dev" target="_blank" id="github-link">
-            <img src="\static\img\Github_logo.png"
+            <img src="\static\img\Github_logo.png" alt="GitHub Logo" width="100" />
-                 alt="GitHub Logo" width="100" />
         </a>
     </footer>
-
 </body>
 </html>

templates/admin.html

@@ -1,97 +1,93 @@
 <!DOCTYPE html>
 <html lang="en">
 <head>
-    <meta charset="UTF-8">
+    <meta charset="UTF-8" />
-    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <meta name="description" content="PacCrypt - Admin Panel" />
     <title>Admin Panel - PacCrypt</title>
-    <link rel="icon" type="image/png" href="{{ url_for('static', filename='img/PacCrypt.png') }}">
+
-    <link href="https://fonts.googleapis.com/css2?family=Poppins:wght@300;400;600&display=swap" rel="stylesheet">
+    <!-- Favicon -->
-    <link rel="stylesheet" href="{{ url_for('static', filename='css/styles.css') }}">
+    <link rel="icon" type="image/png" href="{{ url_for('static', filename='img/PacCrypt.png') }}" />
+    
+    <!-- Stylesheets -->
+    <link href="https://fonts.googleapis.com/css2?family=Poppins:wght@300;400;600&display=swap" rel="stylesheet" />
+    <link rel="stylesheet" href="{{ url_for('static', filename='css/styles.css') }}" />
+    
+    <!-- Scripts -->
     <script type="module" src="{{ url_for('static', filename='js/main.js') }}"></script>
 </head>
 <body class="dark">
-
+    <!-- Header -->
-    <header class="card mb-5">
+    <header class="card">
         <h1>PacCrypt Admin Panel</h1>
         <p>Site Overview & Controls</p>
     </header>
 
+    <!-- Main Content -->
     <main>
+        <!-- Site Map Section -->
+        <section id="sitemap-section" class="card form-group">
+            <h2>💾 Server Management</h2>
             
-        <!-- Site Map -->
+            <div class="sitemap-header">
-        <section class="card form-group">
+                <button onclick="toggleSitemap()" style="margin-bottom: 10px;">Show Site Map</button>
-            <h2>🔍 Site Map</h2>
+            </div>
+            
+            <div id="sitemap-list" class="sitemap-content" style="display: none;">
                 <ul style="list-style: none; padding-left: 0;">
                     {% for route in routes %}
                     <li style="margin-bottom: 5px;">🔗 <code>{{ route }}</code></li>
                     {% endfor %}
                 </ul>
+            </div>
 
-            <div class="button-group mt-4">
+            <!-- Action Buttons -->
-                <a href="{{ url_for('restart_server') }}">
+            <div class="button-group">
-                    <button type="button">🔁 Restart Server</button>
+                <button onclick="restartServer()">🔁 Restart Server</button>
-                </a>
                 <a href="{{ url_for('admin_logout') }}">
                     <button type="button">🚪 Log Out</button>
                 </a>
             </div>
 
-            <form action="{{ url_for('admin_reset') }}" method="POST" onsubmit="return confirm('Are you sure you want to reset admin credentials?');">
+            <!-- Update and Settings Buttons -->
-                <button type="submit" class="mt-4" style="background-color: #b90000;">⚠️ Reset Admin</button>
+            <div class="button-group">
-            </form>
+                <button onclick="updateServer()">🔁 Pull Latest Changes</button>
+                <a href="{{ url_for('admin_settings') }}">
+                    <button type="button">🛠️ Manage Upload Settings</button>
+                </a>
+            </div>
 
-            <form action="{{ url_for('admin_clear_uploads') }}" method="POST"
+            <!-- Admin Reset and Clear Uploads Buttons -->
-                  onsubmit="return confirm('Are you sure you want to delete ALL uploaded files?');">
+            <div class="button-group">    
-                <button type="submit">🗑 Clear All Uploaded Files</button>
+                <button onclick="resetAdmin()" class="danger-button">⚠️ Reset Admin</button>
-            </form>
+                <button onclick="clearUploads()" class="danger-button">🗑 Clear Uploaded Files</button>
-
+            </div>
-            {% with messages = get_flashed_messages(with_categories=true, category_filter=['clear-feedback']) %}
-            {% for category, message in messages %}
-            <div class="copy-feedback show">{{ message }}</div>
-            {% endfor %}
-            {% endwith %}
 
+            <!-- Flash Messages -->
+            <div id="admin-feedback" class="copy-feedback" style="display: none;"></div>
         </section>
 
-        <!-- Change Admin Password -->
+        <!-- Password Change Section -->
-        <section class="card form-group mt-5">
+        <section id="password-change-section" class="card form-group">
             <h2>🔑 Change Admin Password</h2>
 
+            <!-- Password Feedback -->
             {% with messages = get_flashed_messages(with_categories=true, category_filter=['password-feedback']) %}
             {% for category, message in messages %}
             <div class="copy-feedback show">{{ message }}</div>
             {% endfor %}
             {% endwith %}
 
-
+            <!-- Password Change Form -->
-
             <form method="POST" action="{{ url_for('admin_change_password') }}">
-                <input type="password" name="current_password" placeholder="Current Password" required>
+                <input type="password" name="current_password" placeholder="Current Password" required />
-                <input type="password" name="new_password" placeholder="New Password" required>
+                <input type="password" name="new_password" placeholder="New Password" required />
                 <button type="submit">Update Password</button>
             </form>
         </section>
 
-        <!-- Update Server -->
+        <!-- Server Status Section -->
-        <section class="card form-group mt-5">
+        <section id="server-status-section" class="card form-group">
-            <h2>📦 Update Server from GitHub</h2>
-            <form method="POST" action="{{ url_for('admin_update_server') }}">
-                <button type="submit" onclick="return confirm('Are you sure you want to pull the latest changes from GitHub?')">
-                    🔁 Pull Latest Changes
-                </button>
-            </form>
-
-            {% with update_msgs = get_flashed_messages(category_filter=["update"]) %}
-            {% if update_msgs %}
-            <div class="copy-feedback show" style="margin-top: 12px;">
-                {{ update_msgs[0] | safe }}
-            </div>
-            {% endif %}
-            {% endwith %}
-        </section>
-
-        <!-- Server Status -->
-        <section class="card form-group mt-5">
             <h2>📊 Server Status</h2>
             <ul style="list-style: none; padding-left: 0;">
                 <li>🕒 Uptime: <code>{{ server_info.uptime }}</code></li>
@@ -101,35 +97,22 @@
             </ul>
         </section>
 
-        <!-- Server Logs -->
+        <!-- Server Logs Section -->
-        <section class="card form-group mt-5">
+        <section id="server-logs-section" class="card form-group">
             <h2>📜 Server Logs</h2>
             <button onclick="toggleLogs()" style="margin-bottom: 10px;">🔽 Show/Hide Logs</button>
             <div id="logLoader" style="display: none; margin-bottom: 10px;">Loading logs...</div>
-            <pre id="logContainer" style="display: none; max-height: 400px; overflow-y: auto; background: black; color: lime; padding: 10px; border-radius: 8px;"></pre>
+            <pre id="logContainer" style="display: none;"></pre>
         </section>
 
-        <!-- System Settings -->
-        <section class="card form-group mt-5">
-            <h2>🧩 System Configuration</h2>
-            <p>You can manage upload storage, limits, and expiration policies here:</p>
-            <a href="{{ url_for('admin_settings') }}">
-                <button type="button">🛠️ Manage Upload Settings</button>
-            </a>
-        </section>
-
-    </main>
-
     <!-- Footer -->
     <footer>
         <p>&copy; 2025 UnNaturalll-Dev. All rights reserved.</p>
         <a href="https://github.com/TySP-Dev" target="_blank" id="github-link">
-            <img src="\static\img\Github_logo.png"
+            <img src="\static\img\Github_logo.png" alt="GitHub Logo" width="100" />
-                 alt="GitHub Logo" width="100" />
         </a>
         <a href="{{ url_for('sitemap') }}">
-            <img src="\static\img\sitemap.png"
+            <img src="\static\img\sitemap.png" alt="Sitemap Png" width="55" />
-                 alt="Sitemap Png" width="55" />
         </a>
     </footer>
 
@@ -151,5 +134,124 @@
     }
     </script>
 
+    <script>
+    function toggleSitemap() {
+        const list = document.getElementById('sitemap-list');
+        const button = document.querySelector('.sitemap-header button');
+        
+        if (list.style.display === 'none') {
+            list.style.display = 'block';
+            button.textContent = 'Hide Site Map';
+        } else {
+            list.style.display = 'none';
+            button.textContent = 'Show Site Map';
+        }
+    }
+
+    async function restartServer() {
+        if (!confirm('Are you sure you want to restart the server? This will temporarily disconnect all users.')) return;
+        
+        try {
+            const response = await fetch('{{ url_for("restart_server") }}', {
+                method: 'POST',
+                headers: {
+                    'Content-Type': 'application/json'
+                }
+            });
+            
+            const data = await response.json();
+            
+            if (response.ok) {
+                showFeedback(data.message);
+                // Add a small delay before redirecting to allow the server to restart
+                setTimeout(() => {
+                    window.location.reload();
+                }, 2000);
+            } else {
+                showFeedback(data.error || 'Failed to restart server.');
+            }
+        } catch (error) {
+            showFeedback('Failed to restart server.');
+        }
+    }
+
+    async function updateServer() {
+        if (!confirm('Are you sure you want to pull the latest changes from GitHub?')) return;
+        
+        try {
+            const response = await fetch('{{ url_for("admin_update_server") }}', {
+                method: 'POST',
+                headers: {
+                    'Content-Type': 'application/json'
+                }
+            });
+            
+            const data = await response.json();
+            
+            if (response.ok) {
+                showFeedback(data.message);
+            } else {
+                showFeedback(data.error || 'Failed to update server from GitHub.');
+            }
+        } catch (error) {
+            showFeedback('Failed to update server from GitHub.');
+        }
+    }
+
+    async function resetAdmin() {
+        if (!confirm('Are you sure you want to reset admin credentials?')) return;
+        
+        try {
+            const response = await fetch('{{ url_for("admin_reset") }}', {
+                method: 'POST',
+                headers: {
+                    'Content-Type': 'application/json'
+                }
+            });
+            
+            if (response.ok) {
+                showFeedback('Admin credentials reset. Please create new credentials.');
+                setTimeout(() => {
+                    window.location.href = '{{ url_for("admin_setup") }}';
+                }, 2000);
+            }
+        } catch (error) {
+            showFeedback('Failed to reset admin credentials.');
+        }
+    }
+
+    async function clearUploads() {
+        if (!confirm('Are you sure you want to delete ALL uploaded files?')) return;
+        
+        try {
+            const response = await fetch('{{ url_for("admin_clear_uploads") }}', {
+                method: 'POST',
+                headers: {
+                    'Content-Type': 'application/json'
+                }
+            });
+            
+            if (response.ok) {
+                showFeedback('All uploaded files have been cleared.');
+            }
+        } catch (error) {
+            showFeedback('Failed to clear uploaded files.');
+        }
+    }
+
+    function showFeedback(message) {
+        const feedback = document.getElementById('admin-feedback');
+        feedback.textContent = message;
+        feedback.style.display = 'block';
+        feedback.classList.add('show');
+        
+        setTimeout(() => {
+            feedback.classList.remove('show');
+            setTimeout(() => {
+                feedback.style.display = 'none';
+            }, 300);
+        }, 3000);
+    }
+    </script>
 </body>
 </html>

templates/admin_login.html

@@ -1,34 +1,45 @@
 <!DOCTYPE html>
 <html lang="en">
 <head>
-  <meta charset="UTF-8">
+    <meta charset="UTF-8" />
-  <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <meta name="description" content="PacCrypt - Admin Login" />
     <title>Admin Login - PacCrypt</title>
-  <link rel="icon" type="image/png" href="{{ url_for('static', filename='img/PacCrypt.png') }}">
+
-  <link href="https://fonts.googleapis.com/css2?family=Poppins:wght@300;400;600&display=swap" rel="stylesheet">
+    <!-- Favicon -->
-  <link rel="stylesheet" href="{{ url_for('static', filename='css/styles.css') }}">
+    <link rel="icon" type="image/png" href="{{ url_for('static', filename='img/PacCrypt.png') }}" />
+    
+    <!-- Stylesheets -->
+    <link href="https://fonts.googleapis.com/css2?family=Poppins:wght@300;400;600&display=swap" rel="stylesheet" />
+    <link rel="stylesheet" href="{{ url_for('static', filename='css/styles.css') }}" />
+    
+    <!-- Scripts -->
     <script type="module" src="{{ url_for('static', filename='js/main.js') }}"></script>
 </head>
 <body class="dark">
-
+    <!-- Header -->
-    <header class="card mb-5">
+    <header class="card">
         <h1>PacCrypt Admin</h1>
         <p>Administrator Login</p>
     </header>
 
+    <!-- Main Content -->
     <main>
+        <!-- Login Form Section -->
         <section class="card form-group">
             <h2>🔑 Admin Login</h2>
 
+            <!-- Flash Messages -->
             {% with messages = get_flashed_messages() %}
             {% if messages %}
             <p style="color: red;">{{ messages[0] }}</p>
             {% endif %}
             {% endwith %}
 
+            <!-- Login Form -->
             <form method="POST">
-                <input type="text" name="username" placeholder="Username" required>
+                <input type="text" name="username" placeholder="Username" required />
-                <input type="password" name="password" placeholder="Password" required>
+                <input type="password" name="password" placeholder="Password" required />
                 <div class="button-group mt-3">
                     <button type="submit">🚪 Log In</button>
                 </div>
@@ -36,13 +47,12 @@
         </section>
     </main>
 
+    <!-- Footer -->
     <footer>
         <p>&copy; 2025 UnNaturalll-Dev. All rights reserved.</p>
         <a href="https://github.com/TySP-Dev" target="_blank" id="github-link">
-            <img src="\static\img\Github_logo.png"
+            <img src="\static\img\Github_logo.png" alt="GitHub Logo" width="100" />
-                 alt="GitHub Logo" width="100" />
         </a>
     </footer>
-
 </body>
 </html>

templates/admin_settings.html

@@ -1,24 +1,32 @@
 <!DOCTYPE html>
 <html lang="en">
 <head>
-    <meta charset="UTF-8">
+    <meta charset="UTF-8" />
-    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <meta name="description" content="PacCrypt - Admin Settings" />
     <title>Admin Settings - PacCrypt</title>
-    <link rel="icon" type="image/png" href="{{ url_for('static', filename='img/PacCrypt.png') }}">
+
-    <link href="https://fonts.googleapis.com/css2?family=Poppins:wght@300;400;600&display=swap" rel="stylesheet">
+    <!-- Favicon -->
-    <link rel="stylesheet" href="{{ url_for('static', filename='css/styles.css') }}">
+    <link rel="icon" type="image/png" href="{{ url_for('static', filename='img/PacCrypt.png') }}" />
+    
+    <!-- Stylesheets -->
+    <link href="https://fonts.googleapis.com/css2?family=Poppins:wght@300;400;600&display=swap" rel="stylesheet" />
+    <link rel="stylesheet" href="{{ url_for('static', filename='css/styles.css') }}" />
 </head>
 <body class="dark">
-
+    <!-- Header -->
-    <header class="card mb-5">
+    <header class="card">
         <h1>PacCrypt Admin Settings</h1>
-        <p>Manage upload configuration securely</p>
+        <p>Manage upload configuration</p>
     </header>
 
+    <!-- Main Content -->
     <main>
+        <!-- Settings Form Section -->
         <section class="card form-group">
             <h2>⚙️ Upload Settings</h2>
 
+            <!-- Flash Messages -->
             {% with messages = get_flashed_messages() %}
             {% if messages %}
             <ul style="color: lime;">
@@ -29,16 +37,18 @@
             {% endif %}
             {% endwith %}
 
+            <!-- Settings Form -->
             <form method="POST">
                 <label for="upload_folder">Upload Folder Path:</label>
-                <input type="text" name="upload_folder" id="upload_folder" value="{{ settings.upload_folder }}" required>
+                <input type="text" name="upload_folder" id="upload_folder" value="{{ settings.upload_folder }}" required />
 
                 <label for="max_file_age_days">Max File Age (Days):</label>
-                <input type="number" name="max_file_age_days" id="max_file_age_days" value="{{ settings.max_file_age_days }}" min="1" required>
+                <input type="number" name="max_file_age_days" id="max_file_age_days" value="{{ settings.max_file_age_days }}" min="1" required />
 
                 <label for="max_file_size_gb">Max File Size (GB):</label>
-                <input type="number" name="max_file_size_gb" id="max_file_size_gb" value="{{ settings.max_file_size_bytes // (1024 * 1024 * 1024) }}" step="0.1" min="0.1" required>
+                <input type="number" name="max_file_size_gb" id="max_file_size_gb" value="{{ settings.max_file_size_bytes // (1024 * 1024 * 1024) }}" step="0.1" min="0.1" required />
 
+                <!-- Action Buttons -->
                 <div class="button-group mt-4">
                     <button type="submit">💾 Save Settings</button>
                     <a href="{{ url_for('admin_page') }}">
@@ -53,10 +63,8 @@
     <footer>
         <p>&copy; 2025 UnNaturalll-Dev. All rights reserved.</p>
         <a href="https://github.com/TySP-Dev" target="_blank" id="github-link">
-            <img src="\static\img\Github_logo.png"
+            <img src="\static\img\Github_logo.png" alt="GitHub Logo" width="100" />
-                 alt="GitHub Logo" width="100" />
         </a>
     </footer>
-
 </body>
 </html>

templates/admin_setup.html

@@ -1,34 +1,45 @@
 <!DOCTYPE html>
 <html lang="en">
 <head>
-    <meta charset="UTF-8">
+    <meta charset="UTF-8" />
-    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <meta name="description" content="PacCrypt - Admin Setup" />
     <title>Admin Setup - PacCrypt</title>
-    <link rel="icon" type="image/png" href="{{ url_for('static', filename='img/PacCrypt.png') }}">
+
-    <link href="https://fonts.googleapis.com/css2?family=Poppins:wght@300;400;600&display=swap" rel="stylesheet">
+    <!-- Favicon -->
-    <link rel="stylesheet" href="{{ url_for('static', filename='css/styles.css') }}">
+    <link rel="icon" type="image/png" href="{{ url_for('static', filename='img/PacCrypt.png') }}" />
+    
+    <!-- Stylesheets -->
+    <link href="https://fonts.googleapis.com/css2?family=Poppins:wght@300;400;600&display=swap" rel="stylesheet" />
+    <link rel="stylesheet" href="{{ url_for('static', filename='css/styles.css') }}" />
+    
+    <!-- Scripts -->
     <script type="module" src="{{ url_for('static', filename='js/main.js') }}"></script>
 </head>
 <body class="dark">
-
+    <!-- Header -->
-    <header class="card mb-5">
+    <header class="card">
         <h1>PacCrypt Admin</h1>
-        <p>Secure Admin Setup</p>
+        <p>Admin Setup</p>
     </header>
 
+    <!-- Main Content -->
     <main>
+        <!-- Setup Form Section -->
         <section class="card form-group">
             <h2>🛡️ Create Admin Account</h2>
 
+            <!-- Flash Messages -->
             {% with messages = get_flashed_messages() %}
             {% if messages %}
             <p style="color: red;">{{ messages[0] }}</p>
             {% endif %}
             {% endwith %}
 
+            <!-- Setup Form -->
             <form method="POST">
-                <input type="text" name="username" placeholder="Username" required>
+                <input type="text" name="username" placeholder="Username" required />
-                <input type="password" name="password" placeholder="Password" required>
+                <input type="password" name="password" placeholder="Password" required />
                 <div class="button-group mt-3">
                     <button type="submit">📝 Set Credentials</button>
                 </div>
@@ -40,10 +51,8 @@
     <footer>
         <p>&copy; 2025 UnNaturalll-Dev. All rights reserved.</p>
         <a href="https://github.com/TySP-Dev" target="_blank" id="github-link">
-            <img src="\static\img\Github_logo.png"
+            <img src="\static\img\Github_logo.png" alt="GitHub Logo" width="100" />
-                 alt="GitHub Logo" width="100" />
         </a>
     </footer>
-
 </body>
 </html>

templates/index.html

@@ -3,31 +3,38 @@
 <head>
     <meta charset="UTF-8" />
     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
-    <title>PacCrypt</title>
+    <meta name="description" content="PacCrypt - Secure text and file encryption with password generation" />
+    <title>PacCrypt - Encrypt and share your text or files securely</title>
+    
+    <!-- Favicon -->
     <link rel="icon" href="{{ url_for('static', filename='img/PacCrypt.png') }}" type="image/png" />
+    
+    <!-- Stylesheets -->
     <link rel="stylesheet" href="{{ url_for('static', filename='css/styles.css') }}" />
     <link href="https://fonts.googleapis.com/css2?family=Poppins:wght@300;400;600&display=swap" rel="stylesheet">
+    
+    <!-- Scripts -->
     <script type="module" src="{{ url_for('static', filename='js/main.js') }}" defer></script>
 </head>
 <body class="dark">
-
+    <!-- Header -->
-    <header class="card mb-5">
+    <header class="card">
         <h1>PacCrypt</h1>
         <p>Encrypt and share your text or files securely</p>
     </header>
 
+    <!-- Main Content -->
     <main>
-
+        <!-- Password Generator Section -->
-        <!-- Password Generator -->
+        <section id="password-generator-section" class="card form-group">
-        <section class="card form-group mt-5">
             <h2>🔑 Password Generator</h2>
             <div class="form-group">
                 <input type="text" id="generated-password" readonly />
                 <div class="button-group">
                     <button type="button" id="generate-btn">🎲 Generate</button>
-                    <button type="button" id="copy-btn">📋 Copy</button>
+                    <button type="button" id="copy-btn">📋 Copy Password</button>
                 </div>
-                <div id="password-copy-feedback" class="copy-feedback">Copied to clipboard!</div>
+                <div id="password-copy-feedback" class="copy-feedback">Password copied to clipboard!</div>
             </div>
         </section>
 
@@ -43,12 +50,11 @@
             </div>
         </section>
 
-
+        <!-- Encryption/Decryption Section -->
-        <!-- Encrypt & Decrypt Section -->
+        <section id="encoding-section" class="card form-group">
-        <section class="card form-group" id="encoding-section">
             <h2>🔐 Encrypt & Decrypt</h2>
             <form id="crypto-form" class="form-group">
-
+                <!-- Encryption Type Selection -->
                 <div class="form-group">
                     <label for="encryption-type">Encryption Type:</label>
                     <select id="encryption-type">
@@ -57,6 +63,7 @@
                     </select>
                 </div>
 
+                <!-- Operation Toggle -->
                 <div class="toggle-container">
                     <span id="toggle-left-label">Encrypt</span>
                     <label class="switch">
@@ -66,37 +73,44 @@
                     <span id="toggle-right-label">Decrypt</span>
                 </div>
 
+                <!-- Text Input Section -->
                 <div id="text-section" class="form-group">
                     <textarea id="input-text" placeholder="Enter your message..."></textarea>
                 </div>
 
+                <!-- Password Input -->
                 <div id="password-input" class="form-group">
-                    <input type="password" id="password" placeholder="Password (AES only)" />
+                    <input type="password" id="password" placeholder="Encryption/Decryption Password" />
                 </div>
 
+                <!-- File Input Section -->
                 <div id="file-section" class="form-group" style="display: none;">
                     <input type="file" id="file-input" />
                     <button type="button" id="remove-file-btn">🗑 Remove File</button>
                 </div>
 
-                <div class="button-group mt-3">
+                <!-- Action Buttons -->
-                    <button type="submit">⚡ Execute</button>
-                    <button type="button" id="clear-all-btn">🧹 Clear All</button>
-                </div>
-
-                <textarea id="output-text" readonly placeholder="Result will appear here..."></textarea>
                 <div class="button-group">
+                    <button type="submit">⚡ Execute</button>
                     <button type="button" id="copy-output-btn">📋 Copy Output</button>
                 </div>
-                <div id="output-copy-feedback" class="copy-feedback">Copied to clipboard!</div>
+
+                <!-- Output Section -->
+                <textarea id="output-text" readonly placeholder="Encrypted/Decrypted text will appear here..."></textarea>
+                <div class="button-group">
+                    <button type="button" id="clear-all-btn" class="danger-button">🧹 Clear All</button>
+                </div>
+                <div id="output-copy-feedback" class="copy-feedback">Text copied to clipboard!</div>
             </form>
         </section>
 
-        <!-- PacCrypt Sharing -->
+        <!-- File Sharing Section -->
-        <section class="card form-group mt-5">
+        <section id="sharing-section" class="card form-group">
-            <h2>📤 PacCrypt Sharing</h2>
+            <h2>📤 PacCrypt Share</h2>
-            <p>Securely share a file with encryption and a pickup password.</p>
+            <h3>Securely share encrypted files.</h3>
+            <p>Do not lose your passwords, data will be lost forever!</p>
 
+            <!-- Flash Messages -->
             {% with messages = get_flashed_messages() %}
             {% if messages %}
             <ul style="color: lime; list-style: none; padding-left: 0;">
@@ -104,10 +118,12 @@
                 <li>
                     {{ message | safe }}
                     {% if "pickup" in message %}
-                    <br />
+                    <div class="share-link-container">
-                    <span id="shared-link">{{ message.split(" at ")[1] }}</span>
+                        <a id="share-link" href="{{ message.split(' at ')[1] }}" target="_blank">{{ message.split(" at ")[1] }}</a>
-                    <button type="button" id="copy-shared-link">📋 Copy Link</button>
+                        <!--- <span id="share-link">{{ message.split(" at ")[1] }}</span> --->
-                    <div id="shared-link-feedback" class="copy-feedback">Copied to clipboard!</div>
+                        <button type="button" id="copy-share-btn">📋 Copy Link</button>
+                        <div id="shared-link-feedback" class="copy-feedback">Link copied to clipboard!</div>
+                    </div>
                     {% endif %}
                 </li>
                 {% endfor %}
@@ -116,31 +132,75 @@
             {% endif %}
             {% endwith %}
 
-            <form method="POST" enctype="multipart/form-data" class="form-group">
+            <!-- File Upload Form -->
+            <!-- Share Link Container (initially hidden) -->
+            <div class="share-link-container" id="share-link-container" style="display: none;">
+                <a id="share-link" href="#" target="_blank"></a>
+                <button type="button" id="copy-share-btn">📋 Copy Link</button>
+                <div id="shared-link-feedback" class="copy-feedback">Link copied to clipboard!</div>
+            </div>
+            <form method="POST" enctype="multipart/form-data" class="form-group" id="upload-form">
                 <input type="file" name="file" id="upload-file" required />
-                <input type="password" name="enc_password" placeholder="Encryption Password" required />
+                <input type="password" name="enc_password" placeholder="Encryption/Decryption Password" required />
                 <input type="password" name="pickup_password" placeholder="Pickup Password" required />
-                <div class="button-group mt-3">
+                <div class="button-group">
                     <button type="submit">🔒 Upload and Generate Link</button>
                 </div>
             </form>
 
+            <script>
+                document.getElementById('upload-form').addEventListener('submit', async (e) => {
+                    e.preventDefault();
+                    const formData = new FormData(e.target);
+                    
+                    try {
+                        const response = await fetch('/', {
+                            method: 'POST',
+                            body: formData
+                        });
+                        const data = await response.json();
+                        
+                        if (data.error) {
+                            alert(data.error);
+                            return;
+                        }
+                        
+                        if (data.success && data.pickup_url) {
+                            const shareLink = document.getElementById('share-link');
+                            const shareLinkContainer = document.getElementById('share-link-container');
+                            
+                            shareLink.href = data.pickup_url;
+                            shareLink.textContent = data.pickup_url;
+                            shareLinkContainer.style.display = 'flex';
+                            
+                            // Clear form fields
+                            document.getElementById('upload-file').value = '';
+                            document.getElementsByName('enc_password')[0].value = '';
+                            document.getElementsByName('pickup_password')[0].value = '';
+                            
+                            // Scroll to the share link
+                            shareLinkContainer.scrollIntoView({ behavior: 'smooth' });
+                        }
+                    } catch (error) {
+                        alert('Error uploading file: ' + error.message);
+                    }
+                });
+            </script>
+
+            <!-- File Limits Information -->
             <p class="text-muted mt-3" style="font-size: 0.85em;">
                 Files expire after {{ settings.max_file_age_days }} days.<br />
                 Max file size: {{ settings.max_file_size_bytes // (1024 * 1024 * 1024) }} GB.
             </p>
         </section>
-
     </main>
 
     <!-- Footer -->
     <footer>
         <p>&copy; 2025 UnNaturalll-Dev. All rights reserved.</p>
         <a href="https://github.com/TySP-Dev" target="_blank" id="github-link">
-            <img src="\static\img\Github_logo.png"
+            <img src="\static\img\Github_logo.png" alt="GitHub Logo" width="100" />
-                 alt="GitHub Logo" width="100" />
         </a>
     </footer>
-
 </body>
 </html>

templates/pickup.html

@@ -1,24 +1,32 @@
 <!DOCTYPE html>
 <html lang="en">
 <head>
-    <meta charset="UTF-8">
+    <meta charset="UTF-8" />
-    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <meta name="description" content="PacCrypt - File Pickup" />
     <title>Pickup File - PacCrypt</title>
-    <link rel="icon" type="image/png" href="{{ url_for('static', filename='img/PacCrypt.png') }}">
+
-    <link href="https://fonts.googleapis.com/css2?family=Poppins:wght@300;400;600&display=swap" rel="stylesheet">
+    <!-- Favicon -->
-    <link rel="stylesheet" href="{{ url_for('static', filename='css/styles.css') }}">
+    <link rel="icon" type="image/png" href="{{ url_for('static', filename='img/PacCrypt.png') }}" />
+    
+    <!-- Stylesheets -->
+    <link href="https://fonts.googleapis.com/css2?family=Poppins:wght@300;400;600&display=swap" rel="stylesheet" />
+    <link rel="stylesheet" href="{{ url_for('static', filename='css/styles.css') }}" />
 </head>
 <body class="dark">
-
+    <!-- Header -->
-    <header class="card mb-5">
+    <header class="card">
         <h1>PacCrypt Pickup</h1>
-        <p>Enter passwords to retrieve your file securely</p>
+        <p>Enter passwords to retrieve your file</p>
     </header>
 
+    <!-- Main Content -->
     <main>
+        <!-- Pickup Form Section -->
         <section class="card form-group">
             <h2>🔐 Decrypt and Download</h2>
 
+            <!-- Flash Messages -->
             {% with messages = get_flashed_messages() %}
             {% if messages %}
             <ul style="color: red;">
@@ -29,16 +37,18 @@
             {% endif %}
             {% endwith %}
 
-            <form method="POST">
+            <!-- Pickup Form -->
-                <input type="password" name="pickup_password" placeholder="Pickup Password" required>
+            <form method="POST" class="pickup-form">
-                <input type="password" name="enc_password" placeholder="Encryption Password" required>
+                <input type="password" name="pickup_password" placeholder="Pickup Password" required autocomplete="off" />
+                <input type="password" name="enc_password" placeholder="Encryption Password" required autocomplete="off" />
                 <div class="button-group mt-3">
-                    <button type="submit">📥 Decrypt and Download</button>
+                    <button type="submit" class="download-btn">📥 Decrypt and Download</button>
                 </div>
             </form>
         </section>
 
-        <section class="card form-group mt-5">
+        <!-- File ID Section -->
+        <section class="card form-group">
             <p style="font-size: 0.9em; color: gray;">Link ID: <code>{{ file_id }}</code></p>
         </section>
     </main>
@@ -47,10 +57,8 @@
     <footer>
         <p>&copy; 2025 UnNaturalll-Dev. All rights reserved.</p>
         <a href="https://github.com/TySP-Dev" target="_blank" id="github-link">
-            <img src="\static\img\Github_logo.png"
+            <img src="\static\img\Github_logo.png" alt="GitHub Logo" width="100" />
-                 alt="GitHub Logo" width="100" />
         </a>
     </footer>
-
 </body>
 </html>