UI Changes and better phone experience.

Update README.md
Small changed
2025-05-14 05:00:12 -10:00 · 2025-05-04 13:30:40 -10:00 · 2025-05-04 13:29:08 -10:00 · 2025-05-01 21:58:23 -10:00 · 2025-05-01 21:49:06 -10:00 · 2025-05-01 21:23:13 -10:00
20 changed files with 2753 additions and 2011 deletions
@@ -1,177 +1,268 @@
-# PacCrypt WebApp
-
-**PacCrypt** is a secure, feature-rich web app for encrypting and decrypting text and files — built with Flask, JavaScript, and AES-GCM encryption.  
-Now with an admin control panel, GitHub updater, and a built-in Pac-Man easter egg! 🕹️
-
-Live demo: [paccrypt.unnaturalll.dev](http://paccrypt.unnaturalll.dev)
-
---
-
-## ✨ Features
-
- 🔒 Basic and Advanced Encryption for Text & Files
- 📁 Secure File Uploads with Pickup Passwords
- 🔑 Random Password Generator
- 🎮 Hidden Pac-Man Game — type `pacman` to play
- 🧠 Smart UI: Auto-switches input sections, toggles encryption labels
- 📋 Clipboard Copy Feedback with styled status boxes
- 🧾 Admin Panel:
-  - Site map with live route list
-  - Server restart & GitHub update button
-  - Secure admin credential management
-  - Server logs & upload cleanup
- 🧩 System Settings Page for upload config
- 📜 Custom 403, 404, and 500 Error Pages
- 🤖 robots.txt and /sitemap for crawlers
- 📱 Mobile-Responsive UI
-
---
-
-## 👨‍💻 Installation
-
-### 📋 Prerequisites
-
- Python 3.7+
- Flask 3+
- Cryptography 42+
- Waitress 2.1+
- Git (for update feature)
- Nginx (recommended)
-
---
-
-### ⚡ Quick Setup
-
-```bash
-git clone https://github.com/TySP-Dev/PacCrypt.git
-cd paccrypt-webapp-final
-python -m venv venv
-source venv/bin/activate  # or venv\Scripts\activate on Windows
-pip install -r requirements.txt
-```
-
-Then run:
-
- Development Mode:
-  ```bash
-  ./start_dev.sh  # or start_dev.bat
-  ```
-
- Production Mode:
-  ```bash
-  ./start_prod.sh  # or start_prod.bat
-  ```
-
-Visit [http://127.0.0.1:5000](http://127.0.0.1:5000)
-
---
-
-## 🧭 Navigation & Usage
-
-### 🔐 Encrypt & Decrypt
-
- Choose between Basic Cipher or Advanced AES
- Type your message or upload a file
- Enter password (if AES)
- Select mode using toggle (Encrypt/Decrypt)
- Hit Execute
-
-### 📤 Share Files
-
- Upload a file with two passwords:
-  - Encryption password
-  - Pickup password
- Get a shareable URL and click 📋 Copy Link
-
-### 🔑 Generate Passwords
-
- Click Generate
- Then hit 📋 Copy
-
-### 🎮 Pac-Man Game
-
- Type `pacman` in the input box
- Game appears with Restart/Exit controls
- Classic arrow key controls 🕹️
-
---
-
-## 🛠️ Admin Panel
-
-Visit `/adminpage` after setting up credentials at `/admin-setup`.
-
-Features:
- 🔄 Restart server
- 🔃 Update from GitHub (git pull)
- 🧽 Clear uploads
- 🔐 Change admin password
- 📝 View logs
- ⚙️ Adjust upload settings
-
---
-
-## 🛡️ Deployment Tips
-
-Minimal Nginx config:
-
-```nginx
-server {
-    listen 80;
-    server_name yourdomain.com;
-
-    location / {
-        proxy_pass http://127.0.0.1:5000;
-        proxy_set_header Host $host;
-        proxy_set_header X-Real-IP $remote_addr;
-        proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;
-    }
-}
-```
-
-Use Let's Encrypt to add SSL/TLS support.
-
---
-
-## 🗂️ Project Structure
-
-```
-paccrypt-webapp-final/
-├── app.py
-├── requirements.txt
-├── README.md
-├── templates/
-│   ├── index.html
-│   ├── 404.html
-│   └── 403.html
-│   └── 500.html
-│   └── admin.html
-│   └── admin_login.html
-│   └── admin_settings.html
-│   └── admin_setup.html
-│   └── pickup.html
-├── static/
-│   ├── css/
-│   │   └── styles.css
-│   ├── js/
-│   │   └── ui.js
-│   │   └── pacman.js
-│   │   └── main.js
-│   │   └── fileops.js
-│   │   └── encryption.js
-│   ├── img/
-│   │   └── PacCrypt.png
-│   │   └── Github_logo.png
-│   │   └── sitemap.png
-│   └── audio/
-│       └── chomp.mp3
-├── start_dev.bat
-├── start_prod.bat
-├── start_dev.sh
-├── start_prod.sh
-```
-
---
-
-## 📄 License
-
-MIT © [TySP-Dev](https://github.com/TySP-Dev)
+# PacCrypt
+
+**PacCrypt** is a secure, feature-rich web app for encrypting and decrypting text and files — built with Flask, JavaScript, and AES-GCM encryption.  
+Now with an admin control panel, GitHub updater, and a built-in Pac-Man easter egg! 🕹️
+
+Officially Hosted Here: [paccrypt.unnaturalll.dev](http://paccrypt.unnaturalll.dev)
+
+---
+
+## ✨ Features
+
+- 🔒 Basic and Advanced Encryption for Text & Files
+- 📁 Secure File Uploads with Pickup Passwords
+- 🔑 Random Password Generator
+- 🎮 Hidden Pac-Man Game — type `pacman` to play
+- 🧠 Smart UI: Auto-switches input sections, toggles encryption labels
+- 📋 Clipboard Copy Feedback with styled status boxes
+- 🧾 Admin Panel:
+  - Site map with live route list
+  - Server restart & GitHub update button
+  - Secure admin credential management
+  - Server logs & upload cleanup
+- 🧩 System Settings Page for upload config
+- 📜 Custom 403, 404, and 500 Error Pages
+- 🤖 robots.txt and /sitemap for crawlers
+- 📱 Mobile-Responsive UI
+
+---
+
+## 👨‍💻 Installation
+
+### 📋 Prerequisites
+
+- Python 3.7+
+- Flask 3+
+- Cryptography 42+
+- Waitress 2.1+
+- Git (For update feature)
+- Nginx (Recommended)
+- Cockpit (Recommended if hosted on **Linux**)
+
+---
+
+### ⚡ Quick Setup
+
+```bash
+git clone https://github.com/TySP-Dev/PacCrypt.git
+cd paccrypt-webapp-final
+python -m venv venv
+source venv/bin/activate  # or venv\Scripts\activate on Windows
+pip install -r requirements.txt
+```
+
+Then run:
+
+- Development Mode:
+  ```bash
+  ./start_dev.sh  #<-- start_dev.bat (Windows)
+  ```
+
+- Production Mode:
+  ```bash
+  ./start_prod.sh  #<-- start_prod.bat (Windows)
+  ```
+
+Visit [http://127.0.0.1:5000](http://127.0.0.1:5000) or [http://localhost:5000](http://localhost:5000) - *If* you **are** on the host system
+Visit http://hosts_private_ip - *If* you are **not** on the host system
+
+---
+
+## 🧭 Navigation & Usage
+
+### 🔑 Generate Passwords
+
+- Click Generate
+- Then hit `📋 Copy Password`
+- **Note:** This is also used as a seed generator for the Pac-Man *like* game
+
+### 🔐 Encrypt & Decrypt
+
+- Choose between Basic Cipher or Advanced AES
+- Select mode using toggle (Encrypt/Decrypt)
+- Type your message or upload a file
+- Enter password (Advanced AES)
+- Hit Execute
+- Then hit `📋 Copy Output`
+
+### 📤 Share Files
+
+- Upload a file with two passwords:
+  - Encryption password
+  - Pickup password
+- Get a shareable URL and click `📋 Copy Link`
+
+### 🎮 Pac-Man *like* Game
+
+- Type `pacman` in the input box
+- Game appears with `Restart` and `Exit` buttons
+- Arrow key and Swipe controls 🕹️
+- Game restarts and a new seed is generated once all dots are eaten
+
+---
+
+## 🛠️ Admin Panel
+
+Visit `/adminpage` after setting up credentials at `/admin-setup`.
+
+Features:
+- 🔄 Restart server
+- 🔃 Update from GitHub (git pull)
+- 🧽 Clear uploads
+- 🔐 Change admin password
+- 📝 View logs
+- ⚙️ Adjust upload settings
+
+---
+
+## 🛡️ Deployment Tips
+##### I recommend using Linux as the host server, the follow confs are Linux focused
+The official PacCrypt host is **Debian** minimal install.
+
+**HTTP** Nginx config (Not recommended):
+
+```nginx
+server {
+    listen 80;
+    server_name yourdomain.com; #<-- Your URL here
+
+    # Basic Privacy-Respecting Logging
+    access_log off; #<-- set to syslog:server=unix:/dev/log; for logging
+    error_log syslog:server=unix:/dev/log crit; #<-- Currently set for only critical logs, remove crit for all logs
+
+    # Hardened Proxy Settings
+    location / {
+        proxy_pass http://127.0.0.1:5000;
+
+        proxy_set_header Host $host;
+        proxy_set_header X-Real-IP $remote_addr;
+        proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;
+
+        proxy_http_version 1.1;
+        proxy_set_header Connection "";
+
+        # Timeouts
+        proxy_connect_timeout 5s;
+        proxy_send_timeout 30s;
+        proxy_read_timeout 30s;
+    }
+
+    # Basic Hardening Headers
+    add_header X-Frame-Options "DENY" always;
+    add_header X-Content-Type-Options "nosniff" always;
+    add_header Referrer-Policy "no-referrer" always;
+    add_header Permissions-Policy "geolocation=(), microphone=()" always;
+
+    # Prevent Abuse
+    client_max_body_size 10M;
+    keepalive_timeout 10;
+    server_tokens off;
+}
+```
+
+**HTTPS** Nginx config (Recommended):
+
+```nginx
+# Redirect HTTP to HTTPS
+server {
+    listen 80;
+    server_name yourdomain.com; #<-- Your URL here
+
+    # Basic Privacy-Respecting Logging
+    access_log off; #<-- set to syslog:server=unix:/dev/log; for logging
+	error_log syslog:server=unix:/dev/log crit; #<-- Currently set for only critical logs, remove crit for all logs
+
+    location / {
+        return 301 https://$host$request_uri;
+    }
+}
+
+# HTTPS Server Block
+server {
+    listen 443 ssl http2;
+    server_name yourdomain.com;
+
+    ssl_certificate path/to/yourdomain.com.cert; #<-- Could also be .cert.pem
+    ssl_certificate_key path/to/yourdomain.com.key; #<-- Could also be .key.pem
+
+    # SSL Hardening
+    ssl_protocols TLSv1.2 TLSv1.3;
+    ssl_ciphers 'TLS_AES_128_GCM_SHA256:TLS_AES_256_GCM_SHA384:ECDHE-RSA-AES128-GCM-SHA256:ECDHE-RSA-AES256-GCM-SHA384';
+    ssl_prefer_server_ciphers on;
+    ssl_session_cache shared:SSL:10m;
+    ssl_session_timeout 10m;
+
+    # Strong security headers (adjust as needed)
+    add_header Strict-Transport-Security "max-age=63072000; includeSubDomains; preload" always;
+    add_header X-Content-Type-Options nosniff always;
+    add_header X-Frame-Options DENY always;
+    add_header Referrer-Policy "no-referrer" always;
+    add_header Permissions-Policy "geolocation=(), camera=()" always;
+    add_header X-XSS-Protection "1; mode=block" always;
+
+    # Basic Privacy-Respecting Logging
+    access_log off; #<-- set to syslog:server=unix:/dev/log; for logging
+	error_log syslog:server=unix:/dev/log crit; #<-- Currently set for only critical logs, remove crit for all logs
+
+    client_max_body_size xG; #<-- Change to what the max upload for PacCrypt Share
+
+    # Reverse proxy to Flask
+    location / {
+        proxy_pass http://127.0.0.1:5000;
+        proxy_set_header Host $host;
+
+        # Comment these out if you want complete anonymity between client and app
+        # proxy_set_header X-Real-IP $remote_addr;
+        # proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;
+        # proxy_set_header X-Forwarded-Proto $scheme;
+
+        # Optional privacy: strip identifying headers
+        proxy_hide_header X-Powered-By;
+    }
+}
+```
+---
+
+## 🗂️ Project Structure
+
+```
+PacCrypt/
+├── app.py
+├── requirements.txt
+├── README.md
+├── templates/
+│   ├── index.html
+│   ├── 404.html
+│   └── 403.html
+│   └── 500.html
+│   └── admin.html
+│   └── admin_login.html
+│   └── admin_settings.html
+│   └── admin_setup.html
+│   └── pickup.html
+├── static/
+│   ├── css/
+│   │   └── styles.css
+│   ├── js/
+│   │   └── ui.js
+│   │   └── pacman.js
+│   │   └── main.js
+│   │   └── fileops.js
+│   │   └── encryption.js
+│   ├── img/
+│   │   └── PacCrypt.png
+│   │   └── Github_logo.png
+│   │   └── sitemap.png
+│   └── audio/
+│       └── chomp.mp3
+├── start_dev.bat
+├── start_prod.bat
+├── start_dev.sh
+├── start_prod.sh
+```
+
+---
+
+## 📄 License
+
+MIT © [TySP-Dev](https://github.com/TySP-Dev)
@@ -1,8 +1,9 @@
-### **requirements.txt**
-
-flask==3.0.3
-cryptography==42.0.5
-waitress==2.1.2
-
-# nginx - Only needed for Nginx integration, not installed via pip
+### **requirements.txt**
+
+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
@@ -1,15 +1,17 @@
 /* ===== Global Reset ===== */
 * {
    box-sizing: border-box;
-    margin: 0;
+    margin: 3px;
    padding: 0;
 }

 /* ===== Body ===== */
 body {
-    font-family: 'Poppins', sans-serif;
-    background-color: #121212;
-    color: #00ff99;
+    font-family: 'Press Start 2P', monospace;
+    background-color: #0e0e0e;
+    color: #28E060;
+    font-size: 13px;
+    line-height: 1.6;
    display: flex;
    flex-direction: column;
    min-height: 100vh;
@@ -18,27 +20,111 @@ body {
    padding: 20px;
 }

+@media (max-width: 600px) {
+    body {
+        font-size: 11px;
+        padding: 10px;
+    }
+
+    .button-group {
+      flex-direction: column;
+      gap: 12px;
+      align-items: stretch;
+    }
+  
+    .button-group button {
+      width: 100%;
+      min-width: unset;
+      max-width: 100%;
+    }
+
+    header {
+      flex-direction: column;
+      height: auto;
+      padding-inline: 15px;
+      padding-block: 20px;
+    }
+  
+    .logo-container {
+      flex-direction: column;
+      align-items: center;
+      gap: 12px;
+    }
+  
+    .logo-container img {
+      height: 100px !important;
+      margin-top: -15px !important;
+    }
+  
+    .logo-text {
+      margin-left: 0 !important;
+      text-align: center;
+    }
+  
+    .logo-text h1 {
+      font-size: 1.4em;
+      margin-top: -30px !important;
+      margin-left: 0 !important;
+      text-align: center !important;
+    }
+  
+    .logo-text p {
+      font-size: 0.8em;
+      margin-left: 0 !important;
+      text-align: center !important;
+    }
+    
+    .admin-button-grid {
+        grid-template-columns: 1fr;
+    }
+}
+  
+  
+
 /* ===== Header ===== */
 header {
-    text-align: center;
-    padding: 25px;
-    background-color: #1c1c1c;
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    background-color: #111;
    border-radius: 12px;
-    box-shadow: 0 0 15px rgba(0, 255, 153, 0.4);
+    box-shadow: 0 0 15px #28E060;
    width: 100%;
    max-width: 800px;
-    margin-bottom: 30px;
+    margin-bottom: 25px;
+    padding: 25px;
+    height: 200px;
 }

-    header h1 {
-        font-size: 2.8em;
-        color: #00ff99;
-        margin-bottom: 8px;
-    }
+.logo-container {
+    display: flex;
+    align-items: center;
+    gap: 10px; /* optional: controls spacing between logo and text */
+}
+
+.logo-container img {
+    height: 200px;
+    width: auto;
+}
+
+.logo-text h1 {
+    font-size: clamp(1.4em, 6vw, 2.8em);
+    word-break: break-word;
+    overflow-wrap: break-word;
+    color: #28E060;
+    margin: 0;
+    margin-left: -30px; /* overlap effect */
+    text-align: left;
+}
+
+.logo-text p {
+    font-size: 1.2em;
+    color: #28E060;
+    margin: 0;
+    margin-left: -30px;
+    text-align: left;
+}

-    header p {
-        font-size: 1.2em;
-    }

 /* ===== Main Layout ===== */
 main {
@@ -48,8 +134,8 @@ main {
    align-items: center;
    width: 100%;
    max-width: 800px;
-    padding: 20px;
-    gap: 30px;
+    padding: 0;
+    gap: 0;
 }

 /* ===== Card Styling ===== */
@@ -58,7 +144,7 @@ main {
    padding: 25px;
    width: 100%;
    border-radius: 12px;
-    box-shadow: 0 0 15px rgba(0, 255, 153, 0.4);
+    box-shadow: 0 0 15px #28E060;
    text-align: center;
 }

@@ -68,25 +154,38 @@ main {
    flex-direction: column;
    align-items: center;
    gap: 0px;
+    max-width: 725px;
    width: 100%;
 }

 /* ===== Inputs, Textareas, Selects ===== */
+button,
+select,
+input,
+textarea {
+    font-family: 'Press Start 2P', monospace;
+    font-size: 12px !important;
+    letter-spacing: 0.5px;
+}
+
 input,
 textarea,
 select,
 input[type="file"] {
    width: 80%;
    max-width: 500px;
-    padding: 12px 20px;
-    border: 2px solid #00ff99;
+    padding-inline: 20px;
+    padding-block: 12px;    
+    border: 1px solid #28E060;
    border-radius: 8px;
    background-color: #2c2f33;
-    color: #00ff99;
-    font-size: 1em;
-    text-align: center;
+    color: #28E060;
+    text-align: left;
    transition: 0.3s;
-    margin:10px auto;
+}
+
+select {
+    text-align: center;
 }

 textarea {
@@ -98,31 +197,41 @@ input[type="password"] {
    min-height: 50px;
 }

+/* ===== File Input Customization ===== */
 input[type="file"] {
-    border: 2px dashed #00ff99;
+    border: 2px dashed #28E060;
    cursor: pointer;
+    color: #28E060;
+    background-color: #2c2f33;
 }

-    input[type="file"]::file-selector-button {
-        background-color: #00ff99;
-        color: #121212;
-        border: none;
-        padding: 8px 15px;
-        border-radius: 6px;
-        cursor: pointer;
-        transition: 0.3s;
-    }
+input[type="file"]::file-selector-button {
+    font-family: 'Press Start 2P', monospace;
+    font-size: 12px;
+    background-color: #2c2f33;
+    color: #28E060;
+    border: 2px solid #28E060;
+    padding-inline: 10px;
+    padding-block: 8px;
+    margin-right: 10px;
+    border-radius: 6px;
+    text-transform: uppercase;
+    cursor: pointer;
+    transition: 0.3s ease;
+}

-        input[type="file"]::file-selector-button:hover {
-            background-color: #00cc77;
-        }
+input[type="file"]::file-selector-button:hover {
+    background-color: #28E060;
+    color: #000;
+    box-shadow: 0 0 10px #28E060;
+}

 /* ===== Focus Effects ===== */
 input:focus,
 textarea:focus,
 select:focus {
    outline: none;
-    box-shadow: 0 0 8px rgba(0, 255, 153, 0.8);
+    box-shadow: 0 0 10px #28E060;
 }

 /* ===== Textareas Specific Widths ===== */
@@ -136,39 +245,138 @@ 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%;
 }

 button {
-    padding: 10px 20px;
-    border: 0px solid #00ff99;
+    padding-inline: 20px;
+    padding-block: 10px;
+    border: none;
    border-radius: 8px;
    background-color: #2c2f33;
-    color: #00ff99;
+    color: #28E060;
    font-size: 1em;
    cursor: pointer;
    transition: 0.3s;
-    width: 100%;
-    max-width: 200px;
-    /* margin: 10px auto; */
+    width: auto;
+    min-width: 225px;
+    max-width: 300px;
+    height: 45px;
 }

    button:hover {
-        background-color: #00ff99;
+        background-color: #28E060;
        color: #121212;
+        box-shadow: 0 0 10px #28E060;
    }

+.danger-button {
+    background-color: #5f3131;
+    box-shadow: 0 0 10px #991717;
+}
+
+.danger-button:hover {
+    background-color: #af0000;
+    color: #121212;
+    box-shadow: 0 0 40px #ff0000;
+}
+
+.admin-button-grid {
+    display: grid;
+    grid-template-columns: repeat(2, minmax(0, 1fr));
+    gap: var(--spacer); /* e.g., 20px between rows and columns */
+    justify-items: center;
+    width: 100%;
+    max-width: 640px;
+    margin: 0 auto;
+  }
+  
+  .admin-button-grid button {
+    width: 100%;
+    max-width: 280px;
+    font-family: 'Press Start 2P', monospace;
+    font-size: 12px;
+  }
+  
+  
+
 /* ===== Toggle Switch Styling ===== */
+.toggle-container {
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    gap: 20px;
+  }
+  
+  .toggle-label {
+    font-family: 'Press Start 2P', monospace;
+    font-size: 12px;
+    color: #28E060;
+  }
+  
+  .material-switch {
+    position: relative;
+    display: inline-block;
+    width: 60px;
+    height: 34px;
+  }
+  
+  .material-switch input {
+    opacity: 0;
+    width: 0;
+    height: 0;
+  }
+  
+  .material-slider {
+    position: absolute;
+    cursor: pointer;
+    top: 0; left: 0; right: 0; bottom: 0;
+    background-color: #222;
+    border: 2px solid #28E060;
+    border-radius: 34px;
+    transition: 0.4s;
+    margin: unset; 
+  }
+  
+  .material-slider::before {
+    position: absolute;
+    content: "";
+    height: 26px;
+    width: 26px;
+    left: 2px;
+    bottom: 2px;
+    background-color: #28E060;
+    border-radius: 50%;
+    transition: 0.4s;
+    box-shadow: 0 0 6px #28E060;
+  }
+  
+  .material-switch input:checked + .material-slider {
+    background-color: #28E060;
+  }
+  
+  .material-switch input:checked + .material-slider::before {
+    transform: translateX(26px);
+    background-color: #000;
+  }
+  
+  
+  /* Label beside switch */
+  #toggle-label {
+    font-family: 'Press Start 2P', monospace;
+    color: #28E060;
+    margin-left: 20px;
+    font-size: 12px;
+  }
+
 .toggle-container {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 12px;
-    margin-top: 10px;
    width: 100%;
 }

@@ -197,7 +405,7 @@ button {
    right: 0;
    bottom: 0;
    background-color: #2c2f33;
-    border: 2px solid #00ff99;
+    border: 2px solid #28E060;
    border-radius: 34px;
    transition: .4s;
    display: flex;
@@ -207,15 +415,15 @@ button {
    /* The circle knob */
    .slider::before {
        content: "";
-        height: 26px;
-        width: 26px;
-        background-color: #00ff99;
+        height: 22px;
+        width: 22px;
+        background-color: #28E060;
        border-radius: 50%;
        transition: .4s;
-        transform: translateX(4px);
+        transform: translateX(2px);
        position: absolute;
-        left: 0px;
-        bottom: 2.5px;
+        left: auto;
+        bottom: auto;
    }

 input:checked + .slider::before {
@@ -229,7 +437,7 @@ input:checked + .slider::before {
    display: flex;
    justify-content: space-between;
    font-size: 0.9em;
-    color: #00ff99;
+    color: #28E060;
    margin-top: 5px;
 }

@@ -251,7 +459,7 @@ input:checked + .slider::before {
    max-width: 500px;
    min-height: 50px;
    background-color: #333;
-    color: #00ff99;
+    color: #28E060;
    text-align: center;
    border-radius: 8px;
    padding: 14px;
@@ -292,16 +500,16 @@ footer {
    text-align: center;
    padding: 25px;
    background-color: #1c1c1c;
-    color: #00ff99;
+    color: #28E060;
    border-radius: 12px;
-    box-shadow: 0 0 15px rgba(0, 255, 153, 0.4);
-    margin-top: 30px;
+    box-shadow: 0 0 15px #28E060;
    width: 100%;
    max-width: 800px;
+    margin-top: 25px;
 }

    footer a {
-        color: #00ff99;
+        color: #28E060;
        text-decoration: none;
    }

@@ -309,39 +517,72 @@ 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 {
-    background-color: #2a2a2a;
-    border: 1px solid #00ff99;
-    padding: 6px 12px;
+.copy-feedback, #shared-link-feedback {
+    background-color: #2c2f33;
+    padding-inline: 12px;
+    padding-block: 6px;
    margin-top: 6px;
    border-radius: 6px;
-    color: #00ff99;
+    color: #28E060;
    font-size: 0.9em;
+    display: none;
    opacity: 0;
-    transition: opacity 0.3s ease;
    text-align: center;
-    max-width: 300px;
+    max-width: 500px;
    margin-left: auto;
    margin-right: auto;
+    transition: opacity 0.3s ease;
 }

-    .copy-feedback.show {
-        opacity: 1;
-    }
-
-.hidden {
-    display: none !important;
+.copy-feedback.show, #shared-link-feedback.show {
+    display: block;
+    opacity: 1;
 }

+.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-inline: 16px;
+    padding-block: 8px;
+    border-radius: 6px;
+    color: #28E060;
+    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 +590,40 @@ form {
    align-items: center;
 }

-    form input,
-    form button {
-        width: 80%;
-        max-width: 500px;
-        margin-bottom: 12px;
-        text-align: center;
-    }
+form input {
+    min-height: 50px;
+    width: 80%;
+    max-width: 500px;
+    text-align: left;
+}

+/* ===== Section Card Styling ===== */
 section.card {
    display: flex;
    flex-direction: column;
    align-items: center;
 }

-.copy-feedback.show {
-    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;
-}
-
+/* ===== Pacman Game Styling ===== */
 #pacmanCanvas {
    background-color: black;
    display: block;
-    margin: auto;
-    border: 2px solid #00ff99;
+    border: 2px solid #28E060;
    border-radius: 12px;
-    align-items: center;
-    justify-content: center;
+    max-width: 700px;
+    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;
-    display: block;
-    margin: auto;
-    border: 2px solid #00ff99;
-    border-radius: 12px;
+    margin-bottom: 25px;
+    max-width: 725px;
+    width: 100%;
 }

 .pacman-wrapper {
@@ -415,10 +631,207 @@ section.card {
    justify-content: center;
    align-items: center;
    width: 100%;
+    padding: 0;
+    margin: 0;
 }

-
-/* ===== Utility: Hidden Class ===== */
+/* ===== Utility Classes ===== */
 .hidden {
    display: none !important;
 }
+
+/* ===== Section Spacing ===== */
+#password-generator-section {
+    margin-bottom: 25px;
+}
+
+#encoding-section {
+    margin-bottom: 25px;
+}
+
+/* Pickup page sections */
+#pickup-section {
+    margin-bottom: 25px;
+}
+
+#security-notice-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 #28E060;
+}
+
+.sitemap-header {
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+    margin: 15px 0;
+}
+
+.sitemap-header h3 {
+    color: #28E060;
+    margin: 0;
+}
+
+.collapse-btn {
+    background: none;
+    border: none;
+    color: #28E060;
+    font-size: 1.2em;
+    cursor: pointer;
+    padding-inline: 10px;
+    padding-block: 5px;
+    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: #28E060;
+}
+
+#server-logs-section button {
+    margin-bottom: 15px;
+    width: 100%;
+    max-width: 300px;
+}
+
+#logLoader {
+    color: #28E060;
+    text-align: center;
+    padding: 10px;
+}
+
+#logContainer {
+    background-color: #2c2f33;
+    color: #28E060;
+    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 #28E060;
+}
+
+/* ===== 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;
+    }
+}
@@ -1,86 +1,104 @@
-// encryption.js
-
-/**
- * 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>}
- */
-export async function deriveKey(password, salt) {
-    const encoder = new TextEncoder();
-    const keyMaterial = await crypto.subtle.importKey(
-        'raw',
-        encoder.encode(password),
-        { name: 'PBKDF2' },
-        false,
-        ['deriveKey']
-    );
-
-    return crypto.subtle.deriveKey(
-        {
-            name: 'PBKDF2',
-            salt,
-            iterations: 200_000,
-            hash: 'SHA-256'
-        },
-        keyMaterial,
-        { name: 'AES-GCM', length: 256 },
-        false,
-        ['encrypt', 'decrypt']
-    );
-}
-
-/**
- * Encrypts a message using AES-GCM with a derived key.
- * @param {string} message - Plaintext message to encrypt.
- * @param {string} password - User password for key derivation.
- * @returns {Promise<string>} - Base64-encoded encrypted string.
- */
-export async function encryptAdvanced(message, password) {
-    const encoder = new TextEncoder();
-    const salt = crypto.getRandomValues(new Uint8Array(16));
-    const iv = crypto.getRandomValues(new Uint8Array(12));
-    const key = await deriveKey(password, salt);
-    const encoded = encoder.encode(message);
-
-    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);
-    output.set(iv, salt.length);
-    output.set(new Uint8Array(ciphertext), salt.length + iv.length);
-
-    return btoa(String.fromCharCode(...output));
-}
-
-/**
- * Decrypts an AES-GCM encrypted string.
- * @param {string} encryptedData - Base64-encoded ciphertext.
- * @param {string} password - Password used to derive the decryption key.
- * @returns {Promise<string>} - Decrypted plaintext.
- */
-export async function decryptAdvanced(encryptedData, password) {
-    const encrypted = new Uint8Array(
-        atob(encryptedData).split('').map(c => c.charCodeAt(0))
-    );
-
-    const salt = encrypted.slice(0, 16);
-    const iv = encrypted.slice(16, 28);
-    const ciphertext = encrypted.slice(28);
-    const key = await deriveKey(password, salt);
-
-    const decrypted = await crypto.subtle.decrypt(
-        { name: 'AES-GCM', iv },
-        key,
-        ciphertext
-    );
-
-    return new TextDecoder().decode(decrypted);
-}
-
-/**
- * Optional init logging for module diagnostics.
- */
-export function setupEncryption() {
-    console.log('[Encryption] Module loaded');
-}
+/**
+ * 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>} - Derived cryptographic key.
+ */
+export async function deriveKey(password, salt) {
+    const encoder = new TextEncoder();
+    const keyMaterial = await crypto.subtle.importKey(
+        'raw',
+        encoder.encode(password),
+        { name: 'PBKDF2' },
+        false,
+        ['deriveKey']
+    );
+
+    return crypto.subtle.deriveKey(
+        {
+            name: 'PBKDF2',
+            salt,
+            iterations: PBKDF2_ITERATIONS,
+            hash: 'SHA-256'
+        },
+        keyMaterial,
+        { 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.
+ * @param {string} password - User password for key derivation.
+ * @returns {Promise<string>} - Base64-encoded encrypted string.
+ */
+export async function encryptAdvanced(message, password) {
+    const encoder = new TextEncoder();
+    const salt = crypto.getRandomValues(new Uint8Array(SALT_LENGTH));
+    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 output = new Uint8Array(salt.length + iv.length + ciphertext.byteLength);
+    output.set(salt);
+    output.set(iv, salt.length);
+    output.set(new Uint8Array(ciphertext), salt.length + iv.length);
+
+    return btoa(String.fromCharCode(...output));
+}
+
+// ===== Decryption =====
+/**
+ * Decrypts an AES-GCM encrypted string.
+ * @param {string} encryptedData - Base64-encoded ciphertext.
+ * @param {string} password - Password used to derive the decryption key.
+ * @returns {Promise<string>} - Decrypted plaintext.
+ */
+export async function decryptAdvanced(encryptedData, password) {
+    const encrypted = new Uint8Array(
+        atob(encryptedData).split('').map(c => c.charCodeAt(0))
+    );
+
+    const salt = encrypted.slice(0, SALT_LENGTH);
+    const iv = encrypted.slice(SALT_LENGTH, SALT_LENGTH + IV_LENGTH);
+    const ciphertext = encrypted.slice(SALT_LENGTH + IV_LENGTH);
+    const key = await deriveKey(password, salt);
+
+    const decrypted = await crypto.subtle.decrypt(
+        { name: 'AES-GCM', iv },
+        key,
+        ciphertext
+    );
+
+    return new TextDecoder().decode(decrypted);
+}
+
+// ===== Module Initialization =====
+/**
+ * Initializes the encryption module and logs its status.
+ */
+export function setupEncryption() {
+    console.log('[Encryption] Module loaded');
+}
@@ -1,92 +1,119 @@
-// fileops.js
-
-import { encryptAdvanced, decryptAdvanced } from './encryption.js';
-
-/**
- * Encrypts the selected file and triggers download of the encrypted version.
- * @param {HTMLInputElement} fileInput - The input element of type 'file'.
- * @param {string} password - Password for encryption.
- */
-export function encryptFile(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) => {
-        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 base64Decrypted = await decryptAdvanced(encryptedText, password);
-            const byteArray = new Uint8Array(
-                [...atob(base64Decrypted)].map(c => c.charCodeAt(0))
-            );
-            downloadFileBinary(byteArray, file.name.replace(/\.enc$/, ''));
-        } catch (err) {
-            console.error("[Decryption Error]", err);
-            alert("Decryption failed: wrong password or corrupted file.");
-        }
-    };
-
-    reader.readAsText(file);
-}
-
-/**
- * Downloads a text-based file (encrypted string).
- * @param {string} content - The file content to download.
- * @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");
-    a.href = url;
-    a.download = filename;
-    a.click();
-
-    URL.revokeObjectURL(url);
-}
-
-/**
- * Downloads a binary file (Uint8Array).
- * @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");
-    a.href = url;
-    a.download = filename;
-    a.click();
-
-    URL.revokeObjectURL(url);
-}
+/**
+ * File operations module.
+ * Handles file encryption and decryption operations.
+ */
+
+// ===== Constants =====
+const CHUNK_SIZE = 1024 * 1024; // 1MB chunks
+
+// ===== Public Interface =====
+export async function encryptFile(fileInput, password) {
+    const file = fileInput.files[0];
+    if (!file) return;
+
+    try {
+        const encryptedChunks = await processFile(file, password, true);
+        downloadEncryptedFile(encryptedChunks, file.name);
+    } catch (error) {
+        alert("Error encrypting file: " + error.message);
+    }
+}
+
+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
+    };
+
+    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 =====
+function downloadEncryptedFile(chunks, originalName) {
+    const blob = new Blob(chunks, { type: 'application/octet-stream' });
+    const url = URL.createObjectURL(blob);
+    const a = document.createElement('a');
+    a.href = url;
+    a.download = originalName + '.encrypted';
+    document.body.appendChild(a);
+    a.click();
+    document.body.removeChild(a);
+    URL.revokeObjectURL(url);
+}
+
+function downloadDecryptedFile(chunks, originalName) {
+    const blob = new Blob(chunks, { type: 'application/octet-stream' });
+    const url = URL.createObjectURL(blob);
+    const a = document.createElement('a');
+    a.href = url;
+    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);
+        }
+    }
+}
@@ -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 UI and game once the DOM is fully loaded.
- */
+// Initialize application when DOM is fully loaded
 window.addEventListener("DOMContentLoaded", () => {
    setupUI();
    setupGame();
@@ -1,52 +1,45 @@
-// 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");
-    ctx = canvas.getContext("2d");
+    // Scroll to the Pacman section
+    const pacmanSection = document.getElementById("pacman-section");
+    if (pacmanSection) {
+        pacmanSection.scrollIntoView({ behavior: 'smooth' });
+    }

-    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);
+    // Initialize game state
+    initializeGame();
+    setupGameLoop();
 }

 export function stopPacman() {
    clearInterval(gameInterval);
    if (ctx) ctx.clearRect(0, 0, canvas.width, canvas.height);
+    
+    // Restore scrolling
+    document.body.style.overflow = '';
+    document.removeEventListener('wheel', preventScroll);
+    document.removeEventListener('touchmove', preventScroll);
 }

 export function resetGame() {
@@ -61,8 +54,88 @@ 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);
+    
+    // Prevent scrolling
+    document.body.style.overflow = 'hidden';
+    document.addEventListener('wheel', preventScroll, { passive: false });
+    document.addEventListener('touchmove', preventScroll, { passive: false });
+    
+    // Add touch controls
+    let touchStartX = 0;
+    let touchStartY = 0;
+
+    canvas.addEventListener('touchstart', (e) => {
+        e.preventDefault();
+        touchStartX = e.touches[0].clientX;
+        touchStartY = e.touches[0].clientY;
+    }, { passive: false });
+
+    canvas.addEventListener('touchmove', (e) => {
+        e.preventDefault();
+    }, { passive: false });
+
+    canvas.addEventListener('touchend', (e) => {
+        e.preventDefault();
+        const touchEndX = e.changedTouches[0].clientX;
+        const touchEndY = e.changedTouches[0].clientY;
+        
+        const dx = touchEndX - touchStartX;
+        const dy = touchEndY - touchStartY;
+        
+        // Determine swipe direction based on the larger movement
+        if (Math.abs(dx) > Math.abs(dy)) {
+            // Horizontal swipe
+            if (dx > 0) {
+                pacman.dx = PACMAN_SPEED;
+                pacman.dy = 0;
+            } else {
+                pacman.dx = -PACMAN_SPEED;
+                pacman.dy = 0;
+            }
+        } else {
+            // Vertical swipe
+            if (dy > 0) {
+                pacman.dx = 0;
+                pacman.dy = PACMAN_SPEED;
+            } else {
+                pacman.dx = 0;
+                pacman.dy = -PACMAN_SPEED;
+            }
+        }
+    }, { passive: false });
+}
+
+function setupGameLoop() {
+    gameInterval = setInterval(gameLoop, 150);
+}
+
+// ===== Game Setup Helpers =====
 function spawn() {
    const options = [];
    for (let c = 1; c < cols - 1; c++) {
@@ -80,9 +153,9 @@ function spawn() {
    }
    const s = options[Math.floor(rand() * options.length)];
    return {
-        x: s.c * cellSize + cellSize / 2,
-        y: s.r * cellSize + cellSize / 2,
-        size: cellSize / 2 - 5,
+        x: s.c * CELL_SIZE + CELL_SIZE / 2,
+        y: s.r * CELL_SIZE + CELL_SIZE / 2,
+        size: CELL_SIZE / 2 - 5,
        dx: 0,
        dy: 0
    };
@@ -94,6 +167,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 +175,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 +213,7 @@ function generateDots() {
    }
 }

-// ====== Game Loop & Drawing ======
-
+// ===== Game Loop & Rendering =====
 function gameLoop() {
    ctx.clearRect(0, 0, canvas.width, canvas.height);
    drawWalls();
@@ -137,7 +229,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 +243,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 +262,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 === "ArrowDown") { pacman.dx = 0; pacman.dy = pacmanSpeed; }
-    if (k === "ArrowLeft") { pacman.dx = -pacmanSpeed; pacman.dy = 0; }
-    if (k === "ArrowRight") { pacman.dx = pacmanSpeed; pacman.dy = 0; }
+    if (k === "ArrowUp") { pacman.dx = 0; pacman.dy = -PACMAN_SPEED; }
+    if (k === "ArrowDown") { pacman.dx = 0; pacman.dy = PACMAN_SPEED; }
+    if (k === "ArrowLeft") { pacman.dx = -PACMAN_SPEED; pacman.dy = 0; }
+    if (k === "ArrowRight") { pacman.dx = PACMAN_SPEED; pacman.dy = 0; }
 }

 function moveChar(ch) {
@@ -191,7 +285,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 +319,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 wx2 = wx1 + cellSize, wy2 = wy1 + cellSize;
+        const wx1 = w.c * CELL_SIZE, wy1 = w.r * CELL_SIZE;
+        const wx2 = wx1 + CELL_SIZE, wy2 = wy1 + CELL_SIZE;
        return right > wx1 && left < wx2 && bottom > wy1 && top < wy2;
    });
 }
@@ -235,8 +329,8 @@ function eatDots() {
    const chompSound = document.getElementById("chomp-sound");

    dots = dots.filter(d => {
-        const dx = d.c * cellSize + cellSize / 2;
-        const dy = d.r * cellSize + cellSize / 2;
+        const dx = d.c * CELL_SIZE + CELL_SIZE / 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++;
@@ -250,13 +344,33 @@ function eatDots() {
        return true;
    });

+    // Check if all dots are eaten
+    if (dots.length === 0) {
+        // Trigger password generator for new random map
+        const generateBtn = document.getElementById("generate-btn");
+        if (generateBtn) {
+            generateBtn.click();
+        }
+        
+        // Auto-restart the game after a short delay
+        setTimeout(() => {
+            resetGame();
+        }, 1000);
+    }
+
    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;
+
+// Add scroll prevention function
+function preventScroll(e) {
+    e.preventDefault();
+}
@@ -1,475 +0,0 @@
-// ===== AES Advanced Encryption =====
-async function encryptAdvanced(message, password) {
-  const salt = crypto.getRandomValues(new Uint8Array(16));
-  const key = await deriveKey(password, salt);
-  const iv = crypto.getRandomValues(new Uint8Array(12));
-
-  const encoder = new TextEncoder();
-  const encodedMessage = encoder.encode(message);
-
-  const encryptedMessage = await crypto.subtle.encrypt(
-    { name: 'AES-GCM', iv: iv },
-    key,
-    encodedMessage
-  );
-
-  const encryptedArray = new Uint8Array(salt.length + iv.length + encryptedMessage.byteLength);
-  encryptedArray.set(salt);
-  encryptedArray.set(iv, salt.length);
-  encryptedArray.set(new Uint8Array(encryptedMessage), salt.length + iv.length);
-
-  return btoa(String.fromCharCode(...encryptedArray));
-}
-
-async function deriveKey(password, salt) {
-  const encoder = new TextEncoder();
-  const passwordBuffer = encoder.encode(password);
-
-  const keyMaterial = await crypto.subtle.importKey(
-    'raw',
-    passwordBuffer,
-    { name: 'PBKDF2' },
-    false,
-    ['deriveKey']
-  );
-
-  return crypto.subtle.deriveKey(
-    {
-      name: 'PBKDF2',
-      salt: salt,
-      iterations: 200000,
-      hash: 'SHA-256',
-    },
-    keyMaterial,
-    { name: 'AES-GCM', length: 256 },
-    false,
-    ['encrypt', 'decrypt']
-  );
-}
-
-async function decryptAdvanced(encryptedData, password) {
-  const encryptedArray = new Uint8Array(atob(encryptedData).split("").map(c => c.charCodeAt(0)));
-
-  const salt = encryptedArray.slice(0, 16);
-  const iv = encryptedArray.slice(16, 28);
-  const encryptedMessage = encryptedArray.slice(28);
-
-  const key = await deriveKey(password, salt);
-
-  const decryptedMessage = await crypto.subtle.decrypt(
-    { name: 'AES-GCM', iv: iv },
-    key,
-    encryptedMessage
-  );
-
-  const decoder = new TextDecoder();
-  return decoder.decode(decryptedMessage);
-}
-
-// ===== UI Toggles =====
-function toggleEncryptionOptions() {
-  const type = document.getElementById("encryption-type").value;
-  document.getElementById("password-input").style.display = (type === 'advanced') ? 'flex' : 'none';
-
-  if (type === 'basic') removeFile();
-
-  toggleInputMode();
-  document.getElementById("encrypt-label").textContent = (type === 'basic') ? "Encode" : "Encrypt";
-  document.getElementById("decrypt-label").textContent = (type === 'basic') ? "Decode" : "Decrypt";
-}
-
-function removeFile() {
-  document.getElementById("file-input").value = "";
-  document.getElementById("remove-file-btn").style.display = 'none';
-  toggleInputMode();
-}
-
-function toggleInputMode() {
-  const textValue = document.getElementById("input-text").value.trim();
-  const fileSelected = document.getElementById("file-input").files.length > 0;
-  const isAdvanced = document.getElementById("encryption-type").value === 'advanced';
-
-  document.getElementById("text-section").style.display = fileSelected ? 'none' : 'flex';
-  document.getElementById("file-section").style.display = (isAdvanced && !textValue) ? 'flex' : 'none';
-  document.getElementById("remove-file-btn").style.display = fileSelected ? 'inline-block' : 'none';
-
-  if (isAdvanced) {
-    document.getElementById("password-input").style.display = 'flex';
-  }
-}
-
-// ===== Form Submission =====
-async function handleSubmit(event) {
-  event.preventDefault();
-
-  const password = document.getElementById("password").value;
-  const encryptionType = document.getElementById("encryption-type").value;
-
-  if (encryptionType === 'advanced' && !password) {
-    alert("Password is required for advanced encryption.");
-    return;
-  }
-
-  const payload = {
-    "encryption-type": encryptionType,
-    operation: document.querySelector('input[name="operation"]:checked').value,
-    message: document.getElementById("input-text").value,
-    password: password
-  };
-
-  const fileInput = document.getElementById("file-input");
-  if (fileInput.files.length > 0) {
-    const op = document.querySelector('input[name="operation"]:checked').value;
-    if (op === 'encrypt') encryptFile();
-    else decryptFile();
-    return;
-  }
-
-  try {
-    const resp = await fetch("/", {
-      method: "POST",
-      headers: { "Content-Type": "application/json" },
-      body: JSON.stringify(payload)
-    });
-    const data = await resp.json();
-    document.getElementById("output-text").value = data.result;
-  } catch (err) {
-    alert("Error processing request: " + err);
-  }
-}
-
-// ===== File Encryption / Decryption =====
-function encryptFile() {
-  const f = document.getElementById("file-input");
-  const pwd = document.getElementById("password").value;
-  if (!pwd) return alert("Please enter a password!");
-  if (!f.files.length) return alert("Please select a file!");
-
-  const reader = new FileReader();
-  reader.onload = async (e) => {
-    const raw = new Uint8Array(e.target.result);
-    const base64Raw = btoa(String.fromCharCode(...raw));
-    const encrypted = await encryptAdvanced(base64Raw, pwd);
-    downloadFile(encrypted, f.files[0].name + ".enc");
-  };
-  reader.readAsArrayBuffer(f.files[0]);
-}
-
-function decryptFile() {
-  const f = document.getElementById("file-input");
-  const pwd = document.getElementById("password").value;
-  if (!pwd) return alert("Please enter a password!");
-  if (!f.files.length) return alert("Please select a file!");
-
-  const reader = new FileReader();
-  reader.onload = async (e) => {
-    try {
-      const encryptedText = e.target.result;
-      const decryptedBase64 = await decryptAdvanced(encryptedText, pwd);
-      const byteString = atob(decryptedBase64);
-      const byteArray = new Uint8Array([...byteString].map(c => c.charCodeAt(0)));
-      downloadFileBinary(byteArray, f.files[0].name.replace(/\.enc$/, ''));
-    } catch (err) {
-      alert("Decryption failed: wrong password or corrupted file.");
-    }
-  };
-  reader.readAsText(f.files[0]);
-}
-
-function downloadFile(content, filename) {
-  const blob = new Blob([content], { type: "application/octet-stream" });
-  const url = URL.createObjectURL(blob);
-  const a = document.createElement("a");
-  a.href = url;
-  a.download = filename;
-  a.click();
-  URL.revokeObjectURL(url);
-}
-
-function downloadFileBinary(byteArray, filename) {
-  const blob = new Blob([byteArray], { type: "application/octet-stream" });
-  const url = URL.createObjectURL(blob);
-  const a = document.createElement("a");
-  a.href = url;
-  a.download = filename;
-  a.click();
-  URL.revokeObjectURL(url);
-}
-
-// ===== Password Generator =====
-function generateRandomPassword() {
-  const length = 30;
-  const charset = "ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz0123456789!@#$%^&*()_+[]{}|;:,.<>?/~";
-  let password = "";
-  for (let i = 0; i < length; i++) {
-    password += charset.charAt(Math.floor(Math.random() * charset.length));
-  }
-  document.getElementById("password-field").value = password;
-}
-
-// ===== Copy to Clipboard =====
-function copyToClipboard(elementId, toastId) {
-  const copyText = document.getElementById(elementId);
-  copyText.select();
-  copyText.setSelectionRange(0, 99999);
-  document.execCommand("copy");
-
-  const toast = document.getElementById(toastId);
-  toast.classList.add("show");
-  setTimeout(() => toast.classList.remove("show"), 2000);
-}
-
-// ===== Pacman Easter Egg =====
-function checkForPacman() {
-  const val = document.getElementById("input-text").value.trim().toLowerCase();
-  const pacSection = document.getElementById("pacman-section");
-  const encSection = document.getElementById("encoding-section");
-
-  if (val.includes('pacman') && pacSection.style.display !== 'block') {
-    pacSection.style.display = 'block';
-    encSection.style.display = 'none';
-    startPacman();
-  } else if (pacSection.style.display === 'block' && !val.includes('pacman')) {
-    exitGame();
-  }
-}
-
-// ===== Game Exit & Restart =====
-function exitGame() {
-  stopPacman();
-  document.getElementById("input-text").value = "";
-  document.getElementById("pacman-section").style.display = 'none';
-  document.getElementById("encoding-section").style.display = 'block';
-}
-
-function resetGame() {
-  stopPacman();
-  startPacman();
-}
-
-// ===== Clear All =====
-function clearAll() {
-  document.getElementById("input-text").value = "";
-  document.getElementById("output-text").value = "";
-  document.getElementById("file-input").value = "";
-  document.getElementById("password").value = "";
-
-  document.getElementById("pacman-section").style.display = "none";
-  document.getElementById("encoding-section").style.display = "block";
-
-  removeFile();
-  toggleInputMode();
-}
-
-// ===== Initialize =====
-document.addEventListener("DOMContentLoaded", () => {
-  toggleEncryptionOptions();
-  toggleInputMode();
-  document.getElementById("input-text").addEventListener("input", checkForPacman);
-});
-
-
-// ===== Pacman Game Variables & Logic =====
-let canvas, ctx, pacman, enemy, walls, dots, score;
-let pacmanSpeed = 40, enemySpeed = 20, cellSize = 40, dotSize = 5;
-let cols, rows, randSeed, gameInterval;
-
-function startPacman() {
-  canvas = document.getElementById("pacmanCanvas");
-  ctx = canvas.getContext("2d");
-  cols = Math.floor(canvas.width / cellSize);
-  rows = Math.floor(canvas.height / cellSize);
-  walls = []; dots = []; score = 0;
-  clearInterval(gameInterval);
-
-  randSeed = Array.from(
-    document.getElementById("password-field").value
-  ).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);
-}
-
-function stopPacman() {
-  clearInterval(gameInterval);
-  if (ctx) ctx.clearRect(0, 0, canvas.width, canvas.height);
-}
-
-function spawn() {
-  const opts = [];
-  for (let c = 1; c < cols - 1; c++) {
-    for (let r = 1; r < rows - 1; r++) {
-      if (!walls.some(w => w.c === c && w.r === r)) {
-        const neighbors = [
-          { c: c+1, r }, { c: c-1, r },
-          { c, r: r+1 }, { c, r: r-1 }
-        ];
-        if (neighbors.some(n =>
-          !walls.some(w => w.c===n.c && w.r===n.r)
-        )) {
-          opts.push({ c, r });
-        }
-      }
-    }
-  }
-  const s = opts[Math.floor(rand() * opts.length)];
-  return {
-    x: s.c * cellSize + cellSize/2,
-    y: s.r * cellSize + cellSize/2,
-    size: cellSize/2 - 5,
-    dx: 0,
-    dy: 0
-  };
-}
-
-function rand() {
-  const x = Math.sin(randSeed++) * 10000;
-  return x - Math.floor(x);
-}
-
-function generateWalls() {
-  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) {
-        walls.push({ c, r });
-      }
-    }
-  }
-}
-
-function generateDots() {
-  dots = [];
-  for (let c = 1; c < cols - 1; c++) {
-    for (let r = 1; r < rows - 1; r++) {
-      if (walls.some(w => w.c===c && w.r===r)) continue;
-      const isEnclosed =
-        walls.some(w => w.c===c+1 && w.r===r) &&
-        walls.some(w => w.c===c-1 && w.r===r) &&
-        walls.some(w => w.c===c && w.r===r+1) &&
-        walls.some(w => w.c===c && w.r===r-1);
-      if (!isEnclosed) dots.push({ c, r });
-    }
-  }
-}
-
-function movePacman(e) {
-  if (!["ArrowUp","ArrowDown","ArrowLeft","ArrowRight"].includes(e.key)) return;
-  e.preventDefault();
-  if (e.key==="ArrowUp")    { pacman.dx=0; pacman.dy=-pacmanSpeed; }
-  if (e.key==="ArrowDown")  { pacman.dx=0; pacman.dy=pacmanSpeed; }
-  if (e.key==="ArrowLeft")  { pacman.dx=-pacmanSpeed; pacman.dy=0; }
-  if (e.key==="ArrowRight") { pacman.dx=pacmanSpeed;  pacman.dy=0; }
-}
-
-// ===== Collision Helper =====
-function willCollide(x, y, size) {
-  const left = x - size, right = x + size;
-  const top = y - size, bottom = y + size;
-  for (let w of walls) {
-    const wx1 = w.c * cellSize, wy1 = w.r * cellSize;
-    const wx2 = wx1 + cellSize, wy2 = wy1 + cellSize;
-    if (right > wx1 && left < wx2 && bottom > wy1 && top < wy2) {
-      return true;
-    }
-  }
-  return false;
-}
-
-function moveChar(ch) {
-  const nx = ch.x + ch.dx, ny = ch.y + ch.dy;
-  if (!willCollide(nx, ny, ch.size)) {
-    ch.x = nx; ch.y = ny;
-  }
-}
-
-function moveEnemy() {
-  const options = [];
-  [[enemySpeed,0],[-enemySpeed,0],[0,enemySpeed],[0,-enemySpeed]].forEach(
-    ([dx,dy]) => {
-      const nx = enemy.x + dx, ny = enemy.y + dy;
-      if (!willCollide(nx, ny, enemy.size)) options.push({dx,dy});
-    }
-  );
-  if (!options.length) return;
-  let best = options[0];
-  let bestD = Math.abs(enemy.x+best.dx-pacman.x)+Math.abs(enemy.y+best.dy-pacman.y);
-  for (let opt of options) {
-    const d = Math.abs(enemy.x+opt.dx-pacman.x)+Math.abs(enemy.y+opt.dy-pacman.y);
-    if (d < bestD) { best=opt; bestD=d; }
-  }
-  enemy.x += best.dx; enemy.y += best.dy;
-}
-
-function gameLoop() {
-  ctx.clearRect(0,0,canvas.width,canvas.height);
-  drawWalls();
-  moveChar(pacman);
-  moveEnemy();
-  drawChar(pacman,"yellow");
-  drawChar(enemy,"red");
-  eatDots();
-  drawScore();
-  checkGameOver();
-}
-
-function drawWalls() {
-  ctx.fillStyle="blue";
-  walls.forEach(w=>ctx.fillRect(w.c*cellSize,w.r*cellSize,cellSize,cellSize));
-}
-
-function drawChar(ch,color) {
-  ctx.beginPath();
-  ctx.arc(ch.x,ch.y,ch.size,0,Math.PI*2);
-  ctx.fillStyle=color; ctx.fill();
-}
-
-function eatDots() {
-  const chompSound = document.getElementById("chomp-sound");
-
-  dots = dots.filter(d => {
-    const dx = d.c * cellSize + cellSize / 2;
-    const dy = d.r * cellSize + cellSize / 2;
-    if (Math.abs(pacman.x - dx) < pacman.size && Math.abs(pacman.y - dy) < pacman.size) {
-      score++;
-      if (chompSound) {
-        chompSound.currentTime = 0;  // Reset sound
-        chompSound.volume = 0.4;
-        chompSound.play();
-      }
-      return false; // Remove dot
-    }
-    return true;
-  });
-
-  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.fill();
-  });
-}
-
-function drawScore() {
-  ctx.fillStyle="white";
-  ctx.font="20px Poppins";
-  ctx.fillText("Score: "+score,10,25);
-}
-
-function checkGameOver() {
-  if (Math.abs(pacman.x-enemy.x)<pacman.size && Math.abs(pacman.y-enemy.y)<pacman.size) {
-    ctx.fillStyle="#00ff99";
-    ctx.font="40px Poppins";
-    ctx.textAlign="center";
-    ctx.fillText("Game Over!", canvas.width/2, canvas.height/2);
-    clearInterval(gameInterval);
-  }
-}
@@ -1,215 +1,305 @@
-// ui.js
-import { encryptFile, decryptFile } from './fileops.js';
-
-/**
- * Initialize all UI functionality after DOM is loaded
- */
-export function setupUI() {
-    toggleEncryptionOptions();
-    toggleInputMode();
-
-    const encryptionTypeEl = document.getElementById("encryption-type");
-    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 (
-        encryptionTypeEl && inputTextEl && formEl && removeFileBtn &&
-        clearAllBtn && generateBtn && copyPasswordBtn && toggleSwitch
-    ) {
-        encryptionTypeEl.addEventListener("change", toggleEncryptionOptions);
-        inputTextEl.addEventListener("input", () => {
-            toggleInputMode();
-            checkForPacman();
-        });
-        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");
-        const sharedLinkEl = document.getElementById("shared-link");
-
-        if (copySharedLinkBtn && sharedLinkEl) {
-            copySharedLinkBtn.addEventListener("click", () => {
-                navigator.clipboard.writeText(sharedLinkEl.textContent.trim()).then(() => {
-                    const feedback = document.getElementById("shared-link-feedback");
-                    if (feedback) {
-                        feedback.classList.remove("hidden");
-                        feedback.classList.add("show");
-
-                        setTimeout(() => {
-                            feedback.classList.remove("show");
-                            feedback.classList.add("hidden");
-                        }, 3000);
-                    }
-                });
-            });
-
-            sharedLinkEl.scrollIntoView({ behavior: "smooth" });
-        }
-    }
-}
-
-
-
-
-function toggleEncryptionOptions() {
-    const type = document.getElementById("encryption-type").value.trim().toLowerCase();
-    const passwordInputWrapper = document.getElementById("password-input");
-    const isAdvanced = type.includes("advanced");
-
-    if (passwordInputWrapper) {
-        if (isAdvanced) {
-            passwordInputWrapper.classList.remove("hidden");
-        } else {
-            passwordInputWrapper.classList.add("hidden");
-        }
-    }
-
-    updateToggleLabels();
-    toggleInputMode();
-}
-
-
-function updateToggleLabels() {
-    const type = document.getElementById("encryption-type")?.value;
-    const leftLabel = document.getElementById("toggle-left-label");
-    const rightLabel = document.getElementById("toggle-right-label");
-
-    if (!type || !leftLabel || !rightLabel) return;
-
-    const isAdvanced = type.toLowerCase().includes("advanced");
-    leftLabel.textContent = isAdvanced ? "Encrypt" : "Encode";
-    rightLabel.textContent = isAdvanced ? "Decrypt" : "Decode";
-}
-
-function toggleInputMode() {
-    const fileInput = document.getElementById("file-input");
-    const textValue = document.getElementById("input-text")?.value.trim();
-    const isAdvanced = document.getElementById("encryption-type")?.value === "advanced";
-
-    const textSection = document.getElementById("text-section");
-    const fileSection = document.getElementById("file-section");
-    const removeBtn = document.getElementById("remove-file-btn");
-
-    if (!fileInput || !textSection || !fileSection || !removeBtn) return;
-
-    const fileSelected = fileInput.files.length > 0;
-
-    textSection.style.display = fileSelected ? "none" : "flex";
-    fileSection.style.display = (isAdvanced && !textValue) ? "flex" : "none";
-    removeBtn.style.display = fileSelected ? "inline-block" : "none";
-}
-
-async function handleSubmit(event) {
-    event.preventDefault();
-
-    const encryptionType = document.getElementById("encryption-type")?.value;
-    const password = document.getElementById("password")?.value;
-    const fileInput = document.getElementById("file-input");
-    const isDecrypt = document.getElementById("operation-toggle").checked;
-    const operation = isDecrypt ? "decrypt" : "encrypt";
-
-    if (!encryptionType || !fileInput) return;
-
-    if (encryptionType === "advanced" && !password) {
-        return alert("Password is required for advanced encryption.");
-    }
-
-    if (fileInput.files.length > 0) {
-        return (operation === "encrypt")
-            ? encryptFile(fileInput, password)
-            : decryptFile(fileInput, password);
-    }
-
-    const payload = {
-        "encryption-type": encryptionType,
-        operation: operation,
-        message: document.getElementById("input-text")?.value,
-        password: password
-    };
-
-    try {
-        const response = await fetch("/", {
-            method: "POST",
-            headers: { "Content-Type": "application/json" },
-            body: JSON.stringify(payload)
-        });
-        const data = await response.json();
-        document.getElementById("output-text").value = data.result;
-    } catch (err) {
-        alert("Error processing request: " + err.message);
-    }
-}
-
-function removeFile() {
-    const fileInput = document.getElementById("file-input");
-    if (fileInput) fileInput.value = "";
-    const removeBtn = document.getElementById("remove-file-btn");
-    if (removeBtn) removeBtn.style.display = 'none';
-    toggleInputMode();
-}
-
-function generateRandomPassword() {
-    const charset = "ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz0123456789!@#$%^&*()_+[]{}|;:,.<>?/~";
-    const length = 30;
-    const password = Array.from({ length }, () =>
-        charset.charAt(Math.floor(Math.random() * charset.length))
-    ).join("");
-    const passwordField = document.getElementById("generated-password");
-    if (passwordField) passwordField.value = password;
-}
-
-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(() => {
-        feedback.classList.add("show");
-        setTimeout(() => {
-            feedback.classList.remove("show");
-        }, 3000);
-    });
-}
-
-function clearAll() {
-    const fields = ["input-text", "output-text", "file-input", "password"];
-    fields.forEach(id => {
-        const el = document.getElementById(id);
-        if (el) el.value = "";
-    });
-    removeFile();
-    toggleInputMode();
-    document.getElementById("pacman-section")?.style.setProperty("display", "none");
-    document.getElementById("encoding-section")?.style.setProperty("display", "block");
-}
-
-function checkForPacman() {
-    const val = document.getElementById("input-text").value.trim().toLowerCase();
-    const pacSection = document.getElementById("pacman-section");
-    const encSection = document.getElementById("encoding-section");
-
-    if (val.includes("pacman") && pacSection.style.display !== "block") {
-        pacSection.style.display = "block";
-        encSection.style.display = "none";
-        window.startPacman();
-    } else if (pacSection.style.display === "block" && !val.includes("pacman")) {
-        window.exitGame();
-    }
-}
-
-
-function startPacman() { }
-function exitGame() { }
+/**
+ * UI management module.
+ * Handles user interface interactions and form handling.
+ */
+
+import { encryptFile, decryptFile } from './fileops.js';
+
+// ===== UI Initialization =====
+export function setupUI() {
+    // Set initial state of remove button to hidden
+    const removeBtn = document.getElementById("remove-file-btn");
+    if (removeBtn) {
+        removeBtn.style.display = "none";
+    }
+    
+    initializeEventListeners();
+}
+
+// ===== Event Listeners =====
+function initializeEventListeners() {
+    const elements = {
+        encryptionType: document.getElementById("encryption-type"),
+        inputText: document.getElementById("input-text"),
+        form: document.getElementById("crypto-form"),
+        removeFileBtn: document.getElementById("remove-file-btn"),
+        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", () => {
+        console.log("Mode:", elements.toggleSwitch.checked ? "Decrypt" : "Encrypt");
+    });
+    
+      
+
+    // 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";
+            }
+        });
+    }
+
+    setupShareLinkListeners(elements);
+}
+
+function setupShareLinkListeners(elements) {
+    if (elements.copyShareBtn && elements.shareLink) {
+        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.style.display = "block";
+                    feedback.classList.add("show");
+                    setTimeout(() => {
+                        feedback.classList.remove("show");
+                        setTimeout(() => {
+                            feedback.style.display = "none";
+                        }, 300);
+                    }, 3000);
+                }
+            });
+        });
+    }
+}
+
+// ===== 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) {
+        if (isAdvanced) {
+            passwordInputWrapper.classList.remove("hidden");
+        } else {
+            passwordInputWrapper.classList.add("hidden");
+        }
+    }
+
+    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");
+    const rightLabel = document.getElementById("toggle-right-label");
+
+    if (!type || !leftLabel || !rightLabel) return;
+
+    const isAdvanced = type.toLowerCase().includes("advanced");
+    leftLabel.textContent = isAdvanced ? "Encrypt" : "Encode";
+    rightLabel.textContent = isAdvanced ? "Decrypt" : "Decode";
+}
+
+function toggleInputMode() {
+    const fileInput = document.getElementById("file-input");
+    const textValue = document.getElementById("input-text")?.value.trim();
+    const isAdvanced = document.getElementById("encryption-type")?.value === "advanced";
+
+    const textSection = document.getElementById("text-section");
+    const fileSection = document.getElementById("file-section");
+    const removeBtn = document.getElementById("remove-file-btn");
+
+    if (!fileInput || !textSection || !fileSection || !removeBtn) return;
+
+    const fileSelected = fileInput.files.length > 0;
+
+    textSection.style.display = fileSelected ? "none" : "flex";
+    fileSection.style.display = (isAdvanced && !textValue) ? "flex" : "none";
+    removeBtn.style.display = fileSelected ? "inline-block" : "none";
+}
+
+// ===== Form Handling =====
+async function handleSubmit(event) {
+    event.preventDefault();
+
+    const encryptionType = document.getElementById("encryption-type")?.value;
+    const password = document.getElementById("password")?.value;
+    const fileInput = document.getElementById("file-input");
+    const isDecrypt = document.getElementById("operation-toggle").checked;
+    const operation = isDecrypt ? "decrypt" : "encrypt";
+
+    if (!encryptionType || !fileInput) return;
+
+    if (encryptionType === "advanced" && !password) {
+        return alert("Password is required for advanced encryption.");
+    }
+
+    if (fileInput.files.length > 0) {
+        return (operation === "encrypt")
+            ? encryptFile(fileInput, password)
+            : decryptFile(fileInput, password);
+    }
+
+    await handleTextOperation(encryptionType, operation, password);
+}
+
+async function handleTextOperation(encryptionType, operation, password) {
+    const payload = {
+        "encryption-type": encryptionType,
+        operation: operation,
+        message: document.getElementById("input-text")?.value,
+        password: password
+    };
+
+    try {
+        const response = await fetch("/", {
+            method: "POST",
+            headers: { "Content-Type": "application/json" },
+            body: JSON.stringify(payload)
+        });
+        const data = await response.json();
+        document.getElementById("output-text").value = data.result;
+    } catch (err) {
+        alert("Error processing request: " + err.message);
+    }
+}
+
+// ===== Utility Functions =====
+function removeFile() {
+    const fileInput = document.getElementById("file-input");
+    if (fileInput) fileInput.value = "";
+    const removeBtn = document.getElementById("remove-file-btn");
+    if (removeBtn) removeBtn.style.display = 'none';
+    toggleInputMode();
+}
+
+function generateRandomPassword() {
+    const charset = "ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz0123456789!@#$%^&*()_+[]{}|;:,.<>?/~";
+    const length = 30;
+    const password = Array.from({ length }, () =>
+        charset.charAt(Math.floor(Math.random() * charset.length))
+    ).join("");
+    const passwordField = document.getElementById("generated-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 || !el.value) return;
+
+    // Create a temporary textarea element
+    const textarea = document.createElement('textarea');
+    textarea.value = el.value;
+    textarea.style.position = 'fixed';
+    textarea.style.opacity = '0';
+    document.body.appendChild(textarea);
+    
+    // Select and copy the text
+    textarea.select();
+    textarea.setSelectionRange(0, 99999); // For mobile devices
+    
+    try {
+        // Try using the modern clipboard API first
+        navigator.clipboard.writeText(el.value).then(() => {
+            showFeedback(feedback);
+        }).catch(() => {
+            // Fallback to execCommand for older browsers
+            document.execCommand('copy');
+            showFeedback(feedback);
+        });
+    } catch (err) {
+        // Final fallback
+        document.execCommand('copy');
+        showFeedback(feedback);
+    }
+    
+    // Clean up
+    document.body.removeChild(textarea);
+}
+
+function showFeedback(feedback) {
+    if (feedback) {
+        feedback.style.display = "block";
+        feedback.classList.add("show");
+        setTimeout(() => {
+            feedback.classList.remove("show");
+            setTimeout(() => {
+                feedback.style.display = "none";
+            }, 300);
+        }, 3000);
+    }
+}
+
+function clearAll() {
+    const fields = ["input-text", "output-text", "file-input", "password"];
+    fields.forEach(id => {
+        const el = document.getElementById(id);
+        if (el) el.value = "";
+    });
+    removeFile();
+    toggleInputMode();
+    document.getElementById("pacman-section")?.style.setProperty("display", "none");
+    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");
+    const encSection = document.getElementById("encoding-section");
+
+    if (val.includes("pacman") && pacSection.style.display !== "block") {
+        pacSection.style.display = "block";
+        encSection.style.display = "none";
+        window.startPacman();
+    } else if (pacSection.style.display === "block" && !val.includes("pacman")) {
+        window.exitGame();
+    }
+}
+
+function startPacman() { }
+function exitGame() { }
+
+
@@ -3,30 +3,43 @@
 <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') }}" />
-    <link href="https://fonts.googleapis.com/css2?family=Poppins:wght@300;400;600&display=swap" rel="stylesheet" />
+    
+    <!-- Stylesheets -->
    <link rel="stylesheet" href="{{ url_for('static', filename='css/styles.css') }}" />
+    <link href="https://fonts.googleapis.com/css2?family=Press+Start+2P&display=swap" rel="stylesheet">
+    
+    <!-- Scripts -->
    <script type="module" src="{{ url_for('static', filename='js/main.js') }}"></script>
 </head>
 <body class="dark">
+    <!-- Header -->
+    <header class="card logo-header">
+        <div class="logo-container">
+          <img src="{{ url_for('static', filename='img/PacCrypt.png') }}" alt="PacCrypt Logo" />
+          <div class="logo-text">
+            <h1>PACCRYPT</h1>
+            <p>Securely Share Text and Files</p>
+          </div>
+        </div>
+      </header> 

-    <header class="card mb-5">
-        <h1>PacCrypt</h1>
-        <p>Secure Encoding, Encryption and Password Generation</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>
+            <h2 style="color: #00ff99; font-size: 2.5em;">403 - Forbidden</h2>
            <p class="mt-4" style="font-size: 1.2em; color: #cccccc;">
-                Looks like this area is locked behind a secret ghost door! 🛡️👻
+                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>
+                    <button type="button">Return Home</button>
                </a>
            </div>
        </section>
@@ -36,10 +49,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"
-                 alt="GitHub Logo" width="100" />
+            <img src="\static\img\Github_logo.png" alt="GitHub Logo" width="100" />
        </a>
    </footer>
-
 </body>
 </html>
@@ -3,27 +3,40 @@
 <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') }}" />
-    <link href="https://fonts.googleapis.com/css2?family=Poppins:wght@300;400;600&display=swap" rel="stylesheet" />
+    
+    <!-- Stylesheets -->
    <link rel="stylesheet" href="{{ url_for('static', filename='css/styles.css') }}" />
+    <link href="https://fonts.googleapis.com/css2?family=Press+Start+2P&display=swap" rel="stylesheet">
+    
+    <!-- Scripts -->
    <script type="module" src="{{ url_for('static', filename='js/main.js') }}"></script>
 </head>
 <body class="dark">
+    <!-- Header -->
+    <header class="card logo-header">
+        <div class="logo-container">
+          <img src="{{ url_for('static', filename='img/PacCrypt.png') }}" alt="PacCrypt Logo" />
+          <div class="logo-text">
+            <h1>PACCRYPT</h1>
+            <p>Securely Share Text and Files</p>
+          </div>
+        </div>
+      </header> 

-    <header class="card mb-5">
-        <h1>PacCrypt</h1>
-        <p>Secure Encoding, Encryption and Password Generation</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>
+            <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 +49,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"
-                 alt="GitHub Logo" width="100" />
+            <img src="\static\img\Github_logo.png" alt="GitHub Logo" width="100" />
        </a>
    </footer>
-
 </body>
 </html>
@@ -3,28 +3,41 @@
 <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') }}" />
-    <link href="https://fonts.googleapis.com/css2?family=Poppins:wght@300;400;600&display=swap" rel="stylesheet" />
+    
+    <!-- Stylesheets -->
    <link rel="stylesheet" href="{{ url_for('static', filename='css/styles.css') }}" />
+    <link href="https://fonts.googleapis.com/css2?family=Press+Start+2P&display=swap" rel="stylesheet">
+    
+    <!-- Scripts -->
    <script type="module" src="{{ url_for('static', filename='js/main.js') }}"></script>
 </head>
 <body class="dark">
+    <!-- Header -->
+    <header class="card logo-header">
+        <div class="logo-container">
+          <img src="{{ url_for('static', filename='img/PacCrypt.png') }}" alt="PacCrypt Logo" />
+          <div class="logo-text">
+            <h1>PACCRYPT</h1>
+            <p>Securely Share Text and Files</p>
+          </div>
+        </div>
+      </header> 

-    <header class="card mb-5">
-        <h1>PacCrypt</h1>
-        <p>Secure Encoding, Encryption and Password Generation</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 +50,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"
-                 alt="GitHub Logo" width="100" />
+            <img src="\static\img\Github_logo.png" alt="GitHub Logo" width="100" />
        </a>
    </footer>
-
 </body>
 </html>
@@ -1,135 +1,117 @@
 <!DOCTYPE html>
 <html lang="en">
 <head>
-    <meta charset="UTF-8">
-    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <meta charset="UTF-8" />
+    <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">
-    <link rel="stylesheet" href="{{ url_for('static', filename='css/styles.css') }}">
+
+    <!-- Favicon -->
+    <link rel="icon" type="image/png" href="{{ url_for('static', filename='img/PacCrypt.png') }}" />
+    
+    <!-- Stylesheets -->
+    <link rel="stylesheet" href="{{ url_for('static', filename='css/styles.css') }}" />
+    <link href="https://fonts.googleapis.com/css2?family=Press+Start+2P&display=swap" rel="stylesheet">
+    
+    <!-- Scripts -->
    <script type="module" src="{{ url_for('static', filename='js/main.js') }}"></script>
 </head>
 <body class="dark">

-    <header class="card mb-5">
-        <h1>PacCrypt Admin Panel</h1>
-        <p>Site Overview & Controls</p>
-    </header>
+    <!-- Header -->
+    <header class="card logo-header">
+        <div class="logo-container">
+          <img src="{{ url_for('static', filename='img/PacCrypt.png') }}" alt="PacCrypt Logo" />
+          <div class="logo-text">
+            <h1>PACCRYPT</h1>
+            <p>ADMIN PANEL</p>
+          </div>
+        </div>
+      </header>  

+    <!-- Main Content -->
    <main>
-
-        <!-- Site Map -->
-        <section class="card form-group">
-            <h2>🔍 Site Map</h2>
-            <ul style="list-style: none; padding-left: 0;">
-                {% for route in routes %}
-                <li style="margin-bottom: 5px;">🔗 <code>{{ route }}</code></li>
-                {% endfor %}
-            </ul>
-
-            <div class="button-group mt-4">
-                <a href="{{ url_for('restart_server') }}">
-                    <button type="button">🔁 Restart Server</button>
-                </a>
-                <a href="{{ url_for('admin_logout') }}">
-                    <button type="button">🚪 Log Out</button>
-                </a>
+        <!-- Site Map Section -->
+        <section id="sitemap-section" class="card form-group">
+            <h2>Server Management</h2>
+            
+            <div class="sitemap-header">
+                <button onclick="toggleSitemap()" style="margin-bottom: 10px;">Show Site Map</button>
+            </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>

-            <form action="{{ url_for('admin_reset') }}" method="POST" onsubmit="return confirm('Are you sure you want to reset admin credentials?');">
-                <button type="submit" class="mt-4" style="background-color: #b90000;">⚠️ Reset Admin</button>
-            </form>
-
-            <form action="{{ url_for('admin_clear_uploads') }}" method="POST"
-                  onsubmit="return confirm('Are you sure you want to delete ALL uploaded files?');">
-                <button type="submit">🗑 Clear All Uploaded Files</button>
-            </form>
-
-            {% 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 %}
+<!-- Server Management Buttons -->
+            <div class="admin-button-grid">
+                <button onclick="restartServer()">Restart Server</button>
+                <form action="{{ url_for('admin_logout') }}" method="GET" style="display: inline;">
+                    <button type="submit">Log Out</button>
+                </form>
+                <button onclick="updateServer()">Pull Latest Changes</button>
+                <form action="{{ url_for('admin_settings') }}" method="GET" style="display: inline;">
+                    <button type="submit">Manage Upload Settings</button>
+                </form>
+                <button onclick="resetAdmin()" class="danger-button">Reset Admin</button>
+                <button onclick="clearUploads()" class="danger-button">Clear Uploaded Files</button>
+            </div>
+  

+            <!-- Flash Messages -->
+            <div id="admin-feedback" class="copy-feedback" style="display: none;"></div>
        </section>

-        <!-- Change Admin Password -->
-        <section class="card form-group mt-5">
-            <h2>🔑 Change Admin Password</h2>
+        <!-- Password Change Section -->
+        <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="new_password" placeholder="New Password" required>
+                <input type="password" name="current_password" placeholder="Current Password" required />
+                <input type="password" name="new_password" placeholder="New Password" required />
                <button type="submit">Update Password</button>
            </form>
        </section>

-        <!-- Update Server -->
-        <section class="card form-group mt-5">
-            <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>
-                <li>📅 Server Time: <code>{{ server_info.time }}</code></li>
-                <li>🐍 Python Version: <code>{{ server_info.python }}</code></li>
-                <li>⚙️ Flask Debug Mode: <code>{{ server_info.debug }}</code></li>
+        <!-- Server Status Section -->
+        <section id="server-status-section" class="card form-group">
+            <h2>Server Status</h2>
+            <ul style="width: 400px;">
+                <li>Uptime: <code>0 days, 11 hours, 47 minutes</code></li>
+                <li>Server Time: <code>2025-05-14 14:32:18</code></li>
+                <li>Python Version: <code>3.13.3</code></li>
+                <li>Flask Debug Mode: <code>True</code></li>
            </ul>
        </section>

-        <!-- Server Logs -->
-        <section class="card form-group mt-5">
-            <h2>📜 Server Logs</h2>
-            <button onclick="toggleLogs()" style="margin-bottom: 10px;">🔽 Show/Hide Logs</button>
+        <!-- Server Logs Section -->
+        <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"
-                 alt="GitHub Logo" width="100" />
+            <img src="\static\img\Github_logo.png" alt="GitHub Logo" width="100" />
        </a>
        <a href="{{ url_for('sitemap') }}">
-            <img src="\static\img\sitemap.png"
-                 alt="Sitemap Png" width="55" />
+            <img src="\static\img\sitemap.png" alt="Sitemap Png" width="55" />
        </a>
    </footer>

@@ -140,10 +122,10 @@
        const logLoader = document.getElementById('logLoader');
        if (logContainer.style.display === 'none') {
            logLoader.style.display = 'block';
-            const response = await fetch('{{ url_for('admin_logs') }}');
+            const response = await fetch("{{ url_for('admin_logs') }}");
            const data = await response.json();
            logLoader.style.display = 'none';
-            logContainer.innerText = data.logs.join('\\n');
+            logContainer.innerText = data.logs.join('\n');
            logContainer.style.display = 'block';
        } else {
            logContainer.style.display = 'none';
@@ -151,5 +133,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>
@@ -1,34 +1,45 @@
 <!DOCTYPE html>
 <html lang="en">
 <head>
-  <meta charset="UTF-8">
-  <meta name="viewport" content="width=device-width, initial-scale=1.0">
-  <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">
-  <link rel="stylesheet" href="{{ url_for('static', filename='css/styles.css') }}">
-  <script type="module" src="{{ url_for('static', filename='js/main.js') }}"></script>
+    <meta charset="UTF-8" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <meta name="description" content="PacCrypt - Admin Login" />
+    <title>Admin Login - PacCrypt</title>
+
+    <!-- Favicon -->
+    <link rel="icon" type="image/png" href="{{ url_for('static', filename='img/PacCrypt.png') }}" />
+    
+    <!-- Stylesheets -->
+    <link rel="stylesheet" href="{{ url_for('static', filename='css/styles.css') }}" />
+    <link href="https://fonts.googleapis.com/css2?family=Press+Start+2P&display=swap" rel="stylesheet">
+    
+    <!-- Scripts -->
+    <script type="module" src="{{ url_for('static', filename='js/main.js') }}"></script>
 </head>
 <body class="dark">
-
-    <header class="card mb-5">
+    <!-- Header -->
+    <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="password" name="password" placeholder="Password" required>
+                <input type="text" name="username" placeholder="Username" 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"
-                 alt="GitHub Logo" width="100" />
+            <img src="\static\img\Github_logo.png" alt="GitHub Logo" width="100" />
        </a>
    </footer>
-
 </body>
 </html>
@@ -1,24 +1,33 @@
 <!DOCTYPE html>
 <html lang="en">
 <head>
-    <meta charset="UTF-8">
-    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <meta charset="UTF-8" />
+    <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">
-    <link rel="stylesheet" href="{{ url_for('static', filename='css/styles.css') }}">
+
+    <!-- Favicon -->
+    <link rel="icon" type="image/png" href="{{ url_for('static', filename='img/PacCrypt.png') }}" />
+    
+    <!-- Stylesheets -->
+    <link rel="stylesheet" href="{{ url_for('static', filename='css/styles.css') }}" />
+    <link href="https://fonts.googleapis.com/css2?family=Press+Start+2P&display=swap" rel="stylesheet">
+    
 </head>
 <body class="dark">
-
-    <header class="card mb-5">
+    <!-- Header -->
+    <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 +38,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 +64,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"
-                 alt="GitHub Logo" width="100" />
+            <img src="\static\img\Github_logo.png" alt="GitHub Logo" width="100" />
        </a>
    </footer>
-
 </body>
 </html>
@@ -1,36 +1,52 @@
 <!DOCTYPE html>
 <html lang="en">
 <head>
-    <meta charset="UTF-8">
-    <meta name="viewport" content="width=device-width, initial-scale=1.0">
-    <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">
-    <link rel="stylesheet" href="{{ url_for('static', filename='css/styles.css') }}">
+    <meta charset="UTF-8" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <meta name="description" content="PacCrypt - Admin Setup" />
+    <title>PacCrypt - Admin Setup</title>
+
+    <!-- Favicon -->
+    <link rel="icon" type="image/png" href="{{ url_for('static', filename='img/PacCrypt.png') }}" />
+    
+    <!-- Stylesheets -->
+    <link rel="stylesheet" href="{{ url_for('static', filename='css/styles.css') }}" />
+    <link href="https://fonts.googleapis.com/css2?family=Press+Start+2P&display=swap" rel="stylesheet">
+    
+    <!-- Scripts -->
    <script type="module" src="{{ url_for('static', filename='js/main.js') }}"></script>
 </head>
 <body class="dark">
+    <!-- Header -->
+    <header class="card logo-header">
+        <div class="logo-container">
+          <img src="{{ url_for('static', filename='img/PacCrypt.png') }}" alt="PacCrypt Logo" />
+          <div class="logo-text">
+            <h1>PACCRYPT</h1>
+            <p>Admin Setup</p>
+          </div>
+        </div>
+      </header>  

-    <header class="card mb-5">
-        <h1>PacCrypt Admin</h1>
-        <p>Secure Admin Setup</p>
-    </header>
-
+    <!-- Main Content -->
    <main>
+        <!-- Setup Form Section -->
        <section class="card form-group">
-            <h2>🛡️ Create Admin Account</h2>
+            <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="password" name="password" placeholder="Password" required>
+                <input type="text" name="username" placeholder="Username" required />
+                <input type="password" name="password" placeholder="Password" required />
                <div class="button-group mt-3">
-                    <button type="submit">📝 Set Credentials</button>
+                    <button type="submit">Set Credentials</button>
                </div>
            </form>
        </section>
@@ -40,10 +56,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"
-                 alt="GitHub Logo" width="100" />
+            <img src="\static\img\Github_logo.png" alt="GitHub Logo" width="100" />
        </a>
    </footer>
-
 </body>
 </html>
@@ -3,31 +3,43 @@
 <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <meta name="description" content="PacCrypt - Secure text and file encryption with password generation" />
    <title>PacCrypt</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">
+    <link href="https://fonts.googleapis.com/css2?family=Press+Start+2P&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 logo-header">
+        <div class="logo-container">
+          <img src="{{ url_for('static', filename='img/PacCrypt.png') }}" alt="PacCrypt Logo" />
+          <div class="logo-text">
+            <h1>PACCRYPT</h1>
+            <p>Securely Share Text and Files</p>
+          </div>
+        </div>
+      </header>  

-    <header class="card mb-5">
-        <h1>PacCrypt</h1>
-        <p>Encrypt and share your text or files securely</p>
-    </header>
-
+    <!-- Main Content -->
    <main>
-
-        <!-- Password Generator -->
-        <section class="card form-group mt-5">
-            <h2>🔑 Password Generator</h2>
+        <!-- Password Generator Section -->
+        <section id="password-generator-section" class="card form-group">
+            <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="generate-btn">Generate</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 +55,11 @@
            </div>
        </section>

-
-        <!-- Encrypt & Decrypt Section -->
-        <section class="card form-group" id="encoding-section">
-            <h2>🔐 Encrypt & Decrypt</h2>
+        <!-- Encryption/Decryption Section -->
+        <section id="encoding-section" class="card form-group">
+            <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,46 +68,55 @@
                    </select>
                </div>

+                <!-- Operation Toggle -->
                <div class="toggle-container">
-                    <span id="toggle-left-label">Encrypt</span>
-                    <label class="switch">
-                        <input type="checkbox" id="operation-toggle" />
-                        <span class="slider round"></span>
+                    <span class="toggle-label">Encrypt</span>
+                    <label class="material-switch">
+                      <input type="checkbox" id="operation-toggle">
+                      <span class="material-slider"></span>
                    </label>
-                    <span id="toggle-right-label">Decrypt</span>
-                </div>
+                    <span class="toggle-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>
+                    <button type="button" id="remove-file-btn">Remove File</button>
                </div>

-                <div class="button-group mt-3">
-                    <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>
+                <!-- Action Buttons -->
                <div class="button-group">
-                    <button type="button" id="copy-output-btn">📋 Copy Output</button>
+                    <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 Output"></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 -->
-        <section class="card form-group mt-5">
-            <h2>📤 PacCrypt Sharing</h2>
-            <p>Securely share a file with encryption and a pickup password.</p>
+        <!-- File Sharing Section -->
+        <section id="sharing-section" class="card form-group">
+            <h2>PacCrypt Share</h2>
+            <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 +124,12 @@
                <li>
                    {{ message | safe }}
                    {% if "pickup" in message %}
-                    <br />
-                    <span id="shared-link">{{ message.split(" at ")[1] }}</span>
-                    <button type="button" id="copy-shared-link">📋 Copy Link</button>
-                    <div id="shared-link-feedback" class="copy-feedback">Copied to clipboard!</div>
+                    <div class="share-link-container">
+                        <a id="share-link" href="{{ message.split(' at ')[1] }}" target="_blank">{{ message.split(" at ")[1] }}</a>
+                        <!--- <span id="share-link">{{ message.split(" at ")[1] }}</span> --->
+                        <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 +138,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">
-                    <button type="submit">🔒 Upload and Generate Link</button>
+                <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"
-                 alt="GitHub Logo" width="100" />
+            <img src="\static\img\Github_logo.png" alt="GitHub Logo" width="100" />
        </a>
    </footer>
-
 </body>
 </html>
@@ -1,27 +1,35 @@
 <!DOCTYPE html>
 <html lang="en">
 <head>
-    <meta charset="UTF-8">
-    <meta name="viewport" content="width=device-width, initial-scale=1.0">
-    <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">
-    <link rel="stylesheet" href="{{ url_for('static', filename='css/styles.css') }}">
+    <meta charset="UTF-8" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <meta name="description" content="PacCrypt - Secure file pickup and decryption" />
+    <title>PacCrypt - Secure File Pickup</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=Press+Start+2P&display=swap" rel="stylesheet">
 </head>
 <body class="dark">
-
-    <header class="card mb-5">
-        <h1>PacCrypt Pickup</h1>
-        <p>Enter passwords to retrieve your file securely</p>
+    <!-- Header -->
+    <header class="card">
+        <h1>PacCrypt</h1>
+        <p>Secure File Pickup and Decryption</p>
    </header>

+    <!-- Main Content -->
    <main>
-        <section class="card form-group">
-            <h2>🔐 Decrypt and Download</h2>
-
+        <!-- File Pickup Section -->
+        <section id="pickup-section" class="card form-group">
+            <h2>🔐 File Pickup</h2>
+            
+            <!-- Flash Messages -->
            {% with messages = get_flashed_messages() %}
            {% if messages %}
-            <ul style="color: red;">
+            <ul style="color: lime; list-style: none; padding-left: 0;">
                {% for message in messages %}
                <li>{{ message }}</li>
                {% endfor %}
@@ -29,17 +37,49 @@
            {% endif %}
            {% endwith %}

-            <form method="POST">
-                <input type="password" name="pickup_password" placeholder="Pickup Password" required>
-                <input type="password" name="enc_password" placeholder="Encryption Password" required>
-                <div class="button-group mt-3">
+            <!-- File Info -->
+            <div class="form-group">
+                <p style="color: #00ff99; margin-bottom: 15px;">File ID: <code>{{ file_id }}</code></p>
+            </div>
+
+            <!-- Pickup Form -->
+            <form method="POST" class="form-group">
+                <div class="form-group">
+                    <input type="password" 
+                           name="pickup_password" 
+                           placeholder="Pickup Password" 
+                           required 
+                           autocomplete="off" />
+                </div>
+                
+                <div class="form-group">
+                    <input type="password" 
+                           name="enc_password" 
+                           placeholder="Encryption Password" 
+                           required 
+                           autocomplete="off" />
+                </div>
+
+                <div class="button-group">
                    <button type="submit">📥 Decrypt and Download</button>
                </div>
            </form>
        </section>

-        <section class="card form-group mt-5">
-            <p style="font-size: 0.9em; color: gray;">Link ID: <code>{{ file_id }}</code></p>
+        <!-- Security Notice Section -->
+        <section id="security-notice-section" class="card form-group">
+            <h2>🛡️ Security Notice</h2>
+            <p style="color: #00ff99; text-align: center;">
+                Make sure you're on the correct domain before entering any passwords.<br>
+                Your file will be permanently deleted after download.
+            </p>
+        </section>
+
+        <!-- Link ID Section -->
+        <section id="link-id-section" class="card form-group">
+            <p style="color: #00ff99; text-align: center; font-family: monospace; font-size: 1.1em;">
+                Link ID: <code>{{ file_id }}</code>
+            </p>
        </section>
    </main>

@@ -47,10 +87,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"
-                 alt="GitHub Logo" width="100" />
+            <img src="\static\img\Github_logo.png" alt="GitHub Logo" width="100" />
        </a>
    </footer>
-
 </body>
 </html>
Author	SHA1	Message	Date
Tyler	bb8690b74f	UI Changes and better phone experience.	2025-05-14 05:00:12 -10:00
Tyler	ed11ccd2a1	Update README.md	2025-05-04 13:30:40 -10:00
Tyler	db00538aee	Small changed Updated README and Logo Change	2025-05-04 13:29:08 -10:00
Tyler	05a9ada8d9	Update README.md	2025-05-01 21:58:23 -10:00
Tyler	61193320d4	Actually working swipe controls for pacman game	2025-05-01 21:49:06 -10:00
Tyler	1c1fed1dd5	reverting swipe controls	2025-05-01 21:23:13 -10:00
Tyler	1edd1c858c	Delete static/js/script.js	2025-05-01 21:20:15 -10:00
Tyler	1d55d4f4ce	Swipe controls?	2025-05-01 21:14:34 -10:00
Tyler	7aefd5aff8	small fixes	2025-05-01 20:59:46 -10:00
Tyler	271b4cdc91	Delete restart.bat	2025-05-01 20:59:16 -10:00
Tyler	90dcb7ecb8	small things i forgot on my last push	2025-05-01 19:01:13 -10:00
Tyler	7ec213fad0	V .4.1	2025-05-01 18:46:29 -10:00
Tyler	766386501b	Small fixes	2025-04-29 17:43:11 -10:00