diff --git a/README.md b/README.md
index 0c8b228..b0cc6f4 100644
--- a/README.md
+++ b/README.md
@@ -1,268 +1,268 @@
-# 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-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)
diff --git a/static/css/styles.css b/static/css/styles.css
index ffa72a6..eb9977a 100644
--- a/static/css/styles.css
+++ b/static/css/styles.css
@@ -7,9 +7,11 @@
/* ===== 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: 40px !important;
+ 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 {
@@ -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;
}
@@ -73,18 +159,27 @@ main {
}
/* ===== 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: 1px solid #00ff99;
+ padding-inline: 20px;
+ padding-block: 12px;
+ border: 1px solid #28E060;
border-radius: 8px;
background-color: #2c2f33;
- color: #00ff99;
- font-size: 1em;
+ color: #28E060;
text-align: left;
transition: 0.3s;
}
@@ -102,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 10px rgba(0, 255, 153, 0.8);
+ box-shadow: 0 0 10px #28E060;
}
/* ===== Textareas Specific Widths ===== */
@@ -147,37 +252,126 @@ select:focus {
}
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: auto;
min-width: 225px;
max-width: 300px;
+ height: 45px;
}
button:hover {
- background-color: #00ff99;
+ background-color: #28E060;
color: #121212;
- box-shadow: 0 0 10px rgba(0, 255, 153, 0.4);
+ box-shadow: 0 0 10px #28E060;
}
.danger-button {
background-color: #5f3131;
- box-shadow: 0 0 20px rgba(185, 0, 0, 0.4);
+ box-shadow: 0 0 10px #991717;
}
.danger-button:hover {
- background-color: #ff0000;
+ background-color: #af0000;
color: #121212;
- box-shadow: 0 0 40px rgb(255, 0, 0);
+ 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;
@@ -211,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;
@@ -223,7 +417,7 @@ button {
content: "";
height: 22px;
width: 22px;
- background-color: #00ff99;
+ background-color: #28E060;
border-radius: 50%;
transition: .4s;
transform: translateX(2px);
@@ -243,7 +437,7 @@ input:checked + .slider::before {
display: flex;
justify-content: space-between;
font-size: 0.9em;
- color: #00ff99;
+ color: #28E060;
margin-top: 5px;
}
@@ -265,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;
@@ -306,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);
+ box-shadow: 0 0 15px #28E060;
width: 100%;
max-width: 800px;
- margin-top: 40px;
+ margin-top: 25px;
}
footer a {
- color: #00ff99;
+ color: #28E060;
text-decoration: none;
}
@@ -338,10 +532,11 @@ footer {
/* ===== Copy Feedback Message ===== */
.copy-feedback, #shared-link-feedback {
background-color: #2c2f33;
- padding: 6px 12px;
+ padding-inline: 12px;
+ padding-block: 6px;
margin-top: 6px;
border-radius: 6px;
- color: #00ff99;
+ color: #28E060;
font-size: 0.9em;
display: none;
opacity: 0;
@@ -369,9 +564,10 @@ footer {
#share-link {
display: block;
background-color: #2c2f33;
- padding: 8px 16px;
+ padding-inline: 16px;
+ padding-block: 8px;
border-radius: 6px;
- color: #00ff99;
+ color: #28E060;
font-size: 0.9em;
text-align: center;
max-width: 720px;
@@ -395,6 +591,7 @@ form {
}
form input {
+ min-height: 50px;
width: 80%;
max-width: 500px;
text-align: left;
@@ -411,7 +608,7 @@ section.card {
#pacmanCanvas {
background-color: black;
display: block;
- border: 2px solid #00ff99;
+ border: 2px solid #28E060;
border-radius: 12px;
max-width: 700px;
width: 100%;
@@ -533,7 +730,7 @@ section.card {
padding: 25px;
background-color: #1e1e1e;
border-radius: 12px;
- box-shadow: 0 0 15px rgba(0, 255, 153, 0.4);
+ box-shadow: 0 0 15px #28E060;
}
.sitemap-header {
@@ -544,17 +741,18 @@ section.card {
}
.sitemap-header h3 {
- color: #00ff99;
+ color: #28E060;
margin: 0;
}
.collapse-btn {
background: none;
border: none;
- color: #00ff99;
+ color: #28E060;
font-size: 1.2em;
cursor: pointer;
- padding: 5px 10px;
+ padding-inline: 10px;
+ padding-block: 5px;
transition: transform 0.3s ease;
}
@@ -580,7 +778,7 @@ section.card {
padding: 8px;
background-color: #2c2f33;
border-radius: 6px;
- color: #00ff99;
+ color: #28E060;
}
#server-logs-section button {
@@ -590,14 +788,14 @@ section.card {
}
#logLoader {
- color: #00ff99;
+ color: #28E060;
text-align: center;
padding: 10px;
}
#logContainer {
background-color: #2c2f33;
- color: #00ff99;
+ color: #28E060;
padding: 15px;
border-radius: 8px;
max-height: 400px;
@@ -611,7 +809,7 @@ section.card {
padding: 25px;
background-color: #1e1e1e;
border-radius: 12px;
- box-shadow: 0 0 15px rgba(0, 255, 153, 0.4);
+ box-shadow: 0 0 15px #28E060;
}
/* ===== Mobile Responsive Adjustments ===== */
diff --git a/static/js/ui.js b/static/js/ui.js
index 7f41a61..1778ede 100644
--- a/static/js/ui.js
+++ b/static/js/ui.js
@@ -52,7 +52,11 @@ function setupElementListeners(elements) {
elements.generateBtn.addEventListener("click", generateRandomPassword);
elements.copyPasswordBtn.addEventListener("click", () => copyToClipboard("generated-password", "password-copy-feedback"));
elements.copyOutputBtn?.addEventListener("click", () => copyToClipboard("output-text", "output-copy-feedback"));
- elements.toggleSwitch.addEventListener("change", updateToggleLabels);
+ elements.toggleSwitch.addEventListener("change", () => {
+ console.log("Mode:", elements.toggleSwitch.checked ? "Decrypt" : "Encrypt");
+ });
+
+
// Add file input change listener
const fileInput = document.getElementById("file-input");
diff --git a/templates/403.html b/templates/403.html
index 4b3b163..dd4f0ce 100644
--- a/templates/403.html
+++ b/templates/403.html
@@ -10,31 +10,36 @@
-
+
-
+
diff --git a/templates/404.html b/templates/404.html
index e71c1e0..ce6247d 100644
--- a/templates/404.html
+++ b/templates/404.html
@@ -10,25 +10,30 @@
-
+
-
+
 }})
+